/* =========================================================
   site.css — გაერთიანებული სტილები ყველა გაკვეთილის გვერდისთვის
   (html.css, html-semantika.css, html_canvas_svg.css, html_formebi.css,
   html_grafikuli_obieqtebi.css, html_link_types.css, html_multimedia.css,
   html_text_formating.css, html-shenaxvis-formati.css, lists.css,
   symbols.css, table.css-ის გაერთიანება, დუბლიკატების გარეშე)

   ჩასვით ყველა გვერდის <head>-ში ერთნაირად:
   <link rel="stylesheet" href="css/site.css">
   ========================================================= */
:root {
    --paper: #f2f5f7;
    --sheet: #fff;
    --ink: #14212b;
    --muted: #55656f;
    --line: #d3dce2;
    --blue: #0f5c8c;
    --blue-soft: #dcecf6;
    --mark: #ffd84d;
    --err: #b3261e;
    --err-soft: #fbe4e2;
    --sans: "Noto Sans Georgian", "BPG Nino Mtavruli", "Sylfaen", "Segoe UI", system-ui, sans-serif;
    --serif: "Noto Serif Georgian", "Sylfaen", Georgia, serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0f1a22;
        --sheet: #16252f;
        --ink: #e6eef3;
        --muted: #9db0bc;
        --line: #2b3f4c;
        --blue: #6cb8e8;
        --blue-soft: #1c3646;
        --mark: #e0b92c;
        --err: #ff8f86;
        --err-soft: #3b1f22
    }
}

/* ---------- საბაზისო რესეტი ---------- */
* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.8
}

a {
    color: var(--blue)
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 3px
}

/* ---------- განლაგება ---------- */
.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 56px
}

main {
    min-width: 0
}

/* ---------- სარჩევი (TOC) ---------- */
nav.toc {
    position: sticky;
    top: 24px;
    align-self: start;

    overflow-y: auto;
    font-family: var(--sans);
    font-size: 0.92rem;
    line-height: 1.4
}

nav.toc p {
    margin: 0 0 12px;
    font-weight: 800
}

nav.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--line)
}

nav.toc a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--muted);
    text-decoration: none
}

nav.toc a:hover {
    color: var(--ink);
    border-left-color: var(--blue)
}

/* სარჩევის ქვეშ დამატებული ვიდეო-ბმულების სია */
.toc-videos-title {
    margin: 28px 0 12px;
    font-weight: 800
}

ul.toc-videos {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--line)
}

ul.toc-videos li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 8px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--muted);
    text-decoration: none
}

ul.toc-videos li a::before {
    content: "▶";
    font-size: 0.75em;
    color: var(--blue);
    flex: none
}

ul.toc-videos li a:hover {
    color: var(--ink);
    border-left-color: var(--blue)
}

/* ---------- სათაურის ბლოკი (hero) ---------- */
header.hero {
    margin-bottom: 40px
}

h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 20px
}

.lead {
    max-width: 85%;
    margin: 0 0 12px
}

/* ---------- მთავარ გვერდზე დაბრუნების ღილაკები (ორივე ვარიანტი) ---------- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease
}

.back-link:hover {
    background: var(--blue);
    color: #fff;
    transform: translatex(-2px)
}

@media (prefers-color-scheme: dark) {
    .back-link:hover {
        color: #0b1a24
    }
}

.back-arrow {
    font-size: 1.05em;
    line-height: 1
}

.back-index {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--blue);
    background: transparent;
    border: 2px solid var(--blue);
    border-radius: 999px;
    padding: 10px 22px 10px 18px;
    text-decoration: none;
    margin-top: 10px
}

.back-index:hover {
    background: var(--blue-soft)
}

.back-index:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px
}

.back-index .ic-arrow {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* ---------- ინლაინ SVG ილუსტრაციები (.fig) ---------- */
.fig {
    margin: 28px 0;
    max-width: 720px
}

.fig.my {
    max-width: 100%
}

.fig.my figcaption {
    white-space: nowrap;
    overflow-x: auto;
    display: block
}

