/* Kelo — one stylesheet, one set of tokens.

   The look is a technical datasheet on a shop floor, not a software dashboard:
   warm drafting paper, ink, hairline rules instead of floating cards, and one
   signal colour -- safety orange, the colour a factory already uses for "look
   here". Status colours are the safety-sign ones: green, yellow, red.

   Type does the rest. Headings, labels, figures and buttons are set in
   Bahnschrift, Microsoft's cut of DIN 1451 -- the lettering of road signs and
   machine plates -- which ships with every Windows since 10, the machines most
   shops run. Running text stays in Segoe UI, which reads better in paragraphs,
   and codes are monospaced so PED000012 and PED000021 can be told apart at a
   glance. No web font: a font from a third-party CDN hands every customer's IP
   address to someone the privacy page would then have to name. Elsewhere the
   stack falls back to DIN-like faces and then to the system.

   Every colour is a token on :root and redefined for dark mode, so a new
   component that uses the tokens is correct in both without being thought
   about twice. */

:root {
    color-scheme: light;

    --canvas: #ebe9e3;
    --surface: #fbfaf7;
    --surface-2: #f4f2ec;
    --surface-hover: #f0ede5;
    --line: #dbd7cc;
    --line-strong: #b8b3a5;

    /* The heavy rule that opens a section, as on a drawing's title block. */
    --rule: #1a1916;

    --ink: #1a1916;
    --ink-soft: #47443c;
    --ink-faint: #6d695e;

    /* Text-safe orange for links and small type; the vivid one is --signal,
       for fills that only need to be seen. */
    --accent: #b53a0a;
    --accent-hover: #922e07;
    --accent-ink: #ffffff;
    --accent-soft: #fce4d6;

    --signal: #ff5b14;
    --signal-ink: #1a1916;

    --danger: #b3261e;
    --danger-soft: #f8e1dc;
    --warning: #6e4b00;
    --warning-soft: #fbe6a2;
    --success: #1d6b39;
    --success-soft: #dcefdf;
    --neutral-soft: #e6e3da;

    --sidebar: #f4f2ec;
    --sidebar-ink: #47443c;
    --sidebar-ink-strong: #1a1916;
    --sidebar-hover: rgba(26, 25, 22, 0.06);
    --sidebar-active: #1a1916;
    --sidebar-muted: #6d695e;

    /* Square-cut. A radius softens; a machine plate is cut straight. */
    --radius-sm: 2px;
    --radius: 3px;
    --radius-lg: 3px;
    --shadow-sm: none;
    --shadow: none;
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--signal);

    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Bahnschrift", "DIN Alternate", "DIN Next", "D-DIN", "Barlow", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

    /* Engineering paper: a dot every 24px, barely there. */
    --grid-dot: rgba(26, 25, 22, 0.075);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* The control room: warm charcoal, not blue-black. */
        --canvas: #11100e;
        --surface: #1a1916;
        --surface-2: #151412;
        --surface-hover: #22211d;
        --line: #2f2d28;
        --line-strong: #47443c;
        --rule: #6d695e;

        --ink: #eeece5;
        --ink-soft: #bab5a9;
        --ink-faint: #928d81;

        --accent: #ff8a52;
        --accent-hover: #ffa376;
        --accent-ink: #1a1916;
        --accent-soft: #3a1c0d;

        --signal: #ff6a2b;
        --signal-ink: #11100e;

        --danger: #f28b82;
        --danger-soft: #3b1714;
        --warning: #f5c84f;
        --warning-soft: #33290b;
        --success: #72cf92;
        --success-soft: #12301d;
        --neutral-soft: #25231f;

        --sidebar: #151412;
        --sidebar-ink: #bab5a9;
        --sidebar-ink-strong: #eeece5;
        --sidebar-hover: rgba(255, 255, 255, 0.05);
        --sidebar-active: #eeece5;
        --sidebar-muted: #928d81;

        --grid-dot: rgba(255, 255, 255, 0.045);
    }
}

/* The same, chosen by hand with the switch in the top bar -- which also
   pins light over a dark system with data-theme="light". */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* The control room: warm charcoal, not blue-black. */
    --canvas: #11100e;
    --surface: #1a1916;
    --surface-2: #151412;
    --surface-hover: #22211d;
    --line: #2f2d28;
    --line-strong: #47443c;
    --rule: #6d695e;

    --ink: #eeece5;
    --ink-soft: #bab5a9;
    --ink-faint: #928d81;

    --accent: #ff8a52;
    --accent-hover: #ffa376;
    --accent-ink: #1a1916;
    --accent-soft: #3a1c0d;

    --signal: #ff6a2b;
    --signal-ink: #11100e;

    --danger: #f28b82;
    --danger-soft: #3b1714;
    --warning: #f5c84f;
    --warning-soft: #33290b;
    --success: #72cf92;
    --success-soft: #12301d;
    --neutral-soft: #25231f;

    --sidebar: #151412;
    --sidebar-ink: #bab5a9;
    --sidebar-ink-strong: #eeece5;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active: #eeece5;
    --sidebar-muted: #928d81;

    --grid-dot: rgba(255, 255, 255, 0.045);
}

/* ---------------------------------------------------------------- Base */

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

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

body {
    background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0);
    background-size: 24px 24px;
}

h1, h2, h3, legend, button, .kpi-value, .kpi-label, table.data th, .pill, .nav-link, .nav-section, .brand-name {
    font-family: var(--font-display);
}

h1 {
    font-size: 2.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 1.25rem;
}

/* Section headings are set like the headings of a datasheet: small, upper
   case, spaced. They label a block; they do not compete with its content. */
h2 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

p {
    margin: 0 0 1rem;
}

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

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
}

strong {
    font-weight: 600;
}

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--neutral-soft);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.35rem;
}

.icon {
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

.muted {
    color: var(--ink-faint);
}

::selection {
    background: var(--signal);
    color: var(--signal-ink);
}

/* ------------------------------------------------------- Signed-in shell */

.page {
    display: flex;
    min-height: 100vh;
}

/* The navigation is an index down the edge of the sheet, on the same paper
   as the page and closed off by a heavy rule -- not a dark slab beside it. */
.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--sidebar);
    color: var(--sidebar-ink);
    border-right: 2px solid var(--rule);
    padding: 1.1rem 0 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 1.1rem 1.4rem;
    color: var(--sidebar-ink-strong);
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

/* A square of safety orange with the initial cut out in ink, until there is
   a real logo. A placeholder that looks deliberate beats one that looks
   missing. */
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

.brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    flex-direction: column;
}

.nav-section {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    padding: 1.2rem 1.1rem 0.35rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--line);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.1rem;
    color: var(--sidebar-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    position: relative;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-link .icon {
    color: var(--sidebar-muted);
    transition: color 120ms ease;
}

.nav-link:hover .icon {
    color: var(--sidebar-ink-strong);
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink-strong);
    text-decoration: none;
}

/* The page you are on is printed in reverse, with the orange tab on its
   edge: findable from across the room. */
.nav-link.active {
    background: var(--sidebar-active);
    color: var(--canvas);
}

.nav-link.active .icon {
    color: var(--signal);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--signal);
}

main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.top-row {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.25rem;
    padding: 0 2.25rem;
    background: color-mix(in srgb, var(--canvas) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-strong);
}

