/* The header and footer, and the signed-in L-shell (white header across the top, charcoal nav
   down the left, one white plane tucked in the corner with a red seam). Both driven by --nav-w.
   ONE header for both surfaces: a white strip carrying his logo. */
:root{--nav-w:228px;--head-h:92px;--curve:22px;--seam:var(--brand);--seam-w:4px}

/* ---- the header ---- */
.hd{position:sticky;top:0;z-index:30;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:14px;height:var(--head-h)}
/* the logo: his cart, his wordmark, the tagline as real text. The cart's front wheel and the
   tagline share a baseline, so the lockup sits on one line the way the artwork does. */
.brand{display:inline-flex;align-items:flex-end;gap:6.5px;text-decoration:none;flex:0 0 auto}
.brand .bcart{width:76px;height:auto;display:block;margin-bottom:1.5px}
/* one width governs both lines, and the tagline is justified to fill it exactly */
.brand .bwm{width:140px}
.brand .bwm img{width:100%;height:auto;display:block}
.brand .bwm b{display:block;margin-top:3px;font:700 10px/1 Inter,sans-serif;letter-spacing:.055em;text-transform:uppercase;color:var(--gray);text-align:justify;text-align-last:justify;-moz-text-align-last:justify}
/* ---- the type bar: one RC type at a time, on every public page ---- */
.typebar{position:sticky;top:var(--head-h);z-index:29;background:var(--bar);border-bottom:1px solid rgba(255,255,255,.06)}
.typebar .seg{display:flex;gap:4px;height:46px;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.typebar .seg::-webkit-scrollbar{display:none}
.typebar .seg a{flex:1 1 0;min-width:0;height:32px;padding:0 12px;border-radius:8px;color:rgba(255,255,255,.72);font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.typebar .seg a:hover{color:#fff;background:rgba(255,255,255,.07)}
.typebar .seg a.on{background:var(--brand);color:#fff}
.typebar .seg .s{display:none}
/* ten types since 032: each word keeps its own width (never squeezed into the next one), and below 1080px
   the short names (Scale Helis, 3D Helis) take over before anything would have to scroll */
.typebar .seg a{flex:1 1 auto}
@media (max-width:1080px){.typebar .seg .l{display:none}.typebar .seg .s{display:inline}}
/* the row scrolls on a phone, so each end that has more behind it shows a fade and a chevron.
   public.js toggles .more-left / .more-right from the scroll position; neither shows when it fits. */
.typebar::before,.typebar::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;opacity:0;transition:opacity .18s;z-index:2}
.typebar::before{left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M6.6 1.4L1.4 7l5.2 5.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 9px center/7px 13px no-repeat,linear-gradient(90deg,var(--bar) 46%,rgba(14,17,22,0) 100%)}
.typebar::after{right:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.4 1.4L6.6 7l-5.2 5.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center/7px 13px no-repeat,linear-gradient(270deg,var(--bar) 46%,rgba(14,17,22,0) 100%)}
.typebar.more-left::before{opacity:1}
.typebar.more-right::after{opacity:1}
@media (max-width:820px){.typebar .seg{height:44px;gap:2px;scroll-padding:0 30px}.typebar .seg a{flex:0 0 auto;padding:0 13px;font-size:12.5px}.typebar .seg .l{display:none}.typebar .seg .s{display:inline}}
.hsearch{flex:1 1 auto;max-width:520px;min-width:0;position:relative}
.hsearch input{width:100%;height:38px;padding:0 12px 0 36px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.hsearch input::placeholder{color:var(--faint)}
.hsearch input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,34,0,.14)}
.hsearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint)}
.hd .sp{flex:1 1 auto}
/* The controls center on the WORDMARK + SLOGAN block, not on the header (his report 2026-09-23: the
   lockup looked dropped next to the search and buttons). .brand bottom-aligns that block to the tall
   cart (front wheel on the tagline baseline, settled), so its center sits below the header's.
   Measured in Chrome: 16.95px low at desktop, 8.52px on a phone. Moving the controls keeps the lockup. */
