/* ════════════════════════════════════════════════════════════════
   geo.css — Region & Country profiles
   Builds on colors_and_type.css + dataroom-shared.css.
   Ports the Live Landing lens system; adds map, directional split,
   balance bar, conflicts, embedded publication, country tiles.
   ════════════════════════════════════════════════════════════════ */

.app { display: flex; flex-direction: column; min-height: 100dvh; }
.wrap { max-width: 80rem; width: 100%; margin: 0 auto; padding: var(--space-8) clamp(1.25rem, 4vw, 2.75rem) var(--space-16); }

/* ───────── hero ───────── */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin-bottom: var(--space-5); }
.breadcrumb i { font-size: 14px; }
.breadcrumb a { color: var(--color-stone); text-decoration: none; transition: color var(--transition-base); }
.breadcrumb a:hover { color: var(--color-navy); }
.breadcrumb .here { color: var(--color-charcoal); }

.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hero-grid.no-map { grid-template-columns: minmax(0,1fr); }
.room-title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.room-title .flag { font-size: 0.5em; vertical-align: middle; }
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); font-size: var(--text-md); color: var(--color-stone); }
.identity .item { color: var(--fg-body); } .identity .item b { font-weight: var(--weight-medium); color: var(--color-charcoal); } .identity .sep { color: var(--color-oatmeal); }
.role-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.role-badge i { font-size: 13px; }
.role-badge.initiated { color: #8E2F3A; background: #F3E2E0; }
.role-badge.received { color: var(--color-navy); background: var(--color-ecru); }
.hero-dek { font-size: 17px; line-height: 1.62; color: var(--fg-body); max-width: 42rem; margin: var(--space-4) 0 0; }
.trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-stone); }
.trust .ti b { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.trust .dot { color: var(--color-oatmeal); }
.source-line { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-oatmeal); margin-top: var(--space-4); }

/* lateral region switcher (under the hero) */
.region-ctx { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); }
.region-ctx .rc-lab { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin-right: var(--space-2); }
.region-ctx a { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); text-decoration: none; padding: 5px 11px; border: 1px solid var(--color-oatmeal); white-space: nowrap; border-radius: var(--radius-pill); transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.region-ctx a:hover { color: var(--color-navy); border-color: var(--color-navy); background: var(--color-linen); }
.region-ctx a.here { color: var(--color-charcoal); background: var(--color-ecru); border-color: var(--color-stone); font-weight: var(--weight-medium); cursor: default; }

/* ───────── orientation map ───────── */
/* de-carded: a hairline-framed figure, not a tinted box */
.map-card { border: 1px solid var(--hair); border-radius: 0; background: transparent; padding: var(--space-4) 0; }
.map-card .mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.map-card .mc-t { font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.map-card .mc-s { font-family: var(--font-mono); font-size: 10px; color: var(--color-oatmeal); }
.map-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--color-linen); }
.map-graticule { stroke: var(--color-oatmeal); stroke-width: 0.3; opacity: 0.5; fill: none; }
.map-dot { transition: r 200ms var(--ease-out); }
.map-here-ring { fill: none; stroke: var(--color-navy); stroke-width: 1.2; }
.map-label { font-family: var(--font-mono); font-size: 3.2px; fill: var(--color-stone); }
.map-label.here { fill: var(--color-navy); font-weight: 600; }
.map-ext { font-family: var(--font-mono); font-size: 3px; fill: var(--color-eurepoc-red); }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin-top: var(--space-3); font-size: 11px; color: var(--color-stone); }
.map-legend .k { display: inline-flex; align-items: center; gap: 5px; }
.map-legend .kd { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ───────── full-bleed section bands (Nav Model) ─────────
   Each section is a band; on the Ink sheet bands are transparent and separated
   by a single hairline, with uniform inner padding aligned to the masthead. */
.page { width: 100%; }
.band { width: 100%; background: transparent; }
.band-inner { width: 100%; max-width: none; margin: 0 auto; padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 2.75rem); }
.band + .band .band-inner { border-top: 1.5px solid var(--color-oatmeal); }
.hero-band .band-inner { padding-top: var(--space-8); padding-bottom: clamp(2rem, 4vw, 2.75rem); }
.band .sec-h { margin: 0 0 var(--space-2); }
.band .sec-h + .sec-sub { margin-top: var(--space-4); }
/* country: the lens band stacks three numbered sections in one swap unit —
   restore air before the 2nd/3rd masthead (region bands carry one each). */
