/* Dessins 3990 — wheat canvas, ink type, yellow punctuation.
   Editorial and quiet: hairlines instead of shadows, one dark action per screen.
   Tokens first; components below only use tokens. */

/* Inter (SIL Open Font License 1.1), variable weight + optical size.
   Served from this site: the security policy only allows its own files. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* Surfaces: a warm wheat canvas, white paper only where things lift off it */
  --bg: #F4F0E8;
  --bg-glow: #FBE7AE;
  --surface: #FFFFFF;
  --surface-2: #F8F6F0;
  --surface-3: #F0ECE2;
  --field: #FBFAF6;
  --line: #E7E2D7;
  --line-strong: #D7D0C1;

  /* Text */
  --text: #25221C;
  --text-2: #6A6458;
  --text-3: #A29B8D; /* icons and placeholders only */

  /* Accent: yellow, used as punctuation */
  --accent: #F2C230;
  --accent-hover: #EDB81F;
  --accent-soft: #FCF1CC;
  --accent-line: #EBD288;
  --accent-ink: #25221C;
  --hl: #FBDF86;
  --link: #8A6400;
  --ring: #A87700;
  --ring-soft: rgba(242, 194, 48, .34);

  /* The one dark action */
  --primary: #25221C;
  --primary-hover: #3A352C;
  --primary-press: #110F0B;
  --on-primary: #FFFCF4;
  --done-bg: var(--text);
  --done-fg: var(--accent);

  /* Feedback */
  --ok: #2E7438;
  --ok-soft: #E6F1E3;
  --danger: #B42318;
  --danger-soft: #FCEAE6;
  --row-hover: #FCFBF8;
  --row-selected: #FFF8DF;

  /* Floating material (bulk bar, toasts) */
  --float-bg: rgba(37, 33, 26, .88);
  --float-solid: #25221C;
  --float-line: rgba(255, 248, 231, .10);
  --float-text: #FFF9EC;
  --float-muted: #CFC5AF;
  --float-chip: rgba(255, 248, 231, .08);
  --float-chip-hover: rgba(255, 248, 231, .16);

  --topbar-bg: rgba(244, 240, 232, .76);
  --scrim: rgba(37, 28, 12, .28);

  /* Hero art: golden-hour light on a drawing sheet */
  --art-sky-1: #FFE49A;
  --art-sky-2: #F7C9A0;
  --art-sky-3: #F3E6C8;
  --art-paper: #FFFEFB;
  --art-ink: #2F2A22;
  --art-dim: #8A6400;
  --art-faint: #D9D1C0;
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .7);

  /* Processes: text, fill, outline, dot */
  --p-cnc-fg: #6E4A00;     --p-cnc-bg: #FCEBC0;     --p-cnc-line: #EFCF7A;     --p-cnc-dot: #F2C230;
  --p-scie-fg: #93391A;    --p-scie-bg: #FBE3D6;    --p-scie-line: #EDB89D;    --p-scie-dot: #E8865A;
  --p-tour-fg: #45601A;    --p-tour-bg: #E8F0D6;    --p-tour-line: #C3D59A;    --p-tour-dot: #9DBE5C;
  --p-plieuse-fg: #6F3863; --p-plieuse-bg: #F5E3EF; --p-plieuse-line: #DFB6D3; --p-plieuse-dot: #CF8BC0;
  --p-other-fg: #5B5140;   --p-other-bg: #EFE9DC;   --p-other-line: #D9CBAE;   --p-other-dot: #BBA985;

  /* Depth: almost none on the page; floating things only */
  --shadow-control: 0 1px 2px rgba(60, 44, 14, .10);
  --shadow-thumb: 0 1px 3px rgba(60, 44, 14, .14), 0 0 0 .5px rgba(60, 44, 14, .08);
  --shadow-glass: 0 12px 32px -16px rgba(80, 52, 6, .38), 0 1px 2px rgba(80, 52, 6, .08);
  --shadow-float: 0 24px 56px -18px rgba(40, 28, 8, .42), 0 4px 14px rgba(40, 28, 8, .12);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Motion. Springs sampled as linear(): critically damped (UI default)
     and a touch of overshoot for sheets, per Apple's damping/response values. */
  --ease-spring: linear(0, .0401, .1311, .2427, .3573, .465, .5614, .6446, .7149, .7731, .8206, .859, .8897, .9141, .9334, .9485, .9603, .9695, .9766, .9821, .9863, .9896, .9921, .994, .9954, .9965, .9974, 1);
  --ease-sheet: linear(0, .0378, .1274, .2421, .3638, .4813, .5881, .681, .759, .8228, .8734, .9127, .9424, .9643, .9799, .9907, .9979, 1.0023, 1.0048, 1.006, 1.0063, 1.006, 1.0054, 1.0047, 1.004, 1.0032, 1.0026, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-spring: 470ms;
  --dur-sheet: 440ms;
  --dur-fast: 140ms;
  --dur-exit: 200ms;
  --enter-shift: 18px;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --w-display: 460;
  --w-title: 520;
  --w-strong: 560;

  /* Layout */
  --topbar-h: 64px;
  --gutter: 16px;
  --pad: 18px;
  --stage-gap: 56px;
  --content: 1120px;
}

