/* ===== Shared CV document ===== */
.cv {
  --cv-accent: #1e2a63;
  --cv-ink: #1f2430;
  --cv-muted: #6b7280;
  --cv-line: #e3e6ef;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--cv-ink);
  font-size: 13px;
  line-height: 1.5;
  padding: 0 0 24mm;
}

/* Free-plan watermark overlay. Rendered only in read-only preview / PDF.
   An absolutely-positioned layer that spans the whole (multi-page) document; a
   tiled SVG repeats the wordmark diagonally across every printed page. */
.cv--watermark { position: relative; }
.cv-wm {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 320px 220px;
  opacity: 0.5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='220'><text x='160' y='120' font-family='DM Sans, Arial, sans-serif' font-size='30' font-weight='700' fill='%23007fff' fill-opacity='0.12' text-anchor='middle' transform='rotate(-30 160 110)'>CVSlate</text></svg>");
}

/* Header band. A column so the optional logo row sits above the name/photo. */
.cv-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 26px;
  background: color-mix(in srgb, var(--cv-accent) 8%, #fff);
  border-bottom: 3px solid var(--cv-accent);
}
.cv-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cv-head-main { min-width: 0; }

/* Optional letterhead logo on its own full-width row above the name. The row's
   justify-content sets left / centre / right; the image height is set inline. */
.cv-logo { display: flex; width: 100%; margin-bottom: 12px; }
.cv-logo--left { justify-content: flex-start; }
.cv-logo--center { justify-content: center; }
.cv-logo--right { justify-content: flex-end; }
.cv-logo-inner { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.cv-logo img { display: block; height: 30px; width: auto; max-width: 360px; object-fit: contain; }
.cv-logo-file { display: none; }
/* Placeholder affordance shown only in the editor when no logo is set */
.cv-logo-hint {
  display: inline-flex; align-items: center;
  border: 1px dashed var(--cv-accent); color: var(--cv-accent);
  border-radius: 8px; padding: 6px 12px;
  font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; opacity: .85;
}
.cv-logo[data-logo] { cursor: pointer; }
.cv-logo-x {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; line-height: 1;
  border: none; border-radius: 50%;
  background: #fef2f2; color: #b91c1c;
  font-size: 15px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.cv-logo:hover .cv-logo-x { opacity: 1; }
.cv-logo-x:hover { background: #fee2e2; }
.cv-logo-align {
  position: absolute; top: -8px; left: -8px;
  height: 20px; padding: 0 7px; line-height: 18px;
  border: none; border-radius: 999px;
  background: rgba(10, 14, 23, 0.78); color: #fff;
  font-size: 12px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.cv-logo:hover .cv-logo-align { opacity: 1; }
.cv-logo-resize {
  position: absolute; right: -6px; bottom: -6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cv-accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  cursor: nwse-resize; opacity: 0; transition: opacity .12s;
  touch-action: none;
}
.cv-logo:hover .cv-logo-resize { opacity: 1; }

.cv-name {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: var(--cv-accent);
}
.cv-headline {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--cv-accent);
  opacity: .85;
  margin-top: 4px;
}
.cv-photo {
  position: relative;
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--cv-accent);
  display: flex; align-items: center; justify-content: center;
}
/* Clip layer: masks the picture to the frame so zoom/pan stay inside it.
   Sits inside the 2px border (inset:0 = padding box) and inherits the frame's
   rounded shape. Controls (resize handle, buttons) live outside this layer so
   they aren't clipped. */
.cv-photo-clip {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; display: block; z-index: 0;
}
.cv-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center center;
}
.cv-photo.has-img .cv-photo-clip { cursor: move; touch-action: none; }
.cv-photo-hint { font-size: 11px; color: var(--cv-muted); text-align: center; padding: 0 6px; position: relative; z-index: 1; }

/* Photo shape: circle (default) or portrait rectangle */
.cv-photo--rect { border-radius: 10px; }
.cv-photo--circle { border-radius: 50%; }

.cv-photo-shape {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  background: rgba(10, 14, 23, 0.78); color: #fff; border: none;
  font-family: "DM Sans", sans-serif; font-size: 12px; line-height: 1;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .12s; z-index: 3;
}
.cv-photo:hover .cv-photo-shape { opacity: 1; }

/* Zoom slider — appears on hover along the bottom edge of the frame. Zoom
   sizes the picture within the frame; dragging the picture repositions it. */
.cv-photo-zoom {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 74%; height: 4px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, 0.55); border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .12s; z-index: 3;
}
.cv-photo.has-img:hover .cv-photo-zoom { opacity: 1; }
.cv-photo-zoom::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cv-accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer;
}
.cv-photo-zoom::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cv-accent); border: 2px solid #fff; cursor: pointer;
}

