/* Sentinel v2 - components.css
   ONE COMPONENT LOOK, APP-WIDE, WITHOUT A MARKUP CHANGE. The component classes that already exist (every button
   flavour, tabs and segmented controls, inputs, menus and popovers, modals, toasts, chips) are restyled here on the v2
   tokens (v2/tokens.css), so the app pages, the Docs pages and the sign-in screen read as one system: one brand for
   every primary action, primary / secondary / ghost / danger looks at 28 / 34 / 40 px (44 on a touch screen), cards at
   radius 10 on e1, menus and popovers at radius 14 on e3, dialogs on e4, a 2 px brand focus ring with a 2 px gap.
   This sheet loads after styles.css and clm.css: each selector repeats the weight of the rule it restyles, so it wins
   by order and nothing here needs !important. It sets look only (colour, radius, height, elevation, type); layout
   stays with the page that owns it. New utilities: .sev-glyph[data-sev], .v2-card, .v2-badge, .v2-kbd.
   Owned by the 'tokens' area of the v2 redesign. */

/* ============================================================
   Buttons
============================================================ */
/* the shared base: height, radius, type, press feedback (instant), colour changes in the productive tier */
.btn,
.dx.dx .btn,
.run-btn-emphatic,
.auth-submit,
.stress-input .stress-go,
.toast-action,
.lib-foot-btn,
.btn-icon,
.dx.dx .icon-btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  letter-spacing: -0.005em;
  transition: background-color 120ms cubic-bezier(.22, 1, .36, 1), border-color 120ms cubic-bezier(.22, 1, .36, 1),
              color 120ms cubic-bezier(.22, 1, .36, 1), box-shadow 120ms cubic-bezier(.22, 1, .36, 1), opacity 120ms;
  -webkit-tap-highlight-color: transparent;
}
.btn,
.dx.dx .btn {
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
}
.btn-sm,
.dx.dx .btn-sm { height: var(--ctl-sm); padding: 0 10px; font-size: var(--fs-label); }
.btn:active:not(:disabled),
.dx.dx .btn:active:not(:disabled),
.run-btn-emphatic:active,
.auth-submit:active:not(:disabled) { transform: translateY(0.5px); transition-duration: 0ms; }

/* PRIMARY: the brand, the same on every page (the page accents are gone) */
.btn-primary,
.btn-accent,
.dx.dx .btn-primary,
.run-btn-emphatic,
.auth-submit,
.stress-input .stress-go {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  filter: none;
}
.btn-primary:hover:not(:disabled),
.btn-accent:hover:not(:disabled),
.dx.dx .btn-primary:hover:not(:disabled),
.run-btn-emphatic:hover,
.auth-submit:hover:not(:disabled),
.stress-input .stress-go:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
  filter: none;
}
.btn-primary:active:not(:disabled),
.btn-accent:active:not(:disabled),
.dx.dx .btn-primary:active:not(:disabled),
.run-btn-emphatic:active,
.auth-submit:active:not(:disabled) { background: var(--brand-press); border-color: var(--brand-press); }
.run-btn-emphatic {
  height: var(--ctl-md);
  padding: 0 16px;
  font-size: var(--fs-small);
  box-shadow: var(--e1);
}
.run-btn-emphatic.is-running { filter: none; opacity: .72; }
.auth-submit {
  height: var(--ctl-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
}

/* SECONDARY: a quiet surface with a strong hairline */
.btn-secondary,
.dx.dx .btn:where(:not(.btn-primary, .btn-ghost, .btn-danger)) {
  background: var(--surface-card);
  border-color: var(--line-3);
  color: var(--ink-1);
}
.btn-secondary:hover:not(:disabled),
.dx.dx .btn:where(:not(.btn-primary, .btn-ghost, .btn-danger)):hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink-1) 5%, var(--surface-card));
  border-color: color-mix(in srgb, var(--ink-1) 28%, var(--line-3));
}
.btn-secondary:active:not(:disabled) { background: color-mix(in srgb, var(--ink-1) 9%, var(--surface-card)); }

