/* Toolsfully photography tools — the pastel layer.
 *
 * One stylesheet shared by the photography pages, on top of style.css. It
 * gives each tool a soft tinted card, a scenario picker, one control per
 * setting, an answer written as a sentence, and the technical fields folded
 * away — so a beginner can get a usable number without knowing the jargon.
 *
 * Colours: pastel grounds carry dark ink text; the accent is only ever used
 * for marks, rules and focus. Accents were run through the palette validator
 * against these grounds, in both themes:
 *   light #0f7a5a #3459c9 #a0338f #c2600f on #f4fbf7 — all checks pass
 *   dark  #35a87f #6286e0 #c062ab #c87a3c on #1b2320 — all checks pass
 */

.ph {
  --ph-accent: #0f7a5a;
  --ph-soft: #eef8f3;
  --ph-softer: #f7fcfa;
  --ph-line: #c2e4d6;
  --ph-shadow: color-mix(in srgb, var(--ph-accent) 22%, transparent);
}
.ph[data-tone="blue"] { --ph-accent: #3459c9; --ph-soft: #eef2fd; --ph-softer: #f7f9fe; --ph-line: #c9d6f6; }
.ph[data-tone="plum"] { --ph-accent: #a0338f; --ph-soft: #fbeef7; --ph-softer: #fdf7fb; --ph-line: #eecbe5; }
.ph[data-tone="amber"] { --ph-accent: #c2600f; --ph-soft: #fdf2e8; --ph-softer: #fefaf5; --ph-line: #f2d6ba; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ph {
    --ph-accent: #35a87f; --ph-soft: #15231e; --ph-softer: #121a17; --ph-line: #27443a;
  }
  :root:where(:not([data-theme="light"])) .ph[data-tone="blue"] { --ph-accent: #6286e0; --ph-soft: #171c2b; --ph-softer: #141822; --ph-line: #2c3752; }
  :root:where(:not([data-theme="light"])) .ph[data-tone="plum"] { --ph-accent: #c062ab; --ph-soft: #241825; --ph-softer: #1d141e; --ph-line: #452a44; }
  :root:where(:not([data-theme="light"])) .ph[data-tone="amber"] { --ph-accent: #c87a3c; --ph-soft: #251d14; --ph-softer: #1d1710; --ph-line: #493826; }
}
:root[data-theme="dark"] .ph { --ph-accent: #35a87f; --ph-soft: #15231e; --ph-softer: #121a17; --ph-line: #27443a; }
:root[data-theme="dark"] .ph[data-tone="blue"] { --ph-accent: #6286e0; --ph-soft: #171c2b; --ph-softer: #141822; --ph-line: #2c3752; }
:root[data-theme="dark"] .ph[data-tone="plum"] { --ph-accent: #c062ab; --ph-soft: #241825; --ph-softer: #1d141e; --ph-line: #452a44; }
:root[data-theme="dark"] .ph[data-tone="amber"] { --ph-accent: #c87a3c; --ph-soft: #251d14; --ph-softer: #1d1710; --ph-line: #493826; }

/* a hidden field is hidden, whatever display the layout gives it */
.ph [hidden] { display: none !important }

/* ───────────── the card ───────────── */
.ph-card {
  border: var(--border); border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--ph-soft), var(--ph-softer));
  box-shadow: var(--shadow-offset-sm);
  padding: 18px 20px; margin: 0 0 18px;
}
.ph-top { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin: 0 0 14px }
.ph-top h2 { margin: 0; font-size: 19px }
.ph-step { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ph-accent); display: block; margin: 0 0 8px }
.ph-sub { font-size: 13.5px; color: var(--color-muted); margin: 0 0 12px; line-height: 1.5 }

/* ───────────── scenarios ───────────── */
.ph-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 8px }
.ph-pick {
  font: inherit; text-align: left; cursor: pointer; display: grid; gap: 2px; min-height: 62px;
  border: var(--border-subtle); border-radius: var(--radius-control); background: var(--color-surface);
  color: var(--color-ink); padding: 9px 12px;
  transition: transform var(--duration-fast, .12s) ease, border-color var(--duration-fast, .12s) ease;
}
.ph-pick b { font-size: 14.5px; display: flex; align-items: center; gap: 6px }
.ph-pick span { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums }
.ph-pick svg { width: 16px; height: 16px; color: var(--ph-accent); flex: none }
.ph-pick:hover { border-color: var(--ph-accent); transform: translateY(-1px) }
.ph-pick[aria-pressed="true"] { border: 2px solid var(--ph-accent); background: color-mix(in srgb, var(--ph-accent) 8%, var(--color-surface)); padding: 8px 11px }
.ph-pick:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px }

/* ───────────── one control per setting ───────────── */
.ph-ctls { display: grid; gap: 14px; margin-top: 16px }
@media (min-width: 720px) { .ph-ctls.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .ph-ctls.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.ph-ctl { display: grid; gap: 6px; min-width: 0 }
.ph-ctl > label, .ph-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700 }
.ph-ctl em { font-style: normal; font-weight: 400; color: var(--color-muted); font-size: 12.5px }
.ph-val { display: inline-flex; align-items: baseline; gap: 3px; border: var(--border-subtle); border-radius: var(--radius-round);
  background: var(--color-surface); padding: 2px 4px 2px 8px }
.ph-val input { font: inherit; font-family: var(--font-mono); font-size: 14px; font-weight: 600; width: 4.4em; text-align: right;
  border: 0; background: none; color: var(--color-ink); padding: 2px 0; min-height: 28px }
.ph-val input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px }
.ph-val span { font-size: 12px; color: var(--color-muted); padding-right: 6px }
.ph-ctl input[type=range] { width: 100%; min-height: 34px; accent-color: var(--ph-accent); background: none; border: 0; padding: 0; margin: 0 }
.ph-ticks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--color-muted); margin-top: -4px }
.ph-select { font: inherit; font-size: 14px; color: var(--color-ink); background: var(--color-surface);
  border: var(--border-subtle); border-radius: var(--radius-control); padding: 8px 10px; min-height: 42px; width: 100% }