body.geo-country #lens-block > .sec-h:not(:first-child) { margin-top: var(--space-10); }

/* ───────── section heads (from landing) ───────── */
/* numbered section masthead — "NN / TT" + heading + strong charcoal rule */
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-10) 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1.5px solid var(--color-charcoal); }
.sec-hd { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
.sec-no { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-navy); letter-spacing: 0.02em; flex: none; }
.sec-no .tot { color: var(--color-oatmeal); }
.sec-h h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.sec-h .count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-stone); }
.sec-h .sec-link { font-size: var(--text-sm); color: var(--color-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.sec-h .sec-link:hover { color: var(--color-navy-mid); }
.sec-h .sec-link i { font-size: 13px; }
.sec-sub { font-size: 15px; color: var(--fg-body); margin: calc(-1 * var(--space-2)) 0 var(--space-6); max-width: 48rem; line-height: 1.62; }
.sec-sub b { font-weight: var(--weight-semibold); color: var(--color-charcoal); }

/* ───────── directional split (toggle + balance) ───────── */
.balance { margin: var(--space-5) 0 var(--space-3); }
.bal-bar { display: flex; height: 30px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--hair-2); }
.bal-seg { display: flex; align-items: center; gap: 8px; padding: 0 var(--space-3); min-width: 0; transition: flex-basis 450ms var(--ease-out); white-space: nowrap; overflow: hidden; }
.bal-seg.received { background: var(--color-slate-pale); color: var(--color-navy); justify-content: flex-start; }
.bal-seg.initiated { background: #F3E2E0; color: #8E2F3A; justify-content: flex-end; }
.bal-seg .bn { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: 14px; }
.bal-seg .bl { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.bal-cap { font-size: 12.5px; color: var(--color-stone); margin-top: 7px; line-height: 1.5; }
.bal-cap b { color: var(--color-charcoal); font-weight: var(--weight-medium); }

.dirtabs { display: inline-flex; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-2) 0 var(--space-6); }
.dirtab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: #fff; border: none; border-right: 1px solid var(--color-ecru); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-stone); transition: background var(--transition-base), color var(--transition-base); }
.dirtab:last-child { border-right: none; }
.dirtab:hover { background: var(--color-linen); }
.dirtab[aria-selected="true"] { background: var(--color-navy); color: var(--color-linen); }
.dirtab .dn { font-family: var(--font-mono); opacity: 0.85; }
.dirtab i { font-size: 16px; }

/* ───────── lens (ported) ───────── */
.lens { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(1.5rem,3vw,2.75rem); align-items: start; }
.hero-col { display: flex; flex-direction: column; }
.ring { display: flex; flex-direction: column; align-items: center; }
.ring-ring { position: relative; width: 168px; height: 168px; }
.ring-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-ring .track { fill: none; stroke: var(--color-bone); stroke-width: 3; opacity: 0.6; stroke-dasharray: 1.1 4.4; stroke-linecap: round; }
.ring-ring .arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 500ms var(--ease-out), stroke 300ms var(--ease-out); }
.ring-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 2.7rem; line-height: 1; color: var(--color-charcoal); }
.ring-num .mx { font-size: 0.85rem; color: var(--color-stone); }
.ring-qual { font-size: var(--text-sm); color: var(--color-stone); margin-top: 4px; }
.ring-cap { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin-top: var(--space-4); text-align: center; }
.ring-cap small { display: block; font-weight: var(--weight-regular); color: var(--color-stone); margin-top: 3px; }
.lens-right { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.tl-head .l { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.tl-head .hint { font-size: 13px; color: var(--color-stone); }
.tl { display: grid; gap: 5px; align-items: end; }
.tl-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: none; border: none; padding: 6px 2px 0; border-radius: var(--radius-sm); }
.tl-bar-wrap { position: relative; height: 92px; display: flex; flex-direction: column; justify-content: flex-end; }
.tl-bar { width: 100%; border-radius: 2px 2px 0 0; min-height: 3px; }
.tl-lab { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); text-align: center; white-space: nowrap; }
.tl-cap { font-size: 13.5px; color: var(--color-stone); line-height: 1.5; }