/* GHOST: text only until hovered */
.btn-ghost,
.dx.dx .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover:not(:disabled),
.dx.dx .btn-ghost:hover:not(:disabled) { background: var(--surface-hover-2); color: var(--ink-1); }

/* DANGER: red means risk. A destructive action wears the Critical colour on its soft ground, never a loud fill. */
.btn-danger,
.dx.dx .btn-danger {
  background: var(--sev-critical-soft);
  border-color: color-mix(in srgb, var(--sev-critical) 38%, transparent);
  color: var(--sev-critical);
  filter: none;
}
.btn-danger:hover:not(:disabled),
.dx.dx .btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sev-critical) 16%, transparent);
  border-color: var(--sev-critical);
  filter: none;
}

/* ICON buttons */
.btn-icon,
.dx.dx .icon-btn {
  width: var(--ctl-sm);
  height: var(--ctl-sm);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
}
.btn-icon:hover,
.dx.dx .icon-btn:hover { background: var(--surface-hover-2); color: var(--ink-1); }

/* disabled: one look */
.btn:disabled,
.dx.dx .btn:disabled,
.auth-submit:disabled { opacity: .45; cursor: not-allowed; }

/* the library foot, the toast's action */
.lib-foot-btn { color: var(--ink-2); font-size: var(--fs-label); }
.lib-foot-btn:hover { color: var(--ink-1); background: var(--surface-hover-2); }
.toast-action {
  border-color: var(--line-3);
  color: var(--brand-ink);
  font-size: var(--fs-label);
}
.toast-action:hover { background: var(--surface-hover-2); }

/* a touch screen: every control reaches 44 px (WCAG 2.5.5) */
@media (pointer: coarse) {
  .btn, .dx.dx .btn, .run-btn-emphatic, .auth-submit, .stress-input .stress-go { min-height: var(--ctl-touch); }
  .btn-icon, .dx.dx .icon-btn { min-width: var(--ctl-touch); min-height: var(--ctl-touch); }
}

/* ============================================================
   Focus: 2 px brand ring, 2 px gap. The base rule (styles.css `:focus-visible`) already draws it in --focus for
   every focusable element; the segmented controls clip their children, so their ring sits inside.
============================================================ */
.dvt-btn:focus-visible,
.dmt-btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }

/* ============================================================
   Inputs: the control outline reads at 3:1 (WCAG 1.4.11); focus = brand edge + soft brand halo
============================================================ */
.set-input,
.modal-input,
.cmt-input,
.dd-comment-input,
.lib-rename-input,
.xp-input,
.cal-select,
.auth-field input,
.dx.dx :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"], select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background: var(--surface-card);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  color: var(--ink-1);
  transition: border-color 120ms cubic-bezier(.22, 1, .36, 1), box-shadow 120ms cubic-bezier(.22, 1, .36, 1);
}
.set-input[type="range"] { border: 0; background: transparent; accent-color: var(--brand); }
/* a search field drawn inside its own framed box (the explorer's, the clouds') stays bare: the box is the field */
.dx.dx.dx .xp .xp-search input[type="search"], .dx.dx.dx .xp .xp-search input[type="search"]:focus,
.dx.dx.dx .cl-host .cl-search input[type="search"], .dx.dx.dx .cl-host .cl-search input[type="search"]:focus {
  border: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; height: auto; outline: none;
}
.set-input:focus,
.modal-input:focus,
.cmt-input:focus,
.dd-comment-input:focus,
.lib-rename-input:focus,
.xp-input:focus,
.cal-select:focus,
.auth-field input:focus,
.dx.dx :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"], select, textarea):focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}
:is(.set-input, .modal-input, .cmt-input, .dd-comment-input, .auth-field input)::placeholder { color: var(--ink-3); opacity: 1; }
.stress-input { border-color: var(--line-control); border-radius: var(--radius-md); background: var(--surface-card); }
.stress-input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--brand-soft-2); }
.app input[type="checkbox"], .app input[type="radio"], .dx.dx input[type="checkbox"], .dx.dx input[type="radio"] { accent-color: var(--brand); }

