/* Pageflow components. Needs tokens.css. Class names match the price calculator. */

/* base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--text-body)/var(--leading-body) var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font-family: var(--sans); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

/* type */
h1 { font-size: var(--text-h1); font-weight: 600; letter-spacing: var(--tracking-h1); line-height: var(--leading-tight); margin: 0 0 22px; }
h1 .dim { color: var(--ink-30); display: block; }               /* two-tone headline: grey setup line, black point */
h2 { font-size: var(--text-h2); font-weight: 600; letter-spacing: var(--tracking-h2); line-height: 1.1; margin: 0; }
.lead { font-size: var(--text-lead); color: var(--ink-70); max-width: var(--measure-text); }
.eyebrow, .num, .label {
  font: 500 var(--text-label) var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-50);
}
.eyebrow { color: var(--eyebrow, var(--ink-50)); }             /* a brand tint sets --eyebrow */
.eyebrow.teal { color: var(--brand-teal-text); } .eyebrow.magenta { color: var(--brand-magenta-text); }
.num { color: var(--brand-text); }                              /* "01 · STARTING POINT", in the page's brand colour */
.hint { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); }
.muted { color: var(--ink-70); }
.big { font-size: var(--text-big); font-weight: 600; letter-spacing: -1.5px; line-height: 1; }

/* nav: sticky, blurred, hairline below */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: var(--hairline-soft); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
/* Pageflow logo: the outlined lockup SVG, 24px tall in a nav. Two images, the on-ink one shows in dark mode. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 24px; width: auto; }
.logo .on-ink { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .on-white { display: none; } :root:not([data-theme="light"]) .logo .on-ink { display: block; } }
:root[data-theme="dark"] .logo .on-white { display: none; } :root[data-theme="dark"] .logo .on-ink { display: block; }

/* buttons. Primary: black pill. Secondary: ghost pill. Tertiary: text, a pill only on hover. Link: inline text.
   Any of them takes an .icon before the label, or an .icon.end after it. */
.pill {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg);
  border: 1px solid transparent; border-radius: var(--pill); padding: 10px 18px; font: 500 var(--text-ui) var(--sans); line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pill.ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); }
.pill.text  { background: transparent; color: var(--ink-70); padding-inline: 12px; }
.pill:disabled, .pill[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ink-30); text-underline-offset: 3px; transition: text-decoration-color var(--fast) var(--ease); }

/* icon: Lucide, inline SVG with its 24px viewBox, drawn at 16px in the text colour. One per button. */
.icon { width: 16px; height: 16px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.end { transition: transform var(--fast) var(--ease); }

/* hover: only on devices that hover */
@media (hover: hover) {
  .pill:not(:disabled):hover { background: color-mix(in oklab, var(--ink) 82%, var(--bg)); }
  .pill.ghost:not(:disabled):hover { background: var(--ink-04); border-color: var(--ink-30); }
  .pill.text:not(:disabled):hover { background: var(--ink-07); color: var(--ink); }
  .link:hover { text-decoration-color: currentColor; }
  .pill:not(:disabled):hover .icon.end, .link:hover .icon.end { transform: translateX(2px); }
}
.pill:focus-visible, .link:focus-visible, .choice:has(input:focus-visible), .dd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* section: numbered step with a hairline above, headline left, one paragraph right */
.step { padding: var(--s-8) 0; border-top: var(--hairline-soft); }
.step-head { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-7); align-items: start; margin-bottom: 28px; }
.step-head p { margin: 0; color: var(--ink-70); font-size: 15px; }
.step-head .num { margin-bottom: var(--s-3); }

/* grids */
.grid { display: grid; gap: var(--s-3); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* subgroup inside a step: bold title, mono hint, optional lock tag */
.subgroup { margin-top: 28px; }
.subgroup:first-child { margin-top: 0; }
.subgroup .sh { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--s-3); flex-wrap: wrap; }
.subgroup .sh b { font-weight: 600; letter-spacing: -0.2px; font-size: 17px; }
.subgroup .sh span { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); }
.subgroup .sh .lock { border: var(--hairline); border-radius: var(--pill); padding: 2px 10px; font-size: 12px; }

