/* =====================================================================================
   RJ DTC Admin · Round 2 kit · families/app-shell/family.css
   Prefix: sh-   Loads after tokens.css + base.css. Tokens only (no hex, no raw radius,
   no raw shadow). Archivo stays at normal width; tracking is zero or negative.
   ===================================================================================== */

/* Archivo voice for this family's own titled parts (normal width, never tracked out) */
.sh-place b,.sh-pop-h,.sh-grp,.sh-row b,.sh-cmd-in,.sh-frame-h b,.sh-tab,.sh-mrow b,.sh-sub-h,.sh-acct b,.sh-dr-h b,.sh-pcrumb b,.sh-jump{
  font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}

/* ---------- specimen helpers ---------- */
.sh-col{display:flex;flex-direction:column}
.sh-col>.frame{flex:1;display:flex;flex-direction:column}
.sh-col>.frame>.app{flex:1}
.sh-shell .app{min-height:600px}
.sh-shell.sh-short .app{min-height:520px}
.sh-navy{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));border-radius:var(--r-card);padding:var(--s-2);width:100%}
.sh-note{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-cap{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);margin-bottom:var(--s-2)}
.sh-cap span{font:var(--w-regular) var(--text-small) var(--font-ui);color:hsl(var(--muted-foreground));margin-left:var(--s-2)}
.sh-stack{display:flex;flex-direction:column;gap:var(--s-4)}
.sh-row-x{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}

/* ---------- the place card at the top of the sidebar (the HQ / brand tell) ---------- */
.sh-place{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 0 10px;border-radius:var(--r-control);color:inherit;width:100%;text-align:left;
  transition:background-color var(--motion-hover)}
