/* clock-studio.css — the /stuff/ "clock" card's own configurator chrome.

   Two jobs, kept apart:

   1. Shell rendering for the four shells khushin.com's own base.css never
      needed (bare/odometer/dial/strata — base.css only tunes "rail", the one
      the masthead runs). This is since-clock.css's structural CSS
      (~/Dev/since-clock/since-clock.css, also published verbatim at
      /clock.css for a stranger to fetch) with every selector scoped under
      .cs__stage, so it can never repaint the masthead's own rail clock, which
      shares the same bare class names globally. The colour/size custom
      properties are the studio's controls; nothing here hardcodes one.
   2. The console's own chrome — rows, chips, swatches, code panel — in the
      site's neutral paper/ink tokens (base.css :root), light and dark alike.
      The clock's own palette is the product being configured and is the only
      thing here allowed to carry colour.
*/

/* ---------- 1. shell rendering, scoped ---------- */

.cs__stage [data-since] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-family: var(--since-family, inherit);
  font-weight: var(--since-weight, inherit);
}
.cs__stage [data-since-live='on'][data-since-shell='bare'],
.cs__stage [data-since-live='on'][data-since-shell='rail'],
.cs__stage [data-since-live='on']:not([data-since-shell]) {
  border-bottom: 1px solid var(--since-rule, currentColor);
  padding-bottom: 0.1em;
}
.cs__stage .since {
  display: inline-flex;
  align-items: baseline;
  gap: var(--since-gap, 0.35em);
  white-space: nowrap;
  font-size: var(--since-size, 1em);
  color: var(--since-ink, currentColor);
}
.cs__stage .since__text { font-variant-numeric: tabular-nums; }
.cs__stage .since__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}
.cs__stage .since-beat {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--since-accent, currentColor);
  opacity: 0.7;
}
.cs__stage .since-wheel {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 2.1ch;
  height: 1.5em;
  vertical-align: -0.25em;
  font-variant-numeric: tabular-nums;
  mask-image: linear-gradient(to bottom, transparent 0%, black 38%, black 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 38%, black 62%, transparent 100%);
}
.cs__stage .since-wheel__strip { display: block; will-change: transform; }
.cs__stage .since-wheel__row { display: block; height: 1em; line-height: 1; text-align: center; }
.cs__stage .since-wheel--odometer { width: 2.3ch; }
.cs__stage .since-wheel__col {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  min-width: 1.6ch;
  text-align: center;
}
.cs__stage .since-wheel__cur, .cs__stage .since-wheel__ghost { display: block; position: relative; }
.cs__stage .since-wheel__ghost { position: absolute; inset: 0; }
.cs__stage .since__sep { opacity: var(--since-dim, 0.55); margin-inline: -0.1em; }
.cs__stage .since__sep::before { content: ':'; }
.cs__stage .since--dial { position: relative; display: inline-grid; place-items: center; }
.cs__stage .since-dial { grid-area: 1 / 1; width: 2.6em; height: 2.6em; transform: rotate(-90deg); }
.cs__stage .since-dial__track {
  fill: none;
  stroke: var(--since-track, color-mix(in srgb, currentColor 14%, transparent));
  stroke-width: 2.4;
}
.cs__stage .since-dial__sweep {
  fill: none;
  stroke: var(--since-accent, currentColor);
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--since-duration, 300ms) var(--since-ease, ease);
}
.cs__stage .since-dial__text {
  grid-area: 1 / 1;
  font-size: 0.34em;
  text-align: center;
  line-height: 1.1;
  white-space: normal;
  max-width: 2.1em;
}
.cs__stage .since--dial .since-beat { position: absolute; bottom: -0.2em; }
.cs__stage .since--strata {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18em;
  min-width: 8em;
}
.cs__stage .since-strata__head { font-variant-numeric: tabular-nums; }
.cs__stage .since-strata__row { display: flex; align-items: center; gap: 0.4em; }
.cs__stage .since-strata__label { font-size: 0.75em; opacity: var(--since-dim, 0.55); width: 1ch; }
.cs__stage .since-strata__track {
  flex: 1;
  height: 0.4em;
  border-radius: var(--since-radius, 0.2em);
  background: var(--since-track, color-mix(in srgb, currentColor 12%, transparent));
  overflow: hidden;
}
.cs__stage .since-strata__fill {
  display: block;
  height: 100%;
  background: var(--since-accent, currentColor);
  border-radius: inherit;
  transition: width var(--since-duration, 300ms) var(--since-ease, ease);
}
.cs__stage .since--strata .since-beat { align-self: flex-start; margin-top: 0.1em; }
.cs__stage [data-since-hover='reveal'] { cursor: default; }
.cs__stage .since.is-revealing > :not(.since-reveal) { opacity: 0.15; }
.cs__stage .since-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity var(--since-duration, 300ms) var(--since-ease, ease);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cs__stage .since-reveal.is-active { opacity: 1; }
.cs__stage [data-since-hover='scrub'] { cursor: ew-resize; touch-action: none; }
.cs__stage [data-since-hover='scrub']:focus-visible { outline-offset: 3px; }

