/*
 * The Theme Kit in Nocturne's look. The kit (themes/_shared/assets/css/kit.css) draws every block the theme has no
 * template for, and every module section; this file sets its tokens, linked after kit.css, so the values here win.
 * Change the look here first: the tokens reach every block at once, a rule for one kit class reaches one part.
 *
 * Nocturne is a dark room with one lamp: headings in condensed capitals, small labels spaced wide, fine lines, and the
 * accent kept for what is live (the play button, the track that plays, the link under the pointer).
 *
 * Rules for this file: it loads nothing, no picture, font or address of any kind (the kit inlines it into module
 * previews; kit_components.test.php fails for one, and also for these words written in a comment);
 * colours only through the palette tokens the kit already reads (--text-primary, --surface, --primary, ...) or
 * color-mix() of them; weights only through the layout's --nocturne-heading-weight and --nocturne-body-strong.
 *
 * --kit-radius and --kit-button-radius are repeated in this theme's line of the shared button table
 * (themes/_shared/assets/css/resilience.css, --chrome-radius and --chrome-button-radius) so the cookie notice and the
 * phone action bar match the theme's own cards and buttons: theme-chrome.test.mjs compares the two. Change both.
 */

.kit-root {
  --kit-radius: 0.5rem;
  --kit-radius-sm: 0.375rem;
  --kit-button-radius: 0.375rem;
  --kit-input-radius: 0.375rem;
  --kit-media-radius: 0.5rem;
  --kit-heading-weight: var(--nocturne-heading-weight, 700);
  --kit-heading-tracking: 0.012em;
  --kit-heading-transform: uppercase;
  --kit-button-weight: var(--nocturne-body-strong, 600);
  --kit-button-transform: uppercase;
  --kit-button-tracking: 0.06em;
  --kit-eyebrow-tracking: 0.16em;
  --kit-focus: var(--accent-ink, #ff7a5c);
  --kit-star: var(--accent-ink, #ff7a5c);
  --kit-card-pad: clamp(1.25rem, 2.2vw, 1.75rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 4vw, 3.25rem);
  --kit-gutter: clamp(1rem, 4vw, 2rem);
  --kit-width-normal: 78rem;
  --kit-width-narrow: 48rem;
  --kit-width-wide: 78rem;
  --kit-pad-normal: clamp(4rem, 2.75rem + 5vw, 7.5rem);
  --kit-pad-compact: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  --kit-pad-spacious: clamp(5rem, 3rem + 7vw, 9.5rem);
  --kit-measure: 62ch;
  /* No drop shadows in a dark room: a card that leads somewhere is ringed by the accent and lit from beneath. */
  --kit-shadow: none;
  --kit-shadow-hover: 0 0 0 1px var(--accent, #ff4d2e), 0 22px 44px -26px color-mix(in srgb, var(--accent, #ff4d2e) 70%, transparent);
}

/* Headings: the heading face in capitals, set large. Every condensed face is brought to the same width of capital by
   --nocturne-scale (the layout names the face on <body>, theme.css holds the table); without it the size is the plain one.
   Sizes are set for ordinary words at 320 px; the shared script is only the net for a long word (THEME_DEVELOPMENT.md,
   rule 1). The line height leaves room for the marks above capitals (Š, Ž, Ė, Ū). */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.08;
  text-wrap: balance;
}

/* The kit's own page heading stands in half the page in a hero with a form and on a slide: it is set smaller than the
   theme's opening (theme.css), so that a fourteen-letter word still fits its column at 1024 px. */
.kit-heading--1 {
  font-size: calc(clamp(2.5rem, 1.5rem + 4.4vw, 5rem) * var(--nocturne-scale, 1));
  line-height: 1.04;
}

.kit-heading--2 {
  font-size: calc(clamp(2rem, 1.35rem + 3vw, 4rem) * var(--nocturne-scale, 1));
}

.kit-heading--3 {
  font-size: calc(clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem) * var(--nocturne-scale, 1));
  line-height: 1.14;
  letter-spacing: 0.02em;
}

.kit-text--lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
}

/* A small button (a row of review links, Next under a list of posts) is still 40 px tall: the kit's own 36 px is under
   what a thumb needs on a phone (verify-theme-stress.mjs, button-small). */
