/* =====================================================================
   TaxSig portal — styles

   Deliberately quiet. This is a portal a corporate tax director opens to
   hand over a stock ledger; it should read like a professional service,
   not a product launch. Restrained palette, system fonts, generous
   whitespace, no animation beyond what confirms a click landed.

   LIGHT ONLY. The dark theme was removed 2026-08-01: this is a document
   surface -- a client reads a memo and a sworn representation here -- and
   documents are light. Two themes also meant every status tint had to work
   twice, which is how tints drift apart. `color-scheme: light` in :root
   keeps native form controls light on a dark-set OS.

   The masthead band is dark BY DESIGN and is not a leftover of the dark
   theme. It is the only dark surface, it anchors the page, and the white
   Tax / green Sig wordmark needs it.
   ===================================================================== */

:root {
    /* Cooled 2026-08-07. The warm greys read as paper, which was right when
       every screen was a document — but most screens are a WORKSPACE, and a
       workspace should sit back so the document can come forward. Cool
       neutrals do that. The document surfaces (.paper, below) stay warm
       white, so the contrast between workspace and work product is carried
       by the background rather than by decoration. */
    --bg:        #f4f6f6;
    --surface:   #ffffff;
    --border:    #e4e8e9;
    --text:      #16202a;
    --muted:     #66727d;
    --accent:    #1f4e5f;
    --accent-fg: #ffffff;
    --danger:    #8c2f24;
    --danger-bg: #fdf2f0;
    --ok:        #2c5f2d;
    --radius:    11px;
    --radius-sm: 7px;

    /* THE FAMILY MARK. --sig is earningsVibe's green, carried across so the
       products read as one house. It is used for the wordmark and for
       nothing else: the interface accent stays the sober --accent, because
       a client opening a tax memo should meet a professional service, not a
       trading app. Brand colour on the mark, restraint everywhere else. */
    --sig:       #1DD1A1;
    --ink:       #12161c;   /* the masthead band, in BOTH themes */
    --ink-text:  #ffffff;
    --ink-muted: #9aa4b0;

    /* TWO TYPOGRAPHIC WORLDS (settled 2026-08-07).
       ------------------------------------------------------------------
       The serif was global. It is now reserved, and the reservation says
       something true about the product:

         SANS  — the workspace. Dashboard, project page, request register,
                 evidence chrome, buttons, statuses, metadata. This is OUR
                 tooling, and tooling should look like tooling.
         SERIF — the work product. The partner memo, the associate memos,
                 the text of an authority. This is the FIRM's document,
                 going to a client under the firm's name.

       Same reasoning that took the vendor badge off the memo PDF the same
       day: the memo belongs to the firm; the workspace belongs to us.
       Making the whole application look like correspondence blurs a line
       worth keeping.

       System stack rather than a webfont: no third-party request, no CSP
       exception, nothing to go down. */
    --display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;

    /* Status tints. Soft fill + darker text, never a saturated block: a
       status is a label on a row, not an alert. */
    --ok-bg:      #e6f4ea;
    --ok-text:    #1d6b39;
    --wait-bg:    #fdf3d7;
    --wait-text:  #8a6100;
    --draft-bg:   #eeeeec;
    --draft-text: #6b6b66;

    /* LIGHT ONLY. Removed 2026-08-01 along with the dark theme -- this
       tells the browser to render native controls, scrollbars and form
       widgets light, so a viewer whose OS is set to dark does not get
       black form fields inside a white page. */
    color-scheme: light;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is not special behaviour -- it is a browser
   stylesheet rule, [hidden] { display: none }, and ANY author rule that
   sets display beats it. `.btn` sets display: inline-block, so every
   hidden button in this app was rendering anyway, attribute and all.
   Found 2026-07-31: the firm view was showing the client-only
   "Add New Project" button.

   !important because the whole point is to outrank whatever a component
   class sets. This must stay ABOVE the component rules that fight it. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--ui);
    -webkit-font-smoothing: antialiased;
}

.shell {
    max-width: 69rem;
    margin: 0 auto;
    padding: 1.6rem 1.25rem 4rem;
}

.shell--narrow { max-width: 26rem; padding-top: 12vh; }

/* The two-pane surfaces — memo & evidence, the internal binder. They carry
   a document beside its record, and a document needs a comfortable measure
   while the register beside it needs room to stay legible. Wider than the
   operational pages, never wider than one screen. */
.shell--wide { max-width: 81rem; }

/* ---- header ---- */
/* The masthead. A dark band in both themes — it anchors the page (every
   screen previously opened with nothing for the eye to land on) and it is
   what lets the wordmark carry white on a light-mode page. */
