/* Nesteia marketing site — the fast planner (/planner) only. Loaded after styles.css and built from its tokens alone,
   so the light and dark palettes (prefers-color-scheme and the toggle's data-theme) follow without rules of their own.
   Tide for the form's actions, dusk for stages and confidence as on /stages, ember only beside safety copy. */

/* ---------- Notice and the no-JavaScript line ---------- */
.planner-notice {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ember);   /* the stop card's treatment on /safety */
  background: var(--ember-soft);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--ink);
}
.planner-notice b { font-weight: 600; }
.planner-nojs { font-size: 0.95rem; color: var(--ink); max-width: var(--measure); }

/* ---------- Layout: the form, then the results; side by side from 960 px ---------- */
.planner { display: grid; gap: 2rem; }
@media (min-width: 960px) {
  .planner { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
}

/* ---------- Form ---------- */
.planner-form { display: grid; gap: 1.5rem; align-content: start; }
.planner-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plan-set, .when-set { display: grid; gap: 1rem; }
.plan-legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.plan-group { display: grid; gap: 0.5rem; }
.plan-group-h { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.plan-group.supervised .small { margin-top: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* A pill is a real radio: the input sits invisibly over its label text, so a click, a tap and the keyboard all reach it. */
.plan-pill { position: relative; display: inline-flex; }
.plan-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plan-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.375rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--stone) 80%, transparent);   /* a control's edge needs 3:1 */
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.plan-pill:hover span { color: var(--ink); border-color: var(--stone); background: var(--raise); }
.plan-pill input:checked + span { background: var(--tide-soft); border-color: var(--tide); color: var(--tide); }
.plan-group.supervised .plan-pill input:checked + span { background: var(--ember-soft); border-color: var(--ember); color: var(--ink); }
.plan-pill input:focus-visible + span { outline: 2px solid var(--tide); outline-offset: 3px; }

.custom-row, .when-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.custom-row { align-items: center; }
.when-field { display: grid; gap: 0.25rem; }
.field-label { font-size: 0.875rem; color: var(--ink); }
.field {
  font: inherit;
  font-size: 1rem;   /* 16 px keeps iOS from zooming into the field */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--stone);   /* not --hairline: a control's edge needs 3:1 */
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  min-height: 40px;
  max-width: 100%;
}
.field:focus { border-color: var(--tide); }
.field[aria-invalid="true"] { border-color: var(--ember); }
#custom-hours { width: 6rem; }
.field-error { font-size: 0.875rem; color: var(--ember); }
.planner-form > .btn { justify-self: start; }

/* ---------- Results ---------- */
.planner-results h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
.planner-results h2:focus { outline: none; }
.planner-results h2:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; }
.results-lede { margin-top: 0.5rem; }
.supervised-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ember);
  background: var(--ember-soft);
  border-radius: 12px;
}
.supervised-note p { font-size: 0.9rem; color: var(--ink); }
.supervised-note b { font-weight: 600; }

/* The stage list: a quiet dusk rail with one dot per stage, as the stage strip on /stages. */
.pt-list { position: relative; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.pt-list::before {
  content: "";
  position: absolute;
  left: calc(0.4375rem - 0.5px);
  top: 0.75rem;
  bottom: 1.75rem;
  width: 1px;
  background: color-mix(in srgb, var(--dusk) 45%, transparent);
}
.pt-item { position: relative; margin: 0; padding: 0 0 1.25rem 1.875rem; }
li.pt-item + li.pt-item { margin-top: 0; }
.pt-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--dusk);
  background: var(--surface);
  box-sizing: border-box;
}
.pt-item.is-now::before { background: var(--dusk); }
.pt-item.is-supervised::before { border-color: var(--ember); }
.pt-end::before { border-color: var(--tide); background: var(--tide); border-radius: 3px; }
.pt-h { font-size: 1.05rem; font-weight: 500; line-height: 1.35; }
.pt-from { font-weight: 400; color: var(--stone); }
.pt-from time { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-top: 0.375rem; font-size: 0.8rem; color: var(--stone); }
.pt-item .conf { color: var(--dusk); }
.pt-item .conf .lvl {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--dusk-soft);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
}
.pt-tag { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.pt-tag.now { color: var(--dusk); }
.pt-tag.supervised { color: var(--ember); }
.pt-sentence { margin-top: 0.375rem; font-size: 0.95rem; color: var(--ink); }
.pt-more { margin-top: 0.25rem; }

.planner-stop { margin-top: 0.25rem; }
.planner-stop p { max-width: none; }
.refeed { margin-top: 1.5rem; }
.refeed-days { list-style: none; margin: 0.5rem 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.refeed-days li { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.refeed-n { font-weight: 500; }
.refeed .small { margin-top: 0.75rem; }
.results-foot { margin-top: 1.5rem; }

/* ---------- Touch: 44 px targets where a finger lands ---------- */
@media (pointer: coarse) {
  .plan-pill span, .field, #ate-now { min-height: 44px; }
  .pt-more a { display: inline-block; padding-block: 0.75rem; margin-block: -0.625rem; }   /* a taller target, same line box */
}

/* ---------- Motion: a new list settles in; nothing moves under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pt-item { animation: note-in 220ms var(--ease) both; }
  .plan-pill span { transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
  .plan-pill:active span { transform: scale(0.97); }
}

/* ---------- Forced colours: keep the picked plan and the Now dot visible ---------- */
@media (forced-colors: active) {
  .plan-pill input:checked + span { border: 2px solid Highlight; color: Highlight; }
  .pt-item.is-now::before, .pt-end::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
}

/* ---------- Print: the plan as a list, without the form ---------- */
@media print {
  .planner-form, .planner-nojs { display: none !important; }
  .planner { display: block; }
  .pt-item { break-inside: avoid; animation: none; }
}