:root{--hd-drop:16.95px}
.hd .hsearch,.hd .hnav{position:relative;top:var(--hd-drop)}
.hd .hnav{display:flex;align-items:center;gap:8px}
.hbtn{display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:9px;border:1px solid var(--line-2);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;background:#fff;cursor:pointer;position:relative}
.hbtn:hover{border-color:var(--hover-line);color:var(--ink)}
.hbtn[hidden]{display:none}
.hbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.hbtn.primary:hover{background:var(--brand-hover)}
.hbtn .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
/* the header avatar (see headAvatar in src/render.js) */
.hav{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line);font-size:14px;font-weight:800;letter-spacing:.02em;text-decoration:none;cursor:pointer;padding:0}
.hav[hidden]{display:none}
/* the staff dot (public/js/staffq.js): on a wrapper, because .hav clips its own children */
.havwrap{position:relative;display:inline-flex;flex:0 0 auto}
.havwrap .qdot{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid #fff;pointer-events:none}
.havwrap:has(.hav[hidden]){display:none}
.staffq{position:fixed;right:20px;bottom:20px;z-index:60;width:400px;max-width:calc(100% - 32px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(20,22,26,.18);padding:14px 16px 14px}
.staffq .sq-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--ink)}
.staffq .sq-later{margin-left:auto;height:30px;padding:0 10px}
.staffq .sq-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.staffq ul{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.staffq ul b{color:var(--ink)}
.staffq .sq-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:760px){.staffq{left:16px;right:16px;width:auto;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom))}}
.hav img{width:100%;height:100%;object-fit:cover;display:block}
.hav.out{background:#fff;color:var(--muted);border-color:var(--line-2)}
.hav:hover{border-color:var(--hover-line)}
@media (max-width:720px){.hd .wrap{gap:10px}.hsearch{display:none}.hbtn.txt{display:none}
/* the narrowest phones (320 wide): logo + My Ads + Sell overflowed by 17px, so the buttons and gutters tighten, never the lockup */
@media (max-width:360px){.hd .wrap{padding-left:12px;padding-right:12px;gap:8px}.hd .hnav{gap:6px}.hbtn{padding:0 9px}}
  :root{--head-h:70px;--hd-drop:8.52px}
  .brand{gap:4.5px}.brand .bcart{width:50px}.brand .bwm{width:112px}.brand .bwm b{font-size:8.5px;letter-spacing:.03em}}

/* ---- footer: the header lockup, then the links ---- */
.ft{margin-top:48px;padding:26px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
/* the link column is bottom-aligned to the lockup, then MEASURED: the links' cap tops sit on the top
   of the MARKET letters and the note's baseline on the tagline's baseline (0.00px at both sizes) */
.ft .ftrow{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
/* the lockup is the header's own .brand, same size and layout */
.ft .ftcol{display:flex;flex-direction:column;gap:9.36px;margin-bottom:-.5px;min-width:0}
.ft .ftlinks a,.ft .ftnote{line-height:1}
.ft .ftlinks{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft .ftnote{color:var(--faint)}
.ft a{color:var(--muted);text-decoration:none}
.ft a:hover{color:var(--ink)}
/* the sign-in page: the lockup over the card */
.signlogo{display:block;width:120px;margin:30px auto 0}
.signlogo img{width:100%;height:auto;display:block}
@media (max-width:720px){.ft .ftcol{gap:3.96px}}
@media (max-width:600px){.ft .ftrow{gap:14px}.ft .ftcol{gap:8px;margin-bottom:0}}

/* ---- the signed-in L-shell ---- */
body.shell-body{background:var(--charcoal)}
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);grid-template-rows:var(--head-h) minmax(0,1fr);min-height:100vh}
.shell .hd{grid-column:1 / -1;position:sticky}
.shell .hd .wrap{max-width:none;padding:0 20px}
.snav{background:var(--charcoal);padding:14px 10px 40px;position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h));overflow-y:auto}
.snav .grp{padding:6px 0 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.snav .grp:last-child{border-bottom:0}
.snav .gl{padding:8px 10px 6px;font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.snav a{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border-radius:8px;color:rgba(255,255,255,.72);font-size:13.5px;text-decoration:none}
.snav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.snav a.on{color:var(--brand-lite)}
.snav a .n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.snav svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plane{background:var(--page);border-top-left-radius:var(--curve);min-height:calc(100vh - var(--head-h));padding:26px 28px 40px;border-top:var(--seam-w) solid var(--seam);border-left:var(--seam-w) solid var(--seam)}
.plane__body{max-width:1120px;min-width:0}
.ptitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ptitle h1{font-size:22px;white-space:nowrap}
.tabs{position:fixed;left:0;right:0;bottom:0;display:none;background:var(--charcoal);border-top:1px solid rgba(255,255,255,.08);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:rgba(255,255,255,.62);font-size:10.5px;font-weight:600;text-decoration:none;position:relative}
.tabs a.on{color:var(--brand-lite)}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs .n{position:absolute;top:0;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
@media (max-width:820px){
  :root{--nav-w:0px;--curve:0px;--seam-w:0px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .snav{display:none}
  .plane{padding:18px 16px calc(96px + env(safe-area-inset-bottom, 0px))}   /* clear the tab bar, which grows by the home-indicator inset */
  .tabs{display:flex}
}
.typebar .seg a.all{flex:0 0 auto;padding:0 16px}

/* ---- Super Admin > Taxonomy: a detail row (2026-10-05). The grip leads; label, question, type and Required
   sit on one line; under it the choices (or the unit) and the gate, which is ONE control, "Asked": Every
   time, or Only when <a choice above> is <answers>. The gate is shaded only when a rule is set, so the
   conditional rows show at a glance. Desktop only, like every setup screen. ---- */
.txrow{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 10px;margin-top:8px}
.txrow [data-grip]{color:var(--faint);cursor:grab;touch-action:none;user-select:none;padding-top:31px;line-height:1}
.txtop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px}
.txtop .txlabel{flex:1 1 170px;min-width:0}
.txtop .txq{flex:2.2 1 260px;min-width:0}
.pform .txlabel label .mchip{margin-left:7px;vertical-align:1px}
.txreq{display:flex;align-items:center;gap:10px;height:38px;flex:0 0 auto}
.txbot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 14px}
.txbot > *{margin-top:10px}
.txopts{flex:1 1 300px;min-width:0}
.txunit{flex:0 0 110px}
.txgate{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:38px;font-size:12.5px;color:var(--muted)}
.txgate:empty{display:none}
.txgate.set{padding:3px 10px;background:var(--chip);border-radius:9px}
.txgate .gl{font-weight:700;color:var(--ink)}
.pform .txgate select{width:auto;min-width:132px;max-width:280px;height:31px;font-size:12.5px;font-weight:600;padding:0 8px}
.txgate .gneed{color:var(--brand-ink);font-weight:600}
.txgate .gnote{flex-basis:100%;color:var(--warn);font-weight:600;padding-bottom:4px}
.txfoot{display:flex;align-items:center;gap:8px;margin-top:12px}
.txfoot #txdirty{font-size:12.5px;margin-left:4px}
/* Super Admin > Taxonomy, the Disciplines and Kinds lists: every name field the same width. The key chip has its
   own fixed column (it was `auto`, so a long key made its row's field shorter than its neighbors'). */
.adrow.axrow{grid-template-columns:auto minmax(0,1fr) 148px;cursor:grab}   /* two classes: sell.css loads later and its .adrow columns would win */
.axrow .mchip{justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.axrow [data-grip]{color:var(--faint)}