/* ==========================================================================
   PCB Transactions — the house style.

   Lifted from pcb-prototype.html, which is the source of truth for how this
   system looks as well as how it behaves. Values are the prototype's: the
   palette is sampled from the PCBMG logo and David approved it on 2026-07-29,
   so they are copied rather than reinterpreted.

   Everything here is shared. A new screen that uses .card, .pill, table and
   .sec inherits the look without adding any CSS of its own, which is the point
   of having this file at all.
   ========================================================================== */

:root{
  /* Sampled from the PCBMG logo. */
  --brand:#DC2544; --brand-d:#B81C37; --brand-l:#FBE9EC;
  --ink:#231F20; --ink2:#56514F; --ink3:#8B8482; --ink4:#B5AFAC;
  --line:#E7E2DE; --line2:#F2EEEB;
  --bg:#FAF8F6; --card:#FFFFFF;
  --ok:#1D6B45; --ok-bg:#E9F3ED;
  --pos:#437D14; --pos-bg:#F1F7E9; --pos-line:#BFD9A0;
  --warn:#8A5A18; --warn-bg:#FBF2E2;
  --info:#1D4E7A; --info-bg:#EAF1F7;
  --bad:#A61E32; --bad-bg:#FBEBEE;
  --mute-bg:#F2EEEB; --calc-bg:#F7F4F1;

  --serif:'Cormorant Garamond',Georgia,'Iowan Old Style',serif;
  --sans:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:var(--serif);
  --sh:0 1px 2px rgba(35,31,32,.04),0 4px 14px rgba(35,31,32,.05);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Figures line up in columns only if the digits are the same width. Every
   money and date cell in the system carries one of these. */
.mono,.money{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:.01em}
/* True identifiers -- APN, escrow number, licence number -- are read character
   by character, which is the one place a monospace face earns its keep. */
.code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.94em;letter-spacing:0}

/* ---------- header ---------- */

.topbar{
  background:#fff;border-bottom:1px solid var(--line);
  padding:13px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{display:block;height:48px;width:auto}
@media(max-width:1100px){.logo img{height:40px}}
.spacer{flex:1}
.who{font-size:13px;text-align:right;line-height:1.4;font-weight:600}
.who .role{font-weight:400;color:var(--ink3)}
/* Somebody licensed for both jobs carries two titles. Separated by a middot on
   one line rather than stacked, so the topbar keeps its height whether a person
   holds one title or three. */
.who .role-sep{font-weight:400;color:var(--ink4);margin:0 4px}

/* The nav is its own band under the header, as in the prototype, so the
   current section is marked by a rule directly above the page it opens. */
/* Wraps rather than scrolling sideways. The prototype's nav was written when a
   broker saw five sections; at eleven the row is wider than the 1260px page on
   any normal laptop, and a horizontal scrollbar hides whole sections behind a
   gesture nobody thinks to try. Each item still stays on one line. */
.nav{
  background:#fff;border-bottom:1px solid var(--line);
  padding:0 30px;display:flex;gap:4px;flex-wrap:wrap;
}
.nav a{
  color:var(--ink2);padding:13px 16px;font-size:13.5px;font-weight:600;
  border-bottom:2px solid transparent;white-space:nowrap;transition:.12s;
}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.on{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- page ---------- */

.wrap{max-width:1260px;margin:0 auto;padding:32px 30px 90px}
.wrap.narrow{max-width:430px}

.page-h{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
h1{font-family:var(--display);font-size:33px;font-weight:600;letter-spacing:-.005em;line-height:1.1}
h2{font-family:var(--display);font-size:19px;font-weight:600}
.sub{color:var(--ink3);font-size:13.5px}
.tiny,.muted{font-size:12.5px;color:var(--ink3)}
.flag{color:var(--bad);font-size:12.5px;font-weight:600}
.back{display:inline-block;color:var(--ink3);font-size:13px;font-weight:600;margin-bottom:14px}
.back:hover{color:var(--brand);text-decoration:none}

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

/* No padding of its own: a card is a frame, and .card-b is what holds content
   away from the edge. That is what lets a table sit flush inside one. */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:18px;box-shadow:var(--sh);overflow:hidden;
}
.card-h{padding:16px 20px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:12px}
.card-h h2{font-family:var(--display);font-size:19px;font-weight:600}
.card-b{padding:20px}
.sec-edit{margin-left:auto;font-size:12.5px;font-weight:600}

/* ---------- forms ---------- */

/* Every textual control, named by what it is *not*.

   This was a list of the eight input types that happened to be in use, so any
   type not on it silently rendered as the browser's own box -- Arial, 13.3px,
   no padding, square corners, 19px tall against the 40px of the field beside
   it. `type=tel` on the participant phone and `type=search` on the lender
   filter were both missing, and both looked exactly like the unstyled
   commission readout reported on 2026-08-09. The same defect twice is a
   defective rule, not two defective fields.

   Stated as an exclusion, so a control added later is styled by default and
   only the genuinely different ones -- boxes, buttons, sliders -- opt out.

   `:where()` carries no specificity, so this selector weighs the same as a bare
   `input`. That is deliberate and load-bearing: `input[readonly]`, `input.calc`
   and `.field input` all sit above it and must keep winning. Spelling the
   `:not()`s out directly would have raised this to nine classes' worth and
   quietly repainted every readout on the site. */
input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button],
  [type=reset], [type=image], [type=range], [type=color], [type=hidden])),