/* Editing controls (present only in the editor) */
.cv-photo[data-photo] { cursor: pointer; }
.cv-photo-file { display: none; }
.cv-photo-edit {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  background: rgba(10, 14, 23, 0.78); color: #fff; border: none;
  font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .12s; white-space: nowrap; z-index: 3;
}
.cv-photo:hover .cv-photo-edit { opacity: 1; }
.cv-photo-resize {
  position: absolute; right: -5px; bottom: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cv-accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  cursor: nwse-resize; opacity: 0; transition: opacity .12s;
  touch-action: none; z-index: 3;
}
.cv-photo:hover .cv-photo-resize { opacity: 1; }

/* Section rows: label column + body column */
.cv-row {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--cv-line);
}
.cv-row:last-child { border-bottom: none; }
.cv-label {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cv-accent);
  text-transform: uppercase;
}
.cv-body { min-width: 0; }
.cv-summary { display: block; }
.cv-section-body { display: block; white-space: pre-wrap; }

/* ---- Rich text content (inline b/i/u + block lists/align) ----
   Applies inside any field the editor marks rich. Block fields hold
   paragraphs/lists; inline fields only ever hold b/strong/i/em/u/br. */
.cv [data-rich="block"] { display: block; white-space: normal; }
.cv [data-rich] b, .cv [data-rich] strong { font-weight: 700; }
.cv [data-rich] i, .cv [data-rich] em { font-style: italic; }
.cv [data-rich] u { text-decoration: underline; }
.cv [data-rich="block"] p,
.cv [data-rich="block"] div { margin: 0 0 4px; }
.cv [data-rich="block"] p:last-child,
.cv [data-rich="block"] div:last-child { margin-bottom: 0; }
.cv [data-rich="block"] ul,
.cv [data-rich="block"] ol { margin: 4px 0; padding-left: 20px; }
.cv [data-rich="block"] ul { list-style: disc; }
.cv [data-rich="block"] ol { list-style: decimal; }
.cv [data-rich="block"] li { margin-bottom: 2px; }
.cv [data-rich="block"] li::marker { color: var(--cv-accent); }