/* Whose data is on screen, always visible, like the name on a title block.
   On a shared terminal that question needs an answer without clicking. */
.company {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-right: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.company-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The company's own logo, beside its name, where the orange square stood. */
.company-logo {
    flex: none;
    display: block;
    height: 1.75rem;
    max-width: 8rem;
    object-fit: contain;
}

.company:has(.company-logo)::before {
    display: none;
}

/* The language switch: the globe and two letters, opening onto the four
   languages, each named in itself. A <details>, so it works without script. */
.lang-switch {
    position: relative;
}

.lang-switch > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.1rem;
    padding: 0 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.lang-switch > summary::-webkit-details-marker {
    display: none;
}

.lang-switch > summary:hover,
.lang-switch[open] > summary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--canvas);
}

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 13rem;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--rule);
    box-shadow: 6px 6px 0 rgba(26, 25, 22, 0.08);
}

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.9rem;
    color: var(--ink);
    font-size: 0.9rem;
}

.lang-menu a:hover {
    background: var(--surface-hover);
    text-decoration: none;
}

.lang-menu a[aria-current="true"] {
    font-weight: 600;
}

.lang-menu a[aria-current="true"] .lang-code {
    background: var(--signal);
    color: var(--signal-ink);
    border-color: var(--signal);
}

.lang-code {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.3rem;
    border: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* On the sign-in page, in the corner above the form. */
.auth-main {
    position: relative;
}

.auth-tools {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

/* The light/dark switch: the moon in the light, the sun in the dark. */
button.theme-toggle {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-soft);
}

button.theme-toggle:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--canvas);
}

.theme-icon-light {
    display: none;
}

:root[data-theme="dark"] .theme-icon-light {
    display: inline-block;
}

:root[data-theme="dark"] .theme-icon-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-icon-light {
        display: inline-block;
    }

    :root:not([data-theme]) .theme-icon-dark {
        display: none;
    }
}

.company::before {
    content: "";
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--signal);
}

.user {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--canvas);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sign-out {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
}

.sign-out:hover {
    background: var(--surface-hover);
    color: var(--ink);
    text-decoration: none;
}

.content {
    padding: 2.25rem 2.25rem 3rem;
    width: 100%;
    max-width: 84rem;
}

/* ------------------------------------------------------ Signed-out shell */

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

/* The one screen whose job is a first impression: a black plate with the
   name stamped big, and the hazard stripe along its foot. */
.auth-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem 3.5rem;
    color: #c9c4b8;
    background: #141311;
}

.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.auth-aside::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: repeating-linear-gradient(-45deg, #ff5b14 0 14px, #141311 14px 28px);
    pointer-events: none;
}

.auth-aside > * {
    position: relative;
    z-index: 1;
}

.auth-aside .brand {
    padding: 0;
    color: #f4f1ea;
}

.auth-pitch-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: #f4f1ea;
    max-width: 14ch;
    margin-bottom: 2rem;
}

.auth-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
    max-width: 30rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-points li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.auth-points .icon {
    color: #ff5b14;
}

.auth-aside-foot {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #8f897c;
    margin: 0;
}

.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 25rem;
}

/* Only shown where the aside is not: on a phone the aside goes, and the
   brand has to come with the form. */
.auth-brand {
    display: none;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.auth-card h1 {
    font-size: 2.15rem;
    margin-bottom: 1.5rem;
}

.auth-card h1:has(+ p) {
    margin-bottom: 0.4rem;
}

.auth-card h1 + p,
.auth-card h1 + .form-intro {
    margin-bottom: 1.5rem;
}

.auth-card button[type="submit"] {
    width: 100%;
    height: 2.9rem;
    margin-top: 0.25rem;
}

.auth-footer {
    margin-top: 2rem;
    font-size: 0.85rem;
}

.auth-footer a {
    color: var(--ink-faint);
}

/* --------------------------------------------------------------- Forms */

label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--ink);
}

input, select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0 0.75rem;
    height: 2.5rem;
    font: inherit;
    font-size: 0.925rem;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input[type="hidden"] {
    display: none;
}

textarea {
    height: auto;
    min-height: 5rem;
    padding: 0.55rem 0.75rem;
    resize: vertical;
}

select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d695e' stroke-width='2.25' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

input::placeholder, textarea::placeholder {
    color: var(--ink-faint);
    opacity: 0.8;
}

input:hover, select:hover, textarea:hover {
    border-color: var(--ink-faint);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--focus);
}

input[type="checkbox"], input[type="radio"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 0.4rem 0 0;
    box-shadow: none;
    accent-color: var(--accent);
}

input[type="file"] {
    height: auto;
    padding: 0.5rem;
    border-style: dashed;
    background: var(--surface-2);
}

input.invalid, select.invalid {
    border-color: var(--danger);
}

/* Buttons are set like the labels on a control panel: DIN, upper case,
   spaced. The main one is safety orange with ink on it. */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--signal-ink);
    background: var(--signal);
    border: 1px solid var(--signal);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}

button:hover {
    background: color-mix(in srgb, var(--signal) 88%, var(--ink));
    border-color: color-mix(in srgb, var(--signal) 88%, var(--ink));
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:focus-visible, a:focus-visible, .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

button.secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

button.secondary:hover {
    background: var(--ink);
    color: var(--canvas);
}

/* Row and inline actions: a quiet button, not an underlined link. A link
   says "go somewhere"; these change something, and should look like it. */
button.link {
    height: 2rem;
    padding: 0 0.65rem;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line-strong);
}

button.link:hover {
    color: var(--ink);
    background: var(--surface-hover);
    border-color: var(--ink-faint);
}

button.link.danger, button.danger {
    color: var(--danger);
}

button.link.danger:hover {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

/* The form that sits on top of most pages: a grid, so every field in a row
   has the same width and the submit button lines up with the inputs rather
   than floating wherever the wrap left it. */
.inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem 1rem;
    align-items: start;
}

.inline-form label {
    margin-bottom: 0;
}

/* The submit button sits on the bottom of its row, level with the inputs
   beside it -- or, alone on a row of its own, with no gap above it. */
.inline-form > button {
    align-self: end;
    justify-self: start;
}

/* Anything that is not a single field gets the whole row. */
.inline-form > fieldset,
.inline-form > p,
.inline-form > div,
.inline-form > .validation-errors {
    grid-column: 1 / -1;
}

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1rem 0.25rem;
    margin: 0;
    min-width: 0;
}

legend {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 0.4rem;
}

/* The fieldset is a plain box; the grids live on the .inline-form rows
   inside it, so its fields line up with the ones above. */
fieldset.sls-block {
    background: var(--surface-2);
    padding: 1rem 1.15rem 1.15rem;
}

fieldset.sls-block .form-intro {
    margin: 0.9rem 0;
}

/* Help text. There is a lot of it in this product, deliberately — so it has
   to be quiet enough to skip once it has been read. */
.form-intro {
    color: var(--ink-faint);
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 75ch;
    margin: 0.9rem 0 0;
}

