/* Revent platform shell — preview stylesheet.
   Section A is the app register scope, copied from tokens/app.css (knobs on the scope, everything derived; compose on the
   element that paints). Section B is the shell: AppShell · AppNav · AppHeader · RecordDrawer · CommandPalette · WorkspacePin ·
   the web-mobile tab bar, plus the small content primitives the journey pages need. Every length is an app-* token. */

/* ── A. app register (tokens/app.css) ─────────────────────────────────────────────────────────── */
[data-revent-app]{
  --app-base-l:0.96;--app-base-c:0.0093;--app-base-h:100;
  --app-accent:oklch(54% 0.21 33);--app-accent-content:oklch(96% 0.0093 100);--app-contrast:1;color-scheme:light;
  --color-base-100:oklch(var(--app-base-l) var(--app-base-c) var(--app-base-h));--color-base-200:oklch(92.5% 0.0107 112);--color-base-300:oklch(83% 0.013 112);
  --color-base-content:oklch(17.7% 0.002 107);--color-primary:var(--app-accent);--color-primary-content:var(--app-accent-content);
  --color-success:oklch(55% 0.12 150);--color-warning:oklch(68% 0.15 70);--color-error:oklch(46% 0.16 18);--color-info:oklch(50% 0.06 240);
  --app-ink:var(--color-base-content);
  --app-ink-body:color-mix(in oklab,var(--app-ink) 86%,var(--color-base-100));
  --app-ink-muted:color-mix(in oklab,var(--app-ink) calc(62% * var(--app-contrast)),var(--color-base-100));
  --app-ink-faint:color-mix(in oklab,var(--app-ink) calc(42% * var(--app-contrast)),var(--color-base-100));
  --app-rule:color-mix(in oklab,var(--app-ink) calc(14% * var(--app-contrast)),var(--color-base-100));
  --app-rule-strong:color-mix(in oklab,var(--app-ink) calc(28% * var(--app-contrast)),var(--color-base-100));
  --app-canvas-bg:var(--color-base-200);--app-shell-bg:var(--color-base-100);--app-shell-border:var(--app-rule);--app-panel-bg:var(--color-base-100);
  --app-card-bg:var(--color-base-100);--app-card-border:var(--app-rule);--app-inset-panel-bg:var(--color-base-200);
  --app-table-row-hover-bg:var(--color-base-200);--app-table-row-selected-bg:var(--color-base-200);
  --app-nav-active-bg:var(--color-base-200);--app-focus:var(--app-accent);--app-selection:color-mix(in oklab,var(--app-accent) 22%,var(--color-base-100));
  --app-scrim:oklch(17.7% 0.002 107 / 0.45);
  --app-state-live:var(--app-accent);--app-state-ok:var(--color-success);--app-state-warn:var(--color-warning);--app-state-fail:var(--color-error);--app-state-unknown:var(--app-ink-muted);
  --app-r-field:3px;--app-r-card:4px;--app-r-pill:999px;
  --app-header-h:44px;--app-nav-w:200px;--app-nav-w-collapsed:48px;--app-rail-w:320px;--app-navrail-w:64px;--app-col-w:232px;--app-fly-w:240px;--app-sheet-r:12px;--app-places-row-h:32px;
  --app-row-h:40px;--app-row-h-compact:32px;--app-row-h-comfortable:48px;--app-cell-x:12px;
  /* shell metrics (tokens.json size/spacing, stage 4) */
  --app-drawer-w-narrow:420px;--app-drawer-w-wide:928px;--app-drawer-inset:48px;--app-cmdk-w:560px;--app-cmdk-row-h:36px;
  --app-subnav-row-h:32px;--app-pin-row-h:32px;--app-tabbar-h:56px;--app-bp-mobile:768px;--app-bp-drawer-push:1280px;
  --app-nav-pad-x:8px;--app-nav-row-gap:2px;--app-section-gap:16px;--app-drawer-pad:16px;--app-page-pad:24px;--app-page-pad-mobile:16px;
  --dur-fast:140ms;--dur-base:240ms;--ease-out:cubic-bezier(.22,1,.36,1);
  --app-font:"Switzer","TikTok Sans","Instrument Sans",system-ui,sans-serif;
  --app-t-micro:11px;--app-t-label:12px;--app-t-body:13px;--app-t-read:14px;--app-t-head:15px;--app-t-title:18px;--app-t-page:22px;
  font-family:var(--app-font);font-size:var(--app-t-body);line-height:1.45;color:var(--app-ink-body);background:var(--app-canvas-bg);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
[data-revent-app][data-app-scheme="dark"]{
  --app-base-l:0.177;--app-base-c:0.002;--app-base-h:107;--app-accent:oklch(66% 0.19 36);--app-accent-content:oklch(96% 0.0093 100);color-scheme:dark;
  --color-base-200:oklch(22.6% 0.008 125);--color-base-300:oklch(30% 0.009 120);--color-base-content:oklch(96% 0.0093 100);
  --color-success:oklch(68% 0.12 150);--color-warning:oklch(76% 0.15 70);--color-error:oklch(64% 0.17 18);--color-info:oklch(72% 0.06 240);
  --app-scrim:oklch(0% 0 0 / 0.6);--app-nav-active-bg:color-mix(in oklab,var(--app-ink) 9%,var(--color-base-100));--app-table-row-selected-bg:color-mix(in oklab,var(--app-ink) 8%,var(--color-base-100));
}
[data-revent-app][data-app-density="compact"]{--app-row-h:var(--app-row-h-compact);--app-cell-x:10px;--app-t-body:12.5px}
[data-revent-app][data-app-density="comfortable"]{--app-row-h:var(--app-row-h-comfortable);--app-cell-x:14px;--app-t-body:14px}
[data-revent-app] a{color:var(--app-ink);text-decoration:underline;text-decoration-color:var(--app-rule-strong);text-underline-offset:2px}
[data-revent-app] ::selection{background:var(--app-selection)}
[data-revent-app] :focus-visible{outline:2px solid var(--app-focus);outline-offset:2px;border-radius:var(--app-r-field)}
@media (prefers-reduced-motion:reduce){[data-revent-app] *,[data-revent-app] *::before,[data-revent-app] *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ── B. shell ─────────────────────────────────────────────────────────────────────────────────── */
/* ── B2. two surfaces: the background (band + rail) and the sheet ───────────────────────────── */
.sh{position:relative;display:grid;grid-template-columns:var(--app-navrail-w) auto minmax(0,1fr);grid-template-rows:var(--app-header-h) minmax(0,1fr);
  grid-template-areas:"header header header" "rail col main";overflow:hidden;border:1px solid var(--app-rule);border-radius:var(--app-r-card);background:var(--color-base-200);color:var(--app-ink-body)}
.sh:is([data-target="mobile"],[data-target="ios"]){grid-template-columns:minmax(0,1fr);grid-template-rows:var(--app-header-h) minmax(0,1fr) var(--app-tabbar-h);grid-template-areas:"header" "main" "tabbar"}
.sh-head:empty,.sh-head:not(:has(*)){display:none}
.sh [tabindex="-1"]:focus{outline:0}
/* band */
.sh-header{grid-area:header;display:flex;align-items:center;gap:8px;height:var(--app-header-h);padding:0 12px 0 10px;color:var(--app-ink)}
.sh-header .ib{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--app-ink-muted)}
.sh-header .ib:hover{background:var(--color-base-300);color:var(--app-ink)}
.sh-header .grow{flex:1}
.sh-header .slot{display:flex;align-items:center;gap:6px;min-width:0}
.sh-header .slot .sh-band{display:flex;align-items:center;gap:6px}
.sh-header .sh-btn.primary{height:28px;margin-right:4px}
.sh-crumb{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--app-t-head);margin:0 10px 0 2px}
.sh-crumb .app{color:var(--app-ink);font-weight:550}.sh-crumb .app.dim{color:var(--app-ink-muted);font-weight:400}.sh-crumb .sep{color:var(--app-ink-faint)}.sh-crumb b{font-weight:550}
.sh-header .range{font:550 var(--app-t-head)/1 var(--app-font);color:var(--app-ink);white-space:nowrap;padding:0 4px}
.sh-header.rec .ttl.l{text-align:left;flex:1;display:flex;flex-direction:column;line-height:1.2}.sh-header.rec .ttl small{font:400 var(--app-t-micro)/1.3 var(--app-font);color:var(--app-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rail: 64, glyph over label, never expands. Each item owns a hover flyout with that app's places. */
.sh-rail{grid-area:rail;position:relative;width:var(--app-navrail-w);padding:4px 6px 8px;display:flex;flex-direction:column;gap:2px;background:var(--color-base-200);z-index:5}
.sh-rail::after{content:"";position:absolute;top:4px;bottom:12px;right:0;width:1px;background:color-mix(in oklab,var(--app-ink) 8%,var(--color-base-200));pointer-events:none}
@media (min-resolution:2dppx){.sh-rail::after{transform:scaleX(.5);transform-origin:100% 0}}
.sh-rail .ws{display:grid;place-items:center;height:44px;border-radius:8px;margin-bottom:6px}
.sh-rail .ws:hover{background:var(--color-base-300)}
.sh-rail .ws .mark{width:28px;height:28px;border-radius:7px;background:var(--color-base-300);color:var(--app-ink);display:grid;place-items:center;font:550 12px/1 var(--app-font)}
.sh-rail .grp{display:flex;flex-direction:column;gap:2px}
.sh-rail .ri{position:relative}
.sh-rail .ri>.row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border-radius:8px;color:var(--app-ink-body);width:100%;white-space:nowrap}
.sh-rail .ri>.row .ic{position:relative;width:48px;height:28px;border-radius:14px;display:grid;place-items:center;transition:background var(--dur-fast)}
.sh-rail .ri>.row .ic svg.g{width:20px;height:20px;stroke-width:1.7}
.sh-rail .ri>.row .lb{font-size:10px;line-height:1;letter-spacing:.01em}
.sh-rail .ri:hover>.row .ic,.sh-rail .ri>.row:focus-visible .ic{background:var(--color-base-300)}
.sh-rail .ri>.row[aria-current="page"]{color:var(--app-ink);font-weight:550}
.sh-rail .ri>.row[aria-current="page"] .ic{background:var(--app-ink);color:var(--color-base-100)}
.sh-rail .ri>.row .badge{position:absolute;top:-4px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--app-ink);color:var(--color-base-100);font:550 10px/16px var(--app-font);font-style:normal;text-align:center}
.sh-rail .ri>.row[aria-current="page"] .badge{background:var(--color-base-100);color:var(--app-ink)}
.sh-rail .ri>.row .prov{position:absolute;bottom:-2px;right:10px;width:6px;height:6px;border-radius:50%;border:1px solid var(--app-ink-faint);background:var(--color-base-200)}
.sh-rail .spacer{flex:1}
.sh-rail .fly{display:none;position:absolute;left:calc(100% + 2px);top:-4px;width:var(--app-fly-w);max-height:min(520px,calc(100vh - 80px));overflow:auto;padding:6px 8px 10px;background:var(--color-base-200);border-radius:0 12px 12px 0;box-shadow:12px 8px 32px -12px oklch(0% 0 0 / .22);z-index:8}
.sh-rail .fly::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px}
.sh-rail .ri:hover .fly,.sh-rail .ri:focus-within .fly{display:block}
.sh-rail .utils .ri .fly{display:none!important}
/* places: the secondary column (menu button) and the flyout share this */
.sh-places .fh{height:40px;display:flex;align-items:center;padding:0 10px;font:550 var(--app-t-body)/1 var(--app-font);color:var(--app-ink)}
.sh-places .cap{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;margin-top:6px;font:500 var(--app-t-micro)/1 var(--app-font);color:var(--app-ink-faint)}
.sh-places .cap button{color:var(--app-ink-muted);font:500 var(--app-t-micro)/1 var(--app-font)}
.sh-places .row{display:flex;align-items:center;gap:8px;height:var(--app-places-row-h);padding:0 10px;border-radius:8px;color:var(--app-ink-body);width:100%;white-space:nowrap;font-size:var(--app-t-body)}
.sh-places .row span{overflow:hidden;text-overflow:ellipsis}
.sh-places .row em{margin-left:auto;font-style:normal;font-size:var(--app-t-micro);color:var(--app-ink-muted);font-variant-numeric:tabular-nums}
.sh-places .row:hover{background:var(--color-base-300)}
.sh-places .row[aria-current="page"]{background:var(--color-base-300);color:var(--app-ink);font-weight:550}
.sh-places .row.add{color:var(--app-ink-muted)}.sh-places .row.add svg.g{width:14px;height:14px}
.sh-places .note{padding:4px 10px;font-size:var(--app-t-micro);color:var(--app-ink-faint)}
:is(.sh-places,.sh-sheet) .src .cb{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--app-rule-strong);display:grid;place-items:center;flex:none;background:transparent}
:is(.sh-places,.sh-sheet) .src .cb svg{width:10px;height:10px;stroke-width:3}
:is(.sh-places,.sh-sheet) .src[aria-checked="true"] .cb{background:var(--app-ink);border-color:var(--app-ink);color:var(--color-base-100)}
:is(.sh-places,.sh-sheet) .src .sw{width:3px;height:12px;border-radius:1px;background:var(--app-ink);flex:none}
:is(.sh-places,.sh-sheet) .src .sw.rs{background:var(--app-ink-muted)}:is(.sh-places,.sh-sheet) .src .sw.mk{background:none;border-left:3px dashed var(--app-rule-strong);width:0}:is(.sh-places,.sh-sheet) .src .sw.in{background:var(--app-rule-strong)}
:is(.sh-places,.sh-sheet) .src[aria-checked="false"]{color:var(--app-ink-faint)}:is(.sh-places,.sh-sheet) .src[aria-checked="false"] .sw{opacity:.4}
.sh-col{grid-area:col;width:var(--app-col-w);padding:4px 8px 8px 2px;overflow:auto;background:var(--color-base-200)}
/* sheet */
.sh-main{grid-area:main;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);background:var(--app-shell-bg);border-top-left-radius:var(--app-sheet-r);overflow:hidden;color:var(--app-ink-body)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-main{border-radius:0;grid-template-columns:minmax(0,1fr)}
.sh-body{grid-column:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.sh[data-drawer="full"] .sh-body{display:none}
.sh-head{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-bottom:1px solid var(--app-rule);flex-wrap:wrap}
.sh-vtabs{display:flex;align-items:stretch;gap:2px;height:44px}
.sh-vtabs [role="tab"]{display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:var(--app-t-body);color:var(--app-ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.sh-vtabs [role="tab"]:hover{color:var(--app-ink)}
.sh-vtabs [role="tab"][aria-selected="true"]{color:var(--app-ink);font-weight:550;border-bottom-color:var(--app-ink)}
.sh-vtabs [role="tab"] em{font-style:normal;font-size:var(--app-t-micro);color:var(--app-ink-faint);font-weight:400;font-variant-numeric:tabular-nums}
.sh-vtabs [role="tab"][aria-selected="true"] em{color:var(--app-ink-muted)}
.sh-vtabs .add{width:28px;display:grid;place-items:center;color:var(--app-ink-muted);border-radius:var(--app-r-field);align-self:center;height:28px}
.sh-vtabs .add:hover{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-head .sh-fb{flex:1;min-height:0;padding:0;border:0;background:transparent;min-width:0}
.sh-head .sh-fb .sh-field{width:200px}
.sh-page{padding:16px 20px 20px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow:auto}
.sh-page .sh-panel{border:0;border-radius:0;background:transparent;overflow:visible}
.sh-page.flush{padding:0;gap:0}
.sh-band{display:flex;align-items:center;gap:6px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-band{flex:none;min-height:40px;padding:4px 12px;border-bottom:1px solid var(--app-rule)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-band:empty{display:none}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-head{padding:0 8px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-vtabs{overflow:auto;width:100%;scrollbar-width:none}
/* record in the sheet: narrow splits the sheet, wide overlays within it, full replaces the body */
.sh-drawer{grid-column:2;display:flex;flex-direction:column;width:var(--app-drawer-w-narrow);max-width:calc(100vw - var(--app-drawer-inset));border-left:1px solid var(--app-rule);background:var(--app-shell-bg);overflow:hidden;z-index:4;min-height:0;
  transform:translateX(16px);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.sh-drawer[data-open="true"]{transform:none;opacity:1}
.sh-drawer[data-width="wide"],.sh[data-push="overlay"] .sh-drawer{position:absolute;top:0;right:0;bottom:0;box-shadow:-16px 0 40px -20px oklch(0% 0 0 / .25)}
.sh-drawer[data-width="wide"]{grid-column:1 / -1;width:min(var(--app-drawer-w-wide),calc(100% - var(--app-drawer-inset)))}
.sh-drawer[data-width="full"]{grid-column:1 / -1;width:auto;max-width:none;border-left:0}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-drawer{position:absolute;inset:0;width:auto;max-width:none;border-left:0}
.sh-drawer .dh{display:flex;align-items:center;gap:4px;height:44px;padding:0 8px 0 var(--app-drawer-pad);border-bottom:1px solid var(--app-rule);color:var(--app-ink);flex:none}
.sh-drawer[data-width="full"] .dh{padding-left:12px}
.sh-drawer .dh .t{flex:1;min-width:0;font:550 var(--app-t-head)/1.2 var(--app-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-drawer .dh .t small{display:block;font:400 var(--app-t-micro)/1.3 var(--app-font);color:var(--app-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-drawer .dh .t small .sh-dot{margin:0 2px 0 0;vertical-align:1px}
.sh-drawer .dh .t:focus{outline:0}.sh-drawer:focus,.sh-drawer:focus-visible{outline:0}
.sh-drawer .dh .x{margin-left:4px}
.sh-drawer .dh .back{margin-right:8px;background:transparent;color:var(--app-ink-muted)}.sh-drawer .dh .back:hover{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-drawer .ib{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--app-r-field);color:var(--app-ink-muted)}
.sh-drawer .ib:hover{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-drawer .db{flex:1;overflow:auto;padding:var(--app-drawer-pad);display:flex;flex-direction:column;gap:14px;min-height:0}
.sh-drawer[data-width="full"] .db{padding:20px 24px;max-width:1120px}
.sh-drawer .df{display:flex;gap:8px;padding:10px var(--app-drawer-pad);border-top:1px solid var(--app-rule);background:var(--app-shell-bg);flex:none}
.sh-drawer .db .sh-card{border:0;border-radius:0;padding:12px 0 0;border-top:1px solid var(--app-rule)}
.sh-drawer .db .sh-card:first-child{border-top:0;padding-top:0}
.sh-drawer .db .sh-mount{flex:none}
.sh-scrim{position:absolute;inset:0;background:var(--app-scrim);z-index:3}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-scrim{display:none}
.sh-prompt{position:absolute;top:50px;right:8px;width:380px;z-index:6;background:var(--app-panel-bg);border:1px solid var(--app-rule-strong);border-radius:var(--app-r-card);box-shadow:0 8px 24px oklch(0% 0 0 / .14);padding:12px;display:flex;flex-direction:column;gap:8px}
.sh-prompt b{font-weight:550;color:var(--app-ink);font-size:var(--app-t-body)}
.sh-prompt .acts{display:flex;gap:6px;flex-wrap:nowrap}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-drawer .dh{display:none}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-prompt{top:4px;left:8px;right:8px;width:auto}
/* menus: multi-check options carry the calendar key bar */
.sh-menu .cb{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--app-rule-strong);display:inline-grid;place-items:center}
.sh-menu [aria-selected="true"] .cb{background:var(--app-ink);border-color:var(--app-ink);color:var(--color-base-100)}
.sh-menu .cb svg{width:10px;height:10px;stroke-width:3}
.sh-menu .sw{width:3px;height:12px;border-radius:1px;background:var(--app-ink);flex:none}
.sh-menu .sw.rs{background:var(--app-ink-muted)}.sh-menu .sw.mk{background:none;border-left:3px dashed var(--app-rule-strong);width:0}.sh-menu .sw.in{background:var(--app-rule-strong)}

.sh,.sh *{box-sizing:border-box;min-width:0}
.sh button,.sh input{font:inherit;color:inherit}
.sh :where(button){background:none;border:0;padding:0;cursor:pointer;text-align:left}
.sh svg.g{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* AppHeader */
.sh-search{flex:none;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 8px;border:1px solid var(--app-rule);border-radius:var(--app-r-field);background:var(--app-inset-panel-bg);color:var(--app-ink-muted);width:220px;font-size:var(--app-t-label)}
.sh-search kbd{margin-left:auto;font:500 10.5px/1 var(--app-font);color:var(--app-ink-muted);border:1px solid var(--app-rule);border-radius:3px;padding:2px 4px}
.sh-pill{height:24px;padding:0 8px;border-radius:var(--app-r-pill);border:1px solid var(--app-rule);font-size:var(--app-t-micro);color:var(--app-ink-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sh-pill i{width:7px;height:7px;border-radius:50%;background:var(--app-state-warn)}
.sh-avatar{width:24px;height:24px;border-radius:50%;background:var(--color-base-300);display:grid;place-items:center;font:550 10px/1 var(--app-font);color:var(--app-ink)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-header{padding:0 8px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-header .ttl{font-size:var(--app-t-head);font-weight:550;flex:1;text-align:center}

/* AppNav */

/* main */
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-toolbar{padding:0 var(--app-page-pad-mobile)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-page{padding:var(--app-page-pad-mobile)}
.sh-seg{display:inline-flex;gap:2px;padding:2px;background:var(--app-inset-panel-bg);border-radius:var(--app-r-field);border:1px solid var(--app-rule)}
.sh-seg button{height:24px;padding:0 10px;border-radius:2px;font-size:var(--app-t-label);color:var(--app-ink-muted)}
.sh-seg button[aria-selected="true"]{background:var(--app-shell-bg);color:var(--app-ink);font-weight:550;box-shadow:0 0 0 1px var(--app-rule)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-seg{display:flex;width:100%}.sh:is([data-target="mobile"],[data-target="ios"]) .sh-seg button{flex:1;text-align:center;height:28px}
.sh-btn{height:28px;padding:0 10px;border-radius:var(--app-r-field);border:1px solid transparent;font-size:var(--app-t-label);font-weight:550;color:var(--app-ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--app-inset-panel-bg)}
.sh-btn:hover{background:var(--color-base-300)}
.sh-btn.sm{height:24px;padding:0 8px}
.sh-btn.ghost{background:transparent;color:var(--app-ink-muted)}.sh-btn.ghost:hover{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-btn.danger{color:var(--color-error)}
.sh-btn.primary{background:var(--app-ink);color:var(--color-base-100);border-color:var(--app-ink)}
.sh-btn.accent{background:var(--app-accent);color:var(--app-accent-content);border-color:var(--app-accent)}
.sh-btn:disabled{background:var(--color-base-300);color:var(--app-ink-muted);border-color:transparent;cursor:not-allowed;pointer-events:none}
.sh-chip{height:24px;padding:0 9px;border-radius:var(--app-r-pill);border:1px solid var(--app-rule);font-size:var(--app-t-label);color:var(--app-ink-muted);display:inline-flex;align-items:center;gap:6px}
.sh-chip[aria-pressed="true"]{color:var(--app-ink);border-color:var(--app-rule-strong);background:var(--app-shell-bg);font-weight:550}
.sh-tog{display:inline-flex;align-items:center;gap:6px;font-size:var(--app-t-label);color:var(--app-ink-muted)}
.sh-tog i{width:26px;height:16px;border-radius:8px;background:var(--color-base-300);position:relative;display:inline-block;transition:background var(--dur-fast)}
.sh-tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--color-base-100);transition:transform var(--dur-fast) var(--ease-out)}
.sh-tog[aria-pressed="true"] i{background:var(--app-ink)}.sh-tog[aria-pressed="true"] i::after{transform:translateX(10px)}
.sh-panel{background:var(--app-panel-bg);border:1px solid var(--app-card-border);border-radius:var(--app-r-card);overflow:hidden}
.sh-list{display:flex;flex-direction:column}
.sh-list .li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;height:var(--app-row-h);padding:0 var(--app-cell-x);border-top:1px solid var(--app-rule);width:100%;color:var(--app-ink-body)}
.sh-list .li:first-child{border-top:0}
.sh-list .li:hover{background:var(--app-table-row-hover-bg)}
.sh-list .li[aria-selected="true"]{background:var(--app-table-row-selected-bg);box-shadow:inset 2px 0 0 var(--app-accent)}
.sh-list .li b{font-weight:550;color:var(--app-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-list .li small{color:var(--app-ink-muted);font-size:var(--app-t-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-list .li .st{font-size:var(--app-t-micro);color:var(--app-ink-muted);white-space:nowrap}
.sh-list .li .st.live::before,.sh-list .li .st.ok::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}.sh-list .li .st.live::before{background:var(--app-state-live)}.sh-list .li .st.ok::before{background:var(--app-state-ok)}
.sh-list .hd{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;height:var(--app-row-h-compact);align-items:center;padding:0 var(--app-cell-x);font:550 var(--app-t-micro)/1 var(--app-font);letter-spacing:.04em;text-transform:uppercase;color:var(--app-ink-muted);background:var(--app-shell-bg);border-bottom:1px solid var(--app-rule)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-list .li{grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:var(--app-row-h-comfortable);padding:8px var(--app-cell-x)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-list .li small{grid-column:1;}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-list .hd{display:none}
.sh-empty{padding:32px var(--app-cell-x);text-align:center;color:var(--app-ink-muted);font-size:var(--app-t-body)}
.sh-field{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:1px solid var(--app-rule-strong);border-radius:var(--app-r-field);background:var(--app-shell-bg);color:var(--app-ink);width:240px;max-width:100%}
.sh-field input{border:0;outline:0;background:none;flex:1;min-width:0;font-size:var(--app-t-body)}
.sh-field input::placeholder{color:var(--app-ink-faint)}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-field{width:100%}
.sh-kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:var(--app-t-body)}
.sh-kv dt{color:var(--app-ink-muted);margin:0}.sh-kv dd{margin:0;color:var(--app-ink)}
.sh-sim{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--app-rule-strong);border-radius:var(--app-r-card);font-size:var(--app-t-label);color:var(--app-ink);background:var(--app-inset-panel-bg)}
.sh-sim i{width:8px;height:8px;border-radius:50%;background:var(--app-state-warn);flex:none}
.sh-h2{margin:0;font:550 var(--app-t-head)/1.3 var(--app-font);color:var(--app-ink)}
.sh-p{margin:0;font-size:var(--app-t-body);color:var(--app-ink-body);max-width:60ch}
.sh-tabs{display:flex;gap:16px;border-bottom:1px solid var(--app-rule)}
.sh-tabs button{height:32px;font-size:var(--app-t-body);color:var(--app-ink-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.sh-tabs button[aria-selected="true"]{color:var(--app-ink);font-weight:550;border-bottom-color:var(--app-ink)}

/* calendar week grid + agenda */
.sh-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--app-rule);border-radius:var(--app-r-card);background:var(--app-panel-bg);overflow:hidden}
.sh-week .d{min-height:420px;border-left:1px solid var(--app-rule);padding:6px;display:flex;flex-direction:column;gap:4px}
.sh-week .d:first-child{border-left:0}
.sh-week .dn{font-size:var(--app-t-micro);color:var(--app-ink-muted);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between}
.sh-week .dn b{color:var(--app-ink);font-weight:550}
.sh-ev{display:flex;flex-direction:column;gap:1px;padding:5px 7px;border-radius:var(--app-r-field);background:var(--app-inset-panel-bg);border:1px solid var(--app-rule);font-size:var(--app-t-label);color:var(--app-ink);width:100%;text-align:left}
.sh-ev:hover{border-color:var(--app-rule-strong)}
.sh-ev[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--app-accent)}
.sh-ev small{color:var(--app-ink-muted);font-size:var(--app-t-micro)}
.sh-ev.mk{border-style:dashed;background:transparent}
.sh-ev .ty{font-size:10px;color:var(--app-ink-muted);text-transform:uppercase;letter-spacing:.04em}
.sh-agenda{display:flex;flex-direction:column;gap:10px}
.sh-agenda .day{font:550 var(--app-t-label)/1 var(--app-font);color:var(--app-ink-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:6px}

/* RecordDrawer */
  transform:translateX(16px);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.sh-mod{display:flex;flex-direction:column;gap:6px}
.sh-mod h3{margin:0;font:550 var(--app-t-label)/1 var(--app-font);color:var(--app-ink)}

/* CommandPalette */
.sh-cmdk{grid-area:auto;position:absolute;inset:0;z-index:6;display:grid;place-items:start center;padding-top:72px;background:var(--app-scrim)}
.sh-cmdk[hidden]{display:none}
.sh-cmdk .box{width:min(var(--app-cmdk-w),calc(100% - 32px));background:var(--app-panel-bg);border:1px solid var(--app-rule-strong);border-radius:var(--app-r-card);overflow:hidden;box-shadow:0 12px 32px oklch(0% 0 0 / .18)}
.sh-cmdk .in{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-bottom:1px solid var(--app-rule);color:var(--app-ink)}
.sh-cmdk .in input{flex:1;border:0;outline:0;background:none;font-size:var(--app-t-read);color:var(--app-ink)}
.sh-cmdk .in input::placeholder{color:var(--app-ink-faint)}
.sh-cmdk .in kbd{font:500 10.5px/1 var(--app-font);color:var(--app-ink-muted);border:1px solid var(--app-rule);border-radius:3px;padding:3px 5px}
.sh-cmdk .ls{max-height:360px;overflow:auto;padding:6px}
.sh-cmdk .gc{padding:8px 8px 4px;font:500 var(--app-t-micro)/1 var(--app-font);color:var(--app-ink-faint)}
.sh-cmdk .it{display:flex;align-items:center;gap:10px;height:var(--app-cmdk-row-h);padding:0 8px;border-radius:var(--app-r-field);width:100%;color:var(--app-ink-body)}
.sh-cmdk .it[aria-selected="true"]{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-cmdk .it small{color:var(--app-ink-muted);font-size:var(--app-t-label)}
.sh-cmdk .it kbd{margin-left:auto;font:500 10.5px/1 var(--app-font);color:var(--app-ink-muted);visibility:hidden}.sh-cmdk .it[aria-selected="true"] kbd,.sh-cmdk .it kbd.always{visibility:visible}
.sh-cmdk .ft{display:flex;gap:14px;padding:8px 12px;border-top:1px solid var(--app-rule);font-size:var(--app-t-micro);color:var(--app-ink-muted)}
.sh-cmdk .ft kbd{font:500 10.5px/1 var(--app-font);color:var(--app-ink-muted)}

/* palette on web mobile: full screen, no key hints */
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-cmdk{padding:0;place-items:stretch}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-cmdk .box{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-cmdk .ls{max-height:none;flex:1}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-cmdk kbd,.sh:is([data-target="mobile"],[data-target="ios"]) .sh-cmdk .ft{display:none}
/* web-mobile tab bar + More */
.sh-tabbar{grid-area:tabbar;display:grid;grid-template-columns:repeat(5,1fr);height:var(--app-tabbar-h);background:var(--app-shell-bg);border-top:1px solid var(--app-shell-border)}
.sh-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--app-ink-muted)}
.sh-tabbar button svg.g{width:22px;height:22px;stroke-width:1.6}
.sh-tabbar button[aria-current="page"]{color:var(--app-ink);font-weight:550}
.sh-more{display:flex;flex-direction:column;gap:18px}
.sh-more .grp{display:flex;flex-direction:column}
.sh-more .cap{padding:0 4px 6px;font:550 var(--app-t-micro)/1 var(--app-font);letter-spacing:.04em;text-transform:uppercase;color:var(--app-ink-muted)}
.sh-more .row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--app-cell-x);background:var(--app-panel-bg);border:1px solid var(--app-rule);border-top:0;color:var(--app-ink);font-size:var(--app-t-read)}
.sh-more .row:first-of-type{border-top:1px solid var(--app-rule);border-radius:var(--app-r-card) var(--app-r-card) 0 0}
.sh-more .row:last-of-type{border-radius:0 0 var(--app-r-card) var(--app-r-card)}
.sh-more .row small{margin-left:auto;color:var(--app-ink-muted);font-size:var(--app-t-micro)}

/* WorkspacePin (standalone card) */
.sh-pincard{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--app-panel-bg);border:1px solid var(--app-rule);border-radius:var(--app-r-card);min-width:240px}
.sh-pincard .t{font:550 var(--app-t-head)/1.2 var(--app-font);color:var(--app-ink)}
.sh-pincard .refs{display:flex;flex-wrap:wrap;gap:4px}
.sh-pincard .scope{font-size:var(--app-t-micro);color:var(--app-ink-muted)}

/* card chrome (preview-only labels) */
.pv{font-family:var(--app-font);display:flex;flex-direction:column;gap:12px;padding:12px;color:oklch(48% 0.006 107)}
.pv .lab{font:550 10px/1 var(--app-font);letter-spacing:.06em;text-transform:uppercase;color:oklch(48% 0.006 107)}
.pv .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}

/* FilterBar: one row under the toolbar */
.sh-fb{flex:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:6px var(--app-page-pad);border-bottom:1px solid var(--app-rule);background:var(--app-shell-bg);flex-wrap:wrap}
.sh-fb .grow{flex:1}
.sh-fb .cnt{font-size:var(--app-t-label);color:var(--app-ink-muted);padding-left:4px;white-space:nowrap}
.sh-fb .sh-field{width:220px;height:28px}
.sh-dd{position:relative;display:inline-flex}
.sh-ddb{height:28px;padding:0 6px 0 8px;border-radius:var(--app-r-field);border:1px solid transparent;font-size:var(--app-t-label);color:var(--app-ink-muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:transparent}
.sh-ddb:hover{background:var(--app-nav-active-bg);color:var(--app-ink)}
.sh-ddb b{font-weight:550;color:var(--app-ink)}
.sh-ddb[data-set]{border-color:var(--app-rule-strong);background:var(--app-inset-panel-bg);color:var(--app-ink)}
.sh-dd.r .sh-menu{left:auto;right:0}
.sh-menu [role="option"] kbd{margin-left:auto;font:500 10.5px/1 var(--app-font);color:var(--app-ink-muted);padding-left:16px}
.sh-ddb svg.g{width:14px;height:14px;color:var(--app-ink-muted)}
.sh-ddb[aria-expanded="true"]{border-color:var(--app-ink);color:var(--app-ink)}
.sh-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;background:var(--app-panel-bg);border:1px solid var(--app-rule-strong);border-radius:var(--app-r-card);box-shadow:0 8px 24px oklch(0% 0 0 / .14);padding:4px;z-index:5;display:flex;flex-direction:column}
.sh-menu [role="option"]{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:var(--app-r-field);font-size:var(--app-t-body);color:var(--app-ink-body);width:100%;white-space:nowrap}
.sh-menu [role="option"]:hover,.sh-menu [role="option"]:focus-visible{background:var(--app-nav-active-bg);color:var(--app-ink);outline:0}
.sh-menu [role="option"][aria-selected="true"]{color:var(--app-ink);font-weight:550}
.sh-menu .ck{width:14px;display:inline-grid;place-items:center}.sh-menu .ck svg{width:14px;height:14px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-fb{padding:6px var(--app-page-pad-mobile);gap:6px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-fb .sh-field,.sh:is([data-target="mobile"],[data-target="ios"]) .sh-ddb,.sh:is([data-target="mobile"],[data-target="ios"]) .sh-btn{height:36px}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-fb .sh-field{width:100%}
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-toolbar h1{display:none}
/* mobile sheet for sources / views */
.sh-sheet-scrim{position:absolute;inset:0;background:var(--app-scrim);z-index:4}
.sh-sheet{position:absolute;left:0;right:0;bottom:0;max-height:70%;background:var(--app-panel-bg);border-top:1px solid var(--app-rule-strong);border-radius:12px 12px 0 0;box-shadow:0 -8px 24px oklch(0% 0 0 / .14);display:flex;flex-direction:column;z-index:5}
.sh-sheet .hd{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--app-rule);color:var(--app-ink);font-weight:550}
.sh-sheet .rows{overflow:auto;padding:8px}
.sh-sheet .row{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:var(--app-r-card);width:100%;font-size:var(--app-t-read);color:var(--app-ink)}
.sh-sheet .row em{margin-left:auto;font-style:normal;color:var(--app-ink-muted);font-size:var(--app-t-label)}
.sh-sheet .row[aria-pressed="true"]{background:var(--app-nav-active-bg);font-weight:550}
.sh-sheet .src{gap:10px}.sh-sheet .src .cb{width:18px;height:18px}.sh-sheet .src .cb svg{width:12px;height:12px}.sh-sheet .src .sw{height:16px}
/* mount frame: where an existing pattern renders */
.sh-mount{position:relative;flex:1;display:flex;flex-direction:column;border:1px solid var(--app-rule);border-radius:var(--app-r-card);background:var(--app-panel-bg);overflow:hidden}
.sh-mount .tag{position:absolute;top:6px;right:6px;height:20px;padding:0 7px;border-radius:3px;background:var(--app-inset-panel-bg);font:550 var(--app-t-micro)/20px var(--app-font);color:var(--app-ink-muted);z-index:1}
.sh-mount i{display:block;height:10px;border-radius:3px;background:var(--color-base-200)}
.sh-mount .hd{height:32px;display:flex;align-items:center;gap:16px;padding:0 var(--app-cell-x);background:var(--app-shell-bg);border-bottom:1px solid var(--app-rule)}.sh-mount .hd i{height:8px;background:var(--color-base-300)}
.sh-mount .r{height:var(--app-row-h);display:flex;align-items:center;gap:16px;padding:0 var(--app-cell-x);border-top:1px solid var(--app-rule)}.sh-mount .r:first-of-type{border-top:0}
.sh-mount .kv{padding:14px var(--app-drawer-pad);display:flex;flex-direction:column;gap:14px}.sh-mount .kv div{display:flex;gap:16px}
.sh-mount .cal{flex:1;display:grid;grid-template-columns:repeat(7,1fr);padding:12px 8px;gap:8px}.sh-mount .cal div{border-left:1px solid var(--app-rule);padding-left:6px}.sh-mount .cal i{border-left:3px solid var(--color-base-300)}
.sh-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* ── B3. iOS target: the phone structure drawn as iOS 26 draws it. Status bar · nav bar (glass controls) · content · floating tab bar. ── */
.sh[data-target="ios"]{width:390px;height:844px;border-radius:44px;box-shadow:0 0 0 1px var(--app-rule-strong);grid-template-columns:minmax(0,1fr);grid-template-rows:54px var(--app-header-h) minmax(0,1fr) 84px;grid-template-areas:"status" "header" "main" "tabbar";background:var(--app-shell-bg)}
.sh[data-target="ios"] .sh-statusbar{grid-area:status;display:flex;align-items:flex-end;justify-content:space-between;padding:0 30px 9px 38px;color:var(--app-ink)}
.sh[data-target="ios"] .sh-statusbar b{font:550 16px/1 var(--app-font);letter-spacing:-.01em}
.sh[data-target="ios"] .sh-statusbar .sys{display:flex;align-items:center;gap:6px}
.sh[data-target="ios"] .sh-statusbar svg{fill:currentColor;height:12px}.sh[data-target="ios"] .sh-statusbar .sig{width:18px}.sh[data-target="ios"] .sh-statusbar .wifi{width:16px}.sh[data-target="ios"] .sh-statusbar .bat{width:28px;height:13px}
.sh[data-target="ios"] .sh-header{padding:0 14px;gap:6px;background:transparent}
.sh[data-target="ios"] .sh-header .ib{width:36px;height:36px;border-radius:50%;color:var(--app-ink);background:color-mix(in oklab,var(--app-ink) 6%,var(--color-base-100));box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 10%,transparent),0 1px 2px oklch(0% 0 0 / .06)}
.sh[data-target="ios"] .sh-header .ib.ghost{background:transparent;box-shadow:none}
.sh[data-target="ios"] .sh-header .ib svg.g{width:18px;height:18px;stroke-width:1.9}
.sh[data-target="ios"] .sh-header .ttl{font:550 17px/1.2 var(--app-font);letter-spacing:-.01em;flex:1;text-align:center;color:var(--app-ink)}
.sh[data-target="ios"] .sh-header .tr{display:flex;gap:6px}
.sh[data-target="ios"] .sh-header.rec .ttl.l{text-align:center;align-items:center}
.sh[data-target="ios"] .sh-main{grid-area:main}
.sh[data-target="ios"] .sh-page{padding:8px var(--app-page-pad-mobile) 24px}
/* floating tab bar (Liquid Glass on 26: a capsule over the content; the system draws it, this is its footprint) */
.sh[data-target="ios"] .sh-tabbar{grid-area:tabbar;position:relative;display:block;height:auto;background:transparent;border:0}
.sh[data-target="ios"] .sh-tabbar .pill{position:absolute;left:14px;right:14px;top:4px;height:62px;border-radius:999px;padding:4px;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in oklab,var(--color-base-100) 84%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 12%,transparent),0 10px 30px -8px oklch(0% 0 0 / .22)}
.sh[data-target="ios"] .sh-tabbar .pill button{border-radius:12px;gap:2px;font-size:10px;font-weight:500;color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-tabbar .pill button svg.g{width:24px;height:24px;stroke-width:1.6}
.sh[data-target="ios"] .sh-tabbar .pill button[aria-current="page"]{background:color-mix(in oklab,var(--app-ink) 9%,var(--color-base-100));color:var(--app-ink);font-weight:550}
.sh[data-target="ios"] .sh-tabbar .home{position:absolute;left:50%;bottom:8px;width:134px;height:5px;border-radius:3px;background:var(--app-ink);transform:translateX(-50%)}
/* places sheet: medium detent, grabber, the app's name, Done */
.sh[data-target="ios"] .sh-sheet{height:52%;max-height:none;border-top:0;border-radius:24px 24px 0 0;box-shadow:0 -.5px 0 color-mix(in oklab,var(--app-ink) 12%,transparent),0 -12px 32px oklch(0% 0 0 / .16);background:var(--app-panel-bg)}
.sh[data-target="ios"] .sh-sheet .grab,.sh[data-target="ios"] .sh-drawer .grab i{display:block;width:36px;height:5px;border-radius:3px;background:color-mix(in oklab,var(--app-ink) 22%,var(--color-base-100));margin:6px auto 0}
.sh[data-target="ios"] .sh-sheet .hd{border-bottom:0;padding:8px 16px 4px;font:550 17px/1.2 var(--app-font)}
.sh[data-target="ios"] .sh-sheet .rows{padding:4px 16px 16px}
.sh[data-target="ios"] .sh-sheet .sh-seg{margin:4px 0 12px;height:32px;border-radius:9px;background:color-mix(in oklab,var(--app-ink) 7%,var(--color-base-100));padding:2px}
.sh[data-target="ios"] .sh-sheet .sh-seg button{height:28px;border-radius:7px;font-size:13px}
.sh[data-target="ios"] .sh-sheet .cap{padding:6px 10px 2px;font:550 var(--app-t-micro)/1 var(--app-font);letter-spacing:.04em;text-transform:uppercase;color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-sheet .row{min-height:44px;font-size:17px;border-radius:10px}
.sh[data-target="ios"] .sh-sheet .row em{font-size:15px}
.sh[data-target="ios"] .sh-sheet-scrim{display:block;background:oklch(0% 0 0 / .18)}
/* record sheet: medium or large detent over the list; Open page pushes */
.sh[data-target="ios"] .sh-drawer[data-detent]{grid-column:1/-1;position:absolute;inset:auto 0 0 0;height:52%;width:auto;max-width:none;border-left:0;border-radius:24px 24px 0 0;box-shadow:0 -.5px 0 color-mix(in oklab,var(--app-ink) 12%,transparent),0 -12px 32px oklch(0% 0 0 / .16);z-index:5}
.sh[data-target="ios"] .sh-drawer[data-detent="large"]{height:calc(100% - 10px)}
.sh[data-target="ios"] .sh-drawer .grab{display:block;width:100%;padding:0 0 2px;background:none}
.sh[data-target="ios"] .sh-drawer .dh{display:flex;height:48px;padding:0 10px 0 16px;border-bottom:0}
.sh[data-target="ios"] .sh-drawer .dh .t{font-size:17px}
.sh[data-target="ios"] .sh-drawer .dh .sh-btn.sm{height:30px;border-radius:999px;background:color-mix(in oklab,var(--app-ink) 7%,var(--color-base-100));padding:0 12px;font-size:14px}
.sh[data-target="ios"] .sh-drawer .dh .ib.x{width:30px;height:30px;border-radius:50%;background:color-mix(in oklab,var(--app-ink) 7%,var(--color-base-100));color:var(--app-ink)}
.sh[data-target="ios"] .sh-drawer .db{padding:4px 16px 16px}
.sh[data-target="ios"] .sh-drawer .df{padding:10px 16px 12px}
.sh[data-target="ios"] .sh-drawer[data-width="full"]{position:absolute;inset:0;border-radius:0}
.sh[data-target="ios"] .sh-drawer[data-width="full"] .dh{display:none}
.sh[data-target="ios"] .sh-scrim{display:block;background:oklch(0% 0 0 / .18);z-index:4}
.sh[data-target="ios"] .sh-prompt{top:60px}
/* More: inset grouped list */
.sh[data-target="ios"] .sh-more{gap:22px}
.sh[data-target="ios"] .sh-more .org{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--app-panel-bg);box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 12%,transparent);color:var(--app-ink)}
.sh[data-target="ios"] .sh-more .org .mark{width:40px;height:40px;border-radius:10px;background:var(--color-base-300);display:grid;place-items:center;font:550 15px/1 var(--app-font)}
.sh[data-target="ios"] .sh-more .org .nm{flex:1;display:flex;flex-direction:column;font:550 17px/1.2 var(--app-font)}.sh[data-target="ios"] .sh-more .org .nm small{font:400 13px/1.3 var(--app-font);color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-more .org svg.g{width:16px;height:16px;color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-more .cap{padding:0 14px 6px;text-transform:none;letter-spacing:0;font:400 13px/1 var(--app-font);color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-more .row{min-height:46px;padding:0 14px;border:0;box-shadow:inset 0 -.5px 0 color-mix(in oklab,var(--app-ink) 10%,transparent);font-size:17px;gap:12px}
.sh[data-target="ios"] .sh-more .row:first-of-type{border:0;border-radius:12px 12px 0 0}.sh[data-target="ios"] .sh-more .row:last-of-type{border-radius:0 0 12px 12px;box-shadow:none}
.sh[data-target="ios"] .sh-more .row:only-of-type{border-radius:12px}
.sh[data-target="ios"] .sh-more .grp{border-radius:12px;box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 12%,transparent);background:var(--app-panel-bg)}
.sh[data-target="ios"] .sh-more .grp .cap{padding-top:8px;background:transparent}
.sh[data-target="ios"] .sh-more .row svg.g{width:20px;height:20px;color:var(--app-ink-muted)}
.sh[data-target="ios"] .sh-more .row .chev{margin-left:auto;color:var(--app-ink-faint);display:grid}.sh[data-target="ios"] .sh-more .row .chev svg.g{width:14px;height:14px}
.sh[data-target="ios"] .sh-page:has(.sh-more){background:var(--color-base-200);padding-top:12px}

/* ── B4. The assistant: the ring in the tab bar and its surfaces (direction 15 Oct). A circle with the ring mark in it, not a sphere. ── */
.sh-ring,.sh-tabbar .orb .disc{display:grid;place-items:center;width:var(--sz,60px);height:var(--sz,60px);border-radius:50%}
.sh-ring .rg,.sh-tabbar .orb .rg{width:100%;height:100%;display:block}
/* in the bar: a plain circle in ink with the ring in it; it rises a third of its height above the capsule */
.sh-tabbar .orb{display:grid;place-items:center;align-self:start;margin-top:-24px;padding:0;background:none;border-radius:50%;--sz:60px}
.sh-tabbar .orb .disc{background:var(--app-ink);color:var(--color-base-100);box-shadow:0 0 0 3px var(--app-shell-bg),0 6px 18px -6px oklch(0% 0 0 / .35);transition:transform var(--dur-base) var(--ease-out)}
.sh-tabbar .orb .disc .rg{width:72%;height:72%}
.sh-tabbar .orb:hover .disc,.sh-tabbar .orb.on .disc{transform:scale(1.05)}
.sh-tabbar .orb:focus-visible{outline:2px solid var(--app-focus);outline-offset:4px;border-radius:50%}
/* large: the ring over a soft glow, as the voice surface draws it */
.sh-ring.big{color:var(--app-ink);margin:0 auto;position:relative}
.sh-ring.big::before{content:"";position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 60px 18px color-mix(in oklab,var(--app-ink) 18%,transparent)}
.sh-tabbar.asst .rv{grid-column:span 2;display:flex;flex-direction:row;gap:8px;font-size:13px;font-weight:550;color:var(--app-ink);border-radius:12px}
.sh-tabbar.asst .rv svg.g{width:20px;height:20px}
.sh-tabbar.asst .pill{grid-template-columns:2fr 1fr 2fr}
.sh:is([data-target="mobile"]) .sh-tabbar.asst{grid-template-columns:2fr 1fr 2fr}
.sh:is([data-target="mobile"]) .sh-tabbar .orb{margin-top:-20px;--sz:52px}
/* the compact bar: the call in the background, a floating glass bar at the top (NativeVoiceSurface.compact) */
.sh-asst-bar{position:absolute;left:12px;right:12px;top:48px;z-index:7;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:18px;background:color-mix(in oklab,var(--color-base-100) 86%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 14%,transparent),0 10px 30px -8px oklch(0% 0 0 / .28);color:var(--app-ink)}
.sh[data-target="ios"] .sh-asst-bar{top:102px}
.sh-asst-bar .ex{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left}
.sh-asst-bar .ex>svg.g{width:28px;height:28px;color:var(--app-ink)}
.sh-asst-bar .ex span{display:flex;flex-direction:column;line-height:1.2}.sh-asst-bar .ex b{font-weight:550;font-size:15px}.sh-asst-bar .ex small{font-size:12px;color:var(--app-ink-muted)}
.sh-asst-bar .acts{display:flex;gap:2px}
.sh-asst-bar .ib{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--app-ink)}
.sh-asst-bar .ib.end{background:var(--color-error);color:#fff}
/* the voice surface, full screen (NativeVoiceSurface.fullScreen), and the expanded orb (home), and the chat sheet */
.sh-asst{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:var(--app-shell-bg);color:var(--app-ink)}
.sh[data-target="ios"] .sh-asst{top:54px;border-radius:0}
.sh-asst .top{display:flex;align-items:center;gap:8px;padding:10px 14px 0;min-height:48px}
.sh-asst .top .ttl{font:550 17px/1.2 var(--app-font);flex:1;text-align:center}
.sh-asst .grow{flex:1}
.sh-asst .gc{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:var(--app-ink);background:color-mix(in oklab,var(--app-ink) 6%,var(--color-base-100));box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 10%,transparent),0 1px 2px oklch(0% 0 0 / .06)}
.sh-asst .gc svg.g{width:20px;height:20px}
.sh-asst .gc.end{background:var(--color-error);color:#fff}
.sh-asst.call{align-items:center;justify-content:space-between;padding:0 24px 28px}
.sh-asst.call .top{width:100%;padding:12px 0 0}
.sh-asst.call .who{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}.sh-asst.call .who b{font:550 22px/1.2 var(--app-font)}.sh-asst.call .who small{font-size:14px;color:var(--app-ink-muted)}
.sh-asst.call .st{display:flex;flex-direction:column;align-items:center;gap:6px}.sh-asst.call .st b{font:500 18px/1.2 var(--app-font)}.sh-asst.call .st small{font-size:12px;color:var(--app-ink-muted)}
.sh-asst.call .ctl{display:flex;width:100%;gap:12px}
.sh-asst.call .ctl button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--app-ink-body)}
.sh-asst.call .ctl .gc{width:60px;height:60px;border-radius:18px}
.sh-asst.call .top .lbl{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--app-ink-body)}
.sh-asst.call .top .lbl .gc{width:56px;height:56px;border-radius:18px}
.sh-asst.call .who svg.g{width:24px;height:24px;margin-bottom:2px}
.sh-asst .tx{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 16px}
.sh-asst .tx .m{display:flex}.sh-asst .tx .m.out{justify-content:flex-end}
.sh-asst .tx .m span{max-width:82%;padding:9px 12px;border-radius:16px;background:var(--color-base-200);font-size:15px;line-height:1.35}
.sh-asst .tx .m.out span{background:var(--app-ink);color:var(--color-base-100)}
.sh-asst .cmp{display:flex;align-items:center;gap:8px;padding:8px 12px 12px}
.sh-asst .cmp .in{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 10px;border-radius:22px;background:color-mix(in oklab,var(--app-ink) 6%,var(--color-base-100));box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--app-ink) 12%,transparent)}
.sh-asst .cmp .in svg.g{width:18px;height:18px;color:var(--app-ink-muted)}
.sh-asst .cmp .in input{flex:1;background:none;border:0;outline:0;font:400 16px/1 var(--app-font);color:var(--app-ink)}
.sh-asst .cmp .ib{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--app-ink-muted)}
.sh-asst .cmp .vc{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--app-ink);color:var(--color-base-100)}
.sh-asst .cmp .vc svg.g{width:20px;height:20px}
.sh-asst.home .dyn{padding:8px 16px 0}
.sh-asst.home .dyn .sh-mount{min-height:150px}
.sh-asst.chat{top:auto;height:62%;border-radius:24px 24px 0 0;box-shadow:0 -.5px 0 color-mix(in oklab,var(--app-ink) 12%,transparent),0 -12px 32px oklch(0% 0 0 / .16)}
.sh[data-target="ios"] .sh-asst.chat{top:auto}
.sh-asst.chat .grab{display:block;width:36px;height:5px;border-radius:3px;background:color-mix(in oklab,var(--app-ink) 22%,var(--color-base-100));margin:6px auto 0}
.sh-asst.chat .top{min-height:40px;padding-top:4px}
/* sub navs in the places sheet: a segment above the rows */
.sh:is([data-target="mobile"],[data-target="ios"]) .sh-sheet .sh-seg.sub{margin:4px 0 8px}
.sh-places .row.sub{font-weight:500;color:var(--app-ink)}
.sh-places .row.sub[aria-current="page"]{background:var(--color-base-300);font-weight:550}