/* ============================================================================
   base.css — reset + the typography ramp (ADR 0031 §5).

   The typography ramp reads the same in the in-app webview and on a remote browser:

     PageTitle / PageDescription            → .page-title / .page-description
     SectionTitle / SectionHeader / Eyebrow → .section-title / .section-header / .eyebrow
     FieldLabel + FieldDescription          → .field-label / .field-description   (label-left rows)
     InputLabel + FieldValue                → .input-label / .field-value         (label-above fields)

   Every value resolves through var(--…) from tokens.css — no themed literals here.
   ============================================================================ */

@import url('tokens.css');

/* Fluent UI System Icons (MIT, ADR 0030 §4) — the glyph font behind every .ui-glyph,
   .ui-tree-chevron, dashboard .cmp-icon, etc. Declared here in the foundation sheet (not
   buried in dashboard.css) because the shared component library depends on it. */
@font-face {
    font-family: 'FluentSystemIcons-Resizable';
    src: url('../fonts/FluentSystemIcons-Resizable.ttf') format('truetype');
    font-display: block;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    -webkit-font-smoothing: antialiased;
    /* Chinese, Japanese and Korean wrap between characters rather than between words, and those
       scripts have their own rule about which characters may not open or close a line (a line
       never begins with a closing bracket or a full stop). Stated once, for every screen. */
    line-break: strict;
    word-break: normal;
}

h1, h2, h3, h4, p {
    margin: 0;
}

/* ---- Form controls join the app's typography --------------------------------
   Typography does NOT inherit into <button>/<input>/<select>/<textarea>/<optgroup>:
   Chromium's own sheet gives them a control font (13.333px of a system face), so a control
   left alone draws in a different family from the text around it — as if it came from
   another application. `font: inherit` hands the whole shorthand (family, size, weight,
   style, line-height) back to the containing text, so every control — and every class
   written from here on — takes the app's type by default. A control that wants its own
   metrics still says so in its own rule, which wins on specificity. */
button,
input,
select,
textarea,
optgroup {
    font: inherit;
}

/* ---- Scrollbars — thin + themed (Chromium; the app design, not the OS default) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;   /* inset the thumb so it reads as a slim pill */
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---- Keyboard focus — one accent ring for every interactive element ----------
   :focus-visible only paints for keyboard / programmatic focus (never a mouse click),
   so this supplies the missing keyboard affordance app-wide without ringing every click.
   The 2px gutter keeps it visible over accent-filled controls too. Text controls own a
   richer focus look (accent border) and opt out below; the tree drives focus through its
   own selected-row highlight. */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}

.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible,
.log-search-input:focus-visible {
    outline: none;
}

/* <FocusOnNavigate Selector="h1"> (Routes.razor) moves focus to the page heading on every
   navigation so screen readers announce the new page. Any h1 is a valid target — the shared
   .page-title masthead, the paused-runtime card, the not-found screen — so the exemption is
   keyed to the ELEMENT, not to one class: a heading authored anywhere inherits it and no page
   has to opt in. Never re-state this per heading class. A heading is non-interactive and out
   of the tab order (FocusOnNavigate gives it tabindex=-1), so keyboard users never reach it —
   only the visible outline is dropped, the a11y focus move stays. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* ---- Reduced motion — drop transition movement, but keep functional state animations
   (the alarm LED blink, indeterminate progress) which carry live information. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* ---- Typography ramp -------------------------------------------------------- */

.page-title {
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: 1.2;
}

.page-description {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    line-height: 1.4;
}

.section-title {
    font-size: var(--font-size-section);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.section-header {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.eyebrow {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Inline disclosure (native <details>) — a secondary "Advanced" reveal inside a card.
   The default triangle/marker is hidden; a rotating chevron shows open/closed instead. */
.ui-disclosure > summary {
    cursor: pointer;
    width: fit-content;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    padding: var(--space-1) 0;
}
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure:not([open]) > :not(summary) { display: none; }
.ui-disclosure > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--dur-press) var(--ease-out);
}
.ui-disclosure[open] > summary::before { transform: rotate(45deg); }
.ui-disclosure > summary:hover { color: var(--color-text); }

/* Label-left rows (FieldLabel + FieldDescription). */
.field-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.field-description {
    font-size: var(--font-size-description);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Two sentences drawn one after the other, each in an element of its own because one of them is
   conditional. Nothing between them may carry the space: the compiler drops whitespace that spans a
   newline, so a space written in the markup never reaches the screen, and a space at the edge of a
   translated value is a space every language has to remember. It is written here instead, as real
   content, which is also where the line is allowed to break. */
.sentences > * + *::before {
    content: ' ';
}

/* Label-above fields (InputLabel + FieldValue). */
.input-label {
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: var(--space-1);
}

.field-value {
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.mono {
    font-family: var(--font-mono);
}

.text-accent {
    color: var(--color-accent-text);
}

/* Visually hidden, still announced by screen readers (aria-live status text, off-screen labels). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A neutral horizontal divider inside cards. */
.divider {
    height: 1px;
    background: var(--color-stroke-subtle);
    border: 0;
    margin: var(--space-3) 0;
}