/* Measure Once — Edge design system tokens (PRD §7).
   No AI accent token appears anywhere — there is no AI in this product. AC-24. */

:root {
  --surface-base:#FAF8F5;
  --surface-raised:#FFFFFF;
  --surface-sunken:#F2EEE8;
  --surface-inverse:#26221E;
  --text-on-inverse:#FAF8F5;
  --border-subtle:#E7E1D8;
  --border-strong:#8A8075;
  --text-primary:#26221E;
  --text-secondary:#5C5449;
  --text-tertiary:#786E62;
  --action-primary:#26221E;
  --action-on-primary:#FAF8F5;
  --status-danger:#9C4A3E;
  --status-warning:#8A5D24;

  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:40px; --space-2xl:64px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;

  --font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-ui:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --dur-fast:120ms; --dur-med:200ms;
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base:#1C1917;
    --surface-raised:#26221E;
    --surface-sunken:#151311;
    --surface-inverse:#F0EBE4;
    --text-on-inverse:#1C1917;
    --border-subtle:#332E29;
    --border-strong:#8A8075;
    --text-primary:#F0EBE4;
    --text-secondary:#B8AFA4;
    --text-tertiary:#8A8075;
    --action-primary:#F0EBE4;
    --action-on-primary:#1C1917;
    --status-danger:#E0897B;
    --status-warning:#D9A05B;
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--surface-raised); color:var(--text-primary);
  padding:var(--space-sm) var(--space-md); border:1px solid var(--border-strong);
}
.skip-link:focus { left:var(--space-md); top:var(--space-md); }

.noscript {
  margin:var(--space-md); padding:var(--space-md);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  background:var(--surface-sunken); max-width:680px;
}

.shell { max-width:680px; margin:0 auto; padding:var(--space-md) var(--space-md) var(--space-2xl); }

/* ---- global chrome ---- */
.chrome {
  display:flex; align-items:center; gap:var(--space-sm);
  min-height:48px; margin-bottom:var(--space-lg); flex-wrap:wrap;
}
.progress { margin:0 auto 0 0; font-size:13px; line-height:1.4; color:var(--text-tertiary); }
.chrome .back + .progress { margin-left:var(--space-xs); }

.unit-toggle {
  display:flex; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:2px; margin:0; gap:2px; background:var(--surface-raised);
}
.unit-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.unit-toggle label {
  min-height:40px; display:flex; align-items:center; padding:0 var(--space-sm);
  border-radius:var(--radius-sm); font-size:14px; cursor:pointer; color:var(--text-secondary);
}
.unit-toggle input:checked + label { background:var(--action-primary); color:var(--action-on-primary); }
.unit-toggle input:focus-visible + label { outline:2px solid var(--border-strong); outline-offset:2px; }

/* ---- type ---- */
h1 { font-family:var(--font-display); font-weight:600; font-size:32px; line-height:1.19; margin:0 0 var(--space-sm); }
h2 { font-family:var(--font-display); font-weight:600; font-size:24px; line-height:1.25; margin:0 0 var(--space-sm); }
h3 { font-size:19px; line-height:1.37; font-weight:600; margin:0 0 var(--space-xs); }
p { margin:0 0 var(--space-md); max-width:68ch; }
.lead { font-size:17px; line-height:1.59; color:var(--text-secondary); }
.meta { font-size:13px; line-height:1.4; color:var(--text-tertiary); }
.body-lg { font-size:17px; line-height:1.59; }

/* ---- blocks ---- */
.well {
  background:var(--surface-sunken); border-radius:var(--radius-lg);
  padding:var(--space-md); margin:0 0 var(--space-md);
  color:var(--text-primary); /* no tertiary text on sunken — PRD §7 ruling */
}
.section { margin-bottom:var(--space-xl); }

ul.rules { list-style:none; padding:0; margin:0 0 var(--space-lg); }
ul.rules li {
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:var(--space-md);
  margin-bottom:var(--space-sm); font-size:17px; line-height:1.59; max-width:68ch;
}
ul.bullets { padding-left:1.15em; margin:0 0 var(--space-md); max-width:68ch; font-size:17px; line-height:1.59; }
ul.bullets li { margin-bottom:var(--space-xs); }

/* ---- buttons ---- */
.actions { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-lg); }
.btn {
  font:inherit; font-weight:500; cursor:pointer;
  min-height:48px; padding:0 var(--space-lg);
  border-radius:var(--radius-md); border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline:2px solid var(--border-strong); outline-offset:2px; }