/* choice card: a radio or checkbox drawn as a card. Selected = ink border doubled. */
.choice {
  position: relative; display: block; background: var(--card); border: var(--hairline); border-radius: var(--radius);
  padding: 18px 18px 16px; cursor: pointer; transition: border-color var(--fast), box-shadow var(--fast);
}
.choice:hover { border-color: var(--ink-30); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--brand-text); }   /* selected: same 1px border, in the brand colour */
.choice .t { font-weight: 600; letter-spacing: -0.2px; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.choice .nm { display: inline-flex; align-items: center; gap: 10px; }
.choice .price { font: 500 var(--text-hint) var(--mono); color: var(--ink-50); white-space: nowrap; }
.choice .d { font-size: var(--text-small); color: var(--ink-70); line-height: 1.45; }
.choice.off, .subgroup.off, .step.off { opacity: .35; pointer-events: none; }

/* logo tile: white square, hairline, 16px mark. Letter fallback. */
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-tile); background: var(--card); border: var(--hairline); box-shadow: var(--shadow-card); }
.tile img { width: 16px; height: 16px; display: block; border-radius: 3px; }
.tile.letter { font: 600 13px var(--sans); color: var(--ink-70); background: var(--ink-04); }
:root[data-theme="dark"] .tile { background: oklch(0.98 0 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile { background: oklch(0.98 0 0); } }

/* row: label and hint left, control right, hairline between rows */
.row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; padding: 18px 0; border-top: var(--hairline-soft); }
.row:first-of-type { border-top: 0; }
.row .l { font-weight: 500; }
.row .h { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); margin-top: 3px; }

/* stepper: pill with minus, number, plus */
.stepper { display: inline-flex; align-items: center; border: var(--hairline); border-radius: var(--pill); overflow: hidden; background: var(--card); }
.stepper button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.stepper button:hover { background: var(--ink-04); }
.stepper input { width: 56px; height: 40px; border: 0; border-left: var(--hairline-soft); border-right: var(--hairline-soft); text-align: center; font: 500 15px var(--mono); background: transparent; color: var(--ink); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* dropdown: pill button, card menu, check on the current item. Drives a hidden native select. */
select.enhanced { display: none; }
.dd { position: relative; min-width: 300px; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; height: 40px; padding: 0 14px 0 16px; border: var(--hairline); border-radius: var(--pill); background: var(--card); color: var(--ink); font: 500 var(--text-ui) var(--sans); cursor: pointer; text-align: left; transition: border-color var(--fast); }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--ink-30); }
.dd-price { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); white-space: nowrap; }
.dd-caret { width: 14px; height: 14px; flex: none; color: var(--ink-50); transition: transform var(--fast); }
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 100%; background: var(--card); border: var(--hairline); border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow-menu); display: none; }
.dd.open .dd-menu { display: block; animation: dd-in .12s var(--ease); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 12px 9px 34px; border-radius: var(--radius-sm); cursor: pointer; font: 500 var(--text-ui) var(--sans); white-space: nowrap; position: relative; }
.dd-item:hover, .dd-item.active { background: var(--ink-07); }
.dd-item.selected::before { content: ""; position: absolute; left: 13px; top: 50%; width: 5px; height: 9px; margin-top: -7px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* form fields: mono uppercase label, rounded input, note under it */
.field { display: grid; gap: 6px; font: 500 var(--text-label) var(--mono); color: var(--ink-50); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.field input, .field textarea { font: 400 15px var(--sans); color: var(--ink); background: var(--card); border: var(--hairline); border-radius: 10px; padding: 11px 14px; width: 100%; }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: transparent; }
.field .note { text-transform: none; letter-spacing: 0; font: 400 12.5px var(--mono); color: var(--ink-50); }
.field .note.bad { color: var(--bad-text); }
.field .note.ok { color: var(--good-text); }
.field .note:empty { display: none; }

/* note box: inline explanation, ink at 4% */
.note-box { padding: 16px 18px; border: var(--hairline); border-radius: var(--radius); background: var(--ink-04); font-size: 15px; }
.note-box b { font-weight: 600; }

/* panel: the one card with a shadow. Lines left, totals right. */
.panel { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: start; background: var(--card); border: var(--hairline); border-radius: var(--radius-lg); padding: var(--s-7); box-shadow: var(--shadow-panel); }
.line { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: var(--hairline-soft); font-size: 14.5px; }
.line .v { font: 500 var(--text-ui) var(--mono); white-space: nowrap; }
.line.group { font: 500 var(--text-label) var(--mono); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-50); padding-top: 20px; border: 0; }
.totals .sub { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); }
.totals .big { margin: 6px 0 4px; }
.totals .block { margin-top: 20px; padding-top: 20px; border-top: var(--hairline-soft); }
.fine { font-size: 13px; color: var(--ink-50); margin-top: var(--s-6); line-height: 1.5; }

/* sticky bar: fixed bottom, blurred, label and amount left, pill right */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-top: var(--hairline); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 76px; }
.bar .amt { font-size: 24px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.1; }
.bar .amt small { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); margin-left: 8px; }

/* status: scores and checks. Colour carries meaning, text carries it too. */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--pill); font: 500 var(--text-hint) var(--mono); }
.status.good { color: var(--good-text); background: var(--good-bg); }
.status.warn { color: var(--warn-text); background: var(--warn-bg); }
.status.bad  { color: var(--bad-text);  background: var(--bad-bg); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.good::before { background: var(--good); } .status.warn::before { background: var(--warn); } .status.bad::before { background: var(--bad); }
/* importance: how much a fix matters. Critical red, high amber, the rest grey. Always with the word. */
.status.imp-critical { color: var(--bad-text);  background: var(--bad-bg); }  .status.imp-critical::before { background: var(--bad); }
.status.imp-high     { color: var(--warn-text); background: var(--warn-bg); } .status.imp-high::before     { background: var(--warn); }
.status.imp-medium   { color: var(--ink-70);    background: var(--ink-07); }
.status.imp-low      { color: var(--ink-50);    background: var(--ink-04); }
.score { display: flex; align-items: baseline; gap: 6px; }
.score .big { font-size: 56px; }
.score .of { font: 400 var(--text-hint) var(--mono); color: var(--ink-50); }
.meter { height: 4px; border-radius: 2px; background: var(--ink-07); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--ink); }
.meter.good > i { background: var(--good); } .meter.warn > i { background: var(--warn); } .meter.bad > i { background: var(--bad); }

/* ring: the score donut from the scan pages. --v is 0 to 100. Track is ink at 7%, fill is the status colour. */
.ring { --v: 0; --size: 120px; --stroke: 10px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--ring-color, var(--ink)) calc(var(--v) * 1%), var(--ink-07) 0); }
.ring::before { content: ""; position: absolute; inset: var(--stroke); border-radius: 50%; background: var(--card); }
.ring > span { position: relative; font: 600 calc(var(--size) * .3) var(--sans); letter-spacing: -1px; }
.ring.good { --ring-color: var(--good); } .ring.warn { --ring-color: var(--warn); } .ring.bad { --ring-color: var(--bad); } .ring.brand { --ring-color: var(--brand-teal); }

/* score head: ring left, label and verdict right. Sits on top of a rows card. */
.score-head { display: flex; align-items: center; gap: var(--s-6); margin-bottom: var(--s-5); }
.score-head .score-meta { display: grid; gap: 8px; justify-items: start; }

/* rows card: a white card that holds a header and a list of rows or checks. Flat, like every card. */
.rows-card { background: var(--card); border: var(--hairline); border-radius: var(--radius); padding: 20px 20px 4px; }
.rows-card .sh { margin-bottom: 6px; }

/* check row: title, evidence and fix left, status pill right */
.check-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: start; padding: 18px 0; border-top: var(--hairline-soft); }
.check-row:last-child { border-bottom: var(--hairline-soft); }
.rows-card .check-row:last-child { border-bottom: 0; }
.check-row .status { margin-top: 2px; }
.check-title { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; font-weight: 500; }
.check-body { display: grid; gap: 6px; margin-top: 6px; font-size: var(--text-small); line-height: 1.45; }
.check-body p { margin: 0; color: var(--ink-70); }
.check-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font: 400 var(--text-hint) var(--mono); color: var(--ink-50); }

/* card: plain white card, flat, hairline. A title and one short paragraph. */
.card { background: var(--card); border: var(--hairline); border-radius: var(--radius); padding: var(--s-6); }
.card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; }
.card p { margin: 0; color: var(--ink-70); font-size: 15px; }

/* tinted section: a full-width band with a touch of teal or magenta. Eyebrows inside take the brand colour. */
.tint-teal    { background: var(--bg-teal);    --eyebrow: var(--brand-teal-text); }
.tint-magenta { background: var(--bg-magenta); --eyebrow: var(--brand-magenta-text); --brand-text: var(--brand-magenta-text); }

/* brand accent: one per page at most. A link, a mark, a thin line. */
.accent { color: var(--accent); }
.mark { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--brand-gradient); transform: rotate(45deg); }

/* logo row: "Built with" */
.stack-label { font: 500 var(--text-label) var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-50); display: block; margin-bottom: 14px; }
.stack-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.stack-item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--text-ui); color: var(--ink-70); }

/* footer: mono, grey */
.footer { padding: var(--s-9) 0 40px; color: var(--ink-50); font: 400 13px var(--mono); }

/* phone width: one column, full-width controls */
@media (max-width: 760px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .step-head { grid-template-columns: 1fr; gap: 10px; }
  .panel { grid-template-columns: 1fr; padding: 22px; }
  .row { grid-template-columns: 1fr; gap: var(--s-3); }
  .check-row { grid-template-columns: 1fr; gap: 10px; } .check-row > .status { justify-self: start; }
  .score-head { align-items: flex-start; }
  .dd { min-width: 0; width: 100%; } .dd-menu { left: 0; } .dd-item { white-space: normal; }
  .bar .amt { font-size: 20px; } .bar .amt small { display: block; margin: 2px 0 0; }
}