/* ==========================================================
   Vidora Labs — application UI
   Same tokens, type and surfaces as the public site, so
   signing in does not feel like landing on a different product.
   ========================================================== */

:root{
  --bg:#07080B;
  --bg-2:#0A0C11;
  --bg-3:#0E1117;

  --panel:rgba(255,255,255,.026);
  --panel-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  --ink:#EEF1F6;
  --ink-2:#98A1B0;
  --ink-3:#636C7B;

  --amber:#FFC24D;
  --amber-2:#FF9838;
  --blue:#6E8BFF;
  --ok:#3ED598;
  --bad:#FF6B5E;
  --warn:#FFC24D;

  --display:"Inter Tight",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --r:10px;
  --r-lg:14px;
  --side:250px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.25}
h1{font-size:22px;letter-spacing:-.035em}
h2{font-size:17px}
h3{font-size:15px;letter-spacing:-.015em}
h4{font-size:14px}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}

.tiny{font-size:12px;color:var(--ink-3);line-height:1.45}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ---------------- shell ---------------- */
.app .shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}

.side{
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 14px;
}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:650;font-size:19px;letter-spacing:-.04em;color:var(--ink);padding:6px 8px 22px;line-height:1}
.logo:hover{text-decoration:none}
.logo .vmark,.vmark{
  flex:none;display:block;border-radius:9px;
  filter:drop-shadow(0 6px 18px rgba(255,152,56,.4));
  transition:transform .18s ease;
}
.logo:hover .vmark{transform:translateY(-1px) scale(1.03)}
.brand-word{white-space:nowrap}
/* Legacy square mark, kept so any page still using the old span renders. */
.logo-mark{
  width:26px;height:26px;border-radius:8px;flex:none;position:relative;
  background:linear-gradient(150deg,var(--amber),var(--amber-2));
  box-shadow:0 0 0 1px rgba(255,194,77,.28),0 6px 18px -6px rgba(255,152,56,.6);
}
.logo-mark::after{
  content:"";position:absolute;left:5px;right:5px;bottom:6px;height:2px;border-radius:1px;
  background:#0A0C11;box-shadow:0 -5px 0 rgba(10,12,17,.55);
}

.sidenav{display:flex;flex-direction:column;gap:3px}
.sidenav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);
  color:var(--ink-2);font-weight:450;font-size:14.5px;border:1px solid transparent;
}
.sidenav a:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.sidenav a.on{background:var(--panel-2);border-color:rgba(255,194,77,.28);color:var(--ink);font-weight:500}
.sidenav a.on svg{color:var(--amber)}
.sidenav svg{width:18px;height:18px;flex:none}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:16px}
.wallet-chip{
  display:block;border:1px solid rgba(255,194,77,.2);border-radius:var(--r-lg);padding:13px 14px;
  background:linear-gradient(150deg,rgba(255,194,77,.09),rgba(255,255,255,.02) 60%);color:var(--ink);
}
.wallet-chip:hover{border-color:rgba(255,194,77,.4);text-decoration:none}
.wallet-chip b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.04em;margin:3px 0}

.side-user{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);min-width:0;
}
.avatar{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--amber),var(--amber-2));color:#14100A;font-size:13px;font-weight:600;
}
.side-user-id{min-width:0;line-height:1.25}
.side-user-id b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user-id span{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.logout-form{margin:0}
.btn-signout{
  width:100%;justify-content:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink-2);font-weight:450;
}
.btn-signout:hover{border-color:rgba(255,107,94,.4);color:var(--bad);background:rgba(255,107,94,.06)}
.btn-signout svg{width:16px;height:16px;flex:none}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(7,8,11,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:0 26px;height:62px;display:flex;align-items:center;gap:14px;
}
.topbar h1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;gap:8px}
.burger{display:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;color:var(--ink)}
.burger svg{width:18px;height:18px;display:block}
.content{padding:24px 26px 60px;max-width:1240px;width:100%}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font-family:var(--body);font-size:14px;font-weight:500;padding:9px 16px;
  border-radius:9px;border:1px solid transparent;cursor:pointer;
  transition:background .14s,border-color .14s,transform .1s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.lg{padding:12px 20px;font-size:15px}
