/* Design tokens and every rule on the site — the v2 redesign from
   design/design_handoff_kudedaucha/README.md (26 September 2026).
   Class hooks are the same ones the markup and the E2E suite already use;
   only the values and the shapes changed. Nothing here is Bosch IP. */

:root {
  /* Colours, verbatim from the handoff. */
  --canvas: #f4f4f2;
  --surface: #ffffff;
  --hair: #e3e3df;
  --hair-2: #dcdcd8;
  --hair-3: #e8e8e4;
  --hair-row: #efefeb;
  --ink: #15181d;
  --body: #3a3e44;
  --muted: #6b6f73;
  --num-off: #5b5f64;
  --disabled-num: #b5b8bb;
  --green: #0d7955;
  --green-bright: #3ad48f;
  --green-tint: #e6f2ec;
  --green-text: #0a5c40;
  --green-text-dark: #0a3f2c;
  --dark: #24282e;
  --dark-card: #30353b;
  --on-dark-2: #b9bcbf;
  --warn-bg: #fff6dc;
  --warn-text: #6b4e00;
  --mark-light: #d3d5d1;
  --danger-bg: #fdecea;
  --danger-text: #9a2a1c;
  --zero-row: #f6f6f3;
  --zero-card: #ebebe7;
  --hover-row: #f3f8f5;
  --head-row: #f9f9f7;

  /* The names the older rules and components still read. */
  --brand-ink: var(--ink);
  --brand-green: var(--green);
  --brand-green-bright: var(--green-bright);
  --brand-paper: var(--canvas);
  --bg-page: var(--canvas);
  --bg-surface: var(--surface);
  --bg-sunken: var(--zero-card);
  --bg-contrast: var(--dark);
  --bg-contrast-soft: var(--dark-card);
  --fg-major: var(--ink);
  --fg-minor: var(--body);
  --fg-muted: var(--muted);
  --fg-on-contrast: var(--canvas);
  --border-subtle: var(--hair);
  --border-strong: var(--hair-2);
  --accent: var(--green);
  --accent-hover: #0a5c40;
  --accent-on-dark: var(--green-bright);
  --accent-tint: var(--green-tint);
  --avail-yes: var(--green);
  --avail-yes-bg: var(--green-tint);
  --avail-none: var(--num-off);
  --signal-warning: var(--warn-text);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --gutter: 4vw;
  --container: 1440px;
  --container-sm: 760px;

  --radius: 14px;        /* inputs, buttons */
  --radius-lg: 22px;     /* cards */
  --radius-xl: 32px;     /* big cards */
  --radius-chip: 10px;
  --tile-radius: 20%;    /* squares keep the logo's shape at any size */

  --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Fonts (self-hosted, scripts/fonts.ts) ──────────────────────────────── */

@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'locl';
}
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(30px, 3.4vw, 54px); font-weight: 900; letter-spacing: -0.045em; line-height: 1; }
h2 { font-size: clamp(22px, 2.2vw, 30px); }
h3 { font-size: 18px; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.island { display: contents; }
.bleed { margin-inline: calc(50% - 50vw); }

/* Mono label: eyebrows, column heads, meta. */
.eyebrow, .mono {
  font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

/* ── Logo (CSS squares, the logo at any size) ───────────────────────────── */

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo-q { color: var(--green); }
.mark { --cell: 9px; --gap: 3px; --r: 2.5px; --line: 2px; display: grid; grid-template-columns: repeat(3, var(--cell)); gap: var(--gap); flex: none; }
.mark i { display: block; width: var(--cell); height: var(--cell); border-radius: var(--r); background: var(--ink); }
.mark i:last-child { background: transparent; border: var(--line) solid var(--green); }
.home .site-header .mark { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header { background: var(--canvas); border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 50; }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding: 22px var(--gutter); max-width: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; font-size: 15px; font-weight: 500; }
.site-nav a:not(.btn) { color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s ease; }
.site-nav a:not(.btn):hover { text-decoration: none; color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }
.mob-controls, .mob-br, .hero-mark-inline { display: none; }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius); padding: 12px 22px; min-height: 44px;
  font: 600 15px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--green); color: var(--canvas); border-radius: 11px; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-dark, .btn-secondary { background: var(--dark); color: var(--canvas); }
