body{margin:0}
/* ---------- frame ---------- */
.hc{
  --bg:#f7f7f7;--sf:#fff;--hv:#f7f7f7;--fill:#f2f2f2;--fill-hv:#ebebeb;--bd:#e3e3e3;--bd2:#ededed;--hd:var(--bg);--hd-bd:var(--fill-hv);
  --tx:#101010;--tx2:#4a4a4a;--tx3:#616161;--dis:#a6a6a6;--link:#1650d0;--focus:#5083f0;--ai:#7854f6;--ai-tx:#5b3bdc;--ai-bg:#f1edfe;
  --olive:#6d7357;--olive-hv:#626849;--olive-act:#565c42;--olive-ink:#525936;--olive-bg:#eef0e6;
  --crit:#8e1f0b;--crit-bg:#ffd0cc;--crit-tx:#360200;--late:#8a3b00;
  --r-sm:6px;--r:8px;--r-lg:12px;
  --card:0 0 0 1px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --raised:0 0 0 1px rgba(0,0,0,.08),0 4px 12px -2px rgba(0,0,0,.12),0 12px 32px -8px rgba(0,0,0,.16);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;line-height:1.45;font-weight:450;
  font-variant-numeric:tabular-nums;
  color:var(--tx);background:var(--bg);
  position:relative;height:100vh;height:100dvh;min-height:560px;display:flex;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.hc *,.hc *::before,.hc *::after{box-sizing:border-box}
.hc [hidden]{display:none!important}
.hc button,.hc input,.hc select,.hc textarea{font:inherit;color:inherit}
.hc button{cursor:pointer;background:none;border:0;padding:0}
.hc a{color:var(--link);text-decoration:none}
.hc a:hover{text-decoration:underline}
.hc :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.hc .nv:focus-visible,.hc .tab:focus-visible,.hc .chip:focus-visible,.hc .pop .pi:focus-visible,.hc .ai .ri:focus-visible,.hc .met:focus-visible,.hc tbody tr:focus-visible{outline-offset:-2px}
.hc .num{font-variant-numeric:tabular-nums}
.hc .ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
.hc .ic svg{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hc .ic.fill svg{fill:currentColor;stroke:none}
.hc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc .mut{color:var(--tx3)}
.hc .sec{color:var(--tx2)}
.hc .sm{font-size:12px}
.hc .crit{color:var(--crit);font-weight:550}
.hc .late-tx{color:var(--late);font-weight:550}
.hc ::selection{background:#dbe7ff}
.hc .m-only,.hc .card .ch.m-only{display:none}

/* ---------- buttons ---------- */
.hc .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r);
  font-size:12px;font-weight:550;line-height:1;white-space:nowrap;background:var(--sf);color:var(--tx);
  border:1px solid #e3e3e3;border-bottom-color:#b5b5b5;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:background .1s,box-shadow .1s}
.hc .btn:hover{background:#fafafa}
.hc .btn:active{background:var(--fill);box-shadow:inset 0 1px 1px rgba(0,0,0,.08)}
.hc .btn.pri{background:var(--olive);color:#fff;border-color:var(--olive);border-bottom-color:#4b5038;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.28),0 1px 0 rgba(0,0,0,.06)}
.hc .btn.pri:hover{background:var(--olive-hv)}
.hc .btn.pri:active{background:var(--olive-act)}
.hc .btn.ghost{border-color:transparent;box-shadow:none;background:transparent}
.hc .btn.ghost:hover{background:var(--fill)}
.hc .btn.plain{border-color:transparent;box-shadow:none;background:transparent;color:var(--link)}
.hc .btn.plain:hover{background:var(--fill);text-decoration:none}
.hc .btn.sm{height:28px;padding:0 10px}
.hc .btn .ic{width:14px;height:14px}
.hc .btn.icon{width:28px;padding:0}
.hc .btn:disabled{opacity:.45;cursor:default}
.hc .btn.done{background:var(--fill);color:var(--tx2);border-color:transparent;box-shadow:none;cursor:default;opacity:1}
.hc .btn.done .ic{color:#0f6b2e}
.hc .btn.wait{background:var(--sf);color:var(--tx3);border-style:dashed;border-color:#c9c9c9;box-shadow:none;cursor:default;opacity:1}

/* ---------- pills ---------- */
.hc .pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 7px;border-radius:999px;font-size:12px;font-weight:550;white-space:nowrap;line-height:1}
.hc .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.hc .pill.ring::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.hc .pill.half::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.hc .pill.nodot::before{display:none}
.hc .pill.neutral{background:var(--fill);color:var(--tx)}
.hc .pill.success{background:#e8fcd9;color:#0f2400}
.hc .pill.success.strong{background:#b3f782}
.hc .pill.warning{background:#ffeddb;color:#381600}
.hc .pill.late{background:#ffbf80;color:#381600}
.hc .pill.caution{background:#ffe45c;color:#312500}
.hc .pill.critical{background:var(--crit-bg);color:var(--crit-tx)}
.hc .pill.info{background:#8ce1f8;color:#002c38}
.hc .pill.olive{background:var(--olive-bg);color:var(--olive-ink)}

/* ---------- sidebar ---------- */
.hc .sb{width:232px;flex:none;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:16px 10px 12px;position:relative;z-index:30;transition:transform .2s cubic-bezier(.25,.1,.25,1)}
.hc .brand{display:flex;align-items:center;padding:4px 8px 16px 10px;text-decoration:none;color:var(--tx);min-height:44px}
.hc .brand:hover{text-decoration:none}
.hc .brand .nm{font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1;color:var(--tx);white-space:nowrap}
.hc .brand .nm-rail{display:none;font-size:18px;font-weight:650;line-height:1;color:var(--tx)}
.hc .sb nav{flex:1;display:flex;flex-direction:column;gap:16px;overflow:auto}
.hc .grp{display:flex;flex-direction:column;gap:2px}
.hc .grp h4{margin:0 0 4px;padding:0 10px;font-size:12px;font-weight:550;color:var(--tx3);text-transform:none;letter-spacing:.01em}
.hc .nv{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;border-radius:var(--r);color:var(--tx2);font-weight:500;width:100%;text-align:left;position:relative}
.hc .nv .ic{color:var(--tx2)}
.hc .nv:hover{background:var(--hv);color:var(--tx)}
.hc .nv[aria-current="page"]{background:var(--olive);color:#fff;font-weight:600}
.hc .nv[aria-current="page"] .ic{color:#fff}
.hc .nv .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .cnt{min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:var(--fill-hv);color:var(--tx);font-size:12px;font-weight:600;display:grid;place-items:center;line-height:1}
.hc .cnt.olive{background:var(--olive-bg);color:var(--olive-ink)}
.hc .nv[aria-current="page"] .cnt{background:#fff;color:var(--olive-ink)}
.hc .cnt:empty{display:none}
.hc .sb-foot{margin-top:10px;position:relative} /* the account chip alone: the nav's free space is what sets it apart */
.hc .chip{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px;border-radius:var(--r);width:100%;text-align:left}
.hc .chip:hover{background:var(--hv)}
.hc .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;background:var(--fill-hv);color:var(--tx)}
.hc .av.lg{width:36px;height:36px;font-size:13px}
.hc .av.olive{background:var(--olive-bg);color:var(--olive-ink)}
.hc .chip .who{flex:1;min-width:0;line-height:1.25}
.hc .chip .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .chip .who span{font-size:12px;color:var(--tx3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .pop{position:absolute;background:var(--sf);border-radius:var(--r-lg);box-shadow:var(--raised);padding:6px;min-width:220px;z-index:80}
.hc .pop .pi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r);font-weight:500;color:var(--tx)}
.hc .pop .pi:hover{background:var(--hv)}
.hc .pop .pi[aria-checked="true"]{background:var(--fill);font-weight:600}
.hc .pop .pi .ic{color:var(--tx2)}
.hc .pop hr{border:0;border-top:1px solid var(--bd2);margin:6px 0}
.hc .pop h5{margin:4px 10px 6px;font-size:12px;font-weight:550;color:var(--tx3)}
.hc .pop label.pi{cursor:pointer}
.hc .pop input[type=checkbox]{width:16px;height:16px;accent-color:var(--olive);margin:0}
.hc .chip-pop{bottom:48px;left:8px;right:auto;min-width:240px}

/* ---------- content ---------- */
.hc .ct{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}
.hc .mn{flex:1;min-height:0;overflow:auto;position:relative}
.hc .wrap{max-width:1240px;margin:0 auto;padding:20px 24px 100px}
.hc .wrap.wide{max-width:none} /* list pages fill the window, as Shopify's index pages do; settings, suppliers and the order page stay at a reading width */
@media (min-width:1600px){.hc .wide td.items{max-width:360px}} /* wide screens give the item names room instead of more blank space */
.hc .topbar{display:none}
.hc .pv-banner{display:flex;align-items:center;gap:10px;background:#eaf4ff;color:#00527c;border-bottom:1px solid #b4d9f7;padding:8px 24px;font-weight:500;flex:none}
.hc .pv-banner .ic{color:#00527c}
.hc .pv-banner .btn{margin-left:auto}
.hc .ph{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.hc .ph h1{margin:0;font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.hc .ph .sub{color:var(--tx3);margin-top:2px}
.hc .ph .crumb{margin-bottom:2px} /* the way back to the page this one lives under (Suppliers sits under Settings): the order page's own crumb part */
.hc .ph .acts{margin-left:auto;display:flex;gap:8px;align-items:center;align-self:flex-end} /* on the title's line, also under a crumb */
.hc .view{display:none}
.hc .view.on{display:block}

/* cards */
.hc .card{background:var(--sf);border-radius:var(--r-lg);box-shadow:var(--card)}
.hc .card .ch{display:flex;align-items:center;gap:10px;padding:16px 16px 0}
.hc .card .ch>.btn.sm{margin-block:-4px} /* Invite, Manage, Track: the button keeps its size, and its header stays as tall as one with none */
.hc .card .ch h3{margin:0;font-size:14px;font-weight:650;flex:1;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.hc .card .ch .hint{font-size:12px;color:var(--tx3)}
.hc .card .cb{padding:12px 16px 16px}
.hc .card .cf{padding:10px 16px 14px;border-top:1px solid var(--bd2);display:flex;align-items:center;gap:10px}

/* highlights strip (the metrics) */
.hc .hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px;overflow:hidden}
.hc .met{display:flex;align-items:flex-start;gap:8px;padding:16px 16px 12px;text-align:left;min-height:84px;border-left:1px solid var(--bd2);transition:background .1s;color:inherit}
.hc .met:first-child{border-left:0}
.hc .met:hover{background:var(--hv)}
.hc .met>div{flex:0 1 auto;min-width:0} /* the text takes its own width, so the sparkline sits beside its number at 2560 as at 1440 (Seth, 2026-10-29) */
.hc .met .k{font-size:12px;font-weight:550;color:var(--tx2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .met .v{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.2;margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hc .met .v b{font-weight:650}
.hc .met .v span{font-size:12px;font-weight:450;color:var(--tx3);letter-spacing:0} /* wraps under the number rather than cut off */
.hc .met.late .v b{color:var(--crit)} /* the number carries the warning; the sentence under it stays gray, as Shopify's deltas do */
.hc .met svg{width:56px;height:24px;flex:none;margin-top:16px}
.hc .met svg path{fill:none;stroke:#8a8a8a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hc .met.late svg path{stroke:#c2590f}

/* orders card */
/* The view strip is one row, as Shopify's admin orders list (Seth, 2026-10-30, "merge these"): the views at the left as underline tabs the row's 44px tall, the tools at the right as 28px controls, the row's hairline under both. The active view has no fill: its 2px underline sits on that hairline, as Shopify's tabs do, and More is one more tab in the same row with a small chevron (Seth, 2026-10-30, "put the more dropdown inline with the other options", "underline it").
   The views show as many as fit in full; on the desk the rest sit in More, and on the phone the pills wrap to a second line, so no view is ever hidden past an edge or behind a count (Seth, 2026-10-30, "menu items never get hidden"). The active view always shows: an overflow view swaps in and the last visible one goes to More. All stays first. */
.hc .listcard .strip{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-bottom:1px solid var(--bd2)}
.hc .tabs{flex:1;min-width:0;align-self:stretch;display:flex;align-items:stretch;gap:4px;overflow:hidden}
.hc .tab{display:flex;flex:none;align-items:center;gap:6px;padding:2px 10px 0;border-bottom:2px solid transparent;color:var(--tx2);font-weight:500;white-space:nowrap} /* 2px on top balances the 2px underline, so the label sits centered in the row */
.hc .tab[hidden]{display:none} /* an overflow view: listed in More */
.hc .tab:hover{border-bottom-color:var(--fill-hv)}
.hc .tab[aria-selected="true"]{color:var(--tx);font-weight:600;border-bottom-color:var(--tx)}
.hc .tab.more{gap:4px}
.hc .tab.more .ic{width:12px;height:12px;margin-right:-2px}
.hc .tab .cnt{background:var(--fill)}
.hc .tab[aria-selected="true"] .cnt{background:var(--fill-hv)}
.hc .tab .cnt.late{background:var(--crit-bg);color:var(--crit-tx)}
.hc .tab .cnt.olive{background:var(--olive-bg);color:var(--olive-ink)}
.hc .tools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
@media (min-width:701px){.hc:not(.searching) #orders-card .tools{min-width:210px;justify-content:flex-end}} /* Cancel 66 + 8 + four 28px icons and their gaps: the row holds Cancel's width at rest, so pressing Select never sends a view to More */
.hc .strip .btn.icon .ic{width:16px;height:16px}
.hc .listcard .tools .srch,.hc .listcard .tools .sp{display:none} /* the search icon opens its field over the views, Shopify's own; the views take the free space, so the spacer has no job */
.hc.searching .listcard .tabs,.hc.searching .listcard .tools>:not(.srch):not(.qcancel){display:none} /* while the search is in use it takes the row, with Cancel */
.hc.searching .listcard .tools{flex:1;min-width:0}
.hc.searching .listcard .tools .srch{display:flex}
.hc.searching .qcancel{display:inline-flex;align-items:center;height:28px;padding:0 8px;border-radius:var(--r);color:var(--link);font-weight:550}
.hc.searching .qcancel:hover{background:var(--fill)}
.hc .srch{flex:1;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--r);background:var(--sf);box-shadow:inset 0 0 0 1px #d6d6d6;min-width:0}
.hc .srch:focus-within{box-shadow:inset 0 0 0 2px var(--focus)}
.hc .srch .ic{color:var(--tx2)}
.hc .srch input{flex:1;border:0;background:none;outline:0;min-width:0;height:100%}
.hc .srch input::placeholder{color:var(--tx3)}
.hc .tools .sp{flex:1}
.hc .tools .count{color:var(--tx3);font-size:12px;white-space:nowrap}
.hc .tw{overflow-x:auto;overflow-y:visible}
.hc table{width:100%;border-collapse:collapse;font-size:13px}
.hc thead th{position:sticky;top:0;z-index:1;background:var(--hd);text-align:left;font-size:12px;font-weight:550;color:var(--tx2);padding:0 6px;height:40px;border-top:1px solid var(--bd2);border-bottom:1px solid var(--hd-bd);white-space:nowrap} /* the header band, a step off the white rows, as Shopify's index tables */
.hc thead th:first-child,.hc tbody td:first-child{padding-left:16px}
.hc thead th:last-child,.hc tbody td:last-child{padding-right:12px}
.hc th.act,.hc td.act{width:112px} /* 16 pad, one 88px button, 8 gap: the longest verb (Mark paid, 84px with Shopify's 12px padding) plus 4, every row the same size, so the column reads as one control */
.hc th.menu,.hc td.menu{width:44px}
.hc th button.sort{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;border-radius:var(--r-sm);padding:2px 4px;margin:0 -4px}
.hc th button.sort:hover{background:var(--fill-hv);color:var(--tx)}
.hc th button.sort .ic{width:12px;height:12px;opacity:0;transition:opacity .1s}
.hc th button.sort:hover .ic,.hc th button.sort:focus-visible .ic{opacity:.6}
.hc th[aria-sort] button.sort{color:var(--tx)}
.hc th[aria-sort] button.sort .ic{opacity:1}
.hc th[aria-sort="descending"] button.sort .ic{transform:rotate(180deg)}
.hc tbody tr{border-bottom:1px solid var(--bd2);transition:background .1s}
.hc tbody tr:last-child{border-bottom:0}
.hc tbody tr:hover{background:var(--hv)}
.hc.kb tbody tr[aria-selected="true"]{background:#f4f7ff}
.hc tbody tr[data-id]{cursor:pointer}
.hc tbody tr.done td{color:var(--tx3)}
.hc tbody td{padding:9px 6px;height:56px;vertical-align:middle}
.hc td .l2{display:block;font-size:12px;color:var(--tx3);margin-top:1px;white-space:nowrap}
.hc td .l2.crit{color:var(--crit);font-weight:550}
.hc td .ord{font-weight:450;font-size:12px;color:var(--tx2);white-space:nowrap} /* Seth 2026-10-29: order numbers regular and a step smaller, so the customer leads */
.hc .ono{font-size:12px;font-weight:450;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.hc td .ord:hover{text-decoration:underline}
/* the Orders table scrolls inside its card once the chosen columns outgrow it; Next action and Order stay pinned (sticky, inside .tw), the page never scrolls sideways */
.hc #tbl{border-collapse:separate;border-spacing:0;--pin:112px}
.hc #tbl tbody tr{border-bottom:0}
.hc #tbl tbody td{border-bottom:1px solid var(--bd2)}
.hc #tbl tbody tr:last-child td{border-bottom:0}
.hc #tbl th.act,.hc #tbl td.act{position:sticky;left:0;z-index:2;background:var(--sf)}
.hc #tbl th.ord,.hc #tbl td.ord{position:sticky;left:var(--pin);z-index:2;background:var(--sf)}
.hc #tbl thead th.act,.hc #tbl thead th.ord{z-index:3}
.hc #tbl td.unpin{position:static}.hc #tbl th.unpin{left:auto} /* moved away from the left edge: an ordinary column, its head still stuck to the top */
.hc #tbl thead th.act,.hc #tbl thead th.ord,.hc #tbl thead th.menu,.hc #tbl thead th.sel{background:var(--hd)} /* the pinned heads keep the band */
.hc #tbl tbody tr:hover td.act,.hc #tbl tbody tr:hover td.ord{background:var(--hv)}
.hc.kb #tbl tbody tr[aria-selected="true"] td.act,.hc.kb #tbl tbody tr[aria-selected="true"] td.ord{background:#f4f7ff}
.hc #tbl td.pin-end::after,.hc #tbl th.pin-end::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;pointer-events:none;transition:background .1s,box-shadow .1s}
.hc .tw.scrolled td.pin-end::after,.hc .tw.scrolled th.pin-end::after{background:var(--bd);box-shadow:6px 0 10px -4px rgba(0,0,0,.14)} /* once the rest has scrolled under, the pinned pair shows a hairline and a soft edge, as Shopify's index tables do */
.hc #tbl th.menu,.hc #tbl td.menu{position:sticky;right:0;z-index:2;background:var(--sf)} /* the row menu pins to the right edge, so it is reachable without scrolling the table */
.hc #tbl thead th.menu{z-index:3}
.hc #tbl tbody tr:hover td.menu{background:var(--hv)}
.hc.kb #tbl tbody tr[aria-selected="true"] td.menu{background:#f4f7ff}
.hc #tbl td.menu::before,.hc #tbl th.menu::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;pointer-events:none;transition:background .1s,box-shadow .1s}
.hc .tw.more td.menu::before,.hc .tw.more th.menu::before{background:var(--bd);box-shadow:-6px 0 10px -4px rgba(0,0,0,.14)} /* and shows an edge while there is more to the right */
.hc #tbl td .tag{height:22px;margin-right:4px}
.hc #tbl td.nowrap{white-space:nowrap} /* a name or a date never breaks into a second line; the table widens and scrolls instead, so every row stays one height */
.hc td.items{max-width:180px}
/* the supplier cell is a control: click to pick or switch; plain text in Ero's view and on closed orders */
.hc .supbtn{text-align:left;color:inherit;font:inherit;border-radius:var(--r);padding:4px 6px;margin:-4px -6px;max-width:calc(100% + 12px);transition:background .1s}
.hc .supbtn:hover{background:var(--fill)}
.hc .supbtn .chev{color:var(--tx3);flex:none;opacity:.75}
.hc .supbtn:focus-visible .chev,.hc .supbtn[aria-expanded="true"] .chev{opacity:1;color:var(--tx)}
.hc .supline .supbtn{align-items:center}
.hc #tbl .supbtn{width:calc(100% + 12px)}
.hc #tbl .supbtn .chev{margin-left:auto} /* one chevron column, not one per name length */
.hc .pop .pi[aria-selected="true"]{background:var(--fill);font-weight:600}
.hc .pop .pi .av{width:26px;height:26px;font-size:12px}
.hc .pop .pi .av.none{background:transparent;box-shadow:inset 0 0 0 1.5px #c9c9c9;color:var(--tx3)}
.hc .pop .pi .l2{display:block;font-size:12px;color:var(--tx3);font-weight:450;margin-top:1px}
.hc .pop .pi .ck{margin-left:auto;color:var(--olive-ink)}
.hc .pop .confirm{padding:6px 10px 8px;max-width:300px}
.hc .pop .confirm p{margin:0 0 10px;line-height:1.45}
.hc .pop .confirm .acts{display:flex;gap:8px}
/* Edit columns: every column, a checkbox to show it, a handle to move it; one list per view */
.hc .colpop{min-width:264px}
.hc .colpop .list{max-height:min(560px,calc(100vh - 350px));overflow:auto;margin:0 -6px;padding:0 6px}
.hc .colrow{display:flex;align-items:center;gap:2px;border-radius:var(--r)}
.hc .colrow .pi{flex:1;padding:6px 8px 6px 4px;min-height:32px}
.hc .colrow .grip{width:28px;height:32px;display:grid;place-items:center;color:#8a8a8a;border-radius:var(--r-sm);cursor:grab;flex:none}
.hc .colrow .grip:hover{background:var(--fill)}
.hc .colrow .grip.off{visibility:hidden}
.hc .colrow.dragging{opacity:.4}
/* Select mode: a checkbox at the start of each row, and the bulk bar over the column heads while anything is ticked, as Shopify's index tables do; on the phone the bar sits above the tab bar */
.hc th.sel,.hc td.sel{width:40px;padding-right:0}
.hc th.sel input,.hc td.sel input{width:16px;height:16px;accent-color:var(--olive);margin:0;display:block;cursor:pointer}
.hc #tbl th.sel,.hc #tbl td.sel{position:sticky;left:0;z-index:2;background:var(--sf)}
.hc #tbl thead th.sel{z-index:3}
.hc #tbl th.act,.hc #tbl td.act{left:var(--selw,0px)}
.hc #tbl th.ord,.hc #tbl td.ord{left:calc(var(--selw,0px) + var(--pin))}
.hc.selecting #tbl th.act,.hc.selecting #tbl td.act{width:100px} /* the 16px left pad moved to the checkbox column */
.hc #tbl tbody tr.chk td,.hc #tbl tbody tr.chk:hover td,.hc.kb #tbl tbody tr.chk[aria-selected="true"] td{background:var(--olive-bg)}
.hc.has-sel #thead tr{visibility:hidden} /* the bar covers the heads; hidden, they leave the Tab order and still hold the column widths */
.hc .bulk{position:sticky;top:0;z-index:4;height:40px;margin-bottom:-40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--hd);border-top:1px solid var(--bd2);border-bottom:1px solid var(--hd-bd)} /* the same band as the heads it covers, so ticking a row changes the words, not the strip */
.hc .bulk .selall{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;cursor:pointer;margin-right:4px;flex:none}
.hc .bulk .selall input{width:16px;height:16px;accent-color:var(--olive);margin:0}
.hc .bulk .acts{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
.hc .bulk .btn:disabled,.hc .bulk-m .btn:disabled,.hc .pop .pi:disabled{opacity:1;color:var(--tx3);border-color:var(--bd2);border-bottom-color:var(--bd2);box-shadow:none;background:var(--sf);cursor:default} /* flat and gray, still readable; the reason is in the tooltip, or under the item on the phone */
.hc .pop .pi:disabled:hover{background:transparent}
.hc .bulk-m{display:none}
.hc .oc{position:relative}
.hc .selbox{display:grid;place-items:center;position:absolute;left:8px;top:50%;transform:translateY(-50%);width:44px;height:44px}
.hc .selbox input{width:22px;height:22px;accent-color:var(--olive);margin:0}
.hc .pop .tagform{padding:4px 10px 6px;min-width:220px}
.hc .pop .confirm .list{margin:0 0 10px;padding:0;list-style:none;font-size:12px;color:var(--tx2)}

.hc td.items .t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .supc{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hc .supc .av{width:26px;height:26px;font-size:12px}
.hc .supc .n{line-height:1.25}
.hc .supc .n span{display:block;font-size:12px;color:var(--tx3)}
.hc .supc .n span.crit{color:var(--crit);font-weight:550}
.hc .supc.none .av{background:transparent;box-shadow:inset 0 0 0 1.5px #c9c9c9;color:var(--tx3)}
.hc td.pay{white-space:nowrap}
.hc td.pay .amt{display:block;font-size:12px;color:var(--tx2);margin-top:3px;padding-left:2px}
.hc td.tot{text-align:right;font-weight:550;white-space:nowrap}
.hc th.tot{text-align:right}
.hc td.act .btn{width:88px;padding:0 12px}
.hc td.act .quiet{color:var(--tx3);font-size:12px;display:block;line-height:1.35} /* a status line wraps inside the column, never widens it */
.hc #tbl-ero td:nth-child(3) .l2{white-space:normal}
.hc td.menu{position:relative}
.hc .dots{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--tx2)}
.hc .dots:hover{background:var(--fill);color:var(--tx)}
.hc .row-pop{min-width:200px}
.hc .pager{display:flex;align-items:center;gap:6px;padding:10px 16px;border-top:1px solid var(--bd2)}
.hc .pager .mut{flex:1}
.hc .pager .pg{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--tx2);font-weight:550}
.hc .pager .pg:hover:not(:disabled){background:var(--fill);color:var(--tx)}
.hc .pager .pg:disabled{opacity:.35;cursor:default}
.hc .pager .pg[aria-current]{background:var(--fill);color:var(--tx)}
.hc .empty{padding:40px 16px;text-align:center;color:var(--tx3)}
.hc .empty b{display:block;color:var(--tx);font-weight:600;margin-bottom:4px}

/* phone list (hidden on desk): one card shape for every view. Name and number lead, the one button beside them, the next step under, then the facts the view's Card fields chose (status always), then the items */
.hc .cards{display:none;flex-direction:column}
.hc .ogrp-h{display:flex;align-items:center;gap:8px;padding:10px 16px 6px;font-size:13px;font-weight:650;color:var(--tx);background:var(--sf)}
.hc .oc{display:flex;flex-direction:column;gap:0;padding:12px 16px;border-top:1px solid var(--bd2);text-align:left;width:100%;color:inherit;cursor:pointer} /* 12 around, 4 inside a group, 8 between groups: identity, then the why, then status and dates */
.hc .oc .oh{display:flex;align-items:center;gap:10px}
.hc .oc .ohdr{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:44px;margin:-4px 0;text-align:left;border-radius:var(--r-sm);line-height:1.3;color:inherit}
.hc .oc .ohdr .cust{display:block;color:var(--tx);font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc .oc .ohdr .ono{display:block;font-size:13px;font-weight:450;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.hc .oc .oh>.btn{flex:none;height:44px;min-width:88px;padding:0 14px;font-size:14px}
.hc .oc .nx{font-size:14px;font-weight:450;color:var(--tx2);line-height:1.35;margin-top:4px} /* the why, as a sentence: the name is the card's one emphasis */
.hc .oc .nx.late{color:var(--late)}
.hc .oc .facts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--tx2);min-height:22px;margin-top:8px}
.hc .oc .facts .f .k{color:var(--tx3)}
.hc .oc .facts b{font-weight:500;color:var(--tx)}
.hc .oc .facts .supbtn{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-11px -6px;padding:0 6px;font-size:13px;color:var(--tx);white-space:nowrap}
.hc .oc .facts .tag{height:22px}
.hc .oc .r2{color:var(--tx3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.hc .short{display:none}
.hc .oc.done .ohdr .cust,.hc .oc.done .facts b{color:var(--tx2)}
.hc .olink{color:inherit;font:inherit;text-align:left}
.hc .olink:hover{text-decoration:underline}
.hc .ph .pmenu,.hc .ph .psel,.hc .tb-sel,.hc .pop-scrim,.hc .tb-title,.hc .qcancel,.hc .sb-x{display:none} /* phone-only: the page's ⋯ menu and its Select, the top bar's Cancel, the sheet scrim, the title in the top bar, the search Cancel */

/* ---------- order page (inside the app, over the content area) ---------- */
.hc .ov{position:absolute;inset:0;z-index:40;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.hc .ov-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.hc .ov-top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--bd);padding:10px 24px 12px;flex:none}
.hc .ov-top .inr{max-width:1240px;margin:0 auto}
.hc .card .ch .acts{display:flex;gap:8px;align-items:center}
.hc .pop .pi[aria-current="true"]{background:var(--fill);font-weight:600}
.hc #fpop .ponly{display:none} /* the phone's Select orders item and its rule; the desk keeps its Select button in the row */
.hc .hl.hl3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc .m-hide{display:inline}
.hc .ov-top .crumb,.hc .ph .crumb{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px 0 4px;margin-left:-6px;border-radius:var(--r);color:var(--tx2);font-weight:550;font-size:12px}
.hc .ov-top .crumb:hover,.hc .ph .crumb:hover{background:var(--fill);color:var(--tx);text-decoration:none}
.hc .ov-top .row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:4px}
.hc .ov-top h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:28px}
.hc .ov-top .meta{color:var(--tx3);font-size:12px;margin-top:2px}
.hc .ov-top .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hc .pn{display:inline-flex;border:1px solid #e3e3e3;border-bottom-color:#b5b5b5;border-radius:var(--r);background:var(--sf);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.hc .pn button{width:28px;height:26px;display:grid;place-items:center;color:var(--tx2)}
.hc .pn button:first-child{border-right:1px solid var(--bd2);border-radius:7px 0 0 7px}
.hc .pn button:last-child{border-radius:0 7px 7px 0}
.hc .pn button:hover{background:var(--fill);color:var(--tx)}
.hc .ov-body{max-width:1240px;width:100%;margin:0 auto;padding:20px 24px 100px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.hc .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.hc .steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 0 16px}
.hc .steps div{position:relative;padding-top:10px;font-size:12px;color:var(--tx2);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .steps div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:2px;background:var(--bd2)}
.hc .steps div.done::before{background:#4b8b3b}
.hc .steps div.now::before{background:var(--tx)}
.hc .steps div.now{color:var(--tx);font-weight:550}
.hc .steps div.late::before{background:#d8372b}
.hc .steps div.late{color:var(--crit);font-weight:550}
.hc .steps-cap{display:none}
.hc .status-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hc .status-line .next-big{font-weight:650;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.hc .status-line .next-big .ic{color:var(--olive-ink)}
.hc .status-line .silence{font-size:12px;color:var(--late);font-weight:550}
.hc .reminder{font-size:12px;color:var(--tx2);margin:4px 0 0}
.hc .supline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0 0;margin-top:16px;border-top:1px solid var(--bd2)}
.hc .supline .supc{white-space:normal;align-items:flex-start}
.hc .supline .supc .av{width:32px;height:32px;font-size:12px;margin-top:2px}
.hc .supline b{font-weight:600}
.hc .supline .s{font-size:12px;color:var(--tx2);display:block}
.hc .supline .acts{display:flex;gap:8px;flex-wrap:wrap}
.hc .inner{background:var(--sf);box-shadow:0 0 0 1px var(--bd2);border-radius:var(--r)}
.hc .inner .row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.hc .inner .row+.row{border-top:1px solid var(--bd2)}
.hc .inner .row .ic{color:var(--tx2)}
.hc .inner .row .k{font-size:12px;color:var(--tx2);white-space:nowrap;min-width:52px}
.hc .inner .row .v{color:var(--tx);min-width:0;overflow-wrap:anywhere}
.hc .item{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px}
.hc .item+.item{border-top:1px solid var(--bd2)}
.hc .thumb{width:40px;height:40px;border-radius:6px;background:linear-gradient(135deg,#cdb79a,#8f7256 55%,#5c3f2a);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.hc .thumb.oak{background:linear-gradient(135deg,#e6d2b1,#b48d5e 55%,#7b5a3a)}
.hc .thumb.sample{background:linear-gradient(135deg,#e3d9c8,#a9937a 55%,#6f573f)}
.hc .item .nm{font-weight:550}
.hc .item .var{font-size:12px;color:var(--tx2)}
.hc .item .qty,.hc .item .amt{white-space:nowrap}
.hc .item .qty{color:var(--tx2)}
.hc .item .amt{font-weight:550;min-width:72px;text-align:right}
.hc .money{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hc .money .half{min-width:0}
.hc .money .half h4{margin:0 0 8px;font-size:12px;font-weight:550;color:var(--tx2);display:flex;align-items:center;gap:8px}
.hc .money .half+.half{border-left:1px solid var(--bd2);padding-left:16px}
.hc .totals{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}
.hc .totals .k{color:var(--tx2)}
.hc .totals .v{text-align:right}
.hc .totals .tot{font-weight:650;color:var(--tx)}
.hc .pay-big{font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit;margin:0 0 4px}
.hc .pay-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--tx2);font-size:12px}
.hc .pay-act{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.hc .pay-note{margin:12px 0 0;font-size:12px;color:var(--tx2)}
.hc .fld{display:flex;flex-direction:column;gap:6px}
.hc .fld label,.hc .fld .flab{font-size:12px;font-weight:550;color:var(--tx2)}
.hc .in{height:32px;padding:0 10px;border:0;border-radius:var(--r);background:var(--sf);box-shadow:inset 0 0 0 1px #8a8a8a;outline:0;width:100%;min-width:0;transition:box-shadow .1s}
.hc .in:hover{box-shadow:inset 0 0 0 1px #616161}
.hc .in:focus{box-shadow:inset 0 0 0 1px #8a8a8a,0 0 0 2px var(--focus)}
.hc .in::placeholder{color:#6b6b6b}
.hc textarea.in{height:auto;min-height:72px;padding:8px 10px;resize:vertical;line-height:1.45}
.hc .ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.hc .trk{position:relative}
.hc .paste{display:none}
.hc .drop{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;border-radius:var(--r);border:1px dashed #8a8a8a;color:var(--tx2);font-size:12px;font-weight:550;background:var(--sf);width:100%}
.hc .drop:hover{background:var(--hv)}
.hc .sfold-b{display:flex;align-items:center;gap:6px;width:100%;min-height:32px;margin-top:10px;font-size:12px;font-weight:550;color:var(--link);text-align:left;border-radius:var(--r-sm)}
.hc .sfold-b .ic{width:16px;height:16px;transition:transform .15s}
.hc .sfold[data-folded] .sfold-b .ic{transform:rotate(-90deg)}
.hc .sfold[data-folded] .sfold-c{display:none}
.hc .fold-ico{display:none}
.hc .card>.cb:first-child{padding-top:16px} /* no header row above it */
.hc .cmt{display:flex;gap:10px;align-items:flex-start}
.hc .cmt .av{border-radius:var(--r);width:32px;height:32px}
.hc .cmt .box{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.hc .cmt .box .in{flex:1;min-width:0;min-height:36px;resize:none}
.hc .cmt .br{flex:none}
.hc .cmt .br .post:disabled{background:var(--fill);color:var(--tx3);border-color:transparent;box-shadow:none;opacity:1;cursor:default}
.hc .tl{list-style:none;margin:12px 0 0;padding:0 0 0 10px;position:relative}
.hc .tl::before{content:"";position:absolute;left:14px;top:10px;bottom:10px;width:1px;background:var(--bd)}
.hc .tl .day{font-size:12px;font-weight:550;color:var(--tx2);margin:12px 0 8px 22px;position:relative}
.hc .tl li.ev{display:flex;gap:12px;align-items:flex-start;padding:8px 0;position:relative}
.hc .tl li.ev::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sf);box-shadow:inset 0 0 0 2px #8a8a8a;margin-top:5px;flex:none;position:relative;z-index:1}
.hc .tl li.ev.k-me::before{background:#303030;box-shadow:inset 0 0 0 2px #303030}
.hc .tl li.ev.k-mail::before{box-shadow:inset 0 0 0 2px var(--link)}
.hc .tl li.ev.k-alert::before{background:#ffbf80;box-shadow:inset 0 0 0 2px #c2590f}
.hc .tl .txt{flex:1;min-width:0}
.hc .tl .txt q{display:block;margin-top:4px;padding:8px 10px;background:var(--fill);border-radius:var(--r);font-style:normal;quotes:none;color:var(--tx);white-space:pre-wrap;overflow-wrap:anywhere} /* a note keeps its line breaks, and a pasted link wraps instead of pushing the page sideways */
.hc .tl .when{font-size:12px;color:var(--tx3);white-space:nowrap}
.hc .cside{padding:16px}
.hc .cside+.cside{border-top:1px solid var(--bd2)}
.hc .cside h3{margin:0 0 8px;font-size:13px;font-weight:650;display:flex;align-items:center;gap:8px}
.hc .cside h3 .edit{margin-left:auto;width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--tx3)}
.hc .cside h3 .edit:hover{background:var(--fill);color:var(--tx)}
.hc .cside p{margin:0;color:var(--tx2);overflow-wrap:anywhere}
.hc .cside p+p{margin-top:2px}
.hc .cside .quiet{font-size:12px;color:var(--tx3);margin-top:8px}
.hc .tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-sm);background:var(--fill);font-size:12px;margin-right:4px}
.hc .m-next{display:none}
.hc .estep{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hc .estep .btn{height:36px;font-size:13px}
.hc .decline{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.hc .ero-pay{font-size:inherit;font-weight:inherit;letter-spacing:0;color:var(--tx);margin:0 0 2px}
.hc .ov-bar,.hc .ov-foot{display:none}

/* ---------- check-in dialog ---------- */
.hc .dlg-scrim{position:absolute;inset:0;z-index:76;background:rgba(16,16,16,.45);display:grid;place-items:start center;padding:48px 20px 20px;overflow:auto}
.hc .dlg{width:min(640px,100%);background:var(--sf);border-radius:var(--r-lg);box-shadow:var(--raised);display:flex;flex-direction:column;max-height:100%;overflow:hidden}
.hc .dlg .dh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd2)}
.hc .dlg .dh h3{margin:0;font-size:15px;font-weight:650;flex:1}
.hc .dlg .db{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.hc .dlg .df{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--bd2);background:var(--bg)}
.hc .dlg .df .cc{flex:1;font-size:12px;color:var(--tx3)}
.hc .mail{border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--bd);padding:12px 16px;font-size:12px;line-height:1.55;color:var(--tx2)}
.hc .mail .hd{display:grid;grid-template-columns:52px 1fr;gap:3px 8px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--bd)}
.hc .mail .hd span:nth-child(odd){color:var(--tx3)}
.hc .mail .hd span:nth-child(even){color:var(--tx)}
.hc .mail p{margin:0 0 8px}
.hc .mail .note-slot{color:var(--tx3);font-style:italic}
.hc .mail .note-slot.on{color:var(--tx);font-style:normal;background:#fff7d6;border-radius:4px;padding:1px 3px;display:inline-block}
.hc .mail .sig{color:var(--tx3);margin-top:10px}
.hc .mail .sig b{color:var(--tx);font-weight:550}
.hc .mail-fold{display:none}
.hc .check{display:flex;align-items:center;gap:10px;cursor:pointer}
.hc .check input{width:16px;height:16px;accent-color:var(--olive);margin:0}

/* ---------- toast ---------- */
.hc .toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);background:#1a1a1a;color:#fff;padding:10px 14px;border-radius:var(--r);box-shadow:var(--raised);z-index:90;display:flex;align-items:center;gap:12px;font-weight:500;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .15s,transform .15s,visibility 0s .15s;white-space:nowrap;max-width:calc(100% - 32px)}
.hc .toast.on{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible;transition:opacity .15s,transform .15s,visibility 0s}
.hc .toast.on button{pointer-events:auto} /* only Undo takes a tap; the rest of the toast lets taps through to the button under it */
.hc .toast button{color:#cfd8ff;font-weight:600}
.hc .toast button:hover{text-decoration:underline}

/* ---------- AI bar ---------- */
.hc .ai-dock{display:contents}
.hc .ai{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;width:min(620px,calc(100% - 48px))}
.hc .ai .panel{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--sf);border-radius:var(--r-lg);box-shadow:var(--raised);max-height:min(460px,calc(100vh - 120px));overflow:auto;padding:6px;display:none}
.hc .ai.open .panel{display:block}
.hc .ai .bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;border-radius:999px;background:var(--sf);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 6px 20px -4px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)}
.hc .ai.open .bar,.hc .ai .bar:focus-within{box-shadow:0 0 0 2px var(--ai),0 6px 20px -4px rgba(0,0,0,.18)}
.hc .ai .bar .spark{color:var(--ai)}
.hc .ai input{flex:1;border:0;outline:0;background:none;min-width:0;font-size:14px;height:100%}
.hc .ai input::placeholder{color:var(--tx3)}
.hc .ai kbd{font:inherit;font-size:12px;color:var(--tx3);background:var(--fill);border-radius:5px;padding:2px 6px;white-space:nowrap}
.hc .ai .send{width:28px;height:28px;border-radius:50%;background:var(--ai);color:#fff;display:grid;place-items:center;transition:background .1s}
.hc .ai .send:hover{background:#6a45ea}
.hc .ai .send:disabled{background:var(--fill-hv);color:var(--tx3);cursor:default}
.hc .ai .ai-close{display:none}
.hc .ai-sheet{display:contents} /* the desk's panel hangs on the pill; on the phone this wrapper is the sheet standing on the band */
.hc .ai .clr,.hc .ai .srchic{display:none} /* phone only: the clear button, and Ero's magnifier */
.hc .ai .g{padding:4px 0}
.hc .ai .g h5{margin:0;padding:6px 10px 4px;font-size:12px;font-weight:550;color:var(--tx3)}
.hc .ai .ri{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r);min-height:36px}
.hc .ai .ri:hover,.hc .ai .ri.k{background:var(--hv)}
.hc .ai .ri .ic{color:var(--tx2)}
.hc .ai .ri .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .ai .ri .t span{color:var(--tx3);font-size:12px;margin-left:6px}
.hc .ai .ri .t mark{background:none;color:inherit;font-weight:600}
.hc .ai .ri .pill{flex:none}
.hc .ai .ri .kh{font-size:12px;color:var(--tx3);flex:none}
.hc .ai .ri.ask{color:var(--ai-tx);font-weight:550;border-top:1px solid var(--bd2);border-radius:0 0 var(--r) var(--r);margin-top:4px}
.hc .ai .ri.ask .ic{color:var(--ai)}
.hc .ai .ans{margin:4px;padding:12px 16px;border-radius:var(--r);background:var(--ai-bg);color:#1f1545;display:flex;gap:10px;align-items:flex-start}
.hc .ai .ans .ic{color:var(--ai);margin-top:2px}
.hc .ai .ans .t{flex:1;min-width:0}
.hc .ai .ans .t b{font-weight:600}
.hc .ai .ans .t p{margin:0 0 8px;line-height:1.5}
.hc .ai .ans .t p:last-of-type{margin-bottom:0}
.hc .ai .ans .ab{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hc .ai .ans .ab .btn{height:30px}
.hc .ai .ans .cost{font-size:12px;color:#5b3bdc;margin-top:10px}
.hc .ai .hint{padding:8px 10px;font-size:12px;color:var(--tx3);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hc .ai .hint button{color:var(--link);font-weight:500}
.hc .ai .hint button:hover{text-decoration:underline}
.hc .ai .think{display:flex;gap:4px;padding:10px 14px}
.hc .ai .think i{width:6px;height:6px;border-radius:50%;background:var(--ai);animation:hc-blink 1s infinite}
.hc .ai .think i:nth-child(2){animation-delay:.2s}.hc .ai .think i:nth-child(3){animation-delay:.4s}
@keyframes hc-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- ero (supplier) view ---------- */
.hc[data-viewer="ero"] .j-only{display:none!important}
.hc[data-viewer="jethro"] .e-only{display:none!important}

/* ---------- payouts / suppliers / settings ---------- */
.hc .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.hc .sup-head{display:flex;align-items:center;gap:12px;padding:16px 16px 0}
.hc .sup-head .who{flex:1;min-width:0}
.hc .sup-head .who b{display:block;font-size:14px;font-weight:600}
.hc .sup-head .who span{color:var(--tx3);font-size:12px}
.hc .stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px 4px}
.hc .stat3 div{padding:10px 12px;border-radius:var(--r);background:var(--bg)}
.hc .stat3 b{display:block;font-size:18px;font-weight:650;letter-spacing:-.01em}
.hc .stat3 span{font-size:12px;color:var(--tx3)}
.hc .kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;align-items:baseline}
.hc .kv .k{color:var(--tx2);font-size:12px}
.hc .team{list-style:none;margin:0;padding:0}
.hc .team li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--bd2)}
.hc .team li:first-child{border-top:0}
.hc .team .who{flex:1;min-width:0}
.hc .team .who b{display:block;font-weight:550}
.hc .team .who span{font-size:12px;color:var(--tx3)}
.hc .tabbar{display:none}

/* ---------- the Orders table keeps whatever columns the view chose and scrolls inside its card (2026-10-29, Seth's columns ask); the Payouts and Ero tables, which have no column picker, still step columns out so they never scroll ---------- */
@media (max-width:1259px){
  .hc td.items{max-width:140px}
}
@media (max-width:1199px){
  .hc #tbl-pay th:nth-child(4),.hc #tbl-pay td.items{display:none}
}
@media (max-width:1100px){
  .hc #tbl-pay th:nth-child(5),.hc #tbl-pay td:nth-child(5){display:none} /* Payouts: the order status steps out; the payout state stays */
  .hc #tbl-ero th:nth-child(4),.hc #tbl-ero td:nth-child(4){display:none}
}
@media (max-width:1100px){
  .hc .ov-body{grid-template-columns:1fr}
  .hc .met svg{display:none}
}
@media (max-width:800px){
  .hc .wrap{padding-left:16px;padding-right:16px}
  .hc #tbl-pay th:nth-child(6),.hc #tbl-pay td:nth-child(6){display:none} /* the Next action button already says Owed or Approved */
  .hc #tbl-ero th:nth-child(7),.hc #tbl-ero td:nth-child(7){display:none}
}
/* ---------- 999: icon rail ---------- */
@media (max-width:999px){
  .hc .sb{width:64px;padding:12px 4px}
  .hc .sb nav{padding-top:4px;overflow-x:hidden} /* room for the count badge on the first icon; the nav scrolls only down */
  .hc .brand{justify-content:center;padding:4px 0 16px}
  .hc .brand .nm{display:none}.hc .brand .nm-rail{display:block} /* the rail keeps the H */
  .hc .grp h4{display:none}
  .hc .nv .lbl,.hc .chip .who{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hc .nv{justify-content:center;padding:0;width:48px;height:40px;margin:0 auto}
  .hc .nv .cnt{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;font-size:12px;padding:0 4px;box-shadow:0 0 0 2px var(--sf)}
  .hc .chip{justify-content:center;padding:0}
  .hc .chip>.ic{display:none}
}
/* ---------- 700: phone ---------- */
@media (max-width:700px){
  .hc{--dock:60px;min-height:0;font-size:14px;display:grid;grid-template-columns:100%;grid-template-rows:minmax(0,1fr) 60px} /* --dock: the search band above the tab bar, 8px + a 44px field + 8px */
  .hc.is-open{grid-template-rows:minmax(0,1fr)}
  .hc.is-open .tabbar{display:none}
  .hc .m-only{display:block}
  .hc span.m-only{display:inline}
  .hc .card .ch.m-only{display:flex}
  .hc .ov-body.ship-first .c-ship .save-act{display:none} /* the pinned foot is Save tracking */
  .hc .m-hide{display:none!important}
  .hc .hl.hl3{grid-template-columns:1fr 1fr}
  .hc .hl.hl3 .met:nth-child(3){grid-column:1 / -1;border-top:1px solid var(--bd2)}
  .hc .sm{font-size:13px}
  .hc input:not([type=checkbox]),.hc textarea,.hc select,.hc .in{font-size:16px} /* 16px stops iOS zooming the page on focus */
  .hc .pill{height:22px;font-size:13px}
  /* More: the sidebar rises as a sheet from the tab bar, as Shopify's More tab does */
  .hc .sb{position:absolute;top:auto;bottom:0;left:0;right:0;width:auto;max-height:86%;padding:10px 10px 12px;border-right:0;border-radius:16px 16px 0 0;transform:translateY(100%);box-shadow:none;z-index:78;visibility:hidden;transition:transform .22s cubic-bezier(.25,.1,.25,1),visibility 0s .22s}
  .hc .sb.open{transform:none;box-shadow:var(--raised);visibility:visible;transition:transform .22s cubic-bezier(.25,.1,.25,1)}
  .hc .sb>.brand{display:none} /* the top bar already carries the name */
  .hc .brand{justify-content:flex-start;padding:4px 8px 16px 10px}
  .hc .brand .nm{display:block}.hc .brand .nm-rail{display:none}
  .hc .grp h4,.hc .nv .lbl,.hc .chip .who{display:block;position:static;width:auto;height:auto;clip:auto}
  .hc .nv{justify-content:flex-start;padding:0 10px;width:100%;height:44px;margin:0;font-size:15px}
  .hc .nv .cnt{position:static;min-width:20px;height:18px;font-size:12px}
  .hc .chip{justify-content:flex-start;padding:0 8px}
  .hc .chip>.ic{display:inline-block}
  .hc .chip-pop{left:8px;right:8px;min-width:0}
  .hc .scrim{position:absolute;inset:0;z-index:77;background:rgba(16,16,16,.4)}
  .hc .ct{grid-row:1;min-height:0}
  .hc .topbar{display:flex;align-items:center;gap:8px;height:52px;padding:0 12px;background:var(--sf);border-bottom:1px solid var(--bd);flex:none;position:relative}
  .hc .topbar .brand{padding:0;flex:1;min-height:44px;transition:opacity .15s}
  .hc .topbar .av{width:32px;height:32px}
  .hc .tb-av{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-6px;border-radius:999px} /* the avatar is the account menu on the phone (Viewing as, Sign out), what the More sheet's chip held; 44px around the 32px circle */
  .hc .tb-av:focus-visible{outline-offset:-2px}
  /* the page title rises into the top bar once its large version scrolls away, as Shopify's app does */
  .hc .tb-title{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 6px));font-size:16px;font-weight:650;letter-spacing:-.01em;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
  .hc.tscroll .tb-title{opacity:1;transform:translate(-50%,-50%)}
  .hc.tscroll .topbar .brand{opacity:0}
  .hc .wrap{padding:12px 12px 24px}
  .hc .pv-banner{padding:8px 12px;font-size:13px;gap:8px}
  .hc .pv-banner .btn{min-height:44px}
  .hc .long{display:none}
  .hc .short{display:inline}
  .hc .ph{margin:0 0 12px;align-items:center}
  .hc .ph h1{font-size:24px;line-height:30px}
  .hc .ph .crumb{height:44px;margin:-10px 0 -4px -6px;padding:0 10px 0 4px;gap:2px;font-size:15px;color:var(--link)} /* the order page's Back: 44px for the thumb, its chevron in place of the desk's arrow */
  .hc .ph .crumb .ic{width:20px;height:20px}
  .hc .ph .crumb .ic:not(.m-only){display:none}
  .hc .ph .sub{font-size:13px}
  .hc .ph .acts{display:none} /* the page's actions (Create, Export, Print) sit in its ⋯ menu */
  .hc .ph .pmenu{display:grid;place-items:center;width:44px;height:44px;margin:-7px 0 -7px auto;align-self:flex-end;border-radius:var(--r);color:var(--tx2)}
  .hc .ph .pmenu:hover{background:var(--fill)}
  .hc.selecting .ph .psel{display:inline-flex;align-items:center;height:44px;padding:0 10px;margin:-7px 0 -7px auto;border-radius:var(--r);font-size:15px;font-weight:550;color:var(--link)} /* Select moved under Filter (Seth, 2026-10-30, "move under filter"): the first item of the Filter & views sheet. Only while selecting does Cancel take this spot beside the ⋯, so the way out is where Select used to be */
  .hc.selecting .ph .psel+.pmenu{margin-left:-4px}
  .hc .ph .psel:hover{background:var(--fill)}
  .hc.selecting.tscroll .tb-sel{display:inline-flex;align-items:center;height:44px;padding:0 10px;margin-right:-10px;border-radius:var(--r);font-size:15px;font-weight:550;color:var(--link)} /* once the header's Cancel has scrolled off, the top bar carries it, so select mode always has its way out on screen */
  .hc.selecting.tscroll .topbar .tb-av{display:none}
  .hc .tb-sel:hover{background:var(--fill)}
  .hc .tb-sel:focus-visible{outline-offset:-2px} /* it ends 2px from the screen's edge, so its ring sits inside it */
  .hc .hl{grid-template-columns:1fr 1fr;margin-bottom:12px}
  .hc .met{padding:10px 12px;min-height:44px;border-left:0}
  .hc .met .v{margin-top:2px;gap:6px}
  .hc .met:nth-child(2n){border-left:1px solid var(--bd2)}
  .hc .met:nth-child(n+3){border-top:1px solid var(--bd2)}
  .hc .met .v{font-size:20px}
  .hc .met .v span{font-size:13px}
  .hc .met svg{display:none}
  /* Orders on the phone: the four highlights are one short row, label over number, so the Needs-you list starts high */
  .hc #hl{grid-template-columns:repeat(4,auto)} /* each tile as wide as its words, the spare shared: With suppliers whole on one line at 360 */
  .hc #hl .met{padding:8px 10px;align-items:stretch;border-top:0;min-height:0}
  .hc #hl .met+.met{border-left:1px solid var(--bd2)}
  .hc #hl .met>div{display:flex;flex-direction:column;justify-content:space-between}
  .hc #hl .met .k{line-height:1.25} /* one line: With suppliers in full, To pay for the desk's Owed to suppliers */
  .hc #hl .met .v{margin-top:2px}
  .hc #hl .met .v span{display:none} /* the sentence under each number lives in the rows below */
  .hc .card .ch h3{font-size:15px}
  .hc .card .ch .hint{font-size:13px}
  /* the list card: one sticky strip over the cards. Every desk view is a pill at its left, All first, the active one kept in view; Filter and Sort stand at its right end as icons, and the pills wrap under them to the full width. The tools row itself is gone on the phone: the search is the band at the foot, Select is in the Filter & views sheet */
  .hc .listcard{display:flex;flex-direction:column}
  .hc .listcard .strip{display:flex;align-items:flex-start;gap:0;padding:0;border-bottom:0;order:0;position:sticky;top:0;z-index:3;background:var(--sf);box-shadow:0 1px 0 var(--bd2)}
  .hc .listcard .tabs{flex:1;min-width:0;display:block;padding:0 4px 0 12px;font-size:0;line-height:0} /* every view in full, wrapping to a second line rather than into a +N sheet (Seth, 2026-10-30, "menu items never get hidden"): two lines from 360 to 430, and the first screen keeps its 3 whole cards. font-size 0 drops the spaces between the inline tabs. The lines touch (44px each, no row gap), so the second line's underline sits on the strip's hairline and the first line's sits right under its own label */
  .hc #orders-card .tabs::before{content:"";float:right;width:104px;height:44px} /* Filter and Sort's place on the first line; the second line runs the full width */
  .hc .listcard .tabs .tab:not([hidden]){display:inline-flex;vertical-align:top;margin:0 4px 0 0}
  .hc #orders-card .tools{position:absolute;top:0;right:0} /* in the strip's top right corner, over the float above */
  .hc .tab{height:44px;min-width:44px;justify-content:center;padding:2px 10px 0;margin:0;font-size:14px;font-weight:500;color:var(--tx2)} /* the same underline tab as the desk, 44px tall for the thumb */
  .hc #fpop .ponly{display:flex} /* Select orders, the sheet's first item */
  .hc.selecting #fpop .ponly{display:none} /* while selecting, Cancel in the header is the way out */
  .hc .tab:hover{border-bottom-color:transparent} /* a tap leaves no hover underline behind */
  .hc .tab[aria-selected="true"]{color:var(--tx);font-weight:600;border-bottom-color:var(--tx)}
  .hc .listcard .bulk{order:2}
  .hc .listcard .cards{order:3}
  .hc .card:has(>.cards){margin-left:-12px;margin-right:-12px;border-radius:0;box-shadow:0 -1px 0 var(--bd2),0 1px 0 var(--bd2)} /* every list runs edge to edge on the phone, as Shopify's app does; the highlights above stay a card */
  .hc .listcard .tools{flex:none;padding:0 12px 0 0;gap:4px} /* in the strip: Filter and Sort alone, 44px each, Sort's icon under the page's ⋯ */
  .hc .srch{flex:1;width:auto;min-width:0;max-width:none;height:44px}
  .hc .tools .btn{height:44px;font-size:14px;padding:0 12px}
  .hc .tools .count{display:none}
  .hc .listcard .tools .srch,.hc .listcard .tools .qcancel,.hc .listcard .tools .sp{display:none} /* the search is the band above the tab bar, one field for the whole app */
  .hc .tools #selbtn,.hc .tools #qbtn,.hc .tools #eqbtn{display:none} /* the desk's Select (the phone's is in the Filter & views sheet) and its search icon (the band at the foot is the phone's search) */
  .hc.searching .listcard .tools .srch{display:none} /* the desk's in-row search never opens here */
  .hc #ero-card .tools{display:none} /* Ero's row held only the search, so his strip is pills alone */
  .hc .tools .btn .lbl,.hc .tools .btn .short,.hc .tools .btn .long{display:none} /* Filter & views, Sort and Card fields are icons on the phone; each sheet they open carries its name */
  .hc .tools #fbtn,.hc .tools #sbtn{width:44px;padding:0;border:0;box-shadow:none;background:none;color:var(--tx2)} /* bare icons, as tall as the row's text, in the ink of the page's ⋯ above them and every other icon button; each sheet they open carries its name */
  .hc .tools .colwrap{display:none} /* Card fields is set once and left: it lives in the page's ⋯; the whole wrapper goes, so Sort's icon lines up under the ⋯ */
  .hc .tools .btn .ic{width:18px;height:18px}
  .hc.searching .listcard .tools>:not(.srch):not(.qcancel){display:none} /* while the search field is in use it takes the row, as Shopify's does */
  .hc.searching .qcancel{display:inline-flex;align-items:center;height:44px;padding:0 6px;color:var(--link);font-weight:550;font-size:14px}
  .hc .tw,.hc .pager{display:none}
  .hc .cards{display:flex}
  .hc .ogrp-h{position:sticky;top:var(--strip-h,44px);z-index:2;padding:12px 16px 4px;font-size:13px;font-weight:550;color:var(--tx3)} /* right under the strip (44 or 88px, set by stripSync); a muted label, so it is not the strip's Needs-you pill again */
  .hc .pop .pi{min-height:44px}
  /* popovers are bottom sheets on the phone: the row menu, the supplier picker, confirms, Filter & views, Sort, Card fields, the page's ⋯ */
  .hc .pop-scrim{display:block;position:absolute;inset:0;z-index:79;background:rgba(16,16,16,.42)}
  .hc .pop.sheet{position:absolute;left:0!important;right:0!important;top:auto!important;bottom:0;min-width:0;max-width:none;width:auto;border-radius:16px 16px 0 0;padding:10px 8px 16px;max-height:86%;overflow:auto;box-shadow:var(--raised)}
  .hc .pop.sheet .pi{font-size:15px;padding:10px 12px}
  .hc .pop.sheet>.sh-x,.hc .sb .sb-x{float:right;display:grid;place-items:center;width:44px;height:44px;margin:-4px 0 0 8px;padding:0;border:0;border-radius:999px;background:none;color:var(--tx2)} /* the X in the sheet's top corner */
  .hc .pop.sheet>.sh-x:hover,.hc .sb .sb-x:hover{background:var(--fill)}
  .hc .pop.sheet>.sh-x .ic,.hc .sb .sb-x .ic{width:20px;height:20px}
  .hc .pop.sheet>.sh-x+h5{margin-top:8px;line-height:28px;margin-bottom:8px}
  .hc .sb .sb-x{float:none;align-self:flex-end;flex:none;margin:-4px -4px -4px 0}
  .hc .pop.sheet h5{font-size:13px;margin:6px 12px 8px}
  .hc .pop.sheet .pi .av{width:32px;height:32px;font-size:13px}
  .hc .pop.sheet .confirm{max-width:none;padding:4px 12px 4px}
  .hc .pop.sheet .confirm p{font-size:15px;margin-bottom:14px}
  .hc .pop.sheet .confirm .list{font-size:14px}
  .hc .pop.sheet .confirm .acts .btn,.hc .pop.sheet .tagform .btn,.hc .pop.sheet .fld .btn{flex:1;height:48px;font-size:15px;border-radius:10px}
  .hc .pop.sheet .tagform,.hc .pop.sheet .fld{padding-left:12px;padding-right:12px}
  .hc .colpop.sheet .list{max-height:none;margin:0;padding:0}
  .hc .colpop.sheet .colrow .grip{display:none} /* reorder is a desk thing; the card shows its fields in the sheet's order */
  .hc .colpop.sheet .colrow .pi{padding-left:12px}
  .hc .empty{padding:32px 16px;font-size:14px}
  .hc .two{grid-template-columns:1fr}
  .hc .stat3{gap:6px;padding:12px 12px 4px}
  .hc .stat3 div{padding:8px}
  .hc .stat3 b{font-size:16px}
  .hc .kv{grid-template-columns:1fr;font-size:14px}
  .hc .cside p{font-size:14px}
  .hc .cside .quiet{font-size:13px}
  .hc .team .who b{font-size:15px}
  .hc .team .who span{font-size:13px}
  .hc .team .btn{height:44px;font-size:14px}
  .hc .btn,.hc .btn.sm{min-height:44px;font-size:14px}
  .hc .btn.icon{width:44px}
  .hc .dots{width:44px;height:44px}
  .hc .pager .pg{width:44px;height:44px}
  .hc .toast{bottom:calc(76px + var(--dock));white-space:normal;text-align:center;font-size:13px} /* above the tab bar and the search band */
  .hc .toast button{min-height:44px;padding:0 10px;margin:-12px -10px -12px 0} /* Undo is a 44px tap without making the toast taller */
  .hc.is-open .toast{bottom:84px}
  .hc.is-open:has(.ov-foot:empty) .toast{bottom:calc(16px + var(--dock))} /* an order page with no action foot keeps the band */
  .hc.has-sel:not(.is-open) .toast{bottom:140px} /* clears the bulk bar */
  /* select mode on the phone: a 44px checkbox on each card, a tap anywhere on the card toggles it, the bulk bar above the tab bar */
  .hc .bulk{display:none!important}
  .hc .bulk-m{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sf);border-top:1px solid var(--bd);flex:none}
  .hc .bulk-m b{flex:1;min-width:0;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc .bulk-m .btn{height:44px;font-size:14px;flex:none}
  .hc.selecting #cards .oc{padding-left:60px;cursor:pointer}
  .hc.selecting #cards .oc.chk{background:var(--olive-bg)}
  .hc.selecting #cards .oc .oh>.btn{display:none} /* the row's own button steps back while rows are being ticked: a tap toggles the row */
  .hc.selecting #cards .oc .supbtn{pointer-events:none}
  .hc.selecting #cards .oc .supbtn .chev{display:none}

  /* the order page: a Back bar, the facts in phone order, the one action pinned at the foot */
  .hc .ov{overflow:hidden;bottom:var(--dock)} /* the page ends above the search band */
  .hc:has(.ov-foot:not(:empty)) .ov{bottom:0}
  .hc:has(.ov-foot:not(:empty)) .ai-dock,.hc.has-sel .ai-dock{display:none} /* one bar at the foot: the page's own action foot, or the bulk bar, takes the band's place */
  .hc .ov-scroll{flex:1;min-height:0;overflow:auto}
  .hc .ov-top{display:none}
  .hc .ov-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px;padding:0 4px;border-bottom:1px solid var(--bd2);background:var(--sf);flex:none}
  .hc .ov-bar .back{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 10px 0 6px;border-radius:var(--r);font-size:15px;font-weight:550;color:var(--link);justify-self:start}
  .hc .ov-bar .back .ic{width:20px;height:20px}
  .hc .ov-bar b{font-size:16px;font-weight:650;letter-spacing:-.01em;text-align:center}
  .hc .ov-bar .acts2{justify-self:end;display:flex;align-items:center} /* previous, next and the ⋯ (More actions), as the desk's header carries them */
  .hc .ov-bar .pn{border:0;box-shadow:none;background:none}
  .hc .ov-bar .pn button{width:44px;height:44px;border:0;border-radius:var(--r)}
  .hc .ov-bar .dots{width:44px;height:44px}
  .hc .ov-body{padding:12px 12px 24px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .hc .ov-body .col{display:contents}
  .hc .ov-body>.col>*{min-width:0}
  .hc .ohead{padding:0 4px}
  .hc .ohead .ttl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .hc .ohead .meta{font-size:13px;color:var(--tx3);margin-top:6px}
  .hc .m-next{display:block;order:1;padding:16px;border-radius:var(--r-lg);background:var(--fill)}
  .hc .m-next.urgent{background:#fff4ec}
  .hc .m-next.done{background:#f0faea}
  .hc .m-next .k{font-size:12px;font-weight:600;color:var(--tx2);letter-spacing:.01em;margin-bottom:4px}
  .hc .m-next .t{font-size:18px;font-weight:650;line-height:1.3;letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
  .hc .m-next .t .ic{width:18px;height:18px;color:var(--olive-ink)}
  .hc .m-next .s{font-size:14px;color:var(--tx2);margin-top:4px;line-height:1.45}
  .hc .m-next .silence{color:var(--late);font-weight:600}
  .hc .m-next .steps{margin:12px 0 0}
  .hc .m-next .steps div{font-size:0;padding-top:6px}
  .hc .m-next .steps-cap{display:block;font-size:13px;color:var(--tx2);margin-top:2px}
  .hc .m-next .steps-cap b{color:var(--tx);font-weight:600}
  .hc .m-next .who{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08);font-size:14px}
  .hc .m-next .who .av{width:28px;height:28px;border-radius:7px;background:var(--sf);font-size:12px}
  .hc .m-next .who small{display:block;font-size:13px;color:var(--tx2)}
.hc .m-next button.who{width:100%;text-align:left;font:inherit;color:inherit;min-height:44px;border-radius:0}
.hc .m-next button.who .chev{margin-left:auto;color:var(--tx3);flex:none}
  .hc .c-items{order:2}.hc .c-ship{order:3}.hc .c-sup{order:4}.hc .c-money{order:5}.hc .c-side{order:6}.hc .c-tl{order:7}.hc .c-supn{order:8}.hc .c-pay{order:4}.hc .c-msg{order:5}
  .hc .ov-body.ship-first .c-ship{order:2}.hc .ov-body.ship-first .c-items{order:3}
  .hc .card.fold>.ch{cursor:pointer;min-height:48px;padding:12px 16px}
  .hc .card.fold>.ch .fold-ico{display:block;width:20px;height:20px;color:var(--tx3);transition:transform .15s;flex:none}
  .hc .card.fold[data-folded]>.ch .fold-ico{transform:rotate(-90deg)}
  .hc .card.fold>.ch h3{flex:none;white-space:nowrap}
  .hc .card.fold>.ch .hint{margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc .card.fold>.ch .acts{display:none}
  .hc .card.fold[data-folded]>:not(.ch){display:none}
  .hc .card .ch{padding:12px 16px}
  .hc .card .ch>.btn.sm{margin-block:0}
  .hc .card .ch>.btn.ghost.sm{margin-block:-11px} /* Invite, Manage: 44px for the thumb, the header still 46px like its siblings; a bordered one (Track) keeps its room from the card's edge */
  .hc .card .cb{padding:0 16px 16px}
  .hc .card.fold .cb{padding-top:4px}
  .hc .c-sup .status-line,.hc .c-sup .reminder,.hc .c-sup .steps{display:none} /* shown in the Next box instead */
  .hc .c-sup .supline{margin-top:0;padding-top:0;border-top:0}
  .hc .supline .supbtn{min-height:44px}
  .hc .c-items .estep,.hc .c-items .reminder,.hc .c-items [data-decline-open]{display:none} /* the live step is the pinned foot */
  .hc .estep.dec-acts{display:flex}
  .hc .dec-acts .btn{flex:1;height:48px;font-size:15px}
  .hc [data-declined] [data-decline-undo]{display:none} /* Undo is in the pinned foot */
  .hc .c-tl .ch .hint{display:none}
  .hc .sfold-b{min-height:44px;font-size:14px}
  .hc .sfold-b .ic{width:18px;height:18px}
  .hc .ship-grid,.hc .money{grid-template-columns:1fr}
  .hc .money .half+.half{border-left:0;padding-left:0;border-top:1px solid var(--bd2);padding-top:14px}
  .hc .item{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}
  .hc .item .nm{font-size:15px}
  .hc .item .var,.hc .item .qty{font-size:13px}
  .hc .item .qty{grid-column:2}
  .hc .item .qty:last-child{grid-column:3;grid-row:1;align-self:center} /* no amount (Ero's items): the quantity sits at the right, one line fewer */
  .hc .item .amt{grid-column:3;grid-row:1;min-width:0}
  .hc .inner .row{padding:12px}
  .hc .inner .row>.ic{display:none} /* the word is the label; the card's title keeps its icon */
  .hc .inner .row .k{font-size:13px;min-width:60px}
  .hc .inner .row .v{font-size:14px}
  .hc .inner .row a{display:inline-block;min-width:44px;text-align:center;padding:12px 6px;margin:-12px -2px}
  .hc .fld label,.hc .fld .flab{font-size:13px}
  .hc .drop,.hc .in,.hc .estep .btn{height:48px;font-size:15px}
  .hc .drop{font-size:14px}
  .hc .in{font-size:16px}
  .hc .trk .in{padding-right:76px}
  .hc .paste{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:2px;top:2px;height:44px;min-width:60px;padding:0 12px;border-radius:7px;background:var(--fill);font-size:13px;font-weight:600;color:var(--tx)}
  .hc .paste:hover{background:var(--fill-hv)}
  .hc textarea.in{min-height:72px;height:auto}
  .hc .cmt .box .in{min-height:48px}
  .hc .c-msg .cmt .box .in{min-height:76px}
  .hc .c-msg .cmt .br{align-self:flex-end}
  .hc .cmt .br .post{height:44px;font-size:14px}
  .hc .cside h3 .edit{width:44px;height:44px;margin:-10px -10px -10px auto}
  .hc .cside p a,.hc .tl a{display:inline-block;padding:12px 0;margin:-12px 0}
  .hc .pay-act .btn{height:48px;flex:1;font-size:15px}
  .hc .pay-line,.hc .pay-note,.hc .reminder,.hc .supline .s{font-size:13px}
  .hc .totals{font-size:14px}
  .hc .tl .when{display:none}
  .hc .tl .txt{font-size:14px}
  .hc .tl .day{font-size:13px}
  .hc .ov-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--bd2);background:var(--sf);flex:none}
  .hc .ov-foot:empty{display:none}
  .hc .ov-foot .btn{flex:1;height:48px;font-size:15px;border-radius:10px}
  .hc .ov-foot .btn.pri{flex:2}
  .hc .ov-foot .btn.pri.even{flex:1}
  .hc .ov-foot .btn .ic{width:18px;height:18px}

  /* check in: a bottom sheet, the email folded to its first lines */
  .hc .dlg-scrim{padding:0;place-items:end center}
  .hc .dlg{width:100%;max-height:calc(100% - 24px);border-radius:16px 16px 0 0}
  .hc .dlg .dh{padding:12px 8px 12px 16px}
  .hc .dlg .dh h3{font-size:16px}
  .hc .dlg .db{padding:14px 16px;gap:12px}
  .hc .dlg textarea.in{min-height:100px}
  .hc .dlg .df{padding:10px 16px 12px}
  .hc .dlg .df .cc{display:none}
  .hc .dlg .df .btn{flex:1;height:48px;font-size:15px;border-radius:10px}
  .hc .dlg .df .btn.pri{flex:2}
  .hc .mail{font-size:14px}
  .hc .mail .hd{font-size:13px}
  .hc .mail .sig{font-size:13px}
  .hc .mail-wrap{position:relative}
  .hc .mail-wrap[data-folded] .mail{max-height:196px;overflow:hidden;position:relative}
  .hc .mail-wrap[data-folded] .mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(rgba(247,247,247,0),var(--bg));pointer-events:none}
  .hc .mail-fold{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:550;color:var(--link)}
  .hc .check{min-height:44px;font-size:14px}
  .hc .check input{width:22px;height:22px}

  /* the search/ask field: a band above the tab bar on every page (Seth, 2026-10-30: "make the mobile search/ask always visible at the bottom"); a tap raises the results as a sheet standing on it */
  .hc .ai-dock{display:block;position:relative;flex:none;z-index:72;padding:8px 12px;background:var(--sf);box-shadow:0 -1px 0 var(--bd)}
  .hc[data-ask] .ai-dock{box-shadow:none}
  .hc[data-ask] .ai-dock::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:200vh;background:rgba(16,16,16,.42)} /* the scrim over the page while the sheet is up; a tap on it closes the sheet */
  .hc .ai{position:relative;left:auto;bottom:auto;transform:none;width:auto;display:block}
  .hc .ai .bar{height:44px;padding:0 0 0 14px;box-shadow:inset 0 0 0 1px #c9c9c9}
  .hc .ai .bar:focus-within,.hc[data-ask] .ai .bar{box-shadow:inset 0 0 0 2px var(--ai)}
  .hc[data-viewer="ero"] .ai .bar:focus-within,.hc[data-viewer="ero"][data-ask] .ai .bar{box-shadow:inset 0 0 0 2px var(--focus)}
  .hc .ai kbd{display:none}
  .hc .ai .send,.hc .ai .clr{width:44px;height:44px;flex:none;border-radius:50%;background:none;display:none;place-items:center;color:var(--tx2)}
  .hc .ai .send:hover{background:none}
  .hc[data-ask] .ai .send:not(:disabled){display:grid} /* Ask shows once there is something to ask, with the sheet up */
  .hc .ai .send .ic{width:30px;height:30px;padding:7px;border-radius:50%;background:var(--ai);color:#fff;box-sizing:border-box}
  .hc .ai .send:hover .ic{background:#6a45ea}
  .hc .ai.has-q .clr{display:grid} /* while there is text: it clears the field and the list's filter */
  .hc .ai .clr .ic{width:20px;height:20px}
  .hc[data-viewer="ero"] .ai .spark,.hc[data-viewer="ero"] .ai .send{display:none!important} /* a supplier's field is search only */
  .hc[data-viewer="ero"] .ai .srchic{display:inline-block;color:var(--tx2)}
  /* the results: a sheet standing on the band, its title and X at the top, the same matches-first list Ask gave */
  .hc .ai-sheet{display:none}
  .hc[data-ask] .ai-sheet{display:flex;flex-direction:column;position:absolute;left:-12px;right:-12px;bottom:calc(100% + 8px);max-height:calc(100vh - 220px);background:var(--sf);border-radius:16px 16px 0 0;box-shadow:var(--raised);clip-path:inset(-48px -48px 0 -48px);padding:0 8px 4px}
  .hc .ai .panel{position:static;display:block;box-shadow:none;max-height:none;min-height:0;overflow-y:auto;border-radius:0;flex:1;padding:0 0 6px}
  .hc .ai .ai-close{display:flex;align-items:center;justify-content:flex-end;height:48px;padding:8px 4px 0 12px;flex:none} /* the X alone: the field the sheet stands on already names it */
  .hc .ai .ai-close button{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;color:var(--tx2)}
  .hc .ai .ri{min-height:48px}
  .hc .ai .ri .t{font-size:15px;white-space:normal}
  .hc .ai .ri .t span{display:block;margin:2px 0 0;font-size:13px}
  .hc .ai .ri .kh,.hc .ai .ri .pill{display:none}
  .hc .ai .hint{gap:8px;padding:8px 4px}
  .hc .ai .hint .dot{display:none}
  .hc .ai .hint button{min-height:44px;padding:0 14px;border-radius:999px;background:var(--fill);color:var(--tx);font-weight:550;font-size:14px}
  .hc .ai .ans{font-size:14px}
  .hc .ai .ans .ab .btn{min-height:44px;font-size:14px}

  /* tab bar: the thumb's row */
  .hc .tabbar{display:grid;grid-row:2;grid-template-columns:repeat(3,1fr);background:var(--sf)} /* no line of its own: the band (or the bulk bar) above it opens the foot with one */ /* Orders, Payouts, Settings (Ero: Orders, Payouts, Account), every top-level item its own tab and no More (Seth, 2026-10-30); Suppliers lives under Settings, and the account menu is behind the top bar's avatar; the search/ask field sits in the band above, so Ask needs no tab */
  .hc .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:550;color:var(--tx2);min-height:44px;border-radius:0}
  .hc .tabbar button .ic{width:22px;height:22px}
  .hc .tabbar button[aria-current="page"]{color:var(--olive-ink)}
  .hc .tabbar button[aria-current="page"] .ic{color:var(--olive)}
  .hc .tabbar button:focus-visible{outline-offset:-2px}
}
@media (max-width:379px){
  .hc .item{grid-template-columns:40px minmax(0,1fr)}
  .hc .item .amt{grid-column:2;grid-row:auto;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .hc *{transition:none!important;animation:none!important}
}

/* ---------- the live app: what the demo did not need ---------- */
.hc[data-viewer="boot"] .sb,.hc[data-viewer="boot"] .ct,.hc[data-viewer="boot"] .tabbar{visibility:hidden}
.hc .boot{position:absolute;inset:0;z-index:120;display:none;place-items:center;background:var(--bg)}
.hc[data-viewer="boot"] .boot{display:grid}
.hc .boot-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center}
.hc .boot-t{color:var(--tx2);font-weight:500}
.hc .sk{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,#efefef 25%,#f7f7f7 50%,#efefef 75%);background-size:200% 100%;animation:hc-sk 1.3s linear infinite}
.hc .sk.w1{width:38%}.hc .sk.w2{width:62%}.hc .sk.w3{width:24%}
@keyframes hc-sk{from{background-position:200% 0}to{background-position:-200% 0}}
.hc .sk-row td{padding-top:15px;padding-bottom:15px}
.hc .sk-card{padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--bd2)}
.hc .empty.err .btn{margin-top:12px}
.hc .empty span{display:block}
.hc .hl .met .v b.sk{width:48px;height:22px;display:inline-block}
.hc .busy{opacity:.55;transition:opacity .15s;pointer-events:none}
.hc .me-line{display:flex;align-items:center;gap:8px;cursor:default}
.hc .me-line .who{display:block;min-width:0}
.hc .me-line .who b{display:block;font-weight:600}
.hc .pay-amt{display:flex;gap:6px;align-items:center;margin-top:8px}
.hc .pay-amt .in{width:110px;height:28px}
.hc .ref-form .in{width:100%}
/* Ask Huasna AI: one order per row in the answer, its button beside it (under it on a phone) */
.hc .ai .ans .ab.row{align-items:center;margin-top:8px}
.hc .ai .ans .ab.row>span{flex:1 1 240px;min-width:0;line-height:1.5;overflow-wrap:anywhere}
.hc .ai .ans .ab.row .btn{flex:none}
.hc .ai .ans.err{background:var(--fill)}
/* profile photos: a photo fills its circle; the crop dialog's square shows the circle that will show */
.hc .av{overflow:hidden}
.hc .av img{width:100%;height:100%;object-fit:cover;display:block}
.hc .av.xl{width:56px;height:56px;font-size:18px}
.hc .photo-row{display:flex;gap:14px;align-items:center}
.hc .photo-row .photo-acts{margin-top:8px}
@media (min-width:701px){.hc .dlg.crop-dlg{width:min(360px,100%)}} /* the dialog as wide as its square, so Zoom sits under the photo it acts on; the phone's sheet stays full width */
.hc .photo-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hc .crop{position:relative;width:min(280px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:var(--r);background:var(--fill);touch-action:none}
.hc .crop canvas{width:100%;height:100%;display:block;cursor:grab;border-radius:0}
.hc .crop canvas:active{cursor:grabbing}
.hc .crop canvas:focus-visible{outline:none}
.hc .crop:has(canvas:focus-visible)::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--focus);pointer-events:none} /* the ring sits above the dimming, not under it */
.hc .crop::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(0,0,0,.5);pointer-events:none}
.hc .fld.crop-z{display:flex;flex-direction:row;align-items:center;gap:12px}
.hc .fld.crop-z label{margin:0}
.hc .fld.crop-z input{flex:1;min-width:0;width:auto;accent-color:var(--olive)}
@media (max-width:700px){.hc .fld.crop-z input{height:44px}} /* the only zoom on a phone: a full-size target */