.btn.block{width:100%}
.btn-primary,.btn-brand{
  background:linear-gradient(160deg,var(--amber),var(--amber-2));color:#14100A;font-weight:600;
  box-shadow:0 8px 24px -12px rgba(255,152,56,.8),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover,.btn-brand:hover{filter:brightness(1.07)}
.btn-ghost{background:var(--panel-2);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.24)}
.btn-danger{background:transparent;border-color:rgba(255,107,94,.35);color:var(--bad)}
.btn-danger:hover{background:rgba(255,107,94,.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}

/* ---------------- cards ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);position:relative}
.card::before{
  content:"";position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
}
.card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-head h2{flex:1;min-width:120px}
.card-body{padding:20px}
.card-foot{padding:14px 20px;border-top:1px solid var(--line);background:rgba(255,255,255,.015);border-radius:0 0 var(--r-lg) var(--r-lg)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-side{grid-template-columns:1fr 340px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}

.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 19px}
.metric span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:450}
.metric b{display:block;font-family:var(--display);font-size:27px;letter-spacing:-.04em;margin-top:6px;font-weight:600}
.metric span + b + span{margin-top:7px}

/* ---------------- tables ---------------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:11px 20px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);
}
.table td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(255,255,255,.022)}
.table a{font-weight:500;color:var(--ink)}
.table a:hover{color:var(--amber)}
.table-wrap{overflow-x:auto}

/* ---------------- pills ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  padding:3px 10px;border-radius:999px;white-space:nowrap;letter-spacing:.02em;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill-ok{background:rgba(62,213,152,.12);color:var(--ok)}
.pill-bad{background:rgba(255,107,94,.12);color:var(--bad)}
.pill-work{background:rgba(255,194,77,.13);color:var(--amber)}
.pill-info{background:rgba(110,139,255,.14);color:var(--blue)}
.pill-neutral{background:rgba(255,255,255,.05);color:var(--ink-3)}
.pill-work::before{animation:blip 1.3s steps(2,start) infinite}
@keyframes blip{50%{opacity:.25}}

.tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;color:var(--ink-3);background:var(--panel)}

/* ---------------- forms ---------------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:500;margin-bottom:7px;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--body);font-size:14.5px;color:var(--ink);background:var(--panel);
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,194,77,.5);outline:none;box-shadow:0 0 0 3px rgba(255,194,77,.1);
}
input:disabled,select:disabled{opacity:.5}
select option{background:#0B0E14;color:var(--ink)}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.inline > *{flex:1;min-width:150px}

/* language / option checkboxes */
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.checkgrid label{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:400;margin:0;
  background:var(--panel);color:var(--ink-2);transition:border-color .14s,background .14s;
}
.checkgrid label:hover{border-color:var(--line-2);color:var(--ink)}
.checkgrid input{accent-color:var(--amber);margin:0;flex:none;width:15px;height:15px}
.checkgrid label:has(input:checked){border-color:rgba(255,194,77,.45);background:rgba(255,194,77,.08);color:var(--ink)}

/* ---------------- dropzone ----------------
   This is a <label>, which is inline by default. Without display:block the
   padding leaks over neighbouring rows instead of forming a box. */
.drop{
  display:block;width:100%;
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);
  padding:34px 24px;text-align:center;cursor:pointer;
  background:var(--panel);transition:border-color .15s,background .15s;
}
.drop:hover,.drop.over{border-color:rgba(255,194,77,.55);background:rgba(255,194,77,.05)}
.drop b{display:block;font-size:15px;margin-bottom:6px;color:var(--ink);font-weight:500}
.drop .tiny{display:block;max-width:44ch;margin:0 auto}
.drop input[type=file]{display:none}

.progress{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--amber-2));width:0;transition:width .2s}

