/* ============================================================
   Talks — internal presentations of Méridien. Loads after meridien-brand: tokens.css, grid.css, icons.css,
   template/deck.css, then talks/assets/tokens.css and this file. Colours — roles only (no hex here, the lint hex
   rule reads this file too when it sits beside the deck as talks.css).
   Source: Figma «Meridian | Work in progress» → «For Skills» (8398:2399), Elis, 28.10.2026; rules — SKILL.md.
   ============================================================ */

/* ---------- FONTS of the Talks slots (local, licensed: RR Repose Prop — EULA of Elis; Bering Normal; Space Mono OFL) ---------- */
@font-face { font-family: 'RR Repose Prop'; src: url('fonts/RRReposeProp-C.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Bering'; src: url('fonts/Bering-Normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: block; }

/* ---------- TYPE — four slots on the brand scale (references/typography.md)
   .a-*  Ayer      super-large: the one-word cover (.a-hero), the brand .a-cover; the wordmark
   .d-*  RR Repose large titles: slide title, month name, product or case name; unicase — sentence case in the markup
   .h-*  Bering    H2, short large texts, subtitles: split-plane titles, stage headings, captions under capsule numbers
   .t-*  Struve    everything that is read (deck.css); <b> inside text — Struve Bold, the only highlight in a paragraph
   .m-*  Space Mono short captions and service labels only; Latin only — talks.js sets .fb on Cyrillic ---------- */
.a-hero { font: var(--font-accent-style) var(--font-accent-weight) var(--fs-hero-accent)/var(--lh-hero-accent) var(--font-accent); letter-spacing: var(--tr-accent); }

.d-title-l, .d-headline, .d-display, .d-word, .d-cover, .d-number-l { font-family: var(--font-display); font-weight: 400; font-style: normal; letter-spacing: var(--tr-display-slot); }
.d-title-l  { font-size: var(--fs-title-l-display);  line-height: var(--lh-title-l-display); }
.d-headline { font-size: var(--fs-headline-display); line-height: var(--lh-headline-display); }
.d-display  { font-size: var(--fs-display-display);  line-height: var(--lh-display-display); }
.d-word     { font-size: var(--fs-word-display);     line-height: var(--lh-word-display); }
.d-cover    { font-size: var(--fs-cover-display);    line-height: var(--lh-cover-display); }
.d-number-l { font-size: var(--fs-number-l-display); line-height: var(--lh-number-l-display); }

.h-subhead, .h-title-s, .h-title-m, .h-title-l, .h-headline { font-family: var(--font-h2); font-weight: 400; font-style: normal; letter-spacing: var(--tr-h2); }
.h-subhead  { font-size: var(--fs-subhead-h2);  line-height: var(--lh-subhead-h2); }
.h-title-s  { font-size: var(--fs-title-s-h2);  line-height: var(--lh-title-s-h2); }
.h-title-m  { font-size: var(--fs-title-m-h2);  line-height: var(--lh-title-m-h2); }
.h-title-l  { font-size: var(--fs-title-l-h2);  line-height: var(--lh-title-l-h2); }
.h-headline { font-size: var(--fs-headline-h2); line-height: var(--lh-headline-h2); }

.m-label, .m-caption { font-family: var(--font-mono); font-weight: 400; letter-spacing: var(--tr-mono); font-variant-numeric: tabular-nums; }
.m-label   { font-size: var(--fs-label-mono);   line-height: var(--lh-label-mono); }
.m-caption { font-size: var(--fs-caption-mono); line-height: var(--lh-caption-mono); }
.m-label.fb, .m-caption.fb { font-family: var(--font-base); font-weight: 500; }   /* Space Mono has no Cyrillic */

/* the display faces trim to their caps: .trim of grid.css works on them too (text-box) */
.d-title-l.trim, .d-headline.trim, .d-display.trim, .d-word.trim, .d-cover.trim, .d-number-l.trim,
.h-title-s.trim, .h-title-m.trim, .h-title-l.trim, .h-headline.trim, .a-hero.trim { text-box: trim-both cap alphabetic; }

/* highlights: the marker is switched off in Talks (<html data-fx-off="marker">, Elis 21.10.2026 — effects are the editor's
   switches), so a word of a title is a word in the accent colour: .hl-accent of deck.css, ≤ 2 a slide. In a paragraph the
   highlight is Struve Bold (Elis: «Выделения — Struve Bold»); a name in a kudos line is Bold in the accent ◇ (Figma 7). */
.slide b, .slide strong { font-weight: 700; }
.slide b.name { color: var(--accent-primary); }
.c-accent { color: var(--accent-primary); }   /* a short line in the accent colour: the axis label, a stage index, a month */

/* ---------- THE MARK — «M» of Ayer and the globe, one colour (talks.js inlines the SVG into <i class="mark">) ---------- */
.mark { display: block; width: 256px; height: 146px; color: var(--accent-primary); }
.mark.s180 { width: 180px; height: 103px; }
.mark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark.on-plane, .plane .mark { color: var(--text-on-accent); }
/* the Reporter wordmark (SVG from Figma, one colour) */
.reporter { display: block; width: 310px; height: 73px; color: var(--accent-primary); }   /* the mask logo/reporter.png is 939 × 222 */
.reporter.s220 { width: 220px; height: 52px; }
.reporter { background: currentColor; -webkit-mask: url('logo/reporter.png') left center / contain no-repeat; mask: url('logo/reporter.png') left center / contain no-repeat; }
.plane .reporter, .reporter.on-plane { color: var(--text-on-accent); }
.wordmark.s80 { font-size: 80px; }

/* ---------- AVATARS — round, 136 (2 columns) or 212 (3 columns); black-and-white; the speaker of the day — green duotone ---------- */
.avatar { position: relative; width: 136px; height: 136px; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--bg-surface); flex: none; }
.avatar.s212 { width: 212px; height: 212px; }
.avatar.s60 { width: 60px; height: 60px; }
.avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.avatar > svg { display: block; width: 100%; height: 100%; }   /* the stand-in silhouette (talks.js) */
.avatar.on:has(img)::after { content: ""; position: absolute; inset: 0; background: var(--accent-primary); mix-blend-mode: multiply; }   /* duotone: black → brand */
.avatar.on { background: var(--brand-900); }
.avatar.on > svg * { fill: var(--brand-600); }
.avatar.globe { background: none; color: var(--accent-primary); }
.avatar.globe > svg { width: 100%; height: 100%; }
.avatars { display: grid; gap: 16px; }

/* a kudos line: the avatar and one or two lines of text; names in Bold accent */
.kudos { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.kudos.row { flex-direction: row; align-items: center; }
.kudos .pair { display: flex; gap: 16px; }

/* ---------- CAPSULE NUMBER — the Talks ordinal: a black stadium with the numeral in RR Repose (Figma 68) ◇ ---------- */
.cap-num { display: inline-grid; place-items: center; width: 136px; height: 212px; border-radius: 68px; background: var(--base-950); color: var(--accent-primary);
  font: 400 var(--fs-word-display)/1 var(--font-display); letter-spacing: var(--tr-display-slot); font-variant-numeric: lining-nums; flex: none; }
.cap-num > span { display: block; transform: translateY(-0.04em); }
[data-theme="light"] .cap-num { background: var(--base-950); color: var(--brand-300); }

/* ---------- THE STAGE — index · heading · short lines (Figma 7: how it started / how it is going / where we are moving) ---------- */
.stage { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.stage > .m-label { margin-bottom: -12px; color: var(--text-secondary); }
.stage > .m-label.c-accent { color: var(--accent-primary); }
.stage > ul { display: flex; flex-direction: column; gap: 12px; }
.stage > ul > li { color: var(--text-secondary); }
.stage > ul > li > b { color: var(--text-primary); font-weight: 400; }

/* ---------- CORNERS — one decision for the whole deck (Elis 29.10.2026: «делать остро, скругления а-ля 4–8»):
   tiles, screens, cards and slots 8; small things 4 (contact-sheet pages, highlighted rows, legend bars, chart bars via
   --r-bar in deck.js); what bleeds off the frame is straight. Shapes keep their form: round avatars and nodes, pills and
   capsules (.cap-num, .pill, .cap-node, .capsule), app icons .icon-m, devices. The brand canon stays 16 / 36 ---------- */
:root { --r-tile: 8px; --r-s: 4px; --r-bar: 4px; }
.tile.r36, .mark-tile, .ui-card, .heat-widget { border-radius: var(--r-tile); }
.rowhot, .legend-heat { border-radius: var(--r-s); }
/* the prompt card of a slot (prompt-slots.js injects its own style, hence .slide) — a tile too; its chips and the copy button stay pills */
.slide .ph-card { border-radius: var(--r-tile); }
.tbl tr.hot td:first-child { border-radius: var(--r-s) 0 0 var(--r-s); } .tbl tr.hot td:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }

/* ---------- SCREENS — a screenshot is a tile: the deck radius (Figma 70, 82 retold by the corner rule); .r — the same, kept for old decks ---------- */
.shot { display: block; object-fit: cover; object-position: top left; background: var(--bg-surface); border-radius: var(--r-tile); overflow: hidden; }
.g24 > .shot { width: auto; height: auto; justify-self: stretch; align-self: stretch; }
.sheet .ph-plus { display: none; }
.shot.r { border-radius: var(--r-tile); }
.shot.ph { overflow: hidden; }
.shot.ph > .ph-plus { display: none; }
/* the contact sheet: 6 × 4 pages of 288 × 162 — every column is four grid columns (Figma 3) */
.sheet { display: grid; grid-template-columns: repeat(6, 288px); grid-auto-rows: 162px; gap: 16px; align-content: start; }
.sheet > * { width: 288px; height: 162px; object-fit: cover; object-position: top left; background: var(--bg-surface); border-radius: var(--r-s); }
/* a logo plate beside a screen: the client's mark on an inverse tile */
.logo-tile { display: grid; place-items: center; background: var(--bg-inverse); color: var(--bg-page); border-radius: var(--r-tile); padding: 24px; }
.logo-tile > img, .logo-tile > svg { max-width: 100%; max-height: 100%; }
/* what bleeds off the frame is straight: the plane, a full-bleed screen or slot */
.g24 > :is(.bleed, .bleed-l, .bleed-r, .bleed-t, .bleed-b) { border-radius: 0; }

/* ---------- THE SPLIT PLANE — the right half of the slide is the brand plane: from column 13 to the edge (Figma 79, 68).
   Text on the plane is text/on-accent — black on the green: white on #61E26B is 1.7 : 1 ◇ (in Figma it is white) ---------- */
.half-plane { background: var(--bg-accent); }

/* ---------- FIGURES — the month axis and the Talks figures drawn by talks.js into .chart[data-talk] (SVG, 1 unit = 1 px).
   Technical Infographics register: lines of one colour, one brand accent; the axis is a dotted hairline ---------- */
.chart[data-talk] { position: relative; }
.chart[data-talk] > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart[data-talk] text { font-family: var(--font-base); fill: var(--text-primary); }
.chart[data-talk] text.lead { font-size: var(--fs-lead); }
.chart[data-talk] text.sub { font-size: var(--fs-subhead); }
.chart[data-talk] text.cap { font-size: var(--fs-caption); }
.chart[data-talk] text.mono { font-family: var(--font-mono); font-size: var(--fs-caption-mono); }
.chart[data-talk] text.hot { fill: var(--accent-primary); }
.chart[data-talk] text.c2 { fill: var(--text-secondary); }
.chart[data-talk] text.mute { fill: var(--data-neutral); }
.chart[data-talk] .axis { stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; fill: none; }
.chart[data-talk] .axis.hot { stroke: var(--accent-primary); }
.chart[data-talk] .axis.quiet { stroke: var(--line-graphic); }
.chart[data-talk] .wire { stroke: var(--text-primary); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart[data-talk] .wire.hot { stroke: var(--accent-primary); }
.chart[data-talk] .wire.quiet { stroke: var(--line-graphic); }
.chart[data-talk] .drop { stroke: var(--line-graphic); stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; }
.chart[data-talk] .drop.hot { stroke: var(--accent-primary); }
.chart[data-talk] .node { fill: var(--text-primary); }
.chart[data-talk] .node.hot { fill: var(--accent-primary); }
.chart[data-talk] .node.ring { fill: none; stroke: var(--text-primary); stroke-width: 3; }
.chart[data-talk] .face { fill: var(--accent-subtle); }
.chart[data-talk] .face.page { fill: var(--bg-page); }
.chart[data-talk] .pict { fill: var(--text-primary); }
.chart[data-talk] .pict.mute { fill: var(--data-neutral); }
/* orbit nodes: HTML children of the host, placed on the ring by talks.js; the icon is Lucide (icon.mjs inline) */
.chart[data-talk="orbit"] > .onode { position: absolute; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-surface-2); color: var(--accent-primary); --icon-size: 36px; }
.chart[data-talk="orbit"] > .onode.hot { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent-primary); color: var(--bg-page); }
.chart[data-talk="orbit"] > .onode.hot::before { content: ""; width: 60px; height: 60px; border-radius: 50%; background: var(--brand-500); grid-area: 1 / 1; }
.chart[data-talk="orbit"] > .onode.hot::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--base-50); grid-area: 1 / 1; }
.chart[data-talk="orbit"] > .onode > svg, .chart[data-talk="orbit"] > .onode > i { width: 36px; height: 36px; }

