/* ─────────────────────────────────────────────────────────────
   Narimade stall app
   The palette is sampled from the logo: purple #664583 for anything
   you act on, orange #EA9741 for the one thing wanting attention,
   sage #9CAA76 for everything that is fine. Nothing here is invented.
   Light and dark are both first-class — a stall in a bright hall and a
   stall at 9pm are different rooms.
   ───────────────────────────────────────────────────────────── */

:root{
  --ground:#EFEDF3;
  --surface:#FFFFFF;
  --surface-2:#F6F4F8;
  --line:#E0DCE6;
  --line-soft:#EBE7F0;
  --ink:#1B1720;
  --ink-2:#524A5C;
  --ink-3:#837C8D;
  --indigo:#664583;
  --indigo-soft:#F1ECF6;
  --indigo-ink:#664583;
  --marigold:#9A5E0B;
  --marigold-bg:#FDF2E3;
  --marigold-line:#F1D2A4;
  --good:#4E6633;
  --good-bg:#EDF2E4;
  --warn:#9A5E0B;
  --bad:#B32B22;
  --bad-bg:#FBE9E7;
  --brand-purple:#664583;
  --brand-green:#9CAA76;
  --brand-orange:#EA9741;
  --shadow:0 1px 2px rgba(16,20,30,.06),0 8px 24px -12px rgba(16,20,30,.18);
  --shadow-lg:0 24px 60px -20px rgba(16,20,30,.35);
  --on-accent:#FFFFFF;
  --r:14px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E0C12;
    --surface:#191621;
    --surface-2:#221E2C;
    --line:#322C3C;
    --line-soft:#282331;
    --ink:#ECE8F2;
    --ink-2:#ADA5B8;
    --ink-3:#837C8D;
    --indigo:#C3AEDC;
    --indigo-soft:#2A2036;
    --indigo-ink:#C3AEDC;
    --marigold:#EA9741;
    --marigold-bg:#33240F;
    --marigold-line:#5C4620;
    --good:#B4C58F;
    --good-bg:#1F2718;
    --warn:#EA9741;
    --bad:#F08076;
    --bad-bg:#2E1815;
    --brand-purple:#C3AEDC;
    --brand-green:#9CAA76;
    --brand-orange:#EA9741;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"]{
  --ground:#0E0C12;
  --surface:#191621;
  --surface-2:#221E2C;
  --line:#322C3C;
  --line-soft:#282331;
  --ink:#ECE8F2;
  --ink-2:#ADA5B8;
  --ink-3:#837C8D;
  --indigo:#C3AEDC;
  --indigo-soft:#2A2036;
  --indigo-ink:#C3AEDC;
  --marigold:#EA9741;
  --marigold-bg:#33240F;
  --marigold-line:#5C4620;
  --good:#B4C58F;
  --good-bg:#1F2718;
  --warn:#EA9741;
  --bad:#F08076;
  --bad-bg:#2E1815;
  --brand-purple:#C3AEDC;
  --brand-green:#9CAA76;
  --brand-orange:#EA9741;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--on-accent:#16121C}}

:root[data-theme="dark"]{--on-accent:#16121C}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}

/* ---------- page shell ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:56px 24px 80px}

@media(max-width:900px){.stage{grid-template-columns:1fr;gap:36px}}

/* ---------- phone ---------- */
.phone-col{position:sticky;top:32px}

@media(max-width:900px){.phone-col{position:static}}

/* status strip */
.status{
  padding:11px 16px 9px;display:flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--line-soft);background:var(--surface);flex:none;
}

.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px var(--good-bg)}

.dot.off{background:var(--warn);box-shadow:0 0 0 3px var(--marigold-bg)}

.status-main{flex:1;min-width:0}

.status-main .venue{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}

.status-main .sub{font-size:11px;color:var(--ink-3);line-height:1.3}

.counter-badge{
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;
  background:var(--indigo-soft);color:var(--indigo-ink);letter-spacing:.02em;flex:none;
}

/* screen body */
.screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}

.screen::-webkit-scrollbar{width:0}

.pad{padding:14px 16px}

/* tabs */
.tabbar{
  display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);
  background:var(--surface);flex:none;padding-bottom:4px;
}

.tab{
  appearance:none;border:0;background:none;padding:9px 2px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;
  font-family:inherit;font-size:9.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.01em;transition:color .12s;
}

.tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.tab[aria-selected="true"]{color:var(--indigo-ink)}

.tab .badge{
  position:absolute;top:5px;right:calc(50% - 18px);min-width:15px;height:15px;
  border-radius:99px;background:var(--bad);color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;
}

/* chips row */
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:12px 16px 4px;scrollbar-width:none}

.chiprow::-webkit-scrollbar{display:none}

.chip{
  appearance:none;font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;flex:none;transition:.12s;
}

.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* search */
.searchwrap{padding:10px 16px 4px}

.search{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:15px;
}

.search::placeholder{color:var(--ink-3)}

/* product grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:12px 16px 24px}

.card{
  appearance:none;font-family:inherit;text-align:left;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column;transition:.12s;
}

.card:active{transform:scale(.975)}

.swatch{height:88px;position:relative}

.swatch::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px);
}

.card-body{padding:9px 10px 10px;display:flex;flex-direction:column;gap:5px;flex:1}

.card-name{font-size:13px;font-weight:600;line-height:1.28;letter-spacing:-.01em}

.card-artist{font-size:10.5px;color:var(--ink-3);line-height:1.2}

.card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:3px}

.card-price{font-size:13.5px;font-weight:600}

.left-pill{
  font-size:10px;font-weight:600;padding:2.5px 6px;border-radius:6px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-soft);
}

.left-pill.low{background:var(--marigold-bg);color:var(--marigold);border-color:var(--marigold-line)}

.left-pill.out{background:var(--bad-bg);color:var(--bad);border-color:transparent}

/* sheet */
.scrim{
  position:absolute;inset:0;background:rgba(10,13,20,.45);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:5;
}

.scrim.on{opacity:1;pointer-events:auto}

.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--surface);
  border-radius:22px 22px 0 0;border-top:1px solid var(--line);
  transform:translateY(103%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:92%;overflow-y:auto;box-shadow:0 -12px 40px -12px rgba(16,20,30,.3);
}

.sheet.on{transform:translateY(0)}

.grabber{width:34px;height:4px;border-radius:99px;background:var(--line);margin:9px auto 2px}

.sheet-head{padding:6px 18px 12px;display:flex;gap:12px;align-items:flex-start}

.sheet-sw{width:46px;height:46px;border-radius:10px;flex:none;position:relative;overflow:hidden}

.sheet-sw::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 4px)}

.sheet-title{font-size:15.5px;font-weight:600;line-height:1.24;letter-spacing:-.015em}

.sheet-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px}

.seclabel{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:0 18px;margin-bottom:8px;
}

.sizes{display:flex;gap:8px;padding:0 18px 16px;flex-wrap:wrap}

.size{
  appearance:none;font-family:inherit;cursor:pointer;border:1.5px solid var(--line);
  background:var(--surface);border-radius:11px;padding:9px 0;width:66px;
  display:flex;flex-direction:column;align-items:center;gap:1px;transition:.12s;color:var(--ink);
}

.size .s{font-size:14.5px;font-weight:700;letter-spacing:-.01em}

.size .n{font-size:10px;color:var(--ink-3);font-weight:500}

.size[aria-pressed="true"]{border-color:var(--indigo);background:var(--indigo-soft)}

.size[aria-pressed="true"] .s,.size[aria-pressed="true"] .n{color:var(--indigo-ink)}

.size.low .n{color:var(--marigold)}

.size:disabled{opacity:.36;cursor:not-allowed}

.pricebox{padding:0 18px 4px}

.priceline{
  display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);
  border-radius:13px;padding:10px 14px;background:var(--surface-2);
}

.rs{font-size:19px;color:var(--ink-3);font-weight:500}

