/* Guides Page — mobile-first */

.guides-page {
    padding: 1rem 0;
}

/* List: topic sections with even cards */
.guides-topic { margin-top: 2rem; }

.guides-topic__title {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 0.75rem;
}

.guide-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}

.guide-card:hover { border-color: var(--color-accent); }
.guide-card__icon { font-size: 1.6rem; line-height: 1; }
.guide-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }

.guide-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.guide-card__desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.45; }
.guide-card__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }

/* Detail */
.guide-detail__header {
    max-width: 1100px;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Sized like a section heading: the title is one line of context, not a banner */
.guide-detail__header h1 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    color: var(--color-primary);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.guide-detail__description { font-size: 1.05rem; color: var(--color-text-secondary); margin: 0 0 0.5rem; }

/* About this article (topic, author, dates, AI note, «Сүүлд шалгасан»), after the text */
.guide-meta { margin-top: 2rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.guide-meta .guide-meta__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.3rem; margin: 0 0 0.35rem; padding: 0; border: 0; font-size: inherit; }
.guide-meta__line > span + span::before { content: "· "; }

.guide-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 1100px; }

@media (min-width: 961px) {
    .guide-detail__header h1 { font-size: 1.75rem; }
    .guide-detail__layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; }
    .guide-toc { order: 2; }
    .guide-toc details { position: sticky; top: calc(var(--header-offset, 0px) + 1rem); }
}

/* Table of contents */
.guide-toc details {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.guide-toc summary { font-weight: 700; color: var(--color-primary); cursor: pointer; }
.guide-toc__list { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.guide-toc__list li { margin: 0.35rem 0; }
.guide-toc__list a { color: var(--color-text); text-decoration: none; }
.guide-toc__list a:hover { color: var(--color-primary); text-decoration: underline; }

.guide-detail__thumbnail img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; margin-bottom: 1.5rem; }

/* Content typography */
.guide-detail__content { font-size: 1rem; line-height: 1.7; color: var(--color-text); }
.guide-detail__content p { margin-bottom: 1rem; }

.guide-detail__content h2,
.guide-detail__content h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    line-height: 1.3;
    margin: 2.25rem 0 0.75rem;
    scroll-margin-top: calc(var(--header-offset, 0px) + 1rem);
}

.guide-detail__content h2 { font-size: 1.45rem; }
.guide-detail__content h3 { font-size: 1.2rem; }
.guide-detail__content ul,
.guide-detail__content ol { margin: 0 0 1rem 1.4rem; }
.guide-detail__content li { margin-bottom: 0.4rem; }
.guide-detail__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.guide-detail__content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }

.guide-detail__content blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 0.25rem 1rem;
    margin: 1rem 0;
    color: var(--color-text-secondary);
}

.guide-detail__content code {
    background: var(--color-surface-alt);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.92em;
}

/* Tables scroll sideways on phones instead of squashing */
.guide-detail__content table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
}

.guide-detail__content th,
.guide-detail__content td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.guide-detail__content th { background: var(--color-surface-alt); color: var(--color-primary); white-space: nowrap; }

/* Callouts */
.guide-detail__content .callout {
    margin: 1rem 0 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.98rem;
}

.guide-detail__content .callout--tip { background: var(--color-info-bg); border-color: var(--color-info); }
.guide-detail__content .callout--warn { background: var(--color-warning-bg); border-color: var(--color-warning); }
.guide-detail__content .callout--tip::before { content: "💡 "; }
.guide-detail__content .callout--warn::before { content: "⚠️ "; }

/* Numbered steps */
.guide-detail__content ol.steps { list-style: none; counter-reset: step; margin-left: 0; }

.guide-detail__content ol.steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.85rem;
}

.guide-detail__content ol.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checklist */
.guide-detail__content ul.checklist { list-style: none; margin-left: 0; }
.guide-detail__content ul.checklist li { position: relative; padding-left: 1.75rem; }
.guide-detail__content ul.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1em;
    height: 1em;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
}

/* Sources + last checked */
.guide-detail__content ul.sources { font-size: 0.92rem; }

.guide-detail__content .checked-date {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

/* Stage filter */
.guides-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }

.guides-filter__pill {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.guides-filter__pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.guides-filter__pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }

/* ---------- Visuals for explaining (see /styles) ---------- */

