/* ==========================================================================
   Vision in 60 Seconds — styles
   Part 1: screen UI (light, calm, professional)
   Part 2: document (shared by on-screen preview and print)
   Part 3: @media print
   ========================================================================== */

:root {
    /* Fonts */
    --font-display: "Newsreader", Georgia, serif;
    --font-cormorant: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Palette */
    --cream: #F5F3EF;
    --ink: #1f1a17;
    --ink-soft: #5a5048;
    --ink-mute: #8a8077;
    --ink-faint: #c8c2b8;
    --accent: #2BBFBF;
    --accent-dark: #239f9f;
    --accent-tint: #e8f8f8;

    /* Aliases used throughout */
    --bg: var(--cream);
    --panel: #fbfaf7;
    --muted: var(--ink-soft);
    --faint: var(--ink-mute);
    --line: var(--ink-faint);

    /* Status colours */
    --green: #15803d;
    --orange: #b45309;
    --red: #b91c1c;

    --radius: 4px;
    --shadow: 0 1px 3px rgba(31, 26, 23, 0.07), 0 1px 2px rgba(31, 26, 23, 0.04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--cream);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }

button { font: inherit; }

/* ---------- Header ---------- */

.app-header {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.app-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--accent-tint);
    color: var(--accent-dark);
    border-radius: 6px;
}
.brand-mark svg { width: 26px; height: 26px; }

.brand h1 { font-family: var(--font-display); font-size: 24px; font-weight: 300; letter-spacing: -0.015em; }
.tagline { margin: 2px 0 0; color: var(--ink-soft); font-size: 14.5px; }

.privacy-note {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--green);
    background: #f0f8f2;
    border: 1px solid #d3e9da;
    border-radius: 999px;
    padding: 7px 14px;
}
.privacy-icon { display: inline-flex; }
.privacy-icon svg { width: 15px; height: 15px; }

/* ---------- Layout ---------- */

.app-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 24px;
    align-items: start;
}

.builder { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.panel {
    background: var(--panel);
    border: 1px solid var(--ink-faint);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 24px;
}

.step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 16px;
}

.step-num {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--accent-tint);
    color: var(--accent-dark);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
}

.selection-count {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-tint);
    border-radius: 999px;
    padding: 3px 12px;
}

.panel-intro { margin: -6px 0 16px; color: var(--muted); font-size: 14.5px; }

/* ---------- Form ---------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field label, .challenges-fieldset legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.hint { font-weight: 400; color: var(--faint); }

.field input, .field textarea, .field select {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    border: 1px solid var(--ink-faint);
    border-radius: 3px;
    padding: 9px 12px;
    background: #fff;
    width: 100%;
}

.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }

.field textarea { resize: vertical; }

.challenges-fieldset {
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    padding: 12px 14px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.challenges-fieldset legend { padding: 0 6px; }

.challenge-row { display: flex; flex-direction: column; gap: 4px; }
.challenge-label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.challenge-row input {
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--ink-faint);
    border-radius: 3px;
    padding: 8px 12px;
    width: 100%;
}
.challenge-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dot-green { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-red { background: var(--red); }

/* ---------- Wording editor (per-profile overrides) ---------- */

.override-empty { margin: 0; color: var(--muted); font-size: 14.5px; }

.override-card {
    border: 1px solid var(--ink-faint);
    border-radius: 6px;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
}
.override-card:last-child { margin-bottom: 0; }

.override-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}
.override-card-head .doc-strategy-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.override-card-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; flex: 1 1 auto; }

.override-reset {
    font: inherit;
    font-size: 13px;
    color: var(--accent);
    background: none;
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    padding: 4px 9px;
    cursor: pointer;
}
.override-reset:hover { border-color: var(--accent); }

.override-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.override-field:last-child { margin-bottom: 0; }
.override-field > span { font-size: 13px; font-weight: 600; color: var(--ink); }
.override-field input, .override-field textarea {
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    border: 1px solid var(--ink-faint);
    border-radius: 3px;
    padding: 7px 10px;
    background: #fff;
    width: 100%;
}
.override-field input + input { margin-top: 5px; }
.override-field input:focus-visible, .override-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.override-field textarea { resize: vertical; }

/* ---------- Strategy selection ---------- */

.category-group { margin-bottom: 18px; }
.category-group:last-child { margin-bottom: 0; }