@media (min-width: 640px) { :root { --gutter: 24px; --pad: 24px; --stage-gap: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --pad: 28px; --stage-gap: 80px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13110E;
    --bg-glow: #2A2210;
    --surface: #1C1915;
    --surface-2: #211E19;
    --surface-3: #2A2620;
    --field: #181511;
    --line: #2D2922;
    --line-strong: #413B31;

    --text: #F3EFE7;
    --text-2: #A9A193;
    --text-3: #7A7366;

    --accent: #F5C842;
    --accent-hover: #FFD45C;
    --accent-soft: #2C2410;
    --accent-line: #574515;
    --accent-ink: #1A160E;
    --hl: rgba(245, 200, 66, .30);
    --link: #F5C842;
    --ring: #F5C842;
    --ring-soft: rgba(245, 200, 66, .28);

    --primary: #F3EFE7;
    --primary-hover: #FFFFFF;
    --primary-press: #DCD5C8;
    --on-primary: #17140F;
    --done-fg: #17140F;

    --ok: #86CB89;
    --ok-soft: #1B2A1C;
    --danger: #FF8E7E;
    --danger-soft: #361C18;
    --row-hover: #201D18;
    --row-selected: #2A2310;

    --float-bg: rgba(46, 41, 33, .88);
    --float-solid: #2E2921;
    --float-line: rgba(255, 248, 231, .12);

    --topbar-bg: rgba(19, 17, 14, .74);
    --scrim: rgba(0, 0, 0, .5);

    --art-sky-1: #5A4413;
    --art-sky-2: #4A2B1A;
    --art-sky-3: #221C13;
    --art-paper: #1F1B16;
    --art-ink: #EDE6D8;
    --art-dim: #F5C842;
    --art-faint: #3D372D;
    --glass: rgba(36, 32, 26, .72);
    --glass-line: rgba(255, 248, 231, .10);

    --p-cnc-fg: #F7D27A;     --p-cnc-bg: #3A2E12;     --p-cnc-line: #5C4815;
    --p-scie-fg: #F4AE8C;    --p-scie-bg: #3D2219;    --p-scie-line: #63362A;
    --p-tour-fg: #C3DA8C;    --p-tour-bg: #26301A;    --p-tour-line: #3F4F27;
    --p-plieuse-fg: #E8B3DC; --p-plieuse-bg: #35202F; --p-plieuse-line: #57354D;
    --p-other-fg: #D8CBB0;   --p-other-bg: #2E281E;   --p-other-line: #4C412E;

    --shadow-control: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06);
    --shadow-glass: 0 14px 34px -14px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-float: 0 24px 56px -14px rgba(0, 0, 0, .7), 0 4px 14px rgba(0, 0, 0, .4);
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
}
html.has-bulk { scroll-padding-bottom: 140px; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 400 1rem/1.5 var(--font);
  font-optical-sizing: auto;
  font-feature-settings: "ss03";
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(1200px 560px at 78% -260px, var(--bg-glow), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--link); }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
strong, b { font-weight: var(--w-strong); }
[hidden] { display: none !important; }

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.muted { color: var(--text-2); }
.tabular { font-variant-numeric: tabular-nums; }
.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;
}