.fig svg {
    display: block;
    width: 100%;
    height: auto
}

.fig figcaption {
    font-family: var(--sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
    margin-top: 8px
}

.fig text {
    font-family: var(--sans);
    font-size: 15px;
    fill: var(--ink)
}

.fig .mono {
    font-family: var(--mono)
}

.fig .b {
    font-weight: 700
}

.fig .muted {
    fill: var(--muted)
}

/* ზომების სკალა (დიდი დიაგრამებისთვის) */
.fig .xs {
    font-size: 13px
}

.fig .sm {
    font-size: 13px
}

.fig .md {
    font-size: 17px
}

.fig .h {
    font-size: 22px
}

.fig .xl {
    font-size: 28px
}

.fig .big {
    font-size: 56px
}

.fig .box {
    fill: var(--sheet);
    stroke: var(--line);
    stroke-width: 2
}

.fig .box-blue {
    fill: var(--blue-soft);
    stroke: var(--blue);
    stroke-width: 2
}

.fig .pill {
    fill: var(--paper)
}

.fig .fill-blue {
    fill: var(--blue)
}

.fig .fill-mark {
    fill: var(--mark)
}

.fig .fill-err {
    fill: var(--err)
}

.fig .fill-line {
    fill: var(--line)
}

.fig .rule {
    stroke: var(--line);
    stroke-width: 2;
    fill: none
}

.fig .arrow {
    stroke: var(--blue);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.fig .x-mark {
    stroke: var(--err);
    stroke-width: 3;
    stroke-linecap: round
}

.fig .ahead {
    fill: var(--blue)
}

.fig .on-mark {
    fill: #14212b
}

.fig .on-blue {
    fill: #fff
}

@media (prefers-color-scheme: dark) {
    .fig .on-blue {
        fill: #0b1a24
    }
}

/* ---------- სექციები და ტექსტი ---------- */
section {
    padding-top: 48px;
    margin-top: 48px;
    border-top: 1px solid var(--line)
}

h2 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.3;
    margin: 0 0 20px;
    /* max-width: 32ch */
}

h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 36px 0 12px
}

section p,
section li,
header p {
    max-width: 85ch
}

section p {
    margin: 0 0 1.1em
}

code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--blue-soft);
    padding: 2px 6px;
    border-radius: 4px
}

code>span {
    color: red;
    font-size: 1.1em;
    font-weight: 800
}

/* ---------- გამოკვეთილი ბლოკი (callout) ---------- */
.callout {
    max-width: 85%;
    background: var(--sheet);
    border-left: 4px solid var(--blue);
    padding: 14px 20px;
    margin: 24px 0;
    border-radius: 0 8px 8px 0
}

.callout p {
    margin: 0
}

.callout p+p {
    margin-top: 0.8em
}

.callout b {
    font-family: var(--sans);
    font-weight: 600
}

.callout.analogy {
    border-left-color: var(--mark)
}

.callout.warn {
    border-left-color: var(--err)
}

/* ---------- დავალებების გვერდზე გადასვლის ბმული ---------- */
.assignment-page-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: all 0.2s ease;
}

.assignment-page-link:hover {
    color: var(--ink);
    border-bottom-color: var(--blue);
    transform: translateX(4px);
}


.warn {
    border-left-color: var(--mark)
}

/* ---------- ბარათების სია ---------- */
ul.tools {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    max-width: 85%;
}

ul.tools li {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 12px 18px;
    margin-bottom: 10px;
    line-height: 1.7
}

/* ---------- ორსვეტიანი შედარება ---------- */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
    max-width: 780px
}

.compare>div {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px
}

.compare h4 {
    margin: 0 0 8px;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.4
}

.compare p {
    margin: 0 0 0.7em;
    font-size: 1rem;
    line-height: 1.7
}

.compare p:last-child {
    margin-bottom: 0
}

.compare .accent {
    border-color: var(--blue)
}

.compare .html-side {
    border-color: var(--blue)
}

.compare .bad {
    border-color: var(--err)
}