h1 + .form-intro {
    margin: -0.6rem 0 1.75rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.panel > .form-intro:first-child,
.panel > h2 + .form-intro {
    margin-top: -0.2rem;
    margin-bottom: 1rem;
}

.form-links {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
}

/* Messages are a strip with a heavy left edge, like a tag hung on a machine.
   A block with the mark set in its left padding, not a flex row: a message
   with <strong> in it would otherwise split into one column per piece. */
.form-error, .form-success {
    display: block;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.85rem;
    margin: 0 0 1.25rem;
    border-radius: 0;
    font-size: 0.925rem;
    font-weight: 500;
    border: 0;
    border-left: 4px solid;
}

.form-error {
    color: var(--danger);
    background: var(--danger-soft);
}

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

.form-error::before, .form-success::before {
    font-family: var(--font-display);
    font-weight: 700;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    place-items: center;
    font-size: 0.8rem;
    color: var(--surface);
    position: absolute;
    left: 1rem;
    top: 0.8rem;
}

.form-error::before {
    content: "!";
    background: var(--danger);
}

.form-success::before {
    content: "✓";
    background: var(--success);
}

.validation-message, .text-danger {
    display: block;
    color: var(--danger);
    font-weight: 400;
    font-size: 0.825rem;
    margin-top: 0.3rem;
}

.validation-errors {
    color: var(--danger);
    font-size: 0.875rem;
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

/* ------------------------------------------------------------- Surfaces */

/* A panel is a section of the sheet: paper, a hairline frame, and the heavy
   rule across its top that says where it starts. No shadow -- nothing on a
   drawing floats. */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rule);
    border-radius: 0;
    padding: 1.35rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* A table inside a card runs to the card's edges, so its rows line up
   with the card rather than floating in a second, inset box. */
.panel > .table-wrap {
    border: none;
    border-radius: 0;
    margin: 0 -1.5rem;
}

.panel > .table-wrap:last-child {
    margin-bottom: -1.5rem;
}

.panel > .table-wrap th:first-child,
.panel > .table-wrap td:first-child {
    padding-left: 1.5rem;
}

.panel > .table-wrap th:last-child,
.panel > .table-wrap td:last-child {
    padding-right: 1.5rem;
}

.panel ol {
    margin: 0;
    padding-left: 1.25rem;
}

/* Section headings that follow content on the page itself (the dashboard's
   tables stack one after another) need air above them, or each title reads
   as the caption of whatever came before it. */
.content > h2 {
    margin-top: 2.25rem;
}

.content > h1 + h2,
.content > .kpis + h2 {
    margin-top: 0;
}

.table-wrap + .form-intro {
    margin: -0.75rem 0 0;
}

/* --------------------------------------------------------------- Tables */

/* The wrapper is the frame and the scroller: a table wider than the screen
   scrolls inside it instead of pushing the page sideways. */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rule);
    border-radius: 0;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

table.data th,
table.data td {
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.data th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

table.data tbody tr:last-child td {
    border-bottom: none;
}

/* Codes and identifiers never break: "HALOT-" on one line and "1" on the
   next is two machines to anyone skimming. */
table.data td:first-child,
table.data td strong {
    white-space: nowrap;
}

table.data tbody tr {
    transition: background-color 100ms ease;
}

table.data tbody tr:hover td {
    background: var(--surface-hover);
}

table.data td strong {
    font-weight: 600;
}

/* The cell stays a table cell -- display: flex on a <td> takes it out of the
   table's layout and its border comes loose from the row. The spacing goes on
   the children instead. */
td.row-actions {
    text-align: right;
    white-space: nowrap;
}

.row-actions > form,
.row-actions > a {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0 0 0.4rem;
}

.row-actions > a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--accent);
}

.row-actions > a:hover {
    text-decoration: none;
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* A date that has passed on a job nobody has finished. The only thing on the
   backlog worth colouring: everything highlighted is nothing highlighted. */
td.late {
    color: var(--danger);
    font-weight: 600;
}

/* ----------------------------------------------------------- Status pills

   Colour alone does not carry a status: the words say the same thing,
   because a red cell means nothing to whoever cannot tell it from the green
   one, and shop-floor screens are the worst case for both. Cut square, set
   in DIN capitals, like the labels on a rack. */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.12rem 0.5rem 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.5;
    color: var(--ink-soft);
    background: var(--neutral-soft);
}

.pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background: currentColor;
}

.pill-ok {
    color: var(--success);
    background: var(--success-soft);
}

.pill-warn {
    color: var(--warning);
    background: var(--warning-soft);
}

.pill-bad {
    color: var(--danger);
    background: var(--danger-soft);
}

.pill-info {
    color: var(--accent);
    background: var(--accent-soft);
}

.pill-unknown {
    color: var(--ink-faint);
    background: var(--neutral-soft);
}

/* ------------------------------------------------------------ Dashboard */

/* The figures are one instrument strip, not a row of floating tiles: cells
   joined by hairlines under one heavy rule, read left to right like the
   readouts on a machine's panel. */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rule);
    margin-bottom: 2rem;
}

/* Label first, number second, whatever order the markup has them in: the
   eye reads what it is before how many. */
.kpi, .kpi-link {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 0.6rem;
}

.kpi {
    background: var(--surface);
    padding: 1rem 1.15rem 1.1rem;
}

.kpi:has(.kpi-link) {
    padding: 0;
}

.kpi-link {
    padding: 1rem 1.15rem 1.1rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease;
}

.kpi-link:hover {
    text-decoration: none;
    background: var(--surface-hover);
}

.kpi-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.kpi-value.bad {
    color: var(--danger);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The Pareto bar. One horizontal proportion does not justify a charting
   library and the dependency updates that come with it for years. */
.bar-cell {
    width: 30%;
    min-width: 7rem;
}

/* The track is painted on the cell, the bar sits on it: the empty part of
   the scale is what makes 11 % look small next to 56 %. */
.bar {
    display: block;
    height: 0.55rem;
    min-width: 4px;
    background: var(--ink);
    outline: none;
}

.bar-cell {
    background-image: linear-gradient(var(--neutral-soft), var(--neutral-soft));
    background-size: calc(100% - 2rem) 0.55rem;
    background-position: 1rem center;
    background-repeat: no-repeat;
}

a.export {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    margin-left: 0.25rem;
}

a.export:hover {
    color: var(--ink);
    border-color: var(--ink);
    text-decoration: none;
}

/* ------------------------------------------------- Catalogue and forms */

/* A panel's form in two layers -- a grid of fields, then a block that belongs
   to the whole form -- needs the same gap between them as between fields. */
.panel form > * + * {
    margin-top: 1rem;
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.consumption-block,
.choice-block {
    background: var(--surface-2);
    padding: 1rem 1.15rem 1.15rem;
}

.consumption-block > * + *,
.choice-block > * + * {
    margin-top: 0.9rem;
}

/* A field with a unit stuck to it: "30" and a "%" the operator cannot miss. */
.input-affix {
    position: relative;
    display: block;
}

.input-affix > input {
    padding-right: 2.25rem;
}

.input-affix .affix {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(calc(-50% + 0.175rem));
    color: var(--ink-faint);
    font-weight: 600;
    pointer-events: none;
}

.formula-line {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
    word-break: break-word;
}

/* The running estimate. Large enough to be read from a step back: it is the
   number the operator checks before pressing launch. */
.estimate {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 0.925rem;
}

.estimate-figure {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.estimate-error {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    font-weight: 500;
}

.tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.formula-status .tag {
    background: var(--accent-soft);
    color: var(--accent);
    margin-left: 0.25rem;
}

/* Technologies as checkboxes, grouped by process family. */
.choice-group {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
    padding: 0.35rem 0;
    border-top: 1px solid var(--line);
}

.choice-group:first-of-type {
    border-top: none;
}

.choice-family {
    font-size: 0.8rem;
    color: var(--ink-faint);
    padding-top: 0.3rem;
}

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

label.choice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.8rem;
    cursor: pointer;
}

label.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

label.choice input {
    margin: 0;
}

/* Two options, one of which is on. */
/* A selector switch, as on a machine: an ink frame, one position per cell,
   the chosen one printed in reverse. */
.segmented {
    display: inline-flex;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--surface);
    gap: 0;
}

label.segment {
    margin: 0;
    padding: 0.4rem 0.95rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
}

label.segment + label.segment {
    border-left: 1px solid var(--line-strong);
}

label.segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

label.segment-on {
    background: var(--ink);
    color: var(--canvas);
}

.formula-editor textarea {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.875rem;
}

.formula-templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.formula-status {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    font-weight: 400;
}

.formula-ok {
    color: var(--ink-soft);
}

.formula-bad {
    color: var(--danger);
    font-weight: 500;
}

.formula-help {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-faint);
}

