/* Vineyard Vibes — the shared half of the look.
 *
 * Pulled out of index.html when the host page arrived, because two pages
 * duplicating the token block is how palettes drift apart. Page-specific rules
 * stay in their own <style> block; anything both pages touch lives here.
 *
 * Conventions worth keeping if you add to this file:
 *
 *   - State is expressed with data attributes rather than modifier classes
 *     ([data-active], [data-status], [data-on]).
 *   - Depth comes from flat tonal fills plus hairline borders. No drop shadows,
 *     and no gradients — not one in the file, on purpose.
 *   - There is exactly ONE accent, --accent (rgb 139 0 0), and it is spent only
 *     on interaction: buttons, links, focus, hover, the on-state of a control.
 *     Status is never a hue here; it is tone, weight and fill. If you find
 *     yourself reaching for a second colour to mean "good" or "warning", reach
 *     for --ink vs --ink-mute instead.
 *   - Headings sit LIGHTER than body copy (--ink-head above --ink). That
 *     inversion is deliberate: the display face carries the emphasis, so the
 *     headings get out of the way. Don't "fix" it by darkening them.
 */

:root {
  /* paper — the ground. Not white; white appears nowhere. */
  --paper:        #f5f2ed;
  --paper-raised: #efeae1;   /* cards, inputs, chips */
  --paper-sunk:   #e7e1d6;   /* seg trough, link block, image backing */

  /* the dark blocks: masthead band, verdict hero. Not black. */
  --dark:      #161615;
  --dark-line: #34332f;
  --dark-head: #b8b1a7;      /* the muted mid-tone, on dark */
  --dark-mute: #8a847b;

  /* type */
  --ink:      #231f20;       /* body copy — 14.6:1 on paper */
  --ink-head: #6b6560;       /* headings — mid-tone, not black, not accent; 5.1:1 */
  --ink-mute: #666059;       /* everything secondary: hints, micro-labels,
                                placeholders. 5.6:1 on paper, 4.8:1 on sunk.
                                Only three text tones on purpose — a lighter
                                fourth tier cannot clear 4.5:1 on a #f5f2ed
                                ground, and hierarchy here comes from face,
                                size and case rather than from more greys. */

  /* rules */
  --line:        #d9d2c6;
  --line-strong: #b6ae9f;

  /* the one accent — interaction only */
  --accent:      #8b0000;
  --accent-deep: #6f0000;    /* hover; a flat step down, not a filter */
  --accent-wash: rgba(139, 0, 0, .09);

  --radius: 2px;


  --display: "Oranienbaum", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* So the native date picker and any scrollbars come up light rather than
     punching a dark hole in the paper. */
  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Links are interaction, so they get the accent. */
a { color: var(--accent); text-decoration-color: rgba(139, 0, 0, .35); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }

/* One focus treatment for the whole app, in the accent. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html { height: 100%; background: var(--paper); }

body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.shell {
  max-width: 32rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 3rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* The display treatment, in one place. Poster scale, uppercase, tracking zero —
   Oranienbaum is a condensed Didone and its caps close up on their own. */
.masthead__word,
.prompt,
.party__name,
.head__title,
.verdict__name,
.youre-in__head,
.done__name,
.evt__name,
.alt__name,
.input--title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .92;
}

/* ---- masthead ----
   A dark band that breaks the shell's gutters and sits flush against the top of
   the viewport. On a phone the shell is the viewport, so this reads full-bleed. */
.masthead {
  margin: calc(-1 * max(1.25rem, env(safe-area-inset-top))) -1.25rem 1.75rem;
  padding: calc(max(1.25rem, env(safe-area-inset-top)) + 1.6rem) 1.25rem 1.5rem;
  background: var(--dark);
  text-align: center;
}
.masthead__mark { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto .7rem; color: var(--dark-mute); }
.masthead__word {
  display: block;
  font-size: clamp(2.6rem, 15vw, 4.25rem);
  line-height: .9;
  color: var(--paper);
}
.masthead__rule {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: .9rem auto 0; max-width: 15rem;
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dark-mute); font-family: var(--sans);
}
.masthead__rule::before, .masthead__rule::after {
  content: ""; flex: 1; height: 1px; background: var(--dark-line);
}

/* ---- state machine ---- */
.state { display: none; animation: rise .32s cubic-bezier(.2,.7,.3,1) both; }
.state[data-active] { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- dropzone ---- */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; width: 100%; min-height: 15rem; padding: 2rem 1.25rem;
  background: var(--paper-raised);
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--ink); font: inherit; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.drop:hover { border-color: var(--accent); }
.drop[data-dragging] { border-color: var(--accent); background: var(--accent-wash); }
.drop__icon { font-size: 2.6rem; line-height: 1; }
.drop__title { font-weight: 600; font-size: 1.02rem; }
.drop__hint { color: var(--ink-mute); font-size: .82rem; max-width: 20rem; }

/* ---- notices ----
   The error one is the single place a wash of accent is justified: it exists to
   be acted on. The soft one is not an error, so it stays neutral. */
.notice {
  margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius);
  background: var(--accent-wash); border: 1px solid var(--accent); color: var(--ink); font-size: .87rem;
}
.notice[data-tone="warn"] {
  background: var(--paper-sunk); border: 1px dashed var(--line-strong); color: var(--ink-mute);
}