.priceinput{
  border:0;background:none;color:var(--ink);font-family:"IBM Plex Mono",monospace;
  font-size:27px;font-weight:600;width:100%;padding:0;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.priceinput:focus{outline:none}

.stepbtns{display:flex;gap:6px;flex:none}

.step{
  appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  width:32px;height:32px;border-radius:9px;font-size:17px;cursor:pointer;font-family:inherit;line-height:1;
}

.taxline{
  padding:9px 18px 0;font-size:12px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:10px;
}

.taxline b{color:var(--ink-2);font-weight:600}

.nudge{
  margin:11px 18px 0;padding:10px 12px;border-radius:11px;
  background:var(--marigold-bg);border:1px solid var(--marigold-line);
  font-size:12.5px;color:var(--marigold);line-height:1.4;display:none;gap:9px;align-items:flex-start;
}

.nudge.on{display:flex}

.nudge svg{width:15px;height:15px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

.nudge b{font-weight:700}

.nudge button{
  appearance:none;border:0;background:var(--marigold);color:var(--on-accent);font-family:inherit;
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer;margin-top:5px;
}

.pay{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 18px 0}

.paybtn{
  appearance:none;font-family:inherit;cursor:pointer;border:1.5px solid var(--line);
  background:var(--surface);border-radius:13px;padding:13px 0;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.12s;
}

.paybtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.paybtn span{font-size:13.5px;font-weight:600}

.paybtn[aria-pressed="true"]{border-color:var(--indigo);background:var(--indigo-soft);color:var(--indigo-ink)}

.upiref{padding:10px 18px 0;display:none}

.upiref.on{display:block}

.upiref input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
}

.save{
  margin:16px 18px;padding:15px;border-radius:13px;border:0;width:calc(100% - 36px);
  background:var(--indigo);color:var(--on-accent);font-family:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}

.save:disabled{opacity:.35;cursor:not-allowed}

.save small{font-weight:500;opacity:.75;font-size:12px}

.unpaid{
  display:block;width:calc(100% - 36px);margin:0 18px 18px;background:none;border:0;
  font-family:inherit;font-size:12.5px;color:var(--ink-3);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}

/* empty states */
.empty{
  border:1.5px dashed var(--line);border-radius:var(--r);background:var(--surface-2);
  padding:26px 20px;text-align:center;margin-bottom:12px;
}

.empty svg{width:26px;height:26px;stroke:var(--ink-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}

.empty .e-t{font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35}

.empty .e-s{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:6px;max-width:34ch;margin-left:auto;margin-right:auto}

/* packing the box */
.packbar{
  position:sticky;top:0;z-index:3;background:var(--surface);
  border-bottom:1px solid var(--line);padding:12px 16px;
  display:flex;align-items:center;gap:12px;
}

.packbar .pb-v{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1}

.packbar .pb-l{font-size:11px;color:var(--ink-3);line-height:1.3;margin-top:2px}

.packbar .pb-done{
  margin-left:auto;flex:none;appearance:none;border:0;background:var(--indigo);
  color:var(--on-accent);font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:10px;cursor:pointer;
}

.packrow{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 11px;margin-bottom:8px}

.packrow.zero{opacity:.5}

.pack-h{display:flex;align-items:baseline;gap:8px}

.pack-n{font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.01em;flex:1}

.pack-t{font-size:12px;font-weight:700;flex:none}

.pack-a{font-size:10.5px;color:var(--ink-3);line-height:1.2;margin-top:1px}

.packsizes{display:flex;gap:6px;margin-top:9px}

.packsz{flex:1;min-width:0}

.packsz label{
  display:block;font-size:9.5px;font-weight:600;color:var(--ink-3);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.05em;text-align:center;
}

.packsz input{
  width:100%;padding:9px 0;text-align:center;border-radius:9px;border:1.5px solid var(--line);
  background:var(--surface-2);font-family:"IBM Plex Mono",monospace;font-size:15px;
  font-weight:600;color:var(--ink);
}

.packsz input:focus{border-color:var(--indigo);outline:none;background:var(--surface)}

/* who's selling */
.person{
  width:100%;appearance:none;font-family:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:13px 14px;margin-bottom:9px;color:var(--ink);display:flex;align-items:center;gap:12px;
}

.person[aria-pressed="true"]{border-color:var(--indigo);border-width:1.5px;background:var(--indigo-soft)}

.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:14.5px;font-weight:700;letter-spacing:-.02em;
  background:var(--indigo-soft);color:var(--indigo-ink);
}

.person[aria-pressed="true"] .avatar{background:var(--indigo);color:var(--on-accent)}

.p-n{font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}

.p-s{font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:1px}

.p-tick{margin-left:auto;flex:none;color:var(--indigo-ink);font-size:16px;font-weight:700}

.addname{display:flex;gap:8px;margin-bottom:9px}

.addname input{
  flex:1;padding:12px 13px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--surface-2);font-family:inherit;font-size:15px;color:var(--ink);min-width:0;
}

.addname button{
  appearance:none;border:0;background:var(--indigo);color:var(--on-accent);font-family:inherit;
  font-size:14px;font-weight:600;padding:0 16px;border-radius:11px;cursor:pointer;flex:none;
}