.btn-primary { background:var(--action-primary); color:var(--action-on-primary); }
.btn-primary:hover:not(:disabled) { opacity:.88; }
.btn-secondary { background:var(--surface-raised); color:var(--text-primary); border-color:var(--border-strong); }
.btn-tertiary { background:transparent; color:var(--text-secondary); padding:0 var(--space-sm); min-height:44px; }
.btn-tertiary:hover { color:var(--text-primary); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.full { flex:1 1 100%; }
@media (min-width:520px) { .btn.full { flex:0 0 auto; } }

.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm { width:16px; height:16px; }

/* ---- measurement card ---- */
/* Diagrams: the garment or body is drawn back, the tape is drawn forward.
   The dashed half of a tape band is the part passing behind the body.
   Sized by height, since the figure is tall and narrow and the shirt is square. */
.diagram {
  display:block; height:190px; width:auto; max-width:100%;
  margin:var(--space-xs) auto var(--space-lg);
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.diagram .outline path { fill:none; stroke:var(--border-strong); stroke-width:1.3; vector-effect:non-scaling-stroke; }
.diagram .tape { stroke:var(--text-primary); stroke-width:2.2; vector-effect:non-scaling-stroke; }
.diagram .tape-back { stroke:var(--text-primary); stroke-width:2.2; vector-effect:non-scaling-stroke;
  stroke-dasharray:3 4; opacity:.5; }

@media (max-height:700px) { .diagram { height:150px; } }

/* Figure picker. A picture control, not a question about the user — it sits with
   the diagram, not with the input, and changes nothing that is measured. */
.diagram-block { margin-bottom:var(--space-lg); }
.diagram-block .diagram { margin-bottom:var(--space-xs); }
.figure-toggle {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2xs);
  border:0; margin:0; padding:0;
}
.figure-toggle-label { margin-right:var(--space-2xs); }
.figure-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.figure-toggle label {
  min-height:44px; display:inline-flex; align-items:center; padding:0 var(--space-sm);
  font-size:14px; color:var(--text-secondary); cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-sm);
}
.figure-toggle input:checked + label {
  color:var(--text-primary); border-color:var(--border-strong); background:var(--surface-raised);
}
.figure-toggle input:focus-visible + label { outline:2px solid var(--border-strong); outline-offset:2px; }

.field { margin-top:var(--space-lg); }
.field label.field-label { display:block; font-size:14px; line-height:1.43; font-weight:500; margin-bottom:var(--space-xs); }
.input-row { display:flex; align-items:stretch; gap:var(--space-xs); max-width:280px; }
input[type="text"], input[type="number"] {
  font:inherit; font-size:17px; font-feature-settings:"tnum" 1;
  color:var(--text-primary); background:var(--surface-raised);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:var(--space-sm); min-height:48px; width:100%;
}
input:focus-visible { outline:2px solid var(--border-strong); outline-offset:2px; }
.input-suffix {
  display:flex; align-items:center; padding:0 var(--space-sm);
  color:var(--text-secondary); font-size:15px;
}
.field.error input { border-color:var(--status-danger); border-width:2px; }
.note { display:flex; gap:var(--space-xs); align-items:flex-start; margin-top:var(--space-xs); font-size:14px; line-height:1.43; max-width:68ch; }
.note svg { flex:0 0 auto; margin-top:3px; }
.note-error { color:var(--status-danger); }
.note-warning { color:var(--status-warning); }
.note-info { color:var(--text-secondary); }
.reminder { margin-top:var(--space-md); font-size:13px; line-height:1.4; color:var(--text-tertiary); }

/* ---- review ---- */
.group { margin-bottom:var(--space-xl); }
.group h3 { color:var(--text-secondary); font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-sm); }
.rows { list-style:none; margin:0; padding:0; }
.rows li { margin-bottom:var(--space-sm); }
.row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  width:100%; min-height:56px; text-align:left; font:inherit; cursor:pointer;
  background:var(--surface-raised); color:var(--text-primary);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:var(--space-sm) var(--space-md);
}
.row:hover { border-color:var(--border-strong); }
.row:focus-visible { outline:2px solid var(--border-strong); outline-offset:2px; }
.row .val { font-feature-settings:"tnum" 1; color:var(--text-secondary); white-space:nowrap; }
.row .name { display:flex; flex-direction:column; }
.row .row-warn { font-size:13px; color:var(--status-warning); }
.row-edit { background:var(--surface-raised); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:var(--space-md); }
.row-edit .actions { margin-top:var(--space-sm); }
.link {
  background:none; border:0; font:inherit; color:var(--text-primary);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  padding:var(--space-xs) 0; min-height:44px;
}
.link:focus-visible { outline:2px solid var(--border-strong); outline-offset:2px; }
.skipped { margin-top:var(--space-sm); display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-md); }
.counter { text-align:right; font-size:13px; color:var(--text-tertiary); max-width:100%; }

/* ---- export ---- */
pre.export {
  background:var(--surface-sunken); color:var(--text-primary);
  border-radius:var(--radius-lg); padding:var(--space-md);
  font-family:var(--font-ui); font-feature-settings:"tnum" 1;
  font-size:14px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  margin:0 0 var(--space-md); user-select:text;
}

.toast-host { position:fixed; left:0; right:0; bottom:var(--space-lg); display:flex; justify-content:center; pointer-events:none; padding:0 var(--space-md); }
.toast {
  background:var(--surface-inverse); color:var(--text-on-inverse);
  padding:var(--space-sm) var(--space-lg); border-radius:var(--radius-lg);
  font-size:15px; opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.toast.in { opacity:1; transform:none; }

.screen { animation:fade var(--dur-fast) var(--ease-out); }
@keyframes fade { from { opacity:0 } to { opacity:1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0s !important; transition-duration:0s !important; transform:none !important; }
}

/* [hidden] must beat the flex display rules above */
[hidden] { display:none !important; }