:where(a, button, summary, input[type="checkbox"], [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--w-strong);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  /* Scroll edge: a hairline only once content slides underneath. */
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 200ms var(--ease-out);
}
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.topbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: var(--content);
  height: var(--topbar-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-width: 0;
  padding: 4px 6px 4px 0;
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name {
  font-size: 1.0625rem;
  font-weight: var(--w-strong);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-name span { color: var(--text-2); font-weight: 460; }

/* Where am I: the three steps, always in view */
.steps-nav { display: flex; align-items: center; gap: 4px; }
.nav-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.nav-step + .nav-step { margin-left: 20px; }
.nav-step + .nav-step::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 16px;
  margin-right: 4px;
  border-top: 1px solid var(--line-strong);
}
.nav-step:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.nav-step[data-state="current"] { color: var(--text); }
.nav-dot, .step-badge {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.nav-dot { width: 22px; height: 22px; font-size: .6875rem; }
.nav-dot > *, .step-badge > * { grid-area: 1 / 1; transition: opacity 180ms var(--ease-out), transform var(--dur-spring) var(--ease-spring); }
.nav-dot .icon, .step-badge .icon { stroke-width: 2.8; opacity: 0; transform: scale(.4); }
.nav-dot .icon { width: 12px; height: 12px; }
[data-state="current"] > .nav-dot, .step-badge[data-state="current"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
[data-state="done"] > .nav-dot, .step-badge[data-state="done"] { border-color: var(--done-bg); background: var(--done-bg); color: var(--done-fg); }
[data-state="done"] > .nav-dot span, .step-badge[data-state="done"] span { opacity: 0; transform: scale(.4); }
[data-state="done"] > .nav-dot .icon, .step-badge[data-state="done"] .icon { opacity: 1; transform: none; }

.account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  min-height: 40px;
  max-width: 100%;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform 160ms var(--ease-out);
}
.account:hover { border-color: var(--line-strong); }
.account:active { transform: scale(.97); transition-duration: 80ms; }
.account-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.account-avatar .icon { width: 15px; height: 15px; }
.account-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account.is-signed-in .account-avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #4CAF50;
}

/* ------------------------------------------------------------------ page */
.page {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  outline: none;
}
html.has-bulk .page { padding-bottom: 150px; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 56px;
  padding: 56px 0 8px;
}
.hero-copy { display: grid; justify-items: start; gap: 22px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 500;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.hero h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -.035em;
}
@media (min-width: 400px) { .hero h1 .hl { white-space: nowrap; } }
/* A highlighter stroke, like marking up a print */
.hl {
  background-image: linear-gradient(transparent 64%, var(--hl) 64%, var(--hl) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}
.lead {
  max-width: 44ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Hero art: a drawing sheet in warm light, with UI floating over it */
.hero-art {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 80% at 12% 6%, var(--art-sky-1), transparent 70%),
    radial-gradient(65% 75% at 100% 100%, var(--art-sky-2), transparent 72%),
    var(--art-sky-3);
  overflow: hidden;
  isolation: isolate;
}
.art-sheet {
  position: absolute;
  inset: 13% 7% 15% 13%;
  border-radius: var(--r-md);
  background: var(--art-paper);
  box-shadow: 0 30px 60px -30px rgba(90, 58, 6, .45), 0 0 0 1px rgba(90, 58, 6, .06);
}
.art-svg { display: block; width: 100%; height: 100%; }
.art-frame { fill: none; stroke: var(--art-faint); stroke-width: 1; }
.art-part { fill: none; stroke: var(--art-ink); stroke-width: 1.6; }
.art-center { fill: none; stroke: var(--art-dim); stroke-width: .8; stroke-dasharray: 9 3 2 3; opacity: .7; }
.art-ext { fill: none; stroke: var(--art-faint); stroke-width: .9; }
.art-dim { fill: none; stroke: var(--art-dim); stroke-width: .9; }
.art-arrow { fill: var(--art-dim); }
.art-text { fill: var(--art-dim); font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.art-label { fill: var(--art-ink); font-size: 8.5px; font-weight: 600; letter-spacing: .06em; }

.art-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  box-shadow: var(--shadow-glass);
  color: var(--text);
  white-space: nowrap;
}
.art-chip-proc {
  top: 6%;
  left: 6%;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.art-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-cnc-dot); }
.art-chip-sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.art-chip-muted { color: var(--text-2); font-weight: 500; letter-spacing: 0; }
.art-chip-done {
  right: 5%;
  bottom: 6%;
  padding: 10px 16px 10px 10px;
  border-radius: var(--r-lg);
}
.art-chip-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}
.art-chip-check .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.art-chip-text { display: grid; line-height: 1.3; }
.art-chip-text strong { font-size: .875rem; }
.art-chip-text span { font-size: .75rem; color: var(--text-2); }

/* Stages: title on the canvas, content on paper */
.stage { margin-top: var(--stage-gap); }
.stage-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.stage-head h2 {
  font-size: 1.375rem;
  font-weight: var(--w-title);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.stage-sub { margin-top: 2px; font-size: .9375rem; color: var(--text-2); }
.step-badge { width: 30px; height: 30px; margin-top: 0; font-size: .8125rem; }
.step-badge .icon { width: 15px; height: 15px; }

.panel {
  position: relative;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.panel-flush { padding: 0; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast),
              box-shadow var(--dur-fast), transform 160ms var(--ease-out), opacity var(--dur-fast);
}
/* Feedback on press, not on release. */
.btn:active:not(:disabled) { transform: scale(.97); transition-duration: 80ms; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn .icon { width: 17px; height: 17px; }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--shadow-control);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--primary-press); }

