/**
 * base.css — Print structural / theme-agnostic rules
 *
 * Contains all @media print rules that are independent of any visual theme.
 * This file is always loaded first.  A theme file (classic.css / clean.css)
 * is loaded second and adds visual overrides.
 *
 * Concerns covered:
 *   - Light-token re-assert (so print always renders light colors)
 *   - Font-face declarations
 *   - Layout reset for print
 *   - Typography size / margin adjustments (colors live in the theme file)
 *   - Hide chrome / non-essential elements
 *   - Code block font families (colors live in the theme file)
 *   - Links, checkboxes, images
 *   - Page margins (@page)
 *   - Print modes: compact, less-ink (token remap), no-break
 */

@media print {
    /* ────────────────────────────────────────────────────────────────────────
       PRINT = LIGHT — re-assert light token values
       Dark theme cannot leak into print output.
       ──────────────────────────────────────────────────────────────────────── */

    html, :root {
        /* Core */
        --bg-body: #ffffff;
        --text-body: #0f172a;
        --bg-header: #ffffff;
        --border-color: #e2e8f0;
        --text-muted: #64748b;
        --text-link: #64748b;
        --text-link-hover: #334155;
        --bg-card: #ffffff;
        --border-card: #e2e8f0;
        --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --bg-input: #ffffff;
        --border-input: #cbd5e1;
        --bg-sidebar: #f8fafc;
        --border-sidebar: #e2e8f0;

        /* Prose */
        --prose-headings: #0f172a;
        --prose-text: #64748b;
        --prose-code-bg: #fef2f2;
        --prose-code-text: #b91c1c;
        --prose-table-head-bg: #f4f4f6;
        --prose-table-head-text: #18181b;
        --prose-table-border: #c7c7cf;
        --prose-table-head-border: #c7c7cf;
        --prose-table-row-border: #e4e4e7;
        --prose-table-col-border: #ececef;
        --prose-table-row-alt-bg: #f2f2f2;
        --prose-hr: #c7d2fe;

        /* Code blocks */
        --codeblock-bg: #f0f4ff;
        --codeblock-text: #1e1b4b;
        --codeblock-border: #c7d2fe;
        --codeblock-border-left: #4f46e5;
        --inline-code-bg: #fef2f2;
        --inline-code-text: #b91c1c;
        --inline-code-border: #fecaca;

        /* Syntax highlighting tokens (light values) */
        --hl-comment: #6b7280;
        --hl-string: #15803d;
        --hl-keyword: #1d4ed8;
        --hl-bash-var: #b91c1c;
        --hl-flag: #b45309;
        --hl-number: #0369a1;
        --hl-punctuation: #374151;
        --hl-json-key: #1d4ed8;
        --hl-yaml-key: #1d4ed8;
        --hl-yaml-anchor: #7c3aed;
        --hl-var: #7c3aed;
        --hl-operator: #0f766e;
        --hl-function: #7c2d12;
        --hl-property: #1e3a8a;
        --hl-decorator: #9333ea;
        --hl-macro: #9f1239;
        --hl-type: #0c4a6e;
        --hl-lifetime: #7c3aed;

        /* Markdown syntax highlighting tokens (light values) */
        --hl-md-h1: #7c3aed;
        --hl-md-h2: #1d4ed8;
        --hl-md-h3: #047857;
        --hl-md-h4: #b45309;
        --hl-md-h5: #374151;
        --hl-md-h6: #374151;
        --hl-md-heading-1: #4c1d95;
        --hl-md-heading-2: #1e3a8a;
        --hl-md-heading-3: #065f46;
        --hl-md-heading-4: #1f2937;
        --hl-md-heading-5: #1f2937;
        --hl-md-heading-6: #1f2937;
        --hl-md-fm: #3f6212;
        --hl-md-fence: #6d28d9;
        --hl-md-hr: #6b7280;
        --hl-md-bq-marker: #2563eb;
        --hl-md-bq: #4338ca;
        --hl-md-list-marker: #d97706;
        --hl-md-bold: #92400e;
        --hl-md-italic: #065f46;
        --hl-md-code: #b91c1c;
        --hl-md-checkbox-unchecked: #6b7280;
        --hl-md-checkbox-checked: #0369a1;
        --hl-md-link: #0369a1;
        --hl-md-link-text: #0369a1;
        --hl-md-link-url: #0891b2;
        --hl-md-image: #7c3aed;
        --hl-md-html: #9a3412;

        /* Blockquote tokens */
        --blockquote-bg: linear-gradient(135deg, rgba(59,130,246,0.07) 0%, rgba(99,102,241,0.04) 100%);
        --blockquote-shadow: 0 1px 4px rgba(59,130,246,0.08);
        --blockquote-border-left: #6366f1;
        --blockquote-before-color: #6366f1;
        --blockquote-before-opacity: 0.4;

        /* CSV tokens */
        --csv-col-0: #4f46e5;
        --csv-col-1: #0891b2;
        --csv-col-2: #16a34a;
        --csv-col-3: #b45309;
        --csv-col-4: #be123c;
        --csv-col-5: #7c3aed;
        --csv-col-6: #0369a1;
        --csv-col-7: #065f46;
        --csv-col-8: #92400e;
        --csv-col-9: #9f1239;
        --csv-col-10: #6d28d9;
        --csv-col-11: #0e7490;
        --csv-col-12: #15803d;
        --csv-col-13: #b45309;
        --csv-col-14: #db2777;
        --csv-col-15: #1d4ed8;

        /* Editor tokens */
        --editor-kbd-bg: #f1f5f9;
        --editor-kbd-border: #cbd5e1;
        --editor-metadata-bg: #ffffff;
        --editor-metadata-border: #e2e8f0;
        --editor-metadata-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --editor-btn-secondary-bg: #e2e8f0;
        --editor-btn-secondary-text: #0f172a;
        --editor-btn-secondary-hover: #cbd5e1;
        --editor-btn-edit-bg: #dbeafe;
        --editor-btn-edit-text: #1d4ed8;
        --editor-btn-edit-border: #93c5fd;
        --editor-btn-edit-hover: #bfdbfe;
        --editor-btn-remove-bg: #fee2e2;
        --editor-btn-remove-text: #dc2626;
        --editor-btn-remove-border: #fecaca;
        --editor-btn-remove-hover: #fecaca;
        --editor-btn-copy-bg: #10b981;
        --editor-btn-copy-text: #ffffff;
        --editor-btn-copy-hover: #059669;
    }

    /* ────────────────────────────────────────────────────────────────────────
       FONT FACE
       ──────────────────────────────────────────────────────────────────────── */

    @font-face {
        font-family: 'JetBrains Mono';
        font-style: normal;
        /* One static face; see the note in common.css. */
        font-weight: 400;
        font-display: swap;
        src: url('/static/fonts/JetBrainsMono.ttf') format('truetype');
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - BASE SETUP
       ──────────────────────────────────────────────────────────────────────── */

    html, body {
        background-color: white !important;
        color: black !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .page-wrapper {
        display: block !important;
    }

    .sheet-layout {
        display: block !important;
    }

    .main-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    .sheet-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - TEXT FORMATTING (no colors — those are theme-specific)
       ──────────────────────────────────────────────────────────────────────── */

    .prose,
    .prose p,
    .prose li,
    .prose td,
    .prose th,
    .prose blockquote,
    .prose h1,
    .prose h2,
    .prose h3,
    .prose h4 {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - HIDE NON-ESSENTIAL ELEMENTS
       ──────────────────────────────────────────────────────────────────────── */

    .no-print,
    .sidebar,
    .site-header,
    .theme-toggle,
    .back-link,
    .nav-list,
    .sidebar-toggle-btn,
    .info-button,
    .panel-toggle,
    .panel-header,
    .tags-container,
    .badge,
    .hero-promo,
    .footer {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - TYPOGRAPHY ADJUSTMENTS (sizes & margins only; colors in theme)
       ──────────────────────────────────────────────────────────────────────── */

    .sheet-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sheet-desc {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: 1.2rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        page-break-after: avoid;
    }

    h3 {
        font-size: 1.1rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.25rem !important;
        page-break-after: avoid;
    }

    p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - CODE BLOCK ADJUSTMENTS (fonts & layout; colors in theme)
       ──────────────────────────────────────────────────────────────────────── */

    pre {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        white-space: pre-wrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        font-size: 0.8rem !important;
        page-break-inside: avoid;
    }

    /* Inline code */
    code:not(pre code) {
        font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
        padding: 0.1rem 0.3rem !important;
        border-radius: 0.2rem !important;
    }

    /* Code block content */
    pre code {
        font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
        background-color: transparent !important;
        color: inherit !important;
        border: none !important;
        padding: 0 !important;
        white-space: inherit !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - LINKS & CHECKBOXES
       ──────────────────────────────────────────────────────────────────────── */

    a {
        text-decoration: none !important;
        color: black !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    .external-link-icon {
        display: none !important;
    }

    input[type="checkbox"] {
        border-color: #111827 !important;
        background-color: #ffffff !important;
    }

    input[type="checkbox"]:checked {
        background-color: #0369a1 !important;
        border-color: #0369a1 !important;
    }

    input[type="checkbox"]:checked::after {
        color: #ffffff !important;
    }

    .var-highlight {
        background: none !important;
        color: inherit !important;
        padding: 0.125rem 0 !important;
    }

    .var-dynamic {
        cursor: default !important;
    }

    /* Nothing of its own on paper: the screen rule is weight plus the
       surrounding colour, which prints correctly as it stands. */

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - IMAGES
       ──────────────────────────────────────────────────────────────────────── */

    .prose img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 1rem 0 !important;
        border: 1px solid #d1d5db !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        cursor: default !important;
    }

    /* Hide image preview modal when printing */
    .image-preview-modal {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - TABLE STRUCTURE (print-only rules)
       ──────────────────────────────────────────────────────────────────────── */

    thead { display: table-header-group !important; }
    tfoot { display: table-footer-group !important; }

    .prose tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Zebra striping for print — driven by token so themes can override */
    .prose table tr:nth-child(n+2):nth-child(even) {
        background-color: var(--prose-table-row-alt-bg) !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - PAGE MARGINS
       ──────────────────────────────────────────────────────────────────────── */

    @page {
        margin: 1cm;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - COMPACT MODE
       ──────────────────────────────────────────────────────────────────────── */

    body.print-compact .sheet-title {
        font-size: 1.2rem !important;
        margin-bottom: 0.1rem !important;
    }

    body.print-compact .sheet-desc {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.print-compact h2 {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    body.print-compact h3 {
        font-size: 0.9rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.2rem !important;
    }

    body.print-compact p {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    body.print-compact pre {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.print-compact .prose {
        column-count: 2;
        column-gap: 1cm;
        column-fill: auto;
        font-size: 0.8rem;
    }

    body.print-compact .prose h2,
    body.print-compact .prose h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    body.print-compact .prose pre,
    body.print-compact .prose blockquote,
    body.print-compact .prose ul,
    body.print-compact .prose ol,
    body.print-compact .prose table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - LESS INK MODE (token remap — no per-selector duplication)
       ──────────────────────────────────────────────────────────────────────── */

    body.print-less-ink {
        --hl-comment: #555;
        --hl-string: #000;
        --hl-keyword: #000;
        --hl-bash-var: #000;
        --hl-flag: #000;
        --hl-number: #000;
        --hl-punctuation: #000;
        --hl-json-key: #000;
        --hl-yaml-key: #000;
        --hl-yaml-anchor: #000;
        --hl-var: #000;
        --hl-operator: #000;
        --hl-function: #000;
        --hl-property: #000;
        --hl-decorator: #000;
        --hl-macro: #000;
        --hl-type: #000;
        --hl-lifetime: #000;

        --hl-md-h1: #000;
        --hl-md-h2: #000;
        --hl-md-h3: #000;
        --hl-md-h4: #000;
        --hl-md-h5: #000;
        --hl-md-h6: #000;
        --hl-md-heading-1: #000;
        --hl-md-heading-2: #000;
        --hl-md-heading-3: #000;
        --hl-md-heading-4: #000;
        --hl-md-heading-5: #000;
        --hl-md-heading-6: #000;
        --hl-md-fm: #000;
        --hl-md-fence: #000;
        --hl-md-hr: #000;
        --hl-md-bq-marker: #000;
        --hl-md-bq: #000;
        --hl-md-list-marker: #000;
        --hl-md-bold: #000;
        --hl-md-italic: #000;
        --hl-md-code: #000;
        --hl-md-checkbox-unchecked: #000;
        --hl-md-checkbox-checked: #000;
        --hl-md-link: #000;
        --hl-md-link-text: #000;
        --hl-md-link-url: #000;
        --hl-md-image: #000;
        --hl-md-html: #000;

        --csv-col-0: #000;
        --csv-col-1: #000;
        --csv-col-2: #000;
        --csv-col-3: #000;
        --csv-col-4: #000;
        --csv-col-5: #000;
        --csv-col-6: #000;
        --csv-col-7: #000;
        --csv-col-8: #000;
        --csv-col-9: #000;
        --csv-col-10: #000;
        --csv-col-11: #000;
        --csv-col-12: #000;
        --csv-col-13: #000;
        --csv-col-14: #000;
        --csv-col-15: #000;
    }

    body.print-less-ink pre {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
    }

    body.print-less-ink code:not(pre code) {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
    }

    /* Reset font-weight for keywords/functions when less-ink */
    body.print-less-ink .hl-keyword,
    body.print-less-ink .hl-json-key,
    body.print-less-ink .hl-yaml-key,
    body.print-less-ink .hl-var,
    body.print-less-ink .hl-function,
    body.print-less-ink .hl-macro {
        font-weight: normal !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - NO BREAK MODE
       ──────────────────────────────────────────────────────────────────────── */

    body.print-no-break h2,
    body.print-no-break h3,
    body.print-no-break p {
        break-after: avoid;
        page-break-after: avoid;
    }

    body.print-no-break pre {
        break-before: avoid;
        page-break-before: avoid;
    }
}