/* ============================================================
   Tabs and segmented controls
============================================================ */
/* segmented: a sunken track, the chosen segment raised on the card surface */
.draft-mode-toggle,
.draft-view-toggle {
  border-color: var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: 2px;
  gap: 2px;
}
.dmt-btn,
.dvt-btn {
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--ink-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  transition: background-color 120ms cubic-bezier(.22, 1, .36, 1), color 120ms cubic-bezier(.22, 1, .36, 1);
}
.dmt-btn:hover:not(.is-active),
.dvt-btn:hover:not(.is-active) { color: var(--ink-1); }
.dmt-btn.is-active,
.dvt-btn.is-active {
  background: var(--surface-card);
  color: var(--ink-1);
  box-shadow: var(--e1), inset 0 0 0 1px var(--line-2);
}

/* pill tabs (counts in a bar) */
.pill-tab {
  height: var(--ctl-sm);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  transition: background-color 120ms cubic-bezier(.22, 1, .36, 1), color 120ms cubic-bezier(.22, 1, .36, 1);
}
.pill-tab:hover { color: var(--ink-1); background: var(--surface-hover); }
.pill-tab.is-active { color: var(--ink-1); background: var(--surface-hover-2); }
.pill-tab .pt-count { color: var(--ink-3); }

/* underlined tabs (the library) and the settings list */
.lib-tab { color: var(--ink-3); }
.lib-tab:hover { color: var(--ink-1); }
.lib-tab.is-active { color: var(--ink-1); }
.lib-tab.is-active::after { background: var(--brand); }
.settings-tab { color: var(--ink-2); border-radius: var(--radius-sm); }
.settings-tab:hover { background: var(--surface-hover); color: var(--ink-1); }
.settings-tab.is-active { background: var(--surface-card); color: var(--ink-1); box-shadow: var(--e1); }
.settings-tab.is-active svg { color: var(--brand-ink); }
.settings-tab.is-active::before { background: var(--brand); }

/* ============================================================
   Chips, badges, pills
============================================================ */
.rpt-chip,
.sev-chip {
  border-color: var(--line-2);
  background: var(--surface-card);
  color: var(--ink-2);
  transition: border-color 120ms cubic-bezier(.22, 1, .36, 1), background-color 120ms cubic-bezier(.22, 1, .36, 1), color 120ms cubic-bezier(.22, 1, .36, 1);
}
.rpt-chip:hover,
.sev-chip:hover { border-color: var(--line-3); color: var(--ink-1); }
.dd-chip { border-radius: var(--radius-xs); color: var(--ink-2); border-color: var(--line-2); background: var(--surface-sunken); }
.dd-chip:hover { color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
/* the Docs status tag and the explorer's micro labels: nothing under 11 px */
.dx .sd-tag { font-size: var(--fs-micro); }
.xp-signed { font-size: var(--fs-micro); color: var(--ok); background: var(--ok-soft); }
.xp-dot { font-size: var(--fs-micro); color: var(--on-brand); }
/* the library's per-file counts: white on #f07b27 was 2.6:1; the severity tokens carry the theme's own ink on them */
.xp-dot.is-crit { background: var(--sev-critical); }
.xp-dot.is-high { background: var(--sev-high); }
.xp-dot.is-ok { background: var(--ok); }

/* utilities for new markup */
.v2-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--fs-micro) / var(--lh-micro) var(--font-ui);
  color: var(--ink-2);
  background: var(--surface-hover-2);
  white-space: nowrap;
}
.v2-badge[data-tone="brand"] { color: var(--brand-ink); background: var(--brand-soft); }
.v2-badge[data-tone="ok"] { color: var(--ok); background: var(--ok-soft); }
.v2-badge[data-tone="warn"] { color: var(--warn); background: var(--warn-soft); }
.v2-badge[data-tone="party-a"] { color: var(--party-a); background: var(--party-a-soft); }
.v2-badge[data-tone="party-b"] { color: var(--party-b); background: var(--party-b-soft); }
.v2-kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: var(--fw-medium) var(--fs-micro) / 1 var(--font-ui);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-card);
}
.v2-card {
  background: var(--surface-card);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  box-shadow: var(--e1);
}
.v2-card[data-interactive]:hover { box-shadow: var(--e2); border-color: var(--line-2); }

