/* Kelo — one stylesheet, one set of tokens. Brand manual v3.0 (September 2026).

   Warm paper and ink, hairline rules instead of floating cards, and one
   accent: rust -- the colour of oxidised steel, not of a safety vest. Brass is
   the second, quieter accent. States (OK, warning, critical, info) share the
   palette's temperature -- moss, toasted amber, brick -- and always come with
   their word; the colour is never the only information. Nothing has a
   shadow, a relief or a gradient.

   Type: Space Grotesk for headings, figures, labels and buttons; Inter for
   running text; IBM Plex Mono for codes, so PED000012 and PED000021 can be
   told apart at a glance. The three are served from this site (wwwroot/fonts,
   OFL): a font from a third-party CDN would hand every customer's address to
   someone the privacy page would then have to name.

   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. */

@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/space-grotesk-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/* Page titles and the big figures. Until the file is in fonts/, the browser
   falls through to Space Grotesk, which is next in --font-big. */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("fonts/bricolage-grotesque-var.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Warm, never pure white. */
    --canvas: #e7e2d8;
    --surface: #f5f1e9;
    --surface-2: #ede7da;
    --surface-hover: #ebe4d6;
    --line: #d8d0c0;
    --line-strong: #b7ab93;

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

    --ink: #1c1b19;
    --ink-soft: #4a453d;
    --ink-faint: #665f53;

    /* Rust: links, the primary button, the active tab, the logo's rivets. */
    --accent: #a6431e;
    --accent-hover: #86351a;
    --accent-ink: #f5f1e9;
    --accent-soft: #f3ddce;
    /* Rust written on its own soft ground: the dark theme needs it a tone up. */
    --accent-on-soft: #a6431e;

    /* Kept as the name for "fill that should be seen" -- now rust as well. */
    --signal: #a6431e;
    --signal-ink: #f5f1e9;

    /* Brass: a second level of emphasis that is not the main button -- a
       recommended plan, a note that is not an alert. Sparingly. */
    --brass: #7a5d28; /* manual #8A6A2E, a shade darker for 4.5:1 as text */
    --brass-soft: #ece0c4;

    --danger: #8c2f22;
    --danger-soft: #f2ddd5;
    --warning: #855711; /* manual #8A5A12, a shade darker for 4.5:1 on its tint */
    --warning-soft: #f2dda0;
    --success: #3d6b3f;
    --success-soft: #dee6d3;
    --info: #a6431e;
    --info-soft: #f3ddce;
    --neutral-soft: #e2dccf;

    /* The application's sidebar is ink in both themes, the Chapa reversed on
       it, as in the manual's applications page. */
    --sidebar: #171512;
    --sidebar-ink: #d8d0c0;
    --sidebar-ink-strong: #f2ede4;
    --sidebar-hover: rgba(242, 237, 228, 0.07);
    --sidebar-active: rgba(242, 237, 228, 0.11);
    --sidebar-muted: #8f897c;
    --sidebar-line: #2e2b26;
    --sidebar-accent: #c9793e;

    /* What a hand touches is round: fields, cards, and buttons and statuses
       as capsules. The cut at 45 degrees is kept for the Chapa, so the mark
       is the one hard-edged thing on the screen. The colours did not move. */
    --radius-sm: 0.75rem;
    --radius: 1rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
    --shadow-sm: none;
    --shadow: none;
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-big: "Bricolage Grotesque", "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    /* Engineering paper: a dot every 24px, barely there. */
    --grid-dot: rgba(28, 27, 25, 0.07);
}

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

        --canvas: #171512;
        --surface: #1f1d19;
        --surface-2: #1b1916;
        --surface-hover: #292621;
        --line: #34302a;
        --line-strong: #4a453d;
        --rule: #8f897c;

        --ink: #f2ede4;
        --ink-soft: #c9c0ae;
        --ink-faint: #9a9385;

        --accent: #c9793e;
        --accent-hover: #d98f58;
        --accent-ink: #171512;
        --accent-soft: #3a281c;
        --accent-on-soft: #d98f58;

        --signal: #c9793e;
        --signal-ink: #171512;

        --brass: #c9a55e;
        --brass-soft: #332916;

        --danger: #e08876;
        --danger-soft: #3a1f19;
        --warning: #e0b34d;
        --warning-soft: #3a2c0f;
        --success: #7fb37d;
        --success-soft: #223326;
        --info: #c9793e;
        --info-soft: #3a281c;
        --neutral-soft: #2a2722;

        --sidebar: #11100e;
        --sidebar-line: #26231f;

        --grid-dot: rgba(242, 237, 228, 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;

    --canvas: #171512;
    --surface: #1f1d19;
    --surface-2: #1b1916;
    --surface-hover: #292621;
    --line: #34302a;
    --line-strong: #4a453d;
    --rule: #8f897c;

    --ink: #f2ede4;
    --ink-soft: #c9c0ae;
    --ink-faint: #9a9385;

    --accent: #c9793e;
    --accent-hover: #d98f58;
    --accent-ink: #171512;
    --accent-soft: #3a281c;
    --accent-on-soft: #d98f58;

    --signal: #c9793e;
    --signal-ink: #171512;

    --brass: #c9a55e;
    --brass-soft: #332916;

    --danger: #e08876;
    --danger-soft: #3a1f19;
    --warning: #e0b34d;
    --warning-soft: #3a2c0f;
    --success: #7fb37d;
    --success-soft: #223326;
    --info: #c9793e;
    --info-soft: #3a281c;
    --neutral-soft: #2a2722;

    --sidebar: #11100e;
    --sidebar-line: #26231f;

    --grid-dot: rgba(242, 237, 228, 0.045);
}

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

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

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);

    /* Sixteen, not fifteen: the page is read at arm's length from a machine
       as often as from a desk chair. Nothing below is smaller than 12 px. */
    font-size: 16px;
    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);
}

/* The page title is the loud thing on the page: Bricolage, heavy and tight.
   What labels a block (h2, buttons, table heads) stays in Space Grotesk. */
h1 {
    font-family: var(--font-big);
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    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: 0.35rem;
    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: 248px;
    flex: 0 0 248px;
    background: var(--sidebar);
    color: var(--sidebar-ink);
    border-right: 1px solid var(--sidebar-line);
    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;
}

/* The Chapa: the plate in the colour of the text around it, the K cut
   through to whatever is behind, the rivets in rust (BrandMark.razor). Half
   its width clear on every side, never below 14px -- manual, page 05. */
