/*
 * Shared page chrome for both docs pages (the showcase and the API
 * reference): design tokens, the pre-upgrade placeholders that stop load
 * flicker, the sticky header and the code blocks. Page-specific styles
 * live in docs/showcase.css and docs/reference.css.
 *
 * Colors resolve through the Jelly theme tokens once the library loads;
 * light-dark() fallbacks keep the first paint correct.
 */

:root {
  color-scheme: light dark;

  --bg:      var(--jelly-color-background-default, light-dark(#FFFFFF, #181B1D));
  --surface: var(--jelly-color-background-surface,    light-dark(#FFFFFF, #1E222A));
  --text:    var(--jelly-color-foreground-default,       light-dark(#1F2430, #F2F3F7));
  --muted:   var(--jelly-color-foreground-muted, light-dark(#5D6474, #A9B1C2));
  --line:    var(--jelly-color-border-default,       light-dark(#ECECEF, #343A46));
  --accent:  var(--jelly-color-background-accent,     light-dark(#0077CC, #4DA6FF));
  --field:   var(--jelly-color-background-muted,      light-dark(#F4F5F7, #262B34));

  /* Route the docs type through the library font tokens so a re-theme flows
     into the site chrome too; the fallbacks mirror theme.js exactly. */
  --display: var(--jelly-font-display, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif);
  --body:    var(--jelly-font-text,    system-ui, -apple-system, "Segoe UI", sans-serif);
  --mono:    var(--jelly-font-mono,     ui-monospace, "SF Mono", Menlo, monospace);

  /* The shared top bar's height: a 42px small jelly-button plus the same 8px
     of air above and below it as sits between the buttons */
  --header-h: 58px;
}

:root[data-jelly-mode="light"] { color-scheme: light; }
:root[data-jelly-mode="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }

/* ============ Pre-upgrade placeholders (no load flicker) ============
   Custom elements are plain inline boxes until the module registers them,
   so the first paint would jitter as each one snaps to its real size.
   Reserve the upgraded footprint of everything above the fold and hide its
   raw content - the layout is already final when they pop in. Each
   placeholder mirrors its component's upgraded box exactly: the switch
   reserves its 62px track + 12px gap and matches the label font, the chip
   its capsule padding + label font - so the light-DOM text inside lays out
   at the same width it will have after upgrade.
   (`:not(:defined)` matches only un-upgraded custom elements.) */
:not(:defined) { visibility: hidden; }

jelly-button:not(:defined)      { display: inline-block; min-width: 168px; height: 62px; }
jelly-switch:not(:defined)      { display: inline-flex;  align-items: center; min-height: 39px; padding-inline-start: 74px; font: 600 15.5px/1 var(--body); }
jelly-chip:not(:defined)        { display: inline-flex;  align-items: center; min-height: 36px; padding-inline: 17px; font: 600 14px/1 var(--body); }
jelly-badge:not(:defined)       { display: inline-flex;  align-items: center; min-height: 30px; padding-inline: 12px; font: 640 14px/1 var(--body); }
jelly-icon-button:not(:defined) { display: inline-block; width: 40px; height: 40px; }

html {
  scroll-behavior:    smooth;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-jelly-motion="no-preference"]) { scroll-behavior: auto; }
}

:root[data-jelly-motion="reduce"] { scroll-behavior: auto; }

body {
  margin:      0;
  background:  var(--bg);
  color:       var(--text);
  font:        16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

a    { color: inherit; }
code { font-family: var(--mono); font-size: 0.92em; }

.skip {
  position:           absolute;
  inset-inline-start: 12px;
  top:                -60px;
  z-index:            100;
  padding:            10px 16px;
  background:         var(--accent);
  color:              var(--bg);
  border-radius:      10px;
  transition:         top 0.15s ease;
}
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-jelly-motion="no-preference"]) .skip { transition: none; }
}

:root[data-jelly-motion="reduce"] .skip { transition: none; }

/* ============================ Top bar ============================
   One slim full-width bar shared by both pages: the brand on the left, real
   jelly-buttons (square shape) for the page links plus the preference toggles
   on the right. It is sticky, so the hero can run to the very top of the
   showcase before the bar pins; on the reference it simply pins from the
   start. The vertical air above/below the 42px buttons equals the 8px gap
   between them. */
.subnav {
  position:        sticky;
  top:             0;
  /* Above component popovers (jelly-select/menu/popover use z-index 9999) so an
     open dropdown scrolls under the sticky bar instead of over it. */
  z-index:         10000;
  display:         flex;
  align-items:     center;
  gap:             14px;
  height:          var(--header-h);
  padding:         0 clamp(16px, 4vw, 32px);
  background:      var(--bg);
  border-bottom:   1px solid var(--line);
  /* Clip the buttons' decorative canvas overflow (the bar is not an ancestor
     of anything sticky, so pinning elsewhere is unaffected) */
  overflow-x:      clip;
}

.subnav-brand {
  font:            660 16px/1 var(--display);
  text-decoration: none;
  white-space:     nowrap;
}

/* A quiet version tag trailing the brand, sitting on the same baseline */
.subnav-ver {
  margin-inline-start: 2px;
  font:                600 11px/1 var(--mono);
  color:               var(--muted);
  vertical-align:      baseline;
}

.subnav-links {
  display:             flex;
  align-items:         center;
  gap:                 8px;
  margin-inline-start: auto;
}

/* Keep both preference controls reachable on phones; the brand and the API
   page's Components button retain the two page-navigation routes. */
@media (max-width: 700px) {
  .subnav-links > :is([data-subnav-showcase], [data-subnav-api]) { display: none; }
}

/* ============================ Code blocks ============================
   Every copyable snippet shares this block: a slim toolbar holds the copy
   button ABOVE the code, so the button can never sit on top of (and hide)
   the code itself. */
.code {
  border:        1px solid var(--line);
  border-radius: 12px;
  background:    var(--field);
  overflow:      hidden;
}

.code-head {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding:         6px 6px;
  border-bottom:   1px solid var(--line);
}

/* The copy control is a real jelly-button (it jiggles on press like every
   other control); just make it compact enough for the slim toolbar. */
.code .copy {
  --jelly-button-height:         32px;
  --jelly-button-min-width:      64px;
  --jelly-button-padding-inline: 14px;
  --jelly-button-font-size:      12.5px;
}

.code pre {
  margin:      0;
  padding:     14px 18px;
  overflow:    auto;
  font-size:   13px;
  line-height: 1.6;
  color:       var(--text);
}

footer {
  color:     var(--muted);
  font-size: 13.5px;
}
footer a { color: var(--accent); }