/* Haute Resume — app styles. Tokens ported 1:1 from Haute Resume Prototype.dc.html */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; min-height:100%; }
body{ background:#141210; }

.hr-app{
  --bg:oklch(21% 0.018 55); --bar:oklch(24% 0.024 52); --line:oklch(31% 0.02 52);
  --panel:oklch(24% 0.022 52); --card:oklch(25% 0.02 52); --card2:oklch(22% 0.016 55);
  --text:oklch(94% 0.01 70); --dim:oklch(70% 0.02 60); --faint:oklch(58% 0.02 60);
  --accent:oklch(72% 0.17 50); --accent-ink:#241a10; --gold:oklch(80% 0.15 75);
  --label:oklch(70% 0.12 55); --page:#f3ead9; --deep:oklch(19% 0.014 55);
  --ok:oklch(80% 0.1 145); --okbg:oklch(28% 0.035 145 / .4); --okline:oklch(42% 0.07 145 / .6);
  --warn:oklch(84% 0.11 75); --warnbg:oklch(35% 0.06 70 / .4); --warnline:oklch(55% 0.1 70 / .5);
  --err:oklch(72% 0.19 25); --errbg:oklch(32% 0.07 25 / .45); --errline:oklch(52% 0.13 25 / .6);
  --pill:oklch(27% 0.02 52); --cta:linear-gradient(110deg, oklch(70% 0.17 46), oklch(74% 0.15 62)); --cta-ink:#241a10;
  --tilebg:oklch(26% 0.03 50); --tileline:oklch(26% 0.03 50); --logoStroke:oklch(72% 0.17 50); --logoPage:#f3ead9; --logoAi:oklch(80% 0.15 75);
  --shadow:0 24px 54px rgba(0,0,0,.5);

  /* capped viewport (§3 rail layout): screens scroll internally, action footers stay visible */
  height:100vh; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:'Sora',sans-serif; display:flex; flex-direction:column;
  transition:background .25s ease;
}
/* scrolling settings region + pinned action footer (Press & Lining rails).
   The padding/margin pair keeps swatch selection rings & focus outlines from
   being clipped at the scroll container's left edge. */
.rail-scroll{ flex:1; min-height:0; overflow:auto; padding:4px 6px 4px 5px; margin:-4px -6px -4px -5px; }
.rail-foot{ flex:none; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; }
.hr-app[data-theme="light"]{
  --bg:oklch(96% 0.012 70); --bar:#fffdf9; --line:oklch(90% 0.02 55);
  --panel:#f7f1e8; --card:#fffdf9; --card2:oklch(94% 0.02 62);
  --text:oklch(26% 0.03 50); --dim:oklch(48% 0.03 55); --faint:oklch(56% 0.03 55);
  --accent:oklch(60% 0.18 46); --accent-ink:#fff; --gold:oklch(58% 0.16 48);
  --label:oklch(58% 0.16 48); --page:#fffaf2; --deep:oklch(93% 0.015 65);
  --ok:oklch(44% 0.11 145); --okbg:oklch(95% 0.03 145 / .7); --okline:oklch(85% 0.07 145);
  --warn:oklch(52% 0.13 60); --warnbg:oklch(96% 0.03 75 / .8); --warnline:oklch(86% 0.07 70);
  --err:oklch(50% 0.19 27); --errbg:oklch(96% 0.025 25 / .85); --errline:oklch(85% 0.07 25);
  --pill:oklch(97% 0.02 60); --cta:linear-gradient(110deg, oklch(62% 0.18 44), oklch(68% 0.16 60)); --cta-ink:#fff;
  --tilebg:linear-gradient(135deg, oklch(97% 0.02 65), oklch(93% 0.045 55)); --tileline:oklch(88% 0.04 55); --logoStroke:oklch(60% 0.18 46); --logoPage:#fffaf2; --logoAi:oklch(58% 0.16 48);
  --shadow:0 18px 44px rgba(120,70,30,.16);
}

@keyframes hr-toast{ from{ opacity:0; transform:translate(-50%, 14px);} to{ opacity:1; transform:translate(-50%, 0);} }
@keyframes hr-pop{ from{ opacity:0; transform:scale(.97);} to{ opacity:1; transform:scale(1);} }
@keyframes hr-thread{ from{ background-position:-220px 0; } to{ background-position:220px 0; } }
@keyframes hr-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---------- fitting status (The Brief) ---------- */
.fit-status-busy{ color:var(--label); }
.fit-status-busy .needle{ display:inline-block; animation:hr-blink 1.1s ease-in-out infinite; }
.fit-thread{ display:block; height:3px; margin-top:7px; border-radius:999px; background:
  linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--gold) 50%, var(--accent) 65%, transparent 100%) 0 0 / 220px 100% repeat-x,
  var(--line);
  animation:hr-thread 1.15s linear infinite; }