/* ── most-targeted sectors — always-on ranked readout (structured list) ── */
/* de-carded: a ruled list (top+bottom hairline), not a white card */
.sstrip { margin-top: var(--space-3); border: none; border-top: 1px solid var(--color-oatmeal); border-bottom: 1px solid var(--color-oatmeal); border-radius: 0; background: transparent; overflow: hidden; }
a.srow { text-decoration: none; color: inherit; transition: background var(--transition-base); }
a.srow:hover { background: var(--color-ecru); }
a.srow:hover .s-lab { color: var(--color-navy); }
.s-arr { display: none; }
.rc-arr { margin-left: auto; font-size: 12px; color: var(--color-navy); opacity: 0; transition: opacity var(--transition-base); flex: none; }
a.resp-chip { text-decoration: none; transition: border-color var(--transition-base), box-shadow var(--transition-base); }
a.resp-chip:hover { background: var(--color-linen); }
a.resp-chip:hover .rc-arr { opacity: 1; }
a.coop-chip { text-decoration: none; transition: border-color var(--transition-base), background var(--transition-base); cursor: pointer; }
a.coop-chip:hover { border-color: var(--color-navy); background: var(--color-linen); }
.srow { display: grid; grid-template-columns: minmax(160px, 1.7fr) minmax(92px, 1.1fr) 128px 84px; align-items: center; gap: var(--space-4); padding: 11px var(--space-4); }
.srow + .srow { border-top: 1px solid var(--color-ecru); }
.srow-head { background: var(--color-bone); padding-top: 8px; padding-bottom: 8px; }
.srow-head span { font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #6B665E; }
.s-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.s-name i { font-size: 17px; color: var(--color-navy); flex: none; }
.s-name .s-lab { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-ct { font-family: var(--font-mono); font-size: 15px; font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.s-bar { display: flex; align-items: center; gap: 9px; }
.s-bar .s-meter { flex: 1 1 auto; height: 8px; border-radius: 3px; background: var(--color-linen); overflow: hidden; min-width: 30px; }
.s-bar .s-meter i { display: block; height: 100%; background: var(--color-navy); transition: width 450ms var(--ease-out); }
.s-bar .s-ct { flex: none; width: 1.4em; text-align: right; }
.s-int { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13.5px; font-weight: var(--weight-semibold); }
.s-int .s-int-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.s-int .s-int-q { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-regular); color: #6B665E; }
.s-rate { font-family: var(--font-mono); font-size: 13.5px; color: var(--color-charcoal); }
.s-lead { font-size: 13px; color: #6B665E; line-height: 1.55; margin-top: 9px; }
.s-lead b { color: var(--color-charcoal); font-weight: var(--weight-medium); }
.sstrip-empty { font-size: 13.5px; color: #6B665E; padding: var(--space-3) 0; }

/* ── demoted origin/target — tap-to-reveal disclosure ── */
.disc { margin-top: var(--space-5); }
.disc-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px var(--space-3); background: none; border: none; border-top: 1px solid var(--color-oatmeal); cursor: pointer; font-family: var(--font-ui); text-align: left; color: #6B665E; transition: color var(--transition-base); }
.disc-btn:hover { color: var(--color-navy); }
.disc-btn .dl { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.disc-btn .dnote { font-size: 12.5px; color: var(--color-stone); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
.disc-btn .car { margin-left: auto; font-size: 15px; transition: transform 200ms var(--ease-out); }
.disc-btn[aria-expanded="true"] .car { transform: rotate(180deg); }
.disc-body { display: none; padding-top: var(--space-2); }
.disc-body.open { display: block; }

.rstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.rstrip-head .l { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.rstrip-head .note { font-size: 13px; color: var(--color-stone); }
.rstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: var(--space-2); margin-top: var(--space-3); }
/* de-carded: ruled cells (top hairline), no box/shadow */
.rchip { display: flex; flex-direction: column; gap: 9px; padding: var(--space-3) var(--space-3) var(--space-3) 0; border: none; border-bottom: 1px solid var(--color-ecru); border-radius: 0; background: transparent; transition: none; text-decoration: none; }
a.rchip:hover { background: var(--color-linen); }
.rchip .rn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--weight-medium); color: var(--color-charcoal); }
.rchip .rn .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rchip .rn .arr { margin-left: auto; color: var(--color-navy); font-size: 13px; }
.rchip .rv { font-family: var(--font-mono); font-size: 1.5rem; font-weight: var(--weight-semibold); color: var(--color-charcoal); line-height: 1; }
.rchip .rv small { font-size: 11px; color: var(--color-stone); font-weight: var(--weight-regular); font-family: var(--font-ui); margin-left: 3px; }
.rchip .rsev { display: flex; flex-direction: column; gap: 4px; }
.rchip .rsev .meter { height: 4px; border-radius: 3px; background: var(--color-linen); overflow: hidden; }
.rchip .rsev .meter i { display: block; height: 100%; transition: width 450ms var(--ease-out); }
.rchip .rsev .lab { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.rchip.zero { opacity: 0.45; }
.rec-src { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-oatmeal); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-ecru); }
.more-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-2) var(--space-2); font-size: var(--text-sm); color: var(--color-stone); }
.more-row b { color: var(--color-charcoal); font-weight: var(--weight-medium); }
.more-row a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-navy); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.more-row a:hover { color: var(--color-navy-mid); }
.more-row a i { font-size: 15px; transition: transform var(--transition-base); }
.more-row a:hover i { transform: translateX(3px); }

/* ───────── response typology hero ───────── */
.hero-rsp { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.hr-ref { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-ecru); }
.hrf { text-align: center; }
.hrf .n { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 1.7rem; color: var(--color-charcoal); line-height: 1; }
.hrf .l { display: block; font-size: 13px; color: var(--color-stone); margin-top: 5px; }
.hr-bar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-linen); }
.hr-bar i { display: block; height: 100%; transition: width 450ms var(--ease-out); }
.hr-legend { display: flex; flex-direction: column; gap: 5px; }
.hr-leg-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-stone); }
.hr-leg-row .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.hr-leg-row .lab { flex: 1 1 auto; }
.hr-leg-row .n { font-family: var(--font-mono); color: var(--color-charcoal); }

