/* Resume builder (/free-resume-builder) — subcue.ai's paper engine and print
 * path (web/public/resume-builder.css), plus this site's editor chrome.
 *
 * Two families of classes:
 *   .rb-*   the paper: what you see is literally what prints. All vertical
 *           rhythm is em-relative to one base size (--rb-base, in pt), so the
 *           size and gap knobs rescale the document coherently; the page is
 *           real paper units (mm / in) and the preview only scales it with
 *           transform — never by changing these numbers, or the page-break
 *           lines would lie. The paper is always light.
 *   .rbx-*  the editor around it, in the site's teal (styles.css tokens).
 *
 * The CSP is style-src 'self': this file is where every colour lives —
 * including each swatch and theme chip — because the page carries no style
 * attributes. The script only sets sizes and CSS variables via the CSSOM.
 */

/* ── Auto-hiding scrollbars ──────────────────────────────────────────────
 * Transparent at rest; resume-builder.js adds .rb-scrolling while a column
 * scrolls. The 8px track is always reserved, so nothing reflows. */
.rb-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rb-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.rb-scroll::-webkit-scrollbar-track { background: transparent; }
.rb-scroll::-webkit-scrollbar-thumb { background: transparent; border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
.rb-scroll.rb-scrolling { scrollbar-color: rgba(16, 42, 36, 0.28) transparent; }
.rb-scroll.rb-scrolling::-webkit-scrollbar-thumb { background: rgba(16, 42, 36, 0.28); background-clip: padding-box; }

.rb-paper {
  --rb-base: 10.5pt;
  --rb-leading: 1.4;
  --rb-margin: 16mm;
  --rb-section-gap: 1.2em;
  --rb-entry-gap: 0.9em;
  --rb-accent: #0e7c66;
  --rb-ink: #111827;
  --rb-muted: #374151;
  --rb-faint: #6b7280;
  /* Lead with a NAMED Latin sans (not the generic ui-sans-serif/system-ui/
     -apple-system keywords): Chrome's PRINT path, when the family starts with a
     system/generic keyword, resolves to that font's own fallback and never
     reaches the named CJK fonts later in the list — so CJK silently drops on
     export under the sans look. .rb-font-serif works precisely because it leads
     with Georgia (named). So: named Latin first, then the named CJK sans chain,
     mirroring the serif stack. (Cost: the on-screen Latin is Helvetica Neue /
     Segoe UI rather than the OS UI font — a small price for CJK that prints.)
     CJK chain ORDER matters too: 'PingFang SC'/'PingFang TC' print BLANK in
     Chrome's PDF path (verified with `chrome --headless=new --print-to-pdf`:
     PingFang → empty glyphs, while Hiragino Sans GB / Heiti SC / Noto Sans CJK
     SC render) and Chrome won't fall through past a "present but blank" face —
     so the CJK sans chain must LEAD with print-proven faces and never list
     PingFang. We also drop PingFang entirely (not just demote) so the on-screen
     preview and the exported PDF use the SAME face (WYSIWYG): Hiragino Sans GB
     ships on every macOS since 10.6, so nothing is lost on screen. */
  --rb-font: 'Helvetica Neue', 'Segoe UI', Roboto, Arial, 'Hiragino Sans GB',
    'Heiti SC', 'Hiragino Sans', 'Microsoft YaHei', 'Microsoft JhengHei',
    'Apple SD Gothic Neo', 'Noto Sans CJK SC', 'Noto Sans SC', 'Noto Sans',
    sans-serif;

  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  padding: var(--rb-margin);
  background: var(--rb-bg, #ffffff);
  color: var(--rb-ink);
  font-family: var(--rb-font);
  font-size: var(--rb-base);
  line-height: var(--rb-leading);
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  overflow-wrap: break-word;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rb-paper * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.rb-paper.rb-letter {
  width: 8.5in;
  min-height: 11in;
}
/* CJK serif: Latin faces first (per-glyph), then keep each chain to ONE script
   variant so per-glyph fallback can't mix 宋体 with Japanese 明朝 / Korean 명조 /
   Traditional 明體 on the characters the primary face happens to lack — that
   cross-variant mixing is exactly what makes "some glyphs serif, some not."
   Lead each chain with the full-coverage Noto / Source Han face (uniform when
   installed), then the platform-native serif (Songti SC on macOS, SimSun on
   Windows), then the generic. :lang() (driven by the DashboardLayout
   <html lang>) swaps in the matching regional variant; the base stays
   Simplified-only so a zh-Hans résumé never borrows a JP/KR/TC glyph. */
.rb-paper.rb-font-serif {
  --rb-font: Georgia, 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC',
    'Songti SC', STSong, SimSun, 'rb-cjk-serif', 'Noto Serif', serif;
}
.rb-paper.rb-font-serif:lang(zh-TW) {
  --rb-font: Georgia, 'Times New Roman', 'Noto Serif TC', 'Source Han Serif TC',
    'Songti TC', 'LiSong Pro', PMingLiU, MingLiU, 'rb-cjk-serif-tc',
    'Noto Serif', serif;
}
.rb-paper.rb-font-serif:lang(ja) {
  --rb-font: Georgia, 'Times New Roman', 'Noto Serif JP', 'Source Han Serif',
    'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'MS Mincho', 'Noto Serif',
    serif;
}
.rb-paper.rb-font-serif:lang(ko) {
  --rb-font: Georgia, 'Times New Roman', 'Noto Serif KR', 'Source Han Serif K',
    AppleMyungjo, Batang, Batangche, 'rb-cjk-serif-kr', 'Noto Serif', serif;
}
/* grotesk/geometric are Latin-only faces; append the same named CJK sans so
   CJK survives Chrome's print export (see the base --rb-font note). */
.rb-paper.rb-font-grotesk {
  --rb-font: 'Helvetica Neue', Helvetica, 'Arial Nova', Arial,
    'Hiragino Sans GB', 'Heiti SC', 'Hiragino Sans', 'Microsoft YaHei',
    'Microsoft JhengHei', 'Apple SD Gothic Neo', 'Noto Sans CJK SC',
    'Noto Sans SC', 'Noto Sans', sans-serif;
}
.rb-paper.rb-font-geometric {
  --rb-font: 'Avenir Next', Avenir, 'Century Gothic', 'URW Gothic',
    'Hiragino Sans GB', 'Heiti SC', 'Hiragino Sans', 'Microsoft YaHei',
    'Microsoft JhengHei', 'Apple SD Gothic Neo', 'Noto Sans CJK SC',
    'Noto Sans SC', 'Noto Sans', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.rb-name {
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.rb-headline {
  margin-top: 0.15em;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--rb-accent);
}
.rb-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.9em;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: var(--rb-muted);
}
.rb-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}
.rb-contact-item svg {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  opacity: 0.8;
}

/* ── Header photo ────────────────────────────────────────────────────── */
.rb-head {
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.rb-head-right {
  flex-direction: row-reverse;
}
.rb-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.rb-photo {
  flex: none;
  object-fit: cover;
  background: #e5e7eb;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ── Sections ────────────────────────────────────────────────────────── */
.rb-section {
  margin-top: var(--rb-section-gap);
}
.rb-sec-title {
  font-size: 1.12em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rb-accent);
  break-after: avoid;
  page-break-after: avoid;
}
/* Title line styles (rendercv's three variants). Default: partial line —
 * a hairline continuing from the title text to the right margin. */
.rb-title-partial .rb-sec-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.rb-title-partial .rb-sec-title::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--rb-accent);
  opacity: 0.45;
}
.rb-title-full .rb-sec-title {
  border-bottom: 1px solid var(--rb-accent);
  padding-bottom: 0.15em;
}

/* ── Entries ─────────────────────────────────────────────────────────── */
.rb-entry {
  margin-top: var(--rb-entry-gap);
  break-inside: avoid;
  page-break-inside: avoid;
}
.rb-summary {
  margin-top: 0.5em;
  white-space: pre-wrap;
}
.rb-entry-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1em 1.2em;
  align-items: baseline;
}
.rb-entry-title {
  font-weight: 600;
}
.rb-entry-sub {
  font-size: 0.95em;
  color: var(--rb-muted);
}
.rb-entry-date {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.9em;
  color: var(--rb-faint);
  white-space: nowrap;
  text-align: right;
}
.rb-bullets {
  margin-top: 0.25em;
  margin-left: 1.1em;
  list-style: disc outside;
}
.rb-bullets li {
  margin-top: 0.15em;
  padding-left: 0.15em;
}

