/* VitroVault Trust Centre — component library (C1–C9).
   Shared vocabulary used across the trust-page chrome and the app/console chrome.
   Requires tokens.css. Binding rules enforced here (DEV-HANDOVER §8):
     - coverage never a score; state differs by SHAPE + LABEL, never colour alone
     - uncovered is neutral (ink-3), never stop-red
     - nothing animated; no meters/bars
   ============================================================================ */

/* ---- C1 Coverage tick row -------------------------------------------------------
   Three states by shape AND label: filled tick "Assessed" / outline tick "Declared"
   / dashed empty box "No document yet" (neutral). Colour is a secondary cue only. */
/* A statement about what we could NOT read, shown above the coverage it qualifies. Warn, not stop:
   nothing is broken and nothing is lost — some evidence simply was not readable, and the areas
   below must not be mistaken for a verdict on it. */
.notice { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px;
          font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.notice-warn { border-color: var(--warn); background: var(--warn-tint); }
.notice ul { margin: 8px 0 8px 18px; padding: 0; }
.notice li { margin: 2px 0; }

.cov-list { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.cov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 16px; background: var(--wash); border-bottom: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: .95rem; }
.cov-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line); }
.cov-row:last-child { border-bottom: 0; }
.cov-box { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid;
  place-items: center; }
.cov-box svg { width: 13px; height: 13px; display: block; }
.cov-area { flex: 1; font-size: .95rem; color: var(--ink); min-width: 0; }
.cov-doc { font-size: .82rem; color: var(--ink-2); }
/* When the check happened. Only a validated row carries one, and it sits beside the badge
   because the legend tells a buyer to read it there. */
.cov-when { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.cov-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--label); white-space: nowrap; }

/* ASSESSED is the stronger statement — we read the documents ourselves — so it carries the
   affirmative colour outright rather than a tint of it (G, 2026-08-22). DECLARED is not a lesser
   claim about the supplier and must not look like a warning: it is the same tick, in ink, saying
   the same thing on their authority instead of ours. */