@keyframes cs-since-rise {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.cs__stage .since-mount { animation: cs-since-rise 520ms var(--since-ease, ease) both; }

@media (prefers-reduced-motion: reduce) {
  .cs__stage .since-wheel__strip,
  .cs__stage .since-dial__sweep,
  .cs__stage .since-strata__fill { transition: none; }
  .cs__stage .since-mount { animation: none; }
}
html[data-motion='reduced'] .cs__stage .since-dial__sweep,
html[data-motion='reduced'] .cs__stage .since-strata__fill,
html[data-motion='reduced'] .cs__stage .since-reveal { transition: none; }
html[data-motion='reduced'] .cs__stage .since-mount { animation: none; }

/* ---------- 2. console chrome, neutral greys only ---------- */

/* Every control has a fixed box: a pressed chip changes colour, never size. */
.cs__row { display: flex; align-items: center; gap: 0.6rem; min-height: 1.9rem; }
.cs__row label {
  flex: 0 0 3.6rem;
  font: 600 0.66rem/1.1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
.cs__chip {
  min-height: 1.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--hairline-2);
  border-radius: 99px;
  background: var(--paper-raise);
  color: var(--ink-2);
  font: 500 0.78rem/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.cs__chip:hover { border-color: var(--ink-3); color: var(--ink); }
.cs__chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cs__range { flex: 1 1 auto; accent-color: var(--ink); min-width: 0; margin: 0; }
.cs__swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--paper-raise);
  box-shadow: 0 0 0 1px var(--hairline-2);
  cursor: pointer;
  padding: 0;
}
.cs__swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--ink); }
.cs__color { width: 1.9rem; height: 1.5rem; padding: 0; border: 1px solid var(--hairline-2); border-radius: 5px; background: none; cursor: pointer; }
.cs__datetime {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  background: var(--paper-raise);
  color: var(--ink);
  font: 400 0.78rem/1 var(--mono);
}

.cs__code {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  font: 400 0.66rem/1.5 var(--mono);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Look / Count / Take it, shown below 72rem. */
.cs__tabs button {
  flex: 1 1 0;
  min-height: 2rem;
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  background: var(--paper-raise);
  color: var(--ink-2);
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cs__tabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Take it: one way per row, what to do on the left, the button on the right. */
.cs__where { display: grid; gap: 0.6rem; align-content: start; }
.cs__where[hidden] { display: none; }
.cs__where > .cs__chip { justify-self: start; }
.cs__way { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cs__way p, .cs__note { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }
.cs__way b { color: var(--ink); font-weight: 600; }
.cs__way a:not(.cs__chip) { color: inherit; }
.cs__way .cs__chip { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.cs__note { color: var(--ink-3); font-size: 0.74rem; }