.fit-status-error{ display:block; padding:10px 13px; border-radius:11px; background:var(--errbg); border:1px solid var(--errline); color:var(--err); font-size:12px; line-height:1.55; animation:hr-pop .2s ease; }
.fit-status-error b{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; }

/* ---------- skeleton lines (drafting states on the cream page) ---------- */
.skel-line{ height:9px; border-radius:5px; margin-top:11px;
  background:linear-gradient(90deg, oklch(88% 0.025 60), oklch(93% 0.015 65) 50%, oklch(88% 0.025 60)) 0 0 / 220px 100% repeat-x;
  animation:hr-thread 1.15s linear infinite; }

[hidden]{ display:none !important; }
button{ font-family:'Sora',sans-serif; }
input, textarea{ font-family:inherit; color:var(--text); }
input::placeholder, textarea::placeholder{ color:var(--faint); }

/* ---------- app bar ---------- */
.appbar{ height:60px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 26px; background:var(--bar); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
.lockup{ display:flex; align-items:center; gap:11px; cursor:pointer; }
.lockup .tile{ width:34px; height:34px; border-radius:26%; background:var(--tilebg); border:1px solid var(--tileline); display:flex; align-items:center; justify-content:center; }
.lockup .word{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em; white-space:nowrap; }
.lockup .ai{ font-family:'Space Mono',monospace; font-weight:700; font-size:10px; color:var(--logoAi); margin-left:4px; vertical-align:2px; }
.appbar .right{ display:flex; align-items:center; gap:20px; font-size:13.5px; }
.nav-item{ cursor:pointer; color:var(--dim); user-select:none; padding:12px 0; }
.nav-item.active{ color:var(--gold); font-weight:600; }
.mode-pill{ display:flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:var(--pill); border:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11px; cursor:pointer; user-select:none; }
.avatar{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, oklch(64% 0.19 40), oklch(74% 0.14 72)); display:flex; align-items:center; justify-content:center; font-weight:600; color:#fff; font-size:12px; cursor:pointer; border:none; }

/* ---------- shared type ---------- */
.kicker{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--label); text-transform:uppercase; }
.kicker-sm{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--faint); }
.h-display{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.02em; }
.mono{ font-family:'Space Mono',monospace; }

/* ---------- buttons ---------- */
.btn-cta{ border:none; border-radius:13px; background:var(--cta); color:var(--cta-ink); font-weight:700; cursor:pointer; box-shadow:0 12px 26px oklch(60% 0.14 48 / .3); }
.btn-accent{ border:none; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-weight:600; cursor:pointer; }
.btn-ghost{ border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--dim); cursor:pointer; }
.btn-card{ border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--dim); cursor:pointer; }
button:disabled{ cursor:not-allowed; opacity:.45; transition:opacity .2s ease; }
.btn-cta:not(:disabled), .btn-accent:not(:disabled){ transition:opacity .2s ease; }