/* Bar comparison: one series, value at the tip; widths come from viz.js. */
.guide-detail__content .viz-bars { margin: 1rem 0 1.5rem; }
.guide-detail__content .viz-bars__title { font-weight: 700; margin-bottom: 0.6rem; }
.guide-detail__content .viz-bar {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0;
    font-size: 0.92rem;
}
.guide-detail__content .viz-bar:hover .viz-bar__fill { background: var(--color-primary-hover); }
.guide-detail__content .viz-bar__label { color: var(--color-text-secondary); }
.guide-detail__content .viz-bar__track { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.guide-detail__content .viz-bar__fill {
    height: 18px;
    width: 0;
    border-radius: 0 4px 4px 0;
    background: var(--color-primary);
    transition: width 0.4s ease;
}
.guide-detail__content .viz-bar__value { font-weight: 600; white-space: nowrap; }
.guide-detail__content .viz-bars__note { margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); }

/* Timeline: time-ordered steps. */
.guide-detail__content .viz-timeline { list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.guide-detail__content .viz-timeline li {
    position: relative;
    padding: 0 0 1rem 1.75rem;
    border-left: 2px solid var(--color-border-strong);
    margin: 0 0 0 0.45rem;
}
.guide-detail__content .viz-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.guide-detail__content .viz-timeline li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 0.3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-bg);
}
.guide-detail__content .viz-timeline__when { display: block; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.03em; }

/* Stat tiles: a few headline numbers. */
.guide-detail__content .viz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
/* The explanation reads first; the number sits at the bottom, level across the row */
.guide-detail__content .viz-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.guide-detail__content .viz-stat__value { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.guide-detail__content .viz-stat__label { display: block; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.35; }

/* Admin-only Chart.js blocks (charts.js) */
.guide-detail__content .chart { margin: 1rem 0 1.5rem; padding: 1rem; border: 1px solid var(--tengri-line); border-radius: 8px; background: #fff; }
.guide-detail__content .chart__title { font-family: var(--font-heading); font-weight: 600; margin-bottom: 0.5rem; }
.guide-detail__content .chart__canvas { position: relative; height: 260px; }
.guide-detail__content .chart__note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--tengri-ink-soft); }