.btn-dark:hover, .btn-secondary:hover { background: var(--green); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--canvas); }
.btn-ghost { background: none; color: var(--green); padding-inline: 8px; }
.btn-ghost:hover { text-decoration: underline; }
.btn-icon { padding: 8px; min-width: 40px; min-height: 36px; color: var(--muted); border-radius: 10px; }
.btn-icon:hover { color: var(--danger-text); background: var(--zero-card); text-decoration: none; }
.btn[disabled], .btn.is-muted { opacity: .45; pointer-events: none; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="date"], select, textarea, input[type="file"] {
  width: 100%; font: 500 15px/1.3 var(--font-sans); color: var(--ink);
  background: var(--canvas); border: 0; border-radius: 12px; padding: 12px 14px; min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315181d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field .hint { font-size: 13px; color: var(--muted); font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.field .error { font-size: 13px; color: var(--danger-text); }
.choice { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.choice input { width: auto; min-height: 0; margin-top: 3px; }
.choice input[type="checkbox"], .choice input[type="radio"] { width: 18px; height: 18px; accent-color: var(--green); }
.choice .hint { display: block; font-size: 13px; color: var(--muted); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The search pill: input + green button in one white pill (home, lists). */
.searchbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search-pill {
  flex: 0 1 680px; min-width: 280px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--hair-2); padding: 6px 6px 6px 8px;
}
.search-pill:focus-within { box-shadow: 0 0 0 2px var(--green); }
.search-pill input[type="search"] { flex: 1 1 0; min-width: 0; background: transparent; border-radius: 10px; min-height: 40px; }
.search-pill input[type="search"]:focus { outline: none; }
.search-pill .btn { flex: none; min-height: 40px; padding: 10px 18px; }
.searchbar > .btn { min-height: 40px; padding-block: 0; }
.searchbar .saved-picker { flex: 0 1 240px; min-height: 52px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2); font-size: 14px; }
/* A fifth wider than the 760px the handoff draws, the freshness pill kept on
   its right on one line (its publish line is hidden here to make that fit). */
.schools-tools { flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; }
.schools-tools .provenance { flex: none; }
.schools-tools .provenance .meta { display: none; }
.school-search { flex: 0 1 920px; min-width: 0; }
.school-search .search-pill { flex: 1 1 auto; max-width: none; padding: 4px 4px 4px 6px; border-radius: 12px; }
.school-search .search-pill input[type="search"] { min-height: 36px; padding: 8px 10px; }
.school-search .search-pill .btn { min-height: 36px; padding: 8px 16px; border-radius: 9px; }
.schools-tools .provenance { padding-top: 4px; }
.searchbar-count { flex: 1 0 100%; margin: 0; font-size: 13px; color: var(--muted); }

/* ── Freshness (the provenance stamp) ───────────────────────────────────── */

.provenance { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.provenance .pill { display: inline-block; background: var(--green-tint); color: var(--green-text); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; line-height: 1.4; }
.provenance .pill::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: 1px; }
.provenance .meta { font: 400 12px/1.4 var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.provenance .meta a { color: var(--muted); text-decoration: underline; }
.provenance.is-stale .pill { background: var(--warn-bg); color: var(--warn-text); }
.provenance.is-stale .pill::before { background: var(--warn-text); }
.provenance.is-inline { display: inline-flex; }
.provenance.is-inline .pill { background: none; padding: 0; font-size: 13px; }

/* ── Chips, badges, notices ─────────────────────────────────────────────── */

.badge { display: inline-block; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--green-tint); color: var(--green-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; }
.badge-muted { background: var(--zero-card); color: var(--body); }
.notice { border-radius: 14px; padding: 14px 16px; font-size: 14px; }
.notice-ok { background: var(--green-tint); color: var(--green-text-dark); }
.notice-warn { background: var(--warn-bg); color: var(--warn-text); }
.notice-error { background: var(--danger-bg); color: var(--danger-text); }
.panel { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 0 0 1px var(--hair-2); }
.sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--green); flex: none; vertical-align: -1px; }
.sq.is-solid { background: var(--green); border-color: var(--green); }

/* The disclaimer band (Z-1). */
.band { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--green-tint); color: var(--green-text-dark); padding: 22px var(--gutter); font-size: 17px; }
.band-label { font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
/* An info mark, not a square: the square read as the favourites checkbox (TODAY_CHANGES_PROMPT.md). */
.band-label::before { content: '!'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font: 800 14px/1 var(--font-sans); flex: none; }
.band-text { text-wrap: pretty; }

/* ── Chiclets (kept for the district and category rows) ─────────────────── */

.chiclets { display: flex; gap: 8px; flex-wrap: wrap; }
.chiclet { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-chip); background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.chiclet:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--green); }
.chiclet.is-active { background: var(--dark); color: var(--canvas); box-shadow: none; }
.chiclet .count { color: var(--muted); font-weight: 500; }
.chiclet.is-active .count { color: var(--on-dark-2); }

/* ── Page headers (inner pages, dense) ──────────────────────────────────── */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; padding-top: 22px; }
.page-head-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.page-head-main h1 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.04em; }
.page-head .total { display: flex; align-items: baseline; gap: 8px; }
.page-head .total b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--green); }
.page-head .total span { font-size: 14px; color: var(--body); }
.page-head .total.is-count b { color: var(--ink); font-size: clamp(26px, 3vw, 40px); }
.page-head .total.is-count span { line-height: 1.2; max-width: 14ch; }

/* ── Saved-search chips (results page, A-19) ────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-label { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2); padding: 0 4px 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); min-height: 34px; }
.chip a { color: inherit; display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; }
.chip a:hover { text-decoration: none; }
.chip .sq { width: 9px; height: 9px; border-width: 1.5px; }
.chip form { display: contents; }
.chip button { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.chip button:hover { color: var(--danger-text); background: var(--danger-bg); }
.chip.is-active { background: var(--dark); color: var(--canvas); box-shadow: none; }
.chip.is-active .sq { border-color: var(--green-bright); }
.chip.is-active button { color: var(--on-dark-2); }
.chips .empty { font-size: 13px; color: var(--muted); }

/* ── Filter panel (results page) ────────────────────────────────────────── */