/* Per-section move / remove controls, tucked into the right gutter */
.cv-sec-tools {
  position: absolute;
  top: 12px;
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s;
}
.cv-row:hover .cv-sec-tools { opacity: 1; }
.cv-move {
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cv-line); border-radius: 6px;
  background: #fff; color: var(--cv-accent);
  font-size: 10px; line-height: 1; cursor: pointer;
}
.cv-move:hover { background: color-mix(in srgb, var(--cv-accent) 12%, #fff); }
.cv-move:disabled { opacity: .35; cursor: default; }
.cv-move-x { color: #b91c1c; border-color: #fecaca; font-size: 14px; }
.cv-move-x:hover { background: #fee2e2; }

/* "Add section" button row at the foot of the document */
.cv-add-section { padding: 14px 26px; }

/* Key-value rows (contact, skills, experience meta) */
.kv { display: flex; gap: 6px; align-items: baseline; position: relative; margin-bottom: 5px; }
/* flex-shrink:0 keeps a nowrap label from being squeezed narrower than its
   text when the value is long — otherwise the label overflows and overlaps
   the value (seen with long skill labels + multi-line values). */
.kv-k { font-weight: 700; color: var(--cv-ink); white-space: nowrap; flex-shrink: 0; }
.kv-k::after { content: ":"; }
.kv-v { color: var(--cv-ink); }
.kv--sm { font-size: 12.5px; }
.skills .kv-k { min-width: 130px; }

/* Stacked section: label sits above, items carry their own left gutter */
.cv-row--stack { display: block; }
.cv-row--stack > .cv-label { margin-bottom: 12px; }

/* Experience / Education: left aside (location + dates) + main content */
.exp, .edu {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
}
.exp { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--cv-line); }
.exp:last-of-type { border-bottom: none; }
.edu { margin-bottom: 12px; }
.exp-aside { min-width: 0; }
.exp-loc { display: block; font-weight: 700; color: var(--cv-accent); font-size: 12.5px; }
.exp-dates { display: block; font-size: 12px; color: var(--cv-accent); opacity: .8; font-style: italic; margin-top: 2px; }
.exp-main { min-width: 0; }
.exp-role { display: block; font-weight: 700; font-size: 14px; color: var(--cv-accent); }
.exp-org { display: block; font-weight: 600; margin: 1px 0 6px; }
.edu-degree { display: block; }
.edu-school { display: block; }
.exp-meta { margin-bottom: 6px; }
.exp-bullets { margin: 0; padding-left: 18px; }
.exp-bullets li { margin-bottom: 3px; position: relative; }
.exp-bullets li::marker { color: var(--cv-accent); }
/* A line with its dot toggled off reads as a plain paragraph. */
.exp-bullets li.no-bullet { list-style: none; margin-left: -18px; }

/* Education */
.edu-degree { display: block; font-weight: 700; color: var(--cv-accent); }
.edu-school { display: block; font-weight: 600; }

/* ===== Editing affordances (only meaningful when contenteditable present) ===== */
[contenteditable] { border-radius: 4px; transition: box-shadow .12s, background .12s; outline: none; }
.paper [contenteditable]:hover { box-shadow: 0 0 0 2px rgba(47,63,143,.18); }
.paper [contenteditable]:focus { box-shadow: 0 0 0 2px var(--cv-accent); background: #fff; }
[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: #9aa1b2;
}

.cv-add {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px dashed var(--cv-accent);
  color: var(--cv-accent); border-radius: 999px;
  padding: 3px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 6px;
}
.cv-add:hover { background: color-mix(in srgb, var(--cv-accent) 8%, #fff); }
.cv-add-row { list-style: none; margin-left: -18px; }

.cv-x {
  position: absolute; top: 0; right: -6px;
  width: 20px; height: 20px; line-height: 1;
  border: none; border-radius: 50%;
  background: #fef2f2; color: #b91c1c;
  font-size: 15px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.exp > .cv-x, .edu > .cv-x { top: 2px; right: 2px; }
.kv:hover > .cv-x,
.exp-bullets li:hover > .cv-x,
.exp:hover > .cv-x,
.edu:hover > .cv-x { opacity: 1; }
.cv-x:hover { background: #fee2e2; }

/* Reorder a bullet: up / down controls that appear beside the × on hover. */
.bul-move {
  position: absolute; top: 0;
  width: 16px; height: 18px; line-height: 16px;
  padding: 0; text-align: center;
  border: none; border-radius: 4px;
  background: #eef2ff; color: var(--cv-accent);
  font-size: 8px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.bul-move[data-bullet-down] { right: 16px; }
.bul-move[data-bullet-up] { right: 34px; }
.bul-move[data-bullet-toggle] { right: 52px; }
.bul-move[data-bullet-insert] { right: 70px; }
.exp-bullets li:hover > .bul-move { opacity: 1; }
.bul-move:hover { background: color-mix(in srgb, var(--cv-accent) 15%, #fff); }
/* Active (dot-off) state for the toggle so its status is visible. */
.exp-bullets li.no-bullet > .bul-move[data-bullet-toggle] {
  background: var(--cv-accent); color: #fff;
}

/* ===== Theme: Sky Blue ===== */
.cv--sky { --cv-accent: #007fff; font-family: "Open Sans", system-ui, sans-serif; }
.cv--sky .cv-name,
.cv--sky .cv-headline,
.cv--sky .cv-label,
.cv--sky .exp-role,
.cv--sky .edu-degree { font-family: "DM Sans", sans-serif; }
.cv--sky .cv-head { background: #007fff; border-bottom: none; }
.cv--sky .cv-name { color: #fff; letter-spacing: -0.01em; }
.cv--sky .cv-headline { color: #dbeeff; opacity: 1; }
.cv--sky .cv-photo { border-color: #fff; }
.cv--sky .cv-label { letter-spacing: .08em; }

/* ===== Theme: Slate Modern ===== */
.cv--slate { --cv-accent: #0f766e; }
.cv--slate .cv-head { background: #0f766e; border-bottom: none; }
.cv--slate .cv-name { color: #fff; }
.cv--slate .cv-headline { color: #d1fae5; opacity: 1; }
.cv--slate .cv-photo { border-color: #fff; }
.cv--slate .cv-label { letter-spacing: .08em; }

/* ===== Theme: Mono Classic ===== */
.cv--mono { --cv-accent: #111827; font-family: Georgia, "Times New Roman", serif; }
.cv--mono .cv-name { font-family: Georgia, serif; letter-spacing: -.5px; }
.cv--mono .cv-head { background: #fff; border-bottom: 2px solid #111827; }
.cv--mono .cv-headline { opacity: 1; color: var(--cv-muted); font-family: "Inter", sans-serif; }
.cv--mono .cv-label { font-family: Georgia, serif; }

/* ===== Theme: Graphite Sidebar ===== */
/* Dark charcoal header with a warm amber accent. Charcoal section labels and
   role/degree headings keep contrast on white; amber is reserved for the
   header rule, headline, photo frame and bullet markers. */
.cv--graphite { --cv-accent: #f59e0b; font-family: "Inter", system-ui, sans-serif; }
.cv--graphite .cv-name,
.cv--graphite .cv-label,
.cv--graphite .exp-role,
.cv--graphite .edu-degree { font-family: "DM Sans", sans-serif; }
.cv--graphite .cv-head { background: #23262d; border-bottom: 3px solid #f59e0b; }
.cv--graphite .cv-name { color: #fff; letter-spacing: -.01em; }
.cv--graphite .cv-headline { color: #f59e0b; opacity: 1; }
.cv--graphite .cv-photo { border-color: #f59e0b; }
.cv--graphite .cv-label { color: #23262d; letter-spacing: .08em; }
.cv--graphite .exp-role,
.cv--graphite .edu-degree { color: #23262d; }
.cv--graphite .exp-loc,
.cv--graphite .exp-dates { color: #b26b00; }
.cv--graphite .exp-bullets li::marker,
.cv--graphite [data-rich="block"] li::marker { color: #f59e0b; }

/* ===== Theme: Minimal Ink ===== */
/* Clean black-on-white, no colour bands — ATS-friendly. */
.cv--ink { --cv-accent: #1a1a1a; --cv-line: #d9d9d9; font-family: "Inter", system-ui, sans-serif; }
.cv--ink .cv-head { background: #fff; border-bottom: 1.5px solid #1a1a1a; }
.cv--ink .cv-name { color: #1a1a1a; font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.cv--ink .cv-headline {
  color: #4b5563; opacity: 1; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; font-size: 11px; margin-top: 6px;
}
.cv--ink .cv-photo { border-color: #1a1a1a; }
.cv--ink .cv-label { color: #1a1a1a; letter-spacing: .1em; font-family: "Inter", sans-serif; }
.cv--ink .exp-role,
.cv--ink .edu-degree { color: #1a1a1a; }
.cv--ink .exp-loc { color: #1a1a1a; }
.cv--ink .exp-dates { color: #6b7280; }
.cv--ink .exp-bullets li::marker,
.cv--ink [data-rich="block"] li::marker { color: #1a1a1a; }

/* ===== Theme: Executive Serif ===== */
/* Serif, centred name, burgundy accent and thin rules for a formal look. */
.cv--executive { --cv-accent: #7a1f2b; font-family: Georgia, "Times New Roman", serif; }
.cv--executive .cv-name,
.cv--executive .cv-label,
.cv--executive .exp-role,
.cv--executive .edu-degree { font-family: Georgia, "Times New Roman", serif; }
.cv--executive .cv-head { background: #fff; border-bottom: 2px solid var(--cv-accent); }
.cv--executive .cv-head-row { justify-content: center; }
.cv--executive .cv-head-main { text-align: center; }
.cv--executive .cv-name { color: var(--cv-accent); font-weight: 700; letter-spacing: .02em; font-size: 32px; }
.cv--executive .cv-headline {
  color: var(--cv-muted); opacity: 1;
  text-transform: uppercase; letter-spacing: .18em;
  font-family: "Inter", sans-serif; font-size: 11px; margin-top: 8px;
}
.cv--executive .cv-label { letter-spacing: .1em; font-weight: 700; }

/* ===== Theme: Timeline ===== */
/* Experience entries render as a vertical timeline: dates on the left, a
   coloured spine with a node dot beside each role. */
.cv--timeline { --cv-accent: #4f46e5; font-family: "Inter", system-ui, sans-serif; }
.cv--timeline .cv-head { background: color-mix(in srgb, #4f46e5 8%, #fff); border-bottom: 3px solid #4f46e5; }
.cv--timeline .cv-name { color: #4f46e5; }
.cv--timeline .cv-headline { color: #4f46e5; opacity: .85; }
.cv--timeline .cv-photo { border-color: #4f46e5; }
.cv--timeline .exp { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cv--timeline .exp-main {
  position: relative;
  border-left: 2px solid color-mix(in srgb, #4f46e5 35%, #fff);
  padding-left: 20px;
  padding-bottom: 18px;
}
.cv--timeline .exp:last-of-type .exp-main { border-left-color: transparent; }
.cv--timeline .exp-main::before {
  content: "";
  position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #4f46e5; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #4f46e5;
}

@media print {
  .cv-x, .bul-move, .cv-add, .cv-photo-edit, .cv-photo-resize, .cv-photo-shape, .cv-photo-zoom, .cv-sec-tools, .cv-add-section, .cv-logo-x, .cv-logo-hint, .cv-logo-align, .cv-logo-resize { display: none !important; }
  /* An empty logo frame (editor "add logo" affordance) must not print. */
  .cv-logo:not(.has-logo) { display: none !important; }
  .paper [contenteditable]:hover { box-shadow: none; }
  [contenteditable]:empty::before { content: ""; }
  /* The page has NO left/right @page margin (see app.css) — instead the 50px
     side inset lives here as .cv padding. That lets the header bleed into this
     padding (a parent's padding, which Chromium paints reliably) rather than
     into the @page margin box (which headless Chromium — incl. Cloudflare's
     build — clips, leaving a white frame around the band). */
  .cv { padding-bottom: 0; padding-left: 50px; padding-right: 50px; }
  /* The coloured header band (bandeau) pulls -50px into .cv's side padding so
     it reaches both page edges; the first page's top margin is 0 (see app.css
     @page :first) so the band also reaches the top edge. The colour fills the
     full width above the line, while the body below keeps the 50px inset. The
     +76px padding (50 to clear the bleed + 26 base) keeps the name aligned with
     the section labels below. */
  .cv-head { margin: 0 -50px; padding-left: 76px; padding-right: 76px; }
  /* The "Download PDF" button prints the editor page itself, so the empty
     photo frame (kept as an "add photo" affordance) must be hidden here or
     it shows up as a blank box in the exported PDF. */
  .cv-photo:not(.has-img) { display: none !important; }
  /* Everything flows continuously: no section or entry is forced onto a new
     page, so each one starts immediately after the previous, with no gaps. */
}