/* public/desk-shape-b-p3.css
 *
 * ⛔ PORTED VERBATIM FROM docs/ui/mockups_live/subleeva-desk-p3-shape-b-mockup.html
 *    (sha256 26ed2003…), lines 13–322, by EXTRACTION — proved byte-identical to
 *    the source before the one edit below was applied.
 *
 * ⚠ SCOPED UNDER .shape-b-p3-root, ITS OWN ROOT, NOT Shape B's. P2's port lives
 *    under .shape-b-root and the two mockups style the SAME generic class names
 *    (.sheet, .bar, .drawer, .cluster, .advisor) with different values. One
 *    shared scope would have let P3's rules silently restyle the live cohort
 *    surface — the exact blast radius scoping exists to prevent, one pillar
 *    along. Two roots, two surfaces, no bleed in either direction.
 */
/* ================================================================
   CSS TOKENS AND SHELL COMPONENTS — carried forward verbatim from
   subleeva-desk-p2-shape-b-mockup.html (sha256 4cc8fff9…4328, the
   ratified P2 Shape B artefact). Not redesigned. Per the established
   pattern for P3 onward: verbatim port of the shared shell, only the
   render logic and copy change to fit P3's real schema.
   ================================================================ */
.shape-b-p3-root{--canvas:#EBE5D7;--surface:#FBF9F3;--field:#FFFFFF;--ivory-brand:#F7F4EC;
--border-strong:#857E6F;--border-soft:#DAD4C6;--text:#1C1B18;--text-secondary:#5C574C;
--text-placeholder:#6B655A;--state-mutation:#F59E0B;--state-mutation-ink:#92400E;
--state-success:#0E7A6C;--state-pending-tint:#FAEBCF;--field-error:#C2372B;
--provisional:#8A4B9E;--provisional-wash:#F1E7F5;
--radius-field:8px;--radius-card:12px;--row-height:36px;--target-min:24px;
--font-ui:"Inter",system-ui,sans-serif;--font-voice:"Source Serif 4",Georgia,serif;
--font-rec:"Source Code Pro",ui-monospace,Menlo,monospace;
--fs-meta:12px;--fs-small:13px;--fs-body:14px;--fs-section:16px;--fs-panel:20px;
--drawer-face:40px;--desk-base-reserve:calc(var(--drawer-face) + 14px);--doc-max:680px;
--sh-contact:0 1px 2px rgba(60,40,25,.10);--sh-ambient:0 8px 24px rgba(60,40,25,.10);
--sh-drawer:0 2px 6px rgba(60,40,25,.14),0 18px 44px rgba(60,40,25,.20);--brand:#A84B24}
.shape-b-p3-root[data-theme=cobalt]{--accent:#2D5BFF;--accent-ink:#1E46E0;--accent-hover:#1E46E0;--accent-wash:#E4EAFF}

.shape-b-p3-root *, .shape-b-p3-root *::before, .shape-b-p3-root *::after{box-sizing:border-box;margin:0;padding:0}
.shape-b-p3-root, .shape-b-p3-root{height:100%}
.shape-b-p3-root{background:var(--canvas);color:var(--text);font:400 var(--fs-body)/1.5 var(--font-ui);
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow:hidden}
@media (prefers-reduced-motion: reduce){ .shape-b-p3-root *{animation:none!important;transition:none!important} }

.shape-b-p3-root .shell{height:100vh;display:flex;flex-direction:column;background:var(--canvas)}

.shape-b-p3-root .masthead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:16px;background:var(--canvas);flex-shrink:0}
.shape-b-p3-root .spine-wrap{position:relative;min-width:0;display:flex;align-items:center;gap:2px}
.shape-b-p3-root .scroll-arrow{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-soft);
  background:var(--field);color:var(--text-secondary);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.shape-b-p3-root .scroll-arrow:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
/* ⛔ THE MAP'S RULES LIVE IN public/desk-map.css — [[D517]]. This sheet carried
   only two of the ten, and both were for `.tree-scroll-wrap`, which renders
   nowhere — so NONE of the rules the Map actually needs matched under this
   root, and it rendered as a flat list of glyphs. */
.shape-b-p3-root .mh-icons{display:flex;align-items:center;gap:6px;justify-self:end}
.shape-b-p3-root .icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
border-radius:50%;border:1px solid transparent;background:transparent;
color:var(--text-secondary);cursor:pointer;flex-shrink:0;padding:0}
.shape-b-p3-root .spine{display:flex;gap:2px;padding:0 18px 8px;overflow-x:auto;min-width:0;cursor:grab;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  background-image:
    linear-gradient(to right, var(--canvas) 30%, transparent),
    linear-gradient(to left, var(--canvas) 30%, transparent),
    linear-gradient(to right, rgba(28,27,24,.18), transparent),
    linear-gradient(to left, rgba(28,27,24,.18), transparent);
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 10px 100%, 10px 100%;
  background-position:left, right, left, right;
  background-attachment:local, local, scroll, scroll}