.brand-mark {
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: inherit;
}

.brand-name {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    line-height: 1;
}

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

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

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-pill);
    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 a lit capsule with a rust rivet at its end: findable
   from across the room, and said twice (the fill and the rivet). */
.nav-link.active {
    background: var(--sidebar-active);
    color: var(--sidebar-ink-strong);
}

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

.nav-link.active::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--sidebar-accent);
}

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

/* Past the menu and the top bar, straight to the page: the first stop of
   the Tab key, out of sight until it has the focus. */
a.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 200;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--canvas);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

a.skip-link:focus {
    top: 0.75rem;
}

/* The page takes the focus when the link is followed, to start the next Tab
   from it; it is not a control, and draws no ring. */
.content:focus {
    outline: none;
}

.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 square marker stands. */
.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-pill);
    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.75rem;
    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;
    border-radius: 50%;
    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: 50%;
    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;
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-pill);
    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: an ink plate with the
   Chapa on it, large, and the two rust rivets as the only colour. */
.auth-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem 3.5rem;
    color: var(--sidebar-ink);
    background: var(--sidebar);
}

.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 > * {
    position: relative;
    z-index: 1;
}

/* The plate takes a third of the height of the screen, never more than
   300px, so the pitch under it still fits on a laptop. */
.auth-chapa {
    width: clamp(10rem, 32vh, 18.75rem);
}

.auth-chapa .brand-mark {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    color: var(--sidebar-ink-strong);
}

/* The dimension line of a drawing: a tick at each end, the measure between. */
.auth-cota {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font: 400 0.78rem/1 var(--font-mono);
    color: var(--sidebar-ink);
}

.auth-cota::before,
.auth-cota::after {
    content: "";
    flex: 1 1 auto;
    height: 9px;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.auth-cota::before {
    border-left: 1px solid currentColor;
}

.auth-cota::after {
    border-right: 1px solid currentColor;
}

.auth-pitch-title {
    font-family: var(--font-big);
    font-size: clamp(2.4rem, 3.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sidebar-ink-strong);
    max-width: 14ch;
    margin-bottom: 1.5rem;
}

.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: var(--sidebar-accent);
}

.auth-aside-foot {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--sidebar-muted);
    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;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}

.auth-card h1 {
    font-size: clamp(2.6rem, 4.4vw, 3.6rem);
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--rule);
    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);
}

/* The browser's own button, dressed as the quiet buttons beside it. Its
   words are the browser's, in the browser's language, and stay that way. */
input[type="file"]::file-selector-button {
    height: 2rem;
    margin-right: 0.75rem;
    padding: 0 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: 500 0.85rem var(--font);
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--ink-faint);
    background: var(--surface-hover);
}

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 rust with paper 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-pill);
    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);
}

/* The page title takes focus on every navigation (FocusOnNavigate), so a
   screen reader announces where it arrived. It is not something to act on,
   and a focus ring round it reads as a broken box. */
h1:focus {
    outline: none;
}

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;
}

/* An explanation right under a message, before the form it introduces. */
.form-error + .form-intro {
    margin: 0 0 1.25rem;
}

/* The way out beside a message that says "look in your inbox": a quiet
   button on its own line, so it is not taken for the form's main action. */
.form-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: -0.5rem 0 1.25rem;
    font-size: 0.875rem;
}

/* 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: var(--radius-sm);
    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 in a hairline frame with round
   corners. The heavy rule that says where it starts moved under its heading
   (see ".panel > h2:first-child"). No shadow -- nothing on a drawing floats. */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}

.panel > h2:first-child {
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--rule);
}

/* 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;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.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 {
    /* What a cell positions out of the flow -- the words a tick stands for,
       kept for whoever hears the page -- is held in here too: left to the
       page, it widened the whole screen by the table's hidden width. */
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    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.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--surface-2);
    white-space: nowrap;
}

/* The heavy rule that used to cap the frame now closes the head row -- and
   only that one: a row's own label keeps the hairline of its row. */
table.data thead th {
    border-bottom: 2px solid var(--rule);
}

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;
}

/* On a screen with room for it, a row's actions stay in view: a table wider
   than its frame scrolls under them, instead of taking "Editar" off the edge
   where only a sideways scroll finds it. Not on a phone, where a column that
   never moves would be half the table. */
@media (min-width: 900px) {
    td.row-actions,
    table.data thead th:last-child:empty {
        position: sticky;
        right: 0;
    }

    /* Its own ground, or the cells passing under it show through. The rows'
       other states (hover, expanded) are more specific and still win. */
    td.row-actions {
        background: var(--surface);
        box-shadow: inset 1px 0 0 var(--line);
    }
}

.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-pill);
    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;
}

/* ------------------------------------------- Lists where there is no room

   A table wider than its frame slid its state and its row's action off the
   edge, where only a sideways scroll found them. Marked "cards", each row
   becomes a short card instead: what it is on the first line with its state
   beside it, the rest under the name of its column, the actions last. The
   head row stays in the page for whoever hears it instead of seeing it.

   It goes by the width of the list, not of the window: a phone is one case,
   and a laptop with the guide open beside the page is the other -- the page
   keeps 650px of a 1280px screen, and that is where a new company starts. */
.table-wrap.cards-wrap {
    container: cards / inline-size;
}

@container cards (max-width: 48rem) {
    table.data.cards,
    table.data.cards tbody {
        display: block;
    }

    table.data.cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    table.data.cards tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.45rem 0.75rem;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--line);
    }

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

    table.data.cards td {
        display: block;
        grid-column: 1 / -1;
        min-width: 0;
        padding: 0;
        border: none;
        background: transparent;
    }

    table.data.cards td:empty {
        display: none;
    }

    /* What the row is. A name may take two lines here; a code is short
       enough not to need the rule that keeps it whole in a table. */
    table.data.cards td:first-child {
        font-size: 1rem;
        white-space: normal;
        box-shadow: none;
    }

    table.data.cards td:first-child strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    table.data.cards tr:has(> td.cell-state) > td:first-child {
        grid-column: 1;
    }

    /* Its state, and the step the state asks for, at the top right. */
    table.data.cards td.cell-state {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.4rem;
        max-width: 12rem;
        text-align: right;
    }

    table.data.cards td.cell-state button.status-action {
        margin-top: 0;
    }

    /* The column's name, now that the head row no longer says it. */
    table.data.cards td[data-label] {
        position: relative;
        padding-left: 7rem;
        min-height: 1.35rem;
    }

    table.data.cards td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0.2rem;
        width: 6.4rem;
        font-family: var(--font-display);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.3;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    table.data.cards td.row-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem;
        margin-top: 0.2rem;
    }

    table.data.cards td.row-actions > * {
        margin: 0;
    }

    /* A row's states are painted on the card, not on cells that no longer
       touch each other. */
    table.data.cards tbody tr:hover td {
        background: transparent;
    }

    table.data.cards tr.row-chosen,
    table.data.cards tr.row-expanded {
        background: var(--surface-2);
    }

    table.data.cards tr.row-chosen {
        box-shadow: inset 3px 0 0 var(--accent);
    }

    /* What opens under a row keeps the whole width: the question before a
       step that cannot be undone, the details, the form. */
    table.data.cards tr.row-confirm,
    table.data.cards tr.row-details {
        display: block;
    }

    table.data.cards tr.row-confirm {
        background: var(--danger-soft);
    }

    table.data.cards tr.row-details {
        background: var(--surface-2);
    }
}