.category-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 10px;
}
.category-heading .dot { width: 9px; height: 9px; }

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.strategy-card {
    --cat: var(--accent);
    --cat-tint: var(--accent-tint);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    padding: 12px 14px;
    cursor: pointer;
    color: var(--ink);
    position: relative;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.strategy-card:hover { border-color: var(--cat); box-shadow: var(--shadow); }
.strategy-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.strategy-card .strategy-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: var(--cat-tint);
    color: var(--cat);
}
.strategy-card .strategy-icon svg { width: 21px; height: 21px; }

.strategy-card .strategy-name { font-weight: 600; font-size: 15px; display: block; }
.strategy-card .strategy-short { font-size: 13.5px; color: var(--ink-soft); display: block; margin-top: 1px; }

.strategy-card .strategy-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cat);
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.strategy-card .strategy-check svg { width: 12px; height: 12px; stroke-width: 3; }

.strategy-card[aria-pressed="true"] {
    border-color: var(--cat);
    background: var(--cat-tint);
}
.strategy-card[aria-pressed="true"] .strategy-check { opacity: 1; transform: scale(1); }

/* ---------- Theme picker ---------- */

.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: var(--panel);
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    padding: 12px 8px 10px;
    cursor: pointer;
}
.theme-swatch:hover { border-color: var(--ink-mute); box-shadow: var(--shadow); }
.theme-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }

.theme-swatch-card {
    width: 44px;
    height: 64px;
    border: 3px solid;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.theme-swatch-band { width: 100%; height: 18px; }
.theme-swatch-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.theme-swatch-deco { margin-top: -14px; height: 12px; display: flex; }
.theme-swatch-deco svg { width: 11px; height: 11px; }

.theme-swatch-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.theme-swatch[aria-pressed="true"] .theme-swatch-label { color: var(--accent); }

/* ---------- Output toggles ---------- */

.output-toggles { display: flex; gap: 14px; flex-wrap: wrap; }
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------- Saved profiles ---------- */

.saved-empty { color: var(--faint); font-size: 14.5px; margin: 0; }

.saved-list { display: flex; flex-direction: column; gap: 8px; }

.saved-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ink-faint);
    border-radius: 4px;
    padding: 10px 14px;
}

.saved-initials {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--accent-tint);
    color: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
}

.saved-details { min-width: 0; flex: 1; }
.saved-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-meta { font-size: 13px; color: var(--faint); }

.saved-actions { display: flex; gap: 4px; }

