/* The examples page: a rail of examples, a stage that holds the island and one component, and the
   code beside it. Tokens, the header, the code block and the footer come from styles.css. */

:root {
  /* The tote in the cart example, and the record light. */
  --swatch: #EFE6D6;
  --swatch-ink: #6B5B3E;
  --rec: #DC2626;
}

/* Components set their own display, so the hidden attribute has to win. */
[hidden] { display: none !important; }

.ex-page .foot { max-width: 1232px; margin-top: 64px; }
.ex-head {
  max-width: 1232px;
  grid-template-columns: 1fr auto;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hair);
}
.brand-sub { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--tile); font-weight: 500; }

.ex-body {
  max-width: 1232px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  align-items: start;
  gap: 32px 40px;
}

/* ───── Rail ───── */
.ex-rail {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ex-group { display: flex; flex-direction: column; gap: 2px; }
.ex-group-name {
  margin: 0 0 4px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
}
.ex-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--nav);
  text-decoration: none;
}
.ex-link:hover { color: var(--ink); }
.ex-link:focus-visible { outline-offset: -2px; }
.ex-link[aria-current="true"] { color: var(--ink); background: var(--tile); font-weight: 600; }

/* ───── Example ───── */
.ex-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ex-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ex-intro-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ex-intro h1 { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; }
.ex-blurb { margin: 0; max-width: 36rem; color: var(--muted); }

.ex-theme { display: flex; align-items: center; gap: 10px; }
.ex-theme-name { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--tile); }
.seg button {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--nav);
  font: 500 13px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 11, 12, 0.12); }

.ex-split { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }

/* The stage is the island's viewport. Layout containment makes the island's fixed position resolve
   against the stage instead of the window, and the container gives it the stage's width to size by. */
.ex-stage {
  flex: 1 1 360px;
  min-width: 0;
  min-height: 540px;
  contain: layout;
  container-type: inline-size;
  /* Room above the component for the island when it opens into a card. */
  padding: 208px 16px 16px;
  border-radius: 20px;
  background-color: var(--tile);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ex-stage .buoy-exp { width: min(380px, calc(100cqw + 8px)); }
.ex-stage .buoy-tray { width: min(420px, calc(100cqw + 16px)); }
.ex-stage .buoy-title { max-width: min(260px, calc(100cqw - 138px)); }
.ex-slot { width: 100%; margin: auto 0; }
.ex-component { display: flex; justify-content: center; }
.ex-hint {
  margin: 0;
  max-width: 34rem;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
}

/* The code takes the spare width: the stage only needs room for one component. */
.ex-code { flex: 3 1 420px; display: flex; flex-direction: column; }
.ex-code .code-body { flex: 1; max-height: 640px; padding: 20px 24px 24px; overflow: auto; font-size: 13px; line-height: 1.7; }
.ex-page .details h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ───── Components ─────
   The small pieces the example components are built from. */
.x-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.x-card {
  width: 100%;
  max-width: 360px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(11, 11, 12, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.4;
}
.x-head { display: flex; align-items: center; gap: 12px; }
.x-tile {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--tile);
  color: var(--nav);
  display: grid;
  place-items: center;
}
.x-tile svg { width: 20px; height: 20px; }
.x-tile.is-small { width: 36px; height: 36px; border-radius: 10px; }
.x-tile.is-small svg { width: 18px; height: 18px; }
.x-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.x-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-text span { font-size: 13px; color: var(--muted); }
.x-price { flex: none; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.x-num { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.x-foot { margin: 0; font-size: 13px; color: var(--muted); }
.x-row { display: flex; align-items: center; gap: 8px; }
.is-grow { flex: 1; min-width: 0; }

.x-field { display: flex; flex-direction: column; gap: 6px; }
.x-field label { font-size: 13px; color: var(--muted); }
.x-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1 var(--sans);
}
.x-input::placeholder { color: var(--soft); }
.x-input.is-mono { font-family: var(--mono); font-size: 13px; color: var(--nav); }
.x-check { display: flex; align-items: center; gap: 10px; min-height: 28px; cursor: pointer; }
.x-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent-ink); }

.x-btn {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1 var(--sans);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.x-btn:hover { opacity: 0.88; }
.x-btn:disabled { opacity: 0.5; cursor: default; }
.x-btn.is-quiet { border-color: var(--line); background: var(--paper); color: var(--ink); }
.x-btn.is-quiet:hover { opacity: 1; border-color: var(--accent-ink); }
.x-btn.is-wide { width: 100%; }
.x-btn.is-grow { flex: 1; }
.x-icon {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.x-icon:hover { background: var(--tile); }
.x-icon:disabled { color: var(--dot); background: none; cursor: default; }
.x-icon svg { width: 18px; height: 18px; }
.x-icon-gap { flex: none; width: 44px; }
.x-link { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }

.x-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.x-bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent-ink); transition: width 0.25s ease; }