.btn-secondary { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }

.btn-quiet { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); }

.btn-danger-quiet { background: transparent; border-color: var(--line-strong); color: var(--danger); }
.btn-danger-quiet:hover:not(:disabled) { background: var(--danger-soft); border-color: transparent; }

.btn-sm { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: var(--r); }
.btn-sm .icon { width: 15px; height: 15px; }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 1rem; border-radius: var(--r-md); }
.btn-block { width: 100%; }

.btn .spinner { display: none; animation: spin .8s linear infinite; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading { cursor: progress; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform 160ms var(--ease-out);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ step 1 */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 22px;
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.notice-text { display: grid; gap: 2px; flex: 1 1 260px; }
.notice-text strong { font-size: .9375rem; }
.notice-text span { font-size: .875rem; color: var(--text-2); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice .btn-quiet { background: transparent; border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.notice .btn-quiet:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }

.doc-form.is-locked .btn-primary { background: var(--surface-2); color: var(--text-2); box-shadow: none; border-color: var(--line-strong); }
/* Once a document is loaded, the dark action moves on to the next step. */
.doc-form.is-done .btn-primary { background: var(--surface); color: var(--text); box-shadow: none; border-color: var(--line-strong); }
.doc-form.is-done .btn-primary:hover:not(:disabled) { background: var(--surface-2); }
.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
}
.input-row { display: flex; gap: 10px; }
.input-wrap { position: relative; flex: 1; min-width: 0; }
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
}

.input-wrap input,
.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--field);
  color: var(--text);
  font-size: 1rem; /* 16px: no zoom on iOS */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.input-wrap input { padding-left: 42px; text-overflow: ellipsis; }
.input-wrap input:hover, .input:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-3)); }
.input-wrap input::placeholder, .input::placeholder, .search input::placeholder { color: var(--text-3); }
.input-wrap input:focus, .input:focus {
  outline: none;
  border-color: var(--ring);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--ring-soft);
}
input[aria-invalid="true"] { border-color: var(--danger) !important; }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent) !important; }

.help { margin-top: 10px; font-size: .8125rem; color: var(--text-2); }
.help code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font: 500 .75rem var(--mono);
  color: var(--text);
}
.field-error {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--danger);
  white-space: pre-line;
}

.doc-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.doc-summary-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-summary-main > div { display: grid; min-width: 0; }
.doc-summary-main strong { overflow-wrap: anywhere; font-size: .9375rem; }
.doc-summary-main span { font-size: .8125rem; }
.doc-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--link);
}
.doc-icon .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ step 2 */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
}

.search { position: relative; flex: 1 1 240px; }
.search .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  color: var(--text-3);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--field);
  font-size: 1rem;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.search input:focus {
  outline: none;
  border-color: var(--ring);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--ring-soft);
}

/* Segmented control with a sliding thumb (springs, interruptible: it's a transition) */
.segmented {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r);
  background: var(--surface-3);
}
.segmented button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { color: var(--text); }
.segmented .count {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  font-weight: 500;
}
.segmented-thumb {
  position: absolute;
  top: 3px;
  left: 0;
  width: var(--w, 0);
  height: calc(100% - 6px);
  border-radius: var(--r-xs);
  background: var(--surface);
  box-shadow: var(--shadow-thumb);
  transform: translateX(var(--x, 0));
  transition: transform var(--dur-spring) var(--ease-spring), width var(--dur-spring) var(--ease-spring);
}
.segmented.no-anim .segmented-thumb { transition: none; }

/* Table */
.table-wrap { position: relative; }

.parts {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9375rem;
}
.parts th {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  z-index: 5;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-align: left;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-2);
  white-space: nowrap;
}
.parts td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.parts th:first-child, .parts td:first-child { padding-left: var(--pad); }
.parts th:last-child, .parts td:last-child { padding-right: var(--pad); }
.parts tbody tr:last-child td { border-bottom: 0; }
.parts tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.parts tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }

.c-check { width: calc(var(--pad) + 32px); }
.c-qty { width: 120px; }
.c-status { width: 160px; }
.c-drawing { width: 20%; }
.parts.hide-drawing .c-drawing { display: none; }
.only-mobile { display: none; }