/* ---------- სათაურების კიბე ---------- */
.ladder {
    max-width: 640px;
    margin: 24px 0;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 18px;
    font-family: var(--sans)
}

.rung {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    line-height: 1.3
}

.rung:last-child {
    border-bottom: 0
}

.rung code {
    flex: none;
    width: 4.2em;
    text-align: center
}

.rung span {
    font-weight: 800
}

.r1 span {
    font-size: 2em
}

.r2 span {
    margin-left: 16px;
    font-size: 1.5em
}

.r3 span {
    margin-left: 32px;
    font-size: 1.17em
}

.r4 span {
    margin-left: 48px;
    font-size: 1em
}

.r5 span {
    margin-left: 64px;
    font-size: 0.83em
}

.r6 span {
    margin-left: 80px;
    font-size: 0.67em
}

/* ---------- ტეგის ანატომია (html.css გვერდის სპეციფიკური) ---------- */
.anatomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 28px 0;
    font-family: var(--mono);
    font-size: clamp(1rem, 2.6vw, 1.5rem);
    line-height: 1.4
}

.anatomy>div {
    padding: 0 4px 12px;
    border-bottom: 4px solid var(--blue)
}

.anatomy>div+div {
    margin-left: 8px
}

.anatomy .body {
    border-bottom-color: var(--mark);
    font-family: var(--serif)
}

.anatomy small {
    display: block;
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.3
}

/* ===== .anatomy — ადაპტური მცირე ეკრანებზე ===== */
@media (max-width: 700px) {
    .anatomy {
        font-size: 1rem
    }

    .anatomy>div {
        padding: 0 2px 8px
    }

    .anatomy>div+div {
        margin-left: 2px
    }

    .anatomy small {
        font-size: 0.7rem
    }
}

@media (max-width: 480px) {
    .anatomy {
        font-size: 0.85rem
    }

    .anatomy>div {
        padding: 0 1px 6px
    }

    .anatomy>div+div {
        margin-left: 1px
    }

    .anatomy small {
        font-size: 0.62rem;
        margin-top: 6px
    }
}

.slash {
    background: var(--mark);
    color: #14212b;
    padding: 0 3px;
    border-radius: 3px
}

/* ---------- ნაბიჯების სია ---------- */
ol.steps {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    counter-reset: s;
    max-width: 85%;
}

ol.steps li {
    counter-increment: s;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    margin-bottom: 18px
}

ol.steps li::before {
    content: counter(s);
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #fff;
    border-radius: 50%
}

@media (prefers-color-scheme: dark) {
    ol.steps li::before {
        color: #0b1a24
    }
}

/* ---------- სია-არჩევანის გზამკვლევი და კოდის ნაწყვეტები ---------- */
.decide {
    max-width: 640px;
    margin: 24px 0;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 18px;
    font-family: var(--sans);
    line-height: 1.5
}

.decide .q {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.decide .q:last-child {
    border-bottom: 0
}

.decide .q b {
    font-weight: 600
}

.decide .q .arrow {
    color: var(--blue);
    font-weight: 800
}

.decide .q small {
    display: block;
    color: var(--muted);
    font-size: 0.85rem
}

pre.snippet {
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--blue-soft);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre;
    max-width: 86ch
}

.compare h4+pre.snippet {
    margin-top: 4px
}

/* ---------- ცოცხალი მაგალითი, ვარიანტი "lab" (html.css/html-semantika.css) ---------- */
.lab {
    margin-top: 32px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden
}

.lab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.3;
    background: var(--blue-soft)
}

.lab-bar strong {
    font-weight: 600
}

.lab-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

#status {
    color: var(--muted)
}

#status.dirty {
    color: var(--ink);
    background: var(--mark);
    padding: 2px 8px;
    border-radius: 4px
}

#status.bad {
    color: var(--err);
    background: var(--err-soft);
    padding: 2px 8px;
    border-radius: 4px
}

