/* ═══════════════════════════════════════════════════════════════════
   Ad-Hoc HTML CV Studio - Stylesheet
   Covers Studio Workspace UI, 4 Design Archetypes & Print Media
   ═══════════════════════════════════════════════════════════════════ */

/* --- Studio Workspace Layout --- */
.adhoc-studio-container {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 20px;
    height: calc(100vh - 140px);
    min-height: 700px;
}

@media (max-width: 1024px) {
    .adhoc-studio-container {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.adhoc-control-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.adhoc-preview-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.adhoc-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.adhoc-canvas-viewport {
    flex: 1;
    overflow-y: auto;
    background: #525659;
    border-radius: 8px;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* --- Archetype Selector Buttons --- */
.archetype-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.archetype-btn {
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-color);
}

.archetype-btn:hover {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.archetype-btn.active {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.archetype-btn strong {
    font-size: 0.88em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.archetype-btn span {
    font-size: 0.74em;
    opacity: 0.75;
    line-height: 1.2;
}

/* --- Density Segmented Control --- */
.density-segmented-control {
    display: flex;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.density-option-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 8px;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--text-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.density-option-btn.active {
    background: #2563eb;
    color: #fff;
    font-weight: 600;
}

/* --- Color Accent Pills --- */
.accent-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.accent-swatch:hover {
    transform: scale(1.15);
}

.accent-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px #2563eb;
}

/* ═══════════════════════════════════════════════════════════════════
   THE RENDERED AD-HOC CV DOCUMENT (THE SHEET)
   ═══════════════════════════════════════════════════════════════════ */
.adhoc-cv-sheet {
    /* Design Tokens (CSS Variables) overridden by Density & Archetype */
    --cv-bg: #FFFFFF;
    --cv-text: #1F2428;
    --cv-text-muted: #57606A;
    --cv-border: #D0D7DE;
    --cv-accent: #1E293B;
    --cv-banner-bg: #F3F4F6;
    --cv-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --cv-heading-font: 'Inter', system-ui, sans-serif;
    --cv-code-font: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Density Default: Balanced */
    --cv-font-base: 9.75pt;
    --cv-line-height: 1.32;
    --cv-section-gap: 12px;
    --cv-item-gap: 8px;
    --cv-bullet-gap: 3px;
    --cv-page-padding: 16mm 18mm;

    width: 210mm;
    min-height: 297mm;
    background: var(--cv-bg);
    color: var(--cv-text);
    font-family: var(--cv-font-family);
    font-size: var(--cv-font-base);
    line-height: var(--cv-line-height);
    padding: var(--cv-page-padding);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    position: relative;
}

/* --- Density Modifiers --- */
.adhoc-cv-sheet[data-density="compact"] {
    --cv-font-base: 9.15pt;
    --cv-line-height: 1.24;
    --cv-section-gap: 8px;
    --cv-item-gap: 5px;
    --cv-bullet-gap: 2px;
    --cv-page-padding: 12mm 14mm;
}

.adhoc-cv-sheet[data-density="spacious"] {
    --cv-font-base: 10.2pt;
    --cv-line-height: 1.38;
    --cv-section-gap: 16px;
    --cv-item-gap: 12px;
    --cv-bullet-gap: 5px;
    --cv-page-padding: 20mm 20mm;
}

/* --- Section Structure --- */
.adhoc-cv-sheet section {
    margin-bottom: var(--cv-section-gap);
}

.adhoc-cv-sheet .section-banner {
    margin-bottom: 6px;
}

.adhoc-cv-sheet .section-banner h2 {
    margin: 0;
    font-family: var(--cv-heading-font);
    font-size: 10.2pt;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- Header Component --- */
.adhoc-cv-header {
    text-align: center;
    margin-bottom: calc(var(--cv-section-gap) * 1.1);
}

.adhoc-cv-header h1 {
    font-family: var(--cv-heading-font);
    font-size: 19pt;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    color: var(--cv-accent);
}

.adhoc-contact-bar {
    font-size: 9.3pt;
    color: var(--cv-text-muted);
    margin-bottom: 6px;
}

.adhoc-target-title {
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--cv-text);
    margin-bottom: 4px;
}

.adhoc-tagline-bar {
    font-size: 9.5pt;
    font-weight: 600;
    color: var(--cv-accent);
}

/* --- Narrative Summary Paragraphs --- */
.adhoc-summary-text p {
    margin: 0 0 6px 0;
    text-align: justify;
}
.adhoc-summary-text p:last-child {
    margin-bottom: 0;
}

/* --- Accomplishments List --- */
.adhoc-accomplishment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cv-bullet-gap);
}

.adhoc-accomplishment-list li {
    position: relative;
    padding-left: 14px;
    text-align: justify;
}

.adhoc-accomplishment-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--cv-accent);
    font-weight: bold;
}

/* --- Technical Expertise Matrix --- */
.adhoc-skills-matrix {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 9.3pt;
}

.adhoc-skill-category-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 2px 0;
}

.adhoc-skill-cat-name {
    font-weight: 700;
    color: var(--cv-accent);
    white-space: nowrap;
}

.adhoc-skill-cat-items {
    color: var(--cv-text);
}

/* --- Detailed Job Entries --- */
.adhoc-job-entry {
    margin-bottom: var(--cv-item-gap);
    page-break-inside: avoid;
    break-inside: avoid;
}

.adhoc-job-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

.adhoc-job-company {
    font-weight: 800;
    font-size: 10.8pt;
    color: var(--cv-accent);
}

.adhoc-job-client {
    font-weight: 600;
    color: var(--cv-text-muted);
}