.filter-form { display: flex; flex-direction: column; gap: 12px; }
.filter-panel { background: var(--surface); border-radius: 18px; padding: 12px; box-shadow: 0 0 0 1px var(--hair-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.filter-panel .field.is-search { grid-column: span 2; }
.filter-panel .search-pill { flex: 1 1 auto; max-width: none; min-width: 0; background: var(--canvas); box-shadow: none; border-radius: 12px; padding: 4px 4px 4px 6px; }
.filter-panel .search-pill input[type="search"] { min-height: 36px; padding: 8px 10px; }
/* The same green „Търси" as on the home and schools pages (user's call). */
.filter-panel .search-pill .btn-primary { min-height: 36px; padding: 8px 16px; background: var(--green); border-radius: 9px; }
.filter-panel .search-pill .btn-primary:hover { background: var(--accent-hover); }
.filter-panel select, .filter-panel input[type="text"] { min-height: 44px; padding: 10px 30px 10px 12px; font-size: 14px; }
/* The select fields are grid items of the panel; the wrapper only exists to
   hide them on a phone behind the toggle. */
.filters { display: contents; }
.filters-toggle { display: none; min-height: 36px; padding: 8px 14px; border-radius: 9px; font-size: 14px; }
.filters[hidden] { display: none; }

/* Pinned under the header while the list scrolls (U-21, U-24). */
.sticky-under-header { position: sticky; top: var(--header-h, 89px); z-index: 40; background: var(--canvas); padding-block: 8px; margin-block: -8px; }

/* ── Results table (results page) ───────────────────────────────────────── */

.results { background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--hair-2); overflow: hidden; }
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 20px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--body); }
.results-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-clear { display: inline-flex; align-items: center; gap: 8px; background: var(--danger-bg); color: var(--danger-text); font-size: 13px; font-weight: 600; padding: 6px 12px 6px 8px; border-radius: 9px; }
.btn-clear:hover { text-decoration: none; background: #f9dcd8; }
.btn-clear i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--danger-text); color: #fff; font-style: normal; font-size: 13px; line-height: 1; }
.btn-save { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.btn-save:hover { background: var(--ink); color: var(--canvas); text-decoration: none; }
.btn-save.is-muted { opacity: .45; pointer-events: none; }
.results-head, .results-row { display: grid; grid-template-columns: 1.3fr 1.3fr 0.9fr 72px; gap: 16px; align-items: center; padding: 8px 20px; }
.results-head { background: var(--head-row); font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.results-head .num, .results-row .num { text-align: right; }
.results-list { list-style: none; margin: 0; padding: 0; }
.results-row { border-top: 1px solid var(--hair-row); position: relative; }
/* The whole row opens the school (user's call, 26 September): the count link is
   stretched over the row; the name and the map link stay above it as their own targets. */
.results-row .num a.places-link::after { content: ''; position: absolute; inset: 0; }
.results-row .school a, .results-row .where a { position: relative; z-index: 1; }
.results-row:hover .school > a { text-decoration: underline; }
.results-row:hover { background: var(--hover-row); }
.results-row.is-zero { background: var(--zero-row); }
.results-row .school a { font-size: 15px; font-weight: 600; color: var(--ink); }
.results-row .school a:hover { text-decoration: underline; }
.results-row .where { font-size: 12px; color: var(--num-off); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-row .where a { color: inherit; }
.results-row .profile { font-size: 14px; }
.results-row .cat { display: block; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-top: 2px; }
.results-row .cat .badge-warn { margin-left: 8px; }
.results-row .langs { font-size: 13px; color: var(--body); }
.results-row .num a, .results-row .num > span { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--green); }
.results-row .num a:hover { text-decoration: none; }
.results-row.is-zero .num a, .results-row.is-zero .num > span { color: var(--num-off); }
.results-row .num small { display: block; font-size: 11px; font-weight: 600; color: var(--green-text); letter-spacing: 0; }
.results-row.is-zero .num small { color: var(--num-off); }
.results-empty { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.results-empty p { color: var(--body); max-width: 46ch; }
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }

/* ── Cards (schools list, generic) ──────────────────────────────────────── */

.grid-schools { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { position: relative; background: var(--surface); border-radius: 26px; box-shadow: 0 0 0 1px var(--hair-2); padding: 24px 26px; min-height: 160px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--green); }
.card:focus-within { box-shadow: 0 0 0 2px var(--green); }
/* `hidden` must beat the card's own display (U-21: the island hides cards). */
.grid-schools li[hidden], #schools-empty[hidden] { display: none; }
.card h3 { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0; padding-right: 24px; }
.card h3 a { color: inherit; }
.card h3 a::after { content: '→'; position: absolute; right: 22px; top: 22px; font-size: 14px; color: var(--muted); }
.card h3 a:hover { text-decoration: none; }
.card hr { display: none; }
.card-meta { font-size: 14px; color: #4a4e54; line-height: 1.45; }
.card-where { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.card-where a { color: inherit; }
/* The count stacked over its label, right-aligned, clear of the address (user's call). */
.card .places { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: none; text-align: right; }
.card .places-count { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--green); line-height: 1; }
.card .places-label { font-size: 13px; color: #4a4e54; white-space: nowrap; }
.card .places.is-empty .places-count { color: var(--num-off); }
.card.is-zero { background: var(--zero-card); color: var(--body); }
a.places-link { color: inherit; text-decoration: none; }
a.places-link:hover .places-label { text-decoration: underline; }
.card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: auto; }
.card-bottom .card-where { flex: 1 1 120px; margin: 0; }

/* Category tiles on the old home are gone; the results empty state stays. */
.empty-state { background: var(--surface); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; box-shadow: 0 0 0 1px var(--hair-2); }
.empty-state p { max-width: 46ch; color: var(--body); }
.empty-state .mark { display: none; }

/* ── School page ────────────────────────────────────────────────────────── */

.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: '/'; margin-right: 10px; color: var(--hair-2); }
.breadcrumb a { color: var(--green); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--body); }
.school-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.school-head h1 { font-size: clamp(30px, 3.4vw, 54px); }
.school-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.school-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.school-aside { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.school-summary { background: var(--dark); color: var(--canvas); border-radius: 20px; padding: 18px 22px; display: flex; align-items: center; gap: 14px; }
.school-summary b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--green-bright); line-height: 1; }
.school-summary.is-zero b { color: var(--on-dark-2); }
.school-summary .l1 { font-size: 16px; font-weight: 700; }
.school-summary .l2 { font-size: 13px; color: var(--on-dark-2); }
.school-facts { margin: 0; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--hair-2); overflow: hidden; }
.school-facts .fact { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--hair-3); align-items: baseline; }
.school-facts .fact:first-child { border-top: 0; }
.school-facts dt { font: 500 10px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.school-facts dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.school-facts dd a { color: var(--ink); }
.school-facts dd a:hover { color: var(--green); }
.school-table { flex: 999 1 480px; }
.school-table .results-head, .school-table .results-row { grid-template-columns: 1fr 0.8fr 64px; padding: 13px 20px; }
.school-table .results-row .profile { font-size: 15px; font-weight: 700; }

/* ── Profile / auth pages ───────────────────────────────────────────────── */

.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: 40px; align-items: center; padding-block: 40px; }
.auth-intro { display: flex; flex-direction: column; gap: 22px; }
.auth-intro .mark { --cell: clamp(40px, 5vw, 60px); --gap: clamp(10px, 1.3vw, 16px); --r: 20%; --line: 4px; }
.auth-intro p { font-size: 17px; color: var(--body); max-width: 46ch; }
.auth-card { background: var(--surface); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px); box-shadow: 0 0 0 1px var(--hair-2); display: flex; flex-direction: column; gap: 18px; }
.auth-card h1, .auth-card h2 { font-size: 26px; letter-spacing: -0.03em; }
.auth-card input { border-radius: 14px; padding: 16px 18px; }
.auth-card .btn { width: 100%; min-height: 50px; }
.auth-card .field label { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

.watch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 12px; min-height: 40px; }
.watch-all { font-size: 14px; color: var(--body); align-items: center; }
.watch-all input[type="checkbox"] { margin-top: 0; }
.watch-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 18px; overflow: hidden; font-size: 14px; box-shadow: 0 0 0 1px var(--hair-2); }
.watch-table td { padding: 6px 12px; vertical-align: middle; border-top: 1px solid var(--hair-3); }
.watch-table tr:first-child td { border-top: none; }
.watch-table .watch-pick { width: 34px; padding-right: 0; }
.watch-table .watch-pick input { display: block; width: 18px; height: 18px; accent-color: var(--green); }
.watch-table .watch-act { width: 84px; text-align: right; padding-block: 0; white-space: nowrap; }
.watch-table .watch-act a.btn-icon:hover { color: var(--green); }
.watch-list { display: flex; flex-direction: column; gap: 10px; }

