/*
 * The Introduction page: Canon's landing. Not part of canon.
 *
 * Quiet, at the width and in the faces of the other pages: reading sizes,
 * hairlines, small titles over their content, and the components
 * themselves as the picture, and a small playground: a button made what
 * its markup says, in a theme of the reader's choosing. Complete without
 * JavaScript. The contract check's amber is the one accent.
 */

.ref-landing {
  --l-accent: light-dark(#d97706, #f59e0b);
  --l-ground: light-dark(#fafafa, #0c0c0e);
  --l-focus: light-dark(#2563eb, #60a5fa);
  --l-teal: light-dark(#0d9488, #2dd4bf);                          /* teal-600 / teal-400: the playground's */
  --l-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.18);
  --l-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --l-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
.ref-landing :is(h1, h2, h3) { text-wrap: balance; }
.ref-landing p { text-wrap: pretty; }
.ref-l-text { max-inline-size: 34rem; margin: 0; color: var(--ref-muted); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); }
.ref-l-text + .ref-l-text { margin-block-start: 0.75rem; }
.ref-l-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.5rem 0 0; font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
.ref-l-links a { color: var(--ref-fg); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.18s; }
.ref-l-links a:hover { text-decoration-color: currentColor; }
.ref-l-install { display: inline-flex; align-items: center; gap: 0.5rem; max-inline-size: 100%; box-sizing: border-box; margin-block-start: 1.75rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border: 1px solid var(--ref-line); border-radius: 0.625rem; background-color: var(--ref-bg); }
.ref-l-install pre { min-inline-size: 0; margin: 0; overflow-x: auto; font: var(--ref-code-sm)/var(--ref-code-sm-lh) var(--l-mono); }
.ref-l-install code { padding: 0; background: none; font-size: inherit; }
.ref-l-install + .ref-l-text { margin-block-start: 1.75rem; }
/* A long install line scrolls inside its box, not the page. */
.ref-l-close > div { min-inline-size: 0; }

/* ---------------------------------------------------------------------- */
/* The first screen: the name, then working components framing the claim  */
/* ---------------------------------------------------------------------- */
.ref-l-hero { container-type: inline-size; }
.ref-l-hero h1 { margin: 0; font-size: var(--ref-heading-sm); font-weight: 600; line-height: var(--ref-heading-sm-lh); letter-spacing: -0.03em; }
/* Four by three hairline cells, the claim across the middle two. */
.ref-l-frame {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(10rem, auto);
  gap: 1px;
  margin-block-start: 2rem;
  border: 1px solid var(--ref-line);
  background-color: var(--ref-line);
}
/* Cells stretch to their row, so the lines between them stay hairlines. */
.ref-l-cell, .ref-l-claim { display: grid; place-items: center; min-inline-size: 0; box-sizing: border-box; padding: 1rem; background-color: var(--ref-bg); }
.ref-l-cell > * { max-inline-size: 100%; }
/* A search field fills its cell, to a field's width. */
.ref-l-claim { grid-column: span 2; place-content: center; gap: 0.5rem; text-align: center; }
.ref-l-claim p { margin: 0; color: var(--ref-muted); font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); }
.ref-l-claim strong { color: var(--ref-fg); font-weight: 600; }
.ref-l-keep { display: inline-block; }   /* the list breaks as a whole, never inside */
/* The frame follows its own width (the sidebar takes a share of the
   window): two columns with the claim across the top when four would
   squeeze the components, one on the narrowest. */
@container (max-width: 50rem) {
  /* Eight components, shorter: four above the claim, four below. */
  .ref-l-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(7rem, auto); }
  .ref-l-cell { order: 3; }
  .ref-l-cell:is([data-slot="1"], [data-slot="2"], [data-slot="3"], [data-slot="4"]) { order: 1; }
  .ref-l-claim { order: 2; grid-column: 1 / -1; padding-block: 1.75rem; }
  .ref-l-cell:is([data-slot="6"], [data-slot="7"]) { display: none; }
}
@container (max-width: 28rem) {
  .ref-l-frame { grid-template-columns: minmax(0, 1fr); }
  .ref-l-claim { grid-column: auto; }
}
.ref-l-wide { inline-size: min(100%, 8rem); }
/* The components act in turn (landing.js), not for the pointer: the cells
   are inert, and what a hand would show is drawn while they act: a button
   held down, the slider's value over its thumb. */
.ref-l-cell .canon-button[data-pressed] { background-color: var(--canon-theme-bg-active); }
.ref-l-cell .canon-button[data-pressed]:not([data-display="icon"]) { scale: 0.98; }
.ref-l-cell .canon-control[data-showing] > output { opacity: 1; visibility: visible; }
.ref-l-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; }