.shape-b-p3-root .spine::-webkit-scrollbar{display:none}
.shape-b-p3-root .sp{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:6px;
font-size:var(--fs-small);white-space:nowrap;color:var(--text-secondary);font-weight:400}
.shape-b-p3-root .sp .g{width:15px;height:15px;display:grid;place-items:center;font-size:10px}
.shape-b-p3-root .sp.done .g{color:var(--state-success)}
.shape-b-p3-root .sp.nav-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.shape-b-p3-root .sp.nav-link:hover{color:var(--accent-ink)}
.shape-b-p3-root .sp.nav-link:hover .g{color:var(--accent-ink)}
.shape-b-p3-root .sp.here{color:var(--text);font-weight:600;background:var(--state-mutation);
box-shadow:inset 0 -2px 0 var(--state-mutation-ink)}
.shape-b-p3-root .sp.ahead{color:var(--text-secondary);border:1.5px dashed var(--border-strong);background:rgba(133,126,111,.06)}

.shape-b-p3-root .stage{flex:1;position:relative;overflow:hidden}
.shape-b-p3-root .stage-inner{position:absolute;inset:0;overflow:hidden;display:flex;justify-content:center;
  align-items:stretch;padding:22px 48px var(--desk-base-reserve)}
.shape-b-p3-root .sheet{width:100%;max-width:var(--doc-max);background:var(--field);border-radius:10px;
  box-shadow:var(--sh-contact),var(--sh-ambient);overflow:hidden;display:flex;
  flex-direction:column;min-height:0}

.shape-b-p3-root .advisor{margin:16px 26px 0;flex-shrink:0;cursor:pointer}
.shape-b-p3-root .adv-head{display:flex;align-items:center;justify-content:space-between}
.shape-b-p3-root .adv-tag{color:var(--text-secondary);font-size:14px;font-weight:600;
letter-spacing:.05em;text-transform:uppercase}
.shape-b-p3-root .adv-toggle{color:var(--text-secondary);font-size:var(--fs-meta);font-weight:600;background:none;
border:none;cursor:pointer;font-family:var(--font-ui);text-decoration:underline;text-underline-offset:2px}
.shape-b-p3-root .adv-content{overflow:hidden;transition:max-height .55s cubic-bezier(.16,.84,.29,1)}
.shape-b-p3-root .adv-body{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.6;margin-top:6px}
.shape-b-p3-root .adv-body b{font-weight:600}
.shape-b-p3-root .adv-title{font:600 var(--fs-body) var(--font-voice);color:var(--text);margin-top:8px}

.shape-b-p3-root .pane-status{padding:14px 26px 0;font-size:var(--fs-meta);color:var(--text-secondary)}
.shape-b-p3-root .pane-status b{color:var(--text);font-weight:600}

/* Campaign tabs — this pane's own scope selector, one level below the
   spine, same shape P1's proposition tabs already use in the live
   product. Underline-on-active, not colour alone, same accessibility
   rule as the spine's nav-links. */