.formula-help summary {
    cursor: pointer;
    color: var(--accent);
}

.formula-help ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    line-height: 1.6;
}

/* Filters above a long table. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.toolbar input.search,
.toolbar select {
    margin: 0;
    width: auto;
    min-width: 14rem;
}

.toolbar input.search {
    flex: 1;
    max-width: 24rem;
}

.toolbar label.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-weight: 400;
}

.toolbar-count {
    margin-left: auto;
    font-size: 0.85rem;
}

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.25rem;
}

button.tab {
    height: auto;
    padding: 0.6rem 0.9rem;
    border-radius: 0;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--ink-soft);
    box-shadow: none;
    font-weight: 600;
}

button.tab:hover {
    background: transparent;
    color: var(--ink);
}

button.tab-active {
    color: var(--ink);
    border-bottom: 3px solid var(--signal);
}

.tab-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    color: var(--ink-faint);
    font-size: 0.75rem;
}

/* ------------------------------------------------------ Requests: parts */

/* The parts of a request, one row each: name, quantity, material, remove. */
.parts-head,
.parts-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 7rem minmax(0, 2fr) 2.5rem;
    gap: 0.6rem;
    align-items: center;
}

.parts-head {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.parts-row + .parts-row {
    margin-top: 0.5rem;
}

.parts-row > input,
.parts-row > select {
    margin-top: 0;
}

button.icon-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

.parts-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.part-line {
    white-space: nowrap;
}

.part-line .tag {
    margin-left: 0.3rem;
}

.contact {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        display: none;
    }

    .auth-brand {
        display: flex;
    }
}

@media (max-width: 900px) {
    .page {
        flex-direction: column;
    }

    /* The sidebar becomes a strip across the top that scrolls sideways,
       rather than a hamburger: one fewer tap to reach anything, on the
       tablets bolted to machines that are the likeliest phone-sized screen. */
    .sidebar {
        width: auto;
        flex: none;
        height: auto;
        position: static;
        padding: 0.75rem;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
        border-right: 0;
        border-bottom: 2px solid var(--rule);
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .brand {
        padding: 0 0.5rem 0 0.25rem;
    }


    .brand-name {
        display: none;
    }

    .nav {
        flex-direction: row;
        gap: 0.25rem;
    }

    .nav-section {
        display: none;
    }

    .nav-link {
        white-space: nowrap;
        padding: 0.45rem 0.65rem;
    }

    .nav-link.active::after {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        height: 3px;
    }

    .top-row {
        padding: 0 1rem;
    }

    .user-name, .sign-out span {
        display: none;
    }

    .content {
        padding: 1.25rem 1rem;
    }

    .choice-group {
        grid-template-columns: 1fr;
    }

    .parts-head {
        display: none;
    }

    .parts-row {
        grid-template-columns: minmax(0, 1fr) 5rem 2.5rem;
    }

    .parts-row > select {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .panel {
        padding: 1.15rem;
    }

    .panel > .table-wrap {
        margin: 0 -1.15rem;
    }

    .panel > .table-wrap:last-child {
        margin-bottom: -1.15rem;
    }

    .panel > .table-wrap th:first-child,
    .panel > .table-wrap td:first-child {
        padding-left: 1.15rem;
    }

    .panel > .table-wrap th:last-child,
    .panel > .table-wrap td:last-child {
        padding-right: 1.15rem;
    }
}

/* ------------------------------------------ Picking parts, judging pieces */

.pick-table .check-cell {
    width: 2.5rem;
    text-align: center;
}

.pick-table input[type="checkbox"],
.judge-row input[type="checkbox"],
.judge-group-head input[type="checkbox"],
.judge-toolbar input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent);
}

.pick-table tr.row-chosen td {
    background: var(--accent-soft);
}

.qty-input {
    width: 5.5rem;
    margin: 0;
}

.parts-row-free {
    grid-template-columns: minmax(0, 1fr) 7rem 2.5rem;
}

/* The launch form reads as three numbered steps: parts, machine, consumption. */
.step-num {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: 0.05em;
}

.step-num-idle {
    background: var(--neutral-soft);
    color: var(--ink-faint);
}

.field-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-faint);
}

.pick-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.pick-toolbar input.search {
    flex: 1;
    max-width: 24rem;
    min-width: 12rem;
    margin: 0;
}

.pick-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.pick-summary .request-chip {
    border-color: var(--accent);
    background: var(--accent-soft);
    padding: 0.2rem 0.6rem;
}

/* Tens of requests stay one screen tall: the list scrolls, its head stays. */
.pick-wrap {
    max-height: 30rem;
    overflow-y: auto;
}

.pick-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

.pick-table tr.row-off td {
    color: var(--ink-faint);
}

.pick-table tr.row-off .tag {
    opacity: 0.6;
}

.pick-note {
    font-size: 0.8rem;
}

.tag.tag-late {
    margin-left: 0.35rem;
    background: var(--danger-soft);
    color: var(--danger);
}

.launch-actions {
    flex-wrap: wrap;
}

.judge-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    position: sticky;
    top: 0.5rem;
    z-index: 2;
}

.judge-toolbar .toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 600;
}

.judge-bulk {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.judge-bulk select {
    width: auto;
    max-width: 16rem;
    margin: 0;
}

.judge-count {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
}

button.verdict-button {
    padding: 0.45rem 0.9rem;
}

button.verdict-ok {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

button.verdict-nok {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

button.verdict-button:disabled {
    opacity: 0.45;
}

.judge-group {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.judge-group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.judge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.9rem;
    border-left: 3px solid transparent;
}

.judge-row + .judge-row {
    border-top: 1px solid var(--line);
}

.judge-row.judged-ok {
    border-left-color: var(--success);
}

.judge-row.judged-nok {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}

.judge-row select,
.judge-row input:not([type="checkbox"]) {
    width: auto;
    min-width: 12rem;
    flex: 1 1 12rem;
    margin: 0;
}

.piece-no {
    min-width: 2.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    font-weight: 600;
}

.verdict-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
}

.verdict-toggle button {
    padding: 0.3rem 0.8rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.85rem;
}

.verdict-toggle button:hover {
    background: var(--surface-hover);
}

.verdict-toggle button.on-ok {
    background: var(--success);
    color: #fff;
}

.verdict-toggle button.on-nok {
    background: var(--danger);
    color: #fff;
}

.part-progress {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success);
    white-space: nowrap;
}

.part-progress.has-rejects {
    color: var(--warning);
}

@media (max-width: 720px) {
    .judge-count {
        margin-left: 0;
    }

    .judge-bulk select {
        max-width: none;
        flex: 1 1 100%;
    }

    .judge-row select,
    .judge-row input:not([type="checkbox"]) {
        flex-basis: 100%;
    }
}

/* ----------------------------------------------------------- Sample data */

.tag.tag-sample {
    margin-left: 0.35rem;
    background: var(--warning-soft);
    color: var(--warning);
    text-transform: lowercase;
}

.sample-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: var(--radius);
    background: var(--warning-soft);
    color: var(--ink);
}