.icon-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--ink-soft);
    cursor: pointer;
}
.icon-btn:hover { background: rgba(31,26,23,0.06); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); }
.icon-btn.danger:hover { background: #fdeeee; color: var(--red); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Preview pane ---------- */

.preview-pane {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}
.btn-icon { display: inline-flex; }
.btn-icon svg { width: 16px; height: 16px; }

.btn-primary { background: var(--accent-tint); color: var(--accent-dark); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.btn-secondary:hover { background: var(--panel); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: rgba(31,26,23,0.06); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.preview-hint { margin: 0; font-size: 13px; color: var(--faint); }

.preview-viewport {
    border: 1px solid var(--ink-faint);
    border-radius: 6px;
    background: #e8e4dc;
    padding: 16px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.preview-pages { display: flex; flex-direction: column; gap: 16px; }
.preview-pages .page { box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18); }

/* ---------- Footer / dialog / toast ---------- */

.app-footer {
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 24px 28px;
    color: var(--faint);
    font-size: 13px;
}
.app-footer p { margin: 0; }

dialog {
    border: none;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(31, 26, 23, 0.15);
    padding: 24px;
    width: min(420px, 90vw);
}
dialog::backdrop { background: rgba(16, 24, 40, 0.45); }
.dialog-form { display: flex; flex-direction: column; gap: 14px; }
.dialog-form h2 { font-size: 18px; }
.dialog-note { margin: 0; font-size: 13px; color: var(--faint); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
    .app-main { grid-template-columns: 1fr; }
    .preview-pane { position: static; }
    .preview-viewport { max-height: none; }
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px; }
}

/* The print document itself is hidden on screen; the preview shows a copy. */
#print-document { display: none; }

/* ==========================================================================
   Part 2: DOCUMENT — shared by preview and print. All sizes in mm so the
   on-screen preview is a faithful render of the printed page.
   ========================================================================== */

.page {
    width: 210mm;
    height: 297mm;
    background: #fff;
    color: #1f1a17;
    font-family: var(--font-sans);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page * { box-sizing: border-box; }

/* ----- shared document pieces ----- */

.doc-band {
    background: var(--accent-tint);
    color: var(--ink);
    padding: 9mm 14mm 8mm;
    display: flex;
    align-items: center;
    gap: 7mm;
    flex: 0 0 auto;
}

.doc-initials {
    width: 19mm;
    height: 19mm;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 7mm;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1;
}
.doc-initials.small-text { font-size: 4.6mm; }

.doc-band-title h1 { font-size: 8.4mm; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.doc-band-title p { margin: 1.2mm 0 0; font-size: 4mm; color: var(--ink-soft); }

.doc-band-brand {
    margin-left: auto;
    text-align: right;
    font-size: 3.2mm;
    color: var(--ink-soft);
    line-height: 1.4;
    align-self: flex-end;
}

.doc-body { padding: 8mm 14mm; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6mm; min-height: 0; overflow: hidden; }

.doc-section-title {
    font-size: 3.4mm;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a8077;
    margin: 0 0 2.5mm;
    display: flex;
    align-items: center;
    gap: 2.5mm;
}
.doc-section-title::after { content: ""; flex: 1; height: 0.35mm; background: #c8c2b8; }

.doc-footer {
    flex: 0 0 auto;
    border-top: 0.4mm solid #c8c2b8;
    margin: 0 14mm;
    padding: 3.5mm 0 6mm;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6mm;
    font-size: 3.3mm;
    color: #5a5048;
}
.doc-footer .doc-footer-brand { color: #8a8077; }
.doc-footer strong { color: #1f1a17; }

/* ----- page 1: profile sheet ----- */

.key-message {
    background: #f5f3ef;
    border-left: 1.6mm solid #2BBFBF;
    border-radius: 0 2mm 2mm 0;
    padding: 4.5mm 6mm;
    font-size: 5.4mm;
    font-weight: 600;
    line-height: 1.35;
    color: #1f1a17;
}
.key-message .km-label {
    display: block;
    font-size: 3.1mm;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5a5048;
    margin-bottom: 1.5mm;
}

.doc-strategy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm 6mm;
}

.doc-strategy {
    display: flex;
    gap: 3.2mm;
    align-items: flex-start;
    break-inside: avoid;
}

.doc-strategy-icon {
    width: 9mm;
    height: 9mm;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.2mm;
}
.doc-strategy-icon svg { width: 5.4mm; height: 5.4mm; }

.doc-strategy-name { font-weight: 700; font-size: 4.1mm; line-height: 1.3; }
.doc-strategy-short { font-size: 3.5mm; color: #5a5048; line-height: 1.35; margin-top: 0.4mm; }

/* step-down when many strategies are selected */
.page-profile.dense .doc-strategy-grid { gap: 2.2mm 5mm; }
.page-profile.dense .doc-strategy-icon { width: 7.5mm; height: 7.5mm; }
.page-profile.dense .doc-strategy-icon svg { width: 4.6mm; height: 4.6mm; }
.page-profile.dense .doc-strategy-name { font-size: 3.7mm; }
.page-profile.dense .doc-strategy-short { font-size: 3.2mm; }
.page-profile.dense .doc-body { gap: 4.5mm; }

.doc-glance { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm; }

.doc-glance-item {
    border: 0.4mm solid #c8c2b8;
    border-top-width: 1.2mm;
    border-radius: 2mm;
    padding: 3mm 3.5mm;
}
.doc-glance-item.glance-green { border-top-color: #15803d; }
.doc-glance-item.glance-orange { border-top-color: #b45309; }
.doc-glance-item.glance-red { border-top-color: #b91c1c; }

.doc-glance-label { font-size: 3.1mm; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.2mm; }
.glance-green .doc-glance-label { color: #15803d; }
.glance-orange .doc-glance-label { color: #b45309; }
.glance-red .doc-glance-label { color: #b91c1c; }
.doc-glance-text { font-size: 3.6mm; line-height: 1.4; }

.doc-notes-text { font-size: 3.8mm; line-height: 1.5; color: #1f1a17; }

.doc-empty-hint {
    color: #8a8077;
    font-size: 4mm;
    font-style: italic;
    padding: 6mm;
    text-align: center;
    border: 0.5mm dashed #c8c2b8;
    border-radius: 2mm;
}

/* ----- page 2 in spirit, now page 1: the wheelchair card sheet ----- */

.page-card { font-family: "Nunito", "Source Sans 3", system-ui, sans-serif; }

.cardsheet-header {
    padding: 10mm 14mm 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10mm;
}

.cardsheet-brand { display: flex; align-items: center; gap: 4mm; }
.cardsheet-roundel {
    width: 13mm;
    height: 13mm;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e3a8a;
    color: #fff;
}
.cardsheet-roundel svg { width: 7.5mm; height: 7.5mm; }
.cardsheet-brand h2 { font-size: 6.4mm; font-weight: 900; margin: 0; letter-spacing: -0.01em; color: #1f2733; }
.cardsheet-brand p { margin: 0.8mm 0 0; font-size: 3.6mm; color: #5a6472; max-width: 86mm; line-height: 1.4; }

.cardsheet-steps {
    margin: 0;
    padding-left: 5mm;
    font-size: 3.2mm;
    color: #5a6472;
    line-height: 1.65;
    max-width: 62mm;
}

.cardsheet-faces {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10mm;
    padding: 4mm 0 8mm;
}

.face-cutout {
    border: 0.5mm dashed #9ca3af;
    border-radius: 18mm;
    padding: 3mm;
    position: relative;
}

.face-scissors {
    position: absolute;
    top: -2.6mm;
    left: 18mm;
    width: 5.2mm;
    height: 5.2mm;
    color: #6b7280;
    background: #fff;
    transform: rotate(90deg);
}
.face-scissors svg { width: 100%; height: 100%; }

/* ----- the card face itself ----- */

.vcard {
    width: 66mm;
    height: 145mm;
    border: 2.4mm solid var(--th-border);
    border-radius: 15mm;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #1f2733;
}

.vcard-head {
    background: var(--th-head-tint);
    padding: 4.5mm 4mm 3.5mm;
    text-align: center;
    flex: 0 0 auto;
}

.vcard-initials {
    width: 13.5mm;
    height: 13.5mm;
    margin: 0 auto 1.8mm;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--th-accent);
    color: var(--th-accent-ink);
    border: 0.7mm solid var(--th-head);
    font-weight: 900;
    font-size: 5mm;
    line-height: 1;
    letter-spacing: 0.01em;
}
.vcard-initials.small-text { font-size: 3.2mm; }

.vcard-headline {
    margin: 0;
    font-size: 5.2mm;
    font-weight: 900;
    line-height: 1.12;
    color: var(--th-head);
    letter-spacing: -0.005em;
    text-wrap: balance;
}
.vcard-back .vcard-headline { font-size: 4.8mm; }

.face-deco {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: 2.6mm;
    padding: 1.6mm 0 0.4mm;
}
.face-deco svg { width: 3.6mm; height: 3.6mm; }

.vcard-tiles {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.6mm;
    padding: 2.5mm 4mm;
}

.vtile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2.6mm;
    background: var(--tile-fill);
    border: 0.55mm solid var(--tile-line);
    border-radius: 3.2mm;
    padding: 1.8mm 2.6mm;
    box-shadow: 0.7mm 0.7mm 0 rgba(31, 39, 51, 0.14);
}

.vtile-icon {
    width: 7.6mm;
    height: 7.6mm;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    color: var(--tile-line);
}
.vtile-icon svg { width: 4.6mm; height: 4.6mm; }

.vtile-name {
    font-weight: 800;
    font-size: 3.9mm;
    line-height: 1.12;
    color: #1f2733;
}

/* tile density step-downs */
.vcard-tiles.tiles-md { gap: 1.8mm; }
.vcard-tiles.tiles-md .vtile { padding: 1.2mm 2.4mm; }
.vcard-tiles.tiles-md .vtile-icon { width: 6mm; height: 6mm; }
.vcard-tiles.tiles-md .vtile-icon svg { width: 3.8mm; height: 3.8mm; }
.vcard-tiles.tiles-md .vtile-name { font-size: 3.4mm; }

.vcard-tiles.tiles-sm { gap: 1.2mm; }
.vcard-tiles.tiles-sm .vtile { padding: 0.7mm 2mm; border-radius: 2.4mm; box-shadow: 0.5mm 0.5mm 0 rgba(31, 39, 51, 0.14); }
.vcard-tiles.tiles-sm .vtile-icon { width: 4.2mm; height: 4.2mm; }
.vcard-tiles.tiles-sm .vtile-icon svg { width: 2.9mm; height: 2.9mm; }
.vcard-tiles.tiles-sm .vtile-name { font-size: 2.9mm; }

.vcard-tiles.tiles-xs { gap: 0.9mm; padding-top: 1.6mm; padding-bottom: 1.6mm; }
.vcard-tiles.tiles-xs .vtile { padding: 0.45mm 1.6mm; border-radius: 2mm; border-width: 0.4mm; box-shadow: none; }
.vcard-tiles.tiles-xs .vtile-icon { width: 3.1mm; height: 3.1mm; }
.vcard-tiles.tiles-xs .vtile-icon svg { width: 2.2mm; height: 2.2mm; }
.vcard-tiles.tiles-xs .vtile-name { font-size: 2.6mm; line-height: 1.05; }

/* very full cards: shrink the header to give the tiles room */
.vcard:has(.tiles-xs) .vcard-initials { width: 10mm; height: 10mm; font-size: 3.8mm; margin-bottom: 1.2mm; }
.vcard:has(.tiles-xs) .vcard-headline { font-size: 4.4mm; }
.vcard:has(.tiles-xs) .vcard-head { padding: 3mm 4mm 2.5mm; }
.vcard:has(.tiles-xs) .vcard-foot { padding: 1mm 4mm 2mm; }

.vcard-empty {
    color: #8a93a1;
    font-size: 3.2mm;
    font-style: italic;
    text-align: center;
    padding: 4mm;
    border: 0.4mm dashed #cdd4dd;
    border-radius: 3mm;
    font-family: "Source Sans 3", system-ui, sans-serif;
}

.vcard-foot {
    flex: 0 0 auto;
    padding: 1.8mm 4mm 3mm;
    display: flex;
    justify-content: center;
}

.vcard-brand {
    display: inline-flex;
    align-items: center;
    gap: 1.4mm;
    font-size: 2.8mm;
    color: #8a93a1;
}
.vcard-brand svg { width: 3.4mm; height: 3.4mm; }
.vcard-brand strong { color: #5a6472; }

.vcard-contact {
    font-size: 2.7mm;
    color: #5a6472;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
}

/* ----- back face ----- */

.vcard-back-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3mm;
    padding: 3mm 4mm 1mm;
}

.vcard-rag { display: flex; flex-direction: column; gap: 2.4mm; }

.rag-item { display: flex; gap: 2mm; align-items: flex-start; }
.rag-dot {
    width: 3.4mm;
    height: 3.4mm;
    flex: 0 0 auto;
    border-radius: 50%;
    margin-top: 0.9mm;
}
.rag-item p {
    margin: 0;
    font-size: 3.2mm;
    line-height: 1.32;
    font-weight: 600;
}

.vcard-target {
    border: 0.5mm dashed var(--th-border);
    border-radius: 2.6mm;
    padding: 2.2mm 2.8mm 2.4mm;
}
.vcard-target-label {
    display: flex;
    align-items: center;
    gap: 1.6mm;
    font-size: 2.9mm;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-head);
    margin-bottom: 1mm;
}
.vcard-target-icon { display: inline-flex; }
.vcard-target-icon svg { width: 3.4mm; height: 3.4mm; }
.vcard-target p { margin: 0; font-size: 3.1mm; line-height: 1.32; font-weight: 600; }

.vcard-qr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3mm;
    padding: 1mm 4mm 0.5mm;
}
.vcard-qr-code {
    width: 17mm;
    height: 17mm;
    padding: 1.2mm;
    background: #fff;
    border: 0.4mm solid #e2e6ec;
    border-radius: 1.6mm;
}
.vcard-qr-code svg { width: 100%; height: 100%; display: block; }
.vcard-qr-label {
    font-size: 2.9mm;
    font-weight: 800;
    line-height: 1.25;
    color: var(--th-head);
}

/* ----- page 3+: glossary ----- */

.glossary-entries { display: flex; flex-direction: column; gap: 5.5mm; }

.glossary-entry { break-inside: avoid; }

.glossary-entry-head {
    display: flex;
    align-items: center;
    gap: 3mm;
    margin-bottom: 2mm;
}
.glossary-entry-head .doc-strategy-icon { width: 8mm; height: 8mm; }
.glossary-entry-head .doc-strategy-icon svg { width: 4.8mm; height: 4.8mm; }
.glossary-entry-head h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 5mm; font-weight: 500; margin: 0; }
.glossary-entry-head .glossary-cat {
    margin-left: auto;
    font-size: 2.9mm;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a8077;
}

.glossary-entry p { margin: 0 0 1.6mm; font-size: 3.5mm; line-height: 1.45; }
.glossary-entry p strong { color: #2BBFBF; }

.glossary-try { margin: 0.6mm 0 0; padding-left: 4.5mm; font-size: 3.5mm; line-height: 1.45; }
.glossary-try li { margin-bottom: 0.8mm; }
.glossary-try-label { font-size: 3.1mm; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5a5048; margin: 1mm 0 0.8mm; }

/* ----- "Tell me I'm Wrong!" recording sheet ----- */

.rec-intro {
    background: #f5f3ef;
    border-left: 1.6mm solid #1f1a17;
    border-radius: 0 2mm 2mm 0;
    padding: 3.5mm 5mm;
}
.rec-intro p { margin: 0; font-size: 3.7mm; line-height: 1.45; color: #1f1a17; }
.rec-intro strong { color: #1f1a17; }
.rec-return { margin-top: 1.6mm !important; font-size: 3.3mm !important; color: #5a5048 !important; }

.rec-blocks { display: flex; flex-direction: column; gap: 4mm; }

.rec-block {
    border: 0.4mm solid #c8c2b8;
    border-radius: 2.5mm;
    padding: 2.8mm 3.5mm 2.5mm;
    break-inside: avoid;
}

.rec-block-head {
    display: flex;
    align-items: center;
    gap: 3mm;
    margin-bottom: 1.5mm;
}

.rec-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2mm;
    background: var(--tile-fill);
    border: 0.5mm solid var(--tile-line);
    border-radius: 2.6mm;
    padding: 1.2mm 2.6mm;
    font-family: "Nunito", "Source Sans 3", system-ui, sans-serif;
}
.rec-tile-icon {
    width: 5.6mm;
    height: 5.6mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    color: var(--tile-line);
}
.rec-tile-icon svg { width: 3.6mm; height: 3.6mm; }
.rec-tile-name { font-weight: 800; font-size: 3.4mm; color: #1f2733; }

.rec-short { font-size: 3.1mm; color: #5a5048; line-height: 1.3; flex: 1 1 auto; }

.rec-date {
    flex: 0 0 auto;
    font-size: 3mm;
    color: #5a5048;
    display: inline-flex;
    align-items: baseline;
    gap: 1.5mm;
    white-space: nowrap;
}
.rec-date-line { display: inline-block; width: 18mm; border-bottom: 0.35mm solid #c8c2b8; }

.rec-lines { display: flex; flex-direction: column; }
.rec-line { height: 7mm; border-bottom: 0.3mm solid #c8c2b8; position: relative; }
.rec-line-label {
    position: absolute;
    top: 0.6mm;
    left: 0;
    font-size: 2.8mm;
    color: #c8c2b8;
    font-style: italic;
}

.rec-verdict {
    display: flex;
    align-items: center;
    gap: 5mm;
    padding-top: 1.8mm;
}
.rec-verdict-prompt { font-size: 3mm; font-weight: 700; color: #1f1a17; margin-right: 1mm; }
.rec-verdict-option {
    display: inline-flex;
    align-items: center;
    gap: 1.6mm;
    font-size: 3mm;
    font-weight: 600;
    color: #1f1a17;
}
.rec-circle {
    width: 4.2mm;
    height: 4.2mm;
    border: 0.5mm solid;
    border-radius: 50%;
    background: #fff;
}

/* ==========================================================================
   Part 3: PRINT
   ========================================================================== */

@media print {
    @page { size: A4 portrait; margin: 0; }

    html, body { background: #fff; margin: 0; }

    body > *:not(#print-document) { display: none !important; }

    #print-document { display: block; }

    .page {
        page-break-after: always;
        box-shadow: none;
        margin: 0;
    }
    .page:last-child { page-break-after: auto; }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}