/*
 * The demo's stylesheet: every color, size and face comes from a token declared here on :root, in
 * the shape of a real app's core stylesheet (five light-dark theme colors, status colors, a
 * spacing scale in rem with role tokens that name a step, a type scale with a base, border and
 * shadow recipes, a font family, one @property registration). The few literals written outside
 * the tokens are deliberate: `npm run demo:scan` finds them and the panel lists them under
 * Not reachable.
 */
:root {
    color-scheme: light dark;

    /* The five theme colors, each a light-dark pair. Base is the page's surface */
    --theme-base: light-dark(#f4f1ec, #242428);
    /* A surface lifted off the base: the nav, the sidebar, a card, a dialog */
    --theme-raised: light-dark(#ffffff, #33343a);
    /* Secondary text and the edge of a control */
    --theme-muted: light-dark(#6f6a63, #a8a49e);
    /* Text on the page's own surfaces */
    --theme-text: light-dark(#1d1c1a, #f2efe9);
    /* The one hue: links, the primary button, a selected card */
    --theme-accent: light-dark(#2f6fde, #7da2ff);
    /* Behind the current nav entry and the selected folder: the accent at an alpha, a recipe */
    --selection-background-color: rgb(from var(--theme-accent) r g b / 0.12);

    /* The three status colors, each a pair of its own */
    --success-color: light-dark(#2f8f4e, #82da5f);
    --warning-color: light-dark(#b2731b, #dca051);
    --error-color: light-dark(#c62828, #fc5a5a);
    /* The fill of a status: its color pulled toward the surface, the one recipe among the colors */
    --success-background-color: oklch(
        from var(--success-color) calc(l + 0.3) calc(c * 0.4) h
    );
    --warning-background-color: oklch(
        from var(--warning-color) calc(l + 0.3) calc(c * 0.4) h
    );
    --error-background-color: oklch(
        from var(--error-color) calc(l + 0.3) calc(c * 0.4) h
    );

    /* The spacing scale: every padding, margin and gap is a step of it, or a role token that
       names one. In rem, so it follows the browser's default text size. Hairline gaps */
    --space-1: 0.125rem;
    /* Tight gaps: between a label and its field */
    --space-2: 0.25rem;
    /* Icon-to-label gaps */
    --space-3: 0.375rem;
    /* Input and button paddings */
    --space-4: 0.5rem;
    /* Around a panel's content */
    --space-5: 0.625rem;
    /* Between controls */
    --space-6: 1rem;
    /* Between groups of controls */
    --space-7: 1.25rem;
    /* Between the sidebar and the content */
    --space-8: 1.5rem;
    /* Between the large areas of a page */
    --space-9: 2.25rem;

    /* The roles: each names a step of the scale, and the panel offers the steps for it */
    /* Inside a panel: the nav, the sidebar and a card */
    --panel-padding: var(--space-5);
    /* Between controls side by side */
    --gap-control: var(--space-4);
    /* Between the sections of the content */
    --gap-section: var(--space-8);
    /* Between the viewport's edges and a dialog; registered below as a length */
    --gap-dialog: var(--space-9);

    /* The edges. Thin: a card and a control */
    --border-thin: 1px solid var(--theme-muted);
    /* The edge of a chrome panel: shadow ink at an alpha, a sunken line */
    --border-panel: 1px solid rgb(from var(--shadow-color) r g b / 0.18);
    /* The corners of every box and control */
    --radius: 0.375rem;

    /* The ink of shadows and scrims, not a theme color */
    --shadow-color: light-dark(#000000, #000000);
    /* The one drop shadow: under a dialog and a raised card */
    --shadow-drop: 0 1px 6px rgb(from var(--shadow-color) r g b / 0.35);
    /* Dims the page under a dialog */
    --scrim-color: rgb(from var(--shadow-color) r g b / 0.45);

    --font:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;

    /* The type scale, in rem like the spacing scale. The smallest: a badge */
    --font-size-xs: 0.625rem;
    /* Secondary text: a card's caption, the footer */
    --font-size-small: 0.75rem;
    /* The body's text */
    --font-size-base: 0.875rem;
    /* A step up: a sidebar heading, an input */
    --font-size-medium: 1rem;
    /* A card's title */
    --font-size-large: 1.125rem;
    /* A dialog's title */
    --font-size-xl: 1.375rem;
    /* The page title */
    --font-size-display: 1.75rem;
    /* Emphasis: a heading, a button's label */
    --font-weight-bold: 700;
    /* Spaced-out uppercase labels: the nav's entries and the sidebar's headings */
    --letter-spacing-wide: 0.08em;
    /* The leading of running text */
    --line-height-text: 1.5;

    /* The nav's height, which the content's top padding follows */
    --nav-height: 3rem;
}

/* Registered as a length so its computed value is in px: a script could read it as a number */
@property --gap-dialog {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--theme-base);
    color: var(--theme-text);
    font-family: var(--font);
    font-size: var(--font-size-base);
    line-height: var(--line-height-text);
}

a {
    color: var(--theme-accent);
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    padding: var(--space-3) var(--space-5);
    border: var(--border-thin);
    border-radius: var(--radius);
    background: var(--theme-raised);
    cursor: pointer;
}

button:hover {
    border-color: var(--theme-accent);
}

button.primary {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-base);
    font-weight: var(--font-weight-bold);
}

/* The nav */
nav {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--gap-control);
    height: var(--nav-height);
    padding: 0 var(--panel-padding);
    background: var(--theme-raised);
    border-bottom: var(--border-panel);
}

nav .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-right: var(--space-6);
    font-weight: var(--font-weight-bold);
}

/* A literal size and a literal color: the logo's square and the badge are deliberately outside
   the tokens, so the Not reachable tab has rows */
nav .logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: var(--theme-accent);
}

nav .entry {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--theme-muted);
    font-size: var(--font-size-small);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-decoration: none;
}

nav .entry[aria-current] {
    color: var(--theme-text);
    background: var(--selection-background-color);
}

nav .spacer {
    flex: 1;
}

.badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: #e0b341;
    color: #1d1c1a;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

/* The layout: a sidebar beside the content. The sidebar's share of the width is the extra control
   in demo.js, which writes grid-template-columns inline */
#layout {
    display: grid;
    grid-template-columns: 22% 1fr;
    gap: var(--gap-section);
    padding: var(--gap-section) var(--panel-padding);
}

aside {
    align-self: start;
    padding: var(--panel-padding);
    background: var(--theme-raised);
    border: var(--border-panel);
    border-radius: var(--radius);
}

aside h2 {
    margin: 0 0 var(--space-3);
    font-size: 11px;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--theme-muted);
}

aside ul {
    margin: 0 0 var(--gap-section);
    padding: 0;
    list-style: none;
}

aside li {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
}

aside li[aria-selected] {
    background: var(--selection-background-color);
    color: var(--theme-accent);
}

aside .count {
    float: right;
    color: var(--theme-muted);
    font-size: var(--font-size-small);
}

main h1 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-display);
    line-height: 1.1;
}

