/* showroom.css — the layer the new front door (/new/) adds on top of base.css.
 *
 * Nothing here is loaded by any other page: this is a preview of a reshaped
 * front page, so it must not be able to change the live site. Everything is
 * scoped under body.showroom and every colour comes from the variables base.css
 * and shell.css already define, so light/dark and the section hues stay in one
 * place. When this page is adopted, this file moves into theme/.
 */

body.showroom .content { padding-top: 2rem; }

/* ---- hero --------------------------------------------------------------- */

.sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--code-bg);
  border-radius: 999px;
  padding: .25em .8em;
  margin-bottom: 1.1rem;
}
.sr-eyebrow b { color: var(--accent); font-weight: 700; }
.sr-eyebrow a { color: inherit; }

/* Two lines: the name, then what it is. The name is set as a wordmark, so the
   subtitle can carry the sentence without the whole thing becoming a headline
   four lines deep on a phone. */
.sr-hero h1 { margin: 0 0 .8rem; }
.sr-mark {
  display: block;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.sr-sub {
  display: block;
  margin-top: .35rem;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--muted);
  max-width: 34rem;
}
.sr-lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44rem;
  margin: 0 0 1.5rem;
}
.sr-lede strong { color: var(--fg); font-weight: 600; }

.sr-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.8rem; }
.sr-btn {
  display: inline-block;
  padding: .6rem 1.15rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}
.sr-btn:hover { text-decoration: none; filter: brightness(1.08); }
.sr-btn.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.sr-btn.ghost:hover { border-color: var(--muted); filter: none; }

/* The hero editor. raku.js renders inside a Shadow DOM, so this only frames it. */
.sr-demo { margin: 0 0 .5rem; }
.sr-demo-cap {
  font-size: .82rem;
  color: var(--muted);
  margin: .5rem 0 0;
}

/* ---- the numbers strip -------------------------------------------------- */

.sr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .1rem 1.6rem;
  margin: 2.2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--border);
}
.sr-stat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sr-stat span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; }

/* ---- jump bar ----------------------------------------------------------- */

.sr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.6rem 0 0;
}
.sr-jump a {
  font-size: .82rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .22em .8em;
}
.sr-jump a:hover { color: var(--fg); border-color: var(--muted); text-decoration: none; }

/* ---- sections ----------------------------------------------------------- */

.sr-sec { margin: 3.6rem 0 0; scroll-margin-top: calc(var(--shell-h) + 1rem); }
.sr-kicker {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin: 0 0 .35rem;
}
.sr-sec > h2 {
  font-size: 1.75rem;
  letter-spacing: -.02em;
  border-bottom: 0;
  padding: 0;
  margin: 0 0 .5rem;
}
.sr-sec > .sr-intro {
  color: var(--muted);
  max-width: 44rem;
  margin: 0 0 1.6rem;
}

/* ---- cards -------------------------------------------------------------- */

.sr-grid { display: grid; gap: 1rem; }
.sr-grid.two   { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.sr-grid.three { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.sr-card {
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.sr-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.sr-card p  { margin: 0 0 .8rem; color: var(--muted); font-size: .93rem; }
.sr-card p:last-child { margin-bottom: 0; }
.sr-card .sr-more { margin-top: auto; font-size: .88rem; font-weight: 600; }
.sr-card pre.native-code { font-size: .82rem; margin: 0 0 .8rem; }

/* A whole card that is one link. The <a> covers the card so the hit area is the
   card, while the heading text stays the accessible name of the link. */
.sr-card.link { position: relative; transition: border-color .12s ease; }
.sr-card.link:hover { border-color: var(--muted); }
.sr-card.link h3 a::after { content: ""; position: absolute; inset: 0; }
/* …but a second link inside such a card would be swallowed by that overlay —
   every click lands on the card's own href instead. Lift it back above. */
.sr-card.link p a { position: relative; z-index: 1; }

/* The tag over a card: which of the three runtimes it belongs to. */
.sr-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: .18em .6em;
  margin: 0 0 .6rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--code-bg);
}
.sr-tag.browser { color: var(--hue-play);   border-color: color-mix(in srgb, var(--hue-play) 45%, transparent); }
.sr-tag.cli     { color: var(--hue-spec);   border-color: color-mix(in srgb, var(--hue-spec) 45%, transparent); }
.sr-tag.compile { color: var(--hue-drills); border-color: color-mix(in srgb, var(--hue-drills) 45%, transparent); }
.sr-tag.standalone { color: var(--hue-faq); border-color: color-mix(in srgb, var(--hue-faq) 45%, transparent); }

/* ---- the one card that leads a section ---------------------------------- */
/* The course is the deep material this site's own pages are the short form of,
   so it gets a card the width of the section rather than a third of a row. It
   is a whole-card link: no other anchor may go inside it. */

.sr-hero-card {
  display: block;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--card-bg);
  border-radius: 0 12px 12px 0;
  padding: 1.4rem 1.5rem 1.5rem;
  margin: 0 0 1rem;
  color: inherit;
  transition: border-color .12s ease;
}
.sr-hero-card:hover { text-decoration: none; border-color: var(--muted); border-left-color: var(--accent); }
.sr-hero-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: var(--accent);
  max-width: 34rem;
}
.sr-hero-card p { margin: 0 0 1rem; color: var(--muted); max-width: 44rem; }
.sr-hero-card .sr-more { display: inline-block; margin: 0; }

