/* ============================================================================
   Base — reset, type, and the controls the whole product shares.
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  /* iOS inflates type inside any block wider than the viewport, and the firm
     board is deliberately much wider than one. Left alone it rewrites the
     entire type scale on a phone — 13px body text arriving at 20px. The type
     scale is a design decision, not a suggestion. */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  /* A tap must feel like a press, not flash a grey rectangle over a row. */
  -webkit-tap-highlight-color:rgba(31,92,216,.12);
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1,'cv05' 1;
}
h1,h2,h3,h4,p,figure{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; font-variant-numeric:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
svg{ display:block; width:16px; height:16px; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:separate; border-spacing:0; }

/* ---- focus: one visible treatment, everywhere ------------------------- */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; border-radius:2px; }

.skip{
  position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-200%);
  background:var(--ink); color:#fff; padding:8px 14px; border-radius:var(--r2); font-weight:600;
}
.skip:focus{ transform:none; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- numbers ---------------------------------------------------------- */
.num{ font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em; }
.mono{ font-family:var(--mono); font-size:.94em; letter-spacing:-.015em; }
.pos{ color:var(--green); }
.neg{ color:var(--red); }
.flat{ color:var(--ink-4); }
.dim{ color:var(--ink-4); }
.strong{ font-weight:600; }

/* ---- the kicker: tracked capitals. three places only ------------------ */
.kick{
  font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-4);
}

/* ---- buttons ----------------------------------------------------------
   Weight carries consequence. A routine action is quiet, a consequential one
   is outlined, an emergency is filled. Nothing is a pill.                  */
