/* ============================================================
   FPS — Crew Pay & Portal Gateway
   Design system continues assets/app.css from the FPS prototype:
   dark production-office aesthetic, daylight blue + tungsten gold,
   script revision colours as status indicators.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#101317;
  --panel:#171B21;
  --panel-2:#1D222A;
  --raised:#242A33;
  --line:#2E3640;
  --line-soft:#232A32;

  /* Ink */
  --ink:#E7EBEF;
  --ink-2:#B4BEC9;
  --ink-3:#7F8B98;

  /* Accents */
  --daylight:#5AA9E6;      /* daylight blue  — primary action / navigation */
  --daylight-dim:#2E5F86;
  --tungsten:#E4A93C;      /* tungsten gold  — money, totals, attention */
  --tungsten-dim:#7A5D22;

  /* Script revision colours as status indicators */
  --rev-white:#F2F4F6;     /* draft            */
  --rev-blue:#6FA8DC;      /* submitted        */
  --rev-pink:#EC93B3;      /* queried          */
  --rev-yellow:#F2D24B;    /* approved         */
  --rev-green:#7DC28B;     /* in payroll run   */
  --rev-goldenrod:#D6A649; /* paid             */
  --rev-buff:#E0D2AB;      /* superseded       */
  --rev-salmon:#F09A7A;    /* blocked          */
  --rev-cherry:#C4536A;    /* rejected / overdue */

  --radius:3px;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--daylight);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--daylight);outline-offset:2px}

h1,h2,h3,h4,.display{
  font-family:"Barlow Condensed",'Arial Narrow',sans-serif;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin:0; line-height:1.1;
}
h1{font-size:30px}
h2{font-size:21px}
h3{font-size:16px}
h4{font-size:13px;letter-spacing:.10em;color:var(--ink-3)}

.mono,code,.num,td.num,th.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.num{font-variant-numeric:tabular-nums}
td.num,th.num{text-align:right}

