/* ============================================================================
   Polymorphic VDR — components.
   Structure comes from planes, columns and hairline rules (§4, §12).
   Nothing here is a floating card and nothing glows (§13, §40).
   ========================================================================= */

/* ============================================================================
   Controls (§28) — primary cyan is deliberately rare; most actions are text.
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 44px;
  padding: 0 var(--s6);
  border-radius: var(--radius-control);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
  transition: background-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}

.btn-primary { background: var(--cyan); color: var(--ink); }
.btn-primary:hover { background: #1BA9D4; }
.btn-primary:disabled { opacity: 0.55; cursor: default; }

.btn-quiet {
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: transparent;
}
.btn-quiet:hover { border-color: var(--ink); }

/* The default action shape in this product: a text control with an arrow. */
.btn-text {
  height: auto;
  padding: 0;
  color: var(--ink);
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn-text:hover { border-bottom-color: var(--cyan); color: var(--cyan); }

.env-dark .btn-quiet { border-color: var(--rule-dark); color: var(--ink-inverse); }
.env-dark .btn-quiet:hover { border-color: var(--ink-inverse); }

/* ============================================================================
   Form fields (§29)
   ========================================================================= */

.field { margin-bottom: var(--s6); }

.field-label { display: block; margin-bottom: var(--s2); color: var(--graphite); }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; }

.field-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--s3);
  background: #F2F5F7;
  border: 1px solid #D9DEE3;
  border-radius: var(--radius-input);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease);
}
.field-input:hover { border-color: #C2CAD2; }
.field-input:focus { border-color: var(--cyan); outline: none; box-shadow: none; }
.field-input::placeholder { color: var(--slate); }

/* ============================================================================
   Authentication (§30) — 38 / 62 split
   ========================================================================= */

.auth-body { background: var(--porcelain); }

.auth {
  display: grid;
  grid-template-columns: 38fr 62fr;
  min-height: 100vh;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s12) var(--s12) var(--s8);
  background: var(--obsidian);
}

/* The surface sits low and large, cropped by the panel edge (§30). */
.auth-mesh {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 6%;
  width: 124%;
  height: 62%;
  pointer-events: none;
}

.auth-brand-top,
.auth-brand-statement,
.auth-brand-foot { position: relative; z-index: 1; }

.auth-brand-statement { margin-bottom: auto; padding-top: var(--s24); }
.auth-statement { color: var(--ink-inverse); letter-spacing: 0.22em; }
.auth-brand-foot .t-micro { color: var(--slate-dark); letter-spacing: 0.14em; }

.auth-panel {
  display: flex;
  align-items: center;
  background: var(--porcelain);
  padding: var(--s12) var(--s24);
}

/* Off-centre by intent (§30): aligned to a column, not to the middle. */
.auth-form-wrap { width: 100%; max-width: 384px; margin-left: 8%; }

.auth-practice { color: var(--slate); margin-bottom: var(--s4); }
.auth-deal { margin-bottom: var(--s2); }
.auth-descriptor {
  font-size: var(--t-section);
  font-weight: var(--w-regular);
  color: var(--graphite);
  margin-bottom: var(--s6);
}
.auth-lede {
  font-size: var(--t-body-sm);
  color: var(--slate);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s8);
}

/* Sized, not full-bleed. §28 warns against enormous brightly coloured CTAs,
   and a saturated bar spanning the measure is the loudest object on the
   screen — cyan has to stay punctuation (§5). */
.auth-submit { margin-top: var(--s2); padding: 0 var(--s8); }

.auth-error {
  font-size: var(--t-body-sm);
  color: var(--critical);
  margin-bottom: var(--s4);
  padding-left: var(--s3);
  border-left: 2px solid var(--critical);
}

.auth-change-note {
  font-size: var(--t-body-sm);
  color: var(--graphite);
  margin-bottom: var(--s6);
  padding-left: var(--s3);
  border-left: 2px solid var(--gold);
}

/* Classification marking (§24): tracked micro type in Sovereign Gold, set as
   a document marking would be — not a coloured word inside a sentence. */