/* ----------------------------------------------------------- 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.2rem 0.65rem 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    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);
}

/* The rivet: a round point in the colour of the status, before the word. */
.pill::before {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    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-on-soft);
    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-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* On a phone, two across. An odd count gives its first figure the whole row
   -- the plan's name, on the plans page -- instead of leaving a blank cell
   that reads as one still loading, and a long name room to be read. */
@media (max-width: 720px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpis > :first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }
}

/* 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-family: var(--font-big);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    color: var(--ink);
}

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

.kpi-label {
    font-size: 0.75rem;
    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.75rem;
    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-pill);
    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.1rem 0.6rem;
    border-radius: var(--radius-pill);
    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-pill);
    overflow: hidden;
    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: var(--font-mono);
    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;
}

/* The views of one page, as one capsule cut in segments -- the switch the
   maintenance board already had. The underlined strip is kept for the
   section above the title (Catálogo, Definições): two levels that used to
   look the same, and stood one over the other on the catalogue pages. */
.tabs {
    display: inline-flex;
    max-width: 100%;
    gap: 0;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--surface);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1.25rem;
}

button.tab {
    flex: none;
    height: 2.25rem;
    padding: 0 1rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

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

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

button.tab-active,
button.tab-active:hover {
    background: var(--ink);
    color: var(--canvas);
}

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

button.tab-active .tab-count {
    background: color-mix(in srgb, var(--canvas) 18%, transparent);
    color: var(--canvas);
}

/* ------------------------------------------------------ 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.75rem;
    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;
}

/* "3× Suporte PA12" stays together where there is room, and breaks rather
   than push the table off the page where there is not. */
.part-line {
    overflow-wrap: anywhere;
}

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

/* A yes-or-no in a form: the box, then what it means and its small print. */
label.form-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
}

label.form-toggle input[type="checkbox"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2rem 0 0;
}

label.form-toggle .muted {
    display: block;
    font-size: 0.85rem;
}

/* A line under the status that explains it: the carrier and tracking
   number, or how much of the post-processing is done. */
.status-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

/* --------------------------------------- Requests: what a part is given */

/* One part of a request in the form: its line of fields, and under it the
   question every part is asked -- what happens to it after the machine. */
.part {
    padding: 0.75rem 0 0.85rem;
    border-top: 1px solid var(--line);
}

.parts-head + .part {
    border-top: none;
    padding-top: 0.35rem;
}

.part-post {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.part-post-label {
    margin-right: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* A choice that is either on or off, and looks it: outlined and quiet when
   off, filled in ink when on. Ink and not rust, so that the form's one rust
   button stays the one that saves. */
button.choice {
    height: 2rem;
    padding: 0 0.7rem;
    gap: 0.35rem;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line-strong);
}

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

button.choice.choice-on,
button.choice.choice-on:hover {
    color: var(--canvas);
    background: var(--ink);
    border-color: var(--ink);
}

.part-post-note {
    flex: 1 1 14rem;
    max-width: 24rem;
    height: 2rem;
    margin: 0;
    font-size: 0.85rem;
}

/* A word of caution inside a form: it says something and stops nothing.
   Amber, with its bar on the edge and its sign, and never red -- red is for
   what was refused. */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-left: 4px solid var(--warning);
    background: var(--warning-soft);
    font-size: 0.9rem;
}

.form-notice > .icon {
    flex: none;
    margin-top: 0.15rem;
    color: var(--warning);
}

.form-notice ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

/* ------------------------------------------- Requests: one opened up */

/* A request opened under its own row: what it is made of, where it has
   been, and how it leaves. Three plain columns under three plain headings,
   so each question has one place to look. */
.request-details {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem 2rem;
    padding: 0.85rem 0 0.6rem;
    white-space: normal;
}

.request-details h3,
.request-edit h3 {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.request-details p {
    margin: 0 0 0.5rem;
}

.detail-parts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-parts li {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr);
    gap: 0.3rem 0.9rem;
    align-items: center;
    padding: 0.4rem 0;
    border-top: 1px solid var(--line);
}

.detail-parts li:first-child {
    border-top: none;
    padding-top: 0;
}

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

.detail-part-post {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* A post-processing step on a part, with how far it is in words. Outlined
   while it is owed, tinted once it has started, green once it is done. */
.post-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

.post-step-status {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.post-step-doing {
    background: var(--info-soft);
    box-shadow: none;
}

.post-step-doing .post-step-status {
    color: var(--info);
}

.post-step-done {
    background: var(--success-soft);
    box-shadow: none;
}

.post-step-done .post-step-status {
    color: var(--success);
}

.detail-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.row-details .detail-chips .request-chip {
    margin: 0;
}

.detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.ship-form {
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.detail-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
}

.detail-foot button {
    margin-left: auto;
}

/* The form, opened under the row it changes. */
.request-edit {
    padding: 0.85rem 0 0.75rem;
    white-space: normal;
}

.request-edit form > * + * {
    margin-top: 1rem;
}

/* ------------------------------------------------------- Small pieces */

/* The main button at the size of a row: one per row at most, for the step
   that row is waiting for. */
button.small {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.78rem;
}

.row-actions > button + button,
.row-actions > a + button,
.row-actions > button + a {
    margin-left: 0.4rem;
}

/* The next step by hand, on a line of its own under the state that asks for it. */
button.status-action {
    display: flex;
    margin-top: 0.45rem;
}

/* The action a page exists for, beside its title. */
.page-head .head-action {
    margin-left: auto;
}

.page-head .head-action + .guide-button {
    margin-left: 0;
}

/* A list with nothing in it yet: what would be here, and how to start. */
.empty-state {
    margin: 1.25rem 0;
    padding: 1.75rem 1.5rem;
    border: 1px dashed var(--line-strong);
    text-align: center;
}

.empty-state p {
    margin: 0 auto 0.6rem;
    max-width: 34rem;
}

.empty-state button {
    margin-top: 0.4rem;
}

/* A second line in a table cell: who, when, how far. It wraps, even under a
   code that does not: a project's name is not an identifier. */
.cell-sub,
table.data td:first-child .cell-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--ink-faint);
    white-space: normal;
}

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

