/* 05-fonts — self-hosted webfonts (P5 design foundation).

Lora (serif) for display/headings, Manrope (sans) for body — the

"serif display over sans body (prospectus feel)" the tokens describe,

upgraded from Georgia/system to a real distinctive pairing. woff2 only,

cyrillic-ext + latin subsets in one file per weight (covers ru + en +

the kk Latin glyphs Batch C needs — ә ғ қ ң ө ұ ү һ і), served from

/assets/fonts. font-display: swap → text paints immediately in the

fallback, then swaps (no invisible-text flash). Sorted 05 so @font-face

is declared before any rule that uses the families (10-reset onward). */
/* Lora — display / headings (--font-display) */
@font-face {

font-family: "Lora";

font-style: normal;

font-weight: 400;

font-display: swap;

src: url("/assets/fonts/lora-v37-cyrillic-ext_latin-regular.woff2") format("woff2");
}
@font-face {

font-family: "Lora";

font-style: normal;

font-weight: 600;

font-display: swap;

src: url("/assets/fonts/lora-v37-cyrillic-ext_latin-600.woff2") format("woff2");
}
@font-face {

font-family: "Lora";

font-style: normal;

font-weight: 700;

font-display: swap;

src: url("/assets/fonts/lora-v37-cyrillic-ext_latin-700.woff2") format("woff2");
}
/* Manrope — body / UI (--font-body) */
@font-face {

font-family: "Manrope";

font-style: normal;

font-weight: 400;

font-display: swap;

src: url("/assets/fonts/manrope-v20-cyrillic-ext_latin-regular.woff2") format("woff2");
}
@font-face {

font-family: "Manrope";

font-style: normal;

font-weight: 500;

font-display: swap;

src: url("/assets/fonts/manrope-v20-cyrillic-ext_latin-500.woff2") format("woff2");
}
@font-face {

font-family: "Manrope";

font-style: normal;

font-weight: 600;

font-display: swap;

src: url("/assets/fonts/manrope-v20-cyrillic-ext_latin-600.woff2") format("woff2");
}
@font-face {

font-family: "Manrope";

font-style: normal;

font-weight: 700;

font-display: swap;

src: url("/assets/fonts/manrope-v20-cyrillic-ext_latin-700.woff2") format("woff2");
}

/* 10-reset — box model, media, and form-control normalization. Kept small:

the design system builds on defaults rather than fighting them. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul { list-style: none; }
table { border-collapse: collapse; }
@media (prefers-reduced-motion: reduce) {

*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 12-tokens — the design system's single source of truth (P3 Task 4).

Palette: Kazakh-sky petrol + sun gold on paper gray — drawn from the

subject (KZ flag sky/sun; school-prospectus ink), deliberately NOT the

legacy v4 Tailwind-default blue/gray set. One palette, one type scale,

one spacing rhythm; components consume only these variables. */
:root {

/* palette */

--c-ink: #1d3440;
/* deep petrol ink — headings, body text */

--c-muted: #5b6e78;
/* steppe gray — secondary text */

--c-faint: #8fa1aa;
/* placeholders, disabled, meta */

--c-primary: #146c8e;
/* kazakh-sky petrol — links, actions */

--c-primary-deep: #0d5471; /* hover/active */

--c-primary-tint: #e2eff5; /* chips, tinted fills */

--c-pastel: #a9cadb;
/* У5в pastel-petrol — the heading line (D1, docs/036) */

--c-gold: #d29a2e;
/* sun gold — signature stroke, paid tiers */

--c-gold-deep: #8a5f14;
/* gold-legible text on gold tint */

--c-gold-tint: #f8eed9;

--c-paper: #f4f6f7;
/* page background */

--c-card: #ffffff;

--c-line: #dbe3e7;

--c-footer: #16303c;
/* footer ink */

--c-footer-text: #b9c9d1;

--c-danger: #b3403a;

/* type — Lora serif display over a Manrope sans body (prospectus feel);


self-hosted webfonts declared in 05-fonts.css, with system fallbacks so


text still renders in the right style if a woff2 fails to load */

--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

--font-display: "Lora", Georgia, "PT Serif", "Times New Roman", serif;

--fs-xs: 0.8rem;

--fs-sm: 0.875rem;

--fs-base: 1rem;

--fs-md: 1.125rem;

--fs-lg: 1.375rem;

--fs-xl: 1.75rem;

--fs-2xl: 2.25rem;

--lh-tight: 1.2;

--lh-body: 1.55;

/* spacing — 4px rhythm */

--sp-1: 0.25rem;

--sp-2: 0.5rem;

--sp-3: 0.75rem;

--sp-4: 1rem;

--sp-5: 1.5rem;

--sp-6: 2rem;

--sp-7: 3rem;

--sp-8: 4rem;

/* shape + elevation */

--radius: 10px;

--radius-sm: 6px;

--radius-pill: 999px;

--shadow-card: 0 1px 2px rgba(22, 48, 60, 0.06), 0 4px 14px rgba(22, 48, 60, 0.06);

--shadow-lift: 0 2px 4px rgba(22, 48, 60, 0.08), 0 10px 24px rgba(22, 48, 60, 0.10);

/* layout */

--container: 72rem;
}

/* 20-layout — page frame: base typography, container, sticky header,

breadcrumbs row, page head (with the gold-stroke signature), footer.

Mobile-first; two breakpoints (40rem, 60rem). */
body {

font-family: var(--font-body);

font-size: var(--fs-base);

line-height: var(--lh-body);

color: var(--c-ink);

background: var(--c-paper);

display: flex;

flex-direction: column;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-deep); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }
/* full-bleed bands (org hero, docs/036) use the 50%-50vw escape — clip the

scrollbar-width overflow that trick can introduce */
body { overflow-x: clip; }
.container {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
/* ---- header ---- */
.site-header {

position: sticky;

top: 0;

z-index: 50;

background: var(--c-card);

border-bottom: 1px solid var(--c-line);
}
.header-bar {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-3);

min-height: 3.75rem;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink); min-width: 0; }
.brand:hover { color: var(--c-ink); }
.brand-mark {

display: grid;

place-items: center;

width: 2.5rem;

height: 2.5rem;

border-radius: var(--radius-sm);

background: var(--c-primary);

color: #fff;

flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; }
.brand-tagline { font-size: var(--fs-xs); color: var(--c-muted); }
.site-nav {

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: flex-end;

gap: var(--sp-2) var(--sp-3);

margin-left: auto;

min-width: 0;
}
/* desktop: tray children sit inline; flex-order puts Catalog·Search·Школам·… */
.nav-tray {

display: contents;
}
.nav-catalog { order: 10; }
.nav-search { order: 20; }
.nav-schools { order: 30; }
.nav-user, .nav-login { order: 40; }
.lang-switch { order: 50; }
.nav-link { font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); padding: var(--sp-2); }
.nav-link:hover { color: var(--c-primary); }
.nav-icon {

display: grid;

place-items: center;

width: 2.25rem;

height: 2.25rem;

border-radius: var(--radius-sm);

color: var(--c-muted);

flex: none;
}
.nav-icon:hover { color: var(--c-primary); background: var(--c-primary-tint); }
/* «Школам»: primary button on desktop (holds weight in the long nav row);

demoted to a quiet text link on mobile (see max-width block below). */
.nav-schools { flex: none; white-space: nowrap; }
/* ---- authed-session header indicator (P4 Batch A Task 3) ---- */
/* Rendered only when Chrome.User is set (anon pages never emit this

markup — golden-neutral by construction, see layout.templ). Subtle,

on-system: reuses the palette's petrol/gold tokens and nav-link's own

type scale, no new visual language (Task 4/Batch B own the real gate). */
.nav-user { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
/* desktop: name + logout; icon is mobile-only */
.nav-user-icon { display: none; }
.nav-user-name { font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); padding: var(--sp-2); }
.nav-user-name:hover { color: var(--c-primary); }
.nav-user-badge {

font-size: 0.6875rem;

font-weight: 600;

line-height: 1;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border: 1px solid var(--c-primary);

border-radius: var(--radius-sm);

padding: 0.1875rem 0.375rem;

text-transform: uppercase;

letter-spacing: 0.03em;
}
.nav-user-logout { font-size: var(--fs-sm); color: var(--c-muted); padding: var(--sp-2); }
.nav-user-logout:hover { color: var(--c-primary); }
/* Mobile two-line header:

row 1 — brand · «Школам» (top-right)

row 2 — lab-band tray: Catalog · Search · profile/login icon · lang

Logout/username desktop-only; profile icon opens the cabinet. */
@media (max-width: 39.99rem) {

.brand-tagline { display: none; }

.site-nav { display: contents; }

.header-bar {

display: grid;

grid-template-columns: minmax(0, 1fr) auto;

grid-template-areas:

"brand schools"

"tray tray";

align-items: center;

column-gap: var(--sp-2);

row-gap: 0;

min-height: 3.25rem;

padding-top: 0.35rem;

padding-bottom: 0;

}

.brand { grid-area: brand; min-width: 0; }

.nav-schools {

grid-area: schools;

justify-self: end;

align-self: center;

/* quiet text link — same weight as org-hero «На карте», not a CTA */

background: transparent;

color: var(--c-primary);

border: 0;

box-shadow: none;

padding: var(--sp-2);

font-size: var(--fs-sm);

font-weight: 600;

border-radius: 0;

}

.nav-schools:hover {

background: transparent;

color: var(--c-primary-deep);

}

.nav-tray {

grid-area: tray;

display: flex;

align-items: center;

justify-content: flex-end;

flex-wrap: wrap;

gap: var(--sp-1) var(--sp-2);

box-sizing: border-box;

width: calc(100% + 2 * var(--sp-4));

margin: 0.35rem calc(-1 * var(--sp-4)) 0;

padding: 0.5rem var(--sp-4);

background: #e7edf0;

border-top: 1px dashed #a9bcc6;

border-bottom: 1px dashed #a9bcc6;

}

.nav-catalog {

display: inline-flex;

align-items: center;

font-size: var(--fs-sm);

font-weight: 600;

padding: var(--sp-2);

}

/* mobile session: icon + optional ADM; hide long name + Exit */

.nav-user-icon { display: grid; }

.nav-user-name { display: none; }

.nav-user-logout { display: none; }

/* tray already draws the bottom edge */

.site-header { border-bottom: 0; }
}
/* ---- language switcher (P5: globe + native <details> disclosure) ---- */
/* No-JS by construction — the native details/summary toggles the menu, so it

works with zero JavaScript. The trigger is a plain GLOBE (a language marker,

deliberately NOT a country flag) plus the current language's short code; the

open menu floats below the globe (absolute) without shifting the header.

On-system: reuses the petrol/tint palette, the radius + shadow-card tokens,

and the nav-icon interaction language. Stays visible on mobile (unlike the

nav links above) — language choice matters at every width. */
.lang-switch { position: relative; flex: none; }
.lang-switch-toggle {

display: flex;

align-items: center;

gap: var(--sp-1);

height: 2.25rem;

padding: 0 var(--sp-2);

border-radius: var(--radius-sm);

color: var(--c-muted);

cursor: pointer;

user-select: none;

white-space: nowrap;

list-style: none; /* remove the native disclosure triangle (most engines) */
}
.lang-switch-toggle::-webkit-details-marker { display: none; } /* ...and Safari */
.lang-switch-toggle:hover { color: var(--c-primary); background: var(--c-primary-tint); }
.lang-switch[open] > .lang-switch-toggle { color: var(--c-primary); background: var(--c-primary-tint); }
.lang-switch-code {

font-size: var(--fs-sm);

font-weight: 600;

letter-spacing: 0.02em;
}
.lang-switch-caret {

display: grid;

place-items: center;

color: var(--c-faint);

transform: rotate(90deg); /* chevron points right at rest -> rotate to point down */

transition: transform 0.15s ease;
}
.lang-switch[open] > .lang-switch-toggle .lang-switch-caret { transform: rotate(-90deg); }
.lang-switch-menu {

position: absolute;

top: calc(100% + var(--sp-2));

right: 0;

z-index: 60;

min-width: 9.5rem;

padding: var(--sp-1);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

list-style: none;
}
.lang-switch-item {

display: flex;

align-items: center;

gap: var(--sp-2);

padding: var(--sp-2);

border-radius: var(--radius-sm);

font-size: var(--fs-sm);

color: var(--c-ink);

white-space: nowrap;
}
a.lang-switch-item:hover { background: var(--c-primary-tint); color: var(--c-primary); }
.lang-switch-item.is-active { font-weight: 600; color: var(--c-primary); cursor: default; }
.lang-switch-check {

display: grid;

place-items: center;

width: 1rem;

flex: none;

color: var(--c-primary);
}
/* ---- main / page head ---- */
main.page { flex: 1; padding-top: var(--sp-4); padding-bottom: var(--sp-7); }
.page-head { margin: var(--sp-4) 0 var(--sp-5); }
/* Shared full-bleed page hero (catalog/org pattern) for cabinet surfaces:

breadcrumbs + H1 + brief live in an edge-to-edge band; content blocks

below are freestanding. Used by /user/welcome and /staff/*. */
.page-hero-band {

margin: calc(-1 * var(--sp-4)) calc(50% - 50vw) var(--sp-5);

background: linear-gradient(135deg, #eef4f6 0%, #f5f2ea 100%);

border-bottom: 1px solid var(--c-line);

padding: var(--sp-2) 0 var(--sp-5);
}
.page-hero-band-in {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
.page-hero-band .crumbs { margin: var(--sp-1) 0 var(--sp-2); }
.page-hero {

/* content only — the band owns the background; no card chrome */

padding: 0;

margin: 0;

background: transparent;

border: 0;

border-radius: 0;

box-shadow: none;
}
.page-hero-row {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: var(--sp-3);

flex-wrap: wrap;
}
.page-hero-row .page-title { margin: 0; }
.page-hero-action {

flex: none;

font-size: var(--fs-sm);

font-weight: 600;

color: var(--c-muted);

padding: var(--sp-1) 0;
}
.page-hero-action:hover { color: var(--c-primary); }
.page-hero .page-sub { margin-top: var(--sp-2); max-width: 42rem; }
.page-title {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-xl);

line-height: var(--lh-tight);

letter-spacing: -0.01em;
}
/* signature У5в «пастель» (docs/036 D1): a pastel-petrol line under the

title, fading right, sized to the text (owner-picked; replaces the gold

chalk stroke — owner reads gold as brown, memory: no-gold-accents). */
.page-title { width: fit-content; }
.page-title::after {

content: "";

display: block;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);

margin-top: var(--sp-2);
}
.page-sub { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
@media (min-width: 40rem) {

.page-title { font-size: var(--fs-2xl); }
}
/* ---- breadcrumbs ---- */
.crumbs { margin: var(--sp-2) 0; }
.crumbs-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.crumbs-item { display: flex; align-items: center; min-width: 0; }
.crumbs-sep { display: flex; align-items: center; color: var(--c-faint); }
.crumbs-link {

font-size: var(--fs-sm);

color: var(--c-muted);

padding: var(--sp-1) var(--sp-1);

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 18rem;
}
.crumbs-link:hover { color: var(--c-primary); }
.crumbs-home { display: grid; place-items: center; color: var(--c-muted); }
/* ---- 404 page ---- */
.notfound { padding: var(--sp-6) 0 var(--sp-8); }
.notfound-code {

font-family: var(--font-display);

font-weight: 700;

font-size: 5rem;

line-height: 1;

color: var(--c-primary-tint);

-webkit-text-stroke: 1px var(--c-primary);
}
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* ---- footer ---- */
.site-footer {

background: var(--c-footer);

color: var(--c-footer-text);

margin-top: auto;

/* D1 (docs/036): a tad taller/weightier per owner */

padding: 2.875rem 0 2.25rem;
}
.footer-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: var(--sp-5) var(--sp-4);
}
.footer-brand { grid-column: 1 / -1; }
.footer-brand-title {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-lg);

color: #fff;

letter-spacing: -0.01em;
}
.footer-brand-title { width: fit-content; }
.footer-brand-title::after {

content: "";

display: block;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);

