/* ===========================================================================
   ROCKJAW LIVE Planner -- run sheets and show diary for TikTok LIVE.
   Theme: CEOdeck "Daylight" (see tokens.css, which this file imports through
   the <link> pair in every template). Hand-written, no framework, no CDN,
   no webfont.

   PROVENANCE. Everything under "ESTATE CHASSIS" is lifted from
     /Users/sach/cortexia/workspace/marketplace_pricer/static/app.css
   with values unchanged, so a person who has used Ladder or the Email Library
   already knows how a control, a notice and a table behave here. Ladder's
   own instruments (.ladder, .waterfall, .chan, .price-*) are NOT copied --
   dead CSS for components this tool does not have would be pure weight.

   The signature element is .spine: one vertical MINUTES-ON-AIR axis, drawn to
   scale, on which every segment of the 90-minute show sits in the same
   measured space. A 15-minute flash sale is visibly three times the height of
   a 5-minute framing block, because on air that is exactly what it is. This
   is the same grammar as Ladder's vertical price axis; the quantity is time.

   No inline style attributes anywhere. Proportional heights come from a
   precomputed .dur-N utility ladder at the end of this file, NOT from
   style="height:..", because these pages ship `style-src 'self'` with no
   nonce and no 'unsafe-inline'.
   =========================================================================== */

/* ===========================================================================
   ESTATE CHASSIS
   =========================================================================== */

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* ---- base -------------------------------------------------------------- */
body {
  background: var(--ground);
  color: var(--ink-2);
  font: var(--fs-base)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--edge-strong); }
a:hover { text-decoration-color: var(--brass); }

/* No border-radius here: it would overwrite each element's own corner radius
   for as long as it holds focus. Outlines already follow the shape. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  z-index: var(--z-skip);
  background: var(--brass); color: var(--ground);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Pinned left/top on purpose: an unpinned .sr-only resolves to its static
   position and can widen the document inside a scrolling region. */
.sr-only {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- masthead ---------------------------------------------------------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-end;
  justify-content: space-between;
  padding-block: var(--sp-6) var(--sp-5);
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
  border-bottom: 1px solid var(--edge);
  background: var(--ground);
  animation: rise var(--dur-3) var(--ease) both;
}
.masthead__id { display: flex; flex-direction: column; gap: var(--sp-3); }
.masthead__tail {
  display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap;
}
.masthead__note { font-size: var(--fs-sm); color: var(--ink-3); max-width: 34ch; }

/* ---- family lockup ----------------------------------------------------- */
.eyebrow, .slate {
  margin: 0;
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.lockup { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.mark { display: block; flex: none; color: var(--brass); width: 2rem; height: 2rem; }
.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-1);
  text-decoration: none;
}
.wordmark .wm-a { font-weight: 300; color: var(--ink-2); }
.wordmark .wm-b { font-weight: 700; color: var(--ink-1); }
.lockup a {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; text-decoration: none;
  transition: opacity var(--dur-1) var(--ease);
}
.lockup a:hover { opacity: 0.86; }
.wordmark--gate { font-size: var(--fs-display); }

/* ---- shared small pieces ----------------------------------------------- */
.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--edge-strong);
  transition: color var(--dur-1) var(--ease),
              text-decoration-color var(--dur-1) var(--ease);
}
.link-quiet:hover { color: var(--ink-1); text-decoration-color: var(--brass); }

.fig { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-block: var(--sp-6) var(--sp-8);
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
}
@media (min-width: 60rem) {
  .wrap {
    padding-left: max(var(--sp-7), env(safe-area-inset-left));
    padding-right: max(var(--sp-7), env(safe-area-inset-right));
  }
  .masthead {
    padding-left: max(var(--sp-7), env(safe-area-inset-left));
    padding-right: max(var(--sp-7), env(safe-area-inset-right));
  }
}

h1, h2, h3, .empty__head, .panel__head { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* ---- the panel: outer tray, inner core --------------------------------- */
.panel {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-xl);
  padding: calc(var(--bezel) + var(--sp-5));
  box-shadow: var(--lift-2);
}
.panel::before {
  content: "";
  position: absolute; inset: var(--bezel);
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: var(--surface-2);
  box-shadow: var(--lift-1);
  z-index: var(--z-base);
  pointer-events: none;
}
.panel > * { position: relative; z-index: var(--z-content); }