/* COMPACT (2026-08-07). It was a tall card at the top of every screen,
   which made the chrome the first thing you read. A masthead should anchor
   the page and then get out of the way: ~60px, and the content starts. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--ink);
    color: var(--ink-text);
    padding: 0.72rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.9rem;
}

.brand {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-text);
}

/* Tax + Sig, the house mark. */
.brand .sig { color: var(--sig); }

/* The qualifier after the mark — "— client portal", "— firm view",
   "— memo & evidence (firm)". It says which door you came through and
   which surface you are on.

   ONE LINE, ONE FACE (user ruling 2026-08-07, restated after a failed
   experiment). It inherits the mark's serif and size and differs only in
   colour, so the masthead reads as a single lockup: TaxSig — firm view.
   Setting it in sans and smaller was tried the same day and rejected: it
   made the qualifier look like chrome bolted onto the name, and it is the
   second time this line has been shrunk into near-invisibility. It is not
   a label on the mark; it is part of the line.

   The two-typographic-worlds rule still holds everywhere else — the serif
   belongs to the wordmark and to work product, and the masthead IS the
   wordmark. */
.brand span:not(.sig) { color: var(--ink-text); }

.whoami { font-size: 0.85rem; color: var(--ink-muted); text-align: right; }

/* The mark plus its qualifier is a long line now. On a phone it gives way
   before the sign-out control does. */
@media (max-width: 34rem) {
    .topbar { padding: .85rem 1rem; }
    .brand  { font-size: 1.05rem; }
}

/* On the band, the sign-out button has to sit on dark rather than on the
   page surface. */
.topbar .btn--quiet {
    background: transparent;
    color: var(--ink-muted);
    border-color: #2b3440;
}
.topbar .btn--quiet:hover { color: var(--ink-text); border-color: #3d4855; }

/* ---- cards ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* An eyebrow over a page title — PROJECT, EVIDENCE WORKSPACE, AUTHORITY OF
   RECORD, FACTS OF RECORD. It says what KIND of thing this page is before
   the title says which one, which matters on a portal where four surfaces
   look alike at a glance. */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.25rem;
}

/* WORKSPACE HEADINGS ARE SANS (2026-08-07). They were serif, which made
   every screen read as correspondence — including the ones that are plainly
   tooling. The serif now appears in three places only: the wordmark, a
   document surface (.paper), and the text of an authority. See --display. */
h1 {
    font-family: var(--ui);
    font-size: 1.62rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.22;
}

h2 {
    font-family: var(--ui);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The sign-in page mark: the wordmark, so serif, and larger. */
.brandmark {
    font-family: var(--display);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}
.brandmark .sig { color: var(--sig); }

/* The sign-in card carries the masthead's band at its head, so the mark
   gets the same dark ground it has on every other screen. Without it the
   "Tax" half is body text on white and only "Sig" carries colour — half a
   wordmark. */
.card--signin { padding: 0; overflow: hidden; }
.signin__band {
    background: var(--ink);
    color: var(--ink-text);
    padding: 1.6rem 1.5rem;
    text-align: center;
}
.signin__body { padding: 1.5rem; }

h2 { margin: 2rem 0 0.75rem; }
p  { margin: 0 0 1rem; }
.sub { color: var(--muted); font-size: 0.9rem; }

/* =====================================================================
   THE DOCUMENT SURFACE
   ---------------------------------------------------------------------
   Everything a firm AUTHORED goes here: the partner memo, an associate
   memo in the binder, the text of an authority. Serif, warm white, and a
   comfortable measure — it should read as a document sitting on the
   workspace, not as another panel of the workspace.

   This is the other half of the two-world rule in --display. The workspace
   is cool and sans; the work product is warm and serif. Nothing else needs
   to signal the difference.
   ===================================================================== */
.paper {
    background: #fffefb;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.1rem 2.4rem;
    font-family: var(--display);
    font-size: 1.02rem;
    line-height: 1.62;
}

.paper h1, .paper h2, .paper h3, .paper h4 {
    font-family: var(--display);
    letter-spacing: -0.005em;
}
.paper h2 { font-size: 1.24rem; margin: 1.6rem 0 .6rem; }
.paper h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
.paper blockquote {
    margin: 1em 0;
    padding: .3em 1.1em;
    border-left: 3px solid var(--border);
}
.paper table { border-collapse: collapse; margin: .9em 0; font-size: .94rem; }
.paper th, .paper td { border: 1px solid var(--border); padding: .32em .7em; text-align: left; }

/* ---- forms ---- */
label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 0.35rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    margin-bottom: 1rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    font: inherit;
    font-weight: 500;
    color: var(--accent-fg);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}

