/* Magpie app theme: PAPER / INK / SIGNAL (Build -119, 2026-11-04).
   Jeff approved the dashboard redesign concepts (v3) and ordered
   the rebuild: "Yes do it. I love the design." This layer restyles
   the whole app to the approved system: warm Paper background,
   deep Ink text, ONE Signal accent, and the blue-to-green logo
   gradient reserved for the logo and the single primary button
   on each screen. Cards split by hairlines — no shadows. Type is
   Instrument Sans; Instrument Serif italic carries exactly one
   human line per screen (the greeting).

   Loaded AFTER theme-v2.css: every rule here re-declares its
   counterpart, so no Slotted-era value survives the cascade on
   the surfaces this layer covers. Legacy variable names are
   re-pointed at the new tokens so older rules that reference
   them resolve to the new system too. */

:root {
  /* Approved tokens (design artifact, exact) */
  /* Build -138 (Jeff, 2026-11-06): the warm cream theme is
     dead — the app background is pure white on every surface,
     every role; structure comes from clean borders, never from
     a tinted page. */
  --paper: #FFFFFF;
  --paper2: #FFFFFF;
  --card: #FFFFFF;
  --ink: #171512;
  --ink2: #6F6A61;
  --ink3: #9A958A;
  --line: #E8E6E1;
  --line2: #F0EFEA;
  --hover: #F7F7F4;
  --accent: #FF4D00;
  --accent-soft: #FFF0E8;
  --grad: linear-gradient(92deg, #185BFF 0%, #0AA6C2 38%, #00B67A 72%, #22C55E 100%);
  /* Legacy tokens, re-pointed */
  --black: #171512;
  --black2: #26231F;
  --panel-d: #171512;
  --mint: #BFE9D2;
  --mint-b: #D8F3E3;
  --mint-pale: #FFF0E8;
  --mint-soft: #7BD8AE;
  --mint-deep: #0AA6C2;
  --mint-dot: #00B67A;
  --hair-d: #3A372F;
  --bg: #FAF7F1;
  --bg2: #F3EEE3;
  --panel: #FFFFFF;
  --panel-2: #F3EEE3;
  --text: #171512;
  --muted: #6F6A61;
  --blue: #0AA6C2;
  --teal: #0AA6C2;
  --green: #00B67A;
  --red: #C2482B;
  --amber: #B97A0F;
  --sh-sm: 0 0 0 rgba(23,21,18,0);
  --sh-md: 0 0 0 rgba(23,21,18,0);
  --sh-lg: 0 0 0 rgba(23,21,18,0);
  --r-lg: 20px;
  --r-md: 18px;
  --r-sm: 14px;
  --radius: 18px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

body {
  background: var(--paper);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
h1, h2, h3, .display { font-family: 'Instrument Sans', system-ui, sans-serif; }
.num { font-family: 'Instrument Sans', system-ui, sans-serif; }
a { color: var(--ink); }
.tlink { color: var(--mint-deep); }
.grad-text { color: var(--mint-deep); }
.serif-line { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }

/* ---------- buttons: ink pill default, ONE gradient primary ---------- */
.btn {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: none; transition: background .15s ease, border-color .15s ease;
}
.btn:hover { transform: none; background: var(--black2); box-shadow: none; }
.btn.ws-primary { background: var(--grad); color: #fff; border: 0; border-radius: 999px; padding: 0 22px; }
.btn.ws-primary:hover { background: var(--grad); filter: brightness(1.05); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.ws-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.btn.ws-outline:hover { border-color: var(--ink3); background: #fff; }
.btn.danger { background: #F9E9E4; color: var(--red); border: 1px solid #EDD5CB; }
.btn:disabled { opacity: .5; }

/* ---------- cards & panels: hairlines, no shadows ---------- */
.card, .panel, .wcard, .kpi-card, .empty-card, .check-card, .plan-card {
  background: #fff; border: 1px solid var(--line); box-shadow: none; border-radius: var(--r-lg);
}
.wcard > h3, .panel h3, .card h3 { letter-spacing: -.02em; }
.kpi-num { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.kpi-label { color: var(--ink3); }
.kpi-sub { color: var(--ink2); }
.empty-card .ec-t { color: var(--ink); }
.empty-card .ec-s { color: var(--ink2); }

/* ---------- notices & badges ---------- */
.notice { background: var(--paper2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-md); }
.notice.blue { background: var(--paper2); border-color: var(--line); color: var(--ink); }
.badge { background: var(--paper2); border: 1px solid var(--line); color: var(--ink2); }
.badge.ok { background: #E7F7EE; border-color: #CDEBD8; color: #0E7A4A; }
.badge.warn { background: #FFF3E4; border-color: #F0DFC2; color: #8A5A00; }
.badge.bad { background: #F9E9E4; border-color: #EDD5CB; color: #A83A1E; }
.badge.info { background: var(--paper2); border-color: var(--line); color: var(--ink2); }
.badge.tier { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge.elite { background: var(--ink); border-color: var(--ink); color: #fff; }
.live-pill { background: #E7F7EE; color: #0E7A4A; }
.live-pill i { background: #00B67A; }
.beta-pill { background: var(--accent-soft); color: #9A2E00; }
.delta-pill { background: var(--paper2); border: 1px solid var(--line); color: var(--ink2); }

/* ---------- segmented tabs (design .seg) ---------- */
.ws-tabs, .tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 2px;
  background: var(--paper2); border: 1px solid var(--line);
  padding: 3px; border-radius: 999px; margin: 14px 0;
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
.ws-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.ws-tab, .tabs button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 999px;
  font: 700 .82rem 'Instrument Sans', system-ui, sans-serif; color: var(--ink2);
  cursor: pointer; white-space: nowrap; min-height: 0; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-tab.on, .tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(23,21,18,.08); }
.ws-tab .cnt { background: var(--paper2); border: 1px solid var(--line); color: var(--ink2); border-radius: 999px; font-size: .68rem; font-weight: 800; padding: 1px 7px; }
.ws-tab.on .cnt { background: var(--accent-soft); border-color: #FFD8C2; color: #9A2E00; }

/* ---------- forms ---------- */
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], input[type="date"], select, textarea {
  border-color: var(--line); border-radius: 12px; background: #fff; color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--ink3); outline: none; box-shadow: 0 0 0 3px var(--line2); }
.field label { color: var(--ink2); }

/* ---------- shapes: numbers as shapes (design vocabulary) ---------- */
.donut119 { --p: 50; width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#0AA6C2 calc(var(--p) * 1%), #EFE9DD 0); display: grid; place-items: center; flex: 0 0 auto; }
.donut119 > span { background: #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: var(--ink); }
.donut119.sm { width: 46px; height: 46px; }
.donut119.sm > span { width: 32px; height: 32px; font-size: .66rem; }
.lbar119 { height: 6px; background: var(--line2); border-radius: 99px; overflow: hidden; }
.lbar119 > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #185BFF, #00B67A); }
.ring119 { --p: 0; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(#00B67A calc(var(--p) * 1%), #EFE9DD 0); display: grid; place-items: center; flex: 0 0 auto; }
.ring119 > span { background: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font-weight: 800; font-size: .62rem; color: var(--ink); }
.sdot119 { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.status119 { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--paper2); border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.steps119 { display: inline-flex; gap: 5px; align-items: center; }
.steps119 i { width: 7px; height: 7px; border-radius: 50%; background: #DAD2BF; display: block; }
.steps119 i.done { background: #00B67A; }
.steps119 i.now { background: var(--ink); }
.bars119 { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.bars119 i { width: 7px; border-radius: 2px; background: #0AA6C2; display: block; }
.bigcode119 { font-size: 1.7rem; font-weight: 800; letter-spacing: .22em; color: var(--ink); }

/* ---------- home greeting + next list ---------- */
.home-greet { margin: 4px 0 14px; }
.hg-hi { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.hg-line { color: var(--ink2); }
.nx-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin: 14px 0; }
.nx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.nx-head .nx-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.nx-head .nx-sub { color: var(--ink2); font-size: .85rem; }
.nx-hero { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: linear-gradient(180deg, #fff, #FFFBF3); margin-top: 12px; }
.nx-hero .nx-hero-t { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.nx-hero .nx-hero-s { color: var(--ink2); font-size: .88rem; line-height: 1.5; margin: 0 0 12px; }
.nx-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line2); flex-wrap: wrap; }
.nx-row .nx-tx { flex: 1 1 180px; }
.nx-row:first-of-type { border-top: 0; }
.nx-row .nx-tx { flex: 1; min-width: 0; font-size: .92rem; }
.nx-row .nx-tx .nx-sub2 { color: var(--ink2); font-size: .82rem; margin-top: 1px; }
.nx-row .btn { flex: none; }
.nx-done-line { color: var(--ink2); font-size: .85rem; padding: 10px 0 2px; border-top: 1px solid var(--line2); }
.shapes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.shape-cell { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.shape-cell .sc-tx { min-width: 0; }
.shape-cell .sc-num { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; display: block; }
.shape-cell .sc-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); display: block; margin-top: 3px; }
.shape-cell .sc-sub { font-size: .78rem; color: var(--ink2); display: block; margin-top: 3px; line-height: 1.4; }
@media (max-width: 640px) { .shapes-row { grid-template-columns: 1fr; gap: 8px; } .shape-cell { padding: 12px; gap: 10px; } .shape-cell .sc-num { font-size: 1.3rem; } }

/* Sig card becomes a plain white card in the new system */
.sig-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: none; }
body.v3-on .sig-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .sig-card { background: #fff; margin-left: 0; margin-right: 0; padding-left: 22px; padding-right: 22px; }
.sig-card .sig-item { background: transparent; border: 0; border-top: 1px solid var(--line2); border-radius: 0; margin-top: 0; }
.sig-pill { border: 1px solid var(--line); box-shadow: none; font-family: 'Instrument Sans', system-ui, sans-serif; }
.sig-pill:hover { box-shadow: none; border-color: var(--ink3); }
.check-card { padding: 18px; }
.check-row.done .check-ic { background: #E7F7EE; border-color: #CDEBD8; }
body.v3-on #founding-dash .kpi-card { background: #fff; border-color: var(--line); }
body.v3-on #founding-dash .kpi-card .kpi-num { color: var(--ink); }
.snap-strip { background: #fff; border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.snap-num { font-weight: 700; letter-spacing: -.03em; }
.ask-sig { background: #fff; border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.more-row { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.more-row:hover { border-color: var(--ink3); }
.lib-row { border-top: 1px solid var(--line2); }
.offer-card { background: #fff; border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }

/* ---------- shell: top bar ---------- */
#topbar2 { background: rgba(250,247,241,.92); border-bottom: 1px solid var(--line2); }
.tb2-name { font-family: 'Instrument Sans', system-ui, sans-serif; }
.tb2-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: 'Instrument Sans', system-ui, sans-serif; box-shadow: none; }
.tb2-btn:hover { border-color: var(--ink3); }
.tr-ava, .tb2-ava { background: var(--grad); }
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.ws-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.ws-sub { color: var(--ink2); }

/* ---------- rail head / foot (desktop, Build -119) ---------- */
.tab-railhead { display: none; }
.tab-railfoot { display: none; }
.tab-grouplabel { display: none; }
@media (min-width: 768px) {
  body.v3-on #topbar2 { display: none; }
  body.v3-on #tabbar { padding-top: 14px; }
  .tab-railhead { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
  .tab-railhead img { height: 26px; width: auto; display: block; }
  .tab-railhead .trh-sub { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
  .tab-grouplabel { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 12px 12px 4px; }
  body.v3-on #tabbar { display: flex; flex-direction: column; }
  #tabbar .tab-item.tab-primary { order: 10; }
  #tabbar .tab-grouplabel { display: block; order: 20; }
  #tabbar .tab-item.tab-secondary { order: 30; }
  #tabbar .tab-item.tab-sigpin { order: 35; border: 1px solid var(--line); background: #fff; }
  #tabbar .tab-item.tab-sigpin.on { background: var(--accent-soft); }
  #tabbar .tab-more-sep { order: 38; }
  #tabbar .tab-signout { order: 40; }
  .tab-railfoot { display: block; margin-top: auto; border-top: 1px solid var(--line2); padding-top: 10px; }
  .tab-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; }
  .tab-user .tu-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
  .tab-user .tu-name { font-weight: 700; font-size: .9rem; line-height: 1.15; }
  .tab-user .tu-sub { font-size: .76rem; color: var(--ink2); }
  #tabbar .tab-item.tab-secondary { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  #tabbar .tab-item.tab-secondary .tab-label { font-size: .88rem; font-weight: 600; }
  #tabbar .tab-item:hover { background: var(--hover); }
  #tabbar .tab-item.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); }
  #tabbar .tab-item.on:hover { background: var(--accent-soft); }
}

/* ---------- mobile bottom bar (Build -119): the 72px side rail is gone ---------- */
@media (max-width: 767.98px) {
  body.v3-on main { margin-left: 0; width: 100%; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.v3-on #tabbar {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto;
    border-right: 0; border-top: 1px solid var(--line);
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    padding: 7px 8px calc(9px + env(safe-area-inset-bottom));
    overflow: visible;
  }
  body.v3-on #tabbar .tab-main { flex-direction: row; align-items: stretch; gap: 2px; }
  body.v3-on #tabbar .tab-item { flex: 1 1 0; width: auto; min-height: 52px; padding: 6px 2px 5px; border-radius: 999px; }
  body.v3-on #tabbar .tab-item.tab-secondary,
  body.v3-on #tabbar .tab-more-sep,
  body.v3-on #tabbar .tab-signout,
  body.v3-on #tabbar .tab-grouplabel { display: none; }
  body.v3-on #tabbar .tab-item .tab-ic { padding: 0; background: none; }
  body.v3-on #tabbar .tab-item.on { background: var(--ink); color: #fff; box-shadow: none; }
  body.v3-on #tabbar .tab-item.on .tab-ic { background: none; }
  body.v3-on #tabbar .tab-item .tab-label { display: block; }
  body.v3-on #tabbar .tab-item .lbl-full { display: none; }
  body.v3-on #tabbar .tab-item .lbl-short { display: inline; }
  .tab-badge { background: var(--accent); }
}

/* Sig floats above the mobile bar (design); desktop keeps it too */
#agent-fab {
  width: auto; height: 46px; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; padding: 0 16px 0 8px; gap: 8px;
  font: 700 .88rem 'Instrument Sans', system-ui, sans-serif;
  box-shadow: 0 10px 26px rgba(23,21,18,.25);
}
#agent-fab img { width: 32px; height: 32px; border-radius: 50%; display: block; }
#agent-fab .fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #00B67A; flex: none; }
#agent-fab .fab-badge { background: var(--accent); border-color: var(--ink); }
body.v3-on #agent-fab.show, body.v3-slim #agent-fab.show { display: flex !important; }
@media (max-width: 767.98px) {
  #agent-fab { bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; }
}

/* ---------- admin rail: labeled rail on desktop, bottom bar on phones ---------- */
.rail-item { font-family: 'Instrument Sans', system-ui, sans-serif; color: var(--ink2); }
.rail-item:hover { background: var(--hover); color: var(--ink); }
.rail-item.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.rail-label { font-family: 'Instrument Sans', system-ui, sans-serif; }
.rail-badge { background: var(--accent); }
.rail-label-short { display: none; }
.cc-local .lbar119 { display: block; margin: 8px 0 6px; }
.row-more { display: block; }
@media (min-width: 768px) { .rail-more { display: none !important; } }
@media (max-width: 767.98px) {
  .rail-label-full { display: none; }
  .rail-label-short { display: inline; }
}
@media (min-width: 768px) {
  body.rail-on #rail { width: 232px; align-items: stretch; padding: 14px 12px 16px; }
  body.rail-on main, body.rail-on .footer { margin-left: 232px; }
  body.rail-on main { width: calc(100% - 232px); }
  .rail-brand { width: 100%; justify-content: flex-start; padding: 2px 8px 10px; height: auto; }
  .rail-brand img { width: auto; height: 26px; border-radius: 0; }
  .rail-item { width: 100%; min-height: 46px; flex-direction: row; justify-content: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; }
  .rail-label { font-size: .92rem; font-weight: 600; text-align: left; }
  .rail-item.on .rail-label { font-weight: 800; }
  .rail-badge { position: static; margin-left: auto; border: 0; }
  .rail-sep { width: auto; margin: 10px 4px; }
  .rail-foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 4px 0; border-top: 1px solid var(--line2); }
}
@media (max-width: 767.98px) {
  body.rail-on main, body.rail-on .footer { margin-left: 0; }
  body.rail-on main { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.rail-on #rail {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto;
    flex-direction: row; align-items: stretch; gap: 2px;
    border-right: 0; border-top: 1px solid var(--line);
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    padding: 7px 8px calc(9px + env(safe-area-inset-bottom)); overflow: visible;
  }
  body.rail-on #rail .rail-brand,
  body.rail-on #rail .rail-sep,
  body.rail-on #rail .rail-foot,
  body.rail-on #rail .rail-item:not(.rail-primary) { display: none; }
  body.rail-on #rail .rail-item.rail-primary {
    display: flex; flex: 1 1 0; width: auto; min-height: 52px;
    flex-direction: column; gap: 2px; padding: 6px 2px 5px; border-radius: 999px;
  }
  body.rail-on #rail .rail-item.rail-primary.on { background: var(--ink); color: #fff; box-shadow: none; }
  /* Build -125: the phone bar reads in the design's order —
     Review · Creators · Markets · Wallet — regardless of the
     desktop rail's section order. */
  body.rail-on #rail .rail-p-home { order: 1; }
  body.rail-on #rail .rail-p-applications { order: 2; }
  body.rail-on #rail .rail-p-sig { order: 3; }
  body.rail-on #rail .rail-p-stats { order: 4; }
  body.rail-on #rail .rail-p-markets { order: 5; }
  body.rail-on #rail .rail-label { font-size: .62rem; }
  body.rail-on #rail .rail-badge { top: 0; right: 4px; }
}

/* ---------- admin surfaces ---------- */
body.admin-on .kpi-card { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: none; }
body.admin-on .kpi-card .kpi-num { color: var(--ink); }
body.admin-on .preview-cta { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.admin-deck-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: none; overflow: hidden; }
.admin-deck-btn.approve, .admin-deck-decide .btn.approve { background: var(--grad); color: #fff; border: 0; }
.admin-deck-btn.reject, .admin-deck-decide .btn.reject { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.row-more-wrap { position: relative; display: inline-block; }
.row-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 190px; box-shadow: 0 16px 40px rgba(23,21,18,.16); display: none; }
.row-more-menu.open { display: block; }
.row-more-menu .btn { display: flex; width: 100%; justify-content: flex-start; margin: 2px 0; }

/* ---------- grids & cards with photos ---------- */
.creator-card { background: #fff; border: 1px solid var(--line); box-shadow: none; border-radius: 18px; overflow: hidden; }
.mkt-photo { height: 92px; background-size: cover; background-position: center; border-radius: 14px 14px 0 0; margin: -1px -1px 12px; }
.mkt-photo.grad { background: var(--grad); }
.pilot-fundbar { height: 10px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.pilot-fundbar > i { display: block; height: 100%; background: linear-gradient(90deg, #185BFF, #00B67A); border-radius: 99px; }

/* admin tables stay calm */
.table-wrap { border-color: var(--line); }
th { color: var(--ink3); }
td, th { border-color: var(--line2); }

/* sheets (More menus, admin mobile sheet) */
.sheet { background: #fff; border-radius: 22px 22px 0 0; }
.sheet-row { border-top: 1px solid var(--line2); font-family: 'Instrument Sans', system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .btn, .tab-item, .rail-item { transition: none; }
}

/* ---------- Build -119 cascade close-out ----------
   theme-v2's Slotted layer (ink rails, mint pills, the ink
   greeting field, the full-bleed mint Sig field) targets the
   same body.v3-on / body.v3-slim scopes this file restyles.
   It loads first, so these re-declarations — same scopes,
   later in the cascade — are what actually paint. Nothing is
   removed from theme-v2 (verify suites pin its strings); the
   approved Paper system simply wins every contested property. */

/* rails: near-white (#FDFBF7 in the design), never ink */
body.v3-on #tabbar, body.v3-slim #tabbar { background: #FDFBF7; box-shadow: none; }
body.rail-on #rail { background: #FDFBF7; }
body.v3-on .tab-item, body.v3-slim .tab-item { color: var(--ink2); margin: 0; justify-content: flex-start; }
body.v3-on .tab-item.on, body.v3-slim .tab-item.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
body.v3-on .tab-item.on .tab-label, body.v3-slim .tab-item.on .tab-label { color: var(--ink); }
body.v3-on .tab-item.on .tab-sig-img { box-shadow: none; }
body.v3-on .tab-badge { box-shadow: none; }
@media (max-width: 767.98px) {
  body.v3-on #tabbar { background: rgba(255,255,255,.97); }
  body.v3-on .tab-item { justify-content: center; }
  body.v3-on .tab-item.on { background: var(--ink); color: #fff; box-shadow: none; }
  body.v3-on .tab-item.on .tab-label { color: #fff; }
}

/* top bar on slim/founding shells: paper, not ink */
body.v3-on #topbar2, body.v3-slim #topbar2 { background: rgba(250,247,241,.92); border-bottom: 1px solid var(--line2); }
body.v3-on .tb2-id, body.v3-slim .tb2-id { color: var(--ink); }
body.v3-on .tb2-name, body.v3-slim .tb2-name { color: var(--ink); }
body.v3-on .tb2-ava.txt, body.v3-slim .tb2-ava.txt { background: var(--grad); color: #fff; }
body.v3-on .tb2-btn, body.v3-slim .tb2-btn { background: #fff; border-color: var(--line); color: var(--ink); }
body.v3-on .tb2-btn .tab-badge, body.v3-slim .tb2-btn .tab-badge { box-shadow: none; }

/* Homes: the ws-head stays visible (it carries the screen's
   name + Sig's one line), and the greeting is a plain paper
   greeting — no ink field, no bled margins, no kicker. */
body.v3-on :is([data-dash], #creator-home, #founding-dash) .ws-head { display: block; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .home-greet {
  background: transparent; color: var(--ink);
  margin: 4px 0 14px; padding: 0;
}
body.v3-on :is([data-dash], #creator-home, #founding-dash) .home-greet::before { content: none; display: none; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .hg-hi { font-size: 1.35rem; line-height: 1.25; letter-spacing: -.02em; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .hg-line { color: var(--ink2); font-size: 1rem; margin-top: 4px; max-width: none; }

/* Sig's home field is a plain white card at content width */
body.v3-on :is([data-dash], #creator-home, #founding-dash) .sig-card {
  background: #fff; margin-left: 0; margin-right: 0; padding-left: 22px; padding-right: 22px;
}
body.v3-on :is([data-dash], #creator-home, #founding-dash) .check-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin-bottom: 0;
}
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-list { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-day { background: var(--paper2); text-transform: none; letter-spacing: normal; font-size: .8rem; padding: 10px 14px 6px; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-row { padding-left: 14px; padding-right: 14px; }

/* admin chrome: the rail is paper here too, KPI tiles white */
body.admin-on #rail { background: #FDFBF7; }
body.rail-on #rail { background: #FDFBF7; border-right: 1px solid var(--line); }
body.rail-on .rail-item { color: var(--ink2); }
body.rail-on .rail-item:hover { background: var(--hover); color: var(--ink); }
body.rail-on .rail-item.on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
body.rail-on .rail-brand img { box-shadow: none; }
.rail-item.on .rail-sig-img { box-shadow: none; }
.mkt-card { padding-top: 0; overflow: hidden; }
.mkt-photo { margin: 0 -26px 12px; border-radius: 0; }
@media (max-width: 640px) { .mkt-photo { margin: 0 -20px 12px; } }

/* ============================================================
   Build -121 (Jeff, 2026-11-04, from the live redesign on
   his phone): "I want full width for the working screen in
   admin portal (and the rest if they aren't there). Also
   much less scrolling and all that for me. More bar. More
   sections." Three moves: work shells drop the centered
   1140px column and use the whole screen; a denser rhythm
   so a home shows its next step, its numbers and the start
   of its activity without a long scroll; and the Admin
   section bar — every section as a chip on phones, where
   the bottom bar only holds the four primaries.
   ============================================================ */

/* ---- 1. Full width: the work shells use the whole screen ---- */
body.v3-on main, body.v3-slim main, body.admin-on main, body.preview-on main { max-width: none; }
@media (min-width: 768px) {
  body.v3-on .wrap, body.v3-slim .wrap { max-width: none; margin-left: 0; margin-right: 0; }
  body.rail-on #toprow { margin-left: 232px; }
  body.rail-on #toprow .wrap { max-width: none; width: auto; }
  .tb2-in { max-width: none; }
}
@media (max-width: 767.98px) {
  /* the phone rail is a bottom bar: no 78px side offset, and
     the V4.2 phone-fit width (calc(100% - 78px)) goes too —
     it left a dead strip down the right of every admin
     screen and squeezed the work into 312px on a 390 phone */
  body.rail-on main { width: auto; }
  body.rail-on #toprow { margin-left: 0; padding: 10px 12px 0; }
  body.rail-on #toprow .wrap { width: auto; }
  body.v3-on main, body.v3-slim main, body.admin-on main { padding-left: 12px; padding-right: 12px; }
}

/* ---- 2. Density: tighter rhythm on the work shells ---- */
body.v3-on .panel, body.v3-slim .panel, body.admin-on .panel { padding: 20px; margin-bottom: 14px; }
@media (max-width: 640px) {
  body.v3-on .panel, body.v3-slim .panel, body.admin-on .panel { padding: 15px; margin-bottom: 12px; }
}
body.v3-on .ws-tabs, body.v3-slim .ws-tabs, body.admin-on .ws-tabs,
body.v3-on .tabs, body.v3-slim .tabs, body.admin-on .tabs { margin: 10px 0; }
.nx-card { padding: 15px; margin: 10px 0; }
.nx-row { padding: 9px 0; }
.home-greet { margin: 2px 0 10px; }
.shapes-row { margin: 10px 0; gap: 10px; }
body.v3-on :is([data-dash], #creator-home, #founding-dash) .feed-row { padding-top: 10px; padding-bottom: 10px; }
.sig-card { margin-bottom: 12px; }
.check-row { padding: 8px 0; }
/* the three shapes stay in ONE row on phones — stacked, they
   pushed the activity feed a full screen down */
@media (max-width: 640px) {
  .shapes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .shape-cell { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; border-radius: 14px; }
  .shape-cell .sc-num { font-size: 1.05rem; }
  .shape-cell .sc-sub { font-size: .68rem; line-height: 1.3; }
  .donut119 { width: 42px; height: 42px; }
  .donut119 > span { width: 29px; height: 29px; font-size: .6rem; }
}

/* ---- 3. Admin home: summary strip + two-column work grid ---- */
#admin-summary:empty { display: none; }
.admin-sum121, #admin-summary { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 12px; }
/* main is a shrink-to-content flex item (margin: 0 auto), so
   the strip's chip row must cap its own intrinsic width or
   it drags the whole admin screen wider than the phone */
#admin-summary { max-width: calc(100vw - 24px); }
@media (min-width: 768px) { body.rail-on #admin-summary { max-width: calc(100vw - 280px); } }
#admin-summary::-webkit-scrollbar { display: none; }
#admin-summary:empty { margin-bottom: 0; padding-bottom: 0; }
.sum-chip121 {
  flex: none; display: inline-flex; align-items: baseline; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; color: var(--ink2);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.sum-chip121:hover { border-color: var(--ink3); }
.sum-num121 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sum-lbl121 { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.admin-home121 { display: flex; flex-direction: column; }
.admin-home-main, .admin-home-side { min-width: 0; }
.admin-home-side .admin-sig-panel { margin-top: 0; }
@media (min-width: 1080px) {
  .admin-home121 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "main side"; gap: 18px; align-items: start; }
  .admin-home-main { grid-area: main; }
  .admin-home-side { grid-area: side; }
}
@media (max-width: 767.98px) {
  /* compact rows on phones: the preview card collapses to
     its title + buttons, Sig's items tighten, and the first
     screen holds the summary strip + the top actions */
  .admin-home-side .preview-cta .muted { display: none; }
  .admin-home-side .preview-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .admin-sig-item { padding-top: 7px; margin-top: 7px; }
  .admin-sig-head .sig-hero-media { width: 56px; height: 56px; }
}

/* ---- 3b. Found while widening (pre-existing -119 defect):
   theme-v3 whitened the Admin preview card, but theme-v2's
   white-on-dark rules for its title and ghost button
   survived — "Business Preview" and the "Business
   dashboard" button have been invisible on the white card
   since the reskin. Restore both on the ink system. ---- */
body.admin-on .preview-cta strong { color: var(--ink); }
body.admin-on .preview-cta .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink2); box-shadow: none; }
body.admin-on .preview-cta .btn.ghost:hover { background: var(--hover); border-color: var(--ink3); }

/* ---- 4. Admin section bar (phones): every section, one tap ---- */
#admin-secbar { display: none; }
@media (max-width: 767.98px) {
  body.admin-on #admin-secbar {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 0; z-index: 55;
    background: rgba(250,247,241,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line2);
    padding: 8px 10px;
  }
  body.admin-on #admin-secbar::-webkit-scrollbar { display: none; }
  .sec-chip121 {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: #fff; color: var(--ink2);
    border-radius: 999px; padding: 7px 13px; min-height: 34px;
    font: 700 .8rem 'Instrument Sans', system-ui, sans-serif;
    cursor: pointer; white-space: nowrap;
  }
  .sec-chip121.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .sec-badge121 { background: var(--accent); color: #fff; border-radius: 999px; font-size: .64rem; font-weight: 800; padding: 1px 6px; }
}

/* ============================================================
   Build -122 (Jeff, 2026-11-04, from his phone screenshots
   of the live app): three header fixes, nothing else moves.
   (1) The signed-out "Sign in" rendered in the old dark-
   header sage (#C6CFC6, styles.css/theme-v2 #topnav rules)
   on the Paper top bar — faded, looked disabled. It is
   solid Ink now, and the rest of the top-nav row takes
   Ink-2 so no header action reads as decoration.
   (2) The identity row is pinned LEFT in every shell —
   the top bar (.tb2-in), the rail top row (.tr-in) and
   the rail user card; chat/help stay right. On phones the
   Admin section bar's side padding now matches the 12px
   content gutters exactly, so the Admin screen's left and
   right edges line up (the last off-symmetry offset).
   (3) The identity circle shows the user's uploaded photo
   when one exists (app.js avaHtml122): the photo sits over
   the initial circle and removes itself if it fails to
   load, so the initial is the fallback, never a break.
   ============================================================ */

/* ---- 1. Sign in: solid black, clearly tappable ---- */
#topnav a, #topnav button.linklike { color: var(--ink2); }
#topnav a:hover, #topnav button.linklike:hover { color: var(--ink); }
#topnav a.nav-signin { color: var(--ink); font-weight: 800; }
#topnav a.nav-signin:hover { color: var(--ink); }

/* ---- 2. Identity left; actions right; one gutter ---- */
#topbar2 .tb2-in { justify-content: flex-start; max-width: none; margin-left: 0; margin-right: 0; }
.tr-in { justify-content: flex-start; }
.tab-user { justify-content: flex-start; }
@media (max-width: 767.98px) {
  body.admin-on #admin-secbar { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 768px) {
  /* the top row spans the content column edge to edge while
     the work below sits inside 24px gutters — pad the row to
     the same gutters so its right edge lines up too */
  body.rail-on #toprow { padding-left: 24px; padding-right: 24px; }
}

/* ---- 3. Photo over the initial (fallback underneath) ---- */
.ava122w { position: relative; display: inline-grid; flex: none; }
.ava122w > img.ava122i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Build -125: the Everything panel + Wallet bits ----------
   The panel is a sheet on phones (slides over the bottom) and
   a top-right card on desktop — never a page. Rows reuse the
   .more-row card so the panel reads as part of the same app. */
.ev125-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(23,21,18,.38); }
.ev125-panel { background: var(--paper); overflow-y: auto; padding: 18px; }
.ev125-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ev125-head strong { font-size: 1.12rem; letter-spacing: -.01em; }
.ev125-head .linklike { margin-left: auto; font-size: 1rem; }
.ev125-group { margin-top: 14px; }
.ev125-group h5 { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 2px 8px; }
.ev125-row { margin-bottom: 8px; text-decoration: none; }
.ev125-status { margin-left: auto; font-style: normal; font-weight: 700; color: var(--accent); font-size: .86rem; }
@media (max-width: 767.98px) {
  .ev125-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: vxSheetUp .38s cubic-bezier(.22,.8,.3,1) both; }
}
@media (min-width: 768px) {
  .ev125-panel { position: absolute; top: 14px; right: 14px; width: 400px; max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(23,21,18,.22); }
}
/* The Everything button: dark in the top bar (the design's ≡),
   a labeled rail item on desktop, absent from the phone bar. */
body.v3-on .tb2-btn.tb2-ev125, body.v3-slim .tb2-btn.tb2-ev125, .tb2-btn.tb2-ev125 { background: var(--ink); border-color: var(--ink); color: #fff; }
body.v3-on .tb2-btn.tb2-ev125:hover, .tb2-btn.tb2-ev125:hover { border-color: var(--ink); }
#tabbar .tab-item.tab-ev125 { order: 5; }
@media (max-width: 767.98px) {
  body.v3-on #tabbar .tab-item.tab-ev125 { display: none; }
}
.tr-ev125 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 999px; padding: 6px 12px; font: 700 .8rem 'Instrument Sans', system-ui, sans-serif; cursor: pointer; }
.tr-ev125 svg { width: 15px; height: 15px; }
.tab-user-btn { cursor: pointer; }
/* Wallet history/comp amounts sit right-aligned on ledger rows */
.lib-amt { font-weight: 700; white-space: nowrap; margin-left: 10px; }

/* ============================================================
   Build -126 (Jeff, 2026-11-04): identity menu, admin totals +
   preview tabs, icon-only admin top row, and the platform-wide
   no-sideways rule. "Text should always be working right on
   all logins everywhere."
   ============================================================ */

/* ---- The identity menu: a top-left dropdown on every shell.
   Same overlay/panel language as the Everything panel, anchored
   to the identity it opens from. ---- */
.idm126-overlay { position: fixed; inset: 0; z-index: 140; background: rgba(23,21,18,.38); }
.idm126-panel { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(23,21,18,.22); padding: 14px; }
.idm126-head { display: flex; align-items: center; gap: 11px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.idm126-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center; flex: none; }
.idm126-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.idm126-name { font-weight: 800; font-size: 1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idm126-sub { font-size: .8rem; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idm126-row { margin-bottom: 8px; }
.idm126-row:last-child { margin-bottom: 0; }

/* ---- Admin top row: identity is a button; the right side is
   icons with real tap targets (Build -126 item 3). ---- */
.tr-id { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; font: inherit; color: var(--ink); min-width: 0; }
.tr-id:hover { background: var(--hover); }
.tr-id .tr-name { min-width: 0; }
.tr-right > button, .tr-right > a.tr-help126 { min-width: 40px; min-height: 40px; justify-content: center; border-radius: 50%; }
.tr-ev125 { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
.tr-ev125 svg { width: 17px; height: 17px; }

/* ---- Admin home: platform totals strip + preview tabs ---- */
.totals126 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
@media (min-width: 900px) { .totals126 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.totals126:empty { display: none; }
.tot126 { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tot126-num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.tot126-lbl { font-weight: 700; font-size: .92rem; color: var(--ink); }
.tot126-sub { font-size: .78rem; color: var(--ink3); line-height: 1.35; }
@media (max-width: 480px) { .tot126-num { font-size: 1.6rem; } .tot126 { padding: 12px; } }
.pv-tabs126 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.pv-tabs126-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.pv-tab126 { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 18px; min-height: 40px; font: 700 .86rem 'Instrument Sans', system-ui, sans-serif; cursor: pointer; }
.pv-tab126:hover { border-color: var(--ink3); }

/* ---- No-sideways rule (Build -126 item 5) ----
   main is a flex item of the column-flex body; its automatic
   minimum size let any wide child drag the whole screen wider
   than the phone (the Command Center laid out ~685px wide at
   390px). min-width: 0 caps the shell at the screen; wide
   content then wraps or scrolls inside its own card, per the
   rules below and the per-view audit. */
body > main { min-width: 0; max-width: 100vw; }
@media (max-width: 767.98px) {
  /* The rail-on phone rule sets main's width to auto, and a
     flex item sized auto stretches only when nothing inside
     demands more — a wide subview (Command Center tables)
     dragged the whole shell to its content width (~671px on a
     390px phone). Width 100% pins the shell to the screen;
     wide rows then wrap or scroll inside their own card. */
  body.rail-on main, body.admin-on main, body.v3-on main, body.v3-slim main, body.preview-on main { width: 100%; }
}
#tab-body, #cc-body, .admin-home-main, .admin-home-side { min-width: 0; }
main img, main video, main canvas, main svg { max-width: 100%; }
main .panel, main .card { min-width: 0; }

/* The Command Center at phone width: filters stack full-width,
   the legend wraps, tiles and tables stay inside their cards. */
@media (max-width: 640px) {
  .cc-filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cc-flabel { width: 100%; }
  .cc-flabel select { width: 100%; max-width: 100%; }
  .cc-check { white-space: normal; align-items: flex-start; }
  .cc-legend { flex-wrap: wrap; row-gap: 6px; }
  .cc-tiles { grid-template-columns: minmax(0, 1fr); }
  .cc-tile { min-width: 0; }
}
.cc-flabel select { max-width: 100%; }

/* ---------- Build -130 Parts 6/7/8: desktop rail, Sig chat boxes, mobile top bar ---------- */
/* Part 6: on desktop the Everything panel's triggers are gone
   (the rail lists every destination; the panel itself remains
   for phones, where the bottom bar is unchanged). */
@media (min-width: 768px) {
  .tab-ev125, .tr-ev125 { display: none !important; }
  body.v3-on #tabbar .tab-main { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
}
/* Part 7: the working Sig chat box — orb, a real type-in
   field, and the answer thread when a conversation starts. */
.sigbox130 { margin: 12px 0; }
.sigbox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sigbox-orb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #0B0D0C; }
.sigbox-htext { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sigbox-htext strong { font-size: .95rem; }
.sigbox-htext span { color: var(--ink2); font-size: .82rem; }
.sigbox-form { display: flex; gap: 8px; }
.sigbox-form input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: inherit; background: #fff; color: var(--ink); }
.sigbox-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sigbox-go { border-radius: 999px; min-height: 44px; padding: 0 18px; }
.sigbox-thread { max-height: 320px; overflow-y: auto; margin: 4px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.sigbox-thread[hidden] { display: none; }
.sigtop130 { padding: 14px 16px 6px; margin: 0 0 14px; }
.sigtop130 .sigbox130 { margin: 0; }
.sigtop-nudges { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.sigtop-nudges:empty { display: none; }
.sigtop-nlabel { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.sigtop-nudge { text-align: left; border: 1px solid var(--line); background: var(--paper2); color: var(--ink); border-radius: 12px; padding: 8px 12px; font: 600 .86rem 'Instrument Sans', system-ui, sans-serif; cursor: pointer; }
button.sigtop-nudge:hover { border-color: var(--ink3); }
.sigtop-nudge.plain { cursor: default; font-weight: 500; color: var(--ink2); }
/* Part 8 (mobile only): top bars read name · help · the
   dashboard's own middle icons · hamburger. The Admin top
   row's right cluster unwraps so its icons can order with
   the identity: help right after the name, the graph icon in
   the middle, the hamburger far right. */
.tb2-help130 { flex: none; }
@media (max-width: 767.98px) {
  .tr-right { display: contents; }
  .tr-id { order: 1; }
  .tr-help126 { order: 2; }
  .tr-right > button:not(.tr-ev125) { order: 3; margin-left: auto; }
  .tr-ev125 { order: 4; margin-left: auto; }
}

/* ---------- Build -134: the shopping surfaces ----------
   The Shelf (Find creators), the creator page hero + buy box,
   the Mirror (Find offers), and the setup live previews. Paper /
   Ink / Signal tokens only; the gradient stays reserved for the
   logo and the one primary button per screen. */
.disc-count { margin: 14px 0 4px; font-size: .95rem; color: var(--ink2); }
.disc-count strong { color: var(--ink); font-size: 1.05rem; }
.bookmode-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.bookmode-rate { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .85rem; color: var(--ink2); }
.bookmode-rate select { width: auto; }
.shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.shelf-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.shelf-photo { position: relative; aspect-ratio: 4 / 3; background: #F4F4F1; cursor: pointer; overflow: hidden; }
.shelf-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-photo .avatar-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3.4rem; font-weight: 800; color: var(--ink3); background: #F4F4F1; }
.shelf-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.shelf-badge { background: rgba(23, 21, 18, .82); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; }
.shelf-badge.hot { background: var(--accent); }
.shelf-save { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--ink); font: 600 .78rem 'Instrument Sans', system-ui, sans-serif; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.shelf-save.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.shelf-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shelf-name { font-weight: 700; font-size: 1.06rem; cursor: pointer; }
.shelf-meta { font-size: .85rem; color: var(--ink2); }
.shelf-local { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.shelf-pct { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.shelf-local-tx { font-size: .85rem; color: var(--ink2); line-height: 1.35; }
.shelf-local-tx strong { color: var(--ink); }
.shelf-local-none { font-size: .9rem; color: var(--ink2); margin-top: 4px; }
.shelf-bar { height: 6px; background: var(--line2); border-radius: 999px; overflow: hidden; }
.shelf-bar span { display: block; height: 100%; background: var(--grad); border-radius: 999px; }
.shelf-price { font-weight: 700; margin-top: 4px; }
.shelf-price span { font-weight: 500; color: var(--ink2); font-size: .85rem; }
.shelf-proof { font-size: .85rem; color: var(--ink); }
.shelf-quiet { font-size: .8rem; color: var(--ink3); margin-top: auto; }
.shelf-acts { display: flex; gap: 8px; margin-top: 10px; }
.shelf-tray { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper2); padding: 16px; }
.shelf-tray-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shelf-tray-head .btn { margin-left: auto; }
.shelf-tray-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
/* Build -138 (Jeff's phone, 2026-11-06): a tray column can never
   be crushed below reading width, and nothing inside one may
   cross its border: columns carry min-width:0 + hidden overflow,
   the count pill wraps inside itself, names break anywhere, and
   the acceptance switches stack vertically (one per row) so the
   two pills can never overlap across a divider. */
.shelf-tray-col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; overflow: hidden; }
.shelf-tray-col.top-match { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.top-match-tag { position: absolute; top: -10px; left: 12px; background: var(--ink); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; z-index: 3; }
.shelf-tile { position: relative; }
.shelf-tile.top-match { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); overflow: visible; }
.shelf-tile.top-match .shelf-photo { border-radius: 15px 15px 0 0; }
.shelf-tray-name { font-weight: 700; overflow-wrap: anywhere; }
.shelf-tray-pct { font-size: 1.25rem; font-weight: 800; }
.shelf-tray-line { font-size: .82rem; color: var(--ink2); overflow-wrap: break-word; min-width: 0; }
/* Build -136: the accepts-comps switch + highlighted local count
   (Jeff's card rulings). The switch mirrors the app's real .sw
   switch language: mint fill + knob right when ON. */
.shelf-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shelf-price-row .shelf-price { margin-top: 4px; }
.comp-sw { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 3px 9px 3px 4px; margin-top: 4px; }
.comp-sw-track { width: 34px; height: 19px; border-radius: 999px; background: #D9E9DE; position: relative; flex: none; }
.comp-sw-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.comp-sw-lbl { font-size: .8rem; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.comp-sw.on { background: var(--mint-b); }
.comp-sw.on .comp-sw-track { background: var(--mint-soft); }
.comp-sw.on .comp-sw-knob { left: 17px; }
.comp-sw.on .comp-sw-lbl { color: var(--ink); font-weight: 800; }
.shelf-localcount { display: inline-block; background: var(--mint-b); color: var(--ink); font-weight: 800; font-size: .92rem; padding: 3px 11px; border-radius: 999px; margin-top: 7px; }
.acc-row { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.shelf-tray-acc { margin: 2px 0; }
/* Build -136: the setup peek (See how businesses / creators
   view you) keeps the shelf card at card width. */
.peek-shelf { max-width: 340px; grid-template-columns: 1fr; }
/* Build -136: Find creators filter groups — one labelled job
   per group. Categories ride ONE scrollable row of uniform
   chips; must-haves are real switch rows; booking type is a
   segmented control, a different visual language from chips
   on purpose, so it can never be mistaken for a category. */
.disc-filters { margin-top: 12px; }
.df-group { margin-bottom: 14px; }
.df-label { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink2); margin-bottom: 7px; }
.disc-filters .filters.disc-top { margin: 0; }
.disc-filters .dcat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin: 0; }
.disc-filters .dcat-row::-webkit-scrollbar { display: none; }
.disc-filters .dcat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; }
.musthave-row { display: grid; gap: 8px; }
@media (min-width: 720px) { .musthave-row { grid-template-columns: 1fr 1fr; } }
.musthave { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; margin: 0; }
.musthave .mh-tx { display: flex; flex-direction: column; gap: 1px; }
.musthave .mh-tx small { color: var(--ink2); font-size: .82rem; }
.bookseg { display: flex; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); }
.bookseg-btn { flex: 1; border: none; background: transparent; font: inherit; font-weight: 700; padding: 11px 6px; cursor: pointer; color: var(--ink); }
.bookseg-btn + .bookseg-btn { border-left: 1px solid var(--line); }
.bookseg-btn.on { background: var(--ink); color: #fff; }
.disc-filters .bookmode-rate { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.fo-kind { margin-bottom: 12px; }
.mirror-cover { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.cg-starters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
/* Build -136 (Scopes #7/#8): the shop layout — left filter
   rail + big cards on desktop; on a phone the rail becomes
   the Filters sheet behind a sticky Sort + Filters bar. The
   rail's head/foot and the mobile bar exist only where they
   belong, so nothing is duplicated or renamed between
   viewports. */
/* Build -138 (Jeff, 2026-11-06): the shop surfaces match the
   approved website concepts and take over the full screen on
   desktop. One search row (name/handle + market + sort);
   the rail carries labelled groups of checkbox/radio rows —
   pill walls are dead everywhere. On a phone: one pinned
   search input + one Filters button (with the active count),
   and the rail as a bottom sheet with Clear all + "Show N
   results" pinned. (The phone category chip row the first
   -138 cut shipped was removed the same evening on Jeff's
   word: category is a labelled group inside the sheet, never
   a button row under the search.) */
.rail-head, .rail-foot, .shop-mbar { display: none; }
.rail-chips { flex-wrap: wrap; overflow: visible; }
.takeover-bar { display: none; }
.shop-chiprow { display: none; }
.sr-filters { display: none; }
.rail-only-m { display: none; }
.shop-searchrow { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.shop-searchrow .sr-q { flex: 1 1 auto; min-width: 0; }
.shop-searchrow input[type="text"], .shop-searchrow input[type="search"], .shop-searchrow select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.shop-searchrow .sr-sel { flex: 0 1 210px; min-width: 0; }
.rail-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; margin: 0; }
.rail-row:hover { background: var(--hover); }
.rail-row input { accent-color: #006AFC; width: 17px; height: 17px; flex: none; margin: 0; }
.rail-row .rr-tx { flex: 1 1 auto; min-width: 0; }
.rail-row .rr-count { color: var(--ink2); font-weight: 600; font-size: .85rem; flex: none; }
.rail-note { font-size: .8rem; color: var(--ink2); margin: 6px 10px 0; }
@media (min-width: 900px) {
  .shop-layout { display: grid; grid-template-columns: 272px 1fr; gap: 26px; align-items: start; }
  /* Batch fix (Jeff, 2026-11-06): the rail scrolls on its own.
     Sticky alone left a rail taller than the viewport pinned at
     top:12px with its bottom groups unreachable except by
     dragging the whole page. Bounded to the viewport with its
     own overflow, the rail scrolls independently while the
     results column scrolls with the page.
     Build -140 (Jeff, same day, Find offers screenshot): the
     -139 cap assumed the rail starts at the viewport top. It
     does not: page chrome above it (workspace head, takeover
     bar) pushes its rest position 150-200px down, so a rail
     whose content fell between (100vh - restTop) and
     (100vh - 24px) was never a scroll container at all and its
     last groups sat below the fold. --rail-off is the rail's
     measured rest offset, set per element by fitRails() in
     app.js at render (default 24px = the old behaviour until
     measured), so the rail box always ends inside the viewport
     and the rail alone always reaches its last group. */
  .shop-rail { position: sticky; top: 12px; max-height: calc(100vh - var(--rail-off, 24px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
}

/* Start a campaign wears the Find creators skeleton (Jeff,
   2026-11-06): a width-constrained wrap, the same 272px rail
   of labelled groups, the form in the main column. Inside the
   form there are no loose pill clusters left: choices are
   full-width selectable rows or segmented controls, exactly
   like the filter rail's language. */
.camp-wrap { max-width: 1180px; }
.camp-layout { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.camp-rail { background: var(--paper2); border-radius: 14px; padding: 14px; }
.camp-rail .notice { margin-top: 0 !important; }
.camp-pick { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.camp-pick.on { background: var(--accent-soft); font-weight: 700; }
.camp-pick .rr-tag { color: var(--azure); font-weight: 700; font-size: .78rem; }
@media (min-width: 900px) {
  .camp-layout { grid-template-columns: 272px minmax(0, 1fr); grid-template-areas: "rail main"; }
  .camp-main { grid-area: main; min-width: 0; }
  .camp-rail { grid-area: rail; position: sticky; top: 12px; max-height: calc(100vh - var(--rail-off, 24px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
#offer-composer .bookseg { display: flex; background: var(--paper2); border-radius: 999px; padding: 3px; gap: 2px; }
#offer-composer .bookseg button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 10px; font-weight: 600; color: var(--ink2); cursor: pointer; }
#offer-composer .bookseg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(11,13,12,.12); }
#offer-composer .radio-stack { display: flex; flex-direction: column; gap: 6px; }
#offer-composer .radio-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
#offer-composer .radio-chip:has(input:checked) { border-color: var(--azure); background: var(--accent-soft); font-weight: 600; }
#offer-composer .radio-chip input { width: auto; margin: 0; flex: none; }
#offer-composer .chip-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#offer-composer .chip-row .chip { text-align: left; border-radius: 10px; }
#offer-composer .chiprow[data-wmrow] { display: flex; background: var(--paper2); border-radius: 999px; padding: 3px; gap: 2px; }
#offer-composer .chiprow[data-wmrow] .rchip { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 10px; font-weight: 600; color: var(--ink2); cursor: pointer; }
#offer-composer .chiprow[data-wmrow] .rchip.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(11,13,12,.12); }
@media (min-width: 900px) {
  .shop-rail .dcat-row { flex-wrap: wrap; overflow: visible; }
  .shop-rail .musthave-row { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  /* Full-screen takeover: the dashboard chrome leaves, the
     surface keeps a slim bar of its own with Back pinned
     top-left. */
  body.shop-takeover #rail { display: none; }
  body.shop-takeover #tabbar { display: none; }
  body.shop-takeover main, body.shop-takeover .footer { margin-left: 0; width: 100%; }
  body.shop-takeover #toprow, body.shop-takeover #admin-secbar { display: none; }
  body.shop-takeover .takeover-bar {
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 60; background: #fff;
    padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px;
  }
  .takeover-bar .tb-title { font-weight: 800; font-size: 1.05rem; }
  .takeover-bar .tb-links { margin-left: auto; display: flex; gap: 8px; }
}
@media (max-width: 899px) {
  .shop-rail {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 120; background: #fff; border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(23, 21, 18, .28);
    max-height: 86vh; overflow-y: auto; padding: 6px 16px 0;
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .shop-rail.open { transform: none; visibility: visible; }
  .rail-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; position: sticky; top: 0; background: #fff; padding: 12px 0 10px; z-index: 2; }
  .rail-foot { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 0 16px; border-top: 1px solid var(--line); margin-top: 10px; }
  .rail-foot .btn { width: 100%; }
  .rail-only-m { display: block; }
  .shop-mbar { display: none; }
  .fo-sortrow { display: none; }
  .shop-searchrow { position: sticky; top: 0; z-index: 40; background: #fff; padding: 8px 0; }
  .shop-searchrow .sr-sel { display: none; }
  .sr-filters { display: inline-flex; flex: none; }
  .shop-chiprow {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 8px; margin: 0;
  }
  .shop-chiprow::-webkit-scrollbar { display: none; }
  .shop-chiprow .dcat-chip { flex: 0 0 auto; }
}
.rail-x { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 2px 6px; }
.mbar-sort select, .shop-mbar select { margin-left: 6px; }
.shelf-tray-count { display: inline-block; align-self: flex-start; background: var(--mint-b); color: var(--ink); font-weight: 800; font-size: .85rem; padding: 2px 9px; border-radius: 999px; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.shelf-tray-col .btn { margin-top: 8px; }
/* Build -138: inside the tray the two acceptance switches stack
   (one per row) instead of sitting side by side, so they fit any
   column width the tray can produce. */
.shelf-tray-acc .acc-row { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 2px; }
.shelf-tray-acc .comp-sw { max-width: 100%; }
.pdp-hero { display: flex; gap: 16px; align-items: center; background: var(--paper2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 14px 0 4px; }
.pdp-hero-pct { font-size: 3.6rem; font-weight: 800; line-height: .95; letter-spacing: -.03em; color: var(--ink); }
.pdp-hero-tx { font-size: .98rem; line-height: 1.45; color: var(--ink); }
.pdp-hero-src { font-size: .78rem; color: var(--ink2); margin-top: 4px; }
.pdp-hero-none .lbl { color: var(--ink2); }
.pdp-block { margin: 18px 0 0; }
.pdp-block h4 { margin: 0 0 8px; font-size: 1rem; }
.pdp-get { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .94rem; line-height: 1.45; }
.pdp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.pdp-spec { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line2); padding: 6px 0; font-size: .9rem; }
.pdp-spec span { color: var(--ink2); }
.pdp-similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pdp-sim { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; }
.cc-loc { color: var(--ink2); font-size: .94rem; font-weight: 600; margin-top: 3px; }
.pdp-topacts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.pdp-bar-spacer, .pdp-actionbar { display: none; }
@media (max-width: 899px) {
  /* The phone action bar (Jeff, 2026-11-06): Book + Save are
     ALWAYS reachable on a creator profile — the buy box sits
     far down the page, and a business on a phone could not
     find either button at all. It floats above the app tab
     bar; the spacer keeps page content clear of it. */
  .pdp-actionbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 60; padding: 10px 14px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(11,13,12,.08); }
  .pdp-actionbar .btn { flex: 1 1 0; }
  .pdp-bar-spacer { display: block; height: 66px; }
}
/* Build -140 (Jeff): the sim rail wears the Shelf's 4/3 frame.
   The old 16/9 frame cropped logos vertically and, on the
   no-image tile, read as a tall empty box; 4/3 matches the
   Shelf exactly, and flex:none keeps the media box from being
   stretched or squeezed by the card's column layout, so every
   card's media is the same height. */
.pdp-sim-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--paper2); display: block; flex: none; }
/* Build -140: Similar creators sits at the very bottom of the
   profile, below the booking box, behind a clear divider — an
   after-you-are-done section, not mid-flow. */
.pdp-similar-bottom { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; }
/* Build -140: the audience geography section + platform links.
   Rows reuse .pdp-spec; city sub-rows indent under their metro. */
.pdp-spec.sub { padding-left: 20px; }
.pdp-spec.sub span { color: var(--ink2); }
.pdp-smallprint { font-size: .78rem; color: var(--ink2); margin: 6px 0 0; line-height: 1.45; }
.pdp-links { display: flex; flex-direction: column; }
.pdp-links a, .pdp-links .pdp-link-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line2); padding: 7px 0; font-size: .92rem; text-decoration: none; }
.pdp-links a:hover .pdp-link-handle { text-decoration: underline; }
.pdp-link-plat { font-weight: 700; color: var(--ink); }
.pdp-link-handle { color: var(--azure); }
/* Build -140: profile setup — add-a-platform row + the
   local-%-by-platform rows. Plain form furniture, same field
   language as the rest of setup. */
.pf-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pf-addrow select { flex: 1 1 200px; }
.lp-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.lp-row:last-child { border-bottom: 0; }
.lp-row .lp-tx { flex: 1 1 auto; min-width: 0; }
.lp-row .lp-name { font-weight: 700; font-size: .92rem; }
.lp-row .lp-note { font-size: .8rem; color: var(--ink2); margin-top: 2px; line-height: 1.4; }
.lp-row input { width: 92px; flex: none; }
/* Batch fix (Jeff, 2026-11-06): card media. The initial tile
   avatarHtml emits carries .avatar-initial, which nothing in
   this card styled — the letter sat tiny in the top-left of a
   tall empty box (the old .cc-mono rule targeted a class this
   markup never emits). Centered and sized like the Shelf's
   tile now. And an image whose own shape is artwork, not a
   photo (very wide or very tall — a logo), gets .media-contain
   from the mediaFit sweep in app.js: contained and centered in
   the same fixed box instead of blown up and cropped. */
.pdp-sim .avatar-initial { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: var(--ink3); }
img.media-contain { object-fit: contain !important; }
.shelf-photo img.media-contain, .pdp-sim img.media-contain { background: var(--paper2); }
.pdp-sim-name { font-weight: 700; margin-top: 6px; }
.pdp-sim-meta { font-size: .82rem; color: var(--ink2); }
.pdp-buy { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 18px; margin: 20px 0 6px; }
.pdp-buy-h { font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pdp-buy-h .comp-sw { margin-top: 0; }
.pdp-lane { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px; cursor: pointer; }
.pdp-lane:has(input:checked) { border-color: var(--ink); }
.pdp-lane input { margin-top: 3px; width: auto; }
.pdp-lane small { display: block; color: var(--ink2); margin-top: 2px; line-height: 1.4; }
.pdp-days { margin: 12px 0; }
.pdp-days-l { font-size: .85rem; font-weight: 600; }
.pdp-dayrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pdp-day { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 12px; font: 600 .85rem 'Instrument Sans', system-ui, sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.pdp-day small { font-weight: 500; color: var(--ink2); }
.pdp-day.on { border-color: var(--ink); background: var(--paper2); }
/* Build -140 (Jeff): Send offer takes the natural .btn width,
   like the profile's other primary actions — the old width:100%
   stretched it across the whole booking box. */
.cc-neighbors { font-weight: 700; margin-top: 6px; }
.mirror-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 1280px) { .mirror-grid { grid-template-columns: repeat(3, 1fr); } }
.mirror-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 5px; }
/* Build -138 (the Mirror, per the approved concept): the lead
   offer is a full-width photo-led card — photo left, the ask
   stated like a price right — and the grid below it is even. */
.mirror-cover-fallback { display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 3rem; font-weight: 800; }
/* Batch fix (Jeff, 2026-11-06): when the business's image is
   its LOGO (no cover photo), the logo is contained and centered
   in the same 160px media box — never cover-cropped. */
.mirror-cover-logo { object-fit: contain; background: var(--paper2); padding: 12px; box-sizing: border-box; }
@media (min-width: 900px) {
  .mirror-card.mirror-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: 18px; align-items: stretch; }
  .mirror-card.mirror-lead .mirror-cover { height: 100%; min-height: 230px; margin: 0; border-radius: 12px; }
  .mirror-card.mirror-lead .mirror-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .mirror-card.mirror-lead .mirror-price { font-size: 2rem; }
}
.mirror-top { display: flex; align-items: center; gap: 10px; }
.mirror-mono { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.mirror-biz { font-weight: 700; }
.mirror-meta { font-size: .82rem; color: var(--ink2); }
.mirror-fit { margin-left: auto; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mirror-price { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; margin-top: 8px; line-height: 1.15; }
.mirror-title { font-weight: 600; }
.mirror-sub { font-size: .88rem; color: var(--ink2); }
.mirror-ask { font-size: .9rem; margin-top: 4px; }
.mirror-line { font-size: .85rem; color: var(--ink2); }
/* The track-record strip: ink, like the concept — big counted
   numbers, one per fact the business has actually earned. */
.mirror-track { display: flex; gap: 8px 22px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: 10px; padding: 10px 14px; margin-top: 6px; }
.mirror-track span { font-size: .78rem; color: #D8D5CF; display: flex; flex-direction: column; gap: 0; }
.mirror-track strong { font-size: 1.25rem; font-weight: 800; color: #fff; line-height: 1.1; }
.mirror-spots { font-size: .82rem; color: var(--ink2); }
.mirror-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.fo-count { font-size: .95rem; color: var(--ink2); margin: 4px 0 10px; }
.fo-count strong { color: var(--ink); font-size: 1.05rem; }
.fo-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; }
.fo-selfilter { font-size: .85rem; color: var(--ink2); display: inline-flex; gap: 6px; align-items: center; }
.fo-selfilter select { width: auto; }
.preview-panel { border: 1px dashed var(--ink3); border-radius: 14px; padding: 14px 16px; margin: 16px 0; background: var(--paper2); }
.preview-panel .shelf-tile { max-width: 380px; }
.prev-public { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.prev-public .pdp-hero { margin: 0; }
.prev-biz { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.prev-shelf { margin-bottom: 12px; }
.sig-ccard-sub { font-size: .85rem; color: var(--ink2); margin-top: 2px; }
@media (max-width: 1100px) {
  .shelf-grid { grid-template-columns: repeat(2, 1fr); }
  /* Build -138: columns floor at reading width instead of a
     fixed count — at tablet widths the tray fits as many
     210px+ columns as the space honestly holds. */
  .shelf-tray-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 767.98px) {
  .shelf-grid { grid-template-columns: 1fr; }
  .mirror-grid { grid-template-columns: 1fr; }
  /* Build -138 (Jeff's phone defect): on a phone the tray is a
     scroll-snap strip. Each column holds a readable 232px and
     the rest swipe — side-by-side comparison survives, crushing
     does not. The top padding leaves room for the Top match tag
     so the strip's overflow never clips it. */
  .shelf-tray-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .shelf-tray-col { flex: 0 0 232px; scroll-snap-align: start; }
  .pdp-similar { grid-template-columns: 1fr; }
  .pdp-specs { grid-template-columns: 1fr; }
  .pdp-hero { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pdp-hero-pct { font-size: 3rem; }
  .bookmode-rate { margin-left: 0; }
}

/* ============================================================
   Build -137 (Jeff, 2026-11-06): the approved dashboard
   redesign — Sig hero + Quick highlights + Next steps homes,
   the top-right hamburger, the Sig sheet, the mobile bars.
   ============================================================ */

/* --- Sig hero (Home) --- */
.sighero137 { background: #fff; border: 2px solid var(--ink); border-radius: 26px; padding: 22px 24px 18px; margin: 0 0 14px; box-shadow: 0 10px 30px rgba(23,21,18,.08); }
.sighero137-head { display: flex; align-items: center; gap: 12px; }
.sighero137-head .sigbox-orb { width: 56px; height: 56px; }
.sighero137-head strong { font-size: 1.25rem; }
.sighero137 .sigbox130 { margin: 14px 0 4px; }
.sighero137 .sigbox-head, .sigsheet137 .sigbox-head { display: none; }
.sig-brief137 { margin-top: 14px; font-size: 1rem; line-height: 1.5; background: var(--paper2); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; }
.sighero137 .sigtop-nudges { margin-bottom: 2px; }

/* --- Quick highlights + Next steps cards --- */
.hl137, .ns137 { background: #fff; padding: 18px 22px 10px; margin: 0 0 14px; }
.hl137-k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.hl137-row { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line2); background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; text-align: left; }
.hl137-row:last-child { border-bottom: 0; }
/* Batch fix (Jeff, 2026-11-06): ONE value column on every row.
   The old space-between flex parked a door row's value in the
   middle (three children) while a static row's value sat flush
   right (two). Now the label flexes, the value is a fixed
   right-hand column, and every row — door or not — reserves the
   same fixed-width chevron slot after the value (the template
   always renders the slot, empty for static rows), so all
   values share one right edge. */
.hl137-lab { flex: 1 1 auto; min-width: 0; font-size: .92rem; font-weight: 700; color: var(--ink2); }
.hl137-lab span { display: block; font-size: .8rem; font-weight: 600; color: var(--ink3); margin-top: 1px; }
.hl137-num { flex: none; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.hl137-door { cursor: pointer; }
.hl137-door:hover .hl137-num { color: var(--accent); }
.hl137-go { flex: none; width: 18px; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--ink3); }
.ns137 .nx-row:first-of-type { border-top: 0; }
.ns137-caught { color: var(--ink2); font-size: .92rem; margin: 8px 0 10px; }

/* --- Hamburger (top right, phones): the full destination set --- */
.ham137-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(23,21,18,.38); }
.ham137-panel { background: var(--paper); overflow-y: auto; padding: 18px; }
.ham137-head { display: flex; align-items: center; gap: 11px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.ham137-head .linklike { margin-left: auto; font-size: 1rem; }
@media (max-width: 767.98px) {
  .ham137-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: vxSheetUp .38s cubic-bezier(.22,.8,.3,1) both; }
}
@media (min-width: 768px) {
  .ham137-panel { position: absolute; top: 14px; right: 14px; width: 400px; max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(23,21,18,.22); }
}

/* --- Sig sheet: bottom sheet on phones, panel on desktop --- */
.sigsheet137-overlay { position: fixed; inset: 0; z-index: 131; background: rgba(23,21,18,.38); }
.sigsheet137 { background: var(--card, #fff); overflow-y: auto; padding: 20px; }
.sigsheet137-head { display: flex; align-items: center; gap: 11px; }
.sigsheet137-head .sigbox-orb { width: 44px; height: 44px; }
.sigsheet137-htext { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sigsheet137-htext strong { font-size: 1.05rem; }
.sigsheet137-htext span { color: var(--ink2); font-size: .82rem; }
.sigsheet137-head .linklike { margin-left: auto; font-size: 1rem; }
.sigsheet137 .sigbox130 { margin: 12px 0 4px; }
.sigsheet137-steps { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 6px; }
.sigsheet137-slabel { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); margin: 6px 0 2px; }
@media (max-width: 767.98px) {
  .sigsheet137 { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 26px 26px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation: vxSheetUp .38s cubic-bezier(.22,.8,.3,1) both; }
}
@media (min-width: 768px) {
  .sigsheet137 { position: absolute; right: 24px; bottom: 24px; width: 404px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 24px 60px rgba(23,21,18,.28); }
}

/* --- Mobile bars: sequence by the bar order, Sig orb centered --- */
@media (max-width: 767.98px) {
  body.v3-on #tabbar .tab-item.tab-bar137 { order: var(--bar-ord, 0) !important; }
  body.v3-on #tabbar .tab-item.tab-sig137 .tab-sig-img { width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--mint); background: var(--ink); }
  /* Sig lives in the bar's center slot on phones: no floating orb. */
  /* (The .show variant is spelled out too: its rule carries an
     extra class, so it outranks the plainer selector — Build
     -137 QA caught the pill floating over mobile homes.) */
  body.v3-on #agent-fab, body.v3-on #agent-fab.show, body.admin-on #agent-fab, body.admin-on #agent-fab.show { display: none !important; }
}
@media (min-width: 768px) {
  .tab-menu137 { display: none !important; }
  #tabbar .tab-item.tab-sig137 .tab-sig-img { width: 22px; height: 22px; border-radius: 50%; }
}

/* --- Booking -137: timing windows + propose-your-terms --- */
.twin137 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.twin137 .pdp-day { align-items: flex-start; text-align: left; }
.twin137 .pdp-day small { display: block; }
.pdp-propose { margin-top: 14px; border-top: 1px solid var(--line2); padding-top: 12px; }
.pdp-propose summary { font-weight: 700; cursor: pointer; font-size: .95rem; }
.pdp-propose .field { margin-top: 10px; }

/* ---- Build -138: Admin expansion rooms (Automations,
   Connections, Templates, Marketing, Social, Team, Learn) ----
   Written overflow-safe for 390px: every row stacks its side
   block under the main block on narrow screens, long words
   wrap, nothing in these rooms may cross its container. */
.a138-h { margin: 22px 0 8px; }
.a138-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line2); min-width: 0; }
.a138-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.a138-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.a138-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line2); color: var(--ink); white-space: nowrap; }
.a138-tag.live { background: #e3f6ec; color: #0a6b3c; }
.a138-tag.off { background: #fdecec; color: #a12626; }
.a138-conn { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line2); min-width: 0; }
.a138-conn-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.a138-conn-state { font-weight: 600; }
.a138-conn-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.a138-tgl { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.a138-tgl input { opacity: 0; width: 0; height: 0; }
.a138-tgl .tr { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.a138-tgl .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.a138-tgl input:checked + .tr { background: var(--azure, #006AFC); }
.a138-tgl input:checked + .tr::after { left: 23px; }
.a138-detail { margin: 12px 0; }
.a138-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-width: 0; }
.a138-preview { background: #f7f8f7; border: 1px solid var(--line2); border-radius: 12px; padding: 12px; margin: 10px 0; }
.a138-pv-k { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.a138-pv-k:first-child { margin-top: 0; }
.a138-pv-sub { font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.a138-pv-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; margin: 4px 0 0; max-height: 320px; overflow-y: auto; }
.a138-notebox { background: #fff8e6; border: 1px solid #ead9a0; border-radius: 10px; padding: 8px 10px; font-size: .85rem; margin: 8px 0; overflow-wrap: anywhere; }
.a138-lockline { background: #eef4ff; border: 1px solid #c9dcff; border-radius: 10px; padding: 8px 10px; font-size: .88rem; margin: 8px 0; overflow-wrap: anywhere; }
.a138-chip { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; background: var(--line2); border-radius: 6px; padding: 1px 6px; margin: 0 2px; }
.a138-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.a138-form.col { flex-direction: column; align-items: stretch; }
.a138-form input[type="text"], .a138-form input[type="email"], .a138-form input[type="number"], .a138-form input[type="date"], .a138-form input[type="datetime-local"], .a138-form select, .a138-form textarea { min-width: 0; max-width: 100%; }
.a138-form textarea { width: 100%; box-sizing: border-box; }
.a138-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.a138-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.a138-card { border: 1px solid var(--line2); border-radius: 14px; padding: 14px; min-width: 0; overflow-wrap: anywhere; }
.a138-card h4 { margin: 0 0 6px; }
.a138-bignum { font-size: 2rem; font-weight: 800; line-height: 1.05; }
.a138-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.a138-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.a138-checks .ckrow { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.a138-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.a138-photo { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 2px solid var(--line2); border-radius: 10px; background: none; cursor: pointer; min-width: 0; text-align: left; }
.a138-photo img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.a138-photo span { font-size: .68rem; overflow-wrap: anywhere; }
.a138-photo.on { border-color: var(--azure, #006AFC); }
.a138-photo:disabled { opacity: .45; cursor: not-allowed; }
.a138-frame { width: 100%; height: 560px; border: 1px solid var(--line2); border-radius: 12px; background: #fff; margin-top: 10px; }
.a138-ln-sec { border-top: 1px dashed var(--line2); padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.a138-recips { max-height: 260px; overflow-y: auto; }
@media (max-width: 767.98px) {
  .a138-row, .a138-conn { flex-direction: column; gap: 6px; }
  .a138-row-side { justify-content: flex-start; }
  .a138-2col { grid-template-columns: 1fr; }
  .a138-form { flex-direction: column; align-items: stretch; }
  .a138-form .btn { align-self: flex-start; }
}
.a138-flag { display: inline-block; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #fff3d6; border: 1px solid #e5c15c; color: #7a5b00; white-space: nowrap; }

/* Build -138 shop v2 bits: the Mirror card body keeps the
   card's rhythm inside its wrapper, and the Find offers sort
   label stretches to its search-row slot. */
.mirror-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.shop-searchrow .fo-selfilter { width: 100%; }
.shop-searchrow .fo-selfilter select { flex: 1 1 auto; min-width: 0; }
.mirror-cover { border-radius: 10px; }

/* Build -138 (desktop table sweep): Jeff's Decided-table
   screenshot — the Details column ran off the card's right edge
   on DESKTOP, text cut mid-word. Rules: every table stays inside
   its card at every width; the applications tables (Pending +
   Decided) use a fixed layout with sane column shares so the
   Details line WRAPS and stays fully readable — never clipped,
   never truncated away. Editors inside a cell may not force the
   cell wider than its column. */
.table-wrap { min-width: 0; max-width: 100%; }
table { max-width: 100%; }
.apps-table { table-layout: fixed; width: 100%; }
.apps-table th, .apps-table td { overflow-wrap: break-word; }
.apps-table td:first-child { overflow-wrap: anywhere; }
.apps-table td > div, .apps-table td .row-more > div { min-width: 0 !important; max-width: 100%; }
.apps-table td .field select, .apps-table td .field input { max-width: 100%; }

/* The Type column's standing badge ("Founding priority #1")
   is a nowrap pill wider than its column — inside the
   applications tables badges wrap their text instead of
   forcing the cell wider than the card. */
.apps-table .badge { white-space: normal; }

/* The Mirror card's fit pill never wraps its two words. */
.mirror-fit { white-space: nowrap; }

/* The Top match tag straddles the tray column's top border
   (the approved bold-box + tag look, same as the shelf tiles);
   the column's overflow guard clipped its top half. The tag is
   the one intentional escapee — the column's content rules
   (min-width 0, wrapping lines) still hold everything else in. */
.shelf-tray-col.top-match { overflow: visible; }

/* Magpie flip — "formerly SIGNL" bridge line (flip package item 4.7; removal is item 5.6:
   delete every .formerly-line span (marked data-bridge="formerly-signl"), unwrap .brand-lockup, drop this block) */
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.formerly-line{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink2);white-space:nowrap}
.topbar .formerly-line{color:rgba(255,255,255,.85)}

/* Logged-in phone top bars — BRIDGE-ERA LAYOUT (Jeff, 2026-11-07,
   revised 12:12 ET; temporary — it comes down with the bridge
   removal, item 5.6). While the bridge lives, the phone bar reads:
   the Magpie lockup with "formerly SIGNL" under it at the FAR LEFT,
   and one icon row aligned RIGHT — profile circle, help (?), then
   the bar's own right icons (messages + hamburger on the .tb2
   shells; stats + hamburger on the admin .tr row, whose help
   already rides on the right). The person's NAME is out of the bar
   entirely: .tb2-name / .tr-name are display:none ONLY inside this
   block's phone query. The lockup is the existing .brand-lockup +
   .formerly-line span, rendered as .mbrand inside renderTopBar2
   (creator / business / partner / recruiter) and renderTopRow
   (admin) — same artwork and bridge styling, only placed. Desktop
   is untouched: .mbrand stays display:none above the phone
   breakpoint and every layout rule below lives in the phone query.

   RESTORATION (item 5.6 — do exactly this, nothing else): delete
   this block AND the two .mbrand spans in public/app.js
   (renderTopBar2 + renderTopRow). The bars then return EXACTLY to
   their pre-bridge phone chrome: the name reappears beside the
   profile circle on the left (its suppression lives only here),
   profile + help sit on the left again, and the admin row's
   Build -130 ordering resumes — the order / margin-left overrides
   below live only here and lapse with the block. */
.mbrand{display:none}
@media (max-width:767.98px){
  .mbrand{display:flex;flex:none;align-items:center}
  .mbrand .brand-lockup{gap:2px}
  .mbrand .brand-lockup img{height:16px;width:auto;display:block}
  /* .tb2 shells: lockup left; profile, help, actions right as one
     tight row. .tb2-actions gives up its base margin-left:auto so
     the free space lands before the profile, not inside the row. */
  .tb2-brand{order:1}
  .tb2-id{order:2;margin-left:auto;padding:4px}
  .tb2-name{display:none}
  .tb2-help130{order:3}
  .tb2-actions{order:4;margin-left:0}
  /* Admin .tr row: same pattern. .tr-right unwraps at this width
     (Build -130 Part 8), so its icons take orders here too; the
     Part 8 margins that pushed stats + hamburger apart are zeroed
     so the right cluster sits tight. */
  .tr-brand{order:1}
  .tr-id{order:2;margin-left:auto;padding:4px}
  .tr-name{display:none}
  .tr-help126{order:3}
  .tr-right > button:not(.tr-ev125){order:4;margin-left:0}
  .tr-ev125{order:5;margin-left:0}
}


/* ================= Maggie (2026-11-07): Sig becomes Maggie.
   Her mark is the magpie from Jeff's canonical logo master,
   traced to SVG (see maggieMarkHtml in app.js). The orb stays
   behind SIG_MARK_BIRD=false; these rules size her slots and
   run her motion. Transform-only, and reduced motion stills
   her completely. ================= */
.maggie-mark { display:block; overflow:visible; }
.maggie-mark .mg-bob { animation: mgBob 3.8s ease-in-out infinite; }
.maggie-mark .mg-head-rot { transform-box: view-box; transform-origin: 84px 47px; animation: mgTilt 9s ease-in-out infinite; transition: transform .35s ease; }
.maggie-mark .mg-tail-rot { transform-box: view-box; transform-origin: 54px 90px; animation: mgFlick 7s ease-in-out infinite; }
.maggie-mark .mg-wing-rot { transform-box: view-box; transform-origin: 42px 76px; }
.maggie-mark[data-state="listen"] .mg-head-rot { animation: none; transform: rotate(-9deg); }
.maggie-mark[data-state="think"] .mg-wing-rot { animation: mgFlutter .34s ease-in-out infinite alternate; }
.maggie-mark[data-state="think"] .mg-head-rot { animation: none; transform: rotate(-4deg); }
.maggie-mark[data-state="greet"] .mg-wing-rot { animation: mgFlap .95s ease-out 1; }
.maggie-mark[data-state="greet"] .mg-bob { animation: mgHop .95s ease-out 1; }
.maggie-mark[data-state="rest"] .mg-bob, .maggie-mark[data-state="rest"] .mg-head-rot, .maggie-mark[data-state="rest"] .mg-tail-rot { animation: none; }
@keyframes mgBob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-1.1px);} }
@keyframes mgTilt { 0%,52%{ transform: rotate(0deg);} 60%,72%{ transform: rotate(3.2deg);} 80%{ transform: rotate(-1.6deg);} 88%,100%{ transform: rotate(0deg);} }
@keyframes mgFlick { 0%,68%{ transform: rotate(0deg);} 73%{ transform: rotate(2.3deg);} 77%{ transform: rotate(-0.9deg);} 82%,100%{ transform: rotate(0deg);} }
@keyframes mgFlutter { from{ transform: rotate(-13deg);} to{ transform: rotate(5deg);} }
@keyframes mgFlap { 0%{ transform: rotate(0deg);} 30%{ transform: rotate(-27deg);} 55%{ transform: rotate(7deg);} 78%{ transform: rotate(-13deg);} 100%{ transform: rotate(0deg);} }
@keyframes mgHop { 0%{ transform: translateY(0);} 35%{ transform: translateY(-3.2px);} 70%{ transform: translateY(0.6px);} 100%{ transform: translateY(0);} }
@media (prefers-reduced-motion: reduce) {
  .maggie-mark .mg-bob, .maggie-mark .mg-head-rot, .maggie-mark .mg-tail-rot, .maggie-mark .mg-wing-rot { animation: none !important; transition: none !important; transform: none !important; }
}

/* Slot sizing: the svg is 120x134, so heights run ~1.12x width. */
.maggie-mark { width: 44px; height: 49px; }
svg.rail-sig-img.maggie-mark { width: 24px; height: 27px; }
#agent-fab svg.maggie-mark { width: 32px; height: 36px; }
.sigbox-orb.maggie-orb { background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.sigbox-orb .maggie-mark { width: 40px; height: 45px; }
.sighero137-head .sigbox-orb .maggie-mark { width: 56px; height: 63px; }
.sigsheet137-head .sigbox-orb .maggie-mark { width: 44px; height: 49px; }
.sig-ava-bird { box-shadow: 0 0 0 2px var(--mint, #A9E8C9); }
.sig-ava .maggie-mark { width: 88%; height: 88%; }
.sig-hero-media.maggie-hero { background: none; box-shadow: none; overflow: visible; }
.maggie-hero .maggie-mark { width: 100%; height: 100%; }
.sig-celeb-media.maggie-celeb { background: none; box-shadow: none; overflow: visible; }
.maggie-celeb .maggie-mark { width: 100%; height: 100%; }

/* Character Maggie (SIG_MARK_MODE = "character", Jeff,
   2026-11-07): her artwork is Jeff's character sheet tiles
   and nothing else — no generated likeness ships. The tiles
   fill their round slots edge-to-edge (the base
   .sig-hero-media / .sig-celeb-media stacks already size and
   clip the fills), and her MOTION is these transforms on the
   real artwork: the image moves, the bird is never redrawn.
   Every keyframe carries a slight scale so a tilt or a hop
   never bares the slot's edge inside the circular clip. */
img.maggie-char-img { object-fit: cover; }
#agent-fab img.maggie-char-img { width: 32px; height: 32px; border-radius: 50%; }
.sig-ava-char { border-radius: 50%; overflow: hidden; background: none; box-shadow: 0 0 0 2px var(--mint, #A9E8C9); }
.sig-ava-char img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sigbox-orb.maggie-char-head { overflow: hidden; }
.maggie-char-head img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; animation: charBob 4.4s ease-in-out infinite; }
.maggie-char-head.is-still img { animation: none; }
/* The hero's motion vocabulary, keyed by sigHeroSet's
   data-mode: idle bobs gently, think sways, greet hops in,
   celebrate wiggles, talk chirps in quick little bounces,
   listen holds a head-cock tilt while the user composes. */
.maggie-char-hero .maggie-char-poster { transform-origin: 50% 62%; animation: charBob 3.8s ease-in-out infinite; }
.maggie-char-hero[data-mode="think"] .maggie-char-poster { animation: charSway 3.2s ease-in-out infinite; }
.maggie-char-hero[data-mode="greet"] .maggie-char-poster { animation: charHop .95s ease-out 1, charBob 3.8s ease-in-out .95s infinite; }
.maggie-char-hero[data-mode="celebrate"] .maggie-char-poster { animation: charWiggle .6s ease-in-out 3, charBob 3.8s ease-in-out 1.8s infinite; }
.maggie-char-hero[data-mode="talk"] .maggie-char-poster { animation: charChirp .5s ease-in-out 3, charBob 3.8s ease-in-out 1.5s infinite; }
.maggie-char-hero[data-mode="listen"] .maggie-char-poster { animation: charListen 4.5s ease-in-out infinite; }
.sig-celeb-media.maggie-char-celeb.is-celebrating img { animation: charWiggle .6s ease-in-out 3; }
@keyframes charBob { 0%, 100% { transform: scale(1.07) translateY(0) rotate(0deg); } 50% { transform: scale(1.07) translateY(-2.4%) rotate(.6deg); } }
@keyframes charSway { 0%, 100% { transform: scale(1.07) rotate(-1.8deg); } 50% { transform: scale(1.07) rotate(1.8deg); } }
@keyframes charHop { 0% { transform: scale(1.07) translateY(0); } 35% { transform: scale(1.07) translateY(-8%); } 68% { transform: scale(1.07) translateY(0); } 84% { transform: scale(1.07) translateY(-3%); } 100% { transform: scale(1.07) translateY(0); } }
@keyframes charWiggle { 0%, 100% { transform: scale(1.07) rotate(0deg) translateY(0); } 25% { transform: scale(1.07) rotate(-3.2deg) translateY(-3%); } 55% { transform: scale(1.07) rotate(2.6deg) translateY(0); } 78% { transform: scale(1.07) rotate(-1.8deg) translateY(-2%); } }
@keyframes charChirp { 0%, 100% { transform: scale(1.07) translateY(0) rotate(0deg); } 30% { transform: scale(1.07) translateY(-4.5%) rotate(-1.2deg); } 62% { transform: scale(1.07) translateY(0) rotate(0deg); } }
@keyframes charListen { 0%, 100% { transform: scale(1.09) rotate(-3deg) translateY(0); } 50% { transform: scale(1.09) rotate(-2.2deg) translateY(-1.6%); } }
@media (prefers-reduced-motion: reduce) {
  .maggie-char-head img, .maggie-char-hero .maggie-char-poster, .sig-celeb-media.maggie-char-celeb img { animation: none !important; }
}