/* The order card (order-card.js): the card frame (components/card.css) risen over the Orders table. This file is the
   host: its place, its ground, its motion, and the order's own content in the frame's regions. Tokens only, except the
   shadow tints (the house card shadow, warm). */

/* the host: over the table, not dimming it (house rule: glass pops, never dimmed modals) */
/* the host covers the Orders area only (its left / right are set from #view-orders' box in order-card.js, so the nav can
   open or fold beside it: Mo, 2026-09-26); the card sits at the bottom of it */
.oc-host{position:fixed;inset:0;z-index:95;pointer-events:none;display:none;justify-content:flex-end;align-items:flex-end;padding:16px 20px 16px 24px}   /* the right edge where a thread card's is (20px in, cases.js csViewPlace); the left edge where it was (Mo, 2026-09-28: "bigger to the right not left") */
.oc-host.is-up,.oc-host.is-leaving{display:flex}
/* the size follows the screen (Mo, 2026-09-26: "i thought it was going to be responsive to screen size"): the whole
   Orders area wide (the side gaps aside) and 88% of its height. From his tune: he set width 1110 in a pane whose Orders
   area was narrower (so the card filled it) and height 850 of the 966px there were (88%). Taller since 2026-09-28 (Mo:
   "same height that a thread would start at"): its top sits where a thread card's does (cases.css .is-tab-size, top 20px),
   the bottom stays 16px up, so the host's 16px padding plus 4px. */
.oc-host .oc-card{pointer-events:auto;width:97.5%;height:calc(100% - 4px);max-height:100%;background:var(--bg);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -24px rgba(42,36,24,.42),0 12px 28px -12px rgba(42,36,24,.28),0 0 0 1px rgba(42,36,24,.08)}
.oc-host.is-up .oc-card{animation:card-rise .42s cubic-bezier(.2,.9,.25,1) both}   /* components/card.css: the one pair every floating card uses */
.oc-host.is-leaving .oc-card{animation:card-sink .24s cubic-bezier(.4,0,.8,.4) both}
@media (prefers-reduced-motion:reduce){.oc-host.is-up .oc-card,.oc-host.is-leaving .oc-card{animation:none}}

/* the frame, as this host wants it: no floating dock, so the well scrolls to its end and does not fade */
.oc-card .c-card-scroll{padding:18px 22px 28px;-webkit-mask-image:none;mask-image:none}
.oc-card .c-card-top{padding:18px 22px 16px}   /* scrolls away with the page now (one scroll, 2026-09-26) */

/* the header band (Mo's Figma form, 2026-09-27): the order's actions are the thread header's own glyph buttons */
/* the thread header's own spacing (Mo, 2026-09-27: "way more padding in the header. check header padding of content in
   header of a thread card"): the frame's 12 / 10 / 12 / 18, the thread's 88×72 buttons, 9px between title and pills */