/* responder strip (who responds) */
.responders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 0 clamp(var(--space-5), 4vw, var(--space-8)); }
/* de-carded: ruled cells, no box */
.resp-chip { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-3) var(--space-3) 0; border: none; border-bottom: 1px solid var(--color-ecru); border-radius: 0; background: transparent; }
.resp-chip .rc-n { font-size: 13px; font-weight: var(--weight-medium); color: var(--color-charcoal); display: flex; align-items: center; gap: 6px; }
.resp-chip .rc-meta { display: flex; flex-direction: column; gap: 2px; }
.resp-chip .rc-country { font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-medium); color: var(--color-stone); }
.resp-chip .rc-v { font-family: var(--font-mono); font-size: 1.2rem; font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.resp-chip .rc-v small { font-size: 10.5px; color: var(--color-stone); font-weight: 400; font-family: var(--font-ui); margin-left: 3px; }
.resp-chip .rc-type { font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-stone); }

/* cooperative responses (frequent partners) */
.coop { display: flex; flex-direction: column; gap: var(--space-3); }
.coop-stat { font-size: 13.5px; line-height: 1.55; color: var(--fg-body); }
.coop-stat b { font-family: var(--font-mono); color: var(--color-charcoal); font-weight: var(--weight-semibold); }
.coop-partners { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.coop-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--hair-2); border-radius: var(--radius-pill); background: #fff; font-size: 13px; color: var(--color-charcoal); }
.coop-chip .cn { width: 20px; height: 20px; border-radius: 50%; background: var(--color-ecru); color: var(--color-navy); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.coop-chip .cx { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.coop-empty { font-size: 13.5px; color: var(--color-stone); line-height: 1.55; }

/* ───────── ongoing conflicts (HIIK) ───────── */
.conflicts { display: flex; flex-direction: column; gap: 0; }
/* de-carded: hairline-separated rows, not boxes */
.conflict { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-3) var(--space-4); padding: var(--space-5) 0; border: none; border-bottom: 1px solid var(--color-ecru); border-radius: 0; background: transparent; }
.cf-bars { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cf-level { display: flex; gap: 2px; }
.cf-level i { width: 5px; height: 18px; border-radius: 1px; background: var(--color-bone); }
.cf-level i.on { background: var(--color-eurepoc-red); }
.cf-level i.on.l3 { background: #C08B3A; } .cf-level i.on.l4 { background: #B84E52; } .cf-level i.on.l5 { background: #8E2F3A; }
.cf-lv-lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-stone); }
.cf-body .cf-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cf-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-charcoal); margin: 0; }
.cf-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.cf-parties { font-size: 12.5px; color: var(--color-stone); margin: 2px 0 7px; }
.cf-cyber { font-size: 13.5px; line-height: 1.55; color: var(--fg-body); margin: 0; max-width: 52rem; }
.cf-linked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.cf-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-navy); background: var(--color-ecru); padding: 2px 8px; border-radius: var(--radius-pill); text-decoration: none; }
.cf-tag:hover { background: #b6d4ee; }

/* ───────── country index (region → country) — one-line scannable rows ───────── */
/* de-carded: a ruled index keyed by the timeline selection. Received/Origin
   counts read at a glance; the level chip carries severity for the window. */
.tiles-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: 0 var(--space-2) var(--space-2); border-bottom: 1.5px solid var(--color-charcoal); }
.tiles-head .th-name { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.tiles-head .th-leg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.th-leg .tlg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.th-leg .tlg .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.th-leg .tlg.rec .dot { background: var(--color-navy); }
.th-leg .tlg.init .dot { background: var(--color-charcoal); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px,1fr)); gap: 0 clamp(var(--space-6), 4vw, var(--space-10)); }
.tile { display: grid; grid-template-columns: 1fr 5.4rem 2.6rem 2.6rem 1.1rem; align-items: center; column-gap: var(--space-3); padding: 11px var(--space-2); border-bottom: 1px solid var(--color-oatmeal); text-decoration: none; transition: background var(--transition-base); }
a.tile:hover { background: var(--color-linen); }
.tile .tn { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-base); }
a.tile:hover .tn { color: var(--color-navy); }
.tile .tlvl { font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; text-align: right; white-space: nowrap; }
.tile .tnum { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.tile .tnum.rec { color: var(--color-navy); }
.tile .tnum.init { color: var(--color-charcoal); }
.tile .tnum.zero { color: var(--color-oatmeal); font-weight: var(--weight-regular); }
.tile .tgo { font-size: 15px; color: var(--color-oatmeal); justify-self: end; transition: color var(--transition-base), transform var(--transition-base); }
a.tile:hover .tgo { color: var(--color-navy); transform: translateX(2px); }
.tile.forth .tgo { color: var(--color-bone); }

/* ───────── embedded publication ───────── */
.pub-embed { border: 1px solid var(--hair-2); border-radius: var(--radius-md); background: var(--color-ecru); overflow: hidden; }
.pub-embed .pe-head { padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--color-oatmeal); border-left: 3px solid var(--color-eurepoc-red); }
.pe-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.pe-eyebrow i { font-size: 13px; }
.pe-title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.14; color: var(--color-charcoal); margin: 10px 0 var(--space-3); max-width: 32ch; text-wrap: balance; }
.pe-byline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 13px; color: var(--color-stone); }
.pe-byline .avs { display: flex; } .pe-byline .av { width: 26px; height: 26px; border-radius: 50%; background: var(--color-navy); color: var(--color-linen); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-ecru); margin-left: -8px; } .pe-byline .av:first-child { margin-left: 0; }
.pe-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); max-width: 48rem; }
.pe-lede { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--color-charcoal); margin: 0; }
.pe-sec h3 { font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin: 0 0 6px; }
.pe-sec p { font-size: 15px; line-height: 1.66; color: var(--fg-body); margin: 0; }
.pe-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-oatmeal); background: var(--color-linen); }
.pe-foot .src { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); }
.pe-foot .acts { display: flex; gap: var(--space-3); }