margin-top: var(--sp-2);
}
.footer-brand-tagline { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.footer-heading {

font-size: var(--fs-xs);

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.06em;

color: #fff;

margin-bottom: var(--sp-3);
}
.footer-menu { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-link { color: var(--c-footer-text); font-size: var(--fs-sm); padding: 2px 0; }
.footer-link:hover { color: #fff; }
.footer-bottom {

margin-top: var(--sp-6);

padding-top: var(--sp-4);

border-top: 1px solid rgba(185, 201, 209, 0.2);
}
.footer-copyright { font-size: var(--fs-xs); color: var(--c-faint); }
@media (min-width: 40rem) {

.footer-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 60rem) {

.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }

.footer-brand { grid-column: auto; }
}

/* 25-banners — banner slot placement (banner engine B6 → B7 faithful per-page

positions). Three positioned slots that present differently per device (the

legacy device split, ported to a pure media query — no server-side UA sniff;

spec §2 responsive-only):

- MOBILE (base): three separate .promomobile blocks at three scroll depths

— #toppromoslot (after the header), #midpromoslot (in the content),

#btmpromoslot (lower in the content). The desktop strip is hidden.

- DESKTOP (>=60rem — the site's desktop breakpoint, matching 20-layout's

grid switch): the three mobile blocks hide and the mid slot's

.promodesktop 3-column strip (top+mid+btm as one centered row) shows.

B7 moved the MID/BTM slots out of the layout shell into the city/org/home

page templates at the owner's exact content positions. On the CITY page the

MID aside is injected INSIDE the org-grid (after card #3); .promo-mid-grid

makes its desktop strip span the grid row and align with the 3 card columns

(see the org-grid rule at the bottom).

Consumes only the 12-tokens design variables. Loads between 20-layout and

30-components. */
.promo {

margin: var(--sp-6) 0;
}
/* City-page MID variant: the aside is a direct child of .org-grid (injected

after card #3). Span the whole grid row at every width so the banner never

sits beside a card, and let the grid's own row gap carry the vertical rhythm

(no double spacing from .promo's block margin). */
.promo-mid-grid {

grid-column: 1 / -1;

margin: var(--sp-2) 0;
}
/* Base (mobile-first): each .promomobile block is a centered column carrying

its one banner; the desktop strip is hidden. */
.promomobile {

display: flex;

flex-direction: column;

align-items: center;

gap: var(--sp-4);
}
.promodesktop {

display: none;
}
/* One banner + its legal mark caption. The wrapper (not the link) is the slot

child so the caption sits under the shadowed card, like the legacy layout.

Column + align-items:center keeps the IMAGE centered even when multi-line

mark_text forces the item full-width (mobile top slot on aqorda etc.). */
.banner-item {

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

max-width: 100%;

box-sizing: border-box;

/* side padding so long mark_text doesn't kiss the viewport edge */

padding-left: var(--sp-3);

padding-right: var(--sp-3);
}
.banner-link {

position: relative;

display: block;

width: fit-content;

max-width: 100%;

line-height: 0; /* strip inline-image descender gap */

border-radius: var(--radius-sm);

overflow: hidden;

box-shadow: var(--shadow-card);

/* center even if a parent ever stretches the item without flex */

margin-left: auto;

margin-right: auto;
}
/* The KZ ad-law caption under EVERY banner: «Реклама. <license/site details>»

verbatim from ad_partners.mark_text (legacy partners.marktxt). Full width

under the (centered) image; inherits .banner-item side padding. */
.banner-mark {

display: block;

width: 100%;

margin-top: var(--sp-1);

font-family: var(--font-body);

font-size: 10px;

line-height: 1.35;

color: var(--c-faint);

text-align: left;

box-sizing: border-box;
}
.banner-img {

display: block;

max-width: 100%;

height: auto;
}
/* erid — the small KZ legal ad mark, overlaid bottom-right when present. */
.banner-erid {

position: absolute;

right: var(--sp-1);

bottom: var(--sp-1);

max-width: 92%;

padding: 1px 5px;

font-family: var(--font-body);

font-size: 9px;

line-height: 1.3;

color: var(--c-footer-text);

background: rgba(22, 48, 60, 0.55);

border-radius: 3px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;
}
/* Desktop: hide the three standalone mobile blocks (top/mid/btm), show the mid

slot's 3-column strip as one centered row filling the content container. */
@media (min-width: 60rem) {

.promomobile {

display: none;

}

.promodesktop {

display: block;

}

.promodesktopitems {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: var(--sp-5);

align-items: start;

justify-items: center;

}

/* Each strip banner fills its column (images scale down via max-width). */

.promodesktop .banner-item,

.promodesktop .banner-link {

width: 100%;

}

/* City-page MID strip: match the org-grid gap so the 3 strip banners line up


with the 3 card columns above them (org-grid gap is --sp-4 at >=60rem). */

.promo-mid-grid .promodesktopitems {

gap: var(--sp-4);

}
}

/* 30-components — buttons, badges, org-card, pagination. Components read

only 12-tokens variables. */
/* ---- buttons ---- */
.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: var(--sp-2);

padding: var(--sp-2) var(--sp-4);

border-radius: var(--radius-sm);

border: 1px solid transparent;

font-size: var(--fs-sm);

font-weight: 600;

cursor: pointer;

transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-deep); color: #fff; }
.btn-secondary { background: var(--c-card); color: var(--c-primary); border-color: var(--c-line); }
.btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }
/* ---- share button (Feature #41): native Web Share / clipboard-copy ----

Hidden by default ([hidden] — matches the compare tray's convention);

share.js unhides it only when the browser actually offers a share/copy

affordance, so an unsupported browser never shows a dead control. */
.share-btn {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: var(--fs-sm);

font-weight: 600;

color: var(--c-primary-deep);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

padding: 6px var(--sp-4);

cursor: pointer;

transition: background-color 0.15s ease, border-color 0.15s ease;
}
.share-btn:hover { border-color: var(--c-primary); background: var(--c-primary-tint); }
.share-btn[hidden] { display: none; }
.share-btn-copied { border-color: var(--c-primary); background: var(--c-primary-tint); }
.share-btn svg { flex: none; }
/* per-page share-row placement (org hero / catalog page-head / compare head) */
.org-hero-share, .page-head-share, .compare-share { margin-top: var(--sp-3); }
/* ---- badges ---- */
.badge {

display: inline-flex;

align-items: center;

padding: 0.1rem var(--sp-3);

border-radius: var(--radius-pill);

font-size: var(--fs-xs);

font-weight: 600;

letter-spacing: 0.02em;

white-space: nowrap;
}
.badge-exclusive { background: var(--c-primary-deep); color: #fff; }
.badge-premium { background: var(--c-primary-tint); color: var(--c-primary-deep); border: 1px solid var(--c-primary); }
.badge-pro { background: var(--c-primary-tint); color: var(--c-primary-deep); }
/* surfacing badges (facts read API Badges row) */
.badge-pill {

display: inline-flex;

align-items: center;

padding: 0.1rem var(--sp-3);

border-radius: var(--radius-pill);

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: var(--fs-xs);

font-weight: 500;

white-space: nowrap;
}
/* #34: affirmative "verified feature" pill (legacy accent — prefer badge-pill-ok) */
.badge-pill-accent { background: var(--c-primary-tint); color: var(--c-primary-deep); gap: 0.3rem; }
.badge-pill-accent svg { color: var(--c-primary); flex: none; }
/* 2F/3F: accreditation etc. — green check chip (shared by org hero + cards) */
.badge-pill-ok {

display: inline-flex;

align-items: center;

gap: 0.3rem;

background: var(--c-ok-tint, #e3f2ea);

color: var(--c-ok, #2e7d5b);
}
.badge-pill-ok svg { width: 0.8rem; height: 0.8rem; flex: none; }
/* ---- org card (#34 redesign + docs/036 К5/2F polish) ---- */
.org-card {

display: flex;

flex-direction: column;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

overflow: hidden;

transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.org-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: #c6d3d9; }
/* identity layer (D2, docs/036 К5): 16:10 photo; monogram fallback; city chip

top-right (2F); tier badge top-right, or top-left when citychip is present;

price pill bottom-left. */
.oc-media {

position: relative;

display: block;

aspect-ratio: 16 / 10;

background: linear-gradient(135deg, var(--c-primary-tint), #eef4f6);

border-bottom: 1px solid var(--c-line);

color: inherit;

overflow: hidden;
}
.oc-photo {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: cover;

display: block;
}
.oc-media .badge { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1; }
.oc-citychip {

position: absolute;

top: var(--sp-3);

right: var(--sp-3);

z-index: 1;

background: rgba(255, 255, 255, 0.88);

color: var(--c-ink);

font-size: 0.72rem;

font-weight: 700;

border-radius: var(--radius-pill);

padding: 0.2rem 0.6rem;

line-height: 1.2;

max-width: 55%;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}
/* city owns top-right; paid-tier badge slides left when both show */
.oc-media:has(.oc-citychip) .badge { right: auto; left: var(--sp-3); }
.oc-monogram {

position: absolute;

inset: 0;

display: grid;

place-items: center;

color: var(--c-primary);

font-family: var(--font-display);

font-weight: 600;

font-size: 2.5rem;
}
.oc-price-pill {

position: absolute;

left: var(--sp-3);

bottom: var(--sp-3);

display: inline-flex;

align-items: baseline;

gap: 0.3rem;

background: rgba(226, 239, 245, 0.95);

color: var(--c-primary-deep);

border-radius: 9px;

padding: 0.35rem 0.7rem;

font-weight: 800;

font-size: var(--fs-sm);

font-variant-numeric: tabular-nums;

box-shadow: 0 2px 10px rgba(22, 48, 60, 0.22);
}
.oc-price-pill .oc-price-from,
.oc-price-pill .oc-price-per { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-transform: none; letter-spacing: 0; }
/* body */
.oc-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); flex: 1; }
.oc-title {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-md);

line-height: var(--lh-tight);

letter-spacing: -0.01em;
}
.oc-title a { color: var(--c-ink); }
.oc-title a:hover { color: var(--c-primary); }
/* К5 bottom stack, slot 2: the address strip — always pinned above the foot;

color-switch + hairline separate it (no white gaps in the stack). */
.oc-address {

display: flex;

align-items: flex-start;

gap: 0.45rem;

margin: 0;

padding: var(--sp-2) var(--sp-4);

background: #edf3f6;

border-top: 1px solid var(--c-line);

color: var(--c-ink);

font-size: 0.8125rem;

font-weight: 600;
}
.oc-address svg { flex: none; margin-top: 0.12rem; color: var(--c-primary); }
/* К5 bottom stack, slot 1: the nearest-upcoming-event strip — the card's one

RED element (freshness/urgency), flush above the address strip. */
.oc-event {

display: flex;

align-items: center;

gap: 0.45rem;

padding: var(--sp-2) var(--sp-4);

border-top: 1px solid rgba(179, 64, 58, 0.16);

background: #fbf0ee;

color: var(--c-danger);

font-size: var(--fs-xs);

font-weight: 700;

text-decoration: none;

transition: background 0.15s ease;

min-width: 0;
}
.oc-event:hover { background: #f7e6e3; }
.oc-event svg { flex: none; color: var(--c-danger); }
.oc-event-when { font-weight: 800; color: var(--c-danger); white-space: nowrap; }
.oc-event-what { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* substance: 2-line brief clamp */
.oc-brief {

color: var(--c-muted);

font-size: var(--fs-sm);

line-height: 1.5;

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;
}
/* substance: language + feature chips (2F — replaces the label/value dl) */
.oc-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.oc-chip {

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: 0.72rem;

font-weight: 700;

border-radius: var(--radius-pill);

padding: 0.2rem 0.6rem;

line-height: 1.2;
}
/* legacy class names kept so any leftover markup still lays out */
.oc-facts { display: flex; flex-direction: column; gap: var(--sp-1); }
.oc-fact { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; }
.oc-fact dt { color: var(--c-faint); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.oc-fact dd { color: var(--c-ink); font-size: var(--fs-sm); font-weight: 500; }
.oc-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* action foot: 2F compare pill + details */
.oc-foot {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-2);

padding: var(--sp-3) var(--sp-4);

border-top: 1px solid var(--c-line);
}
.oc-foot > .oc-more:only-child { margin-left: auto; }
.oc-more { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--c-primary); font-size: var(--fs-sm); font-weight: 700; }
.oc-more:hover { color: var(--c-primary-deep); }
.oc-more svg { transition: transform 0.15s ease; }
.oc-more:hover svg { transform: translateX(2px); }
.oc-compare {

display: inline-flex;

align-items: center;

gap: 0.35rem;

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

background: #fff;

padding: 0.35rem 0.8rem;

font-size: 0.78rem;

font-weight: 600;

color: var(--c-ink);
}
.oc-compare::before { content: "+"; font-weight: 600; }
.oc-compare:hover { color: var(--c-primary); border-color: var(--c-primary); }
/* ---- pagination ---- */
.pager {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2);

margin: var(--sp-5) 0;
}
/* D2 (docs/036): the window-gap ellipsis — plain text, not a control */
.pager-gap { color: var(--c-faint); padding: 0 0.15rem; user-select: none; }
.pager-label { color: var(--c-muted); font-size: var(--fs-sm); margin-right: var(--sp-1); }
.pager-item {

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 2.25rem;

height: 2.25rem;

padding: 0 var(--sp-2);

border-radius: var(--radius-sm);

border: 1px solid var(--c-line);

background: var(--c-card);

font-size: var(--fs-sm);

font-weight: 500;
}
a.pager-item:hover { border-color: var(--c-primary); }
.pager-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 40-catalog — catalog list surfaces: the city index grid (catalog root)

and the per-city org-card grid. */
/* ---- city index (catalog root) ---- */
.city-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));

gap: var(--sp-3);
}
.city-card-link {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-2);

padding: var(--sp-3) var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

color: var(--c-ink);

font-weight: 500;

transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.city-card-link:hover { color: var(--c-primary); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.city-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-card-count {

flex: none;

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 2rem;

padding: 0.1rem var(--sp-2);

border-radius: var(--radius-pill);

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: var(--fs-xs);

font-weight: 600;
}
/* ---- org-card grid (city page) ---- */
.org-grid {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-4);
}
@media (min-width: 40rem) {

.org-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {

.org-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---- dev index (temporary home surface) ---- */
.dev-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));

gap: var(--sp-4);
}
.dev-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);
}
.dev-card h2 {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-md);

margin-bottom: var(--sp-3);
}
.dev-card ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.dev-card p { color: var(--c-muted); font-size: var(--fs-xs); margin-top: var(--sp-3); }
/* ---- P3 Task 6: city tabs row, region filter, list/address rows ---- */
/* D2.4 + polish (docs/036, 2F): FULL-WIDTH hero band — edge-to-edge gradient

covering breadcrumbs through the toolbar (not a rounded in-container island).

Same 50%−50vw escape as .org-hero-band; body overflow-x:clip kills scroll. */
.city-hero-band {

margin: calc(-1 * var(--sp-4)) calc(50% - 50vw) var(--sp-4);

background: linear-gradient(135deg, #eef4f6 0%, #f5f2ea 100%);

border-bottom: 1px solid var(--c-line);

padding: var(--sp-2) 0 var(--sp-5);
}
.city-hero-band-in {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
.city-hero-band .crumbs { margin: var(--sp-1) 0 var(--sp-2); }
.city-head {

/* content only — the band owns the background */

padding: 0;

margin: 0;

background: transparent;

border: 0;

border-radius: 0;
}
.city-head .page-title .share-btn {

display: inline-flex;

vertical-align: middle;

margin-left: var(--sp-2);

width: 2.375rem;

height: 2.375rem;

justify-content: center;

border-radius: var(--radius-pill);

padding: 0;
}
.city-head .page-title .share-btn[hidden] { display: none; }
.city-head .page-title .share-btn-label { display: none; }
.city-toolbar {

position: relative;

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-3);

margin-top: var(--sp-4);
}
.pagerow {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-3);

margin: var(--sp-4) 0 var(--sp-2);
}
.pagerow-shown { color: var(--c-muted); font-size: var(--fs-sm); }
.pagerow-top .pager { margin-left: auto; }
.pagerow-btm { justify-content: center; margin-top: var(--sp-5); }
.city-tabs {

display: inline-flex;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

padding: 3px;

gap: 2px;
}
.city-tab {

display: inline-flex;

align-items: center;

padding: 0.4rem var(--sp-4);

border-radius: var(--radius-pill);

background: transparent;

color: var(--c-ink);

font-size: var(--fs-sm);

font-weight: 600;
}
.city-tab:hover { color: var(--c-primary); }
.city-tab-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.city-tab-active:hover { color: #fff; }
.city-count-num {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-lg);

color: var(--c-primary-deep);

margin-right: var(--sp-1);
}
.region-filter {

display: flex;

flex-wrap: wrap;

align-items: center;

gap: var(--sp-2);

margin-bottom: var(--sp-4);
}
.region-filter-label { color: var(--c-muted); font-size: var(--fs-sm); }
.region-filter-select {

padding: 0.35rem var(--sp-2);

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

color: var(--c-ink);

font: inherit;

font-size: var(--fs-sm);

max-width: 100%;
}
.region-filter-reset { color: var(--c-muted); font-size: var(--fs-sm); text-decoration: underline; }
.city-card-hint { display: block; color: var(--c-muted); font-size: var(--fs-xs); font-weight: 400; }
.link-rows, .addr-rows {

list-style: none;

counter-reset: linkrow;

display: flex;

flex-direction: column;

gap: var(--sp-1);

max-width: 42rem;
}
.link-row, .addr-row {

counter-increment: linkrow;

display: flex;

align-items: baseline;

gap: var(--sp-2);

padding: var(--sp-2) var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);
}
.link-row::before, .addr-row::before {

content: counter(linkrow) ".";

color: var(--c-muted);

font-size: var(--fs-xs);

min-width: 1.5rem;
}
.link-row-meta, .addr-row-meta { color: var(--c-muted); font-size: var(--fs-xs); margin-left: auto; }
.empty-note { color: var(--c-muted); }
/* ---- lib (press library) + search (P3 Task 9) ---- */
.news-list-lib { grid-template-columns: 1fr; max-width: 46rem; }
.lib-descr { white-space: pre-line; max-width: 46rem; margin: var(--sp-4) 0; }
.lib-mentioned { margin-top: var(--sp-6); }
.lib-mentioned h3 { margin-bottom: var(--sp-3); }
.search-form { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); max-width: 32rem; }
.search-input {

flex: 1;

padding: 0.5rem 0.75rem;

border: 1px solid var(--c-line);

border-radius: var(--radius);

font: inherit;

background: var(--c-card);

color: inherit;
}
.search-results { list-style: none; counter-reset: searchrow; padding: 0; max-width: 46rem; }
.search-result {

counter-increment: searchrow;

display: flex;

align-items: baseline;

gap: var(--sp-2);

padding: var(--sp-2) var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

margin-bottom: var(--sp-2);
}
.search-result::before {

content: counter(searchrow) ".";

color: var(--c-muted);

font-size: var(--fs-xs);

min-width: 1.5rem;
}
.search-result-link { font-weight: 600; }
.search-result-location { color: var(--c-muted); font-size: var(--fs-sm); margin-left: auto; }
.search-nomatch { color: #b3261e; font-weight: 600; }
/* D-polish (docs/036): the /opendoors past list — a clean dated timeline

instead of bare text (CSS-only; the legacy-parity markup is untouched). */
.od-past {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-2) var(--sp-5) var(--sp-4);

margin-top: var(--sp-4);
}
.od-past-date {

font: 700 var(--fs-sm) var(--font-body);

color: var(--c-danger);

margin: var(--sp-4) 0 2px;

font-variant-numeric: tabular-nums;
}
.od-past-org {

margin: 0;

padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);