.sample-banner-text {
    flex: 1 1 24rem;
    line-height: 1.5;
}

.sample-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sample-banner button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.sample-banner .form-error {
    flex-basis: 100%;
    margin: 0;
}

/* ------------------------------------------------------- Technical report */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.facts > div {
    min-width: 0;
}

.facts dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.facts dd {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.report-requests {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.request-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}

a.request-chip:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
}

.row-details .request-chip {
    margin: 0.2rem 0.4rem 0.2rem 0;
}

.report-notes {
    margin-top: 0.75rem;
    white-space: pre-line;
}

.report-actions {
    flex-wrap: wrap;
}

.report-cancel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.report-cancel input {
    width: 14rem;
    margin: 0;
}

button.danger-solid {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Rows that open something on a double click look like it. */
tr.row-open {
    cursor: pointer;
    user-select: none;
}

tr.row-expanded td {
    background: var(--surface-2);
}

tr.row-details td {
    background: var(--surface-2);
    padding-top: 0.25rem;
}

/* Parts grouped under their request in the production form. */
.pick-request-head td {
    background: var(--surface-2);
    border-top: 1px solid var(--line-strong);
}

.pick-part {
    padding-left: 1.5rem;
}

.filters select {
    width: auto;
    margin: 0;
}

.filters .toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

select.inline-select {
    width: auto;
    min-width: 10rem;
    margin: 0;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* ------------------------------------------------------------------ Team */

.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: 1.25rem;
    align-items: start;
}

/* The chart scrolls inside its panel; without this, its width would widen
   the grid column, and the whole page with it. */
.team-layout > * {
    min-width: 0;
}

/* The side panel stays in view while the chart scrolls past it. */
.team-side {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.team-side > * + * {
    margin-top: 0.9rem;
}

.team-side h2 {
    margin: 0;
}

.team-side-meta {
    font-size: 0.85rem;
}

.team-side-sub {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.team-form > * + * {
    margin-top: 0.8rem;
}

.team-form label {
    margin: 0;
}

.permission-group-compact {
    padding: 0.6rem 0.8rem 0.7rem;
}

.permission-group-compact label.permission {
    font-size: 0.85rem;
}

.permission-list {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.team-people {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-people > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.team-invite {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.team-invite label {
    flex: 1;
    margin: 0;
}

.team-person-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.org-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
}

.org-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    color: var(--ink-faint);
    font-size: 0.8rem;
}

.org-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.orgchart-scroll {
    overflow-x: auto;
    padding: 1rem 0 0.5rem;
}

/* The chart as org charts are drawn: each level a row of boxes, joined to
   the box above by lines made of borders -- half a bar either side of each
   box, and a drop from the parent to the bar. No library, no canvas: it is
   a nested list, which is also what a screen reader reads. */
.orgchart,
.org-children {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.orgchart {
    min-width: max-content;
}

.org-children {
    position: relative;
    padding-top: 1.25rem;
}

.org-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.4rem 0;
}

.orgchart > .org-item {
    padding-top: 0;
}

.org-item::before,
.org-item::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 1.25rem;
    border-top: 1.5px solid var(--line-strong);
}

.org-item::before {
    right: 50%;
}

.org-item::after {
    left: 50%;
    border-left: 1.5px solid var(--line-strong);
}

.orgchart > .org-item::before,
.orgchart > .org-item::after,
.org-item:only-child::before,
.org-item:only-child::after {
    display: none;
}

.org-item:only-child {
    padding-top: 0;
}

.org-item:first-child::before,
.org-item:last-child::after {
    border: 0 none;
}

.org-item:last-child::before {
    border-right: 1.5px solid var(--line-strong);
    border-radius: 0;
}

.org-item:first-child::after {
    border-radius: 0;
}

.org-children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 1.25rem;
    border-left: 1.5px solid var(--line-strong);
}

.org-node {
    width: 12.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

/* The owner: black plate, orange edge -- fixed, and at the very top. */
.org-node-owner {
    border-top: 4px solid var(--signal);
    background: var(--ink);
    color: var(--canvas);
}

.org-node-owner button.org-node-head,
.org-node-owner button.org-person {
    color: var(--canvas);
}

.org-node-owner button.org-node-head:hover,
.org-node-owner button.org-person:hover {
    background: color-mix(in srgb, var(--canvas) 10%, transparent);
}

.org-node-owner .org-node-meta,
.org-node-owner .org-node-name .icon {
    color: var(--signal);
}

.org-node-owner .org-node-head,
.org-node-owner .org-people {
    border-color: color-mix(in srgb, var(--canvas) 18%, transparent);
}

.org-node-owner .avatar {
    background: var(--signal);
    color: var(--signal-ink);
}

.org-node-name .icon {
    vertical-align: -2px;
    margin-right: 0.2rem;
}

.org-node-top {
    border-top: 3px solid var(--accent);
}

.org-node-on {
    border-color: var(--accent);
    box-shadow: var(--focus);
}

/* Where a dragged person would land. */
.org-node-drop {
    border-style: dashed;
    border-color: var(--accent);
    background: var(--accent-soft);
}

button.org-node-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    height: auto;
    padding: 0.6rem 0.75rem 0.5rem;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    color: var(--ink);
    font-weight: 400;
    text-align: left;
    white-space: normal;
    box-shadow: none;
}

button.org-node-head:hover {
    background: var(--surface-hover);
}

.org-node-name {
    font-weight: 650;
}

.org-node-meta {
    font-size: 0.75rem;
    color: var(--ink-faint);
}

.org-people {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0.35rem 0.4rem;
    list-style: none;
}

button.org-person {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    height: auto;
    padding: 0.25rem 0.35rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
    box-shadow: none;
}

button.org-person[draggable="true"] {
    cursor: grab;
}

button.org-person:hover {
    background: var(--surface-hover);
}

button.org-person.org-person-on {
    background: var(--accent-soft);
}

.org-person-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-person .avatar {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.65rem;
}

.org-empty {
    margin: 0;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-faint);
}

.org-node-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.1rem 0.2rem;
    padding: 0.3rem 0.35rem 0.4rem;
    border-top: 1px solid var(--line);
}

.org-node-actions button.link {
    gap: 0.25rem;
    height: auto;
    padding: 0.15rem 0.25rem;
    border-color: transparent;
    color: var(--accent);
    font-size: 0.8rem;
}

