/*
  Lifted from the original mock-up so the production app looks like the
  thing everyone already reviewed and signed off. The mock stays in the repo
  root as the design reference; this is its stylesheet, extracted.
*/
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Public+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

/* ---------- tokens ---------- */
:root{
  --bg:#EFF3F1; --surface:#FFFFFF; --surface-2:#F5F8F6; --line:#DCE4E0;
  --ink:#1A2622; --ink-soft:#54655F; --ink-faint:#7C8B85;
  --accent:#16655B; --accent-ink:#FFFFFF; --accent-soft:#E1EFEA; --accent-soft-ink:#124F47;
  --good:#2E7D4F; --good-soft:#E3F0E7; --good-soft-ink:#22603C;
  --bad:#B3402F; --bad-soft:#F6E6E2; --bad-soft-ink:#8F3222;
  --warn:#A26B1F; --warn-soft:#F5EDDC; --warn-soft-ink:#7E5316;
  --tint-approved:#E2F1E5; --tint-approved-line:#C0DDC8;
  --tint-rejected:#F8E8E3; --tint-rejected-line:#EACABE;
  --tint-pending:#F8F1DA; --tint-pending-line:#E7D8A9;
  --paper:#FDFDFA; --paper-ink:#242824; --paper-soft:#6A6F68; --paper-line:#E3E3DC;
  --pen:#1E3FA6;
  --shadow:0 1px 2px rgba(20,40,35,.06),0 8px 24px rgba(20,40,35,.08);
  --shadow-lg:0 4px 12px rgba(15,30,26,.14),0 24px 60px rgba(15,30,26,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101917; --surface:#18231F; --surface-2:#1E2A25; --line:#2B3832;
    --ink:#E7EEEA; --ink-soft:#9DAFA7; --ink-faint:#6E7F78;
    --accent:#4FC3B1; --accent-ink:#0B1B17; --accent-soft:#1B322C; --accent-soft-ink:#8ED8CB;
    --good:#6CC08F; --good-soft:#1D3226; --good-soft-ink:#96D4B0;
    --bad:#E08471; --bad-soft:#3A241F; --bad-soft-ink:#EBA898;
    --warn:#D9A455; --warn-soft:#362B18; --warn-soft-ink:#E4BE85;
    --tint-approved:#1B3023; --tint-approved-line:#33553F;
    --tint-rejected:#341F18; --tint-rejected-line:#5C382A;
    --tint-pending:#2C2413; --tint-pending-line:#544724;
    --paper:#F4F2EA; --paper-ink:#242824; --paper-soft:#6A6F68; --paper-line:#DDDCD2;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 4px 12px rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#101917; --surface:#18231F; --surface-2:#1E2A25; --line:#2B3832;
  --ink:#E7EEEA; --ink-soft:#9DAFA7; --ink-faint:#6E7F78;
  --accent:#4FC3B1; --accent-ink:#0B1B17; --accent-soft:#1B322C; --accent-soft-ink:#8ED8CB;
  --good:#6CC08F; --good-soft:#1D3226; --good-soft-ink:#96D4B0;
  --bad:#E08471; --bad-soft:#3A241F; --bad-soft-ink:#EBA898;
  --warn:#D9A455; --warn-soft:#362B18; --warn-soft-ink:#E4BE85;
  --tint-approved:#152820; --tint-approved-line:#2A4A38;
  --tint-rejected:#2C1B16; --tint-rejected-line:#54322A;
  --tint-pending:#282112; --tint-pending-line:#4E4222;
  --paper:#F4F2EA; --paper-ink:#242824; --paper-soft:#6A6F68; --paper-line:#DDDCD2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 4px 12px rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.5);
}
/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- app bar ---------- */
.app-bar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);}
.app-bar-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.wordmark{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;color:var(--ink)}
.wordmark .seal{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:14px;font-weight:700}
.spacer{flex:1}
.viewing-as{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 6px 4px 12px}
.viewing-as .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.viewing-as select{background:transparent;border:0;font-weight:600;font-size:13.5px;padding:4px 2px;max-width:180px;cursor:pointer}
.icon-btn{position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-soft);border:1px solid transparent}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}
.badge:empty{display:none}