.shape-b-p3-root .camp-tabs{display:flex;gap:4px;padding:14px 26px 0;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.shape-b-p3-root .camp-tabs::-webkit-scrollbar{display:none}
.shape-b-p3-root .camp-tab{font:500 var(--fs-small) var(--font-ui);color:var(--text-secondary);background:none;
  border:none;border-bottom:2px solid transparent;padding:6px 4px 8px;cursor:pointer;white-space:nowrap}
.shape-b-p3-root .camp-tab:hover{color:var(--text)}
.shape-b-p3-root .camp-tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}

.shape-b-p3-root .tally{margin-top:16px;padding:12px 26px 14px;border-top:1px solid rgba(133,126,111,.22);
  border-bottom:1px solid var(--border-soft);position:relative;z-index:1;
  box-shadow:0 3px 8px rgba(58,46,34,.12), 0 10px 24px rgba(58,46,34,.09);
  background:var(--ivory-brand)}
.shape-b-p3-root .tally-figs{display:flex;gap:20px;font-family:var(--font-rec)}
.shape-b-p3-root .tally-fig b{display:block;font-size:var(--fs-panel);line-height:1.1;color:var(--text)}
.shape-b-p3-root .tally-fig span{font-size:var(--fs-meta);color:var(--text-secondary)}
.shape-b-p3-root .tally-note{margin-top:6px;font-family:var(--font-rec);font-size:var(--fs-meta);color:var(--text-secondary)}

.shape-b-p3-root .work{padding:0 0 var(--desk-base-reserve);flex:1;min-height:0;
overflow-y:scroll;scrollbar-gutter:stable;background:
linear-gradient(rgba(0,0,0,0),var(--canvas) 65%) center bottom / 100% 64px local no-repeat,
radial-gradient(farthest-side at 50% 100%,rgba(20,16,8,.4),rgba(20,16,8,0)) center bottom / 100% 32px scroll no-repeat var(--canvas)}
.shape-b-p3-root .work::-webkit-scrollbar{width:4px}
.shape-b-p3-root .work::-webkit-scrollbar-track{background:transparent}
.shape-b-p3-root .work::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}

.shape-b-p3-root .cluster{border-bottom:1px solid var(--border-soft);background:var(--field)}
.shape-b-p3-root .cluster-head{display:flex;align-items:baseline;gap:8px;padding:12px 16px;cursor:pointer;
  user-select:none;min-height:var(--target-min)}
.shape-b-p3-root .cluster-head:hover{background:var(--ivory-brand)}
.shape-b-p3-root .cluster-glyph{width:16px;text-align:center;color:var(--text-secondary);font-size:15px;flex-shrink:0}
.shape-b-p3-root .cluster-name{font:600 var(--fs-body) var(--font-ui);flex:0 0 auto;white-space:nowrap}
.shape-b-p3-root .cluster-desc{font:400 var(--fs-meta) var(--font-ui);color:var(--text-secondary);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shape-b-p3-root .cluster-stat{font-family:var(--font-rec);font-size:var(--fs-meta);color:var(--text-secondary);
  white-space:nowrap;flex:0 0 auto}
.shape-b-p3-root .cluster-stat.empty{font-style:italic}
.shape-b-p3-root .cluster-absence{padding:10px 16px 12px 34px;font-size:var(--fs-body);
  line-height:1.5;color:var(--text-secondary);background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 8px,rgba(133,126,111,.10) 8px,rgba(133,126,111,.10) 16px)}
.shape-b-p3-root .cluster-body{border-top:1px solid var(--border-soft)}
/* §20.1 absence card gets its own reason line, distinct from the
   generic prose — this is the "tier has nothing" case (UNGROUNDABLE),
   sourced from tier_outcomes, not a failed persona card. Plain body
   font, not the record/monospace family — this is translated prose
   for a client, not a machine-key display, per Al's ruling that no
   raw internal field names or values appear on this surface. */
