/* ==========================================================================
   Resume builder — editor chrome (.rb-*) and the resume page itself (.rp-*).

   The page (.rp) is deliberately isolated from the site's own design
   tokens: it is a document that gets exported to PDF and read by an ATS,
   not a themed UI surface, so its colors, spacing and type all come from
   CSS custom properties set inline per document (js/resume/render.js) —
   --rp-accent, --rp-font, --rp-fs, --rp-pad, --rp-sec, --rp-item, --rp-lh,
   and the derived --rp-accent-* / --rp-side-bg / --rp-on-accent-* tones —
   never from --primary or the rest of styles.css. It also always renders
   light, on and off the resume builder page, for the same reason the old
   single-layout resume did (frontend/js/pages/resume.js's previous
   revision): dark mode is a reading preference for this app's own UI, not
   for a document meant to look the same on every screen and on paper.
   ========================================================================== */

/* ---------- Editor shell -------------------------------------------------- */
.rb { min-height: calc(100vh - var(--nav-h)); }

.rb-loading {
  min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; color: var(--text-muted);
}
.rb-spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: rb-spin .8s linear infinite;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }
.rb-dot-spin {
  display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .7;
  animation: rb-spin .7s linear infinite;
}

/* ---------- Steps indicator (Create → Edit → Preview → Download) --------- */
.rb-steps {
  display: flex; flex-wrap: wrap; gap: .4rem 0; list-style: none; padding: 0;
  margin: 1.25rem 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--text-subtle);
}
.rb-steps li { display: flex; align-items: center; gap: .5rem; }
.rb-steps li + li::before { content: ''; width: 1.5rem; height: 1px; background: var(--border); margin: 0 .5rem; }
.rb-steps b {
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--bg-subtle); color: var(--text-subtle); font-size: .68rem;
}
.rb-steps li.is-current { color: var(--text); }
.rb-steps li.is-current b { background: var(--primary); color: var(--on-primary); }
.rb-steps li.is-done b { background: var(--primary-soft); color: var(--primary); }

/* ---------- Start screen --------------------------------------------------- */
.rb-start { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 4rem; text-align: center; }
.rb-start h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.rb-start-lead { color: var(--text-muted); font-size: var(--fs-lg); margin-top: .75rem; }
.rb-start-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.25rem; text-align: left;
}
@media (max-width: 640px) { .rb-start-grid { grid-template-columns: 1fr; } }
.rb-start-card {
  position: relative; display: flex; flex-direction: column; gap: .6rem; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 1.5rem; cursor: pointer; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
  font: inherit; color: inherit;
}
@media (hover: hover) {
  .rb-start-card:hover { border-color: var(--primary-soft-br); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  .rb-start-card:hover .rb-start-cta { background: var(--primary-hover); }
  .rb-start-card:hover .rb-start-cta-outline { background: var(--primary); color: var(--on-primary); }
}
.rb-start-card[aria-busy="true"] { opacity: .65; pointer-events: none; }
.rb-badge {
  position: absolute; top: -.6rem; right: 1rem; background: var(--accent); color: var(--ink-900);
  font-size: var(--fs-xs); font-weight: 800; padding: .2rem .6rem; border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}
.rb-start-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary); flex: none;
}
.rb-start-icon-alt { background: var(--bg-subtle); color: var(--text-muted); }
.rb-start-icon-lg { width: 3.6rem; height: 3.6rem; margin-inline: auto; background: var(--red-50); color: var(--red-500); }
.rb-start-card b { font-size: var(--fs-lg); }
.rb-start-text { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
/* A visible call-to-action at the foot of each start card — the card
   itself is the real clickable button (this is just its label), styled
   as its own pill so each option reads as an obvious, inviting action
   rather than "click anywhere on this text block and hope". */
.rb-start-cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .4rem;
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: var(--fs-sm);
  padding: .7rem 1rem; border-radius: var(--r-md); transition: background var(--t-fast) var(--ease);
}
.rb-start-cta-outline { background: var(--bg-subtle); color: var(--text); }
.rb-start-cta .rb-dot-spin { border-color: currentColor; border-top-color: transparent; }
.rb-start-notes { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; }
.rb-start-notes li { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--text-muted); }
.rb-start-notes svg { color: var(--green-500); flex: none; }


