/* ============================================================
   Theme: modern-uzh — layer 20, controls.

   Owns the reusable-component vocabulary: buttons, form controls,
   status chips/tags, cards/panels, popups/menus, and the small
   misc primitives (file-chip, meta, rule, stack, secret, hashbox).

   Loaded after app.css and any per-page CSS.

   Most of app.css's own colours are unchanged by this theme — the
   palette itself is uzh's, re-pointed only for --ground, --radius,
   --radius-page, --font-sans, --font-mono, --danger-dim and the type
   scale (see 00-tokens.css). So a rule only belongs in this file when
   it changes which token is used, or a control's geometry — not when
   the colour would already have come out right on its own.
   ============================================================ */

/* ----------------------------------------------------------------
   Forms — one control height for text inputs, selects and buttons
   (see .btn below), radius-sm instead of the page-level radius, and
   the halo focus ring instead of app.css's flat accent-wash glow.
   ---------------------------------------------------------------- */

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field select {
  height: var(--control-h);
}
/* A <select> takes its height from the UA's own line-height rather
   than the inherited one, so identical padding leaves it shorter than
   the text input beside it (visible on the reagent form's Storage
   temperature / Team fields). Zero its vertical padding so the fixed
   height above is what actually sizes it. */
.field select {
  padding-block: 0;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field select,
.field textarea {
  border-radius: var(--radius-sm);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--accent-dim);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: var(--halo);
}

/* The only place this class is actually used is inside a sibling's
   .filter-bar, which already sets flex:1/min-width itself — this is
   a bare fallback so the modifier means the same thing anywhere a
   form reuses it outside a filter bar. */
.field--grow {
  flex: 1;
  min-width: 13rem;
}

/* ----------------------------------------------------------------
   Buttons — join inputs/selects on --control-h so a filter toolbar's
   search field and its "Filter" button land on one baseline.
   ---------------------------------------------------------------- */

.btn {
  height: var(--control-h);
  padding-block: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
}
.btn--primary:hover {
  box-shadow: var(--shadow-lift);
}
/* Dark mode flips --accent to a light blue (#7596FF), so white text on
   .btn--primary drops under 3:1 — a real bug in the app today, not
   introduced here. Dark text fixes it, and only there: the light-mode
   accent (#0028A5) still needs white. #101828 has no token of its own
   (asked for one, see report) so it is inlined once, same as the
   redesign reference. Must stay inside the media query —
   :root:not([data-theme="light"]) also matches light mode when no
   data-theme is set at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #101828; }
}
:root[data-theme="dark"] .btn--primary { color: #101828; }
.btn--quiet {
  box-shadow: none;
}

/* ----------------------------------------------------------------
   Chips — every .chip--* status/kind variant in the app, not just
   the handful the redesign demo happened to show (grep turned up 24:
   notes' draft/sealed/signed/unver/agent, samples' ok/expiring/
   expired, tasks' planned/in_execution/done_success/done_fail/
   cancelled, references+citations' correction/retracted, calendars'
   holiday, and sequences' 8 feature-kind chips + the toggle variant).
   Geometry matches the reference's .tag exactly: tighter padding, a
   4px radius, and a border ring in the chip's own hue so a quiet fill
   still reads as a bounded control. Neutral chips (draft/seq-neutral/
   seq-misc/planned) already carry border: var(--rule) from their own
   stylesheet and are left alone.
   ---------------------------------------------------------------- */

.chip {
  padding: 0.04rem 0.36rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
}
.chip--cancelled { border-color: var(--rule-soft); }

.chip--signed,
.chip--ok,
.chip--done_success,
.chip--seq-cds {
  border-color: color-mix(in srgb, var(--signed) 32%, transparent);
}
.chip--expired,
.chip--done_fail {
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}
.chip--agent,
.chip--seq-primer {
  border-color: color-mix(in srgb, var(--agent) 32%, transparent);
}
.chip--retracted,
.chip--seq-restriction_site {
  border-color: color-mix(in srgb, var(--retracted) 32%, transparent);
}
.chip--correction,
.chip--holiday,
.chip--seq-regulatory {
  border-color: color-mix(in srgb, var(--correction) 32%, transparent);
}
.chip--seq-gene {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ---- the Gold-5 fix (design/README.md non-negotiable: every token
   clears 4.5:1 — this pair does not).
   --unverified #A27200 (Gold 5, the darkest step the UZH ramp offers)
   on --unverified-dim #FFF4DA measures 3.89:1: fails on an 11px chip
   word. Re-pointing the token cannot fix it — there is no darker gold
   to substitute. So here, as in the redesign reference, the *word*
   is set in --ink (11.55:1 on the same fill) and Gold does the fill,
   the border and the glyph (3.89:1, which clears the 3:1 bar a
   graphical mark needs). Dark mode's Gold (#FFC845) has no such
   problem, so it carries the word there as normal — this must stay
   inside the media/attribute guards, not merged into the base rule.
   Affects every chip that pairs --unverified with --unverified-dim:
   notes' sealed/unver, samples' expiring, tasks' in_execution, and
   sequences' promoter kind. This is a real bug in the running app,
   not only a redesign nicety — the uzh theme ships no stylesheets of
   its own, so it inherits app.css's failing pair unchanged too. */
.chip--sealed,
.chip--unver,
.chip--expiring,
.chip--in_execution,
.chip--seq-promoter {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--unverified) 45%, transparent);
}
/* The two that carry an svg (stroke="currentColor") keep the glyph
   gold even though the word beside it is now ink. */
.chip--sealed svg,
.chip--unver svg {
  color: var(--unverified);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--sealed,
  :root:not([data-theme="light"]) .chip--unver,
  :root:not([data-theme="light"]) .chip--expiring,
  :root:not([data-theme="light"]) .chip--in_execution,
  :root:not([data-theme="light"]) .chip--seq-promoter { color: var(--unverified); }
}
:root[data-theme="dark"] .chip--sealed,
:root[data-theme="dark"] .chip--unver,
:root[data-theme="dark"] .chip--expiring,
:root[data-theme="dark"] .chip--in_execution,
:root[data-theme="dark"] .chip--seq-promoter { color: var(--unverified); }

/* ----------------------------------------------------------------
   Cards — dash-card moves from a flat --surface-3 tile to a raised
   --surface card with resting elevation, and lifts on hover instead
   of tinting its background.
   ---------------------------------------------------------------- */

.dash-card {
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.dash-card:hover {
  /* Cancels app.css's accent-wash tint — the card lifts instead of
     tinting its fill. */
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: no-preference) {
  .dash-card { transition: transform .16s ease, box-shadow .16s ease, border-color .12s ease; }
}
.dash-card__empty {
  padding: 0.7rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* ----------------------------------------------------------------
   Popups/menus — swatch-popup, table-popup and dialog all hardcode a
   6px corner today; softened to the shared --radius-sm rather than
   inventing a fourth radius value.
   ---------------------------------------------------------------- */

.swatch-popup,
.table-popup,
.dialog {
  border-radius: var(--radius-sm);
}