select,textarea{
  font:inherit;font-size:14px;padding:8px 11px;
  border:1px solid #DBD5D1;border-radius:8px;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l);
}
input[readonly]{background:var(--calc-bg);color:var(--ink2);border-color:var(--line)}
select{cursor:pointer}
textarea{width:100%}

.field{margin-bottom:18px}
.field>label{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink3);font-weight:700;margin-bottom:6px;
}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%}

/* Two tiers of required. Red is what a file needs to count as open; amber is
   what it needs before a reviewer's hour is spent on it, and only appears once
   the red is cleared. Different hues, not different shades: an agent has to be
   able to tell them apart at a glance and one in ten cannot see red-green. */
.req{color:var(--brand);font-weight:700}
.req2{color:#C47B0A;font-weight:800}
.legend{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--ink2);
  padding:10px 14px;margin-bottom:18px;
  background:#FCFBFA;border:1px solid var(--line2);border-radius:9px;
}

.btn{
  background:var(--ink);color:#fff;border:0;padding:9px 18px;border-radius:9px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s;
  display:inline-block;text-decoration:none;
}
.btn:hover{background:#000;text-decoration:none;color:#fff}
.btn.pri{background:var(--brand)}
.btn.pri:hover{background:var(--brand-d)}
/* .plain is this project's older name for the prototype's .ghost. Both are
   accepted so a template does not have to be rewritten to be restyled. */
.btn.ghost,.btn.plain{background:#fff;color:var(--ink);border:1px solid #DBD5D1}
.btn.ghost:hover,.btn.plain:hover{background:#FBF9F8;border-color:var(--ink4);color:var(--ink)}
.btn.sm{padding:6px 13px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.4;cursor:not-allowed}

.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

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

table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink3);font-weight:700;padding:12px 14px;
  border-bottom:1px solid var(--line);background:#FCFBFA;white-space:nowrap;
}
td{padding:13px 14px;border-bottom:1px solid var(--line2);vertical-align:middle;color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
td.tiny,td .tiny,td.muted,td .muted{font-size:13px;color:var(--ink2)}
td.r,th.r{text-align:right}
td.mono{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
td .money,td.money{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
tbody tr:hover{background:#FCFBFA}

.tblwrap{overflow-x:auto}
.txtbl{min-width:760px}

/* The approved lender list, tightened on David's instruction of 2026-08-08 so
   more of a lender fits on one line. Two steps: name, loan types and A/E come
   down a little, and email and phone come down further -- they are the longest
   values in the row and the ones that were wrapping. */
.lendertbl td{padding:9px 12px}
.lendertbl .l-name{font-size:13px;font-weight:600}
.lendertbl .l-types{font-size:12px}
.lendertbl .l-types .pill{font-size:10px;padding:2px 7px}
.lendertbl td.l-ae{font-size:12px}
.lendertbl td.l-phone,.lendertbl td.l-email{font-size:11.5px}
.lendertbl td.l-email{word-break:break-all}
.lendertbl td.l-web{font-size:12px}
.addr{color:var(--brand);font-weight:600}
.addr-sub{font-size:12px;font-weight:400;color:var(--ink3);margin-top:2px}

/* A row breaking a 3-day rule, and a checklist row still missing its document.
   Both are read at a glance down a long list, so the cue is the whole row. */
tr.oob td{background:#fffafa}
tr.oob td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
tr.unmet td{background:#FDF4F4}

.empty{padding:38px;text-align:center;color:var(--ink3)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px}

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

.listctl{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line2);background:#FCFBFA;
}
.seg{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.seg .btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.seg .btn.on:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}

/* ---------- stat boxes ---------- */

/* Three or four short facts in a row. Used by the agent's "My Week" strip. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;box-shadow:0 1px 2px rgba(35,31,32,.04);
}
.stat .k{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink3);font-weight:700;
}
.stat .v{
  font-family:var(--display);font-size:29px;font-weight:600;margin-top:5px;
  font-variant-numeric:tabular-nums;line-height:1;
}
/* A date is longer than a count and would otherwise wrap out of the box. */
.stat .v.date{font-size:19px;padding-top:4px}
.stat .v.bad{color:var(--bad)}
.stat .v.warn{color:var(--warn)}
.stat .d{font-size:11.5px;color:var(--ink4);margin-top:5px}

/* ---------- loan type programs ---------- */

/* Jumped to from the page header, so it should not land flush against the top
   of the window with no air above it. */
#loan-programs{scroll-margin-top:14px}

/* A row each rather than a chip each, because each one is renameable in place
   and a text box does not fit in a chip. */
.proglist{margin-bottom:14px}
.progrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 0;border-top:1px solid var(--line);
}
.progrow:first-child{border-top:0}
.progname{display:flex;align-items:center;gap:7px}
.progname input{max-width:230px}
.progcount{color:var(--ink3);font-size:12px;min-width:82px}
/* Retired reads as retired wherever it appears, rather than simply vanishing. */
.progrow.retired .progname input{color:var(--ink3);font-style:italic}

/* ---------- ready to disburse ---------- */

/* The office's payout queue. A work queue rather than a stat, so it spans the
   row on its own and each file gets a line with the four facts needed to act:
   which file, whose money, how much, and how long it has been sitting. */
.stat.rtd{grid-column:1/-1}
/* The agent's name takes a share of the width rather than being pushed to the
   far right by the address: the four facts read as one line that way, instead
   of an address at one edge and everything else at the other. */
.rtd-row{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) 96px 62px;
  gap:14px;align-items:baseline;
  padding:5px 0;border-top:1px solid var(--line);
}
.rtd-row:first-child{border-top:0}
/* A long name is cut rather than allowed to wrap the row out of alignment --
   the columns to its right are the ones being compared down the queue. */
.rtd-who{color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tabular figures so the money and the day counts line up down the column and
   can be compared by eye without reading each one. */
.rtd-net,.rtd-age{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.rtd-age{color:var(--ink3)}
/* Past the office's threshold. The same signal the Closed Files box uses for a
   review running out of time -- one colour, one meaning, everywhere. */
.rtd-age.over{color:var(--warn);font-weight:700}
.rtd-tot{
  margin-top:7px;padding-top:6px;border-top:1px solid var(--line);
  color:var(--ink3);font-weight:600;
}

@media (max-width:700px){
  /* Two columns rather than four: the address and the age are what the queue is
     read for, and the other two wrap under them rather than being squeezed. */
  .rtd-row{grid-template-columns:1fr auto}
}

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

/* RE and Loan side by side rather than averaged. They are separate businesses
   under one company, and the mix is the only reason anyone reads these. */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
@media(max-width:820px){.pcards{grid-template-columns:1fr}}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;box-shadow:0 1px 2px rgba(35,31,32,.04);
}
.pcard .pc-h{
  font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink3);margin-bottom:10px;
}
.pc-tbl{
  display:grid;grid-template-columns:auto repeat(3,minmax(52px,1fr));
  gap:0 8px;font-variant-numeric:tabular-nums;
}
.pc-tbl>div{padding:3px 0;font-size:12.5px;color:var(--ink2);text-align:right}
.pc-tbl>div.l{text-align:left;color:var(--ink3)}
.pc-tbl>div.hd{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--ink4);border-bottom:1px solid var(--line2);
  padding-bottom:5px;margin-bottom:2px;
}
/* The Total column, set off by a rule. Named .pctot rather than .tot: an
   earlier version collided with the money-input style and rendered pink. */
.pc-tbl>div.pctot{font-weight:700;color:var(--ink)}
.pc-tbl>div:nth-child(4n){border-left:1px solid var(--line2);padding-left:11px}
.pc-tbl>div.hd:nth-child(4n){padding-left:11px}

/* ---------- pipeline board ---------- */

.board{display:grid;grid-template-columns:repeat(5,minmax(178px,1fr));gap:12px;overflow-x:auto}
.col-h{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink3);
  font-weight:700;padding:0 4px 10px;display:flex;justify-content:space-between;gap:8px;
}
.tile{
  display:block;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:13px 14px;margin-bottom:10px;box-shadow:var(--sh);transition:.12s;
  color:var(--ink);text-decoration:none;
}
.tile:hover{border-color:var(--ink4);transform:translateY(-1px);text-decoration:none}
.tile .a{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:2px}
.tile .m{
  display:flex;justify-content:space-between;gap:8px;margin-top:8px;
  font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:500;
}
/* Amber edge: a review that has been open too long. Red edge: a 3-day rule
   broken. Red wins -- a file can be both, and the compliance breach is the one
   with a deadline attached. */
.tile.stale{border-left:3px solid var(--warn)}
.tile.oob{border-left:3px solid var(--bad);background:#fffafa;border-color:#f0c9cd}
.tile .oobtag{display:block;margin-top:7px;font-size:11px;font-weight:700;color:var(--bad)}

/* The review queue reuses the board's tiles, laid out as a grid rather than a
   column. Same component, different arrangement. */
.queue{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.queue .tile{margin-bottom:0}
.officers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.officers .tile{margin-bottom:0}
.officers .tile .a{font-size:19px;font-weight:700}

/* The × inside a chip. A button rather than a link, because removing something
   is a POST and a link that changes data is a link somebody can be walked into. */
.chipx{
  background:none;border:0;padding:0 0 0 4px;cursor:pointer;
  color:inherit;font-weight:800;font-size:inherit;line-height:1;
}

/* ---------- email chooser ---------- */

/* Most of the office lives in webmail, where a mailto: opens whatever the
   machine was set up with years ago -- usually nothing. */
.emenu{
  position:absolute;z-index:60;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(35,31,32,.17);
  padding:6px;min-width:196px;font-size:13px;
}
.emenu .emenu-h{
  font-size:11px;color:var(--ink3);padding:5px 9px 7px;
  border-bottom:1px solid var(--line2);margin-bottom:4px;
  word-break:break-all;font-weight:600;
}
.emenu a,.emenu button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 9px;border-radius:7px;color:var(--ink);text-decoration:none;
  background:none;border:0;font:inherit;cursor:pointer;
}
.emenu a:hover,.emenu button:hover{background:#faf9fa;text-decoration:none}

/* ---------- checklist upload panel ---------- */

/* One row per document, opening onto its files, its note and the upload box.
   A <details> rather than script: the browser already does this. */
.doc{border-bottom:1px solid var(--line2)}
.doc:last-child{border-bottom:0}
.doc>summary{
  display:flex;align-items:center;gap:10px;padding:11px 4px;cursor:pointer;
  list-style:none;font-size:13.5px;
}
.doc>summary::-webkit-details-marker{display:none}
.doc>summary::before{
  content:"";flex:0 0 auto;width:0;height:0;
  border:4px solid transparent;border-left-color:var(--ink4);
  transition:transform .12s ease;
}
.doc[open]>summary::before{transform:rotate(90deg) translateX(-1px)}
.doc .dt{flex:1;font-weight:600;color:var(--ink)}
.doc.unmet .dt{color:var(--bad)}
.doc.done .dt{color:var(--ink3);font-weight:500}
.uppanel{padding:4px 4px 18px 22px}

/* The file-type badge. Three characters, so a list of attachments reads as
   what it is before any filename is parsed. */
.ficon{
  display:inline-block;min-width:34px;text-align:center;padding:2px 5px;
  border-radius:5px;background:var(--line2);color:var(--ink3);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;margin-right:7px;
}
.ficon.pdf{background:#FBEAEA;color:#A32B2B}
.ficon.img{background:#EAF1FB;color:#2B5AA3}

/* ---------- list rows ---------- */

/* A plain row with a title, a line of detail and its actions on the right.
   Used by the forms library, where a table would be four columns of nothing. */
.lrow{
  display:flex;gap:14px;align-items:center;
  padding:13px 2px;border-bottom:1px solid var(--line2);
}
.lrow:last-child{border-bottom:0}
.lrow .a{font-weight:650;font-size:14.5px;color:var(--ink)}

/* The play marker beside a training video. YouTube's red, so the row reads as
   a video at a glance rather than as another download. */
.ytmark{
  flex:0 0 42px;height:30px;border-radius:6px;background:#FF0000;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;
}

/* ---------- review findings ---------- */

.ritems{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;max-width:680px}
.ritem{
  display:flex;gap:10px;align-items:flex-start;padding:10px 13px;
  border-bottom:1px solid var(--line2);font-size:13px;
}
.ritem:last-child{border-bottom:0}
.ritem.done{background:#F7FAF7;color:var(--ink3)}
.ritem.done>div>div:first-child{text-decoration:line-through}
.ritem form{margin:0}

/* ---------- pills ---------- */

.pill{
  display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;padding:4px 10px;border-radius:20px;white-space:nowrap;
  background:var(--mute-bg);color:var(--ink3);
}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-mute{background:var(--mute-bg);color:var(--ink3)}
.p-bad{background:var(--bad-bg);color:var(--bad)}
.pill.dual{background:var(--warn-bg);color:var(--warn)}
.dualchip{font-size:8px;padding:1px 5px;vertical-align:middle;margin-left:5px}
td .pill,th .pill{white-space:nowrap}

/* ---------- banners ---------- */

/* One shape for everything the page needs to say before the content: a rule
   down the left, the colour carrying the urgency. */
.banner,.errors,.notice{
  border-radius:0 12px 12px 0;padding:14px 18px;font-size:13.5px;
  margin-bottom:16px;box-shadow:var(--sh);
  background:var(--warn-bg);border:1px solid #E6D3AC;border-left:3px solid var(--warn);color:#6B4512;
}
.banner.bad,.errors{
  background:var(--bad-bg);border-color:#F0C9CD;border-left-color:var(--bad);color:var(--bad);
}
.banner.ok{
  background:var(--pos-bg);border-color:var(--pos-line);border-left-color:var(--pos);color:#2C5A0E;
}
.banner b{font-weight:700}
.banner ul{margin:9px 0 0 18px}
.banner li{margin-bottom:4px}
.banner .muted{color:inherit;opacity:.8}

.note{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  padding:14px 18px;border-radius:0 12px 12px 0;font-size:13.5px;color:var(--ink2);
  margin-bottom:20px;box-shadow:var(--sh);
}

/* ---------- accordion sections ---------- */

.sec{
  border:1px solid var(--line);border-radius:13px;margin-bottom:11px;
  background:#fff;overflow:hidden;box-shadow:var(--sh);
}
.sec>summary{
  padding:15px 19px;cursor:pointer;display:flex;align-items:center;gap:11px;
  list-style:none;font-family:var(--display);font-size:18px;font-weight:600;
}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary:hover{background:#FCFBFA}
.sec[open]>summary{border-bottom:1px solid var(--line2)}
.chev{
  width:7px;height:7px;flex:0 0 auto;
  border-right:1.8px solid var(--brand);border-bottom:1.8px solid var(--brand);
  transform:rotate(-45deg);transition:transform .16s;
}
.sec[open] .chev{transform:rotate(45deg)}
.sec-body{padding:22px 19px}
.sec-body>table:first-child,.sec-body>.tblwrap:first-child{margin-top:-6px}

/* ---------- definition lists ---------- */

/* The read-only counterpart of the prototype's .fields grid: same column,
   same right-aligned label, no inputs. */
dl{display:grid;grid-template-columns:225px 1fr;gap:13px 20px;align-items:baseline;max-width:820px}
dt{font-size:13px;color:var(--ink2);font-weight:500;text-align:right}
dd{color:var(--ink);font-size:14px}
@media(max-width:640px){
  dl{grid-template-columns:1fr;gap:2px 0}
  dt{text-align:left;margin-top:10px}
}

/* ---------- ledger ---------- */

/* The panel fills the section it sits in.

   It was pinned to 560px with `overflow:hidden`, which on a dual file cut the
   second transaction-fee override clean off the right-hand edge -- the row
   carries one per side, and two of them plus a label and a figure do not fit in
   528px of content box. Reported by David on 2026-08-10 as "two Override
   controls, the second clipped".

   Widening rather than shrinking the controls: the section around it is 1160px
   at 1280px of viewport, so the room was always there and the cap was the whole
   defect. `overflow:hidden` stays -- it is what keeps the rounded corners -- and
   with the width free there is nothing left for it to cut. */
.ledger{
  border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:6px;background:#fff;
}
.ledger .row{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid var(--line2);font-size:13.5px;
  flex-wrap:wrap;
}
/* Every override on the panel starts at the same x, whatever the row's label
   says and however many the row carries. A fixed column rather than whatever
   the flex line has left over, which is what made each row's controls land in a
   different place. */
.ledger .row .ovrs{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;width:268px;
}
/* A note belongs under its row rather than beside it: `flex-basis:100%` puts it
   on its own line, and `nowrap` keeps "both sides added together: $12,960.00
   listing + $8,640.00 selling" on one, which is how it reads as one fact. */
.ledger .row .rownote{
  flex:1 0 100%;margin-top:6px;font-size:11.5px;color:var(--ink3);
  white-space:nowrap;overflow-x:auto;
}
.ledger .row .rownote.muted{opacity:.7}
.ledger .row:last-child{border-bottom:0}
.ledger .row.sum{background:#FCFBFA;font-weight:700;border-top:1px solid var(--ink)}
.ledger .row .op{color:var(--brand);width:13px;text-align:center;font-weight:700;flex:0 0 auto}
.ledger .row .lbl{flex:1;color:var(--ink2)}
.ledger .row.sum .lbl{color:var(--ink)}
/* Fixed rather than a minimum, so the override column beside it starts at the
   same x on every row. With `min-width` a wider figure -- $12,960.00 against
   $598.00 -- pushed its own row's controls further right than the row above,
   which is what "align every Override input to a common column" was about. */
.ledger .row .val{
  font-variant-numeric:tabular-nums;flex:0 0 132px;text-align:right;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.ledger .row.sum .val{font-weight:700}

/* A calculated readout: the same size and weight as the money it reports, and
   visibly not an input. It had no rule at all, so it rendered as the browser's
   default text box -- small, square and narrower than every field above it,
   while holding the most important figure on the screen.

   The `max-width` that first rule carried is gone. It left the box 260px wide
   against the 1160px of every other field on the section, so the figure still
   read as an afterthought beside the boxes it is the point of -- reported by
   David twice, and measured on the live screen on 2026-08-09. A readout now
   fills its field exactly as an input does; what marks it as calculated is the
   weight, the tinted ground and the absence of a focus ring. */
input.calc{
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--calc-bg);
  border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;width:100%;
}

/* The dollars belonging to the rate directly above them. Indented and set a
   size down from the readout it echoes, so it reads as an answer to the box it
   sits under rather than as another question. */
.under{margin-top:8px;padding-left:13px;border-left:2px solid var(--line2)}
.under>label{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink3);font-weight:700;margin-bottom:5px;
}
.under input.calc{font-size:15px;padding:9px 12px}
/* Read-only, so it takes no focus ring: a ring invites typing into a figure
   that is calculated, and the way to depart from it is the override beside it. */
input.calc:focus{outline:none;border-color:var(--line)}

/* An override sits beside the figure it replaces, behind its own checkbox. It
   is dimmed until the checkbox is ticked, so a row of them reads as "these are
   calculated" rather than as seven boxes asking to be filled in. */
.ovr{display:flex;align-items:center;gap:7px;flex:0 0 auto}
/* Fixed, so the box beside it starts in the same place on every row -- and wide
   enough for "Listing side" and "Selling side", which is what the two fees on a
   dual file are called now that they are told apart. */
.ovr .ovr-switch{
  display:flex;align-items:center;gap:4px;white-space:nowrap;
  color:var(--ink3);cursor:pointer;font-weight:600;
  flex:0 0 auto;width:112px;
}
.ovr input:disabled,.ovr textarea:disabled{background:var(--mute-bg);color:var(--ink3)}
.ovr input:not([type="checkbox"]){max-width:118px;font-size:12.5px;padding:4px 7px}
.ovr .ovr-why{display:none}
.ovr.on .ovr-why{display:inline-flex}
.ovr.on .ovr-why input{max-width:190px}
.ovr.on .ovr-switch{color:var(--brand)}

/* The review's status boxes, as the legacy Review Info panel shows them. Ticked
   by the actions that cause them, never by hand, so these are marks rather than
   inputs -- drawn square to read as the checkboxes they replace. */
.rstates{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line2);
}
.rstate{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink3)}
.rstate-box{
  width:15px;height:15px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--ok);font-weight:700;
}
.rstate.on{color:var(--ink);font-weight:600}
.rstate.on .rstate-box{border-color:var(--ok);background:#E4F0E9}

/* Present for screen readers, out of the way visually: the tick alone carries
   no text, so each box states its own yes or no. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- workflow rail ---------- */

/* Chevrons rather than blocks: the file moves left to right and the shape
   says so without a caption. The arrow is a border triangle hanging off the
   right edge, which is why every step needs the same height. */
.rail{display:flex;align-items:stretch;overflow-x:auto;padding:2px 0;margin:22px 0}
.step{
  flex:1;min-width:112px;min-height:46px;position:relative;
  padding:12px 9px 12px 22px;background:var(--mute-bg);color:var(--ink3);
  font-size:11px;font-weight:700;line-height:1.35;
  text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;
}
.step:first-child{border-radius:9px 0 0 9px;padding-left:14px}
.step:last-child{border-radius:0 9px 9px 0}
.step::after{
  content:"";position:absolute;right:-12px;top:0;width:0;height:0;z-index:2;
  border-left:12px solid var(--mute-bg);
  border-top:23px solid transparent;border-bottom:23px solid transparent;
}
.step:last-child::after{display:none}
.step.done{background:#E4F0E9;color:var(--ok)}
.step.done::after{border-left-color:#E4F0E9}
.step.now{background:var(--brand);color:#fff}
.step.now::after{border-left-color:var(--brand)}