/* linked publication feature (Russia) */
.feature { border: 1px solid var(--hair-2); border-left: 3px solid var(--color-eurepoc-red); border-radius: var(--radius-md); background: var(--color-ecru); padding: var(--space-5) var(--space-6); }
.feat-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red); }
.feat-eyebrow i { font-size: 13px; }
.feat-title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.16; color: var(--color-charcoal); margin: 9px 0 8px; max-width: 40rem; }
.feat-dek { font-size: 14.5px; line-height: 1.55; color: var(--color-stone); max-width: 48rem; margin: 0; }
.feat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.byline { display: flex; align-items: center; gap: var(--space-2); }
.byline .avs { display: flex; } .byline .av { width: 27px; height: 27px; border-radius: 50%; background: var(--color-navy); color: var(--color-linen); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-ecru); margin-left: -8px; } .byline .av:first-child { margin-left: 0; }
.by-col { display: flex; flex-direction: column; } .by-col .by-names { font-size: 12.5px; color: var(--color-charcoal); } .by-col .by-meta { font-size: 11.5px; color: var(--color-stone); }
.feat-acts { display: flex; align-items: center; gap: var(--space-3); }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; border-radius: var(--radius-md); padding: 9px 15px; transition: background var(--transition-base), border-color var(--transition-base); white-space: nowrap; text-decoration: none; }
.btn i { font-size: 16px; }
.btn-pri { color: #fff; background: var(--color-navy); border: 1px solid var(--color-navy); } .btn-pri:hover { background: var(--color-navy-mid); border-color: var(--color-navy-mid); }
.btn-ghost { color: var(--color-navy); background: #fff; border: 1px solid var(--color-oatmeal); } .btn-ghost:hover { background: var(--color-linen); border-color: var(--color-stone); }
.read { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-navy); text-decoration: none; white-space: nowrap; }
.read:hover { color: var(--color-navy-mid); } .read i { font-size: 15px; transition: transform var(--transition-base); } .read:hover i { transform: translateX(3px); }

/* pending publication (no signature pub yet → section hidden; this is only for the actions area) */
.pub-pending { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1.5px dashed var(--color-oatmeal); border-radius: var(--radius-md); color: var(--color-stone); font-size: 13.5px; }
.pub-pending i { font-size: 18px; color: var(--color-oatmeal); }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .map-card { max-width: 360px; }
  .lens { grid-template-columns: 1fr; }
  .intensity-wheel { width: min(100%, 34rem); align-self: center; }
  .ring { align-self: center; justify-self: center; }
}

/* Profile header actions follow the direction selected in the activity lens. */
.profile-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.profile-heading .room-title { margin: 0; }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-actions button, .profile-actions a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font: inherit; font-size: var(--text-sm); color: var(--color-navy); background: #fff; border: 1px solid var(--color-oatmeal); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; }
.profile-actions button:hover, .profile-actions a:hover, .profile-actions button.in { background: var(--color-linen); border-color: var(--color-navy); }
.profile-actions :focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