.panel__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink-1);
}
.panel__lede {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: var(--measure-tight);
  margin-top: var(--sp-1);
}

.section-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--edge);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-1);
}

.note { font-size: var(--fs-sm); color: var(--ink-3); max-width: var(--measure); }
.note + .note { margin-top: var(--sp-2); }

/* ---- form -------------------------------------------------------------- */
.setup { margin-bottom: var(--sp-6); }

.fset { border-top: 1px solid var(--edge-strong); padding-top: var(--sp-4); }
.fset legend { display: contents; }
.fset__title {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: var(--sp-4);
}

.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.field--wide { grid-column: 1 / -1; }

.field label,
.field > label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}
.gate__form .field label {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.field__hint {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-3);
  margin-top: var(--sp-2);
  line-height: 1.45;
}

.control {
  width: 100%;
  background: var(--ground);
  color: var(--ink-1);
  border: 1px solid var(--edge-control);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font: var(--fs-base)/1.4 var(--font-sans);
  min-height: 3rem;
  transition: border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
input.control[type="number"],
input.control[type="date"],
input.control[type="time"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.control:hover { border-color: var(--ink-3); }
.control::placeholder { color: var(--ink-3); }
select.control {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
textarea.control { min-height: 6rem; resize: vertical; line-height: 1.5; }
.control[aria-invalid="true"] { border-color: var(--stop-line); }

.field-error { display: block; font-size: var(--fs-sm); color: var(--stop); margin-top: var(--sp-2); }

.actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge);
}
.actions--tight { margin-block: var(--sp-4); border-top: 0; padding-top: 0; }

.fields--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
  margin-bottom: var(--sp-5);
}
.fields--inline .field { flex: 0 0 auto; }
.field--action { align-self: flex-end; padding-bottom: 0; }

/* ---- island buttons with a nested trailing pip ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 3rem;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-control);
  background: var(--surface-3);
  color: var(--ink-1);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); transform: translateY(-1px); }
.btn:active { background: var(--surface-1); transform: translateY(0) scale(0.99); }
.btn[disabled] {
  cursor: not-allowed;
  color: var(--ink-3);
  background: var(--surface-1);
  border-color: var(--edge);
  transform: none;
}
.btn--go { background: var(--brass); color: var(--ground); border-color: var(--brass); }
.btn--pip { padding-right: var(--sp-3); }
.btn--go:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--ground); }
.btn--go:active { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn--go[disabled] { background: var(--surface-2); border-color: var(--edge); color: var(--ink-3); }
.btn--quiet { background: transparent; }
.btn--quiet:hover { background: var(--surface-3); }
.btn--small { min-height: 44px; font-size: var(--fs-sm); padding: 0 var(--sp-4); }

.btn__pip {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.20);
  transition: transform var(--dur-1) var(--ease);
}
.btn__pip svg { width: 1rem; height: 1rem; }
.btn:hover .btn__pip { transform: translateX(2px); }

/* ---- readings (small stat readouts) ------------------------------------ */
.readings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (max-width: 460px) {
  .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readings > :nth-child(3) { grid-column: 1 / -1; }
}
.reading { border-top: 1px solid var(--edge); padding-top: var(--sp-3); }
.reading__label {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.reading__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  margin-top: var(--sp-1);
}
.reading__sub { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--sp-1); }

/* ---- data tables ------------------------------------------------------- */
.tbl-scroll {
  overflow-x: auto;
  margin-top: var(--sp-5);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--lift-1);
}
.tbl { width: 100%; font-size: var(--fs-sm); }
.tbl caption {
  text-align: left;
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--sp-3);
}
.tbl th, .tbl td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
.tbl th {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  color: var(--ink-2);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}
.tbl td.num, .tbl th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  white-space: nowrap;
  padding-right: 0;
}
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--surface-1); }

