/* =========================================================
   LITORA AI  |  Authenticated workspace
   Loads after theme.css and site.css
   ========================================================= */

.app-body{background:var(--paper-alt);min-height:100vh}

/* ===================== Sidebar shell ===================== */
.app-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.app-col{display:flex;flex-direction:column;min-width:0}
.app-main{flex:1;padding:2rem 0 3.5rem}
.app-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.app-wrap--narrow{max-width:720px}

/* ---------- Sidebar ---------- */
.side{
  grid-row:1;position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;
  background:linear-gradient(185deg,var(--maroon-900),var(--maroon-800));
  border-right:1px solid rgba(214,196,147,.12);color:#c4ccd8;z-index:70;
}
.side--admin{background:linear-gradient(185deg,#12161f,var(--maroon-900))}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:1.1rem 1rem .9rem;border-bottom:1px solid rgba(214,196,147,.1)}
.side-brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;min-width:0}
.side-glyph{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(150deg,var(--maroon-700),var(--maroon-900));color:var(--gold-300);
  box-shadow:inset 0 0 0 1px rgba(214,196,147,.22)}
.side-word{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1;color:#fff;min-width:0}
.side-ai{color:var(--gold-300);margin-left:.12em}
.side-word small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);font-weight:500;margin-top:3px;white-space:nowrap}
.side-close{display:none;background:none;border:0;color:#c4ccd8;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem}

.side-nav{flex:1;overflow-y:auto;padding:.7rem .7rem 1rem;scrollbar-width:none;-ms-overflow-style:none}
.side-nav::-webkit-scrollbar{width:0;height:0;display:none}
.side-group{font-family:var(--mono);font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
  color:#6f7a8a;margin:1rem .8rem .4rem;font-weight:500}
.side-group:first-child{margin-top:.2rem}
.side-link{display:flex;align-items:center;gap:.75rem;padding:.55rem .8rem;border-radius:8px;
  font-size:.88rem;font-weight:500;color:#c4ccd8;text-decoration:none;transition:background .15s,color .15s;margin-bottom:1px;line-height:1.2}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.on{background:rgba(214,196,147,.14);color:#fff}
.side-link.on .side-ico{color:var(--gold-300)}
.side-ico{width:18px;height:18px;flex:0 0 auto;display:grid;place-items:center;color:#9aa6b8}
.side-ico svg{width:18px;height:18px}
.side-link:hover .side-ico{color:var(--gold-300)}
.side-link--danger{color:#e0a49b}
.side-link--danger:hover{background:rgba(154,63,54,.22);color:#fff}
.side-link--danger .side-ico{color:#c98a80}

.side-foot{padding:.8rem;border-top:1px solid rgba(214,196,147,.1)}
.side-credits{display:flex;align-items:baseline;gap:.5rem;padding:.6rem .85rem;border-radius:10px;
  background:rgba(214,196,147,.1);border:1px solid rgba(214,196,147,.22);text-decoration:none;margin-bottom:.5rem}
.side-credits-n{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:#fff;line-height:1}
.side-credits-l{font-size:.72rem;color:#aeb8c6;line-height:1.2}
.side-credits.is-empty{background:rgba(154,63,54,.16);border-color:rgba(154,63,54,.4)}
.side-credits.is-empty .side-credits-n{color:#f0b7ae}
.side-whoami{display:flex;align-items:center;gap:.6rem}
.side-whoami-txt{min-width:0}
.side-whoami-txt strong{display:block;font-size:.85rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-whoami-txt small{font-size:.72rem;color:#9aa6b8}
.avatar--sm{width:30px;height:30px;font-size:.8rem}

.side-scrim{position:fixed;inset:0;background:rgba(11,16,24,.55);z-index:65;border:0}

/* ---------- Top bar (in main column) ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  background:rgba(247,245,240,.9);backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--paper-line);padding:0 clamp(20px,3vw,40px);height:66px}
.topbar-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.topbar-burger span{display:block;width:22px;height:2px;background:var(--ink-700);border-radius:2px}
.topbar-title{flex:1;min-width:0}
.topbar-title h1{font-size:1.15rem;font-family:var(--font-display);font-weight:600;color:var(--ink-900);
  margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-kicker{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);display:block}
.topbar-right{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}

.plan-chip{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--maroon-700);color:#f2ecda;border:1px solid var(--maroon-700);
  padding:.4rem .85rem;border-radius:999px;white-space:nowrap;text-decoration:none}
.plan-chip:hover{background:var(--maroon-800);color:#fff}
.plan-chip--warn{background:var(--dissent);color:#fff;border-color:var(--dissent)}

.user-menu{position:relative}
.user-menu summary{list-style:none;cursor:pointer}
.user-menu summary::-webkit-details-marker{display:none}
.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(150deg,var(--maroon-700),var(--maroon-900));color:var(--gold-300);
  font-weight:700;font-size:.92rem;box-shadow:inset 0 0 0 1px rgba(214,196,147,.25)}
.user-drop{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:#fff;
  border:1px solid var(--paper-line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);overflow:hidden;z-index:80}
.user-drop-head{padding:.9rem 1rem;border-bottom:1px solid var(--paper-line);display:flex;flex-direction:column;gap:.15rem}
.user-drop-head strong{font-size:.9rem;color:var(--ink-900)}
.user-drop-head span{font-size:.78rem;color:var(--ink-500);word-break:break-all}
.role-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-600);background:var(--gold-soft);padding:.15rem .45rem;border-radius:3px;align-self:flex-start;margin-top:.3rem}
.user-drop a{display:block;padding:.65rem 1rem;font-size:.87rem;color:var(--ink-700);border-bottom:1px solid var(--paper-line);text-decoration:none}
.user-drop a:last-child{border-bottom:0}
.user-drop a:hover{background:var(--paper-alt);color:var(--ink-900)}
.user-drop a.danger{color:var(--dissent)}

.app-banner{background:var(--dissent-bg);border-bottom:1px solid rgba(154,63,54,.25);
  color:#8a352c;font-size:.86rem;padding:.7rem clamp(20px,3vw,40px);text-align:center}
.app-banner a{color:#8a352c;text-decoration:underline;font-weight:600;margin-left:.4rem}

/* ---------- Page head ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.8rem}
.page-head h1{font-size:clamp(1.4rem,3vw,1.95rem);margin:0 0 .3rem;letter-spacing:-.01em}
.page-head p{margin:0;color:var(--ink-500);font-size:.92rem}
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-500);margin-bottom:.5rem}
.crumbs a{color:var(--ink-500)}
.crumbs a:hover{color:var(--gold-500)}

/* ---------- Panels ---------- */
.panel{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.25rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.3rem;border-bottom:1px solid var(--paper-line);background:var(--paper-alt)}
.panel-head h2{font-size:1rem;margin:0}
.panel-head .count{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-500)}
.panel-body{padding:1.3rem}
.panel-body.tight{padding:0}

/* ---------- Stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.75rem}
.tile{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);padding:1.15rem 1.3rem}
.tile dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:.5rem}
.tile dd{margin:0;font-family:var(--font-display);font-size:1.7rem;color:var(--ink-900);line-height:1.1}
.tile dd small{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--ink-500);
  font-weight:400;margin-top:.35rem}
.meter{height:5px;border-radius:4px;background:var(--paper-line);overflow:hidden;margin-top:.7rem}
.meter i{display:block;height:100%;background:var(--gold-500)}
.meter i.hot{background:var(--dissent)}

/* ---------- Data table ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:.88rem}
.dtable thead th{background:var(--paper-alt);font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-500);padding:.75rem 1.1rem;text-align:left;
  border-bottom:1px solid var(--paper-line);white-space:nowrap}
.dtable td{padding:.9rem 1.1rem;border-bottom:1px solid var(--paper-line);vertical-align:top}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:hover{background:var(--paper-alt)}
.dtable .ref{font-family:var(--mono);font-size:.75rem;color:var(--ink-500)}
.dtable .ttl{font-weight:600;color:var(--ink-900);display:block;margin-bottom:.15rem}
.dtable .sub{font-size:.79rem;color:var(--ink-500)}

/* ---------- Status pills ---------- */
.st{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:3px;font-weight:600;white-space:nowrap;display:inline-block}
.st-draft{background:var(--paper-line);color:var(--ink-500)}
.st-active{background:var(--concur-bg);color:var(--concur)}
.st-on_hold{background:var(--partial-bg);color:var(--partial)}
.st-closed{background:rgba(13,23,41,.08);color:var(--ink-700)}
.st-archived{background:rgba(13,23,41,.06);color:var(--ink-300)}
.pr-urgent{background:var(--dissent-bg);color:var(--dissent)}
.pr-high{background:var(--partial-bg);color:var(--partial)}
.pr-normal,.pr-low{background:var(--paper-line);color:var(--ink-500)}

/* ---------- Filters ---------- */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.25rem}
.filters .form-group{margin-bottom:0}
.filters .form-control{min-width:150px;padding:.55rem .7rem;font-size:.87rem}
.filters input[type=search]{min-width:250px}

/* ---------- Empty state ---------- */
/* Left aligned, not centred.
   A centred block with a centred button sits in the middle of nothing and reads
   as a placeholder. Ranged left it lines up with the panel heading above it and
   the table that will replace it, so the page does not jump when the first
   matter appears. */
.empty{text-align:left;padding:2.6rem 1.5rem 3rem}
.empty h3{font-size:1.15rem;margin-bottom:.5rem}
.empty p{color:var(--ink-500);font-size:.92rem;max-width:56ch;margin:0 0 1.4rem;
  text-align:justify;hyphens:auto}
.empty .btn{margin-left:0}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--paper-line);margin-bottom:1.5rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs a{padding:.7rem 1.1rem;font-size:.88rem;font-weight:500;color:var(--ink-500);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink-900)}
.tabs a.on{color:var(--ink-900);border-bottom-color:var(--gold-500);font-weight:600}
.tabs .n{font-family:var(--mono);font-size:.68rem;color:var(--ink-300);margin-left:.3rem}

/* ---------- Detail list ---------- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;font-size:.89rem}
.dl dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-500);padding-top:.15rem}
.dl dd{margin:0;color:var(--ink-900)}

/* ---------- Upload dropzone ---------- */
.drop{border:2px dashed var(--paper-line);border-radius:var(--r-lg);padding:2.2rem 1.5rem;text-align:center;
  transition:border-color .18s,background .18s;cursor:pointer;background:var(--paper-alt)}
.drop.over{border-color:var(--gold-500);background:var(--gold-soft)}
.drop h3{font-size:1rem;margin-bottom:.35rem}
.drop p{font-size:.85rem;color:var(--ink-500);margin:0}
.drop input[type=file]{display:none}
.uplist{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.uprow{display:flex;align-items:center;gap:.8rem;font-size:.84rem;padding:.6rem .8rem;
  border:1px solid var(--paper-line);border-radius:var(--r-md);background:#fff}
.uprow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .stt{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;white-space:nowrap}
.uprow.ok .stt{color:var(--concur)}
.uprow.err .stt{color:var(--dissent)}
.upbar{height:3px;background:var(--paper-line);border-radius:3px;overflow:hidden;width:90px}
.upbar i{display:block;height:100%;background:var(--gold-500);width:0;transition:width .2s}

/* ---------- Document rows ---------- */
.doc{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--paper-line)}
.doc:last-child{border-bottom:0}
.doc:hover{background:var(--paper-alt)}
.doc .kind{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.05em;
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--navy-800);color:var(--gold-300)}
.doc .nm{font-weight:600;font-size:.9rem;color:var(--ink-900);display:block;word-break:break-word}
.doc .meta{font-size:.78rem;color:var(--ink-500);margin-top:.15rem}
.doc .acts{display:flex;gap:.4rem;align-items:center}

/* ---------- Notes ---------- */
.note{padding:1rem 1.1rem;border-bottom:1px solid var(--paper-line)}
.note:last-child{border-bottom:0}
.note-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:.4rem}
.note-head strong{font-size:.86rem}
.note-head time{font-size:.75rem;color:var(--ink-500)}
.note-body{font-size:.9rem;color:var(--ink-700);white-space:pre-wrap;line-height:1.65}
.note .priv{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--partial-bg);color:var(--partial);padding:.12rem .4rem;border-radius:3px;margin-left:.4rem}

/* ---------- Activity ---------- */
.act{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:.7rem 1.1rem;font-size:.85rem;
  border-bottom:1px solid var(--paper-line)}
.act:last-child{border-bottom:0}
.act .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-400);margin-top:.45rem}
.act .who{color:var(--ink-500);font-size:.77rem;margin-top:.1rem}

/* ---------- Pagination ---------- */
.pager{display:flex;gap:.35rem;justify-content:center;align-items:center;margin-top:1.5rem;flex-wrap:wrap}
.pager a,.pager span{padding:.45rem .8rem;font-size:.85rem;border:1px solid var(--paper-line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink-700)}
.pager a:hover{border-color:var(--gold-400);color:var(--ink-900)}
.pager .on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.pager .off{color:var(--ink-300)}

/* ---------- Footer ---------- */
.app-foot{background:#fff;border-top:1px solid var(--paper-line);padding:1.4rem 0}
.app-foot .app-wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.app-foot p{margin:0;font-size:.76rem;color:var(--ink-500);max-width:80ch;line-height:1.6}
.app-foot span{font-size:.76rem;color:var(--ink-300)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  /* Sidebar becomes an off-canvas drawer */
  .app-shell{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;width:280px;max-width:86vw;height:100vh;
    transform:translateX(-100%);transition:transform .26s ease;box-shadow:var(--shadow-lg)}
  body.side-open .side{transform:translateX(0)}
  .side-close{display:block}
  .topbar-burger{display:flex}
}
@media (min-width:961px){
  .side-scrim{display:none}
}
@media (max-width:860px){
  .brand-mark small{display:none}
  .dtable thead{display:none}
  .dtable td{display:block;border-bottom:0;padding:.3rem 1.1rem}
  .dtable tbody tr{display:block;border-bottom:1px solid var(--paper-line);padding:.8rem 0}
  .doc{grid-template-columns:auto 1fr;gap:.8rem}
  .doc .acts{grid-column:2}
  .dl{grid-template-columns:1fr;gap:.15rem .5rem}
  .dl dt{margin-top:.7rem}
}

/* ---------- Agent reports (Phase 4) ---------- */
.agent-card{border-bottom:1px solid var(--paper-line)}
.agent-card:last-child{border-bottom:0}
.agent-card>summary{list-style:none;cursor:pointer;padding:.95rem 1.2rem;display:flex;
  align-items:center;gap:.7rem;flex-wrap:wrap}
.agent-card>summary::-webkit-details-marker{display:none}
.agent-card>summary:hover{background:var(--paper-alt)}
.agent-card[open]>summary{background:var(--paper-alt);border-bottom:1px solid var(--paper-line)}
.ag-name{font-weight:600;font-size:.92rem;color:var(--ink-900);min-width:190px}
.ag-conf{font-family:var(--mono);font-size:.7rem;color:var(--ink-500)}
.ag-head{font-size:.86rem;color:var(--ink-500);flex:1;min-width:200px}
.op-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:3px;font-weight:600;background:var(--paper-line);color:var(--ink-500)}
.op-tag.t-concurring{background:var(--concur-bg);color:var(--concur)}
.op-tag.t-partial{background:var(--partial-bg);color:var(--partial)}
.op-tag.t-dissenting{background:var(--dissent-bg);color:var(--dissent)}
.op-tag.t-unclear{background:var(--paper-line);color:var(--ink-500)}

.agent-body{padding:1.1rem 1.2rem 1.4rem}
.agent-body h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500);margin:1.2rem 0 .5rem;font-weight:600}
.agent-body h4:first-child{margin-top:0}
.agent-body ul{margin:0;padding-left:1.1rem;font-size:.89rem;line-height:1.7;color:var(--ink-700)}
.agent-body li{margin-bottom:.4rem}
.find-list{list-style:none;padding-left:0}
.find-list li{padding:.6rem .8rem;background:var(--paper-alt);border-radius:var(--r-sm);margin-bottom:.5rem}
.basis,.strength{font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.12rem .38rem;border-radius:3px;margin-right:.35rem;font-weight:600}
.b-record{background:var(--concur-bg);color:var(--concur)}
.b-inference{background:var(--partial-bg);color:var(--partial)}
.b-legal_principle{background:var(--gold-soft);color:#8a6d10}
.s-strong{background:rgba(18,122,86,.1);color:var(--concur)}
.s-moderate{background:var(--paper-line);color:var(--ink-500)}
.s-weak{background:var(--dissent-bg);color:var(--dissent)}
.find-list .src{display:block;margin-top:.3rem;font-size:.78rem;color:var(--ink-500);font-style:italic}

.auth-warn{background:var(--dissent-bg);border-left:3px solid var(--dissent);color:#7a2020;
  font-size:.82rem;padding:.65rem .85rem;border-radius:var(--r-sm);margin-bottom:.7rem;line-height:1.6}
.auth-list{list-style:none;padding-left:0}
.auth-list li{padding:.55rem .8rem;border:1px solid var(--paper-line);border-radius:var(--r-sm);margin-bottom:.45rem}
.auth-list strong{font-size:.88rem}
.unver{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--dissent-bg);color:var(--dissent);padding:.12rem .4rem;border-radius:3px;margin-left:.4rem}
.auth-list .prop{font-size:.82rem;color:var(--ink-500);margin-top:.25rem}
.reasoning{font-size:.89rem;line-height:1.75;color:var(--ink-700)}
.ag-meta{margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--paper-line);
  font-family:var(--mono);font-size:.66rem;color:var(--ink-300)}

@media (max-width:700px){
  .ag-name{min-width:100%}
  .ag-head{min-width:100%;order:5}
}

/* ---------- Document reading (Phase 5) ---------- */
.rd{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:3px;font-weight:600;margin-right:.35rem;display:inline-block}
.rd-ok{background:var(--concur-bg);color:var(--concur)}
.rd-work{background:var(--gold-soft);color:#8a6d10}
.rd-wait{background:var(--paper-line);color:var(--ink-500)}
.rd-warn{background:var(--partial-bg);color:var(--partial)}
.rd-err{background:var(--dissent-bg);color:var(--dissent)}

.doc-detail{margin-top:.5rem}
.doc-detail>summary{list-style:none;cursor:pointer;font-size:.8rem;color:var(--gold-600);
  font-weight:600;padding:.2rem 0;display:inline-block}
.doc-detail>summary::-webkit-details-marker{display:none}
.doc-detail>summary::before{content:"▸ ";font-size:.7rem}
.doc-detail[open]>summary::before{content:"▾ "}
.doc-detail>summary:hover{color:var(--gold-500)}
.doc-detail-body{padding:.7rem .9rem;margin-top:.4rem;background:var(--paper-alt);
  border-radius:var(--r-sm);border:1px solid var(--paper-line);font-size:.86rem;line-height:1.65}
.doc-detail-body h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-500);margin:.9rem 0 .35rem;font-weight:600}
.doc-detail-body ul{margin:0;padding-left:1.1rem}
.doc-detail-body li{margin-bottom:.25rem}
.doc-detail-body p{margin:0 0 .5rem}
.dd-title{font-weight:600;color:var(--ink-900)}
.dd-suggest{background:var(--gold-soft);padding:.45rem .6rem;border-radius:var(--r-sm);font-size:.82rem}
.dd-caveat{font-size:.76rem;color:var(--ink-500);font-style:italic;margin-top:.7rem!important;margin-bottom:0!important}
.doc-text{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:.76rem;
  line-height:1.7;color:var(--ink-700);max-height:480px;overflow:auto;margin:0;
  background:#fff;padding:.8rem;border-radius:var(--r-sm);border:1px solid var(--paper-line)}

/* ---------- Courtroom transcript (Phase 6) ---------- */
.transcript{display:flex;flex-direction:column;gap:.9rem;margin-top:1.2rem}
.turn{background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--r-md);
  border-left:3px solid var(--paper-line);overflow:hidden}