.ph-select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px }

/* a two- or three-way switch (units, rules) */
.ph-seg { display: inline-flex; gap: 3px; background: var(--color-surface); border: var(--border-subtle); border-radius: var(--radius-round); padding: 3px }
.ph-seg button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--color-muted); background: none; border: 0;
  border-radius: var(--radius-round); padding: 5px 12px; cursor: pointer; min-height: 32px }
.ph-seg button[aria-pressed="true"] { background: var(--ph-accent); color: #fff }
.ph-seg button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px }

/* ───────────── the answer ───────────── */
.ph-answer { margin: 18px 0 0; border-top: 1px dashed var(--ph-line); padding-top: 16px }
.ph-big { font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; margin: 0; font-weight: 800 }
.ph-big b { color: var(--ph-accent); font-weight: 800; font-variant-numeric: tabular-nums }
.ph-because { font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; max-width: 62ch }
.ph-because b { font-variant-numeric: tabular-nums }

/* ───────────── the picture of it ───────────── */
.ph-viz { margin: 16px 0 0; border: var(--border-subtle); border-radius: var(--radius-control); background: var(--color-surface); padding: 14px 14px 10px }
.ph-viz svg { display: block; width: 100%; height: auto; overflow: visible }
.ph-viz figcaption { font-size: 12.5px; color: var(--color-muted); margin-top: 8px; line-height: 1.5 }
.ph-fill { fill: color-mix(in srgb, var(--ph-accent) 20%, transparent) }
.ph-edge { stroke: var(--ph-accent); stroke-width: 2 }
.ph-rule { stroke: var(--color-faint); stroke-width: 1 }
.ph-mark { stroke: var(--color-ink); stroke-width: 2 }
.ph-tx { font-family: var(--font-mono); font-size: 10.5px; fill: var(--color-muted) }
.ph-tx.on { fill: var(--color-ink); font-weight: 600 }
.ph-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 12px; background: var(--color-faint); gap: 2px }
.ph-split i { display: block; background: var(--ph-accent) }
.ph-split i:last-child { background: color-mix(in srgb, var(--ph-accent) 42%, transparent) }

/* ───────────── what if ───────────── */
.ph-try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px }
.ph-try > span { font-size: 13px; color: var(--color-muted) }
.ph-try button { font: inherit; font-size: 13px; font-family: var(--font-mono); cursor: pointer; color: var(--color-ink);
  border: var(--border-subtle); border-radius: var(--radius-round); background: var(--color-surface); padding: 5px 11px; min-height: 34px }
.ph-try button:hover { border-color: var(--ph-accent) }
.ph-try button b { color: var(--ph-accent) }
.ph-try button[aria-pressed="true"] { border-color: var(--ph-accent); background: color-mix(in srgb, var(--ph-accent) 10%, var(--color-surface)) }