/* ---------- Chrome ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:0 20px;height:54px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand .mark{
  font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:700;
  letter-spacing:.14em;color:var(--ink);text-transform:uppercase;
}
.brand .sub{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--tungsten);letter-spacing:.18em;text-transform:uppercase}
.topnav{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
.topnav a{
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.07em;
  font-size:14px;color:var(--ink-2);padding:6px 11px;border-radius:var(--radius);
}
.topnav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.topnav a.on{background:var(--daylight-dim);color:#fff}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.whoami{text-align:right;line-height:1.2}
.whoami .n{font-size:13px}
.whoami .r{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--raised);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.06em;color:var(--tungsten);
}

.wrap{max-width:1240px;margin:0 auto;padding:22px 20px 70px}
.wrap.narrow{max-width:900px}

.crumb{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.crumb a{color:var(--ink-3)}
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.pagehead .sub{color:var(--ink-3);font-size:13.5px}
.pagehead .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rule{height:1px;background:var(--line);margin:14px 0 20px}

/* ---------- Panels ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media(max-width:900px){.g2,.g3,.g4,.g-2-1,.g-1-2{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card > .hd{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.card > .hd h3{flex:0 0 auto}
.card > .hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card > .bd{padding:14px}
.card > .ft{padding:10px 14px;border-top:1px solid var(--line);background:var(--panel-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card.flush > .bd{padding:0}

.kv{display:grid;grid-template-columns:170px 1fr;gap:7px 14px;font-size:14px}
.kv dt{color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding-top:3px}
.kv dd{margin:0}
@media(max-width:600px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:8px}}

.stat{padding:12px 14px}
.stat .lab{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.stat .val{font-family:"Barlow Condensed",sans-serif;font-size:32px;letter-spacing:.02em;line-height:1.05;margin-top:2px}
.stat .val.money{color:var(--tungsten)}
.stat .note{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---------- Status chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;
}
.chip::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--ink-3)}
.chip.draft::before{background:var(--rev-white)}
.chip.submitted::before{background:var(--rev-blue)}
.chip.review::before{background:var(--rev-blue)}
.chip.queried::before{background:var(--rev-pink)}
.chip.approved::before{background:var(--rev-yellow)}
.chip.payroll::before{background:var(--rev-green)}
.chip.paid::before{background:var(--rev-goldenrod)}
.chip.superseded::before{background:var(--rev-buff)}
.chip.blocked::before{background:var(--rev-salmon)}
.chip.rejected::before{background:var(--rev-cherry)}
.chip.ok::before{background:var(--rev-green)}
.chip.plain::before{display:none}
.chip.solid{background:var(--panel-2)}

.band{height:3px;background:var(--line);border-radius:2px 2px 0 0}
.band.draft{background:var(--rev-white)}
.band.submitted,.band.review{background:var(--rev-blue)}
.band.queried{background:var(--rev-pink)}
.band.approved{background:var(--rev-yellow)}
.band.payroll{background:var(--rev-green)}
.band.paid{background:var(--rev-goldenrod)}
.band.blocked{background:var(--rev-salmon)}
.band.rejected{background:var(--rev-cherry)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;font-weight:400;
  padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:rgba(90,169,230,.045)}
tbody tr.norow:hover{background:none}
tfoot td{padding:10px 12px;border-top:1px solid var(--line);font-weight:600}
tr.total td{background:var(--panel-2)}
td .sm,.sm{font-size:12px;color:var(--ink-3)}
td.tight,th.tight{width:1%;white-space:nowrap}
.locked{color:var(--ink-3)}
.locked::after{content:" ●";color:var(--tungsten);font-size:9px;vertical-align:middle}

/* ---------- Buttons & controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px;
  background:var(--raised);color:var(--ink);border:1px solid var(--line);
  padding:7px 14px;border-radius:var(--radius);
}
.btn:hover{border-color:var(--daylight);text-decoration:none;color:#fff}
.btn.pri{background:var(--daylight-dim);border-color:var(--daylight);color:#fff}
.btn.pri:hover{background:var(--daylight);color:#0d1116}
.btn.gold{background:var(--tungsten-dim);border-color:var(--tungsten);color:#fff}
.btn.gold:hover{background:var(--tungsten);color:#17130a}
.btn.ghost{background:transparent}
.btn.sm{font-size:12.5px;padding:4px 10px}
.btn[disabled],.btn.off{opacity:.4;cursor:not-allowed;pointer-events:none}

label.fl{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius);padding:7px 9px;font:inherit;font-size:14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--daylight);outline:none}
.field{margin-bottom:12px}
.checkrow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.checkrow input{margin-top:4px;accent-color:var(--daylight);width:16px;height:16px;flex:0 0 auto}
.checkrow:last-child{border-bottom:0}

/* ---------- Notices ---------- */
.notice{
  border:1px solid var(--line);border-left:3px solid var(--daylight);
  background:var(--panel-2);padding:10px 13px;border-radius:var(--radius);font-size:13.5px;color:var(--ink-2);
}
.notice.warn{border-left-color:var(--rev-salmon)}
.notice.good{border-left-color:var(--rev-green)}
.notice.gold{border-left-color:var(--tungsten)}
.notice.stop{border-left-color:var(--rev-cherry)}
.notice strong{color:var(--ink)}
.notice + .notice{margin-top:8px}

.clause{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  color:var(--tungsten);border:1px solid var(--tungsten-dim);border-radius:2px;padding:1px 5px;white-space:nowrap;
}

/* ---------- Progress ---------- */
.track{height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden;display:flex}
.track i{display:block;height:100%}
.track i.done{background:var(--daylight)}
.track i.part{background:repeating-linear-gradient(135deg,var(--daylight-dim) 0 4px,transparent 4px 8px)}

/* ---------- Portal gateway ---------- */
.portal{min-height:100vh;display:flex;flex-direction:column}
.portal-head{padding:52px 20px 20px;text-align:center}
.portal-head .mark{font-family:"Barlow Condensed",sans-serif;font-size:44px;letter-spacing:.22em;text-transform:uppercase}
.portal-head .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--tungsten);margin-top:2px}
.portal-head p{color:var(--ink-3);max-width:620px;margin:14px auto 0;font-size:14.5px}
.gates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1320px;margin:0 auto;padding:24px 20px 40px;width:100%;
}
@media(max-width:1180px){.gates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.gates{grid-template-columns:1fr}}
.gate{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);min-height:400px;transition:border-color .18s ease, transform .18s ease;
}
.gate:hover{border-color:var(--daylight);text-decoration:none;transform:translateY(-3px)}
.gate:hover .art{filter:saturate(1.15) brightness(1.08)}
.gate .art{height:190px;background:var(--panel-2);border-bottom:1px solid var(--line);transition:filter .18s ease}
.gate .art img{width:100%;height:100%;object-fit:cover;display:block}
.gate .gbody{padding:15px 16px 18px;display:flex;flex-direction:column;flex:1}
.gate h2{font-size:24px;margin-bottom:2px}
.gate .who{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tungsten);margin-bottom:9px}
.gate p{font-size:13.5px;color:var(--ink-2);margin:0 0 12px}
.gate ul{margin:0 0 14px;padding-left:16px;font-size:12.5px;color:var(--ink-3)}
.gate ul li{margin-bottom:3px}
.gate .go{
  margin-top:auto;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:15px;color:var(--daylight);display:flex;align-items:center;gap:8px;
}
.gate .flag{
  position:absolute;top:10px;right:10px;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(16,19,23,.85);border:1px solid var(--line);padding:3px 7px;border-radius:2px;color:var(--ink-2);
}
.portal-foot{margin-top:auto;border-top:1px solid var(--line);background:var(--panel);padding:14px 20px;text-align:center}
.portal-foot .sm{color:var(--ink-3);font-size:12px}