/* ---------- Editor toolbar --------------------------------------------- */
.rb-editor { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h)); min-height: 32rem; }
.rb-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  /* Same side margin as every other page's .container (max-width: 1200px,
     centered) — the bar itself stays full-bleed for its background/border,
     but its content insets exactly like the dashboard's does, instead of
     sitting flush against the browser edge. */
  padding: .6rem max(1.1rem, calc((100% - var(--container)) / 2));
  border-bottom: 1px solid var(--border); background: var(--surface); flex: none;
}
.rb-tb-left, .rb-tb-right { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.rb-doc-icon { color: var(--text-subtle); flex: none; }
.rb-title-input {
  border: 1px solid transparent; background: transparent; font-weight: 800; font-size: var(--fs-md);
  padding: .3rem .5rem; border-radius: var(--r-sm); min-width: 6rem; max-width: 16rem;
}
.rb-title-input:hover { background: var(--bg-subtle); }
.rb-title-input:focus { background: var(--bg-subtle); border-color: var(--border-strong); outline: none; }
.rb-save-status {
  display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-subtle);
  white-space: nowrap; padding-left: .5rem;
}
.rb-save-status[data-state="saved"] svg { color: var(--green-500); }
.rb-save-status[data-state="offline"] svg, .rb-save-status[data-state="error"] svg { color: var(--amber-500); }
.rb-status-text { display: none; }
@media (min-width: 720px) { .rb-status-text { display: inline; } }
.rb-icon-btn {
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .rb-icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); } }
.rb-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.rb-tb-sep { width: 1px; height: 1.4rem; background: var(--border); margin: 0 .25rem; }
.rb-tb-btn { display: inline-flex; align-items: center; gap: .4rem; }
.rb-tb-btn span { display: none; }
@media (min-width: 860px) { .rb-tb-btn span { display: inline; } }

/* ---------- Mobile tabs ------------------------------------------------- */
.rb-mobile-tabs { display: none; }
@media (max-width: 900px) {
  .rb-mobile-tabs {
    display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex: none;
    overflow-x: auto;
  }
  .rb-mobile-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .55rem .5rem; font-size: .66rem; font-weight: 700; color: var(--text-muted);
    background: transparent; border: 0; border-bottom: 2px solid transparent; white-space: nowrap;
  }
  .rb-mobile-tabs button[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
}

/* ---------- Workspace: rail + panel + canvas ---------------------------- */
/* grid-template-rows: 1fr is what actually matters here, not the columns —
   a grid's implicit row defaults to auto (sized to its tallest child's
   natural content height), not to the space the flex parent gives it. Without
   this, the panel's own content height won by default, stretching the whole
   workspace past 100vh and pushing the page itself into a second, unwanted
   scrollbar instead of scrolling inside the panel/canvas as intended. */
.rb-workspace {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 22rem 1fr; grid-template-rows: 1fr;
  /* Same centered content width as every other page's .container (capped at
     1200px, a minimum 1.1rem gutter below that) - width+margin-inline:auto
     rather than .container's own padding-inline, so the border below wraps
     tight around the actual panel/canvas instead of leaving a padded gap
     between the border and the content it's meant to outline. */
  width: min(100% - 2.2rem, var(--container));
  margin-inline: auto;
  /* The panel+canvas pair reads as one bordered section (same language as
     any other .card on the site) rather than running flush under the nav
     bar and out to the viewport's own edges - margin-block floats it off
     the top/bottom, the border+radius+overflow:hidden give it one shared
     outline with rounded corners instead of each side only having its own
     internal border-right. */
  margin-block: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}

.rb-panel {
  overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface);
  padding: 1.35rem 1.35rem 3rem;
}
.rb-panel-head { margin-bottom: 1.5rem; }
/* The one way out of the editor since the old top toolbar (which used to
   carry a Close button) was removed entirely - lives beside the panel's
   own "Your resume" heading instead of floating over the canvas like
   Download PDF, since this is about leaving the panel/section, not the
   page preview. */
.rb-panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.rb-panel-head h2 { font-size: var(--fs-lg); }
.rb-panel-head p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: .3rem; }
.rb-panel-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; }

/* ---------- Resume strength meter ---------------------------------------
   Same card language as the dashboard's own cards (Resume score, Recent
   applications) — --r-lg and a real border rather than --r-md on a flat
   tinted fill, so this reads as one more card in the same family instead
   of a visually separate, denser widget bolted onto the builder. */