/* ───────────── figures ───────────── */
.ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-top: 16px }
.ph-stat { border: var(--border-subtle); border-radius: var(--radius-control); background: var(--color-surface); padding: 9px 12px }
.ph-stat span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted) }
.ph-stat b { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.ph-stat small { display: block; font-size: 11.5px; color: var(--color-muted); line-height: 1.4; margin-top: 2px }

/* ───────────── the technical bits, folded away ───────────── */
.ph-fine { border: var(--border-subtle); border-radius: var(--radius-control); background: var(--color-surface); padding: 10px 14px; margin-top: 16px }
.ph-fine > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 8px }
.ph-fine > summary::-webkit-details-marker { display: none }
.ph-fine > summary::before { content: "＋"; color: var(--ph-accent); font-weight: 800 }
.ph-fine[open] > summary::before { content: "−" }
.ph-fine > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px }
.ph-fine p { font-size: 13px; line-height: 1.55; color: var(--color-muted) }
.ph-note { font-size: 13px; line-height: 1.55; border-left: 3px solid var(--ph-line); padding: 2px 0 2px 12px; margin: 14px 0 0; color: var(--color-ink) }
.ph-warn { font-size: 13.5px; line-height: 1.55; border: var(--border-subtle); border-left: 4px solid var(--color-attention);
  border-radius: var(--radius-control); background: var(--color-surface); padding: 10px 13px; margin: 14px 0 0 }

/* ───────────── the hub ───────────── */
/* Every tile carries a small drawing of what its tool does — the sharp zone,
   the lens's wedge, a star trail — built from the tile's own tone so the four
   groups read as four worlds. The art is decorative: the title and the
   description carry the meaning, and screen readers skip it. */
.ph-thumb { display: block; width: 100%; aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--ph-accent) 10%, var(--color-surface)); border: var(--border-subtle) }
.ph-thumb svg { display: block; width: 100%; height: 100% }
.ph-art-ink { fill: var(--color-ink) } .ph-art-line { stroke: var(--ph-accent); stroke-width: 2; fill: none; stroke-linecap: round }
.ph-art-soft { fill: color-mix(in srgb, var(--ph-accent) 22%, transparent) }
.ph-art-mid { fill: color-mix(in srgb, var(--ph-accent) 55%, transparent) }
.ph-art-full { fill: var(--ph-accent) }
.ph-art-thin { stroke: color-mix(in srgb, var(--color-ink) 30%, transparent); stroke-width: 1; fill: none }
.ph-art-night { fill: #0d1526 } .ph-art-star { fill: #f2f6ff }
.ph-art-move { transition: transform .5s var(--ease-out, cubic-bezier(.2,.7,.2,1)) }
.ph-tile:hover .ph-art-move { transform: translateX(8px) }
.ph-tile:hover .ph-art-grow { transform: scale(1.06); transform-origin: center }
.ph-art-grow { transition: transform .5s var(--ease-out, cubic-bezier(.2,.7,.2,1)) }
@media (prefers-reduced-motion: reduce) { .ph-art-move, .ph-art-grow { transition: none } }

.ph-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0 0 8px }
.ph-tile { display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--color-ink);
  border: var(--border); border-radius: var(--radius-panel); padding: 14px 16px;
  background: linear-gradient(180deg, var(--ph-soft), var(--ph-softer)); box-shadow: var(--shadow-offset-sm);
  transition: transform var(--duration-fast, .12s) ease, box-shadow var(--duration-fast, .12s) ease }
.ph-tile:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ph-shadow) }
.ph-tile b { font-size: 16px; display: flex; align-items: center; gap: 8px }
.ph-tile b svg { width: 20px; height: 20px; color: var(--ph-accent); flex: none }
.ph-tile span { font-size: 13.5px; color: var(--color-muted); line-height: 1.5 }
.ph-tile em { font-style: normal; font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ph-accent) }

@media (prefers-reduced-motion: reduce) { .ph-pick, .ph-tile { transition: none } }
@media (max-width: 560px) {
  .ph-card { padding: 14px 14px }
  .ph-scenes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)) }
}

/* ───────────── pre-nup pages ─────────────
   The Marriage category's pre-nup tools wear this same layer: two people
   side by side, item rows that wrap on a phone, a progress ring and a
   timeline. Kept here rather than in each page so the accent tokens above
   reach them in both themes. */
