/* ===========================================================================
   Semble — the whole app's appearance.

   The brief: clean, elegant, modern. Organized, easy to read, easy to move
   around. Most people open this once, briefly, and must not have to learn
   anything.

   Three rules the rest of this file follows:

   1. NO PATTERN, NO TEXTURE. White ground. Everything is separated by space
      and hairlines rather than by decoration. Nothing competes with the words.

   2. HIERARCHY BY SIZE, NOT BY COLOR. A big thing, a medium thing, and small
      capitals — the same three sizes everywhere, so a page can be read at a
      glance without being studied.

   3. COLOR MEANS SOMETHING. The couple's color marks what you can act on and
      what's finished. It is never used just to fill space.

   To recolor the whole app, change --accent and its companions below, or set
   a color per wedding on the Settings page.
   =========================================================================== */

:root {
  /* ---- Semble palette (Brand Guidelines, edition 03 — brand/semble-brand-guidelines-03.html) ----
     Ivory is the ground; midnight navy does the talking; mist is the
     accent — blush, the brand's warmth, is one tap away on Settings. Color always means something — the accent marks progress
     and celebration; nothing is colored just to fill space. */

  --navy:         #202A44;   /* primary text, the mark's arch, every dark surface */
  --navy-soft:    #3A4462;

  --ivory:        #FAF8F5;   /* the ground */
  --canvas:       #EEF0F4;   /* recessed blocks — a cool neutral, so the page never drifts beige */
  --border:       #E0E3E9;   /* every divider */
  --white:        #FFFFFF;

  --ink:          var(--navy);
  --ink-body:     #363B49;   /* navy-leaning greys, so the copy sits with the mark */
  --ink-soft:     #5B6070;   /* muted text — secondary copy */
  --ink-faint:    #878C9B;   /* muted text — captions, overlines */

  /* The accent family. Mist by default — the brand's cool secondary, #A9C0EC,
     with its shades made by the same ratios that turn blush #C9A9A0 into the
     brand's own light and pale blush — but a couple can choose their own on
     Settings (blush is right there as a preset), and /theme.css replaces all
     five. It's used for fills, dots and chips, never for text: blush and mist
     fail contrast for body copy. */
  --accent:       #A9C0EC;
  --accent-dark:  #8B9DC2;
  --accent-soft:  #BACDF0;
  --accent-tint:  #CEDBF4;
  --accent-wash:  #F0F4FC;

  --mist:         #A9C0EC;   /* cool secondary — chips, links on dark */
  --mist-pale:    #C3D2F0;
  --mist-wash:    #EEF2FA;   /* a breath of mist — table stripes, cool against the ivory */

  --red:          #B0453A;   /* overdue — functional, never decorative */
  --red-wash:     #FAEEEC;
  --green:        #2F7D5A;   /* approved — a green light */
  --green-wash:   #E9F4EE;

  --paper:        var(--ivory);
  --panel:        var(--canvas);
  --hair:         var(--border);

  --r-card:  16px;
  --r-block: 14px;
  --r-pill:  999px;

  /* ---- type: direction A, "the fashion house" ----
     Bodoni Moda for the wordmark, titles and the editorial italic —
     high-contrast hairlines straight off a fashion masthead. Karla for
     everything that works: body, buttons, forms, tables — friendly and a
     little warm, so the pairing never turns cold.

     One rule from the type direction, kept everywhere below: Bodoni's
     hairlines vanish under ~18px, so anything small is set at weight 500. */
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --voice:   "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --sans:    "Karla", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }

/* ---------------------------------------------------------------------------
   The header, on every page
   --------------------------------------------------------------------------- */

.app-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 20;
}
.app-header-inner {
  width: min(90vw, 1400px); max-width: 100%; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.app-header.plain .app-header-inner { justify-content: center; }

/* Horizontal lockup: mark left of the wordmark, 16–18px gap at a 20–26px
   wordmark, vertically centred. Wordmark in Bodoni Moda 500, all caps, tracked
   0.2em, with a left margin equal to the tracking to optically centre. */
/* The visible gap is this plus the wordmark's own left margin (0.2em ≈ 4px,
   the brand's optical-centring rule for tracked caps) — about 12px in all,
   half of what it was, at the organizer's request. The mark's box is cropped
   to its ink, so there's no hidden space adding to it. */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; margin-right: auto;
}
.app-header.plain .brand { margin-right: 0; }
.brand-mark { width: 17px; height: 23px; flex-shrink: 0; }   /* 44:60 — the box is now exactly the arch's ink */
.brand-name {
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: 0.2em; margin-left: 0.2em;
  text-transform: uppercase; line-height: 1;
  color: var(--navy);
}

/* ---------------------------------------------------------------------------
   Page shells
   --------------------------------------------------------------------------- */

.page { max-width: 620px; margin: 0 auto; padding: 0 20px 72px; }
/* Organizer pages are fluid: about 90% of the window, up to 1400px, then centered. */
.dash { width: min(90vw, 1400px); max-width: 100%; margin: 0 auto; padding: 0 20px 72px; }