.turn-ours{border-left-color:var(--navy-500)}
.turn-opposing{border-left-color:var(--dissent)}
.turn-bench{border-left-color:var(--gold-500)}
.turn-witness{border-left-color:var(--partial)}
.turn-pending{opacity:.6}
.turn-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;background:var(--paper-alt);border-bottom:1px solid var(--paper-line)}
.turn-side{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:3px;font-weight:600}
.s-ours{background:var(--navy-50);color:var(--navy-600)}
.s-opposing{background:var(--dissent-bg);color:var(--dissent)}
.s-bench{background:var(--gold-soft);color:#8a6d10}
.s-witness{background:var(--partial-bg);color:var(--partial)}
.turn-speaker{font-weight:600;font-size:.92rem;color:var(--ink-900)}
.turn-phase{font-size:.8rem;color:var(--ink-500);margin-left:auto}
.turn-body{padding:1rem 1.1rem;font-size:.93rem;line-height:1.75;color:var(--ink-700)}
.turn-failed{color:var(--dissent);font-size:.87rem}
.turn-waiting{color:var(--ink-500);font-size:.87rem}
.turn-meta{padding:0 1.1rem .8rem;font-family:var(--mono);font-size:.64rem;color:var(--ink-300)}

/* ---------- Deliberation (Phase 6) ---------- */
.round-tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.round-tab{padding:.4rem .9rem;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;
  border:1px solid var(--paper-line);background:var(--paper);color:var(--ink-500)}
.round-tab.active{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.mv{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:3px;font-weight:600;margin-left:.3rem}
.mv-moved{background:var(--partial-bg);color:var(--partial)}
.mv-held{background:var(--paper-line);color:var(--ink-500)}
.shift{font-family:var(--mono);font-size:.7rem;color:var(--ink-500)}
.converge-warn{background:var(--dissent-bg);border-left:3px solid var(--dissent);
  padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.88rem;line-height:1.7;color:#7a2020}
.movement-note{background:var(--paper-alt);border-left:2px solid var(--gold-500);
  padding:.6rem .8rem;border-radius:var(--r-sm);font-size:.85rem;line-height:1.65;margin:.6rem 0}

/* =========================================================
   Admin building blocks (moved out of admin_header inline CSS)
   ========================================================= */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.5rem}
.stat{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-md);padding:1.1rem 1.2rem}
.stat .n{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--maroon-700);line-height:1}
.stat .l{font-size:.7rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em;margin-top:.35rem}