/* ---------- tabs ---------- */
.tabs{max-width:1100px;margin:0 auto;padding:14px 16px 0;display:flex;gap:8px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;font-weight:600;font-size:14px;color:var(--ink-soft);border:1px solid var(--line);background:var(--surface)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tab .count{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.tab[aria-selected="true"] .count{background:rgba(255,255,255,.25)}
.tab .count:empty{display:none}

/* ---------- main ---------- */
main{max-width:1100px;margin:0 auto;padding:18px 16px 80px}
.view-title{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:600;font-size:22px;letter-spacing:-.01em;margin:6px 0 4px;text-wrap:balance}
.view-sub{color:var(--ink-soft);margin:0 0 16px;max-width:60ch}
.list-tools{display:flex;align-items:center;gap:10px;margin:0 0 6px;flex-wrap:wrap}
.list-tools .text-input{padding:8px 12px;font-size:13.5px}
.js-search{max-width:250px}
.js-folder{max-width:180px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;background:var(--surface);padding:3px;gap:2px}
.seg button{padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.group-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:20px 0 10px}
.group-h .gcount{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 7px;font-size:10.5px}

/* ---------- cards ---------- */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cards.list{grid-template-columns:1fr;gap:8px}
.cards.thumbs{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cards>*{min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.card.st-pending{background:var(--tint-pending);border-color:var(--tint-pending-line)}
.card.st-approved{background:var(--tint-approved);border-color:var(--tint-approved-line)}
.card.st-rejected{background:var(--tint-rejected);border-color:var(--tint-rejected-line)}
.row-card{flex-direction:row;align-items:center;gap:12px;padding:10px 14px;border-radius:12px}
.doc-thumb{width:42px;height:52px;border-radius:6px;background:var(--paper);border:1px solid var(--paper-line);color:var(--paper-soft);display:grid;place-items:center;flex:none;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.doc-thumb.sm{width:32px;height:40px;border-radius:5px}
.doc-thumb svg{width:18px;height:18px}
.rc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-top{display:flex;align-items:center;gap:8px;min-width:0}
.rc-vendor{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-sub{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-right{display:flex;align-items:center;gap:10px;flex:none}
.rc-amount{font-weight:600;font-size:13.5px;white-space:nowrap}
.rc-time{font-size:11.5px;color:var(--ink-faint);width:52px;text-align:right}
@media (max-width:620px){.rc-time{display:none}.rc-amount{font-size:12.5px}}
.folder-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink-faint);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 7px;flex:none}
.folder-tag svg{width:11px;height:11px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.pending{background:var(--warn-soft);color:var(--warn-soft-ink)} .pill.pending .dot{background:var(--warn)}
.pill.approved{background:var(--good-soft);color:var(--good-soft-ink)} .pill.approved .dot{background:var(--good)}
.pill.rejected{background:var(--bad-soft);color:var(--bad-soft-ink)} .pill.rejected .dot{background:var(--bad)}
/* Withdrawn is deliberately grey rather than red: nothing went wrong and
   nobody refused anything, the request was simply taken back. */
.pill.withdrawn{background:#e9ecef;color:#495057} .pill.withdrawn .dot{background:#868e96}

.edit-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;margin-bottom:18px;
  border-radius:10px;background:var(--warn-soft);color:var(--warn-soft-ink);font-size:13px;line-height:1.5}
.edit-banner .link-btn{margin-left:auto}
.owner-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* Capped and scrollable: a twelve-page contract must not push the vendor and
   approver fields off the bottom of a phone screen. */
.upload-preview{margin-top:12px;max-height:46vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2,#f6f7f9);padding:10px}
.upload-preview .doc-pages{gap:10px}
.upload-preview .doc-page{box-shadow:0 1px 3px rgba(0,0,0,.12)}
.upload-preview-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;font-size:12.5px;color:var(--ink-soft)}
.upload-preview-head b{color:var(--ink);font-size:13px;word-break:break-all}
.upload-preview-head .too-big{color:var(--bad);font-weight:700}

.mark-block + .mark-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}

.access-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.access-row:last-child{border-bottom:none}
.access-row .nm{font-weight:700;font-size:13.5px}
.access-row .rl{font-size:12px;color:var(--ink-soft)}
.access-row .roles{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.role-chip{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:99px;
  background:var(--surface-2,#f1f3f5);color:var(--ink-soft)}
.role-chip.administrator{background:var(--warn-soft);color:var(--warn-soft-ink)}
.role-chip.guest{background:#e7f5ff;color:#1864ab}
.role-chip.unknown{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);font-weight:400}

#apprSearch{margin-bottom:10px}
.appr-group{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin:12px 0 6px}
.appr-group:first-child{margin-top:0}
.appr-none{font-size:13px;color:var(--ink-soft);padding:8px 0}
.last-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px}
.last-set .who{color:var(--ink-soft)}
.last-set button{margin-left:auto}
.access-row.retired{opacity:.55}
.list-search{margin-bottom:14px}
.comment{padding:10px 0;border-bottom:1px solid var(--line)}
.comment:last-child{border-bottom:none}
.comment .who{font-weight:700;font-size:13px}
.comment .when{font-size:11.5px;color:var(--ink-soft);margin-left:6px}
.comment .what{font-size:13.5px;margin-top:3px;overflow-wrap:anywhere}
.comment .kind{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.folder-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--surface-2,#f1f3f5);color:var(--ink-soft);margin-left:6px}

.rc-approvers{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.rc-progress{font-size:11.5px;color:var(--ink-soft);margin-left:3px}
/* Deliberately readable without colour: the ring weight and the tick carry the
   state too, because "who has approved" must not depend on distinguishing
   green from grey. */
.appr-dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:700;letter-spacing:.02em;
  background:var(--surface-2,#f1f3f5);color:var(--ink-soft);border:1.5px dashed var(--line);
  position:relative}
.appr-dot.approved{background:var(--good-soft);color:var(--good-soft-ink);border:1.5px solid var(--good)}
.appr-dot.approved::after{content:'\2713';position:absolute;bottom:-3px;right:-3px;font-size:9px;
  background:var(--good);color:#fff;border-radius:50%;width:12px;height:12px;
  display:flex;align-items:center;justify-content:center;line-height:1}
.appr-dot.rejected{background:var(--bad-soft);color:var(--bad-soft-ink);border:1.5px solid var(--bad)}
.appr-dot.turn{background:var(--warn-soft);color:var(--warn-soft-ink);border:1.5px solid var(--warn)}
.access-row .act{margin-left:8px}

/* A designated field. Positioned like the signature ghost — percentages from
   the page's own box — so an outline and the mark that lands in it agree. */
.doc-page .field-box{position:absolute;transform:translate(-50%,-50%);aspect-ratio:3/1;
  border:2px dashed #adb5bd;border-radius:6px;display:flex;align-items:center;justify-content:center;
  pointer-events:none;background:rgba(255,255,255,.35)}
.doc-page .field-box span{font-size:10px;font-weight:700;letter-spacing:.02em;color:#6c757d;
  text-align:center;padding:0 4px;line-height:1.2;overflow:hidden}
/* Yours is the one that matters, so it is the only one that draws the eye. */
.doc-page .field-box.mine{border-color:var(--accent);border-style:solid;background:rgba(31,111,235,.10)}
.doc-page .field-box.mine span{color:var(--accent)}
.doc-page .field-box.done{border-color:var(--good);border-style:solid;background:rgba(0,0,0,0)}
.doc-page .field-box.done span{display:none}
/* Answers a tap on a document whose spots cannot be moved. Without it the page
   simply ignores the tap, which reads as broken rather than settled. */
/* Yours and still to confirm: obviously tappable. */
.doc-page .field-box.confirmable{pointer-events:auto;cursor:pointer}
.doc-page .field-box.confirmable:hover{background:rgba(31,111,235,.18)}
/* Confirmed: green, ticked, and no longer demanding attention. */
.doc-page .field-box.confirmed{border-color:var(--good);background:rgba(45,138,85,.12)}
.doc-page .field-box.confirmed span{color:var(--good)}
.doc-page .field-box.confirmed span::after{content:' ✓'}
/* Once the real mark is drawn in, it IS the label — the caption would only sit
   on top of it. */
.doc-page .field-box.confirmed:has(img) span{display:none}
.doc-page .field-box img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.doc-page .field-box.flash{animation:field-flash .6s ease-out 2}
@keyframes field-flash{
  0%,100%{box-shadow:0 0 0 0 rgba(31,111,235,0)}
  50%{box-shadow:0 0 0 6px rgba(31,111,235,.35)}
}
@media (prefers-reduced-motion: reduce){
  .doc-page .field-box.flash{animation:none;box-shadow:0 0 0 6px rgba(31,111,235,.35)}
}

.field-tool{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.field-tool-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field-tool-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.field-tool-row .text-input{flex:1 1 180px;min-width:0}
.check-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--ink-soft)}
.field-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.field-list:empty{display:none}
.field-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
  background:var(--surface-2,#f1f3f5);font-size:12.5px}
.field-chip .who{font-weight:700}
.field-chip .drop{margin-left:auto}
/* The marker the submitter drops, distinct from an approver's own ghost. */
.doc-page .field-mark{position:absolute;transform:translate(-50%,-50%);aspect-ratio:3/1;
  border:2px solid var(--accent);border-radius:6px;background:rgba(31,111,235,.10);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.doc-page .field-mark{touch-action:none;cursor:grab}
.doc-page .field-mark.dragging{cursor:grabbing;opacity:.85}
.doc-page .field-mark span{font-size:10px;font-weight:700;color:var(--accent);
  text-align:center;padding:0 4px;line-height:1.2;overflow:hidden}
/* Deliberately large for a fingertip, and outside the mark so dragging the
   mark never catches it. */
.doc-page .field-drop{position:absolute;top:-10px;right:-10px;width:22px;height:22px;
  border-radius:50%;border:none;background:var(--bad);color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.upload-preview .doc-page{cursor:crosshair}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-soft-ink);display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:none}
.st.pending{background:var(--warn)} .st.approved{background:var(--good)} .st.rejected{background:var(--bad)}
.tcard{padding:10px;gap:9px}
.thumb-frame{position:relative;aspect-ratio:17/21;overflow:hidden;border-radius:8px;border:1px solid var(--paper-line);background:var(--paper);width:100%}
.thumb-frame .doc-page{position:absolute;top:0;left:0;width:700px;transform-origin:top left;border:0;border-radius:0;box-shadow:none;min-height:0}
.tmeta{display:flex;flex-direction:column;gap:6px}
.t-from{font-size:12.5px;color:var(--ink-soft)}
.card-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint)}
.card-vendor{font-weight:700;font-size:15.5px;line-height:1.3}
.card-amount{font-size:16px;font-weight:600;margin-left:auto;white-space:nowrap}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:40px 20px;text-align:center;color:var(--ink-faint)}
.empty b{display:block;color:var(--ink-soft);font-size:15px;margin-bottom:4px}

/* ---------- new request form ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:640px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow)}
.fieldset{display:flex;flex-direction:column;gap:8px}
.f-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.f-hint{font-size:12.5px;color:var(--ink-faint);margin-top:-2px}
.dropzone{border:1.5px dashed var(--line);border-radius:12px;background:var(--surface-2);padding:26px 18px;text-align:center;color:var(--ink-soft);transition:border-color .12s, background .12s;cursor:pointer}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft)}
.dropzone .dz-icon{width:40px;height:40px;margin:0 auto 8px;color:var(--accent)}
.dropzone b{color:var(--ink)}
.dz-actions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.file-pill{display:flex;align-items:center;gap:10px;background:var(--accent-soft);color:var(--accent-soft-ink);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14px}
.file-pill svg{width:18px;height:18px;flex:none}
.file-pill .x{margin-left:auto;font-size:18px;line-height:1;opacity:.7;padding:2px 6px}
.text-input,textarea.text-input,select.text-input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
.text-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
textarea.text-input{resize:vertical;min-height:74px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.amount-wrap{position:relative}
.amount-wrap .cur{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:14px;font-weight:600}
.amount-wrap input{padding-left:34px}
.amount-wrap input:disabled{opacity:.4}
.appr-pick{display:flex;flex-wrap:wrap;gap:8px}
.appr-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:99px;padding:6px 14px 6px 6px;font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.appr-opt .role{font-weight:400;font-size:12px;color:var(--ink-faint)}
.appr-opt[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-soft-ink)}
.appr-opt[aria-pressed="true"] .role{color:inherit;opacity:.75}
.ord{width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft)}
.check input{accent-color:var(--accent);width:16px;height:16px}
.f-err{color:var(--bad);font-size:13px;font-weight:600;display:none}
.f-err.show{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:11px 20px;font-weight:700;font-size:14.5px;border:1px solid transparent;transition:filter .12s;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
.btn-good{background:var(--good);color:#fff}
.btn-bad{background:var(--bad);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn svg{width:17px;height:17px}
.link-btn{color:var(--accent);font-weight:700;font-size:13.5px}

/* ---------- detail overlay ---------- */
.detail{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;display:none}
.detail.open{display:block}
.detail-bar{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.detail-bar-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back-btn{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--ink-soft);padding:6px 10px;border-radius:8px}
.back-btn:hover{background:var(--surface-2)}
.detail-id{font-size:13px;color:var(--ink-faint)}
.detail-grid{max-width:1100px;margin:0 auto;padding:18px 16px 90px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px;align-items:start}
@media (max-width:860px){.detail-grid{grid-template-columns:1fr}}
.doc-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.doc-panel h3, .side-card h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.side-card h3{margin-bottom:12px}
.doc-page{position:relative;background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:6px;box-shadow:0 2px 6px rgba(20,30,25,.12);overflow:hidden;min-height:300px}
.doc-page.placing{cursor:crosshair;outline:2px dashed var(--accent);outline-offset:3px}
.doc-page img.doc-img{display:block;width:100%;height:auto}
.placed-sig{position:absolute;transform:translate(-50%,-50%);pointer-events:none;text-align:center}
.placed-sig img{width:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.1))}
.placed-sig .sig-cap{font-size:9px;color:var(--paper-soft);border-top:1px solid var(--paper-line);margin-top:1px;padding-top:2px;white-space:nowrap;font-family:"Spline Sans Mono",monospace}
.placed-sig.draggable{pointer-events:auto;cursor:grab;outline:1.5px dashed var(--accent);outline-offset:4px;border-radius:2px}
.placed-sig.draggable:active{cursor:grabbing}
.place-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;background:var(--accent-soft);color:var(--accent-soft-ink);border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600}
.place-bar input[type=range]{accent-color:var(--accent)}
.stamp{position:absolute;top:16%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);border:3px solid var(--bad);color:var(--bad);font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:26px;letter-spacing:.18em;padding:4px 18px;border-radius:6px;opacity:.75;pointer-events:none}
/* mock invoice / letter */
.mi{padding:26px 28px;font-size:12.5px;line-height:1.5}
.mi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--paper-ink);padding-bottom:12px;margin-bottom:14px}
.mi-vendor{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px}
.mi-vendor small{display:block;font:11px "Public Sans",sans-serif;color:var(--paper-soft);font-weight:400}
.mi-label{font-weight:700;letter-spacing:.2em;color:var(--paper-soft);font-size:13px}
.mi-meta{display:flex;gap:24px;color:var(--paper-soft);margin-bottom:14px;flex-wrap:wrap}
.mi-meta b{color:var(--paper-ink);display:block;font-family:"Spline Sans Mono",monospace;font-weight:500}
.mi table{width:100%;border-collapse:collapse;margin-bottom:12px}
.mi th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-soft);border-bottom:1px solid var(--paper-line);padding:5px 4px}
.mi td{padding:6px 4px;border-bottom:1px solid var(--paper-line);color:var(--paper-ink)}
.mi td:last-child,.mi th:last-child{text-align:right;font-family:"Spline Sans Mono",monospace}
.mi-total{display:flex;justify-content:flex-end;gap:26px;font-weight:700;font-size:14px}
.mi-total span{font-family:"Spline Sans Mono",monospace}
.mi-foot{margin-top:22px;color:var(--paper-soft);font-size:10.5px}
.doc-page, .doc-page p, .doc-page div, .doc-page span, .doc-page table{color:var(--paper-ink)}
.doc-page .mi-label,.doc-page .mi-meta,.doc-page .mi-foot,.doc-page .mi-vendor small,.doc-page .doc-ph,.doc-page .sig-cap,.doc-page .eh b,.doc-page .sig-slot{color:var(--paper-soft)}
.doc-page .mi-meta b,.doc-page .doc-ph b{color:var(--paper-ink)}
.doc-page .stamp{color:var(--bad)}
.doc-ph{padding:60px 24px;text-align:center;color:var(--paper-soft)}
.doc-ph svg{width:44px;height:44px;margin-bottom:10px}
.doc-ph b{display:block;color:var(--paper-ink);font-size:14px;word-break:break-all}
.email-doc{padding:24px 26px;font-size:13px}
.email-doc .eh{border-bottom:1px solid var(--paper-line);padding-bottom:10px;margin-bottom:12px}
.email-doc .eh div{margin:2px 0}.email-doc .eh b{display:inline-block;width:64px;color:var(--paper-soft);font-weight:600}
/* side column */
.side{display:flex;flex-direction:column;gap:16px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.meta-rows{display:grid;gap:10px}
.meta-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;align-items:center}
.meta-row .k{color:var(--ink-faint)}
.meta-row .v{font-weight:600;text-align:right}
.appr-rows{display:grid;gap:10px}
.appr-row{display:flex;align-items:center;gap:10px}
.appr-row .nm{font-weight:600;font-size:14px}
.appr-row .rl{font-size:12px;color:var(--ink-faint)}
.appr-row .pill{margin-left:auto}
.reject-note{background:var(--bad-soft);color:var(--bad-soft-ink);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:8px}
.ok-note{background:var(--good-soft);color:var(--good-soft-ink);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:8px}
.actions{display:flex;gap:10px}
.actions .btn{flex:1}
/* audit */
.audit{display:grid;gap:0;position:relative}
.audit-item{display:flex;gap:12px;padding:0 0 16px;position:relative}
.audit-item:last-child{padding-bottom:0}
.audit-item::before{content:"";position:absolute;left:13px;top:30px;bottom:-2px;width:2px;background:var(--line)}
.audit-item:last-child::before{display:none}
.audit-ic{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--ink-soft);z-index:1}
.audit-ic svg{width:14px;height:14px}
.audit-ic.good{background:var(--good-soft);color:var(--good-soft-ink);border-color:transparent}
.audit-ic.bad{background:var(--bad-soft);color:var(--bad-soft-ink);border-color:transparent}
.audit-ic.acc{background:var(--accent-soft);color:var(--accent-soft-ink);border-color:transparent}
.audit-body{font-size:13.5px;line-height:1.45;padding-top:3px}
.audit-body .who{font-weight:700}
.audit-body .cm{background:var(--surface-2);border-left:3px solid var(--line);border-radius:0 8px 8px 0;padding:6px 10px;margin-top:5px;color:var(--ink-soft)}
.audit-t{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}
.cmt-item{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.cmt-item.mine{flex-direction:row-reverse}
.cmt-body{max-width:82%;min-width:0}
.cmt-item.mine .cmt-body{text-align:right}
.cmt-meta{font-size:11.5px;color:var(--ink-faint);margin-bottom:3px}
.cmt-meta b{color:var(--ink-soft)}
.cmt-bubble{display:inline-block;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:9px 13px;font-size:13.5px;line-height:1.45}
.cmt-item.mine .cmt-bubble{border-radius:14px 4px 14px 14px}
.cmt-bubble.approve{background:var(--good-soft);color:var(--good-soft-ink);border-color:transparent}
.cmt-bubble.reject{background:var(--bad-soft);color:var(--bad-soft-ink);border-color:transparent}
.cmt-kind{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:2px}
.note-composer{display:flex;gap:8px;margin-top:16px}
.note-composer input{flex:1;padding:9px 12px;font-size:13.5px}
.note-composer .btn{padding:9px 16px}

/* ---------- modals ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(10,20,17,.5);display:none;align-items:flex-end;justify-content:center;padding:0}
@media (min-width:560px){.overlay{align-items:center;padding:24px}}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:520px;padding:22px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto}
@media (min-width:560px){.modal{border-radius:18px}}
.modal h2{margin:0 0 4px;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:600}
.modal .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 16px}
.stamp-quick{display:flex;align-items:center;gap:12px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:10px 12px;margin-bottom:16px;flex-wrap:wrap}
.stamp-quick .sq-sig{background:var(--paper);border-radius:8px;padding:4px 10px;display:grid;place-items:center}
.stamp-quick .sq-sig img{height:32px;max-width:110px}
.stamp-quick .sq-t{font-size:12.5px;color:var(--accent-soft-ink);flex:1;min-width:140px}
.stamp-quick .btn{padding:8px 14px;font-size:13px}
.sig-tabs{display:flex;gap:6px;margin-bottom:14px}
.sig-tab{flex:1;padding:8px;border-radius:9px;font-weight:700;font-size:13px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line)}
.sig-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sig-pane{display:none}.sig-pane.open{display:block}
.sig-canvas-wrap{position:relative;border:1.5px dashed var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.sig-canvas-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1px solid var(--paper-line);pointer-events:none}
canvas#sigPad{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair}
.sig-tools{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.sig-preview{border:1.5px dashed var(--line);border-radius:12px;background:var(--paper);min-height:120px;display:grid;place-items:center;padding:14px}
.sig-preview img{max-width:80%;max-height:110px}
.sig-preview .none{color:var(--ink-faint);font-size:13.5px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:100;background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:99px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* notifications drawer */
.notif-wrap{position:relative}
.notif-panel{position:absolute;right:0;top:46px;width:min(360px,88vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:70}
.notif-panel.open{display:block}
.notif-panel h4{margin:6px 10px 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.notif-item{display:flex;gap:10px;width:100%;text-align:left;padding:10px;border-radius:10px;align-items:flex-start}
.notif-item:hover{background:var(--surface-2)}
.notif-item .nt{font-size:13.5px;line-height:1.4}
.notif-item .nt b{font-weight:700}
.notif-item .ntt{font-size:11.5px;color:var(--ink-faint)}
.notif-empty{padding:18px 12px;color:var(--ink-faint);font-size:13.5px;text-align:center}
.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--bad);margin-top:6px;flex:none}
.notif-dot.ok{background:var(--good)} .notif-dot.warn{background:var(--warn)}

.demo-note{max-width:1100px;margin:30px auto 0;padding:0 16px;color:var(--ink-faint);font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.demo-note .link-btn{font-size:12.5px}
.info-list{display:grid;gap:12px;font-size:13.5px;color:var(--ink-soft)}
.info-list b{color:var(--ink)}

/* ---------- additions for the real app ---------- */

/*
  The hidden attribute has to win.

  Browsers implement `hidden` as `[hidden]{display:none}` in the UA stylesheet,
  which any class selector outranks. So an element carrying both `hidden` and a
  class that sets `display` stays on screen — which is how the sign-in gate
  survived a successful sign-in: `.centred{display:grid}` quietly beat it.

  This affects every element the app toggles with `.hidden`: the gate, the sign
  out button (.btn is inline-flex), the New request tab (.tab is flex), and the
  download link. Sections happened to work only because nothing sets display on
  them.

  One rule fixes the class, so put anything genuinely conditional behind
  `hidden` and let this handle it.
*/
[hidden] { display: none !important; }

.centred{display:grid;place-items:center;min-height:70vh;padding:24px}
.gate{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;max-width:460px;text-align:center;box-shadow:var(--shadow)}
.gate .btn{margin-top:18px}
.whoami{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;margin-right:10px}
.who-name{font-weight:600;font-size:13.5px}
.who-roles{font-size:11px;color:var(--ink-faint);letter-spacing:.03em}
.session-dump{white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.6;margin:0;color:var(--ink-soft)}
.f-err{display:none}
.f-err.show{display:block}
.appr-opt{cursor:pointer}
input[type=file].text-input{padding:9px 12px}
.detail{display:none}
.detail.open{display:block}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ---------- signature capture ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(10,20,17,.5);display:none;align-items:flex-end;justify-content:center}
@media (min-width:560px){.overlay{align-items:center;padding:24px}}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:520px;padding:22px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto}
@media (min-width:560px){.modal{border-radius:18px}}
.modal h2{margin:0 0 4px;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:600}
.modal .sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 16px}
.sig-canvas-wrap{position:relative;border:1.5px dashed var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.sig-canvas-wrap::after{content:"";position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1px solid var(--paper-line);pointer-events:none}
canvas#sigPad{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair}
.sig-tools{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1}
.sig-status{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
.sig-status img{height:34px;max-width:140px;background:var(--paper);border-radius:6px;padding:2px 6px}
.place-hint{background:var(--accent-soft);color:var(--accent-soft-ink);border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600;margin-top:12px}
/* .doc-stage was removed on 15 Sep 2026. It came from the original mock-up,
   appeared in no markup the app serves, and carried pointer-events:none on
   .ghost — which would have silently made the signature undraggable the moment
   anybody reused the class name. Dead CSS that contradicts live CSS is worse
   than none. */

/* ---------- document rendering ---------- */
.doc-meta{font-size:11px;color:var(--ink-faint);display:block;margin-bottom:10px;word-break:break-all}
.doc-loading{padding:48px 20px;text-align:center;color:var(--ink-faint);font-size:13.5px}
.doc-pages{display:flex;flex-direction:column;gap:14px}
.doc-page{position:relative;background:var(--paper);border:1px solid var(--paper-line);border-radius:6px;box-shadow:0 2px 6px rgba(20,30,25,.12);overflow:hidden;line-height:0}
.doc-canvas{width:100%;height:auto;display:block}
.doc-page img.doc-img{width:100%;height:auto;display:block}
.doc-page.placing{outline:2px dashed var(--accent);outline-offset:3px;cursor:crosshair}
/* Draggable, so it can be lined up rather than only dropped near. touch-action
   none stops a drag scrolling the page under it; the page itself still
   scrolls, because only the mark opts out. */
.doc-page .ghost{position:absolute;transform:translate(-50%,-50%);line-height:1;
  touch-action:none;cursor:grab}
.doc-page .ghost.dragging{cursor:grabbing;opacity:.85}
.doc-page .ghost img{width:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.sealed-banner{background:var(--good-soft);color:var(--good-soft-ink);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;margin-bottom:10px}

/* ---------- audit trail corrections ----------
   The mock's audit styles assumed a 28px icon on each row. Without it the
   timeline rule ran through the text, and the body — a flex child with the
   default min-width:auto — refused to shrink, so a 64-character sha256 pushed
   straight through the side of the card.
*/
.audit-item{gap:0;padding-left:18px}
.audit-item::before{left:4px;top:18px;bottom:-4px}
.audit-item:not(:last-child){padding-bottom:18px}
.audit-item::after{
  content:"";position:absolute;left:0;top:6px;
  width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
}
.audit-item.evt-approved::after{border-color:var(--good);background:var(--good-soft)}
.audit-item.evt-rejected::after{border-color:var(--bad);background:var(--bad-soft)}
.audit-item.evt-sealed::after,
.audit-item.evt-completed::after{border-color:var(--accent);background:var(--accent-soft)}

/* min-width:0 is what actually lets a flex child wrap. */
.audit-body{min-width:0;flex:1;padding-top:0}
.audit-body .cm{
  overflow-wrap:anywhere;word-break:break-word;
  border-radius:6px;border-left-width:2px;margin-top:6px;font-size:12.5px;
}
.audit-body .cm.hashish{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;line-height:1.5}
.audit-t{overflow-wrap:anywhere;margin-top:4px;line-height:1.5}
.audit-type{color:var(--ink-soft)}

/* ---------- notification status ---------- */
.push-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-faint)}
.push-on{background:var(--good)}
.push-off{background:var(--warn)}
.push-blocked,.push-unsupported{background:var(--bad)}
.push-needs-install{background:var(--accent)}

.push-details{margin-top:12px}
.push-details summary{font-size:12.5px;color:var(--accent);cursor:pointer;font-weight:600}
.push-details pre{margin-top:8px;font-size:11px}

/* The approval dialog, and the acknowledgement shown when somebody confirms
   every mark at once. */
.ack-note{background:var(--accent-soft);color:var(--accent-soft-ink);border-radius:10px;
  padding:11px 13px;font-size:13px;line-height:1.45;margin:0 0 16px}

.check-row{display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer}
.check-row input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--accent)}
.check-row > span{font-size:14px;line-height:1.35}
.check-row .f-hint{display:block;margin-top:2px}

#approveComment{margin-top:6px}

/* "Confirm all" sits beside the running count, not in place of it: tapping
   each spot stays the obvious path and this is the deliberate shortcut. */
.confirm-all-btn{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--accent);
  background:none;border:none;padding:0;text-decoration:underline;cursor:pointer}
.confirm-all-btn:disabled{opacity:.4;cursor:default;text-decoration:none}