.btn:hover  { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn--quiet {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}

/* DANGEROUS BUT AVAILABLE — the state the palette did not have.
   ---------------------------------------------------------------------
   btn--quiet is muted grey on transparent, which is pixel-for-pixel what
   :disabled looks like. So a destructive control that was LIVE read as
   locked: found 2026-08-07, when Close and wipe had been enabled for
   minutes and looked dormant the whole time. A control that can destroy an
   engagement must never be ambiguous about whether it can be pressed.

   Outlined rather than filled: filled red is what you use for the button
   people are meant to press. This one they are meant to consider. */
.btn--danger {
    background: transparent;
    color: var(--danger);
    border-color: currentColor;
    font-weight: 600;
}
.btn--danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn--danger:disabled { color: var(--muted); border-color: var(--border); }

.btn--full { width: 100%; }

/* A download that needs a second thought. Superseded and withdrawn versions
   are kept deliberately -- the client is entitled to the full record -- but
   the control that hands one over should not look identical to the one that
   hands over the memo that governs. Solid red, and paired with a
   confirmation. */
.btn--quiet.btn--danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

.btn--quiet.btn--danger:hover { background: var(--danger); }

/* And its opposite: the version that governs. Same soft fill and darker text
   as the PROVIDED pill, so "this is the one in force" reads the same way
   wherever it appears on the page. Green and red are the whole vocabulary
   here -- rely on this one, do not rely on that one -- and a plain grey
   button in between would be a third state that does not exist. */
.btn--quiet.btn--ok {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-bg);
}

.btn--quiet.btn--ok:hover { background: var(--ok-bg); }

/* ---- messages ---- */
.error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid currentColor;
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

/* ---- engagement list ---- */
.rows { display: flex; flex-direction: column; gap: 0.6rem; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
}

.row:hover { border-color: var(--accent); }

.row__name { font-weight: 500; }
.row__meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

.note {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 0.4rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--border);
}

/* ---- dropzone ----
   The intake's file step. A <label> wrapping the real <input type="file">:
   clicking anywhere in the zone opens the picker, the input stays in the
   tab order, and screen readers still meet an ordinary file field. The
   input is visually hidden rather than display:none, which would take it
   out of the accessibility tree along with the pixels. */
