/* CV Manager - Shared Styles */

:root {
    --primary: #0066ff;
    --primary-dark: #0052cc;
    --primary-light: #3385ff;
    --accent: #00a3ff;
    --dark: #001a4d;
    --light: #e6f2ff;
    --very-light: #f5f9ff;
    --white: #ffffff;
    --gray-50: #fafbfc;
    --gray-100: #f4f5f7;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --gray-900: #1a1a1a;
    --danger: #ef4444;
    --success: #10b981;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,102,255,0.08);
    --shadow-md: 0 4px 12px rgba(0,102,255,0.1);
    --shadow-lg: 0 8px 24px rgba(0,102,255,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-900);
    background: linear-gradient(135deg, var(--very-light) 0%, var(--gray-50) 100%);
    min-height: 100vh;
}

.material-symbols-outlined {
    font-size: inherit;
    vertical-align: middle;
    line-height: 1;
}

/* Main Container */
.container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Header Section */
.header {
    background: linear-gradient(135deg, var(--primary-dark), var(--dark));
    border-radius: var(--radius-xl);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
    align-items: center;
}

.profile-image {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: 4px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-info { flex: 1; }

.profile-name {
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.profile-title {
    font-size: 18px;
    color: rgba(255,255,255,0.95);
    margin-bottom: 2px;
}

.profile-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
}

.contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-style: normal;
}

.contact-badge {
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-badge svg, .contact-badge .material-symbols-outlined {
    flex-shrink: 0;
    opacity: 0.9;
}

.contact-badge:hover {
    background: rgba(255,255,255,0.25);
    color: var(--white);
}

.open-to-work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/shared/open-to-work.png') center/cover no-repeat;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* Sections */
.section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    position: relative;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--light);
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

/* About */
.about-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--gray-700);
    white-space: pre-line;
}

/* Timeline */
.timeline-container {
    position: relative;
    padding: 70px 10px;
    min-height: 220px;
    overflow: hidden;
}

.timeline-track {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: translateY(-50%);
    border-radius: 2.5px;
}

.timeline-chevron {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}

.timeline-items {
    position: relative;
    height: 100%;
}