.lab-panes {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.lab-note {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5
}

.lab-note.struct {
    border-top: 0
}

button {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer
}

@media (prefers-color-scheme: dark) {
    button {
        color: #0b1a24
    }
}

button:hover {
    filter: brightness(1.1)
}

/* .lab-ის ტექსტარეა/ბრაუზერის ჩარჩო (მაღალი, ფიქსირებული) */
.lab textarea,
.lab iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: 0;
    background: transparent;
    color: inherit
}

.lab textarea {
    font-family: var(--mono);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 10px 14px 14px;
    resize: vertical
}

.lab iframe {
    background: #fff
}

/* ---------- ცოცხალი მაგალითი, ვარიანტი "ex" (დანარჩენი გვერდები) ---------- */
.ex {
    margin: 28px 0;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden
}

.ex-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--blue-soft);
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.3
}

.ex-bar strong {
    font-weight: 600
}

.ex-status {
    color: var(--muted)
}

.ex-status.bad {
    color: var(--err);
    background: var(--err-soft);
    padding: 2px 8px;
    border-radius: 4px
}

.ex-panes {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.ex textarea,
.ex iframe {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit
}

.ex textarea {
    min-height: 96px;
    font-family: var(--mono);
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 10px 14px 14px;
    resize: vertical;
    tab-size: 2
}

.ex iframe {
    background: #fff;
    min-height: 96px;
    height: 120px
}

.ex-hint {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    max-width: none
}

/* .pane/.pane-title საერთოა ორივე ვარიანტისთვის */
.pane {
    min-width: 0
}

.pane+.pane {
    border-left: 1px solid var(--line)
}

.pane-title {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--muted);
    padding: 8px 14px 0;
    line-height: 1.4
}

/* ---------- ტეგის შემოწმების ანგარიში (.report) — ორივე ოჯახის მხარდაჭერით ---------- */
.report {
    padding: 12px 14px;
    border-top: 1px solid var(--err);
    background: var(--err-soft);
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.6
}

.report[hidden] {
    display: none
}

.report.ok {
    background: var(--blue-soft);
    border-top-color: var(--line)
}

.report.bad {
    background: var(--err-soft);
    border-top-color: var(--err)
}

.report p {
    margin: 0;
    max-width: none
}

.report ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none
}

.report li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
    max-width: none
}

.report .jump {
    flex: none;
    background: none;
    color: var(--err);
    border: 1px solid var(--err);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer
}

.report .jump:hover {
    background: var(--err);
    color: var(--err-soft)
}

.report code {
    background: transparent;
    border: 1px solid var(--line)
}

.report .hint {
    margin-top: 8px;
    color: var(--muted)
}

/* ---------- ტეგების საძიებო ცხრილი ---------- */
.finder {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 20px 0 14px;
    font-family: var(--sans)
}

.finder input {
    flex: 1 1 260px;
    max-width: 420px;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px
}

.finder span {
    font-size: 0.9rem;
    color: var(--muted)
}

.table-wrap {
    overflow-x: auto;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px
}

table.tags {
    border-collapse: collapse;
    width: 100%;
    min-width: 680px;
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.6
}

.tags caption {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--muted);
    caption-side: top
}

.tags th,
.tags td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line)
}

.tags thead th {
    background: var(--blue-soft);
    font-weight: 800
}

.tags tr.group th {
    background: var(--paper);
    color: var(--blue);
    font-weight: 800;
    font-size: 1rem
}

.tags td:first-child {
    white-space: nowrap;
    width: 1%
}

.tags td:nth-child(2) {
    width: 38%
}

.tags tr.obs td {
    color: var(--muted)
}

.tags tr.obs code {
    text-decoration: line-through
}

.tags tr[hidden],
.tags tbody[hidden] {
    display: none
}

#nomatch {
    font-family: var(--sans);
    color: var(--muted);
    margin: 12px 0 0
}

#nomatch[hidden] {
    display: none
}

/* სიმბოლოების (ერთეულების) ცხრილის დამატებითი კლასები */
.tags.ent {
    min-width: 900px
}