/* ── About page (two columns) and legal pages ───────────────────────────── */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 8vw; padding-block: 40px 60px; align-items: start; }
.about-left { container-type: inline-size; }
/* Never wider than its column: a long single word (the cookies page) shrinks to fit. */
.about-title { font-size: min(clamp(56px, 8vw, 150px), 19cqw); font-weight: 900; letter-spacing: -0.06em; line-height: .86; }
/* The title square (LAST_CHANGES_PROMPT.md §1): inside the h1, on the word's line, never alone. */
.title-dot { display: inline-block; width: .2em; height: .2em; margin-left: .08em; border-radius: 22%; background: var(--green); vertical-align: baseline; }
.nowrap { white-space: nowrap; }
.about-lead { font-size: 18px; color: var(--body); max-width: 42ch; margin-top: 22px; }
.about-sections { display: flex; flex-direction: column; }
.about-section { display: grid; grid-template-columns: 64px 1fr; gap: 10px 20px; padding: 26px 0 30px; border-top: 1px solid var(--hair); }
.about-section .n { font: 500 13px/1.6 var(--font-mono); color: var(--green); letter-spacing: .1em; padding-top: 6px; }
.about-section h2 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }
.about-section .body { grid-column: 2; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.6; color: var(--body); }
.about-section .body ul { margin: 0; padding-left: 20px; }
/* Links in the running text stand out by weight alone (user's call): bold green, no underline. */
.about-section .body a, .about-lead a { font-weight: 700; text-decoration: none; }
.about-section .body a:hover, .about-lead a:hover { text-decoration: underline; }
.legal-lead { font-size: 18px; color: var(--body); max-width: 42ch; margin-top: 22px; }

/* ── Home (the intro) ───────────────────────────────────────────────────── */