table.adm{width:100%;border-collapse:collapse;font-size:.86rem}
table.adm th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);
  padding:.55rem .65rem;border-bottom:2px solid var(--paper-line);white-space:nowrap}
table.adm td{padding:.6rem .65rem;border-bottom:1px solid var(--paper-line);vertical-align:middle}
table.adm tr:hover td{background:var(--paper-alt)}

.pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:999px;font-weight:600;display:inline-block}
.pill.active,.pill.completed{background:var(--concur-bg);color:var(--concur)}
.pill.trial,.pill.trialing{background:var(--gold-soft);color:var(--gold-600)}
.pill.suspended,.pill.failed,.pill.locked,.pill.cancelled{background:var(--dissent-bg);color:var(--dissent)}
.pill.inactive{background:var(--paper-alt);color:var(--ink-500)}

.sec-item{display:flex;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--paper-line);border-radius:var(--r-md);margin-bottom:.6rem;background:#fff}
.sec-item .dot{width:10px;height:10px;border-radius:50%;margin-top:.35rem;flex:none}
.sec-item.critical .dot{background:var(--dissent)}
.sec-item.warning .dot{background:var(--partial)}
.sec-item.ok .dot{background:var(--concur)}
.sec-item h4{font-size:.92rem;margin:0 0 .2rem;color:var(--ink-900)}
.sec-item p{font-size:.82rem;color:var(--ink-500);margin:0;line-height:1.55}

/* Admin sidebar uses the same .side rules; nothing more needed here. */

/* =========================================================
   Billing page building blocks (hp-* markup rendered inside
   the app shell, styled to match the workspace — no home.css)
   ========================================================= */
.app-main .hp-head{max-width:none;margin:0 0 1.2rem;text-align:left}
.app-main .hp-clause{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);margin:0 0 .5rem}
.app-main .hp-rule{width:44px;height:2px;background:var(--gold-500);border:0;margin:0 0 .8rem}
.app-main .hp-head h2{font-family:var(--font-display);font-weight:600;color:var(--ink-900);
  font-size:1.45rem;line-height:1.2;margin:0}
.app-main .hp-lede{font-size:.95rem;color:var(--ink-500);margin:.3rem 0 0;max-width:60ch}