/* Whose wedding this is — stated once, under the header. */
.wedding-line { padding: 30px 0 4px; }
/* The fleuron drawn right after the wedding line stands in for the old rule. */
.wedding-line + .fleuron { margin: 8px 0 26px; }
.wedding-line h1 {
  font-family: var(--display); font-weight: 400; font-size: 32px;
  letter-spacing: 0.01em; color: var(--navy); margin: 0;
}
.wedding-date {
  margin-top: 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.date-digits { letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }

h2 { font-family: var(--display); font-size: 27px; font-weight: 400; letter-spacing: 0.005em; color: var(--navy); margin: 0; }
h3 { font-size: 17px; font-weight: 500; color: var(--navy); margin: 0; }

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--ink-soft);
  border-radius: var(--r-pill); padding: 8px 14px;
  font-size: 13.5px; font-weight: 600;
}
.nav a:hover { color: var(--navy); background: var(--canvas); }
.nav a.here { background: var(--navy); color: var(--ivory); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.pill, .btn-small, .btn-block, .btn-ghost {
  font-family: var(--sans); cursor: pointer; text-decoration: none;
  border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0.01em;
  display: inline-block; text-align: center;
}

.pill {
  border: 1px solid var(--hair); background: var(--white); color: var(--ink-body);
  padding: 10px 16px; font-size: 14px; line-height: 1.2;
}
.pill:hover { border-color: var(--ink-faint); color: var(--ink); }
.pill-solid { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.pill-solid:hover { background: var(--navy-soft); }

.btn-small {
  border: 1px solid var(--hair); background: var(--white); color: var(--ink-body);
  padding: 9px 15px; font-size: 13.5px;
  line-height: 1.15;   /* the same height whether it's a <button> or an <a> */
}
.btn-small:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn-small.primary {
  background: var(--navy); border-color: var(--navy); color: var(--ivory);
}
.btn-small.primary:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

/* Buttons respond like fabric, not plastic: primary actions lift a pixel on
   hover with a faint blush-tinted shadow, and settle back when pressed. */
.btn-small.primary, .pill-solid {
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              background 0.16s ease, border-color 0.16s ease;
}
.btn-small.primary:hover, .pill-solid:hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 169, 160, 0.45);
}
.btn-small.primary:active, .pill-solid:active {
  transform: translateY(0); box-shadow: 0 1px 4px rgba(201, 169, 160, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .btn-small.primary, .pill-solid { transition: none; }
  .btn-small.primary:hover, .pill-solid:hover { transform: none; box-shadow: none; }
}
.btn-small.danger:hover { border-color: var(--red); color: var(--red); }

.btn-block {
  width: 100%; border: 1px solid var(--navy);
  background: var(--navy); color: var(--ivory);
  padding: 14px 20px; font-size: 15px;
}
.btn-block:hover { background: var(--navy-soft); }
.btn-block:disabled { opacity: 0.55; cursor: default; }

.btn-ghost {
  border: 1px solid var(--hair); background: var(--white); color: var(--ink-body);
  padding: 8px 14px; font-size: 13.5px;
}
.btn-ghost:hover { border-color: var(--ink-faint); }

/* align-items matters here: without it a button stretches to the height of
   whatever it sits beside, and a pill-shaped button stretched tall becomes a
   circle. */
.row-actions, .form-actions, .decide {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;
}
.row-actions > *, .form-actions > *, .decide > * { align-self: flex-start; }
.form-actions { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.panel, .approvals, .late-panel, .stat, .grid-scroll, .login-card {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}
.panel { padding: 24px; margin-bottom: 14px; }
.panel-head {
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; align-items: flex-start;
}
.panel-head h2 { margin: 6px 0 4px; }
.panel-head p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.empty {
  border: 1px dashed var(--hair); border-radius: var(--r-card);
  padding: 30px 24px; text-align: center; color: var(--ink-soft); background: var(--white);
}
.loading { padding: 80px 0; text-align: center; color: var(--ink-faint); }
.legend { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint); }
.saved-flash {
  background: var(--accent-wash); color: var(--navy);
  border-radius: var(--r-block); padding: 12px 16px; margin-bottom: 14px;
  font-size: 14px; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The member's page
   --------------------------------------------------------------------------- */

.greeting { padding: 4px 0 30px; }
.hi {
  font-family: var(--display); font-size: 36px; font-weight: 400;
  letter-spacing: 0.005em; line-height: 1.15; margin: 0 0 8px; color: var(--navy);
}
.role {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px;
}

/* The couple's own words. Italic rather than a script — still visibly theirs
   rather than the app's, but readable on a phone, which a script wasn't. */
/* One letter from the couple: the wash card holds the heading ("A note from
   Syd & Tyler"), their note in plain body type, and any personal line as a
   P.S. in the italic — the look owner's voice — signed inline. */
.couple-note {
  background: var(--accent-wash); border-radius: var(--r-block);
  padding: 18px 22px; max-width: 58ch;
}
.note {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-body);
  margin: 8px 0 0; max-width: 56ch;
}
.note-personal {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: 20px; line-height: 1.5; color: var(--navy);
  margin: 14px 0 0;
}
.note + .note-personal { border-top: 1px solid var(--accent-tint); padding-top: 14px; }
.couple-note .label + .note-personal { margin-top: 8px; }
.note-personal .ps-from { color: var(--ink-soft); font-size: 16px; white-space: nowrap; }

/* ---- the guided walk: overview, one card at a time, the end ---- */

.overview {
  background: var(--white); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 24px;
}
.overview h2 { margin: 6px 0 4px; font-size: 24px; }
.overview-desc { margin: 0 0 4px; font-size: 15px; color: var(--ink-soft); }
.overview .progress { border-bottom: none; padding: 16px 0 4px; }

.overview-list { list-style: none; margin: 8px 0 0; padding: 0; }
.overview-list li { border-top: 1px solid var(--hair); }
.overview-list li:first-child { border-top: none; }
.overview-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 13px 4px; cursor: pointer;
  font-family: var(--sans); font-size: 15.5px; color: var(--ink); text-align: left;
}
.overview-row:hover { background: var(--panel); border-radius: 10px; }
.overview-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--hair); color: var(--ink-faint);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.overview-row.settled .overview-num {
  background: var(--accent); border-color: var(--accent); color: var(--navy);
}
.overview-row.settled .overview-num::before { content: '✓'; }
.overview-row.settled .overview-num { font-size: 0; }
.overview-row.settled .overview-num::before { font-size: 11px; }
.overview-name { flex: 1; font-weight: 500; min-width: 0; color: var(--navy); }
.overview-status { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.overview-row.settled .overview-status { color: var(--ink-soft); }
.overview-arrow { color: var(--ink-faint); font-size: 20px; line-height: 1; margin-left: 2px; }
.overview-actions { margin-top: 20px; }
.overview-hint { margin: 6px 0 4px; font-size: 14px; color: var(--ink-soft); }

.step-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 18px;
}
.step-back {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--navy);
}
.step-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.step-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--ink-faint); background: var(--white);
}
.step-dot { border-color: var(--accent-soft); }
.step-dot.done { background: var(--accent); border-color: var(--accent); }
.step-dot.here { background: var(--navy); border-color: var(--navy); transform: scale(1.35); }
.step-count { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.item.solo { padding: 24px; }
.item.solo.has-photo { padding: 14px 14px 24px; }
.item.solo .item-photo { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.item.solo:not(.has-photo) { display: block; }
.item.solo .item-name { font-size: 27px; font-weight: 400; }
.item.solo .item-notes { font-size: 16px; }

.step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

.finish {
  text-align: center; padding: 26px 20px 8px;
}
.finish h2 {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: 30px; margin: 10px 0 8px; color: var(--navy);
}
.finish p { font-size: 15.5px; color: var(--ink-soft); max-width: 420px; margin: 0 auto 8px; }
.finish .brand-arches { width: 96px; height: 90px; display: block; margin: 0 auto 8px; }
.finish .brand-mark-large { width: 68px; height: 72px; display: block; margin: 0 auto 8px; }
.finish .overview-actions { display: flex; justify-content: center; }
.push-right { margin-left: auto; }

.photo-block {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 6px;
}
.photo-thumb {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--hair); flex-shrink: 0;
}
.photo-thumb.empty {
  background: var(--white); display: flex; align-items: center; justify-content: center;
}

/* Progress — the first thing anyone looks for. */
.progress { padding: 22px 0 24px; border-bottom: 1px solid var(--hair); }
.progress-count {
  font-size: 30px; font-weight: 300; letter-spacing: -0.01em;
  color: var(--navy); margin: 8px 0 12px;
}
.progress-count .of { color: var(--ink-faint); font-weight: 300; }
/* Each item is a dot; a finished one is a dot risen — filled with the accent.
   The same language as the mark, and as the step strip on each card. */
.progress-bar { display: flex; gap: 10px; align-items: center; }
.progress-bar .seg {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--accent-soft); background: transparent;
}
.progress-bar .seg.on { background: var(--accent); border-color: var(--accent); }
.progress-hint { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }

.look-header { padding: 26px 0 18px; }
.look-header h2 { margin: 8px 0 6px; font-size: 24px; }
.look-header p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* The aisle — kept quiet while its design is being reconsidered. */
.aisle { position: relative; }
.aisle .item { position: relative; }

/* Items. A list of cards, one obvious action each. */
.item {
  background: var(--white); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 20px; margin-bottom: 12px;
  display: flex; gap: 16px; align-items: flex-start;
}
.item.has-photo { display: block; padding: 12px 12px 20px; }
/* The photo wears a thin ivory mat, a soft shadow, and the faintest tilt —
   the mood board's hand-pinned feeling at one-tenth the strength. Padding on
   the img itself is the mat; the image sits inside it. */
.item-photo {
  display: block; width: 94%; aspect-ratio: 4 / 3; object-fit: cover;
  margin: 6px auto 18px; box-sizing: border-box;
  background: var(--white); padding: 9px 9px 13px;
  border: 1px solid var(--hair); border-radius: 4px;
  box-shadow: 0 3px 14px rgba(32, 42, 68, 0.10);
  transform: rotate(-0.7deg);
}
.item-photo.t2 { transform: rotate(0.5deg); }
@media (prefers-reduced-motion: reduce) {
  .item-photo, .item-photo.t2 { transform: none; }
}
.item.has-photo .item-body { padding: 0 8px; }

.swatch {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  background: var(--sw, var(--panel)); overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch-empty {
  background: var(--panel); border-color: var(--hair);
  display: flex; align-items: center; justify-content: center;
}
.swatch-icon { width: 26px; height: 26px; color: var(--navy); }

.item-body { flex: 1; min-width: 0; }
.item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.item-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.item-icon { width: 21px; height: 21px; flex-shrink: 0; color: var(--navy); }
.item-name { font-family: var(--display); font-size: 21px; font-weight: 500; margin: 0; color: var(--navy); }
.item-num {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.item-notes { margin: 10px 0 14px; font-size: 15px; color: var(--ink-body); }
.item-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.color-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 15px; color: var(--ink-soft);
}
.color-chip .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sw, var(--panel)); border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Choosing — the pill is the control, so there's nothing to align beside it. */
/* The action zone. Everything above it on the card is information, in small
   pills. This is the one question, in its own band at the foot of the card,
   with buttons that are a different shape from the pills so they can't be
   mistaken for more callouts. */
.choices {
  margin: 20px -20px -20px; padding: 18px 20px 20px;
  background: var(--panel); border-top: 1px solid var(--hair);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.item.solo .choices { margin: 22px -24px -24px; padding: 20px 24px 24px; }
.item.solo.has-photo .choices { margin-left: -22px; margin-right: -22px; margin-bottom: -24px; }
.choices.answered { padding-top: 16px; }
.choices-q {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px;
}
.choices-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice {
  flex: 1 1 160px;
  border: 1.5px solid var(--navy); border-radius: 12px;
  background: var(--white); color: var(--navy);
  padding: 14px 18px; cursor: pointer; text-align: center;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.2;
}
.choice:hover { background: var(--accent-wash); }
/* Chosen: the accent, filled — a step taken. Navy text keeps it readable. */
.choice[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--navy);
}
.choice[aria-pressed="true"]::before { content: '✓\00a0\00a0'; }
.choice:disabled { opacity: 0.5; cursor: default; }

.handled {
  display: block; font-size: 15px; font-weight: 500; line-height: 1.3;
  color: var(--ink-soft); text-align: center; padding: 4px 0;
}

/* A badge is a pill with no border — same size, same height. */
.badge {
  display: inline-block; font-size: 14px; font-weight: 600; line-height: 1.2;
  padding: 10px 16px; border: 1px solid transparent;
  border-radius: var(--r-pill); white-space: nowrap;
}
.badge-ordered { background: var(--panel); color: var(--ink-soft); font-weight: 500; }
.badge-have { background: var(--accent-tint); color: var(--navy); }

.due { font-size: 14px; color: var(--ink-faint); }
.due-soon, .due-over {
  display: inline-block; font-size: 14px; font-weight: 600; line-height: 1.2;
  padding: 10px 16px; border-radius: var(--r-pill);
}
.due-soon { color: var(--navy); background: var(--accent-tint); }
.due-over { color: var(--white); background: var(--red); }
.due-later { color: var(--ink-faint); }

.size-ask { margin-top: 18px; }
.size-ask.in-band { margin-top: 0; }
.size-ask.in-band input { width: 160px; padding: 13px 15px; font-size: 17px; border-color: var(--navy); }
.size-ask .prompt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px;
}
.size-ask .field-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.size-ask input {
  width: 120px; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--hair);
  border-radius: 10px; padding: 10px 13px;
}
.size-ask input:focus { outline: none; border-color: var(--accent); }
.size-saved { font-size: 13px; font-weight: 500; color: var(--green); }