/* ---------------- notes ---------------- */
.note{padding:12px 15px;border-radius:var(--r);font-size:13.8px;margin-bottom:18px;border:1px solid;line-height:1.55}
.note-ok{background:rgba(62,213,152,.09);border-color:rgba(62,213,152,.28);color:#7FE3BA}
.note-bad{background:rgba(255,107,94,.09);border-color:rgba(255,107,94,.28);color:#FF9C92}
.note-warn{background:rgba(255,194,77,.09);border-color:rgba(255,194,77,.28);color:#FFD98C}
.note-info{background:rgba(110,139,255,.09);border-color:rgba(110,139,255,.28);color:#A9BAFF}
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------------- cost box ---------------- */
.costbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:18px}
.costline{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.costline b{color:var(--ink);font-weight:500}
.costline.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:15px;color:var(--ink)}
.costline.total b{font-family:var(--display);font-size:24px;letter-spacing:-.035em;color:var(--amber)}

/* ---------------- empty state ---------------- */
.empty{text-align:center;padding:56px 24px}
.empty svg{width:34px;height:34px;color:var(--ink-3);margin-bottom:14px}
.empty h3{margin-bottom:8px;font-size:17px}
.empty p{color:var(--ink-2);max-width:46ch;margin:0 auto 20px}

/* ---------------- cue preview ---------------- */
.cuelist{max-height:460px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:#05070A}
.cuerow{padding:12px 15px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:14px}
.cuerow:last-child{border-bottom:0}
.cuerow.flag{background:rgba(255,194,77,.06)}
.cuetime{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:2px}
.cuetext{font-size:14.5px;white-space:pre-line;color:var(--ink)}
.cuetext[dir=rtl]{text-align:right;font-family:"Noto Sans Hebrew",var(--body)}

/* ---------------- auth pages ---------------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-form .inner{width:100%;max-width:400px}
.auth-form .logo{padding-left:0}
.auth-aside{
  background:var(--bg-2);border-left:1px solid var(--line);color:var(--ink-2);
  padding:48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.auth-aside::before{
  content:"";position:absolute;width:520px;height:420px;border-radius:50%;filter:blur(90px);
  background:rgba(255,152,56,.16);top:-160px;left:-90px;pointer-events:none;
}
.auth-aside > *{position:relative}
.auth-aside h2{color:#fff;font-family:var(--display);font-size:28px;letter-spacing:-.04em;margin-bottom:14px;max-width:16ch}
.auth-aside ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.auth-aside li{padding-left:24px;position:relative;font-size:14px}
.auth-aside li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border:1.6px solid var(--amber);border-top:0;border-right:0;transform:rotate(-45deg)}

.auth-cue{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:15px 17px;font-size:14px}
.auth-cue .tc{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:7px}
.auth-cue .he{direction:rtl;text-align:right;color:#fff;margin-top:8px;font-family:"Noto Sans Hebrew",var(--body)}
.auth-note{margin-top:26px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:16px}

.auth-back{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);
  margin-bottom:26px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
}
.auth-back:hover{border-color:var(--line-2);color:var(--ink);text-decoration:none}
.auth-legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);line-height:1.6}
.auth-legal a{color:var(--ink-2)}

.agree{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);font-size:12.8px;line-height:1.55;color:var(--ink-2);cursor:pointer;
}
.agree input{accent-color:var(--amber);margin:2px 0 0;flex:none;width:15px;height:15px}
.agree:hover{border-color:var(--line-2)}

/* ---------------- responsive ---------------- */
@media (max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-side,.grid-3{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
}
@media (max-width:760px){
  .app .shell{grid-template-columns:1fr}
  .side{
    position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:60;
    transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 60px rgba(0,0,0,.7);
  }
  .side.open{transform:none}
  .burger{display:block}
  .content{padding:18px}
  .topbar{padding:0 18px}
  .grid-2,.grid-4{grid-template-columns:1fr}
  .cuerow{grid-template-columns:1fr;gap:4px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================
   Alignment and typography pass
   Matches the public site: running copy is justified with
   conservative hyphenation, labels and figures stay ragged,
   and every row in a list keeps the same height.
   ========================================================== */

/* Running copy — justified, but only where the measure is wide enough. */
.card-body > p,
.prose p,
.auth-aside p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -webkit-hyphenate-limit-before:4;
  -webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:9 4 4;
  hyphenate-limit-lines:2;
}
/* Labels, hints, figures and headings never justify or hyphenate. */
.tiny,.hint,.metric span,.costline,.costline b,.pill,.mono,
h1,h2,h3,h4,.card-head h2,.auth-aside h2,.side-user,.wallet-chip{
  text-align:left;hyphens:manual;-webkit-hyphens:manual;
}
h1,h2,h3,h4{text-wrap:balance}

/* Cost panel: figures right-aligned so the decimal points line up. */
.costline{align-items:baseline}
.costline > span:first-child{min-width:0}
.costline b{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Metrics keep a common height so a four-up row never looks ragged. */
.grid-4 > .metric{display:flex;flex-direction:column;justify-content:flex-start}
.metric span{overflow-wrap:anywhere}

/* Money and durations align on the digit, not the glyph width. */
.table td,.table th,.metric b,.rline b,.wallet-chip b{font-variant-numeric:tabular-nums}

/* Cards in a grid stretch to the tallest, so their footers line up. */
.grid-2 > .card,.grid-3 > .card,.grid-4 > .card{display:flex;flex-direction:column}
.grid-2 > .card > .card-foot,.grid-3 > .card > .card-foot{margin-top:auto}

/* ==========================================================
   Dashboard
   ========================================================== */

/* ---- metric row ---- */
/* Own grid rather than .grid-4 so the cards can size to their content and
   share one baseline instead of stretching to whatever the tallest note is. */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;
}
.metric{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;display:flex;flex-direction:column;gap:0;min-width:0;
}
.metric-label{
  display:block;font-size:11px;font-family:var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
.metric-value{
  display:block;font-family:var(--display);font-size:28px;line-height:1.15;
  letter-spacing:-.04em;font-weight:600;color:var(--ink);margin:9px 0 5px;
  font-variant-numeric:tabular-nums;
}
.metric-note{
  display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4;
  margin-top:auto;overflow:hidden;text-overflow:ellipsis;
}
/* The wallet card is the one you act on, so it carries the accent. */
.metric:first-child{
  border-color:rgba(255,194,77,.22);
  background:linear-gradient(160deg,rgba(255,194,77,.07),rgba(255,255,255,.02) 62%);
}
.metric:first-child .metric-value{color:var(--amber)}

/* ---- jobs table ---- */
/* Fixed columns stop the title stretching the numeric columns apart, which is
   what made the row read as a scattered line of values. */
.table-jobs{table-layout:fixed}
.table-jobs .c-num{width:104px}
.table-jobs col:nth-child(5){width:130px}
.table-jobs .c-lang{width:74px}
.table-jobs .c-status{width:124px}
.table-jobs .c-when{width:96px}
.table .center{text-align:center}
.table td.right,.table th.right{text-align:right}
.table td.mono,.table td.tiny{font-variant-numeric:tabular-nums}

.cell-title{min-width:0}
.cell-title a{
  display:block;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cell-title a:hover{color:var(--amber)}
/* Failure text and progress notes sit under the title on one clipped line, so
   a long error can no longer push the row to double height. */
.cell-title .subline{
  display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cell-title .subline.bad{color:var(--bad)}
.cell-title .subline.bad::before{content:"⚠ ";opacity:.85}

/* The held marker occupies a fixed slot whether or not it has text, so the
   money column lines up on the decimal point across every row. The flex sits
   on an inner span, never the cell itself — a display:flex <td> drops out of
   table layout and breaks the row borders. */
.cost-cell{display:inline-flex;justify-content:flex-end;align-items:baseline;gap:6px}
.cost-amt{font-variant-numeric:tabular-nums}
.table td .held{
  flex:none;width:26px;text-align:left;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
/* The count rides inside the heading, so .card-head keeps its original
   layout (h2 takes the free space, actions sit right) and no other page
   using this component shifts. */
.card-head h2 .count{
  color:var(--ink-3);font-size:12.5px;font-weight:400;margin-left:10px;
  font-family:var(--body);letter-spacing:0;
}

/* Wallet figure in the topbar duplicates the sidebar chip on desktop; it only
   earns its place once the sidebar is off-screen. */
.wallet-sm{display:none}

@media (max-width:1100px){
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .metrics{grid-template-columns:repeat(2,1fr);gap:10px}
  .metric{padding:13px 14px}
  .metric-value{font-size:23px;margin:7px 0 4px}
  .wallet-sm{display:inline-flex}
  .table-jobs{table-layout:auto;min-width:640px}
}
@media (max-width:460px){
  .metrics{grid-template-columns:1fr}
}