/*
    The client portal wears the Formuly site: the same wordmark, type, colours and pills as the
    public site (Home, Sep 2026 brand), quieter, because clients read and answer here rather than
    browse. Tokens below are the site's own; the portal adds nothing to the palette. A firm with a
    brand of its own replaces them on its client portal pages (the last section, .firm-brand).

    One light look, as the site is. Type: Special Gothic (sans) and a serif behind one token,
    --serif, so the site's serif can replace Newsreader by changing one line. Both fonts are
    self-hosted under /fonts (SIL Open Font License, licences beside them): the CSP is 'self'.
*/

@font-face {
    font-family: "Special Gothic";
    src: url("../fonts/SpecialGothic-Variable.ttf") format("truetype");
    font-weight: 400 700;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Variable.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/Newsreader-Italic-Variable.ttf") format("truetype");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    /* The site's palette. */
    --white:         #FFFFFF;
    --half-grey:     #F0F2F3;
    --grey:          #E1E6E8;
    --ink:           #111111;
    --ink-2:         #4A4E55;   /* secondary text: 8.3:1 on white, 7.6:1 on half-grey */
    --ink-3:         #8A9096;   /* rules and fills only: 3.2:1, too light for text */
    --yellow:        #E6FF02;
    --yellow-tint:   #F6FFB0;
    --phthalo:       #00514A;
    --phthalo-deep:  #00342F;
    --best:          #00AE9E;   /* a dot or a fill, never text */
    --best-ink:      #00756A;   /* the same on white as text: 5.3:1 */
    --sev-high:      #FF3C50;
    --sev-high-ink:  #C4142B;   /* 6.0:1 on white */
    --sev-mid:       #D33FE1;
    --sev-mid-ink:   #9C1FA9;   /* 6.4:1 on white */
    --sev-low:       #8A9096;
    --focus:         #0EB2FC;

    /* Roles. */
    --ground:        var(--white);
    --panel:         var(--half-grey);
    --card:          var(--white);
    --muted:         var(--ink-2);
    --stroke:        var(--grey);
    --stroke-strong: rgba(17, 17, 17, 0.22);
    --fill:          var(--half-grey);
    --accent:        var(--phthalo);
    --brand-wordmark: var(--ink);

    --sans:  "Special Gothic", "Archivo", "Helvetica Neue", Arial, sans-serif;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mono:  "Cascadia Mono", Consolas, ui-monospace, monospace;

    --fs-title:   34px;
    --fs-body:    15px;
    --fs-caption: 13px;
    --fs-small:   12px;

    --radius:      12px;
    --radius-ctl:  10px;
    --radius-pill: 999px;
    --gutter:      clamp(12px, 1.45vw, 20px);

    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-stretch: 95%;
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--phthalo-deep); }

/* The site's focus blue is too light on white and on yellow to see (2.4:1), so the ring is ink. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.entry.mine :focus-visible { outline-color: var(--yellow); }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-line {
    margin: 0;
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- shell */

.wordmark-svg {
    color: var(--brand-wordmark);
    width: auto;
    display: block;
}

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-inline: var(--gutter);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--half-grey);
}

.topbar .wordmark { display: block; flex: none; }
.topbar .wordmark .wordmark-svg { height: 26px; }

.topbar .context {
    color: var(--muted);
    font-size: 14px;
    padding-left: 18px;
    border-left: 1px solid var(--grey);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.topnav a.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.topnav a.nav-item:hover { background: var(--half-grey); color: var(--ink); }

.topnav a.nav-item.on {
    background: var(--ink);
    color: var(--white);
    font-weight: 700;
}

.who {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    font-size: var(--fs-caption);
    color: var(--muted);
}

.who .org { color: var(--ink); font-weight: 700; }

.who a {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    color: var(--ink);
    font-weight: 700;
    font-size: var(--fs-caption);
    text-decoration: none;
}

.who a:hover { background: var(--ink); color: var(--white); }

.content { padding: 24px 0 64px; min-width: 0; flex: 1; }
.col { max-width: 760px; margin: 0 auto; }

/* A verification, and a task with its thread, use the wider page. */
.col.wide { max-width: 1160px; }

.reading { padding-inline: var(--gutter); }

@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; gap: 8px 14px; padding: 10px 0; }
    .topnav { order: 3; flex-basis: 100%; }
    .who .person { display: none; }
    .topbar .context { display: none; }
    .content { padding: 16px 0 48px; }
}