/* ---- disclosure -------------------------------------------------------- */
.workings summary {
  cursor: pointer;
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style-position: outside;
  transition: color var(--dur-1) var(--ease);
}
.workings summary:hover { color: var(--brass-deep); }
.workings summary::marker { color: var(--ink-3); }
.workings summary::before {
  content: "";
  width: 0.5rem; height: 0.5rem; flex: none;
  margin-right: var(--sp-3);
  border-right: 1.5px solid var(--edge-control);
  border-bottom: 1.5px solid var(--edge-control);
  transform: rotate(-45deg);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.workings summary:hover::before { border-color: var(--brass-deep); }
.workings[open] summary::before { transform: rotate(45deg); }
.workings[open] summary { border-bottom: 1px solid var(--edge); margin-bottom: var(--sp-4); }

/* ---- provenance strip -------------------------------------------------- */
.strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--edge);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}
.strip__item { display: flex; flex-direction: column; gap: var(--sp-1); }
.strip__key {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.strip__val { color: var(--ink-1); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.strip__val--words { font-family: var(--font-sans); }

/* ---- notices: a dot and a label, never colour alone -------------------- */
.notice {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
  max-width: var(--measure);
  background: var(--surface-1);
  color: var(--ink-2);
}
.notice::before {
  content: "";
  position: absolute; left: var(--sp-4); top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
}
.notice--warn { background: var(--timed-wash); color: var(--timed); border-color: oklch(0.540 0.150 68 / 0.45); }
.notice--warn::before { background: var(--timed); }
.notice--stop { background: var(--stop-wash); color: var(--stop); border-color: oklch(0.553 0.225 27.3 / 0.5); }
.notice--stop::before { background: var(--stop-line); }
.notice--ok { background: var(--go-wash); color: var(--go); border-color: oklch(0.551 0.170 145.7 / 0.5); }
.notice--ok::before { background: var(--go); }
.notice--quiet { color: var(--ink-3); background: transparent; }
.notice p + p { margin-top: var(--sp-2); }
.notice a { color: inherit; }

.caveats { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.caveats li {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  padding-left: var(--sp-5);
  position: relative;
  max-width: var(--measure);
}

/* "Things worth saying" is a list the host READS, not a footnote. At caption
   size in the lightest ink it was quieter than the small print beside it,
   which inverted the hierarchy: the thing you say on air outranks the thing
   you glance at. Body size, secondary ink, more air between lines. */
.caveats--read { gap: var(--sp-3); }
.caveats--read li {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-2);
}
.caveats--read li::before { top: 0.72em; background: var(--edge-control); }
.caveats li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 1px;
  background: var(--edge-strong);
}

/* ---- empty + loading states -------------------------------------------- */
.empty {
  border: 1px dashed var(--edge-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  text-align: left;
  background:
    radial-gradient(42rem 22rem at 12% -20%, oklch(0.958 0.017 256.3 / 0.55), transparent 60%),
    var(--surface-1);
}
.empty__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--ink-1);
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 26ch;
}
.empty__body { margin-top: var(--sp-3); color: var(--ink-3); font-size: var(--fs-base); max-width: var(--measure-tight); }
.empty__body b { color: var(--ink-2); font-weight: 600; }
.empty__act { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hidden { display: none !important; }

/* ---- tab bar ----------------------------------------------------------- */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--edge); margin-bottom: var(--sp-6); }
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--sp-3) var(--sp-5);
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-3);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--ink-1); }
.tab-btn--active { color: var(--ink-1); font-weight: 600; border-bottom-color: var(--brass); }

/* ---- login gate -------------------------------------------------------- */
.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
  background: radial-gradient(58rem 42rem at 18% -6%, oklch(0.958 0.017 256.3 / 0.8), transparent 62%), var(--surface-1);
}
.gate__card {
  width: 100%;
  max-width: 27rem;
  background: var(--surface-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-xl);
  padding: var(--bezel);
  box-shadow: var(--lift-3);
  animation: rise var(--dur-3) var(--ease) both;
}
.gate__core {
  background: var(--surface-2);
  border-radius: calc(var(--r-xl) - var(--bezel));
  box-shadow: var(--lift-1);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}