.oc-card .c-card-head.oc-head{--tone:var(--ink);align-items:center}
.oc-h-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.oc-h-title{display:flex;align-items:center;gap:10px;min-width:0}
.oc-h-title b{font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* the order number alone now (Mo, 2026-10-14: name, delivery and first/repeat left the header) */
.oc-h-num{flex:none;font-size:14px;font-weight:700;color:var(--ink-2)}
.oc-h-pills{display:flex;flex-wrap:wrap;gap:6px}
.oc-pill{display:inline-flex;white-space:nowrap;align-items:center;min-height:22px;padding:0 8px;border:0;border-radius:6px;background:rgba(255,255,255,.55);font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.oc-pill.is-ok{color:var(--green-2)}.oc-pill.is-warn{color:var(--amber-deep,#8a5a12)}.oc-pill.is-bad{color:var(--rust)}.oc-pill.is-quiet{background:none;padding:0 2px;color:var(--ink-3)}
.oc-pill.is-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.oc-h-acts{flex:none;display:flex;align-items:center;gap:6px}
.oc-h-nav{flex:none;display:flex;align-items:center;gap:6px;margin-left:8px;padding-left:14px;border-left:1px solid color-mix(in oklab,var(--line-strong) 45%,transparent)}
.oc-pos{color:var(--green-2)}.oc-neg{color:var(--rust)}
.oc-spacer{flex:1}
.oc-dbg{border:0;background:none;font:11px/1 var(--mono,ui-monospace,monospace);color:var(--ink-3);cursor:pointer}


/* 1 · the edit affordance at rest: a dashed underline + a faint pencil; stronger on hover. Read-only is plain. */
.ocf-ie{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:0 -6px;padding:3px 6px;border:0;border-bottom:1px dashed color-mix(in oklab,var(--line-strong) 85%,transparent);border-radius:6px 6px 0 0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ocf-ie>*:first-child{min-width:0;white-space:normal;overflow-wrap:anywhere}   /* a long phone or email wraps inside its box on a phone, never under the pencil (bug bash 2026-10-16 OR-8) */
.ocf-pen{flex:none;display:inline-grid;color:color-mix(in oklab,var(--ink-3) 60%,transparent);transition:color .15s}
.ocf-ie:hover{border-bottom-color:var(--green-2);background:color-mix(in oklab,var(--green-bg) 45%,transparent)}
.ocf-ie:hover .ocf-pen{color:var(--green-2)}
.ocf-ie.is-block{display:flex;width:100%;justify-content:space-between;margin:10px 0 0;padding:8px 10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.ocf-ro{min-width:0}
/* 2 · the field becomes the control, in place; ✓ (green) only when valid and changed; ✕ */
.ocf-ctl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}
.ocf-ctl.is-block{display:block;width:100%}
.ocf-in{min-height:34px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);font:inherit;font-size:14px;color:var(--ink);outline:none}
.ocf-in:focus{border-color:var(--green-2);box-shadow:0 0 0 3px color-mix(in oklab,var(--green-2) 18%,transparent)}
.ocf-ta{width:100%;min-height:64px;padding:8px 10px;resize:vertical;line-height:1.4}
.c-ts-row.is-wide .ocf-ctl{display:flex;width:100%}
.c-ts-row.is-wide .ocf-ctl .ocf-ta{flex:1 1 100%}
.ocf-ok,.ocf-no{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;cursor:pointer;font:inherit}
.ocf-ok{border:0;background:var(--green-2);color:#fff}
.ocf-ok:disabled{opacity:.3;cursor:default}
.ocf-ok.is-wide{width:auto;display:inline-flex;gap:6px;padding:0 14px;font-size:13px;font-weight:700}
.ocf-no{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-3)}
.ocf-hint{font-size:12px;color:var(--ink-3)}
.ocf-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.ocf-seg button{min-height:32px;padding:0 14px;border:0;background:var(--panel);font:inherit;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.ocf-seg button.is-on{background:var(--ink);color:var(--panel)}
.ocf-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ocf-mf{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ocf-money{position:relative;display:block}
.ocf-money i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-3);font-size:13px}
.ocf-money .ocf-in{width:100%;padding-left:22px;font-variant-numeric:tabular-nums}
.ocf-mact{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ocf-btn{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 12px;border:0;border-radius:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ocf-btn.is-clay{background:var(--clay,#c2653a);color:#fff}
.ocf-muted{color:var(--ink-3)}
.tabular{font-variant-numeric:tabular-nums}

/* ── the one-pager (Mo, 2026-09-27: "go with B"): the supplier's PO as a ticket, everything off the PO in the rail ── */
.oc-card .c-card-scroll:has(>.op){padding:0 0 40px;background:var(--panel)}
.op{padding:22px 26px 0}
.op-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.op-banner{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding:10px 14px;border-radius:10px;background:var(--rust-bg,#fbe9e0);color:var(--rust);font-size:13px}
@keyframes op-flash{from{background:var(--green-bg)}to{background:var(--panel)}}

/* ── the dark header and the stamp (Mo, 2026-09-27: "make the header of the card that dark gradient"; "put the accepted
   stamp in top right corner where the button to accept would be") ─────────────────────────────────────────────── */
.oc-card .c-card-head.oc-head{--tone:#f4efe7;color:#f4efe7;background:linear-gradient(135deg,#24211c 0%,#35302a 55%,#473d31 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
/* a Mulch Mound order wears clay (Mo, 2026-10-14): the pill that said so is gone; deep clay into the bell's #c2653a */
.oc-card .c-card-head.oc-head.is-mm{background:linear-gradient(135deg,#8c4223 0%,#9a4b29 55%,#a9552f 100%)}   /* a gentle clay: one shade across, not a sweep (Mo: "a little heavy handed") */
.oc-head .oc-h-num{color:rgba(244,239,231,.72)}
.oc-head .oc-pill{background:rgba(255,255,255,.1);color:rgba(244,239,231,.9)}
.oc-head .oc-pill.is-ink{background:#f4efe7;color:var(--ink)}
.oc-head .oc-pill.is-warn{color:#f2c57a}.oc-head .oc-pill.is-clay{color:#f0ad86}.oc-head .oc-pill.is-ok{color:#aee0b4}
.oc-head .oc-pill.is-quiet{background:none;color:rgba(244,239,231,.6)}
.oc-head .oc-pill.is-link{color:#f4efe7}
.oc-head .sp-copybtn{width:32px;height:32px;border-radius:8px;color:rgba(244,239,231,.78);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);transition:background .15s,color .15s}   /* a quiet square beside the number, like the thread header's copy link (2026-10-14) */
.oc-head .sp-copybtn:hover{background:rgba(255,255,255,.14);color:#f4efe7}
.oc-head .sp-copybtn svg{width:16px;height:16px}
.oc-head .cs-glyph:hover{background:rgba(255,255,255,.08)}
.oc-head .oc-h-nav{border-left-color:rgba(255,255,255,.16)}
/* the stamp: a rubber stamp, set a little crooked, in the Accept PO button's place */
.oc-stamp{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:112px;height:56px;margin:0 10px 0 4px;padding:0 12px;border:2.5px solid currentColor;border-radius:8px;box-shadow:inset 0 0 0 2px transparent,inset 0 0 0 3.5px currentColor;font:900 15px/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.92;color:#9fdca8;-webkit-mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.82) 70%,#000 90%);mask-image:radial-gradient(circle at 30% 40%,#000 55%,rgba(0,0,0,.82) 70%,#000 90%)}
.oc-stamp small{font-size:11px;font-weight:800;letter-spacing:.14em}
.oc-stamp.is-bad{color:#f19b86}.oc-stamp.is-warn{color:#f2c57a}

/* ── the sections: the thread summary's own groups (Mo, 2026-09-27: "use the styling that was used by reach, order,
   and supplier sections in thread card summary"); read-only rows are exactly .c-ts-row ─────────────────────────── */
.op-side-h{display:flex;align-items:flex-start;gap:6px;margin:0 2px 14px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.op-side-h svg{flex:none;margin-top:2px}
.op-side-h b{color:var(--ink-2)}
.op-side.is-flash .c-ts-list,.op-grp.is-flash .c-ts-list{animation:op-flash 1.2s ease-out}
@keyframes op-flash{from{background:var(--green-bg)}}
.op-grp{margin-bottom:20px}
.op-hrow{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.op-hrow .cs-seclbl{flex:1;min-width:0;margin:0}
.op-hrow .cs-seclbl em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.op-count:not(:empty){margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--bg-2);letter-spacing:0;color:var(--ink-2)}
.op-hacts{flex:none;display:inline-flex;gap:14px}
.op-hact{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--green-2);text-decoration:none;cursor:pointer}
.op-hact:hover{text-decoration:underline;text-underline-offset:3px}
.op-hact:disabled{color:var(--ink-3);opacity:.55;cursor:not-allowed;text-decoration:none}   /* a frozen action (Swap, 2026-09-28) */
.op-foot{margin:6px 4px 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.op .c-ts-v small{margin-left:6px}
.op .c-ts-row .op-acts{flex:none;display:inline-flex;align-items:center;gap:2px;margin:-6px -8px -6px 0}
/* the row's buttons are the summary's quiet copy button: no circles, no colour */
.op .c-ts-row .sp-callbtn,.op .c-ts-row .sp-copybtn,.op .c-ts-row .sp-mapbtn{display:inline-grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--ink-3)}
.op .c-ts-row .sp-callbtn:hover,.op .c-ts-row .sp-copybtn:hover,.op .c-ts-row .sp-mapbtn:hover{background:var(--bg-2);color:var(--ink)}
.op .c-ts-row .sp-callbtn svg,.op .c-ts-row .sp-copybtn svg,.op .c-ts-row .sp-mapbtn svg{width:15px;height:15px}
.op-margin{font-weight:700;font-variant-numeric:tabular-nums;margin-right:8px}.op-margin.is-pos{color:var(--green-2)}.op-margin.is-neg{color:var(--rust)}
.op-lnk{border:0;background:none;padding:0 8px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.op-qty{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-size:13px;color:var(--ink-3)}
.op-po.is-ok{color:var(--green-2)}.op-po.is-warn{color:var(--amber-deep,#8a5a12)}.op-po.is-bad{color:var(--rust)}
.c-ts-row.is-werk{background:color-mix(in oklab,var(--amber-bg,#f7ecd6) 60%,transparent)}
.c-ts-row.is-werk .c-ts-v{white-space:normal}
/* the recruited supplier: a row that opens its page */
button.op-prev{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:56px}
button.op-prev:hover{background:color-mix(in oklab,var(--bg) 70%,var(--panel))}
.op-prev .c-ts-v{display:flex;flex-direction:column;gap:1px}
.op-prev .c-ts-v small{margin-left:0}
.op-prev.is-need .c-ts-ico,.op-prev.is-need .c-ts-v b{color:var(--clay,#c2653a)}
.op-prev-go{flex:none;display:inline-grid;color:var(--ink-3)}
/* a row being edited opens up: the control, ✓ and ✕ wrap below if they must */
.c-ts-row.is-editing .c-ts-v,.c-ts-row.is-wide .c-ts-v{white-space:normal;overflow:visible}
.c-ts-row.is-wide{align-items:flex-start}
.c-ts-row.is-wide .c-ts-ico{margin-top:3px}
.c-ts-row.is-wide .c-ts-v>.ocf-ie,.c-ts-row.is-wide .c-ts-v>.ocf-ctl{width:100%}
.c-ts-row.is-editing .ocf-ctl .ocf-ta{flex:1 1 100%}
.op-empty{padding:12px 14px;font-size:13px;color:var(--ink-3)}

/* threads and changes: rows in the box, a hairline between */
.op-threads .oc-trow+.oc-trow::before{left:52px}
.op-tasks .sp-issue{margin:0;padding:12px 16px;border:0;border-radius:0;background:none;box-shadow:none}
.op-tasks .sp-issue+.sp-issue{box-shadow:inset 0 1px 0 color-mix(in oklab,var(--line) 70%,transparent)}
.op-tasks>:not(.sp-issue):not(.sp-issues-empty):not(.sp-issues-loading){padding:12px 16px}
/* notes: one box; Save wakes when something is typed; the links under it */
.op-notebox{display:flex;flex-direction:column}
.op-notes{display:block;width:100%;min-height:88px;padding:12px 16px;border:0;background:none;font:inherit;font-size:14px;line-height:1.45;color:var(--ink);resize:vertical;outline:none}
.op-notes:focus{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--green-2) 30%,transparent);border-radius:14px}
.op-notes-foot{display:flex;justify-content:flex-end;padding:0 10px 10px}
.op-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.op-links a{color:var(--ink-2);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.op-links .op-lnk{font-size:12px}
/* the recruited supplier's page: the shared detail page over the one-pager */
.op-pagehost{position:absolute;inset:0}
.oc-card .c-card-page:has(.op-pagehost){overflow:hidden;position:relative}
.oc-card .op-page{border-radius:0}
.op-page-body{padding:6px 4px 30px}
@media (max-width:1100px){.op-cols{grid-template-columns:minmax(0,1fr)}}

/* a page inside the card (Find a supplier): it slides in over the well */
.oc-page{animation:oc-page-in .28s cubic-bezier(.2,.9,.25,1) both}
@keyframes oc-page-in{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
.oc-page-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;margin:-18px -22px 14px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.oc-back{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 10px 0 4px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.oc-back:hover{background:var(--bg-2)}
.oc-done{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--panel);font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* the phone: the card is a sheet from the bottom, one long scroll, dragged down to close */
@media (max-width:768px){
  .oc-host{padding:calc(8px + env(safe-area-inset-top)) 0 0;align-items:stretch}
  .oc-host .oc-card{width:100%;height:100%;border-radius:16px 16px 0 0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .oc-card .c-card-head{flex-wrap:wrap;padding:12px 8px 10px 16px}
  .oc-h-title b{font-size:26px}
  /* the name and pills get the row; the actions go under them, the close stays top right */
  .oc-card .c-card-head.oc-head{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .oc-h-main{flex:1 1 0}
  .oc-h-title{flex-wrap:wrap;row-gap:4px}.oc-h-title b{flex:1 1 100%;white-space:normal}
  .oc-h-nav{order:2;margin-left:0;padding-left:0;border-left:0}
  .oc-h-acts{order:3;width:100%;justify-content:flex-end}
  .oc-h-acts .cs-glyph{height:52px;width:76px}
  .op{padding:14px 14px 0}
  .op-pagehost{position:relative;inset:auto;min-height:calc(100vh - 220px)}
  .oc-card .op-pagehost .cs-tl-page{position:absolute;inset:0;left:0;border-radius:0;z-index:3}
  .oc-card .c-card-top{max-height:none;padding:14px 16px}
  .oc-card .c-card-scroll{padding:14px 16px calc(24px + env(safe-area-inset-bottom))}
  .oc-page-head{margin:-14px -16px 12px;top:0}
}

/* ── threads in the card (step 3) ───────────────────────────────────────────────────────────────────────────── */
.oc-tlist{display:flex;flex-direction:column;border-radius:12px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.oc-trow{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 12px 10px 14px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.oc-trow+.oc-trow::before{content:"";position:absolute;top:0;left:48px;right:0;border-top:1px solid color-mix(in oklab,var(--line) 70%,transparent)}
.oc-trow:hover{background:color-mix(in oklab,var(--bg) 55%,var(--panel))}
.oc-trow>svg{flex:none;color:var(--ink-3)}
.oc-trow-ico{flex:none;display:grid;place-items:center;width:24px;color:var(--ink-3)}
.oc-trow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oc-trow-main b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-trow-what{font-size:12px;color:var(--ink-2)}
.oc-trow-main small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-trow-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.oc-trow-side small{font-size:11px;color:var(--ink-3);white-space:nowrap}
.oc-tstat{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-2);color:var(--ink-2)}
.oc-tstat.is-open{background:var(--green-bg);color:var(--green-2)}
.oc-tstat.is-done{background:none;color:var(--ink-3);padding:0}
.oc-trow.is-closed b{font-weight:600;color:var(--ink-2)}
.oc-tempty{padding:14px;color:var(--ink-3);font-size:13px}

/* the supplier's page takes the whole well */
.oc-card .c-card-well.has-thread{flex:1 1 0;min-height:0}
.op-threads .oc-tempty,.op-tasks .sp-issues-empty,.op .sp-issues-loading{padding:12px 14px;font-size:13px;color:var(--ink-3)}
/* an editable value is a field (Mo, 2026-09-27: B "Field", over A underline and C edit link): the value in a white box on
   the whisper row with the pencil inside it, so it reads as something you can type in; read-only values stay bare */
.op .c-ts-row.is-edit{min-height:48px}
.op .c-ts-row.is-edit .ocf-ie{margin:0;padding:5px 10px;min-height:32px;gap:10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);box-shadow:none}
.op .c-ts-row.is-edit .ocf-ie:hover{border-color:var(--line-strong);background:var(--bg-2);box-shadow:none}   /* hover is a background only, no colour or shadow (Mo, 2026-09-27) */
.op .c-ts-row.is-edit .ocf-ie .ocf-pen{color:var(--ink-3)}
.op .c-ts-row.is-wide .ocf-ie{justify-content:space-between}
/* hover (Mo, 2026-09-27): an editable field tints green (above); a thread row darkens on the whisper list */
.op-threads .oc-trow{transition:background .12s ease}
.op-threads .oc-trow:hover{background:color-mix(in oklab,var(--ink) 9%,transparent)}
.op-threads .oc-trow:hover>svg{color:var(--ink)}
.op .c-ts-row.is-edit .ocf-ie:hover .ocf-pen{color:var(--ink-3)}

/* a thread card over the order blurs the order below it (Mo, 2026-09-27: "we should blur the card below it").
   Mo's values from the tune panel, 2026-09-27: {"blur":3.5,"dim":0.92} */
body.cs-view-open #oc-host .oc-card{filter:var(--under-float,blur(3.5px) brightness(.92))}

/* ── where things live, A "Thread card" (Mo, 2026-09-27): the order on white (left), the work on the timeline's ground
   (right, "a tiny bit bigger"), the timeline's seam between them; detail pages open over the right side only ── */
.oc-card .c-card-scroll:has(>.op){display:flex;flex-direction:column;padding:0}
.op{flex:1;display:flex;flex-direction:column;padding:0}
.op>.op-banner{margin:18px 26px 0}
.op-cols{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:0;align-items:stretch}
.op-order{padding:22px 26px 40px;background:var(--panel)}
.op-work{position:relative;padding:22px 26px 40px;background:var(--bg);box-shadow:inset 9px 0 12px -12px rgba(0,0,0,.14)}
.op-work.has-page{min-height:600px}
/* a page over the side it came from (2026-09-28): the white side hosts They paid / Refunds, the grey side the rest; the page
   wears its side's colour, the crumb included */
.op-order{position:relative}
.op-order.has-page{min-height:600px}
.op-order .op-pghost .cs-tl-page{background:var(--panel);border-left:0;border-right:0}   /* no black edge since pages fade in (2026-10-14) */   /* the white side's page comes from the left, its black edge on the right (Mo, 2026-09-28); .5px from the edge panel (Mo, 2026-09-28) */
/* both sides' pages fade in and out like a thread's touchpoint page (Mo, 2026-10-14: "that same animation … for order card's
   left and right side"); the white side's page no longer slides from the left (cs-page-in / cs-page-out, cases.css) */
.op-work .op-pghost .cs-tl-page{background:var(--bg)}
.op-pghost .cs-tl-page .cs-tl-crumb,.op-pghost .cs-tl-page .cs-tl-crumb.has-head{background:inherit}
/* the card keeps its one scroll while a detail page is open over the grey side (Mo, 2026-09-28: "you can't scroll an order
   card when a detail page is opened"): card.css freezes the page for Threads' touchpoint pages, which cover the whole card;
   this page covers only .op-work and rides the scroll with it */
.oc-card .c-card-page:has(.has-page){overflow:hidden}   /* a page is a leaf over the part of its side you see (cmpDetailPage.fit, 2026-09-28): the card holds still; the page scrolls inside */
.op-pghost{position:absolute;inset:0;z-index:4}
.oc-card .op-page{border-radius:0}
.op-pg{padding:8px 4px 24px}
.op-pg .op-grp{margin-bottom:16px}
.op-pg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:12px;color:var(--ink-3)}
.op-picks{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.op-pick{min-height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.op-pick.is-on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.oc-refund-amt .ocf-in{width:160px}
/* the PO mark: on each field the supplier sees */
.oc-po{display:inline-flex;align-items:center;height:16px;margin-left:6px;padding:0 5px;border-radius:4px;background:var(--bg-2);font:800 9px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;color:var(--ink-3);vertical-align:middle;flex:none}
.op-side-h .oc-po{margin:1px 2px 0 0}
/* a row that opens a page over the grey side */
button.oc-go{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.oc-go:hover{background:var(--bg-2)}
button.oc-go.is-on{background:color-mix(in oklab,var(--ink) 8%,transparent)}
.oc-go-ch{flex:none;display:inline-grid;color:var(--ink-3)}
/* a confirmed recruited supplier: the way into Find a supplier and its Call on one row (2026-10-01) */
.c-ts-row.oc-gorow{padding:0;gap:0}
.oc-gorow>button.oc-go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 14px;min-height:44px}
.oc-gorow>.op-acts{padding-right:14px}
/* the margin: a glance in the header (%), the dollars on the cost page */
.oc-mtag{flex:none;margin-right:6px;padding:2px 7px;border-radius:6px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.oc-mtag.is-pos{background:var(--green-bg);color:var(--green-2)}.oc-mtag.is-thin{background:var(--amber-bg,#f7ecd6);color:var(--amber-deep,#8a5a12)}.oc-mtag.is-neg{background:var(--rust-bg,#fbe9e0);color:var(--rust)}
.oc-msum{display:flex;align-items:stretch;gap:8px;margin:4px 0 18px;padding:14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.oc-msum>div{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.oc-msum>i{align-self:center;font-style:normal;font-size:18px;color:var(--ink-3)}
.oc-msum small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-msum b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.oc-msum em{font-style:normal;font-size:12px;font-weight:700}
.oc-msum.is-pos .is-keep b,.oc-msum.is-pos em{color:var(--green-2)}.oc-msum.is-thin .is-keep b,.oc-msum.is-thin em{color:var(--amber-deep,#8a5a12)}.oc-msum.is-neg .is-keep b,.oc-msum.is-neg em{color:var(--rust)}
@media (max-width:1100px){.op-cols{grid-template-columns:minmax(0,1fr)}.op-work{box-shadow:inset 0 9px 12px -12px rgba(0,0,0,.14)}}
@media (max-width:768px){.op-order,.op-work{padding:14px 14px 28px}.oc-msum{flex-wrap:wrap}.oc-msum>i{display:none}.op-pghost{position:absolute}}
/* the address on two lines (Mo, 2026-09-27) */
.c-ts-row.is-addr{align-items:flex-start;padding-top:9px;padding-bottom:9px}
.c-ts-row.is-addr .c-ts-ico{margin-top:4px}
.c-ts-row.is-addr .c-ts-v{white-space:normal;overflow:visible}
.c-ts-row.is-po-ro .c-ts-v{white-space:normal;overflow:visible}   /* the Name row: the First order / Repeat pill wraps under a long name, never cut off (OR-8) */
.c-ts-row.is-addr .op-acts{margin-top:0}
.oc-addr{display:inline-flex;flex-direction:column;gap:1px;min-width:0;line-height:1.35}
.oc-addr-1{font-weight:600;color:var(--ink)}
.oc-addr-2{color:var(--ink-2)}
/* the header (Mo, 2026-09-27): the margin stamp left of the PO's, tilted the other way; the order glyph bare and bigger */
.oc-mstamp{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:84px;height:48px;margin:0 6px 0 4px;padding:0 12px;border:2.5px solid currentColor;border-radius:8px;background:none;box-shadow:inset 0 0 0 2px transparent,inset 0 0 0 3.5px currentColor;font:900 20px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;opacity:.92;cursor:pointer;-webkit-mask-image:radial-gradient(circle at 70% 40%,#000 55%,rgba(0,0,0,.82) 70%,#000 90%);mask-image:radial-gradient(circle at 70% 40%,#000 55%,rgba(0,0,0,.82) 70%,#000 90%)}
.oc-mstamp.is-pos{color:#9fdca8}.oc-mstamp.is-neg{color:#f19b86}
.oc-mstamp.is-est{border-style:dashed;box-shadow:none}
.oc-mstamp:hover{opacity:1}
@media (max-width:768px){.oc-mstamp{min-width:70px;height:42px;font-size:17px}}
/* the margin stamp sits right of the title and pills; the actions keep the right edge; every stamp stands straight
   (Mo, 2026-09-27: "straighten out the stamps - all of them") */
.oc-card .c-card-head.oc-head .oc-h-main{flex:0 1 auto}
.oc-head .oc-mstamp{margin:0 0 0 18px}
.oc-head .oc-h-acts{margin-left:auto}
@media (max-width:768px){.oc-card .c-card-head.oc-head .oc-h-main{flex:1 1 0}.oc-head .oc-mstamp{order:2;margin:0}.oc-head .oc-h-nav{order:3}.oc-head .oc-h-acts{order:4;margin-left:0}}
/* the Orders page under the order card blurs the same way (Mo, 2026-09-27: "the same blur effect behind it on the content
   it's floating above … that will be our pattern"): one token, --under-float, in shared.css */
body.oc-open:not(.oc-on-cases) #view-orders,body.oc-open.oc-on-cases #view-cases{filter:var(--under-float,blur(3.5px) brightness(.92))}
/* the space around the card catches every click on a desk: nothing under it is selectable, and a click there closes the
   card (the handler in order-card.js); a phone's card is the whole screen */
@media (min-width:769px){.oc-host.is-up,.oc-host.is-leaving{pointer-events:auto}}
/* a card handed over from another page is simply there: no second rise (Mo, 2026-09-27) */
.oc-host.no-rise .oc-card{animation:none!important}
/* over Threads: the way home, in the dark header */
/* the order icon turns while Orders is still loading */
.oc-card>.oc-opening{height:100%}
/* The blur under a floating card eases with the card (Mo, 2026-09-27: "the blur comes in … maybe it should ease in"):
   in on the card's rise (.42s), out on its sink (.24s). A hand-off (Open in Orders) lands already blurred, no ease. */
#view-orders,#view-cases,#oc-host .oc-card{transition:filter .24s cubic-bezier(.4,0,.8,.4)}
body.oc-open #view-orders,body.oc-open #view-cases,body.cs-view-open #oc-host .oc-card{transition:filter .42s cubic-bezier(.4,0,.2,1)}
body.oc-still #view-orders,body.oc-still #view-cases{transition:none}
@media (prefers-reduced-motion:reduce){#view-orders,#view-cases,#oc-host .oc-card{transition:none}}
/* the money pages (They paid, Refunds): read from Shopify; a line is its words left, its amount right */
.oc-mline{display:flex;align-items:baseline;gap:12px;width:100%}
.oc-mline>span{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere}   /* long tax names wrap, never run under the amount */
.oc-mline>span small{color:var(--ink-3);font-weight:500;margin-left:4px}
.oc-mline>b{flex:none;font-weight:700;color:var(--ink)}
.op .c-ts-row.is-total{border-top:1px solid var(--line)}
.op .c-ts-row.is-total .oc-mline>b{font-size:15px;font-weight:800}
.oc-shop{font-size:12px;font-weight:700;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.oc-shop:hover{background:var(--bg-2);color:var(--ink)}
/* the PO's quantity no longer matches Shopify's (a refund or an edit in Shopify never touches the PO) */
.op .c-ts-row.oc-drift{background:var(--amber-bg,#f7ecd6);color:var(--amber-deep,#8a5a12);font-size:13px}
.op .c-ts-row.oc-drift .c-ts-ico{color:var(--amber-deep,#8a5a12)}
.oc-drift-go{font:inherit;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.oc-drift-go:hover{background:var(--amber-deep,#8a5a12);color:#fff}
/* a field not wired yet: a dashed box, no fill, a small lock where the pencil would be (never the pencil) */
.ocf-soon{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--ink-3)}
.ocf-soon em{display:none;font-style:normal}
/* What is on the supplier's PO (Mo, 2026-09-27, "rethink the PO chip"). The PO line says where the PO stands; a section
   on the PO carries a tag; a field that changes the PO carries the PO mark inside its box; a field that no longer
   matches the PO the supplier holds is amber with "PO says …". */
.op-poline{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.op-poline>svg{flex:none;color:var(--ink-3)}
.op-poline>span{flex:1;min-width:0}
.op-poline.is-stale{background:var(--amber-bg,#f7ecd6);border-color:color-mix(in oklab,var(--amber-deep,#8a5a12) 30%,transparent);color:var(--amber-deep,#8a5a12)}
.op-poline.is-stale>svg{color:var(--amber-deep,#8a5a12)}
.op-poline.is-wait{color:var(--ink-3)}
.op-pomark{display:inline-grid;vertical-align:-1px;color:var(--ink-3)}
.op-tag{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--bg-2);color:var(--ink-3)}
.op-tag.is-ours{background:none;padding-right:0}
.op-hrow .op-tag+.op-hacts{margin-left:8px}
.op .c-ts-row.is-stale{box-shadow:inset 3px 0 0 var(--amber-deep,#8a5a12)}
.op .c-ts-row.is-stale .ocf-ie{border-color:color-mix(in oklab,var(--amber-deep,#8a5a12) 55%,transparent)}
.op-was{display:block;flex-basis:100%;margin-top:4px;font-size:12px;font-weight:600;color:var(--amber-deep,#8a5a12)}
.op .c-ts-row:has(.op-was) .c-ts-v{flex-wrap:wrap}
/* the phone closes the card the thread card's way: a grabber and a round ⌄ centred at the top of the header, pulled down
   from anywhere on the header (the drag is cmpSheetDrag in ocHost); the ✕ is desk only (Mo, 2026-09-27) */
.oc-grab,.oc-down{display:none}
@media (max-width:768px){
  .oc-card .c-card-head.oc-head{position:relative;padding-top:58px}
  .oc-grab{display:block;position:absolute;top:7px;left:50%;transform:translateX(-50%);pointer-events:none}
  .oc-grab i{display:block;width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}
  .oc-down{display:inline-flex;position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;width:36px;height:36px;padding:0;border:0;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:rgba(255,255,255,.9);-webkit-tap-highlight-color:transparent}
  .oc-down::before{content:"";position:absolute;inset:-4px;border-radius:50%}
  .oc-down:active{transform:translateX(-50%) scale(.94)}
}
@media (max-width:768px){
  /* the order header on the phone (Mo, 2026-09-27, look A, in the thread header's measures): components/card.css .c-hx on
     top; the header stays put while the card scrolls; the actions are the thread's row (44px, an 18px icon beside a 13px
     word, a hairline on top) and the ACCEPTED stamp shrinks to sit in it */
  .oc-card .c-card-head.oc-head{position:sticky;top:0;z-index:6;padding:60px 16px 0;row-gap:0}
  .oc-card .c-card-head.oc-head>:is(.c-card-kind,.oc-h-main,.oc-mstamp){display:none}
  .oc-down{top:22px}
  .oc-head .c-hx{flex:1 1 100%;order:1}
  .oc-card .oc-head .oc-h-acts{order:3;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:0 -16px;width:calc(100% + 32px);padding:0 6px;border-top:1px solid rgba(255,255,255,.16)}
  .oc-h-acts .cs-glyph{height:44px;width:auto;flex-direction:row;align-items:center;justify-content:center;gap:7px;padding:0}
  .oc-h-acts .cs-glyph svg{width:18px;height:18px}
  .oc-h-acts .cs-glyph small{font-size:13px;font-weight:600;letter-spacing:normal;text-transform:none}
  .oc-h-acts .oc-stamp{justify-self:center;align-self:center;min-width:0;height:32px;margin:0;padding:0 10px;gap:0;flex-direction:row;font-size:12px;border-width:2px;box-shadow:inset 0 0 0 1.5px transparent,inset 0 0 0 2.5px currentColor}
  .oc-h-acts .oc-stamp small{font-size:10px;margin-left:6px;letter-spacing:.1em}
}
/* the customer's address, edited in place (2026-09-28): street, apt, then city · state · zip on one line; a warning under
   it when the supplier does not serve the new zip (never a block) */
.ocf-addr{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;min-width:0}
.ocf-addr-row{display:flex;gap:6px}
.ocf-addr-row .ocf-in:first-child{flex:1 1 auto;min-width:0}
.ocf-addr-row .ocf-in[data-v="prov"]{flex:0 0 64px;width:64px}
.ocf-addr-row .ocf-in[data-v="zip"]{flex:0 0 96px;width:96px}
.ocf-warn{display:block;padding:8px 10px;border-radius:10px;background:var(--amber-bg,#fdf3dc);color:var(--amber-ink,#7a5413);font-size:13px;line-height:1.4}
.ocf-warn[hidden]{display:none}
.ocf-addr{position:relative}
.ocf-sugg{display:flex;flex-direction:column;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);overflow:hidden;box-shadow:0 8px 24px -12px rgba(42,36,24,.35)}
.ocf-sugg[hidden]{display:none}
.ocf-sugg-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:8px 12px;border:0;border-top:1px solid var(--line);background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.ocf-sugg-i:first-child{border-top:0}
.ocf-sugg-i:hover{background:var(--bg-2)}
.ocf-sugg-i b{font-size:14px;font-weight:600}.ocf-sugg-i small{font-size:12px;color:var(--ink-3)}
.ocf-warn.is-stop{background:color-mix(in oklab,var(--rust,#b5532f) 12%,var(--panel));color:var(--ink)}
.ocf-use{margin-left:6px;min-height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--ink);color:var(--panel);font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* ── Swap page (Alec 2026-09-28): the options table, its filters, the preview ── */
.oc-swap .oc-sw-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.oc-swap .oc-sw-filters .ocf-in{flex:1 1 160px;min-width:0;height:36px}
.oc-swap .oc-sw-lbl{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--ink-3)}
.oc-swap .oc-sw-lbl select{flex:1}
.oc-sw-t{width:100%;border-collapse:collapse;background:var(--card,#fff);border-radius:12px;overflow:hidden;font-size:13px}
.oc-sw-t th{position:sticky;top:0;z-index:1;background:var(--bg-2);padding:8px 10px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-sw-t td{padding:8px 10px;border-top:1px solid var(--line,#e3e1d8);vertical-align:top}
.oc-sw-t td small{display:block;color:var(--ink-3);font-size:12px}
.oc-sw-t .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.oc-sw-t tbody tr{cursor:pointer}
.oc-sw-t tbody tr:hover td{background:color-mix(in oklab,var(--green-bg,#e8f1ea) 45%,transparent)}
.oc-sw-t tr.is-current{cursor:default}.oc-sw-t tr.is-current td{background:var(--bg-2)}
.oc-sw-t tr.is-pick td{background:var(--green-bg,#e8f1ea)}
.oc-sw-t td.is-thin{color:var(--amber-deep,#8a5a12);font-weight:700}.oc-sw-t td.is-neg{color:var(--rust);font-weight:700}
.oc-sw-flag{display:inline-block;margin:2px 0 0 6px;padding:1px 6px;border-radius:6px;background:var(--bg-2);color:var(--ink-3);font-size:11px;font-weight:600}
.oc-sw-flag.is-cur{background:var(--green-bg,#e8f1ea);color:var(--green-2)}
.oc-sw-pv{margin:14px 0 0;padding:14px;border-radius:12px;background:var(--card,#fff)}
.oc-sw-ft{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.oc-sw-ft>i{font-style:normal;color:var(--ink-3);padding-top:14px}
.oc-sw-ft small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-sw-ft span{display:block;font-size:13px;color:var(--ink-2,#444)}
.oc-sw-m{margin:12px 0 0;font-size:14px}.oc-sw-m b.is-pos{color:var(--green-2)}.oc-sw-m b.is-thin{color:var(--amber-deep,#8a5a12)}.oc-sw-m b.is-neg{color:var(--rust)}
.oc-sw-warn{margin-left:6px;padding:1px 7px;border-radius:6px;background:var(--amber-bg,#f7ecd6);color:var(--amber-deep,#8a5a12);font-size:12px;font-weight:700}
.oc-sw-man{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--amber-deep,#8a5a12)}
.oc-sw-man .ocf-money{max-width:140px}
.oc-sw-notes{margin:12px 0 0;padding-left:18px;font-size:13px;color:var(--ink-3)}
.oc-sw-notes li{margin:2px 0}
@media (max-width:767px){.oc-sw-t th:nth-child(4),.oc-sw-t td:nth-child(4){display:none}.oc-sw-ft{grid-template-columns:1fr}.oc-sw-ft>i{display:none}}

/* Items and money, one page (Mo, 2026-09-28): the change picker and its worked-out result */
.oc-mx{display:flex;flex-direction:column;gap:12px;padding:10px 0}
.oc-mx-kinds{align-self:flex-start;flex-wrap:wrap}
.oc-mx-fields{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.oc-mx-f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--ink-3);min-width:150px}
.oc-mx-f small{font-weight:500;color:var(--mute)}
.oc-mx-f.is-wide{flex:1 1 100%}
.oc-mx-f .ocf-in{min-height:34px}
.oc-mx-why{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.oc-mx-go{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer}
.oc-mx-out{border-top:1px solid var(--line);padding-top:6px}
.oc-mx-cause{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:6px;background:var(--bg-2);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
/* Item: search every variant nearby, pick one, swap here (Mo, 2026-09-28) */
.oc-mx-q{font-size:15px;min-height:40px!important}
.oc-mx-res{flex:1 1 100%;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.oc-mx-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.oc-mx-row:last-child{border-bottom:0}
.oc-mx-row:hover{background:var(--bg-2)}
.oc-mx-row.is-pick{background:var(--bg-2);box-shadow:inset 3px 0 0 var(--ink)}
.oc-mx-rn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oc-mx-rn b{font-size:14px;font-weight:700}
.oc-mx-rn small,.oc-mx-rp small{font-size:12px;color:var(--ink-3)}
.oc-mx-fl{display:flex;gap:4px;flex-wrap:wrap}
.oc-mx-fl i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:var(--bg-2);color:var(--ink-2)}
.oc-mx-rp{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.oc-mx-rp b{font-size:14px}
.oc-mx-rp b small{font-weight:500}
.oc-mx-rp .is-up{color:var(--rust);font-weight:700}
.oc-mx-rp .is-down{color:var(--green-2);font-weight:700}
.oc-mx-mg.is-thin{color:var(--amber-deep,#8a5a12)}.oc-mx-mg.is-neg{color:var(--rust)}
/* What has happened to the money (Mo, 2026-09-28): refunded so far, the timeline, and the warning before another change */
.oc-qback{margin-left:6px;color:var(--rust);font-weight:600}
.oc-mx-already{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in oklab,var(--rust) 9%,var(--panel));color:var(--ink);font-size:13px;line-height:1.4}
.oc-mx-already svg{flex:none;margin-top:2px;color:var(--rust)}
.oc-ev{display:grid;grid-template-columns:92px 1fr auto;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);align-items:start}
.oc-ev:last-child{border-bottom:0}
.oc-ev-d{font-size:12px;font-weight:700;color:var(--ink-3);padding-top:2px}
.oc-ev-w{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:14px}
.oc-ev-w small{font-size:12px;color:var(--ink-3)}
.oc-ev-w q{font-size:13px;color:var(--ink-2);font-style:italic}
.oc-ev-w ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.oc-ev-w li{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-3);max-width:320px}
.oc-ev-w li b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.oc-ev-a{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:800;font-variant-numeric:tabular-nums}
.oc-ev-a small{font-size:11px;font-weight:600;color:var(--ink-3)}
.oc-ev.is-edit .oc-ev-a{color:var(--ink-2)}
.oc-ev-w li small{margin-left:4px;font-size:11px}
/* One refund, mixed (Mo, 2026-09-28) */
.oc-rf{display:flex;flex-direction:column;gap:14px;flex:1 1 100%}
.oc-rf-sec{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.oc-rf-sec>small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-rf-sec>small em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;margin-left:6px}
.oc-rf-line{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.oc-rf-line>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.oc-rf-line small{font-size:12px;color:var(--ink-3)}
.oc-rf-step{display:inline-flex;align-items:center;gap:10px}
.oc-rf-step button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);font:inherit;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink)}
.oc-rf-step button:disabled{opacity:.35;cursor:default}
.oc-rf-step b{min-width:18px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.oc-rf-amt{max-width:160px}
/* Items and money: one way in to its page (Mo, 2026-09-28) */
.oc-money-grp .c-ts-row .c-ts-v small{margin-left:6px}
.oc-money-grp.is-on .c-ts-list{background:var(--bg-2)}
.oc-drifts{margin-top:-6px}
/* Cancel order (Mo, 2026-09-28) */
.oc-mx-kinds button:last-child.is-on{background:var(--rust);color:#fff}
.oc-cx-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer}
.oc-cx-check input{width:18px;height:18px;accent-color:var(--ink)}
.oc-cx-go:not(:disabled){background:var(--rust)!important;border-color:var(--rust)!important;color:#fff!important}
/* the phone's ⌄ is lucide circle-chevron-down (Mo, 2026-09-29): no disc behind it */
@media (max-width:768px){.oc-down{background:transparent!important}.oc-down svg{width:30px;height:30px}}

/* Items and money · A "Checkout" (Mo, 2026-09-29: "i like A"): one line on top, the actions first, a bar pinned to the
   foot with the total and the button, history folded, Cancel a quiet link. One type set: 11 caps labels, 12 secondary,
   14 rows, 16 totals. */
.cs-tl-scroll:has(.oc-mpg){padding-bottom:0!important;-webkit-mask-image:none!important;mask-image:none!important}
.oc-mtop{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:2px 2px 14px;font-size:14px;color:var(--ink-3)}
.oc-mtop b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.oc-mtop .is-hold{margin-left:auto}.oc-mtop .is-hold b{font-size:16px;font-weight:700}
.oc-mpg .oc-mx{overflow:visible;padding:0}
.oc-mpg .oc-mx-kinds{align-self:stretch;display:flex}   /* scrolls with the page (Mo, 2026-09-29: not pinned) */
.oc-mpg .oc-mx-kinds button{flex:1}
.oc-mpg .oc-mx-out{margin-top:16px;padding:6px 14px 14px;border-radius:14px;background:var(--bg-2)}   /* the working-out and the total are one soft block (Mo, 2026-09-29, option B "Block"): no pinning, no shadow */
.oc-mpg .oc-mx-out .oc-mx-what .c-ts-row{background:none}
.oc-mx-what{display:flex;flex-direction:column}
.oc-mx-what .c-ts-row{min-height:32px}
.oc-mx-what .c-ts-v{white-space:normal}
.oc-mx-bar{margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line-strong)}
.oc-mx-bar .c-ts-row.is-total{border:0;padding:0 0 6px;background:none}
.oc-mx-bar .op-pg-foot{margin:0;padding:0;border:0}
.oc-mpg .oc-rf-line{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:10px 2px}
.oc-cx-head{display:flex;align-items:center;gap:8px;color:var(--rust);font-size:16px}
.oc-cx-link{display:block;margin:18px auto 6px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--rust);text-decoration:underline;cursor:pointer}
.oc-mfold{margin-top:14px;border-top:1px solid var(--line)}
.oc-mfold-h{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 2px;border:0;background:none;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.oc-mfold-h em{font-style:normal;margin-left:6px;font-weight:600}
.oc-mfold-h svg{transition:transform .15s}
.oc-mfold.is-open .oc-mfold-h svg{transform:rotate(90deg)}
.oc-mfold-b{display:none;padding-bottom:8px}
.oc-mfold.is-open .oc-mfold-b{display:block}
.oc-mfold-b .cs-seclbl{margin:10px 0 6px}
/* the type set */
.oc-mpg .c-ts-v,.oc-mpg .oc-mline>span,.oc-mpg .oc-ev-w,.oc-mpg .oc-rf-line b,.oc-mpg .oc-mx-rn b{font-size:14px;font-weight:400}
.oc-mpg small,.oc-mpg .oc-ev-d,.oc-mpg .oc-ev-w small,.oc-mpg .oc-ev-w li,.oc-mpg .oc-ev-a small,.oc-mpg .op-foot,.oc-mpg .oc-mx-f>span{font-size:12px;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}
.oc-mpg .cs-seclbl,.oc-mpg .oc-rf-sec>small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-mpg .oc-mline>b,.oc-mpg .oc-ev-a,.oc-mpg .oc-ev-w>b{font-size:14px;font-weight:600}
.oc-mpg .is-total .oc-mline>b,.oc-mpg .is-total .oc-mline>span b{font-size:16px;font-weight:700}
.oc-mpg .oc-rf-sec>small em,.oc-mpg .oc-mfold-h em{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0}
.oc-mpg small{font-weight:400!important}
.oc-mpg .oc-ev-w li b{font-weight:400}
.oc-mpg .oc-mx-already,.oc-mpg .oc-mx-already span,.oc-mpg .oc-ev-w q,.oc-mpg .ocf-money i{font-size:14px;font-weight:400}
.oc-mpg .oc-mx-already b{font-size:14px;font-weight:600}
.oc-mpg .oc-cx-link{font-weight:700}
@media (max-width:767px){.oc-cx-link{min-height:44px;padding:0 12px;margin:4px auto 0}}   /* a 44px target on a phone, the text where it was (bug bash 2026-10-16 OR-16) */
.oc-mpg .c-ts-row.is-total .oc-mline>b,.oc-mpg .c-ts-row.is-total .oc-mline>b span{font-size:16px;font-weight:700}
.oc-mpg .oc-rf-step b,.oc-mpg .oc-rf-step button{font-size:14px;font-weight:600}
.oc-mpg .oc-rf-sec>small{font-weight:700!important}

/* On the PO (Mo, 2026-09-29): a label column on the white side, the PO tag's icon after the label of each field the PO
   carries, and the key (the On the PO tag and one line) once at the top */
.op .c-ts-row.is-lbl{align-items:flex-start}
.op-lbl{flex:none;width:132px;display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;color:var(--ink-3)}
.op-poi{flex:none;display:inline-grid;place-items:center;width:22px;height:20px;border-radius:6px;background:var(--bg-2);color:var(--ink-3)}
.c-ts-v .op-poi{display:inline-grid;vertical-align:-4px;margin-left:6px}
.op-polegend{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px}
.op-created{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}   /* the Label role (type.css), quiet */   /* the On the PO tag alone, right-aligned (Mo, 2026-09-29) */
.op-polegend .op-tag{margin-left:0}
.op-polegend .op-poi{display:inline-grid;vertical-align:-5px;margin:0 2px}
@media (max-width:768px){.op-lbl{width:96px;font-size:13px}}

/* Find a supplier (Mo, 2026-09-29, option A "Steps"): 1 a supplier we know · 2 call around · 3 set them up */
.ofs{font-size:14px;color:var(--ink)}
.ofs small{font-size:12px;color:var(--ink-3);font-weight:400}
.ofs-mute{font-size:12px;color:var(--ink-3)}
.ofs-yes{font-size:12px;color:var(--green-2);font-weight:600}
.ofs-klist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ofs-krow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line)}
.ofs-kn,.ofs-kfacts{display:flex;flex-direction:column;gap:2px;min-width:0}
.ofs-kn b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofs-btn{flex:none;border:1px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:999px;padding:5px 14px;min-height:32px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ofs-btn:hover{background:var(--ink);color:var(--panel)}
/* Call around (Mo, 2026-09-29, option B "Ledger"): one table on a desk; a receipt per quote on a phone */
.ofs-qlist{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
/* the name keeps at least 96px; the money columns give way first on a narrow side (2026-10-02: at 1104 wide the name had 0) */
.ofs-qh,.ofs-q{display:grid;grid-template-columns:minmax(96px,1fr) minmax(40px,58px) minmax(48px,72px) minmax(44px,64px) minmax(52px,76px) minmax(66px,74px) 28px;gap:5px;align-items:center}
.ofs-qh{padding:6px 2px;border-bottom:1px solid var(--line-strong);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ofs-qh span:not(:first-child){text-align:right}
.ofs-q{min-height:44px;padding:0 2px;border-bottom:1px solid var(--line)}
.ofs-q.is-qual{background:color-mix(in oklab,var(--green-2) 7%,transparent)}
.ofs-q.is-blank .ofs-qname{grid-column:1/-1;font-weight:500}
.ofs-qname{min-width:0;padding:4px 0;border:0;outline:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink)}
.ofs-qname::placeholder{color:var(--ink-3);font-weight:500}
.ofs-in{width:100%;padding:8px 2px;border:0;border-radius:6px;outline:0;background:none;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);-moz-appearance:textfield}
.ofs-in::-webkit-outer-spin-button,.ofs-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ofs-in::placeholder{color:var(--ink-3)}
.ofs-in:hover{background:var(--bg-2)}
.ofs-in:focus{background:var(--panel);box-shadow:inset 0 0 0 1px var(--ink)}
.ofs-in.is-tot{font-weight:700}
.ofs-in.is-tot::placeholder{color:var(--ink)}
.ofs-q.is-over .ofs-in.is-tot{color:var(--clay,#c2653a)}
.ofs-qual{justify-self:end;border:1px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:999px;padding:3px 10px;min-height:28px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ofs-qual:hover{background:var(--ink);color:var(--panel)}
.ofs-qd{justify-self:end;display:inline-flex;color:var(--green-2)}
.ofs-qlist.is-receipt{gap:10px;border-top:0}
.ofs-qlist.is-receipt .ofs-q{display:block;padding:6px 14px 4px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.ofs-qlist.is-receipt .ofs-q.is-blank{padding:6px 14px;border-style:dashed;background:none}
.ofs-qlist.is-receipt .ofs-q.is-qual{border-color:color-mix(in oklab,var(--green-2) 50%,transparent)}
.ofs-rtop{display:flex;align-items:center;gap:10px;padding:2px 0 6px;border-bottom:1px solid var(--line)}
.ofs-rtop .ofs-qname{flex:1;font-size:16px}
.ofs-rl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--line);font-size:14px}
.ofs-rl:last-child{border-bottom:0}
.ofs-rl small{margin-left:4px;font-size:12px;color:var(--ink-3)}
.ofs-rl.is-total{font-weight:700}
.ofs-m{display:inline-flex;align-items:baseline;gap:2px}
.ofs-m i{font-style:normal;font-size:13px;color:var(--ink-3)}
.ofs-rl .ofs-in{width:100px}
.ofs-yours{display:none}
.ofs-q.is-over .ofs-yours{display:inline;color:var(--clay,#c2653a);font-weight:600}
.ofs-foot{margin-top:6px;font-size:12px;color:var(--ink-3)}
.ofs-setup{display:flex;flex-direction:column;gap:10px}
.ofs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ofs-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.ofs-f em{color:var(--rust);font-style:normal}
.ofs-f input,.ofs-f textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.ofs-addr{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:color-mix(in oklab,var(--green-2) 8%,transparent);font-size:13px;color:var(--ink)}
.ofs-addr button{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;font:inherit;font-size:12px}
.ofs-confirm{display:flex;align-items:center;gap:12px;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.ofs-done{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:color-mix(in oklab,var(--green-2) 10%,var(--panel));color:var(--ink)}
.ofs-done svg{color:var(--green-2)}
.ofs-done button{margin-left:auto;border:1px solid var(--line-strong);background:var(--panel);border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
@media (max-width:768px){
  .ofs-krow{grid-template-columns:minmax(0,1fr) auto}
  .ofs-kfacts{grid-column:1;grid-row:2}
  .ofs-krow .ofs-kacts{grid-row:1/3;grid-column:2}
  .ofs-grid{grid-template-columns:1fr}
  .ofs-qname,.ofs-in,.ofs-f input,.ofs-f textarea{font-size:16px}
}

/* Find a supplier, one page (Mo, 2026-09-30): two folded places to look above the quotes, one qualified at a time in its own
   section, how each call went under its quote, a Confirmed card once done */
.ofs-chev{display:inline-grid;place-items:center;transition:transform .15s ease-out}.ofs-chev.is-open{transform:rotate(90deg)}
.ofs-secs{display:flex;flex-direction:column;margin:0 0 16px}
.ofs-sec{border-bottom:1px solid var(--line)}
.ofs-sech{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 2px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.ofs-sech b{font-size:14px}.ofs-sech .ofs-mute{margin-left:auto}
.ofs-cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg-2);font-size:11px;font-weight:700;display:inline-grid;place-items:center;color:var(--ink-2)}
.ofs-sec .ofs-klist .ofs-krow:last-child{border-bottom:0}.ofs-kn small{font-size:12px;color:var(--ink-3)}
.ofs-gl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:10px 2px 2px}
.ofs-pad{padding:10px 2px}.ofs-pad-t{padding-top:18px}
.ofs-kacts{display:inline-flex;align-items:center;gap:8px;justify-self:end}
.ofs-inq{font-size:12px;font-weight:600;color:var(--ink-3);padding:0 6px}
.ofs-o{font-size:12px;font-weight:600}.ofs-o.is-good{color:var(--green-2)}.ofs-o.is-bad{color:#9a3f1c}.ofs-o.is-wait{color:#7a5d00}
.ofs-out{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.ofs-out.is-info{background:var(--bg-2);color:var(--ink-2)}.ofs-o.is-info{color:var(--ink-2)}
.ofs-out.is-wait{background:color-mix(in oklab,#c9a227 18%,transparent);color:#7a5d00}.ofs-out.is-bad{background:color-mix(in oklab,#b5532d 14%,transparent);color:#9a3f1c}.ofs-out.is-good{background:color-mix(in oklab,var(--green-2) 16%,transparent);color:#2f6b2f}
.ofs-call{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 2px 6px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink-3);font:inherit}
.ofs-call:hover{background:var(--bg-2)}
.ofs-qlist.is-receipt .ofs-call{border-bottom:0;padding-left:0}
.ofs-callx{padding:10px 8px 14px 24px;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--bg-2) 60%,transparent);display:flex;flex-direction:column;gap:10px}
.ofs-chips{display:flex;flex-wrap:wrap;gap:6px}
.ofs-chip{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.ofs-chip.is-on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.ofs-cb{font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.ofs-logrow{display:flex;gap:8px;align-items:center}.ofs-note{flex:1;min-width:0;height:36px;border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;font:inherit;font-size:13px;background:var(--panel)}
.ofs-btn[disabled]{opacity:.4;cursor:default}.ofs-btn[disabled]:hover{background:var(--panel);color:var(--ink)}
.ofs-hist{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.ofs-hl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-2);min-height:26px}
.ofs-when{width:52px;color:var(--ink-3)}.ofs-hp{font-weight:600}.ofs-hn{color:var(--ink-3);font-style:italic}.ofs-hb{margin-left:auto;color:var(--ink-3)}
.ofs-nextsec{margin-top:18px;padding-top:6px;border-top:1px solid var(--line-strong)}
.ofs-next{margin-top:6px;padding:12px 14px;border:1px solid color-mix(in oklab,var(--green-2) 45%,transparent);border-radius:14px;background:color-mix(in oklab,var(--green-2) 6%,var(--panel));display:flex;flex-direction:column;gap:10px}
.ofs-next .ofs-setup{margin:0}
.ofs-nh{display:flex;flex-direction:column;gap:2px;position:relative;padding-right:90px}.ofs-nh b{font-size:14px}.ofs-nh .ofs-link{position:absolute;right:0;top:0}
.ofs-na{display:flex;justify-content:flex-end;align-items:center;gap:12px}.ofs-na.is-split{justify-content:space-between}
.ofs-link{border:0;background:none;padding:0;color:var(--ink-3);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ofs-conf{padding:14px 16px;border:1px solid color-mix(in oklab,var(--green-2) 45%,transparent);border-radius:14px;background:color-mix(in oklab,var(--green-2) 7%,var(--panel));display:flex;flex-direction:column;gap:12px}
.ofs-conf-h{display:flex;gap:12px;align-items:flex-start}.ofs-conf-ic{width:30px;height:30px;border-radius:999px;background:var(--green-2);color:#fff;display:grid;place-items:center;flex:none}
.ofs-conf-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.ofs-conf-t .ofs-gl{padding:0}.ofs-conf-t b{font-size:16px}
.ofs-conf-m{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.ofs-conf-m b{font-size:16px}
.ofs-callfacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-2)}
/* the contact form (Mo, 2026-09-30, "A · Script" with his notes) */
.ofs-form{display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 1px 2px rgba(42,36,24,.06)}
.ofs-ftop{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ofs-dots{display:flex;gap:5px}.ofs-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}.ofs-dots i.is-done{background:var(--green-2)}.ofs-dots i.is-on{background:var(--ink);width:18px;border-radius:4px}
.ofs-fsaves{margin-left:auto;display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-weight:500}
.ofs-fsofar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);padding-bottom:8px;border-bottom:1px solid var(--line)}.ofs-fsofar b{color:var(--ink-2)}
.ofs-fq{font-size:17px;font-weight:700;line-height:1.3;color:var(--ink);margin-top:2px}.ofs-fhelp{font-size:12px;color:var(--ink-3);margin-top:-6px}
.ofs-fans{padding:4px 0}.ofs-fans .ofs-chips{gap:8px}
.ofs-fans .ofs-chip{height:40px;padding:0 16px;border-radius:12px;font-size:13px;background:var(--bg)}.ofs-fans .ofs-chip:hover{border-color:var(--ink)}.ofs-fans .ofs-chip.is-on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.ofs-fans .ofs-chip.is-sm{height:30px;padding:0 10px;border-radius:9px;font-size:12px}
.ofs-price{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:8px}
.ofs-dol{font-weight:700}.ofs-amt{width:96px!important;flex:none!important;height:34px;text-align:right;font-size:15px;font-weight:700}.ofs-lbl{font-size:12px;color:var(--ink-3)}
.ofs-frow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.ofs-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ofs-fsub{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ofs-fnorm{margin-top:6px;font-size:13px;color:var(--ink-2);padding:8px 12px;border-radius:10px;background:color-mix(in oklab,var(--green-2) 8%,transparent)}
.ofs-ffoot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.ofs-fback,.ofs-fnext{height:38px;min-width:96px;padding:0 18px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ofs-fback{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink)}.ofs-fback[disabled]{opacity:.35;cursor:default}
.ofs-fnext{border:1px solid var(--ink);background:var(--ink);color:var(--panel)}.ofs-fnext[disabled]{opacity:.4;cursor:default}
.ofs-hbtn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer}
@media (max-width:768px){.ofs-fgrid{grid-template-columns:1fr}.ofs-amt,.ofs-fin{font-size:16px!important}}
.ofs-qlist.is-ro .ofs-in,.ofs-qlist.is-ro .ofs-qname{pointer-events:none;border-color:transparent;background:none}.ofs-qlist.is-ro .ofs-qdel{visibility:hidden}

/* the two sides are independent (Mo, 2026-09-29: "opening one thing on one side doesn't cause a page on the right side to
   close"; "scroll both sides at the same time when a detail page is open on one or both sides"). Side by side (a wide
   desk), the card holds still and each side is its own scroller (.op-side); a detail page covers its side exactly and
   scrolls inside itself, so the other side, with or without its own page, keeps scrolling. Stacked or on a phone: as before. */
@media (min-width:1101px){
  .oc-card .c-card-page:has(.op-cols){overflow:hidden}
  .oc-card .c-card-well:has(.op-cols){flex:1 1 0;min-height:0}
  .oc-card .c-card-scroll:has(>.op){flex:1 1 0;min-height:0;overflow:hidden}
  .op{min-height:0}
  .op-cols{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr)}
  .op-order,.op-work{padding:0;min-height:0;overflow:hidden}
  .op-order.has-page,.op-work.has-page{min-height:0}
  .op-side{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:22px 26px 40px;scrollbar-width:thin;scrollbar-color:transparent transparent}
  .op-side:hover{scrollbar-color:var(--line-strong) transparent}
  .op-pghost{top:0!important;bottom:0!important;height:auto!important}   /* the page is its side, whatever fit() measured */
}

/* delete a quote line (Mo, 2026-09-29) */
.ofs-qdel{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer}
.ofs-qdel:hover{background:var(--bg-2);color:var(--rust)}
.ofs-rtop .ofs-qdel{width:44px;height:44px;margin-right:-10px}

/* Final cost (Mo, 2026-09-29, option B "Compare"): the PO column is plain grey text; their bill is the only set of boxes */
.occ{font-size:14px;color:var(--ink)}
.occ-head{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin:0 0 14px}   /* right-aligned over the bill (Mo, 2026-09-29) */
.occ-head small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.occ-head b{font-size:30px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.occ-head em{font-style:normal;font-size:13px;color:var(--ink-3)}
.occ-tbl{border-top:1px solid var(--line-strong)}
.occ-th,.occ-tr{display:grid;grid-template-columns:minmax(0,1fr) 92px 120px 92px;gap:10px;align-items:center}
.occ-th{padding:6px 0;border-bottom:1px solid var(--line-strong);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.occ-th span:not(:first-child),.occ-tr>span:not(:first-child),.occ-tr>b{text-align:right}
.occ-tr{min-height:48px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.occ-po{font-size:13px;color:var(--ink-3)}
.occ-box{position:relative;display:block}
.occ-box i{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;color:var(--ink-3);pointer-events:none}
.occ-box input{width:100%;padding:7px 10px 7px 20px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);font:inherit;font-size:15px;font-weight:600;text-align:right;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-appearance:textfield}
.occ-box input::-webkit-outer-spin-button,.occ-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.occ-box input:hover{border-color:var(--ink-3)}
.occ-box input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--ink) 12%,transparent)}
.occ-tr.is-sum{font-weight:700}
.occ-tr.is-sum>b{padding-right:10px;font-size:16px}
.occ-up{color:var(--rust);font-weight:600}
.occ-down{color:var(--green-2);font-weight:600}
.occ-same{color:var(--ink-3)}
.occ-save{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:var(--ink-3)}
.occ-save .ocf-ok{margin-left:auto}
.occ-link{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--ink);text-decoration:underline;cursor:pointer}
@media (max-width:768px){.occ-th,.occ-tr{grid-template-columns:minmax(0,1fr) 72px 104px 72px;gap:6px}.occ-box input{font-size:16px}.occ-save{flex-wrap:wrap}}

/* the variant under an item's name (Mo, 2026-09-29, option C) */
.oc-var{display:block;width:100%;margin-top:1px;font-size:13px;font-weight:600;color:var(--ink-2)}

/* Items and money in the cost page's type and spacing (Mo, 2026-09-29): the headline figure, 48px rows on hairlines under a
   stronger rule, 11px caps labels, 14px rows, 12px grey notes, and the boxed inputs (white, a border, a ring on focus) */
.oc-mpg .oc-mhead{margin:0 0 14px;justify-content:flex-start}   /* Items and money keeps its headline on the left */
.oc-mpg .oc-mhead em .oc-neg{color:var(--rust)}
.oc-mpg .oc-rf-sec{display:flex;flex-direction:column;margin-top:16px}
.oc-mpg .oc-rf-sec:first-child{margin-top:4px}
.oc-mpg .oc-rf-sec>small{display:block;align-self:stretch;padding:0 0 6px;border-bottom:1px solid var(--line-strong)}
.oc-mpg .oc-rf-line{min-height:48px;padding:6px 2px;border-bottom:1px solid var(--line)}
.oc-mpg .oc-rf-sec>.oc-mx-why,.oc-mpg .oc-rf-sec>.cs-seg,.oc-mpg .oc-rf-sec>.ocf-money,.oc-mpg .oc-rf-sec>.oc-rf-amt{margin-top:10px}
.oc-mpg .c-ts-list .c-ts-row{min-height:48px}
.oc-mpg .ocf-in{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);font:inherit;font-size:14px;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.oc-mpg .ocf-in:hover{border-color:var(--ink-3)}
.oc-mpg .ocf-in:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--ink) 12%,transparent)}
.oc-mpg .ocf-money .ocf-in{padding-left:20px;font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.oc-mpg .ocf-money i{left:9px}
.oc-mpg .oc-mx-f{margin-top:16px;gap:6px}
.oc-mpg .oc-mx-f>span:first-child{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.oc-mpg .oc-mx-f>span:first-child small{margin-left:4px;text-transform:none;letter-spacing:0;font-weight:400}
.oc-mpg .oc-mx-kinds{margin-bottom:4px}
.oc-mpg .op-foot{margin-top:12px;font-size:12px;color:var(--ink-3)}
.oc-mpg .oc-mfold{margin-top:20px;border-top:1px solid var(--line-strong)}
.oc-mpg .oc-mfold-b .c-ts-row,.oc-mpg .oc-mfold-b .oc-ev{min-height:48px;border-bottom:1px solid var(--line)}

/* feeding a bill back (Mo, 2026-09-29, option C): a row that asks, only under a product or delivery line that differs */
.occ-tr.has-q{border-bottom:0}
.occ-billc{display:block}
.ocq{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line-strong)}
.ocq.is-future{border-color:#e2b8a0;background:#fdf6f1}
.ocq-top{display:flex;align-items:center;gap:12px}
.ocq-q{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ocq-q b{font-size:14px}
.ocq-q small{font-size:12px;line-height:1.4;color:var(--ink-3)}
.ocq-tg{flex:none}
.ocq-tg button{padding:7px 14px;font-size:13px}
.ocq-tg button.is-on:last-child{background:#c2653a;color:#fff;box-shadow:none}
.ocq-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ocq-cards.is-one{grid-template-columns:1fr}
.ocq-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid #ecd6c8;border-radius:12px;background:var(--panel);font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.ocq-card:hover{border-color:#c2653a}
.ocq-card.is-on{border-color:#c2653a;box-shadow:inset 0 0 0 1px #c2653a}
.ocq-card b{display:flex;align-items:center;gap:6px;font-size:13px}
.ocq-card small{font-size:12px;line-height:1.35;color:var(--ink-3)}
.ocq-help{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bg-2);font-style:normal;font-size:10px;font-weight:800;color:var(--ink-3);cursor:help}
.ocq-help:hover::after,.ocq-help:focus::after,.ocq-help.is-open::after{content:attr(data-tip);position:absolute;right:-8px;bottom:calc(100% + 8px);z-index:30;width:min(240px,calc(100vw - 48px));padding:8px 10px;border-radius:10px;background:#2a2a28;color:#fff;font-size:12px;font-weight:500;line-height:1.4;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.ocq-px{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:12px;color:var(--ink-3)}
.ocq-px>span:first-child{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a5a44}
.ocx-seg{display:inline-flex;padding:2px;border-radius:9px;background:var(--bg-2)}
.ocx-seg button{border:0;border-radius:7px;padding:5px 12px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer}
.ocx-seg.is-sm button{padding:4px 11px;font-size:12px}
.ocx-seg.is-xs{padding:2px}
.ocx-seg.is-xs button{padding:2px 9px;font-size:11px}   /* Mo's tune: text 11, pad 2 / 9 */
.ocx-seg button.is-on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ocx-seg.is-locked button{cursor:default}
/* Draft task | Change price wears clay (Mo, 2026-09-29, preset D from the tune panel) */
.ocx-fut .ocx-seg{background:#f5e8e0}
.ocx-fut .ocx-seg button{color:#8a5a44}
.ocx-fut .ocx-seg button.is-on{background:#c2653a;color:#fff;box-shadow:none}
.ocx-fut{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 12px;margin:0 0 6px;border-radius:10px;background:var(--bg-2)}
.ocx-fut.is-done{flex-wrap:nowrap;font-size:13px;color:var(--ink-2)}
.ocx-fut.is-done>svg{flex:none;color:var(--green-2)}
.ocx-fut.is-done .occ-link{margin-left:auto}
.ocx-fw{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.ocx-fw small,.ocx-fn{font-size:12px;line-height:1.4;color:var(--ink-3)}
.ocx-px{position:relative;display:inline-flex;align-items:center}
.ocx-px i{position:absolute;left:8px;font-style:normal;font-size:13px;color:var(--ink-3);pointer-events:none}
.ocx-px input{width:88px;padding:4px 8px 4px 18px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);font:inherit;font-size:14px;font-weight:600;text-align:right;color:var(--ink);-moz-appearance:textfield}
.ocx-px input::-webkit-outer-spin-button,.ocx-px input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ocx-busy{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.ocx-busy svg{animation:spin 1s linear infinite}
.ocx-busy.is-err{color:var(--rust)}
.ocx-busy.is-err svg{animation:none}
@media (hover:none){.ocq-help:hover::after,.ocq-help:focus::after{content:none}.ocq-help.is-open::after{content:attr(data-tip)}.ocq-help{width:22px;height:22px;font-size:12px}}   /* a phone: the tap decides, never a sticky hover */

.ofs-conf-call{flex:none;display:inline-flex;align-items:center;margin-left:auto}
.ofs-conf-call+.ofs-conf-m{margin-left:12px}

/* Find a supplier's bottom panel (Mo, 2026-10-02, a desk): the lists, or the quote row being worked. Sticks to the foot of the
   page in the house glass (.cs-glassy carries the look), at most ~40% tall, scrolling inside; folds to its one-line head. */
/* the page under it: no bottom clearance or fade (they are for Threads' floating bar), and the panel sits at the foot even
   when the table is short */
.cs-tl-scroll:has(>.ofs .ofs-panel){display:flex;flex-direction:column;padding-bottom:0;-webkit-mask-image:none;mask-image:none}
.cs-tl-scroll>.ofs:has(.ofs-panel){flex:1 0 auto;display:flex;flex-direction:column;padding-bottom:0}
.ofs:has(>.ofs-panel)>:nth-last-child(2){margin-bottom:20px}
/* solid, not glass (Mo, 2026-10-02: "non-glass feel"): the page's white, a firm edge, a soft shadow upward */
.ofs-panel{position:sticky;bottom:0;z-index:4;margin:auto -4px 0;border-radius:14px 14px 0 0;flex:none;background:var(--panel);border:1px solid var(--line-strong);border-bottom:0;box-shadow:0 -6px 22px -6px rgba(42,36,24,.16);display:flex;flex-direction:column;max-height:min(42vh,460px)}
.ofs-phead{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 14px 6px 8px;flex:none;border-bottom:1px solid var(--line)}
.ofs-panel.is-folded .ofs-phead{border-bottom:0}
.ofs-phead b{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ofs-phead .ofs-mute{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ofs-phead .ofs-link{margin-left:auto;flex:none}
.ofs-pcall{flex:none;display:inline-flex;align-items:center}
.ofs-pfold{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.ofs-pfold svg{transform:rotate(90deg);transition:transform .2s cubic-bezier(.2,.9,.25,1)}
.ofs-panel.is-folded .ofs-pfold svg{transform:rotate(-90deg)}
.ofs-pfold:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.ofs-pbody{overflow:auto;overscroll-behavior:contain;padding:10px 14px 14px;min-height:0}
.ofs-panel .ofs-secs{margin:0}
.ofs-panel .ofs-form{border:0;padding:0;background:none}
.ofs-pask{display:flex;flex-direction:column;gap:10px;padding:4px 0 12px}
.ofs-pq{font-size:15px;font-weight:700;color:var(--ink)}
.ofs-pbtns{display:flex;gap:8px;align-items:center}
/* the quote row being worked in the panel */
/* the row being worked: it and its line read as one soft tinted block (Mo, 2026-10-02, option A of three; was a bar) */
.ofs-q.is-sel{background:color-mix(in oklab,var(--ink) 6%,transparent);border-radius:10px 10px 0 0;border-bottom-color:transparent}
.ofs-call.is-sel{background:color-mix(in oklab,var(--ink) 6%,transparent);border-radius:0 0 10px 10px;border-bottom-color:transparent;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ofs-pfold svg{transition:none}}
/* a confirmed order: the line under a quote only reads its log (Mo, 2026-10-02) */
.ofs-call.is-view{gap:10px}
.ofs-vlog{flex:none;font-size:12px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.ofs-call.is-view:hover .ofs-vlog{color:var(--ink)}
.ofs-panel.is-view .ofs-hist{margin:0}
.ofs-phead.is-nofold{padding-left:16px}

/* Find a supplier: the header above the quote table, and How it works (Mo, 2026-10-02) */
.ofs-qhead{display:flex;align-items:flex-end;gap:12px;padding:2px 2px 8px}
.ofs-qtitle{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0;flex:1}
.ofs-qtitle b{font-size:16px;font-weight:700;color:var(--ink)}
.ofs-qtitle .ofs-mute{font-size:12px;flex-basis:100%}
.ofs-howbtn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink-2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ofs-howbtn:hover{border-color:var(--ink);color:var(--ink)}
.ofs-how{position:absolute;inset:67px 10px auto;z-index:8;max-height:calc(100% - 77px);   /* under the page's 59px crumb: Done and Back stay usable */
  display:flex;flex-direction:column;border-radius:16px;animation:ofs-how-in .22s cubic-bezier(.2,.9,.25,1) both}
@keyframes ofs-how-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.ofs-howh{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 18px;flex:none}
.ofs-howh b{font-size:16px;font-weight:700;color:var(--ink);flex:1}
.ofs-howx{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.ofs-howx:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.ofs-howl{list-style:none;margin:0;padding:0 18px;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px}
.ofs-howl li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ofs-howl li:first-child{border-top:0}
.ofs-hown{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg-2);color:var(--ink-2)}
.ofs-howl li.is-done .ofs-hown{background:color-mix(in oklab,var(--green-2) 14%,transparent);color:var(--green-2)}
.ofs-howl li.is-here .ofs-hown{background:var(--ink);color:#fff}
.ofs-howl b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}
.ofs-howl em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--ink);color:#fff}
.ofs-howl p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ofs-howl p b{display:inline;font-size:inherit}
.ofs-howf{display:flex;align-items:center;gap:12px;padding:12px 18px 14px;flex:none;border-top:1px solid var(--line)}
.ofs-howf .ofs-mute{flex:1;font-size:12px}
@media (prefers-reduced-motion:reduce){.ofs-how{animation:none}}

/* the orders a supplier was on, under its row in the panel (Mo, 2026-10-02) */
.ofs-ordbtn{display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;width:max-content}
.ofs-ordbtn:hover{color:var(--ink)}
.ofs-ordbtn .ofs-chev svg{transform:rotate(90deg)}.ofs-ordbtn.is-open .ofs-chev svg{transform:rotate(-90deg)}
.ofs-olist{display:flex;flex-direction:column;margin:-4px 0 8px 12px;border-left:2px solid var(--line-strong)}
.ofs-orow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto 14px;align-items:center;gap:8px;min-height:36px;padding:4px 8px 4px 12px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.ofs-orow:last-child{border-bottom:0}
.ofs-orow:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}
.ofs-orow .ofs-ow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-size:12px}
.ofs-orow .ofs-om{font-weight:700;font-variant-numeric:tabular-nums}
.ofs-orow svg{color:var(--ink-3)}
/* an order on top of the open one: the same frame and rise, and the order beneath takes the blur */
.oc-peek-host{z-index:97;pointer-events:auto;padding:56px 44px 16px 64px}   /* inset: the order beneath shows around it, a stack 
.oc-card.is-peek .op-side *{pointer-events:none}   /* read only: nothing in it acts on the order beneath */
.oc-card.is-peek .ocf-pen{display:none}
body.oc-peek-open #oc-host .oc-card{filter:var(--under-float,blur(3.5px) brightness(.92));transition:filter .42s cubic-bezier(.4,0,.2,1)}
.oc-peek-m{flex:none;font-weight:800;font-size:18px;padding:4px 10px;border-radius:8px;border:2px solid #7fbf7f;color:#a8dca8}
.oc-peek-m.is-bad{border-color:#d9876b;color:#f0a68a}
.oc-peek-open span{font-size:11px}
/* the whole bar is the toggle (Mo, 2026-10-02) */
.ofs-phead.is-tap{cursor:pointer;user-select:none;border-radius:14px 14px 0 0}
.ofs-panel.is-folded .ofs-phead.is-tap{border-radius:14px 14px 0 0}
@media (hover:hover){.ofs-phead.is-tap:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}}
/* an item: the product, then qty × price under it (Mo, 2026-10-02) */
.c-ts-row small.oc-qty{display:block;width:100%;margin-top:2px}
/* the order waits on an open task (2026-10-02): Confirm is off and says why */
.ofs-blocked{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:10px;background:color-mix(in oklab,var(--amber,#c98a1b) 12%,transparent);color:var(--ink);font-size:13px}
.ofs-blocked svg{flex:none;color:var(--ink-2)}
/* One list, three kinds (Mo, 2026-10-05): filter chips, and a kind tag beside the miles */
.ofs-kinds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 2px 10px}
.ofs-kinds .ofs-chip{display:inline-flex;align-items:center;gap:6px}
.ofs-kn-n{font-size:11px;font-weight:700;opacity:.7}
.ofs-kinds-sub{margin-left:auto;font-size:12px}
.ofs-kn small{display:flex;align-items:center;gap:8px}
.ofs-out.is-prospect{background:color-mix(in oklab,#5b6fa6 14%,transparent);color:#3f4f7d}
.ofs-net .ofs-klist .ofs-krow:last-child{border-bottom:0}
/* Who is this? (2026-10-05): the name box lists the companies near the order it could be; a near-miss name says so */
.ofs-qnw{display:block;position:relative;min-width:0}
.ofs-qnw>.ofs-qname{width:100%}
.ofs-sug{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:280px;max-width:420px;padding:6px;border-radius:12px;display:flex;flex-direction:column}
.ofs-sug-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:4px 8px 6px}
.ofs-sug-r{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.ofs-sug-r b{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofs-sug-r small{font-size:12px;color:var(--ink-3);white-space:nowrap}
.ofs-sug-r:hover,.ofs-sug-r.is-at{background:color-mix(in oklab,var(--ink) 7%,transparent)}
.ofs-looks{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:4px 4px 8px;font-size:12px;color:var(--ink-2)}
.ofs-looks b{font-weight:600;color:var(--ink)}
.ofs-q.is-blank .ofs-qnw{grid-column:1/-1}
.ofs-rtop .ofs-qnw{flex:1}
/* Use from Network is still looking (2026-10-07): a small turning ring, on the bar and at the top of the list */
.ofs-spin{display:inline-block;flex:none;width:12px;height:12px;border:2px solid color-mix(in oklab,var(--ink) 18%,transparent);border-top-color:var(--ink-2);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
.ofs-hload{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.ofs-loading{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:8px 10px;border-radius:10px;background:color-mix(in oklab,var(--ink) 5%,transparent);font-size:12px;color:var(--ink-2)}
.ofs-loading small{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ofs-spin{animation-duration:2.4s}}

/* First order / Repeat beside the customer's name (2026-10-14): a soft chip on the white side */
.op .c-ts-row .oc-pill{margin-left:8px;background:var(--bg-2);vertical-align:1px}
.oc-h-word{font-weight:600;opacity:.82}   /* "Order" before the number, a step quieter than it (Mo, 2026-10-14) */

/* Items as columns (Mo, 2026-10-14): Item · Qty · Unit price · Total; the name cut with … and whole on hover */
.op .c-ts-row.oc-it{display:grid;grid-template-columns:minmax(0,1fr) 92px 104px 84px;align-items:center;column-gap:10px}   /* sits in its row the way Delivery and Sales tax do (Mo, 2026-10-14) */
.op .c-ts-row.oc-it.is-head{min-height:0;padding-top:14px;padding-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.op .c-ts-row.oc-it.is-head span:nth-child(n+2){text-align:right}
.oc-it-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.oc-it-qty,.oc-it-unit,.oc-it-tot{text-align:right;white-space:nowrap}
.oc-it-unit small{color:var(--ink-3);font-size:12px}
.oc-it .oc-qback{color:var(--rust);font-weight:600}
/* no icons on the fields (Mo, 2026-10-14): the row's leading icon is gone across the card's two sides */
.oc-card .op .c-ts-row>.c-ts-ico{display:none}
.op .c-ts-row.oc-it.is-head+.c-ts-row::before{left:0}   /* the line under the table header runs the full width (Mo, 2026-10-14) */
/* the left of the header mirrors the right (Mo, 2026-10-14: "use that same pattern for the left side"): the icon, 20px,
   a 1px line the height of the buttons (72px) in the same white at 16%, 14px, the order number. Desk only. */
@media (min-width:769px){
  .oc-card .c-card-head.oc-head>.c-card-kind{box-sizing:border-box;height:72px;align-self:center;padding-right:20px;margin-right:4px;border-right:1px solid rgba(255,255,255,.16)}
}

/* The thread header's restyle on the order card (Mo, 2026-10-14): "Order #N" at 28px with the word quieter, the actions as
   compact light buttons (owner, Accept PO; the stamps stay). No status line and no links (Mo: "no need for those"). Desk
   only: on a phone the right column is no box (its layout places .oc-h-acts). order-card.js ocHead. */
@media (min-width:769px){
  .oc-h-title b{font-size:28px}
  .oc-head .oc-h-word{font-weight:500;opacity:.7}
  /* no kind icon; "Order" a small label over the number, as the thread header (Mo, 2026-10-14) */
  .oc-card .c-card-head.oc-head>.c-card-kind{display:none}
  .oc-h-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,231,.62);line-height:1}
  /* the label hangs over the number instead of taking its own row, so "#N" is what centres in the header, on the GM%
     stamp's line (Mo, 2026-10-14: "the order number is centered vertically with the GM%") */
  .oc-card .c-card-head.oc-head .oc-h-main{position:relative;gap:0}
  .oc-card .c-card-head.oc-head .oc-h-eyebrow{position:absolute;left:0;bottom:100%;margin-bottom:5px;white-space:nowrap}
  .oc-h-main{gap:6px}
  .oc-head .oc-h-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .oc-head .oc-h-acts{margin-left:0}
  .oc-head .oc-h-acts .cs-glyph,.oc-head .oc-h-acts .cs-glyph:hover{flex-direction:row;width:auto;height:36px;padding:0 12px;gap:6px;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.86);color:var(--ink);opacity:1}
  .oc-head .oc-h-acts .cs-glyph:hover,.oc-head .oc-h-acts .cs-glyph.is-open{background:#fff}
  .oc-head .oc-h-acts .cs-glyph svg{width:16px!important;height:16px!important}
  .oc-head .oc-h-acts .cs-glyph small{font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:inherit;max-width:none}
  /* the owner button wears the header's light tone when assigned (.cs-glyph.assign.is-assigned): ink on the light button */
  .oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph,.oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph small{color:var(--ink)}
}
@media (max-width:768px){.oc-head .oc-h-right{display:contents}.oc-h-eyebrow{display:none}}

/* The order card's header actions on a phone in the desk's style (Mo, 2026-10-14: "align header actions with desktop
   styling"): owner and Accept PO as light buttons with the icon beside the word, 44px for a thumb, gaps between them, no
   tab shapes or top line; a PO stamp keeps its own cell. */
@media (max-width:768px){
  .oc-card .c-card-head.oc-head .oc-h-acts{gap:8px;padding:10px 16px 12px;border-top:0}
  .oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph,.oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph:hover,.oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph.is-open{height:44px;padding:0 10px;gap:6px;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.86);color:var(--ink);opacity:1}
  .oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph:active{background:#fff}
  .oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph svg{width:17px!important;height:17px!important}
  .oc-card .c-card-head.oc-head .oc-h-acts .cs-glyph small{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;max-width:none}
}
/* no ⌄ in the order card's header on a phone (Mo, 2026-10-14): the sheet closes by pulling it down from its grabber */
@media (max-width:768px){.oc-head .oc-down{display:none!important}}
/* Items on a phone as receipt rows (Mo, 2026-10-14, option A: "ideas on how to not ellipse the product name"): no column
   heads; the product's whole name on its own line (it wraps), then "½ cord × $299.00/½ cord" in grey with the line's total
   on the right. Delivery, tax, Paid and We hold stay one-line rows. The desk keeps its four columns. */
@media (max-width:768px){
  .op .c-ts-row.oc-it.is-head{display:none}
  .op .c-ts-row.oc-it{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name name" "qty unit tot";row-gap:3px;column-gap:0;padding-top:10px;padding-bottom:10px}
  .op .oc-it-name{grid-area:name;white-space:normal;overflow:visible;text-overflow:clip;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
  .op .oc-it-qty{grid-area:qty;text-align:left;font-size:13px;color:var(--ink-3)}
  .op .oc-it-unit{grid-area:unit;text-align:left;font-size:13px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis}
  .op .oc-it-unit:not(:empty)::before{content:"\00a0×\00a0"}
  .op .oc-it-tot{grid-area:tot;align-self:end;padding-left:10px}
}

/* Supplier issues on the order card (Mo, 2026-10-15): rows like the rest of the rail; one set aside reads quiet */
.op-si .c-ts-v small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3);line-height:1.45}
.op-si.is-off .c-ts-v{color:var(--ink-3)}
.op-si.is-off .c-ts-v b{font-weight:500;text-decoration:line-through;text-decoration-color:var(--line-strong)}
.op-si-form{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.op-si-who{font-size:13px;font-weight:600;color:var(--ink)}
.op-si-form .oc-mx-why{margin:0}
.op-si-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.oc-rf-for{display:block;margin-top:12px}