.suggest-line { margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.suggest-open {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}

.suggest-form {
  margin-top: 14px; padding: 18px; border-radius: var(--r-block); background: var(--panel);
}
.suggest-form label {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.suggest-form input[type=text], .suggest-form textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--hair); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 14px;
}
.suggest-form textarea { min-height: 74px; resize: vertical; }
.suggest-form input:focus, .suggest-form textarea:focus { outline: none; border-color: var(--accent); }
.suggest-form .file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.suggest-form .chosen { font-size: 13.5px; color: var(--ink-soft); }
.suggest-form .s-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.previews img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--hair);
}

/* ---- the link to what was chosen ---- */
.see-link {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 15px 18px;
  background: var(--navy); color: var(--ivory); text-decoration: none;
  border-radius: 12px; font-size: 15.5px; font-weight: 500; line-height: 1.2;
}
.see-link:hover { background: var(--navy-soft); }
.see-link-text { flex: 1; }
.see-link-price { font-weight: 600; opacity: 0.85; }
.see-link-arrow { font-size: 18px; line-height: 1; }

/* ---- the approval conversation ---- */
.approval-note {
  margin-top: 18px; padding: 18px 18px 16px;
  background: var(--accent-wash); border: 1px solid var(--accent-soft);
  border-radius: var(--r-block);
}
.approval-note.has-yes { background: var(--green-wash); border-color: #bfdccb; }
.approval-head { display: flex; gap: 12px; align-items: flex-start; }
.approval-star {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.approval-note.has-yes .approval-star { background: var(--green); }
.approval-title { font-size: 15.5px; font-weight: 600; color: var(--navy); }
.approval-copy { font-size: 14.5px; color: var(--ink-body); margin-top: 3px; line-height: 1.5; }
.approval-note .proposal { background: var(--white); }
.approval-note .suggest-line { margin-top: 12px; }

.proposal {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--r-block);
  border: 1px solid var(--hair); background: var(--white);
  display: flex; gap: 14px; align-items: flex-start;
}
.proposal.approved { border-color: var(--green); }
.proposal img {
  width: 54px; height: 54px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--hair); display: block;
}
.proposal a:hover img, .approval a:hover img { border-color: var(--accent); }
.proposal .grow { flex: 1; min-width: 0; }
.proposal .state {
  font-size: 14px; font-weight: 600; margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px;
}
.state-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  border: 1.5px solid currentColor;
}
.proposal.pending  .state { color: var(--ink-soft); }
.proposal.approved .state { color: var(--green); }
.proposal.approved .state-mark { background: var(--green); border-color: var(--green); color: var(--white); }
.proposal.declined .state { color: var(--ink-soft); }
.proposal p { margin: 0 0 5px; font-size: 15px; color: var(--ink-soft); }
.proposal a { font-size: 15px; word-break: break-all; }
.proposal .reply {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: 15px; font-style: italic; color: var(--ink);
}

.signoff {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hair);
  text-align: center; font-size: 14px; color: var(--ink-soft);
}
.signoff .flourish {
  display: block; font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: 26px; color: var(--navy); margin-bottom: 6px;
}

.altar { text-align: center; margin-top: 26px; }
.altar-arch { width: 84px; height: 94px; color: var(--accent-soft); display: block; margin: 0 auto 10px; }
.altar-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.altar-countdown { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   The dashboard
   --------------------------------------------------------------------------- */

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.stat {
  flex: 1; min-width: 150px; padding: 18px 20px;
  /* A 9% wash of the couple's color, and a firmer edge, so the four tiles
     read as a set rather than dissolving into the page. */
  background: color-mix(in srgb, var(--accent) 9%, var(--white));
  border: 1.5px solid var(--accent-soft);
}

.stat .n {
  /* Bodoni numerals, like the brand's stat bands — editorial, not clinical. */
  font-family: var(--display); font-size: 34px; font-weight: 500;
  letter-spacing: 0; line-height: 1.15; color: var(--navy); margin-top: 4px;
}
.stat .n small { font-size: 16px; color: var(--ink-faint); font-weight: 400; }

.approvals, .late-panel { padding: 22px 24px; margin-bottom: 14px; }
.approvals { border-color: var(--accent-soft); }
/* Urgency without a cold white stare: the whole panel takes the warm red
   wash, the border softens, and the overline goes red. The solid red stays
   on the overdue chip alone. */
.late-panel.urgent {
  background: var(--red-wash);
  border-color: color-mix(in srgb, var(--red) 35%, var(--white));
}
.late-panel.urgent .label { color: var(--red); }

.approval, .late-person {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--hair);
}
.late-person { align-items: center; flex-wrap: wrap; }
.approval:first-of-type, .late-person:first-of-type { border-top: none; padding-top: 10px; }
.approval img { width: 70px; height: 70px; object-fit: cover; border-radius: 12px; border: 1px solid var(--hair); display: block; }
.approval .grow, .late-person .grow { flex: 1; min-width: 200px; }
/* People's names in the display face: a person, not a database row. */
.approval .who, .late-person .who {
  font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--navy);
}
.approval .what { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 8px; }
.approval p { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.approval a { font-size: 14px; word-break: break-all; }
.approval input[type=text] {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--white); border: 1px solid var(--hair); border-radius: 10px;
  padding: 10px 13px; margin-top: 10px;
}
.approval input:focus { outline: none; border-color: var(--accent); }
.late-items { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }

.look-block { margin-bottom: 26px; }
.look-block h2 { margin: 8px 0 4px; }
.look-block .sub { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }

.grid-scroll { overflow-x: auto; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.grid th, table.grid td {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--hair); white-space: nowrap;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); vertical-align: bottom;
}
table.grid th.person-col, table.grid td.person-col {
  position: sticky; left: 0; background: var(--white); z-index: 1;
  min-width: 170px; white-space: normal;
}
table.grid td.person-col { border-right: 1px solid var(--hair); }

/* Every column but the name is centered, heading and dot alike, so each dot
   sits squarely under its title. */
table.grid th:not(.person-col), table.grid td:not(.person-col) { text-align: center; }

/* A long item name wraps onto a second line rather than pushing its column
   wide; the dots below stay put. */
table.grid thead th:not(.person-col) {
  white-space: normal; max-width: 120px; line-height: 1.5; padding-top: 10px; padding-bottom: 10px;
}
/* The peek: click a check that has photos or a link behind it, and a small
   card shows what they attached. Pinned to the window just under the check. */
