/* Cold Start. Its own colours and its own screens, inside the shared frames in
   styles.css. docs/SCREENS.md is the contract. Linked only from
   work/cold-start.html and Cold Start's card on the front page.

   Simple and encouraging, for somebody who owns none of it yet: warm paper,
   a soft plum-black ink and one plum accent, which marks progress, the answer
   chosen and the one button that moves the person on. The shop's own skin sits
   on top in real use; this is the engine's default.
   Every token set for the day has its night value below; scripts/check-screens.mjs
   refuses a token that has no night value. */

/* ---- Theme, day ---- */
[data-system="cold-start"] {
  --sys-bg: #FAF7F2;
  --sys-surface: #FFFFFF;
  --sys-ink: #231A21;
  --sys-muted: #62575F;
  --sys-line: #E7DFE3;
  --sys-accent: #74305F;
  --sys-on-accent: #FFFFFF;
  --sys-accent-soft: #F4E9F0;
  --sys-track: #E8DEE4;
}

/* ---- Theme, night. The same screen in the dark, nothing moved. ---- */
[data-theme="dark"] [data-system="cold-start"] {
  --sys-bg: #16121A;
  --sys-surface: #201A23;
  --sys-ink: #F4EDF2;
  --sys-muted: #B5A9B3;
  --sys-line: #362D38;
  --sys-accent: #E2A9D1;
  --sys-on-accent: #1A1219;
  --sys-accent-soft: #34232F;
  --sys-track: #3A303B;
}

/* ---- Screens ----
   Every length is device points times --u. Text runs from 11 to 34 points.
   One question per screen, a progress bar that always says where the person
   is, answers as whole rows a thumb can hit, and one filled button. */

/* The shop's own bar along the top of the browser screen. */
[data-system="cold-start"] .cs-shop {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(64 * var(--u));
  padding: 0 calc(40 * var(--u));
  border-bottom: var(--line) solid var(--sys-line);
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-shop__name { font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: calc(-0.2 * var(--u)); }
[data-system="cold-start"] .cs-shop__end { display: flex; gap: calc(28 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }

/* A page of the flow: main column, and on the wide screen an aside. */
[data-system="cold-start"] .cs-page { flex: 1 1 auto; min-height: 0; display: flex; }
[data-system="cold-start"] .cs-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: calc(48 * var(--u)) calc(96 * var(--u)) calc(40 * var(--u));
}
[data-system="cold-start"] .cs-plate { padding: calc(44 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u)); }

/* Progress: where you are, in words and in 6 segments. */
[data-system="cold-start"] .cs-progress { flex: none; margin-bottom: calc(36 * var(--u)); }
[data-system="cold-start"] .cs-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(12 * var(--u));
  font-size: calc(15 * var(--u));
}
[data-system="cold-start"] .cs-progress__step { font-weight: 600; color: var(--sys-accent); }
[data-system="cold-start"] .cs-progress__note { color: var(--sys-muted); }
[data-system="cold-start"] .cs-bar { display: flex; gap: calc(6 * var(--u)); }
[data-system="cold-start"] .cs-bar i {
  flex: 1 1 0;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--sys-track);
}
[data-system="cold-start"] .cs-bar i.is-done { background: var(--sys-accent); }

/* The question, and the line that says what the answer is for. */
[data-system="cold-start"] .cs-q {
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: calc(-0.5 * var(--u));
}
[data-system="cold-start"] .cs-help {
  margin-top: calc(10 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  color: var(--sys-muted);
}

/* Answers: whole rows, 64 points tall, the chosen one ringed and tinted. */
[data-system="cold-start"] .cs-opts { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(28 * var(--u)); }
[data-system="cold-start"] .cs-opt {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  min-height: calc(64 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--sys-line);
  border-radius: calc(14 * var(--u));
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-opt.is-chosen {
  border-color: var(--sys-accent);
  box-shadow: inset 0 0 0 calc(0.5 * var(--u)) var(--sys-accent);
  background: var(--sys-accent-soft);
}
[data-system="cold-start"] .cs-radio {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border: calc(2 * var(--u)) solid var(--sys-muted);
  border-radius: 50%;
}
[data-system="cold-start"] .is-chosen .cs-radio { border-color: var(--sys-accent); background: var(--sys-accent); }
[data-system="cold-start"] .cs-radio svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: var(--sys-on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
[data-system="cold-start"] .cs-opt__text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
[data-system="cold-start"] .cs-opt__label { font-size: calc(17 * var(--u)); font-weight: 600; }
[data-system="cold-start"] .cs-opt__sub { font-size: calc(14 * var(--u)); color: var(--sys-muted); }

/* The way back and the way on. Back is quiet, Next is the one filled thing. */
[data-system="cold-start"] .cs-nav {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: calc(24 * var(--u));
}
[data-system="cold-start"] .cs-back { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; color: var(--sys-muted); }
[data-system="cold-start"] .cs-back svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-system="cold-start"] .cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  height: calc(52 * var(--u));
  padding: 0 calc(28 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--sys-accent);
  color: var(--sys-on-accent);
  font-size: calc(17 * var(--u));
  font-weight: 600;
}
[data-system="cold-start"] .cs-btn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-system="cold-start"] .cs-btn--wide { display: flex; width: 100%; }

