/* ===== APP CHROME (shell) ===== */
.webview { min-height:100vh; display:flex; flex-direction:column; }

/* top bar */
.appbar { position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--cr-color-surface-default) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--cr-site-hairline);
  overflow-x:clip; transition:box-shadow var(--cr-motion-duration-standard) var(--cr-motion-ease-standard), background var(--cr-motion-duration-standard); }
.bar-inner { max-width:1440px; margin-inline:auto; height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--cr-space-4);
  padding:0 clamp(16px,3vw,32px); }
.appbar.elevated { box-shadow:var(--cr-shadow-elevation-2); }
.brand { grid-column:1; display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.01em; }
.brand .mark { width:34px; height:34px; flex:0 0 auto; }
.brand small { display:block; font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cr-color-text-secondary); }
/* The customize panel is a drawer at every width.
 *
 * It used to be an inline strip in the bar above 1600px. That never had room:
 * the strip is absolutely positioned against the full-width bar but sits
 * between the brand and the Storybook button, so its usable width is fixed at
 * 992px however wide the viewport gets — the 1440px container stops growing and
 * the two reserved insets do not. PR 347 already found no width at which five
 * groups were comfortable and moved the breakpoint from 1280px to 1600px on
 * that reasoning; the sixth (Typeface) needs 1053px, so the inline mode is now
 * arithmetically impossible rather than merely cramped, and it is gone.
 *
 * What that buys beyond fitting: the drawer can take another axis without this
 * calculation being redone, and the panel has exactly one layout to verify. */
.appbar-controls { position:absolute; inset-block-start:0; inset-block-end:auto; inset-inline-start:auto; inset-inline-end:0;
  z-index:60; width:min(420px, calc(100vw - 24px)); height:100dvh; max-height:100dvh;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--cr-space-4); padding:var(--cr-space-4);
  overflow-y:auto; overflow-x:hidden; background:var(--cr-color-surface-default); border-inline-start:1px solid var(--cr-site-hairline);
  box-shadow:var(--cr-shadow-elevation-4); transform:translateX(100%); transition:transform var(--cr-motion-duration-standard) var(--cr-motion-ease-standard); }
.cr[dir="rtl"] .appbar-controls { transform:translateX(-100%); }
.appbar[data-controls-open="true"] .appbar-controls { transform:translateX(0); }
.appbar-controls .seg { display:flex; width:100%; }
.appbar-controls .seg button { flex:1; justify-content:center; min-height:40px; }
.appbar-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--cr-space-3); padding-block-end:var(--cr-space-3);
  border-block-end:1px solid var(--cr-site-hairline); }
.appbar-drawer-head h2 { font-size:1.15rem; }
.appbar-drawer-close { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--cr-site-hairline); border-radius:var(--cr-radius-circle); background:var(--cr-color-surface-default);
  color:var(--cr-color-text-primary); }
.appbar-drawer-close svg { width:20px; height:20px; }
.appbar-controls-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 12px;
  grid-column:2; justify-self:end; inline-size:max-content; flex:0 0 auto; white-space:nowrap;
  border:1px solid var(--cr-site-hairline); border-radius:var(--cr-radius-control); background:var(--cr-color-surface-default);
  color:var(--cr-color-text-primary); font-size:.8rem; font-weight:700; box-shadow:var(--cr-shadow-elevation-1); }
.appbar-controls-toggle svg { width:18px; height:18px; }
/* Fixed width so the primary call to action never reflows or collapses to an icon. */
.appbar-storybook { grid-column:3; justify-self:end; flex:0 0 auto; inline-size:13.5rem; padding-inline:12px; white-space:nowrap; }
/* `.appbar` carries a backdrop-filter, which makes it the containing block for its
   fixed descendants — so `inset:0` here resolves to the bar, not the viewport, and
   the click-outside target has to be sized against the viewport explicitly. */