.mark.has-pick { cursor: pointer; }
.peek {
  position: fixed; z-index: 80; background: var(--white);
  border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(32, 42, 68, 0.14); padding: 12px 14px;
  max-width: 280px;
}
.peek-head {
  font-family: var(--display); font-weight: 500; font-size: 15px;
  color: var(--navy); margin-bottom: 8px;
}
.peek-approved {
  margin-left: 8px; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
}
.peek-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.peek-photos img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--hair); display: block;
}
.peek-link {
  display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--navy); text-decoration: underline;
}

/* The little present under a gifted item's column heading. */
.th-gift { display: block; margin-top: 3px; color: var(--accent-dark); }
.th-gift svg { width: 14px; height: 14px; display: inline-block; }

/* Alternate rows take a whisper of mist — the brand's cool secondary, so the
   page doesn't drift beige — and the eye can track a person across a wide table. The sticky name cell is painted too, so the stripe
   doesn't break when the table scrolls sideways. */
table.grid tbody tr:nth-child(even) td,
table.grid tbody tr:nth-child(even) td.person-col {
  background: var(--mist-wash);
  box-shadow: 1px 0 0 0 var(--mist-wash);   /* covers the hairline seam Chrome leaves between cells */
}
.person-name-link { font-weight: 500; color: var(--navy); text-decoration: none; }
.person-name-link:hover { text-decoration: underline; }
.person-sub { font-size: 12.5px; color: var(--ink-faint); }

td.cell { text-align: center; }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--hair); color: transparent; font-size: 12px;
}
.mark { border-radius: 50%; vertical-align: middle; }
.mark.done { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.mark.done { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.mark.done:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 3px 8px rgba(201, 169, 160, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .mark.done { transition: none; }
  .mark.done:hover { transform: none; box-shadow: none; }
}
td.tally { text-align: center; font-weight: 500; color: var(--navy); }
td.tally .all { color: var(--green); }

/* The dashboard when everyone is sorted: a green light. */
.panel.ready { border-color: var(--green); background: var(--green-wash); }
.panel.ready .label { color: var(--green); }

/* The messages panel on Settings: the fill-in words, and a preview of how the
   wording reads once they're filled. */
.fill-words { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 2; }
.fill-words code {
  background: var(--canvas); border-radius: 6px; padding: 2px 6px;
  font-size: 12.5px; color: var(--navy);
}
.message-preview {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-wash); color: var(--ink-body);
  font-size: 14px; line-height: 1.55; white-space: pre-wrap;
}
.message-preview::before {
  content: 'How it will read'; display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Editing screens
   --------------------------------------------------------------------------- */

.edit-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--hair);
}
.edit-item .swatch { width: 44px; height: 44px; border-radius: 11px; }
.edit-item .swatch-empty { background: var(--canvas); border-color: var(--border); }
.edit-item .swatch-icon { width: 22px; height: 22px; }
.edit-item .grow { flex: 1; min-width: 0; }
.edit-item .name { font-size: 16px; font-weight: 500; color: var(--navy); }
.edit-item .name .item-icon { margin-right: 7px; vertical-align: -5px; }
.edit-item .meta { font-size: 13.5px; color: var(--ink-faint); margin-top: 2px; }

.move { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.move button {
  width: 22px; height: 18px; padding: 0; cursor: pointer;
  border: none; border-radius: 6px;
  background: transparent; color: var(--ink-faint); font-size: 9px; opacity: 0.55;
}
.move button:hover:not(:disabled) { opacity: 1; color: var(--navy); background: var(--canvas); }
.move button:disabled { opacity: 0.15; cursor: default; }

.flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.flag {
  font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: var(--r-pill); background: var(--panel); color: var(--ink-soft);
}
.flag.gift { background: var(--accent-tint); color: var(--navy); }

.sizes { margin-top: 12px; padding: 14px 16px; background: var(--panel); border-radius: var(--r-block); }
.size-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.size-tag {
  font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--hair); color: var(--ink-soft);
}
.size-tag b { color: var(--ink); }
.size-tag.waiting { border-style: dashed; color: var(--ink-faint); }

.danger-zone {
  background: var(--white); border: 1px solid var(--red); border-radius: var(--r-card);
  padding: 22px; margin: 22px 0;
}
.danger-zone h3 { margin: 6px 0 6px; }
.danger-zone p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-panel { background: var(--panel); border-radius: var(--r-block); padding: 20px; margin-top: 14px; }

/* Field headings — the small capitals above each box. Written so it can't
   catch the checkbox pills, which are also labels: those sit inside a
   .check-row and were picking this up (uppercase, block layout), which is
   what kept knocking the box out of line with its text. */
.field > label {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.field input, .field select, .form-panel textarea, .form-panel select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--hair);
  border-radius: 10px; padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-panel textarea:focus, .form-panel select:focus {
  outline: none; border-color: var(--navy);
}

/* Notes show the whole note and grow as you type — see growToFit(). */
.field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  line-height: 1.55; background: var(--white);
  border: 1px solid var(--hair); border-radius: 10px;
  padding: 12px 14px; resize: vertical; min-height: 124px; overflow: hidden;
}

.check-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Different colors for different people": one small box per person in the
   look. The name sits left of its box so the list scans like a roster. */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.mc-row {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink-body);
  letter-spacing: 0; text-transform: none;
}
.mc-row span { flex: 0 0 auto; min-width: 64px; }
.mc-row input { flex: 1; min-width: 0; }
.field input:disabled { opacity: 0.5; }
/* Checkbox pills. Every property a heading label could impose is set here on
   purpose, so nothing upstream can knock the box and its text out of line. */
label.check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--white); padding: 10px 16px; margin: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink-body); line-height: 1;
  letter-spacing: 0; text-transform: none;
}
.check input {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 1px solid var(--ink-faint); border-radius: 4px; background: var(--white);
}
.check input:checked {
  border-color: var(--navy);
  background: var(--navy)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.6 8.9 10 3.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px 10px no-repeat;
}
.check:has(input:checked) { border-color: var(--navy); color: var(--navy); }

.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch-pick {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  background: var(--white); padding: 8px 14px 8px 9px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-body);
}
.swatch-pick span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.swatch-pick.on { border-color: var(--navy); color: var(--navy); }

/* ---------------------------------------------------------------------------
   Signing in
   --------------------------------------------------------------------------- */

