/* ============ App Shell ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  min-height: 100vh;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: #0b1220; border-bottom: 1px solid #1e293b;
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.actions { display: flex; gap: 10px; align-items: center; }

.theme-picker {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #ffffff;
}
.theme-label { font-size: 12px; color: #475569; font-weight: 600; }
.swatches { display: flex; gap: 6px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: transform .12s ease, border-color .12s ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: #0f172a; }
.theme-input {
  width: 28px; height: 28px; padding: 0; border: 1px solid #cbd5e1;
  border-radius: 6px; background: #ffffff; cursor: pointer;
}
.theme-input::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.btn {
  border: 1px solid #1e293b; background: #0f172a; color: #e2e8f0;
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600;
  font-size: 13px;
}
.btn.primary { background: #16a34a; border-color: #15803d; }
.btn.primary:hover { background: #15803d; }
.btn.ghost:hover { background: #1e293b; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

.layout {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 1px; background: #1e293b; min-height: calc(100vh - 64px);
}

.editor {
  background: #0b1220;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
}
.editor-head { display: flex; align-items: center; justify-content: space-between; }
.editor-head h2 { font-size: 13px; margin: 0 0 6px; color: #94a3b8; font-weight: 600; }
.status { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.status.ok { background: #064e3b; color: #6ee7b7; }
.status.err { background: #7f1d1d; color: #fecaca; }
#jsonInput {
  flex: 1; min-height: 0;
  background: #020617; color: #e2e8f0; border: 1px solid #1e293b;
  border-radius: 6px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; resize: none;
}
.hint { font-size: 11px; color: #64748b; margin: 6px 2px 0; }
.hint code { background: #1e293b; padding: 1px 4px; border-radius: 3px; }

/* ============ Preview grid ============ */
.preview-list {
  background: #111827;
  padding: 22px 16px 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}
@media (max-width: 1280px) { .preview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .preview-list { grid-template-columns: 1fr; } }