border-left: 3px solid #f2d9d5;
}
.od-past-org a { font-weight: 600; }

/* 41-facets — the city-page catalog filter panel (P6 WS2 2D). A no-JS

<form method="get"> of checkboxes, wrapped in a collapsible <details> for

mobile. Consumes only 12-tokens variables; no new palette. The panel is

golden-safe by construction — its controls are inputs/labels/buttons, never

a catalog <a href>, so rendering it on the base city page changes no

org_links. */
/* D2.4 (docs/036): the facet panel lives IN the toolbar row — the summary is

a «Фильтры» pill; the open form drops as an overlay over the list. */
.facet-panel { position: static; }
.facet-panel .facet-form {

position: absolute;

left: 0;

right: 0;

top: calc(100% + var(--sp-2));

z-index: 30;

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

box-shadow: var(--shadow-lift);
}
.facet-panel-summary {

display: inline-flex;

align-items: center;

gap: var(--sp-2);

padding: 0.5rem var(--sp-4);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

background: var(--c-card);

cursor: pointer;

list-style: none;

font-weight: 600;

font-size: var(--fs-sm);

color: var(--c-ink);
}
.facet-panel-summary:hover { border-color: var(--c-primary); color: var(--c-primary); }
.facet-panel-summary::-webkit-details-marker { display: none; }
.facet-panel-summary::after {

content: "";

width: 0.5rem;

height: 0.5rem;

border-right: 2px solid var(--c-faint);

border-bottom: 2px solid var(--c-faint);

transform: rotate(45deg);

transition: transform 0.15s ease;

flex: none;

align-self: center;

margin-left: auto;
}
.facet-panel[open] .facet-panel-summary::after { transform: rotate(-135deg); }
.facet-panel-title { letter-spacing: -0.01em; }
.facet-panel-count {

font-weight: 500;

font-size: var(--fs-sm);

color: var(--c-muted);

margin-left: auto;

margin-right: var(--sp-3);
}
.facet-form {

padding: 0 var(--sp-4) var(--sp-4);

border-top: 1px solid var(--c-line);
}
.facet-groups {

display: flex;

flex-wrap: wrap;

gap: var(--sp-5);

padding-top: var(--sp-3);
}
.facet-group {

border: 0;

margin: 0;

padding: 0;

min-inline-size: 0; /* let long option lists wrap instead of overflowing */
}
.facet-group-title {

padding: 0;

font-size: var(--fs-xs);

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.04em;

color: var(--c-faint);

margin-bottom: var(--sp-2);
}
.facet-choice {

display: flex;

align-items: center;

gap: var(--sp-2);

padding: var(--sp-1) 0;

cursor: pointer;

font-size: var(--fs-sm);

color: var(--c-ink);
}
.facet-choice input {

width: 1rem;

height: 1rem;

accent-color: var(--c-primary);

flex: none;
}
.facet-choice-label { flex: 1; }
.facet-choice-count {

color: var(--c-faint);

font-size: var(--fs-xs);

font-variant-numeric: tabular-nums;
}
.facet-actions {

display: flex;

align-items: center;

gap: var(--sp-4);

margin-top: var(--sp-4);
}
.facet-submit { flex: none; }
.facet-reset {

font-size: var(--fs-sm);

color: var(--c-muted);

text-decoration: underline;

text-underline-offset: 2px;
}
.facet-reset:hover { color: var(--c-primary); }

/* 45-home — homepage blocks + /info pages (P3 Task 5). Consumes only

12-tokens variables; component families: home-* (hero/stats/cities),

event-* (open-day cards), news-* (lib article cards), info-* /

subscribe-* (info pages), hp-field (anti-spam honeypot). */
/* --- hero: FULL-WIDTH band (1F / docs/036) — edge-to-edge gradient like catalog --- */
.home-hero-band {

margin: calc(-1 * var(--sp-4)) calc(50% - 50vw) 0;

background: linear-gradient(135deg, #eef4f6 0%, #f5f2ea 100%);

border-bottom: 1px solid var(--c-line);

padding: var(--sp-6) 0 var(--sp-5);
}
.home-hero-band-in {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
.home-hero {

text-align: center;

max-width: 42rem;

margin: 0 auto;

padding: 0;
}
.home-hero-title {

font-family: var(--font-display);

font-weight: 600;

font-size: clamp(1.55rem, 3.2vw, 2.05rem);

line-height: 1.2;

letter-spacing: -0.015em;

color: var(--c-ink);

margin: 0 auto var(--sp-3);

max-width: 28rem;

/* У5в pastel under the one-line 1F title */

width: fit-content;

padding-bottom: 10px;

position: relative;
}
.home-hero-title::after {

content: "";

position: absolute;

left: 50%;

bottom: 0;

transform: translateX(-50%);

width: min(5rem, 40%);

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);
}
.home-hero-accent {

display: block;

color: var(--c-primary);
}
.home-hero-sub {

color: var(--c-muted);

font-size: var(--fs-sm);

max-width: 32rem;

margin: 0 auto;

line-height: 1.45;
}
/* --- stats: full-width white strip under the hero (1F) — keep it SHORT --- */
.home-stats-band {

margin: 0 calc(50% - 50vw) var(--sp-6);

background: var(--c-card);

border-bottom: 1px solid var(--c-line);
}
.home-stats-band-in {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
/* D4 (docs/036, 1F): INFOGRAPHIC — icons, hairline separators, not buttons. */
.home-stats {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 0;

padding: 0.55rem 0;
}
@media (min-width: 40rem) {

.home-stats { grid-template-columns: repeat(4, 1fr); }

.home-stat + .home-stat { border-left: 1px solid var(--c-line); }
}
.home-stat {

display: flex;

align-items: center;

justify-content: center;

gap: var(--sp-2);

padding: 0.35rem var(--sp-3);

text-align: left;
}
.home-stat-ico {

width: 1.85rem;

height: 1.85rem;

border-radius: 50%;

background: var(--c-primary-tint);

color: var(--c-primary);

display: grid;

place-items: center;

flex: none;
}
.home-stat-ico svg { width: 0.95rem; height: 0.95rem; }
.home-stat-value {

font-family: var(--font-display);

font-size: var(--fs-md);

line-height: 1.1;

color: var(--c-ink);

font-weight: 700;
}
.home-stat-label {

color: var(--c-muted);

font-size: 0.7rem;

margin-top: 1px;

line-height: 1.2;
}
/* --- #39 / 1F: popular minis under the city directory --- */
.home-featured {

margin-top: var(--sp-6);

margin-bottom: 0;
}
.home-featured .home-section-title { margin-bottom: var(--sp-4); }
.home-featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 40rem) {

.home-featured-grid { grid-template-columns: repeat(3, 1fr); }
}
/* inside the 60/40 split column, stack on narrower mid widths */
@media (min-width: 60rem) and (max-width: 72rem) {

.home-split .home-featured-grid { grid-template-columns: 1fr; }
}
.home-featured-card {

display: flex;

flex-direction: column;

align-items: flex-start;

gap: var(--sp-2);

padding: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-top: 3px solid var(--c-primary);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

color: var(--c-ink);

transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.home-featured-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* «gold» accent = deep green (Туркестан) — never brown/gold (docs/036) */
.home-featured-card[data-accent="gold"] { border-top-color: #2e7d5b; }
.home-featured-card[data-accent="ink"] { border-top-color: var(--c-ink); }
.home-featured-badge {

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: var(--fs-xs);

font-weight: 600;

padding: 0.2rem 0.6rem;

border-radius: var(--radius-pill);
}
.home-featured-card[data-accent="gold"] .home-featured-badge { background: var(--c-ok-tint, #e3f2ea); color: #2e7d5b; }
.home-featured-card[data-accent="ink"] .home-featured-badge { background: #e5eaed; color: var(--c-ink); }
.home-featured-name {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-lg);

line-height: var(--lh-tight);

color: var(--c-ink);
}
.home-featured-card:hover .home-featured-name { color: var(--c-primary); }
.home-featured-count { display: flex; align-items: center; gap: 0.35rem; color: var(--c-muted); font-size: var(--fs-sm); }
.home-featured-count svg { color: var(--c-primary); flex: none; }
/* --- top cities (the H1 block — golden-verbatim text) --- */
.home-cities { margin-bottom: var(--sp-6); }
.home-title { margin-bottom: var(--sp-4); }
/* D4 (docs/036, 1F): the city DIRECTORY — ruled rows, count right */
.home-city-list {

list-style: none;

margin: 0;

padding: 0;

display: grid;

grid-template-columns: 1fr;

column-gap: var(--sp-6);
}
@media (min-width: 40rem) {

.home-city-list { grid-template-columns: 1fr 1fr; }
}
.home-city-item {

display: flex;

align-items: baseline;

justify-content: space-between;

gap: var(--sp-3);

padding: var(--sp-2) 0;

border-bottom: 1px solid var(--c-line);
}
.home-city-link { font-size: var(--fs-base); font-weight: 600; }
.home-city-count {

color: var(--c-faint);

font-size: var(--fs-sm);

font-variant-numeric: tabular-nums;
}
.home-city-item-all { border-bottom: 0; }
.home-city-all { color: var(--c-muted); }
.home-okrug-list {

list-style: none;

margin: var(--sp-4) 0 0;

padding: 0;

display: flex;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-4);
}
/* --- shared section header (events / news) --- */
.home-section-head { text-decoration: none; color: inherit; }
.home-section-title {

font-family: var(--font-display);

font-size: var(--fs-lg);

color: var(--c-ink);

margin: 0 0 var(--sp-4);

/* D4 (docs/036): У5в pastel line instead of the gold left bar */

position: relative;

width: fit-content;

padding-bottom: 10px;
}
.home-section-title::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);
}
.home-section-head:hover .home-section-title { color: var(--c-primary); }
/* --- open-day event cards --- */
.home-events { margin-bottom: var(--sp-7); }
.event-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));

gap: var(--sp-4);
}
.event-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);
}
.event-head { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.badge-event {

background: var(--c-primary-tint);

color: var(--c-primary-deep);
}
.badge-soon {

background: #fbf0ee;

color: var(--c-danger);
}
.event-org { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.event-org a { color: var(--c-ink); text-decoration: none; }
.event-org a:hover { color: var(--c-primary); }
.event-meta {

display: flex;

gap: var(--sp-3);

color: var(--c-muted);

font-size: var(--fs-sm);

margin: 0 0 var(--sp-2);
}
.event-date { font-weight: 600; color: var(--c-primary-deep); }
.event-descr { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }
/* --- lib article cards --- */
.home-news { margin-bottom: var(--sp-7); }
.news-list {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));

gap: var(--sp-4);
}
.news-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);

display: flex;

flex-direction: column;
}
/* home column (1F): bold titles only — dense list next to the city directory */
.home-news .news-list {

grid-template-columns: 1fr;

gap: 0;
}
.home-news .news-card-titleonly {

background: transparent;

border: 0;

border-bottom: 1px solid var(--c-line);

border-radius: 0;

box-shadow: none;

padding: 0.65rem 0;
}
.home-news .news-card-titleonly .news-title {

font-size: var(--fs-sm);

font-weight: 700;

line-height: 1.35;

margin: 0;
}
.home-news .news-card-titleonly .news-title a {

font-weight: 700;

color: var(--c-ink);
}
.home-news .news-card-titleonly .news-title a:hover { color: var(--c-primary); }
.news-meta {

display: flex;

justify-content: space-between;

align-items: baseline;

margin-bottom: var(--sp-2);

font-size: var(--fs-xs);
}
.news-tag {

background: var(--c-primary-tint);

color: var(--c-primary-deep);

border-radius: var(--radius-pill);

padding: 0 var(--sp-2);
}
.news-date { color: var(--c-faint); }
.news-title { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.news-title a { color: var(--c-ink); text-decoration: none; }
.news-title a:hover { color: var(--c-primary); }
.news-excerpt {

color: var(--c-muted);

font-size: var(--fs-sm);

white-space: pre-line; /* legacy converted \n to <br>; same reading, no raw HTML */

margin: 0 0 var(--sp-3);

display: -webkit-box;

-webkit-line-clamp: 6;

-webkit-box-orient: vertical;

overflow: hidden;
}
.news-more {

margin-top: auto;

display: inline-flex;

align-items: center;

gap: var(--sp-1);

font-size: var(--fs-sm);
}
/* --- info pages --- */
.info-page { max-width: 46rem; }
.info-body { color: var(--c-ink); }
.info-body h2 {

font-family: var(--font-display);

font-size: var(--fs-lg);

margin: var(--sp-5) 0 var(--sp-2);
}
.info-body p { margin: 0 0 var(--sp-3); }
.promo-options { list-style: none; padding: 0; margin: var(--sp-4) 0; }
.promo-options li { margin-bottom: var(--sp-2); }
.promo-option { font-size: var(--fs-md); }
/* --- subscribe form --- */
.subscribe-form {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-5);

max-width: 26rem;

display: flex;

flex-direction: column;

gap: var(--sp-3);
}
.subscribe-label { color: var(--c-muted); font-size: var(--fs-sm); }
.subscribe-input {

font: inherit;

padding: var(--sp-2) var(--sp-3);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);
}
.subscribe-input:focus {

outline: 2px solid var(--c-primary);

outline-offset: 1px;

border-color: var(--c-primary);
}
.subscribe-thanks { font-size: var(--fs-md); color: var(--c-primary-deep); }
/* Honeypot: moved out of the viewport rather than display:none — some

naive bots skip display:none fields, which would defeat the trap. */
.hp-field {

position: absolute;

left: -9999px;

top: auto;

width: 1px;

height: 1px;

overflow: hidden;
}
/* D4 / 1F: dominant search panel on the hero band */
.home-search {

position: relative;

display: flex;

align-items: center;

gap: var(--sp-2);

max-width: 40rem;

margin: var(--sp-5) auto 0;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: 14px;

box-shadow: var(--shadow-lift);

padding: 0.65rem 0.65rem 0.65rem 1.1rem;
}
.home-search > svg {

color: var(--c-faint);

flex: none;

width: 1.35rem;

height: 1.35rem;
}
.home-search input {

flex: 1;

min-width: 0;

border: 0;

background: none;

font: 500 1.05rem/1.3 var(--font-body);

color: var(--c-ink);

padding: 0.55rem 0;
}
.home-search input:focus { outline: none; }
.home-search input::placeholder { color: var(--c-faint); }
.home-search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-tint), var(--shadow-lift); }
.home-search-btn {

background: var(--c-primary);

color: #fff;

border: 0;

border-radius: 10px;

padding: 0.7rem 1.25rem;

font-weight: 700;

font-size: var(--fs-sm);

cursor: pointer;

flex: none;
}
.home-search-btn:hover { background: var(--c-primary-deep); }
.home-search-chips {

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: center;

gap: var(--sp-2);

margin-top: var(--sp-4);
}
.home-search-chips-label { color: var(--c-muted); font-size: var(--fs-xs); }
.home-search-chip {

display: inline-flex;

padding: 0.3rem var(--sp-3);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

background: rgba(255, 255, 255, 0.85);

color: var(--c-ink);

font-size: var(--fs-xs);

font-weight: 600;
}
.home-search-chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: #fff; }
/* D4 (docs/036, 1F): the 60/40 directory | library split */
.home-split { margin-bottom: var(--sp-6); }
@media (min-width: 60rem) {

.home-split {

display: grid;

grid-template-columns: 3fr 2fr;

gap: var(--sp-7) var(--sp-6);

align-items: start;

}

.home-split .news-list { grid-template-columns: 1fr; gap: var(--sp-3); }

.home-split .home-cities { margin-bottom: 0; }

.home-split .home-news { margin-bottom: 0; }
}

/* 48-auth — /user/* public auth pages (P4 Batch A Task 2): login/register/

remind forms. Reuses the design system's existing form-row/form-error/

hp-field patterns (50-orgpage.css/45-home.css) rather than inventing a

new visual language — same card/form look as the org-request form and

the /info/subscribe form, just under its own auth-* namespace so it

doesn't couple to org-page-specific selectors. */
.user-auth-page { max-width: 30rem; }
.auth-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-5);

