/* DeskKit design v2 — the document editors: the CV builder (builder.html),
   the quote app (quote-app.html, plus the private quotes.html) and the
   invoice app (invoice-app.html). Spec: docs/design-v2-spec.md, phase 4,
   "dark shell, real document".

   Opt-in:  <body class="theme-v2 v2-docs" data-tool="cv|quote|invoice">,
            loaded after css/theme-v2.css (tokens, --tool, the shared
            modals). Every rule here starts with
            html:not(.hv-light) body.v2-docs, so taking the class off a page
            brings its previous look straight back, and the Builder-Shell
            the site builder shares (css/builder-shell.css) is untouched.
   Shell:   the top bar, the structure list, the properties panel, the
            phone drawers and download bar, the start screens (intro,
            business details, "My CVs"), the AI panels and every popup are
            dark; the tool's neon (--tool) marks what is selected or
            focused, the DeskKit teal stays the one primary action.
   Paper:   the document itself is never styled here. On the canvas it
            lives in its own iframe; the Shell scripts only make that
            iframe's grey backdrop transparent on a v2 page so the white
            page sits on this dark "desk" (js/*-builder-shell.js). The PDF
            (an off-screen copy, screenshotted) and print keep exactly the
            old look: section 9 pins the off-screen copy's inherited
            values to the old ones and turns the page light for print.

   Sections: 1 page + start screens · 2 top bar · 3 structure list
   · 4 canvas (the desk) · 5 properties panel · 6 phones · 7 popups
   (style picker, import, ATS, sign-in, credit, upsell, toasts) · 8 the
   classic form + preview layout (quotes.html; also the print/fallback
   path) · 9 PDF + print · 10 motion + accessibility modes. */

/* ============================================ 1 page + start screens */
html:not(.hv-light) body.v2-docs {
  --acc: var(--tool, var(--v2-teal));
  --acc-text: color-mix(in srgb, var(--acc) 72%, var(--v2-hi));      /* neon text on dark */
  --acc-tint: color-mix(in srgb, var(--acc) 13%, transparent);
  --acc-line: color-mix(in srgb, var(--acc) 50%, transparent);
  --ed-panel: var(--v2-panel);
  --ed-raise: rgba(255, 255, 255, .035);
  --ed-field: var(--v2-panel-2);
}
html:not(.hv-light) body.v2-docs .auth-gate-overlay p { color: var(--v2-dim) !important; }