.row { cursor: default; transition: background-color 120ms var(--ease-out); }
.row:hover { background: var(--row-hover); }
.row.is-selected { background: var(--row-selected); }
.row.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.row.is-excluded .part-name { color: var(--text-2); font-weight: 400; }

.part-name { font-weight: 500; overflow-wrap: anywhere; }
.part-meta { margin-top: 1px; font-size: .8125rem; color: var(--text-2); overflow-wrap: anywhere; }
.c-drawing { font: .8125rem/1.4 var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.dash { color: var(--text-3); }

/* Checkbox */
.check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform 140ms var(--ease-out);
}
.check:hover:not(:disabled) { border-color: var(--text-3); }
.check:active:not(:disabled) { transform: scale(.9); }
.check:checked, .check:indeterminate { border-color: var(--accent); background-color: var(--accent); }
.check::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--accent-ink);
  opacity: 0;
  transform: scale(.5);
  transition: opacity 120ms var(--ease-out), transform 220ms var(--ease-spring);
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check:indeterminate::after {
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.check:checked::after, .check:indeterminate::after { opacity: 1; transform: none; }
.check:disabled { opacity: .4; cursor: not-allowed; }

/* Process: one segmented group per row; the chosen one fills with its color (+ label, never color alone) */
.procs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.proc {
  min-width: 50px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform 160ms var(--ease-out);
}
.proc:hover { background: var(--surface); color: var(--text); }
.proc:active { transform: scale(.94); transition-duration: 80ms; }
.proc:focus-visible { outline-offset: 0; }
.proc[aria-pressed="true"] {
  background: var(--pc-bg);
  color: var(--pc-fg);
  box-shadow: inset 0 0 0 1px var(--pc-line);
}

[data-tone="cnc"]     { --pc-fg: var(--p-cnc-fg);     --pc-bg: var(--p-cnc-bg);     --pc-line: var(--p-cnc-line);     --pc-dot: var(--p-cnc-dot); }
[data-tone="scie"]    { --pc-fg: var(--p-scie-fg);    --pc-bg: var(--p-scie-bg);    --pc-line: var(--p-scie-line);    --pc-dot: var(--p-scie-dot); }
[data-tone="tour"]    { --pc-fg: var(--p-tour-fg);    --pc-bg: var(--p-tour-bg);    --pc-line: var(--p-tour-line);    --pc-dot: var(--p-tour-dot); }
[data-tone="plieuse"] { --pc-fg: var(--p-plieuse-fg); --pc-bg: var(--p-plieuse-bg); --pc-line: var(--p-plieuse-line); --pc-dot: var(--p-plieuse-dot); }
[data-tone="other"]   { --pc-fg: var(--p-other-fg);   --pc-bg: var(--p-other-bg);   --pc-line: var(--p-other-line);   --pc-dot: var(--p-other-dot); }

/* Quantity stepper */
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.stepper button {
  display: grid;
  place-items: center;
  width: 30px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.stepper button:hover { background: var(--surface-2); color: var(--text); }
.stepper button:active { background: var(--surface-3); }
.stepper button:focus-visible { outline-offset: -2px; }
.stepper .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.stepper input {
  width: 40px;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  text-align: center;
  font-weight: 500;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: var(--accent-soft); }

.parts.is-locked .procs,
.parts.is-locked .stepper { opacity: .55; pointer-events: none; }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.pill .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.pill[data-tag="todo"] { background: transparent; border: 1px dashed var(--line-strong); }
.pill[data-tag="ready"] { background: var(--accent-soft); color: var(--text); }
.pill[data-tag="ready"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pill[data-tag="working"] { background: var(--accent-soft); color: var(--link); }
.pill[data-tag="working"] .icon { animation: spin .8s linear infinite; }
.pill[data-tag="done"] { background: var(--ok-soft); color: var(--ok); }
.pill[data-tag="failed"] { background: var(--danger-soft); color: var(--danger); }
.pill[data-tag="excluded"] { background: transparent; color: var(--text-3); padding: 0; }

.status-stack { display: grid; justify-items: start; gap: 6px; }
.row-links { display: flex; gap: 12px; }
.row-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-xs);
}
.row-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-link .icon { width: 13px; height: 13px; }
.row-error {
  max-width: 28ch;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--danger);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.row-error.is-open { -webkit-line-clamp: unset; }

/* Loading + empty */
.skeleton { display: grid; gap: 10px; padding: 18px var(--pad); }
.skeleton div {
  position: relative;
  height: 44px;
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}
.skeleton div:nth-child(2n) { width: 92%; }
.skeleton div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s var(--ease-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 56px 24px 52px;
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--link);
}
.empty-icon .icon { width: 24px; height: 24px; stroke-width: 1.6; }
.empty strong { font-size: 1rem; font-weight: var(--w-strong); }
.empty span:last-child { max-width: 42ch; font-size: .9375rem; color: var(--text-2); }

.hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: .8125rem;
  color: var(--text-2);
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--surface);
  font: 500 .75rem/1.4 var(--mono);
  text-align: center;
  color: var(--text);
}

/* ------------------------------------------------------------------ step 3 */
/* Options read like a grouped settings list */
.options {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background-color var(--dur-fast);
}
.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch-row:hover { background: var(--row-hover); }
.switch-text { display: grid; gap: 1px; }
.switch-text strong { font-size: .9375rem; font-weight: 500; }
.switch-text small { font-size: .8125rem; color: var(--text-2); }

.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 28px;
  flex: none;
  margin: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color 220ms var(--ease-out);
}
.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(40, 28, 8, .22), 0 0 0 .5px rgba(40, 28, 8, .08);
  transition: transform var(--dur-spring) var(--ease-spring);
}
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.gen-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: var(--pad);
}
.gen-summary { flex: 1 1 260px; font-size: .9375rem; color: var(--text-2); }
.gen-summary strong { color: var(--text); }

.progress {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.progress-head { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.progress-head span:first-child { font-weight: 500; overflow-wrap: anywhere; }
.progress-head span:last-child { color: var(--text-2); }
.progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 600ms var(--ease-spring);
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.6s var(--ease-out) infinite;
}
.progress .btn { justify-self: start; }

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
  border-radius: var(--r-md);
  background: var(--ok-soft);
}
.result[data-tone="warn"] { border-color: var(--accent-line); background: var(--accent-soft); }
.result[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
  background: var(--danger-soft);
}
.result-icon { color: var(--ok); }
.result[data-tone="warn"] .result-icon { color: var(--link); }
.result[data-tone="error"] .result-icon { color: var(--danger); }
.result-icon .icon { width: 26px; height: 26px; stroke-width: 1.7; }
.result-text { display: grid; flex: 1 1 220px; }
.result-text strong { font-size: 1rem; }
.result-text span { font-size: .875rem; overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.result[data-tone="warn"] .btn-secondary { background: var(--surface); }

/* ------------------------------------------------------------------ journal */
.journal {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.journal[open] { background: var(--surface); }
.journal summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 var(--pad);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-lg);
}
.journal summary::-webkit-details-marker { display: none; }
.journal summary > .icon:first-child { color: var(--text-2); width: 17px; height: 17px; }
.journal-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.journal-count:empty { display: none; }
.chevron { margin-left: auto; color: var(--text-2); transition: transform var(--dur-spring) var(--ease-spring); }
details[open] > summary .chevron { transform: rotate(180deg); }

.log {
  max-height: 300px;
  margin: 0;
  padding: 4px var(--pad) 18px;
  overflow: auto;
  list-style: none;
  font: .8125rem/1.65 var(--mono);
  color: var(--text-2);
  overscroll-behavior: contain;
}
.log li { display: flex; gap: 12px; }
.log time { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.log span { overflow-wrap: anywhere; white-space: pre-wrap; }
.log li[data-kind="sub"] span { padding-left: 16px; }
.log li[data-kind="err"] { color: var(--danger); }
.log li[data-kind="ok"] { color: var(--ok); }
.log:empty::before { content: "Rien pour l'instant."; color: var(--text-3); font-family: var(--font); }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--text-2);
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.footer-mark { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ bulk bar */
.bulkbar {
  --shift: var(--enter-shift);
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--float-line);
  border-radius: 18px;
  background: var(--float-bg);
  color: var(--float-text);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--shift)) scale(.97);
  /* Exit: quicker, accelerating away. */
  transition: transform var(--dur-exit) var(--ease-in), opacity var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
}
.bulkbar[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: transform var(--dur-sheet) var(--ease-sheet), opacity 180ms var(--ease-out), visibility 0s;
}
.bulk-count { font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--float-muted); }
.bulk-count b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk-sep { width: 1px; height: 22px; background: var(--float-line); }
.bulk-procs { display: flex; gap: 6px; }

.bulk-proc, .bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--float-chip);
  color: var(--float-text);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform 160ms var(--ease-out);
}
.bulk-proc:hover, .bulk-btn:hover { background: var(--float-chip-hover); }
.bulk-proc:active, .bulk-btn:active { transform: scale(.95); transition-duration: 80ms; }
.bulk-proc::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-dot);
}
.bulk-proc[aria-pressed="true"] { border-color: color-mix(in srgb, var(--pc-dot) 70%, transparent); background: color-mix(in srgb, var(--pc-dot) 22%, transparent); }
.bulk-proc kbd {
  min-width: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: var(--float-chip-hover);
  color: var(--float-muted);
  font-size: .6875rem;
}
.bulk-clear-proc { color: var(--float-muted); }
.bulkbar :focus-visible { outline-color: var(--accent); }

