/*
A26 Web Design System
Static Demo Shell
Version: v1.0.0-alpha.0006-demo-restore
*/

@layer a26.demo {
  :root { color-scheme: light dark; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--a26-accent-blue) 9%, transparent), transparent 28rem),
      radial-gradient(circle at 90% 14%, color-mix(in srgb, var(--a26-accent-purple) 8%, transparent), transparent 24rem),
      var(--a26-bg-app);
    color: var(--a26-text-primary);
    font: var(--a26-font-body);
  }
  a { color: inherit; }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

  .a26-demo-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(248px, 286px) minmax(0, 1fr);
  }

  .a26-demo-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--a26-space-6);
    padding: var(--a26-space-6);
    background: color-mix(in srgb, var(--a26-bg-surface) 72%, transparent);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-right: 1px solid var(--a26-separator);
  }

  .a26-demo-brand { display: flex; align-items: center; gap: var(--a26-space-3); }
  .a26-demo-brand h1 { margin: 0; font: var(--a26-font-title-2); font-weight: 700; }
  .a26-demo-mark {
    display: inline-grid; place-items: center;
    width: 50px; height: 50px; border-radius: 18px;
    background: linear-gradient(145deg, var(--a26-accent), color-mix(in srgb, var(--a26-accent) 70%, black));
    color: white; font: var(--a26-font-headline);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--a26-accent) 28%, transparent);
  }

  .a26-demo-eyebrow {
    margin: 0 0 4px;
    color: var(--a26-text-secondary);
    font: var(--a26-font-caption-1);
    text-transform: uppercase;
    letter-spacing: .075em;
  }

  .a26-demo-nav { display: grid; gap: 4px; }
  .a26-demo-nav a {
    min-height: 38px; display: flex; align-items: center;
    padding: 0 var(--a26-space-3); border-radius: var(--a26-radius-md);
    color: var(--a26-text-secondary); text-decoration: none; font: var(--a26-font-callout);
  }
  .a26-demo-nav a:hover,
  .a26-demo-nav a:focus-visible { background: var(--a26-fill-tertiary); color: var(--a26-text-primary); outline: none; }
  .a26-demo-sidebar-footer { margin-top: auto; }
  .a26-demo-sidebar-footer > p { margin: 0 0 var(--a26-space-2); color: var(--a26-text-secondary); font: var(--a26-font-caption-1); }
  .a26-demo-theme-toggle {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
    border-radius: var(--a26-radius-pill); background: var(--a26-fill-tertiary);
  }
  .a26-demo-theme-toggle button {
    min-height: 32px; border: 0; border-radius: var(--a26-radius-pill); background: transparent;
    color: var(--a26-text-secondary); font: var(--a26-font-caption-1); cursor: pointer;
  }
  .a26-demo-theme-toggle button[aria-pressed="true"] { background: var(--a26-bg-elevated); color: var(--a26-text-primary); box-shadow: 0 1px 3px #0000001F; }

  .a26-demo-main { min-width: 0; padding: clamp(22px, 4vw, 58px); }
  .a26-demo-showcase-panel,
  .a26-demo-section { scroll-margin-top: var(--a26-space-8); }

  .a26-demo-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    gap: var(--a26-space-6); align-items: stretch; margin-bottom: var(--a26-space-8);
  }
  .a26-demo-showcase-panel {
    padding: clamp(22px, 4vw, 44px); border-radius: 30px;
    background: color-mix(in srgb, var(--a26-bg-surface) 84%, transparent);
    border: 1px solid var(--a26-separator);
    box-shadow: 0 18px 58px #00000012;
    overflow: hidden;
  }
  .a26-demo-hero h2,
  .a26-demo-section-head h2 {
    margin: 0; font: var(--a26-font-large-title); font-weight: 700; letter-spacing: -.025em;
  }
  .a26-demo-lede { max-width: 760px; margin: var(--a26-space-3) 0 0; color: var(--a26-text-secondary); font: var(--a26-font-title-3); }
  .a26-demo-chip-row { display: flex; flex-wrap: wrap; gap: var(--a26-space-2); margin-top: var(--a26-space-5); }
  .a26-demo-chip {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px;
    border-radius: var(--a26-radius-pill); background: var(--a26-fill-tertiary); color: var(--a26-text-secondary); font: var(--a26-font-caption-1);
  }

  .a26-demo-device-card {
    min-height: 280px; padding: 14px; border-radius: 28px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--a26-bg-elevated) 96%, transparent), var(--a26-bg-surface));
    border: 1px solid var(--a26-separator); box-shadow: inset 0 0 0 1px #ffffff14, 0 20px 44px #0000001A;
  }
  .a26-demo-mini-toolbar {
    height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 12px; border-radius: 18px; background: var(--a26-material-regular-fill);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--a26-separator);
  }
  .a26-demo-mini-toolbar strong { font: var(--a26-font-footnote); }
  .a26-demo-mini-layout { display: grid; grid-template-columns: 76px 1fr 1.25fr; gap: 10px; height: calc(100% - 54px); margin-top: 12px; }
  .a26-demo-mini-sidebar,
  .a26-demo-mini-list,
  .a26-demo-mini-detail { border-radius: 22px; background: var(--a26-bg-pane); border: 1px solid var(--a26-separator); padding: 12px; }
  .a26-demo-mini-sidebar i,
  .a26-demo-mini-list b,
  .a26-demo-mini-detail p,
  .a26-demo-mini-detail h3 { display: block; border-radius: 999px; background: var(--a26-fill-secondary); }
  .a26-demo-mini-sidebar i { height: 24px; margin-bottom: 8px; }
  .a26-demo-mini-sidebar i:first-child { background: var(--a26-accent); }
  .a26-demo-mini-list b { height: 42px; margin-bottom: 10px; }
  .a26-demo-mini-list b:first-child { background: color-mix(in srgb, var(--a26-accent) 22%, var(--a26-fill-secondary)); }
  .a26-demo-mini-detail h3 { width: 65%; height: 28px; margin: 0 0 18px; }
  .a26-demo-mini-detail p { width: 100%; height: 16px; margin: 0 0 10px; }
  .a26-demo-mini-detail p:last-child { width: 72%; }

  .a26-demo-section { margin-block: var(--a26-space-8); }
  .a26-demo-section-head { margin-bottom: var(--a26-space-4); }
  .a26-demo-section-head h2 { font: var(--a26-font-title-1); font-weight: 700; }
  .a26-demo-section-note { max-width: 760px; margin: 0 0 var(--a26-space-4); color: var(--a26-text-secondary); font: var(--a26-font-callout); }

  .a26-demo-grid { display: grid; gap: var(--a26-space-4); }
  .a26-demo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a26-demo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a26-demo-card {
    padding: var(--a26-space-5); border-radius: var(--a26-radius-xl);
    background: var(--a26-bg-surface); border: 1px solid var(--a26-separator);
    box-shadow: 0 8px 24px #0000000A;
  }
  .a26-demo-card h3 { margin: 0 0 var(--a26-space-2); font: var(--a26-font-headline); }
  .a26-demo-card p { margin: 0; color: var(--a26-text-secondary); }
  .a26-demo-card p + p { margin-top: var(--a26-space-2); }
  .a26-demo-card strong { color: var(--a26-text-primary); }
  .a26-demo-card-title { margin: 0 0 var(--a26-space-2) !important; color: var(--a26-text-primary) !important; font: var(--a26-font-headline); }
  .a26-demo-visual-card { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; }
  .a26-demo-icon-dot { --dot: var(--a26-accent); width: 46px; height: 46px; border-radius: 16px; margin-bottom: auto; background: var(--dot); box-shadow: 0 14px 30px color-mix(in srgb, var(--dot) 24%, transparent); }

  .a26-demo-type-board {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    overflow: hidden; border-radius: var(--a26-radius-xl); border: 1px solid var(--a26-separator); background: var(--a26-separator);
  }
  .a26-demo-type-sample { padding: var(--a26-space-5); background: var(--a26-bg-surface); }
  .a26-demo-type-sample span { display: block; margin-bottom: var(--a26-space-2); color: var(--a26-text-tertiary); font: var(--a26-font-footnote); }
  .a26-demo-type-sample p { margin: 0; }

  .a26-demo-color-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: var(--a26-space-4); align-items: stretch; }
  .a26-demo-label-card { display: grid; gap: var(--a26-space-2); }
  .a26-demo-label-card h3 { margin-bottom: var(--a26-space-3); }
  .a26-demo-label-primary { color: var(--a26-text-primary) !important; font: var(--a26-font-headline); }
  .a26-demo-label-secondary { color: var(--a26-text-secondary) !important; }
  .a26-demo-label-tertiary { color: var(--a26-text-tertiary) !important; }
  .a26-demo-label-quaternary { color: var(--a26-text-quaternary) !important; }
  .a26-demo-swatches { display: grid; gap: var(--a26-space-4); }
  .a26-demo-swatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a26-demo-swatch {
    min-height: 136px; display: flex; flex-direction: column; justify-content: end; gap: var(--a26-space-2);
    padding: var(--a26-space-4); border-radius: var(--a26-radius-xl); background: var(--swatch);
    border: 1px solid var(--a26-separator); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a26-text-primary) 4%, transparent);
  }
  .a26-demo-swatch span { font: var(--a26-font-headline); }
  .a26-demo-swatch code { color: var(--a26-text-secondary); font-size: 11px; }
  .a26-demo-accent-row {
    display: flex; flex-wrap: wrap; gap: var(--a26-space-3); margin-top: var(--a26-space-4);
    padding: var(--a26-space-5); border-radius: var(--a26-radius-xl); background: var(--a26-bg-surface); border: 1px solid var(--a26-separator);
  }
  .a26-demo-accent-row span { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 1px #0000001A; }

  .a26-demo-material-stage {
    min-height: 300px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--a26-space-4);
    padding: var(--a26-space-6); border-radius: 30px;
    background:
      radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--a26-accent-blue) 32%, transparent), transparent 28%),
      radial-gradient(circle at 82% 34%, color-mix(in srgb, var(--a26-accent-green) 27%, transparent), transparent 26%),
      radial-gradient(circle at 58% 80%, color-mix(in srgb, var(--a26-accent-pink) 20%, transparent), transparent 30%),
      linear-gradient(135deg, var(--a26-bg-pane), var(--a26-bg-surface-secondary));
    border: 1px solid var(--a26-separator);
  }
  .a26-demo-material-card {
    min-height: 150px; display: grid; place-items: center; align-content: center; gap: var(--a26-space-2);
    padding: var(--a26-space-4); border-radius: 28px; color: var(--a26-text-primary); text-align: center;
    border: 1px solid var(--a26-separator); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  .a26-demo-material-card strong { font: var(--a26-font-headline); }
  .a26-demo-material-card span { color: var(--a26-text-secondary); font: var(--a26-font-footnote); }
  .a26-demo-material-regular { background: var(--a26-material-regular-fill); }
  .a26-demo-material-thin { background: var(--a26-material-thin-fill); }
  .a26-demo-material-clear { background: var(--a26-glass-clear-fill); }

  .a26-demo-primitive-frame,
  .a26-demo-split-stage {
    border-radius: 30px; overflow: hidden; border: 1px solid var(--a26-separator); background: var(--a26-bg-app); box-shadow: 0 16px 44px #00000014;
  }
  .a26-demo-primitive-frame .a26-app-shell { min-height: 460px; }
  .a26-demo-split-stage .a26-split-view { min-height: 540px; }
  .a26-demo-split-stage .a26-sidebar { min-height: 0; }
  .a26-demo-split-stage .a26-list-row { cursor: pointer; }
  .a26-demo-split-stage .a26-list-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent); outline-offset: -3px; }
  .a26-demo-deploy-card { max-width: 560px; }


  .a26-demo-sidebar-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--a26-space-5);
    align-items: stretch;
  }
  .a26-demo-sidebar-card {
    min-width: 0;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--a26-separator);
    background:
      radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--a26-accent) 12%, transparent), transparent 38%),
      var(--a26-bg-app);
    box-shadow: 0 16px 44px #00000014;
  }
  .a26-demo-sidebar-card .a26-sidebar {
    width: 100%;
    min-height: 410px;
    border-inline-end: 0;
  }
  .a26-demo-sidebar-card-body {
    display: grid;
    gap: 3px;
    padding: var(--a26-space-4);
    border-top: 1px solid var(--a26-separator);
    background: var(--a26-bg-surface);
  }
  .a26-demo-sidebar-card-body strong { font: var(--a26-font-headline); }
  .a26-demo-sidebar-card-body span { color: var(--a26-text-secondary); font: var(--a26-font-footnote); }



  .a26-demo-list-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--a26-space-5);
    align-items: start;
  }
  .a26-demo-list-card {
    border-radius: 30px;
    border: 1px solid var(--a26-separator);
    background:
      radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--a26-accent) 11%, transparent), transparent 34%),
      var(--a26-bg-app);
    padding: var(--a26-space-5);
    box-shadow: 0 16px 44px #00000014;
  }
  .a26-demo-list-card .a26-group-block + .a26-group-block { margin-top: var(--a26-space-5); }
  .a26-demo-list-card .a26-list-row__leading { font-weight: 700; }
  .a26-demo-list-card .a26-list-row__accessory { padding-inline-start: var(--a26-space-1); }

  @media (max-width: 1100px) {
    .a26-demo-list-gallery { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .a26-demo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a26-demo-sidebar-gallery { grid-template-columns: 1fr; }
    .a26-demo-hero { grid-template-columns: 1fr; }
  }

  @media (max-width: 920px) {
    .a26-demo-shell { grid-template-columns: 1fr; }
    .a26-demo-sidebar { position: static; height: auto; }
    .a26-demo-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a26-demo-main { padding: var(--a26-space-4); }
    .a26-demo-grid-3,
    .a26-demo-grid-4,
    .a26-demo-color-layout,
    .a26-demo-material-stage { grid-template-columns: 1fr; }
    .a26-demo-type-board { grid-template-columns: 1fr; }
    .a26-demo-mini-layout { grid-template-columns: 58px 1fr; }
    .a26-demo-mini-detail { grid-column: 1 / -1; }
  }

  @media (max-width: 560px) {
    .a26-demo-nav { grid-template-columns: 1fr; }
    .a26-demo-swatch-grid { grid-template-columns: 1fr; }
    .a26-demo-showcase-panel { border-radius: 24px; padding: var(--a26-space-4); }
  }
}