/* ---------- GRID CHILDREN of fixed size sit on the top-left lines of their area (the lint checks only the anchored edges) ---------- */
.g24 > .mark, .g24 > .reporter, .g24 > .avatar, .g24 > .cap-num, .g24 > .kudos, .g24 > .product { justify-self: start; align-self: start; }
.product { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* the agenda: one row = two grid rows (pitch 123); index · speaker · topic on the lines of columns 3 and 11 */
.rows2 { display: grid; grid-auto-rows: 123px; align-content: start; }
.rows2 > div { display: grid; grid-template-columns: 136px 592px 1fr; gap: 16px; align-items: baseline; }
.agenda { display: flex; flex-direction: column; gap: 24px; }
.agenda > p > b { display: block; }
/* the knockout under an axis label: the dotted line stops before the word and goes on after it */
.chart[data-talk] text.knock { paint-order: stroke; stroke: var(--bg-page); stroke-width: 14px; stroke-linejoin: round; }

/* ---------- DECISIONS OF ELIS 28.10.2026 ---------- */
/* caps are allowed in Talks: stage headings in Bering and the agenda in mono, as on her slides (RR Repose is unicase by itself) */
.caps { text-transform: uppercase; }
.m-label.caps, .m-caption.caps { letter-spacing: 0.04em; }
/* the second accent — pink F97C94: the second data series and the second highlight; no third colour */
.c-accent-2 { color: var(--accent-secondary); }
.hl-accent.hl-2 { color: var(--accent-secondary); }
.chart[data-talk] text.hot2 { fill: var(--accent-secondary); }
.chart[data-talk] .node.hot2 { fill: var(--accent-secondary); }
.chart[data-talk] .wire.hot2 { stroke: var(--accent-secondary); }
/* the split plane as on her slides (Figma 79): the title on the green is light; a deliberate exception of the editor —
   contrast 1.7 : 1, marked data-contrast-free for the lint; «запомни, что вдруг что поправим» */
.on-plane.text-light, .plane .text-light { color: var(--base-50); --text-primary: var(--base-50); }
/* Talks icons: Iconoteka filled glyphs from Elis's slides (assets/icons), beside Lucide */
.ic.ik { stroke: none; fill: currentColor; }
.ic.ik * { vector-effect: none; }
/* a stage list with icon bullets (Figma 7): the icon sits on the first line, the text wraps beside it */
.stage > ul > li { display: flex; gap: 12px; align-items: flex-start; }
.stage > ul > li > .ic { flex: none; width: 32px; height: 32px; margin-top: 4px; color: var(--text-secondary); }
/* a month figure may also be a picture (Elis: «включить»): an exported drawing from Figma or a hand-drawn one in the chart host */
.chart[data-talk] > img, .figure > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* screenshot stand-ins of the template are not prompt slots: a screenshot is a real file */
.shot.empty, .sheet > .empty { background: var(--bg-surface); }
/* motion: SVG parts scale about their own centre; steps start hidden only in present mode (talks-motion.js) */
.chart[data-talk] svg * { transform-box: fill-box; transform-origin: center; }