/* ---------- Steps / wizard ---------- */
.steps{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.steps div{
  flex:1;padding:9px 12px;background:var(--panel);border-right:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.steps div:last-child{border-right:0}
.steps div.on{background:var(--daylight-dim);color:#fff}
.steps div.done{color:var(--rev-green)}
.steps div b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:14px;letter-spacing:.05em;color:inherit;margin-top:1px}
@media(max-width:800px){.steps{flex-direction:column}.steps div{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- Document viewer ---------- */
.docview{
  background:#F7F6F2;color:#1a1a1a;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 34px;font-family:"Source Sans 3",serif;font-size:14px;line-height:1.6;
  max-height:520px;overflow:auto;
}
.docview h1,.docview h2,.docview h3{color:#111;text-transform:none;font-family:"Barlow Condensed",sans-serif;letter-spacing:.02em}
.docview h1{font-size:23px;margin-bottom:2px}
.docview h2{font-size:16px;margin:20px 0 6px}
.docview .meta{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:#6a6a6a;text-transform:uppercase;margin-bottom:16px}
.docview p{margin:0 0 10px}
.docview table{font-size:12.5px}
.docview thead th{background:#EAE7DF;color:#3a3a3a;border-bottom:1px solid #cfcabc}
.docview tbody td{border-bottom:1px solid #ded9cc}
.docview tbody tr:hover{background:#efece4}
.docview .fill{background:#FDF6D8;border-bottom:1px solid #c9b96a;padding:0 3px}

/* signature block */
.sigbox{background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--radius);padding:14px}
.sigpad{background:#F7F6F2;border:1px solid var(--line);border-radius:2px;width:100%;height:120px;display:block;touch-action:none;cursor:crosshair}
.sigtyped{
  background:#F7F6F2;color:#111;border:1px solid var(--line);border-radius:2px;height:120px;
  display:grid;place-items:center;font-family:"Barlow Condensed",cursive;font-size:38px;font-style:italic;letter-spacing:.02em;
}
.tabs{display:flex;gap:2px;margin-bottom:10px}
.tabs button{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-3);padding:5px 10px;border-radius:2px;cursor:pointer;
}
.tabs button.on{background:var(--daylight-dim);color:#fff;border-color:var(--daylight)}
.audit{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);line-height:1.7}
.audit b{color:var(--ink-2);font-weight:400}

/* ---------- Invoice document ---------- */
.inv{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.inv .invhd{display:flex;gap:20px;padding:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.inv .invhd .side{min-width:210px}
.inv .invhd .side h4{margin-bottom:5px}
.inv .invhd .side .l{font-size:13.5px;line-height:1.5}
.inv .invhd .stamp{margin-left:auto;text-align:right}
.inv .invhd .stamp .no{font-family:"IBM Plex Mono",monospace;font-size:17px;color:var(--tungsten);letter-spacing:.04em}
.money-total{font-family:"Barlow Condensed",sans-serif;font-size:27px;color:var(--tungsten);letter-spacing:.02em}

.flagrow{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.flagrow:last-child{border-bottom:0}
.flagrow .dot{width:8px;height:8px;border-radius:1px;margin-top:6px;flex:0 0 auto;background:var(--rev-green)}
.flagrow.warn .dot{background:var(--rev-pink)}
.flagrow.stop .dot{background:var(--rev-cherry)}
.flagrow .t{flex:1}
.flagrow .t b{font-weight:600}

/* ---------- Misc ---------- */
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.empty h3{margin-bottom:4px;color:var(--ink-2)}
.qlog td:first-child{font-family:"IBM Plex Mono",monospace;color:var(--tungsten);white-space:nowrap}
.reqid{font-family:"IBM Plex Mono",monospace;color:var(--daylight);white-space:nowrap}
.hr-note{font-size:12px;color:var(--ink-3);margin-top:10px}
.demo-bar{
  background:repeating-linear-gradient(135deg,rgba(228,169,60,.10) 0 8px,transparent 8px 16px);
  border-bottom:1px solid var(--line);padding:5px 20px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tungsten);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.demo-bar select{width:auto;background:var(--panel);font-size:11px;padding:2px 6px}
.demo-bar .sp{margin-left:auto}

@media print{
  body{background:#fff;color:#000}
  .topbar,.demo-bar,.crumb,.btn,.card>.ft,.no-print{display:none !important}
  .card,.inv{border-color:#bbb;background:#fff;box-shadow:none}
  .card>.hd{background:#f0f0f0}
  thead th{background:#f0f0f0;color:#333}
  .money-total,.stat .val.money{color:#000}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ============================================================
   Completion states
   Green complete · amber outstanding · red stops payment.
   Colour is never on its own — every state carries a chip that
   says the same thing in words.
   ============================================================ */
.card.st-ok,.card.st-warn,.card.st-stop{border-left-width:3px;border-left-style:solid}
.card.st-ok{border-left-color:var(--ok)}
.card.st-warn{border-left-color:var(--warn)}
.card.st-stop{border-left-color:var(--stop)}
.card.st-ok .hd{background:rgba(46,125,69,.07)}
.card.st-warn{background:rgba(169,118,26,.03)}
.card.st-warn .hd{background:rgba(169,118,26,.09)}
.card.st-stop{background:rgba(176,51,74,.03)}
.card.st-stop .hd{background:rgba(176,51,74,.09)}

tr.st-ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
tr.st-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
tr.st-stop td:first-child{box-shadow:inset 3px 0 0 var(--stop)}
tr.st-warn{background:rgba(169,118,26,.045)}
tr.st-stop{background:rgba(176,51,74,.05)}

.kv dd .flag-stop{color:var(--stop);font-weight:600}
.vatwarn{
  margin-top:11px;padding:10px 12px;border-radius:var(--radius);
  border:1px solid var(--stop);border-left-width:3px;
  background:rgba(176,51,74,.07);font-size:12.5px;line-height:1.45;color:var(--ink-2);
}
.vatwarn strong{color:var(--stop);display:block;margin-bottom:3px}
.vatok{
  margin-top:11px;padding:9px 12px;border-radius:var(--radius);
  border:1px solid var(--line);border-left:3px solid var(--ok);
  background:rgba(46,125,69,.05);font-size:12.5px;line-height:1.45;color:var(--ink-2);
}
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.legend i{width:10px;height:10px;border-radius:2px;display:block}
.legend i.ok{background:var(--ok)} .legend i.warn{background:var(--warn)} .legend i.stop{background:var(--stop)}

/* ---------- tab warning badges ---------- */
.navwarn{
  display:inline-flex;align-items:center;gap:3px;margin-left:6px;
  font-family:"IBM Plex Mono",monospace;font-size:9px;line-height:1;
  padding:2px 5px;border-radius:9px;
  background:var(--rev-goldenrod);color:#5E4A0E;border:1px solid rgba(0,0,0,.10);
}
.navwarn.hard{background:var(--rev-cherry);color:#7C2136}
.topnav a.on .navwarn{background:var(--rev-goldenrod);color:#5E4A0E}
.topnav a.on .navwarn.hard{background:var(--rev-cherry);color:#7C2136}

/* ---------- collapsible sections ---------- */
.card.fold > .hd{cursor:pointer;user-select:none}
.card.fold > .hd:hover{background:var(--panel-2)}
.card.fold > .hd .tw{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
}
.card.fold > .hd .caret{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  transition:transform .15s ease;display:inline-block;
}
.card.fold.open > .hd .caret{transform:rotate(90deg)}
.card.fold > .bd,.card.fold > .ft{display:none}
.card.fold.open > .bd,.card.fold.open > .ft{display:block}
.card.fold.open > .ft{display:flex}

/* second-level tabs inside an area */
.subbar{
  display:flex;gap:2px;padding:5px 20px;background:var(--panel-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.subbar a{
  padding:4px 10px;border-radius:2px;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
}
.subbar a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.subbar a.on{background:var(--panel);color:var(--daylight);border:1px solid var(--line)}