.sh-place:hover,.sh-place.is-hover{background:hsl(var(--sidebar-foreground)/.06)}
.sh-place.is-focus,.sh-place:focus-visible{outline:2px solid hsl(var(--sidebar-ring));outline-offset:1px}
.sh-place .who{flex:1;min-width:0;line-height:1.25}
.sh-place b{display:block;font-weight:var(--w-semibold);font-size:var(--text-card);color:hsl(var(--sidebar-accent-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-place small{font-size:var(--text-micro);color:hsl(var(--sidebar-foreground))}
.sh-place>svg{opacity:.7}
.sh-place[aria-disabled=true]{opacity:.5;pointer-events:none}
.sh-place.err small{color:hsl(var(--sidebar-accent-foreground))}
.sh-place.err .sh-mono{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}

/* monogram tiles: HQ = light steel blue, brand = white, in the navy sidebar; on light grounds HQ = info, DTC = navy, B2B = slate */
.sh-mono{width:30px;height:30px;border-radius:var(--r-control);display:grid;place-items:center;flex:none;font:var(--w-bold) 11.5px/1 var(--font-voice);letter-spacing:-.01em}
.sh-mono.hq{background:hsl(var(--sidebar-primary));color:hsl(var(--sidebar-primary-foreground))}
.sh-mono.br{background:hsl(var(--sidebar-accent-foreground));color:hsl(var(--primary))}
.sh-mono.sm{width:22px;height:22px;font-size:var(--text-9-5);border-radius:var(--r-chip)}
.sh-mono.l-hq{background:hsl(var(--info));color:hsl(var(--info-foreground))}
.sh-mono.l-dtc{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.sh-mono.l-b2b{background:hsl(var(--neutral));color:hsl(var(--neutral-foreground))}
.sh-mono.l-err{background:hsl(var(--destructive)/.12);color:hsl(var(--destructive))}
.sh-skel-mono{width:30px;height:30px;border-radius:var(--r-control);background:hsl(var(--sidebar-foreground)/.12);flex:none}
.sh-skel-line{display:block;height:8px;border-radius:var(--r-chip);background:hsl(var(--sidebar-foreground)/.14)}
.sh-skel-line.l{background:hsl(var(--muted))}

/* HQ shell: a hairline of steel blue along the top of the sidebar + the scope line */
.sh-hq::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:hsl(var(--sidebar-primary)/.9)}
.sh-scope{display:flex;align-items:center;gap:6px;margin:-4px 8px 10px;font-size:var(--text-micro);color:hsl(var(--sidebar-primary))}

/* ⌘K trigger inside the sidebar (the board's sb-jump) */
.sh-jump{display:flex;align-items:center;gap:var(--s-2);margin:0 4px 6px;padding:0 10px;height:34px;border-radius:var(--r-control);width:calc(100% - 8px);
  border:1px solid hsl(var(--sidebar-foreground)/.18);font-size:12.5px;font-weight:var(--w-medium);color:hsl(var(--sidebar-foreground));text-align:left;
  transition:background-color var(--motion-hover),border-color var(--motion-hover)}
.sh-jump kbd{margin-left:auto;background:transparent;border-color:hsl(var(--sidebar-foreground)/.22);color:hsl(var(--sidebar-foreground))}
.sh-jump:hover,.sh-jump.is-hover{background:hsl(var(--sidebar-foreground)/.06);border-color:hsl(var(--sidebar-foreground)/.28)}
.sh-jump.is-focus,.sh-jump:focus-visible{outline:2px solid hsl(var(--sidebar-ring));outline-offset:1px}
.sh-jump.l{color:hsl(var(--muted-foreground));border-color:hsl(var(--input));background:hsl(var(--background));margin:0;width:auto;min-width:220px}
.sh-jump.l kbd{border-color:hsl(var(--border));background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.sh-jump.l:hover,.sh-jump.l.is-hover{background:hsl(var(--muted))}
.sh-jump.l.is-focus{outline:0;border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}

/* menu item extensions */
.sb-item.is-hover{background:hsl(var(--sidebar-foreground)/.06)}
.sb-item.is-focus{outline:2px solid hsl(var(--sidebar-ring));outline-offset:-2px}
.sb-item[aria-disabled=true]{opacity:.5;pointer-events:none}
.sb-item .sh-lock{margin-left:auto;opacity:.9}
.sb-item .spin{margin-left:auto;width:11px;height:11px;border-width:1.5px;opacity:.7}
.sh-cnt{margin-left:auto;font:var(--w-medium) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--sidebar-foreground))}
.sh-cnt.warn{color:hsl(var(--warning-foreground));background:hsl(var(--warning));padding:3px 6px;border-radius:var(--r-chip);font-weight:var(--w-semibold)}
.sh-cnt.err{display:inline-flex;align-items:center;gap:4px;color:hsl(var(--sidebar-accent-foreground))}
.sh-tree{position:relative;margin-left:18px;padding-left:8px;border-left:1px solid hsl(var(--sidebar-foreground)/.16)}
.sh-tree .sb-item{height:32px;font-size:var(--text-body)}

/* settings sub-nav (replaces the column under /settings) */
.sh-back{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 10px;margin-bottom:var(--s-1);font-size:var(--text-small);color:hsl(var(--sidebar-foreground));text-decoration:none;border-radius:var(--r-control)}
.sh-back:hover{background:hsl(var(--sidebar-foreground)/.06)}
.sh-sub-h{font-size:var(--text-section);font-weight:var(--w-semibold);color:hsl(var(--sidebar-accent-foreground));padding:6px 10px 8px;letter-spacing:-.005em}

/* ---------- top bar extensions ---------- */
.sh-topbar .crumbs a{text-decoration:none;color:inherit;border-radius:var(--r-chip);transition:color var(--motion-hover)}
.sh-topbar .crumbs a:hover{color:hsl(var(--foreground))}

.sh-banner{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-5);font-size:var(--text-small);color:hsl(var(--warning));
  background:hsl(var(--warning)/.08);border-bottom:1px solid hsl(var(--warning)/.25)}
.sh-banner a{color:hsl(var(--warning));font-weight:var(--w-semibold)}
.sh-notice{display:flex;align-items:center;gap:var(--s-2);min-height:28px;padding:var(--s-1) var(--s-5);font-size:var(--text-small);color:hsl(var(--foreground));
  background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border))}
.sh-notice svg{color:hsl(var(--warning))}
.sh-notice .btn{margin-left:auto}
.sh-avatar-btn{border-radius:var(--r-pill);transition:box-shadow var(--motion-focus)}
.sh-avatar-btn.is-hover .avatar{background:hsl(var(--secondary-border))}
.sh-avatar-btn.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}