/* The same card at second billing: still the width of the section, but quieter
   than the one leading it — smaller heading, its own hue, and a plain <div>
   because it carries two links (deck and PDF) and an <a> cannot contain them. */
.sr-hero-card.semi {
  border-left-color: var(--hue-drills);
  padding: 1.1rem 1.2rem 1.2rem;
}
.sr-hero-card.semi h3 { font-size: 1.15rem; margin: 0 0 .35rem; color: var(--fg); }
.sr-hero-card.semi h3 a { color: var(--accent); }
.sr-hero-card.semi p { font-size: .93rem; margin-bottom: .8rem; }
.sr-hero-card.semi .sr-more { font-size: .88rem; font-weight: 600; margin: 0; }
.sr-hero-card.semi .sr-more .sep { color: var(--muted); margin: 0 .55rem; font-weight: 400; }
.sr-tag.deck {
  display: inline-block;
  color: var(--hue-drills);
  border-color: color-mix(in srgb, var(--hue-drills) 45%, transparent);
}

/* The course's own numbers, set as a row of figures rather than a sentence. */
.sr-course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 2rem;
  margin: 0 0 1.1rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--border);
}
.sr-course-stats div b {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.sr-course-stats div span { display: block; font-size: .78rem; color: var(--muted); }

/* display:inline-block because this tag sits in a block card, not a flex one —
   an inline span would drop its bottom margin. */
.sr-tag.course {
  display: inline-block;
  color: var(--hue-tour);
  border-color: color-mix(in srgb, var(--hue-tour) 45%, transparent);
}

/* ---- the interpreter stack ---------------------------------------------- */
/* This was ASCII art in a <pre>, which is exactly the kind of diagram that
   reads fine to the person who drew it and to nobody else: the arrows carried
   the meaning, the columns drifted apart on wrapping, and a screen reader got
   a wall of punctuation. Same picture, built out of real elements — one box per
   layer, the relation between them spelled out on the connector, top to bottom
   in reading order. */

.sr-stack { list-style: none; padding: 0; margin: 0 0 1.4rem; max-width: 42rem; }

.sr-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .9rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  background: var(--card-bg);
  border-radius: 0 10px 10px 0;
  padding: .65rem .9rem;
}
.sr-layer-name {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
}
.sr-layer-what { color: var(--muted); font-size: .9rem; line-height: 1.45; }

/* One hue per layer, from the palette the site bar already uses: the eye can
   then tell "which floor am I on" without reading. */
.sr-layer[data-hue="prog"]   { border-left-color: var(--hue-tour); }
.sr-layer[data-hue="prog"]   .sr-layer-name { color: var(--hue-tour); }
.sr-layer[data-hue="raku"]   { border-left-color: var(--hue-play); }
.sr-layer[data-hue="raku"]   .sr-layer-name { color: var(--hue-play); }
.sr-layer[data-hue="engine"] { border-left-color: var(--hue-drills); }
.sr-layer[data-hue="engine"] .sr-layer-name { color: var(--hue-drills); }
.sr-layer[data-hue="wasm"]   { border-left-color: var(--hue-spec); }
.sr-layer[data-hue="wasm"]   .sr-layer-name { color: var(--hue-spec); }

/* The connector: a short rule with the relation written on it, so the arrow
   never has to carry the meaning alone. */