.rb-strength {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.rb-strength-top { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 700; }
.rb-meter { height: .4rem; border-radius: var(--r-full); background: var(--border); margin-top: .5rem; overflow: hidden; }
.rb-meter i { display: block; height: 100%; border-radius: inherit; transition: width var(--t-slow) var(--ease); }
.rb-strength p { display: flex; align-items: flex-start; gap: .4rem; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .55rem; line-height: 1.4; }
.rb-strength p svg { flex: none; margin-top: .1rem; color: var(--primary); }

/* ---------- Section / entry cards -----------------------------------------
   --r-lg + the roomier padding below matches the dashboard's own .card /
   .card-pad-lg language, and .rb-input etc. switch to a plain white fill
   (the site's normal .input look) instead of a grey --bg-subtle box, so a
   card in the builder isn't visibly a different, denser component from a
   card anywhere else on the site. */
.rb-sec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }

.rb-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden;
}
.rb-card.is-hidden { opacity: .6; }
.rb-card-personal { margin-bottom: 1.5rem; }
@keyframes rb-flash { from { box-shadow: 0 0 0 3px var(--primary-soft); } to { box-shadow: 0 0 0 0 transparent; } }
.rb-card.is-flash { animation: rb-flash 1s var(--ease); }

.rb-card-head { display: flex; align-items: center; gap: .15rem; padding: .5rem .6rem; }
.rb-card-title {
  flex: 1; display: flex; align-items: center; gap: .55rem; text-align: left; min-width: 0;
  background: transparent; border: 0; padding: .45rem .4rem; border-radius: var(--r-sm); cursor: pointer;
  font-weight: 700; font-size: var(--fs-sm);
}
@media (hover: hover) { .rb-card-title:hover { background: var(--bg-subtle); } }
.rb-card-title svg:first-child { color: var(--text-subtle); flex: none; }
.rb-card-title span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-chev { transition: transform var(--t-fast) var(--ease); flex: none; color: var(--text-subtle); }
.rb-card.is-open .rb-chev { transform: rotate(180deg); }
.rb-pill {
  font-style: normal; font-size: .62rem; font-weight: 800; color: var(--text-subtle);
  background: var(--bg-subtle); padding: .1rem .4rem; border-radius: var(--r-full); flex: none;
}
.rb-card-body { padding: .5rem 1.1rem 1.25rem; }

.rb-fields { display: flex; flex-wrap: wrap; gap: 1rem .85rem; }
.rb-field { flex: 1 1 100%; min-width: 0; }
.rb-field.is-half { flex-basis: calc(50% - .35rem); }
.rb-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin-bottom: .3rem; }
.rb-input, .rb-textarea, .rb-select {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .65rem .85rem; font: inherit; font-size: var(--fs-sm); color: var(--text);
}
.rb-input:focus, .rb-textarea:focus, .rb-select:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.rb-input:disabled { opacity: .55; }
.rb-textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.rb-hint { display: block; font-size: .7rem; color: var(--text-subtle); margin-top: .35rem; line-height: 1.4; }
.rb-field-foot { display: flex; justify-content: space-between; gap: .5rem; }
.rb-check { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.rb-check input { width: 1rem; height: 1rem; accent-color: var(--primary); }

.rb-sec-foot { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--border); }
.rb-link-btn {
  background: transparent; border: 0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; padding: .2rem 0;
}
@media (hover: hover) { .rb-link-btn:hover:not(:disabled) { color: var(--primary); } }
.rb-link-btn:disabled { opacity: .35; cursor: not-allowed; }
.rb-link-btn.is-danger { color: var(--red-500); }
@media (hover: hover) { .rb-link-btn.is-danger:hover { color: var(--red-600); } }
/* ---------- Repeated entries within a section ---------------------------- */
.rb-items { display: flex; flex-direction: column; gap: .55rem; margin-top: .9rem; }
.rb-item { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-subtle); }
.rb-item-head { display: flex; align-items: center; gap: .15rem; padding: .2rem; }
.rb-item-title {
  flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding: .5rem .55rem;
  cursor: pointer; display: flex; flex-direction: column; gap: .1rem;
}
.rb-item-title b { font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-item-title b.is-empty { color: var(--text-subtle); font-weight: 500; font-style: italic; }
.rb-item-title span { font-size: .72rem; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-item-body { padding: 0 .7rem .8rem; }
.rb-add-item {
  display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-sm); background: transparent;
  padding: .6rem; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); cursor: pointer;
  margin-top: .6rem;
}
@media (hover: hover) { .rb-add-item:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } }

.rb-rows { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.rb-row-edit { display: grid; grid-template-columns: 1fr 8rem auto; gap: .5rem; align-items: center; }
.rb-link-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: .5rem; align-items: center; }
@media (max-width: 380px) { .rb-row-edit, .rb-link-row { grid-template-columns: 1fr auto; } .rb-row-edit select, .rb-link-row select { grid-column: 1 / -1; } }

/* ---------- Chips (skills / interests) ------------------------------------ */
.rb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.rb-chip {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--primary-soft); color: var(--primary-hover);
  font-size: var(--fs-xs); font-weight: 700; padding: .3rem .35rem .3rem .65rem; border-radius: var(--r-full);
}
.rb-chip button { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: transparent; border: 0; color: inherit; }
@media (hover: hover) { .rb-chip button:hover { background: rgba(0,0,0,.12); } }
.rb-chip-empty { color: var(--text-subtle); font-size: var(--fs-xs); }

/* ---------- Add section --------------------------------------------------- */
.rb-add-sec { position: relative; margin-top: 1.25rem; }
.rb-add-sec-btn {
  display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%;
  border: 1.5px dashed var(--primary-soft-br); border-radius: var(--r-md); background: var(--primary-soft);
  color: var(--primary); padding: .8rem; font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
@media (hover: hover) { .rb-add-sec-btn:hover { background: var(--primary-soft-br); } }
.rb-add-menu {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + .4rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem;
  max-height: 20rem; overflow-y: auto;
}
.rb-add-opt {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .55rem; border-radius: var(--r-sm);
  background: transparent; border: 0; text-align: left; font-size: var(--fs-sm); cursor: pointer; position: relative;
}
.rb-add-opt svg { flex: none; color: var(--text-subtle); }
@media (hover: hover) { .rb-add-opt:hover:not(:disabled) { background: var(--bg-subtle); } }
.rb-add-opt:disabled { opacity: .4; cursor: not-allowed; }
.rb-add-opt small { position: absolute; right: .5rem; font-size: .6rem; color: var(--text-subtle); }

/* Used by the Links section's "where to show them" toggle. */
.rb-seg { display: flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: .5rem; }
.rb-seg button { flex: 1; padding: .55rem .5rem; background: var(--surface); border: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); cursor: pointer; border-left: 1px solid var(--border); }
.rb-seg button:first-child { border-left: 0; }
.rb-seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .rb-seg button:not([aria-pressed="true"]):hover { background: var(--bg-subtle); } }

/* ---------- Canvas / stage ------------------------------------------------ */
.rb-canvas-wrap { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Extra top padding (vs. 2.5rem on the other three sides) clears the
   floating Download PDF button below - without it the paper's own top
   edge sits directly under the button instead of leaving a gap. */
.rb-canvas { flex: 1; overflow: auto; background: var(--bg-sunken); padding: 5.5rem 1.5rem 2.5rem; }
/* Floats directly over the canvas, top-right - same "no bar of its own"
   pattern as .rb-pagecount/.rb-zoom below floating over its bottom
   corners, the one action that survived removing the old white toolbar
   entirely (see resume.js). */
.rb-canvas-download { position: absolute; top: 1rem; right: 1.5rem; z-index: 1; box-shadow: var(--shadow-md); }
.rb-stage { display: flex; justify-content: center; }
.rb-paper-wrap { position: relative; }
.rb-paper-wrap .rp, .rb-ov-pages .rp {
  /* Anchored at the wrap's own top-left, matching how resume.js sizes the
     wrap (PAGE_W*z by pages*PAGE_H*z — a top-left-anchored scale). The
     default center-based origin scales around the middle of the page's
     real, UNscaled 794px width, which sits well past the (already shrunk)
     wrap's right edge at any zoom below 100% — the rendered page then
     appears shifted right and cropped instead of sitting flush in its box. */
  transform-origin: top left; box-shadow: var(--shadow-lg); position: relative;
}
.rb-pagecount {
  position: absolute; left: 1rem; bottom: .9rem; font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); padding: .3rem .6rem; border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}
.rb-zoom {
  position: absolute; right: 1rem; bottom: .9rem; display: flex; align-items: center; gap: .15rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  box-shadow: var(--shadow-sm); padding: .2rem;
}
.rb-zoom-label { min-width: 3.4rem; text-align: center; font-size: var(--fs-xs); font-weight: 700; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: .3rem 0; }

/* Page gaps painted between A4 sheets, so one tall column reads as
   separate printed pages. Purely visual — pagination (paginate.js) already
   keeps content clear of this band. */
