/* ============================================================
   Showengine.io: the house stylesheet (the rules and the tokens are in DESIGN.md).

   The pictures are the colour. A neutral graphite canvas, panels one step lighter, hairlines
   that are felt more than seen, one solid off-white button for the thing to do next, and a
   muted brass that only ever means "chosen", "here" or "now". One typeface, told apart by
   weight. planner.css lays out the screens on these tokens; the client pages (evening.css,
   preview.css) carry a copy of them.
   ============================================================ */

:root{
  /* surfaces */
  --ink:#0e0e10;            /* the page */
  --surface:#151517;        /* panels, cards */
  --surface-2:#1b1b1e;      /* controls, inputs */
  --surface-3:#242428;      /* hover, chosen */
  --ink-2:var(--surface-2);

  /* text and lines */
  --paper:#ecece8;
  --paper-dim:#a3a29c;
  --paper-faint:rgba(236,236,232,.16);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  /* state */
  --accent:#c9ae7c;                     /* brass: chosen, current, live; never a button to go on */
  --accent-ink:#16120a;
  --accent-tint:rgba(201,174,124,.12);
  --danger:#e3887b;
  --yes:#2f9e5e;                        /* love it: a white heart on it */
  --no:#e05a4f;                         /* not for them: a black ✕ on it */

  /* type: one family, by weight */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);

  /* shape */
  --r-lg:14px;              /* panels, cards, dialogs */
  --r-md:10px;              /* tiles, option cards */
  --r-sm:7px;               /* small tags */
  --r-pill:8px;             /* every control (the name is older than the look) */
  --tap:40px;               /* the smallest thing to hit; 44 on a touch screen */

  /* the old glass, now plain surfaces (kept as names: every screen reads them) */
  --glass:var(--surface-2);
  --glass-strong:var(--surface);
  --glass-blur:0px;
  --glass-blur-strong:0px;

  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (pointer:coarse){:root{--tap:44px}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1rem;line-height:1.5;color:var(--paper);background:var(--ink);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 0}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--sans);margin:0;text-wrap:balance}
h1{font-weight:300;letter-spacing:-.025em;line-height:1.1}
h2{font-weight:500;letter-spacing:-.012em;line-height:1.25}
h3{font-weight:600;letter-spacing:-.005em;line-height:1.3}
i,em,cite{font-style:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgba(201,174,124,.35)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rise{animation:rise .4s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* scrollbars that keep to themselves */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.24)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- the name ---------- */
.brand{font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;white-space:nowrap}
.brand .house{margin-left:.7em;padding-left:.7em;border-left:1px solid var(--line-strong);font-weight:400;color:var(--paper-dim)}
.brand .tld{color:var(--paper-dim);font-weight:400}

/* ---------- text ---------- */
.lead{font-weight:400;color:var(--paper-dim);line-height:1.5}
.note{font-size:.8125rem;color:var(--paper-dim);margin-top:12px}
.kicker{font-size:.8125rem;color:var(--paper-dim);margin:0 0 8px}
details summary{cursor:pointer;color:var(--paper-dim)}

/* ---------- buttons ----------
   .btn          quiet: graphite, a hairline
   .btn.primary  the one thing to do next (.gold is the same: its name is older than the look)
   .btn.quiet    no box until the pointer is on it
   .btn.danger   taking something out */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;
  font-size:.9375rem;font-weight:500;line-height:1.2;letter-spacing:-.005em;white-space:nowrap;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface-2);color:var(--paper);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,opacity .15s}
.btn:hover{background:var(--surface-3);border-color:rgba(255,255,255,.22)}
a.btn{text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn.primary,.btn.gold{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.primary:hover,.btn.gold:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn.quiet{background:none;border-color:transparent;color:var(--paper-dim)}
.btn.quiet:hover{background:var(--surface-2);color:var(--paper)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:rgba(227,136,123,.5)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:default;transform:none}
.btn:disabled:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn.primary:disabled:hover,.btn.gold:disabled:hover{background:var(--paper);border-color:var(--paper)}
.btn.sm{min-height:32px;padding:0 12px;font-size:.8125rem}
@media (pointer:coarse){.btn.sm{min-height:40px}}
.btn.lg{min-height:48px;padding:0 22px;font-size:1rem}
.btn .ico{font-size:1.05em;line-height:1;opacity:.9}

/* ---------- toggles: choose one of a few ----------
   A row of plain buttons; the chosen one is lifted and edged in brass. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;line-height:1.2;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--line-strong);color:var(--paper-dim);white-space:nowrap}
.chip.hot{border-color:rgba(201,174,124,.5);color:var(--accent)}
button.chip,.chip[aria-pressed]{cursor:pointer;min-height:32px;padding:0 12px;font-size:.8125rem;color:var(--paper);background:transparent;transition:background .15s,border-color .15s}
button.chip:hover,.chip[aria-pressed]:hover{background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--surface-3);border-color:var(--accent)}

/* ---------- option cards (step 1: the kind of event, the feeling) ---------- */
.opt{display:flex;align-items:center;gap:12px;text-align:left;font-size:.9375rem;color:var(--paper);padding:12px 14px;min-height:var(--tap);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{background:var(--surface-2);border-color:var(--line-strong)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.opt .mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center;font-size:.625rem;font-weight:700;color:var(--accent-ink)}
.opt[aria-pressed="true"] .mark{background:var(--accent);border-color:var(--accent)}
.opt.sq .mark{border-radius:5px}
.opt .sub{display:block;font-size:.8125rem;color:var(--paper-dim);margin-top:2px;line-height:1.35}

/* ---------- panels ---------- */
.pane{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:24px}
.pane h2{font-size:1.25rem;margin:0 0 4px}
.pane .lead{font-size:.9375rem;margin:0 0 16px}

/* ---------- boxes to type in ---------- */
textarea,input[type=text]{width:100%;font-size:1rem;line-height:1.45;color:var(--paper);background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:96px}
textarea:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
textarea::placeholder,input::placeholder{color:rgba(236,236,232,.42)}

@media (prefers-reduced-motion:reduce){.rise{animation:none}*{scroll-behavior:auto !important}}