/* ── SHARED BASE ─────────────────────────────────────────────────────────────
   Loaded across all pages. It contains tokens, resets, background styles, and the shared rules used
   by both style.css, for the application's own pages, and auth.css, for the sign-in pages.
   Do not add layout-specific rules here.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --menu-bg:             #0d1318;
    --field-bg:            rgba(255, 255, 255, 0.04);
    --field-bg-focus:      rgba(255, 255, 255, 0.055);
    --text-main:     #f4f1ed;
    --text-muted:    #9ca3af;
    --text-subtle:   #8b949e;
    --accent-warm:   #e7c0a0;
    --orange:        #f47b20;
    --border-light:  rgba(255, 255, 255, 0.12);
    --border-orange: rgba(244, 123, 32, 0.48);
    --radius-small:  10px;
    --error:         #e05454;
    --error-bg:      rgba(224, 84, 84, 0.10);
}

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

[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
    border-radius: 4px;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at 80% 12%, rgba(244, 123, 32, 0.18), transparent 28%),
        radial-gradient(circle at 30% 90%, rgba(244, 123, 32, 0.1),  transparent 25%),
        linear-gradient(135deg, #05070a 0%, #0b1117 55%, #050608 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.13;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}


/* ── LIGHT THEME ── */

:root[data-theme="light"] {
    --menu-bg:             #fffcf8;
    --field-bg:            rgba(0, 0, 0, 0.04);
    --field-bg-focus:      rgba(0, 0, 0, 0.055);
    --text-main:     #1a1d21;
    --text-muted:    #5b6470;
    --text-subtle:   #6b7280;
    --accent-warm:   #b45309;
    --orange:        #d96b14;
    --border-light:  rgba(0, 0, 0, 0.10);
    --border-orange: rgba(217, 107, 20, 0.45);
    --error:         #c0392b;
    --error-bg:      rgba(192, 57, 43, 0.08);
}

[data-theme="light"] body {
    background:
        radial-gradient(circle at 80% 12%, rgba(244, 123, 32, 0.06), transparent 28%),
        radial-gradient(circle at 30% 90%, rgba(244, 123, 32, 0.04),  transparent 25%),
        linear-gradient(135deg, #faf7f4 0%, #f5f0ea 55%, #f8f4f0 100%);
}

[data-theme="light"] body::before { opacity: 0.04; }


/* ── THEME TOGGLE ── */

.theme-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.theme-toggle:hover {
    border-color: var(--border-orange);
    color: var(--text-main);
}

.theme-toggle svg { width: 16px; height: 16px; display: block; }

.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }


/* ── FORM CONTROLS ──
   Here rather than in auth.css, where they used to live. Every surface writes its fields with these
   class names — 67 inputs and 71 labels across the templates when it was counted, on 20 July 2026 —
   but only the six sign-in pages load auth.css, so everywhere else the browser drew its own white
   boxes on a dark page. Templates have been added since and the figures are not maintained: they are
   the observation that motivated the move, not a live count. What matters is that the number is large
   and the six pages are not. */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-subtle);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--field-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* A textarea is the same control, but it has a height and a grabber. Left alone the browser lets it
   be dragged in both directions, and dragging one wider tears it out of the form's column — the
   field ends up over the card's edge and the layout beside it does not move. Vertical only: the
   width belongs to the layout, the height to whoever is writing. */
textarea.form-input {
    height: auto;
    min-height: 96px;
    padding: 10px 14px;
    line-height: 1.5;
    resize: vertical;
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.form-input:focus {
    border-color: var(--border-orange);
    background: var(--field-bg-focus);
    box-shadow: 0 0 0 3px rgba(244, 123, 32, 0.12);
}

.form-input.invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(224, 84, 84, 0.12);
}

.form-input.valid {
    border-color: rgba(76, 175, 130, 0.5);
}

.field-error {
    font-size: 12px;
    color: var(--error);
    min-height: 16px;
    line-height: 1.3;
}


/* ── THE NATIVE DROPDOWN ──
   A <select>'s own box is ours to style; the list it opens is painted by the operating system, and
   it takes only a solid colour. Every background in this stylesheet is an rgba over the page — the
   OS cannot composite that, so it fell back to white while the text kept the near-white it inherited
   from the closed box. Every picker in the application was legible until you opened it. */

