/*
 * website/cv-editor-v2.css — the v2 skin for the CV editor.
 *
 * ONE APP, TWO STYLESHEETS. cv-editor.js is ~7,000 lines with property-based
 * and Playwright suites pinning its behaviour, and it is the thing that must not
 * break on 1 October. Forking it would have doubled the surface and halved the
 * value of every one of those tests, so the editor is untouched and this layer
 * re-themes it.
 *
 * ONE PALETTE, AND IT IS DARK, to match the rest of v2 (owner's decision,
 * 2026-09-12). cv-editor.js pins <html data-theme="dark"> on a v2 shell, so the
 * OS never gets a say and there is nothing here for prefers-color-scheme to do.
 *
 * ── Why :root[data-v2] and not bare :root ───────────────────────────────────
 * Specificity, and it is not optional. cv-editor.css carries its own dark block
 * at :root[data-theme="dark"] — (0,2,0) — which a bare :root (0,1,0) would lose
 * to, leaving the editor on ITS dark palette rather than v2's. :root[data-v2]
 * matches that specificity and is loaded afterwards, so it wins on source order.
 * Every v2 shell carries data-v2 (server.js withV2Skin), so it always applies.
 *
 * The line this file must not cross: it may change how something LOOKS (colour,
 * radius, border, shadow, font) and never where it SITS. The editor's layout is
 * load-bearing on a 380px phone and pinned by the Playwright suites.
 * tests/v2-pages.test.js enforces the property list.
 */

:root[data-v2] {
  --brand: #E8795A;
  --brand-dark: #C85A3C;
  --ink: #F4EEE5;
  --muted: #B4AA9C;
  --bg: #16130F;
  --card: #201B16;
  --line: rgba(246, 242, 235, 0.10);
  --line-strong: rgba(246, 242, 235, 0.20);
  --ok: #7FB069;
  --danger: #F0917C;
  --field-bg: #1B1712;
  --entry-bg: #1B1712;
  --chip-bg: #2A241D;
  --chip-x: rgba(246, 242, 235, 0.12);
  --disabled-bg: #2A241D;
  --recovery-bg: rgba(232, 162, 61, 0.12);
  --recovery-line: rgba(232, 162, 61, 0.34);
  --note-bg: rgba(240, 145, 124, 0.10);
  --note-line: rgba(240, 145, 124, 0.30);
  --nudge: #E0BE72;
  --savebar-bg: rgba(22, 19, 15, 0.94);
  --toast-bg: #2A241D;
  --toast-fg: #F4EEE5;
  --focus-ring: rgba(232, 121, 90, 0.30);
  --field-error-bg: rgba(240, 145, 124, 0.10);
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B4AA9C' stroke-width='1.7' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

/* ── Shape ─────────────────────────────────────────────────────────────────
   Tokens alone were not enough, and it is worth saying why: the editor's
   original terracotta (#C2541A) and v2's (#C85A3C) are close enough to pass for
   each other, and its ground (#fbf8f5) is a hair off v2's cream. Swapping only
   the palette produced a page that was technically re-skinned and looked
   unchanged to the person looking at it.

   What actually distinguishes v2 is SHAPE: pill buttons, larger radii, soft
   shadows instead of hard borders. So this block sets those.

   Every declaration below is appearance only — colour, radius, border, shadow,
   font. Nothing here moves, resizes, hides or reflows anything, because the
   editor's layout is load-bearing on a 380px phone and is pinned by the
   Playwright suites. tests/v2-pages.test.js enforces exactly that property
   list, so a padding or a display slipping in here fails rather than shipping. */

/* Pills. The single most recognisable thing about v2's buttons. */
.btn {
  border-radius: 999px;
}
/* The AI shimmer is two pseudo-elements sitting just outside the button, and
   they carry their OWN radius — 12px, drawn for the 10px button the editor used
   to have. Against a pill they read as a rounded SQUARE with the button's ends
   poking out of it, which is the sort of thing that looks like a rendering bug
   rather than a decision. The ring has to follow the shape it rings. */
.btn-glow.on::before,
.btn-glow.on::after {
  border-radius: 999px;
}
.btn-primary { /* shadow set below, for the dark ground */ }

/* Cards: v2 lifts them off the ground with a shadow and a softer edge, where
   the editor drew a hairline box. */
.card {
  border-radius: 18px;
}

/* Fields sit on the tinted surface v2 uses for inputs, with its radius. */
input[type=text], input[type=email], input[type=tel], input[type=month], textarea, select {
  border-radius: 12px;
  border-width: 1px;
}

/* The bar at the top of the editor, matched to the site header it follows. */
.brandbar {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}

/* Shadows for the one ground there is. A terracotta glow under a button reads
   on cream and vanishes on near-black, so these are the dark-ground versions
   and there is no longer a second set to switch to. */
:root[data-v2] .btn-primary { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
:root[data-v2] .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ── The two typefaces the rest of v2 uses ─────────────────────────────────
   The editor sets its own font stack; v2's display face is what makes a page
   look like Send My CV rather than a form. Only the headings take it — running
   text and every field stay on Inter, which is what a person filling in a form
   on a small screen needs to read quickly. Both faces are already loaded by
   /fonts.css, which the editor pages link.

   The one place this file names selectors rather than tokens, because the
   editor has no font token to override. */
.brand-word,
.card > .head .ttl,
.fb-title,
.wiz-title {
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
}