/* The five resume formats, as they appear on screen.

   Lifted out of the builder so the result page shows the same thing. They had drifted: the
   builder offered Ivy, Meridian, Atlas, Ledger and Signal while the result page still offered
   Classic, Modern and Two-Column and quietly fell back to Classic for anything else -- so a
   resume built in Signal was labelled and drawn as Classic, while the PDF it had actually
   produced was Signal. One copy, used by both, cannot drift again.

   Sizes are in cqw against a container-type: inline-size sheet, so a page looks the same at any
   width. Keep the .sheet wrapper around any element given a .preview-card class. */

    /* The page carries its own box model rather than borrowing the host page's reset. Without
       this the padding is added outside the width, and on a page with no global reset -- the admin
       console -- every line ran past the right edge of the sheet it sits in. */
    .sheet, .sheet *, .preview-card, .preview-card * { box-sizing: border-box; }
    .sheet { container-type: inline-size; width: 100%; max-width: 1040px; margin: 0 auto; }
    .preview-card { background: #ffffff; color: #10233f; border-radius: 3px;
      box-shadow: var(--shadow); width: 100%; aspect-ratio: 210 / 297; padding: 6.2cqw 7cqw;
      font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(11px, 1.6cqw, 17px); line-height: 1.55; }
    .preview-card .rp-header { margin-bottom: 4px; }
    .preview-card .rp-name { font-family: "Sora", sans-serif; font-size: clamp(19px, 2.92cqw, 32px); font-weight: 800; color: #0A1026; letter-spacing: -0.02em; }
    .preview-card .rp-headline { color: #2E6BFF; font-weight: 700; margin-top: .25cqw; font-size: clamp(12px, 1.74cqw, 19px); }
    .preview-card .rp-contact { color: #64748b; font-size: clamp(10px, 1.44cqw, 15px); margin-top: .7cqw; }
    .preview-card .rp-section { margin-top: 2.8cqw; }
    .preview-card .rp-section-title { font-family: "Sora", sans-serif; font-size: clamp(9px, 1.3cqw, 14px); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: #64748b; border-bottom: 1px solid #e2e8f0; padding-bottom: .7cqw; margin-bottom: 1.4cqw; }
    .preview-card .rp-entry { margin-bottom: 1.7cqw; }
    .preview-card .rp-entry:last-child { margin-bottom: 0; }
    .preview-card .rp-entry-head { font-size: clamp(11.5px, 1.7cqw, 18px); color: #10233f; }
    .preview-card .rp-entry-meta { font-size: clamp(9.5px, 1.36cqw, 14px); color: #64748b; margin-top: .25cqw; }
    .preview-card ul { margin: .7cqw 0 0; padding-left: 2.2cqw; }
    .preview-card li { margin-bottom: .55cqw; color: #334155; }
    .preview-card .rp-skills { color: #334155; }

    /* An empty page should look like a page waiting to be filled, not a white void with
       one italic sentence adrift in it. */
    .preview-empty { display: flex; flex-direction: column; gap: 2.4cqw; margin: 0; }
    .preview-empty .pe-say { color: #94a3b8; font-size: clamp(10px, 1.4cqw, 15px); margin: 0 0 1cqw; }
    .preview-empty .pe-rule { height: 1px; background: #e2e8f0; }
    .preview-empty .pe-block { display: flex; flex-direction: column; gap: 1.1cqw; }
    .preview-empty .pe-line { height: 1.5cqw; min-height: 7px; border-radius: 99px; background: #eef1f7; }
    .preview-empty .pe-line.w70 { width: 70%; } .preview-empty .pe-line.w45 { width: 45%; }
    .preview-empty .pe-line.w88 { width: 88%; } .preview-empty .pe-line.w30 { width: 30%; }
    .preview-empty .pe-line.tall { height: 3.4cqw; min-height: 16px; width: 52%; background: #e6eaf3; }

    /* preview toolbar: template lives beside the output it changes, not in the form */
    .wiz-ptop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 0 6px 12px; }
    .wiz-ptop .t { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-right: auto; }

    /* step rail */
    .wiz-bar { display: flex; align-items: center; gap: 14px; padding: 10px 24px;
      border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .wiz-bar h1 { margin: 0; font-size: 1.06rem; font-weight: 750; letter-spacing: -0.02em; }
    .wiz-bar .sub { margin: 0; font-size: 0.84rem; color: var(--text-mid); }
    .wiz-bar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    .wiz-steps { display: flex; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
    .wiz-steps button { position: relative; border: 0; background: transparent; padding: 11px 15px 10px;
      display: flex; align-items: center; gap: 8px; color: var(--text-mid); font-family: inherit;
      font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; }
    .wiz-steps button:hover { color: var(--text); }
    .wiz-steps button[aria-current="step"] { color: var(--text); font-weight: 750; border-bottom-color: var(--gold); }
    .wiz-steps .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
      font-family: "JetBrains Mono", monospace; font-size: 0.75rem; font-weight: 700;
      background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-dim); }
    .wiz-steps button[aria-current="step"] .n { background: var(--gold); border-color: transparent; color: #26180A; }
    .wiz-steps button.done .n { background: rgba(34,197,94,0.16); border-color: transparent; color: var(--green); }
    [data-theme="light"] .wiz-steps .n { background: #F6F8FF; }
    .wiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
    /* Add-a-section. The + sits at the end of the rail because that is where the sections
       it adds go. */
    .wiz-add { border: 1px dashed var(--border); background: transparent; color: var(--text-dim);
      border-radius: 8px; width: 26px; height: 26px; align-self: center; margin-left: 8px;
      font-size: 0.95rem; line-height: 1; cursor: pointer; flex: none; }
    .wiz-add:hover { border-color: var(--cyan); color: var(--cyan); }
    .wiz-add[aria-expanded="true"] { border-style: solid; border-color: var(--cyan); color: var(--cyan); }
    .wiz-menu { position: absolute; z-index: 40; width: 320px; max-height: 70vh; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border-hi); border-radius: 14px;
      box-shadow: var(--shadow); padding: 10px; }
    .wiz-menu h4 { margin: 6px 8px 6px; font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
      font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
    .wiz-menu button.opt { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline;
      width: 100%; border: 0; background: transparent; color: var(--text); text-align: left;
      font-family: inherit; font-size: 0.88rem; font-weight: 600; padding: 8px 9px; border-radius: 9px; cursor: pointer; }
    .wiz-menu button.opt:hover { background: rgba(255,255,255,0.06); }
    [data-theme="light"] .wiz-menu button.opt:hover { background: #F1F5FF; }
    .wiz-menu button.opt .shape { font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
      color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; }
    .wiz-menu button.opt .warn { color: var(--amber); }
    .wiz-menu .hint { margin: 4px 9px 8px; font-size: 0.76rem; color: var(--text-dim); line-height: 1.45; }
    .wiz-menu .custom { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
    .wiz-menu .custom input { margin-bottom: 8px; }
    .wiz-menu .shapes { display: flex; gap: 6px; }
    .wiz-menu .shapes button { flex: 1; border: 1px solid var(--border); background: transparent;
      color: var(--text-mid); border-radius: 8px; padding: 7px 4px; font-size: 0.76rem; font-weight: 650; cursor: pointer; }
    .wiz-menu .shapes button:hover { border-color: var(--cyan); color: var(--cyan); }
    .cs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .cs-head input { flex: 1; }
    .cs-remove { flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-mid);
      border-radius: 8px; padding: 7px 12px; font-size: 0.8rem; cursor: pointer; }
    .cs-remove:hover { color: var(--red); border-color: rgba(244,89,91,0.4); }
    .wiz-nav .spacer { margin-left: auto; }

    /* the finished step */
    .res-done { display:inline-flex; align-items:center; gap:7px; background:rgba(34,197,94,0.14);
      color:var(--green); border-radius:999px; padding:5px 12px; font-size:0.76rem; font-weight:700; }
    .res-done i { width:7px; height:7px; border-radius:50%; background:currentColor; display:block; }
    .res-h { font-size:1.3rem; font-weight:800; letter-spacing:-0.03em; margin:12px 0 0; }
    .res-sub { color:var(--text-mid); font-size:0.86rem; margin-top:6px; }
    .res-files { display:flex; flex-direction:column; gap:10px; }
    .res-file { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; width:100%;
      text-align:left; border:1px solid var(--border); border-radius:13px; padding:13px 14px;
      background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .16s, background .16s; }
    .res-file:hover:not(:disabled) { border-color:var(--gold); background:rgba(240,165,0,0.10); }
    .res-file.primary { border-color:var(--gold); background:rgba(240,165,0,0.10); }
    .res-file:disabled { opacity:.55; cursor:not-allowed; }
    .res-file .ic { width:34px; height:42px; border-radius:6px; background:rgba(255,255,255,0.05);
      border:1px solid var(--border); display:grid; place-items:center; font-family:"JetBrains Mono", monospace;
      font-size:0.5rem; font-weight:700; color:var(--cyan); }
    .res-file .ic.docx { color:var(--green); }
    .res-file .nm b { display:block; font-size:0.85rem; font-weight:700; }
    .res-file .nm span { display:block; font-family:"JetBrains Mono", monospace; font-size:0.66rem;
      color:var(--text-mid); margin-top:2px; }
    .res-file .go { width:30px; height:30px; border-radius:50%; background:var(--gold); color:#26180A;
      display:grid; place-items:center; font-size:0.82rem; font-weight:800; }
    .res-cost { margin-top:11px; font-size:0.76rem; color:var(--text-mid); line-height:1.5;
      border:1px solid var(--border); border-radius:11px; background:var(--surface); padding:10px 12px; }
    .res-cost b { color:var(--text); }

    /* The gate: sign-in and, when there are no credits, the offer. One card, two views, so the
       candidate never leaves the resume they just finished. */
    .gate { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
      background:rgba(15,18,28,0.55); padding:18px; }
    .gate[hidden] { display:none !important; }
    .gate-card { position:relative; width:100%; max-width:430px; background:var(--surface,#fff); border:1px solid var(--border-hi,transparent); color:var(--text);
      border-radius:16px; padding:26px 24px 24px; box-shadow:0 22px 60px rgba(0,0,0,0.3); }
    .gate-x { position:absolute; top:10px; right:12px; border:0; background:none; font-size:1.5rem;
      line-height:1; color:var(--text-mid); cursor:pointer; padding:4px 8px; }
    .gate-card h3 { margin:0 0 6px; font-size:1.12rem; }
    .gate-sub { margin:0 0 16px; font-size:0.84rem; color:var(--text-mid); line-height:1.55; }
    .gate-lbl { display:block; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
      color:var(--text-mid); margin:12px 0 5px; }
    .gate-inp { width:100%; padding:10px 12px; border:1px solid var(--border-hi,#d8dce6); border-radius:9px;
      font:inherit; font-size:0.92rem; background:var(--bg,#fff); color:var(--text); }
    .gate-go { width:100%; margin-top:16px; }
    .gate-msg { min-height:18px; margin-top:10px; font-size:0.8rem; line-height:1.45; }
    .gate-msg.err { color:#b42318; }
    .gate-msg.ok { color:#146c43; }
    [data-theme="dark"] .gate-msg.err { color:#FF8A8C; }
    [data-theme="dark"] .gate-msg.ok { color:#4ADE80; }
    .gate-opt { display:block; width:100%; text-align:left; margin-top:10px; padding:13px 15px;
      border:1px solid var(--border-hi,#d8dce6); border-radius:12px; background:var(--bg,#fff);
      cursor:pointer; font:inherit; color:var(--text); }
    .gate-opt:hover { border-color:var(--accent,#e8a33d); }
    .gate-opt-lead { border-color:var(--accent,#e8a33d); border-width:2px; }
    .gate-opt-top { display:flex; align-items:baseline; gap:9px; }
    .gate-opt-top b { font-size:1.08rem; }
    .gate-opt-top span { font-size:0.88rem; }
    .gate-opt-sub { display:block; margin-top:4px; font-size:0.78rem; color:var(--text-mid); line-height:1.5; }
    .res-facts { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
    .res-facts .fact { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
      padding:9px 13px; border-bottom:1px solid var(--border); font-size:0.78rem; color:var(--text-mid); }
    .res-facts .fact:last-child { border-bottom:0; }
    .res-facts .fact b { font-family:"JetBrains Mono", monospace; font-size:0.74rem; font-weight:650;
      color:var(--text); font-variant-numeric:tabular-nums; }

    /* focused intake */
    /* This is a <label> so the whole area opens the picker -- which also means the page's
       global uppercase label styling lands on it, and set the dropzone in small caps. */
    .wiz-drop { display: block; cursor: pointer; border: 1.5px dashed var(--border); border-radius: 13px;
      background: rgba(255,255,255,0.03); padding: 26px 20px; text-align: center; transition: border-color .18s, background .18s;
      text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--text); margin-bottom: 0; }
    .wiz-drop:hover, .wiz-drop:focus-within { border-color: var(--cyan); background: rgba(56,189,248,0.06); }
    .wiz-drop b { display: block; font-size: 0.98rem; font-weight: 700; margin-bottom: 3px; color: var(--text); }
    .wiz-drop small { display: block; color: var(--text-mid); font-size: 0.8rem; }
    .wiz-drop .browse { color: var(--cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    .wiz-drop input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .wiz-drop .ic { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--cyan); }
    .wiz-opt { margin-top: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); overflow: hidden; }
    .wiz-opt > summary { list-style: none; cursor: pointer; padding: 12px 15px; display: flex; align-items: center;
      gap: 9px; font-size: 0.88rem; font-weight: 650; }
    .wiz-opt > summary::-webkit-details-marker { display: none; }
    .wiz-opt > summary::marker { content: ""; }
    .wiz-opt .why { color: var(--text-mid); font-weight: 500; font-size: 0.82rem; }
    .wiz-opt .chev { margin-left: auto; color: var(--text-dim); font-size: 0.72rem; transition: transform .18s; }
    .wiz-opt[open] .chev { transform: rotate(90deg); }
    .wiz-opt .body { padding: 0 15px 15px; }
    .wiz-next { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .wiz-nx { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 14px 15px; }
    .wiz-nx .n { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700;
      color: var(--gold); letter-spacing: 0.1em; margin-bottom: 6px; }
    .wiz-nx b { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 2px; }
    .wiz-nx span { font-size: 0.79rem; color: var(--text-mid); line-height: 1.5; }
    .wiz-nx.is-now { border-color: rgba(240,165,0,0.45); background: rgba(240,165,0,0.08); }
    @media (max-width: 620px) { .wiz-next { grid-template-columns: 1fr; } }
    /* Generic branded placeholder shown once the resume is finalized -- the
       result step generates a real file rather than rendering a live editable
       preview, so this communicates "your download is ready" without trying
       to fake a PDF render in-browser. */
    .preview-card.preview-placeholder { display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 18px; background: #F4F6FC; }
    .preview-placeholder .pp-mark { width: 56px; height: 56px; border-radius: 28%; display: grid;
      place-items: center; background: #1A1A2E; position: relative; overflow: hidden; }
    .preview-placeholder .pp-mark::after { content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 42%, rgba(240,165,0,.28), transparent 62%); }
    .preview-placeholder .pp-mark .orb { width: 32px; height: 32px; position: relative; z-index: 1; }
    .preview-placeholder .pp-lines { width: 78%; display: flex; flex-direction: column; gap: 10px; }
    .preview-placeholder .pp-line { height: 10px; border-radius: 5px; background: #d7dde6; }
    .preview-placeholder .pp-line.short { width: 55%; }
    .preview-placeholder .pp-caption { font-family: "Sora", sans-serif; color: #64748b; font-size: 0.85rem; font-weight: 700; margin-top: 4px; }
    /* Generating the file takes anything from six seconds to a minute, and the only sign
       was one line of plain text under the buttons. A card with a spinner and a time
       expectation, in the same shape the score's processing page uses. */
    #download-status { margin-top: 14px; font-size: 0.9rem; color: var(--text-mid); }
    #download-status:empty { display: none; }
    #download-status.loading, #download-status.ok, #download-status.error { display: flex; align-items: flex-start; gap: 12px;
      border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2, rgba(255,255,255,0.03)); }
    #download-status.loading { color: var(--text); border-color: var(--tint-cyan-line, var(--border)); }
    #download-status.loading::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
      border: 2.5px solid var(--border-hi); border-top-color: var(--cyan); animation: wiz-spin .8s linear infinite; }
    #download-status.ok { color: var(--green); border-color: rgba(34,197,94,.35); }
    #download-status.error { color: #ff8a95; border-color: rgba(244,89,91,.35); }
    #download-status > span { min-width: 0; font-weight: 600; }
    #download-status small { display: block; color: var(--text-mid); margin-top: 2px; font-weight: 400; }
    @keyframes wiz-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { #download-status.loading::before { animation: none; border-top-color: var(--border-hi); } }
    /* Modern template: colored header band, bolder accent-colored section titles. */
    .preview-card.tmpl-modern .rp-header { background: linear-gradient(135deg,#eef4ff,#ffffff);
      margin: -6.2cqw -7cqw 2.8cqw; padding: 4cqw 7cqw 3cqw; border-radius: 3px 3px 0 0; border-bottom: 3px solid #2E6BFF; }
    .preview-card.tmpl-modern .rp-section-title { color: #2E6BFF; border-bottom: 2px solid #2E6BFF; }
    /* Two-column template: distinct DOM (sidebar + main), built by buildTwoColumnHtml(). */
    .rp-twocol { display: grid; grid-template-columns: 30% 1fr; gap: 4cqw; }
    .rp-twocol .rp-sidebar .rp-section-title { color: #2E6BFF; border-bottom-color: #cfe1fb; }
    .rp-twocol .rp-sidebar .rp-section:first-child { margin-top: 0; }

    /* ── The five formats. Same DOM per format as the PDF renderer lays out; sizes are
       the A4 sheet's CSS pixels expressed in container units (1px of 794 = 0.126cqw). */
    .preview-card.tmpl-ivy, .preview-card.tmpl-meridian, .preview-card.tmpl-atlas, .preview-card.tmpl-ledger, .preview-card.tmpl-signal { color: #1a1a1a; line-height: 1.4; }
    .preview-card .fm ul { margin: 0; padding: 0; } .preview-card .fm li { list-style: none; }
    .preview-card .fm .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5cqw; }
    .preview-card .fm .row .r { white-space: nowrap; }
    .preview-card .fm .ent { margin-bottom: 1.3cqw; } .preview-card .fm .sum { margin: 0; } .preview-card .fm p { margin: 0; }
    /* Running text is justified and hyphenated, as in the PDF: summaries, bullets, education
       lines, skill values. Names, headings, dates, labels and the Atlas sidebar stay ragged --
       justifying a short line only stretches its words apart. */
    .preview-card .fm .sum, .preview-card .fm li, .preview-card .fm .ent > p, .preview-card .fm .skills span, .preview-card .fm .skills > div, .preview-card .fm > p:not(.name):not(.title):not(.contact), .preview-card .body > p, .preview-card .main > p, .tmpl-ledger section > div > p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
    .preview-card .side p, .preview-card .side .chips, .preview-card .fm .row, .preview-card .fm .metrics, .preview-card .fm .contact { text-align: left; hyphens: manual; }
    /* Ivy */
    .preview-card.tmpl-ivy { font-family: "EB Garamond", Georgia, serif; padding: 6.55cqw 7.3cqw; font-size: 1.59cqw; line-height: 1.38; color: #111; }
    .tmpl-ivy .name { text-align: center; font-size: 3.4cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
    .tmpl-ivy .contact { text-align: center; font-size: 1.46cqw; margin-top: .6cqw; color: #333; } .tmpl-ivy .contact span + span::before { content: "  ·  "; color: #999; white-space: pre; }
    .tmpl-ivy h3 { font-size: 1.56cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid #111; padding-bottom: .25cqw; margin: 2.1cqw 0 .9cqw; }
    .tmpl-ivy .row b { font-weight: 600; } .tmpl-ivy .row i { font-style: italic; } .tmpl-ivy .row .r { font-size: 1.51cqw; }
    .tmpl-ivy li { padding-left: 1.6cqw; position: relative; margin: .25cqw 0; } .tmpl-ivy li::before { content: "•"; position: absolute; left: .25cqw; }
    .tmpl-ivy .sum { text-align: justify; } .tmpl-ivy .skills p { margin: .25cqw 0; } .tmpl-ivy .skills b { font-weight: 600; }
    /* Meridian */
    .preview-card.tmpl-meridian { font-family: "Inter", system-ui, sans-serif; padding: 0; font-size: 1.46cqw; line-height: 1.45; color: #1c1f26; overflow: hidden; }
    .tmpl-meridian .head { background: #12233f; color: #fff; padding: 4.28cqw 6.55cqw 3.27cqw; border-radius: 3px 3px 0 0; }
    .tmpl-meridian .head .name { font-size: 3.53cqw; font-weight: 600; letter-spacing: -.01em; } .tmpl-meridian .head .title { font-size: 1.7cqw; color: #b9c6e2; margin-top: .5cqw; font-weight: 500; }
    .tmpl-meridian .head .contact { margin-top: 1.5cqw; display: flex; flex-wrap: wrap; gap: .75cqw 2.27cqw; font-size: 1.39cqw; color: #dbe3f3; }
    .tmpl-meridian .body { padding: 3cqw 6.55cqw 5cqw; }
    .tmpl-meridian h3 { font-size: 1.32cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #12233f; margin: 2.27cqw 0 1cqw; display: flex; align-items: center; gap: 1.26cqw; }
    .tmpl-meridian h3::after { content: ""; flex: 1; height: 1px; background: #d6dbe6; } .tmpl-meridian h3:first-child { margin-top: 0; }
    .tmpl-meridian .row b { font-weight: 600; font-size: 1.55cqw; } .tmpl-meridian .row .org { color: #3a4358; } .tmpl-meridian .row .r { color: #5f6572; font-size: 1.39cqw; }
    .tmpl-meridian li { padding-left: 1.5cqw; position: relative; margin: .3cqw 0; color: #2a2f3a; } .tmpl-meridian li::before { content: ""; position: absolute; left: 0; top: .62em; width: .63cqw; height: .63cqw; border-radius: 50%; background: #2e6bff; }
    .tmpl-meridian .skills { display: grid; grid-template-columns: 16.4cqw 1fr; gap: .5cqw 1.76cqw; } .tmpl-meridian .skills b { font-weight: 600; color: #12233f; }
    .tmpl-meridian .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.8cqw; }
    /* Atlas */
    .preview-card.tmpl-atlas { font-family: "Manrope", system-ui, sans-serif; display: grid; grid-template-columns: 30cqw 1fr; padding: 0; font-size: 1.44cqw; line-height: 1.45; color: #1e2229; overflow: hidden; }
    .tmpl-atlas .side { background: #f2f4f7; padding: 5.5cqw 3.27cqw 5cqw; border-right: 1px solid #e3e6ec; } .tmpl-atlas .main { padding: 5.5cqw 5cqw 5cqw 4.28cqw; }
    .tmpl-atlas .name { font-size: 3.02cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; } .tmpl-atlas .title { font-size: 1.51cqw; font-weight: 600; color: #2e6bff; margin-top: .75cqw; }
    .tmpl-atlas h3 { font-size: 1.28cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #1e2229; margin: 2.77cqw 0 1cqw; }
    .tmpl-atlas .main h3 { border-bottom: 2px solid #1e2229; padding-bottom: .5cqw; } .tmpl-atlas .main h3:first-child { margin-top: 0; }
    .tmpl-atlas .side p { margin: .38cqw 0; color: #3a4150; } .tmpl-atlas .side .k { font-weight: 700; color: #1e2229; margin-top: 1cqw; }
    .tmpl-atlas .chips { display: flex; flex-wrap: wrap; gap: .63cqw; } .tmpl-atlas .chips span { background: #fff; border: 1px solid #d9dde5; border-radius: 4px; padding: .25cqw .88cqw; font-size: 1.34cqw; font-weight: 600; }
    .tmpl-atlas .row b { font-weight: 800; font-size: 1.54cqw; } .tmpl-atlas .org { color: #4a5262; font-weight: 600; } .tmpl-atlas .row .r { color: #6b7280; font-size: 1.36cqw; }
    .tmpl-atlas li { padding-left: 1.39cqw; position: relative; margin: .3cqw 0; } .tmpl-atlas li::before { content: "–"; position: absolute; left: 0; color: #2e6bff; font-weight: 800; }
    /* Atlas past page one. The sidebar is printed once, so a continuation page carries only the
       main column -- but the card is still a two-column grid, and a lone child lands in the first
       of those columns, which is the narrow one. Every page after the first was squeezing the
       resume into the 30cqw strip meant for contact details. Continuation pages are one column. */
    .preview-card.tmpl-atlas.cont { grid-template-columns: 1fr; }
    .tmpl-atlas.cont .main { padding: 5.5cqw 5cqw 5cqw 5cqw; }
    /* Ledger */
    .preview-card.tmpl-ledger { font-family: "IBM Plex Sans", system-ui, sans-serif; padding: 6.3cqw 6.8cqw 5.5cqw; font-size: 1.45cqw; line-height: 1.45; color: #161a20; }
    .tmpl-ledger .name { font-size: 3.78cqw; font-weight: 600; letter-spacing: -.025em; line-height: 1; } .tmpl-ledger .title { font-family: "IBM Plex Mono", monospace; font-size: 1.39cqw; color: #5a616d; margin-top: 1cqw; letter-spacing: .02em; }
    .tmpl-ledger .contact { font-family: "IBM Plex Mono", monospace; font-size: 1.31cqw; color: #5a616d; margin-top: 2.27cqw; display: flex; gap: 2cqw; flex-wrap: wrap; padding-bottom: 2cqw; border-bottom: 2px solid #161a20; }
    .tmpl-ledger section { display: grid; grid-template-columns: 14.9cqw 1fr; gap: 0 2.77cqw; padding: 1.76cqw 0; border-bottom: 1px solid #e1e3e8; }
    .tmpl-ledger section h3 { font-family: "IBM Plex Mono", monospace; font-size: 1.31cqw; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5a616d; margin: .25cqw 0 0; }
    .tmpl-ledger .row b { font-weight: 600; font-size: 1.54cqw; } .tmpl-ledger .row .org { color: #3f4653; } .tmpl-ledger .row .r { font-family: "IBM Plex Mono", monospace; font-size: 1.28cqw; color: #5a616d; }
    .tmpl-ledger li { padding-left: 1.5cqw; position: relative; margin: .3cqw 0; } .tmpl-ledger li::before { content: "—"; position: absolute; left: 0; color: #9aa0ab; }
    .tmpl-ledger .skills { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw 2.27cqw; } .tmpl-ledger .skills b { font-weight: 600; }
    /* Signal */
    .preview-card.tmpl-signal { font-family: "Work Sans", system-ui, sans-serif; padding: 5.8cqw 6.8cqw 5.3cqw; font-size: 1.44cqw; line-height: 1.45; color: #1f2126; }
    .tmpl-signal .name { font-family: "Fraunces", Georgia, serif; font-size: 3.9cqw; font-weight: 500; letter-spacing: -.01em; line-height: 1.05; } .tmpl-signal .name em { font-style: italic; color: #b3541e; }
    .tmpl-signal .title { font-size: 1.57cqw; font-weight: 600; margin-top: .75cqw; color: #3b3f48; }
    .tmpl-signal .contact { font-size: 1.36cqw; color: #5f6572; margin-top: 1cqw; display: flex; gap: 1.76cqw; flex-wrap: wrap; }
    .tmpl-signal .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.26cqw; margin: 2.27cqw 0 .75cqw; }
    .tmpl-signal .metrics div { border-top: 2px solid #b3541e; padding-top: .75cqw; } .tmpl-signal .metrics b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 2.4cqw; font-weight: 700; line-height: 1.1; } .tmpl-signal .metrics span { font-size: 1.31cqw; color: #5f6572; }
    .tmpl-signal h3 { font-family: "Fraunces", Georgia, serif; font-size: 1.76cqw; font-weight: 700; margin: 2.27cqw 0 .9cqw; display: flex; align-items: center; gap: 1.26cqw; } .tmpl-signal h3::after { content: ""; flex: 1; height: 1px; background: #e2dccf; }
    .tmpl-signal .row b { font-weight: 600; font-size: 1.54cqw; } .tmpl-signal .row .org { color: #4a4f5a; } .tmpl-signal .row .r { font-size: 1.36cqw; color: #6b7280; }
    .tmpl-signal li { padding-left: 1.5cqw; position: relative; margin: .3cqw 0; } .tmpl-signal li::before { content: "•"; position: absolute; left: 0; color: #b3541e; }
    .tmpl-signal .skills { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75cqw 2cqw; } .tmpl-signal .skills b { display: block; font-size: 1.31cqw; text-transform: uppercase; letter-spacing: .08em; color: #b3541e; margin-bottom: .25cqw; }
    .tmpl-signal .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.27cqw; }
    /* Pagination: every page the PDF will have, as its own sheet. A split entry keeps
       its heading rows on one page and lets bullets continue on the next. */
    .preview-card.page-extra { margin-top: 18px; }