.auth-foot {
  margin-top: var(--s12);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.auth-classification { color: var(--gold); display: block; margin-bottom: var(--s2); }
.auth-recorded { font-size: var(--t-meta-sm); color: var(--slate); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { min-height: 300px; padding: var(--s8); }
  .auth-brand-statement { padding-top: var(--s12); }
  .auth-panel { padding: var(--s12) var(--s8); }
  .auth-form-wrap { margin-left: 0; max-width: none; }
}

/* ============================================================================
   Application shell — architectural index, not a SaaS sidebar (§17)
   ========================================================================= */

.shell {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  min-height: 100vh;
}

.nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--obsidian);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding: var(--s8) 0 var(--s6);
}

.nav-brand { padding: 0 var(--s6) var(--s8); }

.nav-deal {
  padding: 0 var(--s6) var(--s6);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-dark-quiet);
}
.nav-deal-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink-inverse);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 2px;
}
.nav-deal-sub { color: var(--slate-dark); }

.nav-group { padding: var(--s6) 0 var(--s2); }
.nav-group-label { padding: 0 var(--s6) var(--s3); display: block; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s6);
  font-size: var(--t-body-sm);
  color: var(--graphite-dark);
  border-left: 2px solid transparent;
  transition: color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              background-color var(--dur-hover) var(--ease);
}
.nav-item:hover { color: var(--ink-inverse); background: rgba(255, 255, 255, 0.03); }

/* Current position is one of the few places cyan is spent (§5). */
.nav-item.is-current {
  color: var(--ink-inverse);
  border-left-color: var(--cyan);
  background: rgba(255, 255, 255, 0.04);
}

/* Section numbers instead of decorative icons (§17, §18). */
.nav-num {
  font-size: var(--t-meta-sm);
  font-weight: var(--w-medium);
  color: var(--slate-dark);
  letter-spacing: 0.06em;
  min-width: 18px;
}
.nav-item.is-current .nav-num { color: var(--cyan); }
.nav-count {
  margin-left: auto;
  font-size: var(--t-meta-sm);
  color: var(--slate-dark);
}

.nav-spacer { flex: 1; }
.nav-rule { margin: var(--s4) var(--s6); border-top: 1px solid var(--rule-dark-quiet); }

.nav-user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s6) 0;
}
.nav-initials {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-control);
  font-size: var(--t-meta-sm);
  font-weight: var(--w-medium);
  color: var(--ink-inverse);
}
.nav-user-name { font-size: var(--t-body-sm); color: var(--ink-inverse); line-height: 1.2; }
.nav-user-org { font-size: var(--t-meta-sm); color: var(--slate-dark); line-height: 1.3; }

/* ============================================================================
   Main canvas
   ========================================================================= */

.main {
  background: var(--porcelain);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.canvas {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--s12) var(--gutter) var(--s24);
  flex: 1;
}

/* Deal header (§19) */
.deal-header { position: relative; overflow: hidden; }
.deal-header-mesh {
  position: absolute;
  top: -40%; right: -8%;
  width: 46%; height: 190%;
  pointer-events: none;
}
.deal-head-inner { position: relative; z-index: 1; }

.deal-practice { color: var(--slate); }
.deal-title { margin: var(--s3) 0 var(--s2); }
.deal-stage { font-size: var(--t-section); color: var(--graphite); font-weight: var(--w-regular); }

.deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s16);
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.deal-meta-item { display: flex; flex-direction: column; gap: 5px; }
.deal-meta-value {
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: var(--s2);
  vertical-align: 1px;
}

/* ============================================================================
   Executive ledger (§20) — figures live in the composition, not in tiles.
   ========================================================================= */

.ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  margin: var(--s16) 0 var(--s16);
}
.ledger-item,
.figure-item { display: flex; flex-direction: column; gap: var(--s3); }
.ledger-value { color: var(--ink); }
.ledger-label { color: var(--slate); }