max-width: 26rem;
}
.auth-card + .auth-card { margin-top: var(--sp-5); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-form .form-row { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {

border: 1px solid var(--c-line);

border-radius: var(--radius);

padding: var(--sp-2) var(--sp-3);

font: inherit;

background: var(--c-card);
}
.auth-form input:focus {

outline: 2px solid var(--c-primary);

outline-offset: 1px;

border-color: var(--c-primary);
}
.auth-form button { align-self: flex-start; }
.auth-notice { color: var(--c-primary-deep); font-weight: 600; }
/* dev-only magic-link surface: monospace, muted, wraps a long URL. Only

ever rendered on the requester's own response in a dev deployment. */
.auth-dev-link {

margin-top: var(--sp-3);

padding: var(--sp-2) var(--sp-3);

background: var(--c-primary-tint);

border: 1px dashed var(--c-primary);

border-radius: var(--radius-sm);

font-size: var(--fs-xs);

word-break: break-all;
}
.auth-subhead {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-md);

margin: 0 0 var(--sp-2);
}
.auth-links { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.auth-links a { font-weight: 600; }
.auth-secondary { margin-top: var(--sp-6); }

/* 50-orgpage — the org detail page: hero block and the two-column

main/sidebar layout the facts sections flow into. */
/* 3F: the hero is a FULL-WIDTH BAND of its own — soft gradient background

bleeding to the viewport edges, breadcrumbs inside, the white hero card,

and a subtle FULL-WIDTH line + breathing room separating it from the

content below. The band escapes <main class="container"> with the

50%−50vw trick; body overflow-x:clip (20-layout) kills the scrollbar

overflow this can cause. */
.org-hero-band {

margin: calc(-1 * var(--sp-4)) calc(50% - 50vw) var(--sp-6);

background: linear-gradient(135deg, #eef4f6 0%, #f7f3e9 100%);

border-bottom: 1px solid var(--c-line);

padding: var(--sp-2) 0 var(--sp-6);
}
.org-hero-band-in {

width: 100%;

max-width: var(--container);

margin: 0 auto;

padding-left: var(--sp-4);

padding-right: var(--sp-4);
}
.org-hero {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-5) var(--sp-5);

position: relative;
}
/* hero top row: badges on the left, the owner/staff Edit button on the right */
.org-hero-top {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: var(--sp-3);

margin-bottom: var(--sp-3);
}
.org-hero-badges {

display: flex;

flex-wrap: wrap;

gap: var(--sp-2);
}
.org-hero-badges:empty { display: none; margin: 0; }
.org-hero-edit {

flex-shrink: 0;

display: inline-flex;

align-items: center;

gap: var(--sp-1);

white-space: nowrap;
}
.org-title { margin: 0; }
.org-hero-meta {

display: flex;

align-items: center;

gap: var(--sp-2);

color: var(--c-muted);

font-size: var(--fs-sm);

margin-top: var(--sp-3);
}
.org-hero-meta svg { color: var(--c-faint); flex: none; }
@media (min-width: 40rem) {

.org-hero { padding: var(--sp-6) var(--sp-6); }
}
.org-layout {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-5);

align-items: start;
}
.org-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.org-side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
@media (min-width: 60rem) {

.org-layout { grid-template-columns: minmax(0, 1fr) 20rem; }

/* single-column layout when there is no sidebar */

.org-layout:not(:has(.org-side)) { grid-template-columns: minmax(0, 1fr); }
}
/* the 20rem rail is too narrow for the two-column label/value grid:

sidebar sections stack labels above values at every width */
.org-side .facts-dl { grid-template-columns: 1fr; }
.org-side .facts-dl dt { padding-top: 0; }
.org-side .facts-dl dd { margin-bottom: var(--sp-3); }
.org-side .facts-dl dd:last-child { margin-bottom: 0; }
/* ---- Task 7: full org page ---- */
/* hero: two columns (info + polaroid photo) on wide screens */
.org-hero-cols { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 48rem) {

.org-hero-cols { flex-direction: row; align-items: flex-start; }

.org-hero-info { flex: 1 1 auto; min-width: 0; }

.org-hero-photo { flex: 0 0 16rem; }
}
.org-descr {

color: var(--c-muted);

white-space: pre-line; /* legacy prints the raw intro's own line breaks */

margin: var(--sp-3) 0 0;
}
.org-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.tag {

border-radius: var(--radius-pill);

padding: 0 var(--sp-3);

font-size: var(--fs-xs);

line-height: 1.7;

background: var(--c-primary-tint);

color: var(--c-primary-deep);
}
.tag-pink { background: #fbe3ef; color: #a3155f; }
.tag-blue { background: var(--c-primary-tint); color: var(--c-primary-deep); }
.polaroid {

display: block;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-2) var(--sp-2) var(--sp-1);

text-decoration: none;

transform: rotate(1.5deg);
}
.polaroid-img { width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); display: block; }
.polaroid-caption { display: block; text-align: center; color: var(--c-muted); font-size: var(--fs-xs); padding: var(--sp-1) 0; }
.org-hero-tiny .org-back { margin: var(--sp-3) 0 0; }
/* sidebar blocks (logo / contacts / landmarks / map / open days) */
.side-block {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);
}
.side-title {

font-family: var(--font-display);

font-size: var(--fs-md);

margin: 0 0 var(--sp-3);
}
.org-logo { max-width: 100%; height: auto; display: block; }
.contact-rows { margin: 0; }
.contact-rows dt { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 500; }
.contact-rows dd { margin: 0 0 var(--sp-3); overflow-wrap: anywhere; }
.contact-rows dd:last-child { margin-bottom: 0; }
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.social-chip {

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

padding: 0 var(--sp-3);

font-size: var(--fs-xs);

line-height: 1.8;

text-decoration: none;
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; }
.side-list-meta { color: var(--c-faint); font-size: var(--fs-xs); white-space: nowrap; }
.side-map-addr { display: flex; gap: var(--sp-2); align-items: baseline; color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.side-action { font-size: var(--fs-sm); }
/* #38: the pre-compiled static map preview in the sidebar (clickable → /map) */
.side-map-link { display: block; border: 1px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-3); transition: border-color 0.15s ease; }
.side-map-link:hover { border-color: var(--c-primary); }
.side-map-img { display: block; width: 100%; height: auto; }
/* #38 rest (docs/033): the /map deep-dive's interactive Yandex embed. Needs an

explicit height (Yandex sizes the map to its container) + rounded clip; the

address block renders below it. Only present on /map when a key + coords

exist — otherwise this element isn't emitted. */
.org-map-embed {

width: 100%;

height: clamp(320px, 68vh, 560px);

border: 1px solid var(--c-line);

border-radius: var(--radius);

overflow: hidden;

margin-bottom: var(--sp-4);

background: var(--c-paper);
}
/* content sections (photo gallery / lib mentions) */
.content-section { min-width: 0; }
.section-actions { margin-top: var(--sp-3); }
.section-link { font-weight: 600; }
.section-title-link { color: inherit; text-decoration: none; }
.gallery-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