.timeline-item {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.timeline-content {
    background: var(--very-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 60px;
    max-width: 120px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.timeline-item.top .timeline-content { bottom: calc(50% + 16px); }
.timeline-item.bottom .timeline-content { top: calc(50% + 16px); }

.timeline-content:hover {
    background: var(--light);
    transform: translateX(-50%) scale(1.05);
    border-color: var(--primary-light);
    z-index: 10;
}

.timeline-item {
    cursor: pointer;
}

/* Highlight animation for scrolled-to experience */
@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(0, 102, 255, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

.item-card.highlight-pulse {
    animation: highlightPulse 1.5s ease-out;
    border-left-color: var(--accent);
    background: linear-gradient(135deg, var(--light), var(--very-light));
}

.timeline-company {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
}

.timeline-role {
    font-size: 10px;
    color: var(--gray-700);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-period {
    font-size: 10px;
    color: var(--gray-500);
    font-weight: 600;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    background: var(--white);
    border: 3px solid var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.timeline-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    object-fit: cover;
    background: var(--white);
}

/* Timeline Card Logo (replaces company name text when logo uploaded) */
.timeline-card-logo {
    width: 90px;
    height: 28px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 2px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Timeline Branching — items on the branch track */
.timeline-item.timeline-branch-track .timeline-dot {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

.timeline-item.timeline-branch-track .timeline-flag {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

.timeline-item.timeline-branch-track.top .timeline-content {
    bottom: calc(50% + var(--branch-offset-pct, 28px) + 16px);
}

.timeline-item.timeline-branch-track.bottom .timeline-content {
    top: calc(50% + 36px);
}

/* Chevrons on the branch track — same offset as dots (both in .timeline-items) */
.timeline-chevron.timeline-chevron-branch {
    top: calc(50% - var(--branch-offset-pct, 28px));
}

/* CSS fallback for branch line in print (SVG doesn't render on Safari iOS) */
.timeline-branch-line {
    display: none;
}

/* Items */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    position: relative;
    transition: all 0.2s ease;
}

.item-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
}

.item-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
}

/* Experience Logo — consistent indent when logos enabled */
.item-card.has-logo {
    position: relative;
    padding-left: 76px; /* 16px card padding + 48px logo + 12px gap */
}

.experience-logo {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.item-date {
    font-size: 12px;
    color: var(--gray-500);
    background: var(--white);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.item-duration {
    display: block;
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 400;
    margin-top: 2px;
}

.item-location {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.item-summary {
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.item-highlights {
    list-style: none;
    margin-top: 10px;
}

.item-highlights li {
    font-size: 13px;
    color: var(--gray-700);
    padding-left: 16px;
    margin-bottom: 4px;
    position: relative;
}

.item-highlights li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Certifications Grid */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.cert-card {
    background: var(--very-light);
    border-radius: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    position: relative;
    transition: all 0.2s ease;
}

.cert-card:hover {
    background: var(--light);
    transform: translateX(3px);
}

.cert-card.has-logo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cert-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.cert-content {
    flex: 1;
    min-width: 0;
}

.cert-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
}

.cert-date {
    font-size: 11px;
    color: var(--gray-500);
    white-space: nowrap;
    display: block;
    margin-bottom: 2px;
}

.cert-provider {
    font-size: 12px;
    color: var(--gray-500);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.skill-category {
    background: var(--very-light);
    border-radius: var(--radius-md);
    padding: 16px;
    position: relative;
    transition: all 0.2s ease;
}

.skill-category:hover {
    background: var(--light);
    transform: translateY(-2px);
}

.skill-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-icon svg {
    stroke: var(--primary);
}
.skill-icon .material-symbols-outlined {
    color: var(--primary);
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skill-tag {
    font-size: 12px;
    color: var(--primary);
    background: var(--white);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary-light);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.project-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--light);
    position: relative;
    transition: all 0.2s ease;
}

.project-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.project-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    flex: 1;
}

.project-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--light);
    color: var(--primary);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.project-link:hover {
    background: var(--primary);
    color: var(--white);
}

.project-link svg, .project-link .material-symbols-outlined {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.project-description {
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 10px;
    line-height: 1.6;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tech-tag {
    font-size: 11px;
    color: var(--white);
    background: var(--primary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* ===========================
   Custom Section Layouts
   =========================== */

.custom-section-content {
    margin-bottom: 12px;
}

.empty-section {
    color: var(--gray-500);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Social Links Layout */
.social-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--very-light);
    border-radius: 0;
    text-decoration: none;
    color: var(--gray-700);
    transition: all 0.15s ease;
    border-left: 4px solid var(--primary);
}

.social-link-item:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateX(4px);
}

.social-link-icon {
    font-size: 18px;
}

.social-link-name {
    font-size: 13px;
    font-weight: 500;
}

.social-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.social-link-url {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 400;
}

.social-link-item:hover .social-link-url {
    color: rgba(255, 255, 255, 0.8);
}

/* Grid Layouts (2 and 3 columns) */
.custom-grid {
    display: grid;
    gap: 14px;
}

.custom-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.custom-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.custom-grid-item {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-grid-item:hover {
    background: var(--light);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.custom-item-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.custom-item-description {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    margin-bottom: 8px;
}

.custom-item-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.custom-item-link:hover {
    text-decoration: underline;
}

/* List Layout */
.custom-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-list-item:hover {
    background: var(--light);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-list-content {
    flex: 1;
}

/* Cards Layout */
.custom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.custom-card {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 18px;
    border-left: 4px solid var(--primary);
    transition: all 0.2s ease;
}

.custom-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

.custom-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.custom-card-subtitle {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.custom-card-description {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.5;
    margin-bottom: 10px;
}

.custom-card-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.custom-card-link:hover {
    text-decoration: underline;
}

/* Bullet List Layout */
.custom-bullet-lists {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.custom-bullet-group {
    background: linear-gradient(135deg, var(--very-light), var(--white));
    border-radius: 0;
    padding: 16px;
    border-left: 4px solid var(--primary);
    transition: all 0.15s ease;
}

.custom-bullet-group:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.custom-bullet-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.custom-bullet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-bullet-list li {
    font-size: 13px;
    color: var(--gray-700);
    padding-left: 16px;
    margin-bottom: 6px;
    position: relative;
    line-height: 1.5;
}

.custom-bullet-list li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

.custom-bullet-list li:last-child {
    margin-bottom: 0;
}

/* Free Text Layout */
.custom-free-text-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-free-text-content {
    font-size: 13.5px;
    color: var(--gray-700);
    line-height: 1.7;
    white-space: pre-line;
    margin: 0;
}

/* Picture Grid Layout */
.custom-picture-grid {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.custom-picture-grid-3 { grid-template-columns: repeat(3, 1fr); }
.custom-picture-grid-2 { grid-template-columns: repeat(2, 1fr); }
.custom-picture-grid-1 { grid-template-columns: 1fr; }

.custom-picture-item {
    text-align: center;
    max-width: 100%;
}

.custom-picture-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.custom-picture-grid-3 .custom-picture-item {
    justify-self: stretch;
}

.custom-picture-grid-3 .custom-picture-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.custom-picture-caption {
    font-size: 13px;
    color: var(--gray-600);
    margin-top: 6px;
    text-align: center;
}

.custom-picture-placeholder {
    width: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--very-light);
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    color: var(--gray-400);
    font-size: 13px;
}

.custom-picture-grid-3 .custom-picture-placeholder { aspect-ratio: 1; min-height: unset; }

.custom-picture-empty-cell {
    width: 100%;
    min-height: 120px;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    background: var(--very-light);
}

.custom-picture-grid-3 .custom-picture-empty-cell { aspect-ratio: 1; min-height: unset; }

/* Picture grid modal preview */
.picture-grid-preview {
    width: 200px;
    height: 200px;
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--very-light);
}

.picture-grid-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-grid-placeholder {
    color: var(--gray-400);
    font-size: 13px;
}

/* Thumbnail in item list */
.custom-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Public Print Button */
.public-print-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    transition: all 0.2s ease;
    z-index: 1000;
}

.public-print-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
}

.public-print-btn svg, .public-print-btn .material-symbols-outlined {
    flex-shrink: 0;
}

/* Preview Banner (for versioned dataset URLs) */
.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.preview-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.preview-banner-content svg, .preview-banner-content .material-symbols-outlined {
    flex-shrink: 0;
    opacity: 0.9;
}

.preview-banner-text {
    font-size: 13px;
    font-weight: 500;
}

.preview-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.preview-banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.preview-banner-btn svg, .preview-banner-btn .material-symbols-outlined {
    flex-shrink: 0;
}

/* Adjust container margin when banner is shown */
body.has-preview-banner .container {
    margin-top: 70px;
}

/* ATS hidden content - using clip method for better ATS compatibility */
.ats-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ATS-friendly print version - keep sr-only technique so text is in PDF text layer for ATS extraction */
/* The base .ats-only rule above already uses the correct clip method. No print override needed. */

/* Print Styles */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { background: white !important; margin: 0 !important; padding: 0 !important; }
    .toolbar, .add-btn, .item-actions, .section-actions, .no-print, .open-to-work-overlay { display: none !important; }
    .container { max-width: 100% !important; margin: 0 !important; padding: 0 10px !important; margin-top: 0 !important; }
    
    /* Header - keep horizontal layout like desktop */
    .header { 
        margin-bottom: 12px;
        margin-top: 0 !important;
        padding: 16px 20px;
        box-shadow: none;
    }
    .header::before { display: none; }
    .header-content {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center;
        gap: 16px;
    }
    .profile-image { width: 70px; height: 70px; font-size: 22px; }
    .profile-info { flex: 1; }
    .profile-name { font-size: 22px; margin-bottom: 2px; }
    .profile-title { font-size: 13px; margin-bottom: 1px; }
    .profile-subtitle { font-size: 11px; margin-bottom: 6px; }
    .contact-badges { justify-content: flex-start !important; gap: 5px; }
    .contact-badge { font-size: 9px; padding: 2px 6px; }
    
    /* Sections - prevent unnecessary page breaks, except for experience which can be long */
    .section { 
        box-shadow: none; 
        margin-bottom: 10px;
        padding: 14px;
        border-radius: var(--radius-md);
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Allow experience section to split across pages since it's usually long */
    #section-experience {
        page-break-inside: auto;
        break-inside: auto;
    }
    .section-header {
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    .section-title { font-size: 15px; }
    
    /* Timeline - SHOW it in print (only if not hidden by user choice) */
    #section-timeline:not(.hidden-print) .section-header { margin-bottom: 8px; }
    #section-timeline:not(.hidden-print) .timeline-container {
        display: block !important;
        min-height: 200px;
        /* Override overflow:hidden so branch tracks (above the main line) and
           SVG S-curves are not clipped.  iOS Safari print clips children even
           when they set overflow:visible if the parent is overflow:hidden. */
        overflow: visible !important;
        /* MUST be symmetric: .timeline-track uses top:50% of the padding box,
           while dots/cards use top:50% of the content box (.timeline-items).
           Asymmetric padding shifts the track away from the dots. */
        padding: 70px 10px;
    }
    #section-timeline:not(.hidden-print) .timeline-company { font-size: 9px; }
    #section-timeline:not(.hidden-print) .timeline-role { font-size: 8px; }
    #section-timeline:not(.hidden-print) .timeline-period { font-size: 8px; }
    #section-timeline:not(.hidden-print) .timeline-content {
        padding: 6px 8px;
        /* Reset to pure CSS centering for print — JS-set inline left + translateX
           positioning doesn't reliably apply on iOS Safari's print renderer,
           causing cards to drift into the section header. */
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: min(90px, calc(100% + 20px));
        min-width: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: none !important;
    }
    /* Hide connector lines in print — they rely on JS pixel offsets that don't
       scale correctly, and the cards are reset to centered above anyway. */
    #section-timeline:not(.hidden-print) .timeline-connectors { display: none !important; }
    /* Only resize dots/flags in print — do NOT override top/left/transform
       because that kills the branch-track offset (calc(50% - var(--branch-offset-pct)))
       due to the #id selector having higher specificity than class-only selectors */
    #section-timeline:not(.hidden-print) .timeline-dot { width: 10px; height: 10px; }
    #section-timeline:not(.hidden-print) .timeline-flag { width: 16px; height: 16px; }
    #section-timeline:not(.hidden-print) .timeline-card-logo { width: 70px; height: 22px; }
    #section-timeline:not(.hidden-print) .timeline-chevron svg { width: 10px; height: 14px; }
    /* Connector lines from dots to offset cards — visible in print */
    #section-timeline:not(.hidden-print) .timeline-connectors {
        overflow: visible !important;
    }
    /* Branch curves: improve SVG rendering in print */
    #section-timeline:not(.hidden-print) .timeline-branch-curves {
        overflow: visible !important;
    }
    #section-timeline:not(.hidden-print) .timeline-branch-curves path {
        stroke: var(--accent) !important;
        stroke-width: 3px !important;
    }
    /* CSS fallback branch line for print.  iOS Safari doesn't render SVGs in
       print, so this plain CSS line is the only way the branch appears on iPhone.
       On desktop browsers the SVG curves render on top (higher z-index), so this
       line sits invisibly underneath — no "double line" as long as the offset
       matches (both use --branch-offset-pct set by JS). */
    #section-timeline:not(.hidden-print) .timeline-branch-line {
        display: block;
        position: absolute;
        top: calc(50% - var(--branch-offset-pct, 8%));
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
        transform: translateY(-50%);
        z-index: 1;
    }
    #section-timeline:not(.hidden-print) .timeline-track {
        height: 3px;
    }

    /* Items - allow page breaks between items but not inside */
    .item-card, .cert-card, .skill-category, .project-card { 
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
    }
    
    /* Level 1: Allow section splits (items stay intact) */
    body.allow-section-splits .section {
        page-break-inside: auto;
        break-inside: auto;
    }
    
    /* Level 2: Also allow item splits (maximum compactness) */
    body.allow-item-splits .item-card,
    body.allow-item-splits .cert-card,
    body.allow-item-splits .skill-category,
    body.allow-item-splits .project-card,
    body.allow-item-splits .custom-section,
    body.allow-item-splits .custom-bullet-group,
    body.allow-item-splits .custom-card,
    body.allow-item-splits .custom-grid-item,
    body.allow-item-splits .custom-list-item {
        page-break-inside: auto;
        break-inside: auto;
    }
    .item-card { padding: 10px; margin-bottom: 6px; border-radius: 0; }
    .item-card.has-logo { padding-left: 46px; }
    .experience-logo { width: 28px; height: 28px; left: 10px; top: 10px; overflow: visible; }
    .items-list { gap: 6px; }
    .item-title { font-size: 13px; }
    .item-subtitle { font-size: 12px; }
    .item-date { font-size: 10px; padding: 2px 6px; }
    .item-location { font-size: 11px; }
    .item-summary { font-size: 11px; }
    .item-highlights li { font-size: 11px; margin-bottom: 2px; }
    
    /* Certs - force grid layout like desktop */
    .cert-grid { 
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px; 
    }
    .cert-card { padding: 8px 10px; }
    .cert-card.has-logo { gap: 6px; }
    .cert-logo { width: 24px; height: 24px; }
    .cert-name { font-size: 11px; }
    .cert-date { font-size: 9px; }
    .cert-provider { font-size: 10px; }
    
    /* Skills */
    .skills-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px;
    }
    .skill-category { padding: 10px; }
    .skill-category-title { font-size: 12px; margin-bottom: 6px; }
    .skill-tag { font-size: 10px; padding: 2px 6px; }
    
    /* Projects */
    .projects-grid { 
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    .project-card { padding: 10px; }
    .project-header { margin-bottom: 4px; }
    .project-title { font-size: 13px; }
    .project-link { width: 20px; height: 20px; }
    .project-link svg { width: 10px; height: 10px; }
    .project-link .material-symbols-outlined { font-size: 10px; }
    .project-description { font-size: 11px; margin-bottom: 6px; }
    .tech-tag { font-size: 9px; padding: 2px 6px; }
    
    /* About */
    .about-text { font-size: 11px; line-height: 1.5; white-space: pre-line; }
    
    /* Free Text */
    .custom-free-text-content { font-size: 11px; line-height: 1.5; white-space: pre-line; }
    
    /* Custom Sections */
    .custom-item-title, .custom-card-title, .custom-bullet-title { font-size: 13px; }
    .custom-item-subtitle, .custom-card-subtitle { font-size: 12px; }
    .custom-item-description, .custom-card-description { font-size: 11px; }
    .custom-bullet-list li { font-size: 11px; margin-bottom: 2px; }
    .custom-item-link, .custom-card-link { font-size: 10px; }
    .custom-grid-item, .custom-list-item, .custom-card, .custom-bullet-group { padding: 10px; }
    .custom-picture-grid { gap: 10px; }
    .custom-picture-img { border-radius: 4px; }
    .custom-picture-caption { font-size: 10px; }

    .hidden-print { display: none !important; }
}

/* Responsive */
@media (max-width: 768px) {
    .container { margin-top: 20px; padding: 0 12px; }
    .header { padding: 20px; }
    .header-content { flex-direction: column; text-align: center; }
    .profile-image { width: 90px; height: 90px; font-size: 28px; }
    .profile-name { font-size: 24px; }
    .contact-badges { justify-content: center; }
    .section { padding: 18px; }
    #section-timeline { display: none; }
    .cert-grid, .skills-grid, .projects-grid { grid-template-columns: 1fr; }
    .custom-picture-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .experience-logo { display: none; }
    .cert-logo { display: none; }
    .item-card.has-logo { padding-left: 16px; }
    .cert-card.has-logo { display: block; }
}

/* Mobile print - show timeline again (only if not hidden by user choice) */
@media print {
    #section-timeline:not(.hidden-print) { display: block !important; }
    #section-timeline:not(.hidden-print) .timeline-container { display: block !important; }
}

/* Print pagination is handled via JavaScript-injected @page rules */