/* Major section spacing lives at 64–96px (§10). Without a top margin this
   collides with the deal header's metadata row. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s6);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule-strong);
  margin-top: var(--s16);
  margin-bottom: var(--s2);
}

/* Activity ledger */
.activity-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 96px;
  align-items: center;
  gap: var(--s6);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-hover) var(--ease);
}
.activity-row:hover { background: rgba(16, 24, 32, 0.02); }
.activity-date { color: var(--slate); font-size: var(--t-meta); letter-spacing: 0.06em; }
.activity-title { font-size: var(--t-body-sm); color: var(--ink); }
.activity-ref { color: var(--slate); margin-right: var(--s2); }
.activity-state { text-align: right; }

/* Financial spine (§34) */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: var(--s8);
}
.figure-value { font-size: 1.75rem; font-weight: var(--w-regular); letter-spacing: -0.02em; }
.figure-label { color: var(--slate); margin-top: var(--s2); display: block; }

.editorial-note {
  max-width: 62ch;
  margin-top: var(--s6);
}

/* ============================================================================
   Document register (§21) — the visual centre.
   ========================================================================= */

.register { width: 100%; border-collapse: collapse; }

.register thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--porcelain);
  text-align: left;
  padding: var(--s3) var(--s3) var(--s2);
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}
.register thead th.num-right { text-align: right; }

.register tbody tr {
  height: 50px;                     /* §21: rows approximately 48–52px */
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-hover) var(--ease);
  cursor: pointer;
}
.register tbody tr:hover { background: var(--pure-paper); }
.register tbody td {
  padding: 0 var(--s3);
  font-size: var(--t-table);
  color: var(--graphite);
  vertical-align: middle;
}

/* The 2px cyan indicator the spec allows on hover — and nothing more (§21).
   Anchored to the first cell: `position: relative` on a <tr> is not reliably
   a containing block, so an indicator hung off the row can fail to appear. */
.register td.col-ref {
  position: relative;
  color: var(--slate);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.register td.col-ref::before {
  content: '';
  position: absolute;
  left: calc(var(--s3) * -1);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.register tbody tr:hover td.col-ref::before,
.register tbody tr:focus-visible td.col-ref::before { opacity: 1; }

.register td.col-title { color: var(--graphite); }
.register tbody tr:hover td.col-title { color: var(--ink); }
.col-title-text { font-size: var(--t-table); }

.register td.col-type,
.register td.col-version,
.register td.col-date { white-space: nowrap; color: var(--slate); }

.col-actions { width: 32px; text-align: right; color: var(--slate); }

/* Status + classification marks: typographic, not badges (§24). */
.mark {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}
.mark-current   { color: var(--graphite); }
.mark-verified  { color: var(--success); }
.mark-final     { color: var(--graphite); }
.mark-draft     { color: var(--warning); }
.mark-superseded{ color: var(--slate); }
.mark-restricted{ color: var(--gold); }
.mark-principal { color: var(--gold); }
.mark-adviser   { color: var(--slate); }
.mark-investor  { color: var(--slate); }
.mark-added     { color: var(--success); }
.mark-updated   { color: var(--graphite); }

.register-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  margin: var(--s8) 0 var(--s4);
}
.register-count { color: var(--slate); }

.table-scroll { overflow-x: auto; }

/* ============================================================================
   Document viewer (§23) — Obsidian surround, Pure Paper document.
   ========================================================================= */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--obsidian);
  display: flex;
  flex-direction: column;
}
.viewer-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.viewer-top,
.viewer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s4) var(--s8);
  /* Controls recede when inactive (§23) and return on interaction. */
  opacity: 0.62;
  transition: opacity var(--dur-nav) var(--ease);
}
.viewer:hover .viewer-top,
.viewer:hover .viewer-bottom,
.viewer-top:focus-within,
.viewer-bottom:focus-within { opacity: 1; }

.viewer-top { border-bottom: 1px solid var(--rule-dark-quiet); }
.viewer-bottom {
  border-top: 1px solid var(--rule-dark-quiet);
  justify-content: center;
  gap: var(--s8);
}