/* ── Duo template (main column + tinted 32% sidebar) ─────────────────── */
/* Fixed assignment: skills/languages/certifications render in the side
 * column, everything else in main; order inside each column still follows
 * sectionOrder. The tint needs print-color-adjust to survive printing. */
.rb-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32%;
  gap: 0 6mm;
  align-items: start;
}
.rb-col-side {
  background: #f4f4f6;
  padding: 0.7em 0.8em;
}
.rb-col-side .rb-section:first-child {
  margin-top: 0.2em;
}
/* Narrow column: keywords wrap under the group label instead of inline. */
.rb-col-side .rb-row-label {
  display: block;
}

/* Compact rows (skills / languages / certifications). */
.rb-row {
  margin-top: 0.35em;
  break-inside: avoid;
  page-break-inside: avoid;
}
.rb-row-label {
  font-weight: 600;
}
.rb-inline {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.35em;
}
.rb-inline > span + span::before {
  content: '·';
  margin: 0 0.45em;
  color: #9ca3af;
}

/* ── Page-break overlay (screen only) ────────────────────────────────── */
/* Dashed lines mark where the printed pages end. Honest by construction:
 * the line positions use the same margin + page-height numbers the @page
 * print rule uses (resume-builder.js keeps both in sync), so the preview
 * can't drift from the PDF. The overlay lives inside .rb-paper and is
 * positioned in unscaled paper pixels — the preview's transform: scale()
 * carries it along. */