gap: var(--sp-3);
}
.gallery-item a { display: block; position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.gallery-image { width: 100%; height: 9rem; object-fit: cover; display: block; }
.gallery-caption {

position: absolute; left: 0; right: 0; bottom: 0;

background: linear-gradient(transparent, rgba(0,0,0,0.65));

color: #fff; font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-2) var(--sp-1);

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.photo-large { margin: 0 0 var(--sp-4); }
.photo-large-img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.photo-large-caption { color: var(--c-muted); font-size: var(--fs-sm); padding-top: var(--sp-2); }
.photo-large-descr { color: var(--c-ink); font-size: var(--fs-sm); padding-top: var(--sp-1); margin: 0; max-width: 60ch; white-space: pre-line; }
/* #3 events module — public events list + event page */
.org-events-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.org-event-row { }
.org-events-past { margin-top: var(--sp-5); }
.org-event-link {

display: flex;

align-items: baseline;

gap: var(--sp-3);

flex-wrap: wrap;

padding: var(--sp-3) var(--sp-4);

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

text-decoration: none;

transition: border-color 0.15s ease;
}
.org-event-link:hover { border-color: var(--c-primary); }
.org-event-kind {

font-size: var(--fs-xs);

font-weight: 600;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

white-space: nowrap;
}
.org-event-date { color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }
.org-event-title { font-weight: 600; color: var(--c-ink); }
.org-event-meta { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.org-event-descr { color: var(--c-ink); max-width: 66ch; white-space: pre-line; line-height: 1.7; }
.org-event-cta { margin-top: var(--sp-4); }
/* #3 events module: the org's /events list body — a min-height so a page with a

single event doesn't read as empty. */
.org-events-body { min-height: 220px; }
.org-events-body > .content-section:first-child { margin-top: var(--sp-4); }
/* #3 events module Part B: the org sidebar "События" block */
.side-events { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.side-event-link { display: block; text-decoration: none; color: var(--c-ink); }
.side-event-link:hover .side-event-title { color: var(--c-primary); }
.side-event-date { display: block; color: var(--c-danger); font-size: var(--fs-xs); font-weight: 700; }
.side-event-title { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; }
/* #3 events module Part B: the all-kinds events catalog page */
.events-catalog { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.events-catalog-row {

display: grid;

grid-template-columns: 9rem 8rem 1fr;

gap: var(--sp-2) var(--sp-4);

align-items: baseline;

padding: var(--sp-3) var(--sp-4);

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

text-decoration: none;

transition: border-color 0.15s ease;
}
.events-catalog-row:hover { border-color: var(--c-primary); }
.events-cat-date { font-weight: 700; color: var(--c-danger); font-size: var(--fs-sm); white-space: nowrap; }
.events-cat-kind {

justify-self: start;

font-size: var(--fs-xs);

font-weight: 600;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

white-space: nowrap;
}
.events-cat-title { font-weight: 600; color: var(--c-ink); }
.events-cat-school { grid-column: 3; color: var(--c-muted); font-size: var(--fs-sm); }
@media (max-width: 40rem) {

.events-catalog-row { grid-template-columns: 1fr; gap: var(--sp-1); }

.events-cat-school { grid-column: auto; }
}
/* lib mention rows */
.liblink-row { margin-bottom: var(--sp-4); }
.liblink-row:last-child { margin-bottom: 0; }
.liblink-head { margin: 0 0 var(--sp-1); display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
.liblink-date { color: var(--c-accent-deep, #8a6510); font-size: var(--fs-xs); white-space: nowrap; }
.liblink-title { font-weight: 600; }
.liblink-descr { margin: 0; }
.liblink-descr a { color: var(--c-muted); text-decoration: none; font-size: var(--fs-sm); }
.org-back-bottom { margin: var(--sp-4) 0 0; }
/* nearby schools + articles strips (every org page) */
.org-near, .org-news { margin-top: var(--sp-6); }
/* #34-fix: the near-card is an .org-card variant reusing the new .oc-* body

classes (30-components.css); only its media (photo/monogram + distance badge)

is near-specific. */
.near-media { position: relative; display: block; }
.near-photo { width: 100%; height: 8rem; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0; }
.near-monogram {

display: grid; place-items: center; height: 8rem;

background: linear-gradient(180deg, #fbfcfd, var(--c-paper));

color: var(--c-primary-deep); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl);

border-bottom: 1px solid var(--c-line);
}
.near-dist {

position: absolute; top: var(--sp-2); right: var(--sp-2);

background: rgba(20, 108, 142, 0.9); color: #fff;

border-radius: var(--radius-pill); padding: 0 var(--sp-2);

font-size: var(--fs-xs); line-height: 1.7;
}
.near-descr {

color: var(--c-muted); font-size: var(--fs-sm); margin: 0;

display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* tariff detail + card link */
.tuition-grid-single { grid-template-columns: minmax(0, 24rem) !important; }
.tariff-more { margin-top: var(--sp-2); }
/* request form */
.org-request-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 30rem; }
.org-request-form .form-row { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.org-request-form input[type="text"], .org-request-form textarea {

border: 1px solid var(--c-line); border-radius: var(--radius);

padding: var(--sp-2) var(--sp-3); font: inherit; background: var(--c-card);
}
.org-request-form textarea { min-height: 6rem; resize: vertical; }
.org-request-form button { align-self: flex-start; }
.form-error { color: #b3261e; font-weight: 600; }
.requestinfo-list { padding-left: 1.25rem; }
.requestinfo-list li { margin-bottom: var(--sp-2); }
/* ================= D3 (docs/036): the 3F hero card ================= */
.org-hero-bar {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-3);

margin-top: var(--sp-3);
}
.org-hero-addr {

display: inline-flex;

align-items: center;

gap: 0.4rem;

color: var(--c-ink);

font-size: var(--fs-sm);

font-weight: 600;
}
.org-hero-addr svg { color: var(--c-primary); flex: none; }
.org-hero-maplink { font-size: var(--fs-sm); font-weight: 600; }
/* sticky header clearance so «На карте ↓» doesn't land under the bar */
#org-map { scroll-margin-top: 5.5rem; }
.org-hero-actions {

margin-left: auto;

display: inline-flex;

align-items: center;

gap: var(--sp-2);
}
.org-hero-compare-link {

display: inline-flex;

align-items: center;

padding: 0.45rem var(--sp-4);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

background: var(--c-card);

color: var(--c-ink);

font-size: var(--fs-sm);

font-weight: 600;
}
.org-hero-compare-link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.org-hero-actions .share-btn {

width: 2.375rem;

height: 2.375rem;

justify-content: center;

border-radius: var(--radius-pill);

padding: 0;
}
.org-hero-actions .share-btn[hidden] { display: none; }
.org-hero-actions .share-btn-label { display: none; }
.org-hero-intro { border-top: 1px solid var(--c-line); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.org-hero-intro .org-descr {

display: -webkit-box;

-webkit-line-clamp: 3;

line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

max-width: 76ch;
}
.org-hero-intro .org-descr.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.readmore {

background: none;

border: 0;

padding: var(--sp-2) 0 0;

color: var(--c-primary);

font-size: var(--fs-sm);

font-weight: 600;

cursor: pointer;
}
.readmore:hover { color: var(--c-primary-deep); }
.org-hero-gallery {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: var(--sp-3);

margin-top: var(--sp-4);
}
@media (max-width: 40rem) { .org-hero-gallery { grid-template-columns: repeat(2, 1fr); } }
.org-hero-ph {

position: relative;

display: block;

aspect-ratio: 16 / 10;

border-radius: var(--radius-sm);

overflow: hidden;

background: #dfe7ea;

border: 1px solid var(--c-line);
}
.org-hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.org-hero-ph:hover img { transform: scale(1.03); }
.org-hero-ph-all {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: var(--sp-1);

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-weight: 700;

font-size: var(--fs-sm);
}
.org-hero-ph-all:hover { background: #d6e8f0; text-decoration: none; }
/* D3: sparse reflow — no fact sections => single column, sidebar as tri-row */
@media (min-width: 60rem) {

.org-layout-sparse { grid-template-columns: minmax(0, 1fr) !important; }

.org-layout-sparse .org-side {

flex-direction: row;

display: grid;

grid-template-columns: repeat(3, 1fr);

align-items: start;

}
}
/* D3: the ONE infobox — logo in the Контакты corner; no double line after

the heading */
.org-contacts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.org-contacts-logo {

width: 4.5rem;

height: 4.5rem;

object-fit: contain;

background: #fff;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: 0.3rem;

flex: none;
}
/* D3: the sidebar events block — red ticket accents (the page's one red) */
.side-event-link { border-left: 3px solid var(--c-danger); background: #fbf0ee; border-radius: var(--radius-sm); }
.side-event-link:hover { background: #f7e6e3; text-decoration: none; }
.side-event-date { color: var(--c-danger); font-weight: 800; }
/* ============ 3F polish round (owner checklist, astana-garden) ============ */
/* hero corner: logo only — Edit lives in .org-hero-actions (compare · share · edit) */
.org-hero-corner {

position: absolute;

top: var(--sp-4);

right: var(--sp-5);

display: flex;

flex-direction: column;

align-items: flex-end;
}
.org-hero-badges { padding-right: 5rem; }
.org-hero-logo {

width: 3.5rem;

height: 3.5rem;

object-fit: contain;

background: #fff;

border: 1px solid var(--c-line);

border-radius: 10px;

padding: 0.3rem;
}
/* edit in the action bar — compact primary, wraps with compare/share on mobile */
.org-hero-actions .org-hero-edit {

display: inline-flex;

align-items: center;

gap: 0.3rem;

padding: 0.4rem 0.75rem;

font-size: var(--fs-xs);

white-space: nowrap;
}
.org-hero-actions .org-hero-edit svg { width: 0.8rem; height: 0.8rem; }
.org-hero-top .org-hero-badges { margin-right: auto; }
/* accreditation badge — green with a check (3F) */
.badge-pill-ok {

display: inline-flex;

align-items: center;

gap: 0.3rem;

background: var(--c-ok-tint, #e3f2ea);

color: var(--c-ok, #2e7d5b);
}
.badge-pill-ok svg { width: 0.8rem; height: 0.8rem; }
/* «События» in the MAIN column — the 3F red perforated tickets */
.org-events-main .eticket {

position: relative;

display: flex;

align-items: center;

gap: var(--sp-4);

padding: var(--sp-4) var(--sp-4) var(--sp-4) 2.2rem;

background: #f9ece9;

border: 1px solid rgba(179, 64, 58, 0.3);

border-radius: var(--radius);

color: var(--c-ink);

box-shadow: var(--shadow-card);

margin-bottom: var(--sp-3);

transition: box-shadow 0.15s ease;
}
.org-events-main .eticket:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(179, 64, 58, 0.14), 0 8px 20px rgba(179, 64, 58, 0.16); }
.org-events-main .eticket::before {

content: "";

position: absolute;

left: 6px;

top: 9px;

bottom: 9px;

width: 12px;

background: radial-gradient(circle at 6px 8px, var(--c-paper) 3px, transparent 3.6px) 0 0/12px 16px repeat-y;
}
.et-ico {

width: 2.6rem;

height: 2.6rem;

border-radius: 50%;

background: #fff;

border: 1px solid rgba(179, 64, 58, 0.35);

color: var(--c-danger);

display: grid;

place-items: center;

flex: none;
}
.et-ico svg { width: 1.2rem; height: 1.2rem; }
.et-body { flex: 1; min-width: 0; }
.et-date { display: block; font-weight: 800; font-size: var(--fs-base); color: var(--c-danger); font-variant-numeric: tabular-nums; }
.et-what { display: block; margin-top: 0.25rem; font-size: var(--fs-sm); font-weight: 600; }
.et-kind {

display: inline-block;

vertical-align: 1px;

background: var(--c-danger);

color: #fff;

font-size: 0.66rem;

font-weight: 700;

letter-spacing: 0.07em;

text-transform: uppercase;

padding: 0.25rem 0.5rem;

border-radius: var(--radius-pill);

margin-right: 0.5rem;
}
.et-chev { color: rgba(179, 64, 58, 0.55); font-size: 1.4rem; line-height: 1; flex: none; }
/* sidebar 3F restyle: Контакты as ruled label/value rows, no double lines */
.contact-rows dt { float: left; clear: left; padding-top: var(--sp-3); }
.contact-rows dd {

margin: 0;

padding: var(--sp-3) 0 var(--sp-3) 6.5rem;

border-bottom: 1px solid var(--c-line);

text-align: right;

overflow-wrap: anywhere;

font-weight: 600;

font-size: var(--fs-sm);
}
.contact-rows dd:last-child { border-bottom: 0; padding-bottom: var(--sp-1); }
.side-block { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); }
.side-title {

position: relative;

width: fit-content;

padding-bottom: 8px;

margin-bottom: var(--sp-2);

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-md);
}
.side-title::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);
}
/* landmarks: name left, km right, ruled rows, first row clean */
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list-row {

display: flex;

align-items: baseline;

justify-content: space-between;

gap: var(--sp-3);

padding: var(--sp-2) 0;

border-top: 1px solid var(--c-line);

font-size: var(--fs-sm);
}
.side-list-row:first-child { border-top: 0; }
.side-list-meta { color: var(--c-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* map card: rounded tile + quiet caption */
.side-map-img { border-radius: var(--radius-sm); border: 1px solid var(--c-line); display: block; width: 100%; }
.side-map-addr { display: flex; align-items: flex-start; gap: 0.4rem; color: var(--c-muted); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }
.side-map-addr svg { color: var(--c-primary); flex: none; width: 0.85rem; height: 0.85rem; }
/* nearby cards: quiet inline address (not the К5 strip) */
.near-card .oc-address {

background: transparent;

border-top: 0;

padding: 0 var(--sp-4) var(--sp-3);

margin-top: calc(-1 * var(--sp-1));

color: var(--c-muted);

font-weight: 500;

font-size: var(--fs-xs);
}
/* org lib rows: ruled list in a card (3F Библиотека style) */
.org-lib .liblink-row { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); margin: 0; }
.org-lib .liblink-row:first-of-type { border-top: 0; }
.org-lib .liblink-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; }
.org-lib .liblink-date { color: var(--c-faint); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.org-lib .liblink-title { font-weight: 600; }
.org-lib .liblink-descr { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }
.org-lib .liblink-descr a { color: var(--c-muted); }
/* 3F round 3: map card without a title, socials as icon buttons */
.side-map { padding-top: var(--sp-3); }
.side-map .side-map-img { margin-top: var(--sp-1); }
.social-icon {

display: inline-grid;

place-items: center;

width: 2.1rem;

height: 2.1rem;

border: 1px solid var(--c-line);

border-radius: 8px;

color: var(--c-primary);

transition: background 0.15s ease, border-color 0.15s ease;
}
.social-icon:hover { background: var(--c-primary-tint); border-color: var(--c-primary); }
.contact-socials { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
/* the icons row needs the label column's width too — 3+ icons on one line */
.contact-rows dd.contact-socials { padding-left: var(--sp-4); }
.social-fallback { font-size: 0.6rem; font-weight: 700; }
/* ============ specs family (0025): «Занятия и секции» rows ============ */
.orgspec-list { display: grid; gap: var(--sp-2); }
.orgspec-row {

display: flex;

align-items: center;

gap: var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: var(--sp-3) var(--sp-4);

color: var(--c-ink);

transition: border-color 0.15s ease;
}
.orgspec-row:hover { border-color: var(--c-primary); text-decoration: none; }
.orgspec-row:hover .orgspec-chev { color: var(--c-primary); }
.orgspec-body { flex: 1; min-width: 0; }
.orgspec-title { display: block; font-weight: 700; font-size: var(--fs-sm); }
.orgspec-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); margin-top: 1px; }
.orgspec-kind { color: var(--c-primary-deep); font-weight: 600; }
.orgspec-chev { color: var(--c-faint); font-size: 1.1rem; line-height: 1; flex: none; }
.orgspec-detail { max-width: 46rem; }
.orgspec-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.orgspec-descr { white-space: pre-line; color: var(--c-ink); line-height: 1.6; margin: 0 0 var(--sp-4); }
.orgspec-back { margin-top: var(--sp-5); }

/* 60-facts — facts sections (D2 groundwork): set cards, label/value grids,

plural instances, and the tariff (tuition) cards. Class names facts-set /

facts-instance / facts-dl / badge-pill are load-bearing (tests). The old

[ru] value marker (.facts-fallback) was removed with docs/026 D3 —

untranslated keys hide, untranslated values render plainly, no marker. */
/* D3 polish (docs/036, 3F): the section heading sits ON the page — the

white card belongs to the CONTENT, not the whole section (the old

prospectus box wrapped heading and all). */
.facts-set {

background: transparent;

border: 0;

box-shadow: none;

padding: 0;

margin-bottom: var(--sp-6);
}
.facts-set:last-child { margin-bottom: 0; }
/* generic content card: the single-set label/value grid */
.facts-set > .facts-dl {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);
}
/* features check-grid card */
.facts-set-features .feat-grid {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-5);
}
.facts-set-title {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-lg);

line-height: var(--lh-tight);

letter-spacing: -0.01em;

margin-bottom: var(--sp-3);
}
/* signature У5в line, section-sized (docs/036 D1) */
.facts-set-title { width: fit-content; }
.facts-set-title::after {

content: "";

display: block;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);

margin-top: var(--sp-2);
}
.facts-dl { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-4); }
.facts-dl dt { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.facts-dl dd { margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.facts-dl dd p { white-space: pre-line; }
@media (min-width: 40rem) {

.facts-dl { grid-template-columns: 11rem minmax(0, 1fr); }

.facts-dl dt { padding-top: 0.1rem; }

.facts-dl dd { margin-bottom: var(--sp-2); }
}
.facts-instance {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);

margin-bottom: var(--sp-3);
}
.facts-instance:last-child { margin-bottom: 0; }
.facts-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* ---- tariff (tuition) cards ---- */
.facts-set-tariffs .tuition-grid {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-4);
}
@media (min-width: 40rem) {

.facts-set-tariffs .tuition-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}
.tariff-card {

display: flex;

flex-direction: column;

gap: var(--sp-3);

margin-bottom: 0;
}
.tariff-name {

font-family: var(--font-display);

font-weight: 700;

font-size: var(--fs-md);

line-height: var(--lh-tight);
}
.tariff-price-block { display: flex; flex-direction: column; }
.tariff-price-label {

font-size: var(--fs-xs);

font-weight: 600;

text-transform: uppercase;

letter-spacing: 0.06em;

color: var(--c-muted);

margin-bottom: var(--sp-1);
}
.tariff-price {

/* D3 (docs/036, 3F ticket): the fee in big tabular figures */

font-family: var(--font-body);

font-weight: 800;

font-size: var(--fs-xl);

line-height: 1;

color: var(--c-ink);

font-variant-numeric: tabular-nums;
}
/* lowercase presentation matches legacy's tuition-period ("за месяц") —

the DOM keeps the translation's own casing, CSS handles display */
.tariff-per { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--sp-1); text-transform: lowercase; }
/* D3 (docs/036): the tear-off ticket line — dashed rule + side notches

punched at the card's edges (paper-colored circles). */
.tariff-facts { position: relative; border-top: 2px dashed var(--c-line); padding-top: var(--sp-3); }
.tariff-facts::before,
.tariff-facts::after {

content: "";

position: absolute;

top: -9px;

width: 16px;

height: 16px;

border-radius: 50%;

background: var(--c-paper);

border: 1px solid var(--c-line);
}
.tariff-facts::before { left: calc(-1 * var(--sp-4) - 9px); }
.tariff-facts::after { right: calc(-1 * var(--sp-4) - 9px); }
.tariff-card { overflow: visible; }
/* compact ticket rows: label left / value right on one ruled line */
.tariff-facts { display: block; }
.tariff-facts dt { float: left; clear: left; font-size: var(--fs-xs); padding-top: var(--sp-2); }
.tariff-facts dd { margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); text-align: right; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tariff-facts dd:last-child { border-bottom: 0; padding-bottom: 0; }
.tariff-facts dd { font-size: var(--fs-sm); }
/* D3 (docs/036, 3F): Особенности as a check grid */
.facts-set-features .feat-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: var(--sp-1) var(--sp-5);
}
@media (max-width: 40rem) { .facts-set-features .feat-grid { grid-template-columns: 1fr; } }
.feat {

display: flex;

align-items: center;

gap: var(--sp-3);

padding: var(--sp-2) 0;

font-weight: 600;

font-size: var(--fs-sm);
}
.feat-ok {

width: 1.65rem;

height: 1.65rem;

border-radius: 50%;

background: var(--c-ok-tint, #e3f2ea);

color: var(--c-ok, #2e7d5b);

display: grid;

place-items: center;

flex: none;
}
.feat-ok svg { width: 0.9rem; height: 0.9rem; }
.feat-fallback { grid-column: 1 / -1; }
/* Поступление: one chip PER value (3F) */
.adm-dl { display: block; }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-1) 0; }
.adm-row dt { color: var(--c-muted); font-weight: 500; font-size: var(--fs-sm); }
.adm-row dd { margin: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.adm-chip {

display: inline-block;

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: var(--fs-xs);

font-weight: 700;

border-radius: var(--radius-pill);

padding: 0.3rem 0.75rem;
}

/* 62-compare.css (P6 workstream 3): the school COMPARISON matrix, the "add

to compare" affordances, and the localStorage tray. The matrix is a plain

<table> in an overflow-x wrapper with a position:sticky first column, so

the row labels stay pinned while the school columns scroll on a phone. */
.compare-h1 { margin-bottom: var(--sp-2); }
.compare-intro {

color: var(--c-muted);

margin-bottom: var(--sp-4);

max-width: 60ch;
}
.compare-note {

background: var(--c-primary-tint);

color: var(--c-primary-deep);

border-radius: var(--radius-sm);

padding: var(--sp-2) var(--sp-3);

margin-bottom: var(--sp-3);

font-size: var(--fs-sm);
}
.compare-empty {

background: var(--c-paper);

border: 1px dashed var(--c-line);

border-radius: var(--radius);

padding: var(--sp-6);

text-align: center;

color: var(--c-muted);

font-size: var(--fs-lg);
}
.compare-legend {

display: flex;

align-items: center;

gap: var(--sp-2);

color: var(--c-muted);

font-size: var(--fs-sm);

margin-bottom: var(--sp-3);
}
/* the diff marker: a small primary-colored dot */
.compare-diff-marker {

display: inline-block;

width: 8px;

height: 8px;

border-radius: 50%;

background: var(--c-primary);

flex: none;
}
.compare-scroll {

overflow-x: auto;

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

-webkit-overflow-scrolling: touch;
}
.compare-matrix {

border-collapse: collapse;

width: 100%;

min-width: 32rem;

font-size: var(--fs-sm);

/* #compare: fixed layout so a long school name can't balloon its column —


the label column takes its explicit width and the school columns divide


the rest EQUALLY (names wrap instead of widening); row alignment is


unaffected. */

table-layout: fixed;
}
.compare-matrix th,
.compare-matrix td {

border-bottom: 1px solid var(--c-line);

padding: var(--sp-3);

text-align: left;

vertical-align: top;
}
/* sticky row-label column (first column) */
.compare-corner,
.compare-row-label {

position: sticky;

left: 0;

z-index: 1;

background: var(--c-paper);

width: 11rem; /* #compare: fixed label-column width (table-layout: fixed) */

min-width: 9rem;

max-width: 12rem;

font-weight: 600;

color: var(--c-ink);

box-shadow: 1px 0 0 var(--c-line);
}
.compare-corner { background: var(--c-paper); }
.compare-row-label {

display: table-cell;
}
.compare-row-label > span:first-child { margin-right: var(--sp-1); }
/* column headers: the school name link + badge + city meta */
.compare-col-head {

background: var(--c-paper);

min-width: 10rem;

vertical-align: bottom;
}
.compare-col-name {

display: block;

font-family: var(--font-display);

font-size: var(--fs-md);

font-weight: 700;

color: var(--c-ink);

text-decoration: none;

margin-bottom: var(--sp-1);
}
.compare-col-name:hover { color: var(--c-primary); }
/* #compare: per-column "School page" button (contacts live on the org page) */
.compare-col-foot { padding: var(--sp-3) var(--sp-2); text-align: center; border-top: 2px solid var(--c-line); background: var(--c-card); vertical-align: middle; }
.compare-open-btn { display: inline-flex; width: 100%; justify-content: center; white-space: nowrap; }
.compare-col-meta {

display: flex;

align-items: center;

gap: 4px;

color: var(--c-muted);

font-size: var(--fs-xs);

margin-top: var(--sp-1);
}
.compare-col-meta svg { flex: none; }
/* rows */
.compare-row-diff > .compare-row-label,
.compare-row-diff > td { background: var(--c-primary-tint); }
.compare-row-diff > .compare-row-label { background: var(--c-primary-tint); }
.compare-row-same > td { color: var(--c-ink); }
.compare-cell-empty {

color: var(--c-faint);

text-align: center;

font-weight: 600;
}
.compare-cell-link {

color: var(--c-primary);

word-break: break-word;
}
.compare-back { margin-top: var(--sp-4); }
.compare-back-link { color: var(--c-primary); font-weight: 600; }
/* ---- the "add to compare" affordances ---- */
.org-card-compare {

display: inline-flex;

align-items: center;

gap: 4px;

font-size: var(--fs-xs);

font-weight: 600;

color: var(--c-primary-deep);

text-decoration: none;

border: 1px solid var(--c-primary);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

margin-left: auto;

white-space: nowrap;
}
.org-card-compare:hover { background: var(--c-primary-tint); }
.org-hero-compare { margin-top: var(--sp-3); }
.org-hero-compare-link {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: var(--fs-sm);

font-weight: 600;

color: var(--c-primary-deep);

text-decoration: none;

border: 1px solid var(--c-primary);

border-radius: var(--radius-pill);

padding: 6px var(--sp-4);
}
.org-hero-compare-link:hover { background: var(--c-primary-tint); }
/* ---- the sticky compare tray ---- */
.compare-tray {

position: fixed;

left: 50%;

bottom: var(--sp-3);

transform: translateX(-50%);

z-index: 40;

display: flex;

flex-wrap: wrap;

align-items: center;

gap: var(--sp-3);

max-width: calc(100vw - 2 * var(--sp-3));

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

box-shadow: var(--shadow-lift);

padding: var(--sp-2) var(--sp-4);
}
.compare-tray[hidden] { display: none; }
.compare-tray-heading {

font-weight: 700;

color: var(--c-ink);

font-size: var(--fs-sm);
}
.compare-tray-chips {

display: flex;

flex-wrap: wrap;

gap: var(--sp-2);

list-style: none;

margin: 0;

padding: 0;
}
.compare-tray-chip {

display: inline-flex;

align-items: center;

gap: 4px;

background: var(--c-primary-tint);

color: var(--c-primary-deep);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

font-size: var(--fs-xs);

max-width: 12rem;
}
.compare-tray-chip-name {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}
.compare-tray-chip-remove {

border: none;

background: none;

color: var(--c-primary-deep);

cursor: pointer;

font-size: var(--fs-md);

line-height: 1;

padding: 0 2px;
}
.compare-tray-actions {

display: inline-flex;

align-items: center;

gap: var(--sp-2);
}
.compare-tray-go { font-size: var(--fs-sm); text-decoration: none; }
.compare-tray-clear {

border: none;

background: none;

color: var(--c-muted);

cursor: pointer;

font-size: var(--fs-sm);

text-decoration: underline;
}
@media (max-width: 640px) {

.compare-tray {

left: var(--sp-2);

right: var(--sp-2);

bottom: var(--sp-2);

transform: none;

max-width: none;

border-radius: var(--radius);

justify-content: space-between;

}
}

/* 72-orgedit — the in-context org editor (P4 Task 4 Phase A, docs/026 D5):

the org page rendered in edit mode, same design system as the public

org page (50-orgpage.css/60-facts.css) plus its own edit-affordance

layer. Replaces the old key-gated /panel prototype's bare-HTML look

(70-panel.css, retired in Phase B) with real chrome + real components. */
.orgedit-toolbar {

display: flex;

align-items: flex-start;

gap: var(--sp-4);

flex-wrap: wrap;

background: var(--c-primary-tint);

border: 1px solid var(--c-primary);

border-radius: var(--radius);

padding: var(--sp-4) var(--sp-5);

margin: var(--sp-4) 0 var(--sp-6);
}
.orgedit-badge {

display: inline-flex;

align-items: center;

padding: 0.15rem var(--sp-3);

border-radius: var(--radius-pill);

background: var(--c-primary);

color: #fff;

font-size: var(--fs-xs);

font-weight: 700;

letter-spacing: 0.03em;

text-transform: uppercase;

white-space: nowrap;
}
.orgedit-toolbar-main { flex: 1; min-width: 16rem; }
.orgedit-title { margin: var(--sp-2) 0 0; }
.orgedit-title::after { display: none; } /* skip page-title's usual gold underline inside the banner */
.orgedit-public-link { align-self: center; white-space: nowrap; }
.orgedit-set {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-5);

margin-bottom: var(--sp-5);
}
.orgedit-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.orgedit-field { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 34rem; }
.orgedit-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.orgedit-field input[type="text"],
.orgedit-field select,
.orgedit-textarea {

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: var(--sp-2) var(--sp-3);

font: inherit;

background: var(--c-card);

color: var(--c-ink);
}
.orgedit-textarea { max-width: none; min-height: 8rem; resize: vertical; font-family: inherit; }
.orgedit-field input:focus,
.orgedit-field select:focus,
.orgedit-textarea:focus {

outline: 2px solid var(--c-primary);

outline-offset: 1px;

border-color: var(--c-primary);
}
.orgedit-field-error { color: var(--c-danger); font-size: var(--fs-xs); font-weight: 600; }
.orgedit-savebar { display: flex; align-items: center; gap: var(--sp-3); }
/* D2: the three-state visible save indicator (saving… / сохранено ЧЧ:ММ /

ошибка), shared by every autosave field and every instance's explicit

save. The "saving" span is the htmx-indicator target — htmx toggles

.htmx-request onto whichever element hx-indicator names (the wrapping

#id here), so both the compound (.htmx-request.htmx-indicator, when

hx-indicator points at the indicator itself) and descendant

(.htmx-request .htmx-indicator, when it's nested one level in, as it is

for the per-field autosave case) shapes are covered. */
.orgedit-savestate {

display: inline-flex;

align-items: center;

gap: var(--sp-2);

font-size: var(--fs-xs);

color: var(--c-muted);

min-height: 1.4em;
}
.orgedit-savestate-saving { display: none; font-weight: 600; color: var(--c-primary-deep); }
.htmx-request.orgedit-savestate-saving,
.htmx-request .orgedit-savestate-saving { display: inline; }
.orgedit-savestate-result { font-weight: 600; }
.orgedit-savestate-error,
.orgedit-savestate-result.is-error { color: var(--c-danger); }
/* plural sets: per-instance header (position label + remove) and the

add-instance bar under the last instance */
.orgedit-instances { display: flex; flex-direction: column; gap: var(--sp-5); }
.orgedit-instance-header {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-3);

padding-bottom: var(--sp-2);

border-bottom: 1px solid var(--c-line);
}
.orgedit-instance-label { font-weight: 700; color: var(--c-muted); font-size: var(--fs-sm); }
.orgedit-remove-btn { color: var(--c-danger); }
.orgedit-remove-btn:hover { border-color: var(--c-danger); color: var(--c-danger); }
.orgedit-addbar { display: flex; }
/* P4 follow-up Task D: the hub's title-identity strip — replaces the old

always-open title-edit card. Org-identity level, not a section, so it's

full-width and sits OUTSIDE (above) the section grid below. A single real

<a> (not a CSS-only affordance) spanning the whole row for a big, obvious

tap target, same card treatment (background/border/shadow) as a section

row so it reads as part of the same design system. */
.orgedit-identity {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);

margin: var(--sp-5) 0 0;

color: inherit;

text-decoration: none;

font-size: var(--fs-md);

transition: border-color 0.15s ease;
}
.orgedit-identity:hover,
.orgedit-identity:focus-visible { border-color: var(--c-primary); }
.orgedit-identity-cta { color: var(--c-primary-deep); font-weight: 600; white-space: nowrap; }
/* #38 rest (docs/033 Part B): the "fetch static map" card on the hub — same

card chrome as the identity strip, with the current-map preview + the fetch

button (or the muted no-coords hint). */
.orgedit-map {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);

margin: var(--sp-4) 0 0;
}
.orgedit-map-title { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-3); }
.orgedit-map-preview {

display: block;

width: 100%;

max-width: 22rem;

height: auto;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

margin-bottom: var(--sp-3);
}
.orgedit-map-form { margin: 0; }
.orgedit-map-hint { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.orgedit-map-hint-muted { color: var(--c-faint); }
.orgedit-map-notice {

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-sm);

padding: var(--sp-2) var(--sp-3);

font-size: var(--fs-sm);

margin: 0 0 var(--sp-3);
}
.orgedit-map-error {

color: #a3241b;

background: #fbe9e7;

border-radius: var(--radius-sm);

padding: var(--sp-2) var(--sp-3);

font-size: var(--fs-sm);

margin: 0 0 var(--sp-3);
}
/* #1 photo upload: the gallery manager (/edit/photos) */
.photoup-form {

display: flex;

flex-wrap: wrap;

align-items: end;

gap: var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

padding: var(--sp-4) var(--sp-5);

margin: 0 0 var(--sp-4);
}
.photoup-field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink); }
.photoup-grid {

list-style: none;

margin: 0;

padding: 0;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

gap: var(--sp-3);
}
.photoup-tile {

position: relative;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

overflow: hidden;

display: flex;

flex-direction: column;
}
.photoup-tile-main { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.photoup-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-paper); }
.photoup-caption {

font-size: var(--fs-xs);

color: var(--c-muted);

padding: var(--sp-1) var(--sp-2) 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}
.photoup-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-2); margin-top: auto; }
.photoup-btn { font-size: var(--fs-xs); padding: 2px var(--sp-2); }
.photoup-del { color: #a3241b; border: 1px solid #e6b8b2; background: transparent; }
.photoup-del:hover { background: #fbe9e7; }
.photoup-mainbadge {

display: inline-flex;

align-items: center;

font-size: var(--fs-xs);

font-weight: 600;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);
}
/* #1 follow-up: the single-photo title/description editor */
.photoedit {

display: grid;

grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);

gap: var(--sp-5);

align-items: start;
}
@media (max-width: 40rem) {

.photoedit { grid-template-columns: 1fr; }
}
.photoedit-img {

width: 100%;

height: auto;

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-paper);
}
.photoedit-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.photoedit-label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink); }
.photoedit-label input,
.photoedit-label textarea {

width: 100%;

padding: var(--sp-2) var(--sp-3);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

font: inherit;

background: var(--c-card);

color: var(--c-ink);
}
.photoedit-label textarea { resize: vertical; }
/* #2 logo upload: the current-logo block on /edit/logo */
.logoup-current {

display: flex;

align-items: center;

gap: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

padding: var(--sp-4) var(--sp-5);

margin: 0 0 var(--sp-4);
}
.logoup-img {

width: 120px;

height: auto;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

background: var(--c-paper);
}
/* #3 events editor */
.evedit-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.evedit-row {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-3);