.drop {
    display: block;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.drop:hover, .drop:focus-within { border-color: var(--accent); background: var(--surface); }
.drop--over { border-color: var(--accent); background: #eef4f6; }
.drop input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.drop__main { display: block; font-weight: 600; }
.drop__sub  { display: block; font-size: .85rem; color: var(--muted); margin-top: .2rem; }

/* ---- status pill ----
   FILLED, NOT OUTLINED (2026-08-07). Outlined pills all read as the same
   weight from across a list: you had to read every word to scan the column.
   A soft fill sorts the list at a glance — and the tints are the same ones
   the register already uses for row states, so a status means the same
   thing wherever it appears.

   Still soft, never saturated. A status is a label on a row, not an alert:
   the row is not shouting, it is telling you whose move it is. */
.pill {
    flex: none;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.26rem 0.68rem;
    border-radius: 100px;
    border: 1px solid transparent;
    background: var(--draft-bg);
    color: var(--draft-text);
    white-space: nowrap;
}

.pill--completed { background: var(--ok-bg);   color: var(--ok-text); }
.pill--active    { background: #e7eef1;        color: var(--accent); }
.pill--blocked   { background: var(--danger-bg); color: var(--danger); }
/* The client's move. Amber is the one colour that should make someone act,
   so it is reserved for exactly that: something is waiting on the person
   reading this screen. */
.pill--waiting   { background: var(--wait-bg); color: var(--wait-text); }

/* ---- PBC register ----
   The core interaction of the portal, and it now reads as a request list:
   an ID column you can scan down, the ask, a status, and the controls —
   aligned, so twelve items read as one list rather than twelve paragraphs.

   FOUR COLUMNS, AND ONLY FOUR. A pbc_items row holds round, seq, item_text,
   response_text, response_document_id, submitted_at, published_at, unit_id.
   There is no priority, no due date and no separate purpose field, so there
   are no columns for them. An invented due date on a sworn representation
   is the kind of thing a client relies on.

   The ask and the answer are both long — multi-paragraph representations,
   not table cells — so the detail drops into a full-width second grid row
   beneath the header line, aligned under the ask. That keeps the scan-down
   register without squeezing prose into a column. */
/* FIXED VIEWPORT, roughly five rows, then it scrolls. A round of twelve
   otherwise pushes the deliverables and the fork control off the bottom of
   the page, and the whole point of a register is that you can see where the
   list starts and ends.

   max-height rather than a hard height: a two-item round should not sit in
   a half-empty box. Both views cap at the same number once a list is long,
   so toggling between them does not jump the page. */
.pbc {
    display: flex;
    flex-direction: column;
    max-height: 34rem;
    overflow-y: auto;
    padding-top: 0;                 /* the sticky header carries its own */
    overscroll-behavior: contain;   /* stop the page scrolling on when it bottoms out */
}

/* The column headings stay put while the rows move under them — a status
   column you have to scroll back up to identify is not a column. */
.pbc__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    padding-top: 1.4rem;
}

.pbc__empty { padding: 1.4rem 0 .2rem; color: var(--muted); font-size: .9rem; }

/* ---- segmented toggle ---- */
.seg {
    display: inline-flex;
    margin-bottom: .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.seg__btn {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    padding: .45rem 1rem;
    cursor: pointer;
}

.seg__btn + .seg__btn { border-left: 1px solid var(--border); }
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pbc__head,
.pbc__row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) 8.5rem auto;
    gap: .35rem .9rem;
    align-items: baseline;
}

.pbc__head {
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.pbc__row { padding: .95rem 0; border-bottom: 1px solid var(--border); }
.pbc__row:last-child { border-bottom: 0; padding-bottom: 0; }

/* Provided items are locked, not disabled — see .check--done. Readable,
   because what a client swore to is the most important text on the page. */
.pbc__row--done { opacity: .82; }

/* THE ARRIVAL FLASH — a memo cited this row and sent the reader here
   (project.html ?item=R1-02). A flash and not a persistent highlight: it
   says "this is the one", then gets out of the way, because the row is
   evidence to read and not a selection to maintain. Same gesture and same
   2.2s as .au-unit--focus (authority.html) and .fx-doc--focus (facts.html)
   — one motion means one thing across the three record surfaces. */
.pbc__row--focus { animation: pbc-flash 2.2s ease-out 1; }
@keyframes pbc-flash {
    0%   { background: rgba(31, 78, 121, .16); }
    100% { background: none; }
}

/* The ID badge, tinted by state so the left rail is scannable on its own:
   green is in the record, amber is with the client, grey is not sent yet. */
.pbc__id {
    justify-self: start;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .2rem .45rem;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--draft-bg);
    color: var(--draft-text);
}

.pbc__row--done    .pbc__id { background: var(--ok-bg);   color: var(--ok-text); }
.pbc__row--waiting .pbc__id { background: var(--wait-bg); color: var(--wait-text); }

.pbc__ask { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }

.tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .22rem .5rem;
    border-radius: 100px;
    white-space: nowrap;
    background: var(--draft-bg);
    color: var(--draft-text);
}

.tag--done { background: var(--ok-bg);   color: var(--ok-text); }
.tag--wait { background: var(--wait-bg); color: var(--wait-text); }

/* Controls sit in the action column when they fit on one line (Submit,
   Remove) and wrap beneath when they do not. */