.appbar-drawer-backdrop { display:block; position:fixed; inset-block-start:0; inset-inline-start:0; width:100vw; height:100dvh;
  z-index:50; padding:0; border:0; background:rgb(0 0 0/.32);
  opacity:0; pointer-events:none; transition:opacity var(--cr-motion-duration-standard) var(--cr-motion-ease-standard); }
.appbar[data-controls-open="true"] .appbar-drawer-backdrop { opacity:1; pointer-events:auto; }

/* segmented control (library-style) */
.seg { display:inline-flex; padding:3px; gap:2px; background:var(--cr-site-surface-tint-3);
  border-radius:var(--cr-radius-pill); border:1px solid var(--cr-site-hairline); }
.seg button { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; font-size:.8rem; font-weight:600;
  border-radius:var(--cr-radius-pill); color:var(--cr-color-text-secondary); transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.seg button svg { width:15px; height:15px; }
.seg button[aria-pressed="true"] { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); box-shadow:var(--cr-shadow-elevation-1); }
.seg.compact button { padding:6px 10px; }

.iconbtn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--cr-radius-circle);
  color:var(--cr-color-text-secondary); border:1px solid var(--cr-site-hairline); background:var(--cr-color-surface-default);
  transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.iconbtn:hover { color:var(--cr-color-text-primary); border-color:var(--cr-color-action-primary-fill); transform:translateY(-1px); }
.iconbtn svg { width:18px; height:18px; }

/* body layout */
.body { flex:1; display:grid; grid-template-columns:248px 1fr; width:100%; max-width:1440px; margin-inline:auto; }
.rail { position:sticky; top:64px; align-self:start; height:calc(100vh - 64px); overflow:auto;
  padding:var(--cr-space-6) var(--cr-space-4); border-right:1px solid var(--cr-site-hairline); background:var(--cr-site-surface-tint-1); }
.rail .group-label { margin:var(--cr-space-5) var(--cr-space-2) var(--cr-space-2); }
.navitem { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 12px; border-radius:var(--cr-radius-control);
  color:var(--cr-color-text-secondary); font-weight:600; font-size:.9rem; transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); margin-bottom:2px; }
.navitem svg { width:18px; height:18px; opacity:.9; }
.navitem:hover { background:var(--cr-site-surface-tint-3); color:var(--cr-color-text-primary); }
.navitem[aria-current="page"] { background:var(--cr-color-action-primary-state-hover); color:var(--cr-color-action-primary-text); }
.cr[data-theme="dark"] .navitem[aria-current="page"] { color:var(--cr-color-text-primary); }
.navitem .count { margin-inline-start:auto; font-size:.72rem; font-weight:700; color:var(--cr-color-text-secondary); }
.rail .ministat { margin-top:var(--cr-space-6); padding:var(--cr-space-4); border-radius:var(--cr-radius-surface);
  background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); }

.main { width:100%; min-width:0; padding:clamp(20px,3.4vw,52px) clamp(20px,4vw,64px) 96px; max-width:1180px; }

@media (max-width:1280px) {
  .body { grid-template-columns:1fr; }
  .rail { display:none; }
  .appbar { position:sticky; }
  .bar-inner { height:56px; gap:var(--cr-space-3); }
  .brand { min-width:0; }
  .brand > div { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Below this the bar can no longer hold both labels; the toggle drops to icon-only. */
@media (max-width:820px) {
  .appbar-controls-toggle { inline-size:40px; width:40px; padding:0; gap:0; }
  .appbar-controls-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* The fixed-width Storybook button and the toggle leave no room for the wordmark
   here, so the brand falls back to the mark alone rather than an ellipsised name. */
@media (max-width:440px) {
  .brand > div { display:none; }
}

@media (max-width:520px) {
  .bar-inner { padding-inline:12px; }
  .brand { gap:8px; }
  .brand .mark { width:30px; height:30px; }
}

/* ===== persistent top bar sits above both views ===== */
/* `.appbar` is already `position:sticky` where it is defined above; the app view
   only needs the wrapper to leave room for it. */
.appwrap { min-height:calc(100vh - 64px); }