.viewer-back { color: var(--graphite-dark); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; }
.viewer-back:hover { color: var(--ink-inverse); }

.viewer-heading { flex: 1; min-width: 0; }
.viewer-title { font-size: var(--t-body); color: var(--ink-inverse); font-weight: var(--w-medium); }
.viewer-sub { color: var(--slate-dark); }
.viewer-crumb { color: var(--slate-dark); }

.viewer-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: var(--s12) var(--s8) var(--s16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s8);
}

/* The document itself: clean paper, the only bright plane in a dark room. */
.sheet {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--pure-paper);
  border-radius: 2px;
  padding: 76px 84px;
  box-shadow: var(--shadow-lift);
}
.sheet-page-num {
  position: absolute;
  bottom: 26px; right: 40px;
  color: var(--slate);
}

/* Watermark (§38): low opacity, diagonal, intentional. */
.sheet-watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.sheet-watermark span {
  position: absolute;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(16, 24, 32, 0.045);
  transform: rotate(-32deg);
  transform-origin: 0 0;
}

.sheet-content { position: relative; z-index: 1; }
.sheet h1 { font-family: var(--font-serif); font-size: 2rem; font-weight: var(--w-regular); letter-spacing: -0.02em; margin-bottom: var(--s4); }
.sheet h2 { font-size: 1.0625rem; font-weight: var(--w-medium); margin: var(--s8) 0 var(--s4); }
.sheet p { font-size: 0.875rem; line-height: 1.62; color: var(--graphite); margin-bottom: var(--s4); }
.sheet .doc-eyebrow { color: var(--slate); margin-bottom: var(--s6); display: block; }
.sheet .doc-note { font-size: var(--t-meta); color: var(--slate); }
.sheet .doc-clause { display: grid; grid-template-columns: 46px 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.sheet .doc-clause-n { font-size: var(--t-table); color: var(--slate); }
.sheet .doc-clause-t { font-size: 0.875rem; line-height: 1.62; color: var(--graphite); }
.sheet .doc-classification { color: var(--gold); }

.doc-meta-table { width: 100%; margin: var(--s6) 0; }
.doc-meta-table td { padding: 6px 0; font-size: var(--t-table); border-bottom: 1px solid var(--rule); }
.doc-meta-table td:first-child { color: var(--slate); width: 40%; }
.doc-meta-table td:last-child { color: var(--ink); }

.doc-table { width: 100%; border-collapse: collapse; margin: var(--s4) 0 var(--s6); }
.doc-table th {
  text-align: left;
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--slate);
}
.doc-table th.r, .doc-table td.r { text-align: right; }
.doc-table td {
  padding: 7px var(--s2);
  font-size: var(--t-table);
  border-bottom: 1px solid var(--rule);
  color: var(--graphite);
}

.viewer-pageinfo { color: var(--graphite-dark); }
.zoom-group { display: flex; align-items: center; gap: var(--s4); }
.zoom-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-control);
  color: var(--graphite-dark);
  font-size: 13px;
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.zoom-btn:hover { border-color: var(--ink-inverse); color: var(--ink-inverse); }
.viewer-download { color: var(--graphite-dark); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; }
.viewer-download:hover { color: var(--cyan); }
.viewer-download[data-restricted='1'] { color: var(--slate-dark); cursor: not-allowed; }

/* ============================================================================
   Command search (§26)
   ========================================================================= */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(7, 17, 31, 0.72);
  display: flex;
  justify-content: center;
  /* Without this the panel stretches to the overlay's full height and a
     two-result search renders as a large empty plane. */
  align-items: flex-start;
  padding-top: 14vh;
}
.search-panel {
  width: 100%;
  max-width: 780px;
  max-height: 68vh;
  background: var(--porcelain);
  border-radius: var(--radius-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--rule);
}
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
  color: var(--ink);
}
.search-input::placeholder { color: var(--slate); }
/* The command input is focused the moment the overlay opens and is the only
   control in it; a full cyan ring here reads as a form field and fights the
   restraint the surface is meant to have. The caret carries the state. */