.bulk-qty { display: flex; align-items: center; gap: 6px; margin: 0; }
.bulk-qty label { font-size: .8125rem; color: var(--float-muted); }
.bulk-qty input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--float-line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .22);
  color: var(--float-text);
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bulk-qty input::placeholder { color: var(--float-muted); }
.bulk-qty input::-webkit-inner-spin-button,
.bulk-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bulk-qty input:focus { outline: none; border-color: var(--accent); }

.bulk-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--float-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.bulk-close:hover { background: var(--float-chip-hover); color: var(--float-text); }

/* ------------------------------------------------------------------ sheet (dialog) */
.sheet {
  --shift: 14px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(var(--shift)) scale(.97);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in),
              overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.sheet[open] {
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform var(--dur-sheet) var(--ease-sheet),
              overlay var(--dur-sheet) allow-discrete, display var(--dur-sheet) allow-discrete;
}
@starting-style {
  .sheet[open] { opacity: 0; transform: translateY(var(--shift)) scale(.97); }
}
.sheet::backdrop {
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color var(--dur-exit), backdrop-filter var(--dur-exit),
              overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
.sheet[open]::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@starting-style {
  .sheet[open]::backdrop { background: transparent; backdrop-filter: blur(0); }
}
.sheet.is-dragging { transition: none; user-select: none; }
.sheet.is-settling { transition: translate var(--dur-sheet) var(--ease-sheet); }
.sheet.is-flinging { transition: translate var(--fling, 240ms) var(--ease-out); }
.sheet.no-anim, .sheet.no-anim::backdrop { transition: none; }

.sheet-grabber { display: none; }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 4px 24px;
}
.sheet-head h2 { font-size: 1.25rem; font-weight: var(--w-title); line-height: 1.25; letter-spacing: -.02em; }
.sheet-body { display: grid; gap: 16px; padding: 10px 24px 24px; }

.profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.profile > div { display: grid; min-width: 0; }
.profile strong { font-size: 1rem; overflow-wrap: anywhere; }
.profile span { font-size: .8125rem; }
.profile-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1rem;
}

.oauth-block { display: grid; gap: 14px; }
.oauth-block p { font-size: .9375rem; }

.keys-block { border-top: 1px solid var(--line); }
.keys-block summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 500;
  font-size: .9375rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
}
.keys-block summary::-webkit-details-marker { display: none; }
.keys-block summary > .icon:first-child { color: var(--text-2); width: 17px; height: 17px; }
.keys-form { display: grid; padding: 2px 0 4px; }
.keys-form .help { margin: 0 0 6px; }
.keys-form .field-label { margin: 12px 0 6px; }
.keys-form .btn { margin-top: 16px; }

/* ------------------------------------------------------------------ toasts */
.toasts {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px);
  left: 50%;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 8px 12px 14px;
  border: 1px solid var(--float-line);
  border-radius: var(--r-lg);
  background: var(--float-bg);
  color: var(--float-text);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  box-shadow: var(--shadow-float);
  font-size: .9375rem;
  line-height: 1.4;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in);
}
.toast[data-show="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform var(--dur-sheet) var(--ease-sheet);
}
.toast > .icon { margin-top: 1px; color: var(--accent); }
.toast[data-kind="ok"] > .icon { color: #9DD49F; }
.toast[data-kind="error"] > .icon { color: #FF9B8A; }
.toast > span { flex: 1; padding-top: 1px; white-space: pre-line; overflow-wrap: anywhere; }
.toast-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: -3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--float-muted);
  cursor: pointer;
}
.toast-close:hover { background: var(--float-chip-hover); color: var(--float-text); }
.toast-close .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 40px; }
}

@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .steps-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 40px; }
  .hero-art { display: none; }
}