.rp-gap {
  position: absolute; left: -3px; right: -3px; height: 2rem; transform: translateY(-1.35rem);
  background: linear-gradient(var(--bg-sunken), var(--bg-sunken)); pointer-events: none;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.rp-gap::before, .rp-gap::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.rp-gap::before { top: .35rem; } .rp-gap::after { bottom: .35rem; }
.rp-gap span {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-subtle);
  font-size: .64rem; font-weight: 700; padding: .1rem .55rem; border-radius: var(--r-full);
}

/* Only in the live editor: whatever the cursor is over gets a soft
   highlight + pointer, since clicking it opens that section for editing. */
.rp-editor [data-edit] { cursor: pointer; border-radius: 4px; }
@media (hover: hover) {
  .rp-editor [data-edit]:hover { outline: 2px dashed color-mix(in srgb, var(--rp-accent) 55%, transparent); outline-offset: 2px; }
}

/* ---------- Responsive workspace ------------------------------------------ */
@media (max-width: 1180px) { .rb-workspace { grid-template-columns: 19.5rem 1fr; } }
@media (max-width: 900px) {
  .rb-editor { height: auto; min-height: calc(100vh - var(--nav-h) - 2.6rem); }
  .rb-workspace { grid-template-columns: 1fr; }
  .rb-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .rb-canvas-wrap { display: none; }
  .rb-tb-btn:not([data-act="download"]) span { display: none; }
  /* The mobile tab strip drives which panel shows. */
  .rb-editor[data-view="preview"] .rb-panel { display: none; }
  .rb-editor[data-view="preview"] .rb-canvas-wrap { display: flex; }
  .rb-editor[data-view="edit"] .rb-panel { display: block; }
}
@media (min-width: 901px) { .rb-mobile-tabs { display: none !important; } }

/* ---------- Full-screen preview / template-preview overlay --------------- *
 * Built by resume.js's openOverlay() — one dialog used both for "Preview"
 * (the student's own resume, exactly as the PDF will look) and for
 * template preview/compare from the template chooser (Prev/Next + Use). */
.rb-overlay {
  position: fixed; inset: 0; z-index: 300; background: var(--bg);
  display: flex; flex-direction: column;
}
.rb-ov-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface);
}
.rb-ov-title { min-width: 0; display: flex; flex-direction: column; }
.rb-ov-title b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-ov-title span { font-size: var(--fs-xs); color: var(--text-muted); }
.rb-ov-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
.rb-ov-scroll { flex: 1; overflow-y: auto; background: var(--bg-sunken); padding: 2rem 1rem 3rem; }
.rb-ov-pages { position: relative; margin: 0 auto; }
@media (max-width: 640px) {
  .rb-ov-title span { display: none; }
  .rb-ov-bar { padding: .6rem .75rem; }
}

/* ==========================================================================
   The resume page itself (.rp) — rendered by js/resume/render.js, shared by
   the live editor, the full-screen preview and (as plain HTML, no
   .rp-editor affordances) the PDF export.
   ========================================================================== */
.rp {
  width: 794px; background: #fff; color: #1F2937; position: relative;
  font-family: var(--rp-font); font-size: var(--rp-fs); line-height: var(--rp-lh);
  -webkit-font-smoothing: antialiased;
  /* A flex column so .rp-body (below) can be told to fill whatever height
     paginate.js has set as this document's real page height, rather than
     only ever being as tall as its own content. Without this, a sidebar
     template's colour only ever wrapped tightly around a short resume's
     actual content and stopped there, leaving the rest of the A4 sheet
     bare white beneath it instead of the sidebar running the full page. */
  display: flex; flex-direction: column;
}
.rp-break { width: 100%; }
.rp * { box-sizing: border-box; }
/* Fills the page's full height (see the flex column above) — for a
   sidebar layout this is what lets .rp-side's own background (set on the
   child, further down) reach the true bottom of the page rather than
   stopping wherever a short resume's content happens to end; for every
   other layout it is invisible, just empty space at the foot of the page. */
.rp-body { flex: 1 0 auto; }

