/* ═══════════════════════════════════════════════════════════════
   designs.css — підключати ПІСЛЯ styles.css.
   Три дизайни, що перемикаються атрибутом html[data-design]:
     field      — «Поле»: сучасний, силові лінії диполя в шапці
     blueprint  — «Креслення»: технічний малюнок на синьому тлі
     book       — «Книга»: попередній вигляд зі styles.css
   Кожен має світлу та темну (html.dark) версії.
   ═══════════════════════════════════════════════════════════════ */

/* ── Спільне для всіх дизайнів ── */
.hero-tools { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; gap: 8px; align-items: center; }
.hero-tools .theme-toggle { position: static; color: inherit; }
.design-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; }
.design-switch button { font: 500 .78rem/1 var(--font-ui); color: inherit; background: none; border: 0; border-radius: 999px; padding: .6rem .85rem; cursor: pointer; }
.design-switch button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.design-switch button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 22%, transparent); font-weight: 700; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.sub-list-wrap { visibility: hidden; transition: max-height .3s ease, opacity .25s ease, visibility 0s .3s; }
li.toc-open > .sub-list-wrap { visibility: visible; transition-delay: 0s; }

html[data-design="book"] .field-canvas { display: none; }
html[data-design="book"] .pdf-hero { padding-top: 4.6rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* ═══ Токени: Поле ═══ */
html[data-design="field"] {
    --paper: #eef1f9; --page: #ffffff; --cream: #e2e7f6; --border: #d3d9ec; --rule: #b4bee0;
    --heading: #0b1030; --text: #1b2245; --muted: #566089;
    --gold: #3040f0; --gold-bright: #5566ff; --crimson: #e4471f; --crimson-bright: #ff6a45;
    --leather: #0b1030; --leather-edge: #050718;
    --btn-bg: #3040f0; --btn-fg: #ffffff;
    --fl-line: rgba(48, 64, 240, .42); --fl-pos: #e4471f; --fl-neg: #3040f0;
    --font-display: 'Onest', system-ui, sans-serif; --font-body: 'Onest', system-ui, sans-serif;
    --font-ui: 'Onest', system-ui, sans-serif; --font-mono: 'Onest', system-ui, sans-serif;
    --font-read: 'Literata', Georgia, serif;
    --radius: 14px; --radius-pill: 999px; --photo-r: 22px; --h-weight: 700; --body-pad: 0;
}
html[data-design="field"].dark {
    --paper: #080b1c; --page: #0f1430; --cream: #151b3e; --border: #232b58; --rule: #38428a;
    --heading: #f2f4ff; --text: #d6dbf6; --muted: #98a1cf;
    --gold: #8b97ff; --gold-bright: #b0b8ff; --crimson: #ff7a5c; --crimson-bright: #ff9a82;
    --leather: #050818; --btn-bg: #8b97ff; --btn-fg: #0a0e28;
    --fl-line: rgba(139, 151, 255, .42); --fl-pos: #ff7a5c; --fl-neg: #8b97ff;
}

/* ═══ Токени: Креслення ═══ */
html[data-design="blueprint"] {
    --paper: #e9f1fb; --page: #f6faff; --cream: #d9e7f7; --border: #a8c3e6; --rule: #7ea5d8;
    --heading: #0a2c60; --text: #123363; --muted: #48689a;
    --gold: #1858b8; --gold-bright: #3b80e6; --crimson: #c8321c; --crimson-bright: #e04a33;
    --leather: #0a2c60; --btn-bg: #0a2c60; --btn-fg: #ffffff;
    --grid: rgba(24, 88, 184, .12);
    --fl-line: rgba(24, 88, 184, .5); --fl-pos: #c8321c; --fl-neg: #0a2c60;
    --font-display: 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-read: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --radius: 0; --radius-pill: 0; --photo-r: 0; --h-weight: 600; --body-pad: 1.5rem 1rem;
}
html[data-design="blueprint"].dark {
    --paper: #0a2242; --page: #0d2b52; --cream: #0f3163; --border: #1f4c85; --rule: #3070b0;
    --heading: #eaf4ff; --text: #cde2fa; --muted: #88aad6;
    --gold: #7cc4ff; --gold-bright: #b4dcff; --crimson: #ffb84d; --crimson-bright: #ffcb7a;
    --leather: #061a36; --btn-bg: #7cc4ff; --btn-fg: #06213f;
    --grid: rgba(124, 196, 255, .11);
    --fl-line: rgba(124, 196, 255, .5); --fl-pos: #ffb84d; --fl-neg: #7cc4ff;
}

/* ═══ Структура сучасних дизайнів (Поле + Креслення) ═══ */
html:not([data-design="book"]) {
    & body { padding: var(--body-pad); font-family: var(--font-body); background: var(--paper); }
    & body::before { display: none; }
    & .container { max-width: 1080px; background: transparent; border: 0; box-shadow: none; }
    & .container::before, & .container::after { display: none; }

    /* Шапка */
    & .pdf-hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: min(78vh, 560px); padding: 6rem 2.5rem 3rem; background: none; color: var(--heading); text-align: left; border: 0; isolation: isolate; overflow: hidden; }
    & .pdf-hero::after { display: none; }
    & .pdf-hero > :not(.field-canvas):not(.hero-tools) { position: relative; z-index: 1; }
    & .field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
    & .pdf-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5rem); font-weight: var(--h-weight); line-height: 1.02; letter-spacing: -.035em; color: var(--heading); text-shadow: none; max-width: 14ch; margin-bottom: 1rem; }
    & .pdf-hero .subtitle { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: 2rem; }
    & .pdf-hero .hero-rule { display: none; }
    & .pdf-button { background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: var(--radius); padding: .9rem 1.5rem; font-size: .95rem; letter-spacing: 0; }
    & .pdf-button:hover { background: var(--btn-bg); color: var(--btn-fg); filter: brightness(1.12); }
    & .pdf-button .btn-icon { color: inherit; opacity: 1; }
    & .pdf-hero .pdf-note { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .85rem; margin-top: 1rem; }

    /* Заголовки секцій */
    & .content { padding: 1.5rem 2.5rem 3rem; }
    & .section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: var(--h-weight); letter-spacing: -.02em; line-height: 1.2; border: 0; padding: 0; margin-bottom: 1rem; }
    & .section-heading::after { display: none; }
    & .part-num { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold); background: var(--cream); border-radius: var(--radius); padding: .25rem .65rem; margin: 0; }

    /* Передмова */
    & .preface { background: none; border: 0; border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1.6rem; margin-bottom: 3rem; max-width: 72ch; }
    & .preface h2 { font-weight: var(--h-weight); letter-spacing: -.02em; font-size: 1.5rem; }
    & .preface p { font-family: var(--font-read); text-align: left; hyphens: manual; color: var(--text); font-size: 1.02rem; line-height: 1.8; }
    & .preface-extended p:first-of-type::first-letter { float: none; font: inherit; line-height: inherit; padding: 0; color: inherit; text-shadow: none; }
    & .notation-list li { background: var(--cream); border: 0; border-radius: var(--radius); }
    & .notation-badge { border-radius: calc(var(--radius) / 2); box-shadow: none; font-family: var(--font-ui); }
    & .notation-important { background: var(--gold); color: var(--btn-fg); text-shadow: none; }
    & .notation-task, & .notation-question { background: var(--crimson); color: #fff; }
    & .notation-star { background: var(--heading); color: var(--paper); }

    /* Автор */
    & .authors { justify-content: flex-start; }
    & .author-card { flex: 0 1 460px; max-width: none; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; align-items: center; text-align: left; background: var(--cream); border: 0; border-radius: var(--radius); padding: 1.2rem; }
    & .author-photo { grid-row: 1 / 3; margin: 0; border: 2px solid var(--gold); box-shadow: none; filter: none; border-radius: var(--photo-r); }
    & .author-card strong { margin: 0; font-weight: 600; }
    & .author-card a { color: var(--heading); border-bottom: 1px solid var(--gold); }
    & .author-card p { margin: 0; font-style: normal; font-size: .88rem; }

    /* Зміст */
    & .toc-ctrl-btn { border-radius: var(--radius-pill); background: none; color: var(--text); border: 1px solid var(--border); }
    & .toc-ctrl-btn:hover { background: var(--cream); color: var(--heading); border-color: var(--rule); }
    & .toc-list { border: 0; margin: 0; }
    & .toc-list > li, & .toc-list > li:nth-child(odd) { background: transparent; border-bottom: 1px solid var(--border); }
    & .toc-row { padding: .95rem 0; gap: .9rem; align-items: center; }
    & .toc-num { border: 0; background: var(--cream); color: var(--gold); border-radius: var(--radius); font-family: var(--font-mono); font-weight: 600; min-width: 2.5rem; height: 2.1rem; font-size: .9rem; }
    & .toc-title { font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; color: var(--heading); }
    & .toc-title:hover { color: var(--gold); }
    & .toc-dots { display: none; }
    & .toc-toggle { margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); }
    & li.toc-open > .toc-row .toc-toggle { background: var(--gold); border-color: var(--gold); color: var(--btn-fg); }
    & .sub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 2.2rem; padding: .2rem 0 1.2rem 3.4rem; }
    & .sub-list li { font-style: normal; font-size: .93rem; }
    & .sub-list li::before { display: none; }
    & .sub-list a { display: block; padding: .35rem 0; }
    & .sub-list a:hover { color: var(--gold); text-decoration: none; }

    /* Решта */
    & hr { background: var(--border); }
    & hr::after { display: none; }
    & .ref-links { font-family: var(--font-ui); font-style: normal; }
    & .ref-links a { color: var(--gold); }
    & .back-to-top { background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--radius); }
    & .back-to-top:hover { background: var(--crimson); color: #fff; }
    & footer { margin: 0 2.5rem; padding: 1.6rem 0 2.5rem; background: none; color: var(--muted); text-align: left; text-transform: none; letter-spacing: 0; font-size: .85rem; line-height: 1.6; border-top: 1px solid var(--border); }

    @media (max-width: 720px) {
        & .pdf-hero { padding: 5.5rem 1.25rem 2rem; min-height: 420px; }
        & .content { padding: 1rem 1.25rem 2rem; }
        & .sub-list { padding-left: 0; }
        & footer { margin: 0 1.25rem; }
    }
}

/* ═══ Тільки «Креслення» ═══ */
html[data-design="blueprint"] {
    & body::before { display: block; opacity: 1; mix-blend-mode: normal; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
    & .container { border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 82%, transparent); }
    & .pdf-hero { border-bottom: 1px solid var(--rule); }
    & .pdf-note { font-family: var(--font-mono); }
    & .section-heading { border-bottom: 1px solid var(--rule); padding-bottom: .6rem; }
    & .toc-num { border: 1px solid var(--rule); background: none; }
    & .toc-dots { display: block; align-self: center; margin: 0 .3rem; border-bottom: 1px dashed var(--rule); }
    & footer { border-top: 1px solid var(--rule); font-family: var(--font-mono); }
}