/* balance cards */
.app-main .hp-grid{display:grid;gap:1rem}
.app-main .hp-g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.app-main .hp-card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column}
.app-main .hp-card--accent{border-color:var(--gold-400);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.app-main .hp-card-mark{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:.5rem}
.app-main .hp-card h3{color:var(--ink-900)!important;margin:0 0 .4rem}
.app-main .hp-card--accent h3{color:var(--maroon-700)!important}
.app-main .hp-card p{font-size:.86rem;color:var(--ink-500);line-height:1.6;margin:0}
.app-main .hp-card strong{color:var(--dissent)}

/* pack cards */
.app-main .hp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.app-main .hp-plan{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);
  padding:1.4rem;display:flex;flex-direction:column;gap:.35rem}
.app-main .hp-plan-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink-900);margin:0}
.app-main .hp-plan-tag{font-size:.8rem;color:var(--ink-500);margin:0}
.app-main .hp-plan-amt{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--maroon-700);margin:.3rem 0 0;line-height:1}
.app-main .hp-plan-note{font-size:.78rem;color:var(--ink-500);margin:0 0 .6rem}
.app-main .hp-plan .btn{margin-top:.4rem}

/* ledger */
.app-main .hp-ledger{border:1px solid var(--paper-line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.app-main .hp-ledger-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.75rem 1.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500);background:var(--paper-alt);border-bottom:1px solid var(--paper-line)}
/* ledger entry rows (credit ledger) */
.app-main .hp-ledger .ledger,.app-main .ledger{display:grid;grid-template-columns:1.4fr 2fr 1fr;gap:1rem;
  padding:.8rem 1.2rem;border-top:1px solid var(--paper-line);font-size:.88rem;align-items:center}
.app-main .ledger:first-of-type{border-top:0}
/* readable prose blocks, NOT uppercase/mono */
.app-main .hp-ledger-note{padding:.9rem 1.2rem;border-top:1px solid var(--paper-line);
  font-size:.8rem;color:var(--ink-500);line-height:1.6;text-transform:none;font-family:var(--font-body)}
.app-main .hp-ledger-note a{color:var(--maroon-700);font-weight:600}
.app-main .hp-ledger-empty{padding:1.4rem 1.2rem;font-size:.9rem;color:var(--ink-500);text-transform:none;font-family:var(--font-body)}
/* payments table inside the ledger card */
.app-main .hp-ledger table{width:100%;border-collapse:collapse;font-size:.87rem}
.app-main .hp-ledger thead th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-500);padding:.7rem 1.2rem;border-bottom:1px solid var(--paper-line);background:var(--paper-alt)}
.app-main .hp-ledger tbody td{padding:.75rem 1.2rem;border-top:1px solid var(--paper-line);vertical-align:middle;color:var(--ink-700)}
.app-main .hp-ledger tbody tr:hover td{background:var(--paper-alt)}
.app-main .hp-ledger table + .hp-ledger-note{border-top:1px solid var(--paper-line)}

/* pills */
.app-main .hp-pill{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:999px;font-weight:600;display:inline-block}
.app-main .hp-p-ok{background:var(--concur-bg);color:var(--concur)}
.app-main .hp-p-warn{background:var(--partial-bg);color:var(--partial)}
.app-main .hp-p-bad{background:var(--dissent-bg);color:var(--dissent)}

/* Checkout two-column layout inside the app shell */
.app-main .hp-split{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
.app-main .hp-split-col{min-width:0}
@media (max-width:820px){ .app-main .hp-split{grid-template-columns:1fr} }

/* Quick-grant inline form in the admin credits balances table */
.quick-grant{display:flex;align-items:center;gap:.4rem;margin:0}
.quick-grant .form-control{margin:0}

/* =========================================================
   Documentation / Help pages (help.php, admin/help.php)
   ========================================================= */
.doc-callout{background:var(--gold-soft);border:1px solid var(--maroon-line);border-radius:var(--r-md);
  padding:.85rem 1.1rem;font-size:.9rem;color:var(--ink-700);margin-bottom:1.2rem}
.doc-callout strong{color:var(--ink-900)}
.doc-callout a{color:var(--maroon-700);font-weight:600}

/* search */
.doc-search{position:relative;margin-bottom:.4rem}
.doc-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-500);pointer-events:none}
.doc-search-ico svg{width:18px;height:18px;display:block}
.doc-search-input{width:100%;padding:.8rem 2.6rem;font-family:inherit;font-size:.98rem;color:var(--ink-900);
  background:#fff;border:1px solid var(--paper-line);border-radius:999px;transition:border-color .16s,box-shadow .16s}
.doc-search-input:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px var(--gold-soft)}
.doc-search-input::-webkit-search-cancel-button{display:none}
.doc-search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--ink-500);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .3rem}
.doc-search-clear:hover{color:var(--maroon-700)}
.doc-search-count{font-size:.82rem;color:var(--ink-500);margin:.2rem .2rem 1rem}

/* two-column doc layout: sticky contents + body */
.doc-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:1.8rem;align-items:start;margin-top:1.2rem}
.doc-toc{position:sticky;top:82px;display:flex;flex-direction:column;gap:.15rem}
.doc-toc-title{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-500);margin:0 0 .5rem}
.doc-toc a{font-size:.86rem;color:var(--ink-700);text-decoration:none;padding:.35rem .6rem;border-radius:6px;
  border-left:2px solid transparent}
.doc-toc a:hover{background:var(--paper-card);color:var(--maroon-700)}
.doc-toc a.on{color:var(--maroon-700);border-left-color:var(--gold-500);background:var(--paper-card);font-weight:600}

.doc-body{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.doc-card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r-lg);padding:1.5rem 1.6rem;
  scroll-margin-top:82px}
.doc-card-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.9rem}
.doc-ico{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;
  background:var(--gold-soft);color:var(--gold-600)}
.doc-ico svg{width:20px;height:20px}
.doc-card-head h2{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--ink-900);margin:0 0 .2rem;line-height:1.2}
.doc-summary{font-size:.9rem;color:var(--ink-500);margin:0;line-height:1.5}
.doc-card p{font-size:.92rem;color:var(--ink-700);line-height:1.7;margin:0 0 .8rem;text-align:justify;hyphens:auto}
.doc-card p:last-of-type{margin-bottom:0}
.doc-steps-title{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-600);margin:1rem 0 .5rem!important}
.doc-steps{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.45rem}
.doc-steps li{font-size:.9rem;color:var(--ink-700);line-height:1.6}

/* FAQ accordions */
.doc-faq{border-top:1px solid var(--paper-line);padding:.2rem 0}
.doc-faq:first-of-type{border-top:0}
.doc-faq summary{list-style:none;cursor:pointer;font-weight:600;color:var(--ink-900);font-size:.95rem;
  padding:.75rem 1.8rem .75rem 0;position:relative}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;font-size:1.2rem;color:var(--gold-600);font-weight:400}
.doc-faq[open] summary::after{content:"\2013"}
.doc-faq p{font-size:.9rem;color:var(--ink-700);line-height:1.7;margin:0 0 .9rem;text-align:left}

.doc-empty{text-align:center;color:var(--ink-500);font-size:.95rem;padding:2rem 0}

/* search highlight */
mark.doc-hit{background:var(--gold-300);color:var(--ink-900);border-radius:2px;padding:0 1px}

@media (max-width:820px){
  .doc-layout{grid-template-columns:1fr}
  .doc-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:.4rem;padding-bottom:.6rem;
    border-bottom:1px solid var(--paper-line);margin-bottom:.4rem}
  .doc-toc-title{width:100%;margin-bottom:.2rem}
  .doc-toc a{border-left:0;border:1px solid var(--paper-line);border-radius:999px;padding:.3rem .7rem;font-size:.8rem}
  .doc-toc a.on{border-color:var(--gold-400)}
}

/* Panel run: distinguish queued vs actively-analysing agents */
.op-tag.op-live{color:var(--gold-600)}
.op-tag.op-wait{color:var(--ink-500)}
.op-tag .spinner{width:12px;height:12px;border-width:2px;vertical-align:-1px;margin-right:.15rem}

/* Document reading time estimate */
.read-timer{font-family:var(--mono);letter-spacing:.02em}
.read-timer span{color:var(--gold-600);font-weight:600}