/* ------------------------------------------------------------- headings */

h1 {
    font-size: var(--fs-title);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 0;
    text-wrap: balance;
}

h2 {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
}

.lede {
    margin: 8px 0 6px;
    color: var(--muted);
    font-size: var(--fs-body);
    max-width: 66ch;
}

.label {
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 26px 0 10px;
}

/* The site's hero: a yellow panel holding the page's headline. */
.hero {
    background: var(--yellow);
    border-radius: var(--radius);
    padding: 30px 32px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.hero .eyebrow,
.hero .eyebrow a { color: var(--ink); }
.hero .lede { color: #1D1F22; }
.hero .serif-line { color: var(--ink); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero .actions .button { margin-top: 0; }
.hero .button.secondary { border-color: var(--ink); color: var(--ink); }

@media (max-width: 760px) {
    .hero { padding: 22px 20px 20px; }
    :root { --fs-title: 28px; }
}

/* ---------------------------------------------------------------- cards */

.card {
    background: var(--panel);
    border: 0;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 8px;
}

a.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.card:hover { background: var(--grey); color: inherit; }

.card-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.card-top .name {
    font-weight: 700;
    letter-spacing: -0.02em;
    flex: 1;
    min-width: 0;
}

.card-sub {
    color: var(--muted);
    font-size: var(--fs-caption);
    margin-top: 3px;
}

.num {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: var(--fs-caption);
    white-space: nowrap;
}

.summary { margin-top: 8px; }

/* ---------------------------------------------------------- chips, pills */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chip {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    background: var(--white);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--stroke-strong);
    white-space: nowrap;
}

/* Something waiting on the reader: the site's yellow. */
.chip.task {
    background: var(--yellow);
    box-shadow: none;
    color: var(--ink);
}

.chip.alarm {
    color: var(--sev-high-ink);
    box-shadow: inset 0 0 0 1px var(--sev-high-ink);
}

.chip.muted {
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--stroke);
}

/* A status: a dot in its colour, then the word in ink. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-caption);
    white-space: nowrap;
    color: var(--ink);
}

.pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sev-low);
    flex: none;
}

.pill-completed::before { background: var(--best); }
.pill-running::before,
.pill-inprogress::before { background: var(--focus); }
.pill-failed::before,
.pill-cancelled::before { background: var(--sev-high); }
.pill-awaitingapproval::before,
.pill-pending::before { background: var(--sev-mid); }

/* ---------------------------------------------------------------- stats */

.stats { display: flex; }

.stat {
    flex: 1;
    padding: 2px 0;
    position: relative;
}

.stat + .stat {
    padding-left: 18px;
    margin-left: 18px;
}

.stat + .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    border-left: 1px solid var(--stroke-strong);
}

.stat .n {
    display: block;
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.stat .k {
    color: var(--muted);
    font-size: var(--fs-caption);
}

/* ---------------------------------------------------------------- tables */

/* A wide table scrolls inside its own box; the page never scrolls sideways. */
.table-scroll {
    position: relative;
    overflow-x: auto;
    margin: 10px 0 8px;
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-caption);
}

table.data th,
table.data td {
    text-align: left;
    vertical-align: top;
    padding: 9px 14px;
    border-bottom: 1px solid var(--stroke);
}

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

table.data thead th {
    color: var(--muted);
    font-weight: 700;
    background: var(--panel);
    white-space: nowrap;
}