.shape-b-p3-root .absence-reason{margin-top:8px;font-size:var(--fs-small);line-height:1.5;
  color:var(--text-secondary)}
.shape-b-p3-root .absence-reason b{color:var(--text);font-weight:600;font-size:var(--fs-meta);
  text-transform:uppercase;letter-spacing:.04em}

.shape-b-p3-root .org-row{display:flex;align-items:center;gap:8px;padding:12px 16px 12px 46px;
  border-top:1px solid var(--border-soft);cursor:pointer;min-height:var(--target-min)}
.shape-b-p3-root .org-row:first-child{border-top:none}
.shape-b-p3-root .org-row:hover{background:var(--ivory-brand)}
.shape-b-p3-root .org-glyph{width:14px;text-align:center;color:var(--text-secondary);font-size:13px;flex-shrink:0}
.shape-b-p3-root .org-name{font:500 var(--fs-small) var(--font-ui);flex-shrink:0}
.shape-b-p3-root .org-sub{font:400 var(--fs-meta) var(--font-ui);color:var(--text-secondary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}

.shape-b-p3-root .org-detail{padding:10px 16px 12px 34px;border-top:1px solid var(--border-soft);background:var(--ivory-brand)}
.shape-b-p3-root .org-detail-row{display:flex;gap:8px;font-size:var(--fs-small);margin-bottom:5px}
.shape-b-p3-root .org-detail-row .k{color:var(--text-secondary);width:90px;flex-shrink:0}
.shape-b-p3-root .org-detail-prose{font-size:var(--fs-body);line-height:1.5;margin:8px 0}
.shape-b-p3-root .org-remove{font:500 var(--fs-small) var(--font-ui);color:var(--field-error);background:none;
  border:1px solid var(--field-error);border-radius:6px;padding:5px 10px;cursor:pointer}

/* Every element carrying a real field + provenance is clickable to
   open its provenance detail. Neither underline nor accent colour on
   the text itself read well against full sentences — using a small
   glyph instead keeps the body text completely plain and puts the
   affordance in one deliberate, consistent marker. */
.shape-b-p3-root .org-detail-row .v, .shape-b-p3-root .persona-hook, .shape-b-p3-root .persona-rationale, .shape-b-p3-root .field-value, .shape-b-p3-root .field-mock, .shape-b-p3-root .field-dropped, .shape-b-p3-root .challenge-label{cursor:pointer}
.shape-b-p3-root .challenge-head-concern{padding:0 16px 8px 50px}
.shape-b-p3-root .prov-glyph{display:inline-block;margin-left:5px;font-size:11px;color:var(--text-secondary);
  vertical-align:middle;cursor:pointer}
.shape-b-p3-root .challenge-label:hover .prov-glyph, .shape-b-p3-root .org-detail-row:hover .prov-glyph, .shape-b-p3-root .persona-hook:hover .prov-glyph, .shape-b-p3-root .persona-rationale:hover .prov-glyph, .shape-b-p3-root .challenge-field:hover .prov-glyph, .shape-b-p3-root .persona-tags:hover .prov-glyph{
  color:var(--accent-ink)}
.shape-b-p3-root .persona-tags{cursor:pointer}
.shape-b-p3-root .persona-tag{cursor:pointer}
.shape-b-p3-root .persona-tags:hover .persona-tag{border-color:var(--accent-ink); color:var(--accent-ink)}
.shape-b-p3-root .challenge-field{cursor:pointer}

/* ---------------- challenge accordion — one level further nested
   than P2 ever needed, since a challenge here is itself a small
   accordion with two further sub-groups inside it, not a flat row. */
.shape-b-p3-root .challenge-list{border-top:1px solid var(--border-soft)}
.shape-b-p3-root .challenge-row{border-top:1px solid var(--border-soft);background:var(--surface)}
.shape-b-p3-root .challenge-row:first-child{border-top:none}
.shape-b-p3-root .challenge-head{display:flex;align-items:baseline;gap:8px;padding:10px 16px 10px 50px;cursor:pointer;
  min-height:var(--target-min)}
.shape-b-p3-root .challenge-head:hover{background:var(--ivory-brand)}
.shape-b-p3-root .challenge-glyph{width:14px;text-align:center;color:var(--text-secondary);font-size:13px;flex-shrink:0}
.shape-b-p3-root .challenge-label{font:600 var(--fs-small) var(--font-ui);color:var(--text)}
.shape-b-p3-root .challenge-body{padding:0 16px 10px 74px}
.shape-b-p3-root .challenge-field{padding:6px 0;font-size:11px;line-height:1.5;border-radius:4px}
.shape-b-p3-root .field-kicker{display:block;font-size:var(--fs-meta);color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.shape-b-p3-root .field-value{}
.shape-b-p3-root .field-dropped{font-style:italic}
.shape-b-p3-root .field-mock{font-style:italic}
.shape-b-p3-root .mock-badge{display:inline-block;margin-left:6px;font-family:var(--font-ui);font-style:normal;text-decoration:none;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--provisional);
  background:var(--provisional-wash);border-radius:4px;padding:1px 6px;vertical-align:middle}

/* §30 grounding concern — amber/mutation tokens, deliberately not the
   error colour and not the grey dropped-state colour. Per the spec:
   "a surface that renders a concern as a deletion, an error, or a gap
   is wrong" — this sits ALONGSIDE the value, which is always shown in
   full, never instead of it. */
.shape-b-p3-root .concern-note{margin-top:6px;padding:6px 10px;border-radius:6px;font-size:11px;line-height:1.5;
  background:var(--state-pending-tint);color:var(--state-mutation-ink);cursor:pointer}
.shape-b-p3-root .concern-badge{display:inline-block;margin-right:6px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--state-mutation-ink)}