main > p {
    margin: 0;
    max-width: 60ch;
    color: var(--theme-muted);
}

.note {
    margin: var(--gap-section) 0;
    padding: var(--panel-padding) var(--space-6);
    border-left: 3px solid var(--theme-accent);
    border-radius: var(--radius);
    background: var(--theme-raised);
}

.note kbd {
    padding: var(--space-1) var(--space-2);
    border: var(--border-thin);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--font-size-small);
}

.status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-control);
    margin: var(--gap-section) 0;
}

.status span {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
}

.status .success {
    color: var(--success-color);
    background: var(--success-background-color);
}

.status .warning {
    color: var(--warning-color);
    background: var(--warning-background-color);
}

.status .error {
    color: var(--error-color);
    background: var(--error-background-color);
}

/* The grid of cards; --card-size is set inline on #grid, the scoped token the panel overrides */
#grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-size), 1fr));
    gap: var(--gap-control);
}

.card {
    overflow: hidden;
    border: var(--border-thin);
    border-radius: var(--radius);
    background: var(--theme-raised);
    box-shadow: var(--shadow-drop);
}

.card .thumb {
    aspect-ratio: 4 / 3;
    background: linear-gradient(
        135deg,
        oklch(from var(--theme-accent) l c calc(h + var(--hue-shift, 0))),
        oklch(
            from var(--theme-accent) calc(l - 0.2) c
                calc(h + var(--hue-shift, 0) + 40)
        )
    );
}

.card .body {
    padding: var(--panel-padding);
}

.card h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-large);
    line-height: 1.2;
}

.card .caption {
    margin: 0;
    color: var(--theme-muted);
    font-size: var(--font-size-small);
}

.actions {
    display: flex;
    gap: var(--gap-control);
    margin: var(--gap-section) 0;
}

/* The dialog */
dialog {
    margin: var(--gap-dialog) auto;
    padding: var(--space-7);
    border: var(--border-panel);
    border-radius: var(--radius);
    background: var(--theme-raised);
    color: var(--theme-text);
    box-shadow: var(--shadow-drop);
    max-width: 480px;
}

dialog::backdrop {
    background: var(--scrim-color);
}

dialog h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-xl);
}

dialog label {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-6) 0;
    font-size: var(--font-size-small);
    color: var(--theme-muted);
}

dialog input {
    padding: var(--space-4);
    border: var(--border-thin);
    border-radius: var(--radius);
    background: var(--theme-base);
    font-size: var(--font-size-medium);
}

dialog .actions {
    justify-content: flex-end;
    margin: var(--space-6) 0 0;
}

footer {
    padding: var(--panel-padding);
    border-top: var(--border-panel);
    color: var(--theme-muted);
    font-size: var(--font-size-small);
    text-align: center;
}