.rb-break {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(14, 124, 102, 0.6);
  pointer-events: none;
}
.rb-break > span {
  position: absolute;
  right: 6px;
  top: -16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #0a5d4d;
  background: #e6f2ef;
  border-radius: 4px;
  padding: 3px 6px;
}
.rb-paper {
  position: relative;
}


/* ── Screen-only chrome around the paper ─────────────────────────────── */
@media screen {
  #rb-paper-zoom { transform-origin: top left; }
  /* The drop shadow sits on a plate BEHIND the sheet, which fitZoom sizes to
     the visible sheet (paper width × the scroll viewport) — so it hugs the
     sheet's edges and never the scrollbar gutter. */
  #rb-paper-shadow {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    box-shadow: 0 18px 48px -14px rgba(8, 48, 40, 0.38), 0 3px 10px rgba(8, 48, 40, 0.12);
  }
}

/* ── Print ───────────────────────────────────────────────────────────── */
/* resume-builder.js clones #rb-paper into #rb-print-host (a child of <body>)
 * on beforeprint, and sets the @page rule (size, and margin 0 so a tinted
 * paper reaches the page edge; the sheet's own padding makes the margin).
 * Safari and iOS force their own print margins, so there (.rb-print-webkit)
 * the margin goes to @page and the sheet drops its padding. */