select option,
select optgroup {
    background-color: var(--menu-bg);
    color: var(--text-main);
}


/* ── CHECKBOXES ──
   The templates have written .form-check / .check-input / .check-label from the start and the
   stylesheet had a rule for none of them, so a coding's eleven control units and its categories drew
   as the browser's own blue boxes, flush against one another and against the save button. */

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

/* Drawn rather than tinted. accent-color got the brand colour onto the native box in one line, but
   the box itself stayed the platform's — a hard square, its own idea of a border, and on Windows a
   white field that fought the dark card around it. appearance: none takes the paint and nothing else:
   it is still an <input type=checkbox>, so the label still toggles it, space still ticks it, and the
   form still submits it. Only :checked and :focus-visible are ours to draw. */
.check-input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    background: var(--field-bg);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background-color .15s ease, border-color .15s ease;
}

/* The tick: one pseudo-element scaled from nothing, so it grows in rather than blinking. */
.check-input::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform .12s ease-in-out;
    background: var(--menu-bg);
    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0, 37% 66%);
}

.check-input:checked {
    background: var(--orange);
    border-color: var(--orange);
}

.check-input:checked::before {
    transform: scale(1);
}

.check-input:hover:not(:disabled) {
    border-color: var(--border-orange);
}

/* Keyboard only: a ring on every click would be noise, and its absence on tab would be a trap. */
.check-input:focus-visible {
    outline: 2px solid var(--border-orange);
    outline-offset: 2px;
}

.check-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.check-label {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.4;
    cursor: pointer;
}

/* ── A GROUP'S HEADING ──
   "Control units" and "Categories" label a grid of checkboxes, and were written as .form-label — the
   same 12px muted caption a single text field gets. Above thirty boxes it read as one more caption
   rather than as the thing that says what they are. */
.field-legend {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-main);
}

/* A list of them — control units, categories — in columns rather than one tall stack. */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 18px;
}


/* ── FILE FIELDS ──
   Left raw, a file input is the operating system's grey "Choose File" button on a dark card. The
   control cannot be replaced without losing what it does, but its button is ours to draw. */

input[type="file"] {
    width: 100%;
    height: auto;
    padding: 9px 12px;
    line-height: 1.6;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 6px 16px;
    border: 1px solid var(--border-orange);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(244, 123, 32, 0.10);
}


/* ── DISCLOSURES ──
   A <summary> opens on click and says so with a marker, but the pointer never changed over it, so
   the one control that reveals a variant's form did not look like a control at all. */

summary {
    cursor: pointer;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

summary:hover {
    color: var(--orange);
}


/* ── DESCRIPTION LISTS ──
   A <dl> of label/value pairs: who a user is, what a coding session ran on. The templates have
   written .profile-list since the port and the stylesheet had no rule for it, so both admin detail
   pages drew as the browser's raw default — every term on its own line, every value indented under
   it by the UA margin, the whole thing twice as tall as the card and unreadable as pairs. */

.profile-list {
    display: grid;
    /* The term column takes what its longest label needs and no more; the value takes the rest. */
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 10px 24px;
    align-items: baseline;
    margin: 0;
}

.profile-list dt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-list dd {
    margin: 0;
    font-size: 14px;
    color: var(--text-main);
    /* An id, a VIN or a mail address has no spaces to break at and would otherwise widen the card. */
    overflow-wrap: anywhere;
}

.profile-list dd code {
    font-size: 13px;
}

/* Under ~560px the two columns stop fitting: stack, with the pairs still visibly paired. */
@media (max-width: 560px) {
    .profile-list {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .profile-list dd:not(:last-child) {
        margin-bottom: 12px;
    }
}


/* ── AN INLINE LINK ──
   A link inside a sentence or a value list. Everything else on these pages is a button or a row, so
   a link that only changed colour read as coloured text: the customer's mail address on a coding
   session is a link to their account and nothing said so. */

.inline-link {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}

.inline-link:hover {
    color: var(--accent-warm);
}


/* ── A GENERATOR TRACE ──
   Whatever the coding printed when it ran: long, wrapped, and read only when something went wrong.
   Capped so it cannot push the rest of the page off the screen. */

.trace-output {
    margin: 0;
    padding: 12px 14px;
    max-height: 420px;
    overflow: auto;
    background: var(--field-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A value with something beside it — a name and the link that opens what it names. */
.profile-list__pair {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}