/* =====================================================================
   chassis/looking-glass/roses.css — the Roses-era components, in the
   fleet's dress (R145)

   Six riders grew up on chassis/roses.css (the Guild, the Launcher, the
   Caucus-Race, the Hatter's Watch, the Almanack, the Count of Hearts).
   Their pages use its class names: .pill as a choice, .tab as a small
   picker, .card with its own padding, .mini, .title-fell, .save-chip.
   This sheet keeps those names and redraws them in the Looking-Glass's
   tokens and proportions, so those riders look like Humpty's Wall
   without renaming a class in thousands of lines. Load it after
   /lg/looking-glass.css and before the rider's own stylesheet.

   A rider born after R145 uses the kit's names and never loads this.
   The rider's own token references were renamed once, by
   chassis/looking-glass/migrate-roses.mjs, from the roses names to the
   dress's (--card became --paper, --paper became --cream, --accent became
   --gold-text, --accent-fill --gold, and so on).
   ===================================================================== */

body{font-size:18px;}

/* ---- the save chip (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:var(--sans);white-space:nowrap;}
.save-chip.saving{border-color:var(--gold);color:var(--gold-text);}
.save-chip.saved{border-color:var(--ok);color:var(--ok);}
.save-chip.failed{border-color:var(--danger);color:var(--danger);}

/* ---- the toast, gold as it always was in these rooms ---- */
.toast{background:var(--ink);color:var(--cream);}
.toast.bad{background:var(--danger);color:#fff;}

/* ---- pills: a choice you tap (the kit's .pill is a label; here it is a chip) ---- */
.pillset{display:flex;flex-wrap:wrap;gap:8px;}
.pill{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;
  cursor:pointer;background:var(--paper);color:var(--ink);user-select:none;font-family:var(--sans);}
.pill.on{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:none;}

/* ---- small tabs: pickers, station tabs (chassis/snippets/station-tab.js) ---- */
.tab{font-size:15px;font-weight:700;border:2px solid var(--line);background:var(--paper);color:var(--muted);border-radius:999px;padding:8px 16px;cursor:pointer;font-family:var(--sans);}
.tab.active{border-color:var(--ink);background:var(--ink);color:var(--cream);}
.tab.stationtab{display:inline-flex;align-items:center;gap:7px;}
.tab.stationtab.active{font-weight:800;}
.bdot{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(var(--ink-rgb),.35);}

/* ---- cards and titles ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:0 4px 14px var(--shadow);}
.title-fell{font-family:var(--fellsc);font-weight:400;color:var(--ink);letter-spacing:.06em;}
.brand-script{font-family:var(--fell);font-style:italic;color:var(--gold-text);}
.whimsy{font-family:var(--fell);font-style:italic;color:var(--muted);}
.mini{font-size:14px;color:var(--muted);font-family:var(--sans);}

/* ---- withBtn feedback ---- */
button.done{background:var(--ok) !important;border-color:var(--ok) !important;color:var(--on-ok) !important;font-weight:700;}
button.fail{background:var(--danger) !important;border-color:var(--danger) !important;color:#fff !important;font-weight:700;}

/* ---- the login box: the hard-won rule stays with it ---- */
#login[hidden]{display:none;}