/* Page headers of the start screens (business details, the classic form). */
html:not(.hv-light) body.v2-docs .builder-top {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 140% at 85% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), var(--v2-bg-2);
  border-bottom: 1px solid var(--v2-line);
}
html[dir="ltr"]:not(.hv-light) body.v2-docs .builder-top { background: radial-gradient(60% 140% at 15% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), var(--v2-bg-2); }
html:not(.hv-light) body.v2-docs .builder-top :is(h1, h2) { color: var(--v2-hi); letter-spacing: -.01em; }
html:not(.hv-light) body.v2-docs .builder-top p { color: var(--v2-dim) !important; }
html:not(.hv-light) body.v2-docs .breadcrumb { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .breadcrumb a { color: var(--acc-text); }
html:not(.hv-light) body.v2-docs :is(.qa-topbar .qa-account, .ia-topbar .ia-account) { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs :is(.qa-topbar .qa-account, .ia-topbar .ia-account) :is(a, button) { color: var(--v2-text); }
html:not(.hv-light) body.v2-docs :is(.qa-topbar .qa-account, .ia-topbar .ia-account) :is(a, button):hover { color: var(--acc-text); }
html:not(.hv-light) body.v2-docs :is(.qa-account, .ia-account) :is(a, button):focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

/* Business-details form (quote + invoice) and the classic side form. */
html:not(.hv-light) body.v2-docs .builder-form {
  color: var(--v2-text); border: 0; border-radius: var(--v2-r);
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08), 0 40px 80px -50px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
html:not(.hv-light) body.v2-docs :is(#qa-profile, #ia-profile) .builder-form { margin-top: 28px; padding: clamp(20px, 3vw, 30px); }
html:not(.hv-light) body.v2-docs .builder-form :is(label, .jobs-head label) { color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .builder-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) { min-height: 42px; border-radius: 10px; }
html:not(.hv-light) body.v2-docs .builder-form textarea { min-height: 84px; }
html:not(.hv-light) body.v2-docs .builder-form p[style] { color: var(--v2-muted) !important; }
html:not(.hv-light) body.v2-docs .sep { border-top-color: var(--v2-line); }
html:not(.hv-light) body.v2-docs :is(.qa-err, .ia-err) { color: var(--v2-danger); }
html:not(.hv-light) body.v2-docs .builder-form input[type="radio"] { accent-color: var(--acc); }
html:not(.hv-light) body.v2-docs .ia-type-choice label {
  border: 0; border-radius: 14px; color: var(--v2-text); background: var(--ed-raise); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-docs .ia-type-choice label:hover { box-shadow: inset 0 0 0 1px var(--v2-line-3); }
html:not(.hv-light) body.v2-docs .ia-type-choice label:has(input:checked) { background: var(--acc-tint); box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 22px -10px var(--acc); }
html:not(.hv-light) body.v2-docs .ia-type-choice .ia-type-desc { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .photo-preview { background: var(--ed-field); color: var(--v2-dim); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-docs :is(.photo-remove, .job-remove, .ts-clear) { color: var(--v2-danger); }
html:not(.hv-light) body.v2-docs .job-block { border-color: var(--v2-line-2); background: rgba(var(--v2-fg-rgb), .02); }
html:not(.hv-light) body.v2-docs .ia-item-row input { color: var(--v2-text); background: var(--ed-field); border: 1px solid var(--v2-line-2); }

/* Small pill buttons ("+ add", "upload", "✨ AI") */
html:not(.hv-light) body.v2-docs .btn-mini {
  color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-docs .btn-mini:hover:not(:disabled) { color: var(--v2-hi); background: var(--acc-tint); box-shadow: inset 0 0 0 1px var(--acc-line); }
html:not(.hv-light) body.v2-docs .btn-mini:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .ai-improve-btn { color: var(--acc-text); box-shadow: inset 0 0 0 1px var(--acc-line); background: var(--acc-tint); }
html:not(.hv-light) body.v2-docs .ai-limit-note { color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--v2-line-2); border-radius: 12px; }
html:not(.hv-light) body.v2-docs .ai-limit-note a { color: var(--v2-teal-hi); }

/* The classic page "save" control (hidden behind the Shell, shown on quotes.html-style layouts). */
html:not(.hv-light) body.v2-docs .builder-save-status { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .builder-save-status.ok { color: var(--v2-ok); }

/* Language pills (CV: interface of the document's language). */
html:not(.hv-light) body.v2-docs .lang-big {
  color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); box-shadow: none;
}
html:not(.hv-light) body.v2-docs .lang-big:hover { color: var(--v2-hi); border-color: var(--v2-line-3); }
html:not(.hv-light) body.v2-docs .lang-big .dot { border-color: var(--v2-faint); }
html:not(.hv-light) body.v2-docs .lang-big.active { color: var(--v2-hi); border-color: var(--acc); background: var(--acc-tint); box-shadow: 0 0 22px -10px var(--acc); }
html:not(.hv-light) body.v2-docs .lang-big.active .dot { border-color: var(--acc); }
html:not(.hv-light) body.v2-docs .lang-big.active .dot::after { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
html:not(.hv-light) body.v2-docs .lang-big:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* "What do you need to prepare?" — the quote / invoice start screen. */
html:not(.hv-light) body.v2-docs :is(#qa-intro, #ia-intro) { position: relative; isolation: isolate; }
html:not(.hv-light) body.v2-docs :is(#qa-intro, #ia-intro)::before {
  content: ""; position: absolute; inset: -40px 0 auto; height: 520px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 50% 18%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 70%),
    radial-gradient(30% 40% at 24% 60%, rgba(var(--v2-teal-rgb), .07), transparent 72%);
}
html:not(.hv-light) body.v2-docs :is(#qa-intro, #ia-intro)::after {
  content: ""; position: absolute; inset: -40px 0 auto; height: 520px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--v2-fg-rgb), .028) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--v2-fg-rgb), .028) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(56% 70% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(56% 70% at 50% 20%, #000, transparent 75%);
}
html:not(.hv-light) body.v2-docs .dk-form-intro { margin-top: clamp(40px, 8vw, 84px); }
html:not(.hv-light) body.v2-docs .dk-form-intro h1 { color: var(--v2-hi); font-size: var(--v2-fs-title); letter-spacing: -.02em; line-height: 1.15; }
html:not(.hv-light) body.v2-docs .dk-form-intro p.lead { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .qa-intro-style-label { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .dk-style-chip {
  border: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .045), rgba(var(--v2-lift-rgb), .015)), var(--v2-card);
  box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
}
html:not(.hv-light) body.v2-docs .dk-style-chip span { color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .dk-intro-doc-preview { background: var(--ed-raise, var(--v2-card)); border: 0; box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .dk-style-chip:hover { box-shadow: inset 0 0 0 1px var(--acc-line); transform: translateY(-1px); }
html:not(.hv-light) body.v2-docs .dk-style-chip.selected { background: linear-gradient(180deg, var(--acc-tint), rgba(var(--v2-lift-rgb), .01)), var(--v2-card); box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 28px -10px var(--acc); }
html:not(.hv-light) body.v2-docs .dk-style-chip.selected span { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .dk-style-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
html:not(.hv-light) body.v2-docs .dk-style-swatch { box-shadow: 0 0 0 1px rgba(var(--v2-fg-rgb), .08); }
html:not(.hv-light) body.v2-docs :is(.dk-intro-ai-toggle, .dk-intro-skip) { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs :is(.dk-intro-ai-toggle, .dk-intro-skip):hover { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs :is(.dk-intro-ai-toggle, .dk-intro-skip):focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
html:not(.hv-light) body.v2-docs .dk-intro-ai-panel { border-top-color: var(--v2-line); }
html:not(.hv-light) body.v2-docs .dk-form-intro-textarea { color: var(--v2-text); background: var(--ed-field); border: 1px solid var(--v2-line-2); caret-color: var(--acc); }
html:not(.hv-light) body.v2-docs .dk-form-intro-textarea::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.v2-docs .dk-form-intro-textarea:focus { border-color: var(--acc-line); box-shadow: 0 0 0 4px var(--acc-tint); }
html:not(.hv-light) body.v2-docs .dk-btn-lg { min-height: 52px; }

/* Design catalog (quote-app.html?catalog) + the classic search row. */
html:not(.hv-light) body.v2-docs .tpl-search { color: var(--v2-text); background: var(--ed-field); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .tpl-search::placeholder { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .tpl-search-wrap svg { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .tabs .tab { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .tabs .tab.active { color: var(--v2-hi); background: var(--acc-tint); border-color: var(--acc); }
html:not(.hv-light) body.v2-docs #qa-tpl-grid .card { color: var(--v2-text); background: var(--v2-card); border-color: var(--v2-line); }
html:not(.hv-light) body.v2-docs #qa-tpl-grid .card :is(h3, .card-meta) { color: var(--v2-text); }

/* "My CVs" (builder.html for a returning user) */
html:not(.hv-light) body.v2-docs .dk-mysites-head h1 { color: var(--v2-hi); letter-spacing: -.01em; }

/* ======================================================= 2 top bar */
html:not(.hv-light) body.v2-docs .bshell.active { background: var(--v2-bg); color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .bshell-top {
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .025), rgba(var(--v2-lift-rgb), 0)), rgba(var(--v2-bg-2-rgb), .96);
  border-bottom: 1px solid var(--v2-line); box-shadow: 0 12px 30px -18px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
html:not(.hv-light) body.v2-docs .bshell-top::after { /* a thread of the tool's light under the bar */
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 60%, transparent) 30%, color-mix(in srgb, var(--acc) 60%, transparent) 70%, transparent);
  opacity: .55;
}
html:not(.hv-light) body.v2-docs .bshell-top-name { color: var(--v2-hi); display: inline-flex; align-items: center; gap: 9px; }
html:not(.hv-light) body.v2-docs .bshell-top-name::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent), 0 0 12px var(--acc);
}
html:not(.hv-light) body.v2-docs .dk-shell-crumb, html:not(.hv-light) body.v2-docs .bshell-top .dk-shell-crumb a { color: var(--v2-muted); }

/* Save status (js/doc-autosave.js): saving / saved / failed / limit */
html:not(.hv-light) body.v2-docs .bshell-top-status { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .bshell-top-status.saving { color: var(--v2-warn); }
html:not(.hv-light) body.v2-docs .bshell-top-status.saved { color: var(--v2-ok); }
html:not(.hv-light) body.v2-docs .bshell-top-status:is(.failed, .limit) { color: var(--v2-danger); }
@media (min-width: 861px) and (max-width: 1280px) {
  html:not(.hv-light) body.v2-docs :is(#cvbshell-root, #qbshell-root, #ibshell-root) .bshell-top-status:is(.failed, .limit) {
    background: #1d0f14; border-color: rgba(var(--v2-danger-rgb), .45); box-shadow: 0 12px 30px -10px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
  }
}

/* Top-bar buttons: quiet glass pills; the primary action keeps the teal. */
html:not(.hv-light) body.v2-docs .bshell-top-btn {
  color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2);
  transition: border-color var(--v2-fast) ease, color var(--v2-fast) ease, background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
}
html:not(.hv-light) body.v2-docs .bshell-top-btn:hover:not(:disabled) { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .08); border-color: rgba(var(--v2-fg-rgb), .3); }
html:not(.hv-light) body.v2-docs .bshell-top-btn:active:not(:disabled) { transform: scale(.98); }
html:not(.hv-light) body.v2-docs .bshell-top-btn:disabled { opacity: .38; }
html:not(.hv-light) body.v2-docs .bshell-top-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .bshell-top-btn-primary {
  color: var(--v2-on-teal); border-color: transparent; background: linear-gradient(180deg, var(--v2-teal-top), var(--v2-teal));
  box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -12px rgba(var(--v2-teal-rgb), calc(.8 * var(--v2-glow-k)));
}
html:not(.hv-light) body.v2-docs .bshell-top-btn-primary:hover:not(:disabled) {
  color: var(--v2-on-teal); border-color: transparent; background: linear-gradient(180deg, var(--v2-teal-top-hover), var(--v2-teal-bottom-hover));
  box-shadow: inset 0 0 0 1px rgba(190, 255, 245, .8), 0 14px 34px -12px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k))), 0 0 40px -14px rgba(var(--v2-teal-rgb), calc(.9 * var(--v2-glow-k)));
}
html:not(.hv-light) body.v2-docs .bshell-top-btn-primary:focus-visible { outline-color: var(--v2-teal-hi); }
html:not(.hv-light) body.v2-docs .cvb-download-cta { box-shadow: inset 0 0 0 1px rgba(160, 255, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 28px -10px rgba(var(--v2-teal-rgb), calc(.85 * var(--v2-glow-k))); }
/* Invoice: "issue for good" is the weightier of its two primary actions —
   the tool's own neon outline sets it apart from "save draft". */
html:not(.hv-light) body.v2-docs #ibshell-finalize-btn {
  color: var(--v2-hi); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 26%, transparent), color-mix(in srgb, var(--acc) 10%, transparent)), var(--ed-panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 70%, transparent), 0 0 26px -10px var(--acc);
}
html:not(.hv-light) body.v2-docs #ibshell-finalize-btn:hover:not(:disabled) { color: var(--v2-hi); background: color-mix(in srgb, var(--acc) 30%, var(--ed-panel)); box-shadow: inset 0 0 0 1px var(--acc), 0 0 32px -6px var(--acc); }
html:not(.hv-light) body.v2-docs .bshell-exit-link { color: var(--v2-muted); border-radius: 8px; }
html:not(.hv-light) body.v2-docs .bshell-exit-link:hover { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .bshell-exit-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* "Remove credit line" (js/doc-credit-unlock.js — its own light rules are injected later; these win on specificity). */
html:not(.hv-light) body.v2-docs .dk-credit-link { color: var(--v2-muted); text-decoration-color: rgba(var(--v2-fg-rgb), .25); }
html:not(.hv-light) body.v2-docs .dk-credit-link:hover { color: var(--v2-hi); text-decoration-color: currentColor; }
html:not(.hv-light) body.v2-docs .dk-credit-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
/* Issued invoice: read-only notice */
html:not(.hv-light) body.v2-docs .ia-locked-note { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .3); border-radius: 12px; }

/* ================================================ 3 structure list */
html:not(.hv-light) body.v2-docs .bshell-hier {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 4%, transparent), transparent 40%), var(--v2-bg-2);
  border-inline-end-color: var(--v2-line);
}
html:not(.hv-light) body.v2-docs :is(.bshell-hier-title, .bshell-settings-group-title) { color: var(--v2-muted); letter-spacing: .06em; }
html:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item) {
  color: var(--v2-text); background: var(--ed-raise); border-color: transparent; box-shadow: inset 0 0 0 1px var(--v2-line);
  transition: box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-docs .bshell-item { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .02); }
html:not(.hv-light) body.v2-docs .bshell-settings-btn { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item):hover { color: var(--v2-hi); border-color: transparent; background: rgba(var(--v2-fg-rgb), .055); box-shadow: inset 0 0 0 1px var(--v2-line-3); }
html:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item).is-selected {
  position: relative; color: var(--v2-hi); background: linear-gradient(90deg, var(--acc-tint), color-mix(in srgb, var(--acc) 4%, transparent));
  box-shadow: inset 0 0 0 1px var(--acc-line), 0 0 24px -14px var(--acc);
}
html[dir="rtl"]:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item).is-selected { background: linear-gradient(270deg, var(--acc-tint), color-mix(in srgb, var(--acc) 4%, transparent)); }
html:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item).is-selected::before { /* the bar of light */
  content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--acc); box-shadow: 0 0 10px 1px var(--acc);
}
html:not(.hv-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item, .bshell-add-item):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .bshell-settings-icon { color: var(--acc-text); }
html:not(.hv-light) body.v2-docs .bshell-sec-hidden-dot { background: var(--v2-faint); }
html:not(.hv-light) body.v2-docs .bshell-add-item { color: var(--acc-text); border-color: color-mix(in srgb, var(--acc) 35%, transparent); }
html:not(.hv-light) body.v2-docs .bshell-add-item:hover { border-color: var(--acc); background: var(--acc-tint); }
/* CV: "I already have a CV" / "start from a blank page" */
html:not(.hv-light) body.v2-docs .cvb-start-btn { color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .02); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .cvb-start-btn small { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .cvb-start-btn:hover { border-color: var(--acc-line); background: var(--acc-tint); }
html:not(.hv-light) body.v2-docs .cvb-start-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .cvb-start-import { border-color: var(--acc-line); background: linear-gradient(180deg, var(--acc-tint), color-mix(in srgb, var(--acc) 4%, transparent)); box-shadow: 0 0 26px -16px var(--acc); }

/* ================================================ 4 canvas (the desk) */
html:not(.hv-light) body.v2-docs .bshell-canvas-wrap {
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(var(--v2-teal-rgb), .035), transparent 70%),
    #06080d;
}
html:not(.hv-light) body.v2-docs .bshell-canvas-shadow { background: transparent; box-shadow: none; border-radius: 0; }
/* The page inside is white paper with its own shadow; the frame itself
   is see-through, so the desk shows around it. color-scheme: light keeps
   the browser from painting an opaque backdrop behind a light document
   embedded in a dark page. */