/* ---------- segmented controls ---------- */
.seg{ display:inline-flex; padding:4px; border-radius:11px; background:var(--card2); border:1px solid var(--line); gap:4px; font-size:12.5px; }
.seg-item{ padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; user-select:none; color:var(--dim); border:1px solid transparent; }
.seg-item.active{ font-weight:600; background:var(--card); color:var(--text); border:1px solid var(--line); }
.seg-sm .seg-item{ padding:4px 12px; font-size:11px; }
/* 4-up option rows in the narrow right rail: shrink + wrap instead of overflowing */
.seg-tight{ flex-wrap:wrap; }
.seg-tight .seg-item{ padding:4px 7px; font-size:10px; flex:1 1 auto; text-align:center; min-width:0; white-space:nowrap; }
.seg-item.seg-flex{ flex:1; text-align:center; }
.seg-item.ok-active.active{ background:var(--okbg); color:var(--ok); border:1px solid var(--okline); }

/* ---------- cards / chips ---------- */
.chip-comp{ padding:5px 12px; border-radius:999px; background:var(--card2); border:1px solid var(--line); font-size:11px; font-family:'Space Mono',monospace; color:var(--dim); }
.chip-add{ padding:5px 12px; border-radius:999px; background:transparent; border:1px dashed var(--line); font-size:11px; font-family:'Space Mono',monospace; color:var(--faint); cursor:pointer; user-select:none; }
.chip-add.on{ background:var(--card2); border:1px solid var(--line); color:var(--dim); }
.gap-btn{ height:28px; padding:0 12px; border-radius:8px; cursor:pointer; font-size:11px; font-family:'Sora',sans-serif; border:1px solid var(--line); background:transparent; color:var(--dim); font-weight:400; }
.gap-btn.active{ border:1px solid var(--warn); background:var(--warnbg); color:var(--warn); font-weight:700; }
.fmt-card{ flex:1; padding:13px 15px; border-radius:12px; cursor:pointer; background:var(--card); display:flex; align-items:center; gap:10px; border:1px solid var(--line); }
.fmt-card.active{ border:1.5px solid var(--accent); padding:12.5px 14.5px; }

/* ---------- alteration cards ---------- */
.alt-open{ border-radius:13px; background:var(--card); border:1.5px solid var(--accent); padding:14px 16px; animation:hr-pop .25s ease; }
.alt-done{ border-radius:13px; background:var(--okbg); border:1px solid var(--okline); padding:12px 16px; animation:hr-pop .25s ease; }
.alt-done.clickable{ cursor:pointer; }
.alt-skipped{ border-radius:13px; background:var(--card); border:1px dashed var(--line); padding:12px 16px; cursor:pointer; opacity:.7; }
.alt-gap{ border-radius:13px; background:var(--warnbg); border:1px solid var(--warnline); padding:14px 16px; }
.alt-num{ width:23px; height:23px; flex:none; border-radius:7px; background:var(--warnbg); color:var(--warn); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:12.5px; border:1px solid var(--warnline); }
.alt-tick{ width:23px; height:23px; flex:none; border-radius:7px; background:var(--okbg); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:12px; border:1px solid var(--okline); }
.alt-dash{ width:23px; height:23px; flex:none; border-radius:7px; background:var(--card2); color:var(--faint); display:flex; align-items:center; justify-content:center; font-size:12px; }
.alt-head{ display:flex; align-items:center; gap:9px; }

/* ---------- atelier section rail / selection ---------- */
/* rail rows: amber nav-active treatment (label + soft tint + 3px left bar).
   Uses app tokens only — the rail stays app-amber even when the résumé accent is Ink/Forest. */