/* ---- progress steps ----
   Status without hue: pending is faint and hollow, active is filled ink, done
   is a hollow ring with a tick. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.step { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; color: var(--ink-mute); transition: color .3s; }
.step__dot {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .72rem; transition: all .3s;
}
.step__label { font-size: 1rem; }
.step[data-status="active"] { color: var(--ink); font-weight: 500; }
.step[data-status="active"] .step__dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.step[data-status="done"] { color: var(--ink-mute); }
.step[data-status="done"] .step__dot { border-color: var(--line-strong); color: var(--ink-mute); }
.step__bar { height: 1.5px; background: var(--line); position: relative; overflow: hidden; margin-left: 2.25rem; }
.step__bar[data-status="active"]::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: left center;
  animation: fill 1.6s cubic-bezier(.25,.8,.35,1) infinite;
}
.step__bar[data-status="done"] { background: var(--ink); opacity: .45; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- cards and key/value rows ---- */
.card {
  text-align: left; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.card__title {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 .75rem; font-weight: 600;
}
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .9rem; }
.row + .row { border-top: 1px solid var(--line); }
.row__k { color: var(--ink-mute); }
.row__v { color: var(--ink); text-align: right; }
.row__v[data-muted] { color: var(--ink-mute); font-style: italic; }

/* A card head, for a card whose body folds: the title on the left, the
   disclosure on the right. Same shape as the guest page's .alt__head. */
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.card__head .card__title { margin-bottom: 0; }
.card__head .reveal { margin: 0; }

/* ---- the quiet reveal ----
   Optional or folded-away content doesn't get a full-width button asking to be
   pressed; it gets a line of hint-weight text sitting among the hints. It is
   deliberately one step below .btn--ghost, because what it opens is detail a
   reader may skip, not the way forward. Shared: the host page opens its optional
   fields with it, the guest page folds the party header and the bottle rows. */
.reveal {
  background: none; border: none; font: inherit; cursor: pointer; padding: 0;
  color: var(--ink-mute); font-size: .78rem; text-decoration: underline;
  text-underline-offset: .2em;
  display: block; text-align: left; margin: .1rem 0 1.4rem;
}
.reveal:hover { color: var(--accent); }
.reveal__plus { font-family: var(--mono); margin-right: .3rem; }

/* ---- form fields ----
   Same vocabulary as .notice and .drop: raised fill, hairline border, accent on
   focus. Labels borrow .card__title's tracking so a form reads like the rest of
   the furniture. */
.field { margin-bottom: 1.15rem; }
.field__label {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600; margin: 0 0 .45rem;
}
.field__hint { display: block; margin: .4rem 0 0; font-size: .78rem; color: var(--ink-mute); }

.input, .textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .75rem .9rem;
  transition: border-color .18s;
}
.input:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }

/* A budget is two numbers that belong together. */
.range { display: flex; align-items: center; gap: .6rem; }
.range .input { text-align: center; }
.range__dash { color: var(--ink-mute); flex: none; }
.range__cur { color: var(--ink-mute); flex: none; font-size: .95rem; }

/* ---- segmented control ---- */
.seg {
  display: flex; gap: .25rem; padding: .25rem; margin-bottom: 1rem;
  background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius);
}
.seg__btn {
  flex: 1; font: inherit; font-size: .88rem; font-weight: 600;
  padding: .55rem .5rem; border-radius: var(--radius); cursor: pointer;
  background: transparent; border: none; color: var(--ink-mute);
  transition: background .18s, color .18s;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn[data-on] { background: var(--accent); color: var(--paper); }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .35rem .5rem .35rem .8rem; font-size: .85rem; color: var(--ink);
}
.chip__cat {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600;
}
.chip__x {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: var(--radius);
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; color: var(--ink-mute);
  font: inherit; font-size: .9rem; line-height: 1;
  transition: background .18s, color .18s;
}
.chip__x:hover { background: var(--accent); color: var(--paper); }
/* The read-only variant, for showing a menu back rather than editing it. */
.chip[data-static] { padding-right: .8rem; color: var(--ink-mute); }

/* ---- buttons ---- */
.btn {
  display: block; width: 100%; padding: .95rem 1.25rem; border-radius: var(--radius);
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s, background .18s, color .18s, border-color .18s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--paper); }
.btn--primary:hover:not(:disabled) { background: var(--accent-deep); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-mute); margin-top: .6rem; }
.btn--ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
/* Inline, content-width, for the actions sitting inside a list row. */
.btn--small {
  display: inline-flex; align-items: center; gap: .35rem; width: auto;
  padding: .42rem .85rem; font-size: .78rem; font-weight: 600;
}

/* The CTA is pinned to the bottom of the viewport, not to the end of the
   content, so it's reachable with a thumb no matter how long the page runs.
   The shell gets matching bottom padding so nothing hides underneath it.
   Solid paper with a hairline above it — the old fade was a gradient. */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.actions__inner { max-width: 32rem; margin: 0 auto; }
body[data-actions="1"] .shell { padding-bottom: 8rem; }
body[data-actions="2"] .shell { padding-bottom: 11.5rem; }

.foot { margin-top: auto; padding-top: 2rem; text-align: center; color: var(--ink-mute); font-size: .72rem; }
.foot code { color: var(--ink-mute); font-family: var(--mono); }
.foot a { color: var(--ink-mute); text-decoration-color: var(--line-strong); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }