/* ============================================================
   Feng Shui Analyzer V3 — design system
   Built on the Daniel Siew V2 tokens (Newsreader + Work Sans,
   warm hue-45 accent) and evolved into a calm, light "paper"
   system where the floor plan is always the hero.
   Severity is never colour-coded red/green. Calm by default.
   ============================================================ */
:root {
  color-scheme: light;
  /* colour */
  --paper: oklch(97.6% 0.007 75);
  --paper-2: oklch(95.2% 0.011 75);
  --card: oklch(99.4% 0.003 75);
  --stage: oklch(93.8% 0.01 75);
  --ink: oklch(23% 0.014 60);
  --ink-2: oklch(38% 0.014 60);
  --muted: oklch(50% 0.014 60);
  --line: oklch(89% 0.011 70);
  --line-2: oklch(80% 0.014 70);
  --accent: oklch(55% 0.125 45);          /* V2 hue, deepened for light ground */
  --accent-hi: oklch(49% 0.125 45);
  --accent-soft: oklch(55% 0.125 45 / .11);
  --accent-line: oklch(55% 0.125 45 / .55);
  --on-accent: oklch(99% 0.004 75);
  --sage: oklch(50% 0.045 165);
  --sage-soft: oklch(50% 0.045 165 / .10);
  --ink-soft: oklch(23% 0.014 60 / .06);
  --focus: oklch(55% 0.125 45 / .45);
  /* type */
  --serif: 'Newsreader', 'Noto Serif SC', Georgia, serif;
  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-xs: 12.5px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 24px; --t-2xl: clamp(28px, 6vw, 38px);
  /* space (4px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px oklch(20% 0.02 60 / .06), 0 4px 14px oklch(20% 0.02 60 / .06);
  --shadow-2: 0 2px 6px oklch(20% 0.02 60 / .08), 0 18px 40px oklch(20% 0.02 60 / .10);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- layout system ----------
     One set of numbers for the whole product. The header, the page and the footer all use
     --page-max and --gutter, so their content shares one left edge and one right edge at every
     width; every column gap, card padding and control height comes from here too. Screens do
     not invent their own values. The four steps below are the only breakpoints in the system. */
  --page-max: 100%;        /* the content column, shared by header, page and footer */
  --gutter: var(--s4);     /* the space outside that column */
  --col-gap: var(--s5);    /* between the plan and its task panel, and between cards in a row */
  --card-pad: var(--s5);   /* inside every card */
  --section-gap: var(--s6);/* between the stacked sections of a page */
  --panel-gap: var(--s4);  /* between the blocks of a task panel */
  --head-gap: var(--s2);   /* label → title → helper inside a panel head */
  --control-h: 52px;       /* primary and secondary buttons */
  --control-h-sm: 44px;    /* quiet buttons, chips, switches */
  --measure: 68ch;         /* the longest comfortable line of text */
}
/* tablet: the page is still one column, with more air around it */
@media (min-width: 700px) { :root { --gutter: var(--s6); --page-max: 760px; --section-gap: var(--s7); } }
/* desktop: two columns, and the page follows the window up to a designed maximum */
@media (min-width: 1000px) {
  :root {
    --page-max: min(1320px, 94vw); --gutter: var(--s6);
    --col-gap: var(--s7); --card-pad: var(--s6); --section-gap: var(--s8); --panel-gap: var(--s5);
  }
}
/* large desktop: the workspace grows moderately — it never stretches edge to edge */
@media (min-width: 1600px) { :root { --page-max: 1480px; --col-gap: var(--s8); --card-pad: var(--s7); } }
@media (min-width: 1900px) { :root { --page-max: 1560px; --section-gap: var(--s9); } }
@media (min-width: 2400px) { :root { --page-max: 1680px; } }

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* the header is sticky, so anything scrolled to must stop below it rather than under it */
  scroll-padding-top: 84px;
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-md)/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0; }
a { color: var(--accent-hi); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { max-width: var(--page-max); margin: 0 auto; padding: var(--s3) var(--gutter); display: flex; align-items: center; gap: var(--s3); min-height: 68px; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.1; margin-right: auto; }
.brand b { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.brand small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.year-switch { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.year-switch button {
  border: 0; background: transparent; border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: baseline; min-height: 36px;
}
.year-switch button small { font-weight: 500; font-size: 11px; color: var(--muted); }
.year-switch button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.icon-btn .ico { display: none; font-size: 18px; line-height: 1; }
.brand b, .icon-btn { white-space: nowrap; }
@media (max-width: 520px) {
  .top-in { padding: var(--s2) var(--s3); gap: var(--s2); }
  .brand b { font-size: 17px; }
  .brand small { font-size: 9.5px; letter-spacing: .1em; }
  .year-switch button { padding: 5px 8px; font-size: 13px; gap: 4px; }
  .year-switch button small { font-size: 10px; }
  .icon-btn { padding: 0; width: 40px; }
  .icon-btn .lbl { display: none; }
  .icon-btn .ico { display: inline; }
}
.icon-btn { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-pill); min-width: 40px; min-height: 40px; cursor: pointer; font-size: var(--t-sm); padding: 0 12px; color: var(--ink-2); }

/* ---------- layout ----------
   The page column. Header, main and footer all use --page-max and --gutter, so a vertical line
   can be drawn down the left edge of the brand, the first card and the footer brand. */
.shell { max-width: var(--page-max); margin: 0 auto; padding: var(--s6) var(--gutter) var(--s9); }
.screen { display: grid; gap: var(--section-gap); animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The workflow shell: the plan on the left, its task panel on the right, both starting on the
   same line. Every step uses it, so no screen invents its own proportions. */
.with-plan { grid-template-columns: 1fr; gap: var(--col-gap); }
@media (min-width: 960px) {
  .with-plan { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); align-items: start; }
  .with-plan > .stage-col { position: sticky; top: 84px; }
}
.panel { display: grid; gap: var(--panel-gap); align-content: start; }
/* the top of a task panel: label, title, helper — always this order, always this rhythm */
.panel-head { display: grid; gap: var(--head-gap); }
.panel-head .lede { margin-top: var(--s1); }
.kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); font-weight: 600; }
.lede { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.5; }
.hint { color: var(--muted); font-size: var(--t-sm); }
.step-count { font-size: var(--t-xs); color: var(--muted); font-weight: 600; letter-spacing: .06em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--control-h); padding: 0 var(--s5); border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--t-md);
  cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s; width: 100%;
}
.btn:hover { background: var(--accent-hi); }
.btn:active { transform: translateY(1px); }
/* a control you cannot use yet is quiet: neutral, not a large faded slab of the accent colour */
.btn:disabled { background: var(--paper-2); color: var(--muted); border-color: var(--line); box-shadow: none; cursor: not-allowed; }
.btn.secondary:disabled { background: var(--paper-2); color: var(--muted); border-color: var(--line); }
.btn.quiet:disabled { background: transparent; border-color: transparent; color: var(--muted); }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn.secondary:hover { background: var(--paper-2); }
.btn.quiet { background: transparent; color: var(--ink-2); border-color: transparent; min-height: var(--control-h-sm); width: auto; padding: 0 var(--s3); font-weight: 500; }
.btn.quiet:hover { background: var(--ink-soft); }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 140px; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--accent-hi); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-size: var(--t-sm); justify-self: start; min-height: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  border: 1px solid var(--line-2); background: var(--card); border-radius: var(--r-pill);
  padding: 0 var(--s4); min-height: var(--control-h-sm); cursor: pointer; font-size: var(--t-sm); font-weight: 500;
}
.chip:hover { border-color: var(--accent-line); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--shadow-1); }
.card.flat { box-shadow: none; background: var(--paper-2); }
.card h3 + p, .card h2 + p { margin-top: var(--s2); }
.confirm-chip {
  display: inline-flex; align-items: center; gap: var(--s2); background: var(--accent-soft); color: var(--accent-hi);
  border-radius: var(--r-pill); padding: 8px 14px; font-weight: 600; font-size: var(--t-sm); justify-self: start;
  animation: pop .3s var(--ease);
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.confidence { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.confidence .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--muted); }
.confidence[data-level="high"] .dot { background: var(--sage); }
.confidence[data-level="medium"] .dot { background: var(--accent); }
.confidence[data-level="approximate"] .dot { background: transparent; border: 1.5px solid var(--muted); }
.privacy { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-sm); color: var(--muted); }
.privacy svg { flex: none; margin-top: 2px; }
.status-pill { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.error { background: oklch(96% 0.02 45); border: 1px solid oklch(85% 0.05 45); color: oklch(35% 0.08 45); padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-sm); }

/* disclosure */
details.more { border-top: 1px solid var(--line); padding-top: var(--s3); }
details.more > summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--accent-hi); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 36px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent-line); font-size: 14px; line-height: 1; }
details.more[open] > summary::before { content: "–"; }
details.more .more-body { display: grid; gap: var(--s3); padding-top: var(--s3); color: var(--ink-2); font-size: var(--t-sm); }
.pending-tag { font-size: 11px; color: var(--muted); font-style: italic; }

/* ---------- upload ---------- */
.hero { display: grid; gap: var(--s5); max-width: 720px; margin: var(--s4) auto 0; text-align: left; }
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--card);
  padding: var(--card-pad); display: grid; gap: var(--s3); justify-items: start; text-align: left; transition: border-color .15s, background .15s;
}
.drop .btn-row { width: 100%; }
.drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.drop .formats { font-size: var(--t-xs); color: var(--muted); }
.hero-plan { border-radius: var(--r-lg); overflow: hidden; background: var(--stage); border: 1px solid var(--line); }
.hero-plan svg, .hero-plan img { display: block; width: 100%; height: auto; }
.steps3 { display: grid; gap: var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.steps3 div { font-size: var(--t-xs); color: var(--ink-2); border-top: 2px solid var(--line-2); padding-top: var(--s2); display: grid; align-content: start; gap: 2px; }
.steps3 b { display: block; color: var(--ink); font-size: var(--t-sm); }

/* ---------- plan stage ----------
   Safe area: the panel keeps a fixed margin on all four sides. The plan scales into what is
   left and never into the margin, so labels placed in the margin (Top / Right / Bottom / Left,
   the compass, pins near an edge) can never be pushed off the panel by a wide or tall plan. */
:root { --edge-label-h: 40px; --edge-gap: 7px; --safe-y: calc(var(--edge-label-h) + 2 * var(--edge-gap)); --safe-x: 72px; }
@media (max-width: 520px) { :root { --edge-label-h: 38px; --edge-gap: 6px; --safe-x: 62px; } }
.stage {
  position: relative; background: var(--stage); border-radius: var(--r-lg); border: 1px solid var(--line);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  display: grid; place-items: center; padding: var(--safe-y) var(--safe-x);
}
.stage-inner { position: relative; width: 100%; line-height: 0; }
.stage canvas { width: 100%; height: auto; display: block; border-radius: 6px; background: #fff; }
.stage svg.ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage .html-ov { position: absolute; inset: 0; pointer-events: none; line-height: 1.3; }
.stage .html-ov > * { pointer-events: auto; }
.stage .html-ov > .area-tag, .stage .html-ov > .pin, .stage .html-ov > .cell-label, .stage .html-ov > .edge-bar { pointer-events: none; }
.stage-caption { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; font-size: var(--t-xs); color: var(--muted); padding: var(--s2) var(--s1) 0; }

.ov .outline { fill: oklch(55% 0.125 45 / .07); stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ov .outline.invalid { stroke: oklch(50% 0.15 30); stroke-dasharray: 6 4; }
.ov .dim { fill: oklch(97% 0.005 75 / .55); pointer-events: none; }
.ov .grid-line { stroke: oklch(30% 0.02 60 / .45); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.ov .cell-fill { fill: oklch(100% 0 0 / .0); transition: fill .3s; }
.ov .cell-fill.hl { fill: var(--accent-soft); }
.ov .cell-missing { fill: url(#hatch); }
.ov .area { fill: oklch(55% 0.02 60 / .04); stroke: oklch(30% 0.02 60 / .35); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s; }
.ov .area:hover, .ov .area.hover { fill: var(--accent-soft); }
.ov .area.labelled { fill: oklch(50% 0.045 165 / .10); }
.ov .area.selected { fill: oklch(55% 0.125 45 / .22); stroke: var(--accent); stroke-width: 2.5; }
.ov .area.pick { fill: oklch(55% 0.125 45 / .16); stroke-dasharray: 6 4; }
.ov .area.dimmed { opacity: .35; }
.ov .split-line { stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 8 6; }
.ov .draw-rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; }
.ov .focus-ring { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.ov .quad { fill: oklch(55% 0.125 45 / .10); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ov .arrow-mark { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }

.handle {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: transparent; border: 0; padding: 0; cursor: grab; touch-action: none;
}
.handle::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--card); border: 3px solid var(--accent); box-shadow: var(--shadow-1); transition: transform .12s; }
.handle.sel::after, .handle:focus-visible::after { background: var(--accent); transform: scale(1.2); }
/* shape corners: small and quiet until touched, hovered or selected (the plan stays the hero) */
.handle.corner::after { inset: 16px; border-width: 2px; border-color: oklch(55% 0.125 45 / .55); background: oklch(99% 0 0 / .9); box-shadow: none; transition: inset .12s, border-color .12s, background .12s; }
.handle.corner:hover::after, .handle.corner:focus-visible::after, .handle.corner.sel::after, .dragging .handle.corner.sel::after { inset: 12px; border-color: var(--accent); border-width: 3px; box-shadow: var(--shadow-1); }
.handle.corner.sel::after { background: var(--accent); }
/* "+" on a side: hidden until that side is hovered or tapped (or reached with the keyboard) */
.handle.add { width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.stage .html-ov > .handle.add { pointer-events: none; }
.stage .html-ov > .handle.add.show, .stage .html-ov > .handle.add:focus-visible { opacity: 1; pointer-events: auto; }
.handle.add::after { inset: 10px; border-width: 1.5px; border-style: dashed; background: oklch(99% 0 0 / .85); }
.handle.add::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px/1 var(--sans); color: var(--accent-hi); z-index: 1; }
.ov .edge-hit { stroke: transparent; stroke-width: 26; vector-effect: non-scaling-stroke; fill: none; pointer-events: stroke; cursor: copy; }
/* the frame (Step A): photo-crop corners */
.ov .frame-box { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.handle.crop-corner::after { inset: 11px; border-radius: 2px; background: transparent; box-shadow: none; border: 0; border-color: var(--accent); border-style: solid; }
.handle.crop-corner.c0::after { border-width: 4px 0 0 4px; transform: translate(4px, 4px); }
.handle.crop-corner.c1::after { border-width: 4px 4px 0 0; transform: translate(-4px, 4px); }
.handle.crop-corner.c2::after { border-width: 0 4px 4px 0; transform: translate(-4px, -4px); }
.handle.crop-corner.c3::after { border-width: 0 0 4px 4px; transform: translate(4px, -4px); }
.handle.crop-corner:focus-visible::after, .handle.crop-corner:hover::after { border-color: var(--accent-hi); }

.cell-label {
  position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px;
  pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); text-align: center; line-height: 1.05;
}
/* sector letters on a small SOLID chip: always readable, even over printed room names */
.cell-label .dir { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--card); padding: 3px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px oklch(20% 0.02 60 / .12); }
/* the direction in full ("Northeast"), with the code kept as the first fallback */
.cell-label .dir-long { letter-spacing: .02em; }
.cell-label .dir-short { display: none; letter-spacing: .08em; }
.cell-label[data-fit="short"] .dir-long { display: none; }
.cell-label[data-fit="short"] .dir-short { display: inline; }
/* a phone's plan is a third of the width, so the written-out directions take a smaller chip
   there — they still read, and they keep clear of one another */
@media (max-width: 520px) { .cell-label .dir { font-size: 9.5px; padding: 2px 6px; } }
.cell-label .star { font-family: var(--serif); font-size: clamp(18px, 3.2vw, 26px); color: var(--ink); background: var(--card); border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2); }
/* outside-the-home sectors: quieter, but still WCAG AA text contrast (was opacity .45, which failed axe) */
.cell-label.faint .dir, .cell-label.faint .star { color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
.cell-label.faint .dir { font-weight: 600; }
.cell-label.hl .star { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.redraw .cell-label { animation: redraw .7s var(--ease) both; }
.redraw .cell-label:nth-child(2n) { animation-delay: .06s; }
.redraw .cell-label:nth-child(3n) { animation-delay: .12s; }
@keyframes redraw { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 35% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-20deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.edge-btn {
  position: absolute; border: 2px solid var(--accent); background: var(--card);
  color: var(--accent-hi); border-radius: var(--r-pill); padding: 0 12px; height: var(--edge-label-h); min-width: 44px; font-weight: 600; font-size: 14px; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-1); white-space: nowrap;
}
/* each label sits in the reserved margin on its own side, never on the plan */
.edge-btn[data-edge="TOP"] { top: calc(-1 * var(--edge-gap)); transform: translate(-50%, -100%); }
.edge-btn[data-edge="BOTTOM"] { top: calc(100% + var(--edge-gap)); transform: translate(-50%, 0); }
.edge-btn[data-edge="LEFT"] { left: calc(-1 * var(--edge-gap)) !important; transform: translate(-100%, -50%); }
.edge-btn[data-edge="RIGHT"] { left: calc(100% + var(--edge-gap)) !important; transform: translate(0, -50%); }
@media (max-width: 520px) { .edge-btn { padding: 0 9px; font-size: 13px; } }
.edge-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.edge-bar { position: absolute; background: var(--accent); border-radius: 3px; pointer-events: none; opacity: .85; }

.pin {
  position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; pointer-events: none;
  animation: drop .35s var(--ease);
}
@keyframes drop { from { transform: translate(-50%, -140%); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }
.pin .bubble { background: var(--ink); color: var(--paper); border-radius: var(--r-pill); padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-1); }
.pin .bubble .n { background: var(--accent); color: var(--on-accent); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.pin .stem { width: 2px; height: 10px; background: var(--ink); }
/* a tag that had to move off an annual star keeps its foot dot in place and drops the stem */
.pin .bubble { transition: transform .18s var(--ease); }
.pin[data-moved="1"] .stem { visibility: hidden; }
.pin .foot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); margin-top: -2px; }
.pin.active .bubble { background: var(--accent); }
.pin.dim .bubble { background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2); }
.pin.dim .stem { background: var(--line-2); }
/* ---------- sector cards: every area of the home, nothing ranked (2026-09-21) ---------- */
.sector-head { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.sector-star { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 21px; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.sector-head h3 { font-size: 21px; }
.sector-head .sub { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.tone-pill { margin-left: auto; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2); background: var(--card); white-space: nowrap; }
.tone-pill[data-tone="favourable"] { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.tone-pill[data-tone="attention"] { background: var(--accent-soft); color: var(--accent-hi); border-color: transparent; }
.sector-card[data-tone="favourable"] .sector-star { box-shadow: 0 0 0 1px color-mix(in oklch, var(--sage) 45%, transparent); }
.sector-card[data-tone="attention"] .sector-star { box-shadow: 0 0 0 1px var(--accent-line); }
.sector-card[data-presence="partial"] .sector-star { opacity: .85; }
.sector-rooms { font-weight: 600; }
.room-note { border-left: 2px solid var(--line-2); padding-left: var(--s3); display: grid; gap: var(--s2); }
.room-note h4 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.saved-sector-cards { display: grid; gap: var(--s3); }
.saved-sector { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.saved-sector:first-child { border-top: 0; padding-top: 0; }
.saved-do { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; color: var(--ink-2); font-size: var(--t-sm); }

/* tilt guard notice on the shape step */
.tilt-notice { border-left: 3px solid var(--accent-line); display: grid; gap: var(--s3); }
.tilt-notice .btn-row > .btn { flex: 1 1 150px; }

.area-tag { position: absolute; transform: translate(-50%, -50%); background: oklch(99% 0 0 / .92); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; pointer-events: none; white-space: nowrap; color: var(--ink); }
.area-tag.q { color: var(--muted); font-weight: 500; border-style: dashed; }
.area-tag.detected { border-color: var(--accent-line); }

.compass {
  /* lives in the top-right corner of the reserved margin */
  position: absolute; right: 8px; top: 3px; width: 50px; height: 50px; border-radius: 50%; background: oklch(99% 0 0 / .92);
  box-shadow: var(--shadow-1); display: grid; place-items: center; pointer-events: none;
}
.compass .needle { transition: transform .8s var(--ease); }

/* ---------- direction picker ---------- */
.dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); max-width: 380px; }
.dirs button {
  min-height: 64px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card);
  cursor: pointer; display: grid; place-items: center; line-height: 1.1; font-weight: 600; font-size: var(--t-lg);
}
.dirs button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.dirs button:hover { border-color: var(--accent-line); }
.dirs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dirs button[aria-pressed="true"] small { color: var(--on-accent); }
.dirs .mid { display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; }

/* ---------- results ---------- */
.shape-card { display: grid; gap: var(--s3); }
.sector-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.sector-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--paper-2); border-radius: var(--r-sm); font-size: var(--t-sm); }
.sector-list li b { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.sector-list li.part { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, oklch(92% 0.01 75) 6px 8px); }

/* The year's sector map: nine cells, all laid out identically — the direction on the first
   line, "Annual Star" under it, the number large in a fixed-width column on the right. The
   fixed column is what makes the numbers line up down the grid instead of each cell
   arranging itself around the length of its direction name. */
/* Nine equal cells. Two columns on a phone, and 3 x 3 from 560px up on every desktop size —
   never 4 + 4 + 1, because the map is a picture of the nine sectors. */
.sector-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
/* From 560px up the nine cells are laid out as the compass itself — north at the top, the
   centre in the centre — so the map is a picture of the home, not a list in three columns.
   The markup stays in compass reading order (N, NE, E, …) for a screen reader and for the
   two-column phone layout; only the placement changes. */
@media (min-width: 560px) {
  .sector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3);
    grid-template-areas: "nw n ne" "w c e" "sw s se";
  }
  .sector-grid > [data-sector="NW"] { grid-area: nw; }
  .sector-grid > [data-sector="N"]  { grid-area: n; }
  .sector-grid > [data-sector="NE"] { grid-area: ne; }
  .sector-grid > [data-sector="W"]  { grid-area: w; }
  .sector-grid > [data-sector="C"]  { grid-area: c; }
  .sector-grid > [data-sector="E"]  { grid-area: e; }
  .sector-grid > [data-sector="SW"] { grid-area: sw; }
  .sector-grid > [data-sector="S"]  { grid-area: s; }
  .sector-grid > [data-sector="SE"] { grid-area: se; }
}
.sector-grid li {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: auto auto;
  column-gap: var(--s2); row-gap: 2px; align-content: center;
  padding: var(--s3); min-height: 76px; background: var(--paper-2); border-radius: var(--r-sm);
}
.sector-grid .sg-dir { grid-column: 1; grid-row: 1; align-self: end; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.sector-grid .sg-label { grid-column: 1; grid-row: 2; align-self: start; font-size: var(--t-xs); color: var(--muted); }
.sector-grid .sg-star {
  grid-column: 2; grid-row: 1 / span 2; place-self: center;
  font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; width: 100%; }
.meter i { display: block; height: 100%; background: var(--ink-2); }
/* An offer to go further is still part of this product: same paper, same border radius, an
   accent edge to mark it out. It is never a dark slab dropped into a warm page. */
.upsell { background: var(--card); color: var(--ink); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: var(--card-pad); display: grid; gap: var(--s3); box-shadow: var(--shadow-1); }
.upsell h3 { color: var(--ink); font-size: var(--t-lg); }
.upsell p { color: var(--ink-2); }
.upsell .btn { justify-self: start; width: auto; padding: 0 var(--s6); }

.headline-card { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); padding: var(--card-pad); display: grid; gap: var(--s3); box-shadow: var(--shadow-1); }
.headline-card h2 { font-size: clamp(24px, 5vw, 32px); }
.prio { display: grid; gap: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.prio.hot { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.prio-head { display: flex; gap: var(--s3); align-items: flex-start; }
.prio-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; }
.prio-head h3 { font-size: 21px; }
.prio-head .sub { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
.prio h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.prio ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.prio .cols { display: grid; gap: var(--s4); }
/* two columns only when the card itself is wide enough — the reading panel is narrower
   than the window, so a viewport rule used to squeeze these lists into ribbons */
.panel { container-type: inline-size; }
@container (min-width: 520px) { .prio .cols { grid-template-columns: 1fr 1fr; } }
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) { .prio .cols { grid-template-columns: 1fr 1fr; } }
}
.prio .note { font-size: var(--t-sm); color: var(--ink-2); background: var(--paper-2); border-radius: var(--r-sm); padding: var(--s2) var(--s3); }
.maths { font: 12px/1.4 ui-monospace, Menlo, monospace; background: #1f1c19; color: #f3ede6; border-radius: var(--r-sm); padding: var(--s3); overflow-x: auto; }
details.room-more { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s5); }
details.room-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 48px; font-weight: 600; }
details.room-more > summary::-webkit-details-marker { display: none; }
details.room-more[open] { padding-bottom: var(--s5); }

/* ---------- tier 2 questions ---------- */
.q-progress { display: flex; gap: 6px; }
.q-progress span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); }
.q-progress span.done { background: var(--accent); }
.q-progress span.now { background: var(--accent-line); }

/* ---------- tier 3 sheet ---------- */
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s3); box-shadow: var(--shadow-2); animation: rise .25s var(--ease); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--s2); }
.tools button { min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-weight: 600; font-size: var(--t-sm); }
.tools button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.detected-list { display: grid; gap: var(--s2); }
.detected-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3);
  background: var(--paper-2); padding: var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm);
}
.detected-item > .btn-row { justify-content: flex-end; }
@media (max-width: 560px) { .detected-item { grid-template-columns: 1fr; } .detected-item > .btn-row { justify-content: flex-start; } }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: oklch(20% 0.01 60 / .45); display: grid; place-items: end center; padding: 0; animation: fade .2s; }
@media (min-width: 720px) { .modal { place-items: center; padding: var(--s6); } }
@keyframes fade { from { opacity: 0; } }
.modal-card { background: var(--paper); width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.modal-card > * { flex: none; }
@media (min-width: 720px) { .modal-card { border-radius: var(--r-lg); } }
.map-box { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: #e9e4dc; touch-action: none; }
.map-box svg { width: 100%; height: 100%; display: block; }
.map-plan { position: absolute; left: 50%; top: 50%; width: 34%; transform-origin: 50% 50%; pointer-events: none; opacity: .8; }
.range { width: 100%; accent-color: var(--accent); min-height: 44px; }

/* ---------- misc ---------- */
.footer { max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); color: var(--muted); font-size: var(--t-xs); display: grid; gap: var(--s2); border-top: 1px solid var(--line); }
.loading { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-picker { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-pill); font-size: var(--t-sm); z-index: 60; box-shadow: var(--shadow-2); animation: rise .25s; max-width: calc(100vw - 32px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ============================================================
   Multi-storey components (only ever seen after "+ Add another
   floor", a multi-page PDF, or "Yes, more than one plan").
   ============================================================ */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.thumb { display: grid; gap: var(--s2); padding: var(--s2); border-radius: var(--r-md); border: 2px solid var(--line); background: var(--card); cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border-radius: 6px; min-height: 60px; }
.thumb[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.thumb[aria-pressed="true"] span::before { content: "✓ "; }

.name-card { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
.name-thumb { width: 120px; max-width: 35%; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.name-body { display: grid; gap: var(--s2); flex: 1 1 240px; min-width: 0; }
.name-input { text-align: left; min-width: 0; max-width: 100%; }

.ov .plan-box { fill: oklch(55% 0.125 45 / .08); stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: move; }
.box-tag { position: absolute; transform: translate(4px, 4px); background: var(--accent); color: var(--on-accent); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; pointer-events: none; }
.stage .html-ov > .box-tag { pointer-events: none; }
.box-x { position: absolute; transform: translate(-150%, 30%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-1); }

.align-stage { padding: 0; aspect-ratio: 1 / 1; max-height: 72vh; overflow: hidden; }
.align-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; background: #fff; }
.align-svg:active { cursor: grabbing; }
.align-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.align-ref-outline { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 7; vector-effect: non-scaling-stroke; opacity: .9; }
.align-floor-img { mix-blend-mode: multiply; }
.align-floor-outline { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.align-status { justify-self: start; font-size: var(--t-sm); font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.align-status[data-state="good"] { background: var(--sage-soft); color: var(--sage); border-color: transparent; }
.align-status[data-state="check"] { background: var(--accent-soft); color: var(--accent-hi); border-color: transparent; }
.align-controls { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; }
.ctl-group { display: grid; gap: var(--s2); justify-items: start; }
.ctl-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 4px; }
.ctl-row { display: flex; gap: var(--s2); }
.ctl { min-width: 48px; min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); box-shadow: var(--shadow-1); touch-action: manipulation; }
.ctl:hover { border-color: var(--accent-line); }
.ctl:active { background: var(--accent-soft); }

.floor-chips .chip { min-width: 72px; }
.explore { display: grid; gap: var(--s3); }
.explore h3 { font-size: var(--t-lg); }
.floor-q { display: grid; gap: var(--s2); }
.pick-floor-card { min-height: 160px; display: grid; place-items: center; color: var(--muted); text-align: center; }

.floors-panel { display: grid; gap: var(--s2); }
.floor-row { border-top: 1px solid var(--line); padding-top: var(--s2); display: grid; gap: var(--s2); }
.floor-row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); width: 100%; background: none; border: 0; padding: 6px 0; cursor: pointer; min-height: 44px; text-align: left; }
.floor-name { font-weight: 600; }
.floor-status { font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill); }
.floor-status.ok { background: var(--sage-soft); color: var(--sage); }
.floor-status.check { background: var(--accent-soft); color: var(--accent-hi); }
.floor-actions { display: grid; gap: var(--s2); padding-bottom: var(--s2); }
.chip.danger { color: oklch(45% 0.14 30); border-color: oklch(80% 0.06 30); }

.ov .void-shape { fill: oklch(55% 0.06 250 / .16); stroke: oklch(45% 0.08 250); stroke-width: 2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ov .void-shape.pending { fill: var(--accent-soft); stroke: var(--accent); }
.ov .stair-shape { fill: url(#hatch); stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.area-tag.void { border-color: oklch(70% 0.06 250); color: oklch(38% 0.08 250); }
.area-tag.stairs { border-style: solid; }
@media (max-width: 520px) {
  .dpad { grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); }
  .ctl { min-width: 52px; min-height: 52px; }
}
/* phones: keep the plan in view while nudging (controls scroll underneath) */
@media (max-width: 959px) {
  [data-screen="align"] > .stage-col { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 5; background: var(--paper); padding-bottom: var(--s2); }
  [data-screen="align"] .align-stage { aspect-ratio: auto; height: 42vh; max-height: 42vh; }
  /* the plan is pinned above the panel here, so anything scrolled to in the panel must stop
     below it rather than slide underneath */
  [data-screen="align"] > .panel > * { scroll-margin-top: calc(42vh + 76px); }
}
/* the alignment step now uses the same shell as every other step; its heading lives in the panel */
[data-screen="align"] .panel-head .note { justify-self: start; }

/* ---------- floors: the chip near the plan, the offer after Tier 1 ---------- */
.floor-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--s2); min-height: 32px; }
.floor-chip {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans); letter-spacing: .01em;
  padding: 0 11px; min-height: 30px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--line); white-space: nowrap;
}
.floor-chip .door { display: inline-grid; color: var(--accent-hi); }
/* before Tier 1 the chip is information only */
.floor-chip.static { pointer-events: none; cursor: default; user-select: none; -webkit-user-select: none; }
button.floor-chip { cursor: pointer; min-height: 32px; }
button.floor-chip:hover { border-color: var(--accent-line); }
.floor-chip.current, .floor-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-hi); border-color: transparent; }
.floor-add { width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--line-2); background: var(--card); color: var(--accent-hi); font: 600 18px/1 var(--sans); cursor: pointer; display: grid; place-items: center; }
.floor-add:hover { border-color: var(--accent); }
.floors-note { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.note-quiet { font-size: var(--t-xs); color: var(--muted); margin: 0; }
.floors-offer { display: grid; gap: var(--s2); }
.floors-offer h3 { font-size: var(--t-lg); }
.offer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); align-items: center; }
.offer-actions .btn { white-space: nowrap; }
@media (max-width: 520px) { .offer-actions { grid-template-columns: 1fr; } }
.entrance-tag { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--accent-hi); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.recheck p { margin: 0 0 var(--s2); }

/* ---------- the palace grid and the stars (alignment, 2026-09-19) ----------
   Drawn from the same geometry as the sector maths. Very light by default; switchable on screen. */
.ov .palace-grid { pointer-events: none; }
.ov .palace-grid.off { display: none; }
/* The nine-sector division has to be plainly visible over a printed plan: at .30 it read as a
   smudge on a busy drawing. Same grey, carrying its own weight. */
.ov .palace-line { fill: none; stroke: oklch(30% 0.02 60 / .60); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ov .palace-box { fill: none; stroke: oklch(30% 0.02 60 / .72); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
/* a star's own circle is the anchor at the palace centre; its direction chip sits just above it */
.cell-label.with-star { display: block; line-height: 1; }
/* a clear gap between the direction and the star circle, so the two read as two things */
.cell-label.with-star .dir { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap; }
.cell-label[data-fit="star-only"] .dir { display: none; }
.cell-label[data-fit="small"] .dir { display: none; }
.cell-label[data-fit="small"] .star { font-size: 13px; }
.cell-label[data-fit="tiny"] .dir, .cell-label[data-fit="micro"] .dir { display: none; }
.cell-label[data-fit="tiny"] .star { font-size: 10px; }
.cell-label[data-fit="micro"] .star { font-size: 7.5px; box-shadow: none; }
.grid-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-2); cursor: pointer; user-select: none; }
.grid-toggle input { appearance: none; -webkit-appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; margin: 0; cursor: pointer; transition: background .15s; flex: none; }
.grid-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px oklch(20% 0.02 60 / .25); transition: transform .15s; }
.grid-toggle input:checked { background: var(--accent); }
.grid-toggle input:checked::after { transform: translateX(12px); }
.grid-toggle input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- save funnel (2026-09-19) ---------- */
.save-card { display: grid; gap: var(--s3); }
.save-card h3 { font-size: var(--t-xl); }
.save-actions .btn { flex: 1 1 160px; }
.save-form { display: grid; gap: var(--s3); }
.field-label { font-weight: 600; font-size: var(--t-md); }
.save-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.save-row .btn { width: auto; }
@media (max-width: 520px) { .save-row { grid-template-columns: 1fr; } .save-row .btn { width: 100%; } }
.text-input { min-height: 52px; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 0 var(--s4); font-size: var(--t-md); background: var(--card); color: var(--ink); min-width: 0; }
.text-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.check-group { display: grid; gap: var(--s2); }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); align-items: start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; min-height: 32px; }
.check-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.share-card { display: grid; gap: var(--s2); }
.share-url { font: 13px/1.4 ui-monospace, Menlo, monospace; background: var(--paper-2); border-radius: var(--r-sm); padding: var(--s2) var(--s3); overflow-wrap: anywhere; }
.consult-cta { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); display: grid; gap: var(--s2); justify-items: start; }
.consult-cta h3 { font-size: var(--t-lg); }
.consult-cta p { color: var(--ink-2); font-size: var(--t-sm); }
.consult-link { justify-self: start; padding-left: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--accent-hi); }
.btn.danger { background: oklch(45% 0.14 30); }
.btn.danger:hover { background: oklch(40% 0.14 30); }
.danger-link { color: oklch(45% 0.14 30); }
.saved-title { font-size: var(--t-2xl); }
.saved-footer { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 420px; }
.share-cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: grid; justify-items: center; gap: 4px; }
.share-cell b { font-family: var(--serif); font-size: 28px; font-weight: 500; }
.share-cell .dir { font-size: 12px; color: var(--ink-2); }

/* ============================================================
   Page furniture: the static copy, the consultation card and the FAQ.
   Design pass, 2026-09-22. These sections are part of the page, not of
   the flow, so they share one reading width with the hero, and they step
   aside once a plan is open (they stay in the HTML for readers and
   crawlers, which land on the same view).
   ============================================================ */
:root { --measure: 720px; }

.page-copy, .faq { max-width: var(--measure); margin: 0 auto; }
.hero { max-width: var(--measure); }   /* the hero, the cards and the FAQ share one column */
.page-copy { display: grid; gap: var(--s4); margin-top: var(--section-gap); }
.copy-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); display: grid; gap: var(--s3); align-content: start; }
.copy-card h2 { font-size: var(--t-xl); }
.copy-card p { color: var(--ink-2); line-height: 1.65; }
.copy-cta { background: var(--paper-2); border-color: transparent; }
.copy-cta .btn { width: auto; justify-self: start; padding: 0 var(--s6); margin-top: auto; }
@media (max-width: 520px) {
  .copy-card { padding: var(--s5); }
  .copy-cta .btn { width: 100%; }
}

/* the landing hero, before the app takes over: the same rhythm as the panel copy */
.page-copy#intro { margin-top: 0; }
#app > .page-copy { max-width: none; padding: 0; }
.page-copy .how { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); color: var(--ink-2); line-height: 1.6; }
.page-copy .how b { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--section-gap); padding-bottom: var(--s4); }
.faq-title { font-size: var(--t-xl); margin-bottom: var(--s4); }
.faq-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--card-pad); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0; min-height: 56px; font-weight: 600; color: var(--ink); font-size: var(--t-md);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; margin-left: auto; flex: none; display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2);
  color: var(--accent-hi); font-size: 17px; line-height: 1; transition: background .15s, border-color .15s;
}
.faq-item[open] > summary::after { content: "–"; background: var(--accent-soft); border-color: transparent; }
.faq-item > summary:hover::after { border-color: var(--accent-line); }
.faq-item > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 6px; }
.faq-answer { padding: 0 0 var(--s4); max-width: var(--measure); }
.faq-answer p, .faq-item > p { color: var(--ink-2); line-height: 1.65; }
.faq-item > p { padding: 0 0 var(--s4); max-width: var(--measure); }

/* ---------- the flow owns the screen once a plan is open ---------- */
body[data-flow="inflow"] .page-copy:not(#intro),
body[data-flow="inflow"] .faq { display: none; }

/* ---------- feature strip ---------- */
.steps3 { gap: var(--s4); margin-top: var(--s5); }
.steps3 div { border-top: 2px solid var(--accent-line); padding-top: var(--s3); font-size: var(--t-sm); color: var(--muted); }
.steps3 b { font-size: var(--t-md); margin-bottom: 2px; }
@media (max-width: 560px) {
  .steps3 { grid-template-columns: 1fr; gap: var(--s3); }
  .steps3 div { border-top-width: 1px; padding-top: var(--s2); display: flex; gap: var(--s2); align-items: baseline; }
  .steps3 b { margin: 0; }
}

/* ---------- footer: one quiet statement, not a wall ---------- */
.footer { padding-top: var(--s7); gap: var(--s2); text-align: left; }
.footer > * { max-width: var(--measure); margin-inline: auto; width: 100%; }
.footer > div:not(.privacy) { color: var(--muted); }   /* no opacity: it dropped below AA contrast */

/* ---------- small alignments across the flow ---------- */
/* rows of quiet links (I'm not sure · shape check only · undo · start again): one baseline,
   grouped at the left, each only as wide as its words instead of stretched across the panel */
.link-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: flex-start; }
.link-row > .btn, .link-row > .btn.quiet { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 var(--s2); }
.link-row > .link-btn { margin: 0; }

/* The area card's header: the star, then the name and its line, then the tone.
   On a narrow phone the tone drops under the name instead of floating in the corner. */
.sector-card > summary { display: flex; align-items: center; gap: var(--s3); }
.sector-card .sector-head {
  flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s3); row-gap: 6px; align-items: center;
}
.sector-head > .sector-star { grid-column: 1; grid-row: 1; }
.sector-head > div { grid-column: 2; grid-row: 1; min-width: 0; }
.sector-head > .tone-pill { grid-column: 3; grid-row: 1; margin-left: 0; }
@media (max-width: 560px) {
  .sector-head { grid-template-columns: auto minmax(0, 1fr); }
  .sector-head > .tone-pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .sector-head h3 { font-size: var(--t-lg); }
  .sector-head .sub { font-size: var(--t-xs); }
}

/* Tier 1 sector map on a phone: label above the star, never wrapped mid-phrase */
@media (max-width: 560px) {
  .sector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-list li { flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s3); }
  .sector-list li span:first-child { font-weight: 600; color: var(--ink); }
}

/* a collapsed area card: the summary alone must read cleanly and be easy to hit */
.sector-card.room-more { padding: var(--s3) var(--s5); }
.sector-card.room-more > summary { padding: var(--s2) 0; align-items: center; }
.sector-card.room-more > summary::-webkit-details-marker { display: none; }
.sector-card.room-more .sector-head { width: 100%; }
.sector-card.room-more[open] { padding-bottom: var(--s5); }
.sector-card.room-more > summary::after {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-hi); font-size: 16px; line-height: 1;
}
.sector-card.room-more[open] > summary::after { content: "–"; background: var(--accent-soft); border-color: transparent; }
@media (max-width: 420px) {
  .sector-head { row-gap: var(--s1); }
  .sector-card.room-more > summary { gap: var(--s2); }
}

/* On a result screen the words are the point: give the reading column more of the width
   while the plan stays beside it (and sticky). The steps keep the plan-first proportions. */
@media (min-width: 960px) {
  .with-plan[data-screen="tier2"], .with-plan[data-screen="tier3"], .with-plan[data-screen="saved"] {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 1.05fr);
  }
}

/* ============================================================
   Desktop rhythm (2026-09-22, second pass).
   A phone is tight by necessity; a wide screen is not, and the page was
   still using phone-sized gaps on it. Everything below only applies from
   860px up: more air between sections, more padding inside cards, taller
   FAQ rows, and a comfortable measure for every paragraph.
   ============================================================ */
@media (min-width: 860px) {
  /* the landing hero: room to breathe between the promise, the plan and the upload */
  .hero { gap: var(--s6); }
  .hero .lede, .page-copy .lede { max-width: 62ch; font-size: 19px; line-height: 1.6; }
  .drop { padding: var(--s7); gap: var(--s4); }
  .drop .acts, .drop .btn-row { margin-top: var(--s2); }
  .steps3 { margin-top: var(--s7); gap: var(--s6); }
  .steps3 div { padding-top: var(--s4); }
  #app > .page-copy .privacy, .hero .privacy { margin-top: var(--s4); }

  /* the page's own sections */
  .page-copy { gap: var(--s5); }
  .copy-card { gap: var(--s4); }
  .copy-card h2 { font-size: 26px; }
  .copy-card p { font-size: var(--t-md); line-height: 1.7; max-width: 64ch; }
  .copy-cta .btn { margin-top: var(--s2); min-height: 56px; }

  .faq-title { font-size: 26px; margin-bottom: var(--s5); }
  .faq-item > summary { padding: var(--s5) 0; min-height: 64px; font-size: var(--t-lg); }
  .faq-item > summary::after { width: 32px; height: 32px; font-size: 19px; }
  .faq-answer, .faq-item > p { padding-bottom: var(--s5); line-height: 1.7; }

  .footer { padding-top: var(--section-gap); gap: var(--s3); }

  /* inside the flow: the reading panel and its cards get the same treatment */
  .prio .cols { gap: var(--s5); }
}

/* ============================================================
   Desktop: use the screen (2026-09-22, third pass).

   The page was one narrow column down the middle of a wide screen, with
   large empty margins either side. From 1000px up it becomes a real
   two-column page: the words beside the plan, the cards side by side, the
   FAQ in two columns. A phone is untouched — the groups below are
   `display: contents` there, so the order and layout stay exactly as they
   are. The shell follows the window (94vw) up to a comfortable maximum.
   ============================================================ */
.hero-copy, .hero-action, .hero-figure, .hero-tail { display: contents; }

@media (min-width: 1000px) {
  /* The landing page. The thing to DO is on the left, under the promise: eyebrow, headline,
     explanation, upload. The example plan sits on the right as a picture of the result — it
     illustrates, it never competes with the upload card. */
  .hero {
    max-width: none; display: grid; align-items: start;
    grid-template-columns: minmax(420px, 1.02fr) minmax(400px, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--col-gap); row-gap: var(--s6);
  }
  .hero-copy, .hero-action, .hero-figure, .hero-tail { display: grid; align-content: start; gap: var(--s4); }
  .hero-copy   { grid-column: 1; grid-row: 1; gap: var(--s4); }
  .hero-action { grid-column: 1; grid-row: 2; }
  .hero-tail   { grid-column: 1; grid-row: 3; gap: var(--s5); align-self: start; }
  .hero-figure { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .hero h1 { font-size: clamp(36px, 3vw, 46px); }
  .hero .lede { font-size: 19px; max-width: 52ch; }
  .hero-plan svg, .hero-plan img { border-radius: var(--r-lg); }
  .hero-figure .hero-cap { font-size: var(--t-xs); color: var(--muted); text-align: center; }

  /* the page's own sections span the same column as everything else */
  .page-copy, .faq { max-width: none; }
  .page-copy { grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--col-gap); }

  /* the flow: both columns grow with the window instead of sitting in a ribbon.
     On a step the plan is the work surface and takes the larger share; on a result the
     reading does. Two proportions in the whole product, both deliberate. */
  .with-plan { grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr); }
  .with-plan[data-screen="tier2"], .with-plan[data-screen="tier3"], .with-plan[data-screen="saved"] {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 1.15fr);
  }
}

@media (min-width: 1600px) {
  /* a large monitor: the plan grows, and the reading keeps a comfortable measure */
  .with-plan { grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr); }
  .with-plan[data-screen="tier2"], .with-plan[data-screen="tier3"], .with-plan[data-screen="saved"] {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1.2fr);
  }
  .hero h1 { font-size: 50px; }
  .hero .lede { max-width: 54ch; font-size: 20px; }
}


/* ---------- header: the brand is the way back to the site, like any site logo ---------- */
.brand:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer: branded, three groups, never a wall of small print ---------- */
.footer { max-width: none; padding-left: 0; padding-right: 0; }
.footer-in {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: var(--s5); align-items: start;
}
.footer-brand { display: grid; gap: var(--s2); }
.footer-brand .brand { flex-direction: column; margin: 0; }
.footer-brand .brand b { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); }
.footer-brand .brand small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.footer-blurb { max-width: 46ch; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 500; padding: 4px 0; }
.footer-nav a:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.footer-notes { display: grid; gap: var(--s2); }
.footer-notes > * { max-width: 78ch; }
.footer-legal { color: var(--muted); }
@media (min-width: 1000px) {
  .footer-in { grid-template-columns: minmax(280px, 1fr) auto; column-gap: var(--col-gap); }
  .footer-brand { grid-column: 1; grid-row: 1; }
  .footer-nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: var(--s6); }
  .footer-notes { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); padding-top: var(--s5); }
}

/* ============================================================
   Inside the workflow this is an application, not a marketing page: the site footer folds down
   to the lines that must stay visible (privacy, the pre-check note, the copyright). Nothing is
   removed from the HTML — a visitor arriving at the page, and every crawler, still gets all of it.
   ============================================================ */
body[data-flow="inflow"] .footer { padding-top: var(--s4); padding-bottom: var(--s5); gap: 0; }
body[data-flow="inflow"] .footer-brand,
body[data-flow="inflow"] .footer-nav,
body[data-flow="inflow"] .footer-legal { display: none; }
body[data-flow="inflow"] .footer-notes { border-top: 0; padding-top: 0; gap: var(--s1); font-size: 11.5px; line-height: 1.5; }
body[data-flow="inflow"] .footer-notes > * { max-width: 92ch; }
body[data-flow="inflow"] .footer .privacy { gap: 6px; }
body[data-flow="inflow"] .footer .privacy svg { width: 12px; height: 12px; margin-top: 1px; }

/* ============================================================
   Alignment pass (2026-09-22, fourth): the pieces that had no home in the system.
   Everything here uses the layout tokens; no screen carries its own numbers.
   ============================================================ */

/* the landing picture and its one-line caption */
.hero-figure .hero-cap { font-size: var(--t-xs); color: var(--muted); }

/* the upload card owns its own error: the message belongs to the thing that caused it */
.drop .error { width: 100%; text-align: left; }

/* a row of secondary choices under a primary action: grouped left, each as wide as its words */
.q-actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); align-items: center; }
.q-actions > .btn { flex: 0 0 auto; width: auto; }
.q-actions > .btn.quiet { padding: 0 2px; }

/* ---------- the reading: areas holding your rooms in full, the summaries two-up ----------
   One container, compass order untouched. On a wide screen the collapsed summaries sit two to a
   row and an open card spans both, which roughly halves the scroll without moving a single
   sector out of its place in the compass order. */
.sector-cards { display: grid; gap: var(--panel-gap); }
.panel { container-type: inline-size; }
@container (min-width: 780px) {
  /* two summaries to a row, both the same height, an open card across the width */
  .sector-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; }
  .sector-cards > .sector-card.prio { grid-column: 1 / -1; }
  .sector-cards > .sector-card.room-more:not([open]) { display: grid; align-content: center; }
}

/* ---------- the floor tabs live with the plan they control ---------- */
.floor-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }

/* ---------- a step that has no plan beside it: one centred card, never a strip in a blank page ---------- */
.screen.solo { justify-items: center; }
.solo-card {
  width: 100%; max-width: 620px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--card-pad); display: grid; gap: var(--panel-gap); box-shadow: var(--shadow-1); align-content: start;
}
.solo-card .field { display: grid; gap: var(--s2); }
.solo-card .field > h3 { font-size: var(--t-md); font-weight: 600; font-family: var(--sans); color: var(--ink-2); }
.solo-card .link-btn { justify-self: center; }

/* ---------- tier 3: the utility controls are one group, not four loose things ---------- */
.panel-foot { display: grid; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--panel-gap); }
.panel-foot .foot-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.panel-foot .foot-links > * { margin: 0; }
.panel-foot details.more { border-top: 0; padding-top: 0; }

/* ---------- tilt: while the decision is open, nothing else competes with it ---------- */
.tilt-notice { border: 1px solid var(--accent-line); background: var(--card); display: grid; gap: var(--s3); }
.tilt-notice .btn-row > .btn { flex: 1 1 180px; }

/* ---------- multi-floor alignment: a big viewer, a proper control panel beside it ---------- */
@media (min-width: 960px) {
  [data-screen="align"] { grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); }
  [data-screen="align"] .align-stage { aspect-ratio: 4 / 3; }
}

/* ---------- keep every screen inside the window ----------
   (no overflow-x: hidden on html/body — it would turn the page into a scroll container and
   break the sticky plan column. The layout is simply built not to overflow.) */
img, svg, canvas { max-width: 100%; }
.solo-card.wide { max-width: 860px; }

/* ============================================================
   Mobile polish (2026-09-22, sixth pass). Phone only — nothing here applies above 640px.

   The phone was using the desktop type scale at full size, so a 390px screen read as if it
   were trying to fill itself: a 28px headline, an 18px helper line, 24px card titles and a
   44px-tall year switch in a 68px bar. Everything below steps the scale down one notch and
   tightens the line-height to match. No layout, no colour, no wording, no logic.
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --t-xs: 11.5px; --t-sm: 13.5px; --t-md: 15px; --t-lg: 17px; --t-xl: 21px;
    --t-2xl: clamp(24px, 6.4vw, 27px);
    --control-h: 48px;                 /* still comfortably above a 44px touch target */
  }
  body { font-size: var(--t-md); line-height: 1.5; }
  h1 { line-height: 1.16; }
  h2, h3 { line-height: 1.2; }
  .lede { font-size: 16.5px; line-height: 1.5; }
  .hint, .note-quiet { line-height: 1.45; }
  .step-count { font-size: 11px; letter-spacing: .08em; }
  .kicker { font-size: 11px; }
  .btn { font-size: 14.5px; }                 /* a main action stays confident, just not shouty */
  .prio p, .sector-card p, .faq-answer p, .copy-card p, .page-copy p { line-height: 1.55; }

  /* the top bar: compact and level, with the year the loudest thing in the control */
  .top-in { min-height: 56px; padding: 6px var(--gutter); gap: var(--s2); }
  html { scroll-padding-top: 70px; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 9px; letter-spacing: .12em; margin-top: 1px; }
  .year-switch { padding: 2px; }
  .year-switch button { min-height: 34px; padding: 0 9px; font-size: 12.5px; gap: 4px; }
  .year-switch button small { font-size: 9.5px; font-weight: 500; color: var(--muted); }
  .year-switch button[aria-pressed="true"] small { color: var(--ink-2); }
  .icon-btn { min-width: 38px; min-height: 38px; width: 38px; }   /* still a comfortable tap */

  /* the workflow footer: the same two sentences, quietly */
  body[data-flow="inflow"] .footer { padding-top: var(--s3); padding-bottom: var(--s4); }
  body[data-flow="inflow"] .footer-notes,
  body[data-flow="inflow"] .footer .privacy { font-size: 11px; line-height: 1.45; }
}

/* a very small phone (320–380px): the same bar, one notch tighter, so nothing is ever cut off */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .top-in { gap: 6px; }
  .brand small { font-size: 8.5px; letter-spacing: .1em; }
  .year-switch button { padding: 0 6px; font-size: 12px; gap: 3px; }
  .year-switch button small { font-size: 9px; }
}