.tags.ent td.g {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
    font-family: var(--sans)
}

.tags.ent td:nth-child(2) {
    width: auto
}

.tags.ent td:nth-child(3) {
    white-space: nowrap
}

.tags.ent td:nth-child(4) {
    min-width: 12em
}

.tags.ent small {
    display: block;
    color: var(--muted);
    font-size: 0.85rem
}

.tags.ent .none {
    font-size: 0.8rem;
    color: var(--muted)
}

/* ---------- ქვედა კოლონტიტული ---------- */
footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--muted)
}

/* ---------- აუდიო ღილაკები ---------- */
.audio-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px
}

.audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--blue);
    background: transparent;
    border: 2px solid var(--blue);
    border-radius: 999px;
    padding: 8px 18px 8px 14px;
    cursor: pointer
}

.audio-btn:hover {
    background: var(--blue-soft);
    filter: none
}

.audio-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor
}

.audio-btn .ic-pause {
    display: none
}

.audio-btn.is-playing {
    background: var(--blue);
    color: #fff
}

.audio-btn.is-playing:hover {
    background: var(--blue)
}

.audio-btn.is-playing .ic-play {
    display: none
}

.audio-btn.is-playing .ic-pause {
    display: block
}

@media (prefers-color-scheme: dark) {
    .audio-btn.is-playing {
        color: #0b1a24
    }
}

.audio-msg {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--err)
}

/* ---------- საპასუხისმგებლო წერტილები ---------- */
@media (max-width: 900px) {
    .wrap {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 24px
    }

    nav.toc {
        position: static;
        max-height: none
    }

    nav.toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        border-left: 0
    }

    nav.toc a {
        border-left: 0;
        padding: 4px 0;
        margin: 0
    }
}

@media (max-width: 700px) {
    .lab-panes {
        grid-template-columns: 1fr
    }

    .ex-panes {
        grid-template-columns: 1fr
    }

    .pane+.pane {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .compare {
        grid-template-columns: 1fr
    }

    .decide .q {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .decide .q .arrow {
        display: none
    }
}

/* =========================================================
   index.html — კურსის გვერდი (მენიუს გარეშე)
   ========================================================= */
/* hero — იგივე სტილი, რაც HTML.html-ის header.hero */
/* მეცადინეობის ბლოკი — იგივე ლოგიკა, რაც section */
/* თემის ბარათი — იგივე სტილი, რაც ul.tools li */
/* ღილაკები — იგივე სტილი, რაც .back-link ან .audio-btn */
/* =========================================================
   index.html — კურსის გეგმა: კვირები, მეცადინეობები, ბლოკები
   ========================================================= */
/* ---------- Hero ---------- */
.hero-index {
    position: relative;
    padding: 48px 40px 44px;
    border-radius: 18px;
    background: radial-gradient(circle at 100% 0%, var(--blue-soft) 0%, transparent 55%), linear-gradient(135deg, var(--sheet) 0%, var(--paper) 100%);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 44px
}

.hero-index::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--mark);
    opacity: 0.18
}

.hero-index h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1rem, 6vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    position: relative;
    z-index: 1
}

.hero-index .hero-eyebrow {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 12px;
    position: relative;
    z-index: 1
}

.hero-index p {
    position: relative;
    z-index: 1;
    max-width: 60ch;
    margin: 0 0 10px;
    color: var(--muted)
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
    position: relative;
    z-index: 1
}

.hero-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 18px
}

.hero-stats span b {
    font-size: 1.1rem;
    color: var(--blue)
}

/* ---------- კვირის სექცია ---------- */
.week-block {
    padding-top: 44px;
    margin-top: 44px;
    border-top: 2px solid var(--line)
}

.week-block:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0
}

.week-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px
}

.week-head .week-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 0.7rem;
    line-height: 1.1;
    text-align: center;
    color: #fff;
    background: var(--blue);
    border-radius: 16px;
    box-shadow: 0 4px 0 rgba(15, 92, 140, 0.25)
}

.week-head .week-badge b {
    display: block;
    font-size: 1.5rem
}