/* ---------------------------------------------------------------------- */
/* Rows: a title over its content                                         */
/* ---------------------------------------------------------------------- */
.ref-l-row { display: grid; gap: 1rem; margin-block-start: 5.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--ref-line); }
.ref-l-label h2 { margin: 0; font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------- */
/* Why Canon: a lead, then four beliefs                                    */
/* ---------------------------------------------------------------------- */
/* The lead at a size between the page's name and its text. */
.ref-l-why { margin-block-start: 4rem; padding-block-start: 0; border-block-start: 0; }
.ref-l-lead, .ref-l-titled .ref-l-label h2 { max-inline-size: 42rem; margin: 0.25rem 0 0; color: var(--ref-fg); font-size: var(--ref-text-lg); font-weight: 500; line-height: var(--ref-text-lg-lh); letter-spacing: -0.015em; }
.ref-l-beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: l-belief; }
.ref-l-beliefs li { counter-increment: l-belief; }
.ref-l-beliefs li::before { content: counter(l-belief, decimal-leading-zero); display: block; margin-block-end: 0.5rem; color: var(--l-accent); font-size: var(--ref-text-xs); line-height: var(--ref-text-xs-lh); font-weight: 600; font-variant-numeric: tabular-nums; }
.ref-l-beliefs h3 { margin: 0; font-size: var(--ref-text-md); font-weight: 600; line-height: var(--ref-text-md-lh); }
.ref-l-beliefs p { margin: 0.375rem 0 0; color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
/* Entrances (landing.js): each thing waits unseen (data-waiting) until it
   enters the window, then comes in after its turn (--d): a title's words
   line by line (--line), anything else whole. Only the way in is
   animated. */
.ref-l-word { display: inline-block; }
.ref-l-enter { transition: opacity 0.6s var(--l-ease) var(--d, 0ms), translate 0.7s var(--l-ease) var(--d, 0ms); }
.ref-l-enter[data-waiting] { opacity: 0; translate: 0 0.75rem; }
.ref-l-enter-title .ref-l-word { transition: opacity 0.7s var(--l-ease) calc(var(--d, 0ms) + var(--line, 0) * 140ms), translate 0.8s var(--l-ease) calc(var(--d, 0ms) + var(--line, 0) * 140ms); }
.ref-l-enter-title[data-waiting] .ref-l-word { opacity: 0; translate: 0 0.625rem; }
/* Already passed when it would have come in (a reload further down): in
   place at once. */
.ref-l-at-once, .ref-l-at-once * { transition: none !important; }
@media (max-width: 40rem) {
  .ref-l-beliefs { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* What it is and how it looks: a small playground                         */
/* ---------------------------------------------------------------------- */
/* A small design tool, in one window: the inspector (what the button is),
   the canvas (how the theme draws it) and, across the bottom, the editor
   (the markup). Three surfaces, the Playground's own (ref.css), told apart
   by their shade and not by lines; teal is their accent.
   The window floats a little over the page. Side by side where both fit;
   else one over the other. */
/* Sections titled as Why Canon's lead (.ref-l-titled): no rule over
   them, so more room above. */
.ref-l-titled { margin-block-start: 6rem; padding-block-start: 0; border-block-start: 0; }
/* Start keeps its rule: the page's close, set apart from what it says. */
.ref-l-close.ref-l-titled { padding-block-start: 4rem; border-block-start: 1px solid var(--ref-line); }
.ref-l-look > div { container-type: inline-size; }
.ref-l-pg {
  --ins-accent: var(--l-teal);
  --ins-h: 2rem;
  --ins-r: 0.5rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "controls preview" "source source";
  margin-block-start: 3rem;
  border-radius: 1rem;
  background-color: var(--ins-panel);
  box-shadow: 0 0 0 1px var(--ins-line), 0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.3)), 0 12px 32px -8px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
}
.ref-l-pg-controls { grid-area: controls; min-inline-size: 0; }
.ref-l-pg-controls[hidden] { display: none; }
/* The canvas: inset in the window, its own rounded well, its edge the
   theme's background against the window's. */
.ref-l-pg-preview { grid-area: preview; position: relative; display: grid; min-inline-size: 0; min-block-size: 14rem; margin: 0.5rem 0.5rem 0.5rem 0; overflow: hidden; border-radius: 0.625rem; }
.ref-l-pg > .ref-l-source { grid-area: source; }
/* Without the controls (no JavaScript), the button over its markup. */
.ref-l-pg:has(> .ref-l-pg-controls[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "source"; }
.ref-l-pg:has(> .ref-l-pg-controls[hidden]) > .ref-l-pg-preview { margin-inline-start: 0.5rem; }
@container (max-width: 50rem) {
  .ref-l-pg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "preview" "source"; }
  .ref-l-pg-preview { margin-inline-start: 0.5rem; }
}
/* "Try me", handwritten, over the window's corner, its arrow reaching in;
   further out and lower where there's room left of it (data-roomy,
   landing.js). Bobbing, as on Canon's first page; still with reduced
   motion. */
.ref-l-try { position: absolute; z-index: 1; inset-block-end: calc(100% - 1.75rem); inset-inline-start: -3rem; inline-size: 4rem; block-size: 4rem; background-color: var(--l-teal); mask: url("assets/try-me.svg") center / contain no-repeat; rotate: 6deg; animation: ref-l-try 1s ease-in-out infinite alternate; pointer-events: none; }
.ref-l-pg[data-roomy] > .ref-l-try { inset-block-end: calc(100% - 3rem); inset-inline-start: -5rem; }
.ref-l-pg:has(> .ref-l-pg-controls[hidden]) > .ref-l-try { display: none; }
@keyframes ref-l-try { to { translate: 0 0.5rem; } }

/* The inspector: the Playground's controls, a little larger; each names
   the attribute it writes, its meaning in its tooltip. */
.ref-l-pg-controls { display: grid; align-content: start; gap: 1rem; padding: 1.25rem; font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
/* The two switches side by side, each beside its name. */
.ref-l-pg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }
.ref-l-pg-pair > .ref-ins-row { grid-template-columns: auto auto; justify-content: start; column-gap: 0.625rem; }
.ref-l-pg-attr { font-family: var(--l-mono); font-size: var(--ref-text-xs); line-height: var(--ref-text-xs-lh); }
/* No meaning chosen: the emphasis pictures in the text color, as the
   theme's own accent isn't the landing's. */
.ref-l-pg:is([data-tone=""], :not([data-tone])) { --ins-tone: var(--ins-fg); }
/* The theme: its name beside its menu. */
.ref-l-pg-controls .ref-ins-row:not([data-stack], [data-switch]) { grid-template-columns: 4rem minmax(0, 1fr); }

/* The editor: the markup the controls write, recessed under them. */
.ref-l-source {
  --t-text: light-dark(#3f3f46, #d4d4d8);
  --t-punct: light-dark(#71717a, #a1a1aa);
  --t-tag: light-dark(#1d4ed8, #60a5fa);
  --t-attr: light-dark(#6d28d9, #a78bfa);
  --t-string: light-dark(#047857, #34d399);
  min-inline-size: 0;
  margin: 0;
  overflow-x: auto;
  padding: 1rem 1.25rem 1.25rem;
  border-end-start-radius: 1rem;
  border-end-end-radius: 1rem;
  background-color: var(--ins-field);
  box-shadow: inset 0 1px 0 var(--ins-line);
  color: var(--t-text);
  font: var(--ref-code-sm)/var(--ref-code-sm-lh) var(--l-mono);
}
.ref-l-source code { display: block; padding: 0; background: none; font-size: inherit; white-space: pre-wrap; }
/* The opening tag wraps between its attributes, under the first. */
.ref-l-open { display: block; padding-inline-start: 8ch; text-indent: -8ch; }
.ref-l-attr { white-space: nowrap; }
.ref-l-line { white-space: pre; }
/* The caret, as in overwrite mode: the letter just typed on a block. */
.ref-l-caret { border-radius: 1px; background-color: var(--ins-accent); color: var(--ref-bg); }
.ref-l-look[data-typing] .ref-l-pg { pointer-events: none; }
.ref-l-source .t-p { color: var(--t-punct); }
.ref-l-source .t-t { color: var(--t-tag); }
.ref-l-source .t-a { color: var(--t-attr); }
.ref-l-source .t-s { color: var(--t-string); }

/* The button alone, on the canvas: in the page without JavaScript, else
   in a page of its own with the chosen theme. */
.ref-l-host, .ref-l-view { min-block-size: 10rem; }
.ref-l-host { display: grid; place-items: center; padding: 1.5rem; }
.ref-l-view { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.ref-l-look[data-framed] .ref-l-host { display: none; }


/* ---------------------------------------------------------------------- */
/* Without JavaScript: a cell for each component                           */
/* ---------------------------------------------------------------------- */
.ref-landing [data-tier="T0"] { --l-tier: light-dark(#52525b, #a1a1aa); }   /* zinc-600 / zinc-400 */
.ref-landing [data-tier="T1"] { --l-tier: #71717a; }                           /* zinc-500 */
.ref-landing [data-tier="T2"] { --l-tier: light-dark(#a1a1aa, #52525b); }   /* zinc-400 / zinc-600 */
.ref-landing [data-tier="T3"] { --l-tier: var(--l-accent); }
/* The cells, then their key in a row under them; pointing at a tier in
   the key keeps its cells lit and dims the rest. */
.ref-l-tally { display: grid; gap: 1.5rem; margin-block-start: 2rem; }
.ref-l-squares { display: grid; grid-template-columns: repeat(34, minmax(0, 1fr)); gap: 2px; max-inline-size: 46.625rem; }
.ref-l-squares > span { block-size: 2rem; background-color: var(--l-tier); transform-origin: bottom; transition: opacity 0.5s var(--l-ease) calc(var(--d, 0ms) + var(--i) * 12ms), scale 0.7s var(--l-ease) calc(var(--d, 0ms) + var(--i) * 12ms); }
.ref-l-squares[data-waiting] > span { opacity: 0; scale: 1 0.2; }
/* After their entrance (landing.js) they change at once, without the stagger. */
.ref-l-squares[data-settled] > span { transition: background-color 0.2s; }
.ref-l-tally[data-show="T0"] .ref-l-squares > span:not([data-tier="T0"]),
.ref-l-tally[data-show="T1"] .ref-l-squares > span:not([data-tier="T1"]),
.ref-l-tally[data-show="T2"] .ref-l-squares > span:not([data-tier="T2"]),
.ref-l-tally[data-show="T3"] .ref-l-squares > span:not([data-tier="T3"]) { background-color: light-dark(#e4e4e7, #27272a); }   /* zinc-200 / zinc-800 */
/* The key: a tier each, its swatch and code, then its name over its
   count; its padding hangs out of the column, so the text lines up. */
.ref-l-key { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0 -1rem; }
.ref-l-key > div { display: grid; grid-template-columns: auto auto; column-gap: 0.5rem; align-content: start; padding: 1rem; border-radius: 0.25rem; cursor: default; transition: background-color 0.15s; }
.ref-l-key > div:hover { background-color: var(--ref-hover); }
.ref-l-key dt { display: contents; }
.ref-l-tier-name { grid-column: 2; color: var(--ref-fg); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); font-weight: 500; }
.ref-l-key dd { grid-column: 2; margin: 0; color: var(--ref-muted); font-size: var(--ref-text-xs); line-height: var(--ref-text-xs-lh); }
/* The tier's code, as the specifications write it, after its swatch. */
.ref-l-tier-code { grid-row: 1 / span 2; display: inline-flex; align-items: start; gap: 0.25rem; color: var(--ref-fg); font: 700 var(--ref-text-sm)/var(--ref-text-sm-lh) var(--l-mono); }
.ref-l-tier-code::before { content: ""; inline-size: 0.75rem; block-size: 1.5rem; background-color: var(--l-tier); }

/* ---------------------------------------------------------------------- */
/* Every component                                                         */
/* ---------------------------------------------------------------------- */
/* The names, large; the one pointed at shows above the pointer. */
.ref-l-names { margin-block-start: 1rem; font-size: var(--ref-text-lg); font-weight: 700; line-height: var(--ref-text-lg-lh); letter-spacing: -0.03em; }
/* A name never breaks across lines: it moves to the next one whole. */
.ref-l-names a { display: inline-block; color: color-mix(in srgb, var(--ref-fg) 32%, var(--ref-bg)); text-decoration: none; white-space: nowrap; transition: color 0.15s, opacity 0.5s var(--l-ease) var(--d, 0ms), translate 0.6s var(--l-ease) var(--d, 0ms); }
.ref-l-names a:not(:last-child)::after { content: "\00a0/ "; color: color-mix(in srgb, var(--ref-fg) 14%, var(--ref-bg)); font-weight: 400; }
.ref-l-names a:is(:hover, :focus-visible) { color: var(--ref-fg); }
.ref-l-names a:focus-visible { outline: 2px solid var(--l-focus); outline-offset: 2px; border-radius: 4px; }
.ref-l-peek { position: fixed; z-index: 50; inline-size: 22rem; overflow: hidden; border: 1px solid var(--ref-line); border-radius: 0.875rem; box-shadow: var(--l-shadow); pointer-events: none; }
.ref-l-peek[hidden] { display: none; }
.ref-l-peek-stage { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; padding: 1.25rem; background-color: var(--l-ground); }

/* ---------------------------------------------------------------------- */
/* Not included                                                            */
/* ---------------------------------------------------------------------- */
.ref-l-not dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem 2rem; margin: 2rem 0 0; }
.ref-l-not dt { font-size: var(--ref-text-md); line-height: var(--ref-text-md-lh); font-weight: 600; }
.ref-l-not dd { margin: 0.375rem 0 0; color: var(--ref-muted); font-size: var(--ref-text-sm); line-height: var(--ref-text-sm-lh); }
/* A mark beside each item: a check for what Canon is for, an X in an
   octagon for what it leaves to others. */
.ref-l-not dl > div { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.75rem; }
.ref-l-not dl > div::before { content: ""; grid-row: span 2; inline-size: 1.5rem; block-size: 1.5rem; background-color: var(--l-mark); mask: var(--l-mark-icon) center / contain no-repeat; }
.ref-l-not dt, .ref-l-not dd { grid-column: 2; }
.ref-l-not dt { align-self: center; }
.ref-l-not {
  --l-mark: light-dark(#dc2626, #f87171);   /* red-600 / red-400 */
  --l-mark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
}
.ref-l-for {
  --l-mark: light-dark(#16a34a, #4ade80);   /* green-600 / green-400 */
  --l-mark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
}

/* ---------------------------------------------------------------------- */
/* Narrower windows                                                        */
/* ---------------------------------------------------------------------- */
/* Wide: the sections further apart, the names at heading size. */
@media (min-width: 64rem) {
  .ref-l-why { margin-block-start: 6.5rem; }
  .ref-l-titled { margin-block-start: 8.5rem; }
  .ref-l-names { font-size: var(--ref-heading-sm); line-height: var(--ref-heading-sm-lh); }
}
@media (max-width: 48rem) {
  .ref-l-try { display: none; }
  .ref-l-pg { margin-block-start: 1.75rem; }
  .ref-l-squares { grid-template-columns: repeat(17, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-l-try { animation: none; }
  .ref-l-squares > span, .ref-l-names a, .ref-l-enter, .ref-l-enter-title .ref-l-word { transition: none; }
}