@layer a26.demo {
  .demo-large-title { font: var(--a26-font-large-title); font-weight: 700; }
  .demo-title-1 { font: var(--a26-font-title-1); font-weight: 700; }
  .demo-title-2 { font: var(--a26-font-title-2); font-weight: 700; }
  .demo-title-3 { font: var(--a26-font-title-3); font-weight: 600; }
  .demo-headline { font: var(--a26-font-headline); }
  .demo-body { font: var(--a26-font-body); color: var(--a26-text-secondary); }
  .demo-footnote { font: var(--a26-font-footnote); color: var(--a26-text-tertiary); }
  .demo-caption-1 { font: var(--a26-font-caption-1); color: var(--a26-text-tertiary); }
}

/* v1.0.0-alpha.0007 toolbar refinement demo additions */
.a26-demo-toolbar-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a26-space-5);
}
.a26-demo-toolbar-card {
  overflow: hidden;
  border: 1px solid var(--a26-separator);
  border-radius: 28px;
  background: var(--a26-bg-surface);
  box-shadow: 0 16px 44px #00000012;
}
.a26-demo-toolbar-card .a26-toolbar {
  position: relative;
  top: auto;
}
.a26-demo-toolbar-card-body {
  padding: var(--a26-space-4);
  display: grid;
  gap: 4px;
}
.a26-demo-toolbar-card-body strong {
  font: var(--a26-font-headline);
  color: var(--a26-text-primary);
}
.a26-demo-toolbar-card-body span {
  font: var(--a26-font-footnote);
  color: var(--a26-text-secondary);
}
.a26-demo-toolbar-card-compact {
  max-width: 420px;
}
@media (max-width: 920px) {
  .a26-demo-toolbar-gallery { grid-template-columns: 1fr; }
}


  .a26-demo-button-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--a26-space-4);
  }

  .a26-demo-button-board .a26-demo-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: var(--a26-space-3);
  }

  .a26-demo-button-board .a26-button-group,
  .a26-demo-button-board .a26-button-stack,
  .a26-demo-control-strip { margin-top: auto; }

  .a26-demo-control-strip {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: var(--a26-space-2);
    padding: 5px;
    border-radius: var(--a26-radius-pill);
    background: var(--a26-fill-tertiary);
    width: fit-content;
    max-width: 100%;
  }

  @media (max-width: 1180px) {
    .a26-demo-button-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 720px) {
    .a26-demo-button-board { grid-template-columns: 1fr; }
  }


/* Search & Inputs demo additions */
.a26-demo-input-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.a26-demo-toolbar-inline { border-radius: 18px; border: 1px solid var(--a26-separator); }
.a26-demo-sidebar-search-frame { padding: 14px; border-radius: 18px; background: var(--a26-bg-pane); border: 1px solid var(--a26-separator); }
@media (max-width: 860px) { .a26-demo-input-board { grid-template-columns: 1fr; } }


/* Selection Controls demo additions */
.a26-demo-selection-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.a26-demo-selection-board .a26-demo-card { min-height: 230px; display: flex; flex-direction: column; gap: 12px; }
.a26-demo-selection-board .a26-segmented-control,
.a26-demo-selection-board .a26-picker,
.a26-demo-selection-board .a26-slider-field,
.a26-demo-selection-board .a26-stepper-field,
.a26-demo-selection-board .a26-choice-stack { margin-top: auto; }
@media (max-width: 920px) { .a26-demo-selection-board { grid-template-columns: 1fr; } }