/* ============ Panel run — "The panel's answer" (redesigned) ============ */
.answer-panel{border:1px solid var(--gold-400);background:
  linear-gradient(180deg,var(--gold-soft) 0%,#fff 42%);overflow:hidden}
.answer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.4rem;border-bottom:1px solid var(--gold-400)}
.answer-eyebrow{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink-900)}
.answer-stance{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;font-weight:600}
.answer-stance.stance-concurring{background:#e7f2ea;color:#2f6b45}
.answer-stance.stance-partial{background:var(--gold-soft);color:var(--gold-700,#8a6d1f);border:1px solid var(--gold-400)}
.answer-stance.stance-dissenting{background:#f6e9e9;color:var(--maroon-700)}
.answer-stance.stance-unclear{background:var(--paper-alt);color:var(--ink-500)}

.answer-grid{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;padding:1.4rem}

/* circular confidence gauge (conic-gradient ring) */
.answer-gauge{flex-shrink:0}
.gauge-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gauge-col) calc(var(--pct)*1%),var(--paper-line) 0)}
.gauge-inner{width:82px;height:82px;border-radius:50%;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--paper-line)}
.gauge-n{font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--ink-900);line-height:1}
.gauge-n small{font-size:.9rem;font-weight:600;color:var(--ink-500)}
.gauge-l{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-top:.2rem}
.answer-gauge.c-hi{--gauge-col:#3f8f5f}
.answer-gauge.c-mid{--gauge-col:var(--gold-500)}
.answer-gauge.c-lo{--gauge-col:var(--maroon-700)}

.answer-main{min-width:0}
.answer-verdict{font-family:var(--font-display);font-size:1.35rem;line-height:1.4;font-weight:600;
  color:var(--ink-900);margin:0 0 .8rem}
.answer-body{font-size:.94rem;line-height:1.78;color:var(--ink-700);text-align:justify;hyphens:auto}
.answer-note{padding:.9rem 1.4rem;border-top:1px solid var(--paper-line);background:var(--paper-alt);
  font-size:.8rem;color:var(--ink-500);line-height:1.6}

@media (max-width:640px){
  .answer-grid{grid-template-columns:1fr;gap:1rem;text-align:center}
  .answer-gauge{margin:0 auto}
  .answer-verdict,.answer-body{text-align:left}
}

/* =========================================================
   Analysis + courtroom
   ========================================================= */

/* ---------- the odds panel ---------- */
.odds-panel { border-left: 4px solid var(--ink-400, #8b939c); }
.odds-panel.odds-good { border-left-color: #2f7d4f; }
.odds-panel.odds-even { border-left-color: #a08a45; }
.odds-panel.odds-poor { border-left-color: #a3453b; }

.odds-body { display: flex; gap: 1.8rem; align-items: flex-start; flex-wrap: wrap; }

.odds-figure {
  flex: 0 0 190px; text-align: center; padding: .4rem .6rem 0;
  border-right: 1px solid var(--paper-line, #e0d9ca);
}
.odds-pct {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4.1rem; line-height: 1; font-weight: 600; color: var(--ink-900, #1b2430);
}
.odds-pct span { font-size: 1.7rem; margin-left: .08em; opacity: .55; }
.odds-good .odds-pct { color: #2f7d4f; }
.odds-poor .odds-pct { color: #a3453b; }

.odds-band {
  margin-top: .45rem; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500, #6d7580);
}
.odds-conf {
  display: inline-block; margin-top: .6rem; padding: .18rem .55rem;
  border-radius: 3px; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
}
.conf-low      { background: #f6e7e5; color: #8c3a31; }
.conf-moderate { background: #f6f0e0; color: #7a6320; }
.conf-high     { background: #e4f0e8; color: #26643f; }

.odds-text { flex: 1 1 320px; min-width: 260px; }
.odds-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.32rem; line-height: 1.45; margin: 0 0 .7rem; color: var(--ink-900, #1b2430);
}
.odds-reason { margin: 0 0 .8rem; line-height: 1.68; }
.odds-caveat {
  margin: 0; font-size: .84rem; line-height: 1.6; color: var(--ink-500, #6d7580);
  border-top: 1px solid var(--paper-line, #e0d9ca); padding-top: .7rem;
}

/* ---------- what would move it ---------- */
.mover-list { list-style: none; margin: 0; padding: 0; }
.mover {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--paper-line, #e0d9ca);
  line-height: 1.6;
}
.mover:last-child { border-bottom: 0; }
.mover-delta {
  flex: 0 0 3.1rem; font-family: 'IBM Plex Mono', monospace;
  font-size: .95rem; font-weight: 500; text-align: right;
}
.mover-up   .mover-delta { color: #2f7d4f; }
.mover-down .mover-delta { color: #a3453b; }

/* ---------- strengths / weaknesses ---------- */
.theory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 900px) { .theory-grid { grid-template-columns: 1fr; } }

.point {
  padding: .85rem 0 .9rem; border-bottom: 1px solid var(--paper-line, #e0d9ca);
}
.point:last-child { border-bottom: 0; padding-bottom: 0; }
.point-head { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .35rem; }
.point-head strong { line-height: 1.5; }
.point p { margin: .3rem 0; line-height: 1.62; font-size: .93rem; }

.point-weight {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 2px; background: var(--paper-alt, #eeeae1);
  color: var(--ink-500, #6d7580);
}
.point-strong.w-high .point-weight { background: #e4f0e8; color: #26643f; }
.point-weak.w-high   .point-weight { background: #f6e7e5; color: #8c3a31; }

.point-src {
  font-size: .8rem; color: var(--ink-500, #6d7580);
  font-family: 'IBM Plex Mono', monospace; margin-top: .3rem;
}
.point-cure { font-size: .88rem; background: var(--paper-alt, #eeeae1); padding: .45rem .6rem; border-radius: 3px; }

.plain-list { margin: 0; padding-left: 1.15rem; line-height: 1.7; }
.plain-list li { margin-bottom: .35rem; }
.muted { color: var(--ink-500, #6d7580); font-style: italic; margin: 0; }

/* ---------- small tables ---------- */
.mini-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.mini-table td {
  padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--paper-line, #e0d9ca);
  vertical-align: top; line-height: 1.55;
}
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table .mono { font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }

.tag {
  display: inline-block; padding: .12rem .45rem; border-radius: 2px;
  font-size: .72rem; letter-spacing: .04em; white-space: nowrap;
}
.tag-ok   { background: #e4f0e8; color: #26643f; }
.tag-warn { background: #f6f0e0; color: #7a6320; }
.tag-bad  { background: #f6e7e5; color: #8c3a31; }

/* ---------- authority ---------- */
.authority {
  padding: .8rem 0 .85rem; border-bottom: 1px solid var(--paper-line, #e0d9ca);
}
.authority:last-child { border-bottom: 0; }
.auth-head { display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; }
.auth-side {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 2px; background: var(--paper-alt, #eeeae1);
}
.auth-us   .auth-side { background: #e4f0e8; color: #26643f; }
.auth-them .auth-side { background: #f6e7e5; color: #8c3a31; }
.auth-cite { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; }
.auth-court { font-size: .8rem; color: var(--ink-500, #6d7580); }
.authority p { margin: .25rem 0; line-height: 1.62; font-size: .93rem; }

/* ---------- questions ---------- */
.qa {
  padding: .95rem 0 1rem; border-bottom: 1px solid var(--paper-line, #e0d9ca);
}
.qa:last-of-type { border-bottom: 0; }
.qa-head { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .3rem; }
.qa-head strong { line-height: 1.5; }
.qa-imp {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 2px; background: var(--paper-alt, #eeeae1);
  color: var(--ink-500, #6d7580);
}
.qa-critical .qa-imp { background: #f6e7e5; color: #8c3a31; }
.qa-why { font-size: .87rem; color: var(--ink-500, #6d7580); margin: .2rem 0 .55rem; line-height: 1.55; }
.qa-answer { background: var(--paper-alt, #eeeae1); padding: .55rem .7rem; border-radius: 3px; margin: 0; }
.qa-done { opacity: .78; }
.qa-done .qa-imp { background: #e4f0e8; color: #26643f; }

/* =========================================================
   The courtroom exchange
   ---------------------------------------------------------
   Our advocate left, theirs right, the bench full width. The layout is doing
   real work here: an argument is a sequence of answers, and seeing at a glance
   who is answering whom is most of what makes a transcript readable.
   ========================================================= */
.court { margin-top: 1.4rem; }

.court-turn { display: flex; flex-direction: column; margin-bottom: 1.5rem; max-width: 88%; }
.ct-ours     { align-items: flex-start; margin-right: auto; }
.ct-opposing { align-items: flex-end;   margin-left: auto; }
.ct-bench, .ct-witness { max-width: 100%; align-items: center; }

.ct-meta {
  display: flex; gap: .55rem; align-items: baseline;
  margin-bottom: .35rem; padding: 0 .25rem;
}
.ct-who {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem; font-weight: 600; color: var(--ink-900, #1b2430);
}
.ct-phase {
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500, #6d7580);
}

.ct-bubble {
  border-radius: 12px; padding: 1rem 1.15rem;
  border: 1px solid var(--paper-line, #e0d9ca);
  background: #fff;
}
.ct-ours .ct-bubble {
  border-bottom-left-radius: 3px;
  background: #f3f7f4; border-color: #cfe0d5;
}
.ct-opposing .ct-bubble {
  border-bottom-right-radius: 3px;
  background: #fbf3f2; border-color: #eed6d2;
}
.ct-bench .ct-bubble {
  background: var(--paper-alt, #eeeae1);
  border-color: var(--paper-line, #e0d9ca);
  border-left: 3px solid var(--gold-500, #a08a45);
  width: 100%;
}
.ct-witness .ct-bubble { background: #f7f5fb; border-color: #ddd7ea; width: 100%; }

.ct-judgment .ct-bubble {
  border-left-width: 4px;
  box-shadow: 0 1px 3px rgba(27, 36, 48, .07);
}
.ct-judgment .ct-who { font-size: 1.18rem; }

.ct-body { line-height: 1.72; font-size: .96rem; }
.ct-failed  { color: #8c3a31; font-size: .9rem; }
.ct-waiting { color: var(--ink-500, #6d7580); font-size: .9rem; font-style: italic; }

@media (max-width: 760px) {
  .court-turn { max-width: 100%; }
  .ct-opposing { align-items: flex-start; }
  .ct-opposing .ct-bubble { border-bottom-right-radius: 12px; border-bottom-left-radius: 3px; }
}

/* =========================================================
   Document bundles
   ========================================================= */
.bucket-picker { margin-bottom: 1.1rem; }
.bucket-label {
  font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500, #6d7580); margin-bottom: .5rem;
}
.bucket-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 760px) { .bucket-opts { grid-template-columns: 1fr; } }

.bucket-opt {
  display: block; padding: .6rem .75rem; cursor: pointer;
  border: 1px solid var(--paper-line, #e0d9ca); border-radius: 7px;
  background: #fff; transition: border-color .12s, background .12s;
}
.bucket-opt:hover { border-color: var(--gold-500, #a08a45); }
.bucket-opt:has(input:checked) {
  border-color: var(--gold-500, #a08a45); background: var(--paper-alt, #eeeae1);
}
.bucket-opt input { margin-right: .45rem; }
.bucket-name { font-weight: 600; font-size: .92rem; }
.bucket-hint {
  display: block; font-size: .79rem; color: var(--ink-500, #6d7580);
  line-height: 1.5; margin-top: .22rem; padding-left: 1.35rem;
}

.bkt {
  display: inline-block; padding: .1rem .4rem; border-radius: 2px;
  font-size: .7rem; letter-spacing: .03em; margin-right: .35rem;
  background: var(--paper-alt, #eeeae1); color: var(--ink-500, #6d7580);
}
.bkt-fir             { background: #f6f0e0; color: #7a6320; }
.bkt-police_evidence { background: #f6e7e5; color: #8c3a31; }
.bkt-lower_order     { background: #eae6f3; color: #4d3f7a; }
.bkt-our_evidence    { background: #e4f0e8; color: #26643f; }

.doc-progress { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; }

/* =========================================================
   Destructive actions
   ---------------------------------------------------------
   Deliberately not loud. A delete control that shouts from every row trains
   the eye to ignore it, and makes an accidental click likelier rather than
   less. It sits quiet until hovered, and the weight is carried by the dialog
   — which shows what would actually be destroyed and asks for the reference
   to be typed.
   ========================================================= */
.btn-danger {
  background: #8c2f24;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 600;
}
.btn-danger:hover  { background: #75261d; color: #fff; }
.btn-danger:focus-visible { outline: 2px solid #8c2f24; outline-offset: 2px; }

/* Row-level delete in the matters table. */
.row-del {
  font: inherit;
  font-size: .8rem;
  padding: .28rem .6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-500, #6d7580);
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s, color .12s, background .12s, border-color .12s;
}
tr:hover .row-del { opacity: 1; }
.row-del:hover {
  color: #8c2f24;
  background: #fbf1ef;
  border-color: #eed6d2;
}
.row-del:focus-visible {
  opacity: 1;
  outline: 2px solid #8c2f24;
  outline-offset: 1px;
}

/* =========================================================
   Running a matter, step by step
   ---------------------------------------------------------
   The driver at the top is deliberately large: it is the only control on the
   page that matters, and an advocate mid-way through a forty-page bundle should
   be able to see where they are from across a desk.
   ========================================================= */
.run-panel { overflow: hidden; }

.run-head {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1.4rem 1.5rem 1.2rem;
}

.run-pos {
  flex: 0 0 auto; text-align: center; line-height: 1;
  padding-right: 1.2rem; border-right: 1px solid var(--paper-line, #e0d9ca);
}
.run-step-n {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3rem; font-weight: 600; color: var(--gold-700, #8a6d1f);
}
.run-step-of {
  display: block; margin-top: .3rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500, #6d7580);
}

.run-now { min-width: 0; }
.run-now h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem; margin: 0 0 .25rem; line-height: 1.25;
}
.run-now p { margin: 0; font-size: .92rem; color: var(--ink-500, #6d7580); line-height: 1.55; }

.run-actions {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.run-auto {
  display: flex; gap: .4rem; align-items: center; cursor: pointer;
  font-size: .85rem; color: var(--ink-500, #6d7580); user-select: none;
}
.run-auto input { cursor: pointer; }

.run-note { margin: 0 0 .9rem; font-size: .87rem; color: var(--ink-500, #6d7580); min-height: 1.2em; }
.run-note-bad { color: #8c2f24; }

.run-warn {
  margin: 0; padding: .75rem .9rem; border-radius: 8px;
  background: var(--paper-alt, #eeeae1); border: 1px solid var(--paper-line, #e0d9ca);
  font-size: .84rem; line-height: 1.62; color: var(--ink-700, #3a3f47);
}

/* ---------- the step list ---------- */
.steps-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.stp {
  display: flex; gap: .95rem; align-items: flex-start;
  padding: .95rem 0; border-bottom: 1px solid var(--paper-line, #e0d9ca);
}
.stp:last-child { border-bottom: 0; }

.stp-n {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem; font-weight: 500;
  background: var(--paper-alt, #eeeae1); color: var(--ink-500, #6d7580);
  border: 1px solid var(--paper-line, #e0d9ca);
}

.stp-body { min-width: 0; flex: 1; }
.stp-body h4 { margin: 0 0 .18rem; font-size: .96rem; line-height: 1.35; }
.stp-blurb  { margin: 0 0 .22rem; font-size: .84rem; color: var(--ink-500, #6d7580); line-height: 1.5; }
.stp-detail { margin: 0; font-size: .86rem; color: var(--ink-700, #3a3f47); line-height: 1.5; }

.stp-link {
  display: inline-block; margin-top: .4rem;
  font-size: .84rem; font-weight: 600; color: var(--gold-700, #8a6d1f);
}
.stp-meter { margin-top: .55rem; height: 4px; }

/* ---- states ---- */
.stp-done .stp-n     { background: #e4f0e8; color: #26643f; border-color: #cfe0d5; }
.stp-done h4         { color: var(--ink-500, #6d7580); }

.stp-current         { background: #fdfaf2; margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
.stp-current .stp-n  { background: var(--gold-700, #8a6d1f); color: #fff; border-color: transparent; }
.stp-current h4      { font-weight: 700; }

.stp-blocked         { background: #fdfaf2; margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
.stp-blocked .stp-n  { background: #f6f0e0; color: #7a6320; border-color: #e8dcbb; }

.stp-failed .stp-n   { background: #f6e7e5; color: #8c3a31; border-color: #eed6d2; }
.stp-failed .stp-detail { color: #8c2f24; }

.stp-skipped .stp-n  { background: #f0ede6; color: #8a7f6a; border-style: dashed; }
.stp-skipped h4      { color: var(--ink-500, #6d7580); }

.stp-waiting         { opacity: .5; }

@media (max-width: 600px) {
  .run-head { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .run-pos  { border-right: 0; padding-right: 0; display: flex; align-items: baseline; gap: .5rem; }
  .run-step-n { font-size: 2.1rem; }
  .run-step-of { margin-top: 0; }
}

/* ---------- assessment clock ----------
   Elapsed, not a percentage. A single model call reports nothing until it
   returns, so any bar would be an invention; what the advocate can actually use
   is how long it has run against how long these normally take here. */
.assess-clock {
  margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: .84rem;
  color: var(--ink-700, #3a3f47);
}
.assess-clock .muted { font-family: inherit; color: var(--ink-500, #6d7580); }

.assess-stall {
  margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 8px;
  background: #fdf6ee; border: 1px solid #eadfc7;
  font-size: .86rem; line-height: 1.6; color: var(--ink-700, #3a3f47);
}
.assess-stall code {
  font-family: 'IBM Plex Mono', monospace; background: #f2eee4;
  padding: .08rem .3rem; border-radius: 3px; font-size: .92em;
}

/* ---------- Help: the three-click summary ----------
   Placed above the topic list because somebody opening the help page is
   usually stuck on "what do I click", not looking for a reference manual. */
.quickstart { border-left: 3px solid var(--gold-500, #a08a45); }

.qs-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.qs-list li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--paper-line, #e0d9ca);
  line-height: 1.6;
}
.qs-list li:last-child { border-bottom: 0; }

.qs-n {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: .85rem; font-weight: 500;
  background: var(--gold-700, #8a6d1f); color: #fff;
}

.qs-note {
  display: block; margin-top: .25rem;
  font-size: .82rem; color: var(--ink-500, #6d7580);
}

.qs-foot {
  margin: 0; padding-top: .8rem; border-top: 1px solid var(--paper-line, #e0d9ca);
  font-size: .86rem; line-height: 1.6; color: var(--ink-500, #6d7580);
}

/* =========================================================
   Matter header and tabs
   ---------------------------------------------------------
   The old header dropped a status form and two buttons into a flex row and let
   them land where they fell — different heights, inconsistent gaps, and the
   destructive action sitting flush against the primary one. Buttons that touch
   are buttons that get mis-clicked, and on a matter page one of them deletes
   the client's papers.
   ========================================================= */
.matter-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.matter-head-main { min-width: 0; flex: 1 1 340px; }
.matter-head-main h1 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  margin: 0 0 .4rem; letter-spacing: -.01em; line-height: 1.2;
}

.matter-sub {
  margin: 0; font-size: .9rem; color: var(--ink-500);
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; line-height: 1.5;
}
.matter-sub-sep { opacity: .45; }

/* Actions: one row, one baseline, and real space before the destructive one. */
.matter-head-actions {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  flex: 0 0 auto;
}
.matter-head-actions .btn {
  height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 1.1rem; white-space: nowrap; font-size: .89rem;
}
.matter-head-actions .btn-danger {
  /* Set apart deliberately. Adjacent to "Run this matter" it was one slip away
     from destroying a matter. */
  margin-left: .5rem;
}
.matter-status { display: flex; align-items: center; gap: .5rem; margin: 0; }
.matter-status .form-control {
  height: 40px; width: auto; min-width: 8.5rem;
  padding: 0 2rem 0 .75rem; font-size: .87rem;
}

@media (max-width: 780px) {
  .matter-head-actions { width: 100%; }
  .matter-head-actions .btn-danger { margin-left: auto; }
}

/* ---------- numbered tabs ----------
   The first four are the matter in order. Numbering them says so without a
   legend; Activity has no number because it is a log, not a stage. */
.tabs--matter { gap: .1rem; margin-bottom: 1.8rem; }
.tabs--matter a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .75rem 1.15rem;
}
.tab-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; font-weight: 500;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-alt, #eeeae1); color: var(--ink-500, #6d7580);
  align-self: center; flex: 0 0 auto;
}
.tabs--matter a.on .tab-n { background: var(--gold-700, #8a6d1f); color: #fff; }

/* =========================================================
   Width
   ---------------------------------------------------------
   1180px was set when every page was a form. The transcript, the step list and
   the analysis all read badly in a narrow column on a wide screen — and the
   sidebar already takes 280px of it.
   ========================================================= */
.app-wrap { max-width: 1440px; }

/* The 78ch cap that used to be here is gone.
   It was meant to keep a readable measure, but on a 1440px page it left a third
   of the width empty next to the bench's own paragraphs — the longest and most
   important text in the product. Justification with hyphenation does the same
   job without wasting the space: the eye still gets an even column, and the
   column is the width of the page. */

/* ---------- the argument launcher ---------- */
.arg-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem; margin-bottom: 1.2rem;
}
.arg-form-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .arg-form { grid-template-columns: 1fr; } }

/* The step runner reads across the full width now, so the driver and the list
   are not stacked in a 900px column on a 1440px screen. */
@media (min-width: 1100px) {
  .run-panel .run-head { padding-right: 2rem; }
  .steps-list { columns: 1; }
  .stp-body { max-width: 90ch; }
}


/* =========================================================
   Justified prose
   ---------------------------------------------------------
   Applied WITH hyphens:auto, never without. Justifying unhyphenated text
   stretches the spaces instead of breaking words, and a long legal paragraph
   full of words like "notwithstanding" turns into rivers of white down the
   page. The pair is what makes an even column readable rather than merely
   straight-edged.
   ========================================================= */
.ct-body,
.odds-reason,
.odds-caveat,
.point p,
.authority p,
.qa-why,
.qa-answer,
.stp-detail,
.stp-blurb,
.run-warn,
.mini-table td,
.plain-list li,
.panel-body > p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Things that must NOT be justified: anything short, anything monospace, and
   anything where a stretched space would read as a mistake rather than as
   typography. */
.ct-meta, .odds-headline, .point-head, .point-src, .stp-body h4,
.assess-clock, .run-note, .form-hint, .muted, .count, .crumbs,
.mini-table .mono, .tag, .st, .bkt {
  text-align: left;
  hyphens: manual;
}

/* The bench addresses the room, not the other side: full width, and the
   judgment wider still. */
.ct-bench, .ct-witness { max-width: 100%; }
.ct-bench .ct-bubble, .ct-witness .ct-bubble { width: 100%; }
.ct-judgment { max-width: 100%; }
.ct-judgment .ct-bubble { width: 100%; }

/* The verdict panel reads across the panel rather than stopping two thirds in. */
.odds-body   { align-items: stretch; }
.odds-text   { flex: 1 1 auto; min-width: 0; }
.odds-figure { flex: 0 0 190px; }

/* Analysis columns: on a wide screen two panels side by side use the room far
   better than one narrow column with the other below it. */
@media (min-width: 1180px) {
  .theory-grid { gap: 1.4rem; }
}

/* The step runner: the list and the driver both take the full panel. */
.stp-body { max-width: none; }
.run-warn { max-width: none; }

/* =========================================================
   Button text
   ---------------------------------------------------------
   White on every button that has a colour behind it.
   The gold had to be darkened to make that legible: white on the old
   #a08a45 measured 3.4:1, and normal text needs 4.5:1. Setting white text on
   the old gold would have looked cleaner in a screenshot and been harder to
   read on a laptop in a chambers with the blinds open, which is where this is
   actually used. The new gold is 4.9:1.
   ========================================================= */
.btn-gold, .btn-gold:hover, .btn-gold:focus,
.btn-navy, .btn-navy:hover,
.btn-maroon, .btn-maroon:hover,
.btn-danger, .btn-danger:hover,
.btn-outline-light, .btn-outline-light:hover {
  color: #fff;
}

/* Anything inside a filled button — icons, spinners, counts — follows the text
   rather than keeping its own colour. */
.btn-gold *, .btn-navy *, .btn-maroon *, .btn-danger * { color: inherit; }
.btn-gold .spinner, .btn-navy .spinner, .btn-danger .spinner {
  border-color: rgba(255,255,255,.35);
  border-top-color: #fff;
}

/* Ghost buttons sit on the cream page with no fill, so white text on them
   would be invisible. They keep dark text and get a firmer border instead, so
   they still read as buttons next to the now-stronger filled ones. */
.btn-ghost {
  color: var(--ink-900, #1b2430);
  border-color: #cfc7b5;
  background: #fff;
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--gold-700, #8a6d1f);
  color: var(--gold-700, #8a6d1f);
  background: #fdfbf6;
}

/* On the dark bands the page background is dark, so ghost buttons there do take
   white — that is the one place the rule flips. */
.hp-sec--dark .btn-ghost,
.app-topbar .btn-ghost {
  color: #ede1d0;
  background: transparent;
  border-color: rgba(220,195,126,.32);
}
.hp-sec--dark .btn-ghost:hover { color: #fff; border-color: var(--gold-400, #bfa968); }

/* The sign-in page carried the letters "LX" where the logo should have been.
   The tile it sat in has a GOLD gradient background — sized and coloured for
   two dark letters. Dropping the mark in and colouring it gold made it gold on
   gold: technically present, effectively invisible.
   The mark takes the tile's ink colour instead, which is what the letters used. */
.auth-brand .brand-mark .glyph,
.brand-mark .glyph {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 0;                       /* no stray text baseline under the svg */
}
.brand-mark .glyph svg {
  width: 30px; height: 30px;
  color: var(--maroon-900, #161f2e);  /* dark on the gold tile */
}
/* The tile is already a rounded square. Drawing another one inside it is
   clutter at this size, so the mark drops its own frame here and shows only
   the balance. */
.brand-mark .glyph svg .bm-frame { display: none; }

/* In the top nav of the public site the mark is NOT on a tile — it sits
   directly on the dark band, so there it takes gold. */
.nav .brand-mark .glyph {
  background: none; border: 0; width: auto; height: auto;
}
.nav .brand-mark .glyph svg {
  width: 40px; height: 40px;
  color: var(--gold-400, #bfa968);
}

/* =========================================================
   Verification screen
   ---------------------------------------------------------
   One step open at a time. The other collapses to a line, so the page never
   shows two six-digit boxes at once — which is how people paste the wrong code
   into the wrong field.
   ========================================================= */
/* The card this sits INSIDE (.auth-card) is 430px with 2.1rem of padding.
   Giving this one a 460px max-width made it wider than its own parent — which
   is where the horizontal scrollbar and the clipped edges came from. It fills
   the parent instead, and the parent is widened for this page below. */
.otp-card { width: 100%; max-width: none; }

/* The verification screen carries two steps and twelve code boxes; 430px is a
   sign-in form's width, not this. */
.auth-card.otp-shell { max-width: 520px; }

.otp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem; margin: 0 0 .3rem; color: var(--ink-900, #1b2430);
}
.otp-sub { margin: 0 0 1.6rem; font-size: .94rem; color: var(--ink-500, #6d7580); }

.otp-step {
  border: 1px solid var(--paper-line, #e0d9ca);
  border-radius: 12px; margin-bottom: .8rem; background: #fff;
  transition: border-color .15s, opacity .15s;
}
.otp-step.is-open    { border-color: var(--gold-500, #a08a45); box-shadow: 0 2px 10px rgba(27,36,48,.05); }
.otp-step.is-waiting { opacity: .5; }
.otp-step.is-done    { background: #f7faf8; border-color: #cfe0d5; }

.otp-step-head {
  display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem;
}
.otp-step-head h2 {
  margin: 0; font-size: .98rem; font-family: inherit; font-weight: 600;
  color: var(--ink-900, #1b2430);
}
.otp-step-head p {
  margin: .12rem 0 0; font-size: .85rem; color: var(--ink-500, #6d7580);
  font-family: 'IBM Plex Mono', monospace;
}

.otp-step-n {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: .85rem; font-weight: 500;
  background: var(--paper-alt, #eeeae1); color: var(--ink-500, #6d7580);
}
.otp-step.is-open .otp-step-n { background: var(--gold-700, #8a6d1f); color: #fff; }
.otp-step.is-done .otp-step-n { background: #2f7d4f; color: #fff; }

.otp-step-tag {
  margin-left: auto; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: #26643f; background: #e4f0e8; padding: .2rem .5rem; border-radius: 3px;
}

.otp-step-body { padding: 0 1.1rem 1.15rem; }
.otp-hint { margin: 0 0 1rem; font-size: .89rem; line-height: 1.55; color: var(--ink-700, #3a3f47); }

/* ---------- the six boxes ----------
   Wide enough for a fingertip, monospaced so every digit sits in the same
   place, and spaced so a glance can count them. */
.otp-digits { display: flex; gap: .5rem; margin-bottom: .9rem; }
.otp-digits input {
  flex: 1 1 0; min-width: 0; height: 56px;
  text-align: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem; font-weight: 600; color: var(--ink-900, #1b2430);
  border: 1.5px solid var(--paper-line, #e0d9ca); border-radius: 9px;
  background: #fdfcfa; transition: border-color .12s, background .12s;
  -moz-appearance: textfield;
}
.otp-digits input:focus {
  outline: none; border-color: var(--gold-700, #8a6d1f); background: #fff;
  box-shadow: 0 0 0 3px rgba(138,109,31,.12);
}
.otp-digits input:disabled { opacity: .6; }
.otp-digits input::-webkit-outer-spin-button,
.otp-digits input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 400px) {
  .otp-digits { gap: .35rem; }
  .otp-digits input { height: 48px; font-size: 1.25rem; }
}

.otp-error {
  margin: 0 0 .9rem; min-height: 1.2em;
  font-size: .86rem; line-height: 1.5; color: #8c2f24;
}
.otp-error.is-good { color: #26643f; }

.otp-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.otp-actions .btn { min-width: 8rem; justify-content: center; }

.otp-warn {
  padding: .8rem .9rem; border-radius: 9px;
  background: #fdf6ee; border: 1px solid #eadfc7;
  font-size: .86rem; line-height: 1.6; color: var(--ink-700, #3a3f47);
}
.otp-warn code {
  font-family: 'IBM Plex Mono', monospace; background: #f2eee4;
  padding: .08rem .3rem; border-radius: 3px;
}

.otp-foot {
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--paper-line, #e0d9ca);
  font-size: .82rem; line-height: 1.6; color: var(--ink-500, #6d7580);
}
.otp-back { margin: .9rem 0 0; font-size: .86rem; }
.otp-back a { color: var(--ink-500, #6d7580); }
.otp-back a:hover { color: var(--gold-700, #8a6d1f); }

/* Firebase drops its reCAPTCHA badge here; invisible mode renders nothing. */
#recaptcha-holder { margin-top: .8rem; }
#recaptcha-holder:empty { display: none; }

/* ---------- phone field with a country code ----------
   The code is a separate control rather than something to type, because a
   number entered without one cannot be texted and a number entered with the
   wrong one is texted to a stranger. The select is deliberately narrow: it is
   a qualifier, not the field. */
.phone-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .5rem;
}
.phone-row select { padding-right: 1.6rem; }

@media (max-width: 420px) {
  .phone-row { grid-template-columns: 7rem minmax(0, 1fr); }
}


/* =========================================================
   Justified prose, site-wide
   ---------------------------------------------------------
   Every paragraph, list item and table cell in the workspace, ALWAYS paired
   with hyphens:auto. Justifying without hyphenation stretches the spaces
   rather than breaking words, and a legal paragraph carrying
   "notwithstanding" or "identification" opens rivers of white down the column.
   ========================================================= */
.app-main p,
.app-main li,
.app-main td,
.app-main dd,
.panel-body p,
.alert,
.empty p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Ragged right, deliberately. Anything short, anything monospace, anything
   where a stretched space would read as a rendering fault rather than as
   typography — and anything inside a control, where justification is simply
   wrong. */
.app-main h1, .app-main h2, .app-main h3, .app-main h4,
.app-main th,
.app-main .btn, .app-main label, .app-main .form-label, .app-main .form-hint,
.app-main .muted, .app-main .count, .app-main .sub, .app-main .crumbs,
.app-main .tag, .app-main .st, .app-main .mono,
.app-main .side-link, .app-main option,
.mini-table td:first-child,
.otp-step-head p, .assess-clock, .run-note, .ct-meta, .odds-headline {
  text-align: left;
  hyphens: manual;
}

/* Numeric columns keep their own alignment. */
.dtable td[style*="text-align:right"] { text-align: right !important; }