flex-wrap: wrap;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

padding: var(--sp-3) var(--sp-4);
}
.evedit-row-past { opacity: 0.7; }
.evedit-main { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.evedit-kind {

font-size: var(--fs-xs);

font-weight: 600;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

white-space: nowrap;
}
.evedit-date { color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }
.evedit-title { font-weight: 600; color: var(--c-ink); }
.evedit-past { color: var(--c-faint); font-size: var(--fs-xs); }
.evedit-actions { display: flex; gap: var(--sp-2); flex: none; }
.evedit-form select,
.evedit-dates input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-sm); font: inherit; background: var(--c-card); color: var(--c-ink); }
.evedit-dates { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.evedit-dates > .photoedit-label { flex: 1 1 12rem; }
/* #4 address + coordinates editor */
.mapedit-form input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius-sm); font: inherit; background: var(--c-card); color: var(--c-ink); }
.mapedit-sep { border: none; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }
/* #4 verify map: the interactive Yandex map (coords-but-no-tile / just-geocoded) */
.mapedit-map { margin: 0 0 var(--sp-3); }
.mapedit-ymap {

width: 100%;

height: clamp(280px, 55vh, 460px);

border: 1px solid var(--c-line);

border-radius: var(--radius);

overflow: hidden;

background: var(--c-paper);
}
.mapedit-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* #4 geocode inline state (processing/success/error) */
.geocode-status { font-size: var(--fs-sm); }
.geocode-status:empty { display: none; }
.geocode-busy { color: var(--c-muted); }
.geocode-busy::before {

content: "";

display: inline-block;

width: 0.8em;

height: 0.8em;

margin-right: 0.4em;

border: 2px solid var(--c-line);

border-top-color: var(--c-primary);

border-radius: 50%;

vertical-align: -0.1em;

animation: geocode-spin 0.7s linear infinite;
}
.geocode-ok { color: #1f7a3d; font-weight: 600; }
.geocode-err { color: #a3241b; font-weight: 600; }
@keyframes geocode-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {

.geocode-busy::before { animation: none; }
}
/* P4 brush-ups Task 1: the hub's section-overview list — one row per fact

set, each a big tappable link to its own full-page editor (no forms live

here, so no save-state/htmx machinery, just the card + hover treatment

the rest of the design system uses for a clickable row). P4 follow-up

Task D: a 2-col grid on wider viewports (mobile-first — 1 col by

default) so the list stops reading as too sparse now the title card no

longer occupies the top of the page; same breakpoint/shape as the

org-card grid (40-catalog.css's .org-grid). */
.orgedit-hub-list {

list-style: none;

margin: var(--sp-5) 0 0;

padding: 0;

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-3);
}
@media (min-width: 40rem) {

.orgedit-hub-list { grid-template-columns: repeat(2, 1fr); }
}
.orgedit-hub-link {

display: flex;

flex-direction: column;

align-items: flex-start;

gap: var(--sp-2);

height: 100%;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);

color: inherit;

text-decoration: none;

transition: border-color 0.15s ease;
}
.orgedit-hub-link:hover,
.orgedit-hub-link:focus-visible { border-color: var(--c-primary); }
.orgedit-hub-row-title { font-weight: 700; font-size: var(--fs-lg); }
.orgedit-hub-row-plural {

margin-left: var(--sp-2);

font-weight: 600;

font-size: var(--fs-xs);

color: var(--c-muted);

text-transform: uppercase;

letter-spacing: 0.02em;
}
.orgedit-hub-row-status { color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }
/* the section page's "← Все разделы" back link (org-back's precedent,

internal/view/org.templ's OrgTabHeroBlock, reused here as a plain

margin-only wrapper since the toolbar banner above already carries the

page's visual weight). */
.orgedit-back { margin: 0 0 var(--sp-5); }
/* ================= D5 (docs/036): the 4G edit hub ================= */
.orgedit-mode-chip {

display: inline-block;

padding: 0.25rem 0.7rem;

border-radius: var(--radius-pill);

background: var(--c-primary-tint);

color: var(--c-primary-deep);

font-size: 0.7rem;

font-weight: 700;

letter-spacing: 0.08em;

text-transform: uppercase;
}
.oghub-hero {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-3) var(--sp-4);

padding: var(--sp-4) 0 var(--sp-5);

border-bottom: 1px solid var(--c-line);

margin-bottom: var(--sp-5);
}
.oghub-title {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-lg);

line-height: 1.25;

flex: 1 1 20rem;

min-width: 0;

margin: 0;
}
.oghub-rename {

display: inline-grid;

place-items: center;

width: 1.9rem;

height: 1.9rem;

margin-left: var(--sp-2);

vertical-align: -6px;

border: 1px solid var(--c-line);

border-radius: 8px;

background: var(--c-card);

color: var(--c-muted);
}
.oghub-rename:hover { border-color: var(--c-primary); color: var(--c-primary); }
.oghub-rename svg { width: 0.85rem; height: 0.85rem; }
.oghub-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
@media (min-width: 60rem) { .oghub-layout { grid-template-columns: minmax(0, 1fr) 21rem; } }
.oghub-h {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-md);

margin: 0 0 var(--sp-3);

position: relative;

width: fit-content;

padding-bottom: 10px;
}
.oghub-h::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);
}
.oghub-h small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--c-faint); margin-left: var(--sp-2); }
.oghub-group + .oghub-group { margin-top: var(--sp-6); }
.oghub-rows { display: grid; gap: var(--sp-2); }
.oghub-row {

display: flex;

align-items: center;

gap: var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: var(--sp-3) var(--sp-4);

color: var(--c-ink);

transition: border-color 0.15s ease;
}
a.oghub-row:hover { border-color: var(--c-primary); text-decoration: none; }
a.oghub-row:hover .oghub-chev { color: var(--c-primary); }
.oghub-row-soon { border-style: dashed; opacity: 0.75; }
.oghub-rbody { flex: 1; min-width: 0; }
.oghub-rname { display: block; font-weight: 700; font-size: var(--fs-sm); }
.oghub-rsub { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 1px; }
.oghub-rright { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.oghub-chev { color: var(--c-faint); font-size: 1.1rem; line-height: 1; }
.oghub-chip {

display: inline-flex;

align-items: center;

gap: 0.25rem;

border-radius: var(--radius-pill);

padding: 0.2rem 0.6rem;

font-size: 0.72rem;

font-weight: 700;

white-space: nowrap;
}
.oghub-chip-ok { background: var(--c-ok-tint, #e3f2ea); color: var(--c-ok, #2e7d5b); }
.oghub-chip-todo { background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-muted); }
.oghub-chip-soon { border: 1px dashed var(--c-line); color: var(--c-faint); background: transparent; }
.oghub-meter { width: 5.5rem; height: 6px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.oghub-meter i { display: block; height: 100%; background: var(--c-primary); border-radius: 999px; }
.oghub-meter-val { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }
.oghub-rail { display: grid; gap: var(--sp-4); }
.oghub-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);
}
.oghub-side-h {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-base);

margin: 0 0 var(--sp-3);

position: relative;

width: fit-content;

padding-bottom: 8px;
}
.oghub-side-h::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 3px;

border-radius: 999px;