.addname button:disabled{opacity:.35;cursor:not-allowed}

/* brand */
.brandbar{
  padding:26px 18px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:3px;
}

.logoslot{
  display:flex;align-items:center;gap:11px;
}

.logomark{height:42px;width:auto;display:block;flex:none}

.wordmark{height:26px;width:auto;display:block}

.tagline{
  font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);margin-top:7px;
}

.tagline b{color:var(--brand-orange);font-weight:600}

:root:not([data-theme="dark"]) .tagline b{color:var(--marigold)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tagline b{color:var(--brand-orange)}
}

:root[data-theme="dark"] .tagline b{color:var(--brand-orange)}

/* invoice preview */
.inv{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  margin:0 16px 14px;padding:16px 15px;
}

.inv-top{display:flex;align-items:flex-start;gap:11px;padding-bottom:13px;border-bottom:2px solid var(--ink)}

.inv-title{
  margin-left:auto;text-align:right;flex:none;
}

.inv-title .a{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.inv-title .b{font-size:10px;color:var(--ink-3);margin-top:2px}

.inv-parties{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}

.inv-p{flex:1;min-width:0}

.inv-p .k{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.inv-p .v{font-size:11px;line-height:1.45;margin-top:3px}

.inv-p .v b{font-weight:600}

.inv-line{padding:12px 0;border-bottom:1px solid var(--line-soft)}

.inv-l1{display:flex;gap:10px;align-items:flex-start}

.inv-l1 .d{flex:1;font-size:12px;font-weight:600;line-height:1.35}

.inv-l1 .amt{font-size:12px;font-weight:600;flex:none}

.inv-l2{font-size:10px;color:var(--ink-3);margin-top:3px;line-height:1.5}

.inv-artist{
  font-size:10.5px;margin-top:7px;padding:5px 8px;border-radius:6px;
  background:var(--marigold-bg);color:var(--marigold);display:inline-block;font-weight:500;
}

.inv-tax{padding:10px 0 2px}

.inv-r{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;gap:12px}

.inv-r .l{color:var(--ink-2)}

.inv-r.tot{
  font-size:13.5px;font-weight:700;border-top:1.5px solid var(--ink);
  margin-top:7px;padding-top:8px;
}

.inv-words{font-size:9.5px;color:var(--ink-3);font-style:italic;margin-top:6px;line-height:1.45}

.inv-foot{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:9.5px;color:var(--ink-3);line-height:1.5;
}

.inv-foot b{color:var(--marigold)}

/* exhibition picker + comparison */
:root{--c-kept:#7C57A0;--c-cost:#C07C1E}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-kept:#9E7AC4;--c-cost:#BE7E28}}

:root[data-theme="dark"]{--c-kept:#9E7AC4;--c-cost:#BE7E28}

.exhead{padding:22px 18px 4px}

.exhead .t{font-size:21px;font-weight:700;letter-spacing:-.028em;line-height:1.12}

.exhead .s{font-size:13px;color:var(--ink-3);margin-top:3px;line-height:1.4}

.excard{
  width:100%;appearance:none;font-family:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:12px 13px;margin-bottom:9px;color:var(--ink);display:block;
}

.excard.live{border-color:var(--indigo);border-width:1.5px;background:var(--indigo-soft)}

.ex-top{display:flex;align-items:flex-start;gap:10px}

.ex-n{font-size:14.5px;font-weight:600;line-height:1.25;letter-spacing:-.015em;flex:1}

.ex-d{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.3}

.ex-figs{display:flex;gap:14px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft)}

.ex-f .k{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}

.ex-f .v{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-top:1px}

/* chart */
.chartwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 13px;margin-bottom:12px}

.chart-t{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}

.chart-s{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}

.legend{display:flex;gap:14px;margin:11px 0 13px}

.lg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);font-weight:500}

.lg i{width:10px;height:10px;border-radius:3px;flex:none;display:block}

.brow{margin-bottom:11px}

.brow-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}

