/* base.css — part 1 of 6 of the app stylesheet.
   Holds: reset, scrollbars, the layering ladder, focus-visible, reduced motion.

   ORDER MATTERS. These files were cut out of a single app.css at line boundaries with the
   sequence preserved, so concatenating them in the order index.html links them reproduces the
   original byte for byte — which is what makes the cascade provably unchanged. Equal-specificity
   rules still resolve by source order, so reordering the <link> tags can change rendering.

   The names describe what ended up in each part, not a design: the original file interleaved
   the top bar, layout and per-feature rules, and moving rules to where they belong is a separate
   pass that this split exists to make possible. Palette is in theme.css, linked first. */
    /* Palette lives in theme.css (linked before this file). */

    /* Off-screen until focused, rather than `display: none` — a hidden element cannot be tabbed to, which
       would defeat the point. On focus it lands over the header, which is why it needs to sit above the
       header's z-index. */
    .skip-link {
      position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
      transform: translateY(-200%); transition: transform .12s ease;
      background: var(--panel); color: var(--text); border: 1px solid var(--accent-text);
      border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600;
      text-decoration: none; box-shadow: var(--shadow);
    }
    .skip-link:focus { transform: translateY(0); }
    /* Themed scrollbars (Firefox + WebKit/Blink) */
    * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: var(--scroll); border-radius: 999px;
      border: 3px solid transparent; background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
    ::-webkit-scrollbar-corner { background: transparent; }
    * { box-sizing: border-box; }

    /* The layering ladder, in order, in one place (6.70.3). The values are unchanged — this is naming,
       not reordering — but they were previously twelve numbers scattered across the file, each chosen
       against whatever it happened to collide with. Making the top bar sticky in 6.69.0 meant reading all
       twelve to pick one, and then lifting the drawer and its scrim so the bar wouldn't overtake them.
       Reach for a name; if none fits, add one here rather than inventing a number at the call site.
       Two values are deliberately absent: .ui-tabs (2) and .pm-ms-list (5) sit inside their own
       stacking contexts, competing only with siblings, so a page-level token would misrepresent them. */
    :root {
      --z-sticky-bar: 40;   /* a bar that stays put while page content scrolls under it */
      --z-menu: 50;         /* a menu opened from page content, e.g. the card row's ⋯ */
      --z-header-pop: 60;   /* a popover hanging off the top bar — above page menus */
      --z-crumb: 120;       /* the breadcrumb menu — above both of the above */
      --z-topbar: 130;      /* the sticky top bar — above every page-level menu */
      --z-scrim: 140;       /* the nav drawer's dim — covers the bar, as it did before the bar had a z-index */
      --z-drawer: 150;      /* the nav drawer itself */
      --z-skip: 160;        /* the skip link — the first tab stop, so nothing may cover it while focused */
      --z-overlay: 1000;    /* modals and toasts */
      --z-top: 1100;        /* the update banner, and a stacked .ui-dialog */
    }

    /* Keyboard focus, app-wide (6.70.1). There was no :focus-visible rule anywhere, so controls relied on
       whatever the browser drew — inconsistent across engines, and invisible on anything that had its
       outline removed. :focus-visible rather than :focus so a mouse click doesn't leave a ring behind.
       The eight rules that swap the outline for an accent border are more specific and still win; this
       covers everything else, which is most of the buttons and links. */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 3px;
    }
    /* The landing spot keeps the app's focus ring rather than suppressing it: a skip link that jumps
       silently leaves someone guessing whether it worked. Offset inward so the ring sits inside the
       content area instead of being clipped at the viewport edge. */
    #main:focus-visible { outline-offset: -3px; }

    /* Reduced motion (6.70.1). There was no such block, while the red security dot pulsed
       `infinite` — a light blinking in the corner of the screen for as long as a detection is open, for
       someone who has asked their system not to do that.
       The !important is deliberate and is the reason this is the exception to keeping the cascade clean:
       it has to beat any animation added later, including ones written after this rule. Global rather
       than a list of selectors for the same reason — a list would rot the next time something animates.
       Color and layout are untouched, so every state is still fully conveyed; only the movement stops. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    body {
      margin: 0; background: var(--bg); color: var(--text);
      font: 15px/1.5 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    /* --- Form controls, app-wide (7.28.2) -------------------------------------------------------
       A text input, select or textarea with no rules of its own renders as a WHITE box that ignores the
       theme entirely. Until now every screen painted its own controls and the ones nobody remembered
       stayed white — a trap documented since 4.4.0 (`.cd-state` in screens.css), and one the 7.27.0
       contracts form walked straight into.

       This is the default, not an override. It lives in part 1 of 6 and uses the lowest specificity that
       can do the job, so **every existing per-screen rule still wins**: equal-specificity rules resolve by
       source order, and each of the other five files is linked after this one. Adding a screen no longer
       requires remembering to paint its inputs; disagreeing with this still works exactly as before.

       Types are listed rather than using a bare `input` on purpose. Checkboxes, radios, ranges, color
       swatches and file pickers are native controls this app tints with `accent-color`, and giving them a
       panel background and a border would wreck all of them. `color-scheme` on :root (theme.css) handles
       the part CSS cannot reach — the picker panels and spinners the browser draws itself. */
    input[type="text"], input[type="search"], input[type="number"], input[type="email"],
    input[type="url"], input[type="tel"], input[type="password"], input[type="date"],
    input[type="time"], input[type="month"], input[type="week"], input[type="datetime-local"],
    input:not([type]), select, textarea {
      /* No `font-weight` here, deliberately. It was in the first cut and the blast-radius diff showed it
         changing ~300 already-styled controls from 400 to 500 across every screen — a typographic change
         nobody asked for, riding in on a theming fix. A default should only state what an unstyled control
         genuinely needs. */
      font-family: inherit; font-size: 13px;
      padding: 6px 8px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--panel-2); color: var(--text);
    }
    input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus,
    input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
    input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus,
    input[type="month"]:focus, input[type="week"]:focus, input[type="datetime-local"]:focus,
    input:not([type]):focus, select:focus, textarea:focus {
      outline: none; border-color: var(--accent);
    }
    ::placeholder { color: var(--muted); opacity: .8; }
    /* Vertical only: a horizontal drag inside a grid or flex cell pushes the surrounding layout sideways. */
    textarea { resize: vertical; }