.org-node-actions button.link:hover {
    border-color: transparent;
    background: var(--accent-soft);
}

.org-unassigned {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

.org-unassigned button.org-person {
    width: auto;
}

.avatar-sm {
    width: 1.1rem;
    height: 1.1rem;
}

.avatar-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.95rem;
}

/* A pending invite is someone not there yet; a disabled person is someone
   who has gone. Both are also said in words beside them. */
.avatar-invited {
    background: transparent;
    border: 1.5px dashed var(--accent);
}

.avatar-disabled {
    background: var(--neutral-soft);
    color: var(--ink-faint);
}

@media (max-width: 1100px) {
    .team-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-side {
        position: static;
        max-height: none;
    }
}

/* On a phone the chart becomes a list, each role indented under the one it
   answers to: a row of boxes side by side does not fit a phone. */
@media (max-width: 720px) {
    .orgchart,
    .org-children {
        display: block;
        min-width: 0;
    }

    .org-children {
        margin-left: 0.6rem;
        padding: 0 0 0 1rem;
        border-left: 1.5px solid var(--line-strong);
    }

    .org-item {
        display: block;
        padding: 0.6rem 0 0;
    }

    .org-item::before,
    .org-item::after,
    .org-children::before {
        display: none;
    }

    .org-node {
        width: auto;
    }
}

.permission-group > * + * {
    margin-top: 0.6rem;
}

label.permission {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-weight: 400;
}

label.permission input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2rem 0 0;
    flex: none;
    accent-color: var(--accent);
}

label.permission span {
    display: flex;
    flex-direction: column;
}

@media (max-width: 800px) {
    .report-cancel {
        margin-left: 0;
    }
}

/* Buttons that are really surfaces -- a box in the org chart, a person in
   it, a step of a guide -- carry names and sentences, not commands, and are
   set as text rather than as a control-panel label. */
button.org-node-head,
button.org-person,
button.guide-step-head,
button.guide-close {
    font-family: var(--font);
    letter-spacing: 0;
    text-transform: none;
}

button.org-node-head .org-node-name {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- Empresa */

.company-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: start;
}

.company-layout > .panel {
    margin: 0;
}

/* The top bar, as it will look. */
.company-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px dashed var(--line-strong);
    background: var(--canvas);
}

.company-preview img {
    height: 2rem;
    max-width: 10rem;
    object-fit: contain;
}

.company-preview-empty {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--font-display);
    font-weight: 700;
}

.company-preview-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.company-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.company-form label {
    flex: 1;
    margin: 0;
}

.company-logo-field label {
    margin-bottom: 0.4rem;
}

.company-owner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

@media (max-width: 900px) {
    .company-layout {
        grid-template-columns: 1fr;
    }

    .company-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ------------------------------------------------------------- Page head */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.35rem;
}

.page-head h1 {
    margin: 0;
}

.page-head .guide-button {
    margin-left: auto;
}

/* ------------------------------------------------------------------ Guide */

button.guide-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

button.guide-button:hover {
    color: var(--ink);
    background: var(--surface-hover);
    border-color: var(--ink);
    border-style: solid;
}

.guide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(380px, 100vw);
    padding: 1.25rem 1.25rem 1rem;
    background: var(--surface);
    border-left: 2px solid var(--rule);
    box-shadow: -10px 0 0 rgba(26, 25, 22, 0.06);
    overflow-y: auto;
    outline: none;
    animation: guide-in 160ms ease-out;
}

@keyframes guide-in {
    from { transform: translateX(16px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-panel {
        animation: none;
    }
}

.guide-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.1rem 0.75rem;
}

.guide-kicker {
    grid-column: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.guide-head h2 {
    grid-column: 1;
    margin: 0;
    font-size: 1.2rem;
}

button.guide-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.4rem;
    line-height: 1;
}

button.guide-close:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.guide-intro {
    margin: 0.6rem 0 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.guide-step {
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.guide-step-on {
    border-color: var(--line);
    background: var(--surface-2);
}

button.guide-step-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    height: auto;
    padding: 0.55rem 0.65rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    white-space: normal;
}

button.guide-step-head:hover {
    background: var(--surface-hover);
    border-radius: var(--radius);
}

.guide-number {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.guide-step-on .guide-number {
    background: var(--accent);
    color: var(--accent-ink);
}

.guide-step-done .guide-number {
    background: var(--accent-soft);
    color: var(--accent);
}

.guide-body {
    margin: 0;
    padding: 0 0.75rem 0.8rem 2.9rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.guide-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.guide-nav {
    display: inline-flex;
    gap: 0.5rem;
}

/* What the current step is talking about. */
.guide-focus {
    scroll-margin-top: 5rem;
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius);
    box-shadow: 0 0 0 8px var(--accent-soft);
    transition: outline-color 160ms, box-shadow 160ms;
}

/* On a wide screen the page makes room, so nothing the guide points at is
   under the panel. */
@media (min-width: 1100px) {
    body.guide-open {
        padding-right: 380px;
    }

    /* What room is left is one column's worth; two would crush both. */
    body.guide-open .home-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .guide-panel {
        top: auto;
        width: 100vw;
        max-height: 55vh;
        border-left: 0;
        border-top: 1px solid var(--line);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -12px 32px rgba(16, 24, 40, 0.16);
    }
}

/* -------------------------------------------------------------- Dashboard */

/* Good pieces in graphite, bad ones in red: the chart is ink on paper with
   one colour, and the colour is the thing to act on. */
:root {
    --chart-ok: #57534a;
    --chart-nok: #c8321f;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chart-ok: #b3ada0;
        --chart-nok: #ff6f5c;
    }
}

:root[data-theme="dark"] {
    --chart-ok: #b3ada0;
    --chart-nok: #ff6f5c;
}

.dash-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin: 0.75rem 0 0.5rem;
}

.period-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

a.period-chip {
    padding: 0.45rem 0.8rem;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

a.period-chip + a.period-chip {
    border-left: 1px solid var(--line);
}

a.period-chip:hover {
    color: var(--ink);
    background: var(--surface-hover);
    text-decoration: none;
}

a.period-chip.period-chip-on {
    background: var(--ink);
    color: var(--canvas);
}

.period-custom {
    display: inline-flex;
    gap: 0.5rem;
}

.period-custom label,
.period-machine {
    margin: 0;
    font-size: 0.8rem;
}

.period-custom input,
.period-machine select {
    width: auto;
    margin-top: 0.2rem;
}

.period-label {
    margin-top: 0.25rem;
}

/* Six indicators: one row of six, two of three, or three of two -- never
   five and a stray. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rule);
}

@media (min-width: 720px) {
    .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .stat-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1.1rem 1rem;
    background: var(--surface);
}

.stat-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.stat-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.stat-delta {
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.stat-delta.delta-good {
    color: var(--success);
}

.stat-delta.delta-bad {
    color: var(--danger);
}

.now-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin: 0.9rem 0 1.25rem;
    font-size: 0.875rem;
}

.now-strip .now-alert {
    color: var(--danger);
    font-weight: 600;
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.panel-head h2 {
    margin: 0;
}

.dash-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.dash-columns > .panel {
    margin: 0;
    min-width: 0;
}

.bar-cell-head {
    width: 30%;
}

/* In the half-width panels, the name goes under the code: the tables fit
   without scrolling, and the bars stay in view. */
.dash-columns .data td .muted {
    display: block;
    white-space: normal;
    font-size: 0.8rem;
}

.dash-columns .bar-cell-head {
    width: 22%;
}

/* The column chart: plain HTML, one axis, a hairline grid. */

.chart-legend {
    display: inline-flex;
    gap: 0.9rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.chart-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--radius-sm);
}

.swatch-ok, .bar-ok { background: var(--chart-ok); }
.swatch-nok, .bar-nok { background: var(--chart-nok); }

.column-chart {
    position: relative;
    height: 200px;
    margin: 0.5rem 0 1.75rem 2.25rem;
}

.chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-tick {
    position: relative;
    border-top: 1px solid var(--line);
}

.chart-tick > span {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: -0.55rem;
    font-size: 0.72rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chart-columns {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: 2px;
}

.chart-column {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    outline: none;
}

.chart-column:hover,
.chart-column:focus {
    background: var(--surface-hover);
    border-radius: 0;
}

.chart-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(100%, 24px);
}

.chart-stack > span {
    flex-basis: 0;
    min-height: 2px;
}

/* A rounded data end on top, square at the baseline. */
.chart-stack > span:first-child {
    border-radius: 0;
}

.chart-x {
    position: absolute;
    top: calc(100% + 0.4rem);
    font-size: 0.72rem;
    color: var(--ink-faint);
    white-space: nowrap;
}

.chart-tooltip {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 0.8rem;
    color: var(--ink-soft);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.chart-column:hover .chart-tooltip,
.chart-column:focus .chart-tooltip {
    display: flex;
}

/* At the ends of the chart the tooltip opens inwards, so it is never cut
   by the panel's edge. */
.chart-column:nth-child(-n + 3) .chart-tooltip {
    left: 0;
    transform: none;
}

.chart-column:nth-last-child(-n + 3) .chart-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

.chart-tooltip strong {
    color: var(--ink);
}

.chart-tooltip b {
    color: var(--ink);
}

.key {
    display: inline-block;
    width: 0.8rem;
    height: 2px;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.key-ok { background: var(--chart-ok); }
.key-nok { background: var(--chart-nok); }

.chart-table summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

@media (forced-colors: active) {
    .bar-ok, .swatch-ok, .key-ok { background: CanvasText; }
    .bar-nok, .swatch-nok, .key-nok { background: Highlight; }
}

/* ------------------------------------------------------------------ Início */

.home-head {
    align-items: flex-end;
    margin-bottom: 1.1rem;
}

/* The date as it is stamped on a job sheet. */
.home-date {
    margin: 0.55rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.home-head .home-actions .guide-button {
    margin-left: 0;
}

/* A link that does what a button does looks like one: same plate, same
   lettering. */
a.button-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.15rem;
    border: 1px solid var(--signal);
    border-radius: var(--radius-sm);
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

a.button-link:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--signal) 88%, var(--ink));
}

a.button-link.secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

a.button-link.secondary:hover {
    background: var(--ink);
    color: var(--canvas);
}

/* The four numbers of the shift as one instrument strip: readouts side by
   side under one heavy rule, each a way into its screen. */
.home-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-top: 2px solid var(--rule);
    margin-bottom: 1.5rem;
}

