/* ============================================================
   Tokens
   ============================================================ */
:root {
  --canvas:       #F4F2EC;
  --surface:      #FFFFFF;
  --surface-2:    #FAF9F5;
  --ink:          #1A2321;
  --ink-soft:     #55615E;
  --ink-faint:    #667070;
  --line:         #E6E3DA;
  --line-strong:  #D0CCC0;

  --accent:       #2F7D6D;
  --accent-hover: #256558;
  --accent-soft:  #E3F1EC;
  --accent-ink:   #1D4F45;
  --on-accent:    #FFFFFF;

  --ai:           #6B4FD8;
  --ai-hover:     #5A3FC4;
  --ai-soft:      #F0ECFF;
  --ai-border:    #D5CBFA;

  --nav-bg:       #16211F;
  --nav-ink:      #C5D0CC;
  --nav-ink-dim:  #7F8D88;
  --nav-active:   rgba(255,255,255,0.09);
  --nav-line:     rgba(255,255,255,0.08);

  --warn-bg:      #FFF6E5;
  --warn-border:  #E8C27A;
  --warn-ink:     #6B4E12;
  --danger:       #B3402C;
  --danger-soft:  #FBEAE5;

  /* The CV sheet is paper: it keeps its own colours in every theme. */
  --sheet-bg:     #FFFFFF;
  --sheet-ink:    #1A2321;
  --sheet-soft:   #55615E;
  --sheet-faint:  #8A9490;
  --sheet-line:   #E6E3DA;
  --sheet-head:   #1F3B36;
  --sheet-tint:   #E3F1EC;
  --sheet-tint-ink: #1D4F45;

  --font-ui:  "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-doc: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(22,33,31,0.05);
  --shadow-md: 0 2px 4px rgba(22,33,31,0.04), 0 10px 28px rgba(22,33,31,0.08);
  --shadow-sheet: 0 2px 6px rgba(22,33,31,0.08), 0 18px 44px rgba(22,33,31,0.14);
  --topbar-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:      #0F1715;
    --surface:     #172220;
    --surface-2:   #1C2927;
    --ink:         #E8EEEC;
    --ink-soft:    #A9B6B2;
    --ink-faint:   #93A09C;
    --line:        #26332F;
    --line-strong: #364540;
    --accent:      #4FB59F;
    --accent-hover:#6FCBB6;
    --accent-soft: #1B332E;
    --accent-ink:  #A8E3D5;
    --on-accent:   #0B1211;
    --ai:          #A99BFF;
    --ai-hover:    #C2B8FF;
    --ai-soft:     #25203F;
    --ai-border:   #413872;
    --nav-bg:      #0B1211;
    --warn-bg:     #2D2412;
    --warn-border: #6B5326;
    --warn-ink:    #E8CC8C;
    --danger:      #E5806C;
    --danger-soft: #3A1F19;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.4);
    --shadow-sheet: 0 18px 44px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --canvas:      #0F1715;
    --surface:     #172220;
    --surface-2:   #1C2927;
    --ink:         #E8EEEC;
    --ink-soft:    #A9B6B2;
    --ink-faint:   #93A09C;
    --line:        #26332F;
    --line-strong: #364540;
    --accent:      #4FB59F;
    --accent-hover:#6FCBB6;
    --accent-soft: #1B332E;
    --accent-ink:  #A8E3D5;
    --ai:          #A99BFF;
    --ai-hover:    #C2B8FF;
    --ai-soft:     #25203F;
    --ai-border:   #413872;
    --nav-bg:      #0B1211;
    --warn-bg:     #2D2412;
    --warn-border: #6B5326;
    --warn-ink:    #E8CC8C;
    --danger:      #E5806C;
    --danger-soft: #3A1F19;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.4);
    --shadow-sheet: 0 18px 44px rgba(0,0,0,0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Quiet scrollbars that follow the colour theme: a thin thumb, no track. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*:hover { scrollbar-color: color-mix(in srgb, var(--ink-faint) 70%, transparent) transparent; }
@supports not (scrollbar-color: auto) {
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }
  *::-webkit-scrollbar-corner { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

html, body { height: 100%; margin: 0; }
/* Without this iOS inflates body text when the phone is turned to landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3 { font-family: var(--font-ui); margin: 0; }
button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ============================================================
   Brand
   ============================================================ */
.brand { display: flex; align-items: center; gap: 0.6rem; }
/* A brand that is a button (dashboard top bar) looks like the plain brand. */
.brand-button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.brand-button:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(47,125,109,0.35);
}
/* --accent on the page background is 4.39:1, just under the 4.5:1 that WCAG AA
   asks for. --accent-hover is the same green, darker in light mode (6.1:1) and
   lighter in dark mode. */
.brand-accent { color: var(--accent-hover); }
.sidebar-brand .brand-accent { color: #8FD3C2; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }

/* ============================================================
   Dashboard ("My CVs")
   ============================================================ */
.dashboard { min-height: 100%; }

.dashboard-topbar {
  padding: 1rem 2rem;
  max-width: 1120px;
  margin: 0 auto;
}

.dashboard-body { max-width: 1120px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }
.dashboard-body .dashboard-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.35rem; }
.dashboard-sub { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 2rem; max-width: 52ch; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5rem 1.25rem;
}

.dashboard-card { position: relative; }

.new-cv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  aspect-ratio: 0.77;
  background: transparent;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.new-cv-card:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); }
.new-cv-plus {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(47,125,109,0.35);
}