.btn{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px;
  border-radius:var(--r2); font-size:12.5px; font-weight:500; color:var(--ink-2);
  border:1px solid transparent; background:transparent; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.btn svg{ width:15px; height:15px; flex:none; }
.btn:hover{ background:var(--surface-2); color:var(--ink); }
.btn:active{ background:var(--surface-3); }
.btn[disabled]{ opacity:.42; pointer-events:none; }

.btn--line{ border-color:var(--line-2); background:var(--surface); }
.btn--line:hover{ border-color:var(--line-3); background:var(--surface); }

.btn--ink{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--ink:hover{ background:#16233b; color:#fff; }

.btn--blue{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn--blue:hover{ background:#1a51c2; color:#fff; }

/* The emergency. Filled red, and the only filled red in the product. */
.btn--red{ background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
.btn--red:hover{ background:var(--red-900); color:#fff; }


.btn--sm{ height:26px; padding:0 8px; font-size:12px; }
.btn--icon{ width:30px; padding:0; justify-content:center; }
.btn--icon.btn--sm{ width:26px; }

/* ---- fields ----------------------------------------------------------- */
.field{ display:block; }
.field > .lbl{ display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:5px; font-weight:500; }
.inp{
  width:100%; height:32px; padding:0 9px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r2); color:var(--ink);
}
.inp::placeholder{ color:var(--ink-4); }
.inp:hover{ border-color:var(--line-3); }
.inp:focus-visible{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
textarea.inp{ height:auto; padding:7px 9px; resize:vertical; }
select.inp{ appearance:none; padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6678' stroke-width='1.5' stroke-linecap='round'><path d='m4 6.5 4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 7px center; background-size:14px; }

/* ---- the follow switch ------------------------------------------------
   A control, not a badge: the one rounded element the register allows,
   because that is the shape people already read as on and off.            */
.sw{ position:relative; width:28px; height:16px; flex:none; border-radius:8px;
     background:var(--surface-3); box-shadow:var(--press);
     transition:background var(--t-fast) var(--ease); cursor:pointer; }
.sw::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px;
     border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(11,21,39,.3);
     transition:transform var(--t-mid) var(--ease); }
.sw[aria-checked="true"]{ background:var(--blue); box-shadow:none; }
.sw[aria-checked="true"]::after{ transform:translateX(12px); }
.sw[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---- the signal: a state mark, used sparingly ------------------------- */
.sig{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-5); }
.sig.ok{ background:var(--green-400); }
.sig.warn{ background:var(--amber-400); }
.sig.crit{ background:var(--red); }
.sig.info{ background:var(--blue-400); }

/* ---- notices ---------------------------------------------------------- */
.notice{
  display:flex; gap:9px; padding:10px 12px; border-radius:var(--r3);
  background:var(--surface-2); font-size:12.5px; color:var(--ink-2); line-height:1.5;
}
.notice svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--ink-4); }
.notice.warn{ background:var(--amber-50); color:var(--amber-900); }
.notice.warn svg{ color:var(--amber); }
.notice.crit{ background:var(--red-50); color:var(--red-900); }
.notice.crit svg{ color:var(--red); }
.notice.ok{ background:var(--green-50); color:var(--green-900); }
.notice.ok svg{ color:var(--green); }
.notice.info{ background:var(--blue-50); color:var(--blue-900); }
.notice.info svg{ color:var(--blue); }

/* ---- overlays --------------------------------------------------------- */
#overlay:empty{ display:none; }
.scrim{
  position:fixed; inset:0; z-index:120; background:rgba(11,21,39,.36);
  display:flex; align-items:flex-start; justify-content:center; padding:8vh 20px 20px;
  animation:fade var(--t-fast) var(--ease);
  backdrop-filter:saturate(.9) blur(1.5px);
}
@keyframes fade{ from{ opacity:0 } }
.dialog{
  width:min(560px,100%); background:var(--surface); border-radius:var(--r4);
  box-shadow:var(--lift-3); overflow:hidden; animation:rise var(--t-mid) var(--ease-out);
  display:flex; flex-direction:column; max-height:84vh;
}
.dialog--wide{ width:min(880px,100%); }
.dialog--mid{ width:min(640px,100%); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } }
.dialog-head{ padding:18px 22px 14px; border-bottom:1px solid var(--line); }
.dialog-head h2{ font-size:17px; font-weight:600; letter-spacing:-.015em; }
.dialog-head p{ margin-top:4px; color:var(--ink-3); font-size:12.5px; max-width:60ch; }
.dialog-body{ padding:18px 22px; overflow:auto; }
.dialog-body > table{ min-width:100%; }
.dialog-foot{
  padding:13px 22px; border-top:1px solid var(--line); background:var(--surface-2);
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
}
.dialog-foot .spread{ margin-right:auto; color:var(--ink-3); font-size:12px; }

/* the sheet: an account opens from the right, because it is a detail of the
   register and not a new place */
.sheet-scrim{ position:fixed; inset:0; z-index:120; background:rgba(11,21,39,.28);
  display:flex; justify-content:flex-end; animation:fade var(--t-fast) var(--ease); }
.sheet{
  width:min(560px,100%); height:100%; background:var(--surface); box-shadow:var(--lift-3);
  display:flex; flex-direction:column; animation:slide var(--t-mid) var(--ease-out);
}
@keyframes slide{ from{ transform:translateX(24px); opacity:.4 } }

/* ---- popover: ratio, contract mapping, row menu ----------------------- */
.pop{
  position:fixed; z-index:140; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r3); box-shadow:var(--lift-2); padding:5px; min-width:170px;
  animation:pop var(--t-fast) var(--ease-out);
}
@keyframes pop{ from{ opacity:0; transform:translateY(-3px) } }
.pop-title{ padding:6px 8px 5px; font-size:11px; color:var(--ink-4); font-weight:500; }
.pop-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border-radius:var(--r1);
  font-size:12.5px; text-align:left; color:var(--ink-2);
}
.pop-item:hover{ background:var(--surface-2); color:var(--ink); }
.pop-item[aria-current="true"]{ color:var(--blue); font-weight:600; }
.pop-item svg{ width:14px; height:14px; color:var(--ink-4); }
.pop-item:hover svg{ color:var(--ink-3); }
.pop-item.danger{ color:var(--red); }
.pop-item.danger:hover{ background:var(--red-50); }
.pop-item.danger svg{ color:var(--red); }
.pop-sep{ height:1px; background:var(--line); margin:4px 0; }
.chip{
  height:26px; min-width:40px; padding:0 8px; border-radius:var(--r2);
  border:1px solid var(--line-2); background:var(--surface); font-size:12px; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2);
}
.chip:hover{ border-color:var(--line-3); background:var(--surface-2); }
.chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---- toasts ----------------------------------------------------------- */
.toasts{ position:fixed; right:16px; bottom:48px; z-index:180; display:flex;
         flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; gap:9px; align-items:flex-start; max-width:400px;
  padding:11px 14px; border-radius:var(--r3); background:var(--ink); color:#fff;
  box-shadow:var(--lift-2); font-size:12.5px; line-height:1.45;
  animation:toast var(--t-mid) var(--ease-out);
}
@keyframes toast{ from{ opacity:0; transform:translateY(8px) } }
.toast svg{ width:16px; height:16px; flex:none; margin-top:1px; }
.toast.ok svg{ color:var(--plate-green); }
.toast.warn svg{ color:var(--plate-amber); }
.toast.crit svg{ color:var(--plate-red); }
.toast b{ font-weight:600; }
.toast .t-sub{ display:block; color:var(--plate-tx-2); margin-top:2px; }
.toast button{ color:var(--plate-tx-2); margin-left:6px; }
.toast button:hover{ color:#fff; }