/* pre-nup pages: two people side by side, rows that wrap on a phone */
.pn-cols{display:grid;gap:12px}
@media (min-width:880px){.pn-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-side{border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:14px 14px 12px;display:grid;gap:10px;min-width:0}
.pn-who{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 12px}
.pn-who label{display:grid;gap:3px;font-size:12px;color:var(--color-muted)}
.pn-in{font:inherit;color:var(--color-ink);background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-control);padding:7px 10px;min-height:40px;box-sizing:border-box;width:100%}
.pn-in:hover{border-color:color-mix(in srgb,var(--color-ink) 30%,transparent)}
.pn-in:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}
.pn-name{font-size:17px;font-weight:800;width:13em;max-width:100%}
.pn-net{text-align:right}
.pn-net span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.pn-net b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pn-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto 34px;gap:6px;align-items:center}
@media (max-width:560px){.pn-row{grid-template-columns:1fr auto 34px}.pn-row .pn-label{grid-column:1/-1}}
.pn-amt{display:flex;align-items:center;gap:3px}
.pn-amt input{width:7.2em;text-align:right;font-family:var(--font-mono);font-weight:600;font-size:13.5px}
.pn-amt input.debt{color:var(--color-danger)}
.pn-step{width:32px;height:32px;border-radius:var(--radius-round);border:var(--border-subtle);background:var(--color-raised);color:var(--color-ink);font:inherit;font-weight:800;cursor:pointer;line-height:1}
.pn-step:hover{border-color:var(--ph-accent);color:var(--ph-accent)}
.pn-x{width:34px;height:34px;border:0;background:none;color:var(--color-muted);font-size:20px;cursor:pointer;border-radius:var(--radius-round)}
.pn-x:hover{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 8%,transparent)}
.pn-add{display:flex;flex-wrap:wrap;gap:6px}
.pn-add button{font:inherit;font-size:13px;font-weight:600;color:var(--color-ink);background:none;border:1px dashed color-mix(in srgb,var(--color-ink) 35%,transparent);border-radius:var(--radius-round);padding:6px 14px;min-height:36px;cursor:pointer}
.pn-add button:hover{border-color:var(--ph-accent);color:var(--ph-accent)}
.pn-head{display:grid;grid-template-columns:minmax(0,1fr) auto;font-size:11.5px;color:var(--color-muted)}
.pn-bars{display:grid;gap:10px}
.pn-bar{display:grid;grid-template-columns:minmax(5em,9em) minmax(0,1fr) auto;gap:12px;align-items:center}
.pn-bar b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-bar .mono{font-size:13px;font-variant-numeric:tabular-nums}
.pn-track{display:flex;gap:2px;height:24px;background:color-mix(in srgb,var(--color-faint) 55%,transparent);border-radius:6px;overflow:hidden}
.pn-track i{display:block;min-width:0}
.pn-sep{background:var(--ph-accent)}
.pn-shr{background:color-mix(in srgb,var(--ph-accent) 38%,var(--color-surface))}
.pn-owe{background:repeating-linear-gradient(45deg,var(--color-danger) 0 3px,color-mix(in srgb,var(--color-danger) 18%,var(--color-surface)) 3px 7px)}
.pn-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--color-muted);margin-top:10px}
.pn-key span{display:inline-flex;align-items:center;gap:6px}
.pn-key i{display:inline-block;width:12px;height:12px;border-radius:3px}
.ph-big b{white-space:nowrap}
.pn-layout{display:grid;gap:16px;align-items:start}
@media (min-width:960px){.pn-layout{grid-template-columns:minmax(0,1fr) 300px}}
.pn-bar-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.pn-topics{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.pn-topic{border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:10px 12px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 12px;align-items:center}
@media (min-width:720px){.pn-topic{grid-template-columns:32px minmax(0,1fr) auto}}
.pn-topic .ph-seg{grid-column:2/-1;justify-self:start}
@media (min-width:720px){.pn-topic .ph-seg{grid-column:auto}}
.pn-topic[data-mark="na"]{opacity:.66}
.pn-topic b{display:block;font-size:15px}
.pn-topic small{display:block;font-size:13px;color:var(--color-muted);line-height:1.45}
.pn-dot{width:30px;height:30px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;border:var(--border-subtle);background:var(--color-raised);color:var(--color-muted)}
.pn-topic[data-mark="agreed"] .pn-dot{background:var(--ph-accent);border-color:var(--ph-accent);color:#fff}
.pn-topic[data-mark="talk"] .pn-dot{background:color-mix(in srgb,var(--color-attention) 14%,var(--color-surface));border-color:var(--color-attention);color:var(--color-attention-text)}
.pn-aside{display:grid;gap:12px;position:sticky;top:12px}
.pn-box{border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:16px}
.pn-ring{width:148px;height:148px;margin:0 auto;border-radius:50%;display:grid;place-items:center}
.pn-ring div{width:110px;height:110px;border-radius:50%;background:var(--color-surface);display:grid;place-content:center;text-align:center}
.pn-ring b{font-size:32px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pn-ring b small{font-size:16px;color:var(--color-muted)}
.pn-ring span{font-size:11.5px;color:var(--color-muted)}
.pn-lawyers{border:var(--border);border-radius:var(--radius-panel);background:var(--color-surface);padding:14px 16px;display:grid;gap:10px}
.pn-lawyers ol{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px;line-height:1.4}
.pn-btns{display:flex;flex-wrap:wrap;gap:6px}
.pn-btns button{font:inherit;font-size:13px;font-weight:600;color:var(--color-ink);background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-round);padding:6px 13px;min-height:36px;cursor:pointer}
.pn-btns button:hover{border-color:var(--ph-accent)}
.pn-when{display:grid;gap:14px;margin-top:16px}
@media (min-width:820px){.pn-when{grid-template-columns:minmax(0,1fr) auto}}
.pn-date{font:inherit;font-family:var(--font-mono);font-size:14px;color:var(--color-ink);background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-control);padding:7px 10px;min-height:42px}
.pn-date:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}
.pn-line{position:relative;height:150px;margin:6px 8px 0}
.pn-line .rail{position:absolute;left:0;right:0;top:68px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--color-faint) 60%,transparent)}
.pn-line .seg{position:absolute;top:68px;height:10px}
.pn-line .dot{position:absolute;top:65px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:2px solid var(--color-ink);background:var(--color-surface);box-sizing:border-box}
.pn-line .lab{position:absolute;width:128px;display:grid;gap:1px;font-size:12px;line-height:1.25}
.pn-line .lab b{font-size:12.5px}
.pn-line .lab span{font-family:var(--font-mono);font-size:10.5px;color:var(--color-muted)}
.pn-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pn-steps li{border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:10px 13px;display:grid;gap:3px}
.pn-steps li span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ph-accent)}
.pn-steps li b{font-size:15px}
.pn-steps li small{font-size:12.5px;color:var(--color-muted);line-height:1.45}
@media (max-width:640px){.pn-line{display:none}}