/* Add to cart */
.x-swatch { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--swatch); color: var(--swatch-ink); display: grid; place-items: center; }
.x-swatch svg { width: 24px; height: 24px; }
.x-stepper { flex: none; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; }
.x-stepper .x-icon { height: 42px; width: 40px; }
.x-qty { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Archive with undo */
.x-card.is-list { padding: 6px; gap: 2px; }
.x-list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px 6px; }
.x-list-head strong { font-weight: 600; }
.x-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.x-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 2px 0 10px; border-radius: 11px; }
.x-item:hover { background: var(--tile); }
.x-face {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--face-1);
  color: var(--face-fg);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.x-face[data-i="1"] { background: var(--face-2); }
.x-face[data-i="2"] { background: var(--face-3); }
.x-empty { margin: 0; padding: 18px 10px 20px; font-size: 13px; color: var(--muted); text-align: center; }

/* Check out */
.x-method { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--nav); }
.x-method svg { flex: none; width: 18px; height: 18px; }

/* Upload files */
.x-drop {
  position: relative;
  padding: 18px 12px;
  border: 1px dashed var(--soft);
  border-radius: 12px;
  color: var(--nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.x-drop:hover, .x-drop.is-over { border-color: var(--accent-ink); background: var(--tile); }
.x-drop:focus-within { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.x-drop svg { width: 20px; height: 20px; }
.x-drop strong { font-weight: 600; color: var(--ink); }
.x-drop-note { font-size: 12px; color: var(--muted); }
.x-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.x-file { display: flex; align-items: center; gap: 10px; }
.x-file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.x-file-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.x-file-name { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-file[data-status="paused"] .x-bar > i { background: var(--soft); }
.x-file[data-status="done"] .x-tile { color: var(--accent-ink); }

/* Play a track */
.x-art { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--art-0); }
.x-art[data-i="1"] { background: var(--art-1); }
.x-art[data-i="2"] { background: var(--art-2); }
.x-scrub { display: flex; align-items: center; gap: 10px; }
.x-scrub .x-bar { flex: 1; }
.x-scrub .x-bar > i { background: var(--ink); }
.x-transport { display: flex; align-items: center; justify-content: center; gap: 12px; }
.x-icon.is-main { width: 48px; height: 48px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.x-icon.is-main:hover { background: var(--ink); opacity: 0.88; }
.x-icon.is-main svg { width: 22px; height: 22px; stroke-width: 2.6; }
.x-transport .x-icon svg { width: 22px; height: 22px; }

/* Focus timer and voice memos */
.x-clock { font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; text-align: center; }
.x-clock.is-small { font-size: 40px; text-align: left; }
.x-presets button { height: 36px; }
.x-rec-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--rec); opacity: 0.4; }
.x-rec-dot.is-on { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rec) 22%, transparent); }
.x-rec-live { display: flex; flex-direction: column; gap: 14px; }
.x-rec-read { display: flex; align-items: center; gap: 14px; padding-left: 4px; }
.x-memos { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.x-memos li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .x-rec-live .x-rec-dot.is-on { animation: x-pulse 1.6s ease-in-out infinite; }
}
@keyframes x-pulse { 50% { opacity: 0.5; } }

/* ───── Narrow screens: the rail becomes a row to swipe through ───── */
@media (max-width: 900px) {
  .ex-body { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 12px; }
  .ex-rail {
    position: static;
    max-height: none;
    flex-direction: row;
    gap: 16px;
    margin: 0 -20px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ex-rail::-webkit-scrollbar { display: none; }
  .ex-group { flex: none; flex-direction: row; align-items: center; }
  .ex-group-name { margin: 0; padding: 0 4px 0 0; }
  .ex-link { flex: none; white-space: nowrap; }
  .ex-stage, .ex-code { flex-basis: 100%; }
}
@media (max-width: 640px) {
  /* The nav already says which page this is. */
  .brand-sub { display: none; }
  .ex-intro h1 { font-size: 32px; }
  .ex-theme { width: 100%; }
  .ex-theme .seg { flex: 1; }
  .ex-stage { min-height: 480px; padding-top: 168px; }
  .ex-code .code-body { padding: 18px 18px 20px; }
}