.cv-card-open {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Miniature paper */
.cv-card-thumb {
  position: relative;
  aspect-ratio: 0.77;
  background: var(--sheet-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.cv-card:hover .cv-card-thumb,
.cv-card-open:focus-visible .cv-card-thumb {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.cv-thumb-band {
  background: var(--sheet-head);
  padding: 0.9rem 0.9rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cv-card-avatar {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cv-thumb-lines { flex: 1; min-width: 0; }
.cv-thumb-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.7); width: 70%; margin-bottom: 5px; }
.cv-thumb-lines i + i { width: 45%; background: rgba(255,255,255,0.35); margin-bottom: 0; }
.cv-thumb-body { padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.cv-thumb-body i { display: block; height: 4px; border-radius: 2px; background: var(--sheet-line); }
.cv-thumb-body i.h { width: 38%; height: 5px; background: var(--sheet-tint); margin-top: 6px; }
.cv-thumb-body i.s { width: 78%; }
.cv-thumb-body i.m { width: 92%; }

.cv-card-meta { padding: 0.7rem 0.15rem 0; }
.cv-card-title { font-weight: 650; font-size: 0.95rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-card-headline { font-size: 0.82rem; color: var(--ink-soft); margin: 0.05rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-card-headline:empty { display: none; }
.cv-card-updated { font-size: 0.76rem; color: var(--ink-faint); margin: 0.15rem 0 0; }

.cv-card-delete {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s ease;
  z-index: 2;
}
.cv-card-delete svg { display: block; }
.cv-card:hover .cv-card-delete, .cv-card-delete:focus-visible { opacity: 1; }
.cv-card-delete:hover { color: var(--danger); border-color: var(--danger); }
.cv-card-delete.is-armed { width: auto; padding: 0 0.7rem; border-radius: 999px; opacity: 1; color: #fff; background: var(--danger); border-color: var(--danger); font-size: 0.75rem; font-weight: 600; }

.dashboard-empty-hint { color: var(--ink-faint); font-size: 0.9rem; grid-column: 1 / -1; padding-top: 0.25rem; }

/* ============================================================
   Shell layout
   ============================================================ */
.app { display: flex; min-height: 100%; }

/* ---- Sidebar ---- */
.sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.9rem;
  background: var(--nav-bg);
  color: var(--nav-ink);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* phones: 100vh is taller than what you can see */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 1.5rem;
  color: #fff;
}
.sidebar-brand-link {
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sidebar-brand-link:hover { background: var(--nav-active); }
.sidebar-back {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--nav-ink-dim);
  white-space: nowrap;
}
.sidebar-brand-link:hover .sidebar-back { color: #fff; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; }
.side-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nav-ink);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.side-tab svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--nav-ink-dim); }
.side-tab:hover { background: var(--nav-active); color: #fff; }
.side-tab[aria-selected="true"] { background: #fff; color: var(--nav-bg); font-weight: 650; }
.side-tab[aria-selected="true"] svg { color: var(--accent); }

.sidebar-spacer { flex: 1; }

.sidebar-footer { border-top: 1px solid var(--nav-line); padding: 0.9rem 0.5rem 0; }
.save-status { font-size: 0.8rem; color: #8FD0BF; display: flex; align-items: center; gap: 0.45rem; }
.save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sidebar-note { font-size: 0.74rem; color: var(--nav-ink-dim); margin: 0.5rem 0 0; line-height: 1.45; }

/* ---- Main column ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.workspace { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; }
.workspace .editor { flex: 1 1 400px; min-width: 300px; }
/* The preview takes the room the editor leaves. It used to stop at 520 px,
   which showed an A4 sheet at about 55 %. */
.workspace .preview-pane { flex: 2 1 340px; min-width: 300px; }

/* Drag handle between the editor and the preview (not on phones). */
.pane-resizer { display: none; }
@media (min-width: 701px) {
  .pane-resizer {
    display: block; position: sticky; top: var(--topbar-h); z-index: 7;
    flex: 0 0 10px; align-self: flex-start; height: calc(100vh - var(--topbar-h));
    margin: 0 -5px; /* sits on the edge and takes no room */
    cursor: col-resize; touch-action: none;
  }
  .pane-resizer::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px;
    background: transparent; transition: background 0.15s;
  }
  .pane-resizer:hover::before, .pane-resizer:focus-visible::before, body.is-resizing .pane-resizer::before { background: var(--accent); }
  .pane-resizer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* A width chosen by the user. Never so wide that the editor (flex-basis 400 px) would wrap below it. */
  .workspace.has-preview-w .preview-pane { flex: 0 0 min(var(--preview-w), calc(100% - 400px)); }
}
body.is-resizing { cursor: col-resize; user-select: none; }

/* ============================================================
   Editor (left pane)
   ============================================================ */
.editor { padding: 2rem 2rem 3rem; max-width: 760px; width: 100%; margin: 0 auto; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
}

.panel-intro { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.4rem; }

.onboarding-hint {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.86rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  margin: -0.5rem 0 1.25rem;
}

.block { margin-bottom: 1.75rem; }
.block:last-child { margin-bottom: 0; }
.panel .block + .block { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.block h2 { font-size: 1.02rem; font-weight: 650; margin-bottom: 0.5rem; letter-spacing: -0.005em; }
.block-head h2 { margin-bottom: 0; }

.hint { color: var(--ink-faint); font-size: 0.84rem; margin: 0.15rem 0 0.7rem; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-grid.two-col { grid-template-columns: 1fr 1fr; }

.field { display: block; font-size: 0.8rem; font-weight: 550; color: var(--ink-soft); margin-bottom: 0.95rem; }
.field span { display: block; margin-bottom: 0.35rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
/* Text boxes grow as you type (autosize.js), so there is no drag handle.
   They stop at a comfortable height and scroll inside from there. */
textarea {
  resize: none;
  line-height: 1.5;
  display: block;
  min-height: 2.75rem;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}

.char-count { font-size: 0.78rem; color: var(--ink-faint); margin: -0.6rem 0 1rem; text-align: right; }

/* ---- Buttons ---- */
.btn-primary, .btn-ai, .btn-add, .btn-ghost, .icon-btn { font: inherit; cursor: pointer; border-radius: var(--radius-sm); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); }

/* AI actions: violet pill with a sparkle, clearly distinct from normal controls */
.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ai-soft);
  color: var(--ai);
  border: 1px solid var(--ai-border);
  border-radius: 999px;
  padding: 0.42rem 0.95rem 0.42rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .12s, transform .12s;
}
.btn-ai:hover { background: var(--ai); color: #fff; border-color: var(--ai); }
.btn-ai:disabled { opacity: 0.6; cursor: progress; }
.btn-ai-dot { display: inline-block; width: auto; height: auto; flex-shrink: 0; line-height: 1; }
.btn-ai-dot::before { content: "\2726"; font-size: 0.85rem; }
.btn-ai.is-loading .btn-ai-dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.btn-add {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-soft);
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 550;
}
.btn-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#btnAddRole { width: 100%; padding: 0.85rem; margin-top: 0.75rem; }

.btn-ghost { background: none; border: 1px solid var(--line-strong); color: var(--ink); padding: 0.4rem 0.85rem; font-size: 0.85rem; }

.icon-btn {
  background: none;
  border: none;
  color: var(--ink-faint);
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.icon-btn:hover { color: var(--ink); background: var(--accent-soft); }
.icon-btn.remove-role:hover,
.icon-btn.remove-bullet:hover,
.icon-btn.remove-edu:hover { color: var(--danger); background: var(--danger-soft); }

.button-row { display: flex; gap: 0.6rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }

/* ---- AI suggestion / question output ---- */
.ai-suggestion {
  margin-top: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ai-border);
  background: var(--ai-soft);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.ai-suggestion .suggestion-apply { margin-top: 0; }
.ai-suggestion .suggestion-text {
  width: 100%;
  font: inherit;
  white-space: pre-wrap;
}
.suggestion-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.flag-block {
  margin-top: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  white-space: normal;
}
.flag-block.flag-soft { background: transparent; }
.flag-confirm { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; font-size: 0.88rem; white-space: normal; }
.flag-confirm[hidden] { display: none; }
.flag-confirm input { margin-top: 0.2rem; }
.flag-confirm.needs-tick { color: var(--warn-ink); font-weight: 600; }
.flag-term {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0 0.4rem;
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  font-weight: 600;
}
.compare-group { margin-bottom: 0.6rem; white-space: normal; }
.compare-group ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.compare-empty, .compare-notes { margin: 0.25rem 0 0; }
.compare-heading { margin: 0.9rem 0 0.4rem; font-size: 0.95rem; }
.keyword-score { margin: 0.25rem 0 0.4rem; font-weight: 600; }
.keyword-row { margin: 0.25rem 0; white-space: normal; }
.keyword-label { margin-right: 0.4rem; font-size: 0.84rem; color: var(--ink-faint, inherit); }
.kw {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.84rem;
}
/* A missing keyword is a button: it carries the word to the skills box.
   Sized for a finger as well as a mouse. */
button.kw-add {
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
button.kw-add::after { content: "\00a0+"; font-weight: 700; }
button.kw-add:hover, button.kw-add:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Gaps and "worth double-checking": each one has a way to act on it. */
.compare-group ul.compare-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.compare-item {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
}
.compare-item .compare-item-text { flex: 1; min-width: 10rem; }
.compare-item .compare-add { flex: none; padding: 0.3rem 0.8rem; }
.compare-item .compare-add:hover, .compare-item .compare-add:focus-visible {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
/* Where the person was when they last left this list for the editor. It
   says "you opened this", never "this was added". */
.compare-item.is-opened { border-color: var(--accent); background: var(--accent-soft); }
.job-tailor { display: flex; flex-direction: column; gap: 0.3rem; margin: -0.2rem 0 0.8rem; align-items: flex-start; }
.trust-card {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: min(360px, calc(100vw - 32px));
  padding: 0.9rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
}
.trust-card p { margin: 0 0 0.6rem; }
.field small.muted { color: var(--ink-faint); font-weight: 400; }
.trust-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media print { .trust-card { display: none !important; } }

.warning-block {
  margin-top: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-ink);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.question-list { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--ink); }
.question-list li { margin-bottom: 0.45rem; }

/* ---- Review step: checks with an "Add" button each ---- */
.check-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.check-item {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.55rem 0.6rem 0.55rem 0.85rem; font-size: 0.9rem; color: var(--ink);
}
.check-item .check-text { flex: 1; min-width: 0; }
.check-item .check-add { flex: none; padding: 0.3rem 0.8rem; }
.check-item .check-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.check-item.check-ok { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }

.check-item.check-note { background: var(--surface); border-style: dashed; color: var(--ink-soft); }
.check-item.check-intro { background: transparent; border: 0; padding: 0; color: var(--ink-soft); }
.check-group { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 0.6rem; }
.check-group:first-child { margin-top: 0; }
/* Long-CV review: one check per part, and progress text that may wrap */
.review-parts { margin-top: 1rem; }
.review-part-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.4rem; }
.btn-ai.btn-ai-small { font-size: 0.8rem; padding: 0.32rem 0.8rem 0.32rem 0.65rem; }
#panel-review .btn-ai.is-loading { white-space: normal; text-align: left; }

/* ---- Callout shown where a check or question sends you ---- */
.field-ask {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem;
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-ink);
  border-radius: var(--radius-sm); padding: 0.5rem 0.4rem 0.5rem 0.8rem; margin: 0.25rem 0 0.6rem;
  font-size: 0.86rem; scroll-margin-top: calc(var(--topbar-h, 0px) + 1rem);
}
.field-ask .field-ask-text { flex: 1 1 14rem; }
.field-ask .field-ask-back { font-size: 0.84rem; color: var(--warn-ink); }
.field-ask .field-ask-close { color: var(--warn-ink); }
.jump-target { box-shadow: 0 0 0 3px var(--warn-border) !important; }

/* ---- Back / Next at the end of every editor step ---- */
.step-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.step-nav .step-count { color: var(--ink-faint); font-size: 0.8rem; }
.step-nav .step-next-group { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.step-nav .btn-primary { padding: 0.55rem 1.1rem; }
.step-nav .btn-ghost { padding: 0.5rem 0.95rem; }

.side-nav-divider {
  display: block; margin: 0.9rem 0.7rem 0.3rem; font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-ink-dim);
}

/* ============================================================
   Drag-and-drop lists (experience, bullets, skills)
   ============================================================ */
.dnd-list { display: flex; flex-direction: column; gap: 0.7rem; }
.dnd-item { display: flex; align-items: flex-start; gap: 0.5rem; }

.dnd-handle {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  cursor: grab;
  border-radius: 6px;
  font-size: 0.95rem;
  user-select: none;
  touch-action: none;
}
.dnd-handle:hover { background: var(--accent-soft); color: var(--accent); }
.dnd-handle:active { cursor: grabbing; }
/* Touch devices never see the handle. HTML5 drag-and-drop does not start
   from a touch, so dragging it did nothing — and `touch-action: none` meant
   the page would not scroll under your finger there either. The ↑ and ↓
   buttons beside it do the same job and work everywhere. */
@media (hover: none) { .dnd-handle { display: none; } }

.dnd-item.dragging { opacity: 0.4; }
.dnd-item.drag-over-top { box-shadow: inset 0 3px 0 var(--accent); }
.dnd-item.drag-over-bottom { box-shadow: inset 0 -3px 0 var(--accent); }

/* ---- Experience ---- */
.role-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  transition: border-color .12s, box-shadow .12s;
}
.role-card:hover, .role-card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.role-card .dnd-handle { margin-top: 0.15rem; }
.role-card-body { flex: 1; min-width: 0; }

.role-card-header { display: flex; align-items: center; gap: 0.5rem; }

.role-card-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: none;
  padding: 0.25rem 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.role-card-summary:hover .role-card-summary-title { color: var(--accent); }
.role-chevron { flex-shrink: 0; display: inline-flex; color: var(--ink-faint); font-size: 0.8rem; transition: transform .15s ease; }
.role-card-summary[aria-expanded="false"] .role-chevron { transform: rotate(-90deg); }

.role-card-summary-text { min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.role-card-summary-title { font-weight: 650; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-card-summary-dates { font-size: 0.78rem; color: var(--ink-faint); white-space: nowrap; }

.role-card-actions { display: flex; gap: 0.1rem; flex-shrink: 0; opacity: 0; transition: opacity .12s ease; }
.role-card:hover .role-card-actions,
.role-card:focus-within .role-card-actions { opacity: 1; }

.role-card-details {
  margin-top: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.role-card.collapsed .role-card-details { display: none; }
.role-card-details .role-bullets-btn { align-self: flex-start; }

.role-bullets-list { margin-top: 0.75rem; gap: 0.4rem; }
.role-bullets-warnings:empty { display: none; }

/* ---- Bullets ---- */
.bullet-item { align-items: center; }
.bullet-item .bullet-text { flex: 1; min-width: 0; resize: none; background: var(--surface); padding: 0.45rem 0.65rem; font-size: 0.9rem; line-height: 1.4; }
.role-add-bullet { margin-top: 0.5rem; }
.bullet-actions { display: flex; gap: 0.1rem; flex-shrink: 0; opacity: 0; transition: opacity .12s ease; }
.bullet-item:hover .bullet-actions,
.bullet-item:focus-within .bullet-actions { opacity: 1; }

/* ---- Education ---- */
.stack { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.75rem; }
.edu-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1rem 0.1rem;
}
.edu-card .field-grid { flex: 1; }
/* Field of study sits on its own row so Start and End stay side by side.
   Below 920px the grid is one column anyway and this has no effect. */
.edu-card .field-full { grid-column: 1 / -1; }

/* ---- Skill chips ---- */
.chip-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  align-items: center;
  gap: 0.3rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.28rem 0.45rem 0.28rem 0.25rem;
  font-size: 0.86rem;
  font-weight: 500;
}
.chip-handle { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.chip-text { white-space: nowrap; }
.chip-remove { background: none; border: none; color: var(--accent); opacity: 0.6; cursor: pointer; font-size: 0.75rem; width: 1.2rem; height: 1.2rem; }
.chip-remove:hover { opacity: 1; }
/* Reorder buttons. Out of the way with a mouse, where the handle is quicker,
   but always there on a touch screen and whenever the keyboard is inside the
   chip — those are the two places dragging does not work. */
.chip-move {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.8rem; line-height: 1; width: 0; height: 1.3rem; padding: 0;
  opacity: 0; overflow: hidden; transition: opacity .12s ease, width .12s ease;
}
.chip:hover .chip-move, .chip:focus-within .chip-move { width: 1.2rem; opacity: 0.7; }
.chip-move:hover:not(:disabled) { opacity: 1; }
.chip-move:disabled { opacity: 0.25; cursor: default; }
@media (hover: none) {
  .chip-move { width: 1.6rem; height: 1.6rem; opacity: 0.75; }
  .chip:hover .chip-move, .chip:focus-within .chip-move { width: 1.6rem; opacity: 0.75; }
  .chip-move:disabled { opacity: 0.25; }
}
.chip-input-row { display: flex; gap: 0.5rem; margin-top: 0.85rem; max-width: 360px; }
.chip-input-row input { flex: 1; }

/* ============================================================
   Live preview (right pane)
   ============================================================ */
.preview-pane {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto;
  padding: 1rem 0.9rem 2rem;
  background: color-mix(in srgb, var(--canvas) 70%, var(--line-strong) 30%);
  border-left: 1px solid var(--line);
}
/* ---- Preview toolbar ---- */
.preview-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem;
  margin: 0 0 0.6rem;
}
.preview-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: auto;
}
.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.theme-switch button {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
  background: none; border: none; border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.btn-pdf {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px; padding: 0.42rem 0.95rem;
}
.btn-pdf:hover { background: var(--accent-hover); }
.preview-note { flex-basis: 100%; font-size: 0.76rem; color: var(--ink-faint); margin: 0; }
.preview-note:empty { display: none; }

/* ---- Text & layout panel ---- */
.style-toggle { font-size: 0.78rem; font-weight: 600; border-radius: 999px; background: var(--surface); display: inline-flex; gap: 0.35rem; align-items: center; }
.style-toggle[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.style-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.style-field > span { display: flex; justify-content: space-between; }
.style-field output { color: var(--ink); font-variant-numeric: tabular-nums; }
.style-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.style-field select { font: inherit; font-weight: 500; padding: 0.3rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { flex: 1; font: inherit; font-weight: 500; font-size: 0.76rem; padding: 0.3rem 0.4rem; background: var(--surface); color: var(--ink-soft); border: 0; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.style-note { margin: 0; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); }
.style-note:empty { display: none; }

/* ---- Zoom and page count ---- */
.preview-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin: 0 0 0.6rem; }
/* On a wide screen the zoom bar stays on screen while the pages scroll under it.
   Sticky offsets start at the pane's padding edge, so the pane has no top
   padding here and the toolbar carries it instead. */
@media (min-width: 701px) {
  .preview-pane { padding-top: 0; }
  .preview-toolbar { padding-top: 1rem; }
  .preview-viewbar { position: sticky; top: 0; z-index: 6; margin-inline: -0.9rem; padding: 0.45rem 0.9rem; background-color: inherit; }
}
.page-count-wrap { flex-wrap: nowrap; }
.page-count, .fit-toggle, .zoom-ctl button, .zoom-ctl output { white-space: nowrap; }
.zoom-ctl { margin-left: auto; }
.page-count { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.page-count.is-over { color: var(--warn-ink); }
.zoom-ctl { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.zoom-ctl button { font: inherit; font-size: 0.8rem; font-weight: 700; min-width: 1.8rem; height: 1.7rem; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.zoom-ctl button:hover { background: var(--surface-2); color: var(--ink); }
.zoom-ctl .zoom-fit { font-weight: 600; font-size: 0.74rem; padding: 0 0.6rem; }
.zoom-ctl .zoom-fit[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.zoom-ctl output { min-width: 3.1rem; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Sheet: an A4 page at real size, zoomed to fit the pane ---- */
.preview-sheet { width: 100%; }
#previewSheet { overflow-x: hidden; }
#previewSheet .cv-page { margin-inline: auto; }
.zoom-ctl button:disabled { opacity: 0.35; cursor: default; }
@media print { .preview-viewbar { display: none !important; } }
.cv-page {
  --primary: #1F3A5F; --accent: #2F7D6D; --text: #1C1F23; --muted: #5B6470;
  --font-heading: "Inter", sans-serif; --font-body: "Inter", sans-serif;
  --base-size: 9.5pt; --line-height: 1.42; --section-gap: 6.5mm; --margin: 15mm;
  --page-h: 297mm;
  width: var(--page-w, 210mm); min-height: var(--page-h, 297mm);
  padding: var(--margin) var(--margin) calc(var(--margin) + 4mm);
  background-color: #fff;
  position: relative;
  box-shadow: var(--shadow-sheet);
  border-radius: 2px;
  font-family: var(--font-body); font-size: var(--base-size); line-height: var(--line-height);
  color: var(--text);
  font-kerning: normal; text-rendering: optimizeLegibility;
  hyphens: manual; overflow-wrap: break-word;
  transform-origin: top left;
  color-scheme: light;
}
.cv-page *, .cv-page *::before, .cv-page *::after { box-sizing: border-box; }
.cv-page h1, .cv-page h2, .cv-page h3, .cv-page p, .cv-page ul, .cv-page dl, .cv-page dd { margin: 0; padding: 0; }
.cv-page ul { list-style: none; }
.cv-page a { color: inherit; text-decoration: none; }
.cv-page p { orphans: 3; widows: 3; }
.cv-page .placeholder { color: #A3A9B0; font-style: italic; }

.cv-page .section-title, .cv-page .entry-head { break-after: avoid; }
/* A role's title, employer and date stay together: the title line must not
   end a page while the employer line starts the next. */
.cv-page .entry-head, .cv-page .entry-main { break-inside: avoid; }
.cv-page .entry-compact, .cv-page .skill-group, .cv-page .plain-list li, .cv-page .bullets li, .cv-page .cv-header { break-inside: avoid; }

.cv-page .section { margin-top: var(--section-gap); }
.cv-page .entry + .entry { margin-top: calc(var(--section-gap) * 0.55); }
.cv-page .entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; }
.cv-page .entry-main { min-width: 0; }
.cv-page .entry-title { font-family: var(--font-heading); font-size: 1.05em; font-weight: 600; line-height: 1.3; }
.cv-page .entry-org { color: var(--muted); }
.cv-page .entry-org .org + .loc::before { content: " · "; }
.cv-page .entry-date { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--muted); font-size: 0.92em; }
.cv-page .entry-notes { margin-top: 0.6mm; }
.cv-page .entry-desc { margin-top: 1.2mm; }
.cv-page .entry-desc + .bullets { margin-top: 1.2mm; }
.cv-page .bullets { margin-top: 1.2mm; }
.cv-page .bullets li { position: relative; padding-left: 3.6mm; }
.cv-page .bullets li + li { margin-top: 0.7mm; }
/* Bullet markers are CSS backgrounds. Browsers leave backgrounds out of a
   printed page unless the page asks for exact colours, so the PDF export
   lost them. */
.cv-page, .cv-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page .bullets li::before {
  content: ""; position: absolute; left: 0.4mm; top: calc(var(--line-height) * 0.5em - 0.6mm);
  width: 1.3mm; height: 1.3mm; background: var(--accent); border-radius: 50%;
}
.cv-page .skill-line { }
.cv-page .contact {
  --contact-gap: 4mm;
  display: flex; flex-wrap: wrap; column-gap: var(--contact-gap); overflow: hidden; color: var(--muted);
}
.cv-page .contact li { position: relative; white-space: nowrap; }
.cv-page .contact li::before {
  content: var(--contact-sep, "·"); position: absolute;
  left: calc(-1 * var(--contact-gap)); width: var(--contact-gap); text-align: center; color: var(--accent);
}

.cv-page .plain-list li + li { margin-top: 0.6mm; }
.cv-page .muted { color: var(--muted); }
.cv-page .cv-header.has-photo { display: flex; align-items: center; gap: 6mm; }
.cv-page .cv-header-text { min-width: 0; flex: 1; }
.cv-page .cv-photo { width: 26mm; height: 26mm; border-radius: 50%; object-fit: cover; flex: none; order: 2; }
.cv-page.t-classic .cv-header.has-photo { flex-direction: column; justify-content: center; }
.cv-page.t-classic .cv-photo { order: 0; }
.cv-page.t-minimal .cv-header.has-photo { display: block; position: relative; min-height: 28mm; }
.cv-page.t-minimal .cv-photo { position: absolute; left: 0; top: 1mm; width: 28mm; height: 28mm; border-radius: 2mm; }

/* Modern */
.cv-page.t-modern .cv-header { padding-bottom: 4.5mm; border-bottom: 0.6pt solid color-mix(in srgb, var(--primary) 22%, white); }
.cv-page.t-modern .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(2.55em * var(--heading-scale, 1)); line-height: 1.05; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-modern .headline { margin-top: 1.4mm; font-size: 1.18em; font-weight: 500; color: var(--accent); }
.cv-page.t-modern .contact { margin-top: 2.6mm; font-size: 0.92em; }
.cv-page.t-modern .section-title {
  display: flex; align-items: center; gap: 2.5mm; margin-bottom: 2.4mm;
  font-family: var(--font-heading); font-size: calc(0.8em * var(--heading-scale, 1)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--heading-color, var(--primary));
}
.cv-page.t-modern .section-title::after { content: ""; flex: 1; border-top: 0.5pt solid color-mix(in srgb, var(--primary) 18%, white); }
.cv-page.t-modern .summary { font-size: 1.04em; }
.cv-page.t-modern .entry-title { color: var(--primary); }
.cv-page.t-modern .entry-org .org { color: var(--text); font-weight: 500; }
.cv-page.t-modern .cols::after { content: ""; display: block; clear: both; }
/* The side column is a float, not a grid cell: it ends where its content ends, so the main text widens to the full page width on later pages instead of leaving an empty strip. Entries and headings are block formatting contexts, so each sits beside the float or below it as a whole. */
.cv-page.t-modern .col-side { float: right; width: 56mm; margin-left: 9mm; }
.cv-page.t-modern .col-main .entry { display: flow-root; }
.cv-page.t-modern .col-side { font-size: 0.95em; }
.cv-page.t-modern .col-side .entry-head { display: block; }
.cv-page.t-modern .col-side .entry-title { font-size: 1em; }
.cv-page.t-modern .col-side .skill-line { line-height: 1.55; }

/* Classic */
.cv-page.t-classic .cv-header { text-align: center; padding-bottom: 3.5mm; border-bottom: 2.4pt double var(--primary); }
.cv-page.t-classic .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2em * var(--heading-scale, 1)); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.06em; color: var(--name-color, var(--primary)); }
.cv-page.t-classic .headline { margin-top: 1mm; font-style: italic; font-size: 1.12em; color: var(--accent); }
.cv-page.t-classic .contact { justify-content: center; --contact-gap: 5mm; margin-top: 2mm; font-size: 0.93em; }
.cv-page.t-classic .contact li::before { content: none; }
.cv-page.t-classic .section-title {
  margin-bottom: 2.2mm; padding-bottom: 0.8mm; border-bottom: 0.5pt solid color-mix(in srgb, var(--primary) 40%, white);
  font-family: var(--font-heading); font-weight: 600; font-size: calc(0.92em * var(--heading-scale, 1)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--heading-color, var(--primary));
}
.cv-page.t-classic .entry-org { font-style: italic; }
.cv-page.t-classic .entry-org .org { color: var(--accent); }
.cv-page.t-classic .entry-date { font-style: italic; }
.cv-page.t-classic .bullets li::before { content: "–"; background: none; width: auto; height: auto; border-radius: 0; top: 0; left: 0; color: var(--accent); }

/* Minimal */
.cv-page.t-minimal .cv-header { padding: 0 0 5mm 36mm; }
.cv-page.t-minimal .name { font-family: var(--font-heading); font-weight: 500; font-size: calc(2.6em * var(--heading-scale, 1)); line-height: 1.02; letter-spacing: -0.025em; color: var(--name-color, var(--primary)); }
.cv-page.t-minimal .headline { margin-top: 1.6mm; font-size: 1.12em; color: var(--accent); }
.cv-page.t-minimal .contact { --contact-sep: "/"; margin-top: 2.4mm; font-size: 0.92em; }
.cv-page.t-minimal .contact li::before { color: color-mix(in srgb, var(--muted) 55%, white); }
.cv-page.t-minimal .section {
  position: relative; padding-left: 36mm; padding-top: calc(var(--section-gap) * 0.6);
  border-top: 0.5pt solid color-mix(in srgb, var(--primary) 14%, white);
}
.cv-page.t-minimal .section-title {
  position: absolute; left: 0; width: 30mm; padding-top: 0.5mm;
  font-family: var(--font-heading); font-size: calc(0.82em * var(--heading-scale, 1)); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--heading-color, var(--muted));
}
.cv-page.t-minimal .entry-org .org { color: var(--text); }
.cv-page.t-minimal .bullets li::before { width: 1.8mm; height: 0; border-radius: 0; background: none; border-top: 0.7pt solid var(--accent); top: calc(var(--line-height) * 0.5em); }

/* ATS */
.cv-page.t-ats .cv-header { padding-bottom: 2.5mm; border-bottom: 0.75pt solid var(--text); }
.cv-page.t-ats .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(1.9em * var(--heading-scale, 1)); line-height: 1.15; }
.cv-page.t-ats .headline { margin-top: 0.6mm; font-size: 1.08em; font-weight: 500; }
.cv-page.t-ats .contact { --contact-sep: "|"; --contact-gap: 5mm; margin-top: 1.4mm; color: var(--text); }
.cv-page.t-ats .contact li::before { color: var(--muted); }
.cv-page.t-ats .section-title {
  margin-bottom: 1.8mm; padding-bottom: 0.6mm; border-bottom: 0.5pt solid var(--muted);
  font-family: var(--font-heading); font-size: calc(1.02em * var(--heading-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.cv-page.t-ats .entry-title { font-weight: 700; }
.cv-page.t-ats .entry-org, .cv-page.t-ats .entry-date { color: var(--text); }
.cv-page.t-ats .bullets li::before { content: "•"; background: none; width: auto; height: auto; border-radius: 0; top: 0; left: 0.2mm; color: var(--text); }

.preview-empty { color: var(--sheet-faint); font-family: var(--font-ui); font-size: 0.9rem; text-align: center; padding: 3rem 1.75rem; background: var(--sheet-bg); border-radius: 4px; box-shadow: var(--shadow-sheet); }

/* ---- Print = PDF export: only the page, at real size ---- */
@media print {
  html, body { height: auto; background: #fff !important; }
  .demo-banner, #screenDashboard, .sidebar, .editor, .preview-toolbar, .pane-resizer, .toast { display: none !important; }
  .app, .main, .workspace, .preview-pane, .preview-sheet {
    display: block !important; position: static !important; height: auto !important; width: auto !important;
    max-width: none !important; min-width: 0 !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  }
  .cv-page { zoom: 1 !important; padding: 0; min-height: 0 !important; box-shadow: none; background-image: none; width: auto; border-radius: 0; }
  .page-break, .cv-footer-preview { display: none !important; }
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: #16211F;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.88rem;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-width: calc(100vw - 2rem);
  border: 1px solid rgba(255,255,255,0.12);
}
.toast.toast-error { background: var(--danger); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  :root { --topbar-h: 58px; }
  .dashboard-topbar { padding: 0.9rem 1.1rem 0; }
  .dashboard-body { padding: 1rem 1.1rem 3rem; }
  .dashboard-body .dashboard-title { font-size: 1.6rem; }
  .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem 0.9rem; }

  .app { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 25;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
  }
  .sidebar-brand { margin-bottom: 0; padding: 0.3rem; }
  .sidebar-back { display: none; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; gap: 0.2rem; margin-left: auto; }
  /* Icon with its name underneath, so no tab is an unlabelled icon. */
  .side-tab { flex-direction: column; gap: 0.15rem; white-space: nowrap; padding: 0.4rem 0.55rem; width: auto; min-width: 3.6rem; font-size: 0.68rem; text-align: center; }
  .side-nav-divider { display: none; }
  .step-nav .step-count { order: -1; flex-basis: 100%; text-align: center; }
  .step-nav .step-next-group { margin-left: auto; }
  .sidebar-spacer, .sidebar-footer { display: none; }

  .editor { padding: 1.1rem 0.9rem 2rem; }
  .panel { padding: 1.2rem 1.1rem; }
  .field-grid, .field-grid.two-col { grid-template-columns: 1fr; }
  /* Touch devices have no hover, so row actions must stay visible. */
  .role-card-actions, .bullet-actions { opacity: 1; }
  .cv-card-delete { opacity: 1; }
}

/* On a phone the drag handle and the three always-visible buttons left only
   about 98px for the bullet text itself, roughly 14 characters a line. The
   text box now takes the whole row and the controls sit underneath it. */
@media (max-width: 560px) {
  .bullet-item { flex-wrap: wrap; row-gap: 0.15rem; }
  .bullet-item .bullet-text { flex: 1 1 100%; order: -1; }
  .bullet-item .bullet-actions { margin-left: auto; }
}

/* Below this the preview moves under the editor — still always reachable. */
@media (max-width: 700px) {
  .workspace { flex-direction: column; }
  .workspace .editor, .workspace .preview-pane { flex: none; width: 100%; }
  .preview-pane {
    position: static;
    height: auto;
    max-width: none;
    padding: 1.5rem 0.9rem calc(3rem + env(safe-area-inset-bottom));
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* ---- More sections tab ---- */
.size-pick { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.size-pick select { font: inherit; font-size: 0.78rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.6rem; }
.photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.photo-thumb { width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent-soft) center / cover no-repeat; border: 1px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; }
.photo-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* While a photo is being decoded. A full-resolution phone photo takes a
   moment, and the buttons otherwise look like they did nothing. */
.photo-thumb.is-busy { opacity: 0.55; }
.photo-actions button[disabled] { opacity: 0.55; cursor: default; }

.section-row { display: flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; }
.section-row .section-row-label { flex: 1; font-weight: 600; font-size: 0.92rem; }
.section-row.is-hidden .section-row-label { color: var(--ink-faint); text-decoration: line-through; }
.section-row .eye { background: none; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; color: var(--ink-soft); padding: 0.2rem 0.65rem; cursor: pointer; }
.section-row .eye:hover { border-color: var(--accent); color: var(--accent); }

.list-section { margin-bottom: 1.6rem; }
.list-section h2 { margin-bottom: 0.5rem; }
.row-card { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.8rem 0.9rem 0.1rem; margin-bottom: 0.6rem; }
.row-card .field-grid { flex: 1; }
.row-card .field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.custom-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1rem 0.2rem; }
.custom-card .custom-head { display: flex; gap: 0.5rem; align-items: flex-start; }
.custom-card .custom-head .field { flex: 1; }
@media (max-width: 920px) { .row-card .field-grid.cols-3 { grid-template-columns: 1fr; } }

/* ============================================================
   Accounts, dialogs, history, cover letter, mobile toggle
   ============================================================ */
.sidebar-export {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: left;
  color: var(--nav-ink); background: var(--nav-active); border: 1px solid var(--nav-line);
  border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; width: 100%;
}
.sidebar-export:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: #fff; }
.sidebar-export:disabled { opacity: 0.4; cursor: default; }
.sidebar-export:focus-visible, .account-btn:focus-visible { outline: 2px solid #8FD3C2; outline-offset: 2px; }
.history-row { display: flex; gap: 0.35rem; margin-bottom: 0.4rem; }
.history-row .sidebar-export { text-align: center; padding: 0.45rem 0.3rem; }
.sidebar-footer .sidebar-export + .sidebar-export { margin-top: 0; }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.btn-danger { font: inherit; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: var(--danger); color: #fff; padding: 0.55rem 1rem; font-weight: 600; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-danger:disabled, .btn-primary:disabled { opacity: 0.55; cursor: default; }

/* sign in */
/* 100vh on a phone does not subtract the browser's own toolbar, so the
   bottom of the sign-in screen sat underneath it. 100dvh is the part you
   can actually see; the 100vh line stays as the fallback. */
.auth-screen { min-height: 100vh; min-height: 100dvh; background: var(--canvas); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.9rem; }
.auth-card h2 { margin: 0; font-size: 1.4rem; line-height: 1.25; }
.auth-sub { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.auth-hint { margin: -0.3rem 0 0; color: var(--ink-soft); font-size: 0.8rem; }
.auth-error { margin: 0; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: 0.85rem; }
/* Same slot, but for news that is not a problem: "your account was deleted". */
.auth-error.auth-note { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.auth-switch { margin: 0.2rem 0 0; text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
.auth-card .btn-primary { padding: 0.7rem 1rem; }

/* account menu */
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; }
.account-menu { position: relative; }
.account-btn { font: inherit; font-size: 0.85rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer; color: var(--ink); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-pop { position: absolute; right: 0; top: calc(100% + 0.35rem); min-width: 14rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(22,33,31,0.15); padding: 0.35rem; z-index: 30; display: flex; flex-direction: column; }
.account-pop button { font: inherit; font-size: 0.88rem; text-align: left; background: none; border: 0; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.account-pop a { font: inherit; font-size: 0.88rem; text-align: left; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.account-pop button:hover, .account-pop a:hover { background: var(--surface-2); }
.account-pop button.danger { color: var(--danger); }

/* Profile and settings */
.profile-body { max-width: 760px; }
.profile-back { margin-bottom: 1rem; }
.profile-body .dashboard-title:focus { outline: none; }
.profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; margin: 0 0 1.25rem; }
.profile-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.4rem; }
.profile-card > .hint { margin-top: 0; }
.profile-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; padding: 0.6rem 0; }
.profile-row + .profile-row { border-top: 1px solid var(--line); }
.profile-row-text { flex: 1 1 16rem; min-width: 0; }
.profile-row-text .hint { margin: 0.15rem 0 0; }
.profile-row select { font: inherit; width: auto; min-width: 9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.profile-row select:disabled { opacity: 1; color: var(--ink-soft); background: var(--surface-2); cursor: not-allowed; }
.profile-row .seg button { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.session-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.session-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.7rem 0; }
.session-item + .session-item { border-top: 1px solid var(--line); }
.session-text { flex: 1 1 14rem; min-width: 0; }
.session-text .hint { margin: 0.1rem 0 0; }
.session-current { margin-left: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.profile-danger { border-color: var(--danger); }
.profile-danger h2 { color: var(--danger); }

/* duplicate button on cards */
.cv-card-dup {
  position: absolute; top: 0.55rem; right: 2.6rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s ease; z-index: 2;
}
.cv-card:hover .cv-card-dup, .cv-card-dup:focus-visible { opacity: 1; }
.cv-card-dup:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 920px) { .cv-card-dup { opacity: 1; } }

/* dialogs */
.modal { border: 0; border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.2rem; width: min(520px, calc(100vw - 2rem)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.modal::backdrop { background: rgba(22,33,31,0.5); }
.modal h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.modal-sub { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.9rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }
.version-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.version-list li { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.55rem 0.75rem; background: var(--surface-2); }
.version-list .v-when { font-weight: 600; font-size: 0.9rem; }
.version-list .v-what { color: var(--ink-soft); font-size: 0.8rem; }
.version-list .v-text { flex: 1; }
.version-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 0.5rem 0; }
.import-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.8rem 1rem; font-size: 0.9rem; display: grid; gap: 0.25rem; }
.import-summary strong { font-size: 1rem; }
.import-photo { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.75rem; font-size: 0.9rem; cursor: pointer; }
.import-photo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex: none; }

/* waiting for the local model */
.ai-wait { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.8rem; padding: 0.55rem 0.8rem; background: var(--ai-soft); border: 1px solid var(--ai-border); border-radius: var(--radius-sm); color: #3F2F94; font-size: 0.85rem; }
.spinner { width: 1rem; height: 1rem; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }
.busy-overlay { position: fixed; inset: 0; background: rgba(244,242,236,0.82); display: grid; place-items: center; z-index: 90; padding: 1.5rem; }
.busy-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(22,33,31,0.15); padding: 1.4rem 1.6rem; display: flex; align-items: center; gap: 0.9rem; max-width: 26rem; color: var(--ink); }
.busy-card p { margin: 0; font-size: 0.92rem; }
.btn-ai:disabled:not(.is-loading) { opacity: 0.55; cursor: not-allowed; }

/* cover letter */
.letter-editor { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.letter-editor h2 { margin: 0 0 0.3rem; }
/* A letter has a letterhead (name and one line of contact details), not the
   CV masthead: no photo, headline, banner or sidebar. */
.cv-page.letter .letter-head { padding-bottom: 3.5mm; border-bottom: 0.6pt solid color-mix(in srgb, var(--primary) 25%, white); }
.cv-page.letter .letter-name { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: calc(1.55em * var(--heading-scale, 1)); line-height: 1.15; letter-spacing: -0.01em; color: var(--name-color, var(--primary)); }
.cv-page.letter .letter-contact { margin: 1.4mm 0 0; font-size: 0.92em; color: var(--muted); display: flex; flex-wrap: wrap; }
.cv-page.letter .letter-contact span { white-space: nowrap; }
.cv-page.letter .letter-contact span + span::before { content: "\00b7"; margin: 0 2.6mm; color: var(--accent); }
.cv-page.letter .letter-meta { margin-top: 10mm; }
.cv-page.letter .letter-to { margin: 0; white-space: pre-line; }
/* The date lines up with the address and the text, in the same colour and size.
   Flush-right grey made it look detached from the letter. Left is what US
   letters, DIN 5008 and a letter with a printed letterhead all allow. */
.cv-page.letter .letter-date { margin: 0; text-align: left; }
.cv-page.letter .letter-to + .letter-date { margin-top: 8mm; }
.cv-page.letter .letter-subject { margin: 8mm 0 0; font-weight: 700; }
.cv-page.letter .letter-body { margin-top: 7mm; font-size: 1.04em; line-height: 1.55; }
.cv-page.letter .letter-body p { margin: 0 0 3.6mm; white-space: pre-wrap; orphans: 3; widows: 3; }
.cv-page.letter .letter-sign { margin-top: 6mm; }
.cv-page.letter .letter-empty { color: var(--muted); font-style: italic; margin-top: 9mm; }

/* plain-text (ATS) view */
.text-view { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem; }
.text-view-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.text-view-bar p { margin: 0; flex: 1 1 12rem; font-size: 0.8rem; color: var(--ink-soft); }
.text-view pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 0.8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); max-height: 70vh; overflow: auto; }

/* mobile: edit / preview toggle */
.mobile-toggle { display: none; }
@media (max-width: 700px) {
  .mobile-toggle {
    display: flex; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40;
    background: var(--ink); border-radius: 999px; padding: 0.25rem; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .mobile-toggle[hidden] { display: none; }
  .mobile-toggle button { font: inherit; font-size: 0.9rem; font-weight: 600; color: #cfd8d5; background: none; border: 0; border-radius: 999px; padding: 0.55rem 1.4rem; cursor: pointer; }
  .mobile-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
  .workspace.show-preview .editor { display: none; }
  .workspace:not(.show-preview) .preview-pane { display: none; }
  .editor { padding-bottom: 6rem; }
  .preview-pane { border-top: 0; padding-bottom: 6rem; }
}
@media print { .mobile-toggle, .busy-overlay, .modal, .auth-screen, #screenAuth { display: none !important; } .preview-pane { display: block !important; } }

.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dashboard-head .dashboard-sub { margin: 0; }
.dashboard-head .btn-ghost { white-space: nowrap; background: var(--surface); }
.dashboard-head .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.dashboard-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.history-row .sidebar-export { flex: 1 1 0; white-space: nowrap; padding: 0.45rem 0.2rem; }
@media (max-width: 700px) { .preview-pane { min-height: calc(100vh - 7rem); min-height: calc(100dvh - 7rem); } }

/* ---- Light / dark / auto switch ---- */
.theme-toggle {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 0.4rem 0.8rem;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }
.sidebar-footer .theme-toggle { width: 100%; text-align: left; border-radius: var(--radius-sm); margin-bottom: 0.4rem;
  color: var(--nav-ink); background: var(--nav-active); border-color: var(--nav-line); padding: 0.45rem 0.7rem; }
.sidebar-footer .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.15); }
.mobile-theme { display: none; }
@media (max-width: 920px) { .sidebar-footer { display: none; } }


/* ============================================================
   Job tracker
   ============================================================ */
select { appearance: auto; }
.dash-tabs { max-width: 1120px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); }
.dash-tab { font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 0.9rem; margin-bottom: -1px; cursor: pointer; }
.dash-tab:hover { color: var(--ink); }
.dash-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.jobs-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.jobs-tools input[type="search"] { width: 14rem; padding: 0.5rem 0.75rem; border-radius: 999px; background: var(--surface); }
.view-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.view-switch button { font: inherit; font-size: 1rem; line-height: 1; color: var(--ink-soft); background: none; border: 0; border-radius: 6px; padding: 0.4rem 0.6rem; cursor: pointer; }
.view-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.job-board { display: grid; grid-template-columns: repeat(5, minmax(185px, 1fr)); gap: 0.8rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.job-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.7rem; min-height: 9rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color .12s, background .12s; }
.job-col.drop-target { border-color: var(--accent); background: var(--accent-soft); }
.job-col-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.2rem; }
.job-col-head h2 { font-size: 0.95rem; font-weight: 700; }
.job-col-count { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; }
.job-col-add { font: inherit; font-size: 0.85rem; font-weight: 550; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem; cursor: pointer; }
.job-col-add:hover { border-color: var(--accent); color: var(--accent); }

.job-card { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; cursor: grab; box-shadow: var(--shadow-sm); }
.job-card:hover, .job-card:focus-visible { border-color: var(--accent); }
.job-card.dragging { opacity: 0.4; }
.job-card-wrap { position: relative; }
.job-card-wrap .job-card { padding-right: 2rem; }
.job-card-del {
  position: absolute; top: 0.35rem; right: 0.35rem; min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem;
  font: inherit; font-size: 0.95rem; line-height: 1; border: 0; border-radius: 999px; background: none; color: var(--ink-faint); cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.job-card-wrap:hover .job-card-del, .job-card-del:focus-visible, .job-card-del.is-armed { opacity: 1; }
@media (hover: none) { .job-card-del { opacity: 1; } }
.job-card-del:hover { background: var(--danger-soft); color: var(--danger); }
.job-card-del.is-armed, .job-row-del.is-armed { background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 700; }
.job-row-del { font: inherit; font-size: 0.8rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.job-row-del:hover { border-color: var(--danger); color: var(--danger); }
.job-row-actions { text-align: right; white-space: nowrap; }
.job-card-company { display: block; font-weight: 650; font-size: 0.92rem; overflow-wrap: anywhere; }
.job-card-title { display: block; font-size: 0.85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.job-card-meta { display: block; margin-top: 0.35rem; font-size: 0.76rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.job-empty { grid-column: 1 / -1; color: var(--ink-faint); font-size: 0.9rem; }

.job-list { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.job-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.job-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.job-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.job-table tr:last-child td { border-bottom: 0; }
.job-table tbody tr:hover { background: var(--surface-2); }
.job-table .job-open { font: inherit; font-weight: 650; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.job-table .job-open:hover { color: var(--accent); }
.job-table select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.85rem; }

.job-actions { align-items: center; }
.job-actions-spacer { flex: 1; }
.btn-danger-ghost { font: inherit; font-size: 0.85rem; cursor: pointer; background: none; border: 1px solid var(--line-strong); color: var(--danger); border-radius: var(--radius-sm); padding: 0.4rem 0.85rem; }
.btn-danger-ghost:hover, .btn-danger-ghost.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; }
#jobDialog { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
#jobDialog .field-grid { gap: 0 1rem; }

@media (max-width: 920px) {
  .dash-tabs { padding: 0 1.1rem; }
}
@media (max-width: 700px) {
  .job-board { grid-template-columns: 1fr; overflow-x: visible; }
  .jobs-tools input[type="search"] { width: 100%; flex: 1 1 100%; }
  #jobDialog .field-grid { grid-template-columns: 1fr; }
}
.size-pick select { width: auto; }
@media (max-width: 700px) {
  .brand-name { white-space: nowrap; }
  .dashboard-topbar { gap: 0.5rem; }
  .topbar-actions { gap: 0.4rem; min-width: 0; }
  .account-btn { max-width: 8.5rem; }
}


/* ============================================================
   Sign-in methods
   ============================================================ */
.auth-view { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-view[hidden] { display: none; }
#authForm { display: flex; flex-direction: column; gap: 0.2rem; }
#authForm[hidden] { display: none; }
.auth-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   Landing page (signed-out screen)
   ============================================================ */
.landing { --lp-max: 1120px; --lp-gutter: 1rem; color: var(--ink); padding: 0 var(--lp-gutter); }
.landing[hidden] { display: none; }
.landing h1, .landing h2, .landing h3 { letter-spacing: -0.01em; }
.landing-top {
  max-width: var(--lp-max); margin: 0 auto; padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
.landing-top .btn-ghost { background: var(--surface); }
/* The header must wrap on a phone. Without this the four nav items kept the
   page 440px wide at 360px, so the whole home page scrolled sideways and the
   left edge of every section was cut off. */
.landing-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.landing-nav a { color: var(--ink-soft); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 8px; }
.landing-nav a:hover { color: var(--ink); background: var(--surface); }
/* A browser that has signed in before hides the landing page until the app has decided what to show. */
html.returning #screenAuth { visibility: hidden; }
.strong { font-weight: 700; }

/* Shown when a signed-in user opens the home page to look at it */
.home-preview-bar {
  max-width: var(--lp-max); margin: 0.75rem auto 0; padding: 0.6rem 0.75rem 0.6rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-md); font-size: 0.9rem;
}
.home-preview-bar[hidden] { display: none; }
.topbar-link, .topbar-signout { background: var(--surface); border-radius: 999px; white-space: nowrap; }
@media (max-width: 700px) {
  /* On a phone, sign out stays in the account menu to save room. */
  .topbar-signout { display: none; }
  /* The top bar is too wide for a phone, which pushed the account button off
     the screen. The theme is under Profile and settings, so the shortcut and
     the home-page preview step aside. */
  .topbar-link, #btnThemeTop { display: none; }
}

.landing-hero {
  max-width: var(--lp-max); margin: 0 auto; padding: 2.5rem 0 2rem;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 420px);
  gap: 3.5rem; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.eyebrow {
  margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 0.3rem 0.75rem;
}
.hero-copy h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; text-wrap: balance; }
.hero-lead { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); max-width: 36rem; }
.hero-points { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.hero-points li { position: relative; padding-left: 1.7rem; font-size: 0.95rem; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232F7D6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.hero-cta { margin-top: 0.4rem; padding: 0.75rem 1.5rem; font-size: 1rem; }
.hero-note { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }

/* ---- Hero picture: the editor's preview pane with a sample CV ----
   Drawn in CSS rather than shipped as a screenshot: no extra request, sharp at
   any size, and it follows the theme. The paper stays white in dark mode,
   exactly as .cv-page does, because a CV is always printed on white. */
.hero-shot { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.hero-frame {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 0.7rem; overflow: hidden;
}
.hero-frame-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.15rem 0.6rem; }
.hero-frame-title { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); margin-right: auto; }
.hero-pill {
  font-size: 0.68rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem;
}

/* The sheet is cut off at the bottom, so it reads as a page that carries on. */
.hero-paper {
  color-scheme: light;
  background: #fff; color: #1C1F23; border-radius: 3px; box-shadow: var(--shadow-sheet);
  padding: 7% 8% 0; height: 24rem; overflow: hidden;
  font-size: clamp(0.62rem, 1.4vw, 0.72rem); line-height: 1.4;
}
.hero-paper p { margin: 0; }
.hs-name { font-size: 1.9em; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.hs-role { font-size: 1.05em; color: #2F7D6D; font-weight: 600; margin-top: 0.15em !important; }
.hs-meta { font-size: 0.85em; color: #5B6470; margin-top: 0.5em !important; }
.hs-title {
  font-size: 0.8em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2F7D6D;
  margin-top: 1.9em !important; padding-bottom: 0.35em; border-bottom: 1px solid #E3E0D8;
}
.hs-entry { margin-top: 1em; display: grid; grid-template-columns: 1fr auto; gap: 0.15em 0.6em; }
.hs-job { font-weight: 600; }
.hs-date { color: #5B6470; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-line { grid-column: 1 / -1; height: 0.42em; border-radius: 999px; background: #E8E5DD; }
.hs-w92 { width: 92%; } .hs-w90 { width: 90%; } .hs-w88 { width: 88%; }
.hs-w74 { width: 74%; } .hs-w70 { width: 70%; } .hs-w62 { width: 62%; }
.hs-tags { margin-top: 1em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.hs-tags span { height: 1.5em; width: 4.2em; border-radius: 999px; background: #EFF4F2; border: 1px solid #DCE6E3; }
.hs-tags span:nth-child(2) { width: 5.6em; }
.hs-tags span:nth-child(3) { width: 3.4em; }
.hs-tags span:nth-child(4) { width: 5em; }

/* The suggestion box: the one thing that says "AI proposes, you decide". */
.hero-suggest {
  position: absolute; left: -1.5rem; bottom: -0.9rem; width: min(17.5rem, 80%);
  background: var(--ai-soft); border: 1px solid var(--ai-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 0.7rem 0.85rem;
}
.hero-suggest p { margin: 0; }
.hero-suggest-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ai);
}
.hero-suggest-text { margin-top: 0.3rem !important; font-size: 0.85rem; line-height: 1.45; color: var(--ink); }
.hero-suggest-actions { margin-top: 0.6rem !important; display: flex; gap: 0.4rem; }
.hero-use, .hero-dismiss { font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.22rem 0.7rem; }
.hero-use { background: var(--ai); color: #fff; }
.hero-dismiss { color: var(--ink-soft); border: 1px solid var(--line-strong); }

/* ---- Sign in ----
   The card is 400px wide and the column is 1120px, so on its own it sat as an
   island with a third of the page blank on either side. It now shares a
   tinted panel with the three things worth knowing before you hand over an
   email address, which fills the row and does the reassuring at the point
   where it matters. The card itself is untouched: it is the same element the
   app uses for the real sign-in flow. */
.landing-signin { max-width: var(--lp-max); margin: 0 auto; padding: 0 0 3.5rem; }
.signin-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 3rem; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2.5rem;
}
.signin-aside { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.signin-lead { margin: 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.landing-signin .auth-card { margin-inline: auto; box-shadow: var(--shadow-md); scroll-margin: 1.5rem; }

/* ---- Template gallery: one scrolling strip, CVs or cover letters ----
   The thumbnails are generated from the live renderer by
   e2e/gen-template-thumbs.mjs, so they cannot drift from what the app
   produces. Re-run it after changing CV_THEMES.

   Both sets used to be stacked, which came to 999px: a fifth of the whole
   page for one section. Only one is shown at a time now, switched by two
   radios rather than script. The set that is not showing is display:none,
   so its thirty previews are never fetched until someone asks for them. */
.tpl-gallery { --tpl-gap: 1rem; position: relative; max-width: var(--lp-max); margin: 0 auto; padding: 0 0 3rem; }
.tpl-head { max-width: 46rem; }
.tpl-head h2 { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em; }
.tpl-head p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

/* Hidden, but still focusable: the labels are what you see, the radios are
   what the keyboard and screen readers work with. */
.tpl-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The switch on the left, the arrows on the right, on one line. */
.tpl-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 1.25rem 0 0.9rem; flex-wrap: wrap;
}
.tpl-switch {
  display: inline-flex; gap: 0.2rem; padding: 0.2rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.tpl-switch label {
  cursor: pointer; border-radius: 999px; padding: 0.3rem 0.9rem;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; user-select: none;
}
.tpl-switch label:hover { color: var(--ink); }
#tplKindCv:checked ~ .tpl-bar label[for="tplKindCv"],
#tplKindLetter:checked ~ .tpl-bar label[for="tplKindLetter"] {
  background: var(--accent); color: var(--on-accent);
}
/* The radio is invisible, so its focus ring has to appear on the label. */
#tplKindCv:focus-visible ~ .tpl-bar label[for="tplKindCv"],
#tplKindLetter:focus-visible ~ .tpl-bar label[for="tplKindLetter"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#tplKindCv:checked ~ #tplPanelLetter,
#tplKindLetter:checked ~ #tplPanelCv { display: none; }
/* Only the arrows for the strip on show. They are hidden in the HTML and
   revealed by gallery.js, so these rules take the other pair back out. */
#tplKindCv:checked ~ .tpl-bar [data-tpl-nav="tplStripLetter"],
#tplKindLetter:checked ~ .tpl-bar [data-tpl-nav="tplStripCv"] { display: none; }

.tpl-nav { display: flex; gap: 0.4rem; }
.tpl-arrow {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  font: inherit; font-size: 1.35rem; line-height: 1; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; cursor: pointer;
}
.tpl-arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-soft); }
.tpl-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-arrow:disabled { opacity: 0.35; cursor: default; }

/* The strip is the scroller. It is focusable because a region that only
   scrolls sideways is otherwise unreachable from the keyboard. */
.tpl-strip {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  /* Bleed to the window edge on narrow screens so a card is cut off at the
     margin, which is what tells a visitor the row scrolls. */
  margin-inline: calc(var(--lp-gutter) * -1);
  padding: 0.25rem var(--lp-gutter) 0.9rem;
  scroll-padding-inline: var(--lp-gutter);
}
.tpl-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-md); }

/* A grid rather than a flex row, so a card can be a share of the strip
   instead of a fixed width: three fill the row exactly at desktop, and the
   count drops with the viewport. The percentage resolves against the
   strip's content box, which is what makes "exactly three" hold. */
.tpl-row {
  display: grid; grid-auto-flow: column; gap: var(--tpl-gap);
  grid-auto-columns: calc((100% - 2 * var(--tpl-gap)) / 3);
  margin: 0; padding: 0; list-style: none;
}

.tpl-card {
  scroll-snap-align: start;
  /* Sixty previews sit below the fold. Without this the browser loads the
     ones it guesses are coming up even when nobody scrolls that far, which
     measured as about 110 KB and 0.4s of DOMContentLoaded on a throttled
     phone. Skipping the off-screen cards defers them until they are reached.
     Width comes from the grid column, so only the height is given here; the
     plain value is a fallback for browsers without the auto keyword, and it
     has to come first or a skipped card collapses to nothing. */
  content-visibility: auto;
  contain-intrinsic-size: 22rem 28rem;
  contain-intrinsic-size: auto 22rem auto 28rem;
}
.tpl-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 640 / 736;
  /* A CV is printed on white, so the sheet stays white in dark mode, as the
     preview and .cv-page do. */
  background: #fff; object-fit: cover; object-position: top center;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sheet);
}
/* The name and the Pro mark sit under the preview, never over it: a badge on
   the sheet hides the part of the design the thumbnail is there to show. */
.tpl-name { margin: 0.55rem 0 0; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.tpl-pro {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ai); background: var(--ai-soft); border: 1px solid var(--ai-border);
  border-radius: 999px; padding: 0.05rem 0.4rem;
}
.tpl-foot { margin: 1.1rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }

@media (prefers-reduced-motion: no-preference) {
  .tpl-strip { scroll-behavior: smooth; }
}

.landing-extra { display: contents; }
.landing-section { max-width: var(--lp-max); margin: 0 auto; padding: 3.5rem 0; border-top: 1px solid var(--line); }
.landing-section h2 { margin: 0; font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; }
.section-lead { margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 40rem; }
/* Links in the landing copy had no colour of their own, so they came out
   in the browser default blue against a page that is otherwise green. */
.section-lead a, .landing-faq a, .landing-what a { color: var(--accent-ink); text-underline-offset: 2px; }
.section-lead a:hover, .landing-faq a:hover, .landing-what a:hover { color: var(--accent); }

.feature-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
/* Free and Pro are two cards, so three columns left the last one empty.
   Both classes, because .plan-grid alone lost to .feature-grid above. */
.feature-grid.plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.3rem 1.25rem; }
.feature h3 { margin: 0 0 0.45rem; font-size: 1.02rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.feature-ai { background: var(--ai-soft); border-color: var(--ai-border); }
.feature-ai h3 { color: var(--ai); }

.landing-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.demo-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 0.4rem 1.3rem; }
.demo-row { padding: 1rem 0; }
.demo-row + .demo-row { border-top: 1px dashed var(--line-strong); }
.demo-row p { margin: 0.4rem 0 0; font-size: 0.95rem; line-height: 1.5; }
.demo-notes { color: var(--ink-soft); font-style: italic; }
.demo-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.demo-label-ai { color: var(--ai); }

.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.steps li { counter-increment: step; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.8rem;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.steps strong { display: block; color: var(--ink); margin-bottom: 0.25rem; }

.privacy-list { list-style: none; margin: 1.5rem 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.privacy-list li { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.privacy-list strong { display: block; color: var(--ink); margin-bottom: 0.25rem; }

.landing-foot { max-width: var(--lp-max); margin: 0 auto; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.85rem; }
.landing-foot p { margin: 0; }
.landing-foot-links { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin: 0 -0.75rem 0.4rem; }
/* WCAG 2.2 (2.5.8) wants tap targets of at least 24x24 px. This gives about 36 px tall by the width of the word plus padding. */
.landing-foot-links a { color: var(--ink-soft); display: inline-block; padding: 0.5rem 0.75rem; }

/* While a sign-in link is being confirmed, show only the card. */
.landing[data-view="authConfirm"] .landing-extra,
.landing[data-view="authConfirm"] .landing-foot,
.landing[data-view="authConfirm"] .landing-hero,
.landing[data-view="authConfirm"] .landing-top .btn-ghost { display: none; }
.landing[data-view="authConfirm"] .landing-signin { padding-top: 4rem; }

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 1.5rem; padding-bottom: 2.5rem; }
  /* The suggestion box leaves its overlapping position: hanging off the frame
     on a narrow screen would push the page sideways. */
  .hero-shot { justify-self: center; max-width: 360px; }
  .hero-suggest { position: static; width: auto; margin-top: 0.9rem; }
  .hero-paper { height: 20rem; }
  .signin-panel { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 1.75rem 1.25rem; }
  .signin-lead { max-width: none; }
  /* Stacked, the three points would push the form most of a screen down, so
     the form goes first and the reassurance sits under it. The aside holds
     no focusable element, so nothing is reordered for the keyboard. */
  .landing-signin .auth-card { order: 1; }
  .signin-aside { order: 2; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-demo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* Two across once three would make each card too narrow to read. */
@media (max-width: 1000px) {
  .tpl-row { grid-auto-columns: calc((100% - var(--tpl-gap)) / 2); }
  .tpl-card {
    contain-intrinsic-size: 20rem 26rem;
    contain-intrinsic-size: auto 20rem auto 26rem;
  }
}

@media (max-width: 600px) {
  .landing-top { padding: 0.75rem 0; }
  /* .feature-grid.plan-grid above is two classes, so it has to be matched
     here or it would keep two columns on a phone. */
  .feature-grid, .feature-grid.plan-grid, .steps, .privacy-list { grid-template-columns: minmax(0, 1fr); }
  .landing-section { padding: 2.5rem 0; }
  .auth-card { padding: 1.5rem 1.25rem; }
  /* One and a bit cards on a phone: big enough to read the design, with
     the next one cut off so the row reads as something to swipe. */
  .tpl-row { grid-auto-columns: calc((100% - var(--tpl-gap)) / 1.45); }
  .tpl-card {
    contain-intrinsic-size: 15rem 19.5rem;
    contain-intrinsic-size: auto 15rem auto 19.5rem;
  }
}

/* ============================================================
   Theme picker: one button per theme with a small layout sketch
   ============================================================ */
.theme-picker {
  flex-basis: 100%; display: flex; gap: 0.45rem; overflow-x: auto; padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.theme-option {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
  background: none; border: none; padding: 0; cursor: pointer;
}
.theme-option:hover { color: var(--ink); }
.tp-thumb {
  position: relative; display: block; width: 44px; height: 58px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.theme-option[aria-pressed="true"] { color: var(--ink); }
.theme-option[aria-pressed="true"] .tp-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }
.tp-thumb span { position: absolute; display: block; border-radius: 1px; }
/* default sketch: title bar, then text lines */
.tp-thumb .tp-a { left: 6px; top: 6px; width: 24px; height: 4px; background: #1F3A5F; }
.tp-thumb .tp-b { left: 6px; top: 13px; width: 16px; height: 2px; background: #2F7D6D; }
.tp-thumb .tp-c { left: 6px; right: 6px; top: 21px; height: 30px;
  background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-thumb .tp-d { display: none; }
.tp-modern .tp-c { right: 18px; }
.tp-modern .tp-d { display: block; right: 6px; top: 21px; width: 9px; height: 30px;
  background: repeating-linear-gradient(to bottom, #C5D4CF 0 2px, transparent 2px 5px); }
.tp-classic .tp-a { left: 10px; width: 24px; background: #2B2B2B; }
.tp-classic .tp-b { left: 14px; background: #8A5A2B; }
.tp-minimal .tp-a { left: 16px; width: 20px; background: #111; }
.tp-minimal .tp-b { left: 16px; background: #C2410C; }
.tp-minimal .tp-c { left: 16px; }
.tp-sidebar .tp-d { display: block; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0;
  background: radial-gradient(circle at 7px 8px, #9FB7B0 4px, transparent 4.5px), color-mix(in srgb, #2F7D6D 18%, white); }
.tp-sidebar .tp-a, .tp-sidebar .tp-b, .tp-sidebar .tp-c { left: 18px; }
.tp-sidebar .tp-a { width: 18px; background: #1E3A4C; }
.tp-executive .tp-d { display: block; left: 3px; right: 3px; top: 3px; height: 15px; background: #1F2A44; border-radius: 2px; }
.tp-executive .tp-a { z-index: 1; top: 7px; background: #fff; width: 20px; }
.tp-executive .tp-b { z-index: 1; top: 12px; background: #A07A2C; }
.tp-compact .tp-c { top: 17px; height: 36px; left: 15px;
  background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 4px); }
.tp-compact .tp-d { display: block; left: 6px; top: 17px; width: 6px; height: 36px;
  background: repeating-linear-gradient(to bottom, #9DB4CF 0 2px, transparent 2px 8px); }
.tp-bold .tp-a { height: 6px; width: 30px; background: #111; }
.tp-bold .tp-b { top: 15px; width: 32px; height: 2px; background: #D9480F; }
.tp-ats .tp-a { background: #000; } .tp-ats .tp-b { background: #444; }
.tp-ats .tp-c { background: repeating-linear-gradient(to bottom, #BBB 0 2px, transparent 2px 5px); }
.tp-clean .tp-a { width: 24px; background: #1E3A5F; }
.tp-clean .tp-b { width: 42px; height: 1px; background: #2F6F9F; }
.tp-clean .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-academic .tp-a { left: 18px; width: 20px; background: #1A1A1A; }
.tp-academic .tp-b { left: 20px; width: 16px; height: 1px; background: #7A1F2B; }
.tp-academic .tp-c { background: repeating-linear-gradient(to bottom, #CFCFCF 0 2px, transparent 2px 5px); }
.tp-graduate .tp-a { width: 26px; height: 5px; background: #0F5C57; }
.tp-graduate .tp-b { width: 14px; height: 3px; background: #14857C; }
.tp-graduate .tp-c { background: repeating-linear-gradient(to bottom, #D6E4E2 0 2px, transparent 2px 5px); }
.tp-creative .tp-a { top: 0; left: 0; right: 0; height: 16px; border-radius: 0; background: #2A1E5C; }
.tp-creative .tp-b { top: 20px; width: 16px; height: 3px; background: #E2572B; }
.tp-creative .tp-c { top: 26px; background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-corporate .tp-a { left: 0; right: 0; top: 0; height: 3px; width: auto; border-radius: 0; background: #14304F; }
.tp-corporate .tp-b { top: 9px; width: 24px; height: 4px; background: #14304F; }
.tp-corporate .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-editorial .tp-a { top: 6px; width: 30px; height: 7px; background: #111827; }
.tp-editorial .tp-b { top: 17px; width: 42px; height: 1px; background: #9A3412; }
.tp-editorial .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 6px); }
.tp-nordic .tp-a { width: 24px; background: #2E3440; }
.tp-nordic .tp-c { background: repeating-linear-gradient(to bottom, #E2E8F0 0 6px, #C9D1DC 6px 8px, transparent 8px 12px); }
.tp-consultant .tp-a { width: 24px; background: #1D3557; }
.tp-consultant .tp-b { left: 6px; width: 8px; height: 3px; background: #457B9D; }
.tp-consultant .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-heritage .tp-a { left: 13px; width: 22px; height: 3px; background: #3B2A1A; }
.tp-heritage .tp-b { left: 16px; width: 16px; height: 1px; background: #8C6239; }
.tp-heritage .tp-c { background: repeating-linear-gradient(to bottom, #DCD3C6 0 2px, transparent 2px 5px); }
.tp-startup .tp-a { width: 26px; height: 5px; background: #0B1F3A; }
.tp-startup .tp-b { width: 10px; height: 3px; background: #6D28D9; }
.tp-startup .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-digest .tp-a { width: 22px; height: 3px; background: #222; }
.tp-digest .tp-c { background: repeating-linear-gradient(to bottom, #CCC 0 1px, transparent 1px 3px); }
.tp-signal .tp-a { width: 26px; height: 4px; background: #0E2A47; }
.tp-signal .tp-b { width: 26px; height: 2px; background: #0EA5A4; }
.tp-signal .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-ledger .tp-a { width: 26px; height: 3px; background: #2B2118; }
.tp-ledger .tp-b { width: 42px; height: 1px; background: repeating-linear-gradient(to right, #7C5E2B 0 2px, transparent 2px 4px); }
.tp-ledger .tp-c { background: repeating-linear-gradient(to bottom, #D8D2C6 0 2px, transparent 2px 5px); }
.tp-vantage .tp-a { top: 0; left: 0; right: 0; height: 14px; border-radius: 0; background: #0F4C5C; }
.tp-vantage .tp-b { top: 17px; width: 14px; height: 3px; background: #E36414; }
.tp-vantage .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-atlas .tp-a { width: 28px; height: 4px; background: #1B263B; }
.tp-atlas .tp-b { left: 6px; top: 12px; width: 16px; height: 4px; background: color-mix(in srgb, #415A77 22%, white); border-radius: 1px; }
.tp-atlas .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-quarterly .tp-a { width: 26px; height: 4px; background: #3A0CA3; }
.tp-quarterly .tp-b { top: 12px; width: 40px; height: 1px; background: #4361EE; }
.tp-quarterly .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-mosaic .tp-a { width: 26px; height: 4px; background: #264653; }
.tp-mosaic .tp-b { top: 12px; width: 14px; height: 4px; background: transparent; border: 1px solid #2A9D8F; }
.tp-mosaic .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-harbour .tp-a { left: 6px; top: 6px; width: 3px; height: 14px; background: #FCA311; }
.tp-harbour .tp-b { left: 13px; top: 6px; width: 24px; height: 5px; background: #14213D; }
.tp-harbour .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-summit .tp-a { width: 32px; height: 2px; background: #212529; }
.tp-summit .tp-b { top: 11px; width: 20px; height: 1px; background: #6C757D; }
.tp-summit .tp-c { background: repeating-linear-gradient(to bottom, #E0E0E0 0 2px, transparent 2px 6px); }
.tp-prism .tp-a { width: 26px; height: 4px; background: #1D3557; }
.tp-prism .tp-b { left: 6px; top: 12px; width: 3px; height: 6px; background: #E63946; }
.tp-prism .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }
.tp-canvas .tp-a { left: 14px; width: 24px; height: 4px; background: #3D405B; }
.tp-canvas .tp-b { left: 18px; top: 12px; width: 16px; height: 1px; background: #E07A5F; }
.tp-canvas .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 7px); }
.tp-forge .tp-a { top: 0; left: 0; right: 0; height: 12px; border-radius: 0; background: #1A1A1D; }
.tp-forge .tp-b { top: 15px; width: 16px; height: 3px; background: #C3423F; }
.tp-forge .tp-c { background: repeating-linear-gradient(to bottom, #D8DCE0 0 2px, transparent 2px 5px); }

/* ============================================================
   New CV themes (print-safe: no full-bleed colour, so they print
   the same with the browser's default margins)
   ============================================================ */
.cv-page.t-sidebar, .cv-page.t-executive, .cv-page.t-bold {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---- Sidebar ---- */
/* The tinted column is a float that fills page 1; from page 2 the main text uses the full width instead of leaving an empty strip. Entries and the header are block formatting contexts, so each sits beside the float or below it as a whole. */
.cv-page.t-sidebar .sb-grid::after { content: ""; display: block; clear: both; }
.cv-page.t-sidebar .sb-main .entry, .cv-page.t-sidebar .sb-main .cv-header { display: flow-root; }
.cv-page.t-sidebar .sb-side {
  float: left; width: 58mm; margin-right: 8mm;
  min-height: calc(var(--page-h) - 2 * var(--margin) - 5mm);
  background: var(--side-bg, color-mix(in srgb, var(--accent) 11%, white));
  border-radius: 2mm; padding: 7mm 5.5mm; font-size: 0.94em;
}
.cv-page.t-sidebar .sb-side .cv-photo {
  display: block; width: 34mm; height: 34mm; margin: 0 auto 2mm; border-radius: 50%;
  object-fit: cover; border: 1.2mm solid #fff; order: 0;
}
.cv-page.t-sidebar .sb-side > .section:first-child { margin-top: 0; }
.cv-page.t-sidebar .sb-main > .cv-header + .section { margin-top: var(--section-gap); }
.cv-page.t-sidebar .sb-contact dl { margin: 0; display: grid; gap: 2.2mm; }
.cv-page.t-sidebar .sb-ct dt { font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cv-page.t-sidebar .sb-ct dd { margin: 0.3mm 0 0; overflow-wrap: anywhere; }
.cv-page.t-sidebar .sb-ct.ct-work_permit dd { font-weight: 600; color: var(--primary); }
.cv-page.t-sidebar .sb-side .section-title {
  font-family: var(--font-heading); font-size: calc(0.82em * var(--heading-scale, 1)); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--heading-color, var(--accent)); margin-bottom: 2mm;
}
.cv-page.t-sidebar .sb-side .entry-head { display: block; }
.cv-page.t-sidebar .sb-side .entry-title { font-size: 1em; }
.cv-page.t-sidebar .sb-side .skill-line { line-height: 1.6; }
.cv-page.t-sidebar .sb-main { padding-top: 6mm; }
.cv-page.t-sidebar .sb-main .cv-header { padding-bottom: 4mm; border-bottom: 0.6pt solid color-mix(in srgb, var(--primary) 20%, white); }
.cv-page.t-sidebar .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(2.5em * var(--heading-scale, 1)); line-height: 1.05; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-sidebar .headline { margin-top: 1.5mm; font-size: 1.15em; font-weight: 500; color: var(--accent); }
.cv-page.t-sidebar .sb-main .section-title {
  font-family: var(--font-heading); font-size: calc(0.86em * var(--heading-scale, 1)); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--heading-color, var(--primary)); margin-bottom: 2.4mm;
  padding-bottom: 1mm; border-bottom: 1.4pt solid var(--accent); display: inline-block;
}
.cv-page.t-sidebar .entry-title { color: var(--primary); }
.cv-page.t-sidebar .entry-org .org { color: var(--text); font-weight: 500; }
/* letters in the Sidebar theme use a plain header with the photo on the left */

/* ---- Executive ---- */
.cv-page.t-executive .cv-header {
  background: var(--band, var(--primary)); color: #fff; border-radius: 1.5mm; padding: 8mm 9mm 7mm;
}
.cv-page.t-executive .cv-header.has-photo { display: flex; align-items: center; gap: 7mm; }
.cv-page.t-executive .cv-photo { width: 27mm; height: 27mm; border: 0.9mm solid rgba(255,255,255,0.85); }
.cv-page.t-executive .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2.6em * var(--heading-scale, 1)); line-height: 1.05; letter-spacing: 0.01em; color: #fff; }
.cv-page.t-executive .headline { margin-top: 1.6mm; font-size: 1.12em; color: color-mix(in srgb, var(--accent) 55%, white); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.cv-page.t-executive .contact { margin-top: 3mm; font-size: 0.92em; color: rgba(255,255,255,0.88); }
.cv-page.t-executive .contact li::before { color: color-mix(in srgb, var(--accent) 60%, white); }
.cv-page.t-executive .section-title {
  font-family: var(--font-heading); font-size: calc(1.2em * var(--heading-scale, 1)); font-weight: 600; color: var(--heading-color, var(--primary));
  margin-bottom: 2.4mm; padding-bottom: 1.2mm; border-bottom: 0.5pt solid color-mix(in srgb, var(--accent) 70%, white);
}
.cv-page.t-executive .entry-title { font-family: var(--font-heading); font-size: 1.12em; color: var(--primary); }
.cv-page.t-executive .entry-org .org { color: var(--accent); font-weight: 600; }
.cv-page.t-executive .bullets li::before { background: var(--accent); border-radius: 0; width: 1.3mm; height: 1.3mm; transform: rotate(45deg); }

/* ---- Compact: dates in a left gutter, tighter type ---- */
.cv-page.t-compact .cv-header { padding-bottom: 3mm; border-bottom: 1pt solid var(--primary); }
.cv-page.t-compact .cv-header.has-photo { display: flex; align-items: center; gap: 5mm; }
.cv-page.t-compact .cv-photo { order: 0; width: 20mm; height: 20mm; border-radius: 1.5mm; }
.cv-page.t-compact .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(2.05em * var(--heading-scale, 1)); line-height: 1.08; color: var(--name-color, var(--primary)); }
.cv-page.t-compact .headline { margin-top: 0.8mm; font-weight: 500; color: var(--accent); }
.cv-page.t-compact .contact { margin-top: 1.6mm; font-size: 0.95em; }
.cv-page.t-compact .section-title {
  font-family: var(--font-heading); font-size: calc(0.86em * var(--heading-scale, 1)); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--heading-color, var(--accent)); margin-bottom: 1.6mm;
  padding-bottom: 0.8mm; border-bottom: 0.5pt solid color-mix(in srgb, var(--primary) 18%, white);
}
/* Entries put their dates in a 27 mm gutter; other content lines up with the entry text. */
.cv-page.t-compact .section-body > :not(.entry) { margin-left: 32mm; }
.cv-page.t-compact .entry { display: grid; grid-template-columns: 27mm minmax(0, 1fr); column-gap: 5mm; }
.cv-page.t-compact .entry-head { display: contents; }
.cv-page.t-compact .entry-date { grid-column: 1; grid-row: 1 / span 3; text-align: left; font-size: 0.9em; padding-top: 0.15em; white-space: normal; }
.cv-page.t-compact .entry-main, .cv-page.t-compact .bullets, .cv-page.t-compact .entry-desc, .cv-page.t-compact .entry-notes { grid-column: 2; }
.cv-page.t-compact .entry-title { font-size: 1em; color: var(--primary); }
.cv-page.t-compact .entry-org { display: inline; }
.cv-page.t-compact .bullets { margin-top: 0.6mm; }
.cv-page.t-compact .bullets li + li { margin-top: 0.3mm; }

/* ---- Bold ---- */
.cv-page.t-bold .cv-header { padding-bottom: 5mm; border-bottom: 2.6pt solid var(--accent); }
.cv-page.t-bold .cv-header.has-photo { display: flex; align-items: center; gap: 6mm; }
.cv-page.t-bold .cv-photo { order: 2; width: 28mm; height: 28mm; border-radius: 3mm; }
.cv-page.t-bold .name { font-family: var(--font-heading); font-weight: 800; font-size: calc(3.1em * var(--heading-scale, 1)); line-height: 0.98; letter-spacing: -0.035em; color: var(--name-color, var(--primary)); }
.cv-page.t-bold .headline { margin-top: 2mm; font-size: 1.25em; font-weight: 600; color: var(--accent); }
.cv-page.t-bold .contact { margin-top: 2.6mm; font-size: 0.93em; font-weight: 500; }
.cv-page.t-bold .section-title {
  font-family: var(--font-heading); font-size: calc(1.05em * var(--heading-scale, 1)); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--heading-color, var(--primary)); margin-bottom: 2.4mm; display: flex; align-items: center; gap: 2.5mm;
}
.cv-page.t-bold .section-title::before { content: ""; width: 5mm; height: 2.4mm; background: var(--accent); }
.cv-page.t-bold .entry-title { font-weight: 700; }
.cv-page.t-bold .entry-org .org { font-weight: 600; color: var(--accent); }
.cv-page.t-bold .bullets li::before { background: var(--accent); border-radius: 0; width: 1.6mm; height: 0.7mm; top: calc(var(--line-height) * 0.5em - 0.35mm); }

/* ============================================================
   Cover letters: dashboard cards, editor screen
   ============================================================ */

.letter-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.letter-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface);
}
.letter-save { font-size: 0.8rem; color: var(--ink-faint); }
.letter-h1 { font-size: 1.3rem; margin: 0 0 1.1rem; }
.letter-ai { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.letter-ai summary { cursor: pointer; font-weight: 650; font-size: 0.95rem; margin-bottom: 0.6rem; }
.letter-screen .preview-pane { top: 0; height: 100vh; height: 100dvh; }

.letter-links { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.letter-links h2 { margin: 0 0 0.3rem; }
.letter-link-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }

@media (max-width: 920px) {
  .letter-topbar { padding: 0.65rem 0.9rem; position: sticky; top: 0; z-index: 25; }
  .letter-screen .preview-pane { height: auto; }
}

/* Printing from the letter editor must show only the letter: hidden
   screens stay hidden even where the rules above force a display. */
@media print {
  [hidden] { display: none !important; }
  .letter-topbar, .mobile-toggle { display: none !important; }
  .letter-screen { display: block !important; min-height: 0; }
}

/* ---- Phase 1 templates: one column each, told apart by header, rules and type ---- */
.cv-page.t-clean .cv-header { padding-bottom: 3mm; border-bottom: 0.6pt solid var(--primary); }
.cv-page.t-clean .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.05; color: var(--name-color, var(--primary)); }
.cv-page.t-clean .headline { margin-top: 1mm; font-weight: 500; color: var(--accent); }
.cv-page.t-clean .section-title { font-family: var(--font-heading); font-size: calc(0.88em * var(--heading-scale, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--heading-color, var(--primary)); border-bottom: 0.4pt solid color-mix(in srgb, var(--primary) 25%, white); padding-bottom: 0.8mm; margin-bottom: 2mm; }
.cv-page.t-clean .entry-title { color: var(--primary); font-weight: 600; }

.cv-page.t-academic .cv-header { text-align: center; padding-bottom: 3mm; }
.cv-page.t-academic .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2em * var(--heading-scale, 1)); line-height: 1.1; color: var(--name-color, var(--primary)); }
.cv-page.t-academic .headline { margin-top: 1mm; font-style: italic; color: var(--accent); }
.cv-page.t-academic .contact { justify-content: center; margin-top: 1.8mm; }
.cv-page.t-academic .contact li::before { content: none; }
.cv-page.t-academic .section-title { font-family: var(--font-heading); font-variant: small-caps; font-size: calc(1.05em * var(--heading-scale, 1)); font-weight: 600; letter-spacing: 0.05em; color: var(--heading-color, var(--accent)); border-top: 0.5pt solid var(--accent); padding-top: 1.2mm; margin-bottom: 1.6mm; }
.cv-page.t-academic .entry-org { font-style: italic; }
.cv-page.t-academic .bullets li::before { content: "•"; background: none; width: auto; height: auto; border-radius: 0; top: 0; left: 0; color: var(--accent); }

.cv-page.t-graduate .cv-header { padding-bottom: 2mm; }
.cv-page.t-graduate .name { font-weight: 800; font-size: calc(2.5em * var(--heading-scale, 1)); line-height: 1; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-graduate .headline { margin-top: 1.4mm; font-weight: 600; color: var(--accent); }
.cv-page.t-graduate .section-title { font-weight: 800; font-size: calc(1.1em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); border-left: 1.2mm solid var(--accent); padding-left: 2mm; margin-bottom: 2mm; }
.cv-page.t-graduate .entry-date { display: block; font-weight: 600; color: var(--accent); }

.cv-page.t-creative .cv-header { background: var(--primary); color: #fff; padding: 5mm 6mm; margin: -2mm -2mm 4mm; border-radius: 1.5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.t-creative .name { font-weight: 800; font-size: calc(2.3em * var(--heading-scale, 1)); line-height: 1.05; color: #fff; }
.cv-page.t-creative .headline { margin-top: 1mm; font-weight: 600; color: #FFD2BF; }
.cv-page.t-creative .contact { color: #EDE9FA; }
.cv-page.t-creative .contact li::before { color: #FFD2BF; }
.cv-page.t-creative .section-title { font-weight: 800; font-size: calc(1em * var(--heading-scale, 1)); color: var(--accent); }
.cv-page.t-creative .bullets li::before { background: var(--accent); }

.cv-page.t-corporate { border-top: 2.4mm solid var(--primary); padding-top: 1mm; }
.cv-page.t-corporate .cv-header { padding-bottom: 3mm; }
.cv-page.t-corporate .name { font-weight: 700; font-size: calc(2.1em * var(--heading-scale, 1)); line-height: 1.05; color: var(--name-color, var(--primary)); }
.cv-page.t-corporate .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }
.cv-page.t-corporate .section-title { font-weight: 700; font-size: calc(0.9em * var(--heading-scale, 1)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--heading-color, var(--primary)); border-bottom: 1.2pt solid var(--accent); padding-bottom: 0.6mm; margin-bottom: 2mm; }
.cv-page.t-corporate .entry-title { font-weight: 700; color: var(--primary); }

.cv-page.t-editorial .cv-header { padding-bottom: 4mm; border-bottom: 0.4pt solid var(--muted); }
.cv-page.t-editorial .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(3em * var(--heading-scale, 1)); line-height: 1; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-editorial .headline { margin-top: 2mm; font-size: 1.15em; font-style: italic; color: var(--accent); }
.cv-page.t-editorial .section-title { font-family: var(--font-heading); font-weight: 600; font-size: calc(1.2em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); border-top: 0.4pt solid var(--muted); padding-top: 1.4mm; margin-bottom: 1.8mm; }
.cv-page.t-editorial .entry-title { font-family: var(--font-heading); font-weight: 600; color: var(--primary); }

.cv-page.t-nordic .cv-header { padding-bottom: 4mm; }
.cv-page.t-nordic .name { font-weight: 600; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.1; letter-spacing: 0.01em; color: var(--name-color, var(--primary)); }
.cv-page.t-nordic .headline { margin-top: 1.2mm; color: var(--muted); font-size: 1.05em; }
.cv-page.t-nordic .section { background: color-mix(in srgb, var(--accent) 6%, white); padding: 2mm 3mm; border-radius: 1.2mm; margin-top: var(--section-gap); }
.cv-page.t-nordic .section-title { font-weight: 600; font-size: calc(0.9em * var(--heading-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--heading-color, var(--accent)); margin-bottom: 1.4mm; }

.cv-page.t-consultant { counter-reset: consultant-sec; }
.cv-page.t-consultant .cv-header { padding-bottom: 3mm; }
.cv-page.t-consultant .name { font-weight: 700; font-size: calc(2.1em * var(--heading-scale, 1)); line-height: 1.05; color: var(--name-color, var(--primary)); }
.cv-page.t-consultant .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }
.cv-page.t-consultant .section-title { counter-increment: consultant-sec; font-weight: 700; font-size: calc(1em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); margin-bottom: 1.8mm; }
.cv-page.t-consultant .section-title::before { content: counter(consultant-sec, decimal-leading-zero) "  "; color: var(--accent); font-variant-numeric: tabular-nums; }
.cv-page.t-consultant .entry-title { color: var(--primary); font-weight: 600; }

.cv-page.t-heritage .cv-header { text-align: center; padding-bottom: 3mm; border-bottom: 0.5pt solid var(--accent); }
.cv-page.t-heritage .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2.1em * var(--heading-scale, 1)); font-variant: small-caps; letter-spacing: 0.06em; color: var(--name-color, var(--primary)); }
.cv-page.t-heritage .headline { margin-top: 1mm; font-style: italic; color: var(--accent); }
.cv-page.t-heritage .contact { justify-content: center; }
.cv-page.t-heritage .section-title { font-family: var(--font-heading); font-variant: small-caps; font-size: calc(1.1em * var(--heading-scale, 1)); letter-spacing: 0.06em; text-align: center; color: var(--heading-color, var(--primary)); margin-bottom: 1.8mm; }
.cv-page.t-heritage .section-title::before, .cv-page.t-heritage .section-title::after { content: "◆"; font-size: 0.5em; color: var(--accent); vertical-align: middle; margin: 0 2mm; }
.cv-page.t-heritage .entry-org { font-style: italic; }

.cv-page.t-startup .cv-header { padding-bottom: 2.5mm; }
.cv-page.t-startup .name { font-weight: 800; font-size: calc(2.4em * var(--heading-scale, 1)); line-height: 1.02; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-startup .headline { margin-top: 1.2mm; font-weight: 700; color: var(--accent); }
.cv-page.t-startup .section-title { font-weight: 800; font-size: calc(1.05em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); margin-bottom: 1.8mm; }
.cv-page.t-startup .section-title::after { content: ""; display: inline-block; width: 8mm; height: 1mm; margin-left: 2mm; vertical-align: middle; background: var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.t-startup .entry-title { font-weight: 700; color: var(--primary); }

.cv-page.t-digest { font-size: 0.97em; }
.cv-page.t-digest .cv-header { padding-bottom: 1.8mm; }
.cv-page.t-digest .name { font-weight: 700; font-size: calc(1.7em * var(--heading-scale, 1)); line-height: 1.1; color: var(--name-color, var(--primary)); }
.cv-page.t-digest .headline { margin-top: 0.6mm; color: var(--accent); }
.cv-page.t-digest .section-title { font-weight: 700; font-size: calc(0.95em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); margin-bottom: 0.8mm; }
.cv-page.t-digest .section { margin-top: 2.6mm; }
.cv-page.t-digest .entry-date { font-variant-numeric: tabular-nums; }

.cv-page.t-signal .cv-header { padding-bottom: 2.8mm; }
.cv-page.t-signal .name { font-weight: 700; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.05; color: var(--name-color, var(--primary)); }
.cv-page.t-signal .headline { margin-top: 1.2mm; font-weight: 500; color: var(--accent); }
.cv-page.t-signal .section-title { font-weight: 600; font-size: calc(0.92em * var(--heading-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--heading-color, var(--primary)); margin-bottom: 1.8mm; }
.cv-page.t-signal .section-title::before { content: ""; display: inline-block; width: 1.6mm; height: 1.6mm; margin-right: 1.8mm; border-radius: 50%; background: var(--accent); vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.t-signal .entry-title { color: var(--primary); font-weight: 600; }

/* ---- Cover letter templates: the same twenty designs, applied to the letterhead ---- */
.cv-page.letter.t-modern .letter-head { border-bottom-color: var(--primary); }
.cv-page.letter.t-modern .letter-name { color: var(--primary); }
.cv-page.letter.t-classic .letter-head { text-align: center; border-bottom: 2.4pt double var(--primary); }
.cv-page.letter.t-classic .letter-name { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cv-page.letter.t-classic .letter-contact { justify-content: center; }
.cv-page.letter.t-minimal .letter-head { border-bottom: 0; padding-bottom: 2mm; }
.cv-page.letter.t-minimal .letter-name { font-weight: 500; font-size: calc(2em * var(--heading-scale, 1)); letter-spacing: -0.02em; }
.cv-page.letter.t-sidebar .letter-head { border-bottom-color: var(--accent); }
.cv-page.letter.t-executive .letter-head { background: var(--primary); color: #fff; padding: 4mm 5mm; margin: -2mm -2mm 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.letter.t-executive .letter-name { color: #fff; }
.cv-page.letter.t-executive .letter-contact { color: rgba(255,255,255,0.88); }
.cv-page.letter.t-compact .letter-head { padding-bottom: 2mm; }
.cv-page.letter.t-compact .letter-name { font-size: calc(1.3em * var(--heading-scale, 1)); color: var(--accent); }
.cv-page.letter.t-bold .letter-head { border-bottom: 1.6pt solid var(--accent); }
.cv-page.letter.t-bold .letter-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.cv-page.letter.t-ats .letter-head { border-bottom: 0; }
.cv-page.letter.t-ats .letter-name, .cv-page.letter.t-ats .letter-contact { color: #000; }
.cv-page.letter.t-clean .letter-head { border-bottom-color: var(--primary); }
.cv-page.letter.t-clean .letter-name { font-weight: 600; }
.cv-page.letter.t-academic .letter-head { text-align: center; border-bottom: 0; padding-bottom: 2mm; }
.cv-page.letter.t-academic .letter-name { font-family: var(--font-heading); font-weight: 600; }
.cv-page.letter.t-academic .letter-contact { justify-content: center; }
.cv-page.letter.t-graduate .letter-head { border-bottom: 0; border-left: 1.2mm solid var(--accent); padding-left: 3mm; }
.cv-page.letter.t-graduate .letter-name { font-weight: 800; color: var(--primary); }
.cv-page.letter.t-creative .letter-head { background: var(--primary); color: #fff; padding: 4mm 5mm; margin: -2mm -2mm 0; border-bottom: 0; border-radius: 1.5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.letter.t-creative .letter-name { color: #fff; font-weight: 800; }
.cv-page.letter.t-creative .letter-contact { color: #EDE9FA; }
.cv-page.letter.t-corporate .letter-head { border-top: 2.4mm solid var(--primary); border-bottom: 0; padding-top: 3mm; }
.cv-page.letter.t-corporate .letter-name { font-weight: 700; color: var(--primary); }
.cv-page.letter.t-editorial .letter-head { border-bottom-width: 0.4pt; }
.cv-page.letter.t-editorial .letter-name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2.2em * var(--heading-scale, 1)); }
.cv-page.letter.t-editorial .letter-contact { font-style: italic; }
.cv-page.letter.t-nordic .letter-head { border-bottom: 0; }
.cv-page.letter.t-nordic .letter-name { font-weight: 600; font-size: calc(1.8em * var(--heading-scale, 1)); color: var(--primary); }
.cv-page.letter.t-nordic .letter-contact { color: var(--muted); }
.cv-page.letter.t-consultant .letter-name { font-weight: 700; }
.cv-page.letter.t-consultant .letter-head { border-bottom-color: var(--accent); }
.cv-page.letter.t-heritage .letter-head { text-align: center; border-bottom: 0.5pt solid var(--accent); }
.cv-page.letter.t-heritage .letter-name { font-variant: small-caps; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.06em; }
.cv-page.letter.t-heritage .letter-contact { justify-content: center; }
.cv-page.letter.t-startup .letter-head { border-bottom: 0; }
.cv-page.letter.t-startup .letter-name { font-weight: 800; letter-spacing: -0.02em; color: var(--primary); }
.cv-page.letter.t-digest .letter-head { padding-bottom: 1.8mm; }
.cv-page.letter.t-digest .letter-name { font-family: var(--font-heading); font-weight: 700; font-size: calc(1.3em * var(--heading-scale, 1)); }
.cv-page.letter.t-digest .letter-body { font-size: 0.97em; line-height: 1.45; }
.cv-page.letter.t-signal .letter-head { border-bottom: 0; }
.cv-page.letter.t-signal .letter-name { font-weight: 700; }
.cv-page.letter.t-signal .letter-name::before { content: ""; display: inline-block; width: 2mm; height: 2mm; margin-right: 2mm; border-radius: 50%; background: var(--accent); vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---- Phase 3 templates (Pro): ten more, one column each ---- */
.cv-page.t-ledger .cv-header { padding-bottom: 3mm; border-bottom: 0.8pt solid var(--primary); }
.cv-page.t-ledger .name { font-family: var(--font-heading); font-weight: 600; font-size: calc(2em * var(--heading-scale, 1)); line-height: 1.1; color: var(--name-color, var(--primary)); }
.cv-page.t-ledger .headline { margin-top: 1mm; font-style: italic; color: var(--accent); }
.cv-page.t-ledger .section-title { font-family: var(--font-heading); font-weight: 600; font-size: calc(1.05em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); border-bottom: 0.5pt dotted var(--accent); padding-bottom: 0.8mm; margin-bottom: 2mm; }
.cv-page.t-ledger .entry-date { font-style: italic; }

.cv-page.t-vantage .cv-header { background: var(--primary); color: #fff; padding: 4.5mm 5.5mm; margin: -2mm -2mm 4mm; border-radius: 1.2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.t-vantage .name { font-weight: 700; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.05; color: #fff; }
.cv-page.t-vantage .headline { margin-top: 1mm; font-weight: 600; color: #FFD9B0; }
.cv-page.t-vantage .contact { color: #E3EEF1; }
.cv-page.t-vantage .contact li::before { color: #FFD9B0; }
.cv-page.t-vantage .section-title { font-weight: 700; font-size: calc(0.9em * var(--heading-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.8mm; }
.cv-page.t-vantage .bullets li::before { background: var(--accent); }

.cv-page.t-atlas .cv-header { padding-bottom: 3mm; }
.cv-page.t-atlas .name { font-weight: 300; font-size: calc(2.6em * var(--heading-scale, 1)); line-height: 1.02; letter-spacing: -0.02em; color: var(--name-color, var(--primary)); }
.cv-page.t-atlas .headline { margin-top: 1.2mm; color: var(--accent); font-weight: 500; }
.cv-page.t-atlas .section-title { display: inline-block; font-weight: 600; font-size: calc(0.86em * var(--heading-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--accent) 14%, white); padding: 0.6mm 2.2mm; border-radius: 1mm; margin-bottom: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.cv-page.t-quarterly .cv-header { padding-bottom: 2.8mm; }
.cv-page.t-quarterly .name { font-family: var(--font-heading); font-weight: 700; font-size: calc(2.1em * var(--heading-scale, 1)); line-height: 1.08; color: var(--name-color, var(--primary)); }
.cv-page.t-quarterly .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }
.cv-page.t-quarterly .section { margin-top: var(--section-gap); }
.cv-page.t-quarterly .section-title { font-weight: 700; font-size: calc(0.9em * var(--heading-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border-top: 1.4pt solid var(--primary); padding-top: 1.2mm; margin-bottom: 2mm; }

.cv-page.t-mosaic .section-title { display: inline-block; font-weight: 600; font-size: calc(0.82em * var(--heading-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); border: 0.6pt solid var(--accent); border-radius: 0.8mm; padding: 0.4mm 2mm; margin-bottom: 2mm; }
.cv-page.t-mosaic .name { font-weight: 700; font-size: calc(2.1em * var(--heading-scale, 1)); color: var(--name-color, var(--primary)); }
.cv-page.t-mosaic .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }

.cv-page.t-harbour .cv-header { border-left: 2mm solid var(--accent); padding-left: 4mm; padding-bottom: 2mm; }
.cv-page.t-harbour .name { font-weight: 700; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.05; color: var(--name-color, var(--primary)); }
.cv-page.t-harbour .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }
.cv-page.t-harbour .section-title { font-weight: 700; font-size: calc(0.95em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); margin-bottom: 1.8mm; }

.cv-page.t-summit .cv-header { padding-bottom: 3mm; }
.cv-page.t-summit .name { font-weight: 200; font-size: calc(3em * var(--heading-scale, 1)); line-height: 1; letter-spacing: -0.03em; color: var(--name-color, var(--primary)); }
.cv-page.t-summit .headline { margin-top: 2mm; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 600; }
.cv-page.t-summit .section-title { font-weight: 600; font-size: calc(0.85em * var(--heading-scale, 1)); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 1.8mm; }
.cv-page.t-summit .entry-title { font-weight: 600; color: var(--primary); }

.cv-page.t-prism .cv-header { padding-bottom: 2.6mm; }
.cv-page.t-prism .name { font-weight: 700; font-size: calc(2.2em * var(--heading-scale, 1)); color: var(--name-color, var(--primary)); }
.cv-page.t-prism .headline { margin-top: 1mm; color: var(--accent); font-weight: 600; }
.cv-page.t-prism .section-title { font-weight: 700; font-size: calc(0.98em * var(--heading-scale, 1)); color: var(--heading-color, var(--primary)); border-left: 1.4mm solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); padding: 0.6mm 2mm; margin-bottom: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.cv-page.t-canvas .cv-header { text-align: center; padding-bottom: 3.5mm; }
.cv-page.t-canvas .name { font-family: var(--font-heading); font-weight: 400; font-size: calc(2.3em * var(--heading-scale, 1)); line-height: 1.1; color: var(--name-color, var(--primary)); }
.cv-page.t-canvas .headline { margin-top: 1.4mm; font-style: italic; color: var(--accent); }
.cv-page.t-canvas .contact { justify-content: center; }
.cv-page.t-canvas .section-title { text-align: center; font-variant: small-caps; font-size: calc(1.1em * var(--heading-scale, 1)); letter-spacing: 0.1em; color: var(--heading-color, var(--accent)); margin-bottom: 2.2mm; }
.cv-page.t-canvas .entry-date { font-style: italic; }
.cv-page.t-canvas .bullets li::before { background: var(--accent); }

.cv-page.t-forge .cv-header { background: var(--primary); color: #fff; padding: 4mm 5mm; margin: -2mm -2mm 4mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.t-forge .name { font-weight: 800; font-size: calc(2.2em * var(--heading-scale, 1)); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.cv-page.t-forge .headline { margin-top: 1mm; font-weight: 600; color: #E8E8EA; }
.cv-page.t-forge .contact { color: #D6D6DA; }
.cv-page.t-forge .section-title { font-weight: 800; font-size: calc(0.92em * var(--heading-scale, 1)); text-transform: uppercase; color: var(--primary); border-left: 1.6mm solid var(--accent); padding-left: 2mm; margin-bottom: 2mm; }
.cv-page.t-forge .bullets li::before { border-radius: 0; background: var(--accent); }

/* ---- Phase 3 cover letters ---- */
.cv-page.letter.t-ledger .letter-head { border-bottom: 0.8pt solid var(--primary); }
.cv-page.letter.t-ledger .letter-name { font-family: var(--font-heading); font-weight: 600; }
.cv-page.letter.t-vantage .letter-head { background: var(--primary); color: #fff; padding: 4mm 5mm; margin: -2mm -2mm 0; border-bottom: 0; border-radius: 1.2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.letter.t-vantage .letter-name { color: #fff; font-weight: 700; }
.cv-page.letter.t-vantage .letter-contact { color: #E3EEF1; }
.cv-page.letter.t-atlas .letter-name { font-weight: 300; font-size: calc(1.8em * var(--heading-scale, 1)); }
.cv-page.letter.t-atlas .letter-head { border-bottom-color: var(--accent); }
.cv-page.letter.t-quarterly .letter-head { border-top: 1.4pt solid var(--primary); border-bottom: 0; padding-top: 2.5mm; }
.cv-page.letter.t-quarterly .letter-name { font-family: var(--font-heading); font-weight: 700; color: var(--primary); }
.cv-page.letter.t-mosaic .letter-head { border-bottom: 0.6pt solid var(--accent); }
.cv-page.letter.t-mosaic .letter-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cv-page.letter.t-harbour .letter-head { border-left: 2mm solid var(--accent); border-bottom: 0; padding-left: 4mm; }
.cv-page.letter.t-harbour .letter-name { font-weight: 700; color: var(--primary); }
.cv-page.letter.t-summit .letter-name { font-weight: 200; font-size: calc(2em * var(--heading-scale, 1)); text-transform: uppercase; letter-spacing: 0.08em; }
.cv-page.letter.t-prism .letter-head { border-bottom: 0; }
.cv-page.letter.t-prism .letter-name { font-weight: 700; color: var(--accent); }
.cv-page.letter.t-canvas .letter-head { text-align: center; border-bottom: 0; }
.cv-page.letter.t-canvas .letter-name { font-family: var(--font-heading); font-weight: 400; font-size: calc(1.9em * var(--heading-scale, 1)); }
.cv-page.letter.t-canvas .letter-contact { justify-content: center; font-style: italic; }
.cv-page.letter.t-forge .letter-head { background: var(--primary); color: #fff; padding: 4mm 5mm; margin: -2mm -2mm 0; border-bottom: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-page.letter.t-forge .letter-name { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.cv-page.letter.t-forge .letter-contact { color: #D6D6DA; }

.leftover-sorter { margin-top: 0.6rem; display: grid; gap: 0.5rem; }
.leftover-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.5rem 0.6rem; border: 1px solid var(--line, #d8dde3); border-radius: 8px; }
.leftover-text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; font-size: 0.92rem; }
.leftover-row select { max-width: 100%; }
/* ---- Fit on fewer pages ---- */
.page-count-wrap { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.fit-toggle { font-size: 0.78rem; }
.fit-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1rem; margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--ink); display: flex; flex-direction: column; gap: 0.9rem; }
.fit-panel[hidden] { display: none; }
.fit-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fit-head select { font: inherit; padding: 0.2rem 0.35rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.fit-step p { margin: 0 0 0.45rem; color: var(--ink-soft); line-height: 1.45; }
.fit-step p strong { color: var(--ink); }
.fit-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fit-result { font-weight: 600; color: var(--ink) !important; margin-top: 0.45rem !important; }
.fit-result:empty { display: none; }
.fit-suggestions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.4rem; }
.fit-suggestions .fit-role-title { font-weight: 700; font-size: 0.82rem; margin: 0.2rem 0 -0.3rem; }
@media print { .fit-panel { display: none !important; } }
/* ---- Other personal details (Profile) ---- */
.extra-list { display: flex; flex-direction: column; gap: 0.5rem; }
.extra-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; gap: 0.5rem; align-items: center; }
.extra-row input { width: 100%; }
.extra-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.6rem; }
.extra-quick { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.extra-chip { font: inherit; font-size: 0.78rem; padding: 0.2rem 0.6rem; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.extra-chip:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) { .extra-row { grid-template-columns: 1fr auto; } .extra-row .extra-value { grid-column: 1 / 2; } }

/* ---- Draft a CV for this job ---- */
.tailor-result h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.tailor-result .tailor-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin: 0.75rem 0 0.3rem; }
.tailor-result textarea { width: 100%; }
.tailor-result ul { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.tailor-result .tailor-skills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tailor-result .tailor-skills span { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.tailor-result .tailor-skills span.top { border-color: var(--ai-border); color: var(--ai); font-weight: 600; }
.tailor-result .tailor-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.88rem; margin-top: 0.75rem; }
.tailor-result details { margin-top: 0.4rem; font-size: 0.85rem; }
.tailor-result details li.less { color: var(--ink-faint); text-decoration: line-through; }

/* Shown when the page could not start (old cached page, new script) */
.startup-error { position: sticky; top: 0; z-index: 1000; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 0.75rem 1rem; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-border); font-size: 0.92rem; font-weight: 600; }
.startup-error button { font: inherit; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--warn-border); background: var(--surface); color: var(--ink); cursor: pointer; }

.reconnecting { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1000; padding: 0.55rem 1rem;
  border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---- CV card preview: a tidy miniature of the CV ----
   Small photo, name and headline on the band; a short summary, the
   latest role and a few skills below. Text is small and dark on white so
   it reads like a page, not a form. */
.cv-card-avatar.has-photo { background-size: cover; background-position: center; border: 2px solid rgba(255,255,255,0.85); color: transparent; }
.cv-card .cv-thumb-band { padding: 0.75rem 0.85rem; gap: 0.6rem; }
.cv-card .cv-card-avatar { width: 2.4rem; height: 2.4rem; }
.cv-thumb-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.25; }
.cv-thumb-name { display: block; color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-thumb-headline { display: block; color: rgba(255,255,255,0.78); font-size: 0.68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-thumb-headline:empty { display: none; }
.cv-card .cv-thumb-body { padding: 0.75rem 0.85rem 0.85rem; gap: 0.3rem; }
.cv-card .cv-thumb-body p { margin: 0; font-size: 0.68rem; line-height: 1.45; color: #4a4f4c; font-weight: 400; }
.cv-card .cv-thumb-body .cv-thumb-label { margin-top: 0.35rem; padding-bottom: 0.15rem; border-bottom: 1px solid #e6e2da;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sheet-head); }
.cv-card .cv-thumb-body .cv-thumb-label:first-child { margin-top: 0; }
.cv-thumb-summary { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cv-card .cv-thumb-body .cv-thumb-role { color: #1f2421; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-card .cv-thumb-body .cv-thumb-skills { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.cv-thumb-skills span { font-size: 0.6rem; line-height: 1.5; padding: 0 0.45rem; border-radius: 999px;
  background: #eef0ec; color: #3d4340; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-card .cv-thumb-body [hidden] { display: none; }
/* Placeholder lines only when the CV has no text yet */
.cv-card .cv-thumb-body i { display: none; }
.cv-card .cv-thumb-body.is-empty i { display: block; }

/* "Take photo" only where there is a camera to open: phones and tablets */
.camera-only { display: none; }
@media (pointer: coarse) { .camera-only { display: inline-flex; } }

/* Cover letter cards reuse the CV card miniature; the letter text gets a
   few more lines because it is the main content. */
.letter-card .letter-thumb-text { -webkit-line-clamp: 7; line-clamp: 7; }

/* ---- Plans: promo banner, Pro dialog, Pro badge ---- */
.plan-banner-backdrop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem;
  background: rgba(20, 24, 22, 0.45); }
.plan-banner-backdrop[hidden] { display: none; }
.plan-banner { max-width: 26rem; width: 100%; padding: 1.4rem 1.5rem 1.2rem; border-radius: var(--radius-md); text-align: center;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); border-top: 4px solid var(--accent); }
.plan-banner p { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.55; }
.plan-banner strong { display: block; margin-bottom: 0.35rem; font-size: 1.1rem; color: var(--accent); }
/* The paywall dialog's pitch. Hidden entirely when Pro cannot be
   bought, because a pitch with nothing to click is just a wall. */
.pro-sell { margin: 0 0 0.3rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.pro-sell[hidden] { display: none; }
.pro-list { margin: 0 0 0.7rem; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.5; }
.pro-list li::marker { color: var(--accent); }
.pro-free-note, .pro-alt { margin: 0 0 0.5rem; color: var(--ink-soft); font-size: 0.84rem; }
.pro-sell .pro-free-note { margin: 0; }
.pro-buy-error { margin: 0.5rem 0 0; color: var(--danger, #b00020); font-size: 0.84rem; }
.pro-buy-error[hidden] { display: none; }
.pro-badge { display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; }
.plan-tag { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }

/* ============================================================
   Grouped compact sections (skills, languages, hobbies)
   Real text under real headings; tighter spacing; print-safe.
   ============================================================ */
.cv-page .group-band {
  display: grid; grid-template-columns: var(--band-cols, repeat(3, minmax(0, 1fr)));
  column-gap: 6mm; row-gap: 2.2mm; align-items: start; margin-top: var(--section-gap);
}
.cv-page .group-band > .gs { margin-top: 0; min-width: 0; }
.cv-page .gs { break-inside: avoid; }
.cv-page .inline-list { font-size: 0.97em; line-height: 1.5; }
.cv-page .il { white-space: nowrap; }
.cv-page .il.il-long { white-space: normal; }
.cv-page .group-band .section-title {
  font-size: calc(0.74em * var(--heading-scale, 1)); letter-spacing: 0.1em; margin-bottom: 1.2mm; padding-bottom: 0.5mm; gap: 1.5mm;
}
.cv-page .group-band .section-title::before { width: 3mm; }
/* Classic uses real capitals, not font-variant small-caps: synthesized small caps are printed as separate runs ("M" + "ark") that text extraction can split into "M ark". */
.cv-page .cols-group .col-side .gs + .gs { margin-top: calc(var(--section-gap) * 0.7); }
.cv-page.t-sidebar .sb-side .gs + .gs { margin-top: calc(var(--section-gap) * 0.7); }
/* Minimal puts titles in a left gutter and Compact indents section bodies;
   inside a band both would squeeze the list, so the band uses plain stacking. */
.cv-page.t-minimal .gs { padding-left: 0; padding-top: 0; border-top: 0; position: static; }
.cv-page.t-minimal .gs .section-title { position: static; width: auto; padding-top: 0; margin-bottom: 1.2mm; }
.cv-page.t-minimal .group-band { border-top: 0.5pt solid color-mix(in srgb, var(--primary) 14%, white); padding-top: calc(var(--section-gap) * 0.6); }
.cv-page.t-compact .gs .section-body > :not(.entry) { margin-left: 0; }

/* ============================================================
   Design panels (Templates, Layout & spacing, Fonts, Colours)
   Settings cards on the page background, one category at a time.
   ============================================================ */
.panel.design-panel { background: none; border: 0; box-shadow: none; padding: 0; }
.design-panel .panel-intro { margin-bottom: 1rem; }
.design-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem 1.2rem; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm);
}
.design-card h2 { font-size: 0.98rem; font-weight: 650; margin: 0 0 0.35rem; letter-spacing: -0.005em; }
.design-card .hint { margin-top: 0; }
.design-card .style-field + .style-field { margin-top: 0.85rem; }
.design-card .theme-picker { flex-wrap: wrap; overflow: visible; gap: 1rem 0.9rem; padding: 4px 2px 2px; }
.design-card .preview-note:empty { display: none; }
.design-note {
  background: var(--accent-soft); color: var(--accent-ink); font-size: 0.86rem;
  padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); margin: 0 0 0.9rem;
}
.design-note[hidden] { display: none; }
.design-reset { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.2rem 0.2rem 0; }
.design-reset .link-btn { font-size: 0.82rem; }
.design-card .seg { width: 100%; }
.style-note { margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); }
.style-note:empty, .style-note[hidden] { display: none; }
#groupField .link-btn { margin-top: 0.6rem; font-size: 0.82rem; }

/* Option cards with a small sketch of the layout */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.7rem; }
.opt {
  display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; text-align: left;
  font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.55rem; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s;
}
.opt[hidden] { display: none; }
.opt:hover { border-color: var(--line-strong); color: var(--ink); }
.opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); color: var(--ink); }
.mini {
  display: grid; gap: 3px; padding: 7px; height: 4.6rem; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 4px; align-content: start;
}
.mini i { display: block; height: 3px; border-radius: 1px; background: #D8DCE0; }
.mini::before { content: ""; grid-column: 1 / -1; height: 15px; margin-bottom: 2px; border-radius: 1px;
  background: repeating-linear-gradient(to bottom, #C9CED3 0 2px, transparent 2px 5px); }
.mini-std i:nth-child(odd), .mini-band i:nth-child(-n+3), .mini-side i:nth-child(odd) { background: #1F3A5F; width: 45%; }
.mini-band { grid-template-columns: repeat(3, 1fr); column-gap: 5px; }
.mini-side { grid-template-columns: 1fr 34%; column-gap: 6px; }
.mini-side::before { grid-column: 1; grid-row: 1 / span 7; height: auto; align-self: stretch; margin: 0; }
.mini-side i { grid-column: 2; }

/* Colours */
.colour-row {
  display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: 0.15rem 0.85rem; align-items: center;
  padding: 0.7rem 0; border-top: 1px solid var(--line);
}
.colour-row[hidden] { display: none; }
.design-card h2 + .colour-row { border-top: 0; }
.colour-row input[type="color"] {
  grid-row: 1 / span 2; width: 2.7rem; height: 2.3rem; padding: 0; background: none;
  border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
}
.colour-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.colour-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.colour-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }
.colour-row label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.colour-hint { grid-column: 2; margin: 0; font-size: 0.78rem; color: var(--ink-faint); }
.colour-row .link-btn { grid-row: 1 / span 2; grid-column: 3; font-size: 0.78rem; }
.colour-warn {
  grid-column: 1 / -1; margin: 0.3rem 0 0; padding: 0.4rem 0.65rem; font-size: 0.8rem;
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-ink); border-radius: var(--radius-sm);
}
.colour-warn:empty { display: none; }
.palette-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.palette {
  display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem 0.8rem 0.4rem 0.55rem; cursor: pointer;
}
.palette:hover { border-color: var(--line-strong); color: var(--ink); }
.palette[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.palette .dots { display: inline-flex; }
.palette .dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); }
.palette .dot + .dot { margin-left: -0.3rem; }

/* Fonts */
.font-sample { margin-top: 1rem; padding: 0.85rem 1rem; background: #fff; color: #1C1F23; border: 1px solid var(--line); border-radius: var(--radius-md); }
.font-sample .fs-heading { margin: 0 0 0.35rem; font-family: var(--fs-heading, inherit); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.font-sample .fs-body { margin: 0; font-family: var(--fs-body, inherit); font-size: 0.92rem; line-height: 1.45; }

/* Category tabs inside the Design panels: for phones, where the sidebar is icons only */
.design-tabs { display: none; }
@media (max-width: 920px) {
  .design-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; margin-bottom: 0.9rem; }
  .design-tab {
    flex: none; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; cursor: pointer; white-space: nowrap;
  }
  .design-tab[aria-current="page"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
}

/* Empty states: one clear first action */
.empty-note { color: var(--ink-faint); font-size: 0.92rem; margin: 0 0 0.75rem; }
.btn-add.is-first { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.btn-add.is-first:hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }

/* Import review and the "check these" list in the editor */
.import-preview { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--ink-faint); }
.import-check { margin-bottom: 1rem; }
.import-check ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.import-check li { display: flex; align-items: flex-start; gap: 0.5rem; justify-content: space-between; padding: 0.2rem 0; }
.import-check li button { flex-shrink: 0; }

/* Tailor step: which job this CV belongs to */
.tailor-note { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin: 0 0 1rem; }
.tailor-note p { margin: 0 0 0.6rem; font-size: 0.92rem; }
.tailor-note .button-row { margin: 0; }
.job-link-note { margin: 0 0 0.8rem; }
.job-card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.3rem; }
.job-card-tags span { font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }


/* ============================================================
   ATS check, keyword match, spelling & grammar
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.check-ok { margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: 0.9rem; }
.check-note { margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.9rem; }
.check-stale { margin: 0.6rem 0 0; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-ink); font-size: 0.85rem; }
.ats-result, .proof-result { margin-top: 0.9rem; }
.ats-summary { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.ats-summary-text p { margin: 0; }
.ats-verdict { font-weight: 700; font-size: 1.05rem; }
.ats-count { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.1rem !important; }
.ats-delta { font-size: 0.82rem; font-weight: 600; margin-top: 0.25rem !important; }
.ats-delta.up { color: var(--accent-ink); }
.ats-delta.down { color: var(--danger); }
.ring { flex: none; }
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--accent); transition: stroke-dasharray 0.4s ease; }
.ring-mid .ring-fill { stroke: #C98A12; }
.ring-low .ring-fill { stroke: var(--danger); }
.ring-num { fill: var(--ink); font: 700 15px var(--font-ui); }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }
.ats-bars { margin: 0.9rem 0 0; display: grid; gap: 0.45rem; }
.bar-row { display: grid; grid-template-columns: 8.5rem 1fr 2.4rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.bar-label { color: var(--ink-soft); }
.bar { height: 0.5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-num { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ats-h, .proof-field { margin: 1.2rem 0 0.4rem; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ink-soft); font-weight: 650; }
.ats-list, .proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ats-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ats-mark { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; background: var(--line); color: var(--ink); }
.ats-item.status-pass .ats-mark { background: var(--accent-soft); color: var(--accent-ink); }
.ats-item.status-warn .ats-mark { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-border); }
.ats-item.status-fail .ats-mark { background: var(--danger-soft); color: var(--danger); }
.ats-body { flex: 1; min-width: 0; }
.ats-title { margin: 0; font-size: 0.92rem; font-weight: 600; }
.ats-detail { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--ink-soft); }
.ats-fix { flex: none; padding: 0.3rem 0.8rem; }
.ats-done { margin-top: 1rem; }
.ats-done summary { cursor: pointer; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.ats-foot { margin-top: 1rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.ats-foot .hint { margin: 0; flex: 1 1 14rem; }
.chip-list { list-style: none; margin: 0 0 0.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kw-chip { padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.84rem; border: 1px solid var(--line-strong); background: var(--surface); }
.kw-chip.kw-found { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.kw-chip.kw-found::before { content: "\2713\00a0"; }
.kw-chip.kw-missing { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.kw-caveat { margin-top: 0.9rem; }

.proof-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.proof-count { margin: 0; font-weight: 700; }
.proof-field { margin-top: 1rem; }
.proof-field .link-btn { font: inherit; font-weight: 650; }
.proof-item { padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.proof-snippet { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.proof-snippet mark { background: var(--warn-bg); color: var(--warn-ink); border-radius: 3px; padding: 0 0.15em; box-shadow: inset 0 -2px 0 var(--warn-border); }
.proof-snippet ins { text-decoration: none; background: var(--accent-soft); color: var(--accent-ink); border-radius: 3px; padding: 0 0.15em; font-weight: 600; }
.proof-msg { margin: 0.3rem 0 0; font-size: 0.84rem; color: var(--ink-soft); }
.proof-kind { display: inline-block; padding: 0 0.45rem; margin-right: 0.2rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.74rem; font-weight: 600; color: var(--ink); }
.proof-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.proof-actions .btn-primary, .proof-actions .btn-ghost { padding: 0.28rem 0.85rem; font-size: 0.85rem; }
#letterProofResult { margin-top: 0.6rem; }
@media (max-width: 520px) { .bar-row { grid-template-columns: 6.5rem 1fr 2.2rem; } .ats-summary { flex-direction: column; align-items: flex-start; } }


/* ============================================================
   Preview: where each PDF page starts, and the footer
   ============================================================ */
.cv-page .page-break {
  position: absolute; left: 0; right: 0; height: 0; pointer-events: none;
  border-top: calc(1.5px * var(--inv-zoom, 1)) dashed rgba(31, 58, 95, 0.28);
}
.cv-page .page-break span {
  position: absolute; right: calc(var(--margin, 15mm) / 2); top: 0; transform: translate(50%, -50%);
  min-width: calc(18px * var(--inv-zoom, 1)); height: calc(18px * var(--inv-zoom, 1));
  padding: 0 calc(5px * var(--inv-zoom, 1));
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #1F3A5F; color: #fff;
  font: 700 calc(10.5px * var(--inv-zoom, 1)) / 1 var(--font-ui, system-ui, sans-serif);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.cv-page .cv-footer-preview {
  position: absolute; left: var(--margin, 15mm); right: var(--margin, 15mm);
  bottom: 0; height: calc(var(--margin, 15mm) + 4mm);
  display: flex; align-items: center; gap: 4mm;
  font-family: var(--font-body); font-size: 8pt; line-height: 1.2; color: var(--muted);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.cv-page .cv-footer-preview > span { white-space: pre; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-page .cv-footer-preview.is-centre { justify-content: center; }
.cv-page .cv-footer-preview.is-left { justify-content: flex-start; }
.cv-page .cv-footer-preview.is-right { justify-content: flex-end; }
.cv-page .cv-footer-preview.is-spread { justify-content: space-between; }
.footer-print-note { margin-top: 0.7rem; }
#footerCustomField input { font-size: 0.88rem; }
#footerControls .style-field + .style-field, #footerControls .style-field + .style-note { margin-top: 0.85rem; }
.design-card[data-disabled="true"] #footerControls { display: none; }

/* FAQ and "What is" blocks on the home page.
   Six answers in one column ran 827px down the page and used 57% of the
   width, which was the largest empty area on the page. Two columns use the
   space without stretching a line of text past a comfortable measure. */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.5rem; }
.faq-item { break-inside: avoid; }
.landing-faq h3 { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; }
.landing-faq p, .landing-what p { margin: 0; color: var(--ink-soft); max-width: 68ch; }

/* One short definition with nothing beside it sat against the left edge
   with the right half of the row empty. Centring the block keeps the line
   length readable and leaves the same margin on both sides. The text stays
   left-aligned: centred prose is harder to read. */
.landing-what { text-align: center; }
.landing-what h2, .landing-what p { margin-inline: auto; }
.landing-what p { max-width: 62ch; text-align: left; }

@media (max-width: 760px) {
  .faq-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ============================================================
   Mobile UX fixes (editor header, tabs, preview toolbar, toggle)
   ============================================================ */

/* Tablet and phone: tabs never shrink or overlap; the strip scrolls. */
@media (max-width: 920px) {
  .sidebar-nav { flex: 1 1 0; min-width: 0; position: relative; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .side-tab { flex: 0 0 auto; scroll-snap-align: center; min-height: 48px; }
}

@media (max-width: 700px) {
  /* Phones have one menu: a bar at the bottom. The back link and the section tabs sit in it. */
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 26;
    height: auto; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--nav-line); box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  }
  .sidebar-brand { flex: 0 0 auto; margin: 0; padding: 0 0.5rem; }
  .sidebar-brand .brand-mark, .sidebar-brand .brand-name { display: none; }
  .sidebar-back { display: inline; margin-left: 0; font-size: 0.8rem; color: #fff; }
  /* In the CV editor, the Edit/Preview pill floats just above the bar. */
  body:has(#screenEditor:not([hidden])) .mobile-toggle { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .sidebar-nav { flex: 1 1 auto; margin-left: 0; padding-right: 28px; /* clears the fade */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .side-tab { min-width: 4.4rem; padding: 0.4rem 0.7rem; }

  /* Preview toolbar: two rows, not four. */
  .preview-toolbar { margin: 0 0 0.75rem; gap: 0.5rem; }
  .preview-label { display: none; }
  .preview-toolbar .btn-pdf { order: -1; margin-left: auto; min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.9rem; }
  .preview-toolbar .theme-switch { order: -2; }
  .theme-switch button, .style-toggle, .size-pick select { min-height: 40px; }
  .size-pick { font-size: 0.8rem; }
  .preview-viewbar { gap: 0.4rem; }
  .preview-viewbar .zoom-ctl { margin-left: 0; width: 100%; justify-content: center; }
  .zoom-ctl button { min-height: 40px; }
  /* Zoom +/- only change the size within the screen width; "Fit width" and
     "Whole page" are the useful choices on a phone. */
  #btnZoomOut, #btnZoomIn, #zoomLevel { display: none; }
  .zoom-ctl .zoom-fit { flex: 1; padding: 0 0.9rem; font-size: 0.8rem; }
  .fit-toggle { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 0.9rem; min-height: 40px; text-decoration: none; background: var(--surface); color: var(--ink); }
  .page-count-wrap { display: inline-flex; align-items: center; gap: 0.6rem; }

  /* Edit / Preview toggle: solid, always readable, never see-through. */
  .mobile-toggle { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
  .mobile-toggle button { color: var(--ink-soft); min-height: 44px; padding: 0.5rem 1.5rem; }
  .mobile-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
  .editor, .preview-pane { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* New CV chooser */
.modal-wide { width: min(34rem, calc(100vw - 2rem)); }
.choice-list { display: grid; gap: 0.6rem; margin-bottom: 0.8rem; }
.choice { display: grid; gap: 0.15rem; text-align: left; padding: 0.8rem 1rem; border: 1px solid var(--line, #d8dedb); border-radius: 10px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.choice:hover, .choice:focus-visible { border-color: var(--accent); }
.choice b { font-size: 0.98rem; }
.choice span:not(.pro-badge) { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.4; }
.choice-form .field { display: grid; gap: 0.25rem; margin-bottom: 0.7rem; }
.choice-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.choice-form select, .choice-form input, .choice-form textarea { width: 100%; font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--line, #d8dedb); border-radius: 8px; background: var(--surface, #fff); color: inherit; box-sizing: border-box; }
.cv-card-job { margin: 0.15rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .choice-form .field-row { grid-template-columns: 1fr; } }

/* Completeness checklist in the sidebar */
.side-tab-text { display: grid; gap: 0.05rem; min-width: 0; }
.side-tab-status { font-size: 0.72rem; font-weight: 500; color: var(--nav-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-tab-status.is-done::before { content: "\2713\00a0"; }
.side-tab-status.is-done { color: #7fd1b9; }
.side-tab[aria-selected="true"] .side-tab-status { color: #5d6b67; }
.side-tab[aria-selected="true"] .side-tab-status.is-done { color: #1f7a5f; }
@media (max-width: 920px) { .side-tab-status { display: none; } }

/* ---- Job tracker: reorder, follow-ups, archive, timeline ---- */
.tab-badge { display: inline-block; min-width: 1.15rem; margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 99px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.tab-badge[hidden] { display: none; }
.job-drop-line { height: 3px; margin: -0.1rem 0; border-radius: 3px; background: var(--accent); pointer-events: none; }
.job-card-wrap.dragging { opacity: 0.4; }
.job-card-tools { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.12s; }
.job-card-wrap:hover .job-card-tools, .job-card-wrap:focus-within .job-card-tools { opacity: 1; max-height: 3rem; overflow: visible; }
@media (hover: none) { .job-card-tools { opacity: 1; max-height: none; overflow: visible; } }
.job-tool, .job-row-archive { font: inherit; font-size: 0.75rem; padding: 0.15rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.job-tool:hover:not(:disabled), .job-row-archive:hover { border-color: var(--accent); color: var(--accent); }
.job-tool:disabled { opacity: 0.35; cursor: default; }
.job-tool.is-armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.job-due { display: inline-block; margin-top: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.job-due.is-overdue { background: var(--danger-soft); color: var(--danger); }
.job-due.is-today { background: #fff1d6; color: #8a5300; }
.job-due-text { color: var(--danger); font-weight: 600; }
.job-presets { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.preset { font: inherit; font-size: 0.75rem; padding: 0.1rem 0.55rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.preset:hover { border-color: var(--accent); color: var(--accent); }
.job-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -0.25rem 0 0.75rem; }
.job-url-note { font-size: 0.78rem; color: var(--ink-faint); }
.job-archive[hidden] { display: none; }
.job-timeline { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.timeline-list { list-style: none; margin: 0.5rem 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--line); }
.timeline-item { position: relative; margin-bottom: 0.7rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.2rem; top: 0.35rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.timeline-item.kind-rejection::before { background: var(--danger); }
.timeline-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.timeline-date { color: var(--ink-faint); }
.timeline-kind { font-size: 0.72rem; padding: 0 0.4rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.timeline-notes { margin: 0.2rem 0; font-size: 0.82rem; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-actions { display: flex; gap: 0.3rem; }

/* Upgrade button in the top bar (free accounts only) */
.topbar-upgrade { padding: 0.4rem 0.9rem; font-size: 0.88rem; }
.topbar-upgrade[hidden] { display: none; }

/* ---------------------------------------------------------------
   Plan dialog: one Pro panel, because by the time it opens the
   person already knows what Free does. The price is the loudest
   thing on it; everything else supports the decision.
   --------------------------------------------------------------- */
.plan-dialog { width: min(32rem, calc(100vw - 2rem)); padding-top: 0; }

/* A tinted band behind the heading, bled to the dialog's edges. */
.plan-head {
  margin: 0 -1.6rem 1.1rem;
  padding: 1.5rem 1.6rem 1.2rem;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--line);
}
.plan-head h2 { margin: 0 0 0.3rem; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.plan-head-sub { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

/* Period chooser. Each option carries its own saving, so the
   cheaper-per-month choice is visible before it is selected. */
.plan-period { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0 0 1rem; }
/* flex, not block: a percentage height on the option would resolve
   against the label's auto height and collapse. Stretching does. */
.plan-period label { position: relative; display: flex; min-width: 0; }
.plan-period input { position: absolute; opacity: 0; pointer-events: none; }
/* flex: 1 keeps all three the same height even though only some carry a
   saving line. */
.plan-period-opt {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  box-sizing: border-box;
  /* A 2px border in both states, so selecting one never resizes it. A
     border plus a ring shadow would show a hairline between the two. */
  padding: 0.5rem 0.4rem; border: 2px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2); cursor: pointer; text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.plan-period-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.plan-period-save { font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.01em; }
.plan-period-save[hidden] { display: none; }
.plan-period label:hover .plan-period-opt { border-color: var(--line-strong); }
.plan-period input:checked + .plan-period-opt {
  border-color: var(--accent); background: var(--accent-soft);
}
.plan-period input:focus-visible + .plan-period-opt { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The price itself. */
.plan-price-box { margin: 0 0 1rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 0.2rem; font-size: 2.1rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.plan-price-unit { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.plan-price-unit[hidden] { display: none; }
.plan-price-note { margin: 0; color: var(--ink-soft); font-size: 0.84rem; }
/* Before prices arrive the placeholder is a sentence, not a number. */
.plan-price.is-placeholder { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }

.plan-cta { width: 100%; font-size: 1rem; padding-block: 0.7rem; }

/* Reassurance, directly under the button where the doubt is. */
.plan-trust { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.plan-trust li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.45; }
.plan-trust li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.36rem;
  width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* What you actually get. A bold line and a quiet one, so it can be
   skimmed in bold alone. */
.plan-gains { list-style: none; margin: 1.1rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.7rem; }
.plan-gains li { display: grid; gap: 0.1rem; }
.plan-gains strong { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.plan-gains span { font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); }

.plan-compare { margin: 1rem 0 0; font-size: 0.84rem; }
.plan-compare a { color: var(--accent-ink); }

@media (min-width: 30rem) {
  .plan-gains { grid-template-columns: 1fr 1fr; gap: 0.8rem 1.1rem; }
  .plan-gains li:first-child { grid-column: 1 / -1; }
}

/* Narrow phones: three period labels will not sit on one row. */
@media (max-width: 22rem) {
  .plan-period { grid-template-columns: 1fr; }
  .plan-period-opt { flex-direction: row; justify-content: center; gap: 0.4rem; }
}

/* ============================================================
   Phone form fields — last in the file on purpose
   Safari on iOS zooms the whole page in whenever a focused field computes
   smaller than 16px, and it does not zoom back out: tap a field and the
   layout is left shifted sideways with the bottom bar off screen. Every
   field on a phone is therefore exactly 16px.
   This block sits at the end of the file, and it repeats the typed
   `input[type=…]` selectors the base rule uses rather than relying on a bare
   `input`. An attribute selector outranks a plain element one whatever the
   order, so `input { font-size: 16px }` here would quietly lose to
   `input[type="text"] { font-size: 0.95rem }` further up. Matching the
   selector and coming later wins without needing !important.
   ============================================================ */
@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="date"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="month"],
  input:not([type]), select, textarea,
  .choice-form input, .choice-form select, .choice-form textarea,
  .bullet-item .bullet-text,
  .jobs-tools input[type="search"] { font-size: 16px; }
}