/* The aside on the browser screen: what has been said so far. */
[data-system="cold-start"] .cs-side {
  flex: none;
  width: calc(340 * var(--u));
  padding: calc(48 * var(--u)) calc(32 * var(--u));
  border-left: var(--line) solid var(--sys-line);
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-side__title { font-size: calc(15 * var(--u)); font-weight: 600; margin-bottom: calc(20 * var(--u)); }
[data-system="cold-start"] .cs-said { padding: calc(14 * var(--u)) 0; border-top: var(--line) solid var(--sys-line); }
[data-system="cold-start"] .cs-said__q { font-size: calc(13 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-said__a { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
[data-system="cold-start"] .cs-said__edit { font-size: calc(14 * var(--u)); font-weight: 500; color: var(--sys-accent); }
[data-system="cold-start"] .cs-said__now { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--sys-accent); }
[data-system="cold-start"] .cs-side__note {
  margin-top: calc(20 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--sys-accent-soft);
  font-size: calc(14 * var(--u));
  line-height: 1.45;
}

/* A field the answer is typed into, focused. */
[data-system="cold-start"] .cs-units {
  display: inline-flex;
  align-self: flex-start;
  margin-top: calc(28 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--sys-track);
  font-size: calc(17 * var(--u));
  font-weight: 500;
}
[data-system="cold-start"] .cs-units span { padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-units span.is-on { background: var(--sys-surface); color: var(--sys-ink); font-weight: 600; }
[data-system="cold-start"] .cs-field {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--u));
  width: calc(340 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: calc(18 * var(--u)) calc(22 * var(--u));
  border: calc(2 * var(--u)) solid var(--sys-accent);
  border-radius: calc(14 * var(--u));
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-field__value { font-size: calc(40 * var(--u)); font-weight: 600; letter-spacing: calc(-0.5 * var(--u)); line-height: 1; }
[data-system="cold-start"] .cs-field__unit { font-size: calc(22 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-caret { align-self: center; width: calc(2 * var(--u)); height: calc(36 * var(--u)); margin-left: calc(-6 * var(--u)); background: var(--sys-accent); }
[data-system="cold-start"] .cs-why {
  display: flex;
  gap: calc(10 * var(--u));
  max-width: calc(520 * var(--u));
  margin-top: calc(20 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.45;
  color: var(--sys-muted);
}
[data-system="cold-start"] .cs-why svg { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(2 * var(--u)); fill: none; stroke: var(--sys-accent); stroke-width: 1.8; stroke-linecap: round; }

/* Headings on the supporting plates. */
[data-system="cold-start"] .cs-head { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); }
[data-system="cold-start"] .cs-title { font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: calc(-0.4 * var(--u)); line-height: 1.2; }
[data-system="cold-start"] .cs-lede { margin-top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.4; color: var(--sys-muted); }

/* A chip: a state in words, with a dot. */
[data-system="cold-start"] .cs-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--sys-accent-soft);
  font-size: calc(14 * var(--u));
  font-weight: 600;
}
[data-system="cold-start"] .cs-chip::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--sys-accent); }

/* Decisions made for the customer, each with its one line of reason. */
[data-system="cold-start"] .cs-cards { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); }
[data-system="cold-start"] .cs-card {
  padding: calc(18 * var(--u)) calc(22 * var(--u));
  border: var(--line) solid var(--sys-line);
  border-radius: calc(14 * var(--u));
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-card__top { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); }
[data-system="cold-start"] .cs-card__pick { font-size: calc(22 * var(--u)); font-weight: 600; }
[data-system="cold-start"] .cs-card__over { font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-card__why { margin-top: calc(6 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.4; color: var(--sys-muted); }

/* A written specification: 4 measured fields and where it goes next. */
[data-system="cold-start"] .cs-spec { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); }
[data-system="cold-start"] .cs-spec__cell {
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  border: var(--line) solid var(--sys-line);
  border-radius: calc(14 * var(--u));
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-spec__key { font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: calc(0.4 * var(--u)); text-transform: uppercase; color: var(--sys-muted); }
[data-system="cold-start"] .cs-spec__val { margin-top: calc(6 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 600; }
[data-system="cold-start"] .cs-spec__from { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-top: auto;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--sys-accent-soft);
  font-size: calc(17 * var(--u));
  font-weight: 500;
}
[data-system="cold-start"] .cs-handoff__state { flex: none; font-size: calc(15 * var(--u)); font-weight: 600; color: var(--sys-accent); }

/* The finished state, on the phone. */
[data-system="cold-start"] .cs-done { flex: 1 1 auto; display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(34 * var(--u)); }
[data-system="cold-start"] .cs-done .cs-bar { margin-bottom: calc(24 * var(--u)); }
[data-system="cold-start"] .cs-badge {
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--sys-accent);
}
[data-system="cold-start"] .cs-badge svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: none; stroke: var(--sys-on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
[data-system="cold-start"] .cs-done__step { margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: var(--sys-accent); }
[data-system="cold-start"] .cs-done__title { margin-top: calc(4 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: calc(-0.4 * var(--u)); line-height: 1.15; }
[data-system="cold-start"] .cs-done__lede { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.4; color: var(--sys-muted); }
[data-system="cold-start"] .cs-list {
  margin-top: calc(20 * var(--u));
  border: var(--line) solid var(--sys-line);
  border-radius: calc(16 * var(--u));
  background: var(--sys-surface);
}
[data-system="cold-start"] .cs-item { padding: calc(12 * var(--u)) calc(16 * var(--u)); }
[data-system="cold-start"] .cs-item + .cs-item { border-top: var(--line) solid var(--sys-line); }
[data-system="cold-start"] .cs-item__top { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
[data-system="cold-start"] .cs-item__why { margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.35; color: var(--sys-muted); }
[data-system="cold-start"] .cs-total { display: flex; justify-content: space-between; align-items: baseline; margin: calc(16 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); color: var(--sys-muted); }
[data-system="cold-start"] .cs-total b { font-size: calc(22 * var(--u)); font-weight: 700; color: var(--sys-ink); }
[data-system="cold-start"] .cs-done .cs-btn { margin-top: auto; }