#rb-print-host { display: none; }
@media print {
  html,
  body {
    background: var(--rb-print-bg, #ffffff) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body > *:not(#rb-print-host) { display: none !important; }
  #rb-print-host { display: block; width: 100%; }
  #rb-print-host .rb-paper {
    width: 100%;
    min-height: 100vh;
    padding: var(--rb-margin);
    box-shadow: none;
    transform: none !important;
    transform-origin: top left;
  }
  #rb-print-host.rb-print-webkit .rb-paper { padding: 0; min-height: 0; }
  #rb-print-host .rb-break { display: none; }
}

/* =======================================================================
   The editor (.rbx-*)
   ======================================================================= */

.rbx [hidden], .rb-opt-backdrop [hidden] { display: none !important; }

.rbx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.rbx-facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.rbx-facts .mock-ico-sm { color: var(--accent); }

/* Two states. 'start' is a page like the others: the start panel sits in
   the reading column between the intro and the guide. 'edit' is an app: the
   editor fills the viewport under the site's header, edge to edge, and the
   page itself stops scrolling (html.rbx-app-open, set by resume-builder.js)
   — only the editor's own columns scroll, each with its overscroll
   contained, so the end of a column never scrolls the page behind it (a
   scrolling page around scrolling columns fights the reader: founder,
   2026-10-01). The intro, guide and footer are set aside while editing. */
.rbx { position: relative; margin: 30px 0 0; }
.rbx[data-state='loading'] { min-height: 480px; }
.rbx[data-state='loading'] .rbx-toolbar,
.rbx[data-state='loading'] .rbx-start,
.rbx[data-state='loading'] .rbx-main { visibility: hidden; }
.rbx[data-state='start'] .rbx-toolbar,
.rbx[data-state='start'] .rbx-main { display: none; }
.rbx[data-state='edit'] .rbx-start { display: none; }
@media (scripting: none) {
  .rbx[data-state] { min-height: 0; }
  .rbx .rbx-toolbar, .rbx .rbx-start, .rbx .rbx-main { display: none; }
}
@media screen {
  html.rbx-app-open,
  html.rbx-app-open body { overflow: hidden; }
}
html.rbx-app-open .site-main > :not(.rbx),
html.rbx-app-open .site-footer { display: none; }
.rbx[data-state='edit'] {
  position: fixed; top: var(--rbx-top, 64px); right: 0; bottom: 0; left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px 14px 12px;
  background: linear-gradient(180deg, #e9f2ef, #eef4f2);
}
.rbx-page-status:empty { display: none; }
.rbx-page-status { margin: 12px 4px 0; }
/* While editing, a message is a toast over the editor, not a line of text. */
.rbx[data-state='edit'] .rbx-page-status {
  position: absolute; left: 50%; bottom: 20px; z-index: 5; max-width: min(560px, 90%); margin: 0;
  padding: 9px 14px; border-radius: 10px; background: #10201b; color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.5); transform: translateX(-50%);
}
.rbx[data-state='edit'] .rbx-page-status.mock-status-warn { background: #7a3b12; color: #fff; }
.rbx[data-state='edit'] .mock-turnstile { position: absolute; right: 16px; bottom: 16px; z-index: 6; margin: 0; }

/* icons */
.rbx-ico { width: 15px; height: 15px; flex: none; }
.rbx-ico-lg { width: 22px; height: 22px; flex: none; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.rbx-toolbar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px -24px rgba(8, 48, 40, 0.4);
}
.rbx-btn-icon { justify-content: center; width: 36px; padding: 0; }
.rbx-doc { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 320px; }
.rbx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rbx-select {
  min-width: 0; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; font: inherit; font-size: 13.5px; color: var(--ink);
}
.rbx-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.12); }
.rbx-doc-select { max-width: 190px; }
.rbx-title {
  min-width: 0; width: 240px; max-width: 100%; flex: 0 1 auto; padding: 6px 8px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
}
.rbx-title:hover { border-color: var(--line); }
.rbx-title:focus { outline: none; border-color: var(--accent); background: #fff; }
.rbx-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.rbx-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbx-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #1f9d5b; }
.rbx-status[data-state='saving'] i { background: var(--accent); }
.rbx-status[data-state='unsaved'] i { background: #d8a72a; }
.rbx-status[data-state='memory'] i { background: #c2503f; }
.rbx-status[data-state='memory'] { color: #8a3b2f; font-weight: 600; }
.rbx-status[data-state='memory'] > span { white-space: normal; }

.rbx-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.rbx-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.rbx-btn-ai { background: var(--accent-wash); border-color: #b9dcd3; color: var(--accent-dark); }
.rbx-btn-ai:hover { background: #d6ece6; }
.rbx-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
.rbx-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-1px); }
@media (min-width: 1280px) { .rbx-narrow-only { display: none !important; } }
/* A phone gets two toolbar rows — back, name and the save dot; then the
   actions, icon-only except AI and PDF — so the editor keeps the height. */
.rbx-btn-short { display: none; }
@media (max-width: 640px) {
  .rbx-toolbar { gap: 8px; padding: 6px; }
  .rbx-doc { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
  .rbx-doc-select { display: none; }
  .rbx-title { flex: 1 1 0; width: auto; }
  .rbx-status > span { display: none; }
  .rbx-status[data-state='memory'] { flex: 1 1 100%; }
  .rbx-status[data-state='memory'] > span { display: inline; }
  .rbx-actions { flex: 1 1 100%; gap: 6px; }
  .rbx-actions .rbx-btn { justify-content: center; padding: 0 10px; }
  .rbx-actions .rbx-btn-primary { flex: 1 1 auto; }
  .rbx-btn-long { display: none; }
  .rbx-btn-short { display: inline; }
  .rbx[data-state='edit'] { padding: 8px 10px 10px; gap: 8px; }
}

.rbx-menu { position: relative; }
.rbx-menu > summary { list-style: none; }
.rbx-menu > summary::-webkit-details-marker { display: none; }
.rbx-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 250px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(8, 48, 40, 0.4);
}
.rbx-menu-list button {
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.rbx-menu-list button:hover { background: var(--accent-wash); }
.rbx-menu-list .rbx-menu-danger { color: #b42318; }
.rbx-menu-list .rbx-menu-danger:hover { background: #fdecea; }

/* ── Start panel ─────────────────────────────────────────────────────── */
.rbx-start {
  padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, var(--accent-wash), var(--surface) 180px);
}
.rbx-start-title { margin: 0; font-size: 22px; }
.rbx-start-sub { margin: 4px 0 0; color: var(--muted); }
.rbx-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .rbx-start-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rbx-start { scroll-margin-top: 84px; }
@media (max-width: 640px) { .rbx-start { padding: 18px 14px 16px; } }
.rbx-start[data-has-docs] .rbx-if-new,
.rbx-start:not([data-has-docs]) .rbx-if-docs { display: none; }
.rbx-recent { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rbx-recent-title { margin: 0 0 10px; font-size: 15px; font-weight: 750; color: var(--ink); }
.rbx-recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rbx-recent-btn {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: #fff; font: inherit; color: var(--ink); cursor: pointer;
}
.rbx-recent-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.rbx-recent-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rbx-recent-when { flex: none; font-size: 12px; color: var(--muted); }
.rbx-start-note { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.rbx-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.rbx-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.rbx-tile-name { font-weight: 700; font-size: 14.5px; }
.rbx-tile-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.rbx-tile-art {
  display: block; height: 92px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f7faf9);
}
.rbx-tile-art-import { display: grid; place-items: center; color: var(--accent); background: var(--accent-wash); border-style: dashed; }
.rbx-tile-blank .rbx-art-name,
.rbx-tile-blank .rbx-art-accent,
.rbx-tile-blank .rbx-art-line { background: #e7eeeb; }
.rbx-art-name { display: block; width: 52%; height: 6px; border-radius: 2px; background: #1f2937; }
.rbx-art-accent { display: block; width: 70%; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--accent); }
.rbx-art-line { display: block; width: 100%; height: 3px; margin-top: 5px; border-radius: 2px; background: #d6dfdc; }
.rbx-art-short { width: 78%; }
.rbx-tile-pm .rbx-art-accent { background: #334155; }
.rbx-tile-newgrad .rbx-art-accent { background: #1d4ed8; }
.rbx-tile-designer .rbx-art-accent { background: #9d174d; }

/* ── Layout (inside the full-screen editor) ──────────────────────────── */
.rbx-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rbx-tabs {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 10px; padding: 4px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.rbx-tab {
  padding: 7px 12px; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 650; color: var(--muted); cursor: pointer;
}
.rbx-tab.is-active { background: var(--accent-wash); color: var(--accent-dark); }
.rbx-grid { display: block; flex: 1; min-height: 0; }
/* Each column scrolls on its own and never hands a scroll on to the page. */
.rbx-forms, .rbx-preview-scroll, .rbx-design-body { overscroll-behavior: contain; }
.rbx-preview { height: 100%; min-height: 0; }
.rbx-preview-inner { position: relative; height: 100%; }
.rbx-preview-scroll { position: relative; max-height: 100%; overflow: auto; }
@media (max-width: 1023.98px) {
  .rbx-grid[data-tab='preview'] .rbx-forms { display: none; }
  .rbx-grid:not([data-tab='preview']) .rbx-preview { display: none; }
}
@media (min-width: 1024px) {
  .rbx-tabs { display: none; }
  .rbx-grid { display: grid; grid-template-columns: minmax(380px, 30rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 1280px) {
  /* Keep in sync with COL1_MIN and the design width in resume-builder.js. */
  .rbx-grid { grid-template-columns: minmax(360px, 1fr) auto 264px; }
}

/* ── Content column ──────────────────────────────────────────────────── */
.rbx-forms { display: grid; align-content: start; gap: 12px; min-width: 0; height: 100%; overflow-y: auto; padding-right: 4px; }
.rbx-sections { display: grid; gap: 12px; }
.rbx-card {
  display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 42, 36, 0.04);
}
.rbx-card.is-muted { opacity: 0.55; }
.rbx-card-title { margin: 0; font-size: 15px; font-weight: 750; }
.rbx-sub-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.rbx-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.rbx-error { margin: 0; font-size: 12px; color: #b42318; }
.rbx-socials { padding-top: 12px; border-top: 1px solid var(--line); }
.rbx-list { display: grid; gap: 8px; }
.rbx-list:empty { display: none; }

.rbx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rbx-fields-tight { gap: 8px; }
.rbx-fields-skill { grid-template-columns: minmax(0, 38%) 1fr; }
.rbx-span2 { grid-column: span 2; }
@media (max-width: 420px) {
  .rbx-fields { grid-template-columns: 1fr; }
  .rbx-span2 { grid-column: auto; }
}
.rbx-input {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; font: inherit; font-size: 14px; line-height: 1.45; color: var(--ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.rbx-input::placeholder { color: #93a5a0; }
.rbx-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.12); }
textarea.rbx-input { resize: vertical; }
.rbx-summary { min-height: 96px; }

.rbx-sec-head { display: flex; align-items: center; gap: 2px; margin: 0 -4px; }
.rbx-sec-title {
  flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: inherit; font-size: 15px; font-weight: 750; color: var(--ink);
}
.rbx-sec-title:hover { border-color: var(--line); }
.rbx-sec-title:focus { outline: none; border-color: var(--accent); }
.rbx-items { display: grid; gap: 10px; }
.rbx-items:empty { display: none; }
.rbx-item { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; }
.rbx-item.is-muted { opacity: 0.55; }
.rbx-item-actions { display: flex; justify-content: flex-end; gap: 2px; margin: -2px -4px -4px 0; }
.rbx-mini {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.rbx-mini:hover { background: var(--accent-wash); color: var(--ink); }
.rbx-mini-danger:hover { background: #fdecea; color: #b42318; }
.rbx-mini span { display: inline-grid; }
.rbx-add {
  width: 100%; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer;
}
.rbx-add:hover { border-color: var(--accent); color: var(--accent-dark); background: #f6fbfa; }
.rbx-add-sec {
  width: 100%; padding: 12px; border: 1px dashed #b3c7c1; border-radius: 14px; background: rgba(255, 255, 255, 0.6);
  font: inherit; font-size: 14px; font-weight: 650; color: var(--muted); cursor: pointer;
}
.rbx-add-sec:hover { border-color: var(--accent); color: var(--accent-dark); background: #fff; }
.rbx-cf-row, .rbx-social-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 8px; align-items: center; }
.rbx-social-row { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; }

/* photo */
.rbx-photo-row { display: flex; align-items: flex-start; gap: 12px; }
.rbx-photo-thumb {
  position: relative; flex: none; width: 72px; height: 96px; overflow: hidden; border: 1px dashed var(--line-strong);
  border-radius: 8px; background: #f4f8f7; cursor: pointer;
}
.rbx-photo-thumb:hover, .rbx-photo-thumb:focus-visible { border-color: var(--accent); }
.rbx-photo-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rbx-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbx-photo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.rbx-photo-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10, 30, 25, 0.45); }
.rbx-photo-thumb[data-has-photo]:hover .rbx-photo-overlay,
.rbx-photo-thumb[data-has-photo]:focus-within .rbx-photo-overlay { display: flex; }
.rbx-photo-overlay button {
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: #b42318; cursor: pointer;
}
.rbx-photo-controls { display: grid; gap: 8px; min-width: 0; flex: 1; }
.rbx-photo-radius { display: flex; align-items: center; gap: 8px; }
.rbx-photo-radius input { max-width: 150px; }

/* ── Segmented buttons, sliders ──────────────────────────────────────── */
.rbx-seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rbx-seg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rbx-seg {
  flex: 1; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.rbx-seg:hover { border-color: var(--accent); }
.rbx-seg.is-active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-dark); }
.rbx-photo-controls .rbx-seg { flex: 0 1 auto; }
.rbx-dlabel { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rbx-photo-radius .rbx-dlabel { margin: 0; }
.rbx-slider-head { display: flex; align-items: baseline; justify-content: space-between; }
.rbx-slider-val { font-size: 12px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Flat range track with a teal fill; --rb-range is the filled fraction, set
   by resume-builder.js (Chrome has no fill pseudo-element). */
.rbx input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0 var(--rb-range, 0%), #d5e2de var(--rb-range, 0%) 100%);
}
.rbx input[type='range']::-webkit-slider-runnable-track { -webkit-appearance: none; height: 6px; border: 0; border-radius: 99px; background: transparent; }
.rbx input[type='range']::-moz-range-track { height: 6px; border: 0; border-radius: 99px; background: #d5e2de; }
.rbx input[type='range']::-moz-range-progress { height: 6px; border: 0; border-radius: 99px; background: var(--accent); }
.rbx input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 2px solid #fff;
  border-radius: 99px; background: var(--accent); box-shadow: 0 1px 3px rgba(8, 48, 40, 0.4);
}
.rbx input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid #fff; border-radius: 99px; background: var(--accent); box-shadow: 0 1px 3px rgba(8, 48, 40, 0.4);
}
.rbx input[type='range']:focus-visible { outline: none; }
.rbx input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(14, 124, 102, 0.25); }

/* ── Design panel ────────────────────────────────────────────────────── */
/* Closed, the drawer is hidden as well as moved off-screen: its shadow
   otherwise showed as a haze down the right edge, and its controls stayed in
   the tab order. */
.rbx-design {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column;
  width: 320px; max-width: 90vw; background: #fff; border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(8, 48, 40, 0.45); transform: translateX(100%); visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
.rbx-design.is-open { transform: none; visibility: visible; transition: transform 200ms ease; }
@media (min-width: 1280px) {
  .rbx-design {
    position: relative; top: auto; right: auto; bottom: auto; z-index: auto; width: auto; max-width: none;
    height: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: none;
    transform: none; visibility: visible; transition: none;
  }
}
.rbx-design-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rbx-design-title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.rbx-design-body { display: grid; align-content: start; gap: 16px; flex: 1; min-height: 0; padding: 12px; overflow-y: auto; }
.rbx-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(16, 33, 29, 0.35); }
@media (min-width: 1280px) { .rbx-backdrop { display: none; } }

.rbx-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rbx-theme {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.rbx-theme:hover { border-color: var(--accent); }
.rbx-theme.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rbx-theme-default { grid-column: span 2; }
.rbx-theme-chip { flex: none; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.rbx-theme-text { display: grid; min-width: 0; }
.rbx-theme-name { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rbx-theme-font { font-size: 10.5px; color: var(--muted); }
.rbx-theme-default .rbx-theme-chip { background: #0e7c66; }
.rbx-theme-claude .rbx-theme-chip { background: #c15f3c; }
.rbx-theme-apple .rbx-theme-chip { background: #0071e3; }
.rbx-theme-microsoft .rbx-theme-chip { background: #0067b8; }
.rbx-theme-google .rbx-theme-chip { background: #1a73e8; }
.rbx-theme-spotify .rbx-theme-chip { background: #1db954; }
.rbx-theme-airbnb .rbx-theme-chip { background: #ff5a5f; }
.rbx-theme-editorial .rbx-theme-chip { background: #e3120b; }
.rbx-theme-notion .rbx-theme-chip { background: #16161a; }
/* Each font label in its own face — mirror the .rb-font-* stacks above. */
.rbx-face-serif { font-family: Georgia, 'Times New Roman', serif; }
.rbx-face-grotesk { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.rbx-face-geometric { font-family: 'Avenir Next', Avenir, 'Century Gothic', sans-serif; }

.rbx-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rbx-tpl {
  display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.rbx-tpl:hover { border-color: var(--accent); }
.rbx-tpl.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rbx-tpl-art { display: block; padding: 7px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.rbx-tpl-art .rbx-art-line { height: 2px; margin-top: 4px; }
.rbx-tpl-name { font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--muted); }
.rbx-art-cols { display: flex; gap: 4px; margin-top: 5px; }
.rbx-art-main { flex: 1; }
.rbx-art-side { width: 36%; padding: 2px 3px; border-radius: 2px; background: #eef3f1; }
.rbx-art-cols .rbx-art-line:first-child { margin-top: 0; }

.rbx-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rbx-swatch {
  width: 24px; height: 24px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 50%; cursor: pointer;
  transition: transform 120ms ease;
}
.rbx-swatch:hover { transform: scale(1.1); }
.rbx-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.rbx-color { width: 28px; height: 28px; padding: 1px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; cursor: pointer; }
/* swatch colours (ACCENT_PRESETS / BG_PRESETS in pages/ResumeBuilder.tsx) */
.rbx-swatch[data-accent='#0e7c66'] { background: #0e7c66; }
.rbx-swatch[data-accent='#111827'] { background: #111827; }
.rbx-swatch[data-accent='#334155'] { background: #334155; }
.rbx-swatch[data-accent='#1d4ed8'] { background: #1d4ed8; }
.rbx-swatch[data-accent='#4f46e5'] { background: #4f46e5; }
.rbx-swatch[data-accent='#9d174d'] { background: #9d174d; }
.rbx-swatch[data-bg='#ffffff'] { background: #ffffff; }
.rbx-swatch[data-bg='#faf7f1'] { background: #faf7f1; }
.rbx-swatch[data-bg='#f5f5f7'] { background: #f5f5f7; }
.rbx-swatch[data-bg='#f7f4ec'] { background: #f7f4ec; }
.rbx-swatch[data-bg='#f4f6fb'] { background: #f4f6fb; }
.rbx-swatch[data-bg='#fbf6f5'] { background: #fbf6f5; }

/* ── Dialogs (built by resume-builder.js) ────────────────────────────── */
.rb-opt-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(16, 33, 29, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.rb-opt-modal {
  display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: 88vh; overflow: hidden;
  background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(8, 48, 40, 0.55);
  color: var(--ink);
}
.rb-opt-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.rb-opt-title { font-size: 17px; font-weight: 750; }
.rb-opt-intro { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.rb-opt-body { flex: 1 1 auto; padding: 16px 20px; overflow-y: auto; }
.rb-opt-body .rbx-start-grid { margin-top: 0; }
.rb-opt-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.rb-opt-jd {
  width: 100%; min-height: 96px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--ink); resize: vertical;
}
.rb-opt-jd:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.12); }
.rb-opt-hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.rb-opt-hint:empty { display: none; }
.rb-opt-hint.is-warn { color: #8a6417; font-weight: 650; }
.rb-opt-spin { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.rb-opt-spinner { width: 26px; height: 26px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: rb-opt-spin 0.6s linear infinite; }
@keyframes rb-opt-spin { to { transform: rotate(360deg); } }
.rb-opt-err { padding: 26px 12px; text-align: center; font-size: 14px; line-height: 1.55; color: #8a3b2f; }
.rb-opt-item { margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; transition: opacity 0.15s; }
.rb-opt-item[data-off='1'] { opacity: 0.45; }
.rb-opt-itemhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; cursor: pointer; }
.rb-opt-itemlabel { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rb-opt-check { flex: none; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.rb-opt-diff { display: grid; gap: 6px; }
.rb-opt-before, .rb-opt-after { padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.55; }
.rb-opt-before { background: #f4f6f5; color: #54665f; }
.rb-opt-after { background: var(--accent-wash); color: var(--ink); box-shadow: inset 0 0 0 1px #c3e1d9; }
.rb-opt-tag { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.rb-opt-bullets { margin: 0; padding-left: 18px; }
.rb-opt-bullets li { margin: 2px 0; }
.rb-opt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.rb-opt-calls { font-size: 12.5px; color: var(--muted); }
.rb-opt-selectall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.rb-opt-grow { flex: 1 1 auto; }
.rb-opt-btn { padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.rb-opt-btn-ghost { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.rb-opt-btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.rb-opt-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
.rb-opt-btn-primary:hover { background: var(--accent-dark); }

.rbx-import { display: grid; gap: 10px; }
.rbx-import .mock-or { margin: 0; }
.rbx-import-text { min-height: 150px; }
.rbx-drop { margin: 0; }

/* ── Content below the editor ────────────────────────────────────────── */
.rbx-steps { margin: 14px 0 0; padding-left: 22px; max-width: 46em; }
.rbx-steps li { margin: 10px 0; color: #33443e; }
.rbx-cta-note { margin-top: 14px; font-size: 14px; }