/* ───────────── wedding pages ─────────────
   The wedding planner, budget, guest list, seating chart and day timeline
   share one plan kept in the browser on app.toolsfully.com. These rules are
   the bar that names the wedding, the links between the tools, and the
   pieces the five pages have in common. */
.wd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.wd-tabs a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--color-ink);text-decoration:none;border:var(--border-subtle);border-radius:var(--radius-round);background:var(--color-surface);padding:7px 14px;min-height:40px;box-sizing:border-box}
.wd-tabs a svg{color:var(--ph-accent)}
.wd-tabs a:hover{border-color:var(--ph-accent);text-decoration:none}
.wd-tabs a[aria-current="page"]{background:var(--ph-accent);border-color:var(--ph-accent);color:#fff}
.wd-tabs a[aria-current="page"] svg{color:#fff}
.wd-bar{padding-top:14px;padding-bottom:14px}
.wd-bartop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.wd-who{display:grid;gap:2px;min-width:0}
.wd-who b{font-size:clamp(1.3rem,3.4vw,1.75rem);letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere}
.wd-who small{font-size:13px;color:var(--color-muted)}
.wd-count{display:grid;justify-items:center;text-align:center;padding:6px 16px;border-left:1px dashed var(--ph-line);border-right:1px dashed var(--ph-line)}
.wd-count b{font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;color:var(--ph-accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.wd-count span{font-size:12.5px;color:var(--color-muted)}
.wd-count[data-quiet="true"] span{font-size:14px;color:var(--color-ink);font-weight:700}
@media (max-width:640px){.wd-count{border:0;padding:0;justify-items:start;text-align:left}}
.wd-menu{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:10px 12px;border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface)}
.wd-menu button{font:inherit;font-size:13px;font-weight:600;color:var(--color-ink);background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-round);padding:6px 13px;min-height:36px;cursor:pointer}
.wd-danger{color:var(--color-danger)!important;border-color:color-mix(in srgb,var(--color-danger) 50%,transparent)!important}
.wd-notice{margin:12px 0 0;font-size:13.5px;line-height:1.5;border:var(--border-subtle);border-left:4px solid var(--ph-accent);border-radius:var(--radius-control);background:var(--color-surface);padding:9px 12px}
.wd-notice.bad{border-left-color:var(--color-danger)}
.wd-setup{display:grid;gap:14px;margin-top:12px}
.wd-fields{display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.wd-fields label,.wd-add label{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--color-muted)}
.wd-money{display:flex;gap:4px}
.wd-money select{width:auto;flex:none}
.wd-presets{border:0;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.wd-presets legend{font-size:13.5px;font-weight:700;margin:0 0 8px;padding:0}
.wd-presets .ph-pick{position:relative}
.wd-presets input{position:absolute;opacity:0;pointer-events:none}
.wd-presets .ph-pick:has(input:checked){border:2px solid var(--ph-accent);background:color-mix(in srgb,var(--ph-accent) 8%,var(--color-surface));padding:8px 11px}
.wd-presets .ph-pick:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}
.wd-go{font:inherit;font-size:14px;font-weight:800;color:#fff!important;background:var(--ph-accent)!important;border:1px solid var(--color-ink)!important;border-radius:var(--radius-round);padding:8px 18px;min-height:42px;cursor:pointer;box-shadow:2px 2px 0 var(--color-ink)}
.wd-go:hover{filter:brightness(1.08)}
.wd-link{font:inherit;color:var(--color-brand);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.wd-bad,.ph .ph-big b.wd-bad{color:var(--color-danger);font-weight:700}
.wd-dash{display:grid;gap:10px;margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.wd-tile{display:grid;gap:3px;align-content:start;text-decoration:none;color:var(--color-ink);border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:11px 13px}
.wd-tile:hover{border-color:var(--ph-accent);text-decoration:none}
.wd-tile span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.wd-tile b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.wd-tile b em{font-style:normal;font-size:14px;color:var(--color-muted);font-weight:600}
.wd-tile small{font-size:12px;color:var(--color-muted);line-height:1.4}
.wd-meter{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--color-faint) 70%,transparent);overflow:hidden;margin-top:6px}
.wd-meter i{display:block;height:100%;background:var(--ph-accent);border-radius:3px}
.wd-phases{display:grid;gap:14px;margin-top:16px}
.wd-phase header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;border-bottom:1px dashed var(--ph-line);padding-bottom:6px;margin-bottom:6px}
.wd-phase h3{margin:0;font-size:15.5px}
.wd-phase header .mono{font-size:11.5px;color:var(--color-muted)}
.wd-phase ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wd-task{display:flex;align-items:center;gap:8px;border-radius:var(--radius-control);padding:3px 4px 3px 8px}
.wd-task:hover{background:color-mix(in srgb,var(--ph-accent) 6%,transparent)}
.wd-task label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;font-size:14.5px;line-height:1.35;min-height:36px}
.wd-task input{width:20px;height:20px;accent-color:var(--ph-accent);flex:none;margin:0}
.wd-task.done label span{text-decoration:line-through;color:var(--color-muted)}
.wd-late{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-attention-text);border:1px solid color-mix(in srgb,var(--color-attention) 55%,transparent);border-radius:var(--radius-round);padding:1px 7px;white-space:nowrap}
.wd-task small{font-size:11.5px;color:var(--color-muted);white-space:nowrap}
.wd-task .pn-x{opacity:.55}
.wd-task:hover .pn-x,.wd-task .pn-x:focus-visible{opacity:1}
.wd-add{display:flex;flex-wrap:wrap;align-items:end;gap:8px 10px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--ph-line)}
.wd-add .wd-grow{flex:1 1 240px}
.wd-check{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px!important;font-size:13.5px!important;color:var(--color-ink)!important;font-weight:600!important;min-height:40px;white-space:nowrap}
.wd-check input{width:18px;height:18px;accent-color:var(--ph-accent);margin:0}
.wd-more{margin-top:12px;border-top:1px dashed var(--ph-line);padding-top:10px}
.wd-more>summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--ph-accent)}
.wd-bulk{display:grid;gap:10px;margin-top:10px}
.wd-bulk label{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--color-muted)}
.wd-bulk textarea{font:inherit;resize:vertical;min-height:110px}
.wd-filters{display:flex;flex-wrap:wrap;align-items:end;gap:8px 12px;margin:4px 0 12px}
.wd-filters label{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--color-muted)}
.wd-filters .wd-grow{flex:1 1 200px}
.wd-track-lg{height:30px;border-radius:8px}
.wd-no{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-ink) 35%,transparent) 0 3px,var(--color-surface) 3px 7px)}
.wd-bigbar{position:relative}
.wd-over{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--color-danger);border-radius:2px}
.wd-cats{display:grid;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ph-line)}
.wd-cats .pn-bar{grid-template-columns:minmax(7em,12em) minmax(0,1fr) auto}
.wd-cats .pn-track{height:16px}
.wd-cats .mono small{color:var(--color-muted);font-size:11px;margin-left:4px}
/* budget lines */
.wd-items{display:grid;gap:8px;margin-top:12px}
.wd-item{display:grid;gap:6px 8px;align-items:end;border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:10px 10px 8px;
  grid-template-columns:repeat(2,minmax(0,1fr)) 34px}