@media (prefers-color-scheme: dark) {
    .week-head .week-badge {
        color: #0b1a24;
        box-shadow: 0 4px 0 rgba(108, 184, 232, 0.25)
    }
}

.week-head h2 {
    margin: 0;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    max-width: none
}

.week-head .sub {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 4px
}

/* ---------- მეცადინეობის ბლოკი ---------- */
.session-head .session-num {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
    background: var(--blue);
    border-radius: 8px;
    padding: 4px 10px
}

@media (prefers-color-scheme: dark) {
    .session-head .session-num {
        color: #0b1a24
    }
}

.session-head .session-day {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em
}

/* ---------- თემის ბარათი ---------- */
.theme-card:hover {
    transform: translatex(3px);
    box-shadow: 0 8px 20px -14px rgba(15, 92, 140, 0.4)
}

@media (prefers-color-scheme: dark) {
    .theme-links a:hover {
        color: #0b1a24
    }
}

@media (max-width: 600px) {
    .hero-index {
        padding: 32px 22px;
        border-radius: 14px
    }

    .week-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .session-head .session-day {
        margin-left: 0;
        width: 100%
    }
}

/* =========================================================
   index.html — კურსის გვერდი (მენიუს გარეშე)
   ========================================================= */
.wrap-index {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 80px
}

/* hero — იგივე სტილი, რაც HTML.html-ის header.hero */
.wrap-index header.hero-index {
    margin-bottom: 40px
}

/* მეცადინეობის ბლოკი — იგივე ლოგიკა, რაც section */
.session {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid var(--line);
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 22px 20px;
    margin: 0 0 16px
}

.session:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0
}

.session-head {
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--line)
}

.session-head .session-title {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    line-height: 1.3;
    margin: 0;
    /* max-width: 32ch */
}

/* თემის ბარათი — იგივე სტილი, რაც ul.tools li */
.theme-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.theme-card {
    background: var(--sheet);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 14px 20px;
    margin-bottom: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease
}

.theme-card .theme-num {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 4px
}

.theme-card h4 {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4
}

.theme-card h4 a {
    color: var(--ink);
    text-decoration: none
}

.theme-card h4 a:hover {
    color: var(--blue)
}

.theme-card h4 a.is-disabled {
    color: var(--muted);
    cursor: not-allowed;
    pointer-events: none
}

.theme-card .theme-desc {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: none
}

/* ღილაკები — იგივე სტილი, რაც .back-link ან .audio-btn */
.theme-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.theme-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--blue);
    border-radius: 999px;
    padding: 5px 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease
}

.theme-links a:hover {
    background: var(--blue-soft);
    color: #fff
}

.theme-links a.is-disabled {
    color: var(--muted);
    border-color: var(--line);
    border-style: dashed;
    opacity: 0.6;
    pointer-events: none
}

/* =========================================================
   თემების ძებნა (index.html)
   ========================================================= */
.theme-finder {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--sans)
}

.theme-finder label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink)
}

.theme-finder input {
    flex: 1 1 260px;
    max-width: 480px;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px
}

.theme-finder input:focus {
    outline: 3px solid var(--blue);
    outline-offset: 2px
}

.theme-finder .theme-count {
    font-size: 0.9rem;
    color: var(--muted)
}

.theme-finder .theme-clear {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--blue);
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer
}

.theme-finder .theme-clear:hover {
    background: var(--blue-soft)
}

.theme-finder .theme-clear[hidden] {
    display: none
}

/* დამალული თემა */
ul.tools li[hidden],
section[hidden] {
    display: none !important
}

/* შეტყობინება — ვერ მოიძებნა */
.theme-empty {
    padding: 16px 20px;
    margin: 20px 0;
    background: var(--sheet);
    border-left: 4px solid var(--mark);
    border-radius: 0 8px 8px 0;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--muted)
}

.theme-empty[hidden] {
    display: none
}