a.home-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.2rem 1.1rem;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 120ms;
}

a.home-kpi:hover {
    text-decoration: none;
    background: var(--surface-hover);
}

/* The corner arrow says "this goes somewhere" without a button in each. */
a.home-kpi::after {
    content: "↗";
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    font-size: 0.9rem;
    color: var(--ink-faint);
    transition: color 120ms, transform 120ms;
}

a.home-kpi:hover::after {
    color: var(--accent);
    transform: translate(2px, -2px);
}

.home-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.home-kpi-label .icon {
    display: none;
}

.home-kpi-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.home-kpi-note {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.note-bad {
    color: var(--danger);
    font-weight: 600;
}

.note-warn {
    color: var(--warning);
    font-weight: 600;
}

.note-bad .icon {
    vertical-align: -2px;
}

.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.home-main,
.home-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.home-main > .panel,
.home-side > .panel {
    margin: 0;
}

a.panel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.empty {
    padding: 1.25rem;
    border: 1px dashed var(--line-strong);
    border-radius: 0;
    background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--surface-2) 8px 16px);
    text-align: center;
    color: var(--ink-soft);
}

.empty p {
    margin: 0 0 0.35rem;
}

.run-list,
.due-list,
.machine-list,
.compact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.run-list li + li,
.due-list li + li,
.machine-list li + li,
.compact-list li + li {
    border-top: 1px solid var(--line);
}

a.run {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.7rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
}

a.run:hover {
    background: var(--surface-hover);
}

.run-main,
.due-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    min-width: 0;
}

.run-what {
    font-weight: 500;
}

.run-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    font-size: 0.8rem;
}

/* A gauge, square-ended: ink on a hatched track, so the empty part of the
   scale reads as empty, not as a paler colour. */
.meter {
    display: block;
    height: 6px;
    background: var(--neutral-soft);
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    background: var(--signal);
}

.meter-small {
    width: 8rem;
}

.meter-over > span {
    background: var(--warning);
}

.due {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 9rem;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.7rem 0;
}

.due-when {
    font-size: 0.85rem;
    white-space: nowrap;
}

.due-progress {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.due-progress .meter-small {
    width: 100%;
}

.list-more {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.machine-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
}

.machine-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.machine-name .muted {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.machine-state {
    font-size: 0.8rem;
    text-align: right;
    color: var(--ink-soft);
}

.state-dot {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--ink-faint);
}

.state-running { background: var(--signal); }
.state-idle { background: var(--success); }
.state-maintenance { background: var(--warning); }
.state-late { background: var(--danger); }

.state-text-running { color: var(--accent); font-weight: 600; }
.state-text-late { color: var(--danger); font-weight: 600; }

.compact-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.quality-split {
    display: flex;
    gap: 1.25rem;
    margin: 0 0 0.5rem;
}

.quality-split b {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
}

.split-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    margin-bottom: 0.75rem;
}

.split-bar > span {
    flex-basis: 0;
    min-width: 2px;
}


/* Primeiros passos */

.first-steps .meter {
    margin-bottom: 0.9rem;
}

.step-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.6rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.step-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.1rem;
    border: 1.5px solid var(--line-strong);
    color: var(--surface);
}

.step-done .step-mark {
    border-color: var(--success);
    background: var(--success);
}

