/*
 * The showcase's own additions to the frame in showcase.css: the bands and root sections of the
 * menu, the language switch, presentation mode, the flow player, variants and the "Selected" mark,
 * device frames, and reduced motion. Every color is a token; nothing here is the product's style.
 */

/* ── Menu: root sections, their groups set apart by a gap ── */

.sc-side__gap {
  margin: 12px 12px;
  border: 0;
  border-top: 1px solid var(--color-default);
}

/* The title of a root is a link inside the <summary>: the chevron folds, the title opens the page */
.sc-side__title { display: flex; align-items: center; gap: 6px; }
.sc-side__title .navlink--page { flex: 1; padding-left: 0; }
.navlink--page { font-weight: 500; }

/* The row is the <summary>, chevron and title together: the hover and the mark of the page on show
   are drawn on it, never on the link alone, or the highlight would start after the chevron. While
   its root is open, the page on show is marked in the list under the title, so the row keeps no
   background. Folded, the row carries the mark: aria-current="page" for a page in sections, "true"
   for the root of a child page on show (a flow). */
.sc-side__title .navlink--page,
.sc-side__title .navlink--page:hover,
.sc-side__title .navlink--page[aria-current] { background: transparent; }
.sc-side__title:hover .navlink--page { color: var(--color-foreground); }
.sc-side__group:not([open]) > .sc-side__title:has(> .navlink--page[aria-current]) {
  background: var(--color-primary-soft);
}
.sc-side__group:not([open]) > .sc-side__title:has(> .navlink--page[aria-current]),
.sc-side__group:not([open]) > .sc-side__title > .navlink--page[aria-current] {
  color: var(--color-primary-strong);
}

/* ── Technology marks on the Stack page: files in assets/tech/ (tools/fetchTechMarks.mjs) in their
   brand colors; a black or white mark (mono) turns white on the dark theme; a technology with no mark
   shows its initials on a tile ── */

.tech-mark { display: block; width: 40px; height: 40px; object-fit: contain; flex: none; }
.tech-mark[src$=".png"] { border-radius: var(--radius-control); }
.tech-mark--initials {
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-weight: 600;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tech-mark--mono { filter: invert(1); }
}
:root[data-theme='dark'] .tech-mark--mono { filter: invert(1); }

/* ── Top bar: language and presentation ── */

.sc-lang:empty { display: none; }
.sc-top__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-present[aria-pressed='true'] { color: var(--color-primary); }

/* ── Presentation mode: the page alone, larger ── */

html.present .sc-side,
html.present .sc-scrim,
html.present .sc-top { display: none; }
/* Without the menu and the top bar the page is the only thing left: out of the frame's grid, or it
   would fall into the menu's column */
html.present body { display: block; }
html.present .sc-main {
  margin-left: 0;
  max-width: none;
  padding: 48px clamp(24px, 6vw, 96px);
  font-size: 17px;
}
html.present .sc-pager { display: none; }
html.present .sc-present-exit { display: inline-flex; }
.sc-present-exit {
  display: none;
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: var(--z-header);
}

/* ── The flow player ── */

.flow {
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.flow__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface-muted);
}
.flow__counter { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow__bar .btn[disabled] { opacity: 0.4; }
.flow__steps { list-style: none; margin: 0; padding: 0; }
.flow__step { display: none; padding: 24px; }
.flow__step.is-current { display: block; }
.flow__screen {
  background: var(--color-page);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: auto;
}
.flow__note {
  margin: 12px 0 0;
  color: var(--color-muted);
}
.flow__note strong { color: var(--color-foreground); }

/* "All steps": every step in order, numbered, the current one marked */
.flow--all .flow__step { display: block; border-top: 1px solid var(--color-default); }
.flow--all .flow__step:first-child { border-top: 0; }
.flow--all .flow__step.is-current { box-shadow: inset 3px 0 0 var(--color-primary); }
.flow__step-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; color: var(--color-muted); }
.flow__step-head strong { color: var(--color-foreground); }
.flow:not(.flow--all) .flow__step-head { display: none; }

/* Full screen: the browser's own, or a fixed overlay where it is not available */
.flow--full,
.flow:fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
}
.flow--full .flow__steps,
.flow:fullscreen .flow__steps { flex: 1; overflow: auto; }
.flow--full .flow__step.is-current,
.flow:fullscreen .flow__step.is-current { min-height: 100%; padding: 32px clamp(16px, 4vw, 64px); }

/* A control that leads to a screen not drawn yet: the bar says so for a moment */
.flow__end { display: none; color: var(--color-warning-text); white-space: nowrap; }
.flow--end .flow__end { display: inline; }
.flow [data-go] { cursor: pointer; }

/* What the user acts on in a step (data-flow-target="1", "2", … in the order of acting): ringed while
   its step is on show, numbered in a badge at its corner, the emphasis walking from one to the next
   (flow.js). The rules sit in :where(), so a component's own position and ::after win over them —
   which is why a control that draws its own ::after (a switch, a checkbox) is marked on its wrapper.
   The Hints button (flow--plain) turns it all off. */
.flow:not(.flow--plain) .flow__step.is-current :where([data-flow-target]),
.flow--all:not(.flow--plain) :where([data-flow-target]) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* A wrapper with square corners (a field's label) gets the controls' radius, so its ring is soft */
:where(.flow [data-flow-target]) { position: relative; border-radius: var(--radius-control); }
:where(.flow:not(.flow--plain) [data-flow-target]:not([data-flow-target='']))::after,
.flow__mark {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font: 600 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
:where(.flow:not(.flow--plain) [data-flow-target]:not([data-flow-target='']))::after {
  content: attr(data-flow-target);
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  pointer-events: none;
}
.flow:not(.flow--plain) .is-flow-now { animation: flow-now calc(var(--duration-slow) * 2) var(--ease-standard) infinite; }
@keyframes flow-now {
  50% { outline-width: 3px; outline-offset: 7px; }
}
/* The same number in the note under the screen: flowMark(1) in tools/lib/html.mjs */
.flow__mark { min-width: 18px; height: 18px; font-size: 11px; vertical-align: 1px; }

/* ── Variants and the Selected mark ── */

.variant { position: relative; }
/* The title and its Selected / Alternative tag on one line, from the left: the section head is a column
   (showcase.css), so the row is set here, or align-items would centre both */
.variant__head { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.tag--selected {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-color: transparent;
}
.tag--alternative { color: var(--color-muted); }

/* ── Device frames: a phone, a tablet and a desktop window around a screen ── */

.device {
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-emphasis);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.device--phone { width: 390px; max-width: 100%; aspect-ratio: 390 / 844; border-radius: 46px; border-width: 6px; }
.device--tablet { width: 820px; max-width: 100%; aspect-ratio: 820 / 1180; border-radius: 28px; border-width: 8px; }
/* A phone and a tablet wear a dark bezel, the way the hand holds them; a desktop keeps the window's line */
.device--phone, .device--tablet { border-color: var(--color-device); box-shadow: var(--shadow-raised); }
.device--desktop { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); }
.device__screen { width: 100%; height: 100%; overflow: auto; background: var(--color-page); }
.devices { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }

/* ── Email frame: a 600 px letter as a mail client shows it ── */

.mail {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.mail__meta {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-default);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: 13px;
}
.mail__meta strong { color: var(--color-foreground); }

/* ── Reduced motion: every animation has a still version ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Contrast verdict: showcase.js writes <span class="pill pill--success|danger"> into each row ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pill--success { background: var(--color-success-soft); color: var(--color-success-text); }
.pill--danger { background: var(--color-danger-soft); color: var(--color-danger-text); }