.pbc__act { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

/* The detail: answer, attachment, the answer box and its buttons. Confined
   to the ask's column so the answer sits on the same measure as the question
   it answers — hanging under the ID, or running wider than the ask, both
   read as a different kind of content rather than a reply to it. */
.pbc__detail { grid-column: 2 / 3; }
.pbc__detail:empty { display: none; }

/* Why we are asking, and under what. The rationale reads as prose; the
   citation line is set apart and quieter -- it is context for the client,
   not an attestation, and it should not compete with the ask itself. */
.pbc__why  { font-size: .86rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.pbc__auth { font-size: .78rem; color: var(--muted); margin-top: .25rem;
             font-variant-numeric: tabular-nums; opacity: .85; }

@media (max-width: 48rem) {
    .pbc__head { display: none; }          /* headings for a grid that no longer exists */
    .pbc__row  { grid-template-columns: auto 1fr; }
    .pbc__ask  { grid-column: 1 / -1; order: 2; }
    .pbc__act, .pbc__detail { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
}

/* ---- PBC checklist ----
   One document, hairline-separated rows. Deliberately NOT cards: a card
   per item makes three requests look like three projects, and the thing
   a client needs to see is a single list they are working down. */
.check {
    display: flex;
    gap: .8rem;
    padding: .95rem 0;
    border-top: 1px solid var(--border);
}

.check:first-child { border-top: 0; padding-top: 0; }

/* Submitted: dimmed, and no controls exist to grey out -- they are gone.
   Dimmed, not faded out: what the client swore to is the most important
   text on the page and has to stay comfortably readable months later. */
.check--done { opacity: .72; }

.check__box {
    flex: none;
    width: 1.1rem;
    line-height: 1.5;
    color: var(--muted);
    font-size: 1.05rem;
}

.check--done .check__box { color: var(--ok); }

.check__body { flex: 1; min-width: 0; }

/* THE ASK is the thing a client is being asked to do. It was the same
   weight as the rationale and the authority beneath it, so nothing led.
   Three tiers now: the ask leads, the rationale explains, the authority
   is a footnote. */
.check__ask {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--text);
}

/* The disclosure wrapping a submitted response. Closed by default so the
   register stays a list; see the comment in project.html drawPbc for why
   the label counts words instead of previewing them. */
.answer { margin-top: .55rem; }

.answer > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 600;
    color: var(--accent);
    list-style: none;              /* Firefox */
}

.answer > summary::-webkit-details-marker { display: none; }
.answer > summary::before { content: "▸"; font-size: .72rem; }
.answer[open] > summary::before { content: "▾"; }
.answer > summary:hover { text-decoration: underline; }
.answer > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The client's own words. Set apart from the firm's — a quoted block, not
   more body copy, so it is obvious at a glance which side of the exchange
   any given line came from. */
.check__answer {
    white-space: pre-wrap;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text);
    margin-top: .6rem;
    padding: .55rem .8rem;
    background: var(--bg);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.check__meta { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

.check__field {
    width: 100%;
    margin: .55rem 0 .5rem;
    padding: .5rem .6rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
}

.check__bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.round {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.6rem 0 .2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.round:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- document register ----
   Every file the two sides exchange renders through this, on BOTH sides, and
   it is built to read like a register rather than a folder: the version tag
   is a fixed left column so the versions line up and can be scanned down, and
   the filename is deliberately NOT the control. The pipeline emits the same
   `b5_client_memo.pdf` on every run, so filenames are useless for telling
   versions apart — the tag and the dates are what carry the meaning, and they
   should be what the eye lands on.

   Previously this was an inline run of grey text and a button wearing the
   filename, which made two versions of the same memo indistinguishable at a
   glance — the exact confusion a register exists to prevent. */
.docs { margin-top: .7rem; }

.doc {
    display: flex;
    gap: .9rem;
    align-items: baseline;
    padding: .7rem 0;
    border-top: 1px solid var(--border);
}

.doc:first-child { border-top: 0; }

.doc__tag {
    flex: none;
    width: 9rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The live version — the one that governs. */
.doc--live .doc__tag { color: var(--accent); }

/* Superseded, and unmistakably so. Never hidden: the record of what was sent
   stays visible. Just demoted.

   THE FADE IS ON THE TEXT, NOT THE ROW. A blanket opacity took the controls
   down with it, and a button at 58% reads as DISABLED -- which is the one
   thing these are not. The record is downloadable on purpose; only its
   standing is demoted. */
.doc--superseded .doc__tag,
.doc--superseded .doc__name,
.doc--superseded .doc__meta { opacity: .62; }

.doc__body { flex: 1; min-width: 0; }
.doc__name { font-weight: 500; overflow-wrap: anywhere; }
.doc__meta { font-size: .82rem; color: var(--muted); margin-top: .1rem; }

/* THE DISCLAIMER. Its own line, in the danger colour, with a warning glyph —
   not another clause tacked onto the grey meta line, where "do not rely on
   this version" reads with exactly the same weight as a file size.
   Superseded and withdrawn documents both carry one.

   The glyph is CSS content, so it is decoration and screen readers skip it;
   the sentence itself has to carry the whole meaning, which it does. */
.doc__warn {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .25rem;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--danger);
}

.doc__warn::before { content: "⚠"; flex: none; line-height: 1.4; }

/* The warning itself is never faded. It is the most important line in the
   row, and a version nobody should rely on is not a lesser version of the
   same thing -- putting the warning behind a wash is the one place a fade
   works against the page. */
.doc--superseded .doc__warn { opacity: 1; }

.doc__actions {
    flex: none;
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 40rem) {
    .doc { flex-wrap: wrap; }
    .doc__tag { width: 100%; }
    .doc__actions { width: 100%; justify-content: flex-start; }
}

/* ---- table (documents) ---- */
.tablewrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

th, td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

th { font-weight: 600; color: var(--muted); font-size: 0.8rem; }
td:first-child { white-space: normal; }