background: linear-gradient(90deg, var(--c-pastel) 0%, rgba(169, 202, 219, 0) 100%);
}
.oghub-ringrow { display: flex; align-items: center; gap: var(--sp-4); }
.oghub-ringrow svg { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.oghub-ring-track { stroke: var(--c-line); }
.oghub-ring-fill { stroke: var(--c-primary); stroke-linecap: round; }
.oghub-ring-num {

transform: rotate(90deg);

transform-origin: 42px 42px;

font: 800 1.15rem var(--font-body);

fill: var(--c-ink);
}
.oghub-ring-cap { font-size: var(--fs-sm); color: var(--c-muted); }
.oghub-ring-cap b { display: block; color: var(--c-ink); }
.oghub-ring-facts { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.oghub-chk { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.oghub-chk:first-of-type { border-top: 0; }
.oghub-chk-o { width: 1rem; height: 1rem; border: 2px solid var(--c-faint); border-radius: 50%; flex: none; margin-top: 2px; }
.oghub-chk-b { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.oghub-chk-b b { font-weight: 700; }
.oghub-chk-cnt { color: var(--c-muted); font-size: 0.78rem; font-weight: 700; margin-left: var(--sp-2); font-variant-numeric: tabular-nums; }
.oghub-chk-why { display: block; color: var(--c-muted); font-size: var(--fs-xs); margin-top: 1px; }
.oghub-chk-btn { flex: none; font-size: 0.8rem; padding: 0.35rem 0.8rem; }
/* docs/039 P1: the staff contact-journal card */
.oghub-notes { scroll-margin-top: var(--sp-4); }
.oghub-note-form { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.oghub-note-form textarea {

width: 100%;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: var(--sp-2) var(--sp-3);

font: 400 var(--fs-sm) var(--font-body);

color: var(--c-ink);

resize: vertical;
}
.oghub-note-form textarea:focus { outline: none; border-color: var(--c-primary); }
.oghub-note-form .btn { justify-self: start; font-size: 0.8rem; padding: 0.35rem 0.8rem; }
.oghub-note-empty { color: var(--c-faint); font-size: var(--fs-xs); margin: 0; }
.oghub-note { padding: var(--sp-3) 0 0; margin-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.oghub-note-body { margin: 0; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.oghub-note-meta { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-faint); }
/* notes card header: the all-notes journal link */
.oghub-notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oghub-notes-all { font-size: 12px; white-space: nowrap; }
.oghub-note-meta a { color: inherit; }
.oghub-note-meta a:hover { color: var(--c-primary); }

/* 74-welcome.css — /user/welcome authed landing + the dev testing dashboard

(view.UserWelcomePage). Dev-only surface; styling stays light and reuses the

token palette + the facts-set-title heading treatment the public/edit pages

share, so it reads as the same product. */
.welcome .welcome-block {

margin-top: var(--space-6, 1.5rem);
}
.welcome-staff-badge {

display: inline-block;

margin-left: var(--space-2, 0.5rem);

padding: 0.1em 0.5em;

font-size: 0.7rem;

font-weight: 700;

letter-spacing: 0.05em;

color: var(--c-primary-deep, #0d5471);

background: var(--c-primary-tint, #e2eff5);

border-radius: 0.25rem;

vertical-align: middle;
}
.welcome-dashboard .welcome-group {

margin-top: var(--space-4, 1rem);
}
.welcome-group-heading {

margin: 0 0 var(--space-2, 0.5rem);

font-size: 0.95rem;

font-weight: 700;

color: var(--c-ink, #1d3440);
}
.welcome-linklist {

list-style: none;

margin: 0;

padding: 0;
}
.welcome-linklist li {

padding: 0.2rem 0;

line-height: 1.5;
}
.welcome-linklist a {

font-weight: 600;
}
.welcome-note {

color: var(--c-muted, #6a7a83);

font-size: 0.85rem;
}
/* P4 Batch C Task 6: the staff-only "N новых заявок" hint into the

moderation console (brief §6) — just spacing, the link itself already

wears btn/btn-secondary. */
.welcome-staff-hint {

margin-top: var(--sp-3, 0.75rem);
}
/* Hero is .page-hero-band (20-layout); body is freestanding content below. */
.welcome-body { max-width: none; }
/* #5 dashboard: school launch cards, staff tools */
.welcome-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.welcome-schools { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.welcome-school {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);
}
.welcome-school-name { display: inline-block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--c-ink); text-decoration: none; margin-bottom: var(--sp-2); }
.welcome-school-name:hover { color: var(--c-primary); }
.welcome-school-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.welcome-tools {

list-style: none;

margin: var(--sp-3) 0 0;

padding: 0;

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-3);
}
@media (min-width: 40rem) {

.welcome-tools { grid-template-columns: repeat(2, 1fr); }
}
.welcome-tool {

display: flex;

align-items: baseline;

justify-content: space-between;

gap: var(--sp-3);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-4);

text-decoration: none;

transition: border-color 0.15s ease;
}
.welcome-tool:hover { border-color: var(--c-primary); }
.welcome-tool-label { font-weight: 600; color: var(--c-ink); }
.welcome-tool-hint {

font-size: var(--fs-xs);

font-weight: 700;

color: var(--c-primary-deep);

background: var(--c-primary-tint);

border-radius: var(--radius-pill);

padding: 2px var(--sp-2);

white-space: nowrap;
}
.welcome-devlink { margin-top: var(--sp-5); }
/* ================= D6 (docs/036): 5H/5G/6C cabinet ================= */
/* D6: the cabinet is a DASHBOARD, not an auth card — full content width

(overrides .user-auth-page's 30rem auth-form constraint). */
.user-auth-page.welcome { max-width: none; }
.welcome-5h { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
@media (min-width: 60rem) { .welcome-5h { grid-template-columns: minmax(0, 1fr) 20rem; } }
.welcome-school-id { display: flex; gap: var(--sp-4); min-width: 0; }
.welcome-school-thumb {

width: 8rem;

height: 5.5rem;

flex: none;

object-fit: cover;

border-radius: var(--radius-sm);

background: var(--c-primary-tint);
}
.welcome-rph-empty { display: inline-block; background: linear-gradient(135deg, var(--c-primary-tint), #eef4f6); }
.welcome-school-info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.welcome-school-name {

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

overflow-wrap: anywhere;
}
.welcome-school-meterrow { display: flex; align-items: center; gap: var(--sp-2); max-width: 18rem; }
.welcome-rmeter { flex: 1; min-width: 4rem; height: 6px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
.welcome-rmeter i { display: block; height: 100%; background: var(--c-primary); border-radius: 999px; }
.welcome-rval { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.welcome-rmeta { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.welcome-school-actions { border-top: 1px solid var(--c-line); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.welcome-school-public { margin-left: auto; }
/* «Что дальше» rail */
.welcome-todos { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); }
.welcome-todo { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.welcome-todo:first-of-type { border-top: 0; }
.welcome-todo-o { width: 1rem; height: 1rem; border: 2px solid var(--c-faint); border-radius: 50%; flex: none; margin-top: 3px; }
.welcome-todo-text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.welcome-todo-text b { color: var(--c-ink); overflow-wrap: anywhere; }
.welcome-todo-go { flex: none; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
/* 5G roster (networks) */
.welcome-sumtiles { display: grid; grid-template-columns: repeat(2, minmax(8rem, 12rem)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.welcome-sumtile { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); }
.welcome-sum-v { display: block; font: 800 1.5rem var(--font-body); color: var(--c-primary-deep); font-variant-numeric: tabular-nums; }
.welcome-sum-l { font-size: var(--fs-xs); color: var(--c-muted); }
.welcome-roster { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.welcome-rrow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.welcome-rrow:first-child { border-top: 0; }
.welcome-rph { width: 4.5rem; height: 3rem; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--c-primary-tint); }
.welcome-rid { flex: 1 1 12rem; min-width: 0; }
.welcome-rname {

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

overflow-wrap: anywhere;

font-weight: 700;

font-size: var(--fs-sm);

color: var(--c-ink);
}
.welcome-rrow .welcome-rmeter { flex: 0 1 7rem; }
.welcome-ractions { display: inline-flex; align-items: center; gap: var(--sp-3); margin-left: auto; flex-wrap: wrap; }
.welcome-rlink { font-size: var(--fs-xs); font-weight: 600; }
/* ============ 6C command deck (docs/036) ============ */
.welcome-pult {

margin-top: var(--sp-5);

background: linear-gradient(135deg, #eaf3f7, #ddedf5);

border: 1px solid #c7dde9;

border-radius: 12px;

box-shadow: var(--shadow-card);

padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.welcome-pult-h {

font-family: var(--font-display);

font-weight: 600;

font-size: var(--fs-lg);

margin: 0 0 var(--sp-3);

color: var(--c-ink);
}
.welcome-pult-form {

display: flex;

align-items: center;

gap: var(--sp-2);

background: #fff;

border: 1px solid #b9d3e0;

border-radius: 10px;

padding: 0.35rem 0.35rem 0.35rem 1rem;

box-shadow: 0 1px 2px rgba(22, 48, 60, 0.04);
}
.welcome-pult-form > svg { color: var(--c-faint); flex: none; width: 1.25rem; height: 1.25rem; }
.welcome-pult-form input {

flex: 1;

min-width: 0;

border: 0;

background: none;

font: 500 1.05rem/1.3 var(--font-body);

color: var(--c-ink);

padding: 0.65rem 0;
}
.welcome-pult-form input:focus { outline: none; }
.welcome-pult-form:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(20, 108, 142, 0.15); }
.welcome-pult-form .btn { flex: none; }
.welcome-pult-recent {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2);

margin: var(--sp-3) 0 0;
}
.welcome-pult-recent-label { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.welcome-chip {

display: inline-flex;

align-items: center;

gap: 0.45rem;

max-width: 14rem;

background: #fff;

border: 1px solid #c7dde9;

border-radius: 999px;

padding: 0.25rem 0.75rem 0.25rem 0.3rem;

font: 600 0.8125rem/1.2 var(--font-body);

color: var(--c-ink);

text-decoration: none;
}
.welcome-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.welcome-chip-init {

width: 1.55rem;

height: 1.55rem;

flex: none;

border-radius: 50%;

background: var(--c-primary-tint);

color: var(--c-primary-deep);

display: grid;

place-items: center;

font: 700 0.75rem/1 var(--font-body);
}
.welcome-chip-nm {

min-width: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}
/* KPI tiles */
.welcome-kpi {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-3);

margin-top: var(--sp-4);
}
@media (min-width: 50rem) {

.welcome-kpi { grid-template-columns: repeat(3, 1fr); }
}
.welcome-kpi-tile {

display: flex;

align-items: center;

gap: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);

text-decoration: none;

color: var(--c-ink);

transition: border-color 0.15s ease;
}
.welcome-kpi-tile:hover { border-color: var(--c-primary); }
.welcome-kpi-num {

font: 800 2rem/1 var(--font-body);

color: var(--c-primary-deep);

font-variant-numeric: tabular-nums;

min-width: 1.6em;

text-align: center;
}
.welcome-kpi-txt { min-width: 0; flex: 1; }
.welcome-kpi-txt b { display: block; font: 700 0.95rem/1.3 var(--font-body); }
.welcome-kpi-txt span { display: block; font: 500 0.78rem/1.35 var(--font-body); color: var(--c-muted); }
.welcome-kpi-arr { color: var(--c-faint); font-size: 1.1rem; flex: none; }
.welcome-kpi-tile:hover .welcome-kpi-arr { color: var(--c-primary); }
/* 6C two-column: notes+recent | journal */
.welcome-6c-grid {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-5);

margin-top: var(--sp-5);

align-items: start;
}
@media (min-width: 60rem) {

.welcome-6c-grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); }
}
.welcome-6c-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.welcome-panel {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);
}
.welcome-empty {

margin: var(--sp-2) 0 0;

color: var(--c-muted);

font-size: var(--fs-sm);

line-height: 1.45;
}
/* journal rail */
.welcome-log {

display: flex;

align-items: flex-start;

gap: 0.55rem;

padding: 0.65rem 0;

border-top: 1px solid var(--c-line);

font: 500 0.84rem/1.4 var(--font-body);

color: var(--c-ink);

text-decoration: none;
}
.welcome-log:first-of-type { border-top: 0; }
a.welcome-log:hover { color: var(--c-primary); }
.welcome-log-body { min-width: 0; flex: 1; }
.welcome-log-body b {

display: inline;

font-weight: 700;

overflow-wrap: anywhere;
}
.welcome-log-act { color: var(--c-muted); font-weight: 500; }
a.welcome-log:hover .welcome-log-act { color: var(--c-primary); }
.welcome-log-when {

margin-left: auto;

color: var(--c-faint);

font-size: 0.75rem;

white-space: nowrap;

padding-left: 0.5rem;
}
.welcome-role {

width: 0.55rem;

height: 0.55rem;

border-radius: 50%;

flex: none;

margin-top: 0.35rem;

background: #9aabB4;
}
.welcome-role-site { background: #8fa1aa; }
.welcome-role-org { background: #2e7d5b; }
.welcome-role-net { background: #146c8e; }
.welcome-log-legend {

display: flex;

flex-wrap: wrap;

gap: var(--sp-3);

margin-top: var(--sp-3);

padding-top: var(--sp-3);

border-top: 1px solid var(--c-line);

font-size: 0.72rem;

color: var(--c-muted);
}
.welcome-log-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.welcome-log-legend .welcome-role { margin-top: 0; }
/* tools strip */
.welcome-tools-sect { margin-top: var(--sp-5); }
.welcome-tools-grid {

display: grid;

grid-template-columns: 1fr;

gap: var(--sp-3);

margin-top: var(--sp-3);
}
@media (min-width: 40rem) {

.welcome-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {

.welcome-tools-grid { grid-template-columns: repeat(4, 1fr); }
}
.welcome-tool-mini {

display: flex;

flex-direction: column;

gap: 0.2rem;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-4);

text-decoration: none;

color: var(--c-ink);

transition: border-color 0.15s ease;
}
a.welcome-tool-mini:hover { border-color: var(--c-primary); }
.welcome-tool-mini-title { font-weight: 700; font-size: var(--fs-sm); }
.welcome-tool-mini-sub { font-size: var(--fs-xs); color: var(--c-muted); }
.welcome-tool-mini-soon {

border-style: dashed;

box-shadow: none;

background: transparent;

color: var(--c-muted);

opacity: 0.85;
}
.welcome-tool-mini-soon .welcome-tool-mini-sub {

color: var(--c-faint);

border: 1px dashed var(--c-line);

border-radius: var(--radius-pill);

padding: 1px 0.45rem;

width: fit-content;
}
/* legacy tool list (kept for any residual markup) */
.welcome-tool-soon { border-style: dashed; opacity: 0.75; }
.welcome-tool-soon:hover { border-color: var(--c-line); }
.welcome-tool-hint-soon { background: transparent; border: 1px dashed var(--c-line); color: var(--c-faint); }
/* docs/039 P1: «Последние заметки» on the staff cabinet */
.welcome-note { display: block; padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); color: var(--c-ink); }
.welcome-note:first-of-type { border-top: 0; }
.welcome-note:hover .welcome-note-body { color: var(--c-primary-deep); }
.welcome-note-body { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); overflow-wrap: anywhere; }
.welcome-note-meta { display: block; font-size: var(--fs-xs); color: var(--c-faint); margin-top: 2px; }
.welcome-note-meta b { font-weight: 600; color: var(--c-muted); }
.welcome-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.welcome-panel-more { font-size: var(--fs-xs); white-space: nowrap; }

/* 76-staff — the staff moderation console (P4 Batch C Task 6): org_requests

triage queue + detail + claim/grant-org_admin flow. Authed-staff-only,

noindex; reuses 30-components' btn/badge + 50-orgpage's form-row/

form-error + 48-auth's auth-notice, and mirrors 72-orgedit's toolbar-

banner recipe under its own staff-* namespace (docs/026 D7: same visual

language, not a new one). */
/* Full content width like the 6C cabinet — not a narrow form column.

Hero lives in .page-hero-band (20-layout); body is freestanding content. */
.staff-console { max-width: none; }
.staff-body { max-width: none; }
.staff-back { margin: 0 0 var(--sp-5); }
/* ---- filter tabs ---- */
.staff-tabs {

list-style: none;

display: flex;

flex-wrap: wrap;

gap: var(--sp-2);

margin: 0 0 var(--sp-5);

padding: 0;
}
.staff-tab {

display: inline-flex;

align-items: center;

gap: var(--sp-1);

padding: var(--sp-1) var(--sp-3);

border-radius: var(--radius-pill);

border: 1px solid var(--c-line);

background: var(--c-card);

color: var(--c-muted);

font-size: var(--fs-sm);

font-weight: 600;
}
a.staff-tab:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }
.staff-tab-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.staff-tab-count { font-weight: 700; opacity: 0.8; }
/* ---- queue list ---- */
.staff-queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.staff-queue-link {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-4);

color: inherit;

text-decoration: none;

transition: border-color 0.15s ease;
}
.staff-queue-link:hover, .staff-queue-link:focus-visible { border-color: var(--c-primary); }
.staff-queue-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.staff-queue-org { font-weight: 700; }
.staff-queue-meta { color: var(--c-muted); font-size: var(--fs-sm); }
.staff-queue-unresolved { color: var(--c-danger); font-weight: 500; font-size: var(--fs-xs); }
.staff-queue-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); white-space: nowrap; }
.staff-queue-date { color: var(--c-faint); font-size: var(--fs-xs); }
/* ---- status badge ---- */
.staff-status-badge {

display: inline-flex;

align-items: center;

padding: 0.1rem var(--sp-3);

border-radius: var(--radius-pill);

font-size: var(--fs-xs);

font-weight: 600;

white-space: nowrap;
}
.staff-status-new { background: var(--c-primary-tint); color: var(--c-primary-deep); }
.staff-status-accept { background: #e3f3e6; color: #226a35; }
.staff-status-decline { background: #f8e3e1; color: var(--c-danger); }
.staff-status-cancel { background: var(--c-paper); color: var(--c-muted); border: 1px solid var(--c-line); }
/* ---- detail page ---- */
.staff-detail-card { margin-bottom: var(--sp-5); }
.staff-detail-grid {

display: grid;

grid-template-columns: auto 1fr;

gap: var(--sp-2) var(--sp-4);

margin: 0;
}
.staff-detail-grid dt { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 600; }
.staff-detail-grid dd { margin: 0; }
.staff-triage-form { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.staff-grant-card .form-row { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); max-width: 26rem; margin-bottom: var(--sp-3); }
/* ---- translation console (P4 Batch C Task 7, docs/026 D3) ----

st-* cards: kind/code/status head + RU/target language lines. Not a raw

label dump — same card language as staff-queue-link / welcome rows. */
.staff-scream { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-4); color: var(--c-ink); }
.staff-scream-count { color: var(--c-danger); font-weight: 800; font-size: 1.3em; }
.staff-translate-disabled { color: var(--c-muted); margin: 0 0 var(--sp-4); }
.staff-translate-all { margin: 0 0 var(--sp-5); }
/* ---- view toggle + approved scream (P4 follow-up C) ---- */
.staff-view-tabs { margin-top: calc(-1 * var(--sp-3)); }
.staff-scream-approved { font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); margin: 0 0 var(--sp-2); }
.staff-scream-count-approved { color: #226a35; font-weight: 800; font-size: 1.3em; }
.staff-scream-gap { margin: 0 0 var(--sp-2); color: var(--c-muted); }
.staff-translate-latency-note { margin: 0 0 var(--sp-5); color: var(--c-muted); }
/* ---- set groups ---- */
.st-group { margin: 0 0 var(--sp-6); }
.st-group:last-child { margin-bottom: 0; }
.st-group-head {

display: flex;

align-items: baseline;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-3);

margin: 0 0 var(--sp-3);

padding-bottom: var(--sp-2);

border-bottom: 1px solid var(--c-line);
}
.st-group-title {

margin: 0;

font-family: var(--font-display);

font-size: var(--fs-md);

font-weight: 600;

color: var(--c-ink);

line-height: var(--lh-tight);
}
.st-group-code {

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

font-size: var(--fs-xs);

color: var(--c-faint);

background: var(--c-paper);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: 0.1rem 0.45rem;
}
.st-list {

list-style: none;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

gap: var(--sp-3);
}
/* ---- translation key card ---- */
.st-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-4);

display: flex;

flex-direction: column;

gap: var(--sp-3);
}
.st-card-ok { border-color: #cfe8d4; }
.st-card-ok:not(.is-editing) { background: linear-gradient(180deg, #fbfefc 0%, var(--c-card) 2.5rem); }
.st-card-head {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2);

min-width: 0;
}
.st-kind {

display: inline-flex;

align-items: center;

padding: 0.12rem 0.55rem;

border-radius: var(--radius-pill);

font-size: var(--fs-xs);

font-weight: 700;

letter-spacing: 0.01em;

background: var(--c-primary-tint);

color: var(--c-primary-deep);

white-space: nowrap;
}
.st-code {

flex: 1 1 8rem;

min-width: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

font-size: var(--fs-xs);

color: var(--c-faint);

background: transparent;

border: 0;

padding: 0;
}
.st-status {

display: inline-flex;

align-items: center;

padding: 0.12rem 0.55rem;

border-radius: var(--radius-pill);

font-size: var(--fs-xs);

font-weight: 600;

white-space: nowrap;

margin-left: auto;
}
.st-status-ok { background: #e3f3e6; color: #226a35; }
.st-status-draft { background: var(--c-gold-tint); color: var(--c-gold-deep); }
.st-status-miss { background: #f8e3e1; color: var(--c-danger); }
.st-edit-btn {

flex-shrink: 0;

padding: 0.25rem 0.7rem;

font-size: var(--fs-xs);

font-weight: 600;
}
/* When status + edit both sit on the right, keep status left of the button. */
.st-card-head .st-status + .st-edit-btn { margin-left: 0; }
.st-card-head:has(.st-edit-btn) .st-status { margin-left: auto; }
/* ---- RU / target language lines ---- */
.st-pair {

display: flex;

flex-direction: column;

gap: var(--sp-2);

min-width: 0;
}
.st-line {

display: flex;

align-items: flex-start;

gap: var(--sp-3);

min-width: 0;
}
.st-line-edit { align-items: center; }
.st-lang {

flex: 0 0 auto;

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 2.1rem;

padding: 0.15rem 0.4rem;

border-radius: var(--radius-sm);

font-size: 0.7rem;

font-weight: 800;

letter-spacing: 0.04em;

line-height: 1.2;

background: var(--c-paper);

color: var(--c-muted);

border: 1px solid var(--c-line);
}
.st-lang-target {

background: var(--c-primary-tint);

color: var(--c-primary-deep);

border-color: #c5dce8;
}
.st-text {

flex: 1 1 auto;

min-width: 0;

color: var(--c-muted);

font-size: var(--fs-sm);

line-height: var(--lh-body);

padding-top: 0.1rem;
}
.st-text-strong {

color: var(--c-ink);

font-weight: 600;

font-size: var(--fs-base);
}
/* ---- approve / edit form ---- */
.st-form { margin: 0; min-width: 0; }
.st-form-edit { display: none; }
.st-input {

flex: 1 1 12rem;

min-width: 0;

padding: 0.45rem 0.7rem;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

font: inherit;

font-size: var(--fs-sm);

color: var(--c-ink);

background: var(--c-card);

transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.st-input:focus {

outline: none;

border-color: var(--c-primary);

box-shadow: 0 0 0 3px var(--c-primary-tint);
}
.st-save { flex-shrink: 0; white-space: nowrap; }
/* Edit mode: hide read pair + Изменить; show form (JS toggles .is-editing). */
.staff-translate-row-approved .staff-translate-edit-form { display: none; }
.staff-translate-row-approved.is-editing .staff-translate-edit-form { display: block; }
.staff-translate-row-approved.is-editing .st-pair-read { display: none; }
.staff-translate-row-approved.is-editing .staff-translate-edit-toggle { display: none; }
.staff-translate-row-approved.is-editing {

border-color: var(--c-primary);

box-shadow: var(--shadow-card), 0 0 0 1px var(--c-primary-tint);
}
@media (max-width: 40rem) {

.st-line-edit { flex-wrap: wrap; }

.st-line-edit .st-lang { align-self: flex-start; }

.st-input { flex-basis: 100%; }

.st-card-head .st-status { margin-left: 0; }

.st-card-head:has(.st-edit-btn) .st-status { margin-left: 0; }

.st-edit-btn { margin-left: auto; }
}
/* ---- landings console (/staff/landings + detail) — sl-* ----

Create form was an unstyled inline label pile (way/slug wrap chaos).

Cards + labeled field grid; list is row cards; detail reuses same

field language for per-lang SEO copy. Shared table class kept for /staff/ads. */
.sl-card {

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4) var(--sp-5);

margin: 0 0 var(--sp-5);
}
.sl-card-head { margin: 0 0 var(--sp-4); }
.sl-card-head-row {

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: var(--sp-3);

flex-wrap: wrap;
}
.sl-card-title {

margin: 0 0 var(--sp-1);

font-family: var(--font-display);

font-size: var(--fs-md);

font-weight: 600;

color: var(--c-ink);

line-height: var(--lh-tight);
}
.sl-card-sub {

margin: 0;

color: var(--c-muted);

font-size: var(--fs-sm);

line-height: var(--lh-body);

max-width: 42rem;
}
.sl-card-sub code,
.sl-hint code {

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

font-size: 0.92em;

background: var(--c-paper);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: 0 0.3em;
}
/* create + copy forms */
.sl-form { margin: 0; }
.sl-fields {

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: var(--sp-4);

margin: 0 0 var(--sp-4);
}
.sl-form-copy {

display: flex;

flex-direction: column;

gap: var(--sp-3);

max-width: 40rem;
}
.sl-field {

display: flex;

flex-direction: column;

gap: var(--sp-1);

min-width: 0;

font-size: var(--fs-sm);
}
.sl-label {

font-weight: 700;

color: var(--c-ink);

font-size: var(--fs-sm);
}
.sl-hint {

color: var(--c-faint);

font-size: var(--fs-xs);

line-height: 1.35;
}
.sl-input {

width: 100%;

box-sizing: border-box;

padding: 0.5rem 0.7rem;

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

font: inherit;

font-size: var(--fs-sm);

color: var(--c-ink);

background: var(--c-card);

transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sl-form-create .sl-input {

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

font-size: var(--fs-sm);
}
.sl-input:focus {

outline: none;

border-color: var(--c-primary);

box-shadow: 0 0 0 3px var(--c-primary-tint);
}
.sl-textarea {

min-height: 6rem;

resize: vertical;

line-height: var(--lh-body);

font-family: inherit;
}
.sl-actions {

display: flex;

flex-wrap: wrap;

align-items: center;

gap: var(--sp-2) var(--sp-3);
}
.sl-form-error {

margin: 0;

flex: 1 1 12rem;

min-width: 0;

font-size: var(--fs-sm);

line-height: var(--lh-body);
}
.sl-gate { margin: 0; }
.sl-empty { margin: 0; }
.sl-back { margin: 0 0 var(--sp-4); }
/* list rows */
.sl-list-wrap { margin: 0; }
.sl-list-head {

display: flex;

align-items: baseline;

gap: var(--sp-2);

margin: 0 0 var(--sp-3);
}
.sl-list-count {

font-size: var(--fs-sm);

font-weight: 700;

color: var(--c-faint);

font-variant-numeric: tabular-nums;
}
.sl-list {

list-style: none;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

gap: var(--sp-2);
}
.sl-row {

display: flex;

align-items: center;

justify-content: space-between;

gap: var(--sp-4);

flex-wrap: wrap;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-3) var(--sp-4);
}
.sl-row-main {

display: flex;

flex-direction: column;

gap: var(--sp-1);

min-width: 0;
}
.sl-row-city {

font-weight: 700;

color: var(--c-ink);

font-size: var(--fs-base);
}
.sl-row-keys {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-1) var(--sp-2);

min-width: 0;
}
.sl-row-eq { color: var(--c-faint); font-weight: 600; }
.sl-code {

font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

font-size: var(--fs-xs);

color: var(--c-muted);

background: var(--c-paper);

border: 1px solid var(--c-line);

border-radius: var(--radius-sm);

padding: 0.1rem 0.4rem;

word-break: break-all;
}
.sl-code-facet { color: var(--c-primary-deep); border-color: #c5dce8; background: var(--c-primary-tint); }
.sl-row-side {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-2) var(--sp-3);

margin-left: auto;
}
.sl-count {

font-weight: 700;

font-variant-numeric: tabular-nums;

color: var(--c-ink);

white-space: nowrap;
}
.sl-count-label {

font-weight: 500;

color: var(--c-faint);

font-size: var(--fs-xs);
}
.sl-open {

flex-shrink: 0;

padding: 0.3rem 0.75rem;

font-size: var(--fs-xs);

font-weight: 600;

text-decoration: none;
}
/* detail identity / preview / lang */
.sl-identity-keys {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-1) var(--sp-2);

margin-top: var(--sp-2);
}
.sl-meta {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));

gap: var(--sp-3) var(--sp-5);

margin: 0 0 var(--sp-4);
}
.sl-meta-item { margin: 0; }
.sl-meta-item dt {

margin: 0 0 var(--sp-1);

font-size: var(--fs-xs);

font-weight: 700;

color: var(--c-faint);

text-transform: uppercase;

letter-spacing: 0.04em;
}
.sl-meta-item dd { margin: 0; color: var(--c-ink); }
.sl-gen-title {

margin: 0 0 var(--sp-2);

font-weight: 700;

color: var(--c-ink);

font-size: var(--fs-base);
}
.sl-gen-intro {

margin: 0;

color: var(--c-muted);

font-size: var(--fs-sm);

line-height: var(--lh-body);

max-width: 40rem;
}
.sl-liveurl {

margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);

font-size: var(--fs-xs);

word-break: break-all;
}
.sl-liveurl a { color: var(--c-muted); }
/* staff tables (ads + any remaining landing-table consumers) */
.staff-landing-table {

width: 100%;

border-collapse: collapse;

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

overflow: hidden;

font-size: var(--fs-sm);
}
.staff-landing-table th,
.staff-landing-table td {

text-align: left;

padding: var(--sp-2) var(--sp-3);

border-bottom: 1px solid var(--c-line);

vertical-align: top;
}
.staff-landing-table th {

font-size: var(--fs-xs);

font-weight: 700;

color: var(--c-faint);

text-transform: uppercase;

letter-spacing: 0.03em;

background: var(--c-paper);
}
.staff-landing-table tr:last-child td { border-bottom: 0; }
.staff-landing-table tbody tr:hover td { background: #fafcfd; }
@media (max-width: 48rem) {

.sl-fields { grid-template-columns: 1fr; gap: var(--sp-3); }

.sl-row { align-items: flex-start; }

.sl-row-side { margin-left: 0; width: 100%; }
}
/* ============ ADM polish (2026-07-22): /staff/ads campaign cards ============ */
.adcon-stats {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: var(--sp-3) var(--sp-6);

padding: var(--sp-3) var(--sp-4);

border: 1px solid var(--c-line);

border-radius: var(--radius);

background: var(--c-card);

box-shadow: var(--shadow-card);

margin-bottom: var(--sp-3);
}
.adcon-stat { display: flex; align-items: baseline; gap: var(--sp-2); }
.adcon-stat-v { font: 800 1.5rem var(--font-body); color: var(--c-primary-deep); font-variant-numeric: tabular-nums; }
.adcon-stat-l { font-size: var(--fs-xs); color: var(--c-muted); max-width: 9rem; }
.adcon-stat-l i { font-style: normal; color: var(--c-faint); display: block; }
.adcon-stats-day { margin-left: auto; font-size: var(--fs-xs); color: var(--c-faint); }
.adcon-caveat { color: var(--c-muted); font-size: var(--fs-xs); margin: 0 0 var(--sp-4); max-width: 62rem; }
.adcon-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 60rem) { .adcon-grid { grid-template-columns: 1fr 1fr; } }
.adcon-card {

display: flex;

gap: var(--sp-4);

background: var(--c-card);

border: 1px solid var(--c-line);

border-radius: var(--radius);

box-shadow: var(--shadow-card);

padding: var(--sp-4);
}
.adcon-media {

width: 7.5rem;

flex: none;

border-radius: var(--radius-sm);

overflow: hidden;

background: var(--c-paper);

border: 1px solid var(--c-line);

display: grid;

place-items: center;

align-self: flex-start;
}
.adcon-media img { display: block; width: 100%; height: auto; }
.adcon-media-empty { font-size: var(--fs-xs); color: var(--c-faint); padding: var(--sp-5) var(--sp-2); }
.adcon-body { flex: 1; min-width: 0; }
.adcon-partner { font: 700 var(--fs-md) var(--font-display); margin: 0 0 var(--sp-2); }
.adcon-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.adcon-chip {

display: inline-flex;

align-items: center;

border: 1px solid var(--c-line);

border-radius: var(--radius-pill);

background: var(--c-paper);

color: var(--c-muted);

font-size: 0.72rem;

font-weight: 600;

padding: 0.2rem 0.6rem;

white-space: nowrap;
}
.adcon-chip-price { color: var(--c-primary-deep); background: var(--c-primary-tint); border-color: transparent; }
.adcon-mode {

display: inline-flex;

align-items: center;

border-radius: var(--radius-pill);

font-size: 0.72rem;

font-weight: 700;

padding: 0.2rem 0.6rem;

white-space: nowrap;
}
.adcon-mode-exclusive { background: var(--c-primary-deep); color: #fff; }
.adcon-mode-rotation { background: var(--c-primary-tint); color: var(--c-primary-deep); }
.adcon-mode-fallback { border: 1px dashed var(--c-line); color: var(--c-faint); background: transparent; }
.adcon-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-3); }
.adcon-count { font-size: var(--fs-xs); color: var(--c-muted); }
.adcon-count b { font: 800 1.25rem var(--font-body); color: var(--c-ink); font-variant-numeric: tabular-nums; margin-right: 0.3rem; }
.adcon-count i { font-style: normal; color: var(--c-faint); }
.adcon-mark {

margin: 0;

padding-top: var(--sp-2);

border-top: 1px solid var(--c-line);

font-size: 0.68rem;

line-height: 1.4;

color: var(--c-faint);

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;
}
.adcon-mark-missing { color: var(--c-danger); font-weight: 700; }
/* the destructive triage action reads as destructive */
.staff-btn-danger { color: var(--c-danger); border-color: rgba(179, 64, 58, 0.4); }
.staff-btn-danger:hover { background: #fbf0ee; border-color: var(--c-danger); color: var(--c-danger); }
/* ---- ads write side (docs/039 P2): adf-* ---- */
.adf-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.adf-toolbar a { text-decoration: none; }
.adf-section-title { font-size: 17px; font-weight: 700; margin: 26px 0 12px; }
.adf-card {

background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px;

padding: 16px 18px; margin: 0 0 18px;
}
.adf-card-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.adf-form { display: flex; flex-direction: column; gap: 12px; }
.adf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adf-label { font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft); }
.adf-label i { font-style: normal; font-weight: 400; color: var(--c-muted); }
.adf-select { appearance: auto; }
.adf-actions { display: flex; gap: 10px; }
.adf-notice { color: var(--c-primary-deep); font-size: 13.5px; margin: 0; }
.adf-hint { color: var(--c-muted); font-size: 12.5px; margin: 10px 0 0; }
.adf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.adf-rows { display: flex; flex-direction: column; gap: 10px; }
.adf-row {

display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;

background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 16px;
}
.adf-row-main { min-width: 0; }
.adf-row-name { font-weight: 700; text-decoration: none; }
.adf-row-sub { display: block; color: var(--c-muted); font-size: 12.5px; }
.adf-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.adf-status { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.adf-status-on { background: #e8f2ec; color: #2c6e49; }
.adf-status-planned { background: #edf3f7; color: var(--c-primary-deep); }
.adf-status-off { background: #f1f1f1; color: var(--c-muted); }
.adf-edit { font-size: 13px; }
.adf-table-wrap { overflow-x: auto; }
.adf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; }
.adf-table th, .adf-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--c-line); }
.adf-table thead th { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.adf-table tbody tr:last-child td { border-bottom: 0; }
.adf-rates { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.adf-rates th, .adf-rates td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--c-line); }
.adf-rates thead th { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.adf-rates tbody tr:last-child th, .adf-rates tbody tr:last-child td { border-bottom: 0; }
.adf-rates-edit td .sl-input { max-width: 140px; }
.adf-banner {

display: flex; gap: 14px; align-items: flex-start; padding: 12px 0;

border-top: 1px solid var(--c-line);
}
.adf-banner-media { flex: 0 0 180px; }
.adf-banner-media img { max-width: 180px; max-height: 120px; border-radius: 8px; border: 1px solid var(--c-line); display: block; }
.adf-banner-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; flex: 1; }
.adf-upload { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; border-top: 1px solid var(--c-line); padding-top: 14px; margin-top: 4px; }
.adf-grow { flex: 1 1 220px; }
@media (max-width: 900px) {

.adf-cols { grid-template-columns: 1fr; }

.adf-grid { grid-template-columns: 1fr; }
}
/* ---- /staff/notes: the all-notes journal + note pages (stn-*) ---- */
.stn-list { display: flex; flex-direction: column; }
.stn-row { padding: 12px 2px; border-bottom: 1px solid var(--c-line); }
.stn-row:last-child { border-bottom: 0; }
.stn-body { display: block; font-size: 14.5px; font-weight: 600; color: var(--c-ink); text-decoration: none; overflow-wrap: anywhere; }
.stn-body:hover { color: var(--c-primary-deep); }
.stn-reply-mark { color: var(--c-muted); margin-right: 4px; }
.stn-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--c-faint); display: flex; gap: 10px; flex-wrap: wrap; }
.stn-school { color: var(--c-muted); text-decoration: none; }
.stn-school:hover { color: var(--c-primary); }
.stn-note-body { font-size: 16px; font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; }
.stn-parent { display: block; font-size: 12.5px; color: var(--c-muted); margin: 0 0 10px; text-decoration: none; overflow-wrap: anywhere; }
.stn-parent:hover { color: var(--c-primary); }
.stn-thread { margin: 0 0 18px; padding-left: 18px; border-left: 2px solid var(--c-line); }
.stn-row-reply { padding-left: 8px; }
.stn-reply-input { min-height: 64px; resize: vertical; }
/* ads rework: props tables, banner rows, inline forms */
.adf-props { border-collapse: collapse; font-size: 14px; width: 100%; }
.adf-props th { text-align: left; padding: 6px 18px 6px 0; color: var(--c-ink-soft); font-weight: 600; white-space: nowrap; vertical-align: top; width: 1%; }
.adf-props td { padding: 6px 0; }
.adf-prop-muted { color: var(--c-muted); }
.adf-row-code { display: inline-block; margin-left: 8px; color: var(--c-faint); font-size: 12px; }
.adf-td-code { color: var(--c-faint); }
.adf-td-act a { margin-right: 8px; font-size: 12.5px; white-space: nowrap; }
.adf-geo-not { display: block; color: var(--c-danger); font-size: 12px; text-decoration: line-through; }
.adf-bn-ok { color: #2c6e49; font-weight: 600; }
.adf-bn-none { color: var(--c-danger); font-weight: 700; }
.adf-status-done { background: #e9edf5; color: #3a5a8c; }
.adf-status-needmark { background: #fbeeee; color: var(--c-danger); }
.adf-title-btn { float: right; font-size: 13px; }
.adf-inline-form { display: inline; }
.adf-linklike { background: none; border: 0; padding: 0; color: var(--c-primary); cursor: pointer; font-size: 12.5px; }
.adf-linklike:hover { color: var(--c-primary-deep); text-decoration: underline; }
.adf-weight-heavy { color: var(--c-danger); font-weight: 700; }
.adf-banner-info { flex: 1; min-width: 0; }
.adf-banner-full { max-width: 100%; border: 1px solid var(--c-line); border-radius: 8px; display: block; }
.adf-multi { min-height: 170px; }
.adf-banner-save { margin-top: 14px; border-top: 1px solid var(--c-line); padding-top: 14px; }

/* 90-utilities — the few generic helpers the system allows itself. */
.visually-hidden {

position: absolute;

width: 1px;

height: 1px;

margin: -1px;

padding: 0;

overflow: hidden;

clip: rect(0 0 0 0);

white-space: nowrap;

border: 0;
}
.text-muted { color: var(--c-muted); }
.nowrap { white-space: nowrap; }