.ready-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--success);
    font-weight: 600;
}

/* Work that is finished stays on the list, and steps back. */
table.data tr.row-done td {
    color: var(--ink-faint);
}

table.data tr.row-done td strong {
    font-weight: 500;
}

.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 side menu gives way to the bar at the foot of the screen
       (BottomNav.razor): fourteen links in a strip across the top had to be
       dragged blind to find the ninth. */
    .sidebar {
        display: none;
    }

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

    /* The theme, the language and the way out move into "Mais"; the plan
       stays only when it has something to say. */
    .user-name,
    .top-row .sign-out,
    .top-row .theme-toggle,
    .top-row .lang-switch,
    .top-row .plan-button:not(.plan-button-alert) {
        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-part 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);
}

.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.75rem;
    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.8125rem;
    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-toolbar button.link {
    margin-left: auto;
}

/* What has been picked, always in the same place above the list. Empty, it
   is a quiet line saying what to do; with something in it, it lights up. */
.pick-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    min-height: 2.9rem;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 1px dashed var(--line-strong);
}

.pick-summary-on {
    border: 1px solid var(--accent);
    border-left-width: 4px;
    background: var(--accent-soft);
}

.pick-summary .request-chip {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--surface);
    padding: 0.15rem 0.55rem;
}

.pick-summary button.link {
    margin-left: auto;
}

/* Tens of requests stay one screen tall: the list scrolls. */
.pick-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 32rem;
    padding-right: 0.35rem;
    overflow-y: auto;
}

/* One request: a box, with a band across the top that names it. The band is
   a tone of its own, apart from the lines under it, so that at a glance the
   list reads as requests with parts inside and not as one run of rows. */
.pick-card {
    flex: none;
    border: 1px solid var(--line-strong);
    background: var(--surface);
}

.pick-card-on {
    border-color: var(--accent);
}

.pick-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.45rem 0.6rem 0.45rem 0.8rem;
    background: var(--neutral-soft);
}

.pick-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    min-width: 0;
}

.pick-code {
    font-family: var(--font-mono);
    font-weight: 600;
}

.pick-card .pick-note {
    margin: 0;
    padding: 0.35rem 0.8rem 0;
    font-size: 0.8rem;
}

.pick-parts {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One part: the tick and the name, what is still owed, and -- only once it
   is picked -- how many go this time. */
.pick-part {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9.5rem minmax(11rem, auto);
    align-items: center;
    gap: 0.3rem 1rem;
    min-height: 2.9rem;
    padding: 0.3rem 0.8rem 0.3rem 0.65rem;
    border-top: 1px solid var(--line);
    border-left: 4px solid transparent;
}

.pick-part-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.pick-part:not(.is-off):hover {
    background: var(--surface-hover);
}

.pick-part-left {
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.pick-part-end {
    display: flex;
    justify-content: flex-end;
}

/* Going: the bar, the tint, the name in bold, the quantity open. */
.pick-part.is-on,
.pick-part.is-on:hover {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.pick-part.is-on .pick-part-name {
    font-weight: 600;
}

.pick-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Cannot go in this production: faded, the box locked, and the reason said. */
.pick-part.is-off .pick-part-main {
    cursor: not-allowed;
}

.pick-part.is-off .pick-part-main,
.pick-part.is-off .pick-part-left {
    color: var(--ink-faint);
    opacity: 0.75;
}

.pick-why {
    max-width: 22rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
    text-align: right;
}

@media (max-width: 900px) {
    .pick-part {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pick-part-end {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .pick-why {
        text-align: left;
    }

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

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

    .detail-part-post {
        grid-column: 1 / -1;
    }
}

.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-pill);
    background: var(--neutral-soft);
}

.verdict-toggle button {
    padding: 0.3rem 0.8rem;
    border: 0;
    border-radius: var(--radius-pill);
    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.75rem;
    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-pill);
    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;
}

.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.75rem;
    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: ink plate, rust 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);
}

/* Paper at part strength, not rust: rust on the ink plate is 2.8 to 1, and
   this is a line that has to be read. The rust stays on the edge. */
.org-node-owner .org-node-meta,
.org-node-owner .org-node-name .icon {
    color: color-mix(in srgb, var(--canvas) 72%, var(--ink));
}

.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.75rem;
}

.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);
    /* The initials were the avatar's paper colour, on paper. */
    color: 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,
.company-main > .panel {
    margin: 0;
}

/* The owner's panels, one under the other, beside who the owner is. */
.company-main {
    display: grid;
    gap: 1.5rem;
}

.company-main .company-form {
    margin-bottom: 0.4rem;
}

/* 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 */

/* The title, what the page is for beside it, and the heavy rule under both:
   the head of a sheet. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.9rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--rule);
    margin-bottom: 1rem;
}

.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-pill);
    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.75rem;
    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,
    body.guide-open .dash-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Up to a wide desktop, the indicators beside an open guide go back to the
   shape they have on a narrow screen: four figures two by two, five as three
   and two. */
@media (min-width: 1100px) and (max-width: 1560px) {
    body.guide-open .home-kpis,
    body.guide-open .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.guide-open .kpis > :first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
    }

    body.guide-open .stat-grid.stat-grid-five {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.guide-open .stat-grid-five > .stat {
        grid-column: span 2;
    }

    body.guide-open .stat-grid-five > .stat:nth-child(n + 4) {
        grid-column: span 3;
    }
}

@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: #4a453d;
    --chart-nok: #8c2f22;
}

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

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

.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-pill);
    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);
}

/* Where the seven periods do not fit in a row -- a phone, or the page beside
   an open guide -- they stay in one line and slide: a capsule that wraps in
   two rounds its corners over the first and last words. */
