/* Instrument — the surfaces MudBlazor does not own. DESIGN.md.
   Everything here derives from the palette; nothing hardcodes a colour the theme also sets. */

/* The design tokens that do not change with the palette. MudThemeProvider has no slot for a face
   or for the mark's weight, and both are the same in paper and in gloom — so they are static here
   rather than written into the layout's runtime <style>, which carries only the chart ramp
   (Instrument.cs). */
:root {
    --sl-serif: Archivo, "Helvetica Neue", Arial, sans-serif;
    --sl-sans: Inter, "Segoe UI", system-ui, sans-serif;
    --sl-mark-weight: 600;
}

html { -webkit-text-size-adjust: 100%; }

/* ---- The palette before the circuit has an opinion. #37, D49. ------------------------------

   The page used to be painted white and turned dark four hundred milliseconds later, because the
   whole palette came from MudThemeProvider and it cannot run until the circuit is live. What a man
   holding a dark phone at 0530 saw first was Paper.

   A man who follows his device is answered here, in CSS, with no script and no round trip. `html:
   root` rather than `:root` for the same reason §13.7 needs it in print: MudThemeProvider writes
   its variables into an inline <style> that lands after this file, so at equal specificity it wins
   — one extra type selector is the difference between this working and silently doing nothing.

   A man who has chosen carries `data-theme` on <html>, set before the first paint by the inline
   script in App.razor and kept in step by the layout afterwards. The guard is what lets his choice
   beat his device: `not([data-theme="light"])` steps aside the moment he asks for Paper on a dark
   phone.

   Only the surfaces the eye lands on in that first instant. The rest of the dark palette arrives
   with the circuit, which is soon enough for a chip or a chart ramp and much too late for the
   background. */
@media (prefers-color-scheme: dark) {
    html:root:not([data-theme="light"]) {
        --mud-palette-background: #0B0E12;
        --mud-palette-background-gray: #0B0E12;
        --mud-palette-surface: #141920;
        --mud-palette-text-primary: #EAEFF5;
        --mud-palette-text-secondary: #AEB8C4;
        --mud-palette-text-disabled: #78828E;
        --mud-palette-divider: #222A33;
        --mud-palette-lines-inputs: #303945;
    }
}

/* And the other way: Gloom on a device set to light. */
html:root[data-theme="dark"] {
    --mud-palette-background: #0B0E12;
    --mud-palette-background-gray: #0B0E12;
    --mud-palette-surface: #141920;
    --mud-palette-text-primary: #EAEFF5;
    --mud-palette-text-secondary: #AEB8C4;
    --mud-palette-text-disabled: #78828E;
    --mud-palette-divider: #222A33;
    --mud-palette-lines-inputs: #303945;
}

html:root[data-theme="light"] {
    --mud-palette-background: #FFFFFF;
    --mud-palette-background-gray: #F4F6F8;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-text-primary: #0E1116;
    --mud-palette-text-secondary: #3F4854;
    --mud-palette-text-disabled: #6B7480;
    --mud-palette-divider: #DDE2E8;
    --mud-palette-lines-inputs: #C3CBD4;
}