/* Inset 10% each side and roomier top to bottom (user's call, 26 September). */
.hero { min-height: calc(78vh - 90px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 3vw 10vw 1.5vw; }
.hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 500 14px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
.hero-top .sq { width: 10px; height: 10px; margin-right: 10px; }
.hero-top .provenance { gap: 4px 12px; }
.hero-top .provenance .pill { background: none; padding: 0; font: inherit; color: var(--body); border-radius: 0; }
.hero-top .provenance .pill::before { display: none; }
/* The top line carries the date, the stage and the source; the publish date lives on the list pages. */
.hero-top .provenance .meta { font: inherit; color: var(--muted); }
.hero-top .provenance .pub { display: none; }
.hero-top .provenance.is-stale .pill { color: var(--warn-text); }
.hero-title { font-size: clamp(64px, 12.8vw, 368px); font-weight: 900; line-height: .86; letter-spacing: -0.07em; white-space: nowrap; margin-left: -0.04em; margin-top: 0.95em; margin-bottom: .3em; color: var(--ink); }
.hero-title .q { color: var(--green); }
.hero-title .w { position: relative; display: inline-block; }
.hero-mark { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: .1em; display: grid; grid-template-columns: repeat(3, .25em); gap: .065em; }
.hero-mark i { display: block; width: .25em; height: .25em; border-radius: 22%; background: var(--mark-light); border: .04em solid transparent; transition: background-color .45s var(--ease), border-color .45s var(--ease); }
/* The outlined cell hops every 1.9 s — six cells, 11.4 s a lap. */
.hero-mark i { animation: hop 11.4s infinite; animation-delay: calc(var(--i) * 1.9s); }
/* The inline mark exists for the phone only; must outrank the .hero-mark rule above. */
.hero-title .hero-mark-inline { display: none; }
@keyframes hop { 0%, 1% { background: var(--mark-light); border-color: transparent; } 4%, 15% { background: transparent; border-color: var(--green); } 18%, 100% { background: var(--mark-light); border-color: transparent; } }
.hero-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.hero-lead { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.hero-lead p { font-size: clamp(17px, 1.5vw, 21px); color: var(--body); }
.hero-lead p b { color: var(--ink); }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 16px; font-weight: 600; }
.scroll-cue .sq { width: 14px; height: 14px; border-radius: 4px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.hero .searchbar { flex: 0 1 560px; min-width: 280px; }

.profiles { padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 14px; }
.profiles-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.profiles-head a { color: var(--muted); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 64px) / 5)), 1fr)); gap: 16px; }
.tile a {
  display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; padding: clamp(14px, 1.5vw, 26px);
  border-radius: var(--tile-radius); background: var(--surface); border: 2px solid var(--hair-2); color: var(--ink);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.tile a:hover, .tile.is-on a { background: var(--dark); color: var(--canvas); border-color: var(--dark); text-decoration: none; }
.tile.is-all a { border-color: var(--green); color: var(--green); }
.tile.is-all a:hover, .tile.is-all.is-on a { background: var(--green); color: var(--canvas); }
.tile .top { display: flex; justify-content: space-between; align-items: baseline; font: 500 clamp(12px, 0.95vw, 18px)/1 var(--font-mono); letter-spacing: .1em; }
.tile .top .arrow { font: 700 clamp(18px, 1.9vw, 36px)/1 var(--font-sans); letter-spacing: 0; }
.tile .big { font-size: clamp(40px, 4.6vw, 92px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
.tile .label { display: block; font-weight: 700; font-size: clamp(15px, 1.55vw, 30px); line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.tile a { overflow: hidden; }
.tile .meta { display: block; font: 400 clamp(11px, 0.85vw, 16px)/1.4 var(--font-mono); letter-spacing: .06em; margin-top: 4px; opacity: .85; }
/* /profili: the same tiles inside the container, not full-bleed, so five per row are
   narrower than on the home page. Smaller number and label, so a long category name
   and a four-digit count fit the square at laptop widths (user's call, 1 October). */
.profiles-page .tiles { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 64px) / 5)), 1fr)); }
.profiles-page .tile .big { font-size: clamp(30px, 3.4vw, 64px); }
.profiles-page .tile .label { font-size: clamp(13px, 1.15vw, 20px); }
.profiles-page .tile .top .arrow { font-size: clamp(16px, 1.5vw, 26px); }
/* Idle autoplay: one tile at a time, 1.9 s each; paused while the grid is hovered. */
.tiles:not(:hover) .tile a { animation: tile-on 19s linear infinite; animation-delay: calc(var(--i) * 1.9s); }
@keyframes tile-on { 0%, 1% { background: var(--surface); color: var(--ink); } 3%, 9% { background: var(--dark); color: var(--canvas); border-color: var(--dark); } 11%, 100% { background: var(--surface); color: var(--ink); } }
.tiles:not(:hover) .tile.is-all a { animation-name: tile-on-all; }
@keyframes tile-on-all { 0%, 1% { background: var(--surface); color: var(--green); } 3%, 9% { background: var(--green); color: var(--canvas); } 11%, 100% { background: var(--surface); color: var(--green); } }