.period-presets {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

a.period-chip {
    flex: none;
}

.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-radius: var(--radius-lg);
    overflow: hidden;
}

@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.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The same figure as on Início and on the plans page: one size, one face. */
.stat-value {
    font-family: var(--font-big);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}

/* Two across on a phone: "16,7 %" at full size broke after the comma. */
@media (max-width: 560px) {
    .stat-value {
        font-size: 2.1rem;
    }
}

.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;
}

/* Side by side only where each table has room for its columns: beside the
   menu, on a laptop, half the width broke "100 %" in two lines. */
@media (max-width: 1400px) {
    .dash-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.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.75rem;
    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.75rem;
    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-pill);
    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, each a way into its screen. The heavy rule is the page head's, right
   above; a second one here read as a doubled line. Four across or two by
   two, never three and one: the hairlines are the frame showing through the
   gaps, and an empty cell would show as a block of it. */
.home-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .home-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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;
    /* Room for the corner arrow: on a phone the longest label ran under it. */
    padding-right: 1.1rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    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-big);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    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: var(--radius);
    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);
}

/* How far along a production is, as a ring: the share in the signal colour,
   the rest in the track. It decorates -- the words beside it say the hours. */
.ring {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: conic-gradient(var(--signal) var(--share, 0%), var(--line) 0);
}

.ring::after {
    content: "";
    width: 68%;
    height: 68%;
    border-radius: 50%;
    background: var(--surface);
}

.ring-over {
    background: conic-gradient(var(--warning) var(--share, 0%), var(--line) 0);
}

.ring-small {
    width: 2.6rem;
    height: 2.6rem;
}

a.run > .run-main {
    flex: 1 1 12rem;
}

.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;
    border-radius: 50%;
    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;
    }

    /* The two things a shift starts with, side by side, and the guide as the
       round "?" after them: three buttons stacked took a quarter of the
       phone before the first number. */
    .home-actions {
        flex-wrap: nowrap;
        width: 100%;
    }

    .home-actions > a.button-link {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0 0.7rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .home-actions > a.button-link .icon {
        display: none;
    }

    .home-head .home-actions .guide-button {
        flex: none;
        justify-content: center;
        gap: 0;
        width: 2.75rem;
        padding: 0;
        font-size: 0;
    }

    .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%, 27rem), 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

/* 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: var(--radius-lg);
    min-width: 0;
}

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

.mcard-due {
    border-top-color: var(--warning);
}

.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.75rem;
    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 auto;
    grid-template-areas:
        "name when done"
        "meter meter done";
    align-items: center;
    gap: 0.3rem 0.75rem;
    font-size: 0.9rem;
}

/* "Feito", on the task it is about: the one button the floor comes here for. */
.mtask > button.mtask-done {
    grid-area: done;
    height: 2.25rem;
    padding: 0 0.8rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    border-color: var(--line-strong);
}

.mtask > button.mtask-done[aria-expanded="true"] {
    background: var(--surface-2);
    border-color: var(--accent);
}

.mtask + .mtask,
.mtask-form + .mtask {
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
}

.mtask-kind {
    margin-right: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.mcard-empty {
    margin: 0;
    font-size: 0.875rem;
}

.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: #f2dda0;
    color: #3a2c0f;
    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-pill);
    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;
}

/* Something on Início waiting for a person, with the way to it: the same
   line as the plan's, in the colour of what is wrong. */
.home-alert {
    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(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.925rem;
    font-weight: 600;
}

.home-alert > span {
    flex: 1 1 14rem;
}

.home-alert a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
}

/* On a closed report: rejects still waiting for their corrective action. */
.report-unsettled {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 600;
}

/* A line over a list that says what the list is, when it is not the obvious. */
.list-note {
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.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.75rem;
    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;
}

/* Where the three plans do not fit beside their rows -- a phone, or a laptop
   with the guide open -- what each row is stays put, narrower, and the plans
   slide under it: a table of values with no labels, or of labels with no
   values, says nothing. */
.table-wrap.plan-wrap {
    container: plan / inline-size;
}

@container plan (max-width: 50rem) {
    .plan-table th,
    .plan-table td {
        padding: 0.6rem 0.75rem;
    }

    .plan-table th[scope="row"],
    .plan-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 8.25rem;
        max-width: 8.25rem;
        white-space: normal;
        box-shadow: inset -1px 0 0 var(--line);
    }
}

.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.75rem;
    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;
}

/* At signup both prices are on the page, and the billing country chosen above
   the plans shows the one that will be charged. A style rule and not a
   script: that form is rendered once, with nothing behind it to redraw it. */
.price-reais,
form:has(select.billing-country option[value="BR"]:checked) .price-euros {
    display: none;
}

form:has(select.billing-country option[value="BR"]:checked) .price-reais {
    display: inline;
}

/* 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.75rem;
    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;
}

/* ---------------------------------------------------------------- Nível */

/* The spirit level: ink bar, rust bubble swaying until the answer settles.
   Still for anyone who asked for less motion -- the words say the rest. */
.level {
    display: block;
    flex: none;
    color: var(--ink);
    overflow: visible;
}

.level-bubble {
    animation: level-sway 1.4s ease-in-out infinite alternate;
}

@keyframes level-sway {
    from { transform: translateX(-17px); }
    to { transform: translateX(3px); }
}

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

.loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The failure dictionary. The description gets the room a code does not
   need, and the steps keep the lines they were written in. */
@media (min-width: 40rem) {
    .inline-form > .grow {
        grid-column: span 2;
    }
}

fieldset.dictionary-links {
    margin: 1rem 0 0;
    padding-bottom: 1rem;
}

fieldset.dictionary-links .choices {
    max-height: 16rem;
    overflow-y: auto;
}

td.dictionary-steps {
    white-space: pre-line;
    font-size: 0.85rem;
    min-width: 16rem;
}

/* The integrations page. A key is shown once and has to be copied whole, so
   it gets the full width and the type a key is read in. */
.key-reveal {
    border-top-color: var(--signal);
}

input.key-value {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

/* The manual: what it is on one side, the button that opens it on the other,
   one under the other where there is no room for both. */
.api-manual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.api-manual > div {
    flex: 1 1 22rem;
}

.api-manual p {
    margin: 0.35rem 0 0;
}

/* The question asked before a key is revoked: under the key's own row, the
   width of the table, so the answer is not squeezed into the last column. */
table.data tr.row-confirm td {
    background: var(--danger-soft);
    white-space: normal;
}

.confirm-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
}

