/* Talent surfaces: dashboard, booking, callback, Schedule A, T-3, fee ledger,
   recordings, documents, support, account. Owned by the talent build.

   DESIGN READ. Logged-in portal for working voice actors reading it on a phone
   between sessions. Plain-clerk language, leaning "studio docket": the same
   paper-and-ink system as the landing page, re-cut as a running record of what
   is next, what is owed, and what is blocking.

   TOKENS. Every colour, radius and typeface is inherited from styles.css: paper
   #FAF7F1, panel #FFFFFF, ink #1B1611, dim #6E6558, line #E7DFD0, amber
   #E8930C, ok #2F9E5F. Bricolage Grotesque display + IBM Plex Sans UI are the product's
   existing faces and the talent side is the same product as the landing page,
   so matching them is the requirement, not a default reach. One token is added
   here and nowhere else: --refuse, the red a refusal is printed in. It is
   deliberately not the same red as --bad (which marks a failure); a refusal is
   the system working.

   SIGNATURE ELEMENT. .t-refusal. Every "no" in this product looks identical: a
   heavy left rule, the reason at reading size, and directly beneath it the next
   slots the person can actually take, as full-width tappable rows. A refusal
   that does not carry the way out just moves the problem to email.

   SELF-CRITIQUE. The first draft of the dashboard was a four-tile stat strip
   over a week grid, which is what any booking app gets. That is a default, so
   it changed: the page now opens on a single sentence saying whether booking is
   open or shut, and the numbers demote to a ruled ledger underneath. The fee
   page was going to be two pricing cards; it is a ledger of ten enumerated
   increments instead, because the support ticket it exists to prevent is about
   one specific increment, not about a price. */

:root {
  --refuse: #C4462F;
  --refuse-soft: #FBE7E2;
}