.marquee { background: var(--green); color: var(--canvas); overflow: hidden; padding: 14px 0; }
.marquee-track { display: flex; gap: 28px; white-space: nowrap; width: max-content; font-size: clamp(15px, 1.4vw, 20px); font-weight: 500; animation: marquee 30s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 28px; }
.marquee-track .sq { border-color: var(--canvas); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.steps { background: var(--dark); color: var(--canvas); padding: clamp(40px, 5vw, 96px) var(--gutter) 8vw; display: flex; flex-direction: column; gap: 5vw; }
.steps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; }
.steps-head h2 { font-size: clamp(40px, 5.6vw, 84px); font-weight: 900; letter-spacing: -0.05em; line-height: .95; color: var(--canvas); max-width: 12ch; }
.steps-head h2 .sq { width: .2em; height: .2em; border: 0; border-radius: 22%; background: var(--green-bright); margin-left: .06em; }
.steps-head p { font-size: 18px; color: var(--on-dark-2); max-width: 36ch; }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.step { background: var(--dark-card); border-radius: 32px; padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.step .mark { --cell: 52px; --gap: 10px; --r: 13px; --line: 5px; margin-bottom: 20px; }
.step .mark i { background: var(--canvas); }
.step .mark i:last-child { background: var(--canvas); border: 0; }
.step .mark i.is-open { background: transparent; border: var(--line) solid var(--green-bright); }
.step .n { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green-bright); }
.step h3 { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--canvas); }
.step p { color: var(--on-dark-2); font-size: 16px; line-height: 1.55; }
.step > a { color: var(--canvas); font-weight: 600; border-bottom: 2px solid var(--green-bright); align-self: flex-start; margin-top: auto; padding-bottom: 2px; }
.step > a:hover { text-decoration: none; color: var(--green-bright); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--hair); padding: 48px var(--gutter) 32px; display: flex; flex-direction: column; gap: 28px; }
.site-footer .container { width: 100%; max-width: none; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.site-footer .logo { font-size: 26px; }
.site-footer .logo .mark { --cell: 12px; --gap: 4px; --r: 3px; --line: 2.5px; }
.site-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.site-footer .disclaimer { font-size: 14px; color: var(--body); max-width: 62ch; line-height: 1.55; }
.site-footer .disclaimer a { color: var(--ink); text-decoration: underline; }
.site-contact { font-size: 14px; color: var(--body); }
.site-contact .contact-email { font-weight: 600; text-decoration: underline; color: var(--ink); }
.contact-email { user-select: all; -webkit-user-select: all; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.site-footer nav a { color: var(--muted); }
.site-copy { font: 400 12px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Admin (unchanged surfaces, new skin) ───────────────────────────────── */

.results-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair-2); font-size: 14px; }
.results-table th { text-align: left; font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--head-row); padding: 10px 14px; }
.results-table td { padding: 10px 14px; border-top: 1px solid var(--hair-3); vertical-align: top; }
.results-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gate { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); align-items: start; }
.gate:first-child { border-top: none; }
.gate-mark { font-weight: 700; }
.gate.pass .gate-mark { color: var(--green); }
.gate.fail .gate-mark { color: var(--danger-text); }
.gate.warn .gate-mark { color: var(--warn-text); }
.gate.skip .gate-mark { color: var(--muted); }
.gate-detail { font-size: 13px; color: var(--body); }
.feedback-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--hair-2); overflow: hidden; }
.feedback-list li + li { border-top: 1px solid var(--hair-3); }
.feedback-item summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; font-size: 14px; list-style: none; }
.feedback-item summary::-webkit-details-marker { display: none; }
.feedback-item summary::before { content: '▸'; color: var(--muted); flex: none; }
.feedback-item[open] summary::before { content: '▾'; }
.feedback-item summary:hover { background: var(--hover-row); }
.feedback-when { color: var(--body); flex: none; font-variant-numeric: tabular-nums; }
.feedback-preview { flex: 1 1 20ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-flags { display: inline-flex; gap: 8px; flex: none; }
.feedback-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px calc(16px + 1.2em); }
.feedback-meta { font-size: 13px; color: var(--body); display: flex; flex-wrap: wrap; gap: 12px; }
.feedback-msg { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.rating { display: inline-flex; gap: 4px; align-items: center; }
.rating button { min-width: 36px; padding-inline: 8px; min-height: 36px; }
.rating button[aria-pressed="true"] { background: var(--green); color: #fff; }
.save-search { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.save-search .hint { display: block; font-size: 13px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .steps-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .results-head, .results-row { grid-template-columns: 1.2fr 1.2fr 64px; }
  .results-head .langs, .results-row .langs { display: none; }
}
@media (max-width: 767px) {
  .searchbar .saved-picker { flex: 1 0 100%; }
  .schools-tools { flex-wrap: wrap; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .filter-panel .field.is-search { grid-column: 1 / -1; }
  .filters-toggle { display: inline-flex; }
  form:not([data-hydrated]) .filters-toggle { display: none; }
  .results-head { display: none; }
  .results-row { grid-template-columns: 1fr 64px; row-gap: 4px; }
  .results-row .profile { grid-column: 1 / -1; }
  .results-row .num { grid-row: 1; grid-column: 2; }
  .school-table .results-head { display: none; }
  .school-table .results-row { grid-template-columns: 1fr 64px; }
  .school-table .results-row .langs { grid-column: 1 / -1; display: block; }
  .steps { padding-block: 48px; }
  .step { padding: 24px; border-radius: 24px; }
  .step .mark { --cell: 36px; --gap: 8px; --r: 9px; --line: 4px; }
  .step h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .scroll-cue .sq, .hero-mark i, .tiles .tile a { animation: none !important; }
  .hero-mark i:last-child { background: transparent; border-color: var(--green); }
  .card:hover { transform: none; }
}

/* ── Любими паралелки (U-29) ─────────────────────────────────────────────── */

.nav-fav { display: inline-flex; align-items: center; gap: 8px; }
.nav-fav .sq { width: 11px; height: 11px; border-radius: 3px; }
.fav-badge { font: 500 12px/1 var(--font-mono); background: var(--green-tint); color: var(--green-text); padding: 4px 7px; border-radius: 6px; }

/* The toggle column on the lists: 36px, a 24px square. */
.results-head.has-fav, .has-fav .results-row, .results-row:has(> .fav-cell) { grid-template-columns: 36px 1.3fr 1.3fr 0.9fr 72px; }
.school-table.has-fav .results-head, .school-table.has-fav .results-row { grid-template-columns: 36px 1.2fr 1fr 0.6fr 64px; }
.fav-cell { display: flex; align-items: center; position: relative; z-index: 1; }
.fav-cell .sq { width: 11px; height: 11px; border-radius: 3px; }
.fav-toggle {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--green); background: var(--surface); color: #fff; font-size: 14px; line-height: 1;
  padding: 0; cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease;
}
.fav-toggle:hover { box-shadow: 0 0 0 3px #d4ebe0; text-decoration: none; }
.fav-toggle.is-on { background: var(--green); }
.results-toolbar-left { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.fav-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green-text); }
.fav-link .sq { width: 11px; height: 11px; border-radius: 3px; }
.results-row .fav-cell form { display: contents; }

/* The page */
.fav-capacity { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fav-meter { display: grid; grid-template-columns: auto auto; gap: 6px 16px; align-items: center; min-width: 180px; }
.fav-meter-n { color: var(--ink); justify-self: end; }
.fav-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.fav-bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.fav-bar.is-full i { background: var(--danger-text); }
.fav-limit { display: flex; align-items: center; gap: 10px; }
.fav-limit select { width: auto; min-height: 40px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2); border-radius: 10px; padding: 8px 30px 8px 12px; }
.fav-limit-go { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.fav-help { font-size: 13px; color: var(--body); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--surface); border-radius: 12px; padding: 10px 16px; box-shadow: 0 0 0 1px var(--hair-2); }
.fav-help kbd { font: 500 12px/1 var(--font-mono); background: var(--canvas); border-radius: 6px; padding: 4px 8px; }
.grip { color: #9a9ea3; font-size: 14px; letter-spacing: -2px; cursor: grab; user-select: none; }
.grip:hover { color: var(--ink); }
.fav-table .results-head, .fav-table .results-row { grid-template-columns: 24px 52px 1.3fr 1.2fr 64px 120px 200px; gap: 14px; }
.fav-table .results-head .fav-order, .fav-row .fav-order { text-align: right; }
/* Without JavaScript the button sits under the field, inside the column. */
.fav-pos { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fav-pos input { width: 52px; min-height: 34px; padding: 6px 4px; text-align: center; font: 500 14px/1 var(--font-mono); background: var(--canvas); border-radius: 8px; }
.fav-pos input:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--green); }
.fav-pos-go { min-height: 34px; padding: 6px 10px; font-size: 12px; }
/* Once the island is live the field submits itself; the button is noise. */
[data-fav-list][data-hydrated] .fav-pos-go { display: none; }
.fav-row .cat .fav-langs { color: var(--body); font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.fav-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.chip-up { background: var(--green-tint); color: var(--green-text); }
.chip-down { background: var(--danger-bg); color: var(--danger-text); }
.chip-same { background: var(--canvas); color: var(--num-off); }
.chip-none { background: var(--warn-bg); color: var(--warn-text); }
.fav-row.is-missing { background: #fbfaf4; }
.fav-row.is-missing .num > span { color: var(--num-off); }
.fav-order { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
.fav-order form { display: contents; }
.fav-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--canvas); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
.fav-btn:hover { background: var(--hair); }
.fav-btn[disabled] { opacity: .3; cursor: default; }
.fav-btn[disabled]:hover { background: var(--canvas); }
.fav-btn-x { background: var(--danger-bg); color: var(--danger-text); }
.fav-btn-x:hover { background: #f9dcd8; }
/* Arriving with #fav-<id> after a move: the row flashes, and lands below the sticky header. */
.fav-row { scroll-margin-top: 120px; }
.fav-row:target { animation: fav-flash 1.4s ease-out; }
@keyframes fav-flash { 0%, 60% { background: var(--green-tint); } 100% { background: transparent; } }
.fav-row.is-dragging { opacity: .4; }
.fav-row.drop-above { box-shadow: inset 0 3px 0 var(--green); }
.fav-row.drop-below { box-shadow: inset 0 -3px 0 var(--green); }
.fav-foot { font-size: 13px; color: var(--num-off); }
.fav-empty { gap: 12px; }
.fav-empty-sq { width: 28px; height: 28px; border-radius: 8px; }

@media (max-width: 1023px) {
  .results-head.has-fav, .has-fav .results-row { grid-template-columns: 36px 1.2fr 1.2fr 64px; }
  .fav-table .results-head { display: none; }
  .fav-table .results-row { grid-template-columns: 24px 52px 1fr 64px; row-gap: 8px; }
  .fav-row .profile { grid-column: 3 / span 2; }
  .fav-row .num { grid-column: 4; grid-row: 1; }
  .fav-row > div:nth-child(6) { grid-column: 3; }
  .fav-row .fav-order { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .results-head.has-fav { display: none; }
  .has-fav .results-row { grid-template-columns: 36px 1fr 64px; }
  .has-fav .results-row .profile { grid-column: 2 / -1; }
  .has-fav .results-row .num { grid-row: 1; grid-column: 3; }
  .school-table.has-fav .results-row { grid-template-columns: 36px 1fr 64px; }
  .school-table.has-fav .results-row .langs { grid-column: 2 / -1; }
  .fav-table .results-row { grid-template-columns: 24px 52px 1fr; }
  .fav-row .school, .fav-row .profile, .fav-row .num, .fav-row > div:nth-child(6) { grid-column: 2 / -1; }
  .fav-row .num { grid-row: auto; }
  .fav-row .num > span { display: inline; }
  .fav-btn { width: 44px; height: 44px; }
  .fav-capacity { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fav-row:target { animation: none; background: var(--green-tint); }
}

/* ── Phone header and hero (MOBILE_PROMPT.md, < 700px; desktop untouched) ── */

@media (max-width: 699px) {
  .site-header .inner { padding: 14px 20px; gap: 8px; flex-wrap: nowrap; position: relative; }
  .site-nav { display: none; }
  .mob-controls { display: flex; align-items: center; gap: 8px; }
  .mob-fav { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--green-tint); color: var(--green-text); font-size: 14px; font-weight: 700; }
  .mob-fav .sq { width: 10px; height: 10px; border-radius: 3px; }
  .mob-fav:hover { text-decoration: none; }
  .mob-menu > summary { list-style: none; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--dark); color: var(--canvas); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .mob-menu > summary::-webkit-details-marker { display: none; }
  /* Icon only (user's call): a 44px square; the label stays for screen readers. */
  .mob-menu > summary { width: 44px; padding: 0; justify-content: center; }
  .burger { position: relative; width: 18px; height: 12px; flex: none; }
  .burger::before, .burger::after, .burger { box-sizing: border-box; }
  .burger::before, .burger::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, top .2s ease, opacity .2s ease; }
  .burger::before { top: 0; box-shadow: 0 5px 0 currentColor; }
  .burger::after { top: 10px; }
  .mob-menu[open] .burger::before { top: 5px; transform: rotate(45deg); box-shadow: none; }
  .mob-menu[open] .burger::after { top: 5px; transform: rotate(-45deg); }
  .mob-menu > summary .when-open { display: none; }
  .mob-menu[open] > summary .when-closed { display: none; }
  .mob-menu[open] > summary .when-open { display: inline; }
  /* The panel spans the header's width below the row. */
  .mob-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 8px 20px 20px; display: flex; flex-direction: column; z-index: 60; }
  .mob-panel a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hair-row); }
  .mob-panel a:not(.btn)::after { content: '→'; color: #9a9ea3; }
  .mob-panel a[aria-current="page"] { color: var(--green); }
  .mob-panel .mob-enter { width: 100%; min-height: 48px; margin-top: 16px; border-radius: 12px; }
  .mob-panel form { display: contents; }

  .hero { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; padding: 20px 20px 28px; overflow-x: clip; }
  .hero-top { font-size: 11px; }
  .hero-top .provenance { display: none; }
  .mob-br { display: inline; }
  /* 27vw as drawn, capped so „Къде да" still fits one line at every width (no clipping). */
  .hero-title { white-space: nowrap; font-size: min(27vw, calc((100vw - 40px) / 3.65)); line-height: .86; letter-spacing: -0.07em; margin: 0 0 0 -0.04em; }
  .hero-title .w .hero-mark { display: none; }
  .hero-title .hero-mark-inline { display: inline-grid; grid-template-columns: repeat(3, .2em); gap: .05em; margin-left: .16em; vertical-align: .02em; position: static; transform: none; margin-bottom: 0; }
  .hero-mark-inline i { width: .2em; height: .2em; border-width: .035em; box-sizing: border-box; }
  .hero-bottom { align-items: stretch; gap: 16px; }
  .hero-lead { max-width: none; }
  .hero .searchbar { flex: 1 1 auto; min-width: 0; max-width: 680px; }
  .hero .search-pill { flex: 1 1 auto; min-width: 0; }
  .hero .search-pill input[type="search"] { font-size: 16px; }
  .hero .search-pill .btn { padding: 13px 18px; }
}

/* ── Feedback and profile in the two-column layout (LAST_CHANGES_PROMPT.md) ── */

.about-left { display: flex; flex-direction: column; }
.about-notes { margin-top: 28px; }
.about-notes .about-section { padding: 20px 0 22px; grid-template-columns: 64px 1fr; }
.about-notes .about-section h2 { font-size: 17px; letter-spacing: -0.01em; }
.about-notes .about-section .body { font-size: 15px; line-height: 1.55; }
.about-section .count { font: 500 14px/1 var(--font-mono); color: var(--muted); margin-left: 8px; vertical-align: middle; }
.muted { color: var(--body); font-size: 15px; }
.link-under { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.link-under:hover { text-decoration: none; color: var(--green); }
.btn-tint { display: inline-flex; align-items: center; gap: 8px; background: var(--green-tint); color: var(--green-text); font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: 10px; }
.btn-tint:hover { text-decoration: none; background: #d4ebe0; }

.fb-form { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; border-top: 1px solid var(--hair); }
.fb-topics { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fb-topics legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.chip-pick { cursor: pointer; padding: 0 14px; min-height: 40px; gap: 8px; }
.chip-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-pick .sq { width: 10px; height: 10px; border-width: 1.5px; }
.chip-pick:has(input:checked) { background: var(--dark); color: var(--canvas); box-shadow: none; }
.chip-pick:has(input:checked) .sq { background: var(--green-bright); border-color: var(--green-bright); }
.chip-pick:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.fb-field label { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.fb-optional { font-weight: 400; color: var(--muted); }
.fb-field textarea, .fb-field input[type="email"] { background: var(--surface); box-shadow: 0 0 0 1px var(--hair-2); border-radius: 12px; font-size: 16px; }
.fb-field textarea { min-height: 150px; }
.fb-error { background: var(--danger-bg); color: var(--danger-text); font-size: 14px; padding: 8px 12px; border-radius: 8px; margin: 0; }
.fb-send { gap: 16px; }
.fb-or { font-size: 14px; color: var(--body); }
.fb-or a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.fb-privacy { font-size: 13px; color: var(--muted); }
.fb-privacy a { color: var(--body); text-decoration: underline; }
.fb-done { display: flex; gap: 14px; align-items: flex-start; background: var(--green-tint); color: var(--green-text-dark); border-radius: 16px; padding: 22px 24px; margin-top: 26px; }
.fb-done .sq { width: 14px; height: 14px; margin-top: 6px; border-radius: 4px; }
.fb-done h2 { font-size: 20px; color: var(--green-text-dark); margin-bottom: 6px; }
.fb-done p { font-size: 15px; }
.fb-done a { font-weight: 600; text-decoration: underline; color: var(--green-text); }

.profile-who { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profile-email { font-size: 18px; font-weight: 700; }
.profile-since { font-size: 14px; color: var(--body); margin-bottom: 10px; }
.watch-name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.watch-name .sq { width: 10px; height: 10px; border-width: 1.5px; }
.watch-name:hover { color: var(--green); text-decoration: none; }
.switches { display: flex; flex-direction: column; gap: 14px; }
.switch-row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-row .switch { width: 44px; height: 26px; border-radius: 8px; background: var(--hair-2); position: relative; transition: background-color .15s ease; margin-top: 2px; }
.switch-row .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 5px; background: #fff; transition: transform .15s ease; }
.switch-row input:checked + .switch { background: var(--green); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--green); outline-offset: 3px; }
.switch-row b { display: block; font-size: 16px; }
.switch-row small { display: block; font-size: 14px; color: var(--body); }
.danger summary { list-style: none; cursor: pointer; color: var(--danger-text); font-weight: 600; text-decoration: underline; display: inline; }
.danger summary::-webkit-details-marker { display: none; }
.danger form { margin-top: 12px; }
.btn-danger { background: var(--danger-text); color: #fff; }
.btn-danger:hover { background: #7c1f14; }