/* The partner portal's own stylesheet: preview/portal.html (the approved design), then the rules the
   BUILT portal (console/portal.html) added on top of it - the blue action-button convention, the
   guided-step dialog, the dashboard tabs and KPI tiles - then the sandbox chrome. --brand is the
   visiting bank's colour. */
/* Montserrat from the sandbox's own copy (the site allows fonts only from itself). The file is a
   variable font, weight 100 to 900, so the app's 800-weight headings render true. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Tokens read off back-office.demo.sdk.finance, not approximated.
   --brand is the only one a tenant bank overrides. */
:root{
  --brand:#0073FF; --brand-700:#1B55E9; --brand-800:#1449D0;
  --ink:#10233A; --muted:#7288A3; --placeholder:#A1B6C6;
  --line:#D3E1EC; --fill:#E5EDF9; --wash:#F0F7FD; --tint:#F2F5F9; --stripe:#F6F7FF; --hover:#FFF9E5;
  --white:#fff;
  --green:#008556; --green-status:#099C44; --green-tint:#E7FBF6;
  --orange:#B07C10; --orange-mark:#EEB648; --orange-tint:#FDF8ED;
  --red:#E0223A; --red-tint:#FFEFF1;
  --r-sm:4px; --r:6px; --r-lg:8px; --r-pill:20px;
  --h-sm:28px; --h:32px; --h-lg:42px;
  --dur:.3s; --fast:.2s; --snap:.1s;
  --ease:cubic-bezier(.645,.045,.355,1); --out:cubic-bezier(.23,1,.32,1);
  --pop:0 12px 32px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--white); color:var(--ink);
  font-family:Montserrat,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:14px; font-weight:500; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.n{font-variant-numeric:tabular-nums}

/* ---------- shell: their rail + panel, and nothing else ---------- */
.app{display:flex;min-height:100vh}
.side{width:230px;flex:none;background:var(--white);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 0 16px;
  display:flex;flex-direction:column}

/* the account sits at the FOOT of the menu, where a portal normally puts it,
   rather than in a strip of unlabelled icons beside it */
