/* General Body Styles */
body {
    font-family: var(--font-sans);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /* One of #38's two resolved conflicts: this said #f4f4f9 and dashboard.css
       said #f4f6f8, and dashboard.css loads second, so #f4f4f9 was never on
       screen. Both now name the token. */
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Container for centered content */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 0 var(--space-8);
}

/* Header Styles */
header {
    background: var(--color-inverse-surface);
    color: var(--color-inverse-text);
    padding: 1rem 0;
    border-bottom: var(--color-primary) 3px solid;
}

header h1 {
    float: left;
    margin: 0;
}

header nav {
    float: right;
}

header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header li {
    display: inline;
    padding: 0 var(--space-5);
}

/* Links (#38). There was no `a` rule anywhere in this repository: on a white
   page the browser default (#0000ee) is legible by luck, and the moment a dark
   palette exists it is that same near-blue on near-black -- measured at 1.93:1
   in the page body and 1.58:1 on the slate's own rows, i.e. unreadable. A
   design system that ships prefers-color-scheme has to say what a link is.

   `header a` below still wins on specificity (0,1,1 against 0,0,1), so the nav
   keeps its inverse-on-dark treatment. */
a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

header a {
    color: var(--color-inverse-text);
    text-decoration: none;
    text-transform: uppercase;
}

/* --- Focus (#38) ---------------------------------------------------------
   THE ONE FOCUS TREATMENT, and the first one this repository has had:
   `focus`, `tabindex` and `outline` appeared zero times in static/ and
   templates/ before this, so every control on both pages -- the four selects,
   the nav, the links, the tab strip and, once #38 made them focusable at all,
   the sortable table headers -- took focus with nothing to show for it.

   IT LIVES HERE because style.css is the only stylesheet BOTH pages load, and
   it is loaded before the two each page adds. One unqualified rule reaches
   everything; what the component sheets add afterwards moves the
   `outline-offset` or draws the same token a second way for SVG, and none of
   them redefines the ring. `header a` below is the single exception, and it is
   arithmetic rather than taste -- see tokens.css.

   `:focus-visible`, NOT `:focus`. The ring is for the reader who cannot see
   where the keyboard is, and a ring on every mouse click is the reason authors
   delete focus rings. The `@supports` block underneath is the fallback for a
   renderer that does not know the selector: there it is `:focus` or nothing,
   and nothing is what this repository already tried.

   3px AND AN OFFSET. WCAG 2.2 SC 2.4.13 asks for a 2px perimeter; a 1px ring
   also disappears into the 1px border every table cell already draws. The
   offset puts the ring on the surface AROUND the control rather than on the
   control's own background, which is what lets one colour serve a white card
   and a brand-blue button at once. */
:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* The nav, on the one surface that is near-black in both themes. 3:1 against
   #fff needs a luminance at or below 0.1748 and 3:1 against #333 needs one at
   or above 0.1988, so no single ring colour covers both: the deep-blue ring is
   1.26:1 on this bar. The bar's own foreground is 12.63:1 on it in light and
   16.03:1 in dark, and is a token that already existed. */
header a:focus-visible {
    outline-color: var(--color-inverse-text);
}

@supports not selector(:focus-visible) {
    :focus {
        outline: 3px solid var(--color-focus-ring);
        outline-offset: 2px;
    }

    header a:focus {
        outline-color: var(--color-inverse-text);
    }
}

/* Main Content Styles */
main {
    padding: var(--space-8) 0;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: var(--space-8) 0;
    margin-top: 40px;
    background: var(--color-inverse-surface);
    color: var(--color-inverse-text);
}