.gate__card .lockup { margin-block: var(--sp-4) var(--sp-5); }
.gate__card .mark { width: 2.6rem; height: 2.6rem; }
.gate__card .notice { margin-top: var(--sp-5); }
.gate__form { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
.gate__form .btn { width: 100%; }
.fineprint { margin: var(--sp-5) 0 0; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.link-home { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; }
.link-home svg { flex: none; }


/* ===========================================================================
   ROCKJAW COMPONENTS
   =========================================================================== */

/* ---- top navigation ----------------------------------------------------
   Three destinations, so a tab bar rather than a menu: the creator should be
   able to see all of them without opening anything. Marked by weight AND an
   underscore, never colour alone. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--edge);
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
@media (min-width: 60rem) {
  .nav {
    padding-left: max(var(--sp-7), env(safe-area-inset-left));
    padding-right: max(var(--sp-7), env(safe-area-inset-right));
  }
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fs-base);
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--ink-1); }
.nav__link[aria-current="page"] {
  color: var(--ink-1);
  font-weight: 600;
  border-bottom-color: var(--brass);
}

/* ---- stack: the only vertical-rhythm utility in the file --------------- */
.stack > * + * { margin-top: var(--sp-5); }
.stack-tight > * + * { margin-top: var(--sp-3); }

/* ---- generator controls ------------------------------------------------
   The three inputs sit on one row and the actions sit under them. An earlier
   pass put the fields in a 20rem column beside the buttons, which squeezed two
   selects until their own option text truncated ("Straight fr") while two
   thirds of the row stood empty. Fields get the full measure; the buttons get
   their own line, which is also where the eye expects the last step to be. */
.gen { display: block; }
.gen__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 62rem) {
  .gen__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gen__fields > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .gen__fields { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
.gen__go {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--edge);
}

/* ---- the SHOW HEAD: theme, hook, start ---------------------------------
   The hook is the single most important string on the page: it is the first
   sentence the creator says out loud. It is set at display size and given the
   whole measure, because they read it off the screen while looking up. */
.show {
  background: var(--surface-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-xl);
  padding: var(--bezel);
  box-shadow: var(--lift-3);
}
.show__core {
  background: var(--surface-2);
  border-radius: calc(var(--r-xl) - var(--bezel));
  box-shadow: var(--lift-1);
  padding: var(--sp-6);
}
.show__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.show__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  max-width: 24ch;
}
.show__hooklabel {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  display: block;
}
.show__hook {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--ink-1);
  max-width: 44ch;
  border-left: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
}
.show__offer { margin-top: var(--sp-5); }

/* ---- pills: a format, a flavour, a mechanic ---------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4);
  font: 500 var(--fs-micro)/1.8 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  border: 1px solid var(--edge);
  background: var(--ground);
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 100%;
}
/* Mechanic names are long ("LIVE GIVEAWAY, FOLLOW-GATED (NATIVE)") and the
   tracked uppercase mono that makes them scannable also makes them wide. On a
   phone, nowrap pushed them straight out through the side of the segment card.
   Below 46rem they wrap instead: two short lines beat one clipped one. */
@media (max-width: 46rem) {
  .pill {
    white-space: normal;
    line-height: 1.45;
    letter-spacing: 0.08em;
    padding: var(--sp-1) var(--sp-3);
  }
}
.pill--timed { background: var(--timed-wash); color: var(--timed); border-color: oklch(0.540 0.150 68 / 0.45); }
.pill--go { background: var(--go-wash); color: var(--go); border-color: oklch(0.551 0.170 145.7 / 0.45); }
.pill--stop { background: var(--stop-wash); color: var(--stop); border-color: oklch(0.553 0.225 27.3 / 0.45); }
.pill--brand { background: var(--brass-veil); color: var(--brass-deep); border-color: oklch(0.563 0.193 256.2 / 0.35); }

/* ---- product cards ----------------------------------------------------- */
.prods { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 46rem) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}
.prod__role {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.prod__name { font-weight: 600; color: var(--ink-1); letter-spacing: -0.015em; line-height: 1.3; }
.prod__meta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.prod__why { font-size: var(--fs-sm); color: var(--ink-3); }

/* ===========================================================================
   SIGNATURE: the run-sheet spine.
   One vertical MINUTES-ON-AIR axis. Segment height is proportional to its real
   duration via the .dur-N ladder at the foot of this file, so the shape of the
   column IS the shape of the show.
   =========================================================================== */
.spine { margin-top: var(--sp-5); }

.spine__row {
  display: grid;
  grid-template-columns: 4.5rem 1px minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: stretch;
}
/* On a phone the clock column narrows but never collapses: the minute marker
   is the whole reason this is a spine and not a list. */
@media (max-width: 30rem) {
  .spine__row { grid-template-columns: 3.4rem 1px minmax(0, 1fr); column-gap: var(--sp-3); }
}

.spine__clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-clock);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  text-align: right;
  padding-top: var(--sp-3);
  line-height: 1.2;
}
.spine__dur {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--track-micro);
  color: var(--ink-3);
  text-transform: uppercase;
}