.brow-n{font-size:11.5px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.brow-v{font-size:11.5px;font-weight:700;flex:none}

.btrack{display:flex;height:15px;gap:2px;align-items:stretch}

.bseg{border-radius:2px;transition:opacity .12s}

.bseg:first-child{border-radius:4px 2px 2px 4px}

.bseg:last-child{border-radius:2px 4px 4px 2px}

.bseg:hover{opacity:.78}

.cht{
  position:absolute;z-index:20;pointer-events:none;background:var(--ink);color:var(--ground);
  border-radius:9px;padding:8px 10px;font-size:11.5px;line-height:1.45;box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .12s;max-width:190px;
}

.cht.on{opacity:1}

.cht b{font-weight:700}

.dtable{width:100%;border-collapse:collapse;font-size:11.5px}

.dtable th{
  text-align:right;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:0 0 7px 8px;border-bottom:1px solid var(--line);
}

.dtable th:first-child,.dtable td:first-child{text-align:left;padding-left:0}

.dtable td{padding:8px 0 8px 8px;text-align:right;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}

.dtable td:first-child{color:var(--ink);font-weight:600}

.dtable tr:last-child td{border-bottom:0}

.dtable td.best{color:var(--good);font-weight:700}

.dtable td.worst{color:var(--bad);font-weight:700}

/* product picker inside an order */
.pickrow{
  margin:0 18px 14px;width:calc(100% - 36px);padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--surface-2);display:flex;align-items:center;
  gap:11px;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);
}

.pickrow .sheet-sw{width:38px;height:38px;border-radius:9px}

.pickrow .pk-t{font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.01em}

.pickrow .pk-s{font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:1px}

.pickrow .chev{margin-left:auto;flex:none;font-size:11.5px;font-weight:600;color:var(--indigo-ink)}

.pickrow.empty{border-style:dashed;border-color:var(--indigo);color:var(--indigo-ink)}

.plist{padding:0 18px 20px;display:flex;flex-direction:column;gap:7px}

.pitem{
  appearance:none;font-family:inherit;text-align:left;cursor:pointer;width:100%;
  padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;gap:11px;color:var(--ink);
}

.pitem[aria-pressed="true"]{border-color:var(--indigo);background:var(--indigo-soft)}

.pitem .sw2{width:34px;height:34px;border-radius:8px;flex:none}

.pitem .pi-t{font-size:13px;font-weight:600;line-height:1.25}

.pitem .pi-s{font-size:10.5px;color:var(--ink-3);line-height:1.25;margin-top:1px}

.pitem .pi-v{margin-left:auto;text-align:right;flex:none;font-size:12.5px;font-weight:600}

.pitem .pi-v span{display:block;font-size:10px;font-weight:500;color:var(--ink-3)}

.pempty{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}

/* order lifecycle */
.steps{display:flex;padding:6px 18px 16px}

.step-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}

.step-i::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:2px;background:var(--line)}

.step-i:first-child::before{display:none}

.step-i.done::before,.step-i.now::before{background:var(--good)}

.step-d{width:15px;height:15px;border-radius:50%;background:var(--line);z-index:1;flex:none}

.step-i.done .step-d{background:var(--good)}

.step-i.now .step-d{background:var(--indigo);box-shadow:0 0 0 4px var(--indigo-soft)}

.step-l{font-size:9.5px;font-weight:600;color:var(--ink-3);text-align:center;line-height:1.2}

.step-i.now .step-l{color:var(--indigo-ink)}

.step-i.done .step-l{color:var(--ink-2)}

.statuspill{
  font-size:10px;font-weight:600;padding:2.5px 7px;border-radius:6px;flex:none;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-soft);
}

.statuspill.make{background:var(--marigold-bg);color:var(--marigold);border-color:var(--marigold-line)}

.statuspill.done{background:var(--good-bg);color:var(--good);border-color:transparent}

.invbox{
  margin:0 18px 12px;padding:13px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);
}

.invbox .rline{padding:5px 0;font-size:13px}

.invbox .rline.total{font-size:14.5px}

/* start-of-day */
.setup-h{padding:20px 18px 6px}

.setup-h .ev{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.15}

.setup-h .dt{font-size:13px;color:var(--ink-3);margin-top:3px}

.check{display:flex;gap:11px;padding:11px 13px;align-items:flex-start}

.check + .check{border-top:1px solid var(--line-soft)}

.tick{
  width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--good-bg);margin-top:1px;
}