/* ---------- breadcrumbs ---------- */
.sh-bc{display:flex;align-items:center;gap:var(--s-2);font:var(--text-card)/1 var(--font-voice);color:hsl(var(--muted-foreground));min-width:0}
.sh-bc a{color:inherit;text-decoration:none;border-radius:var(--r-chip);white-space:nowrap;transition:color var(--motion-hover)}
.sh-bc a:hover,.sh-bc a.is-hover{color:hsl(var(--foreground));text-decoration:underline;text-underline-offset:3px}
.sh-bc a.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}
.sh-bc .sep{opacity:.55}
.sh-bc b{color:hsl(var(--foreground));font-weight:var(--w-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sh-bc .ell{display:inline-grid;place-items:center;width:24px;height:22px;border-radius:var(--r-chip)}
.sh-bc .ell:hover{background:hsl(var(--muted))}
.sh-bc .sh-skel-line{width:70px}

/* ---------- popover surfaces (place switcher, account menu) ---------- */
.sh-pop{width:320px;padding:0;overflow:hidden}  /* surface = shared .menu */
.sh-pop.w{width:100%}
.sh-pop-s{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
.sh-pop-s .v{flex:1;color:hsl(var(--foreground))}
.sh-pop-s .v.plh{color:hsl(var(--muted-foreground))}
.sh-pop-s .caret{display:inline-block;width:1px;height:15px;background:hsl(var(--foreground));vertical-align:-3px;margin-left:1px;animation:sh-blink var(--motion-caret) var(--ease-blink) infinite}
@keyframes sh-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sh-pop-s .caret{animation:none}}
.sh-pop-l{padding:var(--s-1);max-height:340px;overflow:auto}
.sh-grp{display:flex;justify-content:space-between;font-size:var(--text-micro);font-weight:var(--w-semibold);color:hsl(var(--muted-foreground));padding:10px 10px 4px}
.sh-row{text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:var(--r-control);width:100%;text-align:left;transition:background-color var(--motion-hover)}
.sh-row:hover,.sh-row.act{background:hsl(var(--accent))}
.sh-row .t{flex:1;min-width:0;line-height:1.3}
.sh-row b{display:block;font-weight:var(--w-semibold);font-size:var(--text-card)}
.sh-row small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-row .ck{color:hsl(var(--primary))}
.sh-row[aria-disabled=true]{opacity:.55;pointer-events:none}
.sh-row .code{color:hsl(var(--muted-foreground));font-size:11.5px}
.sh-pop-f{display:flex;align-items:center;gap:var(--s-2);padding:10px var(--s-3);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-pop-f a{margin-left:auto;color:hsl(var(--foreground));font-weight:var(--w-medium);text-decoration:none;display:inline-flex;gap:4px;align-items:center}
.sh-pop-f a:hover{text-decoration:underline}
.sh-pop-msg{padding:var(--s-6) var(--s-4);text-align:center;font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.sh-pop-msg b{display:block;color:hsl(var(--foreground));font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);margin-bottom:var(--s-1)}
.sh-pop-msg .btn{margin-top:var(--s-3)}
.sh-pop-msg.err{color:hsl(var(--destructive));text-align:left;display:flex;gap:var(--s-2)}
.sh-pop-msg.err b{color:hsl(var(--destructive))}

/* account menu */
.sh-acct{padding:var(--s-3) var(--s-3) var(--s-2);display:flex;gap:10px;align-items:center}
.sh-acct b{display:block;font-size:var(--text-card);font-weight:var(--w-semibold)}
.sh-acct small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* place switcher demo wrapper (k-pop opens below the trigger) */
.sh-pick{position:relative;display:inline-block}
.sh-pick>.k-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-pop)}

/* ---------- command palette ---------- */
.sh-cmd{width:560px;background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:var(--r-frame);box-shadow:var(--e-dialog);overflow:hidden}
.sh-cmd-in{display:flex;align-items:center;gap:10px;height:52px;padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border));font-size:var(--text-section);color:hsl(var(--foreground))}
.sh-cmd-in svg{color:hsl(var(--muted-foreground))}
.sh-cmd-in .plh{color:hsl(var(--muted-foreground))}
.sh-cmd-in kbd{margin-left:auto}
.sh-cmd .sh-pop-l{max-height:none;padding:var(--s-2)}
.sh-cmd .sh-row{min-height:40px}
.sh-cmd .sh-row .ic{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--muted-foreground));flex:none}
.sh-cmd .sh-row.act .ic{background:hsl(var(--background));color:hsl(var(--primary))}
.sh-cmd .sh-row mark{background:transparent;color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.sh-cmd-f{display:flex;gap:var(--s-4);align-items:center;padding:10px var(--s-4);border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.6);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-cmd-f span{display:inline-flex;gap:6px;align-items:center}
.sh-cmd-stage{height:600px;border-radius:var(--r-frame)}
.sh-cmd-stage .k-dialog{width:560px;top:42%}
.sh-cmd-stage .k-dialog .sh-cmd{width:100%;box-shadow:none;border:0}

/* ---------- embedded Payload CMS frame ---------- */
.sh-frame{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden;background:hsl(var(--background));display:flex;flex-direction:column}
.sh-frame-h{display:flex;align-items:center;gap:10px;height:44px;padding:0 var(--s-2) 0 var(--s-3);border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.7)}
.sh-frame-h b{white-space:nowrap;font-size:var(--text-card);font-weight:var(--w-semibold)}
.sh-frame-h .chip{margin-left:var(--s-1)}
.sh-frame-h .r{margin-left:auto;display:flex;gap:var(--s-1);align-items:center}
.sh-frame-h .url{font-size:11.5px;color:hsl(var(--muted-foreground))}
.sh-frame-b{position:relative;min-height:220px;flex:1;display:flex}
.sh-frame-b.tall{min-height:320px}
.sh-frame-b.mid{display:grid;place-items:center;text-align:center;padding:var(--s-6)}
.sh-frame-b.mid .t{max-width:34ch;font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.sh-frame-b.mid .t b{display:block;font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);color:hsl(var(--foreground));margin:var(--s-2) 0 var(--s-1)}
.sh-frame-b.mid .btn{margin-top:var(--s-3)}
.sh-frame-b.mid .ico{width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;margin:0 auto;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.sh-frame-b.mid .ico.err{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}
.sh-frame-b.mid .ico.warn{background:hsl(var(--warning)/.12);color:hsl(var(--warning))}
.sh-frame-b.mid .code{display:block;margin-top:var(--s-2);color:hsl(var(--muted-foreground))}
.sh-frame.is-focus{box-shadow:var(--focus-ring);border-color:hsl(var(--ring))}
.sh-bar{position:absolute;left:0;top:0;height:2px;width:38%;background:hsl(var(--ring));animation:sh-load var(--motion-loadbar) var(--ease-standard) infinite}
@keyframes sh-load{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){.sh-bar{animation:none;width:100%;opacity:.5}}
/* the third-party admin inside the frame: drawn neutral, it is Payload's UI, not ours */
.sh-pl{display:grid;grid-template-columns:180px minmax(0,1fr);width:100%;font-size:var(--text-small)}
.sh-pl-n{border-right:1px solid hsl(var(--border));padding:var(--s-3);display:flex;flex-direction:column;gap:2px;color:hsl(var(--muted-foreground))}
.sh-pl-n i{font-style:normal;font-size:var(--text-micro);font-weight:var(--w-semibold);padding:var(--s-2) var(--s-2) 2px;color:hsl(var(--muted-foreground))}
.sh-pl-n span{padding:5px var(--s-2);border-radius:var(--r-chip)}
.sh-pl-n span.on{background:hsl(var(--muted));color:hsl(var(--foreground));font-weight:var(--w-medium)}
.sh-pl-m{padding:var(--s-4) var(--s-5)}
.sh-pl-m h4{font:var(--w-semibold) var(--text-18)/1.2 var(--font-ui);margin-bottom:var(--s-3)}
.sh-pl-t{width:100%;font-size:var(--text-small)}
.sh-pl-t th{text-align:left;font-weight:var(--w-medium);color:hsl(var(--muted-foreground));padding:6px var(--s-2);border-bottom:1px solid hsl(var(--border))}
.sh-pl-t td{padding:8px var(--s-2);border-bottom:1px solid hsl(var(--border))}

/* ---------- phone ---------- */
.kit-m .phone .main{overflow:visible}
.sh-p{display:flex;flex-direction:column;min-height:640px}
.sh-p .grow{flex:1}
.sh-pbar-place{display:flex;align-items:center;gap:var(--s-2);min-width:0;height:44px;padding:0 6px;border-radius:var(--r-control)}
.sh-pbar-place b{font:var(--w-semibold) 15px/1 var(--font-voice);white-space:nowrap}
.sh-pbar-place svg{color:hsl(var(--muted-foreground))}
.sh-pcrumb{padding:var(--s-3) var(--s-4) 0;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-pcrumb b{font-weight:var(--w-medium);color:hsl(var(--muted-foreground))}
.sh-hqrail{height:3px;background:hsl(var(--sidebar-primary))}
.sh-hqrail.navy{background:hsl(var(--primary))}
.sh-mlist{display:flex;flex-direction:column}
.sh-mrow{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border));text-decoration:none;color:inherit}
.sh-mrow:last-child{border-bottom:0}
.sh-mrow b{font-size:var(--text-read);font-weight:var(--w-medium);flex:1}
.sh-mrow svg{color:hsl(var(--muted-foreground))}
.sh-mrow .sh-cnt{color:hsl(var(--muted-foreground));margin-left:0}
.sh-mrow .sh-cnt.warn{color:hsl(var(--warning-foreground))}
.sh-mrow.on{background:hsl(var(--accent))}
.sh-mrow.on b{font-weight:var(--w-semibold)}
.sh-mrow[aria-disabled=true]{opacity:.5}
.sh-mgrp{padding:var(--s-4) var(--s-4) var(--s-1);font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
.sh-tab{position:relative}
.tabbar a.is-focus{outline:2px solid hsl(var(--ring));outline-offset:-4px;border-radius:var(--r-control)}
.tabbar a[aria-disabled=true]{opacity:.45}
.tabbar a .sh-tb{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font:var(--w-semibold) var(--text-10)/16px var(--font-ui);text-align:center}
.tabbar a .sh-tb.warn{background:hsl(var(--warning))}
.tabbar a{position:relative}
.tabbar a.on::after{content:"";position:absolute;top:-6px;left:30%;right:30%;height:2px;border-radius:var(--r-pill);background:hsl(var(--primary))}

/* phone bottom sheet (drawer menu, place switcher) */
.sh-bs-stage{position:relative;overflow:hidden;border-radius:var(--r-frame);border:1px solid hsl(var(--border));background:hsl(var(--background))}

.sh-dr-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4) var(--s-3);border-bottom:1px solid hsl(var(--border))}
.sh-dr-h b{font-size:var(--text-section);font-weight:var(--w-semibold)}
.sh-dr-h small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-dr-h .icon-btn{margin-left:auto}
.sh-bs-body{overflow:auto;flex:1}
.sh-bs-foot{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sh-bs-foot .btn{margin-left:auto}
.sh-under{position:absolute;inset:0;display:flex;flex-direction:column}
.sh-full{background:hsl(var(--background));display:flex;flex-direction:column;min-height:420px}
.sh-full .sh-cmd-in{height:56px;padding:0 var(--s-2) 0 var(--s-4);font-size:var(--text-read)}
.sh-full .sh-cmd-in .btn{margin-left:auto}
.sh-full .sh-row{min-height:52px}
.sh-pframe .sh-frame-h{height:52px}
.sh-pframe .sh-pl{grid-template-columns:minmax(0,1fr)}
.sh-pframe .sh-pl-n{display:none}
.kit-m .sh-cmd{width:100%}

.sh-pop-msg.err p{margin:0}
.p-bar .staging{letter-spacing:.02em;padding:5px 6px;flex:none}
.p-bar .r{gap:0;flex:none}
.sh-pbar-place{flex:0 1 auto;overflow:hidden}
.sh-pbar-place b{overflow:hidden;text-overflow:ellipsis}
.sh-pframe .sh-pl-t th:nth-child(2),.sh-pframe .sh-pl-t td:nth-child(2){display:none}