.acct{margin-top:auto;padding:14px 16px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.acct .av{width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.acct .t{flex:1;min-width:0}
.acct .t b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .t span{display:block;font-size:12px;font-weight:400;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .out{width:28px;height:28px;border:0;border-radius:var(--r);background:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.acct .out:hover{background:var(--fill);color:var(--brand)}
.acct .out svg{width:16px;height:16px}
.why{margin:12px 16px 0;padding:0;border:0;background:none;text-align:left;
  font-size:12px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--fast) var(--ease)}
.why:hover{color:var(--brand)}
.mark{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--brand);padding:0 18px}
.me{padding:14px 18px 6px}
.me b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
.me span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}

.grp{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;
  padding:0 14px 0 18px;height:36px;margin-top:12px;font-size:14px;font-weight:500;color:var(--ink);
  transition:color var(--dur) var(--ease)}
.grp:hover,.grp.on{color:var(--brand)}
.grp > svg:first-child{width:16px;height:16px;flex:none}
.grp .chev{margin-left:auto;width:13px;height:13px;transition:transform var(--dur) var(--ease)}
.grp[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.nav{display:flex;flex-direction:column;gap:1px;padding:2px 14px 2px 30px;position:relative;overflow:hidden;
  transition:max-height var(--dur) ease-in-out,opacity var(--fast) var(--ease),padding var(--dur) ease-in-out}
.nav::before{content:'';position:absolute;left:25px;top:6px;bottom:6px;width:1px;background:var(--line)}
.nav.shut{opacity:0;padding-top:0;padding-bottom:0}
.nav button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-sm);
  padding:0 4px 0 8px;height:var(--h-sm);line-height:var(--h-sm);font-size:14px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav button:hover{color:var(--brand)}
.nav button.on{background:var(--brand);color:var(--white)}

/* ---------- content: white, airy, no cards ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--white)}
.content{padding:34px 40px 44px;max-width:1220px;width:100%}
.title{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}
h1{font-size:36px;font-weight:600;line-height:1.4;letter-spacing:-.01em;margin:0;color:var(--ink);max-width:16ch}
.lede{font-size:14px;font-weight:500;color:var(--muted);margin:2px 0 0;max-width:70ch}
h2{font-size:20px;font-weight:600;color:var(--ink);margin:40px 0 14px}
h2:first-of-type{margin-top:34px}
.sub{font-size:12px;font-weight:400;color:var(--muted)}

/* ---------- controls: outlined, 2px, exactly theirs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h);padding:6px 12px;
  border-radius:var(--r);border:2px solid var(--line);background:var(--white);color:var(--muted);
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:border-color var(--snap) linear,color var(--snap) linear,background-color var(--snap) linear}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{height:var(--h-sm);padding:6px 8px;border-radius:var(--r-sm);font-size:12px}
.btn.solid{background:var(--brand);border-color:var(--brand);color:var(--white)}
.btn.solid:hover{background:var(--brand-800);border-color:var(--brand-800);color:var(--white)}

.filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fc{display:inline-flex;align-items:center;gap:6px;height:var(--h-sm);padding:1px 7px;border:0;
  border-radius:var(--r);background:var(--fill);color:var(--ink);font-size:12px;font-weight:500;
  transition:background-color var(--fast) var(--ease)}
.fc:hover{background:#D9E6F7}
.fc svg{width:11px;height:11px;color:var(--muted)}
.fc.ph{color:var(--placeholder);font-weight:400;background:var(--white);border:1px solid var(--line)}
.fc.on{background:var(--fill);color:var(--muted)}
.fc.on b{color:var(--ink);font-weight:600}
.fc .x:hover{background:var(--line)}
.fc .x{width:15px;height:15px;border:0;border-radius:50%;background:none;color:inherit;font-size:13px;
  line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
  transition:background-color var(--fast) var(--ease)}
.fc .x:hover{background:rgba(255,255,255,.28)}
.ico{width:var(--h-sm);height:var(--h-sm);border:0;border-radius:var(--r);background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.ico svg{width:16px;height:16px}
.ico:hover{background:var(--fill);color:var(--brand)}
.tally{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}
.tally b{color:var(--ink);font-weight:600}

/* ---------- tables: borderless, 12px, 36px rows ---------- */
/* A HORIZONTAL SCROLLBAR IS DRAWN ON TOP OF THE CONTENT, NOT BELOW IT.
   Owner, 2026-09-27, looking at the Team table: "the horizontal scrollbar is
   literally interfering with the bottom record." Overlay scrollbars - every Mac, and
   Windows in overlay mode - float over the last row of any table wide enough to
   scroll, so the newest record is the one you cannot read. This is the wrapper EVERY
   table in this portal uses, so the space goes here and not on one screen.
   The gutter is reserved whether or not the bar appears: a table that gains a column
   should not shove its own last row under a bar that was not there a moment ago. */
.scroll{overflow-x:auto;padding-bottom:14px}
.panel.flush .scroll{padding-bottom:10px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;padding:4px 12px 4px 0;
  height:31px;white-space:nowrap;border:0}
th:not(:last-child){border-right:1px solid var(--line)}
th + th{padding-left:12px}
td + td{padding-left:12px}
/* ONE LINE PER CELL. Their rows are a strict 36px; a cell that wraps
   breaks the rhythm down the whole table. Anything too long is clipped
   with an ellipsis and read in full in the record. */
td{font-size:12px;font-weight:400;color:var(--ink);padding:0 12px 0 0;height:36px;
  white-space:nowrap;border:0;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;max-width:280px}
th:last-child,td:last-child{padding-right:0;text-align:right;width:1%;overflow:visible}
tbody tr{transition:background-color var(--fast) var(--ease)}
/* their own two tokens: alternate rows, and change under the cursor */
tbody tr:nth-child(even){background:var(--stripe)}
tbody tr[tabindex]{cursor:pointer}
tbody tr[tabindex]:hover,tbody tr[tabindex]:nth-child(even):hover{background:var(--hover)}
tbody tr[tabindex]:focus-visible{background:var(--hover);outline:2px solid var(--brand);outline-offset:-2px}
td .two{font-size:12px;color:var(--muted);font-weight:400}
td.strong{font-weight:500}
.st{font-weight:500;white-space:nowrap}
.st.ok{color:var(--green-status)}
.st.hd{color:var(--orange)}
.st.bd{color:var(--red)}
.st.nu{color:var(--muted)}
.amt{font-variant-numeric:tabular-nums;font-weight:500}
.amt.cr{color:var(--green)}
.amt.dr{color:var(--ink)}
.empty{padding:34px 0;font-size:14px;font-weight:500;color:var(--muted)}

/* the table's bottom edge: what page you are on, and how to move */
.pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0 0;
  border-top:1px solid var(--line);margin-top:2px}