.login-wrap {
  min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.login-card { width: 100%; max-width: 420px; overflow: hidden; }
.login-body { padding: 30px 28px 28px; }
.login-body h1 { font-family: var(--display); font-size: 27px; font-weight: 400; color: var(--navy); margin: 8px 0 8px; }
.login-body .blurb { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 20px; }
.field { margin-bottom: 16px; }
.form-error {
  background: var(--red-wash); color: var(--red); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 16px; font-size: 14px;
}
.form-hint { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; }
.recovery-code {
  font-family: "SF Mono", Menlo, monospace; font-size: 19px; font-weight: 600;
  letter-spacing: 0.12em; text-align: center; word-break: break-all;
  color: var(--navy); background: var(--accent-wash);
  border-radius: 12px; padding: 20px 16px;
}

.centered { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.centered h1 { font-family: var(--display); font-size: 27px; font-weight: 400; color: var(--navy); margin: 0 0 10px; }
.centered p { color: var(--ink-soft); margin: 0 auto; max-width: 380px; font-size: 15px; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .app-header-inner { padding: 12px 16px; gap: 12px; }
  .hi { font-size: 30px; }
  .page, .dash { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   The first-time walk: a dimmed page, a spotlight on one thing, and a card
   that says what it is in a few plain words.
   --------------------------------------------------------------------------- */

#tour .tour-veil {
  position: fixed; inset: 0; z-index: 100;
  background: transparent;                /* the spotlight's shadow does the dimming */
}
#tour .tour-veil.dim { background: rgba(32, 42, 68, 0.48); }
#tour .tour-spot {
  position: fixed; z-index: 101; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(32, 42, 68, 0.48), 0 0 0 2px var(--accent);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
#tour .tour-card {
  position: fixed; z-index: 102; width: min(360px, calc(100vw - 24px));
  background: var(--white); border-radius: var(--r-card);
  padding: 18px 20px 16px; box-shadow: 0 18px 50px rgba(32, 42, 68, 0.28);
}
#tour .tour-count {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
#tour h3 { margin: 6px 0 6px; font-family: var(--display); font-size: 22px; font-weight: 500; }
#tour p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-body); white-space: pre-line; }
#tour .tour-actions { display: flex; align-items: center; gap: 8px; }
#tour .tour-spacer { flex: 1; }
#tour .tour-skip { padding-left: 0; font-size: 13px; color: var(--ink-faint); border: none; background: none; }
#tour .tour-skip:hover { color: var(--navy); background: none; }

/* ---------------------------------------------------------------------------
   The day-of schedule
   --------------------------------------------------------------------------- */

.hidden { display: none !important; }
.row-with-button { display: flex; gap: 8px; align-items: center; }
.row-with-button input { flex: 1; min-width: 0; }
.row-with-button .btn-small { flex-shrink: 0; }

.source-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.source-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 8px 6px 6px; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--white); font-size: 13.5px;
}
.source-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.source-chip .source-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--canvas); border-radius: 6px; padding: 8px 7px;
}
.source-chip a, .source-chip span:not(.source-kind) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chip-x { border: none; background: none; font-size: 18px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 0 2px; }
.chip-x:hover { color: var(--red); }

.ai-off {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--canvas); font-size: 14.5px; color: var(--ink-soft);
}

.draft { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-block); border: 1px solid var(--green); background: var(--green-wash); }
.draft-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--white); font-size: 14px; color: var(--ink-body); }
.draft-line { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(47,125,90,.18); font-size: 14.5px; cursor: pointer; }
.draft-line input { margin-top: 3px; }
.draft-line .t { flex: 0 0 120px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.draft-line .grow { flex: 1; min-width: 0; }
.draft-line .small { font-size: 13px; color: var(--ink-soft); }

.day-head {
  margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--hair);
  font-family: var(--display); font-weight: 500; font-size: 19px; color: var(--navy);
}
.day-head .day-date { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-left: 10px; }

.tl-row { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.tl-time { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tl-title { font-weight: 500; color: var(--navy); }
.tl-where { font-size: 14px; color: var(--ink-soft); }
.tl-notes { font-size: 14px; color: var(--ink-body); margin-top: 4px; white-space: pre-line; }
.who-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--canvas); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.who-chip.some { background: var(--accent-tint); color: var(--navy); }
.view-as { font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.view-as select { padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; font: inherit; background: var(--white); color: var(--navy); }

.event-form { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--accent-soft); border-radius: var(--r-block); background: var(--white); }
.who-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.who-some { margin: 4px 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.who-group { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.who-title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 0 2px; }

@media (max-width: 640px) {
  .tl-row { grid-template-columns: 1fr; gap: 4px; }
  .tl-act { justify-self: start; }
  .draft-line .t { flex-basis: 90px; }
}

/* On a member's page: their own timeline. */
.my-schedule .tl-row { grid-template-columns: 140px 1fr; }

.steps { margin: 0 0 8px; padding-left: 20px; font-size: 14.5px; color: var(--ink-body); line-height: 1.7; }
.steps code { background: var(--canvas); border-radius: 6px; padding: 1px 6px; font-size: 13px; }

/* Schedule: used sources, the thinking spinner, picker tools */
.source-chip.used { opacity: .6; }
.source-chip.used:hover { opacity: 1; }
.chip-again { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; margin-left: 4px; }
.chip-again input { margin: 0; }
.spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px;
}
.spinner.dark { border-color: var(--accent-tint); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }
.thinking-note { display: inline-flex; align-items: center; font-size: 14px; color: var(--ink-soft); }
.who-tools { width: 100%; font-size: 13px; color: var(--ink-soft); margin: 2px 0 -2px; }
.who-tools a { color: var(--navy); }

/* Settings: foldable panels */
.fold-tools { font-size: 13px; color: var(--ink-soft); margin: -10px 0 14px; text-align: right; }
.fold-tools a { color: var(--navy); }
.fold-head {
  display: block; width: 100%; text-align: left; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; color: inherit; position: relative;
}
.fold-head .label { display: block; }
.fold-head h2, .fold-head h3 { margin: 8px 0 6px !important; }
.fold-chevron {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-soft); background: var(--accent-wash); color: var(--navy);
  line-height: 1; transition: transform .18s ease, background .15s ease;
}
.fold-chevron svg { display: block; }
.fold-head:hover .fold-chevron { background: var(--accent-tint); }
.folded .fold-chevron { transform: translateY(-50%) rotate(-90deg); }
.folded .panel-body { display: none; }
.folded .fold-head h2, .folded .fold-head h3 { margin-bottom: 0 !important; }