.step-text {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

.step-text .muted {
    font-size: 0.8rem;
}

.step-done s {
    color: var(--ink-soft);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .home-grid {
        grid-template-columns: 1fr;
    }

    .home-actions {
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    /* Two by two: four numbers stacked one per row push everything that
       matters below the fold. */
    .home-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    a.home-kpi {
        padding: 0.75rem;
    }

    .home-kpi-value {
        font-size: 2.1rem;
    }

    .due {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .due-progress {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------- Maintenance board */

.view-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* The same two-option control as the forms use, as links: each view has
   its own address, so a board can be bookmarked or sent to someone. */
.segmented > a {
    padding: 0.4rem 0.95rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
}

.segmented > a + a {
    border-left: 1px solid var(--line-strong);
}

.segmented > a:hover {
    color: var(--ink);
    background: var(--surface-hover);
    text-decoration: none;
}

.segmented > a.active {
    background: var(--ink);
    color: var(--canvas);
}

.mboard {
    display: grid;
    gap: 1.75rem;
    margin-bottom: 1rem;
}

.mboard-model-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rule);
}

.mboard-model-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.mboard-model-head .muted {
    font-size: 0.85rem;
}

.mboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 0.875rem;
}

/* A card per machine. The coloured edge is its worst task, so a row of
   cards reads at a glance; the words on the badge say the same thing for
   anyone who does not see the colour. */
.mcard {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.95rem 1.05rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 5px solid var(--line-strong);
    border-radius: 0;
    min-width: 0;
}

.mcard-overdue {
    border-top-color: var(--danger);
}

.mcard-due {
    border-top-color: #f2b705;
}

.mcard-ok {
    border-top-color: var(--success);
}

.mcard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.mcard-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    min-width: 0;
}

.mcard-title .muted {
    font-size: 0.85rem;
}

.mcard-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.signal-bad {
    color: var(--danger);
    font-weight: 600;
}

.mcard-sub {
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.mtasks {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Name and date on one line, the bar or the pips under them across the
   card: the names are sentences ("Verificar aquecedores e sensores da
   câmara"), and a column beside them would cut every one short. */
.mtask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name when"
        "meter meter";
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

.mtask-name {
    grid-area: name;
}

.mtask > .mbar,
.mtask > .mpips {
    grid-area: meter;
}

.mtask-when {
    grid-area: when;
    text-align: right;
    font-size: 0.8rem;
    color: var(--ink-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mtask-overdue .mtask-when {
    color: var(--danger);
    font-weight: 600;
}

.mtask-due .mtask-when {
    color: var(--warning);
    font-weight: 600;
}

.mbar {
    display: block;
    height: 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--neutral-soft);
    overflow: hidden;
}

.mbar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.mtask-due .mbar > span {
    background: var(--warning);
}

.mtask-overdue .mbar > span {
    background: var(--danger);
}

.mtask-unknown .mbar > span {
    background: transparent;
}

/* One pip per occurrence the task allows: filled ones are failures that
   have already happened. */
.mpips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.mpips > span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-strong);
}

.mpips > span.on {
    border-color: var(--accent);
    background: var(--accent);
}

.mtask-due .mpips > span.on {
    border-color: var(--warning);
    background: var(--warning);
}

.mtask-overdue .mpips > span.on {
    border-color: var(--danger);
    background: var(--danger);
}

.mcard-foot {
    margin-top: auto;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
}

/* The task page: one panel per model, preventive tasks before predictive. */
.inline-form > .span-all {
    grid-column: 1 / -1;
}

.plan-form > .segmented {
    margin-bottom: 0.25rem;
}

.plan-model h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.plan-model-meta {
    font-size: 0.85rem;
    font-weight: 400;
}

td.nowrap {
    white-space: nowrap;
}

td.plan-steps {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag.tag-predictive {
    background: var(--accent-soft);
    color: var(--accent);
}

.suggestion-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suggestion-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.suggestion-list > li > div {
    min-width: 0;
    flex: 1;
}

.suggestion-names {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* ------------------------------------------------ Blazor's own error strip */

#blazor-error-ui {
    color-scheme: light only;
    background: #fde7a9;
    color: #3d2c00;
    bottom: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ------------------------------------------------------------------ Plans */

/* The plan in the top bar: a quiet tag, until a limit is near -- then the
   signal colour, the one thing on the bar asking to be looked at. */
a.plan-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

a.plan-button:hover {
    text-decoration: none;
    background: var(--ink);
    border-color: var(--ink);
    color: var(--canvas);
}

a.plan-button-alert {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--signal-ink);
}

a.plan-button-alert:hover {
    background: color-mix(in srgb, var(--signal) 88%, var(--ink));
    border-color: var(--signal);
    color: var(--signal-ink);
}

/* The refusal that a plan would lift carries its own way out. */
.form-error-plan {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.form-error-plan > span {
    flex: 1 1 16rem;
}

.form-error-plan a.button-link {
    height: 2.1rem;
}

/* On Início: one line with a heavy edge, never a box that pushes the shift
   off the screen. */
.plan-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--signal);
    background: var(--surface);
    font-size: 0.925rem;
}

.plan-notice > span {
    flex: 1 1 14rem;
}

.plan-notice > .icon {
    color: var(--accent);
}

.plan-notice a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--accent);
}

/* A page the plan does not include. */
.plan-locked {
    max-width: 38rem;
}

.plan-locked-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-locked h2 {
    margin: 0.5rem 0 0.4rem;
}

.plan-locked p {
    color: var(--ink-soft);
    margin: 0 0 1.1rem;
}

/* The plans page. */
.kpi-value small {
    font-size: 0.5em;
    color: var(--ink-soft);
    letter-spacing: 0;
}

/* Under the number: .kpi runs column-reverse, so first in order is last on screen. */
.kpi .meter {
    order: -1;
    width: 100%;
}

.plan-over {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warning);
    background: var(--warning-soft);
    padding: 0.6rem 1rem;
    margin: 0 0 1.25rem;
}

.plan-table th[scope="col"] {
    vertical-align: bottom;
    text-align: left;
}

.plan-table td {
    vertical-align: middle;
}

/* The rows read as sentences, not as column labels. */
.plan-table th[scope="row"] {
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    min-width: 13rem;
}

.plan-name {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.plan-price {
    display: block;
    margin: 0.15rem 0 0.35rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}

.plan-table .plan-current {
    background: color-mix(in srgb, var(--signal) 9%, var(--surface));
}

.plan-table th.plan-current {
    box-shadow: inset 0 3px 0 var(--signal);
}

.mark-on {
    color: var(--ink);
}

.mark-off {
    color: var(--ink-faint, var(--ink-soft));
}

.plan-change p {
    max-width: 44rem;
}

/* The weekly offer: a plate in the middle of Início, closed with one click
   or Escape, and not back for a week. */
.offer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
}

.offer {
    position: fixed;
    z-index: 41;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.25rem 1.4rem 1.2rem;
    background: var(--surface);
    border-top: 4px solid var(--signal);
    outline: none;
}

.offer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

button.offer-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.4rem;
}

button.offer-close:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.offer h2 {
    margin: 0.6rem 0 0.5rem;
    font-size: 1.35rem;
}

.offer p {
    margin: 0 0 0.75rem;
    color: var(--ink-soft);
}

.offer-plan {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.offer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    a.plan-button span {
        display: none;
    }
}

/* Choosing a plan, at signup and on the subscription page: one line each,
   the chosen one in the signal colour. */
.plan-choice {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.5rem;
}

.plan-choice legend {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.plan-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.plan-option:has(input:checked) {
    border-color: var(--signal);
    background: var(--accent-soft);
}

.plan-option input {
    width: auto;
    margin-top: 0.2rem;
}

.plan-option small {
    display: block;
}

/* The plan chosen at signup, shown as decided on the first payment. */
.plan-chosen {
    display: grid;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--signal);
    border-left-width: 4px;
    background: var(--accent-soft);
}

.plan-chosen-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.plan-change-choice {
    margin: 0 0 1rem;
}

.plan-change-choice > summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.plan-change-choice[open] {
    display: grid;
    gap: 0.5rem;
}