/* =====================================================================
   chassis/roses.css — "Painting the Roses" design tokens + components
   (ORGAN 9). One canonical copy; the donor's four drifted copy-pastes
   end here. Pages keep only page-specific rules. Tablet skins are
   per-station overrides of these custom properties.

   OPEN RECONCILIATION (flagged, not silently resolved): app navy is
   #0D1428; the master brand standards say navy #1A2849. Per the chassis
   context ruling, reconcile ONCE during the Tablet Skins build so the
   fleet doesn't ship two navies. Until then this file carries the app
   value and this comment carries the debt.

   Fonts arrive via one Google Fonts link (runtime third-party
   dependency; tablets in a dead zone fall back to Baskerville/Georgia,
   acceptable but known):
   EB Garamond (body) · IM Fell English SC (gold titles) ·
   IM Fell English italic (whimsy) · Great Vibes (brand) ·
   Helvetica Neue system stack (chips, data).
   ===================================================================== */

:root {
  /* canonical tokens */
  --paper: #0D1428;
  --card: #17213E;
  --panel2: #1E2A4E;
  --line: #2A3560;
  --ink: #FBF6E4;
  --muted: #B9B29A;
  --faint: #6E6A58;
  --accent: #D9A521;
  --accent2: #38A9C2;
  --deep-red: #C81E3A;
  --ok: #54E636;
  --warn: #D9A521;
  --bad: #E5405E;
  /* planner-era aliases, now everywhere so pages stop drifting */
  --red: #E5405E;
  --amber: #D9A521;
  --green: #54E636;
  --grey: #26314F;
  --navy: #38A9C2;
  --teal: #38A9C2;
  --text: #FBF6E4;
  --greybg: #1E2A4E;
  --amberbg: #3A2F14;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.45 'EB Garamond', Baskerville, Georgia, serif;
  background: var(--paper);
  color: var(--ink);
}

/* ---- save chip (pairs with chassis/save-queue.js states) ---- */
.save-chip { font-size: 13.5px; padding: 3px 12px; border-radius: 99px; border: 1.5px solid var(--line); color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; white-space: nowrap; }
.save-chip.saving { border-color: var(--accent); color: var(--accent); }
.save-chip.saved { border-color: var(--ok); color: var(--ok); }
.save-chip.failed { border-color: var(--deep-red); color: var(--bad); }

/* ---- buttons: withBtn feedback states ---- */
button.done { background: var(--ok) !important; border-color: var(--ok) !important; color: #0C2404 !important; font-weight: 700; box-shadow: 0 0 14px rgba(84, 230, 54, .5); }
button.fail { background: var(--deep-red) !important; border-color: var(--deep-red) !important; color: #fff !important; font-weight: 700; }

/* ---- toast ---- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--accent); color: #241B04; padding: 13px 26px; border-radius: 14px; font-size: 16px; font-weight: 700; opacity: 0; transition: opacity .2s, transform .2s; z-index: 30; font-family: 'Helvetica Neue', Helvetica, sans-serif; box-shadow: 0 0 24px rgba(217, 165, 33, .5); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--deep-red); color: #fff; }

/* ---- pills ---- */
.pillset { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { border: 2px solid #3A4776; border-radius: 14px; padding: 4px 13px; font-size: 14px; cursor: pointer; background: var(--card); user-select: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.pill.on { background: #2A2410; color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(217, 165, 33, .35); }

/* ---- tabs (station pickers; see chassis/snippets/station-tab.js) ---- */
.tab { font-size: 14px; border: 1.5px solid var(--line); background: var(--card); border-radius: 11px; padding: 5px 13px; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.tab.active { border-color: var(--accent); background: #2A2410; color: var(--accent); }
.tab.stationtab { display: inline-flex; align-items: center; gap: 7px; }
.tab.stationtab.active { font-weight: 700; }
.bdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(251, 246, 228, .35); }

/* ---- cards, titles ---- */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.title-fell { font-family: 'IM Fell English SC', serif; font-weight: 400; color: var(--accent); letter-spacing: .06em; }
.brand-script { font-family: 'Great Vibes', cursive; color: var(--accent); }
.whimsy { font-family: 'IM Fell English', serif; font-style: italic; color: var(--muted); }
.mini { font-size: 13.5px; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; }

/* ---- login ----
   Hard-won rule, keep with the component forever: a flex display beat
   the [hidden] attribute once and silently blocked all clicks. */
#login[hidden] { display: none; }