.cov-row.is-assessed .cov-box { background: var(--go); color: #fff; }
.cov-row.is-assessed .cov-tag { color: #fff; border-color: var(--go); background: var(--go); }

/* VALIDATED is the strongest thing this block can say — a person asked for evidence that the
   control operates and saw it — so it is the only row that leaves the green/ink family and takes
   the brand ground. Deliberately NOT a gold seal: it carries a date, it expires, and it should read
   as a record rather than an award (054). */
.cov-row.is-validated .cov-box { background: var(--brand); color: #fff; }
.cov-row.is-validated .cov-tag { color: #fff; border-color: var(--brand); background: var(--brand); }

.cov-row.is-declared .cov-box { background: var(--ink-2); color: #fff; }
.cov-row.is-declared .cov-tag { color: var(--ink-2); border-color: var(--line-2); background: var(--wash); }

.cov-row.is-uncovered .cov-box { background: transparent; border: 2px dashed var(--line-2); }
.cov-row.is-uncovered .cov-area { color: var(--ink-3); }
.cov-row.is-uncovered .cov-note { font-size: .82rem; color: var(--ink-3); }

/* ---- C2 Currency stamp / Kept-current MARK --------------------------------------
   The mark is a paid Managed artifact: distinctive but quiet, NEVER seal-like.
   Three explored DIRECTIONS below (brand sign-off) — all use .kc-mark for sizing so
   whichever wins drops straight into the currency strip (trust.css .tc-mark). */
.kc-mark { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  flex: none; background: var(--ink); }
.kc-mark svg { width: 12px; height: 12px; display: block; }
/* dir-A: double-chevron in a dark square (the delivered mock) */
/* dir-B: single tick in a dark square */
/* dir-C: mono wordmark, no square (text-forward, quietest) */
.kc-word { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.kc-word::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--go); }

/* ---- C3 Access chip -------------------------------------------------------------
   PUBLIC / ON REQUEST / NDA. Icon + label distinguish, not colour. Neutral wash. */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: 4px 9px; border-radius: var(--r-pill); background: var(--wash);
  border: 1px solid var(--line-2); color: var(--label); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }

/* ---- C4 Document row ------------------------------------------------------------
   name .... [access chip] [action]. Lock state + buyer-side "access ended". */
.doc-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--wash); }
.doc-icon { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
/* Title + a meta line. A row used to be a title at the far left and a button at the far right with
   a hand's width of nothing between them, so a reader's eye had to travel the whole card to pair
   them up and learned nothing on the way. The version and the date it was last published are what
   a procurement reviewer actually wants to know about a document, so they go in that gap. */
.doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-name { font-size: 1rem; color: var(--ink); min-width: 0; font-weight: 500; }
.doc-name .doc-lock { color: var(--ink-3); margin-left: 6px; }
.doc-meta { font-family: var(--mono); font-size: .74rem; color: var(--label);
  letter-spacing: .01em; }
.doc-meta .sep { color: var(--line-2); margin: 0 6px; }
/* EQUAL SIZE for the access chip too, for the same reason the buttons have it. The chip was pushed
   right and left to size itself, so PUBLIC, PRIVATE and SENSITIVE each began at a different x while
   the buttons beside them sat flush — one column ragged against another, in the same row
   (G, 2026-08-22). The widest label sets the column and the rest centre in it. */
.doc-row .chip { margin-left: auto; min-width: 112px; justify-content: center; }
/* EQUAL SIZE for the row actions. The min-width was set for "Sign NDA to view" and the wording later
   became "Accept agreement to view", which is wider than 150px — so that button grew past the column
   and dragged the chip beside it left, and only THAT row moved. A min-width cannot align across rows
   once a label outgrows it: each row is its own flex container, so the widest label has to fit
   inside the number, not set it (G, 2026-08-23, with the two edges marked on a screenshot).
   `tests/test_readability.py` now fails if any action label in any language is too long for this
   column, which is the part that keeps it true — the wording has changed twice already, and once in
   two new languages. */
.doc-action { font-family: var(--sans); font-weight: 600; font-size: .84rem;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--card); color: var(--sa-ink); cursor: pointer; text-decoration: none;
  min-width: 13rem; text-align: center; display: inline-block; box-sizing: border-box;
  white-space: nowrap; }
.doc-action.is-primary { background: var(--sa); color: #fff; border-color: transparent; }
/* OPEN to this visitor. Not the accent — that is the page's strongest call to action and belongs on
   the gate, the thing we are asking them to do next. Once they have done it the button stops being
   a call to action and becomes a statement of fact, so it is quieter, and unmistakably not the same
   button it was a moment ago (G, 2026-08-22). The tick carries the meaning where colour cannot: on
   a monochrome print, and for a reader who does not distinguish these two hues. */
.doc-action.is-open { background: var(--go-tint, #e9f5ee); color: var(--go, #1b7a43);
  border-color: var(--go, #1b7a43); font-weight: 600; }
.doc-action.is-open::before { content: "\2713\00a0"; font-weight: 700; }
.doc-action.is-open:hover { background: var(--go, #1b7a43); color: #fff; }
.doc-action:hover { text-decoration: none; filter: brightness(.97); }
.doc-ended { font-size: .84rem; color: var(--ink-2); font-style: normal; }  /* neutral, never error */

/* Access-group heading on the public document list (PUBLIC / ON REQUEST / NDA bands) */
/* The band that says what a group of documents costs you to see. It was 11px of #98948A on white
   (2.75:1 — under the AA floor) and the same weight as everything else on the card. */
.doc-group { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; font-weight: 500;
  text-transform: uppercase; color: var(--label); padding: 16px 18px 8px;
  background: var(--wash); border-bottom: 1px solid var(--line); }
.doc-group + .doc-row { border-top: 0; }

/* ---- C5 NDA stepper -------------------------------------------------------------
   Details -> Agreement/Sign -> Verify. Numbered, current emphasised. */
.stepper { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.stepper .step { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.stepper .step .num { width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; border: 1.5px solid var(--line-2); font-family: var(--mono);
  font-size: .72rem; }
.stepper .step.is-current { color: var(--ink); font-weight: 600; }
.stepper .step.is-current .num { border-color: var(--sa-ink); color: var(--sa-ink); }
.stepper .step.is-done .num { background: var(--go); border-color: var(--go); color: #fff; }
.stepper .bar { width: 22px; height: 1.5px; background: var(--line-2); flex: none; }

/* ---- C6 Status pill -------------------------------------------------------------
   draft / awaiting reviewer / approved / published. Label carries meaning (text). */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2);
  background: var(--card); }
.pill.is-draft { color: var(--ink-3); }
.pill.is-await { color: var(--warn); border-color: var(--warn); background: var(--warn-tint); }
.pill.is-approved { color: var(--go); border-color: var(--go); background: var(--go-tint); }
.pill.is-published { color: var(--go); border-color: var(--go); background: var(--go); color: #fff; }

/* ---- C7 Event row (audit artifact) ----------------------------------------------
   Mono, fixed columns, dark ground. Reads as an evidence export. */
.evlog { border-radius: var(--r-md); overflow: hidden; background: var(--ink);
  border: 1px solid var(--ink); font-family: var(--mono); font-size: .8rem; line-height: 1.45; }
/* COLUMN WIDTHS. Every track is a minmax with a 0 (or explicit) floor: a grid item defaults to
   min-width:auto, so without this a long value — "INKASEC support viewed this account", a 36-char
   actor id — makes its own track wider than the template says and shunts the next column over the
   one after it. Reported by three separate browser runs (4, 6 and 6 part 2) as "column overlap";
   it was never a width guess, it was the implicit floor.
   ACTION gets real room because the labels there are sentences, and SUBJECT takes the slack. */
.evlog .ev-head, .ev-row { display: grid;
  grid-template-columns: 176px minmax(0, 1fr) minmax(190px, 1.3fr) minmax(0, 1.5fr) 124px;
  gap: 14px; padding: 11px 16px; align-items: baseline; }
.evlog .ev-head { color: #B4AFA4; text-transform: uppercase; letter-spacing: .08em;
  font-size: .66rem; border-bottom: 1px solid #2A2823; }
.ev-row { color: #E7E4DC; border-bottom: 1px solid #26241F; }
/* Truncation belongs on the ITEMS, not the row: `text-overflow` on a grid container does nothing,
   which is why the overflowing text was drawn over its neighbour instead of being cut. Each cell
   also carries a title attribute, so a truncated value is still readable on hover. */
.evlog .ev-head > *, .ev-row > * { min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ev-row:last-child { border-bottom: 0; }
.ev-row:hover { background: #1E1C18; }
.ev-row .ev-actor { color: #FFF; }
.ev-row .ev-assurance { color: #B4AFA4; text-align: right; }
/* Below this the five columns cannot be read at any width, so the log scrolls sideways as one
   piece rather than compressing into an unreadable smear. */
.ev-scroll { overflow-x: auto; }
.ev-scroll .evlog { min-width: 820px; }
.ev-row .empty { white-space: normal; overflow: visible; }
.ev-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.ev-controls #ev-search { flex: 1 1 220px; min-width: 180px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .85rem; }
.ev-controls .ev-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem;
  color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.ev-controls .grow { flex: 1; }

/* ---- C8 Powered-by badge --------------------------------------------------------
   Footer only, one size, links to us. Two DIRECTIONS for sign-off. Mandatory on
   Free/Plus, removable at Managed (an entitlement, not a style toggle). */
.pb { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem;
  color: var(--ink-2); text-decoration: none; }
.pb:hover { color: var(--ink); text-decoration: none; }
.pb .pb-mark { width: 16px; height: 16px; color: var(--ink-2); }
.pb b { color: var(--ink-2); font-weight: 600; }
/* dir-B: bordered pill */
.pb.is-pill { border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 5px 11px; background: var(--card); }

/* ---- C9 Empty state -------------------------------------------------------------
   Says what will appear and how to cause it. No illustration, no shame. */
.empty { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 28px 24px;
  text-align: center; background: var(--wash); }
.empty h4 { font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.empty p { font-size: .88rem; color: var(--ink-2); max-width: 44ch; margin: 0 auto; }

/* ---- Document rows on a narrow screen ----
   These belong HERE, not in trust.css, because that file loads FIRST: an identical selector there
   is overridden by the base rules above and the whole block was inert. A document row is a title, a
   chip and a button; below this width they cannot share a line without the title being crushed to a
   single character column, which is exactly what it was doing. Stack them, and let the action span
   the row so it is a comfortable target rather than a sliver. */
@media (max-width: 640px) {
  .doc-row { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  .doc-text { flex: 1 1 100%; min-width: 0; }
  /* The supplier's one-line description wraps with the title rather than beside it. */
  .doc-about { white-space: normal; }
  .doc-row .chip { margin-left: 0; }
  .doc-action { flex: 1 1 auto; min-width: 0; }
}

/* Screen-reader-only text. This lived ONLY in marketing.css, which the trust page does not load --
   so `class="sr"` there hid nothing and the note meant for a screen reader was simply printed on
   the page, in brackets, after every subprocessor link (G, 2026-08-30). Fourth time this week that
   a rule existed in one stylesheet and not the one the page links; components.css is loaded by the
   trust page, the console, the marketing site, login and register, so it is the right home. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}