table.data .n {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.data .k,
table.data .group .k {
    color: var(--muted);
    font-weight: 400;
}

table.data .group th {
    background: var(--panel);
    color: var(--ink);
    font-weight: 700;
    border-bottom: 1px solid var(--stroke);
}

table.data .group .k { margin-left: 8px; }

table.findings { min-width: 560px; }
table.findings td.cell { font-family: var(--mono); white-space: nowrap; width: 110px; }
table.findings td:nth-child(n+3) { white-space: nowrap; width: 1%; }

/* Severity is a shape and the word: ▲ High, ◆ Medium, ● Low. The colour only helps find it. */
.sev {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.sev .glyph {
    font-size: 10px;
    line-height: 1;
    color: var(--sev-low);
}

.sev-high .glyph { color: var(--sev-high); }
.sev-medium .glyph { color: var(--sev-mid); }

.chip.cat { white-space: nowrap; }

.chip.cat-error {
    color: var(--sev-high-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sev-high-ink) 45%, transparent);
    background: color-mix(in srgb, var(--sev-high) 8%, var(--white));
}

.chip.cat-practice {
    color: var(--muted);
    box-shadow: inset 0 0 0 1px var(--stroke-strong);
    background: var(--panel);
}

.unplaced { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------- verification */

.masthead { margin-bottom: 12px; }

.eyebrow {
    margin: 0 0 4px;
    font-size: var(--fs-caption);
    color: var(--muted);
}

.eyebrow a { color: var(--muted); }

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 14px 0 0;
    font-size: var(--fs-caption);
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.facts dd .why { display: block; max-width: 40ch; color: var(--muted); font-weight: 400; }

.section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--stroke);
}

.section h2 {
    font-size: 21px;
    margin: 0 0 12px;
}

.section h3 {
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 20px 0 0;
}

.section .stats { margin: 6px 0 12px; }

.prose {
    margin: 8px 0;
    max-width: 72ch;
}

.section .notice { margin: 10px 0; max-width: 72ch; }

.lineage {
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

.lineage li {
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--grey);
}