.sr-rel {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0 .3rem .9rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.sr-rel::before {
  content: "↓";
  font-size: .95rem;
  line-height: 1;
  opacity: .75;
}

/* ---- the toolbox -------------------------------------------------------- */
/* Terminal transcripts have a fixed natural width, and in a third-of-a-row card
   they clip rather than read. So each tool takes the full section width and
   splits inside: transcript on the left, what it means on the right, stacking
   under 60rem. */

.sr-grid.one { grid-template-columns: minmax(0, 1fr); }

.sr-tool-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem 1.5rem; }
@media (min-width: 60rem) {
  .sr-tool-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.sr-tool-body p { margin: 0; }
/* Diagnostics are long lines. Wrap them the way a narrow terminal would rather
   than hiding the tail behind a scrollbar nobody drags. */
.sr-tool-body pre.native-code {
  font-size: .8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The --ansi transcript, shown as a terminal would paint it rather than as a
   line of escape codes. Class names are the SGR numbers the highlighter emits,
   so the mapping stays checkable against the real output. */
.a31 { color: #b3261e; }   /* red     — strings   */
.a32 { color: #1b7a34; }   /* green   — keywords  */
.a34 { color: #1257b0; }   /* blue    — variables */
.a36 { color: #06707d; }   /* cyan    — numbers   */
html[data-theme-active="dark"] .a31 { color: #ff7b72; }
html[data-theme-active="dark"] .a32 { color: #7ee787; }
html[data-theme-active="dark"] .a34 { color: #79c0ff; }
html[data-theme-active="dark"] .a36 { color: #56d4dd; }

/* ---- the language showcase --------------------------------------------- */

.sr-feat { margin: 0 0 2rem; }
.sr-feat + .sr-feat { padding-top: 1.8rem; border-top: 1px solid var(--border); }
.sr-feat h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.sr-feat p  { margin: 0 0 .9rem; color: var(--muted); max-width: 46rem; }
.sr-feat p code { color: var(--fg); }

/* ---- tables ------------------------------------------------------------- */

.sr-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 0 .8rem; }
.sr-table th, .sr-table td {
  text-align: left;
  padding: .5rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.sr-table th {
  background: none;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.sr-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A handful of short numbers stretched over the whole column makes the eye
   travel from label to figure across empty space. Size these to their content. */
.sr-table.narrow { width: auto; min-width: min(100%, 20rem); max-width: 34rem; }
.sr-table td.win { font-weight: 600; }
.sr-table tr:last-child td { border-bottom: 0; }

.sr-fine { font-size: .85rem; color: var(--muted); max-width: 46rem; }

/* ---- highlighting for the static samples -------------------------------- */
/* The blocks with no Run button are coloured by `rakupp --highlight --html`,
   pasted in at authoring time — so a snippet you cannot run is tokenized by the
   very same highlighter as one you can, with no JavaScript and no second
   grammar to drift. The palette is the editors' own (raku.js ships these exact
   values), so the two never disagree within a page. Class names are Pygments'. */

pre.native-code {
  --tk: #0000ff;   /* keyword  */  --tnb: #267f99;  /* builtin  */
  --tv: #001080;   /* variable */  --ts:  #a31515;  /* string   */
  --tm: #098658;   /* number   */  --tc:  #008000;  /* comment  */
}
html[data-theme-active="dark"] pre.native-code {
  --tk: #569cd6;  --tnb: #4ec9b0;
  --tv: #9cdcfe;  --ts:  #ce9178;
  --tm: #b5cea8;  --tc:  #6a9955;
}
pre.native-code .k, pre.native-code .kd, pre.native-code .kn,
pre.native-code .kp, pre.native-code .kr, pre.native-code .kt { color: var(--tk); }
pre.native-code .nb, pre.native-code .bp { color: var(--tnb); }
pre.native-code .nv, pre.native-code .vg, pre.native-code .vi, pre.native-code .vc { color: var(--tv); }
pre.native-code .s, pre.native-code .s1, pre.native-code .s2, pre.native-code .sb,
pre.native-code .sc, pre.native-code .sd, pre.native-code .sh, pre.native-code .si,
pre.native-code .sr, pre.native-code .ss, pre.native-code .sx, pre.native-code .se,
pre.native-code .dl { color: var(--ts); }
pre.native-code .mi, pre.native-code .mf, pre.native-code .mh, pre.native-code .mo,
pre.native-code .mb, pre.native-code .il, pre.native-code .m { color: var(--tm); }
pre.native-code .c, pre.native-code .c1, pre.native-code .cm, pre.native-code .cp,
pre.native-code .cs, pre.native-code .cpf { color: var(--tc); }

/* Shell transcripts are not Raku and are not coloured as if they were — only
   the prompt is stepped back, so the eye lands on the command. */
pre.native-code .sh-p { color: var(--muted); user-select: none; }

/* The Copy button copy.js injects. base.css styles `.copy-btn` itself and
   reveals it on `.native-ex:hover`, which is the spec's wrapper — this is ours.
   It stays faintly visible rather than appearing only on hover, because a touch
   screen has no hover and an invisible control is no control. */
.copy-wrap { position: relative; }
.copy-wrap .copy-btn { opacity: .45; }
.copy-wrap:hover .copy-btn,
.copy-wrap .copy-btn:focus-visible { opacity: 1; }

/* ---- code with a caption ------------------------------------------------ */

.sr-code { margin: 0 0 1rem; }
.sr-code .lbl {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 .35rem;
}

/* ---- the honest note ---------------------------------------------------- */

.sr-honest {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--card-bg);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.3rem;
}
.sr-honest p { margin: 0 0 .7rem; }
.sr-honest p:last-child { margin-bottom: 0; }

/* ---- footer ------------------------------------------------------------- */

.sr-foot {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  justify-content: space-between;
}