.pinfo{font-size:12px;font-weight:400;color:var(--muted)}
.pinfo b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pctl{display:flex;align-items:center;gap:3px;margin-left:auto}
.pbtn{min-width:28px;height:28px;padding:0 8px;border:0;border-radius:var(--r-sm);background:none;
  font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.pbtn:hover:not(:disabled){background:var(--fill);color:var(--brand)}
.pbtn.on{background:var(--brand);color:var(--white)}
.pbtn:disabled{color:var(--placeholder);cursor:default}
.pdots{font-size:12px;color:var(--muted);padding:0 2px}
.prows{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.prows select{height:28px;border:0;border-radius:var(--r);background:var(--fill);font:inherit;
  font-size:12px;font-weight:500;color:var(--ink);padding:0 6px;cursor:pointer}

/* ---------- the landing page is COMPOSED, not a stack of bare tables ----------
   Their back office is title + filters + table on every screen. That is right for
   a data screen and wrong for a landing page: two tables side by side scroll
   independently, which is what the owner caught. The landing page is panels,
   sized to fit, never scrolling sideways. Data screens keep their tables.

   The summary deliberately does NOT follow SDK.finance - they have no summary
   surface at all, so there is nothing to follow. It is a stock and a flow, kept
   apart: the float partitioned into what is actually spendable, and beside it
   what moved today. ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:8px}
.panel.flush{padding:0;overflow:hidden}
.sechead{display:flex;align-items:center;gap:12px;margin:32px 0 12px}
.sechead h2{margin:0}
.sechead .meta{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font-size:12px;font-weight:600;color:var(--brand);
  transition:color var(--fast) var(--ease)}
.linkbtn:hover{color:var(--brand-800)}

/* the summary: float composition on the left, today's movement on the right */
.sum{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:8px;overflow:hidden}
.sum > div{padding:22px 24px}
.sum .flow{border-left:1px solid var(--line);background:var(--tint)}
@media (max-width:920px){
  .sum{grid-template-columns:1fr}
  .sum .flow{border-left:0;border-top:1px solid var(--line)}
}
.mhead .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mhead .v{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:6px}
.mhead .v .cur{font-size:.56em;font-weight:500;color:var(--muted);margin-right:4px}
.mhead .v .kob{color:var(--muted)}
.mhead .of{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:4px}

/* the gauge: the float partitioned, in true proportion */
.gauge{display:flex;height:10px;border-radius:20px;overflow:hidden;margin:20px 0 18px;background:var(--fill)}
.gauge i{display:block;min-width:3px}
.gauge i + i{margin-left:2px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:16px 22px}
.keys .k{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.keys .k i{width:8px;height:8px;border-radius:2px;flex:none}
.keys .v{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:5px}
.keys .s{font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}

/* today's movement - a flow, kept apart from the stock beside it */
.flow .fk{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.frow{display:flex;align-items:center;gap:10px;margin-top:16px}
.frow .ar{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.frow .ar svg{width:12px;height:12px}
.frow.in .ar{background:var(--green-tint);color:var(--green)}
.frow.out .ar{background:var(--fill);color:var(--muted)}
.frow .t{min-width:0}
.frow .a{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.frow.in .a{color:var(--green)}
.frow .l{font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}
.fnet{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.fnet .fk{margin-bottom:5px;display:block}
.fnet b{font-size:20px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}

/* needs you: cordoned, but the SAME 36px row as a table row */
.need{display:flex;align-items:center;gap:11px;height:36px;padding:0 20px;
  border-bottom:1px solid var(--line);transition:background-color var(--fast) var(--ease);cursor:pointer}
.need:last-child{border-bottom:0}
.need:hover{background:var(--hover)}
.need:focus-visible{background:var(--hover);outline:2px solid var(--brand);outline-offset:-2px}
.need .mk{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center}
.need .mk svg{width:12px;height:12px}
.need.hd .mk{background:var(--orange-tint);color:var(--orange)}
.need.bd .mk{background:var(--red-tint);color:var(--red)}
.need .tx{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.need .tx b{font-weight:600;color:var(--ink)}
.need .tx span{color:var(--muted)}
.need .amt2{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.need.hd .amt2{color:var(--orange)}
.need.bd .amt2{color:var(--red)}

/* direction filter on the transactions list */
.seg{display:inline-flex;background:var(--fill);border-radius:var(--r);padding:2px;gap:2px}
.seg button{height:24px;padding:0 11px;border:0;border-radius:var(--r-sm);background:none;
  font-size:12px;font-weight:600;color:var(--muted);
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--white);color:var(--brand)}
.dir{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  vertical-align:-4px;margin-right:7px}
.dir svg{width:10px;height:10px}
.dir.in{background:var(--green-tint);color:var(--green)}
.dir.out{background:var(--fill);color:var(--muted)}
.amt.in{color:var(--green)}


/* ---------- shared furniture for the remaining screens ---------- */
.kv{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{width:210px;flex:none;color:var(--muted);font-weight:500;font-size:12px;padding-top:2px}
.kv .v{flex:1;min-width:0;color:var(--ink);font-weight:500;word-break:break-word}
.kv .v .sub2{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}

.code{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.75;
  color:var(--ink);white-space:pre;overflow-x:auto;margin:0}
.code .c{color:var(--muted)}
.code .s{color:var(--green)}

.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-sm);
  background:var(--fill);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.tag.b{background:var(--brand-wash,#EAF2FF);color:var(--brand)}

.sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .track{width:36px;height:20px;border-radius:20px;background:var(--line);flex:none;position:relative;
  transition:background-color var(--fast) var(--ease)}
.sw .track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--white);transition:transform var(--fast) var(--out)}
.sw input:checked + .track{background:var(--brand)}
.sw input:checked + .track::after{transform:translateX(16px)}
.sw input:focus-visible + .track{outline:2px solid var(--brand);outline-offset:2px}

.split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:8px;align-items:start}
/* DECIDED 2026-09-28 (owner): KPI titles reserve two lines so figures line up across a row; panels
   side by side share top and bottom edges; ranked lists and legends carry this portal's own styling. */
.card.kpi{display:flex;flex-direction:column}
.kpi .lab{min-height:2.8em;line-height:1.4}
.split2,.grid.two{align-items:stretch;margin-bottom:8px}
.split2 > .panel,.grid.two > .panel{margin-bottom:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column}
.split2 > .panel > .mrow,.grid.two > .panel > .mrow{margin-top:auto}
.split2 > .panel > .mrow + .pan-s,.grid.two > .panel > .mrow + .pan-s{min-height:2.6em;margin-bottom:0}
.pan-h{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 4px}
.pan-s{font-size:12px;font-weight:400;color:var(--muted);margin:0 0 16px}
.none{padding:30px 20px;text-align:center;font-size:13px;font-weight:500;color:var(--muted)}
.tw-pad{padding:20px 24px}
.barline{display:flex;height:8px;border-radius:20px;overflow:hidden;background:var(--fill);margin:12px 0 10px}
.barline i{display:block}
.barline i + i{margin-left:2px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,35,58,.32);opacity:0;pointer-events:none;z-index:40;
  transition:opacity var(--dur) var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--white);z-index:41;
  transform:translateX(100%);transition:transform var(--dur) var(--ease);box-shadow:var(--pop);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh{padding:20px 28px;display:flex;align-items:center;gap:12px;flex:none;border-bottom:1px solid var(--line)}
.dh b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.dh button{margin-left:auto;width:var(--h);height:var(--h);border:0;border-radius:var(--r);background:none;
  color:var(--muted);font-size:20px;line-height:1;transition:color var(--fast) var(--ease)}
.dh button:hover{color:var(--brand)}
.db{padding:24px 28px 48px;overflow-y:auto}
.row{display:flex;gap:18px;padding:9px 0;font-size:12px}
.row .k{width:160px;flex:none;color:var(--muted);font-weight:500}
.row .v{flex:1;min-width:0;color:var(--ink);font-weight:400;word-break:break-word}
.tl{margin:0;padding:0;list-style:none}
.tl li{display:flex;gap:12px;padding-bottom:18px;position:relative}
.tl li:not(:last-child)::before{content:'';position:absolute;left:6px;top:16px;bottom:0;width:1px;background:var(--line)}
.tl li.done:not(:last-child)::before{background:var(--green-status)}
.tl .dot{width:13px;height:13px;border-radius:50%;flex:none;border:1px solid var(--line);background:var(--white);margin-top:2px}
.tl li.done .dot{background:var(--green-status);border-color:var(--green-status)}
.tl li.now .dot{border-color:var(--orange-mark);background:var(--orange-tint);border-width:3px}
.tl .tx b{display:block;font-size:14px;font-weight:600}
.tl .tx span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}
.four{margin-top:6px;font-size:12px;font-weight:500;color:var(--green-status)}

.notes h4{margin:22px 0 6px;font-size:14px;font-weight:600}
.notes h4:first-child{margin-top:0}
.notes p{margin:0;font-size:12px;font-weight:400;color:var(--ink);line-height:1.7}

@media (max-width:1000px){
  .side{display:none}
  .content{padding:20px 16px 60px}
  h1{font-size:26px}
  .bal .v{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important}}

/* ===================== lifted from the BUILT portal (console/portal.html) ===================== */
.autherr{margin:14px 0 0;font-size:13px;font-weight:500;color:var(--red)}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.input{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:0 12px;min-height:var(--h-lg);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.input:hover{border-color:var(--brand)}
.input:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--fill)}
.input input,.input select,.input textarea{flex:1;min-width:0;border:0;background:none;outline:0;
  font:inherit;font-size:14px;font-weight:500;color:var(--ink)}
.input input::placeholder{color:var(--placeholder);font-weight:400}
/* BIG DOTS (owner, 29 Sep 2026): the same masking face and size as the console, so the two apps agree on every machine */
.input input[type=password]{font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;font-size:16px;letter-spacing:.14em}
.input input[type=password]::placeholder{font-family:Montserrat,-apple-system,"Segoe UI",Arial,sans-serif;font-size:14px;letter-spacing:0}

#toastbox{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{background:var(--ink);color:var(--white);font-size:13px;font-weight:500;
  padding:10px 16px;border-radius:var(--r);box-shadow:var(--pop);max-width:min(520px,90vw)}


.cmodal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,22,38,.46);backdrop-filter:saturate(120%) blur(2px);
  animation:cmfade var(--dur) var(--ease)}
.cmodal.on{display:flex}
@keyframes cmfade{from{opacity:0}to{opacity:1}}
.mbox2,.mbox{width:100%;max-width:420px;background:var(--white);border-radius:var(--r-lg);
  padding:26px 28px 22px;max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 24px 60px rgba(12,22,38,.22),0 2px 6px rgba(12,22,38,.10);
  animation:cmrise var(--dur) var(--ease)}
@keyframes cmrise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.mbox2 h3,.mbox h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mbox2 > p,.mbox > p{margin:0 0 18px;font-size:13.5px;line-height:1.65;color:var(--ink);opacity:.86}
/* the code box IS the dialog - one line, wide characters, nothing beside it */
.mbox2 .field,.mbox .field{margin-bottom:14px}
.mbox2 .input,.mbox .input{min-height:var(--h-lg)}
.mrow2,.mbox .mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.mrow2 .btn,.mbox .mrow .btn{min-width:104px;justify-content:center}
/* the confirming action is the solid one; cancel is quiet but never hidden */
.mrow2 .btn:last-child{background:var(--brand);border-color:var(--brand);color:var(--white)}
.mrow2 .btn:last-child:hover{background:var(--brand-800);border-color:var(--brand-800)}
.cmodal .autherr{display:none;margin:2px 0 0;font-size:13px;font-weight:500;color:var(--red)}
.cmodal .autherr.on,.cmodal .autherr[style*="block"]{display:block}
/* a wider dialog for a form rather than a question */
.cmodal.wide .mbox2,.cmodal.wide .mbox{max-width:620px}
/* THE WHOLE FORM, ALWAYS (owner, 28 Sep 2026: "I can't see the whole form"). The dialog is capped at the
   window and scrolls inside itself, so a tall step is never cut off above or below the viewport - the
   max-height on .mbox2 above is that rule. */


.grid{display:grid;gap:14px}
.grid.kpis{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));margin-bottom:16px}
.card.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;transition:border-color var(--fast) var(--ease)}
.card.kpi:hover{border-color:var(--brand)}
.kpi .lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-size:23px;font-weight:700;margin-top:5px;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .delta{font-size:12px;margin-top:3px;font-weight:600}
.kpi .delta.up{color:var(--green-status)}
.kpi .delta.down{color:var(--red)}
.kpi .delta.flat{color:var(--muted)}
/* a figure you can open into what it is made of - the console's own affordance */
.figure{cursor:pointer;border-bottom:1px dashed var(--line)}
.figure:hover{border-bottom-color:var(--brand);color:var(--brand)}