/* Header */
.rp-head { display: flex; align-items: center; gap: 1.1rem; padding: var(--rp-pad) var(--rp-pad) 0; }
.rp.ha-center .rp-head { flex-direction: column; text-align: center; }
.rp-id { flex: 1; min-width: 0; }
.rp-name { font-size: 1.85em; font-weight: 800; letter-spacing: -.01em; color: #111827; margin: 0; line-height: 1.15; }
.rp-title { font-size: 1.05em; font-weight: 700; color: var(--rp-accent-text); margin-top: .3em; }
.rp-photo { width: 7.2em; height: 7.2em; object-fit: cover; flex: none; background: #E5E7EB; }
/* A photo sitting alone in the sidebar (Campus, Navy) has far more room
   to itself than one squeezed in beside the name, and reads as more
   substantial — closer to a real headshot — at a larger size there. */
.rp-side-photo .rp-photo { width: 9.4em; height: 9.4em; }
.rp.ph-circle .rp-photo { border-radius: 50%; }
.rp.ph-rounded .rp-photo { border-radius: 14%; }
.rp.ph-square .rp-photo { border-radius: 3px; }

/* Contact row (inline, under the name) and stacked (sidebar) */
.rp-contact { display: flex; flex-wrap: wrap; gap: .3em 1em; margin-top: .6em; }
.rp.ha-center .rp-contact { justify-content: center; }
/* Corporate's plain, icon-free contact line: one run of text separated by
   middots instead of flex-wrapped icon+text pairs, so it wraps like an
   ordinary sentence. */
.rp-contact-plain { display: block; font-size: .8em; color: #4B5563; }
.rp-ci { display: inline-flex; align-items: center; gap: .35em; font-size: .8em; color: #4B5563; white-space: nowrap; }
.rp-ci svg { width: 1em; height: 1em; flex: none; color: var(--rp-accent-text); }
.rp-lines { display: flex; flex-direction: column; gap: .5em; }
.rp-line { display: flex; align-items: flex-start; gap: .5em; font-size: .84em; color: #374151; }
.rp-line svg { width: 1em; height: 1em; flex: none; margin-top: .15em; color: var(--rp-accent-text); }
.rp-line span, .rp-ci span { overflow-wrap: anywhere; }
.rp-lang { justify-content: space-between; }
.rp-level { color: #6B7280; font-size: .92em; }
.rp-link { text-decoration: none; color: inherit; }
.rp-dot { width: .32em; height: .32em; border-radius: 50%; background: var(--rp-accent-text); flex: none; margin-top: .55em; }
.rp-lines .rp-dot { margin-top: .5em; }

/* Body / columns */
.rp-body { padding: var(--rp-sec) var(--rp-pad) var(--rp-pad); display: flex; flex-direction: column; gap: var(--rp-sec); }
.rp-main { display: flex; flex-direction: column; gap: var(--rp-sec); min-width: 0; }

/* Sections */
.rp-sec { break-inside: avoid; }
/* font-size: 1em resets the browser's own default <h2> size (and the
   site-wide h2{font-size:var(--fs-3xl)} rule in styles.css, which an
   unset font-size here would otherwise fall through to — a real bug that
   was making every section heading render around 30-36px instead of the
   ~11px .rp-h-text's own .82em is meant to compute from). Every heading
   size from here down is relative to this one, correct, page-scale base. */
.rp-h { margin: 0 0 .65em; display: flex; align-items: center; gap: .4em; font-size: 1em; }
.rp-h-text {
  font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--rp-accent-text);
  display: inline-block; flex: 1 1 auto; min-width: 0;
  /* A single all-caps word (EDUCATION, LANGUAGES…) can't wrap at a normal
     word boundary — without this, a heading squeezed into a narrow badged
     sidebar column overflows past its own box instead of shrinking to fit. */
  overflow-wrap: anywhere;
}
.rp.hs-line .rp-h { border-bottom: 1.5px solid var(--rp-accent-line); padding-bottom: .4em; }
.rp.hs-underline .rp-h-text { border-bottom: 2px solid var(--rp-accent-text); padding-bottom: .18em; }
.rp.hs-band .rp-h-text { background: var(--rp-accent-soft); color: var(--rp-accent-text); padding: .28em .6em; border-radius: 3px; }
.rp.hs-plain .rp-h-text { color: #111827; letter-spacing: .1em; }
.rp.rp-hcenter .rp-h { text-align: center; }
.rp.rp-hcenter .rp-h::after { content:''; }
/* A quieter, editorial heading: sentence case instead of small caps, no
   extra letter-spacing. Placed after every hs-* rule above so it wins on
   source order for the properties they share (case-normal is a template
   choice layered on top of whichever heading style is also in use). */
.rp.case-normal .rp-h-text { text-transform: none; letter-spacing: normal; font-weight: 700; }

/* Heading marks: a small chevron before a MAIN-column heading, or an icon
   inside a circular badge before a SIDE-column one — never both on the
   same heading (see templates.js's headingIcon doc). Real <svg> elements,
   not CSS ::before content, so the PDF export (which walks real DOM
   elements) draws them too. */
.rp-h-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.rp-h-chevron { color: var(--rp-accent-text); }
.rp-h-chevron svg { width: .85em; height: .85em; }
.rp-h-badge { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--rp-accent); }
.rp-h-badge svg { width: .9em; height: .9em; color: #fff; }
/* A badge sits in the narrow tinted sidebar, where a single all-caps word
   (EDUCATION, LANGUAGES…) plus the badge's own width easily outgrows the
   column — smaller, tighter-spaced text keeps it to one line instead of
   the ugly mid-word wrap overflow-wrap:anywhere falls back to otherwise. */
/* .rp prefixed on both sides of the selector purely to out-specificity
   `.rp.hs-plain .rp-h-text` above (three classes vs. two) — a badged
   heading's tighter sizing must win regardless of which heading style the
   template also uses. */
.rp .rp-h-badged .rp-h-text { font-size: .72em; letter-spacing: .02em; }
/* On a solid accent sidebar the badge inverts to a white circle with the
   accent-coloured icon, so it still reads against a background that is
   otherwise its own exact colour. */
.rp.side-solid .rp-side .rp-h-badge { background: #fff; }
.rp.side-solid .rp-side .rp-h-badge svg { color: var(--rp-accent); }

.rp-text { margin: 0; color: #374151; }
.rp.ta-justify .rp-text, .rp.ta-justify .rp-desc { text-align: justify; }

/* Entries */
.rp-item + .rp-item { margin-top: var(--rp-item); }
.rp-item-head { }
.rp-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; }
.rp-item-title { font-weight: 700; color: #111827; font-size: 1em; }
.rp-date { font-size: .82em; color: #6B7280; white-space: nowrap; flex: none; }
.rp-sub { font-size: .86em; color: #6B7280; margin-top: .15em; }
.rp-sep { color: #C7CDD6; }
.rp-desc { margin: .5em 0 0; color: #374151; }
.rp-bullets { list-style: none; margin: .5em 0 0; padding: 0; display: flex; flex-direction: column; gap: .32em; }
.rp-bullets li { display: flex; align-items: flex-start; gap: .55em; color: #374151; }
.rp-bullets .rp-dot { margin-top: .55em; }

/* Skills / tags */
.rp-tags { display: flex; flex-wrap: wrap; gap: .5em; }
.rp-tag { background: var(--rp-accent-tint); color: var(--rp-accent-text); font-size: .82em; font-weight: 600; padding: .3em .75em; border-radius: 4px; }

/* ---------- Layout: single (Corporate) ------------------------------------ */
.rp-single .rp-head { padding-bottom: var(--rp-sec); border-bottom: 2px solid var(--rp-accent-line); }

/* ---------- Layout: gutter — titles in a left margin ---------------------- */
.rp-gutter .rp-sec { display: grid; grid-template-columns: 6.2em 1fr; gap: 1em; align-items: start; }
.rp-gutter .rp-h { margin: 0; }
.rp-gutter.hs-line .rp-h, .rp-gutter.hs-band .rp-h { border: 0; padding: 0; }
.rp-gutter .rp-sec-body { min-width: 0; }
.rp-gutter .rp-body { padding-top: var(--rp-pad); }
.rp-gutter .rp-sec-contact .rp-h { align-self: start; }

/* ---------- Layout: sidebar (Campus, Navy) — a narrow, tinted or solid
   column beside a wider plain one. ---------- */
.rp-sidebar-left .rp-body, .rp-sidebar-right .rp-body { flex-direction: row; align-items: stretch; padding: 0; gap: 0; }
.rp-sidebar-right .rp-body { flex-direction: row-reverse; }
.rp-sidebar-left .rp-side, .rp-sidebar-right .rp-side {
  width: 33%; flex: none; padding: var(--rp-pad) calc(var(--rp-pad) * .8);
  display: flex; flex-direction: column; gap: var(--rp-sec); background: var(--rp-side-bg);
}
.rp-sidebar-left .rp-main, .rp-sidebar-right .rp-main { flex: 1; min-width: 0; padding: var(--rp-pad); display: flex; flex-direction: column; gap: var(--rp-sec); }
.rp-side-photo { display: flex; justify-content: center; }

/* ---------- Layout: split (Editorial, Accent) — two equal, untinted
   columns that each flow independently, no sidebar fill. ---------- */
.rp-split .rp-body { flex-direction: row; align-items: flex-start; gap: 2.2em; }
.rp-split .rp-side, .rp-split .rp-main {
  width: auto; flex: 1 1 0; min-width: 0; padding: 0; background: transparent;
  display: flex; flex-direction: column; gap: var(--rp-sec);
}
.rp-split.split-divider .rp-side { border-right: 1px solid #E5E7EB; padding-right: 1.7em; }

/* Solid accent-filled sidebar (Campus, Navy): everything inside needs a
   light foreground instead of the usual dark-on-light text. */
.rp.side-solid .rp-side { color: var(--rp-on-accent); }
.rp.side-solid .rp-side .rp-h-text { color: var(--rp-on-accent); }
.rp.side-solid .rp-side.hs-line .rp-h, .rp.side-solid.hs-line .rp-side .rp-h { border-bottom-color: var(--rp-on-accent-line); }
.rp.side-solid .rp-side .rp-line, .rp.side-solid .rp-side .rp-text, .rp.side-solid .rp-side .rp-sub { color: var(--rp-on-accent-muted); }
.rp.side-solid .rp-side .rp-line svg, .rp.side-solid .rp-side .rp-dot { color: var(--rp-on-accent); }
.rp.side-solid .rp-side .rp-tag { background: rgba(255,255,255,.16); color: var(--rp-on-accent); }
.rp.side-solid .rp-side .rp-item-title { color: var(--rp-on-accent); }
.rp.side-solid.hs-band .rp-side .rp-h-text { background: rgba(255,255,255,.18); color: var(--rp-on-accent); }

/* A full-width band behind the header, in the accent colour. */
.rp.rp-band .rp-head { background: var(--rp-accent); color: var(--rp-on-accent); padding: 1.5em var(--rp-pad); }
.rp.rp-band .rp-name { color: var(--rp-on-accent); }
.rp.rp-band .rp-title { color: var(--rp-on-accent-muted); }
.rp.rp-band .rp-photo { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.rp.rp-band.rp-sidebar-left .rp-body, .rp.rp-band.rp-sidebar-right .rp-body { padding-top: 0; }

/* A fixed decorative colour behind the header only (Campus's soft peach),
   independent of the user's own accent — bled to the page's top and right
   edges, and to the sidebar's boundary on the left, by cancelling out the
   surrounding column's own padding rather than the header choosing its own. */
.rp.header-panel .rp-head {
  background: var(--rp-panel);
  margin: calc(-1 * var(--rp-pad)) calc(-1 * var(--rp-pad)) 0;
  padding: var(--rp-pad) var(--rp-pad) 1.1em;
}

/* A solid accent bar across the very top and very bottom of the whole
   document (Accent) — real elements, not a border or box-shadow, so they
   show up in the PDF export exactly like everything else on the page. */
.rp-bar { height: .55em; background: var(--rp-accent); }

/* Corporate's skill list, in two columns rather than one long one — a
   real CSS multi-column flow, which the PDF exporter reads correctly
   since it measures each word's actual rendered position rather than
   assuming top-to-bottom order. */
/* display:block (not flex — CSS multi-column has no effect on a flex
   container) so .rp-line's own display:flex still lays out each icon+text
   pair while the column layout runs on their shared block parent. */
.tpl-corporate .rp-sec-skills .rp-lines { display: block; column-count: 3; column-gap: 1.2em; }
.tpl-corporate .rp-sec-skills .rp-line { break-inside: avoid; margin-bottom: .5em; }

/* References as a 2-up grid of cards rather than one long stacked list —
   matches how a references section is conventionally laid out, and reads
   far better once there are more than two of them (Navy, Accent). Never
   applied inside a narrow sidebar column, where two cards side by side
   would have nowhere near enough room. */
.rp-sec-references .rp-sec-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--rp-item) 1.6em;
}
.rp-sec-references .rp-item + .rp-item { margin-top: 0; }
.rp-side .rp-sec-references .rp-sec-body { display: block; }
.rp-side .rp-sec-references .rp-item + .rp-item { margin-top: var(--rp-item); }

/* Responsive: the editor canvas already scales the whole .rp with a CSS
   transform (--z, set in resume.js), so no width media query is needed for
   the page itself — this only affects the mobile preview overlay wrapper. */
@media (max-width: 480px) {
  .rb-canvas { padding: 1.25rem .75rem; }
}