html:not(.hv-light) body.v2-docs .bshell-canvas-iframe { background: transparent; color-scheme: light; }

/* ============================================= 5 properties panel */
html:not(.hv-light) body.v2-docs .bshell-props { background: var(--v2-bg-2); border-inline-start-color: var(--v2-line); color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .bshell-props-empty { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .bshell-props-empty::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--acc) 40%, transparent), transparent 70%), var(--ed-raise);
  box-shadow: inset 0 0 0 1px var(--acc-line), 0 0 24px -8px var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l14 6-6 2-2 6z' fill='%23000'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html:not(.hv-light) body.v2-docs .bshell-props-kind { color: var(--acc-text); background: var(--acc-tint); box-shadow: inset 0 0 0 1px var(--acc-line); }
html:not(.hv-light) body.v2-docs :is(.bshell-props-label, .bshell-props .field > label, .bshell-props .jobs-head label) { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs :is(.bshell-settings-field-hint, .bshell-props .field p) { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .bshell-settings-group { border-bottom-color: var(--v2-line); }
html:not(.hv-light) body.v2-docs .bshell-props :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea),
html:not(.hv-light) body.v2-docs :is(.bshell-ai-draft-textarea, .bshell-ai-panel input[type="text"]) {
  color: var(--v2-text); background-color: var(--ed-field); border: 1px solid var(--v2-line-2); border-radius: 10px; caret-color: var(--acc);
  transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-docs .bshell-props :is(input, textarea)::placeholder, html:not(.hv-light) body.v2-docs .bshell-ai-draft-textarea::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.v2-docs .bshell-props :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):hover,
html:not(.hv-light) body.v2-docs .bshell-ai-draft-textarea:hover { border-color: var(--v2-line-3); }
html:not(.hv-light) body.v2-docs .bshell-props :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):focus,
html:not(.hv-light) body.v2-docs .bshell-ai-draft-textarea:focus { outline: none; border-color: var(--acc-line); box-shadow: 0 0 0 4px var(--acc-tint); }
html:not(.hv-light) body.v2-docs .bshell-props select option { background: var(--v2-panel-2); color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .bshell-props input[type="color"] { background: var(--ed-field); border: 1px solid var(--v2-line-2); border-radius: 10px; }
html:not(.hv-light) body.v2-docs .bshell-props .color-row input[type="color"] { padding: 3px; }
html:not(.hv-light) body.v2-docs .swatch { border-color: var(--v2-panel); box-shadow: 0 0 0 1px var(--v2-line-3); }
/* The CV's font / colours / photo fields, moved here from the classic form. */
html:not(.hv-light) body.v2-docs .bshell-props .field { display: grid; gap: 7px; margin-bottom: 16px; }
html:not(.hv-light) body.v2-docs .bshell-props .field > label { font-size: 12.5px; font-weight: 600; }
html:not(.hv-light) body.v2-docs .bshell-props .field select { width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
html:not(.hv-light) body.v2-docs .bshell-props .color-row input[type="color"] { width: 46px; height: 38px; cursor: pointer; }
/* Segmented choices (design style, alignment) */
html:not(.hv-light) body.v2-docs .bshell-align-btn {
  min-height: 36px; color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); border-radius: 10px;
  transition: color var(--v2-fast) ease, background-color var(--v2-fast) ease, border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
}
html:not(.hv-light) body.v2-docs .bshell-align-btn:hover { color: var(--v2-hi); border-color: var(--v2-line-3); }
html:not(.hv-light) body.v2-docs .bshell-align-btn.active { color: var(--v2-hi); border-color: var(--acc); background: var(--acc-tint); box-shadow: 0 0 18px -8px var(--acc); }
html:not(.hv-light) body.v2-docs .bshell-align-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .bshell-tool-btn { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .bshell-tool-btn:hover:not(:disabled) { color: var(--v2-hi); border-color: var(--acc-line); }
html:not(.hv-light) body.v2-docs .bshell-props-reset { color: var(--v2-danger); }
html:not(.hv-light) body.v2-docs :is(.bshell-style-reset, .bshell-mood-restore) { color: var(--acc-text); }
/* Switch */
html:not(.hv-light) body.v2-docs .bshell-switch-track { background: rgba(var(--v2-fg-rgb), .12); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .bshell-switch input:checked + .bshell-switch-track { background: color-mix(in srgb, var(--acc) 55%, var(--v2-panel)); box-shadow: inset 0 0 0 1px var(--acc), 0 0 14px -4px var(--acc); }
html:not(.hv-light) body.v2-docs .bshell-switch-thumb { background: var(--v2-knob); }
html:not(.hv-light) body.v2-docs .bshell-switch input:checked ~ .bshell-switch-thumb { background: #fff; }
html:not(.hv-light) body.v2-docs .bshell-switch:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 999px; }
/* Repeating items (jobs, dates, line items) */
html:not(.hv-light) body.v2-docs .bshell-svc-item { border-color: var(--v2-line-2); background: rgba(var(--v2-fg-rgb), .025); }
html:not(.hv-light) body.v2-docs .bshell-svc-item-num { color: var(--acc-text); background: var(--acc-tint); }
html:not(.hv-light) body.v2-docs .bshell-svc-item-title { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .bshell-icon-btn { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .bshell-icon-btn:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .06); border-color: var(--v2-line-2); }
/* The field a canvas click landed on: a ring in the tool's colour that settles into a quiet tint. */
html:not(.hv-light) body.v2-docs :is(.bshell-props-field, .bshell-svc-item).is-focused { animation-name: v2DocsFocusRing; }
html:not(.hv-light) body.v2-docs .bshell-svc-item.is-focused { border-color: var(--acc); }
@keyframes v2DocsFocusRing {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 30px -6px var(--acc); background: var(--acc-tint); }
  100% { box-shadow: 0 0 0 1px var(--acc-line); background: color-mix(in srgb, var(--acc) 5%, transparent); }
}
/* AI popover (field "✨ improve") */
html:not(.hv-light) body.v2-docs .bshell-ai-panel { color: var(--v2-text); background: var(--v2-panel-2); border-color: var(--v2-line-2); box-shadow: 0 24px 60px -20px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); }
html:not(.hv-light) body.v2-docs .bshell-ai-hint, html:not(.hv-light) body.v2-docs .bshell-ai-note { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .bshell-ai-examples button { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .bshell-ai-examples button:hover { color: var(--v2-hi); border-color: var(--acc-line); }
html:not(.hv-light) body.v2-docs .bshell-ai-note .bshell-ai-confirm-row button { color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .bshell-ai-note .bshell-ai-confirm-row .bshell-ai-confirm-yes { color: var(--v2-on-teal); background: var(--v2-teal); border-color: var(--v2-teal); }

/* Floating buttons while an editor is open: css/theme-v2.css (section 6)
   — a row at the foot of the structure column, beside the sidebar and
   never on top of it. */

/* ====================================================== 6 phones */
html:not(.hv-light) body.v2-docs .bshell-mobile-tabs { background: rgba(var(--v2-bg-2-rgb), .96) !important; border-bottom-color: var(--v2-line) !important; }
@media (max-width: 860px) {
  html:not(.hv-light) body.v2-docs :is(.bshell-hier, .bshell-props) {
    background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .03), transparent 80px), #0b0f18;
    border-color: var(--v2-line-2); box-shadow: none;
  }
  html:not(.hv-light) body.v2-docs :is(.bshell-hier, .bshell-props).bshell-drawer-open { box-shadow: 0 -24px 60px -10px rgba(var(--v2-shade-rgb), calc(.85 * var(--v2-shade-k))), 0 -1px 0 color-mix(in srgb, var(--acc) 35%, transparent); }
  html:not(.hv-light) body.v2-docs :is(.bshell-hier, .bshell-props)::before { /* grab handle */
    content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 4px; background: rgba(var(--v2-fg-rgb), .18);
  }
  html:not(.hv-light) body.v2-docs .bshell-props-empty::before { display: none; }
  html:not(.hv-light) body.v2-docs :is(.cvb-mobile-bar, .bshell-mobile-bar) {
    background: rgba(var(--v2-bg-2-rgb), .96); border-top-color: var(--v2-line); box-shadow: 0 -8px 18px -14px rgba(var(--v2-shade-rgb), calc(.8 * var(--v2-shade-k)));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
}

/* ====================================================== 7 popups */
/* All of them reuse .domain-guide-overlay / -modal, already dark in
   css/theme-v2.css; these dress what each one puts inside. */
html:not(.hv-light) body.v2-docs .domain-guide-modal { box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px color-mix(in srgb, var(--acc) 55%, transparent); }
/* CV style picker */
html:not(.hv-light) body.v2-docs .cv-style-pick-dot { background: rgba(var(--v2-fg-rgb), .16); }
html:not(.hv-light) body.v2-docs .cv-style-pick-dot.active { width: 18px; border-radius: 4px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
html:not(.hv-light) body.v2-docs .cv-style-pick-opt {
  border: 0; border-radius: 14px; background: var(--ed-raise); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  transition: box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease, transform var(--v2-fast) var(--v2-ease);
}
html:not(.hv-light) body.v2-docs .cv-style-pick-opt:hover { background: var(--acc-tint); box-shadow: inset 0 0 0 1px var(--acc), 0 0 24px -12px var(--acc); }
html:not(.hv-light) body.v2-docs .cv-style-pick-opt:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs .cv-style-pick-opt-label { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .cv-style-pick-opt-desc { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .cvb-pick-import { background: linear-gradient(180deg, var(--acc-tint), color-mix(in srgb, var(--acc) 4%, transparent)) !important; box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 26px -12px var(--acc); }
html:not(.hv-light) body.v2-docs :is(.cv-style-pick-skip, .cvb-pick-blank) { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .cv-style-pick-skip:hover { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .cvb-pick-blank input { accent-color: var(--acc); }
/* Import + ATS */
html:not(.hv-light) body.v2-docs :is(.ats-textarea) { color: var(--v2-text); background: var(--ed-field); border: 1px solid var(--v2-line-2); caret-color: var(--acc); }
html:not(.hv-light) body.v2-docs .ats-textarea::placeholder { color: var(--v2-faint); }
html:not(.hv-light) body.v2-docs .ats-textarea:focus { border-color: var(--acc-line); box-shadow: 0 0 0 4px var(--acc-tint); }
html:not(.hv-light) body.v2-docs .ats-textarea:disabled { color: var(--v2-muted); background: rgba(var(--v2-fg-rgb), .02); }
html:not(.hv-light) body.v2-docs .cv-import-file { color: var(--acc-text); background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .cv-import-file:hover { border-color: var(--acc); }
html:not(.hv-light) body.v2-docs .cv-import-file:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; }
html:not(.hv-light) body.v2-docs :is(.cv-import-count, .cv-import-note, .ats-attempts, .ats-score-label, .ats-keywords-empty) { color: var(--v2-muted); }
html:not(.hv-light) body.v2-docs .cv-import-lang { color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .cv-import-lang input { accent-color: var(--acc); }
html:not(.hv-light) body.v2-docs .ats-error { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .3); }
html:not(.hv-light) body.v2-docs .ats-result h3 { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .ats-tips { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .ats-keyword-chip { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .3); }
html:not(.hv-light) body.v2-docs .ats-upgrade-card { background: var(--ed-raise); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .ats-upgrade-card p { color: var(--v2-dim); }
/* Join-to-save prompt: Google's own white button stays as Google asks. */
html:not(.hv-light) body.v2-docs .auth-prompt-email-link { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .auth-prompt-email-link:hover { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .google-signin-btn { border-color: transparent; }
html:not(.hv-light) body.v2-docs .google-signin-btn:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 3px; }
/* Purchase / license-key dialog: the key field (js/doc-credit-unlock.js) */
html:not(.hv-light) body.v2-docs .dk-credit-key-row input { border-radius: 10px; }
/* After-download suggestion */
html:not(.hv-light) body.v2-docs .upsell-popup {
  color: var(--v2-text); background: radial-gradient(120% 80% at 100% 0%, rgba(var(--v2-teal-rgb), .12), transparent 60%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 30px 80px -24px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 60px -30px rgba(var(--v2-teal-rgb), calc(.6 * var(--v2-glow-k)));
  animation-name: upsellPopIn;
}
html:not(.hv-light) body.v2-docs .upsell-popup p { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .upsell-popup-close { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .08); }
html:not(.hv-light) body.v2-docs .upsell-popup-close:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .16); }
/* Short confirmations */
html:not(.hv-light) body.v2-docs .cvb-toast {
  color: var(--v2-text); background: rgba(var(--v2-panel-2-rgb), .97); border-inline-start: 3px solid var(--acc);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 20px 50px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}

/* ===== 8 the classic form + preview layout (quotes.html; the Shell
   pages keep it hidden behind the Shell). The preview is the document:
   only the panel around it changes. */
html:not(.hv-light) body.v2-docs .export-panel { color: var(--v2-text); background: var(--ed-raise); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .export-panel > p { color: var(--v2-text) !important; }
html:not(.hv-light) body.v2-docs .export-panel .btn-outline-dark { background: rgba(var(--v2-fg-rgb), .04); box-shadow: none; }
html:not(.hv-light) body.v2-docs #quote-gate .quote-gate-box {
  color: var(--v2-text); border: 0; border-radius: 24px;
  background: linear-gradient(180deg, rgba(var(--v2-raise-rgb), .94), rgba(var(--v2-card-rgb), .96));
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 40px 100px -40px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 90px -40px color-mix(in srgb, var(--acc) 50%, transparent);
}
html:not(.hv-light) body.v2-docs .quote-gate-box h1 { color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .quote-gate-box p { color: var(--v2-dim); }
html:not(.hv-light) body.v2-docs .quote-gate-box input[type="password"] { color: var(--v2-text); background: var(--ed-field); border-color: var(--v2-line-2); }
html:not(.hv-light) body.v2-docs .quote-gate-box input[type="password"]:focus { outline: none; border-color: var(--acc-line); box-shadow: 0 0 0 4px var(--acc-tint); }
html:not(.hv-light) body.v2-docs .quote-login-err { color: var(--v2-danger); }

/* ===================================================== 9 PDF + print
   The PDF is an off-screen copy of the document added to <body> and
   screenshotted (js/*-render.js). It must come out exactly as before, so
   the values it inherits from the page are pinned back to the old ones
   (css/style.css's body), and the v2 colour names go back to theirs. */
html:not(.hv-light) body.v2-docs > div[style*="-99999px"] {
  color: #1A1A1A; color-scheme: light;
  --text: #111827; --text-main: #111827; --text-secondary: #667085; --text-muted: #98A2B3;
  --dark: #1A1A1A; --ink: #111827; --ink-dark: #0B0F17; --grey: #6B6B6B; --grey-light: #F4F6F5; --ice: #EAF6F6;
  --bg: #F8FAFC; --bg-main: #F8FAFC; --surface: #FFFFFF; --bg-card: #FFFFFF; --border: #E5E7EB; --border-color: #E5E7EB;
  --primary-light: #CCFBF1; --brand-dark: #0F766E;
}
@media print { /* css/builder.css resets body with all:unset; v2's page colours must not outrank it */
  html:has(body.v2-docs) { background: none !important; color-scheme: normal !important; }
  body.v2-docs { background: none !important; color: inherit !important; }
}

/* ================================== 10 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.v2-docs :is(.bshell-top-btn, .bshell-settings-btn, .bshell-sec-head, .bshell-item, .bshell-align-btn, .dk-style-chip, .cv-style-pick-opt, .lang-big, .btn-mini, .ia-type-choice label) { transition-duration: .01ms !important; }
  body.v2-docs :is(.bshell-top-btn, .dk-style-chip, .cv-style-pick-opt):is(:hover, :active) { transform: none !important; }
  body.v2-docs :is(.bshell-props-field, .bshell-svc-item).is-focused { animation: none !important; box-shadow: 0 0 0 1px var(--acc-line); }
  body.v2-docs .upsell-popup { animation: none !important; }
}
html.dka-still body.v2-docs :is(.bshell-top-btn, .dk-style-chip, .cv-style-pick-opt):is(:hover, :active) { transform: none !important; }
html.dka-still body.v2-docs :is(.bshell-props-field, .bshell-svc-item).is-focused { animation: none !important; }
/* High contrast (dark or light): the panel's own rules repaint every
   surface; the decorative light drawn by pseudo-elements goes too. */
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(#qa-intro, #ia-intro)::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(#qa-intro, #ia-intro)::after,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-top::after,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-top-name::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-props-empty::before { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item, .bshell-align-btn, .lang-big, .dk-style-chip).is-selected,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-align-btn, .lang-big).active,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .dk-style-chip.selected { outline: 2px solid currentColor; outline-offset: -2px; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-settings-btn, .bshell-sec-head, .bshell-item).is-selected::before { display: none; }
html.dka-contrast-light body.v2-docs .bshell-canvas-iframe { color-scheme: light; }

/* ============================================ 11 light theme ("מצב בהיר")
   Tokens: css/theme-v2.css (html.dk-light). White panels, a soft grey
   desk so the white page still reads as paper. The document itself is
   untouched (it lives in its own iframe and never reads these rules). */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs { --ed-raise: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-canvas-wrap {
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--acc) 7%, transparent), transparent 70%),
    linear-gradient(rgba(11, 16, 32, .035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(11, 16, 32, .035) 1px, transparent 1px) 0 0 / 28px 28px,
    #e9ecf2;
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-props-empty::before { box-shadow: inset 0 0 0 1px var(--acc-line); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-hier, .bshell-props) { box-shadow: 0 0 0 1px rgba(11, 16, 32, .06); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-top { box-shadow: 0 1px 0 rgba(11, 16, 32, .07), 0 6px 18px -14px rgba(15, 23, 42, .25); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-switch-thumb { box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .upsell-popup { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.dk-style-chip, .builder-form, #qa-tpl-grid .card) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-1); }
@media (max-width: 860px) {
  html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-hier, .bshell-props) { background: #fff; }
  html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(.bshell-hier, .bshell-props).bshell-drawer-open { box-shadow: 0 -20px 50px -16px rgba(15, 23, 42, .3), 0 -1px 0 color-mix(in srgb, var(--acc) 30%, transparent); }
}
@media (min-width: 861px) and (max-width: 1280px) {
  html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs :is(#cvbshell-root, #qbshell-root, #ibshell-root) .bshell-top-status:is(.failed, .limit) { background: #fff1f2; }
}

/* Phones: the "⋯" menu and the one-time tap hint (js/bshell-mobile.js). */
html:not(.hv-light) body.v2-docs .bshell-more-menu { background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .05), transparent 60px), #0d1220; border-color: var(--v2-line-2); box-shadow: 0 24px 60px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))); }
html:not(.hv-light) body.v2-docs .bshell-more-item { color: var(--v2-text); }
html:not(.hv-light) body.v2-docs .bshell-more-item:hover:not(:disabled), html:not(.hv-light) body.v2-docs .bshell-more-item:focus-visible { background: rgba(var(--v2-fg-rgb), .07); color: var(--v2-hi); }
html:not(.hv-light) body.v2-docs .bshell-more-exit { color: var(--v2-muted); border-top-color: var(--v2-line); }
html:not(.hv-light) body.v2-docs .bshell-tap-hint { background: var(--v2-teal); color: var(--v2-on-teal); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-docs .bshell-more-menu { background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); }