/* Theme: modern-uzh — layer 50 (apps: sequences, planner, calendars,
   accounts). Owns the specialist views: pages with bespoke visualisations
   no generic component covers. Loaded after app.css and any per-page CSS.

   Most of sequences.css / planner.css / calendars.css / accounts.css
   already read colour from design/tokens.css's variables, and 00-tokens.css
   re-points those variables wholesale — so the bulk of these four files'
   look already changed before this file runs a single rule. What's left
   here is the minority of cases where the *structure* (a radius, a shadow,
   a gradient, a control that was never themed at all) doesn't track a
   token automatically.

   Feature-type and amino-acid-class colour encodings — .seq-base--*,
   .seq-anno-bar--*, .seq-map-arc--*, .seq-aa--*, .seq-legend__swatch--*,
   .seq-dot--*, .chip--seq-* (owned by 20-controls.css) — carry meaning a
   biologist reads directly and are untouched here, as are
   .gantt-status-* (task state) and .cal-grid__day--today/--out (calendar
   position). */

/* ============================================================
   Sequence viewer (sequences.css)
   ============================================================ */

/* The hero picks up the same accent-wash gradient .sheet__head uses
   elsewhere in this direction, instead of sitting flat — it's the same
   "record header" role samples/reagent detail pages already give this
   treatment to. */
.seq-hero {
  background: linear-gradient(180deg, var(--accent-wash), transparent 78%);
}

/* The floating feature popover used a bespoke 8px radius that matches no
   token; every other fixed-position popover in this direction (the anno
   editor included) reads off --radius-sm. */
.seq-anno-popup { border-radius: var(--radius-sm); }

/* The strand / AA-mode switch used bespoke 6px/4px radii; --radius-sm
   exists so every small control in this direction shares one number. The
   option's radius is the outer minus the track's 2px padding, so the two
   stay concentric. */
.seq-segmented { border-radius: var(--radius-sm); }
.seq-segmented__option { border-radius: calc(var(--radius-sm) - 2px); }
/* The selected option's lift was a bare rgba() shadow with no dark-mode
   counterpart — invisible on a dark track. --shadow-1 is the same "raised
   chip" treatment .sidebar__nav a.is-active uses, and it already carries
   both themes. */
.seq-segmented__option:has(input:checked),
.seq-segmented__option.is-active {
  box-shadow: var(--shadow-1);
}

/* ============================================================
   Planner (planner.css) — frappe-gantt re-skin
   ============================================================ */

/* frappe-gantt's own .action-btn:first-child/:last-child round the ends of
   the popup's action row (4px); planner.css flattens that to square
   corners for the baseline. This direction's controls are rounded
   everywhere else (--radius-sm on .btn, .field inputs, the segmented
   switch above), so the popup's own buttons pick that back up. Longhand
   corner properties, not the border-radius shorthand: with only one
   button in the row it is simultaneously :first-child and :last-child,
   and two shorthand rules of equal specificity would let the second
   silently overwrite the first's corners instead of combining with them. */
#planner-gantt-chart .popup-wrapper .action-btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
#planner-gantt-chart .popup-wrapper .action-btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* ============================================================
   Calendars (calendars.css)
   ============================================================ */

/* Day cells and weekday headers are surfaces in the .stat / .dash-card
   sense (a bounded card the grid is built from), not the small square
   marks (.cal-grid__chip, .cal-legend__swatch) that stay sharp on
   purpose — so these two pick up the same --radius-sm every other
   surface in this direction uses instead of the baseline's flat 2px. */
.cal-grid__weekday { border-radius: var(--radius-sm); }
.cal-grid__day { border-radius: var(--radius-sm); }

/* ============================================================
   Accounts (accounts.css)
   ============================================================ */

/* This is a bare <input type="text">, not a .field — app.css has never
   given a bare text input any styling of its own, in any theme, so this
   rename box has always rendered as an unstyled native control sitting
   next to a themed .btn. Bringing it onto the app's one control language
   (border, --radius-sm, --control-h) belongs in the same file that owns
   .passkey-rename, not in app.css. */
.passkey-rename input[type="text"] {
  height: var(--control-h);
  padding: 0.44rem 0.6rem;
  font: inherit;
  font-size: var(--text-ui);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.passkey-rename input[type="text"]:hover { border-color: var(--accent-dim); }
.passkey-rename input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: var(--halo);
  outline: none;
}