body {
    margin: 0;
    font-family: var(--sl-sans);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    /* The default grid-fit thins Archivo's display weights badly at heading sizes. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Columns of figures have to line up. This is most of why the numbers read as a record. */
.mud-typography, h1, h2, h3, td, .sl-num { font-variant-numeric: tabular-nums; }

/* The parts of the page nobody draws still belong to the design. */
::selection {
    background: color-mix(in oklab, var(--mud-palette-secondary) 24%, transparent);
    color: var(--mud-palette-text-primary);
}

:root { accent-color: var(--mud-palette-primary); caret-color: var(--mud-palette-secondary); }

:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* FocusOnNavigate moves the reader to the heading after a route change. That is for screen
   readers; drawing a ring around a heading nobody clicked is noise. Interactive elements keep
   theirs. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* The mark carries its own weight: it is the one coloured thing with no fill behind it
   (Instrument.MarkWeight). */
a {
    color: var(--mud-palette-secondary);
    font-weight: var(--sl-mark-weight, 400);

    /* Underlined, said here rather than left to the browser: MudBlazor's reset strips it, so a
       link arrived blue-and-bare on one screen and underlined on the next depending on which rule
       happened to reach it. Colour alone is not a link — the same argument as status never being
       colour alone (DESIGN.md). */
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;

    /* Drawn at part strength. The rule has to be there at rest — WCAG 1.4.1 lets colour carry a
       link alone only where the link is 3:1 against the body text around it, and the mark is 3.03
       on Paper and 2.59 in Gloom, so it does not qualify in the dark. And a cue that arrives on
       hover does not exist on a phone, which is where this is read at 0530. But a roster where
       every name is ruled reads as a page of corrections, so the line is quiet until it is
       wanted. */
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

a:hover,
a:focus-visible {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

/* Stepping through time: the week on My Shield Lock and on the report, the day on Today. It was
   written out twice and the two had already drifted — one dimmed its spent state with opacity and
   the other with the disabled ink, and only one of them animated. The ink, because opacity fades
   the border with the glyph and the border is what makes it a target.

   `stepper`, not `step`: Today's goal cards have carried a `.step` of their own since before this
   was shared, and putting the two under one name made the date arrows 60px tall and drawn in ink,
   which is the card's button rather than this one. */
.stepper {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.stepper__go {
    width: 2.75rem;
    height: 2.75rem;                       /* 44px: a target, not a decoration */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: border-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1);
}

.stepper__go:hover { border-color: var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); }

.stepper__go--off,
.stepper__go:disabled { color: var(--mud-palette-action-disabled); cursor: default; }

.stepper__go--off:hover,
.stepper__go:disabled:hover {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-action-disabled);
}

/* A label a screen reader reads and the eye does not. It lived in two pages' scoped CSS, which is
   why the third to want it rendered its label as body copy. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Controls are not links, whatever element they are made of: a button with a rule under its label
   reads as broken, and a nav tab is a place rather than a reference. */
.btn,
.tab { text-decoration: none; }

/* A man's name, wherever it links to his week. The screens disagreed: one left the name in ink
   until a hover revealed it, another coloured it on hover only, and the marks beside them were
   blue and underlined — three treatments for one idea. A name that only shows itself on hover is
   not a link on a phone, where there is no hover at all.

   The anchor stays plain because it wraps the whole row — the row is the target, 48px of it
   (DESIGN.md) — and the name inside it carries the link the way every other link on the page
   does. Global rather than per page: this drifted once already because it lived in three files. */
.pax-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pax-link h2,
.pax-link h3 {
    color: var(--mud-palette-secondary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

.pax-link:hover h2,
.pax-link:hover h3,
.pax-link:focus-visible h2,
.pax-link:focus-visible h3 {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

* { scrollbar-width: thin; scrollbar-color: var(--mud-palette-lines-inputs) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-inputs);
    border-radius: 6px;
    border: 3px solid var(--mud-palette-background);
}
::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-text-disabled); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Paper is paper: the report prints from the light palette whatever the toggle says, and status
   drops its colour entirely — icon and word in ink is what survives a mono printer (PLAN.md §13.7). */
@media print {
    /* Paper is paper, whatever the toggle says — so the palette is restated here rather than
       only the body's two colours. Forcing `body` alone left every rule that reads a variable
       still holding its dark-palette value: pale grey on white, which a printer renders as almost
       nothing. The values are Instrument's light palette (DESIGN.md); the panel has no meaning on
       a sheet of paper.

       Primary and secondary are ink here rather than the accent and the mark. On screen they say
       "you can press this"; on a printed report nothing is pressable, and a mid blue is just a
       mid grey to a mono printer — the same reason status drops its colour below.

       `html:root` rather than `:root`: MudThemeProvider writes the live palette into an inline
       <style> that lands after this file, so at equal specificity it wins. One type selector is
       the whole difference between this working and silently doing nothing. */
    html:root {
        color-scheme: light;
        --mud-palette-background: #fff;
        --mud-palette-background-gray: #fff;
        --mud-palette-surface: #fff;
        --mud-palette-text-primary: #0E1116;
        --mud-palette-text-secondary: #3F4854;
        --mud-palette-text-disabled: #6B7480;
        --mud-palette-divider: #DDE2E8;
        --mud-palette-divider-light: #DDE2E8;
        --mud-palette-lines-inputs: #C3CBD4;
        --mud-palette-primary: #0E1116;
        --mud-palette-primary-text: #fff;
        --mud-palette-secondary: #0E1116;
    }

    body { background: #fff; color: #0E1116; }
    .shell { background: #fff; }
    .shell__nav, .week__step { display: none !important; }
    .shell__body { padding: 0; }

    /* Status drops its colour entirely: icon and word in ink is what survives a mono printer.
       This is the ONE place that happens — the screen keeps its colour, and a page that wants a
       status in ink does not need to ask for it (D42). */
    .sl-status, .tally__n { color: #0E1116 !important; }
    .man, .flag { break-inside: avoid; }
}