/* Decision flow: each li is a question; .viz-flow__yes is the exit, "no" continues down. The last li is the fallback answer. */
.guide-detail__content .viz-flow { list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.guide-detail__content .viz-flow > li {
    position: relative;
    margin: 0 0 1.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
}
.guide-detail__content .viz-flow > li:not(:last-child)::after {
    content: "Үгүй ↓";
    position: absolute;
    left: 1rem;
    bottom: -1.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
.guide-detail__content .viz-flow > li:last-child { border-style: dashed; }
.guide-detail__content .viz-flow__q { display: block; font-weight: 700; color: var(--color-primary); }
.guide-detail__content .viz-flow__yes { display: block; margin-top: 0.35rem; }
.guide-detail__content .viz-flow__yes::before { content: "Тийм → "; font-size: 0.78rem; font-weight: 700; color: #047857; }

/* Gantt (charts.js "type":"gantt"): periods on a month axis, numbered markers explained below. */
.guide-detail__content .gantt { --gantt-label: 9rem; position: relative; display: grid; grid-template-columns: var(--gantt-label) 1fr; row-gap: 0.45rem; align-items: center; font-size: 0.85rem; }
.guide-detail__content .gantt__label { padding-right: 0.5rem; color: var(--color-text-secondary); line-height: 1.25; }
.guide-detail__content .gantt__axis { position: relative; height: 2.5rem; border-bottom: 1px solid var(--tengri-line); }
.guide-detail__content .gantt__tick { position: absolute; bottom: 0.15rem; padding-left: 3px; border-left: 1px solid var(--tengri-line); font-weight: 600; color: var(--color-text-muted); }
.guide-detail__content .gantt__track { position: relative; height: 22px; background: var(--color-surface-alt); border-radius: 4px; }
.guide-detail__content .gantt__bar { position: absolute; top: 0; bottom: 0; z-index: 2; border-radius: 4px; overflow: hidden; }
.guide-detail__content .gantt__bar--joined { border-right: 2px solid #fff; border-radius: 4px 0 0 4px; }
.guide-detail__content .gantt__bar--joined + .gantt__bar { border-radius: 0 4px 4px 0; }
.guide-detail__content .gantt__bar--joined + .gantt__bar--joined { border-radius: 0; }
.guide-detail__content .gantt__bar--muted,
.guide-detail__content .gantt__key.gantt__key--muted::before { background: repeating-linear-gradient(135deg, #a3a8b6 0 2px, #e6e8ee 2px 6px); }
.guide-detail__content .gantt__text { display: block; padding: 0 6px; line-height: 22px; font-size: 0.75rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.guide-detail__content .gantt__text[hidden] { display: none; }
.guide-detail__content .gantt__end--inside { padding: 0 6px 0 0; color: #fff; background: none; }
.guide-detail__content .gantt__bar--muted .gantt__text { color: var(--color-text); text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.guide-detail__content .gantt__end { position: absolute; top: 0; padding-left: 8px; line-height: 22px; font-size: 0.8rem; font-weight: 700; color: var(--color-text); white-space: nowrap; z-index: 2; background: var(--color-surface-alt); padding-right: 4px; }
.guide-detail__content .gantt__axis-label { align-self: end; padding-bottom: 0.2rem; font-size: 0.75rem; color: var(--color-text-muted); }
.guide-detail__content .gantt__marker { position: absolute; top: 2.5rem; z-index: 1; bottom: 0; border-left: 2px dashed var(--tengri-ink-soft); pointer-events: none; }
.guide-detail__content .gantt__marker-label { position: absolute; top: -2.5rem; left: -0.55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tengri-ink-soft); color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 1.1rem; }
.guide-detail__content .gantt__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.75rem; font-size: 0.85rem; }
.guide-detail__content .gantt__key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 0.35rem; border-radius: 2px; background: var(--key); vertical-align: -1px; }
.guide-detail__content .gantt__notes { margin: 0.75rem 0 0 1.2rem; font-size: 0.88rem; }
.guide-detail__content .viz-matrix td { vertical-align: top; }
.guide-detail__content .viz-matrix th { white-space: normal; }
.guide-detail__content .viz-matrix td:not(:first-child), .guide-detail__content .viz-matrix thead tr:last-child th, .guide-detail__content .viz-matrix th[colspan] { text-align: center; }
@media (max-width: 600px) { .guide-detail__content .viz-matrix { font-size: 0.85rem; } .guide-detail__content .viz-matrix :is(th, td) { padding: 0.5rem 0.4rem; } }
.guide-detail__content .viz-matrix [class^="req--"] { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.guide-detail__content .viz-matrix .req--yes { background: #e7ebf7; color: #22398a; }
.guide-detail__content .viz-matrix .req--no { background: #dff1ee; color: #0a615a; }
@media (max-width: 600px) { .guide-detail__content .gantt { --gantt-label: 6.5rem; font-size: 0.78rem; } }

/* Scrolly timeline (scrolly.js): the graphic sticks under the header, step cards scroll up beneath it. */
.guide-detail__content .scrolly { margin: 1.5rem 0 2rem; }
.guide-detail__content .scrolly__graphic { position: sticky; top: var(--header-offset, 0px); z-index: 2; padding: 0.5rem 0; background: var(--color-surface-alt); }
.guide-detail__content .scrolly__frame { padding: 0.75rem 0.75rem 0.4rem; border: 1px solid var(--tengri-line); border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(27, 42, 87, .08); }
.guide-detail__content .scrolly__title { font-weight: 700; font-size: 0.95rem; color: var(--color-primary); margin: 0 0 0.25rem 0.25rem; }
.guide-detail__content .scrolly__svg { width: 100%; }
.guide-detail__content .scrolly__svg svg { display: block; overflow: visible; font-family: var(--font-body); }
.guide-detail__content .scrolly__count { text-align: right; font-size: 0.72rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.guide-detail__content .scrolly__steps { position: relative; z-index: 1; padding: 30vh 0 35vh; }
.guide-detail__content .scrolly__step { max-width: 34rem; margin: 0 auto 55vh; padding: 0.9rem 1.1rem; border: 1px solid var(--tengri-line); border-radius: 10px; background: #fff; opacity: 0.45; transition: opacity 0.3s; }
.guide-detail__content .scrolly__step:last-child { margin-bottom: 0; }
.guide-detail__content .scrolly__step.is-active { opacity: 1; box-shadow: 0 6px 18px rgba(27, 42, 87, .1); }
.guide-detail__content .scrolly__step > :first-child { margin-top: 0; }
.guide-detail__content .scrolly__step > :last-child { margin-bottom: 0; }
/* Without the script (or before it runs) the steps are ordinary paragraphs. */
.guide-detail__content .scrolly:not(.is-ready) .scrolly__step { opacity: 1; margin: 0 0 1rem; max-width: none; }
.scrolly__month { font-size: 11px; fill: var(--color-text-muted); }
.scrolly__tick { stroke: var(--tengri-line); }
.scrolly__lane { font-size: 12px; font-weight: 700; fill: var(--color-text-secondary); }
.scrolly__label { font-size: 12px; font-weight: 600; fill: var(--color-text); }
.scrolly__label--on-bar { fill: #fff; }
.scrolly__label--point { font-weight: 700; }
.scrolly__item { opacity: 0; transition: opacity 0.35s; }
.scrolly__item.is-on { opacity: 1; }
.scrolly__item.is-dim { opacity: 0.28; }
.scrolly__bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.scrolly__item.is-on .scrolly__bar { transform: scaleX(1); }
.scrolly__mark { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.45s cubic-bezier(.3, 1.6, .5, 1); }
.scrolly__item.is-on .scrolly__mark { transform: scale(1); }
.scrolly__now { transition: transform 0.7s cubic-bezier(.2, .7, .2, 1), opacity 0.3s; }
.scrolly__now line { stroke: var(--tengri-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.scrolly__now-label { font-size: 11px; font-weight: 700; fill: var(--tengri-ink); }
.scrolly__svg.is-instant * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .scrolly__item, .scrolly__bar, .scrolly__mark, .scrolly__now, .guide-detail__content .scrolly__step { transition: none; }
}

/* Who an article applies to (VisaGroup chips); the tip shows on hover or tap (focus). */
.audience { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; }
.audience__label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-secondary); margin-right: 0.15rem; }
.audience li { position: relative; }
.audience__chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; font: inherit; font-size: 0.82rem; cursor: help; border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); }
.audience__chip--partial { background: var(--color-surface); color: var(--color-primary); }
.audience__chip--no { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.audience__chip--no span:nth-child(2) { text-decoration: line-through; }
.audience__mark { font-weight: 700; }
.audience__tip { display: none; position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(18rem, 80vw); padding: 0.5rem 0.65rem; border-radius: 6px; background: var(--tengri-ink); color: #fff; font-size: 0.8rem; line-height: 1.4; text-align: left; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.audience__tip > * { display: block; }
.audience__chip:hover .audience__tip, .audience__chip:focus .audience__tip { display: block; }

.guides-filter--visa { align-items: center; margin-top: 0.4rem; }
.guides-filter__label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-secondary); }

/* Section tag inside article content, filled in by viz.js. */
.guide-detail__content .visa-tag { display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--color-surface-alt); border: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-text-secondary); cursor: help; }

/* "Хэрэгтэй байсан уу?" one-tap feedback under each article */
.helpful { margin: 2.5rem 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-alt); }
.helpful form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.helpful__q { font-weight: 700; color: var(--color-primary); margin-right: 0.25rem; }
.helpful__btn { padding: 0.35rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); font: inherit; cursor: pointer; }
.helpful__btn:hover { border-color: var(--color-primary); }
.helpful__more { flex-basis: 100%; font-size: 0.9rem; color: var(--color-text-secondary); }
.helpful__more summary { cursor: pointer; }
.helpful__more textarea { width: 100%; margin-top: 0.5rem; font: inherit; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; }
.helpful__hint { margin: 0.25rem 0 0; font-size: 0.82rem; }
.helpful__thanks { margin: 0; font-weight: 600; color: var(--color-primary); }

/* Real-world pitfalls section (wrapped by viz.js) and its jump link in the header */
.guide-detail__content .gotchas { margin: 2rem 0; padding: 0.25rem 1.1rem 0.75rem; border-left: 4px solid var(--color-warning); border-radius: 8px; background: var(--color-warning-bg); }
.guide-detail__content .gotchas h2 { margin-top: 1rem; }
.guide-detail__content .gotchas h2::before { content: "⚠️ "; }

/* Phones: two compact swipeable rows (base.css) right under the header */
@media (max-width: 768px) {
    .guides-filter { gap: 0.3rem; margin-bottom: 0.35rem; }
    .guides-filter__pill {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0.15rem 0.7rem;
        font-size: 0.8rem;
    }
    .guides-filter--visa { margin-top: 0; }
    .guides-filter__label { font-size: 0.75rem; }
    .guides-filter--visa + .guides-topic { margin-top: 1.25rem; }
}

/* The "Миний виз:" label stays put while its row swipes under it */
@media (max-width: 768px) {
    .guides-filter__label {
        position: sticky;
        left: calc(-1 * var(--gutter)); /* sticky offsets count from inside the row padding */
        z-index: 1;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        margin-left: calc(-1 * var(--gutter));
        margin-right: 0.6rem; /* with the 0.4rem gap, room for the 1rem fade */
        padding: 0 0.5rem 0 var(--gutter);
        background: var(--color-bg);
    }
    .guides-filter__label::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;
        width: 1rem;
        background: linear-gradient(to right, var(--color-bg), transparent);
        pointer-events: none;
    }
}

/* Phones: an article group is one surface with rows split by hairlines,
   instead of a stack of separate cards. Descriptions stop at two lines. */
@media (max-width: 768px) {
    .guides-grid {
        display: block;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }
    .guide-card {
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
        border: none;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        background: transparent;
    }
    .guide-card:last-child { border-bottom: none; }
    .guide-card:active { background: var(--color-surface-alt); }
    .guide-card__icon {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: var(--radius);
        background: var(--color-surface-alt);
        font-size: 1.3rem;
    }
    .guide-card__body { gap: 0.15rem; min-width: 0; }
    .guide-card__title { font-size: 0.95rem; }
    .guide-card__desc {
        font-size: 0.85rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

/* The legend toggle is for phones; desktop has hover tips */
.audience__legend-toggle { display: none; }

/* ---------- Article page on phones ----------
   A compact header; audience chips are icons only (filled = applies,
   outlined = partly, faded = doesn't) and a tap opens the legend, where each
   chip becomes a row with its label and note. */
@media (max-width: 768px) {
    .guide-detail__header { margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .guide-detail__header h1 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.35rem; }
    .guide-detail__content h2 { font-size: 1.15rem; }
    .guide-detail__content h3 { font-size: 1.02rem; }
    .guide-detail__description { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.6rem; }

    .audience { gap: 0.3rem; margin: 0 0 0.5rem; }
    .audience__label { font-size: 0.78rem; }
    .audience__legend-toggle { display: list-item; list-style: none; }
    .audience__chip {
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 1rem;
        cursor: pointer;
    }
    .audience__chip > span:nth-child(2),
    .audience__chip .audience__mark,
    .audience__chip .audience__tip { display: none; }
    .audience__chip--no { opacity: 0.45; }
    .audience__chip--no > span:first-child { filter: grayscale(1); }
    .audience__chip:hover .audience__tip,
    .audience__chip:focus .audience__tip { display: none; }

    /* Legend open: chips become rows */
    .audience.is-open { display: grid; grid-template-columns: 1fr; }
    .audience.is-open .audience__label { margin-bottom: 0.1rem; }
    .audience.is-open .audience__legend-toggle { position: absolute; top: 0; right: 0; }
    .audience.is-open { position: relative; }
    .audience.is-open .audience__chip {
        width: 100%;
        height: auto;
        min-height: 40px;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.15rem 0.5rem;
        padding: 0.45rem 0.8rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        text-align: left;
    }
    .audience.is-open .audience__chip > span:nth-child(2),
    .audience.is-open .audience__chip .audience__mark { display: inline; }
    .audience.is-open .audience__chip .audience__tip,
    .audience.is-open .audience__chip:hover .audience__tip,
    .audience.is-open .audience__chip:focus .audience__tip {
        display: block;
        position: static;
        flex-basis: 100%;
        width: auto;
        max-width: none;
        padding: 0 0 0 1.6rem;
        background: none;
        color: inherit;
        box-shadow: none;
        font-size: 0.78rem;
        opacity: 0.85;
    }
    .audience.is-open .audience__chip .audience__tip > * { display: inline; }
    .audience.is-open .audience__chip .audience__tip > * + *::before { content: " "; }

    /* Feedback: question on its own line, two equal answer buttons, then the note */
    .helpful { margin-top: 2rem; padding: 1rem; border-radius: var(--radius); }
    .helpful form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .helpful__q { grid-column: 1 / -1; margin: 0; }
    .helpful__btn {
        min-height: 44px;
        padding: 0 0.75rem;
        border-radius: var(--radius-sm);
        color: var(--color-text);
        -webkit-appearance: none;
        appearance: none;
        transition: transform 160ms var(--ease-out);
    }
    .helpful__btn:active { transform: scale(0.97); }
    .helpful__more { grid-column: 1 / -1; }
    .helpful__more summary { padding: 0.45rem 0; }
    .helpful__more textarea { font-size: 16px; } /* under 16px iOS zooms in on focus */
}

/* Filters as two dropdowns on one line (phones); desktop keeps the pills */
.guides-selects { display: none; }
@media (max-width: 768px) {
    .guides-filter:not(.events-kind) { display: none; }
    .guides-selects {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        align-items: center;
        gap: 0.5rem;
        margin: 0 0 0.25rem;
    }
    .guides-selects + .guides-topic { margin-top: 1.25rem; }
}

/* Filtering hides cards with [hidden]; the card's own display must not win */
.guides-page [hidden] { display: none !important; }

/* Phones: rows are split by a top border that the grouped surface clips on the
   first row, so the lines stay right whichever cards are hidden. */
@media (max-width: 768px) {
    .guide-card,
    .guide-card:last-child {
        border-bottom: none;
        border-top: 1px solid var(--color-border);
        margin-top: -1px;
    }
}

/* Collapsed sources (guide-toc.js wraps «Эх сурвалж» + ul.sources) and reader experiences */
.guide-sources,
.reader-notes {
    margin: 2rem 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.guide-sources > summary,
.reader-notes > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.6rem 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}
.guide-sources > summary::-webkit-details-marker,
.reader-notes > summary::-webkit-details-marker { display: none; }
.guide-sources > summary::after,
.reader-notes > summary::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms var(--ease-out);
}
.guide-sources[open] > summary::after,
.reader-notes[open] > summary::after { transform: rotate(225deg); }
.guide-detail__content .guide-sources ul.sources { margin: 0 1rem 1rem 2.2rem; }

.reader-notes { margin-top: 1.5rem; }
.reader-notes__count { font-weight: 400; color: var(--color-text-secondary); }
.reader-notes__body { padding: 0 1rem 1rem; }
.reader-notes__empty,
.reader-notes__disclaimer,
.reader-notes__hint { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0 0 0.75rem; }
.reader-notes__list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.reader-notes__list li { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.reader-notes__list li:first-child { padding-top: 0; }
.reader-notes__text { margin: 0 0 0.3rem; white-space: pre-line; line-height: 1.6; }
.reader-notes__meta { margin: 0; display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--color-text-muted); }
.reader-notes__thanks { margin: 0 0 0.75rem; font-weight: 600; color: var(--color-primary); }
.reader-notes__error { margin: 0 0 0.5rem; color: var(--color-danger); font-weight: 600; }
.reader-notes__form { border-top: 1px solid var(--color-border); padding-top: 0.9rem; }
.reader-notes__form-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--color-primary); }
.reader-notes__form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 16px; /* under 16px iOS zooms in on focus */
    resize: vertical;
}
.reader-notes__row { display: flex; gap: 0.5rem; margin: 0.5rem 0; }
.reader-notes__row .select { flex: 1; min-width: 0; }


/* Articles written for one visa group: its icon, a badge, a coloured edge */
.guide-card--visa { border-left: 3px solid var(--tengri-sun); }
.guide-card__visa {
    align-self: flex-start;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--color-warning-bg, #fdf3dc);
    color: var(--color-text);
    font-size: 0.72rem;
    font-weight: 700;
}
/* …and they come first in their topic while that visa is the filter */
.guides-page[data-visa="student"] .guide-card[data-focus="student"],
.guides-page[data-visa="work"] .guide-card[data-focus="work"],
.guides-page[data-visa="trainee"] .guide-card[data-focus="trainee"],
.guides-page[data-visa="family"] .guide-card[data-focus="family"],
.guides-page[data-visa="unrestricted"] .guide-card[data-focus="unrestricted"],
.guides-page[data-visa="tourist"] .guide-card[data-focus="tourist"],
.guides-page[data-visa="no_status"] .guide-card[data-focus="no_status"] { order: -1; }

/* Staff-only «Устгах» under each reader note */
.reader-notes__remove { margin: 0.25rem 0 0; }
.reader-notes__remove-btn { padding: 0.15rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.75rem; cursor: pointer; }
.reader-notes__remove-btn:hover { color: var(--tengri-ember, #c0392b); border-color: currentColor; }