/* One control vocabulary for the site.
 *
 * Four families cover everything clickable that is not plain prose. The same
 * four, with the same values, are defined in the console
 * (cloud/modal_app.py) -- a test holds the two copies identical, because the
 * two cannot share a file: one page is generated by Modal, the other is static
 * on Cloudflare.
 *
 * Loaded BEFORE shared-link-interactions.css on every page. That file settles
 * the cascade for anchors and must stay last; these are the shapes it acts on.
 *
 * Deliberately NOT covered: .site-nav-link and .site-brand. They are anchors,
 * they already share one look across all ten pages, and the nav carries its own
 * resting rule and active-page bar. Renaming them would touch sixty call sites
 * to buy nothing.
 *
 * Radius is three values only: 999px pills, 50% icons, 10px groups.
 */

/* --- 1. .action -- the pill, for any action that is not plain text ----------
 * Outlined is the DEFAULT: most actions on a page are secondary, and a page of
 * filled gold pills has no focal point. .primary is the one the eye should land
 * on, at most one per view.                                                   */
.action{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;min-height:38px;padding:9px 20px;
  font-family:var(--font-body,system-ui,sans-serif);font-size:14px;font-weight:600;
  line-height:1;color:var(--gold);background:transparent;
  border:1px solid var(--gold-soft);border-radius:999px;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.action:hover,.action:focus-visible{
  background:rgba(224,169,74,.08);border-color:var(--gold);text-decoration:none;
}
.action:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.action[disabled]{color:var(--muted);border-color:var(--line);background:transparent;cursor:default}
.action.primary{background:var(--gold);border-color:var(--gold);color:#1c1305}
.action.primary:hover,.action.primary:focus-visible{background:#f0bb5a;border-color:#f0bb5a}
.action.primary[disabled]{background:#67562f;border-color:#67562f;color:#8a8272}
.action.small{min-height:28px;padding:5px 13px;font-size:11.5px}
/* The other direction: a page's single most important action, where .primary alone
   is not enough weight. Only the size changes -- not the weight as well, or the
   emphasis doubles up and it stops reading as the same button. Master is the one
   control in either codebase that earns this. */
.action.tall{min-height:48px;padding:14px 24px;font-size:15px}
.action.block{display:flex;width:100%}
.action.ghost{visibility:hidden}

/* --- 2. .textlink -- text that goes somewhere, with no box -----------------
 * The rule arrives on hover rather than sitting there; a page of underlined
 * text is noise. Property order matters: a source-wide guard forbids spelling
 * this transition border-colour-first, so that list ROWS can never be given one
 * and look clickable.                                                        */
.textlink{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--gold);font-family:var(--font-body,system-ui,sans-serif);
  font-size:13px;font-weight:600;
  background:none;border:0;border-bottom:1px solid transparent;padding:0;
  text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s;
}
.textlink:hover,.textlink:focus-visible{border-bottom-color:var(--gold);text-decoration:none}
.textlink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.textlink.quiet{color:var(--muted);font-weight:500}
.textlink.quiet:hover,.textlink.quiet:focus-visible{color:var(--gold);border-bottom-color:var(--gold-soft)}
.textlink[disabled]{opacity:.6;cursor:default}
.textlink[disabled]:hover{color:var(--muted);border-bottom-color:transparent}

/* --- 3. .segbar > .segbtn -- one control making one choice -----------------
 * Joined, so the demo's four versions read as a single selector rather than
 * four unrelated buttons. .col runs it vertically, which is how both the demo
 * rail and the console's A/B stack sit beside their waveform.                */
.segbar{
  display:flex;background:rgba(10,7,3,.34);
  border:1px solid var(--line);border-radius:999px;overflow:hidden;
}
.segbar.col{flex-direction:column;border-radius:10px}
.segbtn{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 10px;white-space:nowrap;
  font-family:var(--font-tech,ui-monospace,monospace);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:0;cursor:pointer;
  transition:background .18s,color .18s;
}
.segbar:not(.col) .segbtn+.segbtn{border-left:1px solid var(--line)}
.segbar.col .segbtn+.segbtn{border-top:1px solid var(--line)}
.segbtn:hover:not([disabled]),.segbtn:focus-visible{color:var(--gold);background:rgba(224,169,74,.08)}
.segbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.segbtn.active,.segbtn.active:hover{background:var(--gold);color:#1c1305;font-weight:700}
.segbtn[disabled]{color:#6d5f4a;cursor:default;background:transparent}
/* The source side wears the cream its waveform is drawn in, not gold. The tint only
   arrives when it is the selected one -- .source alone just recolours the label. */
.segbtn.source{color:var(--ink)}
.segbtn.active.source,.segbtn.active.source:hover{background:rgba(239,231,216,.1);color:var(--ink)}

/* --- 4. .iconbtn -- a control whose whole label is a glyph -----------------
 * Circular, so it never reads as a pill with the text cut off.              */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;padding:0;margin:0;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:50%;
  font-family:var(--font-tech,ui-monospace,monospace);font-size:15px;line-height:1;
  box-shadow:none;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.iconbtn:hover,.iconbtn:focus-visible{color:var(--gold);border-color:var(--gold);background:rgba(224,169,74,.08)}
.iconbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.iconbtn.small{width:16px;height:16px;font-size:10px}
.iconbtn.large{width:38px;height:38px}
.iconbtn[disabled]{color:var(--muted);border-color:transparent;background:none;cursor:default}
/* 18px was the hamburger's glyph in a 38px button. At the 30px default that is a
   60% fill and reads heavy, so the size follows the button rather than being fixed. */
.iconbtn svg{width:15px;height:15px;display:block}
.iconbtn.large svg{width:18px;height:18px}

/* Waiting on the server. Any control can wear this; see waitOn() for the mechanics.
   The band travels for EVERYONE. There used to be a prefers-reduced-motion rule here
   that switched the animation off and left a 14% static wash, which is to say nothing
   at all -- and the author of this app has that preference set, so the feature was
   invisible to the person who asked for it. That preference exists to prevent large
   vestibular motion: parallax, full-page slides, spins. A 55%-wide band travelling
   inside a button is a spinner by another name, and nobody suppresses spinners.
   currentColor, not a fixed gold: .action.primary is a solid gold pill and gold-on-gold
   is invisible, while .action and .segbtn are gold on dark. A control's text colour
   contrasts with its own background by definition, so one rule reads on all of them. */
.uibusy-lock{pointer-events:none}
.uibusy{position:relative;overflow:hidden}
.uibusy::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;
 pointer-events:none;opacity:.38;
 background:linear-gradient(90deg,transparent,currentColor,transparent);
 animation:sweep 1.15s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(282%)}}