.wd-item label{display:grid;gap:3px;font-size:11px;font-weight:700;color:var(--color-muted);min-width:0}
.wd-item .pn-in{min-height:38px;padding:6px 8px;font-size:14px}
.wd-item .wd-l-label{grid-column:1/3}
.wd-item .pn-x{grid-column:3;grid-row:1;align-self:center}
.wd-owed{grid-column:1/-1;font-size:11.5px;color:var(--color-muted);text-align:right;min-height:14px}
@media (min-width:900px){
  .wd-item{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1.1fr) repeat(3,minmax(0,.8fr)) minmax(0,1fr) 34px}
  .wd-item .wd-l-label{grid-column:auto}
  .wd-item .pn-x{grid-column:auto;grid-row:auto}
  .wd-owed{grid-column:4/8}
}
.wd-due{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wd-due li{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:9px 12px}
.wd-due li small{grid-column:2;font-size:12px;color:var(--color-muted)}
.wd-due li strong{grid-column:3;grid-row:1;font-size:15px}
.wd-due li .wd-late{grid-column:3;justify-self:end}
.wd-due li.late{border-left:4px solid var(--color-attention)}
.wd-due .mono{font-size:12.5px}
/* guest rows */
.wd-guests{display:grid;gap:6px}
.wd-guest{display:grid;gap:6px 8px;align-items:center;border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:8px 10px;
  grid-template-columns:minmax(0,1fr) auto 34px}
.wd-guest .pn-in{min-height:38px;padding:6px 8px;font-size:14px}
.wd-guest[data-rsvp="yes"]{border-left:4px solid var(--ph-accent)}
.wd-guest[data-rsvp="no"]{opacity:.7}
.wd-guest[data-rsvp="no"] .wd-g-name input{text-decoration:line-through}
.wd-g-name{grid-column:1/3}
.wd-guest>.pn-x{grid-column:3;grid-row:1}
.wd-g-rsvp{grid-column:1/-1;justify-self:start;flex-wrap:wrap}
.wd-g-meal,.wd-g-side{min-width:0}
.wd-g-group{grid-column:1/-1}
.wd-g-extra{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;font-size:12px;color:var(--color-muted)}
.wd-g-extra .pn-in{min-height:34px;font-size:13px}
.wd-guest .wd-check{font-size:13px!important}
@media (min-width:960px){
  .wd-guest{grid-template-columns:minmax(0,1.4fr) auto minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr) auto auto 34px}
  .wd-g-name,.wd-g-rsvp,.wd-g-group{grid-column:auto}
  .wd-guest>.pn-x{grid-column:auto;grid-row:auto}
  .wd-g-extra{grid-column:1/5}
  .wd-g-extra+.wd-g-extra{grid-column:5/-1}
}
/* seating */
.wd-seatlayout{display:grid;gap:14px;margin-top:16px;align-items:start}
@media (min-width:900px){.wd-seatlayout{grid-template-columns:250px minmax(0,1fr)}}
.wd-pool{border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:12px;display:grid;gap:8px;position:sticky;top:12px;max-height:80vh;overflow:auto}
.wd-poolhead{display:grid;gap:2px}
.wd-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wd-chip{font:inherit;font-size:13px;font-weight:600;color:var(--color-ink);background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-round);padding:5px 11px;min-height:34px;cursor:grab;display:inline-flex;align-items:center;gap:5px}
.wd-chip:hover{border-color:var(--ph-accent)}
.wd-chip[aria-pressed="true"]{background:var(--ph-accent);border-color:var(--ph-accent);color:#fff}
.wd-chip small{font-family:var(--font-mono);font-size:10.5px;opacity:.8}
.wd-chip em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;border-radius:50%;width:15px;height:15px;display:inline-grid;place-items:center;border:1px solid currentColor;opacity:.7}
.wd-tables{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.wd-table{border:var(--border-subtle);border-radius:var(--radius-panel);background:var(--color-surface);padding:10px;display:grid;gap:6px;align-content:start}
.wd-table.drop{border:2px dashed var(--ph-accent);padding:9px}
.wd-table.over,.wd-table.clash{border-color:var(--color-danger);box-shadow:inset 0 0 0 1px var(--color-danger)}
.wd-table header{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:6px;align-items:end}
.wd-tname{font-weight:800;font-size:14.5px!important;min-height:34px!important;padding:4px 8px!important}
.wd-tseats{display:grid;gap:2px;font-size:10.5px;font-weight:700;color:var(--color-muted)}
.wd-tseats input{width:3.4em;min-height:34px!important;padding:4px 6px!important;text-align:center}
.wd-tpic{width:100%;max-height:110px;display:block}
.wd-tpic rect,.wd-tpic>circle:first-of-type{fill:color-mix(in srgb,var(--ph-accent) 12%,var(--color-surface));stroke:var(--ph-accent);stroke-width:1.5}
.wd-tpic circle{fill:var(--color-surface);stroke:color-mix(in srgb,var(--color-ink) 35%,transparent);stroke-width:1.2}
.wd-tpic circle.on{fill:var(--ph-accent);stroke:var(--ph-accent)}
.wd-tpic text{font-family:var(--font-mono);font-size:11px;fill:var(--color-ink);font-weight:600}
.wd-warnline{margin:0;font-size:12px;line-height:1.4;color:var(--color-danger);font-weight:700}
.wd-seated{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wd-seated li{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13.5px;border-bottom:1px dotted var(--ph-line);min-height:30px}
.wd-seated small{font-size:11.5px;color:var(--color-muted)}
.wd-seated .pn-x{width:28px;height:28px;font-size:16px}
.wd-seathere{font:inherit;font-size:12.5px;font-weight:700;color:var(--ph-accent);background:none;border:1px dashed var(--ph-accent);border-radius:var(--radius-round);padding:5px 10px;min-height:34px;cursor:pointer}
.wd-seathere:disabled{color:var(--color-muted);border-color:var(--color-faint);cursor:default}
.wd-seathere:not(:disabled):hover{background:color-mix(in srgb,var(--ph-accent) 10%,transparent)}
.wd-pairs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wd-pairs li{display:inline-flex;align-items:center;gap:4px;border:var(--border-subtle);border-radius:var(--radius-round);background:var(--color-surface);padding:2px 4px 2px 12px;font-size:13.5px}
.wd-pairs i{font-style:normal;color:var(--color-muted)}
/* the day */
.wd-gantt{position:relative;height:calc(var(--lanes,1) * 30px + 34px);border-bottom:1px solid var(--color-faint);overflow:hidden}
.wd-hour{position:absolute;top:0;bottom:0;border-left:1px dashed color-mix(in srgb,var(--color-faint) 90%,transparent);font-family:var(--font-mono);font-size:10px;color:var(--color-muted);padding-left:3px;white-space:nowrap}
.wd-gold,.wd-goldkey{background:repeating-linear-gradient(135deg,color-mix(in srgb,#e0a526 30%,transparent) 0 4px,color-mix(in srgb,#e0a526 12%,transparent) 4px 8px)}
.wd-gold{position:absolute;top:16px;bottom:0}
.wd-gbar{position:absolute;height:24px;border-radius:5px;background:color-mix(in srgb,var(--ph-accent) 30%,var(--color-surface));border:1px solid color-mix(in srgb,var(--ph-accent) 55%,transparent);font-size:11px;font-weight:600;line-height:22px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;color:var(--color-ink)}
.wd-gbar.key{background:var(--ph-accent);border-color:var(--ph-accent);color:#fff}
.wd-blocks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.wd-block{display:grid;gap:4px 8px;align-items:center;border:var(--border-subtle);border-radius:var(--radius-control);background:var(--color-surface);padding:8px 10px;
  grid-template-columns:auto auto minmax(0,1fr) 34px}
.wd-block .pn-in{min-height:38px;padding:6px 8px;font-size:14px}
.wd-block.key{border:2px solid var(--ph-accent);padding:7px 9px}
.wd-block.gold{background:linear-gradient(90deg,color-mix(in srgb,#e0a526 14%,var(--color-surface)),var(--color-surface) 60%)}
.wd-b-time input{width:7.4em}
.wd-b-len{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-muted)}
.wd-b-len input{width:3.6em;text-align:right}
.wd-b-who{grid-column:1/4}
.wd-block>.pn-x{grid-column:4;grid-row:1}
.wd-b-note{grid-column:1/-1;font-family:var(--font-mono);font-size:11px;color:var(--color-muted)}
.wd-goldtag{font-style:normal;color:#9a6a00}
:root[data-theme="dark"] .wd-goldtag{color:#e8b64a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wd-goldtag{color:#e8b64a}}
@media (min-width:860px){
  .wd-block{grid-template-columns:auto auto minmax(0,1.6fr) minmax(0,1fr) 34px}
  .wd-b-who{grid-column:auto}
  .wd-block>.pn-x{grid-column:auto;grid-row:auto}
}
/* drinks */
.wd-mixbar i:nth-child(1){background:var(--ph-accent)}
.wd-mixbar i:nth-child(2){background:color-mix(in srgb,var(--ph-accent) 45%,var(--color-surface))}
.wd-mixbar i:nth-child(3){background:repeating-linear-gradient(45deg,var(--ph-accent) 0 3px,var(--color-surface) 3px 6px)}
.wd-bottles{display:grid;gap:10px}
.wd-bottlerow{display:grid;grid-template-columns:minmax(8em,11em) minmax(0,1fr);gap:10px;align-items:center}
.wd-bottlerow b{font-size:13.5px}
.wd-bottleset{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end}
.wd-bottleset em{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--color-muted);margin-left:4px}
.ph-viz svg.wd-bottle,.wd-bottle{display:block;flex:none;width:12px;height:22px;overflow:visible;fill:color-mix(in srgb,var(--ph-accent) 70%,var(--color-surface));stroke:var(--ph-accent);stroke-width:.8}
.wd-bottle.beer{fill:color-mix(in srgb,var(--ph-accent) 35%,var(--color-surface))}
.wd-bottle.sparkling{fill:color-mix(in srgb,#e0a526 45%,var(--color-surface));stroke:#b8860b}
@media (max-width:560px){.wd-bottlerow{grid-template-columns:1fr}}
@media print{
  .wd-tabs,.wd-actions,.wd-menu,.wd-add,.pn-x,.ph-seg,.localbadge,.ph-fine,.wd-noprint,body>header,body>footer,.crumb,.hero,.content{display:none!important}
  .ph-card{box-shadow:none!important;background:none!important;border-color:#999!important}
}