.lineage .step {
    display: block;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.lineage .term { font-size: var(--fs-caption); margin-top: 2px; }
.lineage .term .k { color: var(--muted); }

/* Four counts in four units: each bar is its own, scaled to the longest of the four. */
.countbars {
    list-style: none;
    margin: 6px 0 14px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 20px;
}

.countbars li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

.countbars .n {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.countbars .k { color: var(--muted); font-size: var(--fs-caption); }

.countbars svg {
    flex-basis: 100%;
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 6px;
}

.countbars .track { fill: var(--half-grey); }
.countbars .fill { fill: var(--ink-3); }
.countbars li:last-child .fill { fill: var(--phthalo); }

.compare-line {
    margin: 0 0 12px;
    max-width: 72ch;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.compare-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.hists {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin: 14px 0 6px;
}

.hist { margin: 0; min-width: 0; max-width: 100%; overflow-x: auto; }

.hist figcaption {
    font-size: var(--fs-caption);
    font-weight: 700;
    margin-bottom: 6px;
}

.hist figcaption .k { color: var(--muted); font-weight: 400; margin-left: 4px; }

.hist ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.hist li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 34px;
    max-width: 52px;
}

.hist .c,
.hist .l {
    font-size: var(--fs-small);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hist svg { display: block; width: 16px; height: 65px; margin: 2px 0 3px; }
.hist .fill { fill: var(--phthalo); opacity: 0.75; }
.hist .base { fill: var(--stroke-strong); }
.hist .tiny { fill: var(--muted); }

table.data td.heat { font-weight: 700; }
.heat-e1 { background: color-mix(in srgb, var(--sev-high) 12%, transparent); }
.heat-e2 { background: color-mix(in srgb, var(--sev-high) 22%, transparent); }
.heat-e3 { background: color-mix(in srgb, var(--sev-high) 33%, transparent); }
.heat-e4 { background: color-mix(in srgb, var(--sev-high) 44%, transparent); }
.heat-p1 { background: color-mix(in srgb, var(--sev-low) 14%, transparent); }
.heat-p2 { background: color-mix(in srgb, var(--sev-low) 25%, transparent); }
.heat-p3 { background: color-mix(in srgb, var(--sev-low) 36%, transparent); }
.heat-p4 { background: color-mix(in srgb, var(--sev-low) 47%, transparent); }

.table-scroll.fit { width: fit-content; max-width: 100%; }
table.bysheet { min-width: 420px; }

.limits { margin: 0; max-width: 72ch; }
.limits dt { font-weight: 700; margin-top: 12px; }
.limits dt:first-child { margin-top: 0; }
.limits dd { margin: 2px 0 0; color: var(--muted); }

.back { margin-top: 32px; }

@media (max-width: 760px) {
    .section .stats { flex-wrap: wrap; row-gap: 8px; }
    .section .stat { flex: 1 1 40%; }
    .section .stat:nth-child(odd) { padding-left: 0; margin-left: 0; }
    .section .stat:nth-child(odd)::before { display: none; }
    table.findings { min-width: 0; }
    table.findings td.cell { width: auto; }
    table.bysheet { min-width: 0; }
    .countbars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table.data th, table.data td { padding: 8px 10px; }
}

/* A verification is often printed: one plain column, no navigation, no yellow. */
@media print {
    body { font-size: 10pt; }
    .shell { display: block; padding: 0; }
    .topbar, .back, .eyebrow a { display: none; }
    .content { padding: 0; }
    .col, .col.wide { max-width: none; }
    .hero { background: none; padding: 0; }
    .table-scroll { overflow: visible; border-radius: 0; }
    table.findings { min-width: 0; }
    table.data tr, .lineage li, .limits dd, .countbars, .hist { break-inside: avoid; }
    .heat-e1, .heat-e2, .heat-e3, .heat-e4, .heat-p1, .heat-p2, .heat-p3, .heat-p4, .chip.cat {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    table.data thead { display: table-header-group; }
    .section { break-before: auto; }
    .section h2, .section h3 { break-after: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------- notices, empty */

.foot {
    color: var(--muted);
    font-size: var(--fs-caption);
    margin: 4px 0 0;
    max-width: 66ch;
}

.empty,
.notice {
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: var(--fs-caption);
}

.empty { background: var(--panel); color: var(--muted); }
.notice { background: var(--yellow-tint); color: var(--ink); }

/* --------------------------------------------------------- sign-in page */

/* Signed out: the wordmark above one yellow panel, its card centred in it. */
.signin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--gutter) var(--gutter);
}

.signin-top {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--half-grey);
}

.signin-top .wordmark-svg { height: 28px; }

.signin-panel {
    flex: 1;
    background: var(--yellow);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.signin-card {
    max-width: 520px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The wordmark sits above the panel; inside it, a card's own copy is not drawn twice. */
.signin-card > .wordmark-svg { display: none; }
.signin-card h1 { font-size: 44px; letter-spacing: -0.045em; margin-bottom: 4px; }
.signin-card .serif-line { font-size: 26px; margin-bottom: 8px; }
.signin-card .lede { color: #1D1F22; margin-inline: auto; }
.signin-card form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.signin-card .field { width: 100%; max-width: 360px; text-align: left; }
.signin-card .foot { color: #1D1F22; margin-inline: auto; }

.signin-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 6px;
    color: var(--muted);
    font-size: var(--fs-small);
}

@media (max-width: 760px) {
    .signin-card h1 { font-size: 34px; }
    .signin-card .serif-line { font-size: 22px; }
}

/* ------------------------------------------------------------- controls */

/* The site's pill: yellow for the one thing to do, black or an outline for the rest. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--yellow);
    color: var(--ink);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-family: inherit;
    font-stretch: 95%;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    margin-top: 16px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.button:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(140, 160, 0, 0.6); }

/* On a yellow panel the yellow pill would vanish: it goes black there. */
.hero .button:not(.secondary),
.signin-panel .button:not(.secondary) {
    background: var(--ink);
    color: var(--white);
}

.hero .button:not(.secondary):hover,
.signin-panel .button:not(.secondary):hover { color: var(--white); box-shadow: 0 6px 18px -8px rgba(17, 17, 17, 0.6); }

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

.button.secondary:hover { background: var(--ink); color: var(--white); box-shadow: none; }

.button.danger {
    background: transparent;
    color: var(--sev-high-ink);
    border-color: var(--sev-high-ink);
}

.button.danger:hover { background: var(--sev-high-ink); color: var(--white); box-shadow: none; }

.button.small {
    margin-top: 0;
    padding: 5px 13px;
    font-size: var(--fs-caption);
}

button.button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .button { transition: none; }
    .button:hover { transform: none; }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.field label {
    font-size: var(--fs-caption);
    font-weight: 700;
}

.field input,
.field textarea,
.field select {
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--radius-ctl);
    padding: 10px 12px;
    width: 100%;
    min-width: 0;
}

.field input::placeholder,
.field textarea::placeholder { color: #6B7077; } /* 5.0:1 on white */

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: var(--ink);
}

/* Six digits, read at a glance and typed without looking back. code-boxes.js turns it into six boxes. */
.field input.code {
    font-family: var(--mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    max-width: 14ch;
}

.code-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.code-boxes input {
    width: 52px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-ctl);
    background: var(--white);
    box-shadow: 0 0 0 1.5px var(--ink);
    text-align: center;
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
}

.code-boxes input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.code-boxes[aria-invalid="true"] input { box-shadow: 0 0 0 2px var(--sev-high-ink); }

@media (max-width: 420px) {
    .code-boxes { gap: 6px; }
    .code-boxes input { width: 42px; height: 52px; font-size: 22px; }
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--sev-high-ink); box-shadow: inset 0 0 0 1px var(--sev-high-ink); }

.field-error {
    margin: 0;
    color: var(--sev-high-ink);
    font-size: var(--fs-caption);
    font-weight: 700;
}

.field input.share-url {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    background: var(--panel);
}

.field textarea { resize: vertical; }
.field input[type="file"] { border: 0; padding: 0; background: transparent; }

/* A file field as a drop zone (_FileDrop, file-drop.js): a dashed panel to drag a file onto or click,
   then the chosen file as a chip with Remove. Without the script, the browser's input sits in the zone. */
.file-drop { --drop-tint: var(--yellow-tint); --drop-edge: var(--ink); }

.file-drop .file-drop-zone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--white);
    border: 1.5px dashed var(--stroke-strong);
    border-radius: var(--radius-ctl);
    color: var(--muted);
    font-size: var(--fs-body);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-drop-icon { flex: none; color: var(--ink); }
.file-drop-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.file-drop-title { color: var(--ink); font-weight: 700; font-size: var(--fs-caption); }
.file-drop-prompt { color: var(--ink); }
.file-drop-choose { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.file-drop-hint { font-size: var(--fs-small); color: var(--muted); }

.file-drop-zone:hover,
.file-drop.is-over .file-drop-zone { border-color: var(--drop-edge); background: var(--drop-tint); }
.file-drop.is-over .file-drop-zone { border-style: solid; }
.file-drop.is-invalid .file-drop-zone { border-color: var(--sev-high-ink); }

/* With the script, the input is out of sight but still the field: focusable, posted, labelled. */
.file-drop.is-enhanced .file-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.file-drop.is-enhanced { position: relative; }
.file-drop.is-enhanced .file-drop-input:focus-visible + .file-drop-zone { outline: 2px solid var(--ink); outline-offset: 2px; }
.file-drop:not(.is-enhanced) .file-drop-prompt { display: none; }
.file-drop.is-enhanced.has-file .file-drop-zone { padding-block: 10px; }
.file-drop.is-enhanced.has-file .file-drop-prompt { display: none; }

.file-drop-chosen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 6px 8px 6px 12px;
    background: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--stroke-strong);
    font-size: var(--fs-caption);
}

.file-drop-chosen[hidden] { display: none; }
.file-drop-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-drop-size { color: var(--muted); white-space: nowrap; }

.file-drop-clear {
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--stroke);
    padding: 2px 4px 2px 10px;
    cursor: pointer;
}

.file-drop-clear:hover { color: var(--sev-high-ink); }
.file-drop-error[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .file-drop-zone { transition: none; }
}
.field label .k { color: var(--muted); font-weight: 400; }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: 0 14px; }