/* Schedule page: the couple's color, where it means something */
.panel-tinted { background: var(--accent-wash); border-color: var(--accent-soft); }
.panel-tinted .label { color: var(--accent-dark); }
.panel-tinted .field input, .panel-tinted .field textarea { background: var(--white); }
.day-head { border-bottom: 2px solid var(--accent-soft); }
.day-head .day-date { color: var(--accent-dark); }
.tl-row { border-left: 3px solid var(--accent-tint); padding-left: 12px; }
.tl-time { color: var(--accent-dark); }
.who-chip { background: var(--accent-wash); color: var(--navy); }
.who-chip.some { background: var(--accent); color: var(--navy); }
.view-as select { border-color: var(--accent-soft); background: var(--accent-wash); }
.event-form { background: var(--accent-wash); }
.source-chip { border-color: var(--accent-soft); }
.source-chip .source-kind { background: var(--accent-tint); color: var(--navy); }
.my-schedule .tl-row { border-left-color: var(--accent-soft); }

/* Looks page: a light touch of the wedding color, kept away from the item
   swatches and photos so it never fights with them. */
.looks-page .label { color: var(--accent-dark); }
.looks-page .panel-head { border-bottom: 2px solid var(--accent-soft); padding-bottom: 12px; }
.looks-page .edit-item .swatch-empty { background: var(--accent-wash); border-color: var(--accent-tint); color: var(--accent-dark); }
.looks-page .move button:not(:disabled):hover { color: var(--accent-dark); }

/* Foldable panels whose head is a .panel-head row (Wedding party) */
.fold-toggle { border: none; background: none; padding: 0; cursor: pointer; color: inherit; display: inline-flex; vertical-align: middle; }
.fold-toggle .fold-chevron { position: static; transform: none; }
.folded .fold-toggle .fold-chevron { transform: rotate(-90deg); }
.fold-head-row { align-items: center; }

/* ---------------------------------------------------------------------------
   Pills and primary buttons wear the wedding color (navy text on it), so when
   a couple picks their color, every filled pill follows — not just the dots.
   --------------------------------------------------------------------------- */
.nav a.here { background: var(--accent); color: var(--navy); }
.pill-solid { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.pill-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-small.primary { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.btn-small.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--navy); }
.btn-block { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.btn-block:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.see-link { background: var(--accent); color: var(--navy); }
.see-link:hover { background: var(--accent-dark); }
.spinner { border-color: rgba(32, 42, 68, 0.25); border-top-color: var(--navy); }

/* "See what everyone else is wearing" on a member's page */
.share-toggle { margin: 6px 0 12px; }
.other-person { padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--hair); }
.other-name { font-weight: 500; color: var(--navy); margin-bottom: 8px; }
.other-role { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-left: 6px; }
.other-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pick-card { display: flex; gap: 10px; align-items: flex-start; width: 100%; max-width: 280px; padding: 8px; border: 1px solid var(--hair); border-radius: 12px; background: var(--white); }
.pick-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.pick-item { font-weight: 500; color: var(--navy); font-size: 14.5px; }
.pick-approved { font-size: 11px; font-weight: 600; color: var(--green); margin-left: 4px; }
.pick-desc { font-size: 13px; color: var(--ink-soft); }
.pick-link { font-size: 13px; }

/* A member's own photo/link for an item they've got */
.pick-mine { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hair); }
.pick-mine-head { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pick-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick-row .pick-url { flex: 1; min-width: 160px; }
.pick-photo-btn { display: inline-block; padding: 9px 14px; border: 1px solid var(--hair); border-radius: 999px; background: var(--white); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pick-photo-btn.has-file { border-color: var(--accent); background: var(--accent-wash); }
.pick-preview img { max-width: 120px; max-height: 120px; border-radius: 10px; margin-top: 8px; display: block; }
.pick-actions { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; }

.pick-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pick-thumb { position: relative; display: inline-block; }
.pick-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--hair); }
.pick-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hair); background: var(--white); color: var(--ink-soft); font-size: 14px; line-height: 1; cursor: pointer; }
.pick-x:hover { color: var(--red); border-color: var(--red); }
.pick-linkrow { font-size: 13.5px; margin-bottom: 8px; color: var(--ink-soft); }
.pick-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-preview img { max-width: 84px; max-height: 84px; border-radius: 8px; margin-top: 6px; }
.pick-photos { display: flex; flex-wrap: wrap; gap: 4px; }
.pick-photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.pick-hint { font-size: 13px; color: var(--ink-faint); }
.wedding-line.for-party { text-align: center; padding: 22px 0 2px; margin-bottom: 0; }
.wedding-line.for-party .wedding-date { display: block; margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Member page type ladder — one hero, one masthead, everything else steps
   down: masthead 20 → greeting 36 → body 16.5 → note 18 → card title 24 → stat 20.
   --------------------------------------------------------------------------- */
.wedding-line.for-party { padding: 18px 0 2px; margin-bottom: 0; }
.wedding-line.for-party h1 { font-size: 20px; letter-spacing: 0.06em; }
.wedding-line.for-party .wedding-date { margin-top: 2px; }
.greeting { padding: 0 0 26px; }
.note-personal { font-size: 18px; }
.couple-note { padding: 16px 18px; }
.progress-count { font-size: 20px; font-weight: 500; margin: 6px 0 10px; }
.progress-count .of { font-weight: 400; color: var(--ink-soft); }

/* Timeline rows: the audience chip and the Edit button share one height and
   sit level with the first line of text. */
.tl-row { align-items: start; }
.tl-row .who-chip, .tl-row .btn-small {
  height: 32px; display: inline-flex; align-items: center; padding: 0 13px; line-height: 1;
}
.tl-who, .tl-act { padding-top: 0; }

/* Wedding party cards: one tidy head row, a labeled note, one action row */
.person-note { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-wash); }
.person-note-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); }
.person-note-text { font-family: var(--voice); font-style: italic; font-size: 16px; color: var(--navy); }
.person-actions { margin-top: 14px; }
.panel-head .row-actions { flex-shrink: 0; }

/* A small "More" menu on each person's card */
details.more { position: relative; }
details.more > summary { list-style: none; cursor: pointer; }
details.more > summary::-webkit-details-marker { display: none; }
.more-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px;
  background: var(--white); border: 1px solid var(--hair); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(32, 42, 68, 0.12); display: flex; flex-direction: column;
}
.more-menu button {
  text-align: left; background: none; border: none; padding: 9px 12px; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--navy); cursor: pointer;
}
.more-menu button:hover { background: var(--canvas); }
.more-menu button.danger { color: var(--red); }