.adhoc-job-subline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.adhoc-job-title {
    font-weight: 700;
    font-size: 10pt;
    color: var(--cv-text);
}

.adhoc-job-dates {
    font-size: 9.2pt;
    color: var(--cv-text-muted);
    font-style: italic;
    white-space: nowrap;
}

.adhoc-job-narrative {
    margin: 0 0 5px 0;
    font-size: 9.5pt;
    color: var(--cv-text);
    text-align: justify;
}

.adhoc-job-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cv-bullet-gap);
}

.adhoc-job-bullets li {
    position: relative;
    padding-left: 14px;
    text-align: justify;
}

.adhoc-job-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--cv-text-muted);
}

/* --- Compact Earlier Career --- */
.adhoc-compact-career-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.adhoc-compact-entry {
    font-size: 9.3pt;
    line-height: 1.28;
}

.adhoc-compact-entry strong {
    color: var(--cv-accent);
}

/* --- Credentials / Footer Grid --- */
.adhoc-credentials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}

.adhoc-credentials-col h3 {
    margin: 0 0 4px 0;
    font-size: 9.8pt;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cv-accent);
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   4 DESIGN ARCHETYPES
   ═══════════════════════════════════════════════════════════════════ */

/* 1. ARCHITECT ENGINEERED (Default) */
.adhoc-cv-sheet.archetype-architect {
    --cv-accent: #0f172a;
    --cv-banner-bg: #f1f5f9;
}

.adhoc-cv-sheet.archetype-architect .section-banner {
    background: var(--cv-banner-bg);
    border-left: 4px solid #2563eb;
    padding: 4px 8px;
    border-radius: 0 4px 4px 0;
}

.adhoc-cv-sheet.archetype-architect .adhoc-skill-cat-name {
    font-family: var(--cv-code-font);
    font-size: 9pt;
    color: #1e40af;
}

.adhoc-cv-sheet.archetype-architect .adhoc-target-title {
    color: #2563eb;
    border-bottom: 1.5px solid #cbd5e1;
    padding-bottom: 2px;
}

/* 2. EXECUTIVE MODERN */
.adhoc-cv-sheet.archetype-executive {
    --cv-font-family: 'Inter', sans-serif;
    --cv-heading-font: 'Georgia', serif;
    --cv-accent: #1e3a8a;
    --cv-banner-bg: transparent;
}

.adhoc-cv-sheet.archetype-executive .adhoc-cv-header h1 {
    font-family: 'Georgia', serif;
    font-weight: 400;
    font-size: 22pt;
    color: #1e3a8a;
}

.adhoc-cv-sheet.archetype-executive .section-banner {
    border-bottom: 1.5px solid #1e3a8a;
    padding-bottom: 3px;
    margin-bottom: 8px;
}

.adhoc-cv-sheet.archetype-executive .section-banner h2 {
    color: #1e3a8a;
    letter-spacing: 2px;
}

.adhoc-cv-sheet.archetype-executive .adhoc-job-company {
    font-family: 'Georgia', serif;
    font-size: 11.2pt;
}

/* 3. CLASSIC CORPORATE (Century / Serif) */
.adhoc-cv-sheet.archetype-corporate {
    --cv-font-family: 'Century', 'Century Schoolbook', 'Times New Roman', serif;
    --cv-heading-font: 'Century', 'Century Schoolbook', serif;
    --cv-accent: #000000;
    --cv-text: #000000;
    --cv-banner-bg: #eceef1;
}

.adhoc-cv-sheet.archetype-corporate .adhoc-cv-header h1 {
    font-weight: 700;
    letter-spacing: 1px;
}

.adhoc-cv-sheet.archetype-corporate .section-banner {
    background: var(--cv-banner-bg);
    border: 0.75pt solid #a6a6a6;
    padding: 3px 6px;
    text-align: center;
}

.adhoc-cv-sheet.archetype-corporate .section-banner h2 {
    letter-spacing: 2px;
}

.adhoc-cv-sheet.archetype-corporate .adhoc-target-title {
    border-top: 2.5pt solid #000;
    border-bottom: 0.75pt solid #a6a6a6;
    padding: 3px 0;
    margin: 4px 0;
}

.adhoc-cv-sheet.archetype-corporate .adhoc-tagline-bar {
    border-bottom: 0.75pt solid #a6a6a6;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* 4. SWISS MINIMALIST */
.adhoc-cv-sheet.archetype-minimal {
    --cv-accent: #000000;
    --cv-banner-bg: transparent;
}

.adhoc-cv-sheet.archetype-minimal .adhoc-cv-header {
    text-align: left;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
}

.adhoc-cv-sheet.archetype-minimal .section-banner {
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

.adhoc-cv-sheet.archetype-minimal .section-banner h2 {
    letter-spacing: 0.5px;
    font-weight: 800;
}

.adhoc-cv-sheet.archetype-minimal .adhoc-accomplishment-list li::before,
.adhoc-cv-sheet.archetype-minimal .adhoc-job-bullets li::before {
    content: "—";
    color: #000;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGED MEDIA & PRINT RULES
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 12mm;
    }

    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-header,
    .tab-nav,
    .adhoc-control-panel,
    .adhoc-preview-toolbar,
    #toast-container {
        display: none !important;
    }

    .adhoc-studio-container,
    .adhoc-preview-panel,
    .adhoc-canvas-viewport {
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .adhoc-cv-sheet {
        box-shadow: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    .adhoc-job-entry,
    .adhoc-compact-entry,
    .adhoc-credentials-grid {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .section-banner {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }
}