.tick svg{width:12px;height:12px;stroke:var(--good);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.tick.pending{background:var(--marigold-bg)}

.tick.pending svg{stroke:var(--marigold)}

.check-t{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}

.check-s{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:1px}

.check.warn .check-s{color:var(--marigold)}

.gobtn{
  width:100%;padding:16px;border-radius:13px;border:0;background:var(--indigo);
  color:var(--on-accent);font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
  margin-top:4px;
}

/* customer capture */
.field{padding:0 18px 10px}

.field input{
  width:100%;padding:12px 13px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--surface-2);font-family:inherit;font-size:15px;color:var(--ink);
}

.field input::placeholder{color:var(--ink-3)}

.consent{display:flex;gap:11px;padding:10px 18px;align-items:flex-start;cursor:pointer}

.consent input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--indigo);flex:none}

.consent-t{font-size:13.5px;font-weight:500;line-height:1.32}

.consent-s{font-size:11.5px;color:var(--ink-3);line-height:1.38;margin-top:1px}

.safe{
  margin:0 18px 4px;padding:9px 12px;border-radius:10px;background:var(--good-bg);
  color:var(--good);font-size:12.5px;font-weight:500;display:flex;gap:8px;align-items:center;
}

.safe svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.skiprow{display:grid;grid-template-columns:1fr 1.7fr;gap:9px;padding:14px 18px 20px}

.ghost{
  appearance:none;border:1.5px solid var(--line);background:none;color:var(--ink-2);
  font-family:inherit;font-size:15px;font-weight:600;border-radius:13px;padding:14px 0;cursor:pointer;
}

.skiprow .save{margin:0;width:100%;padding:14px 0}

/* toast */
.toast{
  position:absolute;left:14px;right:14px;top:56px;z-index:9;
  pointer-events:none;
  background:var(--ink);color:var(--ground);border-radius:12px;padding:11px 13px;
  display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;
  transform:translateY(-230%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:var(--shadow-lg);
}

.toast.on{transform:translateY(0)}

.toast svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* generic rows */
.rowcard{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  margin-bottom:9px;overflow:hidden;
}

.row{display:flex;align-items:center;gap:11px;padding:11px 13px}

.row + .row{border-top:1px solid var(--line-soft)}

.row-main{flex:1;min-width:0}

.row-t{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}

.row-s{font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:1px}

.row-v{font-size:14px;font-weight:600;text-align:right;flex:none}

.row-v .u{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500}

.banner{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:12px;
  font-size:12.5px;line-height:1.42;margin-bottom:12px;
}

.banner svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.banner.warn{background:var(--marigold-bg);border:1px solid var(--marigold-line);color:var(--marigold)}

.banner.bad{background:var(--bad-bg);color:var(--bad)}

.banner b{font-weight:700}

.sizegrid{display:flex;gap:6px;flex-wrap:wrap;padding:0 13px 12px}

.sq{
  border-radius:8px;padding:5px 0;width:52px;text-align:center;border:1px solid var(--line-soft);
  background:var(--surface-2);
}

.sq .a{font-size:11.5px;font-weight:700;display:block;letter-spacing:.01em}

.sq .b{font-size:10px;color:var(--ink-3);display:block}

.sq.zero{background:var(--bad-bg);border-color:transparent}

.sq.zero .a,.sq.zero .b{color:var(--bad)}

.sq.low{background:var(--marigold-bg);border-color:var(--marigold-line)}

.sq.low .a,.sq.low .b{color:var(--marigold)}

.recon{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px;margin-bottom:11px}

.recon h4{margin:0 0 11px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.rline{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13.5px;gap:12px}

.rline + .rline{border-top:1px dashed var(--line-soft)}

.rline .lab{color:var(--ink-2)}

.rline .val{font-weight:600}

.rline.total{border-top:1.5px solid var(--line);margin-top:5px;padding-top:10px;font-size:15px}

.rline.total .val{font-weight:700}

.delta{font-size:11.5px;padding:2px 7px;border-radius:6px;font-weight:600}

.delta.ok{background:var(--good-bg);color:var(--good)}

.delta.off{background:var(--bad-bg);color:var(--bad)}

.stat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:13px}

.stat .k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.stat .v{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-top:4px;line-height:1.05}

.stat .d{font-size:11.5px;color:var(--ink-3);margin-top:3px}

.stat .v.pos{color:var(--good)}

.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}

.bars{display:flex;flex-direction:column;gap:9px;padding:2px 0}

.bar-r{display:flex;align-items:center;gap:9px;font-size:12px}