/* THE GUIDED STEP BAR, from the console. Chevrons, not dots: a dot says "there are
   four of these", a chevron says "and they go in this order". */
.bpf{display:flex;gap:4px;margin:4px 0 18px;overflow-x:auto}
.bpf button{flex:1;min-width:108px;border:0;background:var(--fill);color:var(--muted);font:inherit;
  font-size:12px;font-weight:600;padding:10px 14px 10px 22px;cursor:pointer;white-space:nowrap;
  text-align:center;clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.bpf button:first-child{clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);padding-left:14px}
.bpf button:last-child{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);padding-right:14px}
.bpf button:first-child:last-child{clip-path:none}
.bpf button:hover{background:var(--line)}
.bpf button.act{background:var(--brand);color:var(--white)}
.bpf button.act:hover{background:var(--brand-800)}
.bpf button.done{background:var(--green-tint);color:var(--green-status)}
.bpf button[disabled]{cursor:not-allowed;opacity:.72}


.dashnav{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 18px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.dashnav button{border:2px solid var(--line);background:var(--white);border-radius:var(--r);
  padding:7px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  white-space:nowrap;
  transition:border-color var(--snap) linear,color var(--snap) linear,background-color var(--snap) linear}
.dashnav button:hover{border-color:var(--brand);color:var(--brand)}
.dashnav button.on{background:var(--brand);border-color:var(--brand);color:var(--white)}
.dashnav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}


