/* Атлас выпускников (/map/atlas): глобус + плоская карта, пять стилей.
   Подключается только на страницах атласа - общий style.css не раздуваем.
   Рукописный шрифт Caveat (OFL) лежит у нас: CSP не пускает Google Fonts. */

/* ≈ - город оценён по работе/вузу/встрече (app/geo_anchors.py) */
.a-people .a-est { margin-left: .3em; color: var(--muted, #888); cursor: help; }
/* «Убрать моё фото» - опт-аут автора */
.a-hide { margin: .5rem 0 0; }
.a-hide .btn { font-size: .85rem; padding: .3rem .7rem; }
.atlas-flash { max-width: 1100px; margin: .5rem auto; padding: .5rem 1rem; border-radius: 8px;
  background: var(--card, #f4f1ea); }

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

/* ── сцена ─────────────────────────────────────────────────────────────── */
.atlas { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--a-bg); border-radius: var(--a-radius, 0);
  --a-font: 600 12px var(--sans);
  transition: background .3s ease; }
.atlas.is-dragging { cursor: grabbing; }
.atlas:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.atlas .a-svg { display: block; width: 100%; height: 100%;
  transition: opacity .22s ease, transform .22s ease; }
.atlas.is-morphing .a-svg { opacity: 0; transform: scale(.94); }
.atlas:not(.is-ready) .a-landg { opacity: 0; }
.atlas .a-landg { transition: opacity .4s ease; }

.a-sea1 { stop-color: var(--a-sea1); }
.a-sea2 { stop-color: var(--a-sea2); }
.a-ocean { stroke: none; }
.a-ocean-waves { display: none; pointer-events: none; }
.a-land { fill: var(--a-land); stroke: none; }
.a-land-top { stroke: var(--a-coast); stroke-width: var(--a-coast-w, .8); stroke-linejoin: round; }
.a-lakes { fill: var(--a-sea2); stroke: var(--a-coast); stroke-width: var(--a-coast-w, .8); }
.a-hatch-line { stroke: var(--a-hatch, transparent); stroke-width: 1; }
.a-grid { stroke: var(--a-grid); stroke-width: .7; pointer-events: none; }
.a-equator { stroke: var(--a-equator, transparent); stroke-width: 1.1; pointer-events: none; }
.a-rim { stroke: var(--a-rim); stroke-width: var(--a-rim-w, 1.5); pointer-events: none; }
.a-shine { pointer-events: none; }
.a-starfield { display: none; fill: #fff; pointer-events: none; }
.a-deco, .a-links { pointer-events: none; }
.a-links path { fill: none; stroke: var(--a-link, transparent); stroke-width: .8; }

.a-dot { cursor: pointer; }
.a-dots circle.a-dot, .a-dots .a-dot > circle, .a-dots .a-dot > path:not(.a-cross) {
  fill: var(--a-dot); stroke: var(--a-dot-stroke); stroke-width: 1.2; }
.a-dots .a-dot:hover > *, .a-dots .a-dot:focus-visible > *, .a-dots circle.a-dot:hover { filter: brightness(1.15); }
.a-dot:focus, .a-photo:focus { outline: none; }
.a-dots .is-me.a-dot, .a-dots .is-me > circle:not(.a-stamp-out):not(.a-halo), .a-dots .is-me > path { fill: var(--a-me) !important; }
.a-cohort-ring { fill: none; stroke: var(--a-parallel); stroke-width: 1.4; stroke-dasharray: 2 2.5; pointer-events: none; }
.a-cohort-ring.is-classmates { stroke: var(--a-classmate); stroke-width: 2; stroke-dasharray: none; }
.a-me-pulse { fill: none; stroke: var(--a-me); stroke-width: 2; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: a-pulse 2.2s ease-out infinite; }
@keyframes a-pulse { 0% { transform: scale(.45); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a-me-pulse { animation: none; opacity: .8; } }

.a-labels text { font: var(--a-font); fill: var(--a-label); paint-order: stroke;
  stroke: var(--a-label-halo); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.a-labels text.is-me { fill: var(--a-me); font-weight: 700; }

/* фото: пузырь с фотоаппаратом */
.a-photo { cursor: pointer; }
.a-ph-bubble { fill: var(--a-photo); stroke: var(--a-photo-stroke); stroke-width: 1.2; }
.a-ph-cam { fill: var(--a-photo-ink); }
.a-ph-lens { fill: var(--a-photo); stroke: var(--a-photo-ink); stroke-width: 1; }
.a-ph-146 { font: 700 10px var(--mono, monospace); fill: var(--a-photo-146); text-anchor: middle;
  paint-order: stroke; stroke: var(--a-label-halo); stroke-width: 3px; }
.a-photo:hover .a-ph-bubble, .a-photo:focus-visible .a-ph-bubble { filter: brightness(1.12); stroke-width: 2; }

/* ── подсказка ─────────────────────────────────────────────────────────── */
.a-tip { position: absolute; z-index: 5; letter-spacing: normal; text-transform: none; min-width: 13rem; max-width: 20rem; max-height: 70%;
  overflow: auto; padding: .7rem .85rem; border-radius: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: .9rem; cursor: default; pointer-events: none; }
.a-tip.is-pinned { pointer-events: auto; }
.a-tip-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.a-tip-head b { font-size: 1.05rem; }
.a-tip-head span { color: var(--muted); font-size: .85rem; }
.a-tip-close { margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1;
  color: var(--muted); cursor: pointer; }
.a-people { list-style: none; margin: 0; padding: 0; }
.a-people li { display: flex; align-items: baseline; gap: .4rem; padding: .12rem 0; border-bottom: 1px dotted var(--line); }
.a-people a { color: var(--text); text-decoration: none; }
.a-people a:hover { color: var(--ink); text-decoration: underline; }
.a-people small { color: var(--muted); font-family: var(--mono); font-size: .75rem; }
.a-people .cohort-me a, .a-people .cohort-classmate a { font-weight: 700; }
.a-badge { margin-left: auto; font-style: normal; font-size: .7rem; padding: .05rem .4rem; border-radius: 99px; white-space: nowrap; }
.a-badge.is-me { background: #e0457b; color: #fff; }
.a-badge.is-classmate { background: #f5b301; color: #231a00; }
.a-badge.is-parallel { border: 1px dashed #c99200; color: var(--muted); }
.a-more { margin: .4rem 0 0; color: var(--muted); font-size: .8rem; }
.a-tip-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .5rem; }
.a-tip-photos img, .a-ph-empty { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  background: var(--bg2); display: grid; place-items: center; color: var(--muted); font-size: .7rem; }
.a-tip-img { display: block; width: 100%; max-height: 14rem; object-fit: cover; border-radius: 6px; margin: .2rem 0 .3rem; }
div.a-tip-img { height: 8rem; }
.a-caption { margin: 0; }
.a-146 { font-style: normal; font-family: var(--mono); background: #e0457b; color: #fff; padding: 0 .3rem; border-radius: 4px; }

/* ── стиль 1: обычный ─────────────────────────────────────────────────── */
.atlas[data-style="regular"] {
  --a-bg: transparent; --a-sea1: #7fb0dd; --a-sea2: #3f74a8; --a-land: #f2efe2; --a-coast: #2b5a86;
  --a-grid: rgba(255,255,255,.28); --a-rim: rgba(43,90,134,.5);
  --a-dot: var(--accent, #d9480f); --a-dot-stroke: #fff; --a-label: var(--text); --a-label-halo: var(--bg);
  --a-me: #e0457b; --a-classmate: #f5b301; --a-parallel: #c99200;
  --a-photo: #fff; --a-photo-stroke: #2b5a86; --a-photo-ink: #2b5a86; --a-photo-146: #e0457b; }
.atlas[data-style="regular"] .a-land { fill: var(--a-land); }
[data-theme="dark"] .atlas[data-style="regular"] { --a-sea1: #1f4664; --a-sea2: #0f2434; --a-land: #cdd6c2;
  --a-coast: #0f2434; --a-grid: rgba(255,255,255,.14); }

/* ── стиль 2: мультяшный ─────────────────────────────────────────────── */
.atlas[data-style="cartoon"] {
  --a-bg: #fff4d6; --a-sea1: #5ad0ff; --a-sea2: #1a8fe3; --a-land: #8ee06a; --a-coast: #20304a; --a-coast-w: 2.6;
  --a-grid: rgba(255,255,255,.35); --a-rim: #20304a; --a-rim-w: 4;
  --a-dot: #ff5a5f; --a-dot-stroke: #20304a; --a-label: #20304a; --a-label-halo: #fff;
  --a-me: #ff2d95; --a-classmate: #ffc400; --a-parallel: #ff9f1c;
  --a-photo: #ffd43b; --a-photo-stroke: #20304a; --a-photo-ink: #20304a; --a-photo-146: #ff2d95;
  --a-font: 700 13px var(--sans); --a-radius: 18px;
  background-image: radial-gradient(circle at 12% 18%, #ffe29a 0 60px, transparent 61px),
                    radial-gradient(circle at 88% 82%, #ffd1dc 0 80px, transparent 81px); }
.atlas[data-style="cartoon"] .a-land { fill: var(--a-land); }
.atlas[data-style="cartoon"] .a-ocean-waves { display: block; }
.atlas[data-style="cartoon"] .a-wave { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.6; stroke-linecap: round; }
.atlas[data-style="cartoon"] .a-lakes { fill: #5ad0ff; }
.atlas[data-style="cartoon"] .a-dots .a-dot > path.a-pin { stroke-width: 2; }
.atlas[data-style="cartoon"] .a-pin-eye { fill: #fff !important; stroke: #20304a !important; stroke-width: 1.5 !important; }
.atlas[data-style="cartoon"] .a-pin-shadow { fill: rgba(0,0,0,.25) !important; stroke: none !important; }
.atlas[data-style="cartoon"] .a-dot { transition: transform .15s; }
.atlas[data-style="cartoon"] .a-ph-bubble { stroke-width: 2; }
.atlas[data-style="cartoon"] .a-labels text { stroke-width: 4px; }

/* ── стиль 3: мел, математическая геометрия ─────────────────────────── */
.atlas[data-style="chalk"] {
  --a-bg: #1f2b26; --a-sea1: #24322c; --a-sea2: #1c2823; --a-land: transparent; --a-coast: #f1f3ea; --a-coast-w: 1.3;
  --a-grid: rgba(241,243,234,.22); --a-rim: #f1f3ea; --a-rim-w: 1.6; --a-equator: rgba(255,214,120,.7);
  --a-dot: rgba(255,214,120,.2); --a-dot-stroke: #ffd678; --a-label: #f1f3ea; --a-label-halo: #1f2b26;
  --a-me: #ff8fb4; --a-classmate: #9fe3ff; --a-parallel: #9fe3ff;
  --a-photo: #1f2b26; --a-photo-stroke: #f1f3ea; --a-photo-ink: #f1f3ea; --a-photo-146: #ffd678;
  --a-font: 700 17px 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  background-image: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.05), transparent 65%); }
.atlas[data-style="chalk"] .a-land { fill: rgba(241,243,234,.06); }
.atlas[data-style="chalk"] .a-grid { stroke-dasharray: 3 4; }
.atlas[data-style="chalk"] .a-equator { stroke-dasharray: 8 5; }
.atlas[data-style="chalk"] .a-lakes { fill: var(--a-sea1); }
.atlas[data-style="chalk"] .a-cross { stroke: #ffd678; stroke-width: 1; fill: none; }
.atlas[data-style="chalk"] .a-dots .a-dot > circle { stroke-width: 1.5; }
.atlas[data-style="chalk"] .a-axis { stroke: rgba(241,243,234,.6); stroke-width: 1.2; stroke-dasharray: 10 6; fill: none; }
.atlas[data-style="chalk"] .a-radius { stroke: rgba(255,214,120,.8); stroke-width: 1.2; fill: none; }
.atlas[data-style="chalk"] .a-center { fill: #ffd678; }
.atlas[data-style="chalk"] .a-note { font: 600 18px 'Caveat', cursive; fill: rgba(241,243,234,.85); }
.atlas[data-style="chalk"] .a-note-sm { font-size: 14px; fill: rgba(241,243,234,.55); }
.atlas[data-style="chalk"] .a-labels text { stroke-width: 4px; }
.atlas[data-style="chalk"] .a-ph-bubble { stroke-dasharray: 3 1.5; }

/* ── стиль 4: бумажная картография, тушь ─────────────────────────────── */
.atlas[data-style="ink"] {
  --a-bg: #efe4c8; --a-sea1: #f3ead3; --a-sea2: #e6d6b0; --a-land: #efe4c8; --a-coast: #3a2a1a; --a-coast-w: 1.1;
  --a-hatch: rgba(58,42,26,.38); --a-grid: rgba(58,42,26,.28); --a-rim: #3a2a1a; --a-rim-w: 2.2;
  --a-equator: rgba(140,40,30,.65);
  --a-dot: #8c281e; --a-dot-stroke: #efe4c8; --a-label: #2b1d10; --a-label-halo: #f3ead3;
  --a-me: #8c281e; --a-classmate: #1f4e79; --a-parallel: #1f4e79;
  --a-photo: #f3ead3; --a-photo-stroke: #3a2a1a; --a-photo-ink: #3a2a1a; --a-photo-146: #8c281e;
  --a-font: italic 600 13px var(--serif, 'IBM Plex Serif'), Georgia, serif;
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120,80,30,.25) 100%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.03) 0 2px, transparent 2px 4px); }
.atlas[data-style="ink"] .a-grid { stroke-dasharray: 1 3; }
.atlas[data-style="ink"] .a-rim { filter: drop-shadow(0 0 0 #3a2a1a); }
.atlas[data-style="ink"] .a-stamp-out { fill: none !important; stroke: #8c281e !important; stroke-width: .9 !important; }
.atlas[data-style="ink"] .a-lakes { fill: var(--a-sea1); }
.atlas[data-style="ink"] .a-rose circle { fill: none; stroke: #3a2a1a; stroke-width: .8; }
.atlas[data-style="ink"] .a-rose .a-rose-a { fill: #3a2a1a; }
.atlas[data-style="ink"] .a-rose .a-rose-b { fill: #efe4c8; stroke: #3a2a1a; stroke-width: .8; }
.atlas[data-style="ink"] .a-rose text { font: italic 700 14px var(--serif, Georgia), serif; fill: #3a2a1a; text-anchor: middle; }
.atlas[data-style="ink"] .a-labels text { letter-spacing: .02em; }

/* ── стиль 5: звёзды, созвездия ──────────────────────────────────────── */
.atlas[data-style="stars"] {
  --a-bg: #05070f; --a-sea1: rgba(40,60,120,.18); --a-sea2: rgba(5,7,15,0); --a-land: rgba(255,255,255,.035);
  --a-coast: rgba(220,232,255,.55); --a-coast-w: .8;
  --a-grid: transparent; --a-rim: rgba(160,190,255,.35); --a-rim-w: 1;
  --a-dot: #fff; --a-dot-stroke: none; --a-label: rgba(230,238,255,.9); --a-label-halo: #05070f;
  --a-link: rgba(210,225,255,.55);
  --a-me: #ffd36b; --a-classmate: #9fd4ff; --a-parallel: #9fd4ff;
  --a-photo: rgba(5,7,15,.85); --a-photo-stroke: rgba(230,238,255,.9); --a-photo-ink: #fff; --a-photo-146: #ffd36b;
  --a-font: 500 11px var(--sans); letter-spacing: .12em;
  background-image: radial-gradient(ellipse at 50% 120%, #1a2350 0%, transparent 60%),
                    radial-gradient(ellipse at 10% 0%, #1a1238 0%, transparent 50%); }
.atlas[data-style="stars"] .a-starfield { display: block; }
.atlas[data-style="stars"] .a-lakes { fill: none; }
.atlas[data-style="stars"] .a-halo { fill: rgba(200,220,255,.12) !important; stroke: none !important; }
.atlas[data-style="stars"] .a-dots .a-dot > path { stroke: none; }
.atlas[data-style="stars"] .a-labels text { text-transform: uppercase; stroke-width: 2px; }
.atlas[data-style="stars"] .a-cohort-ring { stroke-dasharray: 1 3; }

/* ── страница атласа ──────────────────────────────────────────────────── */
body.atlas-page .scroll-cta, body.atlas-page .header-cta { display: none !important; }
.atlas-top, .atlas-bottom { max-width: 1240px; margin: 0 auto; padding: 0 1.1rem; }
.atlas-top-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap; padding: 1.4rem 0 .9rem; }
.atlas-top h1 { margin: 0 0 .4rem; }
.atlas-lead { color: var(--muted); margin: 0; max-width: 44rem; }
.atlas-controls { display: flex; align-items: center; gap: .7rem 1rem; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.atlas-top-in > * { min-width: 0; max-width: 100%; }
.a-seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--panel); }
.a-seg button { white-space: nowrap; width: auto; min-width: 0; margin: 0; border: 0; background: none; padding: .35rem .8rem; border-radius: 99px; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .9rem; }
.a-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem;
  vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.a-swatch--regular { background: linear-gradient(135deg, #7fb0dd 50%, #f2efe2 50%); }
.a-swatch--cartoon { background: linear-gradient(135deg, #1a8fe3 50%, #8ee06a 50%); box-shadow: inset 0 0 0 1.5px #20304a; }
.a-swatch--chalk { background: #1f2b26; box-shadow: inset 0 0 0 1.5px #f1f3ea; }
.a-swatch--ink { background: repeating-linear-gradient(135deg, #efe4c8 0 2px, #3a2a1a 2px 3px); }
.a-swatch--stars { background: radial-gradient(circle at 50% 50%, #fff 0 18%, #05070f 22%); }
.a-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.a-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.atlas-stage { height: calc(100vh - 14rem); min-height: 26rem; }
.atlas-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
.atlas-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; margin-right: .3rem; }
.lg-me { background: #e0457b; }
.lg-classmate { border: 2px solid #f5b301; }
.lg-parallel { border: 1.5px dashed #c99200; }
.lg-photo { border-radius: 3px !important; background: #fff; border: 1.5px solid #2b5a86; }
.atlas-bottom-in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; padding: 1.6rem 0 2.4rem; }
.atlas-cities { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 1.6rem; }
.atlas-cities li { break-inside: avoid; border-bottom: 1px dotted var(--line); }
.atlas-cities button { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; width: 100%;
  border: 0; background: none; padding: .3rem 0; cursor: pointer; color: var(--text); font: inherit; text-align: left; }
.atlas-cities button:hover span { color: var(--ink); }
.atlas-cities b { font-family: var(--mono); color: var(--muted); font-size: .85rem; }
.atlas-cities .has-me span::after { content: " · вы"; color: #e0457b; font-weight: 700; }
.atlas-cities .has-classmates span::after { content: " ★"; color: #f5b301; }
.atlas-note p { margin: 0 0 .6rem; }
.demo-flag { display: inline-block; font-size: .75rem; font-family: var(--mono); padding: .1rem .5rem; border-radius: 99px;
  background: #fff3bf; color: #5c4400; vertical-align: middle; margin-left: .4rem; }
@media (max-width: 760px) {
  .atlas-bottom-in { grid-template-columns: 1fr; gap: 1.2rem; }
  .atlas-cities { columns: 2; }
  .atlas-stage { height: 72vh; }
}

/* ── лаборатория стилей ───────────────────────────────────────────────── */
.atlas-lab { max-width: 1400px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
.atlas-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 1.2rem; }
.lab-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.lab-card .atlas { height: 360px; border-radius: 0; }
.lab-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; }
.lab-card-foot h3 { margin: 0; font-size: 1.05rem; }
.lab-card-foot p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.lab-card-foot a { white-space: nowrap; }