.choices {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.choices legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--ink);
}

.choice {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
}

.choice input { accent-color: var(--ink); margin: 0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- sharing */

.signin-card.gate { min-width: 0; overflow-wrap: anywhere; }
.signin-card.gate .stack .button { margin-top: 18px; }
.signin-card.gate .again { margin-top: 8px; }
.signin-card.gate .again .button { margin-top: 0; }

.signin-card .why {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(17, 17, 17, 0.18);
    color: #1D1F22;
    font-size: var(--fs-caption);
    max-width: 44ch;
}

.share {
    margin-top: 24px;
    background: var(--panel);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.share h2 { margin: 0 0 8px; }
.share p { margin: 8px 0; max-width: 72ch; }
.share .field { margin-top: 10px; max-width: 72ch; }
.share .button { margin-top: 12px; }
.share .foot { margin-top: 12px; }

table.links { min-width: 680px; }
table.links thead th { white-space: normal; vertical-align: bottom; }
table.links td:nth-child(5) { white-space: nowrap; }
table.data .why { display: block; color: var(--muted); }

.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.row-actions form { margin: 0; }

.access-log { margin-top: 28px; }
.access-log h2 { margin: 0 0 8px; }

@media print {
    .share { display: none; }
}

.mono { font-family: var(--mono); }

.labs-switch { margin: 0; }
.labs-switch .button { margin-top: 0; }

/* --------------------------------------------------------------- tasks */

/* The list: a panel of rows, each one link. */
.task-group {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 6px;
    margin-top: 14px;
}

.task-group .label { margin: 10px 14px 8px; }

ul.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

ul.tasks .card {
    background: var(--white);
    margin: 0;
    border-radius: calc(var(--radius) - 4px);
    padding: 14px 18px;
}

ul.tasks a.card:hover { background: #FAFBFB; }
ul.tasks .card-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 5px; }
.stage.yours { color: var(--ink); font-weight: 700; }

.stage.yours::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--best);
    vertical-align: 1px;
}