/* Schedule: days fold */
.day-head.foldable { display: flex; align-items: baseline; gap: 10px; cursor: pointer; user-select: none; }
.day-head.foldable .day-count { margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-faint); letter-spacing: .06em; }
.day-head .fold-chevron.small { position: static; transform: none; width: 26px; height: 26px; align-self: center; }
.day-group.folded .day-body { display: none; }
.day-group.folded .day-head .fold-chevron.small { transform: rotate(-90deg); }

/* People in a look, on the Looks page */
.look-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.look-people-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.person-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--accent-wash); border: 1px solid var(--accent-tint); font-size: 13.5px; color: var(--navy); }
.person-chip .chip-x { font-size: 15px; }
.assign-pick { padding: 7px 10px; border: 1px solid var(--hair); border-radius: 999px; font: inherit; font-size: 13.5px; background: var(--white); color: var(--navy); }

.person-chip.add { cursor: pointer; padding: 5px 12px; background: var(--white); border-style: dashed; color: var(--ink-soft); }
.person-chip.add:hover { color: var(--navy); border-color: var(--accent); }
.add-person .more-menu button .from-look { font-size: 12px; color: var(--ink-faint); }

/* The welcome (sign-in / sign-up) page: a larger lockup, since it's the first thing seen. */
.welcome-page .app-header-inner { padding: 26px 20px; }
.welcome-page .brand { gap: 14px; }
.welcome-page .brand-mark { width: 32px; height: 44px; }
.welcome-page .brand-name { font-size: 40px; }

/* ---------------------------------------------------------------------------
   Petals: the quiet celebration at 100%.
   --------------------------------------------------------------------------- */
#petals { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
#petals .petal {
  position: absolute; top: -30px; display: block;
  animation-name: petal-fall, petal-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  will-change: transform, opacity;
}
#petals .petal svg {
  width: 100%; height: 100%; display: block; fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(32, 42, 68, 0.10));
  transform: rotate(var(--lean, 0deg));
  animation: petal-flutter var(--flip, 2s) ease-in-out infinite alternate;
}
#petals .petal svg .vein { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.9; stroke-linecap: round; }
/* The flutter: the petal turns toward and away from the viewer, so it thins
   and widens as it falls, the way a real petal catches the air. */
@keyframes petal-flutter {
  from { transform: rotate(var(--lean, 0deg)) rotateY(0deg)   rotateX(0deg); }
  to   { transform: rotate(var(--lean, 0deg)) rotateY(150deg) rotateX(25deg); }
}
@keyframes petal-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  85%  { opacity: inherit; }
  100% { transform: translate3d(var(--drift), 105vh, 0) rotate(var(--spin)); opacity: 0; }
}
@keyframes petal-sway {
  0%, 100% { margin-left: -14px; }
  50%      { margin-left: 14px; }
}

.notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--accent-wash); border: 1px solid var(--accent-tint); font-size: 14.5px; color: var(--ink-body); }

/* The mood board */
.mood-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.mood-thumb { position: relative; display: inline-block; }
.mood-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--hair); }
.mood-add { cursor: pointer; }
.mood-collage { column-count: 3; column-gap: 10px; }
.mood-tile { display: block; margin-bottom: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); break-inside: avoid; }
.mood-tile img { width: 100%; display: block; transition: transform .25s ease; }
.mood-tile:hover img { transform: scale(1.03); }
/* a loose, hand-pinned feel: alternating slight tilts */
.mood-tile.t1 { transform: rotate(-1.2deg); }
.mood-tile.t3 { transform: rotate(1.1deg); }
@media (max-width: 560px) { .mood-collage { column-count: 2; } }

/* The photo gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.gallery-tile { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); background: var(--white); text-decoration: none; }
.gallery-tile img { width: 100%; height: 140px; object-fit: cover; display: block; }
.gallery-caption { display: block; padding: 6px 9px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: break-word; }
.row-with-button select { padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; font: inherit; background: var(--white); color: var(--navy); }

/* ---------------------------------------------------------------------------
   Small warmths (see brand guidelines, edition 03 — motion stays quiet)
   --------------------------------------------------------------------------- */

/* The check-off bloom: three petals drift off the button and fade.
   Spawned by petalBloom() in shared.js; a two-second whisper of petals(). */
.petal-bloom { position: fixed; z-index: 60; pointer-events: none;
               animation: bloom-drift 1.9s ease-out forwards; }
/* Petals, not coins: the wrapper drifts and tumbles, while the petal itself
   flutters edge-on and back (petal-flutter, shared with the celebration) —
   the thinning and widening is what reads as a petal catching the air. */
.petal-bloom svg {
  width: 100%; height: 100%; display: block; fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(32, 42, 68, 0.10));
  transform: rotate(var(--lean, 0deg));
  animation: petal-flutter var(--flip, 1s) ease-in-out infinite alternate;
}
.petal-bloom svg path { fill: currentColor; }
.petal-bloom svg .vein { fill: none; stroke: rgba(255, 255, 255, 0.7);
                         stroke-width: 1; stroke-linecap: round; }
@keyframes bloom-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(0.7); opacity: 0; }
  12%  { opacity: 0.95; transform: translate(calc(var(--dx) * 0.15), -8px) rotate(calc(var(--rot) * 0.12)) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .petal-bloom { display: none; } }

/* The fleuron: a section divider that breaks for a small arch with one blush
   dot inside. fleuronHtml() in shared.js draws it. */
.fleuron { display: flex; align-items: center; gap: 14px; margin: 26px 0 10px; }
.fleuron .fl-line { flex: 1; border-top: 1px solid var(--hair); }
.fleuron svg { width: 13px; height: 18px; flex: 0 0 auto; color: var(--ink-faint); }
.fleuron svg.f-dot { width: 9px; height: 9px; }

/* Empty panels carry a pale fine-line drawing behind the words —
   emptyArtHtml() in shared.js. The panel needs panel-art to hold it. */
.panel-art { position: relative; overflow: hidden; }
.panel-art > :not(.empty-art) { position: relative; }
.empty-art { position: absolute; right: 8px; bottom: -14px; color: var(--accent-dark);
             opacity: 0.38; pointer-events: none; }
.empty-art svg { display: block; }