/* ============================================================
   The severity glyph system: glyph + word first, colour second.
   <span class="sev-glyph" data-sev="critical|high|medium|low"></span>  ->  ◆ ▲ ● ○ in the level's colour.
   .sev-tag adds the soft ground for a glyph + word label.
============================================================ */
.sev-glyph { display: inline-block; width: 1em; text-align: center; line-height: 1; font-style: normal; }
.sev-glyph::before { content: "●"; }
.sev-glyph[data-sev="critical"] { color: var(--sev-critical); }
.sev-glyph[data-sev="critical"]::before { content: "◆"; }
.sev-glyph[data-sev="high"] { color: var(--sev-high); }
.sev-glyph[data-sev="high"]::before { content: "▲"; font-size: .86em; }
.sev-glyph[data-sev="medium"] { color: var(--sev-medium); }
.sev-glyph[data-sev="medium"]::before { content: "●"; }
.sev-glyph[data-sev="low"] { color: var(--sev-low); }
.sev-glyph[data-sev="low"]::before { content: "○"; }
.sev-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px 0 6px;
  border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-micro) / 1 var(--font-ui);
  letter-spacing: .02em;
}
.sev-tag[data-sev="critical"] { color: var(--sev-critical); background: var(--sev-critical-soft); }
.sev-tag[data-sev="high"] { color: var(--sev-high); background: var(--sev-high-soft); }
.sev-tag[data-sev="medium"] { color: var(--sev-medium); background: var(--sev-medium-soft); }
.sev-tag[data-sev="low"] { color: var(--sev-low); background: var(--sev-low-soft); }
.party-a { color: var(--party-a); }
.party-b { color: var(--party-b); }

/* ============================================================
   Menus and popovers: radius 14, e3, the raised surface
============================================================ */
.menu,
.settings-pop,
.pb-type-menu,
.pb-block-picker,
.pb-classify-menu {
  background: var(--surface-raised);
  border-color: var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--e3);
}
.menu { padding: 6px; }
.menu-item { border-radius: 8px; color: var(--ink-1); }
.menu-item:hover,
.menu-item:focus-visible { background: var(--surface-hover-2); }
.menu-item.is-danger { color: var(--sev-critical); }
.menu-sep { background: var(--line-2); }

/* ============================================================
   Dialogs: radius 14, e4, the scrim from the theme
============================================================ */
.modal {
  background: var(--surface-raised);
  border-color: var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--e4);
}
.modal-back { background: var(--surface-scrim); }
.modal-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.modal-sub { color: var(--ink-2); font-size: var(--fs-small); }
.modal-foot {
  background: var(--surface-pane);
  border-top-color: var(--line-1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================
   Toasts: radius 10, e3, the raised surface
============================================================ */
.toast {
  background: var(--surface-raised);
  border-color: var(--line-2);
  border-radius: var(--radius-md);
  box-shadow: var(--e3);
  color: var(--ink-1);
  font-size: var(--fs-small);
}
.toast .dot { background: var(--ok); }
.toast.is-info .dot { background: var(--brand); }
.toast.is-warn .dot { background: var(--sev-medium); }
.toast.is-error .dot { background: var(--sev-critical); }

/* ============================================================
   The sign-in screen and the password gate follow the reader's theme (<body> carries it). Their look - a light or dark
   brand panel with the lattice mark, the form card - is the brand area's own palette (--au-* in v2/auth.css and the
   auth block of styles.css); no rule here repaints them.
============================================================ */

/* ============================================================
   Text selection and scrollbars follow the theme
============================================================ */
.app, .dx.dx, .auth-screen { scrollbar-color: color-mix(in srgb, var(--ink-1) 22%, transparent) transparent; }