/* src/kliper/adapters/web/static/css/base.css
 *
 * The behaviours the deployed templates already had. The wiremocks have none of
 * them and carry an outline: none on the More button — the one control that
 * reaches half the portal once the tab bar collapses. Porting without this file
 * would have been a net accessibility regression.
 *
 * Wrapped in @layer base per the cascade order tokens.css declares
 * (`@layer tokens, base, components, tenant;`): an unlayered rule here would
 * outrank @layer tenant no matter what a tenant stylesheet says.
 */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  /* The header no longer shifts sideways when a lazy panel grows the page past
     the fold and the scrollbar appears (CLS 0.0022 measured on the portal). */
  html { scrollbar-gutter: stable; }
  /* A modal <dialog> freezes the page behind it, as Primer's Dialog does; the
     stable gutter above keeps the layout from shifting when the scrollbar goes.
     Non-modal dialogs (show(), not showModal()) do not match :modal. */
  html:has(dialog:modal) { overflow: hidden; }
  /* `hidden` always hides. A component's `display: flex` outranked the UA rule and
     drew the empty person warning on every load; `!important` in this lowest layer
     beats any normal declaration in a later one, so no per-class `[hidden]` is needed. */
  [hidden] { display: none !important; }
  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-14);
    line-height: 1.5;
    color: var(--color-fg-default);
    background: var(--color-canvas-default);
    -webkit-font-smoothing: antialiased;
  }
  /* Primer's base: form controls don't inherit the page font and fall back to
     Arial, which has no 500 and renders a weight-500 label thin at 400. */
  button, input, select, textarea { font-family: inherit; }

  :focus-visible {
    outline: 2px solid var(--brand-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* A container that only takes focus from script (main as the skip link's
     target; no settings section is focused any more — each is its own page) is
     focused so a screen reader announces it, not so a sighted reader sees a
     ring around the whole section. Primer's base does the same for
     [tabindex="-1"]; scoped to section/main because roving menu items and
     tabs also carry tabindex="-1" and must keep their ring. */
  section[tabindex="-1"]:focus,
  main[tabindex="-1"]:focus { outline: none; }

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
    background: var(--brand-primary); color: var(--brand-on-primary);
    padding: var(--space-3) var(--space-4);
    font-weight: 600; border-radius: 0 0 var(--radius-md) 0;
  }
  .skip-link:focus { left: 0; }

  [aria-current="page"] { font-weight: 600; }

  @media (pointer: coarse) {
    /* .gh-btn is 32px, .gh-btn-sm 28px (Primer medium/small). Both are under 44px; .gh-tab-item
       grows its hit area instead (components.css, gh-tab), and
       .gh-select and .gh-more-btn are the rest of the interactive family. */
    .gh-btn, .gh-btn-sm, .gh-select, .gh-select-sm, .gh-more-btn { min-height: 44px; }
    /* 16x16 fails even SC 2.5.8's 24px floor, and it is the bulk-selection
       control on a dense feed. The hit area grows; the box does not. */
    .gh-checkbox { position: relative; }
    .gh-checkbox::before { content: ""; position: absolute; inset: -14px; }
    /* Task 6: four new interactive families, none of them measured over
       28px tall by construction (same under-44px shape as .gh-btn above),
       so each needs the same floor here rather than in components.css. */
    .gh-pagination-btn, .gh-field-input, .gh-daterange-input, .gh-tree-node > summary { min-height: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* The same switch the media query throws, forced from Preferences (users.reduced_motion). */
  html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation: none !important; transition: none !important;
  }
  html[data-motion="reduce"] { scroll-behavior: auto; }

  @media print {
    /* legal_base.html used to hide the whole <header> element itself, not just
       the nav inside it; folded in here so every page gets the same coverage
       instead of just the one template that happened to name it first. */
    .skip-link, nav, header, footer, .gh-subnav { display: none !important; }
    body { background: white; font-size: 10.5pt; }
    a { color: inherit; text-decoration: none; }
  }
}