@media (max-width: 760px) {
  /* Table rows become cards */
  .parts, .parts thead, .parts tbody { display: block; }
  .parts thead { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 5; }
  .parts thead tr { display: flex; }
  .parts thead th.c-check { position: static; }
  .parts thead th { display: none; }
  .parts thead th.c-check {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-size: .875rem;
    color: var(--text);
  }
  .only-mobile { display: inline; cursor: pointer; }
  .parts tr.row {
    display: grid;
    grid-template-columns: calc(var(--pad) + 32px) minmax(0, 1fr) auto;
    grid-template-areas:
      "check name name"
      ".     proc proc"
      ".     qty  status";
    row-gap: 12px;
    padding: 14px var(--pad) 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .parts tbody tr.row:last-child { border-bottom: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .parts td, .parts td:first-child, .parts td:last-child { padding: 0; border: 0; }
  .parts td.c-check { grid-area: check; padding-left: var(--pad); padding-top: 1px; }
  .parts td.c-name { grid-area: name; }
  .parts td.c-proc { grid-area: proc; }
  .parts td.c-qty { grid-area: qty; width: auto; }
  .parts td.c-status { grid-area: status; width: auto; justify-self: end; align-self: center; }
  .parts td.c-drawing { display: none; }
  .row.is-selected td:first-child { box-shadow: none; }
  .row.is-selected { box-shadow: inset 2px 0 0 var(--accent); }
  .row.is-excluded { grid-template-areas: "check name status"; }
  .row.is-excluded td.c-proc, .row.is-excluded td.c-qty { display: none; }
  .procs { display: flex; flex-wrap: nowrap; }
  .proc { min-height: 34px; min-width: 0; flex: 1 1 0; padding: 0 4px; }
  .stepper { height: 36px; }
  .stepper button { width: 36px; }
  .status-stack { justify-items: end; }

  .segmented { width: 100%; }
  .segmented button { flex: 1 1 0; padding: 0 6px; }

  .hint { display: none; }
  .gen-bar .btn { width: 100%; }

  /* Bulk bar spans the width and wraps */
  .bulkbar {
    left: 12px;
    right: 12px;
    flex-wrap: wrap;
    max-width: none;
    padding: 10px;
    transform: translateY(var(--shift)) scale(.98);
  }
  .bulkbar[data-open="true"] { transform: none; }
  .bulk-count { order: 0; padding-left: 6px; }
  .bulk-close { order: 1; margin-left: auto; }
  .bulk-procs { order: 2; width: 100%; }
  .bulk-procs .bulk-proc { flex: 1 1 0; padding: 0 6px; }
  .bulk-proc kbd { display: none; }
  .bulk-clear-proc { order: 3; }
  .bulk-qty { order: 4; margin-left: auto; }
  .bulk-sep { display: none; }
  html.has-bulk .page { padding-bottom: 230px; }
  html.has-bulk { scroll-padding-bottom: 220px; }
}

@media (max-width: 600px) {
  .hero { padding-top: 28px; }
  .hero-copy { gap: 16px; }
  .lead { font-size: 1.0625rem; }
  .stage-head h2 { font-size: 1.25rem; }
  .input-row { flex-direction: column; }
  .input-row .btn { width: 100%; }
  .notice-actions, .notice-actions .btn { width: 100%; }
  .notice-actions { flex-direction: column-reverse; }
  .doc-summary .btn { width: 100%; }
  .result-actions { width: 100%; }
  .result-actions .btn { flex: 1; }
  .footer { justify-content: center; text-align: center; }

  /* Bottom sheet with a grabber you can drag down */
  .sheet {
    --shift: 100%;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(var(--shift));
  }
  @starting-style {
    .sheet[open] { transform: translateY(var(--shift)); }
  }
  .sheet-grabber {
    display: block;
    width: 40px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--line-strong);
    touch-action: none;
    cursor: grab;
  }
  .sheet-head { padding-top: 10px; touch-action: none; }
}

@media (max-width: 380px) {
  .segmented .count { display: none; }
  .account-label { display: none; }
  .account { padding-right: 4px; }
}

/* ------------------------------------------------------------------ preferences */
@media (prefers-reduced-motion: reduce) {
  :root { --enter-shift: 0px; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Spinners still say "working", just calmly. */
  .btn.is-loading .spinner, .pill[data-tag="working"] .icon { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
  .sheet, .bulkbar, .toast { --shift: 0px; }
  .sheet, .sheet[open], .toast, .toast[data-show="true"] { transform: none !important; }
  .bulkbar, .bulkbar[data-open="true"] { transform: translate(-50%, 0); }
  .segmented-thumb, .switch::before, .progress-fill, .chevron, .step-badge > *, .nav-dot > * { transition-duration: 1ms !important; }
  .btn:active, .proc:active, .account:active, .check:active, .bulk-proc:active, .bulk-btn:active { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .bulkbar, .bulkbar[data-open="true"] { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bulkbar, .toast { background: var(--float-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .parts th { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .art-chip { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --text-2: var(--text); }
  .panel, .procs, .stepper, .check, .options { border-color: var(--text-2); }
}