.btn{background:var(--brand);border-color:var(--brand);color:var(--white)}
.btn:hover{background:var(--brand-800);border-color:var(--brand-800);color:var(--white)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the quiet one: what the bare .btn used to be, kept exactly, because a secondary
   control reading as secondary was never the problem */
.btn.ghost{background:var(--white);border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{background:var(--white);border-color:var(--brand);color:var(--brand)}
/* danger is an OUTLINE, never a filled red block: a filled red button beside a
   filled blue one is two shouts, and the destructive one should not be the louder */
.btn.danger{background:var(--white);border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:var(--white);border-color:var(--red);color:var(--red);
  box-shadow:0 0 0 3px rgba(224,34,58,.12)}


/* the design dialog keeps its own restrained overlay shadow (house rule: shadows only on true overlays) */

/* ===================== the sandbox's own additions ===================== */
/* the chrome strip: which demo this is, that the data is sample data, and the way back */
.sbx{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:44px;padding:0 20px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.sbx .dot{width:7px;height:7px;border-radius:50%;background:var(--orange-mark);flex:none}
.sbx .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbx .txt span{font-weight:500;color:rgba(255,255,255,.72)}
.sbx a{margin-left:auto;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:30px;
  padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);white-space:nowrap;
  transition:border-color var(--fast) var(--ease)}
.sbx a:hover{border-color:#fff}
.sbx a svg{width:13px;height:13px}
.side{top:44px;height:calc(100vh - 44px)}
.mark img{height:26px;width:auto;max-width:150px;display:block}
.mark .bk{color:var(--brand)}
.me .as{display:flex;gap:4px;margin-top:10px}
.me .as button{flex:1;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-size:12px;font-weight:600;color:var(--muted);transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.me .as button:hover{border-color:var(--brand);color:var(--brand)}
.me .as button.on{background:var(--brand);border-color:var(--brand);color:var(--white)}
.me .role{display:block;font-size:12px;color:var(--muted);margin-top:6px}
tr[data-po],tr[data-txn],tr[data-va],tr[data-hook],tr[data-evt]{cursor:pointer}
tbody tr:hover td{background:var(--hover)}
.demo-box{border:1px dashed var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-top:22px;background:var(--wash)}
.demo-box h4{margin:0 0 4px;font-size:14px;font-weight:600}
.demo-box p{margin:0 0 12px;font-size:12px;color:var(--ink);line-height:1.6}
.keyshow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--fill);border-radius:var(--r);
  padding:12px;word-break:break-all;margin:6px 0 10px}
.keyshow b{display:block;font-family:Montserrat,sans-serif;font-size:12px;color:var(--red);margin-bottom:6px}
.chk{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:13px;line-height:1.5;cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--brand);width:16px;height:16px;flex:none}
.chk span b{display:block;font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  margin-bottom:8px;cursor:pointer;transition:border-color var(--fast) var(--ease)}
.opt:hover{border-color:var(--brand)}
.opt input{margin-top:3px;accent-color:var(--brand)}
.opt b{display:block;font-size:14px;font-weight:600}
.opt span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.55}
.revrow{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.revrow .k{width:150px;flex:none;color:var(--muted)}
.revrow .v{flex:1;min-width:0;font-weight:600;word-break:break-word}
.chart{width:100%;height:auto;display:block}
.chart .bar-in{fill:var(--brand)}
.chart .bar-out{fill:#A1B6C6}
.chart .axis{fill:var(--muted);font-size:12px;font-family:Montserrat,sans-serif}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart rect:hover{opacity:.82}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.rank li:last-child{border-bottom:0}
.rank .nm{flex:1;min-width:0}
.rank .bar{flex:0 0 38%;height:8px;background:var(--fill);border-radius:20px;overflow:hidden}
.rank .bar i{display:block;height:100%;background:var(--brand)}
.rank .fig{width:120px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.log{margin:0;padding:0;list-style:none}
.log li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.log li .w{width:64px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.log li .c{width:44px;flex:none;font-weight:600}
.log li .c.ok{color:var(--green-status)}
.log li .c.bd{color:var(--red)}
.log li .d{flex:1;min-width:0;word-break:break-word}
@media (max-width:1000px){ .side{display:none} .sbx{padding:0 12px} .sbx .txt span{display:none} }
.mark .pt{color:var(--ink)}
/* the drawer and its scrim sit under the sandbox strip, so the strip and the drawer's close button both stay visible */
.scrim{top:44px}
.drawer{top:44px}
.cmodal{top:44px}
.keyshow b{word-break:normal}
/* on a narrow screen the menu folds away (the design's own rule), so the strip carries a screen picker */
.jump{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1000px){
  .jump{display:block;margin-left:auto}
  .jump select{height:30px;max-width:150px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);background:var(--ink);color:#fff;font:inherit;font-size:13px;padding:0 6px}
  .sbx a{margin-left:0}
}
@media (max-width:520px){ .sbx .txt{font-size:12px} .sbx a{padding:0 8px} }
@media (max-width:520px){
  .sbx{gap:8px}
  .sbx .txt{flex:1;min-width:0;overflow:visible;white-space:normal;line-height:1.2}
  .sbx a .bt{display:none}
  .jump select{max-width:118px}
}