/* One task: the headline, then the thread beside what it is about. */
.task-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.task-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.task-aside {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
    position: sticky;
    top: 84px;
}

.task-aside .facts { flex-direction: column; gap: 14px; margin: 0; font-size: var(--fs-body); }
.task-aside .facts dt { font-size: var(--fs-caption); }

@media (max-width: 900px) {
    .task-layout { grid-template-columns: minmax(0, 1fr); }
    .task-aside { position: static; }
}

.task-details { white-space: pre-line; margin: 4px 0 0; max-width: 72ch; }

.thread-panel {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
}

.thread-panel h2 { margin-bottom: 14px; }

/* The thread is a conversation: the reader's words on the right in black, everyone else's on the
   left in white, and moves that carry no words as a quiet line between them. */
ol.thread {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entry {
    width: 80%;
    align-self: flex-start;
    background: var(--white);
    border-radius: var(--radius) var(--radius) var(--radius) 4px;
    padding: 12px 16px;
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06);
}

.entry.mine {
    align-self: flex-end;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius) var(--radius) 4px var(--radius);
    box-shadow: none;
}

.entry.mine .entry-head { color: #C9CDD2; }
.entry.mine .entry-head strong { color: var(--white); }
.entry.mine a { color: var(--yellow); }
.entry.mine ul.files .k { color: #C9CDD2; }

/* Something read for the first time: the site's yellow ring. */
.entry.unread { box-shadow: 0 0 0 2px var(--yellow); }

/* A move with no words: the line between bubbles. */
.entry.event {
    width: 100%;
    align-self: center;
    background: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

.entry.event .entry-head { color: var(--muted); }
.entry.event .entry-head strong { color: var(--ink); font-weight: 700; }

.entry-head { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.entry-head strong { color: var(--ink); }
.entry-head .when { margin-left: 6px; white-space: nowrap; }
.entry-body { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.entry-body.muted { color: inherit; opacity: 0.75; font-style: italic; font-family: var(--serif); }

/* A move rolled back because the workbook wasn't saved: kept as history, struck through. */
.entry.rolled-back .entry-head { text-decoration: line-through; }
.not-saved { margin: 4px 0 0; font-size: var(--fs-caption); font-weight: 700; color: inherit; }

ul.files { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--fs-caption); }
ul.files li { margin-top: 2px; overflow-wrap: anywhere; }
ul.files .k { color: var(--muted); margin-left: 4px; }

.composer,
form.raise {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 20px;
}

form.raise { margin-top: 4px; }
.composer h2 { margin-bottom: 2px; }
.composer .field:first-of-type,
form.raise .choices { margin-top: 8px; }

.composer textarea { background: var(--white); }

.moves { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.moves .button { margin-top: 0; }
.moves-note { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--ink); background: var(--yellow-tint); border-radius: var(--radius-ctl); padding: 8px 12px; }

/* What arrived while the page was open (task-live.js): a yellow mark that fades once seen. */
.new-mark {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: var(--radius-pill);
    background: var(--yellow);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 700;
    vertical-align: 1px;
    transition: opacity 1.2s ease;
}

.entry.is-new { box-shadow: 0 0 0 2px var(--yellow); }
.entry.mine.is-new { box-shadow: 0 0 0 2px var(--yellow); }
.entry.event.is-new { box-shadow: none; }
ul.tasks li.is-new .card { box-shadow: 0 0 0 2px var(--yellow); }
.is-seen .new-mark { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .new-mark { transition: none; }
}

table.values { min-width: 420px; }

@media (max-width: 760px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .entry { width: 92%; }
}

@media print {
    .composer { display: none; }
    .entry, .entry.mine { width: 100%; background: none; color: inherit; box-shadow: none; }
}

/* -------------------------------------------------------- a firm's brand */

/*
    A client portal page for a firm with a brand of its own (PortalBrandLook): the firm's colours,
    typeface and corners over this look, its logo where the wordmark was, and "Powered by Formuly" in
    the footer. The page's <style> sets the tokens; every one has a readable partner (--on-*), so
    nothing below picks a text colour for itself.
*/

.firm-brand { --accent: var(--brand-link); }

.firm-brand body { font-stretch: 100%; }

/* Headings take the brand's heading face when it has one (serif headings over a sans body). */
.firm-brand h1,
.firm-brand h2 { font-family: var(--heading, var(--sans)); letter-spacing: -0.015em; }
.firm-brand a:hover { color: var(--brand-deep); }
.firm-brand .entry.mine :focus-visible { outline-color: var(--on-fill); }

.firm-brand .shell::before {
    content: "";
    display: block;
    height: 6px;
    margin-inline: calc(var(--gutter) * -1);
    background: var(--brand);
}

.firm-brand .firm-logo { display: block; height: 44px; width: auto; max-width: 260px; object-fit: contain; }
.firm-brand .firm-name { font-weight: 700; font-size: 20px; color: var(--brand-deep); }
.firm-brand .topbar { min-height: 76px; }
.firm-brand .topbar .context { color: var(--brand-link); font-weight: 700; }

.firm-brand .hero { background: var(--brand-deep); color: var(--on-deep); }
.firm-brand .hero h1,
.firm-brand .hero .eyebrow,
.firm-brand .hero .eyebrow a,
.firm-brand .hero .lede,
.firm-brand .hero .serif-line { color: var(--on-deep); }
.firm-brand .hero .lede { opacity: 0.9; }

.firm-brand .button { background: var(--brand-fill); color: var(--on-fill); }
.firm-brand .button:hover { color: var(--on-fill); box-shadow: 0 6px 18px -8px rgba(17, 17, 17, 0.45); }
.firm-brand .button.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.firm-brand .button.secondary:hover { background: var(--ink); color: var(--white); }

/* On the deep panel, the one thing to do is a white button in the deep colour. */
.firm-brand .hero .button:not(.secondary) { background: var(--white); color: var(--brand-deep); }
.firm-brand .hero .button:not(.secondary):hover { color: var(--brand-deep); }
.firm-brand .hero .button.secondary { border-color: var(--on-deep); color: var(--on-deep); }
.firm-brand .hero .button.secondary:hover { background: var(--on-deep); color: var(--brand-deep); }

.firm-brand .chip.task,
.firm-brand .new-mark { background: var(--brand-fill); color: var(--on-fill); }

.firm-brand .entry.mine { background: var(--brand-fill); color: var(--on-fill); }
.firm-brand .entry.mine .entry-head,
.firm-brand .entry.mine .entry-head strong,
.firm-brand .entry.mine ul.files .k,
.firm-brand .entry.mine a { color: var(--on-fill); }
.firm-brand .entry.mine a { text-decoration: underline; }

.firm-brand .entry.unread,
.firm-brand .entry.is-new,
.firm-brand .entry.mine.is-new,
.firm-brand ul.tasks li.is-new .card { box-shadow: 0 0 0 2px var(--brand); }
.firm-brand .entry.event.is-new { box-shadow: none; }

.firm-brand .notice,
.firm-brand .moves-note { background: var(--brand-tint); }
.firm-brand .file-drop { --drop-tint: var(--brand-tint); --drop-edge: var(--brand-deep); }

/* Signed out: the firm's grey panel, the gate on a white card under a bar of the firm's colour. */
.firm-brand .signin-top { border-bottom: 6px solid var(--brand); }
.firm-brand .signin-top .firm-logo { height: 48px; }
.firm-brand .signin-panel { background: var(--panel); }
.firm-brand .signin-card {
    background: var(--white);
    border-top: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 36px 32px 30px;
}
.firm-brand .signin-card h1 { color: var(--brand-deep); font-size: 34px; letter-spacing: -0.02em; }
.firm-brand .signin-card .serif-line { font-size: 20px; }
.firm-brand .signin-panel .button:not(.secondary) { background: var(--brand-fill); color: var(--on-fill); }
.firm-brand .signin-panel .button:not(.secondary):hover { color: var(--on-fill); }

.firm-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 16px var(--gutter);
    background: var(--brand-neutral);
    color: var(--on-neutral);
    font-size: var(--fs-small);
}

.signin .firm-foot { margin: 0 calc(var(--gutter) * -1) calc(var(--gutter) * -1); }
.firm-foot .powered { display: inline-flex; align-items: center; gap: 8px; opacity: 0.85; }
.firm-foot .powered-mark { height: 12px; color: var(--on-neutral); }

@media (max-width: 760px) {
    .firm-brand .firm-logo { height: 34px; max-width: 180px; }
    .firm-brand .signin-card { padding: 26px 20px 22px; }
    .firm-brand .signin-card h1 { font-size: 28px; }
}

@media print {
    .firm-foot { background: none; color: inherit; }
}