.confirm-line > span {
    margin-right: auto;
}

/* The same question inside a request's details rather than in a row of its
   own: it needs the strip the row would have given it. */
.request-details .confirm-line {
    padding: 0.6rem 0.75rem;
    background: var(--danger-soft);
    white-space: normal;
}

.detail-confirm {
    grid-column: 1 / -1;
}

/* --------------------------------------- The side panel (SidePanel.razor) */

/* The list pages open their form here, beside the list: the row being
   changed stays in sight, dimmed with the rest of the page, while its fields
   are open. Nothing behind it answers until it is closed. */
.side-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 14, 12, 0.55);
    animation: scrim-in 160ms ease-out;
}

@keyframes scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--surface);
    border-left: 2px solid var(--rule);
    outline: none;
    animation: guide-in 160ms ease-out;
}

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

/* The page behind stays where it was left. */
body:has(.side-panel) {
    overflow: hidden;
}

.side-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.15rem 0.75rem;
    padding: 1.25rem 1.5rem 0.9rem;
}

.side-kicker {
    grid-column: 1;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.side-head h2 {
    grid-column: 1;
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

button.side-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-strong);
}

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

/* The form fills the panel: its fields scroll, its buttons stay at the foot
   where they are always in reach. */
.side-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-fields {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 0.35rem 1.5rem 1.25rem;
}

.side-fields label,
.side-fields .segmented,
.side-fields fieldset,
.side-fields .form-error,
.side-fields p {
    margin: 0;
}

.side-fields .segmented {
    justify-self: start;
}

/* Two short fields that belong together, side by side. */
.side-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.side-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

/* The other thing that can be done to the row, kept apart from saving it. */
.side-foot .side-other {
    margin-left: auto;
}

/* A change that is not the form's: archive, retire. Worded, underlined and
   out of the way, so it is never pressed in place of "Guardar". */
button.quiet-danger {
    height: auto;
    padding: 0.25rem 0;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    color: var(--danger);
    background: transparent;
    border: 0;
}

button.quiet-danger:hover {
    background: transparent;
    color: color-mix(in srgb, var(--danger) 80%, var(--ink));
}

button.quiet-danger.quiet-plain {
    color: var(--accent);
}

/* The question the foot asks before one of those, in the foot's place. */
.side-foot.side-foot-ask {
    background: var(--danger-soft);
}

.side-foot.side-foot-ask > span {
    flex: 1 1 100%;
    font-size: 0.9rem;
}

/* A checkbox with its sentence and, under it, what the sentence leaves out. */
.side-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.15rem 0.7rem;
    font-weight: 500;
}

.side-check input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
}

.side-check .field-hint,
.side-check small {
    grid-column: 2;
    margin: 0;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* The mark on a field that has to be filled in, and the line that says so. */
.req {
    color: var(--accent);
    font-weight: 700;
    margin-left: 0.1rem;
}

.req-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* The row whose form is open beside the list. */
table.data tr.row-chosen td {
    background: var(--surface-2);
}

table.data tr.row-chosen td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* A row that opens its form on a click says so. */
table.data tr.row-pick {
    cursor: pointer;
}

@media (max-width: 560px) {
    .side-head {
        padding: 1rem 1rem 0.75rem;
    }

    .side-fields {
        padding: 0.25rem 1rem 1rem;
    }

    .side-foot {
        padding: 0.85rem 1rem;
    }
}

/* -------------------------------------------- List pages: the rest of it */

/* An error from the save, between the fields and the buttons: seen without
   scrolling the fields back up. */
.side-form .side-error {
    margin: 0 1.5rem 1rem;
}

.side-form .side-error > .form-error {
    margin: 0;
}

/* Three short measures in a row: width, depth, height. */
.side-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.side-fields .choice-block {
    padding: 0.9rem 1rem 1rem;
}

.side-fields .choice-block > * + * {
    margin-top: 0.75rem;
}

/* The words over a control that is not a single field. */
.field-label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
}

/* A list of boxes to tick, one per line with its name written out -- where
   a row of chips would show only codes. */
.choice-list {
    display: grid;
    gap: 0.1rem;
    max-height: 17rem;
    overflow-y: auto;
}

label.choice-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.35rem 0.4rem;
    font-weight: 400;
    cursor: pointer;
}

label.choice-line:hover {
    background: var(--surface-hover);
}

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

label.choice-line input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.2rem 0 0;
}

/* A machine's state, changed where it is read: the pill, made a control. */
select.state-select {
    width: auto;
    min-width: 9.5rem;
    height: 2rem;
    margin: 0;
    padding: 0 1.9rem 0 0.6rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-color: currentColor;
    cursor: pointer;
}

/* The pill's colours come with a background, which would take the arrow
   with it: the arrow is put back, in the colour of the words. */
select.state-select.pill-ok,
select.state-select.pill-warn,
select.state-select.pill-unknown {
    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='%238a8578' 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.5rem center;
}

select.state-select option {
    color: var(--ink);
    background: var(--surface);
    text-transform: none;
    letter-spacing: 0;
}

/* Cells whose text is a sentence, not a code: they wrap. */
table.data td.cell-wrap,
table.data td.cell-wrap strong {
    white-space: normal;
}

table.data td.plan-how {
    min-width: 16rem;
    max-width: 28rem;
}

/* The same two-step question outside a table and outside a details block. */
.confirm-line.confirm-plain {
    padding: 0.7rem 0.9rem;
    background: var(--surface-2);
    border-left: 4px solid var(--signal);
}

/* "+ Novo cliente", in the request form: a customer written in place, with
   the two things a request needs from one. */
.new-customer {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 1rem 1rem;
    background: var(--surface-2);
    border-left: 4px solid var(--signal);
}

.new-customer-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1rem;
}

.new-customer label {
    margin: 0;
}

.new-customer h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* A select with the way to add what is missing from it under it: beside
   it, in a column of a form, the button took the room the names need. */