/* The rail itself. A 1px column with a node at each segment boundary. The node
   is drawn by ::before so no extra element is needed per row. */
.spine__rail { position: relative; background: var(--spine); }
.spine__row:first-child .spine__rail { background: linear-gradient(to bottom, transparent 0 1.15rem, var(--spine) 1.15rem); }
.spine__row:last-child .spine__rail { background: linear-gradient(to bottom, var(--spine) 0 1.4rem, transparent 1.4rem); }
.spine__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.15rem;
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--spine);
}
/* A segment that runs a timed mechanic gets a filled amber node, so the two
   flash sales are findable at a glance without reading a word. */
.spine__row--timed .spine__rail::before { background: var(--timed); border-color: var(--timed); }

.seg {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  /* Proportional-to-duration floor comes from .dur-N; content may exceed it,
     never undercut it. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.seg--timed { background: var(--timed-wash); border-color: oklch(0.540 0.150 68 / 0.35); }

.seg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.seg__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  flex: none;
}
.seg__label {
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.015em;
  color: var(--ink-1);
}
.seg__pin, .seg__say { font-size: var(--fs-sm); line-height: 1.5; }
.seg__pin { color: var(--ink-2); }
.seg__pin b { color: var(--ink-1); font-weight: 600; }

/* The call-to-action cadence changes per block (45s in a flash sale, 120s in
   the Q&A), so it has to be stated per block -- but stated as a full sentence
   it was eleven near-identical lines down the sheet, which is how a run sheet
   stops being scannable. Same information, set as a meter. */
.seg__meta {
  margin-top: auto;
  padding-top: var(--sp-2);
  font: 500 var(--fs-micro)/1.5 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.seg__say {
  color: var(--ink-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--edge);
}
.seg__say::before {
  content: "Say";
  display: block;
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}

/* ---- claim guardrail --------------------------------------------------- */
.guard {
  border: 1px solid oklch(0.553 0.225 27.3 / 0.5);
  border-radius: var(--r-lg);
  background: var(--stop-wash);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.guard__head {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  color: var(--stop);
}
.guard__head::before {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: var(--stop-line);
}
.guard__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
@media (min-width: 52rem) { .guard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guard__label {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
  display: block;
}
.guard__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.guard__word {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ground);
  border: 1px solid oklch(0.553 0.225 27.3 / 0.35);
  color: var(--stop);
  /* Struck through as well as red: state is never carried by colour alone. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.guard__word--ok {
  border-color: oklch(0.551 0.170 145.7 / 0.4);
  color: var(--go);
  text-decoration: none;
}
.guard__note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-4); max-width: var(--measure); }

/* ---- CTA cadence ------------------------------------------------------- */
.cues { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.cue {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--edge);
}
.cue:last-child { border-bottom: 0; }
.cue__at {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: right;
}
.cue__line { color: var(--ink-1); line-height: 1.5; }
@media (max-width: 30rem) {
  .cue { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .cue__at { text-align: left; }
}

/* ===========================================================================
   PLANNER
   =========================================================================== */
.plan-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.plan-nav { display: flex; align-items: center; gap: var(--sp-2); }
.plan-range {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.025em;
  color: var(--ink-1);
  min-width: 14ch;
}

/* ---- week strip: seven day columns ------------------------------------- */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
/* Seven columns stop being readable long before they stop fitting. Below
   64rem the week becomes seven stacked days, which is what a phone wants
   anyway: one day at a time, in order. */
@media (max-width: 64rem) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .week { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } }

.day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 9rem;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
}
.day--today { border-color: var(--onair); box-shadow: var(--lift-2); }
.day--past { background: var(--ground); }
.day__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.day__name {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.day__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
}
.day--today .day__num { color: var(--onair); }
.day__today-tag {
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--onair);
}

/* A booked show. */
.live {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  background: var(--ground);
  border: 1px solid var(--edge-control);
  border-left: 1px solid var(--edge-control);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: inherit;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.live:hover { border-color: var(--brass); background: var(--surface-1); }
.live__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-1);
}
.live__theme { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.35; margin-top: var(--sp-1); }
.live__state {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.live__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.live--done .live__state { color: var(--go); }
.live--done { background: var(--go-wash); border-color: oklch(0.551 0.170 145.7 / 0.4); }

/* A researched optimal slot with nothing in it. Dashed, quiet, and a button:
   the empty screen is an invitation to act, so the invitation is clickable. */
.slot {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  background: transparent;
  border: 1px dashed var(--edge-control);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-3);
  min-height: 44px;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.slot:hover { border-color: var(--brass); color: var(--brass-deep); background: var(--brass-veil); }
.slot__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 600; }
.slot__why { font-size: var(--fs-micro); line-height: 1.4; display: block; margin-top: var(--sp-1); }
.day__free { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- month grid -------------------------------------------------------- */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden; }
.month__dow {
  background: var(--surface-2);
  padding: var(--sp-2);
  text-align: center;
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.mday {
  background: var(--ground);
  min-height: 5.5rem;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.mday--out { background: var(--surface-1); }
.mday--today { box-shadow: inset 0 0 0 2px var(--onair); }
.mday__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.mday--today .mday__num { color: var(--onair); font-weight: 700; }
.mday__live {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--brass-veil);
  color: var(--brass-deep);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 22px;
}
.mday__live:hover { background: var(--brass); color: var(--ground); }
.mday__live--done { background: var(--go-wash); color: var(--go); }
.mday__live--done:hover { background: var(--go); color: var(--ground); }
/* A month grid at 375px is seven 44px columns of nothing legible. Below
   52rem the month view hides and the page says so in words. */
.month-wrap { overflow-x: auto; }
@media (max-width: 52rem) { .month { min-width: 44rem; } }

/* ---- the show editor (inline, never a modal) ---------------------------- */
.editor { margin-top: var(--sp-5); }
.editor__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 46rem) { .editor__grid { grid-template-columns: minmax(0, 1fr); } }
.editor__grid .field--wide { grid-column: 1 / -1; }

/* ---- saved ideas ------------------------------------------------------- *
 * Two up rather than full-bleed rows: a title, one line of hook and two
 * buttons does not need 76rem of width, and a stack of full-width slabs makes
 * four saved shows look like four sections. */
.ideas { display: grid; gap: var(--sp-3); }
@media (min-width: 52rem) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idea { display: flex; flex-direction: column; gap: var(--sp-2); }
.idea .prod__why {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- products admin ---------------------------------------------------- */
.prow {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) 7rem minmax(0, 1.4fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  background: var(--ground);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
}
.prow + .prow { margin-top: var(--sp-2); }
.prow--archived { background: var(--surface-2); }
.prow--archived .control { color: var(--ink-3); }
@media (max-width: 62rem) { .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 34rem) { .prow { grid-template-columns: minmax(0, 1fr); } }
.prow .control { min-height: 44px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.prow__act { display: flex; gap: var(--sp-2); }

/* ---- toast ------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%) translateY(0);
  z-index: var(--z-toast);
  max-width: min(32rem, calc(100vw - 2rem));
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  color: var(--ground);
  font-size: var(--fs-sm);
  box-shadow: var(--lift-3);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toast[hidden] { display: none; }
.toast.is-out { opacity: 0; transform: translateX(-50%) translateY(8px); }
.toast__undo {
  margin-left: var(--sp-3);
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ground);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.toast__undo:hover { text-decoration-thickness: 2px; }
.toast__undo:focus-visible { outline: 2px solid var(--ground); outline-offset: 2px; }

/* ---- skeleton loading -------------------------------------------------- */
.skel {
  border-radius: var(--r-md);
  background: var(--surface-3);
  animation: pulse 1.4s var(--ease) infinite;
}
.skel--line { height: 1rem; margin-bottom: var(--sp-3); }
.skel--w70 { max-width: 70%; }
.skel--w45 { max-width: 45%; }
.skel--block { height: 7rem; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===========================================================================
   .dur-N -- the proportional ladder for the run-sheet spine.
   A segment's min-height is its duration in minutes times a fixed rung. This
   is generated as real classes rather than an inline style because these pages
   ship `style-src 'self'` with no nonce: an inline style attribute would be
   blocked and every segment would collapse to its content height, silently
   destroying the one thing the spine exists to show.
   Rung is 1.15rem, so the 90-minute default show is about 103rem of axis --
   long enough that duration is legible, short enough to scroll in a few flicks.
   Capped at 30 because the run sheet's longest segment is 15 minutes and the
   skeleton's event_len_min tops out well below a single 30-minute block.
   =========================================================================== */
.dur-1  { min-height: 1.15rem; } .dur-2  { min-height: 2.3rem; }
.dur-3  { min-height: 3.45rem; } .dur-4  { min-height: 4.6rem; }
.dur-5  { min-height: 5.75rem; } .dur-6  { min-height: 6.9rem; }
.dur-7  { min-height: 8.05rem; } .dur-8  { min-height: 9.2rem; }
.dur-9  { min-height: 10.35rem; } .dur-10 { min-height: 11.5rem; }
.dur-11 { min-height: 12.65rem; } .dur-12 { min-height: 13.8rem; }
.dur-13 { min-height: 14.95rem; } .dur-14 { min-height: 16.1rem; }
.dur-15 { min-height: 17.25rem; } .dur-16 { min-height: 18.4rem; }
.dur-17 { min-height: 19.55rem; } .dur-18 { min-height: 20.7rem; }
.dur-19 { min-height: 21.85rem; } .dur-20 { min-height: 23rem; }
.dur-21 { min-height: 24.15rem; } .dur-22 { min-height: 25.3rem; }
.dur-23 { min-height: 26.45rem; } .dur-24 { min-height: 27.6rem; }
.dur-25 { min-height: 28.75rem; } .dur-26 { min-height: 29.9rem; }
.dur-27 { min-height: 31.05rem; } .dur-28 { min-height: 32.2rem; }
.dur-29 { min-height: 33.35rem; } .dur-30 { min-height: 34.5rem; }
/* On a phone the cards are already tall from wrapping text, and a literal
   1.15rem-per-minute axis would make the sheet ten screens long. The rung
   halves; the PROPORTIONS, which are the point, are untouched. */
@media (max-width: 46rem) {
  .dur-1  { min-height: 0.6rem; }  .dur-2  { min-height: 1.2rem; }
  .dur-3  { min-height: 1.8rem; }  .dur-4  { min-height: 2.4rem; }
  .dur-5  { min-height: 3rem; }    .dur-6  { min-height: 3.6rem; }
  .dur-7  { min-height: 4.2rem; }  .dur-8  { min-height: 4.8rem; }
  .dur-9  { min-height: 5.4rem; }  .dur-10 { min-height: 6rem; }
  .dur-11 { min-height: 6.6rem; }  .dur-12 { min-height: 7.2rem; }
  .dur-13 { min-height: 7.8rem; }  .dur-14 { min-height: 8.4rem; }
  .dur-15 { min-height: 9rem; }    .dur-16 { min-height: 9.6rem; }
  .dur-17 { min-height: 10.2rem; } .dur-18 { min-height: 10.8rem; }
  .dur-19 { min-height: 11.4rem; } .dur-20 { min-height: 12rem; }
  .dur-21 { min-height: 12.6rem; } .dur-22 { min-height: 13.2rem; }
  .dur-23 { min-height: 13.8rem; } .dur-24 { min-height: 14.4rem; }
  .dur-25 { min-height: 15rem; }   .dur-26 { min-height: 15.6rem; }
  .dur-27 { min-height: 16.2rem; } .dur-28 { min-height: 16.8rem; }
  .dur-29 { min-height: 17.4rem; } .dur-30 { min-height: 18rem; }
}

/* ---- night-mode patches for two inherited colour LITERALS ---------------
   tokens.css documents a known limit of the estate's Daylight pass: a few
   hard-coded colour literals inside app.css resolved to light values and are
   not tokens, so the html[data-theme="dark"] block cannot reach them. Two of
   them are in this file, both light-blue radial washes, and under night mode
   they render as a pale grey smear across the top-left of the panel. These
   two rules are the whole fix; they are scoped to the dark attribute and
   change nothing in Daylight. */
html[data-theme="dark"] .empty {
  background:
    radial-gradient(42rem 22rem at 12% -20%, oklch(0.288 0.050 256 / 0.45), transparent 60%),
    var(--surface-1);
}
html[data-theme="dark"] .gate {
  background:
    radial-gradient(58rem 42rem at 18% -6%, oklch(0.288 0.050 256 / 0.55), transparent 62%),
    var(--surface-1);
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none !important; }
}