.template-card {
  background: #1f2937;
  border-radius: 10px;
  border: 1px solid #1e293b;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.template-card .card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid #1e293b;
}
.template-card .card-head h3 { margin: 0; font-size: 13px; color: #e5e7eb; font-weight: 700; }
.template-card .card-head .meta {
  color: #64748b; font-size: 10.5px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.template-card .stage {
  padding: 10px;
  display: flex; align-items: flex-start; justify-content: center;
  background: #0f172a;
  flex: 1;
}
.scaler { transform-origin: top center; }

/* ============ Post Canvas (export size) ============ */
.post {
  width: 1080px;
  background: #ececec;       /* light-gray "page" surround */
  font-family: 'Inter', sans-serif;
  color: #111;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post.square { height: 1080px; }
.post.near-square { height: 1112px; }   /* t3, t4 */
.post.tall   { height: 1530px; }        /* t7-t10 portrait */
.post .post-body { flex: 1; min-height: 0; }

.post-header {
  text-align: center;
  padding: 56px 50px 20px;
}
.post-header.row {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  flex-wrap: wrap;
}
.post-header h1 {
  margin: 0;
  font-size: 86px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.04;
  color: #1f2937;
}
/* Best-resume titles: 1 line at ~52px so they don't wrap */
.post.tpl-best .post-header h1 {
  font-size: 56px;
  letter-spacing: -.02em;
}
.post.tpl-best .post-header { padding: 32px 40px 12px; }
.post.tpl-best .post-header .sub { font-size: 26px; margin-top: 4px; }

/* Land-an-interview titles: 2 lines at ~62px */
.post.tpl-dual .post-header h1 {
  font-size: 62px;
  letter-spacing: -.02em;
}
.post.tpl-dual .post-header { padding: 38px 50px 14px; }
.post-header .sub {
  margin: 8px 0 0;
  color: #374151;
  font-size: 34px;
  font-weight: 600;
}
.check-badge {
  width: 96px; height: 96px;
  background: var(--asset-check) center/contain no-repeat;
  flex: 0 0 auto;
}

.post-body {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0 70px 24px;
}
.post.tall .post-body { padding: 8px 30px; }
.post-body.dual { gap: 28px; padding: 0 30px 24px; align-items: center; }

/* fit-wrap: holds the resume card and gets transform-scaled by JS to fit
   the available body height in square posts. */
.fit-wrap { transform-origin: top center; }

.post-footer {
  text-align: center; color: #4b5563;
  padding: 32px 0 28px;
  position: relative; z-index: 2;
}
.post-footer .small { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.post-footer .url  { font-size: 28px; font-weight: 700; color: #1f2937; letter-spacing: -.01em; }

/* Crumpled paper background — real photo asset */
.post.paper {
  background: var(--asset-paper) center/cover repeat;
}
.post.paper::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(248, 248, 248, .14);   /* lighter tint — paper texture more visible */
  pointer-events: none;
  z-index: 0;
}
.post.paper .post-header,
.post.paper .post-body,
.post.paper .post-footer { position: relative; z-index: 1; }
.post.paper .post-header h1 {
  /* a touch of warmth for headlines on paper */
  color: #1a202c;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ============ Resume Card (shared) — mirrors Template 1 / Template 5 PDF spec ============
   Conversion: 1pt ≈ 1.33px (96dpi). PDF page width A4 = 595pt = ~793px; my card width 760px.
   Theme color (green) used in post designs: #1f8f4e
*/
:root { --theme: #1f8f4e; }

/* Inline SVG icons (FontAwesome paths). 1em sizing tracks the surrounding
   contact-line / .ext font-size; fill="currentColor" picks up the theme. */
.ic-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: 0 0 auto;
}

.resume-card {
  width: 760px;
  background: #fff;
  color: #111;
  font-family: 'Roboto', 'Inter', sans-serif;
  font-size: 14.6px;        /* 11pt */
  line-height: 1.2;
  position: relative;
  box-shadow:
    0 24px 48px rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.10),
    0 2px 4px rgba(0,0,0,.06);
}
.resume-card.flush { box-shadow: none; border: none; }
/* optional thin theme-color left-edge accent — opt-in only via .green-edge */
.resume-card.green-edge::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 8px; background: var(--theme); z-index: 2;
}

/* ───── Plain layout (Template 1) — t1, t4, t7, t10 ───── */
.resume.plain {
  padding: 20px 40px 24px;   /* spacing[5] top, spacing[10]=30pt horizontal */
}
.resume.plain .name {
  text-align: center; margin: 16px 0 4px;
  font-size: 26.6px;         /* 20pt */
  font-weight: 700;
  color: #111;
}
.resume.plain .summary-line {
  text-align: center; font-size: 14.6px; line-height: 1.35;
  color: #111; margin: 0 0 6px;
}
.resume.plain .contact-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 26px; row-gap: 6px;
  margin: 6px 0 14px;
  font-size: 14.6px;
}
.resume.plain .contact-line .ci { display: inline-flex; align-items: center; gap: 4px; }
.resume.plain .contact-line .ic { color: var(--theme); font-weight: 700; }

.resume.plain .section-block { margin-top: 12px; }   /* spacing[3] = 9pt */
.resume.plain h3.section {
  font-size: 14.6px; font-weight: 700;
  color: var(--theme);
  letter-spacing: .3pt;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.resume.plain h3.section + .underline {
  height: 1.66px;             /* 1.25pt */
  width: 100%; background: var(--theme);
  margin: 0 0 6px;
}
.resume.plain .role-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.resume.plain .role-row .right { color: #111; font-size: 14.6px; white-space: nowrap; }
.resume.plain .org { font-weight: 700; color: #111; font-size: 14.6px; }
.resume.plain .role { color: #111; font-size: 14.6px; }
.resume.plain ul { padding-left: 0; margin: 2px 0 4px; list-style: none; }
.resume.plain li {
  display: flex; gap: 6px; color: #111; margin: 1px 0;
  line-height: 1.3;
}
.resume.plain li::before { content: "•"; font-weight: 700; flex: 0 0 auto; }
.resume.plain .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }

/* ───── Sidebar layout (Template 5) — t2, t3, t8, t9 ───── */
.resume.sidebar {
  position: relative;
  padding: 0;                 /* full-bleed columns */
}
/* Top accent bar: 15pt (~20px) tall, 20% width */
.resume.sidebar .top-bar {
  height: 20px;
  width: 20%;
  background: var(--theme);
}
/* Profile area sits white, marginTop -25pt (~-33px) overlapping into accent */
.resume.sidebar .profile {
  background: #fff;
  padding: 8px 40px 14px;     /* spacing[5] top after offset, spacing[10] horizontal */
  margin-top: -10px;
}
.resume.sidebar .profile .name {
  font-size: 49px;            /* 37pt */
  font-weight: 700;
  margin: 0;
  color: #000;
  line-height: 1.05;
  letter-spacing: -.5px;
}
.resume.sidebar .profile .contact-line {
  display: flex; flex-wrap: wrap;
  column-gap: 26px; row-gap: 6px;
  margin: 6px 0 0;
  font-size: 14.6px;
}
.resume.sidebar .profile .contact-line .ci { display: inline-flex; align-items: center; gap: 4px; }
.resume.sidebar .profile .contact-line .ic { color: var(--theme); font-weight: 700; }

/* Section row: 20% colored label + 80% white content; black 92% divider above
   Row is full-width (green reaches the left card edge); the divider sits at
   left:4% / width:92% per Template 5 spec. */
.resume.sidebar .row {
  position: relative;
  display: grid;
  grid-template-columns: 20% 80%;
}
.resume.sidebar .row::before {
  content: "";
  position: absolute; left: 4%; width: 92%; top: 0;
  height: 1.66px; background: var(--theme);
  z-index: 2;
}
.resume.sidebar .row.first::before { display: none; }
.resume.sidebar .row > .label-cell {
  background: var(--theme);
  padding: 12px 12px 12px 0;
}
.resume.sidebar .row > .label-cell .label {
  color: #000; font-weight: 700;
  font-size: 14.6px;
  letter-spacing: .3pt;
  text-transform: uppercase;
  padding-left: 40px;          /* spacing[10] = 30pt */
}
.resume.sidebar .row > .content-cell {
  background: #fff;
  padding: 12px 40px 12px 20px; /* 9pt vertical, 30pt right, 15pt left */
}
.resume.sidebar .row > .content-cell .org { font-weight: 700; color: #111; font-size: 14.6px; }
.resume.sidebar .row > .content-cell .role-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.resume.sidebar .row > .content-cell .right { color: #111; font-size: 14.6px; white-space: nowrap; }
.resume.sidebar .row > .content-cell ul { padding-left: 0; margin: 2px 0 4px; list-style: none; }
.resume.sidebar .row > .content-cell li {
  display: flex; gap: 6px; color: #111; margin: 1px 0; line-height: 1.3;
}
.resume.sidebar .row > .content-cell li::before { content: "•"; font-weight: 700; flex: 0 0 auto; }
.resume.sidebar .row > .content-cell .two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px;
}

/* For rendering inside a fit-wrap, ensure full-bleed columns extend correctly */
.resume.sidebar .left-col-fill {
  background: var(--theme);
}

.resume .ext { color: var(--theme); font-size: 11.5px; margin-left: 2px; }

/* ───── Framed layout (Template 6) — t11, t12, t13 ─────
   Centered name, contact icons, and section headings inside
   top + bottom 1.5pt bordered bands tinted with theme color. */
.resume.framed {
  --framed-color: var(--theme);
  padding: 22px 36px 26px;
  font-family: 'Roboto', 'Inter', sans-serif;
  font-size: 14.6px;
  line-height: 1.3;
  color: #111;
}
.resume.framed .name {
  text-align: center; margin: 16px 0 8px;
  font-size: 40px;            /* 30pt */
  font-weight: 700;
  color: #000;
  letter-spacing: -.4px;
}
.resume.framed .contact-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 26px; row-gap: 6px;
  margin: 4px 0 12px;
  font-size: 14.6px;
}
.resume.framed .contact-line .ci { display: inline-flex; align-items: center; gap: 6px; }
.resume.framed .contact-line .ic { color: var(--framed-color); font-weight: 700; }

.resume.framed .section-block { margin-top: 10px; }
.resume.framed .section-band {
  border-top: 2px solid var(--framed-color);
  border-bottom: 2px solid var(--framed-color);
  padding: 6px 0;
  margin-bottom: 6px;
}
.resume.framed h3.section {
  text-align: center; margin: 0;
  font-size: 14.6px; font-weight: 700;
  color: var(--framed-color);
  letter-spacing: .5pt;
  text-transform: uppercase;
}
.resume.framed .role-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.resume.framed .role-row .right { color: #111; font-size: 14.6px; white-space: nowrap; font-weight: 600; }
.resume.framed .org { font-weight: 700; color: #111; font-size: 14.6px; text-transform: uppercase; letter-spacing: .2px; }
.resume.framed .role { color: #111; font-size: 14.6px; font-style: italic; }
.resume.framed ul { padding-left: 0; margin: 4px 0 6px; list-style: none; }
.resume.framed li {
  display: flex; gap: 8px; color: #111; margin: 2px 0;
  line-height: 1.35;
}
.resume.framed li::before { content: "•"; font-weight: 700; flex: 0 0 auto; }
.resume.framed .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }

/* ============ Stamps (real PNGs) ============ */
.stamp-img {
  position: absolute; pointer-events: none; user-select: none;
  z-index: 5;
}
.stamp-img.selected {
  width: 380px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background: var(--asset-selected) center/contain no-repeat;
  aspect-ratio: 360 / 200;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.stamp-img.rejected {
  width: 340px;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: var(--asset-rejected) center/contain no-repeat;
  aspect-ratio: 320 / 180;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* ============ Pre-rendered "rejected" resume image (t5/t6) ============ */
.rejected-resume-img {
  width: 460px;
  display: block;
  position: relative;
}
.rejected-wrap { position: relative; }

/* ============ Standalone clean templates (t9, t10) ============ */
.post.bare {
  background: #ffffff; padding: 24px 0;
}
.post.bare .post-body { padding: 0 30px 16px; }
.post.bare .resume-card { width: 800px; }

/* compact post variant */
.post.compact .resume-card { transform: scale(.78); transform-origin: top center; }

/* dual side-by-side resumes (t5 / t6) — both panels share the SAME box */
.dual-resumes {
  display: flex; gap: 26px; align-items: flex-start; justify-content: center;
}
.dual-resumes .panel {
  width: 500px;
  height: 675px;            /* matches rejected-resume.png aspect (~0.74) */
  position: relative;
  background: #fff;
  box-shadow:
    0 32px 70px rgba(0,0,0,.28),
    0 12px 26px rgba(0,0,0,.18),
    0 3px 8px rgba(0,0,0,.12);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .2s ease;
}
/* subtle paper-on-desk rotation: rejected tilted left, selected tilted right */
.dual-resumes .panel:nth-child(1) { transform: rotate(-1.5deg); }
.dual-resumes .panel:nth-child(2) { transform: rotate( 1.5deg); }
/* Rejected panel: the source PNG already has its own dark photo-frame border,
   so skip the white card wrapper and let the image stand on its own. The image
   is sized larger than the panel so the inner resume area (excluding the ~7%
   dark frame baked into the PNG edges) matches the selected panel's footprint. */
.dual-resumes .panel.rejected-wrap {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.dual-resumes .rejected-resume-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 116%; height: 116%;
  display: block;
  object-fit: fill;
}

/* Selected resume scales its full content to fit inside the panel */
.dual-resumes .selected-scale {
  width: 1000px;            /* 2x the panel width */
  transform: scale(0.5);
  transform-origin: top left;
}
.dual-resumes .selected-scale .resume-card {
  width: 1000px;
  border: none;
  box-shadow: none;
}
.dual-resumes .selected-scale .resume.plain {
  padding: 38px 48px 38px;
  font-size: 19px;
}
.dual-resumes .selected-scale .resume.plain .name { font-size: 40px; }
.dual-resumes .selected-scale .resume.plain .summary-line { font-size: 17px; }
.dual-resumes .selected-scale .resume.plain .contact-line { font-size: 17px; }
.dual-resumes .selected-scale .resume.plain h3.section { font-size: 17px; }

/* Sidebar layout inside dual panel */
.dual-resumes .selected-scale .resume.sidebar { font-size: 19px; }
.dual-resumes .selected-scale .resume.sidebar .profile { padding: 8px 36px 14px; }
.dual-resumes .selected-scale .resume.sidebar .profile .name { font-size: 52px; }
.dual-resumes .selected-scale .resume.sidebar .profile .contact-line { font-size: 17px; }
.dual-resumes .selected-scale .resume.sidebar .row > .label-cell .label {
  font-size: 19px; padding-left: 36px;
}
.dual-resumes .selected-scale .resume.sidebar .row > .content-cell { font-size: 19px; padding: 12px 36px 12px 18px; }
.dual-resumes .selected-scale .resume.sidebar .row > .content-cell .right,
.dual-resumes .selected-scale .resume.sidebar .row > .content-cell .org { font-size: 19px; }

/* Framed layout inside dual panel */
.dual-resumes .selected-scale .resume.framed { font-size: 19px; padding: 22px 32px 26px; }
.dual-resumes .selected-scale .resume.framed .name { font-size: 46px; }
.dual-resumes .selected-scale .resume.framed .contact-line { font-size: 17px; }
.dual-resumes .selected-scale .resume.framed h3.section { font-size: 19px; }
.dual-resumes .selected-scale .resume.framed .role-row .right,
.dual-resumes .selected-scale .resume.framed .org { font-size: 19px; }

.dual-resumes .stamp-img.selected { width: 300px; }
.dual-resumes .stamp-img.rejected { width: 260px; }