.rail-item{ padding:10px 12px 10px 9px; border-radius:0 10px 10px 0; font-size:13px; cursor:pointer; user-select:none; color:var(--dim); border-left:3px solid transparent; transition:background .15s ease, color .15s ease; }
.rail-item:hover:not(.active){ background:var(--card2); color:var(--text); }
.rail-item.active{ background:var(--pill); border-left:3px solid var(--accent); font-weight:600; color:var(--gold); }
@supports (background: color-mix(in oklab, red 10%, transparent)) {
  .rail-item.active{ background:color-mix(in oklab, var(--accent) 14%, transparent); } /* unmistakably amber in both themes */
}
.sel{ cursor:pointer; border-radius:6px; padding:6px 8px; outline:1.5px solid transparent; }
.sel.active{ background:oklch(98% 0.01 70); outline:1.5px solid oklch(62% 0.15 55); box-shadow:0 2px 10px rgba(180,100,40,.15); }
.swatch{ width:32px; height:32px; border-radius:50%; cursor:pointer; outline:2px solid transparent; outline-offset:2px; border:none; }
.swatch.active{ outline:2px solid var(--accent); }

/* ---------- overlays ---------- */
.overlay{ position:fixed; inset:0; background:rgba(10,8,6,.45); z-index:60; display:flex; align-items:center; justify-content:center; }
.toggle{ flex:none; width:46px; height:28px; border-radius:999px; cursor:pointer; position:relative; transition:background .2s ease; background:var(--card2); border:1px solid var(--line); padding:0; }
.toggle.on{ background:var(--accent); border:none; }
.toggle .knob{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s ease; }
.toggle.on .knob{ left:21px; }

/* ---------- résumé page (garment) ---------- */
.page-doc{ background:var(--page); border-radius:12px; box-shadow:var(--shadow); color:oklch(28% 0.03 50); position:relative; overflow:hidden; }
.doc-h{ font-family:'Space Mono',monospace; letter-spacing:.12em; color:oklch(52% 0.13 48); }
.hl-ok{ padding:1px 4px; border-radius:4px; background:oklch(85% 0.08 145 / .55); }
.hl-pend{ display:block; margin-top:2px; padding:2px 4px; border-radius:3px; background:oklch(88% 0.09 75 / .6); outline:1.5px dashed oklch(62% 0.14 70); }
.hl-anchor{ padding:1px 4px; border-radius:3px; background:oklch(88% 0.07 75 / .6); }
.ins{ padding:1px 5px; border-radius:4px; background:oklch(90% 0.06 145 / .6); border-bottom:2px solid oklch(55% 0.12 145); }
.del{ text-decoration:line-through; color:oklch(55% 0.1 30); }
.doc-fade{ position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(180deg, transparent, var(--page)); pointer-events:none; }

/* ---------- inputs ---------- */
.field{ height:44px; padding:0 14px; border-radius:11px; background:var(--card2); border:1px solid var(--line); color:var(--text); font-size:12.5px; outline:none; }
.field:focus{ border-color:var(--accent); }
textarea.field{ height:auto; padding:12px 14px; resize:none; }
[contenteditable]:focus{ outline:1.5px solid oklch(62% 0.15 55); border-radius:4px; }

/* ---------- tracker ---------- */
.trk-grid{ display:grid; grid-template-columns:2.1fr 1.5fr .7fr .9fr 1.1fr; }
.status-chip{ justify-self:start; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:600; cursor:pointer; user-select:none; border:none; }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:80; padding:13px 20px; border-radius:13px; background:var(--bar); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.4); font-family:'Space Mono',monospace; font-size:12px; color:var(--text); animation:hr-toast .25s ease; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; }

/* ---------- focus visibility (a11y) ---------- */
:where(button, [role="button"], a, input, textarea, [tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- responsive: stack panes below comfortable width ---------- */
@media (max-width: 1023px){
  .screen-flex{ flex-direction:column !important; overflow:auto; }
  .screen-flex > *{ border-left:none !important; border-right:none !important; border-top:1px solid var(--line); width:auto !important; }
  .appbar{ padding:0 14px; }
  .appbar .right{ gap:12px; }
  .nav-item{ font-size:12.5px; }
}