/* Section header introducing the challenge list — same weight as the
   drawer's own .grp h4, so it reads as a real section boundary rather
   than a continuation of the persona's tags immediately above it. */
.shape-b-p3-root .challenges-heading{font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:600;padding:10px 0 6px;margin-top:4px;
  border-top:1px solid var(--border-soft)}
.shape-b-p3-root .challenge-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-secondary);background:var(--ivory-brand);border:1px solid var(--border-soft);
  border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:middle}

/* Sub-accordions — "Impact on the organisation" / "Impact on the
   persona" — one indent step further than the challenge itself, same
   glyph language, deliberately smaller so they read as nested rather
   than a sibling of the challenge. */
.shape-b-p3-root .sub-accordion{margin-top:6px;border:1px solid var(--border-soft);border-radius:6px;background:var(--field)}
.shape-b-p3-root .sub-accordion-head{display:flex;align-items:center;gap:7px;padding:8px 10px;cursor:pointer;
  font:600 var(--fs-meta) var(--font-ui);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}
.shape-b-p3-root .sub-accordion-head:hover{color:var(--text)}
.shape-b-p3-root .sub-glyph{width:12px;text-align:center;font-size:11px}
.shape-b-p3-root .sub-accordion-body{padding:0 10px 8px 27px;border-top:1px solid var(--border-soft)}

/* ---------------- challenge sub-list — nested one level further
   than P2 ever needed, since P3's real shape is persona -> challenges,
   not a flat org list. Same visual family as .org-detail, one more
   indent step, so it reads as "inside the persona" rather than a new
   kind of thing. ---------------- */
/* Persona-level fields beyond the archetype line — opening hook is a
   direct-address line, styled as a quote without invoking a second
   serif moment (the advisor title already carries this view's one
   serif instance, per DESK_PATTERN §4). Role signals render as small
   tag chips, same visual family as the rec/k-v rows elsewhere. */
.shape-b-p3-root .persona-hook{font-size:11px;font-style:italic;line-height:1.55;
  color:var(--text);margin:8px 0;padding-left:10px;border-left:2px solid var(--border-soft)}