.field-with-add {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

.field-with-add > select {
    width: 100%;
}

.field-with-add > button.link {
    height: 1.75rem;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* The one sentence under a page's title, when what follows is the list
   itself: room to breathe before it. */
.page-head + .form-intro {
    margin: 0.35rem 0 1.25rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* ----------------------------------------------- Manutenção: "Feito" */

/* The four counts as one line of figures, not four boxes: the board under
   them is the page, and they only say how much of it is waiting. */
.mstats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.75rem;
    margin: 0.5rem 0 1.25rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.mstat > b {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.mstat-bad > b {
    color: var(--danger);
}

/* The form "Feito" opens, under the task it was pressed on. */
.mtask-form {
    list-style: none;
}

.mdone {
    display: grid;
    gap: 0.75rem;
    margin: 0.15rem 0 0.35rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--signal);
}

.mdone h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.mdone-fields {
    display: grid;
    grid-template-columns: minmax(9.5rem, 1fr) minmax(0, 2fr);
    gap: 0.75rem 0.9rem;
}

.mdone-fields label {
    margin: 0;
}

.mdone-fields .mdone-wide {
    grid-column: 1 / -1;
}

.mdone .form-error {
    margin: 0;
}

.mcard-foot .mdone {
    margin-top: 0;
}

tr.row-details .mdone {
    margin: 0.5rem 0 0.75rem;
    max-width: 44rem;
    white-space: normal;
}

@media (max-width: 560px) {
    .mdone-fields {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------- Produção: what is running */

/* One line per production on a machine, the button that closes it at the
   end of the line and big enough to hit with a glove on. */
.run-board {
    /* Its lines stack by the board's own width: see the end of this section. */
    container: board / inline-size;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.run-line {
    display: grid;
    grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.15rem;
}

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

.run-line-what,
.run-line-where,
.run-line-time {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.run-line-what strong {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.run-line-what .muted,
.run-line-where .muted {
    font-size: 0.85rem;
}

.run-line-code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.run-line-time {
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.run-line-time .meter {
    width: 100%;
}

.run-line-over {
    color: var(--warning);
    font-weight: 600;
}

a.button-link.run-line-report {
    height: 2.9rem;
    padding: 0 1.4rem;
    justify-content: center;
}

/* What closed lately, quieter: one line each, the report a link away. */
.run-board-closed {
    border-top-width: 1px;
}

.run-line-closed {
    grid-template-columns: 7rem minmax(0, 2fr) 6.5rem minmax(0, 1.4fr) 8rem 7rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.9rem;
}

.run-line-ref {
    overflow-wrap: anywhere;
}

.run-line-closed > .pill {
    justify-self: start;
}

/* A small heading over a list, in the voice of the menu's sections. */
.section-kicker {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.list-back {
    margin: 0 0 0.9rem;
}

/* Where the board is narrow -- a phone, a small laptop beside the menu, any
   screen with the guide open -- a line stacks. By the window alone, a closed
   line kept its six fixed columns in 580px and left its name none at all. */
@container board (max-width: 52rem) {
    .run-line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "ring what report"
            "where where where"
            "time time time";
        gap: 0.35rem 1rem;
    }

    .run-line-where strong { white-space: nowrap; }

    .run-line > .ring { grid-area: ring; }
    .run-line-what { grid-area: what; }
    .run-line-where { grid-area: where; display: flex; gap: 0.5rem; align-items: baseline; }
    .run-line-time { grid-area: time; }
    a.button-link.run-line-report { grid-area: report; }

    .run-line-closed {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: none;
    }

    .run-line-closed > .run-line-ref {
        grid-column: 1 / -1;
    }
}

/* -------------------------------------- The bar a phone navigates with */

.bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        background: var(--sidebar);
        /* 0.35 + 3.05 + 0.35 = the 3.75rem the "Mais" sheet sits on. */
        padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    }

    /* Room for the bar under whatever the page ends with. */
    .content {
        padding-bottom: 6rem;
    }

    .bottom-link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-height: 3.05rem;
        padding: 0.3rem 0.25rem;
        border-radius: var(--radius-pill);
        color: var(--sidebar-ink);
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }

    .bottom-link::-webkit-details-marker {
        display: none;
    }

    .bottom-link .icon {
        color: var(--sidebar-muted);
    }

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

    /* Where you are: a lit capsule with its icon in rust. "Mais" is lit
       while it is open, and while the page is one of those inside it. */
    .bottom-link.active,
    .bottom-more[open] > summary,
    .bottom-more:has(.more-link.active) > summary {
        color: var(--sidebar-ink-strong);
        background: var(--sidebar-active);
    }

    .bottom-link.active .icon,
    .bottom-more[open] > summary .icon,
    .bottom-more:has(.more-link.active) > summary .icon {
        color: var(--sidebar-accent);
    }

    /* The rest of the menu, over the page and up from the bar. */
    .more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        padding: 0.5rem 1rem 1rem;
        background: var(--surface);
        border-top: 2px solid var(--rule);
        box-shadow: 0 -12px 0 rgba(26, 25, 22, 0.08);
    }

    .more-section {
        margin-top: 0.9rem;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }

    .more-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
        border-bottom: 1px solid var(--line);
    }

    a.more-link {
        display: flex;
        align-items: center;
        min-height: 2.9rem;
        color: var(--ink);
        font-size: 1.05rem;
        font-weight: 500;
        text-decoration: none;
    }

    a.more-link.active {
        color: var(--accent);
        font-weight: 600;
    }

    .more-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .more-tools > button,
    .more-tools > a.button-link {
        height: 2.9rem;
        justify-content: center;
    }

    .more-languages {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: 0.6rem;
    }

    .more-languages > a {
        display: grid;
        place-items: center;
        min-height: 2.75rem;
        border: 1px solid var(--line-strong);
        color: var(--ink-soft);
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-decoration: none;
    }

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

    /* The form a list opens covers the screen, and so the bar under it. */
    .side-panel {
        width: 100vw;
        border-left: 0;
    }
}

/* --------------------------------------------- A finger, not a pointer */

/* T6 -- on a screen that is touched, everything that is pressed is at least
   44 px tall: row actions were 30, the top bar's buttons 32, the ticks 13.
   Only there: with a mouse the tables keep the density they have. */
@media (pointer: coarse) {
    button,
    a.button-link,
    .row-actions > a,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .segmented > a,
    label.segment,
    .guide-button {
        min-height: 2.75rem;
    }

    button.link,
    button.small,
    button.tab,
    button.quiet-danger,
    button.theme-toggle,
    select.state-select {
        height: auto;
        min-height: 2.75rem;
    }

    button.theme-toggle,
    button.side-close,
    button.icon-button {
        min-width: 2.75rem;
    }

    label.segment,
    .segmented > a {
        display: inline-flex;
        align-items: center;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* A tick with its words is pressed anywhere along the line. */
    label.toggle,
    .toolbar label.toggle,
    label.choice,
    label.choice-line,
    label.form-toggle,
    .side-check,
    .pick-part-main {
        min-height: 2.75rem;
        align-items: center;
    }

    .nav-link,
    .lang-switch > summary,
    .sign-out,
    .plan-button {
        min-height: 2.75rem;
    }

    td.row-actions {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
}

/* ----------------------------------------- Pages that share a menu entry */

/* The tabs across the top of the pages that share one place on the menu
   (SectionNav.razor): the three lists under "Catálogo", the company's own
   pages under "Definições". Set like the section names of the menu and
   underlined in ink, so they are not taken for the tabs inside a page --
   those change what the page lists, these lead to another page. */
.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    margin: -0.9rem 0 1.6rem;
    border-bottom: 1px solid var(--line);
}

a.section-link {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0 0.6rem;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    color: var(--ink-faint);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

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

a.section-link-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

@media (max-width: 900px) {
    .section-nav {
        gap: 0 1.25rem;
        margin-top: -0.25rem;
    }
}

@media (pointer: coarse) {
    a.section-link {
        min-height: 2.75rem;
    }
}

/* ------------------------------------------------------- A minha conta */

/* The name at the top of the screen is the way to the person's own account. */
a.user {
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    /* Beside an open guide the bar is short: the name stays on one line and
       the company's, which can be cut, gives way. */
    white-space: nowrap;
}

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

.account-column {
    display: grid;
    gap: 1.5rem;
}

.account-column > .panel {
    margin: 0;
}

.account-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0;
    font-size: 0.925rem;
}

.account-facts dt {
    color: var(--ink-faint);
}

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

.account-device {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin-top: 1rem;
}

.account-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.account-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.account-languages > a {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    font-size: 0.9rem;
    text-decoration: none;
}

.account-languages > a:hover {
    border-color: var(--ink-faint);
    color: var(--ink);
    text-decoration: none;
}

.account-languages > a.active {
    border-color: var(--ink);
    color: var(--ink);
    font-weight: 600;
}

.account-password {
    max-width: 24rem;
}

/* "A minha conta" has a line to itself in "Mais", above the theme and the
   way out. */
.more-tools > a[href="/conta"] {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------ Password fields */

/* The eye that shows what was typed (ShowPassword.razor), inside the field
   at its right edge. */
.password-field {
    position: relative;
    display: block;
    margin-top: 0.35rem;
}

.password-field > input {
    margin-top: 0;
    padding-right: 2.9rem;
}

button.password-show {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 2.6rem;
    height: auto;
    min-height: 0;
    padding: 0;
    color: var(--ink-faint);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
}

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

.password-eye-off,
button.password-show[aria-pressed="true"] .password-eye {
    display: none;
}

button.password-show[aria-pressed="true"] .password-eye-off {
    display: inline-block;
}

/* Said from the start, under the field, and not only once it has failed. */
.auth-card label > .field-hint {
    margin-bottom: 0.1rem;
}

/* -------------------------------------------- The rest of the review */

/* Where a page is, above its title, when it was reached from a list: the
   way back that was only at the foot of the page. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.4rem 0 0.9rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.crumbs a {
    color: var(--ink-soft);
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.crumbs [aria-current] {
    color: var(--ink);
}

/* Início: each line of "Próximas entregas" opens its request. */
a.due {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 9rem;
    align-items: center;
    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.due:hover {
    background: var(--surface-hover);
    text-decoration: none;
}

.note-ok {
    color: var(--success);
    font-weight: 600;
}

.failure-count {
    font-family: var(--font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    a.due {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* A code that opens what it names: a request's, in its own row. Looks like
   the code it always was, underlined to say it can be pressed. */
button.code-link {
    display: inline;
    height: auto;
    padding: 0;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}

button.code-link:hover {
    background: transparent;
    text-decoration-color: var(--ink);
}

@media (pointer: coarse) {
    button.code-link {
        min-height: 2.75rem;
    }

    /* Links set in one line of small capitals, 19 px tall: the finger gets
       the height the eye does not need, without the line moving. */
    a.panel-link,
    a.company,
    a.row-link {
        padding-block: 0.8rem;
        margin-block: -0.8rem;
    }
}

/* The Painel has five indicators: five across where there is room, three
   and two below that, and never a blank sixth that looks like one still
   loading. */
@media (max-width: 719.98px) {
    .stat-grid-five > .stat:last-child {
        grid-column: 1 / -1;
    }
}

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

    .stat-grid-five > .stat {
        grid-column: span 2;
    }

    .stat-grid-five > .stat:nth-child(n + 4) {
        grid-column: span 3;
    }
}

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

    .stat-grid-five > .stat,
    .stat-grid-five > .stat:nth-child(n + 4) {
        grid-column: auto;
    }
}

.stat-delta-none {
    font-weight: 400;
    color: var(--ink-faint);
}

/* Equipa: the chart has the page to itself until a role or a person is
   chosen, and the panel that opens then can be closed again. */
.team-layout.team-layout-wide {
    grid-template-columns: minmax(0, 1fr);
}

button.team-side-close {
    float: right;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.35rem -0.35rem 0 0.5rem;
}

label.permission .field-hint {
    margin-top: 0.1rem;
}

/* Where to write to, under a sentence that says "peça ao suporte". */
.support-line {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-faint);
}

/* Empresa: a logo chosen and not saved yet. */
.company-preview.company-preview-pending {
    border-color: var(--signal);
}

.company-logo-confirm {
    margin-top: 0.6rem;
}

/* Aceitar convite: whose invitation, and to which address. */
.invite-from {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--rule);
    background: var(--surface-2);
    font-size: 0.925rem;
    overflow-wrap: anywhere;
}

/* Etapas: the order the shop does them in, with the arrows that change it. */
th.col-order,
td.col-order {
    width: 1%;
    white-space: nowrap;
}

.order-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.order-number {
    min-width: 1.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.order-cell button.icon-button {
    width: 2rem;
    height: 2rem;
}

tr[draggable="true"] {
    cursor: grab;
}

table.data tr.row-drop > td {
    box-shadow: inset 0 2px 0 var(--signal);
}

@media (pointer: coarse) {
    .order-cell button.icon-button {
        width: 2.75rem;
        height: 2.75rem;
    }
}