/* ============================================================
   Byrne's | QuoteFlow Alpha
   Visual language: the carbon docket book and the van.
   Ink + paper + a working hi-vis amber. Nothing decorative.
   ============================================================ */

:root{
  --ink:#16212E;
  --ink-2:#22313F;
  --ink-soft:#50616F;
  --muted:#7E8D9A;
  --paper:#EDF0F3;
  --card:#FFFFFF;
  --rule:#D6DDE4;
  --rule-2:#E6EBEF;

  --amber:#E09B2D;
  --amber-ink:#8A5B06;
  --amber-wash:#FDF3E2;

  --green:#2E7D5B;
  --green-wash:#E6F2EC;
  --red:#B5362B;
  --red-wash:#FBEDEB;
  --blue:#2B6CB0;
  --blue-wash:#EAF1F9;

  --ui:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond:"Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  --r:10px;
  --shadow:0 1px 2px rgba(22,33,46,.06), 0 4px 14px rgba(22,33,46,.06);
  --tap:48px;
  --navh:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{margin:0; line-height:1.18; letter-spacing:-.01em}
p{margin:0 0 .7em}
button,input,select,textarea{font:inherit; color:inherit}
.num{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}

/* ---------- demo strip ---------- */
.demo-strip{
  background:var(--ink); color:#C7D3DE;
  font-family:var(--cond); font-size:13px; letter-spacing:.03em;
  padding:6px 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.demo-strip strong{color:var(--amber); font-weight:600}
.demo-strip .sep{opacity:.4}
.demo-strip .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}

/* ---------- challenge bar ---------- */
.challenge-bar{
  position:sticky; top:0; z-index:60;
  background:var(--amber); color:#2A1C02;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 14px; box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.challenge-bar.danger{background:var(--red); color:#fff}
.cb-label{font-family:var(--cond); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px; display:block}
.cb-hint{font-size:13.5px}
.cb-clock{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.cb-right{display:flex; align-items:center; gap:10px}
.cb-quit{background:rgba(0,0,0,.14); border:0; color:inherit; padding:7px 12px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:600}
.cb-quit:hover{background:rgba(0,0,0,.22)}

/* ---------- topbar ---------- */
.topbar{
  background:var(--ink-2); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.mark{
  width:34px;height:34px;flex:none;border-radius:8px;background:var(--amber);
  color:#2A1C02; font-weight:700; font-size:19px;
  display:grid; place-items:center;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text span{font-family:var(--cond); font-size:12.5px; color:#9FB2C2; letter-spacing:.07em; text-transform:uppercase}
.brand-text em{font-style:normal; color:var(--amber)}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  border:1px solid transparent; border-radius:8px; cursor:pointer;
  padding:10px 15px; font-size:14.5px; font-weight:600; min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .14s ease, border-color .14s ease, transform .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--amber); color:#2A1C02}
.btn-accent:hover{background:#EFAA3B}
.btn-ghost{background:transparent; border-color:#46586A; color:#D4DEE7}
.btn-ghost:hover{background:#2C3D4D}
.btn-primary{background:var(--ink); color:#fff; width:100%}
.btn-primary:hover{background:var(--ink-2)}
.btn-approve{background:var(--green); color:#fff; width:100%; font-size:17px; min-height:56px}
.btn-approve:hover{background:#35906A}
.btn-line{background:var(--card); border-color:var(--rule); color:var(--ink)}
.btn-line:hover{background:#F6F8FA}
.btn-sm{min-height:38px; padding:7px 12px; font-size:13.5px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- shell + nav ---------- */
.shell{display:block}
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  position:relative; text-decoration:none; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--navh); padding:8px 4px;
  font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.02em;
}
.nav-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item[aria-current="page"]{color:var(--ink); background:var(--amber-wash)}
.nav-item[aria-current="page"] svg{stroke:var(--amber-ink)}
.nav-badge{
  position:absolute; top:7px; right:calc(50% - 26px);
  background:var(--ink); color:#fff; font-size:11px; font-weight:700;
  min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 5px;
}
.nav-badge.warn{background:var(--red)}
.nav-badge[data-zero="1"]{display:none}

.main{padding:16px 14px 28px; max-width:1180px; margin:0 auto}

/* ---------- page head ---------- */
.page-head{margin-bottom:14px}
.page-head h1{font-size:23px; font-weight:700}
.page-head p{color:var(--ink-soft); font-size:14.5px; margin:5px 0 0}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow)}
.card + .card{margin-top:12px}
.card-pad{padding:15px}

.section-label{
  font-family:var(--cond); font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 9px;
}
.section-label:first-child{margin-top:0}

/* ---------- job card (the docket) ---------- */
.job{
  display:block; width:100%; text-align:left; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow);
  padding:13px 14px; cursor:pointer; margin-bottom:10px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.job:hover{border-color:#B9C5D0; box-shadow:0 2px 6px rgba(22,33,46,.1)}
.job-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.job-ref{
  font-family:var(--cond); font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--amber-ink); background:var(--amber-wash);
  padding:2px 7px; border-radius:4px; white-space:nowrap;
}
.job-cust{font-size:17px; font-weight:600; margin:7px 0 2px; line-height:1.25}
.job-desc{font-size:14px; color:var(--ink-soft); margin:0}
.job-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--rule-2);
  font-size:13px; color:var(--muted);
}
.job-meta b{color:var(--ink); font-weight:600}
.waiting-hot b{color:var(--red)}

/* ---------- pills ---------- */
.pill{
  font-family:var(--cond); font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.pill-grey{background:#EDF1F4; color:var(--ink-soft)}
.pill-amber{background:var(--amber-wash); color:var(--amber-ink)}
.pill-green{background:var(--green-wash); color:var(--green)}
.pill-red{background:var(--red-wash); color:var(--red)}
.pill-blue{background:var(--blue-wash); color:var(--blue)}

/* ---------- insights ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.stat{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:13px 14px}
.stat .k{font-family:var(--cond); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-size:27px; font-weight:700; line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.stat.hot .v{color:var(--red)}

.assumption{
  background:var(--amber-wash); border:1px solid #EFD9AE; border-radius:var(--r);
  padding:12px 14px; font-size:13.5px; color:var(--amber-ink); margin-top:10px;
}
.assumption strong{display:block; font-family:var(--cond); letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; margin-bottom:3px}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label, .lbl{display:block; font-size:13.5px; font-weight:600; margin-bottom:5px}
.req{color:var(--red)}
.hint{font-size:12.5px; color:var(--muted); font-weight:400; margin-top:3px}
input[type=text], input[type=number], input[type=date], select, textarea{
  width:100%; background:#fff; border:1px solid var(--rule); border-radius:8px;
  padding:11px 12px; font-size:16px; min-height:var(--tap);
}
textarea{min-height:76px; resize:vertical; line-height:1.4}
input:focus, select:focus, textarea:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(43,108,176,.15)}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--red); background:#FFFAF9}
.err{color:var(--red); font-size:12.5px; margin-top:4px; font-weight:600}
.grid2{display:grid; grid-template-columns:1fr; gap:0 14px}
.form-foot{position:sticky; bottom:calc(var(--navh) + 8px); padding-top:6px}

/* ---------- line item editor ---------- */
.lines{width:100%; border-collapse:collapse}
.lines th{
  font-family:var(--cond); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:left; font-weight:700; padding:0 6px 6px 0;
}
.lines th.r, .lines td.r{text-align:right}
.lines td{padding:3px 6px 3px 0; vertical-align:middle}
.lines input{min-height:42px; padding:8px 9px; font-size:15px}
.lines input.n{text-align:right}
.lines tfoot td{padding-top:9px; font-weight:600; border-top:1px solid var(--rule-2)}
.del{
  background:none;border:0;color:var(--muted);cursor:pointer;font-size:19px;line-height:1;
  width:36px;height:42px;border-radius:6px;
}
.del:hover{background:var(--red-wash); color:var(--red)}

/* stacked line items on small screens: description gets the full width */
@media (max-width:559px){
  .lines, .lines tbody, .lines tr, .lines td{display:block; width:100%}
  .lines thead{display:none}
  .lines tr{
    display:flex; flex-wrap:wrap; gap:7px 8px; align-items:flex-end;
    border:1px solid var(--rule-2); border-radius:9px; padding:9px; margin-bottom:8px;
  }
  .lines td{padding:0; flex:1 1 0; min-width:0}
  .lines td.c-desc{flex:1 1 100%}
  .lines td[data-lab]::before{
    content:attr(data-lab); display:block;
    font-family:var(--cond); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:3px;
  }
  .lines td.c-line{flex:0 0 auto; margin-left:auto; text-align:right; font-weight:700; padding-bottom:11px}
  .lines td.c-del{flex:0 0 auto}
}

/* ---------- totals ---------- */
.totals{border-top:1px solid var(--rule); margin-top:14px; padding-top:12px}
.trow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:5px 0; font-size:14.5px}
.trow .lab{color:var(--ink-soft)}
.trow .val{font-weight:600; font-variant-numeric:tabular-nums}
.trow.sub{border-top:1px solid var(--rule-2); margin-top:6px; padding-top:9px}
.trow.grand{
  border-top:2px solid var(--ink); margin-top:9px; padding-top:11px;
  font-size:18px; font-weight:700;
}
.trow.grand .val{font-size:30px; letter-spacing:-.02em}
.trow.vat .val, .trow.vat .lab{color:var(--muted); font-weight:500}

/* ---------- gerry override ---------- */
.override{
  background:var(--amber-wash); border:1px solid #EFD9AE; border-radius:var(--r);
  padding:13px 14px; margin-top:14px;
}
.override h3{font-size:15px; margin-bottom:3px}
.override .hint{margin-bottom:9px}
.override-row{display:flex; gap:9px; align-items:center}
.override-row .pfx{font-size:19px; font-weight:700; color:var(--amber-ink)}

/* ---------- pipeline ---------- */
.pipe{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-bottom:4px}
.pipe-step{
  font-family:var(--cond); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; background:#EDF1F4; color:var(--muted);
}
.pipe-step.done{background:var(--ink); color:#fff}
.pipe-step.now{background:var(--amber); color:#2A1C02}
.pipe-arrow{color:var(--rule); font-size:13px}

/* ---------- history / activity ---------- */
.log{list-style:none; margin:0; padding:0}
.log li{
  display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--rule-2); font-size:14px;
}
.log li:last-child{border-bottom:0}
.log .when{
  font-family:var(--cond); font-size:12px; color:var(--muted); white-space:nowrap;
  min-width:94px; padding-top:2px;
}
.log .who{font-weight:600}

/* ---------- misc ---------- */
.empty{text-align:center; padding:40px 18px; color:var(--muted)}
.empty h3{color:var(--ink); margin-bottom:5px; font-size:17px}
.back{
  background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:14.5px;font-weight:600;
  padding:8px 0; display:inline-flex; align-items:center; gap:6px; min-height:var(--tap);
}
.back:hover{color:var(--ink)}
.rowbtns{display:flex; gap:8px; flex-wrap:wrap}
.notice{
  background:var(--blue-wash); border:1px solid #C5D9EE; border-radius:var(--r);
  padding:12px 14px; font-size:13.5px; color:#23527F; margin-bottom:12px;
}
.notice.warn{background:var(--red-wash); border-color:#EFC9C4; color:var(--red)}
.summary-grid{display:grid; grid-template-columns:1fr; gap:0}
.sg-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--rule-2); font-size:14.5px}
.sg-row:last-child{border-bottom:0}
.sg-row .k{color:var(--ink-soft); flex:none}
.sg-row .v{text-align:right; font-weight:600}

/* ---------- hidden must beat display rules below ---------- */
[hidden]{display:none !important}

/* ---------- overlay / dialog ---------- */
.overlay{
  position:fixed; inset:0; z-index:120; background:rgba(16,24,34,.55);
  display:grid; place-items:center; padding:18px;
}
.dialog{
  background:var(--card); border-radius:14px; max-width:430px; width:100%;
  padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.dialog h2{font-size:21px; margin-bottom:10px}
.dialog .big{font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1; margin:6px 0 2px; font-variant-numeric:tabular-nums}
.dialog .pass{color:var(--green)}
.dialog .fail{color:var(--red)}
.dlg-actions{display:flex; gap:9px; margin-top:18px; flex-wrap:wrap}
.dlg-actions .btn{flex:1; min-width:130px}

/* ---------- sticky approve dock (phones) ---------- */
.approve-dock{
  position:fixed; left:0; right:0; bottom:var(--navh); z-index:55;
  background:var(--card); border-top:1px solid var(--rule);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  box-shadow:0 -5px 18px rgba(22,33,46,.12);
}
.dock-total{display:flex; flex-direction:column; line-height:1.15; flex:none}
.dock-total .k{
  font-family:var(--cond); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.dock-total .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
@media (min-width:860px){ .approve-dock, #dockSpacer{display:none !important} }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--navh) + 86px); z-index:150;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:9px;
  font-size:14.5px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.26);
  max-width:calc(100vw - 32px); text-align:center;
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:860px){
  body{padding-bottom:0}
  .shell{display:grid; grid-template-columns:232px 1fr; align-items:start; max-width:1320px; margin:0 auto}
  .nav{
    position:sticky; top:0; left:auto; right:auto; bottom:auto;
    display:flex; flex-direction:column; gap:3px;
    border-top:0; border-right:1px solid var(--rule); background:transparent;
    padding:18px 12px; min-height:calc(100vh - 100px);
  }
  .nav-item{
    flex-direction:row; justify-content:flex-start; gap:11px;
    min-height:46px; padding:10px 13px; border-radius:8px; font-size:14.5px;
    font-family:var(--ui); letter-spacing:0;
  }
  .nav-badge{position:static; margin-left:auto; right:auto; top:auto}
  .main{padding:22px 24px 48px}
  .page-head h1{font-size:27px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .form-foot{position:static}
  .two-col{display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start}
  .two-col > * + *{margin-top:0}
  .two-col > *:first-child{order:2}   /* price panel back to the right on desktop */
  .two-col > *:last-child{order:1}
  .btn-primary{width:auto; min-width:210px}
}

@media (min-width:1100px){
  .job-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
  .job{margin-bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

@media print{
  .nav,.topbar,.demo-strip,.challenge-bar,.toast{display:none}
}

/* ============================================================
   VISUAL REFRESH (Trayclear)
   Same docket-book language, turned up: site-hoarding stripes,
   a faint blueprint grid, coloured docket edges and more depth.
   ============================================================ */
:root{
  --r:14px;
  --amber-hi:#F2B24A;
  --shadow:0 1px 2px rgba(22,33,46,.05), 0 6px 20px -6px rgba(22,33,46,.14);
  --shadow-lift:0 2px 4px rgba(22,33,46,.06), 0 16px 32px -10px rgba(22,33,46,.28);
  --stripes:repeating-linear-gradient(-45deg, var(--amber) 0 10px, var(--ink) 10px 20px);
}

body{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(43,108,176,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,176,.045) 1px, transparent 1px);
  background-size:28px 28px;
}

/* demo strip + link home */
.demo-strip{background:#0F1822}
.strip-link{margin-left:auto; color:#fff; text-decoration:none; font-weight:600; opacity:.85}
.strip-link:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}

/* topbar with a hazard-tape edge */
.topbar{
  position:relative;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(224,155,45,.16), transparent 55%),
    linear-gradient(180deg, #24364A, var(--ink-2));
  padding:14px 16px 17px;
}
.topbar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--stripes)}
a.brand{color:inherit; text-decoration:none}
.mark{
  width:40px; height:40px; border-radius:11px;
  background:linear-gradient(145deg, var(--amber-hi), var(--amber));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 12px rgba(224,155,45,.35);
}
.mark svg{width:23px; height:23px; fill:none; stroke:#2A1C02; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.brand-text strong{font-size:16px}

/* buttons */
.btn{border-radius:10px; transition:background .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease}
.btn-accent{
  background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14), 0 6px 16px -6px rgba(224,155,45,.7);
}
.btn-accent:hover{background:linear-gradient(180deg, #F6BE5E, var(--amber-hi))}
.btn-approve{
  background:linear-gradient(180deg, #379469, var(--green));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.16), 0 8px 20px -8px rgba(46,125,91,.8);
  border-radius:12px; letter-spacing:.01em;
}
.btn-approve:hover{background:linear-gradient(180deg, #3FA376, #34896A)}
.btn-primary{border-radius:10px; box-shadow:0 6px 16px -8px rgba(22,33,46,.6)}

/* page heads */
.page-head{margin-bottom:18px}
.page-head h1{
  font-family:var(--cond); font-weight:700; font-size:28px; letter-spacing:-.005em;
  display:inline-block; padding-bottom:6px;
  background:linear-gradient(var(--amber), var(--amber)) left bottom / 44px 4px no-repeat;
}

/* docket cards: coloured left edge, lift on hover */
.job{
  position:relative; overflow:hidden; border-radius:var(--r);
  padding:15px 16px 14px 20px; border-color:#DCE3EA;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.job::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#C3CDD6}
.job[data-urgency="priority"]::before{background:var(--amber)}
.job[data-urgency="urgent"]::before{background:var(--red)}
.job.is-hot::before{background:var(--stripes)}
.job:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:#C7D2DC}
.job:active{transform:translateY(0)}
.job-ref{border-radius:6px; padding:3px 8px; box-shadow:inset 0 0 0 1px #F0DDB8}
.job-cust{font-size:18px}
.job-meta{border-top-style:dashed}

/* pills */
.pill{padding:4px 9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}

/* cards and stats */
.card{border-color:#DCE3EA}
.stat{
  position:relative; overflow:hidden; border-color:#DCE3EA; box-shadow:var(--shadow);
  padding:15px 16px;
}
.stat::after{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--ink)}
.stat.hot::after{background:var(--stripes)}
.stat .v{font-family:var(--cond); font-size:34px; letter-spacing:-.01em}

.assumption, .override{border-radius:var(--r)}
.override{border-left:5px solid var(--amber)}

/* totals: make the number the hero */
.trow.grand .val{font-family:var(--cond); font-size:36px}

/* pipeline as a progress track */
.pipe-step{border-radius:20px; padding:6px 11px}
.pipe-step.now{box-shadow:0 0 0 3px rgba(224,155,45,.25)}

/* nav */
.nav{backdrop-filter:saturate(1.4) blur(10px); background:rgba(255,255,255,.92)}
.nav-item[aria-current="page"]{background:linear-gradient(180deg, var(--amber-wash), #FBEBCF)}
@media (min-width:860px){
  .nav{background:transparent; backdrop-filter:none}
  .nav-item{transition:background .15s ease}
  .nav-item:hover{background:rgba(255,255,255,.7)}
  .nav-item[aria-current="page"]{box-shadow:inset 4px 0 0 var(--amber); background:#fff}
  .page-head h1{font-size:34px}
}

/* challenge bar */
.challenge-bar{background:linear-gradient(90deg, var(--amber), var(--amber-hi))}
.cb-clock{font-family:var(--cond); font-size:30px}

/* dialog + toast */
.overlay{backdrop-filter:blur(3px)}
.dialog{border-radius:18px; border-top:6px solid var(--amber); animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
.dialog .big{font-family:var(--cond)}
.toast{border-radius:12px; border-left:4px solid var(--amber); animation:rise .2s ease-out}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}
@keyframes rise{from{opacity:0; transform:translate(-50%, 8px)} to{opacity:1; transform:translate(-50%, 0)}}