/* ── The verdict block: the answer, before anything else ──────────────── */
.t-verdict {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.t-verdict .t-vlabel {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--dim); display: block; margin-bottom: 10px;
}
.t-verdict h2 {
  font-size: clamp(22px, 3.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.t-verdict p { color: var(--dim); font-size: 15px; margin: 0 0 16px; max-width: 62ch; }
.t-verdict p:last-child { margin-bottom: 0; }
.t-verdict.blocked { border-left: 5px solid var(--refuse); }
.t-verdict.clear { border-left: 5px solid var(--ok); }
.t-verdict.waiting { border-left: 5px solid var(--line); }

.t-when {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 4vw, 34px); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.t-where {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--dim); font-size: 14.5px; margin: 10px 0 18px;
}
.t-where span { display: inline-flex; align-items: center; gap: 7px; }

/* ── The refusal. The one thing this interface is remembered by ───────── */
.t-refusal {
  border: 1px solid var(--line);
  border-left: 5px solid var(--refuse);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.t-refusal .t-vlabel { color: var(--refuse); }
.t-refusal h1 { font-size: clamp(21px, 3.2vw, 27px); margin-bottom: 12px; }
.t-refusal .why {
  font-size: 17px; line-height: 1.5; color: var(--ink);
  margin: 0 0 14px; max-width: 60ch;
}
.t-refusal .basis { font-size: 14px; color: var(--dim); margin: 0; max-width: 62ch; }
.t-refusal .basis + .basis { margin-top: 8px; }

.t-alts { margin-top: 22px; }
.t-alts > h2 { font-size: 17px; margin-bottom: 4px; }
.t-alts > .lede { font-size: 14px; color: var(--dim); margin: 0 0 14px; max-width: 62ch; }
.t-altlist { display: grid; gap: 10px; }
.t-altlist form { margin: 0; }

/* One row, one slot. Buttons and links share the shape so a refusal's
   alternatives look and tap the same whether they book or clear a gate. */
.t-slotrow {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--ui); font-size: 15px; color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.t-slotrow:hover { border-color: var(--amber); background: #FFFDF8; }
.t-slotrow .when { font-weight: 600; min-width: 0; }
.t-slotrow .meta { color: var(--dim); font-size: 13.5px; min-width: 0; }
.t-slotrow .go {
  margin-left: auto; flex: none;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--amber-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.t-slotrow .go svg { width: 15px; height: 15px; }

/* ── Booking calendar ─────────────────────────────────────────────────── */
.t-day { margin-top: 26px; }
.t-day:first-of-type { margin-top: 6px; }
.t-day > h3 {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.t-day > h3 small {
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; color: var(--dim); margin-left: auto;
}
.t-slots { display: grid; gap: 10px; }

.t-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.t-slot .head { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.t-slot .time { font-weight: 600; font-variant-numeric: tabular-nums; }
.t-slot .room { font-size: 13.5px; color: var(--dim); }
.t-slot form { margin: 0; }
.t-slot .no {
  flex: 1 1 100%;
  font-size: 13.5px; line-height: 1.45; color: var(--refuse);
  background: var(--refuse-soft);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
.t-slot .no a { color: inherit; font-weight: 700; }
.t-slot.mine { border-color: var(--ok); background: var(--ok-soft); }
.t-slot.mine .room { color: #1D7544; }
.t-slot.blocked { background: #FCFAF6; }
/* flex: none keeps the control from being squeezed, but a long status string
   inside a nowrap .pill would then push the row past the viewport. min-width:0
   plus a wrapping pill makes that structurally impossible rather than a thing
   the next person has to remember. */
.t-slot .act { margin-left: auto; flex: 0 1 auto; min-width: 0; }
.t-slot .act .pill { white-space: normal; text-align: center; }

/* ── Tri-state answer control. "Unsure" is a real answer, so it gets the
   same weight as the other two rather than being a smaller third option. ── */
.t-q { padding: 16px 0; border-top: 1px solid var(--line); }
.t-q:first-of-type { border-top: 0; }
.t-q > .qtext { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.t-q > .qhint { font-size: 13.5px; color: var(--dim); margin: 0 0 10px; max-width: 62ch; }
.t-q .err { margin-top: 8px; }

.t-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.t-tri.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 300px; }
.t-tri label {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
  text-align: center;
}
.t-tri input { accent-color: var(--amber); width: 16px; height: 16px; flex: none; }
.t-tri label:has(input:checked) {
  border-color: var(--amber); background: var(--amber-soft);
  color: var(--amber-deep); font-weight: 700;
}
.t-tri label:has(input[aria-invalid="true"]) { border-color: var(--refuse); }

/* ── Keyboard focus on the thing you can actually see ──────────────────────
   Every control on these pages is a real input wrapped in the label that
   carries the visual affordance, so the global :focus-visible ring in
   styles.css lands on a 16px radio inside a 44px segment and is easy to lose.
   These push the ring out to the segment, the row and the card. Ring colour
   and width match the global rule on purpose; only the target changes. */
.t-tri label:has(input:focus-visible),
.t-ack:has(input:focus-visible),
.t-opt:has(input:focus-visible),
.t-langpick label:has(input:focus-visible) {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.t-slotrow:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Platform roster: 17 rows of the same shape, name left, answer right. */
.t-plat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.t-plat:first-of-type { border-top: 0; }
.t-plat > .pname { flex: 1 1 180px; font-size: 15px; font-weight: 500; min-width: 0; }
.t-plat > .t-tri { flex: 0 1 340px; max-width: 340px; }
.t-plat > .err { flex: 1 1 100%; margin-top: 0; }
.t-plat.answered-open { background: #FFFDF8; }

/* Detail block that opens under a disclosed platform. */
.t-detail {
  flex: 1 1 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  padding: 12px 14px; margin-top: 2px;
  background: #FCFAF6; border: 1px solid var(--line); border-radius: var(--r-md);
}
.t-detail .field { margin-bottom: 0; }
.t-detail label { font-size: 12.5px; }

/* ── Form parts ───────────────────────────────────────────────────────── */
.t-part { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.t-part:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.t-part > h2 { font-size: 19px; margin-bottom: 6px; }
.t-part > .partsub { font-size: 14.5px; color: var(--dim); margin: 0 0 16px; max-width: 66ch; }

.t-ack {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 14.5px; line-height: 1.5; cursor: pointer;
}
.t-ack input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--amber); flex: none; }
.t-ack:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.t-ack .err { flex: 1 1 100%; }

.t-callout {
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: #6B4406;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 13px 16px; margin: 0 0 16px;
  font-size: 14px; line-height: 1.55;
}
.t-callout b { color: #4C3004; }

.t-errsum {
  border: 1px solid var(--refuse);
  background: var(--refuse-soft);
  color: var(--refuse);
  border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 20px;
  font-size: 14.5px;
}
.t-errsum h2 { font-size: 16px; color: var(--refuse); margin-bottom: 6px; }
.t-errsum ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.t-errsum a { color: inherit; font-weight: 600; }

/* ── Two meters that are never added together ─────────────────────────── */
.t-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.t-meter {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.t-meter .t-vlabel {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--dim); display: block; margin-bottom: 10px;
}
.t-meter .amount {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 40px); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.t-meter .basis { font-size: 13.5px; color: var(--dim); margin: 10px 0 0; }
.t-meter dl { margin: 14px 0 0; font-size: 14px; }
.t-meter dl > div {
  display: flex; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--line);
}
.t-meter dt { color: var(--dim); min-width: 0; }
.t-meter dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.t-separate {
  font-size: 13.5px; color: var(--dim); margin: 14px 0 0;
  border-top: 1px dashed var(--line); padding-top: 12px;
}

/* ── Tranche ledger ───────────────────────────────────────────────────── */
.t-tranche {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 8px;
  background: var(--panel);
}
.t-tranche .idx {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #F2ECE1; color: var(--dim);
  font-family: var(--display); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.t-tranche .amt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 76px; }
.t-tranche .waits { flex: 1 1 220px; font-size: 13.5px; color: var(--dim); min-width: 0; }
.t-tranche .state { margin-left: auto; flex: none; }
.t-tranche.vested { border-color: var(--ok); background: var(--ok-soft); }
.t-tranche.vested .idx { background: var(--ok); color: #fff; }
.t-tranche.next { border-color: var(--amber); }
.t-tranche.next .idx { background: var(--amber); color: #3A2703; }

/* Fee election: two options, neither pre-chosen, both explained in full. */
.t-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.t-opt {
  display: block; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); padding: 18px 20px;
}
.t-opt:has(input:checked) { border-color: var(--amber); background: #FFFDF8; box-shadow: 0 0 0 1px var(--amber); }
.t-opt .pick { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.t-opt .pick input { width: 20px; height: 20px; accent-color: var(--amber); flex: none; }
.t-opt .pick b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; }
.t-opt .total {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.t-opt ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--dim); line-height: 1.7; }
.t-opt ul b { color: var(--ink); }

/* ── Documents ────────────────────────────────────────────────────────── */
.t-doc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 10px; background: var(--panel);
}
.t-doc .dname { flex: 1 1 220px; min-width: 0; }
.t-doc .dname b { display: block; font-size: 15px; }
.t-doc .dname span { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.t-doc .dact { margin-left: auto; flex: none; display: flex; gap: 8px; align-items: center; }

/* ── Signing-order docket ─────────────────────────────────────────────── */
.t-docket { list-style: none; margin: 0; padding: 0; }
.t-docket li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.t-docket li:first-child { border-top: 0; }
.t-docket .lab { flex: 1 1 200px; min-width: 0; font-weight: 500; }
.t-docket .at { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.t-docket .done .lab { color: var(--dim); font-weight: 400; }
.t-docket .act { margin-left: auto; flex: none; }

/* ── Small shared bits ────────────────────────────────────────────────── */
.t-note { font-size: 13.5px; color: var(--dim); margin: 14px 0 0; max-width: 70ch; }
.t-note a { font-weight: 600; }
.t-kv { display: grid; gap: 0; margin: 0; font-size: 14.5px; }
.t-kv > div { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.t-kv > div:first-child { border-top: 0; }
.t-kv dt { color: var(--dim); flex: 0 0 190px; min-width: 0; }
.t-kv dd { margin: 0; flex: 1 1 160px; min-width: 0; font-weight: 500; }

.t-langpick { display: flex; flex-wrap: wrap; gap: 10px; }
.t-langpick label {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); font-size: 14.5px; cursor: pointer;
}
.t-langpick input { accent-color: var(--amber); width: 17px; height: 17px; }
.t-langpick label:has(input:checked) { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-deep); font-weight: 600; }

.t-progress { height: 8px; border-radius: 999px; background: #EDE5D7; overflow: hidden; margin: 12px 0 8px; }
.t-progress > i { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.t-progress.ok > i { background: var(--ok); }

.t-list { margin: 0; padding-left: 20px; color: var(--dim); font-size: 14.5px; line-height: 1.85; }
.t-list b { color: var(--ink); }

/* ── The package: total compensation, before any hourly figure ─────────────
   "$30 an hour" reads as the whole deal and is less than a third of it, so
   every pay surface opens on the total and the arithmetic sits directly
   under it as a checkable ledger rather than a claim. This is the only place
   wages and licence money are added together, and it says so. */
.t-package {
  border: 1px solid var(--line);
  border-left: 5px solid var(--amber);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.t-package .t-vlabel {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--dim); display: block; margin-bottom: 8px;
}
.t-package .total {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 8vw, 60px); letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.t-package .cap { font-size: 13.5px; color: var(--dim); margin: 10px 0 0; max-width: 60ch; }
.t-package .rows { margin: 16px 0 0; }
.t-package .row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.t-package .row > span { color: var(--dim); min-width: 0; }
.t-package .row > b { margin-left: auto; font-variant-numeric: tabular-nums; flex: none; }
.t-package .row.sum { border-top-width: 2px; border-top-color: var(--ink); }
.t-package .row.sum > span, .t-package .row.sum > b { color: var(--ink); font-weight: 700; }
.t-package .row.alt > span, .t-package .row.alt > b { font-size: 13.5px; }

/* ── The cascade: three meters, and why they differ ────────────────────────
   SIGNATURE ELEMENT of the pay build. Three numbers about the same sessions
   drawn as a descending staircase, with the "always at or below" relation
   printed between the rungs and what each meter pays on its own row. Three
   tiles side by side would read as three interchangeable facts, which is the
   exact misreading this component exists to prevent. The rungs are told
   apart by indent, rule weight and label, never by colour alone: colour on
   this product means status. */
.t-cascade { display: block; }
.t-cascade .rung {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--panel);
}
.t-cascade .rung.recorded { margin-left: 22px; border-left-color: var(--dim); }
.t-cascade .rung.accepted { margin-left: 44px; border-left-color: #B7AC98; }
.t-cascade .meter { flex: 0 0 170px; min-width: 0; }
.t-cascade .meter .n {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 5vw, 36px); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.t-cascade .meter .u {
  display: block; margin-top: 4px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--dim);
}
.t-cascade .body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-cascade .body .pays { font-size: 15px; }
.t-cascade .body .what { font-size: 13.5px; color: var(--dim); line-height: 1.5; max-width: 62ch; }
.t-cascade .body .foot { font-size: 13px; color: var(--amber-deep); }
.t-cascade .rel {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 0 22px; padding: 6px 0;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--dim);
}
.t-cascade .rel::before {
  content: ""; width: 4px; height: 22px; flex: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}

/* ── The one flow: offer, five documents, then a booking ───────────────── */
.t-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.t-steps li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.t-steps li:first-child { border-top: 0; }
.t-steps .n {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: #F2ECE1; color: var(--dim);
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.t-steps .lab { flex: 1 1 220px; min-width: 0; font-size: 14.5px; }
.t-steps .lab b { display: block; }
.t-steps .lab span { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; }
.t-steps .act { margin-left: auto; flex: none; }
.t-steps .done .n { background: var(--ok); color: #fff; }
.t-steps .done .n::after { content: "\2713"; font-size: 15px; }
.t-steps .done .lab b { color: var(--dim); font-weight: 500; }
.t-steps .now .n { background: var(--amber); color: #3A2703; }
.t-steps .later .lab b { color: var(--dim); }

/* Operative agreement text, rendered on the page it is signed on. Never
   behind a link: a document you scroll past is a document you can prove was
   in front of you. */
.t-doctext { max-width: 68ch; font-size: 15px; line-height: 1.65; }
.t-doctext h4 {
  font-family: var(--display); font-size: 15.5px; letter-spacing: -.01em;
  margin: 26px 0 8px; padding-top: 16px; border-top: 1px solid var(--line);
}
.t-doctext h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.t-doctext p { margin: 0 0 10px; color: #3A332A; }
.t-doctext ul { margin: 0 0 12px; padding-left: 20px; color: #3A332A; line-height: 1.75; }
.t-doctext b { color: var(--ink); }
.t-doctext table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13.5px; }
.t-doctext th, .t-doctext td {
  text-align: left; vertical-align: top;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
}
.t-doctext th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .t-verdict, .t-refusal, .t-meter { padding: 18px 18px; }
  .t-tri, .t-tri.two { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .t-tri.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-plat > .t-tri { flex: 1 1 100%; max-width: none; }
  .t-tri label { padding: 0 6px; font-size: 13.5px; gap: 6px; }
  .t-slot .act, .t-tranche .state, .t-doc .dact { margin-left: 0; }
  .t-slotrow { flex-wrap: wrap; gap: 4px 12px; }
  .t-slotrow .go { margin-left: auto; }
  .t-kv dt { flex: 1 1 100%; }
  .t-package { padding: 18px; }
  /* A ledger line is a label and a figure, and at 390px a label like "Wages,
     about 67 clocked hours at $30" leaves the figure three pixels of air. It
     reads as "$30$2,010", which is the one misreading this whole block exists
     to prevent. Under 520px the figure takes its own line, still flush right
     so the column of amounts still scans top to bottom. */
  .t-package .row { flex-wrap: wrap; row-gap: 2px; }
  .t-package .row > span { flex: 1 1 100%; }
  .t-package .row > b { flex: 1 1 100%; margin-left: 0; text-align: right; }
  /* The staircase indent costs more than it earns at 390px: it eats the
     number's own line. The rungs keep their order and their rule weights,
     which is what carries the relation, and the "always at or below" strip
     stays between them. */
  .t-cascade .rung { padding: 14px 15px; }
  .t-cascade .rung.recorded, .t-cascade .rung.accepted { margin-left: 0; }
  .t-cascade .rel { margin-left: 0; }
  .t-cascade .meter { flex: 1 1 100%; }
  .t-steps .act { margin-left: 0; flex: 1 1 100%; }
  .t-steps .act .btn { width: 100%; justify-content: center; }
  .t-doctext table { display: block; overflow-x: auto; }
}