.search-input:focus-visible { outline: none; }
.search-hint {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--slate);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  padding: 3px 6px;
}
.search-results { overflow-y: auto; }
.search-result {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  width: 100%;
  padding: var(--s3) var(--s6);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  transition: background-color var(--dur-hover) var(--ease);
}
.search-result:hover, .search-result.is-active { background: var(--pure-paper); }
.search-result.is-active { border-left: 2px solid var(--cyan); }
.search-result-title { font-size: var(--t-body-sm); color: var(--ink); }
.search-result-sub { color: var(--slate); }
.search-empty { padding: var(--s12) var(--s6); text-align: center; }
.search-empty-mesh { width: 220px; height: 60px; margin: 0 auto var(--s4); }

/* ============================================================================
   Q&A register (§25) — formal enquiry records, not chat.
   ========================================================================= */

.qa-record {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 200px;
  gap: var(--s8);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--rule);
}
.qa-id {
  display: block;                 /* id and category stack; inline runs them together */
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.qa-category { display: block; color: var(--slate); margin-top: 5px; }
.qa-question { font-size: var(--t-body); color: var(--ink); line-height: 1.55; }
.qa-answer {
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 1px solid var(--rule-strong);
  font-size: var(--t-body-sm);
  color: var(--graphite);
}
.qa-side { display: flex; flex-direction: column; gap: var(--s4); }
.qa-side-block { display: flex; flex-direction: column; gap: 4px; }
.qa-side-value { display: block; font-size: var(--t-body-sm); color: var(--ink); }
.qa-status-pending { color: var(--warning); }
.qa-status-answered { color: var(--success); }

.qa-form {
  max-width: 720px;
  margin: var(--s8) 0 var(--s12);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--rule-strong);
}
.qa-textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--s3);
  background: #F2F5F7;
  border: 1px solid #D9DEE3;
  border-radius: var(--radius-input);
  font-size: var(--t-body-sm);
  line-height: 1.55;
  resize: vertical;
}
.qa-textarea:focus { border-color: var(--cyan); }

/* ============================================================================
   Session / security readout (§37) — infrastructure, not marketing.
   ========================================================================= */

.readout { max-width: 560px; }
.readout-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s6);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.readout-value { font-size: var(--t-body-sm); color: var(--ink); letter-spacing: 0.02em; }
.readout-ok::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
  margin-right: var(--s2);
  vertical-align: 2px;
}
.readout-restricted { color: var(--gold); }

/* Audit + participants tables reuse the register's discipline. */
.audit-row {
  display: grid;
  grid-template-columns: 150px 132px minmax(0, 1fr) 200px;
  gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-table);
}
.audit-event { font-size: var(--t-micro); letter-spacing: var(--track-micro); }
.audit-denied { color: var(--critical); }
.audit-ts { color: var(--slate); }

/* ============================================================================
   Empty + loading states (§14, §41)
   ========================================================================= */

.empty { padding: var(--s16) 0; text-align: center; }
.empty-mesh { width: 260px; height: 64px; margin: 0 auto var(--s6); }
.empty-text { color: var(--slate); }

.loading-wrap { padding: var(--s16) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.loading-mesh { width: 132px; height: 42px; }

/* Skeletons: no shimmer sweep, just quiet placeholders (§41, §40). */
.skeleton {
  background: rgba(16, 24, 32, 0.05);
  border-radius: 2px;
  height: 12px;
}

.view { animation: view-in var(--dur-page) var(--ease); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
}

/* ============================================================================
   Responsive (§41) — the grid tightens; it does not become a phone app.
   ========================================================================= */

@media (max-width: 1240px) {
  :root { --gutter: 40px; }
  .ledger, .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .qa-record { grid-template-columns: 110px minmax(0, 1fr); }
  .qa-side { grid-column: 1 / -1; flex-direction: row; gap: var(--s12); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; flex-direction: column; }
  .canvas { padding: var(--s8) var(--s6) var(--s16); }
  .sheet { padding: 44px 32px; }
}