.kit-button {
  font-size: 0.8125rem;
}

.kit-button--small {
  min-height: 2.5rem;
}

/* Figures (stats_counter, a plan's price) in the heading face, never in capitals (a unit such as m² keeps its case). Five
   statistics stand in a row of about 200 px each from 1200 px: "1500 m²" must stay on one line there. */
.kit-stat__value {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.35rem + 1.7vw, 2.75rem) * var(--nocturne-scale, 1));
  font-weight: var(--nocturne-heading-weight, 700);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.kit-stat__label {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Small labels above headings: the accent's readable shade, spaced wide, after a short line like the lead-in of a tape. */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--accent-ink, #ff7a5c);
  font-size: 0.75rem;
  font-weight: var(--nocturne-body-strong, 600);
  text-transform: uppercase;
}

.kit-eyebrow::before {
  content: "";
  flex: none;
  inline-size: 1.5rem;
  block-size: 1px;
  background: currentColor;
}

/* A quotation: the words a little larger, the name small and spaced like a credit. */
.kit-quote__text {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

.kit-quote__author {
  font-size: 0.8125rem;
  font-weight: var(--nocturne-body-strong, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The audio player is this theme's instrument. Play is the lamp: a larger button in the accent. The position line is
   drawn as the ticks of a timeline that light up as the recording plays, with a thin playhead in place of a knob, and the
   track that plays is marked by a bar of the accent at its left. */
.kit-audio {
  --kit-audio-pad: clamp(1.125rem, 4vw, 1.75rem);
}

.kit-audio__play {
  inline-size: 3.75rem;
  block-size: 3.75rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--accent, #ff4d2e) 16%, transparent);
}

.kit-audio.is-playing .kit-audio__play {
  box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--accent, #ff4d2e) 30%, transparent), 0 0 2.25rem color-mix(in srgb, var(--accent, #ff4d2e) 55%, transparent);
}

.kit-audio__title {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem) * var(--nocturne-scale, 1));
  font-weight: var(--nocturne-heading-weight, 700);
  letter-spacing: 0.02em;
  line-height: 1.14;
  text-transform: uppercase;
}

.kit-audio__seek::-webkit-slider-runnable-track {
  block-size: 1.125rem;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, var(--kit-surface) 2px 5px),
    linear-gradient(to right, var(--accent, #ff4d2e) var(--kit-audio-played), color-mix(in srgb, var(--text-primary, #f3f1ea) 30%, transparent) var(--kit-audio-played));
}

.kit-audio__seek::-moz-range-track {
  block-size: 1.125rem;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, var(--kit-surface) 2px 5px),
    linear-gradient(to right, var(--accent, #ff4d2e) var(--kit-audio-played), color-mix(in srgb, var(--text-primary, #f3f1ea) 30%, transparent) var(--kit-audio-played));
}

.kit-audio__seek::-webkit-slider-thumb {
  inline-size: 0.1875rem;
  block-size: 1.75rem;
  margin-block-start: -0.3125rem;
  border-radius: 0;
  background: var(--text-primary, #f3f1ea);
}

.kit-audio__seek::-moz-range-thumb {
  inline-size: 0.1875rem;
  block-size: 1.75rem;
  border-radius: 0;
  background: var(--text-primary, #f3f1ea);
}

.kit-audio__time,
.kit-audio__track-time,
.kit-audio__mark {
  letter-spacing: 0.06em;
}

.kit-audio__track.is-current .kit-audio__row {
  box-shadow: inset 0.1875rem 0 0 var(--accent, #ff4d2e);
  background: color-mix(in srgb, var(--accent, #ff4d2e) 9%, transparent);
}

.kit-audio__track.is-current .kit-audio__track-title {
  color: var(--kit-text);
}

/* A card's title: the heading face in capitals, large enough to be read as a title beside a body line. */
.kit-card__title {
  font-size: calc(clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem) * var(--nocturne-scale, 1));
  letter-spacing: 0.02em;
  line-height: 1.14;
  text-transform: uppercase;
}

/* A quotation is spoken, not titled: the body face, upright, and under it the name spaced like a credit with the role
   in plain words. */
.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-style: normal;
}

.kit-quote__role {
  letter-spacing: 0;
  text-transform: none;
}