.shape-b-p3-root .persona-rationale{font-size:12px;line-height:1.5;margin:8px 0}
.shape-b-p3-root .persona-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.shape-b-p3-root .persona-tag{font-size:var(--fs-meta);color:var(--text-secondary);background:var(--ivory-brand);
  border:1px solid var(--border-soft);border-radius:100px;padding:3px 10px}

/* Operational tier's genuine build-time gap — deliberately NOT the
   hatched absence pattern, which is reserved for a real pipeline
   outcome (tactical's UNGROUNDABLE case). This is an admission that
   no fixture exists yet, not a finding about any client. */
.shape-b-p3-root .cluster-nofixture{padding:10px 16px 12px 34px;font-size:var(--fs-body);
  line-height:1.5;color:var(--text-secondary);font-style:italic;background:var(--surface)}

.shape-b-p3-root .bar{flex-shrink:0;border-top:2px solid var(--border-strong);padding:14px 24px;
background:var(--surface);display:flex;align-items:center;gap:16px;
box-shadow:0 -3px 8px rgba(58,46,34,.12), 0 -10px 24px rgba(58,46,34,.09)}
.shape-b-p3-root .bar-main{flex:1 1 auto;min-width:0}
.shape-b-p3-root .btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-field);
min-height:var(--row-height);padding:0 16px;font:500 var(--fs-body) var(--font-ui);
display:inline-flex;align-items:center;cursor:pointer}
.shape-b-p3-root .lede{font-size:var(--fs-small);color:var(--text-secondary);margin-top:6px}
/* Persistent approve-bar copy — ambient state of the list, not an
   outcome of clicking. Shown whenever any field in the active
   campaign carries a concern; separate mechanism from the toast,
   which fires only at the moment Confirm is actually clicked. */
.shape-b-p3-root .bar-concern-note{font-size:var(--fs-small);color:var(--state-mutation-ink);
  background:var(--state-pending-tint);border-radius:6px;padding:6px 10px;margin-bottom:8px}