/* მონიშვნა — ნაპოვნი ტექსტი */
.theme-card mark {
    background: var(--mark);
    color: #14212b;
    padding: 0 2px;
    border-radius: 2px
}

/* =========================================================
   საბეჭდი (print) სტილები — ერთიანად ყველა გვერდისთვის
   ========================================================= */
@media print {
    :root {
        --paper: #fff;
        --sheet: #fff;
        --ink: #000;
        --muted: #444;
        --line: #999;
        --blue: #0f5c8c;
        --blue-soft: #fff;
        --mark: #ffe98a;
        --err: #b3261e;
        --err-soft: #fff
    }

    * {
        color: var(--ink) !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    html,
    body {
        background: #fff !important;
        font-size: 12pt;
        line-height: 1.5
    }

    .wrap {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important
    }

    main {
        width: 100% !important
    }

    nav.toc,
    ul.toc-videos,
    .toc-videos-title,
    .back-link,
    .back-index,
    .audio-row,
    .lab,
    .ex,
    button,
    #status,
    .lab-note,
    .ex-hint,
    .report {
        display: none !important
    }

    h1,
    h2,
    h3,
    h4 {
        color: #000 !important;
        page-break-after: avoid;
        break-after: avoid
    }

    h1 {
        font-size: 20pt
    }

    h2 {
        font-size: 16pt;
        margin-top: 24pt
    }

    h3 {
        font-size: 13pt
    }

    section {
        border-top: none;
        margin-top: 20pt;
        padding-top: 8pt;
        page-break-inside: auto
    }

    p,
    li {
        orphans: 3;
        widows: 3;
        max-width: 100% !important
    }

    .fig,
    .callout,
    .compare,
    ul.tools li,
    ol.steps li,
    .anatomy {
        page-break-inside: avoid;
        break-inside: avoid
    }

    .fig svg {
        max-width: 100% !important;
        height: auto !important
    }

    .fig text {
        fill: #000 !important
    }

    .fig .box,
    .fig .box-blue {
        fill: #fff !important;
        stroke: #000 !important
    }

    .fig .arrow,
    .fig .rule {
        stroke: #000 !important
    }

    .fig .fill-blue,
    .fig .ahead {
        fill: #000 !important
    }

    .fig .fill-mark {
        fill: #eee !important
    }

    .fig .on-blue,
    .fig .on-mark {
        fill: #000 !important
    }

    .callout,
    .compare>div,
    ul.tools li {
        border: 1px solid #000 !important;
        border-left-width: 4px !important
    }

    ul.tools li {
        transition: border-left-color 0.15s ease, transform 0.15s ease
    }

    ul.tools li:hover {
        cursor: pointer;
        border-left-color: var(--mark);
        transform: translatex(2px)
    }

    code {
        border: 1px solid #ccc;
        background: #f5f5f5 !important
    }

    code>span {
        color: #000 !important;
        font-weight: 800
    }

    a {
        color: #000 !important;
        text-decoration: underline
    }

    a[href]::after {
        content: ""
    }

    footer {
        border-top: 1px solid #000;
        margin-top: 24pt
    }

    @page {
        margin: 2cm
    }
}

/* თუ editor-ს აქვს კლასი ან ID */
textarea#code,
textarea.code-editor,
.editor-wrap textarea {
    min-height: 400px !important;
    height: 60vh !important;
}

pre.snippet {
    margin: 0;
    padding: 14px;
    overflow-x: auto;
    background: #f8fafc;
    /* ღია ნაცრისფერი ფონი */
    border-left: 4px solid var(--blue);
    /* ლურჯი ზოლი მარცხნივ */
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    max-width: 86ch;
}

pre.code-block {
    background: #505050;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.6;
    border-left: 4px solid var(--mark);
    overflow-x: auto;
    margin: 20px 0;
    white-space: pre;
    max-width: 85%;
    color: white;
}

/* მუქი თემისთვის (თუ ვინმე მუქ თემას იყენებს) */
@media (prefers-color-scheme: dark) {
    pre.code-block {
        background: var(--sheet);
        color: var(--ink);
    }
}