.bar-n{width:88px;flex:none;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bar-t{flex:1;height:7px;background:var(--surface-2);border-radius:99px;overflow:hidden}

.bar-f{height:100%;background:var(--indigo);border-radius:99px}

.bar-v{width:26px;text-align:right;flex:none;font-weight:600;font-size:11.5px}

.addbtn{
  width:100%;padding:11px;border-radius:11px;border:1.5px dashed var(--line);
  background:none;color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:11px;
}

.addbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.h5{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 9px}

.h5:first-child{margin-top:2px}

.tagpill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;flex:none;letter-spacing:.01em}

.tagpill.cash{background:var(--good-bg);color:var(--good)}

.tagpill.upi{background:var(--indigo-soft);color:var(--indigo-ink)}

.tagpill.pend{background:var(--marigold-bg);color:var(--marigold)}

.tagpill.itc{background:var(--indigo-soft);color:var(--indigo-ink)}

.tagpill.noitc{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line-soft)}

/* ---------- notes column ---------- */
.notes{display:flex;flex-direction:column;gap:2px;padding-top:4px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═════════════════════════════════════════════════════════════
   APP SHELL — the prototype lived inside a phone drawn on a web
   page. This is the real thing, so it fills the actual phone.
   ═════════════════════════════════════════════════════════════ */
html,body{height:100%}
body{
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
.app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  background:var(--surface);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
/* On a desktop browser, sit the app in a phone-shaped column so it is
   testable without a phone. On a phone this does nothing. */
@media (min-width:560px) and (min-height:640px){
  body{background:var(--ground);display:flex;align-items:center;justify-content:center}
  .app{
    position:relative;inset:auto;width:414px;height:min(880px,94vh);
    border:1px solid var(--line);border-radius:26px;overflow:hidden;
    box-shadow:var(--shadow-lg);
  }
}
.screen{padding-bottom:8px}
.tabbar{padding-bottom:max(4px,env(safe-area-inset-bottom))}

/* the thin bar that says whether the server answered */
.status.offline .dot{background:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.status.busy   .dot{background:var(--warn);box-shadow:0 0 0 3px var(--marigold-bg)}

/* a full-screen block for the first load and for a hard failure */
.boot{
  position:absolute;inset:0;z-index:40;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:32px;text-align:center;
}
/* display:flex above beats the browser's own rule for [hidden], so without
   this the loading panel turns invisible AND keeps swallowing every tap. */
[hidden]{display:none!important}

/* These carry their own font size and line height, so they have to stack.
   Left inline they run into each other: "Catalogue loaded7 designs, with..." */
.check-t,.check-s,.p-n,.p-s,.consent-t,.consent-s,.e-t,.e-s{display:block}
.boot img{height:54px;width:auto;opacity:.92}
.boot .bt{font-size:15px;font-weight:600;letter-spacing:-.015em}
.boot .bs{font-size:13px;color:var(--ink-3);line-height:1.5;max-width:34ch}
.boot button{
  appearance:none;border:0;background:var(--indigo);color:var(--on-accent);
  font-family:inherit;font-size:14.5px;font-weight:600;padding:11px 20px;
  border-radius:11px;cursor:pointer;
}
.spin{
  width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);
  border-top-color:var(--indigo);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* a queued or failed write, shown honestly rather than hidden */
.retry{
  margin:0 16px 10px;padding:10px 12px;border-radius:11px;
  background:var(--bad-bg);color:var(--bad);font-size:12.5px;line-height:1.45;
  display:flex;gap:9px;align-items:flex-start;
}
.retry button{
  appearance:none;border:0;background:var(--bad);color:#fff;font-family:inherit;
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;
  margin-left:auto;flex:none;
}

/* "not built yet" panels, so an unfinished tab says so plainly */
.soon{padding:38px 22px;text-align:center}
.soon .st{font-size:15px;font-weight:600;letter-spacing:-.015em}
.soon .ss{font-size:13px;color:var(--ink-3);line-height:1.55;margin-top:7px;max-width:32ch;margin-inline:auto}


/* The invoice preview: a 640px document shown whole and scaled to the phone,
   rather than a reflowed approximation of one. The scale itself is set in
   app.js from the real width, because guessing it in CSS is how you end up
   with a document that is almost the right size. */
.invframe{
  border-top:1px solid var(--line);background:#fff;
  overflow:hidden;height:62vh;position:relative;
}
.invframe iframe{
  position:absolute;top:0;left:0;border:0;background:#fff;
  width:660px;height:1500px;transform-origin:top left;
}