.shape-b-p3-root .scrim{position:absolute;inset:0;z-index:4;background:transparent;opacity:0;
pointer-events:none;transition:opacity .5s ease}
.shape-b-p3-root .scrim.on{background:rgba(28,27,24,0.06);opacity:1;pointer-events:auto}
.shape-b-p3-root .drawer{position:absolute;z-index:5;background:var(--surface);display:flex;overflow:hidden;
box-shadow:0 0 0 rgba(0,0,0,0);
transition:transform .55s cubic-bezier(.16,.84,.29,1),box-shadow .55s cubic-bezier(.16,.84,.29,1)}
.shape-b-p3-root .drawer.left{left:0;top:0;bottom:0;width:min(340px,82vw);flex-direction:row;
transform:translateX(calc(-100% + var(--drawer-face)))}
.shape-b-p3-root .drawer.right{right:0;top:0;bottom:0;width:min(320px,82vw);flex-direction:row;
transform:translateX(calc(100% - var(--drawer-face)))}
.shape-b-p3-root .drawer.bottom{left:0;right:0;bottom:0;max-height:62vh;flex-direction:column;
transform:translateY(calc(100% - var(--drawer-face)))}
.shape-b-p3-root .drawer.open.left, .shape-b-p3-root .drawer.open.right{transform:translateX(0);box-shadow:var(--sh-drawer)}
.shape-b-p3-root .drawer.open.bottom{transform:translateY(0);box-shadow:var(--sh-drawer)}
.shape-b-p3-root .face{flex-shrink:0;background:var(--surface);cursor:pointer;position:relative;display:flex;
align-items:center;justify-content:center;color:var(--text-secondary);border:none;padding:0}
.shape-b-p3-root .drawer.left .face{width:var(--drawer-face);order:2;border-left:1px solid var(--border-soft)}
.shape-b-p3-root .drawer.right .face{width:var(--drawer-face);order:1;border-right:1px solid var(--border-soft)}
.shape-b-p3-root .drawer.bottom .face{height:var(--drawer-face);order:1;border-bottom:1px solid var(--border-soft)}
.shape-b-p3-root .drawer.left .d-body{order:1}
.shape-b-p3-root .drawer.right .d-body{order:2}
.shape-b-p3-root .drawer.bottom .d-body{order:2}
.shape-b-p3-root .face-label{font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;
font-weight:600;writing-mode:vertical-rl}
.shape-b-p3-root .drawer.left .face-label{transform:rotate(180deg)}
.shape-b-p3-root .drawer.bottom .face-label{writing-mode:horizontal-tb}
.shape-b-p3-root .handle{position:absolute;background:var(--ivory-brand);border:1px solid var(--border-soft);
border-radius:100px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 1px rgba(60,40,25,0.08)}
.shape-b-p3-root .drawer.bottom .handle{cursor:ns-resize}
.shape-b-p3-root .drawer.left .handle{width:5px;height:34px;right:5px;top:50%;transform:translateY(-50%)}
.shape-b-p3-root .drawer.right .handle{width:5px;height:34px;left:5px;top:50%;transform:translateY(-50%)}
.shape-b-p3-root .drawer.bottom .handle{width:34px;height:5px;top:5px;left:50%;transform:translateX(-50%)}
.shape-b-p3-root .d-body{overflow-y:auto;flex:1;min-height:0;padding:16px 18px 22px}
.shape-b-p3-root .grp{margin-bottom:18px}
.shape-b-p3-root .grp h4{font-size:var(--fs-meta);letter-spacing:.06em;text-transform:uppercase;
color:var(--text-secondary);font-weight:600;margin-bottom:8px;padding-bottom:5px;
border-bottom:1px solid var(--border-soft)}
.shape-b-p3-root .rec{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
font-size:var(--fs-small);align-items:baseline}
.shape-b-p3-root .rec .k{color:var(--text-secondary);flex-shrink:0}
.shape-b-p3-root .rec .v{font-family:var(--font-rec);text-align:right;min-width:0;overflow-wrap:anywhere;color:var(--text)}
.shape-b-p3-root .serif{font-size:var(--fs-small);line-height:1.58;color:var(--text-secondary)}
.shape-b-p3-root .progrow{display:flex;gap:11px;padding:7px 0;align-items:center}
.shape-b-p3-root .nav-link{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.shape-b-p3-root .nav-link:hover{color:var(--accent-ink)}
.shape-b-p3-root .progrow.nav-link:hover .l{color:var(--accent-ink)}
.shape-b-p3-root .progrow.nav-link{cursor:pointer}
.shape-b-p3-root .progrow .g{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
font-size:10px;flex-shrink:0}
.shape-b-p3-root .progrow .l{font-size:var(--fs-small);font-weight:400;color:var(--text-secondary)}
.shape-b-p3-root .progrow.done .g{background:var(--surface);color:var(--state-success);border:1px solid var(--state-success)}
.shape-b-p3-root .progrow.progress .g{background:var(--accent-wash);color:var(--accent-ink);border:2px solid var(--accent)}
.shape-b-p3-root .progrow.progress .l{font-weight:500;color:var(--text)}
.shape-b-p3-root .progrow.pending .g{background:transparent;color:var(--text-secondary);border:1px dashed var(--border-strong)}

.shape-b-p3-root .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);background:var(--text);
  color:#fff;font-size:var(--fs-small);font-weight:500;padding:9px 16px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:20;
  max-width:80%;text-align:center;line-height:1.4}
.shape-b-p3-root .toast.on{opacity:1;transform:translate(-50%,0)}

/* Map drawer face only, kept present per the shared shell — its real
   tree content is P1/P2/P3-agnostic wiring done in the live app, not
   part of this design pass. Not designing new tree content here. */
.shape-b-p3-root .map-note{padding:16px 18px;font-size:var(--fs-small);color:var(--text-secondary);line-height:1.5}