/* The idea-check lab: black page, purple and yellow only as accents (thin lines, highlights, key numbers), green and
   red only as small plus/minus marks. A history rail and one reading column: the form, the task list, then the report
   as a timeline — the total's ring on top, a spine down the left, every section a collapsed node on it. */
:root {
  color-scheme: dark;
  --bg: #000;
  --raise: #0b0912;
  --tint: rgba(148, 102, 240, 0.07);
  --tint-strong: rgba(148, 102, 240, 0.14);
  --line: rgba(148, 102, 240, 0.36);
  --hair: rgba(255, 255, 255, 0.09);
  --text: #f4f1fa;
  --muted: #b9b1cc;
  --faint: #7e7795;
  --purple: #9466f0;
  --purple-text: #b583ff;
  --yellow: #ffc233;
  --yellow-tint: rgba(255, 194, 51, 0.1);
  --on-yellow: #15100a;
  --good: #34d399;
  --bad: #f87171;
  /* MP41 SUB-13 (D41-13): the one status vocabulary's tones (status-model.js) — running violet, the person's turn yellow */
  --st-run: #b583ff;
  --st-wait: var(--yellow);
  --st-done: var(--good);
  --st-fail: var(--bad);
  --st-idle: var(--faint);
  /* MP52 SUB-8: the colours as triples for `rgb(var(--x) / a)` — the rules' literals routed through them; the team space's
     light set (`html[data-base='light']`) redefines every one. `--shade-t` shadows, `--ground-t` the page's own ground under
     a scrim, `--veil-t` the picture's veil and the glass panes, `--ink-t` the hairlines and hover tints of the ground. */
  --ink-t: 255 255 255;
  --shade-t: 0 0 0;
  --ground-t: 0 0 0;
  --veil-t: 5 4 10;
  --purple-t: 148 102 240;
  --violet-t: 124 58 237;
  --lilac-t: 181 131 255;
  --lavender-t: 167 139 250;
  --yellow-t: 255 194 51;
  --warn-t: 250 204 21;
  --good-t: 52 211 153;
  --bad-t: 248 113 113;
  --surface: #0d0b14;
  --text-hi: #fff;
  --panel-t: 18 18 18;
  --surface-t: 13 11 20;
  --glass-t: 16 14 24;
  --pane-t: 6 5 11;
  --pane-2-t: 10 8 18;
  --night-t: 5 4 4;
  /* 2026-10-21: the gift's inks on the CTA's own green fill (its dark price chip, its dark disc) — the fill is the same in
     both bases, so the light set repeats them */
  --gift-ink: #bbf7d0;
  --gift-mark: #fde68a;
  /* MP52 SUB-8 (D52-15): the team's look — THREE client-set properties (`team-look.js` on <html>), everything else derived
     here; the defaults are the product's own (the purple button, the purple-text links). Used SPARINGLY: links, the
     primary buttons, the map's accent, the panel's selected marks — never a semantic colour. */
  --brand-t: 124 77 219;
  --on-brand: #fff;
  --accent-t: 181 131 255;
  --brand: rgb(var(--brand-t));
  --accent: rgb(var(--accent-t));
  --accent-tint: rgb(var(--accent-t) / 0.08);
  --accent-line: rgb(var(--accent-t) / 0.36);
  --team-ac: var(--accent-t);
  --team-on-ac: 29 21 41;
  --radius: 14px;
  --spine: 88px;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Segoe UI Variable Display', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, [data-tip]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
p { margin: 0; max-width: 72ch; }
button { font: inherit; }
.num, td.n { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 13px; }
.label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.y { color: var(--yellow); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* shell */
.shell { min-height: 100vh; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.brand b { color: var(--yellow); }
main { padding-inline: 32px; padding-block: 28px 96px; min-width: 0; }
.column { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* Grid children may not grow past their track: long tables and pre blocks scroll inside their own box. */
.column > *, .sec-body > *, .hero > *, .panel > * { min-width: 0; }
@media (max-width: 860px) {
  main { padding-inline: 16px; }
}

/* form */
.form { border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 12px; }
.form h1 { font-size: 22px; }
.form textarea { width: 100%; min-height: 96px; resize: vertical; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; font: inherit; }
.form textarea:focus { border-color: var(--line); outline: none; }
.form .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
select { background: var(--bg); color: var(--text); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow); color: var(--on-yellow); border: 0; border-radius: 999px; padding: 11px 22px; font: 700 15px var(--font-display); cursor: pointer; white-space: nowrap; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--purple-text); border: 1px solid var(--line); padding: 6px 14px; font-size: 13px; font-weight: 600; }
.btn.ghost:hover { border-color: var(--purple-text); }
.error { color: var(--bad); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; color: var(--muted); white-space: nowrap; }
.chip.on { color: var(--text); }
.chip.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.chip.off { color: var(--faint); }
.chip.off::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.chip.warn { border-color: var(--yellow); color: var(--yellow); }

/* progress */
.progress { border: 1px solid var(--hair); border-radius: var(--radius); padding: 12px 18px; display: grid; gap: 10px; }
.progress > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.progress > summary::-webkit-details-marker { display: none; }
.progress > summary h2 { font-size: 15px; }
.progress > summary .more { color: var(--accent); font-size: 13px; margin-left: auto; }
.progress[open] > summary .more::after { content: ' — свернуть'; }
.tasks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 14px; }
.tasks li { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr) 70px 84px; gap: 8px; align-items: baseline; }
.tasks .st { text-align: center; }
.tasks .st.done { color: var(--good); }
.tasks .st.failed { color: var(--bad); }
.tasks .st.skipped { color: var(--faint); }
.tasks .st.running { color: var(--yellow); }
.tasks .note { grid-column: 3 / -1; font-size: 12px; color: var(--faint); }
@media (prefers-reduced-motion: no-preference) { .tasks .st.running { animation: pulse 1s ease-in-out infinite alternate; } }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* the journey: the project's stages on one line; the check (stage 1) carries its total's ring and its own sub-line */
.journey { position: relative; display: grid; --mk: var(--spine); --mk-gap: 18px; }
.journey::before { content: ''; position: absolute; left: calc(var(--spine) / 2); top: 44px; bottom: 34px; width: 1px; background: var(--line); }
.title-block { display: grid; gap: 10px; }
.stage1 { display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 0 18px; padding-bottom: 14px; }
.ring-col { position: relative; display: grid; justify-items: center; align-self: start; z-index: 3; }
.stage-main { display: grid; gap: 6px; min-width: 0; }
.hero-main { display: grid; gap: 12px; align-content: start; padding-bottom: 14px; }
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; }
.ring { width: 88px; height: 88px; display: block; background: var(--bg); border-radius: 50%; }
.ring .track { fill: none; stroke: var(--hair); stroke-width: 6; }
.ring .val { fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; }
.ring.go .val { stroke: var(--good); }
.ring.rethink .val { stroke: var(--bad); }
.ring.insufficient .track { stroke: var(--line); stroke-dasharray: 4 5; }
.ring text { fill: var(--text); font-family: var(--font-display); font-weight: 700; }
.ring .sub { fill: var(--faint); font-weight: 400; font-family: var(--font-body); }
.pill { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-family: var(--font-display); border-radius: 999px; padding: 3px 14px; font-size: 15px; border: 1px solid currentColor; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.caveats { color: var(--yellow); }
.pill.go { color: var(--good); }
.pill.rethink { color: var(--bad); }
.pill.insufficient { color: var(--muted); border-style: dashed; }
.reason { font-size: 16px; }
.unmeasured { font-size: 13px; color: var(--muted); }
.unmeasured b { color: var(--yellow); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--hair); border-radius: 999px; padding: 3px 12px 3px 9px; font-size: 13px; color: var(--muted); }
.fact .ico { width: 15px; height: 15px; color: var(--purple-text); }
.fact b { color: var(--text); font-weight: 700; }
.spine-bar { display: flex; margin-top: 2px; }

/* the total's breakdown: a calculator-style tooltip by the ring */
.score-info { position: absolute; top: 0; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--purple-text); font: italic 700 14px/1 Georgia, 'Times New Roman', serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.score-info:hover, .score-info:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.score-tip { display: none; position: absolute; left: 0; top: 96px; z-index: 40; width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 18px 40px rgb(var(--shade-t) / 0.7); text-align: left; }
.ring-col:hover .score-tip, .score-info:focus-visible + .score-tip, .ring-col.tip-open .score-tip { display: grid; gap: 10px; }
.calc-rows { display: grid; }
.cr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 58px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.cr:first-child { border-top: 0; }
.cr-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--purple-text); background: var(--tint); }
.cr-ico .ico { width: 16px; height: 16px; }
.cr-f { color: var(--muted); font: 12.5px var(--font-mono); white-space: nowrap; }
.cr-p { text-align: right; color: var(--yellow); font: 700 15px var(--font-display); }
.cr.off { opacity: 0.5; }
.cr.off .cr-f { font-family: var(--font-body); }
.cr.off .cr-p { color: var(--faint); }
.cr.sum { border-top: 1px solid var(--line); font-weight: 700; }
.cr.sum .cr-p { font-size: 20px; }
.cr-kill { color: var(--bad); font-size: 13px; }
.cr-facts { font-size: 12px; color: var(--faint); line-height: 1.5; }

/* nodes: the stages on the journey line, the sections on the check's sub-line */
.node { position: relative; scroll-margin-top: 16px; }
.node > details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: var(--mk) minmax(0, 1fr) auto; gap: 0 var(--mk-gap); align-items: center; padding: 8px 0; border-radius: 12px; }
.node > details > summary::-webkit-details-marker { display: none; }
.node > details > summary:hover .t { color: var(--yellow); }
.mark { display: grid; place-items: center; position: relative; z-index: 1; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--purple-text); }
.node > details[open] .dot { background: var(--purple-text); }
.mini { width: 44px; height: 44px; display: block; background: var(--bg); border-radius: 50%; }
.mini .track { fill: var(--bg); stroke: var(--hair); stroke-width: 4; }
.mini .val { fill: none; stroke-width: 4; stroke-linecap: round; }
.mini.good .val { stroke: var(--good); }
.mini.mid .val { stroke: var(--yellow); }
.mini.bad .val { stroke: var(--bad); }
.mini.none .track { stroke: var(--faint); stroke-dasharray: 3 4; }
.mini text { fill: var(--text); font: 700 16px var(--font-display); }
.mini.none text { fill: var(--faint); }
/* A section's own score that is not in the total: an outline ring. */
.mini.side .track { stroke-width: 1.5; }
.mini.side .val { stroke-width: 2; }
.mini.side text { fill: var(--muted); font-size: 15px; }
.why-box.side { border-style: dashed; border-color: var(--hair); background: none; }
.sum { display: grid; gap: 1px; min-width: 0; }
.sum .t { font: 700 16.5px/1.3 var(--font-display); transition: color 0.12s; }
.sum .line { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { width: 22px; height: 22px; display: grid; place-items: center; color: var(--faint); transition: transform 0.15s; }
.node > details[open] > summary .chev { transform: rotate(90deg); color: var(--yellow); }
.sec-body { margin-left: calc(var(--mk) + var(--mk-gap)); padding: 6px 0 30px; display: grid; gap: 22px; }
.stage-mk { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--purple-text); color: var(--purple-text); font: 700 14px var(--font-display); }
.stage-mk.concept { border-color: var(--yellow); color: var(--yellow); }
.node.stage > details[open] .stage-mk { background: var(--purple-text); color: var(--bg); }
.node.stage.concept > details[open] .stage-mk { background: var(--yellow); color: var(--on-yellow); }
.node.stage > details > summary { padding: 10px 0; }
.node.end > details .dot, .node.end > details[open] .dot { width: 24px; height: 24px; border-color: var(--yellow); background: var(--yellow); box-shadow: 0 0 0 7px var(--yellow-tint); }
/* locked stages: grey until a paid step opens them, their files already visible */
.stage-mk.locked { position: relative; border: 1.5px dashed var(--faint); color: var(--faint); }
.stage-mk .lk { position: absolute; right: -5px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hair); display: grid; place-items: center; color: var(--faint); }
.stage-mk.concept .lk { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.4); }
.stage-mk .lk .ico { width: 10px; height: 10px; stroke-width: 2; }
.node.stage.locked > details[open] .stage-mk, .node.stage.concept.locked > details[open] .stage-mk { background: var(--bg); color: var(--text); border-style: solid; border-color: var(--purple-text); }
.node.stage.locked .sum .t { color: var(--muted); }
.unlock { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; color: var(--purple-text); }
.unlock .ico { width: 13px; height: 13px; }
.unlock.concept { color: var(--yellow); }
.arts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.art { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--hair); border-radius: 8px; padding: 3px 9px 3px 6px; line-height: 1.3; }
.art .ico { width: 15px; height: 15px; color: var(--purple-text); }
.art .ext { font: 700 12px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border-right: 1px solid var(--hair); padding-right: 6px; }

/* the open questions as research cards, grouped by the paid step that answers them */
.answer-groups { display: grid; gap: 18px; }
.ag { display: grid; gap: 10px; }
.ag.concept h3 { color: var(--yellow); }
.ag.package h3 { color: var(--purple-text); }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rcard { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; align-content: space-between; background: rgb(var(--ground-t) / 0.35); }
.ag.concept .rcard { border-color: rgb(var(--yellow-t) / 0.25); }
.rq { font-size: 14.5px; line-height: 1.5; display: flex; gap: 8px; align-items: baseline; }
.q-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.q-dot.q-yellow { background: var(--yellow); } .q-dot.q-purple { background: var(--purple-text); } .q-dot.q-green { background: var(--good); }
.rflow { display: grid; gap: 2px; justify-items: start; font-size: 12.5px; color: var(--muted); }
.rstep, .rres { display: inline-flex; gap: 6px; align-items: center; border-radius: 8px; padding: 3px 9px 3px 7px; }
.rstep { border: 1px dashed var(--hair); }
.rres { border: 1px solid var(--line); color: var(--text); }
.rres b { font-weight: 600; }
.rstep .ico, .rres .ico { width: 14px; height: 14px; color: var(--purple-text); }
.rarrow { color: var(--faint); padding-left: 12px; line-height: 1.1; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
.checklist li::before { content: ''; width: 13px; height: 13px; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 4px; }
.stage-cost { color: var(--muted); }
.stage-cost b { font: 700 18px var(--font-display); color: var(--text); }
.with-us { font-weight: 600; }
.with-us.concept { color: var(--yellow); }
.with-us.package { color: var(--purple-text); }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.vs-col { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.vs-col.us { background: var(--yellow-tint); border-left: 1px solid rgb(var(--yellow-t) / 0.3); }
.vs-v { font: 700 24px/1.2 var(--font-display); }
.vs-col.us .vs-v { color: var(--yellow); }
@media (max-width: 640px) {
  :root { --spine: 48px; }
  .journey::before { top: 140px; }
  .stage1 { grid-template-columns: 1fr; position: relative; z-index: 2; background: var(--bg); }
  .ring-col { justify-items: start; justify-self: start; }
  .ring { width: 80px; height: 80px; }
  .score-info { right: -30px; }
  .score-tip { top: 88px; }
  .hero-main { padding-top: 12px; }
  .journey { --mk-gap: 12px; }
  .mini { width: 38px; height: 38px; }
  .sec-body { margin-left: 0; padding-top: 4px; position: relative; z-index: 1; background: var(--bg); }
  .sum .line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vs { grid-template-columns: 1fr; }
  .vs-col.us { border-left: 0; border-top: 1px solid rgb(var(--yellow-t) / 0.3); }
  .cr { grid-template-columns: 28px minmax(0, 1fr) auto 48px; gap: 8px; }
}

/* «откуда балл» */
.why-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 10px; background: linear-gradient(180deg, var(--tint), transparent); }
.why-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.why-head .pts { font: 700 18px var(--font-display); color: var(--yellow); }
.why-parts { display: grid; gap: 0; }
.why-part { display: grid; grid-template-columns: minmax(120px, 0.9fr) minmax(70px, auto) minmax(0, 2fr); gap: 4px 16px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13.5px; align-items: baseline; }
.why-part b { font-weight: 600; white-space: nowrap; }
.why-part .n { color: var(--muted); font-size: 12.5px; }
@media (max-width: 560px) { .why-part { grid-template-columns: minmax(0, 1fr) auto; } .why-part .n { grid-column: 1 / -1; } }

/* sections content */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.panel { display: grid; gap: 12px; align-content: start; min-width: 0; }
.kpi { display: grid; gap: 2px; }
.kpi .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; }
.kpi .v small { font-size: 14px; color: var(--muted); font-weight: 400; }
.kpi .v.up small.delta { color: var(--good); }
.kpi .v.down small.delta { color: var(--bad); }
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(100px, 200px) minmax(0, 1fr) minmax(48px, auto); gap: 12px; align-items: center; font-size: 14px; }
.bar > span:first-child { color: var(--muted); }
.bar b { text-align: right; font-weight: 600; }
.bar b.none { color: var(--faint); font-weight: 400; font-size: 12px; white-space: nowrap; }
.meter { height: 4px; background: var(--hair); border-radius: 2px; overflow: hidden; display: block; }
.meter i { display: block; height: 100%; background: var(--purple); border-radius: 2px; }
.meter.good i { background: var(--good); }
.meter.bad i { background: var(--bad); }
.meter.mid i { background: var(--yellow); }
.src { font-size: 12px; color: var(--purple-text); vertical-align: super; margin-left: 3px; font-family: var(--font-mono); white-space: nowrap; }
.empty { color: var(--faint); font-size: 14px; }
.empty::before { content: '— '; }
.segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.segs i { height: 4px; border-radius: 2px; background: var(--hair); }
.segs.good i.on { background: var(--good); }
.segs.mid i.on { background: var(--yellow); }
.segs.bad i.on { background: var(--bad); }
.stats { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.stat { display: grid; gap: 2px; }
.stat .v { font: 700 20px var(--font-display); }
.stat .v.none { font: 400 14px var(--font-body); color: var(--faint); line-height: 1.9; }

/* tooltips: hover, keyboard focus or tap */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; display: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 400 13px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 12px 28px rgb(var(--shade-t) / 0.6); pointer-events: none; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].tip-open::after { display: block; }

/* insight cloud */
.insights { display: grid; gap: 20px; padding: 24px 20px 20px; border: 1px solid var(--line); border-radius: 22px;
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--purple-t) / 0.16), transparent 62%), radial-gradient(60% 50% at 85% 100%, rgb(var(--yellow-t) / 0.06), transparent 70%); }
.cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; max-width: 860px; margin: 0 auto; }
.ins { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); color: var(--text); background: rgb(var(--ground-t) / 0.55); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 16px; cursor: pointer; line-height: 1.2; transition: border-color 0.15s, color 0.15s, transform 0.15s; }
.ins .dot-s { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-text); flex: none; }
.ins.plus .dot-s { background: var(--good); }
.ins.minus .dot-s { background: var(--bad); }
.ins.w1 { font-size: 14px; color: var(--muted); }
.ins.w2 { font-size: 17px; font-weight: 600; }
.ins.w3 { font-size: 22px; font-weight: 700; padding: 9px 20px; border-color: var(--line); }
.ins:hover, .ins:focus-visible { border-color: var(--purple-text); color: var(--text); }
.ins.active { border-color: var(--yellow); color: var(--yellow); }
@media (prefers-reduced-motion: no-preference) { .ins:hover { transform: translateY(-1px); } }
@media (max-width: 560px) {
  .insights { padding: 18px 12px 14px; }
  .ins.w3 { font-size: 18px; } .ins.w2 { font-size: 15px; } .ins.w1 { font-size: 13px; }
}

/* name and domains: free pairs in the centre, taken around */
.name-cloud { display: grid; gap: 18px; padding: 20px 18px 18px; border: 1px solid var(--hair); border-radius: 22px; background: radial-gradient(70% 80% at 50% 40%, rgb(var(--good-t) / 0.07), transparent 70%); }
.nm { font: 500 13px/1.2 var(--font-body); border-radius: 999px; padding: 5px 12px; border: 1px solid var(--hair); background: transparent; color: var(--faint); cursor: pointer; }
.nm.taken { text-decoration: line-through; text-decoration-color: rgb(var(--ink-t) / 0.25); }
.nm.unknown { border-style: dashed; color: var(--muted); }
.nm.free { font: 700 16px/1.2 var(--font-display); color: var(--good); border-color: rgb(var(--good-t) / 0.4); background: rgb(var(--good-t) / 0.06); padding: 7px 16px; }
.nm:hover, .nm:focus-visible { border-color: var(--purple-text); }
.nm.active { border-color: var(--yellow); }
.name-cloud .domains { margin-top: 2px; }

/* open questions */
.q-cloud { display: grid; gap: 16px; padding: 18px 18px 16px; border: 1px solid var(--hair); border-radius: 22px; background: radial-gradient(80% 90% at 50% 0%, rgb(var(--purple-t) / 0.1), transparent 70%); }
.q-cloud .legend { justify-content: center; }
.qn { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.35 var(--font-body); color: var(--text); background: rgb(var(--ground-t) / 0.5); border: 1px solid var(--hair); border-radius: 14px; padding: 7px 13px; cursor: pointer; text-align: left; max-width: 100%; }
.qn .dot-s, .q-cloud .legend i, .tone[class*='q-'] i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.qn.yellow .dot-s, i.q-yellow, .tone.q-yellow i { background: var(--yellow); }
.qn.purple .dot-s, i.q-purple, .tone.q-purple i { background: var(--purple-text); }
.qn.green .dot-s, i.q-green, .tone.q-green i { background: var(--good); }
.qn:hover, .qn:focus-visible { border-color: var(--purple-text); }
.qn.active { border-color: var(--yellow); }
.d-chip { font-size: 12.5px; color: var(--purple-text); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }

/* insight cards: signals */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* MP41 SUB-5: the folded check's «За / Против» (was the dead lab `.sig-cols`) — two columns from 641 px, one below */
.theses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; }
.col-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.col-h i { width: 8px; height: 8px; border-radius: 50%; }
.col-h.plus i { background: var(--good); }
.col-h.minus i { background: var(--bad); }
.card { position: relative; border: 1px solid var(--hair); border-radius: var(--radius); padding: 15px 18px 15px 50px; background: linear-gradient(180deg, rgb(var(--ink-t) / 0.025), transparent); }
.card:hover { border-color: var(--line); }
.card .mk { position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--font-display); }
.card.plus .mk { color: var(--good); background: rgb(var(--good-t) / 0.12); }
.card.minus .mk { color: var(--bad); background: rgb(var(--bad-t) / 0.12); }
.card p { font-size: 14.5px; line-height: 1.55; }

/* quotes: their own cards, no frame */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.quote { position: relative; display: grid; gap: 10px; align-content: space-between; background: var(--tint); border-radius: 16px; padding: 30px 18px 14px; margin: 0; }
.quote::before { content: '\201C'; position: absolute; left: 14px; top: 2px; font: 700 44px/1 Georgia, 'Times New Roman', serif; color: var(--yellow); opacity: 0.9; }
.quote q { quotes: none; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.quote .from { font-size: 12px; color: var(--faint); }
.quote .from .tagline { color: var(--purple-text); }

/* TAM / SAM / SOM */
.funnel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px; align-items: center; }
.funnel svg { width: 100%; height: auto; display: block; }
.f-tam { fill: rgb(var(--purple-t) / 0.05); stroke: var(--purple); stroke-width: 1.2; }
.f-sam { fill: rgb(var(--purple-t) / 0.1); stroke: var(--purple-text); stroke-width: 1.2; }
.f-som { fill: rgb(var(--yellow-t) / 0.14); stroke: var(--yellow); stroke-width: 1.4; }
.f-miss { fill: none; stroke: var(--faint); stroke-dasharray: 4 5; }
.f-k { fill: var(--faint); font: 600 10px var(--font-body); letter-spacing: 0.14em; }
.f-v { fill: var(--text); font: 700 16px var(--font-display); }
.f-v.small { font-size: 13px; }
.f-v.none { fill: var(--faint); font: 400 12px var(--font-body); }
.f-list { display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.f-row .k { font: 700 12px var(--font-display); letter-spacing: 0.12em; color: var(--purple-text); }
.f-row.som .k { color: var(--yellow); }
.f-row .v { font: 700 22px/1.2 var(--font-display); }
.f-row .v.none { font: 400 15px var(--font-body); color: var(--faint); }
.f-row .cap { grid-column: 2; font-size: 13px; color: var(--muted); line-height: 1.5; }
.f-row .cap.assume { color: var(--faint); font-size: 12px; }
.f-row .formula { grid-column: 2; font-size: 12px; color: var(--faint); font-family: var(--font-mono); line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 640px) { .funnel { grid-template-columns: 1fr; } .funnel svg { max-width: 280px; margin: 0 auto; } }

/* what people search */
.serp-group { display: grid; gap: 10px; }
.serp-group + .serp-group { margin-top: 12px; }
.serp-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; }
.serp-head .title { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--font-display); }
.queries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.queries li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--hair); border-radius: 999px; padding: 6px 8px 6px 7px; }
.queries li:hover { border-color: var(--line); }
.queries .ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queries .ph::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 9px; vertical-align: -1px; border: 1.5px solid var(--faint); border-radius: 50%; box-shadow: 3px 3px 0 -2px var(--faint); opacity: 0.8; }
.queries .vol { font-weight: 600; white-space: nowrap; font-size: 14px; }
.queries .vol small { color: var(--faint); font-weight: 400; font-size: 12px; margin-left: 2px; }
.queries .vol.none { color: var(--faint); font-weight: 400; }
.queries .it { font-size: 12px; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; white-space: nowrap; margin-right: 4px; }
.queries .it.buy { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.35); }
.eng { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-display); flex: none; }
.eng.ya { background: var(--yellow); color: var(--on-yellow); }
.eng.g { border: 1px solid var(--purple-text); color: var(--purple-text); }
@media (max-width: 560px) {
  .queries li { grid-template-columns: 26px minmax(0, 1fr) auto; border-radius: 16px; }
  .queries .it { grid-column: 2 / -1; justify-self: start; }
}
.stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.stack span { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.legend b { color: var(--text); font-weight: 600; margin-left: 4px; }
.k0 { background: var(--yellow); } .k1 { background: var(--purple-text); } .k2 { background: var(--good); } .k3 { background: #6b5aa8; } .k4 { background: var(--faint); }

/* competitors: a ranking by search visibility */
.board { display: grid; gap: 10px; }
.rival { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 2fr); gap: 6px 18px; border: 1px solid var(--hair); border-radius: 18px; padding: 16px 18px; }
.rival:hover { border-color: var(--line); }
.rival.top { border-color: var(--line); background: linear-gradient(90deg, rgb(var(--purple-t) / 0.08), transparent 60%); }
.rival .rank { font: 700 22px/1 var(--font-display); color: var(--faint); padding-top: 2px; }
.rival.top .rank { color: var(--yellow); }
.rival .who { display: grid; gap: 6px; align-content: start; min-width: 0; }
.rival .who .name { font: 700 17px/1.25 var(--font-display); overflow-wrap: anywhere; }
.rival .who .name a { color: var(--text); }
/* MP52 SUB-9: the site's logo before its brand name, the domain under it */
.rival .who .name .fav { display: inline-grid; vertical-align: -5px; margin-right: 8px; }
.rival .who .rival-host { font-size: 12.5px; margin-top: -4px; }
.rival .who .promise { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rival .badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge { font-size: 12px; border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; color: var(--muted); white-space: nowrap; }
.badge.direct { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.35); }
.badge.off { border-style: dashed; color: var(--faint); }
.rival .params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.param { display: grid; gap: 3px; min-width: 0; align-content: start; }
.param .l { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.param .v { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.param .v.none { color: var(--faint); font-weight: 400; }
.param .meter { margin-top: 3px; }
.vis .meter i { background: var(--yellow); }
.sim .meter i { background: var(--purple-text); }
@media (max-width: 760px) {
  .rival { grid-template-columns: 28px minmax(0, 1fr); padding: 14px; }
  .rival .rank { font-size: 19px; }
  .rival .params { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--hair); }
}

/* uniqueness: the idea against its closest analogues */
.positioning { display: grid; gap: 4px; }
.pos-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); align-items: center; margin-bottom: 6px; }
.pos-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.pos-legend i.v-idea { background: rgb(var(--yellow-t) / 0.35); border: 1px solid var(--yellow); }
.pos-legend i.v-rival { background: rgb(var(--purple-t) / 0.35); border: 1px solid var(--purple-text); }
.pos-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hair); }
.venn { width: 112px; height: 56px; display: block; }
.venn .v-idea { fill: rgb(var(--yellow-t) / 0.16); stroke: var(--yellow); stroke-width: 1.2; }
.venn .v-rival { fill: rgb(var(--purple-t) / 0.18); stroke: var(--purple-text); stroke-width: 1.2; mix-blend-mode: screen; }
.pos-main { display: grid; gap: 8px; min-width: 0; }
.pos-head { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; justify-content: space-between; }
.pos-head b { font: 700 16px var(--font-display); }
.pos-head .num { font-size: 13px; color: var(--muted); }
.pos-head .num .y { font: 700 18px var(--font-display); }
.pos-line { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.pos-line .l { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.token { font-size: 12.5px; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--hair); color: var(--muted); }
.token.shared { border-style: dashed; }
.token.diff { color: var(--purple-text); border-color: var(--line); }
.token.own { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.45); background: var(--yellow-tint); font-size: 14px; padding: 4px 13px; font-weight: 600; }
@media (max-width: 560px) { .pos-row { grid-template-columns: 1fr; gap: 8px; } .pos-line { grid-template-columns: 1fr; gap: 4px; } }

/* complexity: icon rows, a requirements checklist, the first version on a timeline */
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cx-row { display: grid; grid-template-columns: 34px minmax(90px, 140px) minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.cx-row:first-child { border-top: 0; }
.cx-row b { text-align: right; font-weight: 700; }
.cx-ico, .req-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--purple-text); background: var(--tint); }
.req { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.req li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.req li .req-ico { color: var(--yellow); background: var(--yellow-tint); }
.req-none { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.req-none .ico { color: var(--good); }
.mvp-tl { display: grid; gap: 12px; padding-top: 4px; }
.tl-track { position: relative; height: 26px; border-bottom: 1px solid var(--hair); margin: 0 6px; }
.tl-seg { position: absolute; bottom: 8px; height: 8px; border-radius: 4px; background: var(--yellow); }
.tl-tick { position: absolute; bottom: -4px; width: 1px; height: 7px; background: var(--faint); }
.tl-tick span { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--faint); }
.tl-cap { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 14px; }
.tl-cap b { font: 700 18px var(--font-display); color: var(--yellow); }

/* risks: likelihood × impact */
.risk-wrap { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 28px; align-items: start; }
.matrix { display: grid; grid-template-columns: 18px repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)) 18px; gap: 4px; aspect-ratio: 1 / 1; }
.matrix .cell { border-radius: 10px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; padding: 4px; }
.h1 { background: rgb(var(--purple-t) / 0.06); } .h2 { background: rgb(var(--purple-t) / 0.13); } .h3 { background: rgb(var(--yellow-t) / 0.1); }
.h4 { background: rgb(var(--yellow-t) / 0.18); } .h6 { background: rgba(255, 160, 80, 0.22); } .h9 { background: rgb(var(--bad-t) / 0.28); }
.matrix .ax-y { grid-row: 1 / 4; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); text-align: center; }
.matrix .ax-x { grid-row: 4; grid-column: 2 / 5; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); text-align: center; }
.rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-display); background: var(--bg); color: var(--text); border: 1px solid var(--text); }
.risk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.risk-list li { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hair); }
.risk-list li:first-child { border-top: 0; }
.risk-list .kind { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.risk-list p { font-size: 14.5px; }
.risk-list .fix { font-size: 13px; color: var(--muted); margin-top: 4px; }
.risk-list .fix b { color: var(--good); font-weight: 600; }
.risk-list .req-ico { color: var(--bad); background: rgb(var(--bad-t) / 0.1); }
@media (max-width: 640px) { .risk-wrap { grid-template-columns: 1fr; } .matrix { max-width: 280px; } }
.graves { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.grave { border: 1px solid var(--hair); border-radius: 90px 90px 14px 14px / 60px 60px 14px 14px; padding: 24px 16px 14px; display: grid; gap: 8px; text-align: center; align-content: start; background: linear-gradient(180deg, rgb(var(--ink-t) / 0.03), transparent 70%); }
.grave b { font: 700 15px var(--font-display); }
.grave .yrs { font-size: 12px; color: var(--faint); font-family: var(--font-mono); }
.grave q { quotes: none; font-size: 13px; color: var(--muted); line-height: 1.5; font-style: italic; }
.grave .from { font-size: 12px; color: var(--faint); }

/* development paths: three branches out of the idea */
.tree { display: grid; justify-items: center; gap: 0; }
.root { max-width: 560px; text-align: center; border: 1px solid var(--yellow); border-radius: 16px; padding: 10px 16px; font: 600 14.5px/1.45 var(--font-display); background: var(--yellow-tint); }
.root-stem { width: 1px; height: 22px; background: var(--line); }
.branches { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; width: 100%; padding-top: 22px; }
.branches::before { content: ''; position: absolute; top: 0; left: calc(100% / (var(--n, 3) * 2)); right: calc(100% / (var(--n, 3) * 2)); height: 1px; background: var(--line); }
.branch { position: relative; border: 1px solid var(--hair); border-radius: 18px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.branch::before { content: ''; position: absolute; top: -23px; left: 50%; width: 1px; height: 22px; background: var(--line); }
.branch:hover { border-color: var(--line); }
.branch .n { font: 700 12px var(--font-display); color: var(--yellow); letter-spacing: 0.1em; text-transform: uppercase; }
.branch h3 { color: var(--text); font-size: 16.5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.branch p { font-size: 13.5px; }
.branch .rides { color: var(--text); }
.branch .rides .k { color: var(--yellow); }
.branch .k { color: var(--faint); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; display: block; }
@media (max-width: 760px) {
  .tree { justify-items: stretch; }
  .root { text-align: left; }
  .root-stem { margin-left: 18px; }
  .branches { grid-template-columns: 1fr; padding-top: 0; padding-left: 36px; }
  .branches::before { left: 18px; right: auto; top: 0; bottom: 30px; width: 1px; height: auto; }
  .branch::before { top: 28px; left: -18px; width: 18px; height: 1px; }
}

/* the concept: the end of the timeline */
.concept-end { border: 1px solid var(--yellow); border-radius: 22px; padding: 22px; display: grid; gap: 18px; background: radial-gradient(90% 120% at 0% 0%, rgb(var(--yellow-t) / 0.1), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgb(var(--purple-t) / 0.12), transparent 70%); }
.concept-end .top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.concept-end h2 { font-size: 22px; }
.concept-end .price { font: 700 15px var(--font-display); color: var(--muted); }
.concept-end .price b { color: var(--yellow); font-size: 24px; }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.answers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14.5px; }
.answers li span.d { font-size: 12px; color: var(--purple-text); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
@media (max-width: 560px) { .answers li { grid-template-columns: 1fr; } .answers li span.d { justify-self: start; } .concept-end .btn { width: 100%; } }

/* unit economics calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; }
.calc-in { display: grid; gap: 4px; align-content: start; }
.field { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); }
.field:first-child { border-top: 0; }
.field label { font-size: 14px; }
.field label small { color: var(--faint); }
.field input[type='number'], .field input[type='text'] { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 10px; padding: 6px 10px; font: 600 15px var(--font-body); text-align: right; font-variant-numeric: tabular-nums; }
.field input[type='text']:focus { border-color: var(--line); outline: none; }
.field input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: var(--yellow); height: 18px; margin: 0; }
.field .from { grid-column: 1 / -1; font-size: 12px; color: var(--faint); }
.field .preset { grid-column: 1 / -1; justify-self: start; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calc-out { display: grid; gap: 14px; align-content: start; }
.outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.out { padding: 10px 12px 10px 0; display: grid; gap: 2px; border-bottom: 1px solid var(--hair); }
.out .v { font: 700 20px var(--font-display); }
.out.hl .v { color: var(--yellow); }
.gauge { display: grid; gap: 6px; }
.gauge .g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gauge .g-head b { font: 700 22px var(--font-display); }
.gauge .g-track { position: relative; height: 8px; border-radius: 4px; background: var(--hair); }
.gauge .g-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--purple-text); }
.gauge .g-fill.good { background: var(--good); } .gauge .g-fill.mid { background: var(--yellow); } .gauge .g-fill.bad { background: var(--bad); }
.gauge .g-line { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); border-radius: 1px; }
.gauge .g-note { font-size: 12px; color: var(--faint); }
.cash { width: 100%; height: auto; display: block; }
.cash .zero { stroke: var(--faint); stroke-dasharray: 3 3; }
.cash .curve { fill: none; stroke: var(--yellow); stroke-width: 2; }
.cash .neg { fill: rgb(var(--bad-t) / 0.12); }
.cash .pos { fill: rgb(var(--good-t) / 0.1); }
.cash .lbl { fill: var(--faint); font: 12px var(--font-body); }
.cash .mark-pt { fill: var(--yellow); }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }

/* tables */
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
table.wide { min-width: 680px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
th:first-child, td:first-child { padding-left: 0; }
th { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
.ok { color: var(--good); font-weight: 700; }
.no { color: var(--bad); font-weight: 700; }
.part { color: var(--yellow); font-weight: 700; }
.gap { color: var(--on-yellow); background: var(--yellow); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* lists */
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.marks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.marks li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.marks .m { font-weight: 700; color: var(--purple-text); }
.prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.prices li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hair); padding-bottom: 6px; }
.prices li b { font-weight: 600; white-space: nowrap; }

svg.chart { width: 100%; height: auto; display: block; }
.c-axis { stroke: var(--hair); stroke-width: 1; }
.c-line { fill: none; stroke: var(--yellow); stroke-width: 2; }
.c-area { fill: var(--yellow); opacity: 0.08; }
.c-dot { fill: var(--yellow); }
.c-pt { fill: var(--purple-text); }
.c-med { stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-lbl { fill: var(--faint); font: 12px var(--font-body); }
.c-lbl-b { fill: var(--text); font: 600 12px var(--font-body); }

ol.qs { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; }
ol.qs li::marker { color: var(--yellow); font-weight: 700; }
.pass { border-left: 2px solid var(--yellow); padding-left: 12px; font-weight: 600; }
ol.src-list { margin: 0; padding-left: 28px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
ol.src-list li::marker { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }
ol.src-list span { color: var(--faint); }
.domains { display: flex; flex-wrap: wrap; gap: 5px; }
.dom { font-size: 12px; border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; white-space: nowrap; color: var(--faint); }
.dom.free { color: var(--good); border-color: rgb(var(--good-t) / 0.35); }
.dom.taken { text-decoration: line-through; }

/* estimate */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tile { padding: 12px 14px 12px 0; display: grid; gap: 2px; }
.tile .v { font: 700 24px var(--font-display); }
.tile:first-child .v { color: var(--yellow); }
tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
td.st-done { color: var(--good); } td.st-failed { color: var(--bad); } td.st-skipped { color: var(--faint); } td.st-running { color: var(--yellow); }
section.block { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--hair); }
.head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.head .meta { color: var(--faint); font-size: 13px; }
details.raw { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; }
details.raw summary { cursor: pointer; color: var(--purple-text); font-size: 13px; }
details.raw pre { margin: 8px 0 0; max-height: 420px; overflow: auto; font: 12px/1.45 var(--font-mono); color: var(--muted); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 560px) {
  .bar { grid-template-columns: minmax(0, 1fr) 56px minmax(40px, auto); gap: 8px; }
  .tasks li { grid-template-columns: 20px 40px minmax(0, 1fr) 60px; }
  .tasks li .usd { display: none; }
  .card { padding: 14px 14px 14px 46px; }
  .cx-row { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .cx-row .segs { grid-column: 2 / 3; }
  .field { grid-template-columns: minmax(0, 1fr) 104px; }
  .outs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- U26–U38 ---- */
/* stage 1: the total's ring on the line with the verdict, the facts and the insights beside it; its sections follow as rows */
.node.s1 { padding: 0 0 8px; }
/* Two columns: the ring sits on the line (the line runs on from under it), everything else beside it. */
.s1-grid { display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.s1-main { display: grid; gap: 10px; justify-items: start; min-width: 0; padding-top: 6px; }
.s1-main h1 { font-size: clamp(20px, 2.6vw, 27px); }
.s1-main .reason { font-size: 15.5px; max-width: 76ch; }
.fact { border-color: rgb(var(--ink-t) / 0.2); }

/* «откуда балл» behind an «i» by a section's ring */
.mark.has-tip { position: relative; }
.mark.has-tip:hover, .mark.tip-open { z-index: 40; }
.sec-info { position: absolute; top: -5px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--purple-text); font: italic 700 12px/1 Georgia, 'Times New Roman', serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sec-info:hover, .sec-info:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.sec-tip { display: none; position: absolute; left: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 80px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px rgb(var(--shade-t) / 0.7); text-align: left; cursor: default; }
.mark.has-tip:hover .sec-tip, .sec-info:focus-visible + .sec-tip, .mark.tip-open .sec-tip { display: grid; gap: 0; }
.tip-h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-bottom: 6px; }
.wr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13.5px; align-items: baseline; }
.wr b { font-weight: 600; white-space: nowrap; }
.wr .n { grid-column: 1 / -1; font-size: 12px; color: var(--faint); }
.wr.sum { border-top: 1px solid var(--line); }
.wr.sum b { color: var(--yellow); font: 700 15px var(--font-display); }
.wr.sum.off b { color: var(--faint); }

/* the concept for sale, right after the check */
.sale-mk { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); font-size: 18px; box-shadow: 0 0 0 7px var(--yellow-tint); }
.node.sale .sum .t { color: var(--yellow); }
.sale-arts { display: grid; gap: 10px; }
.sale-stage { display: grid; gap: 6px; }
.art .art-ico { width: 16px; height: 16px; color: var(--purple-text); }
.art { padding: 4px 10px 4px 7px; }
.node.quiet .quiet-row { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: center; padding: 12px 0; }
.dot.faint { border-color: var(--faint); }
.node.quiet .sum .t { color: var(--muted); font-size: 15px; }

/* unit economics: the results on top, the calculator behind a button */
.unit-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ut { padding: 14px 16px 14px 0; display: grid; gap: 6px; align-content: start; }
.ut .v { font: 700 26px/1.15 var(--font-display); }
.ut.hl .v { color: var(--yellow); }
.ut.gauge .g-head { display: grid; gap: 6px; }
.calc-more > summary { list-style: none; cursor: pointer; display: inline-block; }
.calc-more > summary::-webkit-details-marker { display: none; }
.calc-more .calc { margin-top: 18px; }

/* risks: the problem → the way to lower it; plain-word tags */
.risks { display: grid; gap: 10px; }
.risk { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 0 10px; align-items: stretch; }
.problem { border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.problem p { font-size: 14.5px; }
.to { align-self: center; text-align: center; color: var(--faint); font-size: 18px; }
.solution { border: 1px solid rgb(var(--good-t) / 0.28); background: rgb(var(--good-t) / 0.05); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.solution p { font-size: 14px; }
.solution .label { display: block; color: var(--good); margin-bottom: 2px; }
.bulb .art-ico { width: 22px; height: 22px; color: var(--yellow); }
.rtags { display: flex; flex-wrap: wrap; gap: 5px; }
.rtag { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--hair); color: var(--muted); }
.rtag.kind .ico { width: 12px; height: 12px; }
.rtag.hot { color: var(--bad); border-color: rgb(var(--bad-t) / 0.4); }
.rtag.warm { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.35); }
.rtag.calm { color: var(--faint); }
.closed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.closed li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.closed-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--ink-t) / 0.04); border: 1px solid var(--hair); color: var(--muted); }
.closed-ico .art-ico { width: 20px; height: 20px; }
.closed-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.closed-head b { font: 700 15px var(--font-display); }
.closed-why { color: var(--muted); font-size: 14px; font-style: italic; margin: 2px 0; }

/* development paths: cards with distinct parts, each can start its own check */
.branch { gap: 12px; cursor: pointer; }
.branch .bpart { display: grid; gap: 3px; }
.branch .bpart .k { margin: 0; }
.branch .bpart p { font-size: 14px; color: var(--text); }
.branch .bpart.why p { color: var(--muted); }
.branch .bpart.rides { border-left: 2px solid rgb(var(--yellow-t) / 0.5); padding-left: 10px; }
.branch .bpart.rides .k { color: var(--yellow); }
.branch .try { justify-self: start; margin-top: 4px; }
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgb(var(--ground-t) / 0.72); display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); }
.modal h2 { font-size: 20px; }
.modal textarea { width: 100%; min-height: 120px; resize: vertical; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; font: inherit; }
.modal textarea:focus { border-color: var(--line); outline: none; }
.modal .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.modal .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* MP46: the sheet of the ways to pay — one wide button each, its price at the right; a dissolve, no flying morph */
.pay-ways { display: grid; gap: 10px; }
.pay-way { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; text-align: left; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; cursor: pointer; transition: border-color 0.24s ease, background-color 0.24s ease; }
.pay-way:hover, .pay-way:focus-visible { border-color: rgb(var(--purple-t) / 0.8); background: rgb(var(--purple-t) / 0.08); outline: none; }
.pay-way-b { display: grid; gap: 2px; min-width: 0; }
.pay-way-b small { color: var(--muted, rgb(var(--ink-t) / 0.6)); font-size: 13px; }
.pay-way-price { white-space: nowrap; font: 700 15px var(--font-display); }
/* MP46 (D46-7): the receipt's address asked in the same sheet (no account email) */
.pay-email { display: grid; gap: 10px; }
.pay-email input { width: 100%; min-height: 48px; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; font: inherit; }
.pay-email input:focus { border-color: var(--line); outline: none; }
.pay-email input[aria-invalid="true"] { border-color: var(--bad); }

/* the sale's free alternative: pick a direction and check it */
.alt { display: grid; gap: 10px; border-top: 1px solid var(--hair); padding-top: 16px; }
.alt-list { display: grid; gap: 6px; }
.alt-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.alt-item:hover { border-color: var(--line); }
.alt-item:has(input:checked) { border-color: var(--purple-text); background: var(--tint); }
.alt-item input { accent-color: var(--yellow); margin-top: 3px; }
.alt-item > span { display: grid; gap: 2px; font-size: 14px; }
.alt-item .muted { font-size: 13px; }
.alt .btn { justify-self: start; }

/* U40–U44: the questions with answers and «Перегенерировать», the revision, the quiet lab link, insights in a modal */
.modal .tone { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: inline-flex; gap: 6px; align-items: center; }
.modal .tone i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-text); }
.modal .tone.plus i { background: var(--good); }
.modal .tone.minus i { background: var(--bad); }
.modal .actions { justify-self: start; }
.rev { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--yellow); border: 1px solid rgb(var(--yellow-t) / 0.35); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.rev a { color: var(--purple-text); }
/* U83/U84: the open questions — a plain list of rows: the kind's dot, the question wrapping in full, «есть ответ» once
   answered; a row opens the question's modal */
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qlist > li { min-width: 0; }
.q-row { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s; }
.q-row:hover { background: rgb(var(--ink-t) / 0.04); }
.q-row:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 0; background: rgb(var(--ink-t) / 0.04); }
.q-row .q-dot { transform: translateY(-2px); }
.qt { font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.qa-done { font-size: 12px; line-height: 1.5; color: var(--good); border: 1px solid rgb(var(--good-t) / 0.45); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.q-kind { display: inline-flex; gap: 7px; align-items: center; margin: -4px 0 0; }
.q-why { margin: 0; font-size: 14.5px; color: var(--muted); }
.modal .actions .btn { white-space: normal; text-align: center; }
.modal .actions .btn.ghost { padding: 10px 18px; font-size: 14px; }
.q-answer { width: 100%; min-height: 70px; resize: vertical; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; }
.q-answer:focus { border-color: var(--line); outline: none; }
.regen-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.calc-actions + .regen-row { margin-top: 10px; }
.lab-data { margin-top: 10px; display: grid; gap: 16px; position: relative; z-index: 1; }
/* the quiet link lines up with the content column, right of the spine */
.lab-data > summary { margin-left: calc(var(--spine) + 22px); }
.lab-data > summary { list-style: none; cursor: pointer; color: var(--faint); font-size: 12.5px; justify-self: start; border-bottom: 1px dashed var(--hair); }
.lab-data > summary::-webkit-details-marker { display: none; }
.lab-data > summary:hover { color: var(--purple-text); }

/* U47: the idea opens the line — a thought with a lightbulb; the line runs from the bulb down to the check's ring */
.journey::before { top: 28px; }
.origin { display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); gap: 0 22px; align-items: start; padding-bottom: 26px; }
.bulb-mk { justify-self: center; position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--yellow);
  background: radial-gradient(circle, rgb(var(--yellow-t) / 0.22), rgb(var(--yellow-t) / 0.06) 70%), var(--bg); border: 1px solid rgb(var(--yellow-t) / 0.55); box-shadow: 0 0 28px rgb(var(--yellow-t) / 0.22); }
.bulb-mk .art-ico { width: 26px; height: 26px; }
.thought { position: relative; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 28px; padding: 18px 22px 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgb(var(--yellow-t) / 0.08), transparent 55%), linear-gradient(180deg, rgb(var(--purple-t) / 0.12), rgb(var(--purple-t) / 0.03)); }
/* the thought's little bubbles towards the bulb */
.thought::before, .thought::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid var(--line); background: rgb(var(--purple-t) / 0.12); }
.thought::before { width: 11px; height: 11px; left: -15px; top: 24px; }
.thought::after { width: 6px; height: 6px; left: -23px; top: 34px; }
.thought .label { color: var(--yellow); }
.idea-own { font: 700 clamp(19px, 2.4vw, 25px)/1.35 var(--font-display); }
.understood { font-size: 13.5px; color: var(--muted); }
.s1-name { font: 700 19px/1.25 var(--font-display); color: var(--text); }

/* U48/U55: the fork — each pivot leaves the line at its own icon and ends in a card that re-checks it */

/* the short branch from the icon on the line to the card */

.pv-n { font: 700 12px var(--font-display); color: var(--yellow); letter-spacing: 0.08em; text-transform: uppercase; }
/* U63: hover or focus lights the whole path — the icon on the line, the branch, the card */

/* on hover or focus the arrow «leaves»: a short slide to the right, fading */

/* U48: the concept's padlock on the line; its two stages in a marked span of the line */
.lock-mk { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--yellow); border: 2px solid var(--yellow); box-shadow: 0 0 0 7px var(--yellow-tint); }
.lock-mk .ico { width: 18px; height: 18px; stroke-width: 2; }
.concept-span { position: relative; }
.concept-span::before { content: ''; position: absolute; left: calc(var(--spine) / 2 - 3px); top: 30px; bottom: 26px; width: 7px; border-radius: 4px; background: rgb(var(--yellow-t) / 0.16); border: 1px solid rgb(var(--yellow-t) / 0.3); }
.span-label { position: absolute; left: 2px; bottom: 34px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--yellow-t) / 0.7); white-space: nowrap; }

/* U49: from the padlock the line splits into «Сам» and «С нами» */
.split { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 24px; }
.split::before { content: ''; position: absolute; top: 0; left: calc(-1 * (var(--mk) / 2 + var(--mk-gap))); right: 25%; height: 1px; background: var(--line); }
.bcol { position: relative; display: grid; gap: 10px; align-content: start; border-radius: 18px; padding: 16px; min-width: 0; }
.bcol::before { content: ''; position: absolute; top: -24px; left: 50%; width: 1px; height: 24px; background: var(--line); }
.bcol.diy { border: 1px dashed var(--hair); }
.bcol.us { border: 1px solid var(--yellow); background: radial-gradient(90% 120% at 0% 0%, rgb(var(--yellow-t) / 0.09), transparent 60%); }
.bcol .label { font-size: 12px; }
.bcol.us > .label { color: var(--yellow); }
.bv { font: 700 26px/1.15 var(--font-display); }
.bcol.us .bv { color: var(--yellow); }
.bv small { font-size: 14px; color: var(--muted); font-weight: 400; }
.bstage { display: grid; gap: 6px; border-top: 1px solid var(--hair); padding-top: 10px; }
.bstage b { font: 700 14px var(--font-display); }
.answered { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.answered li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.unit-basis { font-size: 13.5px; color: var(--muted); }
.mine-tag { display: inline-block; font-size: 12px; color: var(--yellow); border: 1px solid rgb(var(--yellow-t) / 0.4); border-radius: 999px; padding: 0 9px; margin-right: 6px; }

/* U50: the end of the line — the product on the market */
.end-mk { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px dashed var(--faint); color: var(--faint); position: relative; z-index: 1; }
.end-mk .art-ico { width: 18px; height: 18px; }
.journey { padding-bottom: 4px; }

/* U51: the goal — the product on the market, where the line ends */
.node.goal { position: relative; }
/* the line stops at the goal's flag */
.node.goal::before { content: ''; position: absolute; left: 0; width: var(--mk); top: 64px; bottom: 0; background: var(--bg); }
.goal-card { display: grid; gap: 12px; border-radius: 22px; padding: 18px 20px; border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--purple-text), var(--yellow)) border-box; }
.goal-card > .label { color: var(--purple-text); }
.goal-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.goal-name { font: 700 28px/1.15 var(--font-display); }
.goal-name.small { font-size: 18px; line-height: 1.35; }
.goal-head .dom { font-size: 13px; }
.goal-have { display: grid; gap: 8px; }

/* U52/U70: each section is a row on the main line — a small score ring (or a dot) on the line, its type icon, name and line;
   an open section is a big card around its grown ring — the card's frame reaches past the line so the ring sits inside it,
   and the line shows through the card */
.s1-rows { display: grid; }
.s1-rows .mini { width: 34px; height: 34px; }
.mini { transition: width 0.25s ease, height 0.25s ease; }
.sum .t { display: inline-flex; align-items: center; gap: 7px; transition: font-size 0.25s ease; }
.t-ico { width: 16px; height: 16px; color: var(--purple-text); flex: none; transition: width 0.25s ease, height 0.25s ease; }
/* (an open section's frame, ground, line and head: § «the opened step» at the end — step-frame.js) */
.s1-rows .mark .sec-info { right: calc(50% - 27px); top: -7px; transition: right 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .mini, .sum .t, .t-ico, .s1-rows .mark .sec-info { transition: none; }
}

/* U54: from 0 to 1 — the line starts at «0» (the idea) and ends at a golden «1» (the product on the market) */
.zero-mk { justify-self: center; position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font: 700 27px/1 var(--font-display); color: var(--text); background: var(--bg); border: 2px solid var(--purple-text); box-shadow: 0 0 0 6px var(--tint); }
.goal-card { border: 1px solid var(--yellow); background: radial-gradient(90% 120% at 0% 0%, rgb(var(--yellow-t) / 0.11), transparent 60%), var(--bg); }
.goal-card > .label { color: var(--yellow); }

/* U56: «Сам» — a quiet card on the line before the lock; «С нами» — a gold zone that holds the lock and both stages */

.what-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
/* The zone reaches past the line on the left, so the lock and the stages' rings sit inside its frame; the line shows through. */
.concept-zone { margin: 4px 0 16px -14px; padding: 4px 16px 6px 14px; border: 1px solid var(--yellow); border-radius: 26px;
  background: radial-gradient(80% 50% at 0% 0%, rgb(var(--yellow-t) / 0.13), transparent 70%), linear-gradient(180deg, rgb(var(--yellow-t) / 0.05), rgb(var(--yellow-t) / 0.015)); }
.sale-row { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 16px 0 12px; }
.sale-main { display: grid; gap: 14px; min-width: 0; }
.sale-head { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: flex-start; }
.sale-head .label { color: var(--yellow); }
.sale-head h2 { font-size: 22px; color: var(--yellow); }
.sale-head .price { font: 700 15px var(--font-display); color: var(--muted); white-space: nowrap; }
.sale-head .price b { color: var(--yellow); font-size: 24px; }
.sale-what { display: grid; gap: 10px; }
.sale-what .bstage:first-of-type { border-top: 0; padding-top: 0; }
.concept-zone .node.stage > details > summary { padding: 12px 0; }

/* U59/U88: what the person has at the goal — icon badges in groups by what they are for, a small caption over each group */
.have-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 24px; align-items: start; }
.have-g { display: grid; gap: 8px; align-content: start; min-width: 0; }
.have-g > .label { color: var(--faint); }
.have-bs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.have-b { display: inline-flex; gap: 7px; align-items: center; border: 1px solid rgb(var(--ink-t) / 0.2); border-radius: 16px; padding: 4px 12px 4px 9px; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.have-b .art-ico { width: 16px; height: 16px; flex: none; color: var(--yellow); }
.goal-have h3 { color: var(--yellow); }

/* U60/U72: the goal card is a yellow frame on the dark background (like the idea card and the «С нами» zone) */
.goal-card { border-color: var(--yellow); background: radial-gradient(80% 60% at 0% 0%, rgb(var(--yellow-t) / 0.1), transparent 70%); }
.goal-head { align-items: center; }

/* U62: a revision is its own node, between the idea's «0» and the check's ring */
.rev-node .quiet-row { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 2px 0 22px; }
.rev-mk { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--purple-text); color: var(--purple-text); position: relative; z-index: 1; }
.rev-mk .art-ico { width: 19px; height: 19px; }
.rev-card { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: var(--tint); min-width: 0; }
.rev-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.rev-head b { font: 700 17px var(--font-display); }
.rev-score { display: inline-flex; gap: 6px; align-items: baseline; margin-left: auto; font: 600 15px var(--font-display); color: var(--muted); }
.rev-score b { font-size: 20px; color: var(--text); }
.rev-score b.up { color: var(--good); }
.rev-score b.down { color: var(--bad); }
.rev-score small { font-size: 13px; color: var(--muted); }
.rev-score .arrow { color: var(--faint); }
.rev-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rev-answers li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.rq-q { font-size: 13px; color: var(--muted); }
.rq-a { font-size: 14.5px; color: var(--text); }
.rev-more > summary { cursor: pointer; color: var(--purple-text); font-size: 13px; }
.rev-more[open] > summary { margin-bottom: 8px; }
.rev-back { justify-self: start; font-size: 13.5px; }

/* U65: doubt and cost read red — the pivot variants and the money of doing it yourself; «С нами» stays gold */
.pv-n { color: var(--purple-text); }

/* U66: «Сам» has its own circle on the line, joined to its card like the pivots; hover turns the whole path red */

/* U87: the next step is neutral — a grey circle and frame, a lighter grey on hover */

@media (max-width: 640px) {
  .q-row { grid-template-columns: 8px minmax(0, 1fr); padding: 9px 6px; }
  .q-row .qa-done { grid-column: 2; justify-self: start; }
  .modal .actions .btn { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  :root { --spine: 56px; }
  .s1-grid { gap: 0 12px; }
  .s1-main { padding-top: 0; }
  .s1-main h1 { font-size: 19px; }
  .ring-col .ring { width: 56px; height: 56px; }
  .ring-col .score-info { right: -10px; top: -4px; width: 22px; height: 22px; }
  .journey::before { top: 22px; }
  .split { grid-template-columns: 1fr; padding-top: 8px; }
  .split::before, .bcol::before { display: none; }
  .span-label { display: none; }
  .concept-zone { margin-left: 0; padding: 2px 12px 6px 0; border-radius: 22px; }
  /* On a phone a task takes the full width; its hours and money go on a second line under it. */
  
  .sale-head h2 { font-size: 19px; }
  .queries li { min-width: 0; }
  .queries .it { white-space: normal; }
  .goal-card { padding: 14px 16px; }
  .have-grid { grid-template-columns: 1fr; gap: 14px; }
  .goal-name { font-size: 22px; }
  .zero-mk { width: 44px; height: 44px; font-size: 22px; }
  .lab-data > summary { margin-left: calc(var(--spine) + 12px); }
  .s1-rows .mini { width: 32px; height: 32px; }
  .s1-rows .mark .sec-info { right: calc(50% - 26px); }
  .origin { gap: 0 12px; }
  .bulb-mk { width: 44px; height: 44px; }
  .bulb-mk .art-ico { width: 22px; height: 22px; }
  .thought { padding: 14px 16px 16px; border-radius: 22px; }
  .thought::before { left: -11px; top: 18px; width: 8px; height: 8px; }
  .thought::after { display: none; }
  .unit-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut .v { font-size: 22px; }
  .risk { grid-template-columns: 1fr; gap: 6px; }
  .to { transform: rotate(90deg); }
}

/* U68: «Что дальше?» heads the do-it-yourself card, «ориентир» is a quiet note by the totals, a red button downloads the check */

/* U87: the download is a grey outline button — grey frame, text and icon, a faint grey tint on hover */
.btn.line { background: transparent; color: var(--muted); border: 1.5px solid rgb(var(--ink-t) / 0.28); white-space: normal; text-align: left; line-height: 1.3; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.btn.line .ico { width: 18px; height: 18px; flex: none; stroke-width: 1.9; }
.btn.line:hover, .btn.line:focus-visible { background: rgb(var(--ink-t) / 0.06); border-color: rgb(var(--ink-t) / 0.45); color: var(--text); }
.btn.line:focus-visible { outline: 2px solid rgb(var(--ink-t) / 0.6); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn.line { transition: none; } }

/* U69: the goal grows from the line — its frame reaches past the line (like the «С нами» zone) and the «1» sits on the line
   beside the product's name: a crisp dark figure on a gold disc in the display face, with no glow and no rays; the line
   runs through the card down to it and stops there */
.node.goal::before { top: 62px; }
.goal-card { position: relative; grid-template-columns: var(--mk) minmax(0, 1fr); grid-template-areas: 'mk head' '. have'; gap: 14px var(--mk-gap); align-items: start;
  margin: 16px 0 4px -14px; padding: 18px 20px 20px 14px; border-radius: 26px; }
.goal-card > .mark { grid-area: mk; }
.goal-head { grid-area: head; min-height: 54px; }
.goal-have { grid-area: have; }
.one-mk { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow);
  font: 800 30px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; outline: 1.5px solid rgba(21, 16, 10, 0.4); outline-offset: -5px; }
@media (max-width: 640px) {
  .btn.line { width: 100%; padding: 12px 16px; }
  .goal-card { margin-left: 0; padding: 14px 14px 16px 0; border-radius: 22px; }
  .node.goal::before { top: 52px; }
  .goal-head { min-height: 42px; }
  .one-mk { width: 42px; height: 42px; font-size: 23px; outline-offset: -4px; }
}

/* U72: «С нами» is green — the zone's frame and tint, its heading, the lock, the stages' marks and the buy button */
.concept-zone { border-color: var(--good); background: radial-gradient(80% 50% at 0% 0%, rgb(var(--good-t) / 0.12), transparent 70%), linear-gradient(180deg, rgb(var(--good-t) / 0.05), rgb(var(--good-t) / 0.015)); }
.concept-zone .sale-head .label, .concept-zone .sale-head h2, .concept-zone .sale-head .price b { color: var(--good); }
.concept-zone .lock-mk { color: var(--good); border-color: var(--good); box-shadow: 0 0 0 7px rgb(var(--good-t) / 0.14); }
.concept-zone .stage-mk.concept { border-color: var(--good); color: var(--good); }
.concept-zone .stage-mk.concept .lk { color: var(--good); border-color: rgb(var(--good-t) / 0.4); }
.concept-zone .node.stage.concept > details[open] .stage-mk { background: var(--good); color: #052e1f; }
.concept-zone .unlock.concept, .concept-zone .with-us.concept { color: var(--good); }
.concept-zone .node > details > summary:hover .t, .concept-zone .node > details[open] > summary .chev { color: var(--good); }
.concept-zone .btn { background: var(--good); color: #052e1f; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.concept-zone .btn:hover, .concept-zone .btn:focus-visible { background: #5ee6b4; box-shadow: 0 0 0 5px rgb(var(--good-t) / 0.16); }
.concept-zone .btn:focus-visible { outline: 2px solid var(--good); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .concept-zone .btn { transition: none; } }

/* U74: doubt reads red — the fork's heading matches the pivots' red hover (the «Вариант N» labels stay purple) */

/* U76–U78: the check's head is pills of one look — the insights (a dot for the tone), the count badges, the theses for (a
   green «+») and against (a red «−»); hover or focus shows the details in a small card by the pointer, nothing below */
.s1-main .insights, .sigs { display: flex; flex-wrap: wrap; gap: 6px; justify-self: start; margin: 0; padding: 0; border: 0; background: none; }
.ins, .fact, .sig { display: inline-flex; gap: 7px; align-items: center; border: 1px solid rgb(var(--ink-t) / 0.2); border-radius: 16px; padding: 3px 12px 3px 9px;
  font: 400 13px/1.35 var(--font-body); color: var(--muted); background: none; cursor: default; text-align: left; transition: border-color 0.15s, color 0.15s; }
.ins.w1, .ins.w2, .ins.w3 { font-size: 13px; font-family: var(--font-body); padding: 3px 12px 3px 9px; border-color: rgb(var(--ink-t) / 0.2); }
.ins.w2, .ins.w3, .sig { color: var(--text); }
.ins.w2 { font-weight: 500; }
.ins.w3 { font-weight: 600; }
/* a two-line thesis keeps its «+» or «−» by the first line */
.sig { align-items: baseline; }
.ins:hover, .ins:focus-visible, .fact:hover, .fact:focus-visible { border-color: var(--purple-text); color: var(--text); transform: none; }
.sig .pm { flex: none; width: 12px; text-align: center; font: 700 14px/1 var(--font-display); font-style: normal; }
.sig.plus .pm { color: var(--good); }
.sig.minus .pm { color: var(--bad); }
.sig.plus:hover, .sig.plus:focus-visible { border-color: var(--good); }
.sig.minus:hover, .sig.minus:focus-visible { border-color: var(--bad); }
.ins:focus-visible, .fact:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 2px; }
.sig.plus:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.sig.minus:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the hover card */
.hcard { position: fixed; z-index: 120; width: max-content; max-width: min(340px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: 0 16px 40px rgb(var(--shade-t) / 0.7); color: var(--text); font-size: 13.5px; line-height: 1.5; pointer-events: none; }
.hcard[hidden] { display: none; }
.hcard.pinned { pointer-events: auto; }
.hcard .tone { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: inline-flex; gap: 6px; align-items: center; }
.hcard .tone i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-text); }
.hcard .tone.plus i { background: var(--good); }
.hcard .tone.minus i { background: var(--bad); }
.hc-t { font: 700 15.5px/1.3 var(--font-display); }
.hcard p { margin: 0; color: var(--muted); }
.hcard .hc-full { color: var(--text); font-size: 14px; }
.hc-q { font-style: italic; }
.hc-more { font-size: 12.5px; color: var(--faint); }
.hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hc-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.hc-list .n { font: 700 12px var(--font-display); color: var(--purple-text); }
.hc-list .v { font-weight: 600; color: var(--text); }

/* U80: a running check grows on the line — each section slides in when it lands, a pending ring spins until its score
   fills the arc, the tip pulses with what is being prepared; with reduced motion everything just appears */
.live-row > details > summary { pointer-events: none; cursor: default; }
.live-row .chev { visibility: hidden; }
.live-in { animation: live-in 0.45s ease both; }
/* MP41 SUB-20 (SITE-5): a landed row dissolves in at the tip — opacity only, nothing below it is pushed by a slide */
@keyframes live-in { from { opacity: 0; } to { opacity: 1; } }
.mini.pending .spin { fill: none; stroke: var(--purple-text); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: ring-spin 1.1s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.live-tip { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: center; padding: 12px 0 20px; }
.live-tip .mark { position: relative; z-index: 1; }
.live-tip .tip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple-text); box-shadow: 0 0 0 5px rgb(var(--purple-t) / 0.16); animation: pulse 0.9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .live-in, .mini.pending .spin, .live-tip .tip-dot { animation: none; }
}

/* U81/U82: the names without a frame — the free name + domain pairs purple, the chosen one (and the one under the pointer)
   green, the taken ones grey and not choosable; the chosen name's reasoning under the cloud */
.name-cloud { padding: 0; border: 0; background: none; }
.nm.free { font: 600 15px/1.2 var(--font-display); color: var(--purple-text); border-color: rgb(var(--lilac-t) / 0.45); background: none; padding: 6px 14px; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.nm.free:hover, .nm.free:focus-visible, .nm.free[aria-pressed='true'] { color: var(--good); border-color: var(--good); }
.nm.free[aria-pressed='true'] { background: rgb(var(--good-t) / 0.08); }
.nm.free:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.nm.taken, .nm.unknown { color: var(--faint); border-color: var(--hair); cursor: default; }
.nm.taken:hover, .nm.unknown:hover { border-color: var(--hair); }
.name-detail { display: grid; gap: 6px; max-width: 720px; }
.name-detail .tone { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: inline-flex; gap: 6px; align-items: center; }
.name-detail .tone i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.name-detail .tone.minus i { background: var(--faint); }
.name-detail h3 { font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 700; }
.name-detail p { color: var(--muted); margin: 0; }

/* U85: the lock of «Всё ещё веришь в идею?» breathes — a soft green ring grows and fades every 2 s; a steady glow without motion */
.concept-zone .lock-mk { position: relative; }
.concept-zone .lock-mk::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--good); opacity: 0; pointer-events: none; animation: lock-pulse 2s ease-out infinite; }
@keyframes lock-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .concept-zone .lock-mk::after { animation: none; }
  .concept-zone .lock-mk { box-shadow: 0 0 0 7px rgb(var(--good-t) / 0.14), 0 0 18px rgb(var(--good-t) / 0.35); }
}

/* U86/U89: in the zone a stage is a static row (no opening) whose circle sits on its heading's line */
.node.stage > .row-static { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 12px 0; }
.node.stage > .row-static > .mark { margin-top: -7px; }

/* U87: «Всё ещё веришь в идею?» heads the whole decision — the next step and the «С нами» zone */

/* C3: the concept bought (lab) — the check is one node that opens to the whole check; the green zone is the active
   stage, its lock open, its stages queued with their files as pending chips */
.folded-check > details > summary { list-style: none; cursor: pointer; display: block; }
.folded-check > details > summary::-webkit-details-marker { display: none; }
.folded-check > details > summary:hover .s1-name { color: var(--purple-text); }
.folded-check .s1-open { display: grid; gap: 6px; padding: 6px 0 4px; }
.concept-zone.active { border-color: var(--good); background: radial-gradient(80% 50% at 0% 0%, rgb(var(--good-t) / 0.2), transparent 70%), linear-gradient(180deg, rgb(var(--good-t) / 0.08), rgb(var(--good-t) / 0.03));
  box-shadow: 0 0 0 1px rgb(var(--good-t) / 0.25), 0 18px 60px rgb(var(--good-t) / 0.12); }
.concept-zone.active .lock-mk::after { animation: none; opacity: 0; }
.concept-zone .lock-mk.open { background: var(--good); color: #052e1f; border-color: var(--good); }
.run-state { align-self: start; white-space: nowrap; font: 600 12px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); border: 1px solid rgb(var(--good-t) / 0.5); border-radius: 999px; padding: 3px 10px; }
.quiet-link { background: none; border: 0; padding: 0; font: inherit; color: var(--faint); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.quiet-link:hover, .quiet-link:focus-visible { color: var(--muted); }
.concept-zone .stage-mk.queued { border-style: dashed; background: var(--bg); }
.concept-zone .unlock.queued { color: var(--muted); }
.art.pending { border-style: dashed; color: var(--faint); }
.art.pending .art-ico { color: var(--faint); }
/* the switch: the lock opens, the zone brightens, what goes folds away */
.folding { transition: height 0.6s ease, opacity 0.35s ease, margin 0.6s ease, padding 0.6s ease; }
.concept-zone.activating { transition: box-shadow 0.6s ease, background-color 0.6s ease; box-shadow: 0 0 0 1px rgb(var(--good-t) / 0.45), 0 0 70px rgb(var(--good-t) / 0.28); background-color: rgb(var(--good-t) / 0.05); }
.lock-mk.opening { animation: lock-open 0.6s ease; background: var(--good); color: #052e1f; }
@keyframes lock-open { 0% { transform: scale(1); } 40% { transform: scale(1.2) rotate(-10deg); } 100% { transform: scale(1); } }
.concept-zone.just-on { animation: zone-on 1.2s ease; }
@keyframes zone-on { from { box-shadow: 0 0 0 1px rgb(var(--good-t) / 0.55), 0 0 80px rgb(var(--good-t) / 0.35); } to { box-shadow: 0 0 0 1px rgb(var(--good-t) / 0.25), 0 18px 60px rgb(var(--good-t) / 0.12); } }
@media (prefers-reduced-motion: reduce) {
  .folding, .concept-zone.activating { transition: none; }
  .lock-mk.opening, .concept-zone.just-on { animation: none; }
}

/* U93: an insight carries its topic's icon (the section's own), tinted by its tone; old records keep the dot */
.ins .ins-ico { width: 15px; height: 15px; flex: none; color: var(--muted); }
.ins.plus .ins-ico { color: var(--good); }
.ins.minus .ins-ico { color: var(--bad); }
/* U94: the theses have no frame at rest — it shows on hover or focus, green for and red against */
.sig { border-color: transparent; }

/* U90/U91: the idea form is a search bar — a bulb, the field growing with its text, the purple «Проверить» at its end;
   on a phone the field takes the width and the button goes under it */
.form.search { border: 0; padding: 0; gap: 12px; }
.bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 8px 8px 18px;
  border: 1px solid var(--line); border-radius: 24px; background: rgb(var(--ink-t) / 0.025); transition: border-color 0.15s, box-shadow 0.15s; }
.bar:focus-within { border-color: var(--purple-text); box-shadow: 0 0 0 4px rgb(var(--purple-t) / 0.16); }
.bar-ico { width: 22px; height: 22px; color: var(--purple-text); align-self: center; }
.form.search .bar textarea { min-height: 0; height: 26px; max-height: 220px; resize: none; border: 0; border-radius: 0; padding: 0; background: none; font-size: 16px; line-height: 1.6; overflow-y: auto; }
.form.search .bar textarea:focus, .form.search .bar textarea:focus-visible { outline: none; }
/* the palette's purple, a shade deeper so white text reads (5.3:1); lighter on hover */
.bar-go { align-self: end; background: var(--brand); color: var(--on-brand); padding: 12px 22px; gap: 8px; transition: background-color 0.15s; }
.bar-go .ico { width: 18px; height: 18px; stroke-width: 2; }
.bar-go:hover { background: color-mix(in srgb, var(--brand) 90%, #fff); }
.bar-go:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bar, .bar-go { transition: none; } }
@media (max-width: 640px) {
  .bar { grid-template-columns: auto minmax(0, 1fr); padding: 12px 12px 12px 14px; border-radius: 20px; }
  .bar-go { grid-column: 1 / -1; width: 100%; }
  .bar-ico { align-self: start; margin-top: 2px; }
  /* room for the whole placeholder on a narrow screen */
  .form.search .bar textarea { min-height: 77px; }
}

/* U95: one sticky header over the page — the brand, the idea switcher (the history as a searchable list), the lab's info
   and «+ Новая идея», which shows the search bar right under the header; the content takes the full width */
.topbar { position: sticky; top: 0; z-index: 90; background: rgb(var(--ground-t) / 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.top-row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 24px; }
.brand { font: 700 17px var(--font-display); color: var(--text); white-space: nowrap; text-decoration: none; }
.brand:hover { text-decoration: none; }
.switcher { position: relative; justify-self: center; width: min(680px, 100%); }
.sw-button { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 44px; padding: 5px 14px 5px 7px;
  border: 1px solid var(--line); border-radius: 14px; background: rgb(var(--ink-t) / 0.03); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sw-button:hover, .sw-button[aria-expanded='true'] { border-color: var(--purple-text); }
.sw-idea { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sw-state { font-size: 12.5px; white-space: nowrap; }
.sw-chev { color: var(--faint); transform: rotate(90deg); transition: transform 0.15s; }
.sw-button[aria-expanded='true'] .sw-chev { transform: rotate(-90deg); }
.sw-ring { width: 30px; height: 30px; display: block; flex: none; }
.sw-ring .track { fill: var(--bg); stroke: var(--hair); stroke-width: 4; }
.sw-ring .val { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; }
.sw-ring.go .val { stroke: var(--good); }
.sw-ring.rethink .val { stroke: var(--bad); }
.sw-ring text { fill: var(--text); font: 700 17px var(--font-display); }
.sw-ring.pending .spin { fill: none; stroke: var(--purple-text); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: ring-spin 1.1s linear infinite; }
.sw-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 95; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; max-height: min(70vh, 560px); padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); }
.sw-panel[hidden], .lab-pop[hidden], .form[hidden] { display: none; }
.sw-head { display: none; align-items: center; justify-content: space-between; }
.sw-close { width: 36px; height: 36px; border: 1px solid var(--hair); border-radius: 50%; background: none; color: var(--text); font-size: 15px; cursor: pointer; }
.sw-filter { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px; font: inherit; }
.sw-filter:focus { outline: none; border-color: var(--purple-text); }
.sw-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; min-height: 0; }
.sw-opt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.sw-opt .sw-ring { grid-row: span 2; }
.sw-opt:hover { background: rgb(var(--ink-t) / 0.04); }
.sw-opt.on { background: rgb(var(--purple-t) / 0.16); }
.sw-opt.current .sw-o-idea { color: var(--purple-text); }
.sw-o-idea { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-o-meta { font-size: 12px; }
.sw-o-meta .run { color: var(--yellow); font-weight: 600; }
.sw-empty { padding: 12px 10px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.lab-info { position: relative; }
.lab-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--purple-text); font: italic 700 15px/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
.lab-btn:hover, .lab-btn[aria-expanded='true'] { border-color: var(--purple-text); }
.lab-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 95; width: 300px; display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); }
.new-idea { background: var(--brand); color: var(--on-brand); padding: 9px 16px; gap: 6px; }
.new-idea:hover { background: color-mix(in srgb, var(--brand) 90%, #fff); }
.new-idea .plus { font-size: 19px; line-height: 1; }
.topbar .form.search { max-width: 1040px; margin: 0 auto; padding: 2px 24px 14px; }
main { padding-block: 24px 96px; }
.node, .origin { scroll-margin-top: 84px; }
body.sheet-open { overflow: hidden; }
@media (max-width: 640px) {
  .top-row { gap: 8px; padding: 8px 12px; }
  .brand .lab-word { display: none; }
  .sw-button { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 4px 10px 4px 5px; min-height: 40px; }
  .sw-state { display: none; }
  .sw-ring, .sw-st { width: 28px; height: 28px; }
  .lab-btn { width: 34px; height: 34px; }
  .new-idea { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .new-idea .lbl { display: none; }
  /* on a phone the list is a full-screen sheet (the header drops its blur: a filter would make it the sheet's frame) */
  .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sw-panel { position: fixed; inset: 0; z-index: 200; max-height: none; border-radius: 0; border: 0; padding: 12px; }
  .sw-head { display: flex; }
  .lab-pop { width: min(300px, calc(100vw - 24px)); }
  .topbar .form.search { padding: 2px 12px 12px; }
}

/* U96: on a phone every item of the line is its own page — the item switcher under the header, the whole line as a sheet,
   prev / next at the bottom; the other items are hidden, a section's page is open */
.pg-bar[hidden], .pg-nav[hidden], .pg-sheet[hidden] { display: none; }
.pg-bar { padding: 0 12px 8px; }
.pg-open { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 42px; padding: 4px 12px 4px 6px;
  border: 1px solid var(--hair); border-radius: 12px; background: rgb(var(--ink-t) / 0.03); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pg-open[aria-expanded='true'], .pg-open:hover { border-color: var(--purple-text); }
.pg-mark { display: grid; place-items: center; width: 30px; height: 30px; }
.pg-mark svg.mini, .pg-mark svg.ring { width: 28px; height: 28px; }
.pg-mark .dot { width: 9px; height: 9px; }
.pg-mk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--purple-text); color: var(--purple-text); font: 700 13px var(--font-display); }
.pg-mk .ico, .pg-mk .art-ico { width: 15px; height: 15px; }
.pg-mk.zero { color: var(--text); }
.pg-mk.one { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.pg-mk.good { border-color: var(--good); color: var(--good); }
.pg-mk .tip-dot { width: 9px; height: 9px; }
.pg-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 14.5px; font-weight: 600; }
.pg-pos { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.pg-sheet { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 12px; background: var(--surface); }
.pg-sheet .sw-head { display: flex; align-items: center; justify-content: space-between; }
.pg-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 0; align-content: start; position: relative; }
/* the line itself runs down the list's marks */
.pg-list::before { content: ''; position: absolute; left: 21px; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
.pg-item { position: relative; width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 8px 6px 6px;
  border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pg-item .pg-mark { position: relative; z-index: 1; background: var(--surface); border-radius: 50%; }
.pg-item .pg-title { font-weight: 500; white-space: normal; }
.pg-item.on { background: rgb(var(--purple-t) / 0.16); }
.pg-item.on .pg-title { color: var(--purple-text); }
.pg-status { font-size: 12px; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pg-status.live { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.5); }
.pg-new { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-text); }
.pg-num { font-size: 12px; color: var(--faint); }
.pg-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--hair); }
.pg-step { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--hair); border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; min-width: 0; }
.pg-step.next { justify-content: flex-end; text-align: right; }
.pg-step > span[aria-hidden] { font-size: 20px; line-height: 1; color: var(--purple-text); }
.pg-step-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-step:disabled { opacity: 0.35; cursor: default; }
body.paged main { padding-bottom: 96px; padding-top: 16px; }
/* one item at a time; its wrapper (the sections, the zone) stays as the frame */
body.paged #check .journey > *:not(.pg-current):not(.pg-holds) { display: none; }
body.paged #check .journey > .s1-rows > .node:not(.pg-current) { display: none; }
body.paged #check .concept-zone > .node:not(.pg-current):not(.pg-holds) { display: none; }
body.paged #check .journey::before { display: none; }
body.paged #check .lab-data { display: none; }
body.paged #check .journey > .s1-rows > .node.pg-current > details[open] { margin-top: 0; }
.pg-mk .tip-dot { display: block; border-radius: 50%; background: var(--purple-text); animation: pulse 0.9s ease-in-out infinite alternate; }
/* the phone's «сейчас готовится» page lists what is ready (on a wide screen the line itself shows it) */
.tip-ready { display: none; }
body.paged .live-tip { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
body.paged .tip-ready { grid-column: 2; display: grid; gap: 8px; margin-top: 18px; }
.tip-ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tip-go { width: 100%; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tip-go .faint { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .pg-mk .tip-dot { animation: none; } }

/* C3 part 2: the concept run on the line — its stages, sub-steps (tasks ticking, files flipping to ready), the files as
   rows that open to their kind's view, the gates (answers, the choice among variants), the article modal */
.concept-zone .row-static { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 10px 0; }
.stage-mk.run { border-style: solid; }
.stage-mk.run .ico { width: 16px; height: 16px; stroke-width: 2.2; }
/* U159: the research's and the concept's circles wear their icons */
.stage-mk .st-ico { width: 18px; height: 18px; stroke-width: 2; }
.stage-final .stage-mk .st-ico { width: 20px; height: 20px; }
.concept-zone > .zone-error { margin: 0 0 8px calc(var(--mk) + var(--mk-gap)); overflow-wrap: anywhere; }
.concept-zone .stage-mk.run.st-done { background: var(--good); color: #052e1f; }
.concept-zone .stage-mk.run.st-running { box-shadow: 0 0 0 6px rgb(var(--purple-t) / 0.16); }
.concept-zone .stage-mk.run.st-waiting { box-shadow: 0 0 0 6px rgb(var(--yellow-t) / 0.14); border-color: var(--st-wait); color: var(--st-wait); }
.concept-zone .stage-mk.run.st-locked { border-style: dashed; opacity: 0.7; }
.run-line { display: block; margin-top: 2px; font-size: 12.5px; color: var(--good); }
.run-line.st-locked { color: var(--faint); }
.run-line.st-waiting { color: var(--yellow); }
.run-line.st-failed { color: var(--bad); }
.run-mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--hair); color: var(--muted); font-size: 12px; }
.run-mk .ico, .run-mk .art-ico { width: 14px; height: 14px; }
.run-mk.st-running, .run-mk.st-working { border-color: var(--st-run); }
.run-mk.st-done, .run-mk.st-ready { border-color: var(--good); background: var(--good); color: #052e1f; }
.run-mk.st-done .ico, .run-mk.st-ready .ico { stroke-width: 2.4; }
.run-mk.st-waiting { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 0 5px rgb(var(--yellow-t) / 0.14); }
.run-mk.st-failed { border-color: var(--bad); color: var(--bad); }
.run-mk.st-pending { border-style: dashed; }
.run-mk.st-skipped { opacity: 0.55; }
.run-mk.art { width: 24px; height: 24px; }
.run-spin { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--purple-t) / 0.25); border-top-color: var(--st-run); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sub-node .sum .t { font-size: 15px; }
.sub-node.st-pending .sum .t, .sub-node.st-skipped .sum .t { color: var(--muted); }
.run-tasks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; color: var(--muted); }
.tk { display: flex; gap: 8px; align-items: center; }
.tk.st-done { color: var(--text); }
.tk-ok { color: var(--good); }
.tk-no { color: var(--bad); }
.tk-wait { color: var(--faint); }
.tk .run-spin { width: 11px; height: 11px; }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.art-chip { display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 12.5px; border: 1px dashed var(--hair); border-radius: 8px; padding: 3px 9px 3px 6px; color: var(--faint); background: none; }
.art-chip .art-ico { width: 15px; height: 15px; flex: none; }
.art-chip .art-st { font-size: 12px; opacity: 0.8; }
.art-chip.st-working { border-style: solid; border-color: rgb(var(--good-t) / 0.5); color: var(--muted); }
.art-chip.st-ready { border-style: solid; border-color: var(--good); color: var(--text); cursor: pointer; }
.art-chip.st-ready .art-ico { color: var(--good); }
.art-chip.st-ready:hover, .art-chip.st-ready:focus-visible { background: rgb(var(--good-t) / 0.1); }
.art-chip.st-failed { border-color: var(--bad); color: var(--bad); }
/* MP41 SUB-20 (APP-19): a changed task cross-fades (was a 3D flip) */
.swap { animation: swap-in 0.6s ease; }
@keyframes swap-in { from { opacity: 0.35; } to { opacity: 1; } }
/* the files on the line: ready ones open; on a wide screen the rest wait in the chips above */
body:not(.paged) .art-node:not(.st-ready) { display: none; }
.art-wait { margin: 0; padding: 0 0 12px calc(var(--mk) + var(--mk-gap)); }
.art-node > details > summary .sum .t { font-size: 15px; }
.art-body { gap: 16px; }
.art-sum { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.art-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.art-actions .btn .ico, .modal .actions .btn .ico { width: 16px; height: 16px; }
.art-body h4 { margin: 4px 0 0; font: 700 14px var(--font-display); color: var(--muted); }
/* the gates */
.run-gate { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--yellow); border-radius: 16px; background: rgb(var(--yellow-t) / 0.05); }
.gate-h { font: 700 16px var(--font-display); color: var(--yellow); }
.gate-qs { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.gate-qs li { display: grid; gap: 4px; }
.gate-qs label { font-weight: 600; }
.run-gate textarea { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px; font: inherit; resize: vertical; }
.run-gate textarea:focus { outline: none; border-color: var(--yellow); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gate-intro { margin: 0; color: var(--muted); }
.var-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.var-card { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--hair); border-radius: 14px; background: rgb(var(--ink-t) / 0.02); }
.var-card.rec { border-color: var(--yellow); }
.var-card.chosen { border-color: var(--good); background: rgb(var(--good-t) / 0.06); }
.var-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-tag { font-size: 12px; color: var(--yellow); }
.chosen-tag { font-size: 12px; color: var(--good); }
.conf { display: inline-flex; gap: 3px; margin-left: auto; }
.conf i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); }
.conf i.on { background: var(--good); }
.var-card h4 { margin: 0; font: 700 16px/1.3 var(--font-display); color: var(--text); }
.vr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.var-card .btn { justify-self: start; margin-top: 6px; white-space: normal; }
/* U161: the founder's questions as a quiz — one question at a time, the progress as segments, «Назад» left, «Пропустить»
   (quiet, never green) and «Далее» right */
.run-gate.quiz { min-width: 0; gap: 14px; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgb(var(--purple-t) / 0.08), rgb(var(--purple-t) / 0.02)); }
.qz-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.qz-n { font: 600 12.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.qz-n b { color: var(--text); }
.qz-hint { font-size: 13px; color: var(--faint); }
.qz-bar { display: flex; gap: 4px; }
.qz-seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: rgb(var(--ink-t) / 0.12); transition: background-color 0.2s ease; }
.qz-seg.done { background: var(--good); }
.qz-seg.skip { background: rgb(var(--ink-t) / 0.3); }
.qz-seg.now { background: var(--purple-text); }
.qz-q { display: grid; gap: 10px; }
.qz-text { font: 700 19px/1.35 var(--font-display); color: var(--text); }
.qz-why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.run-gate.quiz textarea.qz-answer { min-height: 96px; padding: 12px 14px; border-radius: 12px; border-color: var(--line); background: rgb(var(--ground-t) / 0.35); font-size: 15px; line-height: 1.5; }
.run-gate.quiz textarea.qz-answer:focus { border-color: var(--purple-text); box-shadow: 0 0 0 3px rgb(var(--purple-t) / 0.18); }
.qz-opts { display: grid; gap: 8px; }
.qz-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--ink-t) / 0.03); color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.qz-opt:hover, .qz-opt:focus-visible { border-color: var(--purple-text); }
.qz-opt.on { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.12); }
.qz-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--faint); }
.qz-opt.on .qz-radio { border-color: var(--purple-text); background: var(--purple-text); box-shadow: inset 0 0 0 3px var(--bg); }
.qz-rec { font-size: 12px; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.qz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair); }
.qz-foot .qz-prev { margin-right: auto; }
.qz-foot .gate-note { flex: 1 1 auto; min-width: 0; font-size: 13px; text-align: center; }
.concept-zone .quiz .btn.qz-btn, .quiz .btn.qz-btn { min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; box-shadow: none; }
.quiz .btn.qz-btn .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.concept-zone .quiz .btn.qz-prev, .concept-zone .quiz .btn.qz-skip, .quiz .btn.qz-prev, .quiz .btn.qz-skip { border: 1px solid rgb(var(--ink-t) / 0.2); background: transparent; color: var(--muted); }
.concept-zone .quiz .btn.qz-prev:hover, .concept-zone .quiz .btn.qz-skip:hover, .concept-zone .quiz .btn.qz-prev:focus-visible, .concept-zone .quiz .btn.qz-skip:focus-visible { border-color: rgb(var(--ink-t) / 0.45); background: rgb(var(--ink-t) / 0.05); color: var(--text); box-shadow: none; outline-color: rgb(var(--ink-t) / 0.6); }
.quiz .btn.qz-prev[disabled] { visibility: hidden; }
@media (max-width: 640px) {
  .run-gate.quiz { padding: 16px 14px 14px; }
  .qz-hint, .qz-foot .gate-note:empty { display: none; }
  .qz-text { font-size: 17px; }
  .concept-zone .quiz .btn.qz-btn, .quiz .btn.qz-btn { padding: 10px 16px; }
  .concept-zone .quiz .btn.qz-prev, .quiz .btn.qz-prev { width: 44px; padding: 0; }
  .quiz .btn.qz-prev span { display: none; }
  .quiz .btn.qz-prev[disabled] { display: none; }
  .qz-foot .gate-note { font-size: 12px; text-align: left; }
  .qz-foot .qz-skip, .qz-foot .qz-next { flex: 1 1 0; }
}

/* U164–U166: the concept's ways as a road fork on the line — one under another, each with its picture; the recommended
   way is the green road the line goes on by, the others branch off, «Свой путь» is the dashed last one; no frame */
.fk-ways { margin-top: 4px; }
.fk-ways .fka-q { align-items: start; }
.fk-ways .fka-dia { margin-top: 2px; }
.way-q { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.way-q h3 { margin: 0; font: 700 22px/1.3 var(--font-display); color: var(--text); }
.way-q .gate-intro { font-size: 14.5px; line-height: 1.55; max-width: 72ch; }
.fka-row.alt-way { color: var(--purple-text); }
.fka-row.own { color: rgb(var(--ink-t) / 0.55); }
.fka-svg .p-way { stroke: var(--purple-text); stroke-width: 3; }
.fka-svg .p-own { stroke: rgb(var(--ink-t) / 0.4); stroke-width: 2.5; stroke-dasharray: 6 6; }
.fk-a[data-hot] .fka-svg path:not(.hot) { opacity: 0.18; }
.fk-a[data-hot] .fka-svg path.hot { opacity: 1; }
.fka-row.way { padding: 14px 0; }
.way-body { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
.way-pic { position: relative; display: grid; place-items: center; width: 112px; height: 84px; border-radius: 14px; overflow: hidden; color: #fff; background: linear-gradient(150deg, var(--t1, #7c3aed), var(--t2, #a78bfa)); box-shadow: inset 0 1px 0 rgb(var(--ink-t) / 0.35), 0 6px 16px rgb(var(--shade-t) / 0.45); }
.way-pic .art-ico { width: 34px; height: 34px; stroke-width: 1.8; color: #fff; }
.way-pic b { position: absolute; left: 9px; top: 6px; font: 700 13px var(--font-display); opacity: 0.85; }
.way-pic.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.way-main { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.fka-name.way-name { font-size: 17px; }
.way-offer { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.way-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; justify-self: stretch; min-width: 0; }
.way-chip { max-width: 100%; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.way-facts .conf { margin-left: 4px; }
.way-more { justify-self: stretch; min-width: 0; }
.way-more > summary { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--purple-text); list-style: none; cursor: pointer; }
.way-more > summary::-webkit-details-marker { display: none; }
.way-more > summary::after { content: '›'; margin-left: 6px; transition: transform 0.2s ease; }
.way-more[open] > summary::after { transform: rotate(90deg); }
.way-card { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: rgb(var(--ink-t) / 0.03); }
.fk .btn.way-go { min-height: 44px; }
.fk .btn.way-go:not(.line) { background: var(--good); color: #052e1f; }
.concept-zone .fk .btn.line { background: transparent; color: var(--text); border: 1.5px solid rgb(var(--ink-t) / 0.28); box-shadow: none; }
.concept-zone .fk .btn.line:hover, .concept-zone .fk .btn.line:focus-visible { background: rgb(var(--ink-t) / 0.06); border-color: rgb(var(--ink-t) / 0.5); }
.fk .btn.way-go:not(.line):hover, .fk .btn.way-go:not(.line):focus-visible { background: #5ee6b4; box-shadow: 0 0 0 5px rgb(var(--good-t) / 0.16); }
.way-own > summary { display: grid; gap: 2px; min-height: 40px; }
.way-own textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--ground-t) / 0.35); color: var(--text); font: inherit; resize: vertical; }
.way-own textarea:focus { outline: none; border-color: var(--purple-text); }
.way-end { display: grid; gap: 8px; padding-left: calc(var(--mk) + 44px); }
.way-end .gate-note:empty { display: none; }
@media (max-width: 640px) {
  .way-q h3 { font-size: 19px; }
  /* the picture beside the name, the rest of the way under both at full width */
  .way-body { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
  .way-main { display: contents; }
  .way-main > * { grid-column: 1 / -1; justify-self: start; }
  .way-main > .way-facts, .way-main > .way-more { justify-self: stretch; }
  .way-main > .way-name { grid-column: 2; }
  .way-pic { width: 56px; height: 56px; border-radius: 12px; }
  .way-pic .art-ico { width: 24px; height: 24px; }
  .way-pic b { left: 6px; top: 4px; font-size: 12px; }
  .way-end { padding-left: calc(var(--mk) + 18px); }
  .fka-row .way-main > .btn.way-go { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .qz-seg, .way-more > summary::after { transition: none; } }
/* the variants file: one under another, each with its picture (U165) */
.var-cards { grid-template-columns: minmax(0, 1fr); }
.var-card { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
.var-card .way-pic { width: 88px; height: 66px; border-radius: 12px; }
.var-card .way-pic .art-ico { width: 28px; height: 28px; }
.var-main { display: grid; gap: 6px; align-content: start; min-width: 0; }
.v-ways { display: grid; gap: 10px; }
.v-ways .way-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.v-ways .way-pic { width: 96px; height: 72px; border-radius: 12px; }
.v-ways .way-main { gap: 6px; }
@media (max-width: 640px) {
  .var-card, .v-ways .way-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .var-card .way-pic, .v-ways .way-pic { width: 56px; height: 56px; }
  .var-card .way-pic .art-ico, .v-ways .way-pic .art-ico { width: 24px; height: 24px; }
}
.rounds > summary { cursor: pointer; color: var(--purple-text); font-size: 13.5px; }
.round { padding: 8px 0; border-top: 1px solid var(--hair); }
.round ul { margin: 4px 0 0; padding-left: 18px; }
/* the kinds' views */
.funnel-lv { display: grid; gap: 8px; }
.lvl { display: grid; grid-template-columns: 50px auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.lvl-n { font: 700 13px var(--font-display); color: var(--purple-text); letter-spacing: 0.08em; }
.lvl b { font: 700 20px var(--font-display); }
.drivers, .estimates, .art-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.drivers { list-style: none; padding: 0; }
.drivers li { display: flex; gap: 8px; }
.drivers li.up > span { color: var(--good); }
.drivers li.down > span { color: var(--bad); }
.art-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact-b { border: 1px solid var(--hair); border-radius: 12px; padding: 4px 10px; font-size: 13px; color: var(--muted); }
.phrases { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.phrases li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 14px; }
.clusters { display: grid; gap: 6px; }
.cl { display: grid; gap: 2px; }
.dossiers { display: grid; gap: 10px; }
.dossier { display: grid; gap: 6px; border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; }
.dz-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.art-dl-list { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; }
.art-dl-list dt { color: var(--faint); font-size: 13px; }
.art-dl-list dd { margin: 0; }
.art-dl-list ul { margin: 0; padding-left: 18px; }
.band-row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.band-row b { font: 700 20px var(--font-display); }
.rec-box { display: grid; gap: 4px; border: 1px solid var(--good); border-radius: 12px; padding: 12px 14px; background: rgb(var(--good-t) / 0.05); }
.rec-box b { font: 700 17px var(--font-display); }
.rec-box p { margin: 0; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.tier { display: grid; gap: 4px; align-content: start; border: 1px solid var(--hair); border-radius: 12px; padding: 12px; }
.tier ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.scn-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.scn { border: 1px solid var(--hair); border-radius: 999px; background: none; color: var(--muted); padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.scn[aria-pressed='true'] { border-color: var(--good); color: var(--good); }
.scn-body[hidden] { display: none; }
.one-pager, .persona, .checklist-v { display: grid; gap: 12px; }
.op-name { margin: 0; font: 700 22px var(--font-display); }
.op-promise { margin: 0; font-size: 16px; color: var(--text); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.steps .box { width: 18px; height: 18px; border: 1.5px solid var(--hair); border-radius: 5px; display: grid; place-items: center; font-size: 12px; color: var(--good); }
.pass-fail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pass, .fail { display: grid; gap: 4px; border-radius: 12px; padding: 10px 12px; }
.pass { border: 1px solid var(--good); }
.fail { border: 1px solid var(--bad); }
.modal.wide { width: min(820px, 100%); max-height: 86vh; overflow-y: auto; }
.article { display: grid; gap: 6px; }
.article h2, .article h3, .article h4, .article h5 { margin: 10px 0 2px; }
.article p { margin: 0; }
.article ul, .article ol { margin: 0; padding-left: 20px; }
.smeta-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.smeta-t td { padding: 6px 4px; border-bottom: 1px solid var(--hair); }
.run-state.st-done { color: var(--good); }
.run-state.st-waiting { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.5); }
.run-state.st-failed { color: var(--bad); border-color: var(--bad); }
@media (max-width: 640px) {
  .art-dl-list, .pass-fail, .vr { grid-template-columns: 1fr; }
  .lvl { grid-template-columns: 44px minmax(0, 1fr); }
  .lvl .faint { grid-column: 2; }
  .art-wait { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .run-spin, .swap { animation: none; } }

/* the zone keeps its tint behind an open file on a phone */
@media (max-width: 640px) { .concept-zone .sec-body { background: none; } }

/* the run on the phone line sheet: a step under its stage, a file under its step */
.pg-item.depth-1 .pg-title { padding-left: 10px; font-size: 14px; }
.pg-item.depth-2 .pg-title { padding-left: 22px; font-size: 13.5px; color: var(--muted); }
.pg-item.depth-2.on .pg-title { color: var(--purple-text); }

/* U97: the logo in the header (MP37: the FOX021 horizontal mark for a dark ground, brand/; the symbol alone on a phone)
   and its loader: two comets on a 2–4 px ring flying in opposite directions round the sign (1.5 s, linear); without
   motion the comets stand still */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-full { height: 26px; width: auto; display: block; }
.brand-sign { display: none; height: 30px; width: auto; }
.brand-tag { font: 600 12px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgb(var(--yellow-t) / 0.4); border-radius: 999px; padding: 1px 8px; }
.fg-loader { --s: 80px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; border-radius: 50%; }
.fg-loader > i { position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(circle at center, transparent calc(var(--s) / 2 - 4px), #000 calc(var(--s) / 2 - 2px), #000 calc(var(--s) / 2), transparent calc(var(--s) / 2 + 2px));
  mask: radial-gradient(circle at center, transparent calc(var(--s) / 2 - 4px), #000 calc(var(--s) / 2 - 2px), #000 calc(var(--s) / 2), transparent calc(var(--s) / 2 + 2px)); }
.fg-c1 { background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, rgba(70, 5, 157, 0.1) 310deg, rgba(70, 5, 157, 0.3) 330deg, rgb(var(--violet-t) / 0.6) 345deg, #7c3aed 355deg, #46059d 360deg);
  animation: fg-spin 1.5s linear infinite; }
.fg-c2 { background: conic-gradient(from 180deg, #46059d 0deg, #7c3aed 10deg, rgb(var(--violet-t) / 0.6) 20deg, rgba(70, 5, 157, 0.3) 40deg, rgba(70, 5, 157, 0.1) 50deg, transparent 60deg, transparent 360deg);
  animation: fg-spin 1.5s linear infinite reverse; }
.fg-sign { position: relative; z-index: 1; width: calc(var(--s) / 2); height: auto; display: block; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
.fg-loader.lg { --s: 80px; }
.fg-loader.md { --s: 56px; }
.fg-loader.tip, .fg-loader.pg { --s: 28px; }
.fg-loader.run { --s: 28px; }
.fg-loader.sw-ring { --s: 30px; }
.fg-loader.mini { --s: 34px; display: grid; background: var(--bg); }
.fg-loader.mini .fg-sign { width: 15px; }
.fg-loader.tip .fg-sign, .fg-loader.pg .fg-sign, .fg-loader.run .fg-sign, .fg-loader.sw-ring .fg-sign { width: 13px; }
.page-loader { display: grid; justify-items: center; gap: 14px; padding: 72px 16px; text-align: center; }
.page-loader.small { padding: 8px 16px 18px; grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
.live-tip .mark { display: grid; place-items: center; }
@media (max-width: 640px) {
  .brand-full, .brand-tag { display: none; }
  .brand-sign { display: block; }
  .fg-loader.mini { --s: 32px; }
  .fg-loader.sw-ring { --s: 28px; }
}
@media (prefers-reduced-motion: reduce) { .fg-loader > i { animation: none; } }

/* U98: a bigger logo — the horizontal FOX021 logo 34 px tall (sized by its height, the width its own), the header
   grown to match (the switcher and the buttons with it); the symbol 32 px on a phone */
.top-row { padding: 12px 24px; gap: 20px; }
.brand { gap: 12px; }
.brand-full { height: 34px; }
.brand-tag { font-size: 12.5px; padding: 2px 10px; }
.sw-button { min-height: 50px; padding: 6px 16px 6px 8px; }
.sw-idea { font-size: 15px; }
.lab-btn { width: 42px; height: 42px; font-size: 17px; }
.new-idea { padding: 12px 20px; font-size: 15.5px; }
.node, .origin { scroll-margin-top: 92px; }
@media (max-width: 640px) {
  .top-row { padding: 8px 12px; gap: 10px; }
  .brand-sign { height: 32px; }
  .sw-button { min-height: 44px; padding: 4px 10px 4px 5px; }
  .sw-idea { font-size: 14px; }
  .lab-btn { width: 38px; height: 38px; font-size: 15px; }
  .new-idea { width: 44px; height: 44px; padding: 0; }
}

/* U99: the user's avatar right of «+ Новая идея» — the photo or the initials on the purple gradient — and its menu: the
   name, «Мои идеи», «Лаборатория» (the model and the data sources), «Выйти»; «Выход выполнен» after a lab sign-out */
.me { position: relative; }
.avatar { width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; }
.avatar:hover, .avatar[aria-expanded='true'] { border-color: var(--purple-text); }
.av-in { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #9466f0, #46059d); color: #fff; font: 700 16px var(--font-display); }
.avatar .av-in { width: 40px; height: 40px; }
.av-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 95; width: 290px; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); }
.me-menu[hidden], .me-lab[hidden], .me-item[hidden] { display: none; }
.me-head { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
.me-head .av-in { width: 42px; height: 42px; }
.me-head b { display: block; font: 700 15px var(--font-display); }
.me-note { display: block; font-size: 12px; }
.me-item { text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 14.5px; padding: 10px; border-radius: 10px; cursor: pointer; }
.me-item:hover, .me-item:focus-visible { background: rgb(var(--purple-t) / 0.14); outline: none; }
.me-item[aria-expanded='true'] { color: var(--purple-text); }
.me-item.out { color: var(--bad); }
.me-lab { display: grid; gap: 8px; padding: 2px 10px 10px; }
.signed-out { display: grid; justify-items: center; gap: 12px; padding: 96px 16px; text-align: center; }
.signed-out p { max-width: 520px; margin: 0; }
.so-sign { width: 56px; height: auto; }
body.signed-out .switcher, body.signed-out .top-actions { visibility: hidden; }
/* U160 / U162 / U169 / U205: the Stars balance beside the avatar, the files and the bell with their counts of new, each
   opening a popover of its own (no switcher between them); on a phone each popover is a full-screen sheet with the
   balance inside it */
.hub { position: relative; display: flex; align-items: center; gap: 8px; }
.hub[hidden] { display: none; }
.hub-b { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: rgb(var(--ground-t) / 0.25); color: var(--muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.hub-b .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.hub-b:hover, .hub-b:focus-visible, .hub-b[aria-expanded='true'] { color: var(--text); border-color: var(--purple-text); }
.hub-b[data-new='true'] { color: var(--text); }
.hub-count { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--bg); border-radius: 10px; background: var(--purple); color: #fff; font: 700 12px/16px var(--font-body); text-align: center; }
.hub-count:empty { display: none; }
.stars { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid rgb(var(--yellow-t) / 0.35); border-radius: 999px; background: rgb(var(--yellow-t) / 0.08); color: var(--yellow); font: 700 15px var(--font-display); white-space: nowrap; }
.stars[hidden] { display: none; }
.hub-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 96; display: flex; flex-direction: column; gap: 8px; width: 400px; max-height: min(72vh, 620px); padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); outline: none; }
.hub-panel[hidden] { display: none; }
/* a popover dissolves in, slowly (only opacity and transform move) */
.hub-panel:not([hidden]) { animation: hub-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hub-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }
.hub-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px 0 10px; }
.hub-title { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--text); font: 700 15px var(--font-display); }
.hub-title .n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--purple); color: #fff; font: 700 12px/20px var(--font-body); text-align: center; }
.hub-close { display: none; }
.hub-stars { display: none; }
.hub-list { display: grid; grid-auto-rows: max-content; flex: 1 1 auto; gap: 2px; align-content: start; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.hub-row, .hub-all { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hub-row:hover, .hub-row:focus-visible, .hub-all:hover, .hub-all:focus-visible { background: rgb(var(--ink-t) / 0.05); outline: none; }
.hub-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(var(--purple-t) / 0.14); color: var(--purple-text); }
.hub-ico .ico { width: 17px; height: 17px; }
.hub-ico.done { background: rgb(var(--good-t) / 0.14); color: var(--good); }
.hub-ico.decision { background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); }
.hub-ico.bad { background: rgb(var(--bad-t) / 0.14); color: var(--bad); }
.hub-row.file .hub-ico { border-radius: 10px; }
.hub-main { display: grid; gap: 2px; min-width: 0; }
.hub-main b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.hub-sub { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hub-end { display: grid; justify-items: end; gap: 6px; }
.hub-when { color: var(--faint); font-size: 12px; white-space: nowrap; }
.hub-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--purple-text); box-shadow: 0 0 0 3px rgb(var(--lilac-t) / 0.18); }
.hub-group { padding: 12px 10px 4px; overflow: hidden; color: var(--faint); font: 600 12px var(--font-body); letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hub-group b { color: var(--purple-text); font-weight: 600; }
.hub-group.here { padding-top: 4px; }
/* the open idea's sections: a project's directions («Итоги» on top), an idea's check and concept */
.hub-sec { display: flex; align-items: baseline; gap: 8px; padding: 10px 10px 2px; color: var(--muted); font: 600 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.hub-sec .num { color: var(--faint); letter-spacing: 0; }
/* «Все файлы · N»: every other idea's files, folded into one row that opens in place */
.hub-all-li { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }
.hub-all .hub-ico { border-radius: 10px; background: rgb(var(--ink-t) / 0.06); color: var(--muted); }
.hub-all .hub-end { display: flex; align-items: center; gap: 10px; }
.hub-chev { display: inline-block; color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hub-all[aria-expanded='true'] .hub-chev { transform: rotate(90deg); }
.hub-all-list { display: grid; grid-auto-rows: max-content; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hub-all-list[hidden] { display: none; }
.hub-all-list.rise { animation: hub-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hub-rise { from { opacity: 0; transform: translateY(-6px); } }
.hub-empty { display: flex; align-items: center; gap: 8px; padding: 18px 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) {
  .hub > .stars { display: none; }
  .hub-b { width: 40px; height: 40px; }
  .hub-panel { position: fixed; inset: 0; z-index: 200; width: auto; max-height: none; padding: calc(12px + var(--sa-t, 0px)) calc(12px + var(--sa-r, 0px)) calc(12px + var(--sa-b, 0px)) calc(12px + var(--sa-l, 0px)); border: 0; border-radius: 0; }
  .hub-panel:not([hidden]) { animation-name: hub-in-sheet; }
  .hub-close { display: grid; place-items: center; width: 40px; height: 40px; }
  .hub-stars { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border: 1px solid rgb(var(--yellow-t) / 0.3); border-radius: 12px; background: rgb(var(--yellow-t) / 0.08); color: var(--yellow); font: 700 17px var(--font-display); }
  .hub-stars span:last-child { color: var(--muted); font: 500 13px var(--font-body); }
}
@keyframes hub-in-sheet { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .hub-b, .hub-chev { transition: none; }
  .hub-panel:not([hidden]), .hub-all-list.rise { animation: none; }
}
body.signed-out .pg-bar, body.signed-out .pg-nav { display: none; }
@media (max-width: 640px) {
  .avatar { width: 34px; height: 34px; border-width: 1px; }
  .avatar .av-in { width: 32px; height: 32px; font-size: 13px; }
  .me-menu { width: min(290px, calc(100vw - 24px)); }
}
.so-btn { background: var(--brand); color: var(--on-brand); padding: 12px 22px; }
.so-btn:hover { background: color-mix(in srgb, var(--brand) 90%, #fff); }

/* U100: «Новая идея» is a modal over the blurred, slightly darkened page (a bottom sheet above the keyboard on a phone);
   under the field, live suggestions — each a step to grow the idea; skeleton rows with the comet while they come */
.idea-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center; padding: min(14vh, 120px) 16px 16px; }
.idea-modal[hidden] { display: none; }
.im-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.45); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }
.im-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 18px 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); }
.im-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.im-head h2 { font-size: 20px; }
.im-card .form.search { padding: 0; margin: 0; max-width: none; gap: 8px; }
.im-card .bar { align-items: start; }
.im-card .bar-ico { margin-top: 3px; }
.im-card .form.search .bar textarea { height: auto; min-height: 78px; }
.im-hint { margin: 0; font-size: 12.5px; }
/* MP50 SUB-1 / SUB-9: the one input's audit side — the inline name / city row and the confirm card (no tabs) */
.biz-card[hidden], .biz-namecity[hidden] { display: none; }
.biz-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; background: transparent; color: inherit; font: inherit; }
.biz-input:focus { border-color: var(--line); outline: none; }
.biz-namecity { display: grid; gap: 8px; }
.biz-link { justify-self: start; background: none; border: 0; padding: 0; color: var(--purple-text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.biz-card { display: grid; gap: 10px; }
.biz-title { margin: 0; font-size: 17px; }
.biz-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.biz-k { color: var(--muted); }
.biz-ask { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.biz-picks, .biz-profile, .biz-goals, .biz-lens, .biz-rel, .biz-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* BA-1 (production 2026-10-21): the name / city row under the home's field — a glass panel over the idea cloud, as the
   suggestions' (the cloud's pills also keep out of its box: front.js layoutCloud); it dissolves in, opacity only */
#idea-modal .biz-namecity:not([hidden]) { position: relative; z-index: 3; margin-top: 10px; padding: 16px 18px;
  border: 1px solid rgb(var(--ink-t) / 0.1); border-radius: 16px; background: rgb(var(--glass-t) / 0.9); -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.5); animation: live-in 0.5s ease; }
/* IC-5: the free checks' line over the cloud — its own layer, the pills keep out of its box */
.acc-allow { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { #idea-modal .biz-namecity:not([hidden]) { animation: none; } }
/* 2026-10-21 (the operator: «лоадер и модал подтверждения по центру, кнопки Проверить и Отмена, без поисковой строки»):
   the one input's step. While discovery runs the field gives way to a calm loader in its place (the form keeps its box,
   so the cloud stays where it is); then the card is a centred modal — the head, a body that scrolls inside the window,
   a footer whose «Отмена» and «Проверить» are always in view; a phone gets a full-height sheet with the same footer.
   Everything dissolves in by opacity only. The card was a panel under the home's field before: the home is one screen
   tall, so a long card ran past the window with nothing to scroll (the operator's screenshot, 1000 px tall). */
.im-card .form.search { position: relative; }
.idea-modal.biz-step #form, .idea-modal.biz-step .biz-namecity, .idea-modal.biz-step .sug { visibility: hidden; }
.idea-modal.biz-step #form .biz-loading { visibility: visible; }
.biz-loading { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; min-height: 56px;
  border: 1px solid rgb(var(--ink-t) / 0.1); border-radius: 18px; background: rgb(var(--glass-t) / 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--muted); font-size: 15px; text-align: center; animation: live-in 0.7s ease; }
.biz-loading[hidden] { display: none; }
.biz-modal { position: fixed; inset: 0; z-index: 165; display: grid; place-items: center; padding: 16px; animation: live-in 0.6s ease; }
.biz-modal[hidden] { display: none; }
.bm-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.biz-card.bm-card { position: relative; display: flex; flex-direction: column; gap: 0; width: min(560px, 100%); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; }
.biz-card.bm-card[hidden] { display: none; }
.bm-head { flex: none; padding: 20px 22px 8px; }
.bm-head .biz-title { font: 700 20px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.bm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; align-content: start; padding: 4px 22px 18px; }
.bm-foot { flex: none; display: grid; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--hair); }
.bm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.bm-actions .btn.ghost { padding: 11px 20px; font-size: 15px; }
.bm-foot .biz-card-error { margin: 0; }
body.biz-open { overflow: hidden; }
@media (max-width: 640px) {
  .biz-modal { padding: 0; place-items: stretch; }
  .biz-card.bm-card { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .bm-head { padding: calc(18px + var(--sa-t, 0px)) 16px 8px; }
  .bm-body { padding: 4px 16px 16px; }
  .bm-foot { padding: 12px 16px calc(14px + var(--sa-b, 0px)); }
  .bm-actions .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .biz-loading, .biz-modal { animation: none; } }
/* B-5: the place the card audits (pre-picked, or the person's) — the chips' own «on» look, a calm colour change */
.biz-pick.on { color: var(--purple-text); border-color: var(--line); transition: color 0.3s ease, border-color 0.3s ease; }
/* MP50 SUB-9: the audit's badge on a list row / home card, and its band's ring tone (`insufficient` grey) */
.audit-badge { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--purple-text); font-size: 11.5px; line-height: 18px; white-space: nowrap; }
.sw-ring.thin .val { stroke: var(--muted); }
.ch-bizcard { min-width: 0; }
.biz-chip { background: transparent; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.biz-chip.on { color: var(--purple-text); border-color: var(--line); }
/* MP51 SUB-1: the site chip on a card without a site — its hint is the tooltip */
.biz-chip:disabled { opacity: 0.45; cursor: default; }
.biz-partial { margin: 0; font-size: 12.5px; }
body.modal-open { overflow: hidden; }
.sug[hidden] { display: none; }
.sug { display: grid; gap: 8px; }
.sug-h { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.sug-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; transition: opacity 0.2s ease; }
.sug-list.dim { opacity: 0.45; }
.sug-row { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; cursor: pointer; }
.sug-row:hover, .sug-row.on { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.1); }
.sug-label { justify-self: start; font-size: 12px; font-weight: 600; color: var(--purple-text); border: 1px solid rgb(var(--lilac-t) / 0.45); border-radius: 999px; padding: 1px 8px; }
.sug-text { font-size: 14px; line-height: 1.45; }
.sug-skel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--hair); border-radius: 12px; }
.sug-skel .bars { display: grid; gap: 7px; }
.sug-skel .bars i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgb(var(--ink-t) / 0.05), rgb(var(--ink-t) / 0.13), rgb(var(--ink-t) / 0.05)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.sug-skel .bars i:first-child { width: 28%; }
.sug-skel .bars i:last-child { width: 86%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fg-loader.sug { --s: 18px; }
.fg-loader.sug .fg-sign { width: 9px; }
.fg-loader.skel { --s: 22px; }
.fg-loader.skel .fg-sign { width: 11px; }
/* the page without a check: its entry looks like the search bar */

@media (max-width: 640px) {
  .idea-modal { place-items: end stretch; padding: 0; }
  .im-card { width: 100%; max-height: calc(100dvh - var(--kb, 0px) - 24px); margin-bottom: var(--kb, 0px); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sug-skel .bars i { animation: none; } .sug-list { transition: none; } }

/* U101: the goal's «1» is a gold medal (a disc with a rim and a short ribbon, the «1» embossed), a soft gold glow, one slow
   shine when it appears; the line ends in it */
.one-mk.medal { width: 96px; height: auto; display: block; background: none; outline: 0; border-radius: 0; filter: drop-shadow(0 0 16px rgb(var(--yellow-t) / 0.38)); }
.medal-svg { width: 96px; height: auto; display: block; overflow: visible; }
.md-1 { font: 800 38px var(--font-display); fill: #8a5a00; }
.md-1.md-hi { fill: #fff3c4; opacity: 0.7; }
.md-sweep { transform-box: view-box; transform-origin: 50px 74px; transform: rotate(18deg) translateX(-30px); animation: md-sweep 1.8s ease 0.6s 1 both; }
@keyframes md-sweep { from { transform: rotate(18deg) translateX(-30px); } to { transform: rotate(18deg) translateX(150px); } }
.goal-head { min-height: 118px; }
.node.goal::before { top: 106px; }
/* its badges: the group's colour on hover, focus or tap; a card with the preview, the title, what it is and its stage */
.have-g { --gc: #38bdf8; }
.have-g.g-research { --gc: #8b5cf6; }
.have-g.g-packaging { --gc: #facc15; }
.have-g.g-brand { --gc: #ec4899; }
.have-g.g-promo { --gc: #22c55e; }
.have-b { background: none; font-family: inherit; cursor: pointer; text-align: left; transition: border-color 0.15s ease; }
.have-b .art-ico { transition: color 0.15s ease; }
.have-b:hover, .have-b:focus-visible, .have-b.on { border-color: var(--gc); }
.have-b:hover .art-ico, .have-b:focus-visible .art-ico, .have-b.on .art-ico { color: var(--gc); }
.have-b:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; }
.hcard.have { width: 320px; max-width: min(320px, calc(100vw - 16px)); border-color: var(--gc, var(--line)); pointer-events: auto; }
.hc-shot { margin: 0; display: grid; gap: 4px; }
.hc-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 10px; border: 1px solid var(--hair); }
.hc-shot figcaption { font-size: 12px; color: var(--faint); }
.hc-tile { aspect-ratio: 16 / 10; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--gc, #38bdf8) 18%, transparent); color: var(--gc, #38bdf8); }
.hc-tile .art-ico { width: 52px; height: 52px; }
.hcard.sheet { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 50px rgb(var(--shade-t) / 0.75); }

/* U102: «Создать концепцию» — the green zone's call to action: an icon in a dark circle, the name with what it makes and how
   long, the price; a lift, a stronger glow and one shimmer on hover; the comet while the run starts */
.cta-wrap { display: grid; gap: 6px; }
.cta { position: relative; overflow: hidden; width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px;
  border: 0; border-radius: 16px; background: linear-gradient(135deg, #22c55e, #10b981); color: #04130a; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.28), inset 0 0 0 1px rgb(var(--ink-t) / 0.1); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.cta-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 19, 10, 0.86); color: #4ade80; }
.cta-ico .ico { width: 22px; height: 22px; stroke-width: 1.8; }
.cta-text { display: grid; gap: 2px; min-width: 0; }
.cta-text b { font: 800 18px/1.2 var(--font-display); }
.cta-text small { font-size: 13px; opacity: 0.82; }
.cta-price { white-space: nowrap; background: rgba(4, 19, 10, 0.78); color: #fff; border-radius: 999px; padding: 6px 12px; font: 700 15px var(--font-display); }
.cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgb(var(--ink-t) / 0.5), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(34, 197, 94, 0.45), inset 0 0 0 1px rgb(var(--ink-t) / 0.16); }
.cta:hover::after { animation: cta-shine 0.9s ease 1; }
@keyframes cta-shine { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 0; } }
.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
.cta:disabled { cursor: progress; transform: none; }
.cta.busy .cta-text small { opacity: 0.6; }
.fg-loader.cta-l { --s: 40px; }
.fg-loader.cta-l .fg-sign { width: 18px; }
.cta-error { margin: 0; color: var(--bad); font-size: 13.5px; }
.cta-error:empty { display: none; }
@media (max-width: 640px) {
  .one-mk.medal, .medal-svg { width: 72px; }
  .goal-head { min-height: 90px; }
  .node.goal::before { top: 84px; }
  .goal-card { margin-left: -8px; padding-left: 8px; }
  .cta { min-height: 56px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px 8px 8px; }
  .cta-ico { width: 38px; height: 38px; }
  .cta-text b { font-size: 16px; }
  .cta-text small { font-size: 12px; }
  .im-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .md-sweep { animation: none; }
  .cta, .have-b, .have-b .art-ico { transition: none; }
  .cta:hover { transform: none; }
  .cta:hover::after { animation: none; }
}
/* the medal is wider than the line's column: equal negative margins keep its centre on the line */
.one-mk.medal { --mw: 96px; width: var(--mw); margin-inline: calc((var(--mk) - var(--mw)) / 2); }
.one-mk.medal .medal-svg { width: 100%; }
@media (max-width: 640px) {
  .one-mk.medal { --mw: 72px; }
  /* on a phone the call to action takes the zone's whole width */
  .concept-zone .cta-wrap { margin-left: calc(-1 * (var(--mk) + var(--mk-gap))); }
}

/* U103: who does the work in «С нами» — Fox (the mascot in a purple→yellow ring, online) and the concept's team under
   it (each agent's icon in its files' colour, what it does, its files); the busy one wears the comet, the done ones a tick */
.fg-research { --gc: #8b5cf6; }
.fg-packaging { --gc: #facc15; }
.fg-brand { --gc: #ec4899; }
.fg-promo { --gc: #22c55e; }
.fg-other { --gc: #38bdf8; }
.exec { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.ex-av { position: relative; width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #7c3aed, #ffc233); }
.ex-av img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; background: #000; border: 2px solid var(--surface); }
.ex-online { position: absolute; right: 2px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--good); border: 3px solid #0b1410; }
.ex-txt { display: grid; gap: 2px; min-width: 0; }
.ex-txt b { font: 800 18px var(--font-display); letter-spacing: 0.02em; }
.ex-role { font-size: 13.5px; color: var(--good); }
.ex-txt .faint { font-size: 13.5px; }
.team { display: grid; gap: 10px; margin-left: 35px; padding-left: 22px; border-left: 1px dashed rgb(var(--good-t) / 0.35); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.agent { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--hair); border-radius: 12px; background: rgb(var(--ink-t) / 0.02); }
.ag-av { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gc); background: color-mix(in srgb, var(--gc) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gc) 55%, transparent); }
.ag-av .art-ico { width: 18px; height: 18px; }
.fg-loader.agent { --s: 36px; }
.fg-loader.agent .fg-sign { width: 15px; }
.agent.busy { border-color: color-mix(in srgb, var(--gc) 60%, transparent); }
.agent.busy .ag-av { background: var(--surface); border-color: transparent; }
.ag-ok { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: #052e1f; font: 700 10px/16px var(--font-display); font-style: normal; text-align: center; }
.ag-txt { display: grid; gap: 2px; min-width: 0; }
.ag-txt b { font-size: 14px; }
.ag-txt .faint { font-size: 12.5px; line-height: 1.35; }
.ag-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ag-file { width: 26px; height: 26px; padding: 0; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; }
.ag-file .art-ico { width: 14px; height: 14px; }
.team-more { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.chip-g { border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; color: var(--muted); font-size: 12.5px; }
/* U104: a file's card wherever a file appears — the zone's stages, the run's chips and rows — with the group's colour */
button.art { font-family: inherit; background: none; cursor: pointer; text-align: left; }
.art[data-card]:hover, .art[data-card]:focus-visible, .art.on, .art-chip[data-card]:hover, .art-chip[data-card]:focus-visible, .art-chip.on, .ag-file:hover, .ag-file:focus-visible, .ag-file.on { border-color: var(--gc); }
.art[data-card]:hover .art-ico, .art[data-card]:focus-visible .art-ico, .art.on .art-ico, .art-chip[data-card]:hover .art-ico, .art-chip.on .art-ico, .ag-file:hover, .ag-file.on { color: var(--gc); }
.art-node .mark > [data-card] { display: grid; place-items: center; cursor: help; }
.hc-open { justify-self: start; }
@media (max-width: 640px) {
  .exec { grid-template-columns: 56px minmax(0, 1fr); }
  .ex-av { width: 56px; height: 56px; }
  .concept-zone .team { margin-left: calc(-1 * (var(--mk) + var(--mk-gap))); }
  .concept-zone .team { padding-left: 0; border-left: 0; }
  .team-grid { grid-template-columns: 1fr; }
}

/* U105: a row waiting for its score is calm — a still ring with «…» breathing slowly and a grey line with what it waits for */
.mini.pending { animation: wait-breath 2s ease-in-out infinite alternate; }
.mini.pending text { fill: var(--faint); font: 700 16px var(--font-display); }
@keyframes wait-breath { from { opacity: 0.55; } to { opacity: 1; } }
.wait-line { display: block; margin-top: 1px; font-size: 12.5px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .mini.pending { animation: none; } }

/* U106: the team's avatars are app icons — a squircle with a two-stop gradient, a white glyph, a top highlight and a soft
   shadow; the busy one wears the comet ring, the done one a green badge at the corner; the executor's description is an «i» */
.agent { grid-template-columns: 44px minmax(0, 1fr); }
.agent.busy { border-color: rgb(var(--lavender-t) / 0.55); }
.ag-av, .agent.busy .ag-av { width: 44px; height: 44px; border: 0; border-radius: 24%; color: #fff; background: linear-gradient(160deg, var(--t1, #7c3aed), var(--t2, #a78bfa));
  box-shadow: inset 0 1px 0 rgb(var(--ink-t) / 0.4), inset 0 12px 14px -6px rgb(var(--ink-t) / 0.22), 0 4px 10px rgb(var(--shade-t) / 0.45); }
.ag-av .art-ico { width: 24px; height: 24px; stroke-width: 2.2; color: #fff; }
.tint-violet { --t1: #7c3aed; --t2: #a78bfa; }
.tint-sky { --t1: #0284c7; --t2: #38bdf8; }
.tint-pink { --t1: #db2777; --t2: #f472b6; }
.tint-rose { --t1: #be123c; --t2: #fb7185; }
.tint-amber { --t1: #d97706; --t2: #fcd34d; }
.tint-cyan { --t1: #0e7490; --t2: #22d3ee; }
.tint-lime { --t1: #4d7c0f; --t2: #a3e635; }
.tint-red { --t1: #dc2626; --t2: #f87171; }
.tint-green { --t1: #059669; --t2: #34d399; }
.fg-loader.agent-ring { --s: 56px; position: absolute; left: -6px; top: -6px; }
.fg-loader.agent-ring .fg-sign { display: none; }
.ag-ok { top: -5px; right: -5px; bottom: auto; width: 18px; height: 18px; border: 2px solid var(--surface); font-size: 10px; line-height: 14px; }
.ex-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--line); color: var(--purple-text); font: italic 700 12px/1 Georgia, 'Times New Roman', serif; vertical-align: 1px; cursor: help; }
.ex-info::after { left: auto; right: -8px; width: min(300px, 80vw); color: var(--text); }
.ex-info:hover, .ex-info:focus-visible { border-color: var(--purple-text); }
@media (max-width: 640px) {
  .agent { grid-template-columns: 40px minmax(0, 1fr); }
  .ag-av, .agent.busy .ag-av { width: 40px; height: 40px; }
  .ag-av .art-ico { width: 22px; height: 22px; }
  .fg-loader.agent-ring { --s: 52px; }
}

/* U107: an agent's card opens its detail card — the app icon large on its tint, what it does, how, its state in the run, its
   files as rows (each shows its file's card); U109: the goal's descriptor */
.agent[data-card] { --gc: var(--t2); cursor: pointer; transition: border-color 0.15s ease; }
.agent[data-card]:hover, .agent[data-card]:focus-visible, .agent.on { border-color: var(--t2); }
.agent[data-card]:focus-visible { outline: 2px solid var(--t2); outline-offset: 2px; }
.hcard.have { max-height: calc(100vh - 16px); overflow-y: auto; }
.ag-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 34%, var(--surface)), color-mix(in srgb, var(--t2) 12%, var(--surface))); }
.ag-av.big { width: 72px; height: 72px; }
.ag-av.big .art-ico { width: 38px; height: 38px; }
.hcard .hc-sub { color: var(--text); font-size: 14px; }
.ag-state { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; color: var(--faint); }
.ag-state.live { color: var(--purple-text); }
.ag-state.done { color: var(--good); }
.ag-ok-s { width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: #052e1f; font: 700 10px/16px var(--font-display); font-style: normal; text-align: center; }
.hc-label { margin-top: 4px; }
.ag-does { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-row { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 8px; border: 1px solid var(--hair); border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ag-row .art-ico { width: 17px; height: 17px; margin-top: 2px; color: var(--gc); }
.ag-row > span { display: grid; gap: 1px; min-width: 0; }
.ag-row b { font-size: 13.5px; font-weight: 600; }
.ag-row .faint { font-size: 12px; line-height: 1.35; }
.ag-row:hover, .ag-row:focus-visible { border-color: var(--gc); }
.hc-back { justify-self: start; background: none; border: 0; padding: 0; color: var(--purple-text); font: inherit; font-size: 13px; cursor: pointer; }
.goal-head { flex-wrap: wrap; }
.goal-desc { flex-basis: 100%; font-size: 15.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .goal-desc { white-space: normal; font-size: 15px; } }

/* U110: once bought, the zone wears the line's plain look — no green frame, tint or glow (that look is the offer's) */
.concept-zone.active { border-color: transparent; background: none; box-shadow: none; }
.concept-zone.active .sale-head .label { color: var(--faint); }
.concept-zone.active .sale-head h2 { color: var(--text); }
.concept-zone.active .lock-mk.open { background: var(--bg); color: var(--purple-text); border-color: var(--purple-text); box-shadow: none; }
.concept-zone.active .run-line { color: var(--muted); }
.concept-zone.active.just-on { animation: zone-on-plain 1.2s ease; }
@keyframes zone-on-plain { from { box-shadow: 0 0 0 1px rgb(var(--good-t) / 0.5), 0 0 70px rgb(var(--good-t) / 0.3); } to { box-shadow: none; } }

/* U111: a finished concept is one item — its cover, the name and the promise, the main points; it opens to what was done */
.concept-final > details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 12px 0 14px; }
.concept-final > details > summary::-webkit-details-marker { display: none; }
.concept-final .mark { padding-top: 4px; }
.cf-mk { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #7c3aed, #a78bfa); color: #fff; box-shadow: 0 0 0 6px var(--tint); }
.cf-mk .art-ico { width: 26px; height: 26px; stroke-width: 2.1; }
.cf-main { display: grid; gap: 8px; min-width: 0; }
.cf-cover { display: block; width: min(560px, 100%); aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); margin-bottom: 6px; }
.cf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-cover.none { display: grid; place-items: center; background: linear-gradient(160deg, rgb(var(--violet-t) / 0.35), rgb(var(--lavender-t) / 0.08)); color: #c4b5fd; }
.cf-cover.none .art-ico { width: 72px; height: 72px; stroke-width: 1.6; }
.cf-name { font: 800 24px/1.2 var(--font-display); color: var(--text); }
.cf-promise { font-size: 16px; color: var(--muted); }
.cf-points { display: grid; gap: 6px; margin-top: 4px; max-width: 760px; }
.cf-pt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 14.5px; padding: 6px 0; border-top: 1px solid var(--hair); }
.cf-l { color: var(--faint); font-size: 13px; }
.concept-final > details > summary:hover .cf-name { color: var(--purple-text); }
.cf-body { padding-top: 4px; }
/* on a phone: one page with the cover full-width; opened, its stages, steps and files are pages of their own */
body.paged #check .concept-zone > .node:not(.pg-current):not(.pg-holds) { display: none; }
body.paged .concept-final.pg-holds > details > summary { display: none; }
body.paged .concept-final.pg-current .cf-body { display: none; }
body.paged .cf-body > :not(.pg-current) { display: none; }
@media (max-width: 640px) {
  .concept-final > details > summary { grid-template-columns: 1fr; }
  .concept-final > details > summary > .mark { display: none; }
  .cf-cover { width: 100%; }
  .cf-pt { grid-template-columns: 1fr; gap: 2px; }
}
.concept-zone.active .ex-role { color: var(--muted); }
.concept-zone.active .run-state { color: var(--purple-text); border-color: rgb(var(--lilac-t) / 0.45); }
.concept-zone.active .run-state.st-waiting { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.5); }
.concept-zone.active .run-state.st-failed { color: var(--bad); border-color: var(--bad); }

/* U113: each finished stage of the concept folds to its result; the research's result is a row per report — its icon,
   name, the figure as an accent chip, one sentence — and a row opens that report */
.stage-final .mark { padding-top: 2px; }
.stage-final .stage-mk.run.st-done { width: 40px; height: 40px; font-size: 16px; color: #052e1f; }
.stage-final .cf-main > .label { color: var(--faint); }
.stage-final > details > summary:hover .cf-main > .label { color: var(--purple-text); }
.res-rows { display: grid; gap: 4px; max-width: 860px; }
.res-row { display: grid; grid-template-columns: 20px 150px auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.res-row .art-ico { width: 17px; height: 17px; color: var(--gc); align-self: center; }
.res-l { font-weight: 600; font-size: 14.5px; }
.res-fig { justify-self: start; white-space: nowrap; font: 700 13px var(--font-display); color: #e9d5ff; background: rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.45); border-radius: 999px; padding: 1px 9px; }
.res-t { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.res-row:hover, .res-row:focus-visible, .res-row.on { border-color: var(--gc); background: rgba(139, 92, 246, 0.06); }
@media (max-width: 640px) {
  .res-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .res-t { grid-column: 2 / -1; }
}
.pg-mark .stage-mk.run.st-done { background: var(--good); border-color: var(--good); color: #052e1f; }

/* U117: FoxGuide's context panel + app panel (values from its code: Radix dark gray + violet, radius 4.5/6/9/12, lucide
   icons) — the line | the files rail | the app panel, each scrolling on its own; a full-screen sheet below 1024 px */
:root {
  --g1: #000; --g2: #121212; --g3: #1f1f1f; --g4: #282828; --g6: #3a3a3a; --g7: #474747; --g8: #606060; --g9: #6d6d6d; --g10: #7a7a7a; --g11: #b3b3b3; --g12: #eee;
  --ga2: #ffffff12; --ga3: #ffffff1f; --ga4: #ffffff28; --ga5: #ffffff30; --ga6: #ffffff3a; --ga8: #ffffff60; --ga11: #ffffffb3;
  --v7: #5c22c3; --v9: #46059d; --va3: rgba(111, 29, 255, 0.35); --va11: #b6a4ff; --v12: #e8e3ff;
}
.fx-rail, .fx-app { font-family: var(--font-body); color: var(--g12); }
.fx-rail[hidden], .fx-app[hidden], .fx-menu[hidden], .fx-files[hidden], .fx-body[hidden] { display: none; }
.fx-rail .pi, .fx-app .pi { width: 15px; height: 15px; stroke-width: 2; flex: none; }
/* the rail (their context panel): 285 px, 48 px folded */
.fx-rail { position: fixed; z-index: 86; top: calc(var(--top-h, 74px) + 8px); bottom: 8px; right: calc(var(--pw) + 16px); width: var(--rw, 285px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  opacity: 0; transition: opacity 0.2s ease, width 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.fx-rail.in { opacity: 1; }
.fx-collapse { display: flex; align-items: center; gap: 8px; margin: 0 8px 4px; padding: 4px 10px; min-height: 26px; border: 1px dashed var(--g7); border-radius: 6px; background: none; color: var(--g9); font: inherit; font-size: 12px; cursor: pointer; transition: color 0.2s; }
.fx-collapse .pi { width: 16px; height: 16px; }
.fx-collapse:hover { color: var(--g11); }
.fx-search { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: var(--g3); color: var(--g10); }
.fx-search .pi { width: 16px; height: 16px; }
.fx-search:hover, .fx-search:focus-within { border-color: var(--v7); }
.fx-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--g12); font: inherit; font-size: 14px; outline: none; }
.fx-search input::placeholder { color: var(--g10); }
.fx-sections { overflow-y: auto; padding: 0 8px 8px; display: grid; gap: 8px; align-content: start; min-height: 0; }
.fx-sec { display: grid; gap: 4px; }
.fx-sec-h { display: grid; grid-template-columns: 14px 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 12px; min-height: 36px; border: 0; border-radius: 4px; background: var(--ga2); color: var(--g12); font: inherit; text-align: left; cursor: pointer; }
.fx-sec-h .pi { width: 14px; height: 14px; color: var(--g11); transition: transform 0.15s; }
.fx-sec-h .art-ico { width: 14px; height: 14px; color: var(--g11); }
.fx-sec.open > .fx-sec-h > .pi:first-child { transform: rotate(90deg); }
.fx-sec-h b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-count { padding: 2px 6px; border-radius: 4.5px; background: var(--ga3); color: var(--ga11); font-size: 12px; font-weight: 500; line-height: 16px; }
.fx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-row { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--g12); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background-color 0.12s, border-color 0.12s; }
.fx-row .art-ico { width: 14px; height: 14px; color: var(--g11); }
.fx-ri { display: grid; place-items: center; }
.fx-rt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-row:hover { border-color: var(--v9); }
.fx-row.on { background: var(--va3); }
.fx-row.dim { color: var(--g9); cursor: default; }
.fx-row.dim:hover { border-color: transparent; }
.fx-row.dim .art-ico { color: var(--g8); }
.fx-row.dim .pi { width: 12px; height: 12px; color: var(--g9); }
.fg-loader.row { --s: 18px; }
.fg-loader.row .fg-sign { width: 9px; }
.fx-none { padding: 8px 12px; color: var(--g9); }
.fx-resize { margin: 4px 8px 0; height: 20px; border: 1px dashed var(--g7); border-radius: 6px; background: var(--g1); display: grid; place-items: center; color: var(--g9); font-size: 13px; cursor: col-resize; user-select: none; transition: color 0.15s, border-color 0.15s; }
.fx-resize:hover, body.ap-resizing .fx-resize { color: var(--v9); border-color: var(--v9); }
/* folded to icons (48 px) */
.fx-rail.icons .fx-collapse span, .fx-rail.icons .fx-search, .fx-rail.icons .fx-sec-h b, .fx-rail.icons .fx-count, .fx-rail.icons .fx-rt, .fx-rail.icons .fx-row > .pi, .fx-rail.icons .fx-resize, .fx-rail.icons .fx-sec-h > .pi:first-child { display: none; }
.fx-rail.icons .fx-collapse { width: 32px; height: 32px; padding: 0; margin: 0 auto 8px; justify-content: center; }
.fx-rail.icons .fx-collapse .pi { transform: scaleX(-1); }
.fx-rail.icons .fx-sections { padding: 0 4px; }
.fx-rail.icons .fx-sec-h { grid-template-columns: 1fr; justify-items: center; padding: 8px 0; }
.fx-rail.icons .fx-row { grid-template-columns: 1fr; justify-items: center; padding: 8px 0; }
/* the app panel (their PanelDetailFrame): gray-2 card, the chrome row, the bordered inner card with the toolbar */
.fx-app { position: fixed; z-index: 86; top: calc(var(--top-h, 74px) + 8px); right: 8px; bottom: 8px; width: var(--pw, 50vw); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px;
  background: var(--g2); border-radius: 12px; padding: 4px 12px 12px; transform: translateX(24px); opacity: 0; transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.45s ease, width 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.fx-app.in { transform: none; opacity: 1; }
.fx-grip { position: absolute; left: -9px; top: 0; bottom: 0; width: 8px; cursor: col-resize; }
.fx-grip:hover, body.ap-resizing .fx-grip { background: linear-gradient(90deg, transparent 3px, var(--v9) 3px, var(--v9) 5px, transparent 5px); }
.fx-chrome { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; min-width: 0; }
.fx-chrome .fx-wide:not(.fx-sep) + .fx-wide:not(.fx-sep) { margin-left: -4px; }
.fx-ib { display: inline-grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 4.5px; background: none; color: var(--ga11); cursor: pointer; flex: none; }
.fx-ib:hover:not(:disabled), .fx-ib[aria-expanded='true'] { background: var(--ga3); }
.fx-ib:disabled { color: var(--ga8); cursor: default; }
.fx-ib[aria-pressed='true'] { color: var(--va11); }
.fx-right .pi { width: 14px; height: 14px; }
.fx-x { color: var(--va11); }
.fx-x:hover { background: var(--va3) !important; }
.fx-sep { width: 1px; height: 16px; background: var(--ga6); flex: none; }
.fx-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; font-size: 12px; color: var(--g11); }
.fx-crumb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.fx-crumb > .pi:first-child { width: 13px; height: 13px; color: var(--g10); }
.fx-crumb .pi { width: 12px; height: 12px; color: var(--g8); }
.fx-crumb span { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.fx-crumb.cur { gap: 6px; color: var(--g12); min-width: 0; }
.fx-crumb.cur b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fx-ci { display: inline-grid; place-items: center; color: var(--g11); }
.fx-ci .art-ico { width: 14px; height: 14px; }
.fx-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fx-narrow, .fx-back { display: none; }
.fx-inner { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--g2); border: 1px solid var(--ga5); border-radius: 12px; overflow: hidden; }
.fx-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--ga4); }
.fx-tools-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-tools .fx-ib[aria-pressed='true'] { background: var(--v9); color: var(--on-brand); }
.fx-find { display: flex; align-items: center; gap: 6px; color: var(--ga11); min-width: 0; }
.fx-find input { width: 200px; max-width: 40vw; background: none; border: 0; color: var(--g12); font: inherit; font-size: 12px; outline: none; }
.fx-find input::placeholder { color: var(--g9); }
.fx-acts { position: relative; }
.fx-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; border-radius: 4.5px; color: var(--va11); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 8px; }
.fx-link .pi { width: 14px; height: 14px; }
.fx-link:hover, .fx-link[aria-expanded='true'] { background: var(--va3); }
.fx-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 6; min-width: 210px; display: grid; gap: 2px; padding: 6px; background: var(--g3); border: 1px solid var(--ga5); border-radius: 9px; box-shadow: 0 16px 40px rgb(var(--shade-t) / 0.7); }
.fx-menu button { text-align: left; background: none; border: 0; color: var(--g12); font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.fx-menu button:hover, .fx-menu button:focus-visible { background: var(--va3); outline: none; }
.fx-menu-sep { height: 1px; background: var(--ga4); margin: 4px 2px; }
.fx-body { overflow: auto; padding: 16px 24px 32px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.fx-files { overflow: auto; padding: 8px; }
.fx-files .fx-sections { overflow: visible; padding: 0; }
.ap-view { display: grid; gap: 16px; min-width: 0; }
.ap-article { display: grid; gap: 10px; border-top: 1px solid var(--ga4); padding-top: 16px; }
.ap-h { margin: 0; }
.ap-toc { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ga4); border-radius: 9px; }
.ap-toc[hidden] { display: none; }
.ap-toc-i { text-align: left; background: none; border: 0; color: var(--va11); font: inherit; font-size: 13px; padding: 3px 0; cursor: pointer; }
.ap-toc-i.lv-3 { padding-left: 12px; }
.ap-toc-i.lv-4 { padding-left: 24px; }
mark.fx-hit { background: rgb(var(--warn-t) / 0.35); color: inherit; border-radius: 3px; }
.fx-flash { animation: fx-flash 1.6s ease 1; }
@keyframes fx-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--v7); } 100% { box-shadow: none; } }
/* their table and pagination footer */
.fx-table-wrap { display: grid; gap: 8px; }
.fx-tscroll { overflow-x: auto; }
.fx-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.fx-table th { position: sticky; top: 0; background: var(--g2); text-align: left; font-size: 12px; font-weight: 500; color: var(--g11); height: 28px; padding: 0 16px; white-space: nowrap; }
.fx-table td { height: 48px; padding: 0 16px; background: var(--g1); border-top: 1px solid transparent; border-bottom: 1px solid transparent; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-table td:first-child { border-left: 1px solid transparent; border-radius: 6px 0 0 6px; }
.fx-table td:last-child { border-right: 1px solid transparent; border-radius: 0 6px 6px 0; }
.fx-table tbody tr:hover td { border-color: var(--v7); }
.fx-table td a { color: var(--va11); }
.fx-frow th { height: auto; padding: 0 6px 6px; }
.fx-frow input { width: 100%; min-width: 80px; height: 28px; padding: 0 8px; border: 1px solid var(--ga5); border-radius: 6px; background: var(--g3); color: var(--g12); font: inherit; font-size: 12px; }
.fx-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; margin-top: 8px; background: var(--g2); font-size: 12px; color: var(--g11); }
.fx-pages { display: inline-flex; align-items: center; gap: 6px; }
.fx-pages > span { min-width: 90px; text-align: center; }
.fx-pb { width: 26px; height: 24px; border: 0; border-radius: 4.5px; background: var(--ga3); color: var(--ga11); font-size: 14px; cursor: pointer; }
.fx-pb:disabled { color: var(--ga8); cursor: default; }
.fx-per select { height: 32px; padding: 0 8px; border-radius: 6px; border: 0; background: var(--g1); color: var(--g12); font: inherit; font-size: 13px; }
.ap-toast { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; background: var(--g4); border: 1px solid var(--ga5); border-radius: 999px; padding: 7px 14px; font-size: 13px; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.ap-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* the line beside them: narrower, keeps its own scroll; the file's item is marked */
body.panel-open.panel-side main { margin-right: calc(var(--pw) + var(--rw) + 32px); transition: margin-right 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
body.panel-open.panel-side main .column { max-width: 1040px; }
body.panel-open.panel-side .res-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
body.panel-open.panel-side .res-t { grid-column: 2 / -1; }
body.panel-open.panel-side .cf-pt { grid-template-columns: 1fr; gap: 2px; }
body.ap-resizing .fx-app, body.ap-resizing main, body.ap-resizing .fx-rail { transition: none; user-select: none; }
/* MP49 SUB-8 rework (the operator: «артефакт должен сдвигать контент … а не открываться поверх»): over the project map
   (`.pm`, a fixed layer of its own — `main` is hidden under it) the panel DOCKS at the right and the map's column reflows
   narrower beside it, as the site console's `body.panel-open main` — never an overlay; full width hides the column. A
   table swapped in the docked panel dissolves (`.fx-swap`, opacity only). */
@media (min-width: 1024px) {
  body.pm-on .pm-stage, body.pm-on .pm-ghost { transition: opacity 0.45s ease, right 0.48s cubic-bezier(0.32, 0.72, 0, 1), left 0.48s cubic-bezier(0.32, 0.72, 0, 1); }
  body.pm-on.panel-open.panel-side .pm-stage, body.pm-on.panel-open.panel-side .pm-ghost { right: calc(var(--pw) + 16px); }
  /* the column moved left keeps clear of Fox's avatar at the left edge (it lay over the tiles and the rows), as `main` does */
  body.pm-on.panel-open.panel-side:not(.chat-open) .pm-stage, body.pm-on.panel-open.panel-side:not(.chat-open) .pm-ghost { left: 76px; }
  body.pm-on.panel-open.panel-side.ap-full .pm-stage { visibility: hidden; }
  body.pm-on.ap-resizing .pm-stage, body.pm-on.ap-resizing .pm-ghost { transition: none; }
}
.fx-body.fx-swap { animation: fx-swap 0.5s ease-out; }
@keyframes fx-swap { from { opacity: 0; } }
.art-node.panel-on > details > summary, .art-node.panel-on > .row-static { background: var(--va3); border-radius: 12px; }
.art-chip.panel-on, .res-row.panel-on { border-color: var(--v7); background: var(--va3); }
/* below 1024 px: a full-screen sheet (gray-2, top radii 12) with the same chrome; the rail is its «Файлы» */
@media (max-width: 1023px) {
  .fx-rail { display: none; }
  .fx-app { inset: 0; width: 100vw; height: 100dvh; z-index: 210; border-radius: 12px 12px 0 0; padding: 0 8px 8px; transform: translateY(40px); transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
  .fx-app.in { transform: none; }
  .fx-grip, .fx-wide { display: none; }
  .fx-back, .fx-narrow { display: inline-grid; }
  .fx-chrome { height: 52px; padding: env(safe-area-inset-top) 4px 0; }
  .fx-chrome::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--g7); }
  .fx-ib { width: 44px; height: 44px; }
  .fx-ib .pi { width: 18px; height: 18px; }
  .fx-crumb span { max-width: 120px; }
  .fx-find input { width: 120px; }
  .fx-body { padding: 16px 16px calc(30px + env(safe-area-inset-bottom)); }
  .fx-app.list .fx-tools { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-app, .fx-rail, body.panel-open.panel-side main, .ap-toast, body.pm-on .pm-stage, body.pm-on .pm-ghost { transition: none; } .fx-flash, .fx-body.fx-swap { animation: none; } }

/* U118: a file's brief on the line — the figure, two or three points, «Открыть …» into the panel */
.brief { display: grid; gap: 10px; }
.br-fig { display: grid; gap: 2px; }
.br-fig b { font: 800 22px/1.25 var(--font-display); color: var(--text); }
.br-fig .faint { font-size: 13px; }
.br-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--muted); }
.br-rows li { padding-left: 14px; position: relative; }
.br-rows li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--purple-text); }
.br-lvs { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.br-lv b { color: var(--text); }
.br-to { display: block; color: var(--good); font-size: 13.5px; }
.br-pass { color: var(--good); }
.br-fail { color: var(--bad); }
.br-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.br-open .ico, .open-row .btn .ico { width: 15px; height: 15px; }
.br-part { background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; color: var(--purple-text); font: inherit; font-size: 13px; cursor: pointer; }
.br-part:hover, .br-part:focus-visible { border-color: var(--purple-text); }
.open-row { display: flex; }
.hc-way { font-size: 12.5px; color: var(--muted); }
.have-b.with-shot { padding-left: 4px; }
.hb-shot { width: 34px; height: 22px; object-fit: cover; border-radius: 4px; flex: none; }
.fx-ib[hidden] { display: none; }
/* «Открыть …» on the line is a quiet outline button, also inside the green zone */
.btn.br-open, .concept-zone .btn.br-open { background: none; color: var(--purple-text); border: 1px solid var(--line); padding: 7px 14px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
.btn.br-open:hover, .concept-zone .btn.br-open:hover { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.08); }

/* U122: below 1024 px the line is one page, folded tighter; a sticky «Сейчас: …»; files in a FoxGuide MobileSheet */
.cf-short, .now-chip, .fx-grab, .fx-backdrop, .fx-sub { display: none; }
.fx-backdrop[hidden] { display: none !important; }
.pg-bar, .pg-nav { display: none !important; }
@media (max-width: 1023px) {
  /* a finished stage folded: its result in two lines; open: the full result and its steps */
  .stage-final > details:not([open]) .cf-short { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
  .stage-final > details:not([open]) .cf-full { display: none; }
  .cf-short b { color: var(--text); font: 700 16px/1.3 var(--font-display); }
  .cs-fig { display: inline; margin-right: 12px; }
  .cs-fig b { font-size: 14px; }
  .cs-promise { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .stage-final > details > summary { padding: 10px 0; }
  .folded-check > details:not([open]) .reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  /* «Сейчас: …» sticks under the header */
  .now-chip { position: sticky; top: 66px; z-index: 60; justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px;
    background: rgb(var(--surface-t) / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
  .now-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the sheet: a backdrop (the frame) and the surface at 92 % of the screen, its top rounded, its grab bar */
  .fx-backdrop { display: block; position: fixed; inset: 0; z-index: 209; background: rgb(var(--ground-t) / 0.55); opacity: 0; transition: opacity 0.38s ease; }
  .fx-backdrop.in { opacity: 1; }
  .fx-app { top: 8dvh; left: 0; right: 0; bottom: 0; height: auto; width: 100vw; z-index: 210; border-radius: 12px 12px 0 0; padding: 0 8px env(safe-area-inset-bottom); gap: 4px;
    grid-template-rows: auto auto minmax(0, 1fr); transform: translateY(100%); opacity: 1; transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
  .fx-app.in { transform: translateY(var(--drag, 0px)); }
  .fx-app.dragging { transition: none; }
  /* MP49 SUB-8 rework: over the project map the sheet takes the full width under the header — the header's controls
     (the projects, the bell, the menu) stay in reach above it and its backdrop */
  body.pm-on .fx-app { top: var(--top-h, 64px); border-radius: 12px 12px 0 0; }
  body.pm-on .fx-backdrop { top: var(--top-h, 64px); }
  .fx-grab { display: grid; place-items: center; width: 100%; min-height: 22px; padding: 8px 0 4px; border: 0; background: none; cursor: grab; }
  .fx-grab i { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--g7); }
  .fx-chrome { height: auto; min-height: 48px; padding: 0 2px; }
  .fx-chrome::before { display: none; }
  /* its header: ‹ back to the step, the file's name and its stage › step, «…», ✕ */
  .fx-crumbs { font-size: 15px; }
  .fx-crumb.cur { align-items: center; }
  .fx-cur-t { display: grid; min-width: 0; }
  .fx-cur-t b { font: 700 16px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-sub { display: block; font-size: 12px; color: var(--g10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-acts { display: none; }
  .fx-inner { border-radius: 10px; }
  .fx-body { padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
  body.sheet-open { overflow: hidden; }
}
/* the panel's content never runs wider than the panel */
.fx-body, .ap-view { grid-template-columns: minmax(0, 1fr); }
.fx-body > *, .ap-view > * { min-width: 0; }
.fx-body .fact-b { white-space: normal; }
@media (max-width: 1023px) {
  /* a stage row keeps its mark on the line */
  .stage-final > details > summary { grid-template-columns: var(--mk) minmax(0, 1fr); }
  .stage-final > details > summary > .mark { display: grid; }
}
@media (max-width: 1023px) {
  /* an expanded step keeps its brief in the text column, clear of the line */
  .concept-zone .art-node > details > .sec-body, .stage-final .art-node > details > .sec-body { margin-left: calc(var(--mk) + var(--mk-gap)); background: none; }
}

/* the panel's content fits its width: grid children may shrink, long words break, only a true table scrolls (in its own
   wrapper), label/value rows put the value under the label when the panel is narrow */
.fx-body { container-type: inline-size; overflow-wrap: break-word; }
.fx-body a, .fx-body code { overflow-wrap: anywhere; }
.fx-body :is(div, section, article, header, ul, ol, li, dl, dt, dd, p, table, figure, details, summary, blockquote) { min-width: 0; }
.fx-table-wrap, #ap-table { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fx-tscroll { overflow-x: auto; max-width: 100%; }
.fx-table td { white-space: normal; overflow: visible; text-overflow: clip; max-width: 340px; min-width: 72px; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; overflow-wrap: break-word; }
.fx-table td a { overflow-wrap: anywhere; }
.fx-pager { flex-wrap: wrap; row-gap: 8px; }
.fx-body pre { white-space: pre-wrap; }
.fx-body img, .fx-body video, .fx-body iframe { max-width: 100%; }
@container (max-width: 560px) {
  .art-dl-list, .pass-fail, .vr { grid-template-columns: minmax(0, 1fr); }
  .art-dl-list dt { margin-top: 6px; }
  .art-dl-list dd { margin-left: 0; }
}
@media (max-width: 1023px) {
  /* the sheet's file name may take two lines */
  .fx-cur-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* U115: the full project's offer after a finished concept */

.package-zone { margin-top: 18px; }
.package-zone .stage-mk.locked.package { border-color: var(--good); color: var(--good); }
.package-zone .stage-mk.locked.package .lk { color: var(--good); border-color: rgb(var(--good-t) / 0.4); }
.package-zone .pk-line { color: var(--muted); white-space: normal; display: block; -webkit-line-clamp: unset; }
.package-zone .pk-stage .arts { margin-top: 8px; }
.pk-close-main { display: grid; gap: 22px; min-width: 0; padding: 8px 0 18px; }
.pk-launch { display: grid; gap: 12px; }
.pk-launch h3 { margin: 0; font: 700 17px/1.3 var(--font-display); color: var(--text); }
.pk-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pk-tile { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid rgb(var(--good-t) / 0.28); border-radius: 14px; background: rgb(var(--good-t) / 0.05); font-size: 14.5px; line-height: 1.4; color: var(--text); }
.pk-tile .ico { width: 24px; height: 24px; color: var(--good); }
.pk-guarantee { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border: 1.5px solid var(--yellow); border-radius: 16px;
  background: radial-gradient(70% 90% at 0% 0%, rgb(var(--yellow-t) / 0.14), transparent 70%), rgb(var(--yellow-t) / 0.03); box-shadow: 0 0 0 5px rgb(var(--yellow-t) / 0.06); }
.pk-shield { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); }
.pk-shield .ico { width: 24px; height: 24px; stroke-width: 1.8; }
.pk-guarantee > span:last-child { display: grid; gap: 4px; }
.pk-guarantee b { font: 700 18px/1.25 var(--font-display); color: var(--yellow); }
.pk-guarantee b + span { font-size: 15px; line-height: 1.5; color: var(--text); }
.pk-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-perks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; color: var(--text); }
.pk-perks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #052e1f; background: var(--good); }
.package-zone .cta-wrap { margin-top: 2px; }
.package-zone.active .pk-stage .unlock.queued { margin-top: 6px; }
.run-state.st-queued { color: var(--muted); border-color: var(--line); }
@media (max-width: 640px) {
  .pk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-guarantee { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .pk-shield { width: 36px; height: 36px; }
}
.package-zone .pk-launch h3 { text-transform: none; letter-spacing: 0; font: 700 17px/1.3 var(--font-display); color: var(--text); }

/* U116: the switcher by tier — projects pinned, then concepts, then checks; archiving; the open idea's tier */
.sw-group { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 4px; font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); list-style: none; }
.sw-group:first-child { padding-top: 2px; }
/* the operator 2026-10-17: each group named by what its items are, with its level's icon (the idea's lightbulb, the
   concept's gem, the project's rocket — ideas-model.js LEVEL_LOOK) */
.sw-g-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sw-group .sw-g-ico { width: 14px; height: 14px; }
.sw-group[data-level='concept'] .sw-g-ico { color: var(--purple-text); }
.sw-group[data-level='project'] .sw-g-ico, .sw-group[data-level='idea'] .sw-g-ico { color: var(--yellow); }
/* the person's turn on a row — the one status spelled out, kept small */
.sw-o-meta .tier-chip.wait { padding: 0 7px; font-size: 11.5px; }
.sw-arch-h { padding: 8px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.sw-arch-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--faint); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sw-arch-toggle:hover { color: var(--text); background: rgb(var(--ink-t) / 0.04); }
.sw-arch-toggle .chev { transition: transform 0.2s ease; }
.sw-arch-toggle[aria-expanded='true'] .chev { transform: rotate(90deg); }
.sw-opt { grid-template-columns: 30px minmax(0, 1fr) auto; position: relative; }
.sw-opt > .sw-ring, .sw-opt > .fg-loader, .sw-opt > .sw-face { grid-row: span 2; }
.sw-o-idea, .sw-o-meta { grid-column: 2; }
.sw-o-acts { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
.sw-face { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: rgb(var(--purple-t) / 0.16); color: var(--purple-text); flex: none; }
.sw-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-face .ico { width: 18px; height: 18px; }
.tier-package .sw-face { background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); }
.sw-o-name { display: block; font: 700 14px/1.3 var(--font-display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-o-line { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-opt.tier-concept .sw-o-idea, .sw-opt.tier-package .sw-o-idea { -webkit-line-clamp: unset; display: block; }
.sw-o-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sw-opt.archived { opacity: 0.72; }
/* the tier chips: purple «Концепция», gold «Проект» with its medal */
.tier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.5 var(--font-display); white-space: nowrap; }
.tier-chip.cc { color: var(--purple-text); background: rgb(var(--purple-t) / 0.14); border: 1px solid rgb(var(--purple-t) / 0.4); }
.tier-chip.cc.wait { color: var(--yellow); background: rgb(var(--yellow-t) / 0.1); border-color: rgb(var(--yellow-t) / 0.45); }
.tier-chip.pk { color: var(--yellow); background: rgb(var(--yellow-t) / 0.12); border: 1px solid rgb(var(--yellow-t) / 0.5); }
.fg-loader.tier-l { --s: 15px; }
.fg-loader.tier-l .fg-sign { width: 8px; }
.mini-medal { width: 14px; height: 14px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 9px/1 var(--font-display); color: #6b4300; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc233 55%, #b9780a); box-shadow: 0 0 0 1px rgb(var(--yellow-t) / 0.45); }
/* the switcher button with a concept or a project: its cover, its name, its tier */
.sw-button.tiered .sw-idea b { font-family: var(--font-display); }
.sw-button .sw-face { width: 30px; height: 30px; }
.sw-button .tier-chip { font-size: 12px; }
/* the idea node's tag */
.tier-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 1px 9px; border-radius: 999px; font: 600 12px/1.6 var(--font-display); letter-spacing: 0.06em; vertical-align: 1px; }
.tier-tag.cc { color: var(--purple-text); border: 1px solid rgb(var(--purple-t) / 0.45); background: rgb(var(--purple-t) / 0.12); }
.tier-tag.pk { color: var(--yellow); border: 1px solid rgb(var(--yellow-t) / 0.5); background: rgb(var(--yellow-t) / 0.1); }
@media (max-width: 640px) {
  .sw-button .tier-chip { display: none; }
}

/* U119: Fox — the rail on the left and the chat sidebar, on FoxGuide's chat (agent-chat/components) */
:root { --lw: 0px; --cw: 400px; --v4: #380085; --v8: #6f28e9; --v10: #9f7aea; --v11: #b794f6; --v12: #e8e3ff; --g5: #303030; }
.ag-face { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ag-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ag-face .ag-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--good); border: 2.5px solid var(--g1); }
.ag-face.rail { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--g1), 0 0 0 4px var(--v7); transition: box-shadow 0.15s ease; }
.ag-face.big { width: 56px; height: 56px; }
.ag-face.big .ag-dot { width: 14px; height: 14px; }
.ag-rail, .chat { display: none; }
@media (min-width: 1024px) {
  main { margin-left: var(--lw); transition: margin-left 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
  .ag-rail { display: grid; justify-items: center; align-content: start; position: fixed; left: 0; top: var(--top-h, 76px); bottom: 0; width: 56px; padding-top: 16px; z-index: 85; background: var(--g1); border-right: 1px solid var(--ga3); }
  .ag-tab { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
  .ag-tab:hover, .ag-tab[aria-expanded='true'] { background: var(--ga3); }
  .ag-tab:hover .ag-face.rail, .ag-tab[aria-expanded='true'] .ag-face.rail { box-shadow: 0 0 0 2px var(--g1), 0 0 0 4px var(--v11); }
  .ag-tab:focus-visible { outline: 2px solid var(--v11); outline-offset: 2px; }
  .chat { display: grid; position: fixed; left: 56px; top: var(--top-h, 76px); bottom: 0; width: var(--cw); z-index: 84; background: var(--g1); border-right: 1px solid var(--ga3); opacity: 0; transform: translateX(-12px); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
  .chat.in { opacity: 1; transform: none; }
  .chat[hidden] { display: none; }
  .ch-grip { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 7; }
  .ch-grip:hover { background: linear-gradient(90deg, transparent 3px, var(--v7) 3px, var(--v7) 5px, transparent 5px); }
}
/* the column: messages scroll under the floating header and above the composer */
.chat { grid-template-rows: minmax(0, 1fr) auto; min-width: 0; color: var(--g12); font: 16px/1.5 var(--font-body); }
.ch-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: center; padding: 12px; pointer-events: none; }
.ch-top::before { content: ''; position: absolute; inset: 0 0 -48px; z-index: -1; background: linear-gradient(180deg, #000 0%, rgb(var(--ground-t) / 0.85) 60%, transparent 100%); }
.ch-head { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: min(100%, 960px); width: 100%; padding: 10px 12px 10px 16px; border-radius: 16px; background: var(--v4); box-shadow: 0 4px 16px rgb(var(--shade-t) / 0.4); }
.ch-who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ch-who b { font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--text-hi); font-family: var(--font-display); letter-spacing: 0.02em; }
.ch-who span { font-size: 12px; line-height: 1.2; color: rgb(var(--ink-t) / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: rgb(var(--ink-t) / 0.85); cursor: pointer; }
.ch-x .ico { width: 18px; height: 18px; }
.ch-x:hover { background: var(--ga3); color: var(--text-hi); }
.ch-list { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 92px 12px 24px; scrollbar-width: thin; scrollbar-color: var(--g7) transparent; scrollbar-gutter: stable; }
.ch-list::-webkit-scrollbar { width: 8px; }
.ch-list::-webkit-scrollbar-thumb { background: var(--g7); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.ch-msg { display: grid; justify-items: start; max-width: 85%; align-self: flex-start; animation: ch-in 0.28s ease-out; }
.ch-msg.me { align-self: flex-end; justify-items: end; }
@keyframes ch-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ch-bubble { padding: 12px; border-radius: 9px; border: 1px solid transparent; background: var(--ga2); font-size: 16px; line-height: 24px; color: var(--g12); overflow-wrap: break-word; min-width: 0; max-width: 100%; }
.ch-msg.me .ch-bubble { background: var(--va3); }
.ch-bubble.streaming { border-color: var(--v7); }
.ch-bubble p { margin: 0; }
.ch-bubble p + p, .ch-bubble p + ul, .ch-bubble p + ol, .ch-bubble ul + p, .ch-bubble ol + p { margin-top: 8px; }
.ch-bubble ul, .ch-bubble ol { margin: 8px 0; padding-inline-start: 28px; }
.ch-bubble li { margin: 2px 0; line-height: 1.55; }
.ch-bubble li::marker { color: var(--g10); }
.ch-bubble b { font-weight: 600; }
.ch-acts { display: flex; gap: 8px; margin-top: 6px; padding-left: 6px; opacity: 0; transition: opacity 0.15s ease; }
.ch-msg:hover .ch-acts, .ch-msg.last .ch-acts, .ch-acts:focus-within { opacity: 1; }
.ch-copy { display: grid; place-items: center; padding: 4px; margin: -4px; border: 0; border-radius: 4.5px; background: none; color: var(--ga11); cursor: pointer; transition: color 0.15s ease; }
.ch-copy .ico { width: 13px; height: 13px; }
.ch-copy:hover { color: var(--v11); }
.ch-copy.ok { color: var(--good); }
/* «печатает…»: a pulsing dot and the shimmer */
.ch-typing { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; }
.ch-tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--v9); animation: ch-pulse 1.4s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.shimmer { font-style: italic; line-height: 1.5; background: linear-gradient(90deg, var(--v8) 0%, var(--v12) 50%, var(--v8) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ch-shimmer 8s linear infinite; }
@keyframes ch-shimmer { from { background-position: 200% center; } to { background-position: -200% center; } }
/* the empty chat: the agent, a line, the starters as FoxGuide's command cards */
.ch-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(24px, 6vh, 64px) 12px 24px; margin-block: auto; }
.ch-empty > b { font: 600 17px/1.3 var(--font-display); color: var(--g12); margin-top: 6px; }
.ch-empty > span:not(.ag-face) { font-size: 14px; line-height: 1.45; color: var(--g11); max-width: 300px; }
.ch-starters { display: grid; gap: 8px; width: 100%; max-width: 420px; margin-top: 12px; }
.ch-starter { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 12px; border: 1px solid var(--ga3); border-radius: 12px; background: var(--g1); color: var(--g12); font: 500 14px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: background-color 0.12s ease; }
.ch-starter:hover, .ch-starter:focus-visible { background: var(--ga3); }
.ch-zap { flex: none; margin-top: 1px; color: var(--yellow); }
.ch-zap .ico { width: 16px; height: 16px; }
/* the composer: a black card, the field growing to 200 px, the round send button */
.ch-dock { position: relative; z-index: 6; padding: 0 12px 12px; }
.ch-dock::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; background: linear-gradient(0deg, #000, transparent); pointer-events: none; }
.ch-composer { display: grid; background: #000; border: 1px solid var(--g5); border-radius: 9px; box-shadow: 0 0 0 1px var(--ga6); transition: border-color 0.15s ease, box-shadow 0.15s ease; overflow: hidden; }
.ch-composer:focus-within { border-color: var(--v7); }
.ch-composer textarea { display: block; width: 100%; min-height: 48px; max-height: 200px; resize: none; border: 0; outline: 0; background: none; color: var(--g12); font: 14px/20px var(--font-body); padding: 14px 14px 4px; }
.ch-composer textarea::placeholder { color: var(--g9); }
.ch-composer textarea:disabled { cursor: not-allowed; }
.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 8px 4px 14px; }
.ch-note { font-size: 12.5px; line-height: 1.35; color: var(--g11); }
.ch-composer.capped .ch-note { color: var(--yellow); }
.ch-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--v9); color: var(--on-brand); cursor: pointer; transition: background-color 0.15s ease; }
.ch-send .ico { width: 16px; height: 16px; }
.ch-send:hover:not(:disabled) { background: var(--v10); }
.ch-send:disabled { background: var(--ga3); color: var(--ga8); opacity: 0.5; cursor: not-allowed; }
.ch-send:focus-visible, .ch-starter:focus-visible, .ch-x:focus-visible, .ch-copy:focus-visible { outline: 2px solid var(--v11); outline-offset: 2px; }
@media (max-width: 1023px) {
  .chat { display: grid; position: fixed; inset: 0; z-index: 230; background: var(--g1); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
  .chat.in { transform: none; }
  .chat[hidden] { display: none; }
  .ch-top { padding: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .ch-head { padding: 8px 8px 8px 12px; }
  .ch-x { width: 44px; height: 44px; }
  .ch-list { padding: 84px 8px 16px; }
  .ch-dock { padding: 0 8px 8px; }
  .ch-composer textarea { font-size: 16px; line-height: 22px; }
  .ch-acts { opacity: 1; }
  .ch-copy { width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 9px; background: var(--g3); }
  body.chat-open { overflow: hidden; }
  .ch-grip { display: none; }
}
@media (hover: none) { .ch-acts { opacity: 1; } }
/* U267: on a touch screen the copy button under a reply takes a finger — an invisible frame widens its target to 44 × 44
   (41 × 41 round the desktop's smaller button); it looks the same */
@media (pointer: coarse) {
  .ch-copy { position: relative; }
  .ch-copy::before { content: ''; position: absolute; inset: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, main, .ch-msg { transition: none; animation: none; }
  .shimmer { animation: none; color: var(--v11); background: none; }
  .ch-tdot { animation: none; }
}
.ag-tab { position: relative; }
.ag-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; padding: 6px 10px; border-radius: 6px; background: var(--g3); border: 1px solid var(--ga5); color: var(--g12); font: 500 13px/1.3 var(--font-body); opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 3; }
.ag-tab:hover .ag-tip, .ag-tab:focus-visible .ag-tip { opacity: 1; transform: translate(0, -50%); }
.ag-tab[aria-expanded="true"] .ag-tip { display: none; }
@media (max-width: 1023px) { .ag-tip { display: none; } }

/* U124: Fox floats — a round button at the left, vertically centred, instead of the rail column; hidden while the
   chat (or, on a phone, a file sheet) is open; the line keeps clear of it */
.ag-rail { display: block; position: fixed; left: 16px; top: 50%; bottom: auto; width: auto; height: auto; padding: 0; z-index: 70; background: none; border: 0;
  transform: translateY(-50%); opacity: 1; visibility: visible; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s; }
.ag-tab { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  box-shadow: 0 6px 18px rgb(var(--shade-t) / 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ag-tab:hover, .ag-tab[aria-expanded='true'] { background: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgb(var(--shade-t) / 0.6), 0 0 0 4px rgb(var(--purple-t) / 0.18); }
.ag-tab:focus-visible { outline: 2px solid var(--v11); outline-offset: 3px; }
.ag-face.rail { width: 52px; height: 52px; padding: 3px; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #ffc233 100%); box-shadow: none; }
.ag-face.rail img { border: 2px solid #000; }
.ag-tab:hover .ag-face.rail, .ag-tab[aria-expanded='true'] .ag-face.rail { box-shadow: none; }
.ag-face.rail .ag-dot { right: 1px; bottom: 1px; width: 13px; height: 13px; }
body.chat-open .ag-rail { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; }
@media (min-width: 1024px) {
  .chat { left: 0; }
  /* the line keeps clear of the avatar where its column would reach under it */
  body.panel-open.panel-side main { padding-left: 76px; }
  body.chat-open main, body.chat-open.panel-open.panel-side main { padding-left: 32px; }
}
@media (min-width: 1024px) and (max-width: 1191px) { main { padding-left: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .ag-rail, body.chat-open .ag-rail, body.sheet-open .ag-rail, .ag-tab { transition: none; }
  .ag-tab:hover { transform: none; }
}
/* the pivots' tree stacks by its own width (a line narrowed by the chat or a panel), not only by the screen's */
.tree { container-type: inline-size; width: 100%; }
.branch { grid-template-columns: minmax(0, 1fr); }
.branch > * { min-width: 0; overflow-wrap: break-word; }
@container (max-width: 600px) {
  .root { text-align: left; justify-self: stretch; }
  .root-stem { margin-left: 18px; justify-self: start; }
  .branches { grid-template-columns: 1fr; padding-top: 0; padding-left: 36px; justify-self: stretch; }
  .branches::before { left: 18px; right: auto; top: 0; bottom: 30px; width: 1px; height: auto; }
  .branch::before { top: 28px; left: -18px; width: 18px; height: 1px; }
}
/* beside the chat the research rows put their text under the label, as beside a file panel */
@media (max-width: 1439px) {
  body.chat-open .res-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  body.chat-open .res-t { grid-column: 2 / -1; }
}
.res-t { min-width: 0; overflow-wrap: break-word; }

/* only a newly added message plays the entrance; a whole conversation renders still */
.ch-msg { animation: none; }
.ch-msg.ch-new { animation: ch-in 0.28s ease-out; }
@media (prefers-reduced-motion: reduce) { .ch-msg.ch-new { animation: none; } }

/* U126: one quiet indicator everywhere but a page loading — a thin ring with a short purple arc */
.qspin { display: inline-block; flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--g6); border-top-color: var(--purple-text); animation: qspin-r 0.8s linear infinite; vertical-align: -3px; }
.qspin.sm { width: 14px; height: 14px; vertical-align: -2px; }
@keyframes qspin-r { to { transform: rotate(360deg); } }
.sw-st { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.sw-opt > .sw-st { grid-row: span 2; }
.tip-spin, .run-spin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.tier-chip .qspin { margin-right: 1px; }
.ag-state.live { display: inline-flex; align-items: center; gap: 6px; }
.now-chip .qspin { margin-left: 4px; }
.quiet-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; }
.art-fail { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; animation: sl-fade 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .art-fail { animation: none; } }
.ch-send.busy:disabled { opacity: 1; background: var(--ga3); }
.ch-send .qspin { border-color: var(--ga5); border-top-color: var(--v11); }
.cta-ico .qspin { width: 18px; height: 18px; border-color: rgba(74, 222, 128, 0.25); border-top-color: #4ade80; }
/* the busy agent: a thin ring with an arc around its app icon */
.ag-busy { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgb(var(--ink-t) / 0.08); border-top-color: var(--purple-text); animation: qspin-r 0.8s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .qspin, .ag-busy { animation: qspin-breath 2.4s ease-in-out infinite; transform: rotate(45deg); }
  @keyframes qspin-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* U131: the panel without the rail and the browser chrome — the file's icon and name, «скачать», «на всю ширину», «закрыть» */
.fx-chrome { height: 48px; gap: 10px; padding: 0 6px 0 12px; }
.fx-chrome .fx-ci { width: 28px; height: 28px; border-radius: 8px; background: var(--ga2); color: var(--g12); flex: none; }
.fx-chrome .fx-ci .art-ico { width: 16px; height: 16px; }
.fx-name { flex: 1; min-width: 0; margin: 0; font: 600 15px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--g12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-right { gap: 2px; }
.fx-right .fx-ib { width: 32px; height: 32px; }
.fx-right .pi { width: 16px; height: 16px; }
.fx-dl-wrap { position: relative; display: inline-grid; }
.fx-dl-wrap .fx-menu { min-width: 150px; }
.fx-inner { grid-template-rows: minmax(0, 1fr); }
@media (max-width: 1023px) {
  .fx-chrome { min-height: 52px; padding: 0 2px 0 6px; }
  .fx-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; }
  .fx-right .fx-ib { width: 44px; height: 44px; }
  .fx-right .pi { width: 20px; height: 20px; }
}
/* the chat meets the page without a frame; its edge is a hit area that shows only on hover or while dragged */
@media (min-width: 1024px) {
  .chat { border-right: 0; }
  .ch-grip { right: -5px; width: 10px; }
  .ch-grip:hover, .ch-grip:active { background: linear-gradient(90deg, transparent 4px, var(--v7) 4px, var(--v7) 6px, transparent 6px); }
}

/* U132: one reading style for the panel — the panel without inner frames, prose at 16 px, citations at the baseline */
:root { --p1: #ededed; --p2: #b8b8b8; --p3: #a1a1a1; --hair: rgba(255, 255, 255, 0.09); }
.fx-inner { background: transparent; border: 0; border-radius: 0; }
.fx-body { padding: 8px 20px 40px; gap: 0; }
.fx-app { background: var(--g2); border: 1px solid var(--ga3); border-radius: 14px; padding: 0 0 4px; }
.view, .prose { max-width: 68ch; margin: 0 auto; width: 100%; color: var(--p1); font-size: 16px; line-height: 1.65; font-variant-numeric: tabular-nums; }
.fx-app.full .view { max-width: 980px; }
.prose p { margin: 0 0 12px; }
.prose h2 { margin: 28px 0 8px; font: 600 18px/26px var(--font-display); color: var(--p1); letter-spacing: 0; text-transform: none; }
.prose h3, .prose h4 { margin: 20px 0 6px; font: 600 16px/24px var(--font-display); color: var(--p1); letter-spacing: 0; text-transform: none; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--g9); }
.prose li > ul, .prose li > ol { margin: 6px 0 0; }
.prose blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 2px solid var(--v11); color: var(--p2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a, .view a:not(.lb-row):not(.cite) { color: var(--v11); text-decoration: none; }
.prose a:hover, .view a:not(.lb-row):not(.cite):hover { text-decoration: underline; }
.prose code { font: 0.9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: var(--ga3); }
.prose pre { overflow-x: auto; padding: 12px 14px; border-radius: 10px; background: var(--ga2); font-size: 13.5px; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 22px 0; }
.prose .tw { overflow-x: auto; margin: 0 0 14px; }
.prose table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.prose th { font: 600 12px/1.4 var(--font-body); color: var(--p3); text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--g5); }
.prose td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose td.n, .prose th.n { text-align: right; }
/* citations: a small chip at the baseline right after the word; a group reads «2, 3» */
.cites { display: inline; margin-left: 0.2em; white-space: nowrap; }
.cite { display: inline-block; min-width: 1.5em; padding: 0 0.35em; border-radius: 0.6em; background: var(--va3); color: var(--v11); font: 600 max(12px, 0.72em)/1.55 var(--font-body); text-align: center; text-decoration: none; vertical-align: 0.08em; }
a.cite:hover, a.cite:focus-visible { background: var(--v7); color: var(--on-brand); }
.cites .cs { font-size: max(12px, 0.72em); color: var(--p3); }
sup.src { display: none; }

/* U133: the views — a hero, the takeaway, the blocks, «Подробнее» */
.view { --vc: #a78bfa; --vc-a: rgb(var(--lavender-t) / 0.16); display: grid; gap: 0; }
.view.tone-money { --vc: #facc15; --vc-a: rgb(var(--warn-t) / 0.14); }
.view.tone-customer { --vc: #f472b6; --vc-a: rgba(244, 114, 182, 0.14); }
.view.tone-channels { --vc: #38bdf8; --vc-a: rgba(56, 189, 248, 0.14); }
.view.tone-risk { --vc: #f87171; --vc-a: rgb(var(--bad-t) / 0.14); }
.view.tone-strategy { --vc: #34d399; --vc-a: rgb(var(--good-t) / 0.14); }
.v-hero { padding: 12px 0 4px; }
.v-take { margin: 14px 0 6px; font: 500 17px/1.55 var(--font-body); color: var(--p1); }
.v-more { padding-bottom: 8px; }
.v-h { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; font: 600 15px/1.4 var(--font-display); color: var(--p1); letter-spacing: 0; text-transform: none; }
.v-k { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p3); }
.v-k .ico { width: 14px; height: 14px; color: var(--vc); }
.v-sub { display: block; font-size: 14px; line-height: 1.5; color: var(--p2); }
.v-sub.muted { color: var(--p3); }
.v-note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--p2); }
.v-honest { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--ga2); color: var(--p2); font-size: 15px; }
.v-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ga3); color: var(--p1); font-size: 13px; line-height: 1.45; }
.v-chip .ico { width: 14px; height: 14px; color: var(--vc); }
.v-chip.up { background: rgb(var(--good-t) / 0.14); color: #6ee7b7; }
.v-chip.down { background: rgb(var(--bad-t) / 0.14); color: #fca5a5; }
.v-pill { display: inline-block; padding: 3px 10px; border-radius: 8px; background: var(--ga3); color: var(--p1); font-size: 14px; line-height: 1.45; }
.v-pill.good { background: rgb(var(--good-t) / 0.12); color: #a7f3d0; }
.v-pill.bad { background: rgb(var(--bad-t) / 0.12); color: #fecaca; }
.v-pill.ch { background: rgba(56, 189, 248, 0.12); color: #bae6fd; }
.v-pill.type { font-size: 12px; padding: 1px 8px; color: var(--p2); }
.v-pill.price { background: var(--vc-a); color: var(--p1); font-weight: 600; font-size: 13px; }
.v-pill.block { display: block; margin: 0 0 6px; }
.v-card { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 10px; background: var(--ga2); }
.v-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.v-callout { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--vc-a); }
.v-callout p { margin: 4px 0 0; color: var(--p1); }
.v-callout.warn { background: rgb(var(--warn-t) / 0.1); }
.v-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.v-list li::marker { color: var(--g9); }
.v-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v-checks li { position: relative; padding-left: 26px; }
.v-checks li::before { content: '✓'; position: absolute; left: 0; top: 0.15em; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #052e1f; background: var(--vc); }
.v-all { margin-top: 10px; }
.v-all > summary { cursor: pointer; color: var(--v11); font-size: 14px; list-style: none; }
.v-all > summary::-webkit-details-marker { display: none; }
.v-all > summary::after { content: ' ›'; }
.v-all[open] > summary::after { content: ' ‹'; }
.v-swipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.v-link { font-size: 14px; }
.v-quote { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--ga2); display: grid; gap: 6px; }
.v-quote .qm { font: 700 22px/0.6 Georgia, serif; color: var(--vc); height: 10px; }
.v-quote blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--p1); }
.v-quote figcaption { font-size: 13px; color: var(--p3); }
.v-quote.small blockquote { font-size: 15px; }
.v-prose { margin-top: 28px; border-top: 1px solid var(--hair); padding-top: 14px; }
.v-prose > summary { cursor: pointer; list-style: none; font: 600 15px var(--font-display); color: var(--v11); }
.v-prose > summary::-webkit-details-marker { display: none; }
.v-prose > summary::after { content: ' ›'; display: inline-block; transition: transform 0.15s ease; }
.v-prose[open] > summary::after { transform: rotate(90deg); }
.v-prose .prose { margin-top: 14px; }
.v-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13px; color: var(--p3); }
.v-toc .v-chip { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.eng { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 700 12px var(--font-display); background: #fc3f1d; color: #fff; }
.eng.g { background: #e8eaed; color: #1a73e8; }
.fav { position: relative; flex: none; width: 24px; height: 24px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--ga3); }
.fav i { font: 700 12px var(--font-display); font-style: normal; color: var(--p2); }
.fav img { position: absolute; inset: 4px; width: 16px; height: 16px; object-fit: contain; }

/* market size: TAM → SAM → SOM */
.mz { display: grid; justify-items: center; gap: 6px; }
.mz-lv { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; padding: 14px 18px; border-radius: 12px; background: var(--ga2); }
.mz-lv.tam { width: 100%; }
.mz-lv.sam { width: 82%; }
.mz-lv.som { width: 64%; background: var(--vc-a); box-shadow: inset 0 0 0 1px var(--vc); }
.mz-lv.missing { background: none; box-shadow: inset 0 0 0 1px var(--ga6); border: 0; outline: 1px dashed var(--ga6); outline-offset: -1px; }
.mz-n { grid-row: span 2; font: 700 13px var(--font-display); letter-spacing: 0.08em; color: var(--vc); }
.mz-lv b { font: 700 24px/1.2 var(--font-display); color: var(--p1); }
.mz-lv.missing b { font-size: 16px; color: var(--p3); font-weight: 600; }
.mz-w { font-size: 13.5px; color: var(--p2); }
.mz-math { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 14px 16px; border-radius: 10px; background: var(--ga2); font-size: 14.5px; color: var(--p2); }
.mz-math b { color: var(--p1); }
.mz-math i { font-style: normal; color: var(--p3); }
.mz-math .acc b { color: var(--vc); font-size: 17px; }
.v-drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v-drivers li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.dr-a { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.v-drivers .up .dr-a { background: rgb(var(--good-t) / 0.15); color: #6ee7b7; }
.v-drivers .down .dr-a { background: rgb(var(--bad-t) / 0.15); color: #fca5a5; }

/* demand: bars by volume, tinted by intent */
.dq-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; color: var(--p2); }
.dq-legend span[class^='it-']::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--it); vertical-align: -1px; }
.it-buy { --it: #34d399; }
.it-cmp { --it: #38bdf8; }
.it-info { --it: #a78bfa; }
.dq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dq { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; overflow: hidden; }
.dq-b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: color-mix(in srgb, var(--it) 22%, transparent); border-radius: 8px; z-index: 0; }
.dq > :not(.dq-b) { position: relative; z-index: 1; }
.dq-p { font-size: 15px; color: var(--p1); min-width: 0; overflow-wrap: break-word; }
.dq-v { font: 600 14px var(--font-body); color: var(--p1); }
.spark { position: relative; margin: 0; padding: 8px 0 0; }
.spark svg { display: block; width: 100%; height: 80px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--vc); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sp-peak { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--vc); box-shadow: 0 0 0 4px var(--vc-a); }
.spark figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--p3); }
.v-stack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 2px; }
.sb { display: grid; place-items: center; background: var(--it); color: #0b0b0b; font: 700 12px var(--font-body); min-width: 4px; }
.v-clusters { display: grid; gap: 12px; }
.v-cl b { display: block; margin-bottom: 6px; font-size: 14.5px; }
.v-cl > span { display: flex; flex-wrap: wrap; gap: 6px; }

/* competitors: the leaderboard and its dossier drawers */
.lb { display: grid; gap: 4px; }
.lb-cap { display: grid; grid-template-columns: minmax(0, 1fr) 150px 92px; gap: 10px; padding: 0 12px 4px 46px; font-size: 12px; color: var(--p3); }
.lb-row { display: block; border-radius: 10px; color: inherit; text-decoration: none; }
.lb-row > summary, a.lb-row, div.lb-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 150px 92px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; list-style: none; }
.lb-row > summary::-webkit-details-marker { display: none; }
.lb-row > summary:hover, a.lb-row:hover, .lb-row[open] > summary { background: var(--ga2); }
.lb-row[open] { background: var(--ga2); }
.lb-name { display: grid; min-width: 0; }
.lb-name b { font-size: 15px; font-weight: 600; color: var(--p1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-host { font-size: 12.5px; color: var(--p3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-vis { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--p1); }
.lb-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--ga3); overflow: hidden; }
.lb-bar i { display: block; height: 100%; background: var(--vc); border-radius: 3px; }
.lb-noprice { font-size: 13px; }
.lb-drawer { display: grid; gap: 10px; padding: 2px 12px 14px 46px; }
.lb-pos { margin: 0; color: var(--p1); }
/* MP1 SUB-7 x1 phase B: a competitor's first screen in its dossier (the drawer and the article) */
.lb-shot { margin: 0; display: grid; gap: 4px; }
.lb-shot img { display: block; width: 100%; max-width: 720px; height: auto; border: 1px solid var(--hair); border-radius: 10px; background: var(--ga2); }
.lb-shot figcaption { font-size: 12px; color: var(--p3); }
.lb-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lb-pills .v-k { width: 100%; }

/* pain: theme bubbles, quotes in a swipeable row */
.pm-bubbles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 14px; }
.pm-b { width: var(--s); height: var(--s); border-radius: 50%; border: 0; display: grid; place-content: center; gap: 2px; padding: 8px; text-align: center; background: var(--vc-a); color: var(--p1); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pm-b b { font-size: 13.5px; line-height: 1.2; }
.pm-b span { font-size: 12px; color: var(--p2); }
.pm-b.on { box-shadow: inset 0 0 0 2px var(--vc); }
.pm-b:hover { transform: scale(1.04); }
.pm-quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.pm-quotes > * { scroll-snap-align: start; }

/* price: the corridor */
.pc { padding: 50px 6px 4px; }
.pc-axis { position: relative; height: 12px; border-radius: 6px; background: var(--ga3); }
.pc-band { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--vc-a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 50%, transparent); }
.pc-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--p1); box-shadow: 0 0 0 2px var(--g2); }
.pc-med { position: absolute; top: -48px; transform: translateX(-50%); display: grid; justify-items: center; font-size: 12px; color: var(--p3); white-space: nowrap; }
.pc-med b { font-size: 14px; color: var(--p1); }
.pc-med::after { content: ''; width: 2px; height: 14px; background: var(--p2); margin-top: 2px; }
.pc-rec { position: absolute; top: 18px; min-width: 4px; height: 6px; border-radius: 3px; background: var(--vc); }
.pc-rec span { position: absolute; top: 9px; left: 0; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--vc); }
.pc-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 30px; font-size: 13.5px; color: var(--p1); }
.pc-recbox { display: grid; gap: 4px; margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--vc-a); }
.pc-recbox b { font-size: 17px; line-height: 1.4; }
.pc-recbox span:last-child { color: var(--p2); font-size: 14.5px; }
.tier b { font-size: 18px; }
.tier ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--p2); }
.pc-models { display: flex; flex-wrap: wrap; gap: 8px; }
.v-chip.model { padding: 6px 12px; }
.fit { width: 48px; height: 5px; border-radius: 3px; background: var(--ga4); overflow: hidden; }
.fit i { display: block; height: 100%; background: var(--vc); }

/* channels */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ch-tile { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 10px; background: var(--ga2); }
.ch-ring { width: 40px; height: 40px; margin-bottom: 4px; }
.ch-ring .t { fill: none; stroke: var(--ga4); stroke-width: 4; }
.ch-ring .v { fill: none; stroke: var(--vc); stroke-width: 4; stroke-linecap: round; }
.ch-tile b { font-size: 15px; line-height: 1.35; }
.ch-share { font-size: 13px; color: var(--p2); }
.ch-free { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ch-free li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--ga2); }
.ch-q { font-size: 15px; }
.ch-v { font-size: 13.5px; font-weight: 600; }
.ch-h { grid-column: 2 / -1; font-size: 13px; color: var(--p3); }
.ch-plan { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.ch-plan li { counter-increment: st; position: relative; display: grid; gap: 4px; padding: 0 0 0 36px; }
.ch-plan li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-a); color: var(--vc); font: 700 13px var(--font-display); }
.ch-plan li > b { font-size: 15px; }
.v-chip.cost { justify-self: start; background: rgb(var(--warn-t) / 0.12); color: #fde68a; }

/* unit model */
.um-scn { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ga2); margin-bottom: 14px; }
.um-s { border: 0; background: none; color: var(--p2); font: 500 13.5px var(--font-body); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.um-s[aria-pressed='true'] { background: var(--ga4); color: var(--p1); }
.um-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.um-ratio { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 12px; background: var(--ga2); }
.um-ratio b { font: 800 40px/1 var(--font-display); }
.um-ratio span { font-size: 12.5px; color: var(--p3); }
.um-ratio.good b { color: #34d399; }
.um-ratio.warn b { color: #facc15; }
.um-ratio.bad b { color: #f87171; }
.um-bars { display: grid; gap: 10px; }
.um-bar { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--p2); }
.um-bar i { display: block; height: 14px; border-radius: 7px; background: var(--vc); min-width: 3px; transition: width 0.2s ease; }
.um-bar.cac i { background: var(--p3); }
.um-bar b { font-size: 15px; color: var(--p1); }
.um-time { margin-top: 18px; }
.um-axis { position: relative; height: 10px; border-radius: 5px; background: var(--ga3); margin: 8px 0 22px; }
.um-life { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--vc-a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 55%, transparent); }
.um-pay { position: absolute; top: -5px; width: 3px; height: 20px; margin-left: -1px; border-radius: 2px; background: var(--p1); }
.um-tick { position: absolute; top: 14px; transform: translateX(-50%); font-size: 12px; color: var(--p3); white-space: nowrap; }
.um-tick:first-of-type { transform: none; }
.um-tick:last-of-type { transform: translateX(-100%); }
.um-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 18px; margin-top: 16px; }
.um-sl { display: grid; gap: 6px; font-size: 13.5px; color: var(--p2); }
.um-sl b { color: var(--p1); float: right; }
.um-sl input { width: 100%; accent-color: var(--vc); }
.um-data { display: none; }

/* risks: the matrix */
.rkm { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; max-width: 460px; margin: 0 auto 12px; }
.rk-y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 12px; color: var(--p3); }
.rk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rk-c { min-height: 64px; border-radius: 8px; background: var(--ga2); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 6px; }
.rk-c.warm { background: rgb(var(--bad-t) / 0.08); }
.rk-c.hot { background: rgb(var(--bad-t) / 0.2); box-shadow: inset 0 0 0 1px rgb(var(--bad-t) / 0.5); }
.rk-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 12px; color: var(--p3); }
.rk-dot { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; font: 700 13px var(--font-display); color: #0b0b0b; background: #fca5a5; cursor: pointer; }
.rk-dot.k-competition { background: #c4b5fd; }
.rk-dot.k-demand, .rk-dot.k-market { background: #7dd3fc; }
.rk-dot.k-regulation, .rk-dot.k-legal { background: #fde68a; }
.rk-dot.k-money, .rk-dot.k-economics { background: #86efac; }
.rk-dot.on { box-shadow: 0 0 0 3px var(--g2), 0 0 0 5px var(--p1); }
.rk-detail { padding: 14px 16px; border-radius: 10px; background: var(--ga2); }
.rk-detail p { margin: 6px 0 0; }
.rk-mit { color: var(--p2); }
.rk-dead { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--ga4); display: grid; gap: 12px; }
.rk-dead li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
.rk-yr { font: 700 14px var(--font-display); color: var(--vc); }

/* variants */
.vr3 { align-items: stretch; }
.v-card.vrc { gap: 8px; }
.v-card.vrc.chosen { background: var(--vc-a); box-shadow: inset 0 0 0 1.5px var(--vc); }
.vr-tag { justify-self: start; font: 600 12px var(--font-body); padding: 2px 9px; border-radius: 999px; background: rgb(var(--warn-t) / 0.14); color: #fde68a; }
.vr-tag.on { background: var(--vc); color: #052e1f; }
.vr-tag.muted { background: var(--ga3); color: var(--p2); }
.vr-t { font: 700 16px/1.35 var(--font-display); }
.vr-offer { font-size: 14.5px; color: var(--p1); }
.vr-cmp { display: grid; grid-template-columns: 110px repeat(var(--n), minmax(0, 1fr)); gap: 0; font-size: 13.5px; }
.vr-cmp > * { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.vr-cmp > b { font-size: 13px; color: var(--p1); }
.vr-cmp > b.on { color: var(--vc); }
.vr-cell { color: var(--p2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vr-cell.on { color: var(--p1); }
.vr-cell.dots { display: flex; gap: 4px; align-items: center; }
.vr-cell.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ga4); }
.vr-cell.dots i.f { background: var(--vc); }

/* the concept: the poster and the canvas */
.op-poster { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; }
.op-cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; }
.op-mono { width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; display: grid; place-items: center; font: 800 56px var(--font-display); color: #fff; background: linear-gradient(135deg, #10b981, #6d28d9); }
.op-name { display: block; font: 800 24px/1.2 var(--font-display); color: var(--p1); }
.op-tag { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--p2); }
.op-canvas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 18px; }
.op-tile { padding: 14px 16px; border-radius: 10px; background: var(--ga2); }
.op-tile p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--p1); }
.op-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.v-chip.kpi { background: var(--vc-a); }
.op-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* the customer */
.ps-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 12px; background: var(--vc-a); }
.ps-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--vc) 30%, #111); color: #fff; }
.ps-av .ico { width: 30px; height: 30px; }
.ps-who { display: block; margin: 4px 0 10px; font: 700 18px/1.4 var(--font-display); color: var(--p1); }
.ps-where { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ps-bubbles { display: grid; gap: 10px; }
.ps-bubble { justify-self: start; max-width: 88%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--ga3); }
.ps-bubble p { margin: 0; color: var(--p1); }
.ps-bubble span { display: block; margin-top: 4px; font-size: 13px; color: var(--p3); }

/* the demand test */
.dt { display: grid; gap: 10px; }
.dt-metric { font: 700 18px/1.45 var(--font-display); color: var(--p1); }
.dt-scale { position: relative; height: 14px; margin: 34px 0 10px; border-radius: 7px; background: var(--ga3); }
.dt-fail, .dt-mid, .dt-pass { position: absolute; top: 0; bottom: 0; }
.dt-fail { left: 0; background: rgb(var(--bad-t) / 0.45); border-radius: 7px 0 0 7px; }
.dt-mid { background: rgb(var(--warn-t) / 0.25); }
.dt-pass { right: 0; background: rgb(var(--good-t) / 0.5); border-radius: 0 7px 7px 0; }
.dt-line { position: absolute; top: -28px; transform: translateX(-50%); display: grid; justify-items: center; font-size: 14px; }
.dt-line::after { content: ''; width: 2px; height: 22px; margin-top: 2px; background: currentColor; }
.dt-line.f { color: #fca5a5; }
.dt-line.p { color: #6ee7b7; }
.dt-legend { display: grid; gap: 6px; margin-top: 10px; font-size: 14.5px; color: var(--p2); }
.dt-legend .bad b { color: #fca5a5; }
.dt-legend .good b { color: #6ee7b7; }
.dt-legend.two { grid-template-columns: 1fr 1fr; gap: 10px; }
.dt-legend.two > span { padding: 12px 14px; border-radius: 10px; background: var(--ga2); display: grid; gap: 4px; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-chips .v-chip { white-space: normal; }
.dt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dt-steps label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--ga2); cursor: pointer; }
.dt-steps input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--vc); }
.dt-steps input:checked + span { color: var(--p3); text-decoration: line-through; text-decoration-color: var(--ga6); }

/* sources */
.sr { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; }
.sr-ring { width: 140px; height: 140px; }
.sr-ring .t { fill: none; stroke: var(--ga3); stroke-width: 10; }
.sr-ring .v { fill: none; stroke: var(--vc); stroke-width: 10; }
.sr-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-parts li { display: grid; padding: 10px 12px; border-radius: 10px; background: var(--ga2); }
.sr-parts b { font: 700 18px var(--font-display); }
.sr-parts span { font-size: 13px; color: var(--p2); }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sr-list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.sr-list a:hover { background: var(--ga2); text-decoration: none; }
.sr-list b { display: block; font-size: 15px; font-weight: 500; color: var(--p1); }

@media (max-width: 1023px) {
  .fx-body { padding: 4px 14px 32px; }
  .fx-app { border: 0; border-radius: 12px 12px 0 0; }
  .view, .prose { font-size: 16px; line-height: 1.6; }
  .v-swipe { grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .v-swipe > * { scroll-snap-align: start; }
  .lb-cap { display: none; }
  .lb-row > summary, a.lb-row, div.lb-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .lb-row .v-pill.type { display: none; }
  .lb-vis { grid-column: 2 / -1; }
  .lb-row .v-pill.price, .lb-noprice { grid-column: 3; grid-row: 1; }
  .lb-drawer { padding-left: 12px; }
  .mz-lv.sam { width: 88%; }
  .mz-lv.som { width: 76%; }
  .um-hero { grid-template-columns: 1fr; }
  .op-poster { grid-template-columns: 1fr; }
  .op-two, .ps-two, .dt-legend.two { grid-template-columns: 1fr; }
  .sr { grid-template-columns: 1fr; justify-items: center; }
  .sr-parts { width: 100%; }
  .vr-cmp { grid-template-columns: 90px repeat(var(--n), minmax(150px, 1fr)); overflow-x: auto; }
  .pm-quotes { grid-auto-columns: 82%; }
}
@media (max-width: 340px) { .rkm { max-width: 100%; } }
.view .faint { color: var(--p3); }
.view .dossier { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.view .lb-row.dossier[open] { background: var(--ga2); }
.lb-row > summary, a.lb-row, div.lb-row { grid-template-columns: 24px minmax(0, 1fr) 150px 92px; }
.lb-cap { grid-template-columns: minmax(0, 1fr) 150px 92px; padding-left: 46px; }
.lb-row .v-pill.price { justify-self: start; white-space: normal; line-height: 1.3; }
.lb-noprice { justify-self: start; }
@media (max-width: 1023px) { .lb-row > summary, a.lb-row, div.lb-row { grid-template-columns: 24px minmax(0, 1fr) auto; } }
.um-sl input { margin: 0; min-width: 0; box-sizing: border-box; }

.view .tier { border: 0; }
.lb-row .v-pill.price { white-space: nowrap; }

/* U129: the folded research is a result card, the folded concept a product card */
.stage-final .cf-main > .cf-title { font: 700 17px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.cf-res { display: block; min-width: 0; }
.rc { display: grid; gap: 12px; margin-top: 8px; }
.rc-lead { display: block; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 72ch; }
.rc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:is(#check, #ch-list) .res-row.rc-tile { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; gap: 6px; padding: 12px 12px 14px; border: 1px solid transparent; border-radius: 12px; background: rgb(var(--ink-t) / 0.04); text-align: left; color: inherit; font: inherit; cursor: pointer; }
:is(#check, #ch-list) .res-row.rc-tile:hover, :is(#check, #ch-list) .res-row.rc-tile:focus-visible, :is(#check, #ch-list) .res-row.rc-tile.panel-on { border-color: rgb(var(--lavender-t) / 0.6); background: rgba(139, 92, 246, 0.08); }
.rc-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.rc-l .art-ico { width: 15px; height: 15px; color: #a78bfa; flex: none; }
.rc-fig { font: 700 17px/1.25 var(--font-display); color: #c4b5fd; overflow-wrap: anywhere; }
.rc-fig.none { color: var(--faint); }
.rc-t { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 10px; padding: 14px; border-radius: 16px; background: rgb(var(--ink-t) / 0.035); }
.prod-cover { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: rgb(var(--ink-t) / 0.05); }
/* the cover's column hugs its picture (240 px) or the monogram's tile (96 px): the words start 20 px after it, never
   after an empty column (the operator's «огромный отступ между лого и текстом», 2026-10-17) */
.prod-cover:not(.mono) { width: 240px; max-width: 100%; }
.prod-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod-cover.mono { display: grid; place-items: center; font: 800 44px var(--font-display); color: #fff; background: linear-gradient(135deg, #10b981, #6d28d9); aspect-ratio: auto; height: 96px; width: 96px; }
.prod-main { display: grid; gap: 8px; min-width: 0; }
.prod-name { font: 800 22px/1.2 var(--font-display); color: var(--text); }
.prod-tag { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.prod-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-chip { max-width: 100%; padding: 4px 10px; border-radius: 999px; background: rgb(var(--good-t) / 0.12); color: var(--text); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-chip b { font-weight: 600; color: #6ee7b7; }
.prod-diff { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.prod-diff .ico { width: 16px; height: 16px; margin-top: 3px; color: #facc15; }
.prod-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* MP41 SUB-26: the business plan's risks as a numbered list (never one glued line) and its «Скачать .docx» */
.bp-risks { display: grid; gap: 4px; max-width: 72ch; color: var(--text); }
.bp-risk-list { display: grid; gap: 4px; }
.bp-risk { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); line-height: 1.5; }
.bp-risk i { font-style: normal; color: var(--muted); }
.cf-open.bp-docx[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.cf-open { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgb(var(--good-t) / 0.45); border-radius: 999px; background: none; color: var(--text); font: 500 13.5px var(--font-body); cursor: pointer; }
.cf-open .art-ico { width: 15px; height: 15px; color: #34d399; }
.cf-open:hover, .cf-open:focus-visible, .cf-open.panel-on { background: rgb(var(--good-t) / 0.12); }
@media (max-width: 1023px) {
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .prod-cover:not(.mono) { width: 100%; }
  .prod-cover.mono { width: 72px; height: 72px; font-size: 32px; }
  .stage-final > details:not([open]) .cf-res { display: block; }
}
.stage-final .cf-main { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.stage-final .cf-main > * { min-width: 0; }
.stage-final > details > summary { grid-template-columns: var(--mk) minmax(0, 1fr); }
.prod-main, .rc { grid-template-columns: minmax(0, 1fr); }
.prod-chips > * { min-width: 0; }
.rc-fig { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 1023px) {
  .rc-fig { font-size: 15px; }
  :is(#check, #ch-list) .res-row.rc-tile { padding: 10px; }
  .prod-diff > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .prod-name { font-size: 20px; }
}

/* U130: «Сам» and the pivots compact — a line each, opening in place into the whole item */

/* U135: «Сам» and «Стал сомневаться в идее?» fold whole — one line on the line until opened */

/* U137: the decision points in three designs (?fork=a|b|c) */
.fk { position: relative; margin: 8px 0 18px; }
.fk .money-red, .money-red { color: var(--bad); }
.fk-tasks { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.fk-tasks li { display: grid; gap: 2px; }
.fk-tasks li > b { font-weight: 600; }
.fk-tasks .num { color: var(--muted); }
.fk-sub { font-size: 13px; color: var(--faint); }
.fk-try { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--yellow); }

/* A — the road fork */
.fk-a { padding: 4px 0 8px; }
.fka-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.fka-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease, stroke-width 0.2s ease; }
.fka-svg .p-us { stroke: var(--good); stroke-width: 5; }
.fka-svg .p-diy { stroke: rgb(var(--ink-t) / 0.4); stroke-width: 2.5; stroke-dasharray: 6 6; }
.fka-svg .p-alt { stroke: var(--yellow); stroke-width: 3; }
.fk-a[data-hot='diy'] .p-us, .fk-a[data-hot='diy'] .p-alt, .fk-a[data-hot='alt'] .p-us, .fk-a[data-hot='alt'] .p-diy, .fk-a[data-hot='us'] .p-diy, .fk-a[data-hot='us'] .p-alt { opacity: 0.18; }
.fk-a[data-hot='diy'] .p-diy, .fk-a[data-hot='alt'] .p-alt { stroke-width: 4; }
.fk-a[data-hot] .fka-row:not(.hot) { opacity: 0.45; }
/* U157: the road forks and the main line through them are see-through by default, as when a branch is hovered — the
   branch pointed at (hover or focus) lights up, the others stay faint */
.fka-svg path { opacity: 0.3; }
.fka-dot { opacity: 0.5; transition: opacity 0.2s ease; }
.fk-a[data-hot='us'] .p-us, .fk-a[data-hot='diy'] .p-diy, .fk-a[data-hot='alt'] .p-alt, .fk-a[data-hot] .fka-row.hot .fka-dot { opacity: 1; }
.fka-q { position: relative; z-index: 1; display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: center; padding: 6px 0 14px; }
.fka-dia { justify-self: center; width: 30px; height: 30px; transform: rotate(45deg); border-radius: 6px; background: var(--bg); border: 2.5px solid var(--good); box-shadow: 0 0 0 6px rgb(var(--good-t) / 0.12); }
.fka-q h3 { margin: 0; font: 700 22px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.fka-row { position: relative; z-index: 1; display: grid; grid-template-columns: calc(var(--mk) + 44px) minmax(0, 1fr); align-items: start; padding: 10px 0; transition: opacity 0.2s ease; }
.fka-dot { grid-column: 1; justify-self: end; margin-top: 12px; margin-right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2.5px solid currentColor; }
.fka-row.alt { color: var(--yellow); }
.fka-row.diy { color: rgb(var(--ink-t) / 0.55); }
.fka-row.us { color: var(--good); }
.fka-body { display: grid; gap: 8px; min-width: 0; color: var(--text); }
.fka-name { font: 700 16px/1.3 var(--font-display); color: var(--text); }
.fka-row.alt .fka-name { color: var(--yellow); }
.fka-row.us .fka-name { color: var(--good); }
.fka-rec { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 600 12px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; background: rgb(var(--good-t) / 0.15); color: var(--good); vertical-align: 2px; }
.fka-vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.fka-var{ position: relative; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgb(var(--yellow-t) / 0.35); border-radius: 12px; background: rgb(var(--yellow-t) / 0.04); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.fka-var b{ font-size: 14.5px; line-height: 1.3; }
.fka-var span{ font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fka-var .fk-try{ opacity: 0; transition: opacity 0.15s ease; }
.fka-var:hover, .fka-var:focus-visible{ border-color: var(--yellow); background: rgb(var(--yellow-t) / 0.09); }
.fka-var:hover .fk-try, .fka-var:focus-visible .fk-try{ opacity: 1; }
.fka-more > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; cursor: pointer; list-style: none; }
.fka-more > summary::-webkit-details-marker { display: none; }
.fka-stops { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fka-stop { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.fka-stop i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid rgb(var(--ink-t) / 0.45); }
.fka-tag { padding: 3px 10px; border-radius: 999px; border: 1px dashed rgb(var(--ink-t) / 0.3); font-size: 13.5px; color: var(--text); }
.fka-more[open] { padding: 0 0 6px; }
.fka-more .btn { margin-top: 10px; }
.fka-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.fka-g { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); }
.fka-g .ico { width: 16px; height: 16px; }
.fka-row.us .btn { justify-self: start; }

/* B — one decision card */

/* C — the comparison */

@media (max-width: 1023px) {
   .fka-q h3 { font-size: 19px; }
  .fka-row { grid-template-columns: calc(var(--mk) + 18px) minmax(0, 1fr); }
  .fka-vars { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .fka-svg path, .fka-row { transition: none; } }
.fk { min-width: 0; max-width: 100%; }
.fk .btn.fork-go { background: var(--good); color: #052e1f; border-color: transparent; }
.fk .btn.fork-go:hover, .fk .btn.fork-go:focus-visible { background: #5ee6b4; box-shadow: 0 0 0 5px rgb(var(--good-t) / 0.16); }
/* the decision cards sit over the line on a phone: opaque underneath */
.fk-vi { width: 18px; height: 18px; color: var(--yellow); }
@media (max-width: 1023px) {
  /* the variants: a swipe row on a phone */
  .fka-vars { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; min-width: 0; }
  .fka-vars > * { scroll-snap-align: start; }
  .fka-body { min-width: 0; }
}
.fka-var span { line-height: 1.4; max-height: 2.8em; }
@media (hover: none) { .fka-var .fk-try { opacity: 1; } }
/* U139: the folded check shows one row of insight chips (the rest wraps out of sight); open, the full cloud is inside */
.s1-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 34px; overflow: hidden; margin-top: 2px; pointer-events: none; }
.s1-chips .ins { cursor: default; }
.folded-check > details[open] .s1-chips { display: none; }
.s1-chips { row-gap: 20px; max-height: 30px; padding-top: 1px; }

/* U140: «Новая идея» — A, a prompt on glass; B, a spotlight bar (?nim=a|b) */
 .nim-examples { display: none; }
 html.nim-b .shell { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease; transform-origin: 50% 30vh; }
 html.nim-b body.modal-open .shell { transform: scale(0.98); }
 html.nim-b .im-back { -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
html.nim-b .im-back { background: radial-gradient(60% 50% at 50% 25%, rgb(var(--violet-t) / 0.18), rgba(4, 3, 9, 0.8) 70%); }
 html.nim-b .im-card { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; max-height: none; }
 html.nim-b .im-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 html.nim-b .im-head { position: fixed; top: 18px; right: 18px; z-index: 2; }
 html.nim-b #im-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(var(--ink-t) / 0.14); background: rgb(var(--ink-t) / 0.04); color: var(--muted); }
 html.nim-b #im-close:hover { color: var(--text); border-color: rgb(var(--ink-t) / 0.3); }
 html.nim-b .idea-modal .bar-go { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #7c4ddb; box-shadow: 0 8px 24px rgba(124, 77, 219, 0.45); }
 html.nim-b .idea-modal .bar-go .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the spotlight bar */
html.nim-b .idea-modal { place-items: start center; padding-top: min(18vh, 170px); }
html.nim-b .im-card { width: min(720px, 100%); gap: 0; }
html.nim-b .im-card .form.search { gap: 0; }
@property --nim-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.nim-b .im-card .bar { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 68px; padding: 10px 10px 10px 18px; border: 0; border-radius: 18px; background: rgb(var(--glass-t) / 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 70px rgb(var(--shade-t) / 0.55); }
html.nim-b .im-card .bar::before { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: 19.5px; padding: 1.5px; background: conic-gradient(from var(--nim-ang), #7c3aed, #a78bfa, #facc15, #7c3aed); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: nim-spin 9s linear infinite; }
@keyframes nim-spin { to { --nim-ang: 360deg; } }
html.nim-b .nim-sign { width: 28px; height: 28px; }
html.nim-b .im-card .form.search .bar textarea { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; outline: none; font: 400 20px/1.4 var(--font-body); color: var(--text-hi); caret-color: #a78bfa; resize: none; }
html.nim-b .im-card .form.search .bar textarea::placeholder { color: rgb(var(--ink-t) / 0.38); }
html.nim-b .im-hint { padding: 10px 6px 0; color: rgb(var(--ink-t) / 0.4); font-size: 12.5px; text-align: left; }
html.nim-b .sug { margin-top: 10px; padding: 8px; border: 1px solid rgb(var(--ink-t) / 0.1); border-radius: 16px; background: rgb(var(--glass-t) / 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.5); }
html.nim-b .sug-h { display: block; padding: 4px 10px 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-t) / 0.4); }
html.nim-b .sug-list { display: grid; gap: 2px; }
html.nim-b .sug-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
html.nim-b .sug-row .sug-label { padding: 2px 9px; border-radius: 6px; background: rgb(var(--warn-t) / 0.14); color: #fde68a; font-size: 12px; font-weight: 600; }
/* a suggestion in full: it wraps onto as many lines as it needs */
html.nim-b .sug-row .sug-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; color: rgb(var(--ink-t) / 0.88); }
html.nim-b .sug-row .sug-label { margin-top: 1px; }
html.nim-b .sug-row:hover, html.nim-b .sug-row.on { background: rgb(var(--violet-t) / 0.28); }
html.nim-b .nim-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 6px 0; font-size: 13px; }
html.nim-b .nim-examples[hidden] { display: none; }
html.nim-b .nim-ex { padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(var(--ink-t) / 0.14); background: rgb(var(--ink-t) / 0.05); color: rgb(var(--ink-t) / 0.8); font: inherit; cursor: pointer; }
html.nim-b .nim-ex:hover, html.nim-b .nim-ex:focus-visible { border-color: rgb(var(--lavender-t) / 0.7); color: var(--text-hi); }

/* a phone: full screen, the field in the upper part, the suggestions a list above the keyboard (full texts, scrolling when long) */
@media (max-width: 640px) {
   html.nim-b .idea-modal { padding: 76px 16px 0; place-items: start stretch; }
   html.nim-b .im-card { width: 100%; }
  html.nim-b .im-card .bar { min-height: 60px; padding: 8px 8px 8px 14px; gap: 10px; }
  html.nim-b .im-card .form.search .bar textarea { font-size: 17px; }
   html.nim-b .im-head { top: 14px; right: 14px; }
   html.nim-b .sug { position: fixed; left: 0; right: 0; bottom: calc(var(--kb, 0px) + 10px); margin: 0; padding: 0 12px; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
   html.nim-b .sug-h { padding: 0 4px 6px; }
   html.nim-b .sug-list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
   html.nim-b .sug-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgb(var(--ink-t) / 0.14); background: rgba(22, 18, 34, 0.96); }
   html.nim-b .sug-row .sug-label { justify-self: start; }
  html.nim-b .nim-examples { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
   html.nim-b .shell{ transition: none; }
  html.nim-b .im-card .bar::before { animation: none; }
}
@media (max-width: 640px) {
  /* the send button stays at the right edge of the field */
   html.nim-b .idea-modal .bar-go { grid-column: auto; width: 44px; height: 44px; justify-self: end; }
  html.nim-b .im-card .bar { grid-template-columns: 26px minmax(0, 1fr) 44px; }
  html.nim-b .nim-sign { width: 24px; height: 24px; }
   html.nim-b .im-card .form.search .bar textarea { min-height: 0; }
   html.nim-b .im-hint { display: none; }
}

/* U141: the composition centred (the field at the optical centre, the suggestions grow downward), the idea cloud around */
 html.nim-b .idea-modal { display: block; padding: 0; }
 html.nim-b .idea-modal[hidden] { display: none; }
/* no transform here: the ✕ and the phone's suggestion row are position: fixed inside the card */
 html.nim-b .im-card { position: absolute; left: 0; right: 0; margin: 0 auto; transform: none; z-index: 2; }
html.nim-b .im-card { top: calc(46% - 34px); width: min(720px, calc(100% - 32px)); }
 html.nim-b .im-head { z-index: 3; }
.nim-cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.nim-cloud.ready { opacity: 1; }
.nim-cl { position: absolute; left: 0; top: 0; pointer-events: auto; max-width: 260px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgb(var(--ink-t) / 0.12); background: rgb(var(--ink-t) / 0.05);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: rgb(var(--ink-t) / 0.82); font: 400 14.5px/1.3 var(--font-body); white-space: nowrap; cursor: pointer;
  transform: scale(var(--s, 1)); transform-origin: center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease, border-color 0.2s ease, background-color 0.2s ease;
  animation: nim-drift var(--dur, 16s) ease-in-out var(--del, 0s) infinite; }
.nim-cl > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.nim-cl.d1 { opacity: 0.62; }
.nim-cl.d2 { opacity: 0.38; filter: blur(0.8px); max-width: 200px; }
.nim-cl:hover, .nim-cl:focus-visible { opacity: 1; filter: none; max-width: none; z-index: 2; border-color: rgb(var(--lavender-t) / 0.75); background: rgb(var(--violet-t) / 0.24); color: #fff; }
@keyframes nim-drift { 0%, 100% { translate: 0 0; } 50% { translate: var(--dx, 3px) var(--dy, -4px); } }
/* while the person types the cloud steps back so the suggestions lead */
.idea-modal.nim-typing .nim-cloud { opacity: 0.25; }
.idea-modal.nim-typing .nim-cl { transform: translate(var(--ox, 0), var(--oy, 0)) scale(calc(var(--s, 1) * 0.94)); }
@media (max-width: 640px) {
  html.nim-b .im-card { top: calc(28% - 34px); }
  .nim-cl { font-size: 13.5px; padding: 6px 12px; max-width: 46vw; }
}
@media (prefers-reduced-motion: reduce) {
  .nim-cl { animation: none; transition: none; }
  .nim-cloud { transition: none; }
  .idea-modal.nim-typing .nim-cl { transform: scale(var(--s, 1)); }
}

/* U142: the home — the «Новая идея» composition inline under the header, «Твои идеи» below the fold */
#home { margin: -28px -32px 0; }
#home[hidden] { display: none; }
.idea-modal.home { position: relative; inset: auto; z-index: auto; height: calc(100svh - var(--top-h, 76px)); min-height: 560px; }
 html.nim-b .idea-modal.home { display: block; }
.idea-modal.home .im-back, .idea-modal.home .im-head { display: none; }
.idea-modal.home::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 42% at 50% 44%, rgb(var(--violet-t) / 0.2), transparent 75%); }
.home-ideas { display: grid; gap: 14px; padding: 8px 0 24px; }
.home-ideas[hidden] { display: none; }
.hi-h { margin: 0; font: 600 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.hi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hi-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgb(var(--ink-t) / 0.025); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.hi-card:hover, .hi-card:focus-visible { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.06); }
.hi-card > .tier-chip { grid-column: 2; justify-self: start; }
/* the card's chips (the tier's, the level and stage): a wrapping row in the text's column, a long one wrapping inside the
   card — never past its edge; the audit's badge its own size, not the line clamp of the card's text */
.hi-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hi-chips > .tier-chip, .hi-chips > .sw-lvl, .hi-chips > .sw-grad { max-width: 100%; white-space: normal; margin-left: 0; }
.hi-t > .audit-badge { display: inline-block; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; line-height: 18px; color: var(--purple-text); }
.hi-t { display: grid; min-width: 0; }
.hi-t b { font: 600 14.5px/1.3 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-t span { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { #home { margin-inline: -16px; } }
@media (max-width: 640px) { .hi-grid { grid-template-columns: minmax(0, 1fr); } }
/* U143: the switcher at home — a lightbulb and «Список идей» */
.sw-face.sw-bulb { border-radius: 50%; background: rgb(var(--warn-t) / 0.12); color: var(--yellow); }

/* U145: behind the home (and the modal's glass) yellow and purple flow into each other — one fixed layer, soft blobs that
   drift and morph on long periods (alternate, so no loop seam); dark overall: the brightest point stays under ~12 % luminance */
.aurora { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #05040a; }
body.at-home .aurora, body.modal-open .aurora { display: block; }
.aurora > i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.75; will-change: transform; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.aurora .au1 { left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, rgb(var(--violet-t) / 0.42), rgb(var(--violet-t) / 0.12) 55%, transparent 100%); animation-name: au-1; animation-duration: 31s; }
.aurora .au2 { right: -22vmax; top: -10vmax; background: radial-gradient(closest-side, rgb(var(--warn-t) / 0.2), rgba(245, 158, 11, 0.07) 55%, transparent 100%); animation-name: au-2; animation-duration: 37s; }
.aurora .au3 { left: 8vmax; bottom: -34vmax; background: radial-gradient(closest-side, rgba(70, 5, 157, 0.5), rgba(70, 5, 157, 0.14) 55%, transparent 100%); animation-name: au-3; animation-duration: 26s; }
.aurora .au4 { right: -6vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.16), rgb(var(--warn-t) / 0.05) 55%, transparent 100%); animation-name: au-4; animation-duration: 40s; }
@keyframes au-1 { from { transform: translate(0, 0) scale(1, 1) rotate(0deg); } to { transform: translate(22vw, 14vh) scale(1.25, 0.85) rotate(40deg); } }
@keyframes au-2 { from { transform: translate(0, 0) scale(0.9, 1.1) rotate(0deg); } to { transform: translate(-26vw, 22vh) scale(1.2, 0.9) rotate(-30deg); } }
@keyframes au-3 { from { transform: translate(0, 0) scale(1.1, 0.9) rotate(0deg); } to { transform: translate(28vw, -18vh) scale(0.9, 1.2) rotate(35deg); } }
@keyframes au-4 { from { transform: translate(0, 0) scale(1, 1) rotate(0deg); } to { transform: translate(-30vw, -24vh) scale(1.3, 1.05) rotate(-45deg); } }
body.tab-hidden .aurora > i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aurora > i { animation: none; } }
/* the home's own glow gives way to the aurora */
.idea-modal.home::before { display: none; }
body.at-home, body.at-home .shell { background: transparent; }
/* at home there is nothing to close: the hint drops «Esc — закрыть» */
.idea-modal.home .im-esc { display: none; }
/* U150: the home is the composition itself — no «Новая идея» in the header, nothing under the field but the suggestions
   (no key hint, no «Например» chips: the cloud around already offers ideas) */
body.at-home #new-idea, html.nim-b .idea-modal.home .im-hint, html.nim-b .idea-modal.home .nim-examples { display: none; }
/* U153: on the home the header is not a bar — no background, no line, no blur, the aurora runs under the logo and the
   avatar; it spans the window (the logo at the left gutter, the avatar at the right one) and scrolls away with the page,
   so nothing passes under it. No idea switcher there: the home lists «Твои идеи» itself, and the profile's «Мои идеи»
   still opens the list (the switcher's box stays, only its button goes). */
body.at-home .topbar { position: relative; background: none; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.at-home .top-row { max-width: none; }
body.at-home .sw-button { display: none; }
body.at-home .switcher { align-self: stretch; }
@media (max-width: 640px) {
  body.at-home .top-row { padding-left: 16px; padding-right: 16px; }
}

/* U146: «Твои идеи» — 4 / 2 / 1 per row, more as one scrolls; a soft down arrow at the bottom of the first screen */
#home { position: relative; }
.hi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hi-more { display: grid; place-items: center; min-height: 48px; padding: 8px 0 16px; font-size: 14px; }
.home-down { position: absolute; left: 50%; bottom: 22px; z-index: 3; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(var(--ink-t) / 0.16); background: rgb(var(--ink-t) / 0.05); color: rgb(var(--ink-t) / 0.75); cursor: pointer; animation: hd-bob 2.6s ease-in-out infinite; transition: opacity 0.3s ease, border-color 0.2s ease, color 0.2s ease; }
.home-down[hidden] { display: none; }
.home-down .ico { width: 20px; height: 20px; }
.home-down:hover, .home-down:focus-visible { border-color: rgb(var(--lavender-t) / 0.7); color: var(--text-hi); }
@keyframes hd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
#home:has(.nim-typing) .home-down { opacity: 0; pointer-events: none; }
@media (max-width: 1023px) { .hi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hi-grid { grid-template-columns: minmax(0, 1fr); } .home-down { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .home-down { animation: none; } }
/* an idea as a link (a card, a row) highlights on hover — it is never underlined */
a.hi-card, a.hi-card:hover, a.hi-card:focus-visible, .sw-opt, .sw-opt:hover, a.lb-row:hover, a.cf-open:hover { text-decoration: none; }
@media (max-width: 640px) {
  /* the suggestions on a phone sit on their own dark glass — the cloud never shows through them */
  html.nim-b .sug:not([hidden]) { padding: 14px 12px 10px; background: linear-gradient(180deg, rgba(6, 5, 12, 0) 0, rgba(6, 5, 12, 0.97) 22px); }
  html.nim-b .sug-row { background: rgb(22, 18, 34); }
}
/* the end of a live check: its rows collapse up into the result */
.journey.live .s1-rows.folding { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; }

/* U148: the tails cloud — «+ tail» pills around the field once the draft has text (a row under the field on a phone) */
.nim-cloud { transition: opacity 0.32s ease; }
.idea-modal.nim-typing .nim-cloud { opacity: 0; }
.idea-modal.nim-typing .nim-cloud.ready { opacity: 0.25; }
.idea-modal.nim-typing .nim-cloud.tails.ready { opacity: 1; }
.idea-modal.nim-typing .nim-cloud.tails .nim-cl { transform: scale(var(--s, 1)); }
.nim-cl.tail { max-width: 220px; padding: 5px 12px; font-size: 13px; background: rgb(var(--ink-t) / 0.06); }
.nim-cl.tail.d1 { opacity: 0.75; }
.nim-cl.tail.d2 { opacity: 0.55; filter: none; }
.tl-plus { font-style: normal; font-weight: 600; color: rgb(var(--ink-t) / 0.42); margin-right: 1px; }
.nim-cl.tail:hover .tl-plus, .nim-cl.tail:focus-visible .tl-plus { color: #c4b5fd; }
.nim-cl.gone { opacity: 0 !important; transform: scale(0.8) !important; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.nim-tails { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px 2px 4px; scrollbar-width: none; transition: opacity 0.3s ease; }
.nim-tails::-webkit-scrollbar { display: none; }
.nim-tails[hidden] { display: none; }
.nim-tails.out { opacity: 0; }
.nim-tails .nim-cl { position: static; flex: none; max-width: none; scroll-snap-align: start; animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .nim-tails, .nim-cl.gone { transition: none; } }

/* ==== U152: the responsive pass — the phone (the Telegram Mini App) first, then the tablet and the narrow desktop ==== */
/* safe areas: the notch and the home bar (env, with viewport-fit=cover), and Telegram's own header and insets
   (the Mini App sets --tg-content-safe-area-inset-* and --tg-safe-area-inset-* on the root) */
:root {
  --sa-t: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --sa-b: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --sa-l: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --sa-r: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
}
.shell { min-height: 100dvh; }
.topbar { padding-top: var(--sa-t); padding-left: var(--sa-l); padding-right: var(--sa-r); }
small { font-size: max(12px, 0.85em); }
.hcard.have { max-height: calc(100dvh - 16px); }
.im-card { max-height: calc(100dvh - 32px); }
/* a long word or address never pushes the page sideways */
.journey, .column, .fx-body, .ch-list { overflow-wrap: break-word; }

/* --- touch: every control at least 40 × 40 (the look stays; the hit area grows) --- */
@media (pointer: coarse), (max-width: 1023px) {
  .avatar { width: 40px; height: 40px; }
  .avatar .av-in { width: 34px; height: 34px; }
  .brand { min-height: 40px; min-width: 40px; }
  .sw-close, html.nim-b #im-close { width: 40px; height: 40px; }
  .sw-arch-toggle { min-height: 40px; }
  .nim-ex, .nim-cl, .btn, .now-chip, .art, button.art, .cf-open, .tier-chip.as-btn { min-height: 40px; }
  .fx-grab { min-height: 40px; padding: 12px 0 8px; }
  .fka-more > summary, details.progress > summary, details.lab-data > summary, details.raw > summary { min-height: 40px; }
  /* a run's file chip, the goal's badges, the earlier rounds' summary (U161–U166 brought them into the probe's view) */
  .art-chip, .have-b { min-height: 40px; }
  .rounds > summary { display: flex; align-items: center; min-height: 40px; }
  /* a competitor's name as a link: a taller target, the same line */
  .name > a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  /* a citation number: 40 px tall, at least 24 px wide (WCAG 2.5.8), the line's spacing kept */
  .src a { display: inline-block; min-width: 24px; padding: 9px 2px; margin: -9px 0; text-align: center; line-height: 22px; }
  .src { white-space: normal; }
  /* the «i» discs: a 40 px transparent target, the disc drawn inside it; the section's target hangs a little lower than
     its disc, clear of the row above */
  .score-info, .sec-info, .ex-info { width: 40px; height: 40px; border-color: transparent; background: transparent; isolation: isolate; }
  .score-info { margin: -7px; }
  .ring-col .score-info { width: 40px; height: 40px; margin: -9px; }
  .ring-col .score-info::before { inset: 9px; }
  .sec-info { margin: -8px -11px -14px; }
  .ex-info { position: relative; margin: -11px -11px -11px -7px; vertical-align: middle; }
  .score-info::before, .sec-info::before, .ex-info::before { content: ''; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
  .score-info::before { inset: 7px; }
  .sec-info::before { inset: 8px 11px 14px; }
  .ex-info::before { inset: 11px; }
  .score-info:hover::before, .score-info:focus-visible::before, .sec-info:hover::before, .sec-info:focus-visible::before { border-color: var(--yellow); }
  .ex-info:hover::before, .ex-info:focus-visible::before { border-color: var(--purple-text); }
}
@media (pointer: coarse) and (min-width: 641px) {
  html.nim-b .im-card .form.search .bar textarea { min-height: 40px; padding-top: 6px; }
}

/* --- below 1024 px: Fox sits in the header beside the profile (never a tab cut by the edge, never over content) --- */
@media (max-width: 1023px) {
  .top-actions .ag-rail, body.chat-open .top-actions .ag-rail, body.sheet-open .top-actions .ag-rail { position: static; display: grid; place-items: center; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; padding: 0; background: none; border: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .top-actions .ag-tab, .top-actions .ag-tab:hover, .top-actions .ag-tab[aria-expanded='true'], .top-actions .ag-tab:focus-visible { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; transform: none; box-shadow: none; opacity: 1; }
  .top-actions .ag-tab .ag-face.rail { width: 40px; height: 40px; padding: 2.5px; }
  .top-actions .ag-face.rail .ag-dot { width: 11px; height: 11px; right: 0; bottom: 0; border-width: 2px; }
  .top-actions .ag-rail.fast .ag-tab { opacity: 1; }
  .top-actions .ag-tip { display: none; }
  /* the sheets keep clear of the notch, the home bar and Telegram's own header */
  .chat { padding-bottom: var(--sa-b); }
  .ch-top { padding-top: max(8px, var(--sa-t)); }
  .fx-app { top: max(8dvh, calc(var(--sa-t) + 8px)); padding-bottom: max(4px, var(--sa-b)); }
}

/* --- the phone --- */
/* the strip's pills keep their size while a draft is typed (the cloud's step back is for the ring only) */
.idea-modal.nim-typing .nim-tails .nim-cl { transform: none; }
@media (max-width: 640px) {
  main { padding-left: calc(16px + var(--sa-l)); padding-right: calc(16px + var(--sa-r)); padding-top: 16px; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  /* the home: the field near the top, a compact strip of ideas under it, «Твои идеи» right after */
  #home { margin: -16px -16px 0; }
  html.nim-b .idea-modal.home { height: auto; min-height: 0; padding: 20px 0 6px; }
  html.nim-b .idea-modal.home .im-card { position: relative; top: auto; left: auto; right: auto; width: auto; margin: 0 16px; }
  .home-down { display: none !important; }
  .idea-modal .nim-cloud { display: none; }
  .home-ideas { padding-top: 14px; }
  /* the field: 16 px text (no zoom on focus), two lines tall so the guide line is whole */
  html.nim-b .im-card .bar { min-height: 0; padding: 8px 8px 8px 12px; gap: 10px; align-items: start; }
  html.nim-b .im-card .form.search .bar textarea { font-size: 16px; line-height: 1.4; min-height: 45px; padding-top: 2px; }
  html.nim-b .idea-modal .bar-go { align-self: center; }
  html.nim-b .nim-sign { margin-top: 8px; }
  /* the strip: the tails, or two rows of whole ideas, scrolling sideways (the cut «Например» chips go) */
  .nim-tails { margin: 0 -16px; padding: 12px 16px 2px; scroll-padding-inline: 16px; gap: 8px; }
  .nim-tails.ideas { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; }
  .nim-tails .nim-cl { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 14px; white-space: nowrap; opacity: 1; filter: none; }
  .nim-tails .nim-cl > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
  html.nim-b .idea-modal .nim-examples { display: none; }
  /* the suggestions follow the field in the page (above the keyboard, never pinned to the bottom) */
  html.nim-b .sug, html.nim-b .sug:not([hidden]) { position: static; margin: 0; padding: 14px 0 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.nim-b .sug-list { max-height: none; overflow: visible; }
  /* the «Новая идея» sheet over a page: full screen, the field near the top, scrolling with the keyboard */
  html.nim-b .idea-modal:not(.home) { overflow-y: auto; overscroll-behavior: contain; padding: calc(64px + var(--sa-t)) 16px calc(24px + var(--kb, 0px) + var(--sa-b)); }
  html.nim-b .idea-modal:not(.home) .im-card { position: relative; top: auto; width: auto; margin: 0; }
  html.nim-b .im-head { top: calc(12px + var(--sa-t)); right: calc(12px + var(--sa-r)); }
  /* the switcher's full-screen sheet: inside the safe areas, its list scrolls on its own */
  .sw-panel { padding: calc(12px + var(--sa-t)) calc(16px + var(--sa-r)) calc(12px + var(--sa-b)) calc(16px + var(--sa-l)); }
  .sw-list { overscroll-behavior: contain; }
  /* the sheet's close button keeps off the edge */
  .fx-right { padding-right: 4px; }
}

/* --- the tablet and a narrow window: the header gives the switcher room; its list is wider than the button --- */
@media (min-width: 641px) and (max-width: 1023px) {
  .brand-tag { display: none; }
  .new-idea { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .new-idea .lbl { display: none; }
  /* the list hangs from the switcher's left edge (the header's bell and balance push the switcher left, U160–U169) */
  /* (a browser without anchor positioning: the list at the bar's left gutter, as wide as the bar allows — the block
     «CSS anchor positioning» below places it under the button where it can) */
  .switcher { position: static; }
  .sw-panel { left: calc(16px - var(--bar-x)); right: auto; width: min(560px, calc(100% + 2 * var(--bar-x) - 32px)); transform: none; }
  .nim-cl { max-width: 320px; }
}

/* --- every width: grids and names whose content would set their width fit the line down to 320 px --- */
.risks { grid-template-columns: minmax(0, 1fr); }
.risk > *, .problem > *, .solution > * { min-width: 0; }
.problem p, .solution p { overflow-wrap: break-word; }
/* a name in a card or a row wraps (two lines at most) rather than being cut */
.hi-t b, .sw-o-name, .lb-name b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
@media (max-width: 380px) {
  /* the launch's four things: one per row, the icon beside the words */
  .pk-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pk-tile { grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; }
}
@media (max-width: 339px) {
  /* too narrow for a readable name: the switcher is its ring and the chevron (the name is in its label and on the page) */
  .sw-button:not(.listing) .sw-idea { display: none; }
  .sw-button:not(.listing) { width: max-content; margin-inline: auto; grid-template-columns: 28px auto; }
  /* the header's bell (U162) takes a place: the actions sit closer */
  .top-row { gap: 6px; }
  .top-actions, .hub { gap: 4px; }
}

/* U154: on the home the agent's chat sits on the home's own background — the aurora runs under it, no black column.
   The fades under the head and over the composer become a mask on the list; the composer and the starters are glass.
   On a phone the chat covers the page: once it has slid up, the page under it (and its header) steps out of view so
   only the aurora shows through; closing brings them back at once. */
body.at-home .chat { background: rgb(var(--veil-t) / 0.22); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
body.at-home .ch-top::before, body.at-home .ch-dock::before { display: none; }
body.at-home .ch-list { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); }
body.at-home .ch-composer { background: rgb(var(--veil-t) / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.at-home .ch-starter { background: rgb(var(--ink-t) / 0.04); }
@media (max-width: 1023px) {
  body.at-home .chat { background: rgb(var(--veil-t) / 0.3); }
  body.at-home.chat-open main, body.at-home.chat-open .topbar { visibility: hidden; transition: visibility 0s linear 0.38s; }
}

/* ==== MP22 SUB-8: the front under the shell CSP (no inline style anywhere) ==== */
.me-note[hidden] { display: none; }
body.signed-out .ag-rail, body.signed-out .chat { display: none; }

/* U168 (the lab's quick test): over the aurora, a picture made for the draft — or, with an empty field, for the home's
   ideas — under a light blur (the scene stays readable) and dimmed, so the field and the pills stay legible; two layers
   cross-fade when it changes.
   Only where the aurora shows (the home and the «Новая идея» overlay); the product's 404 never fills it. */
.backdrop { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body.at-home .backdrop, body.modal-open .backdrop { display: block; }
.backdrop img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; opacity: 0; filter: blur(2px) saturate(1.1) brightness(0.55); transition: opacity 1.6s ease; }
/* the blur grows towards the middle and eases off towards every edge of the screen, never to none: the picture is
   2 px soft everywhere, and a second blur over it fades out from the centre by a radial mask */
.backdrop::after { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, #000 35%, transparent 100%); }
.backdrop img.on { opacity: 0.9; }
body.tab-hidden .backdrop img { transition: none; }
@media (prefers-reduced-motion: reduce) { .backdrop img { transition: none; } }

/* U172: no mark in the field — the text starts at its edge; U170: the microphone between the field and the send button */
html.nim-b .im-card .bar { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 24px; }
html.nim-b .nim-mic { position: relative; display: grid; grid-auto-flow: column; place-items: center; gap: 8px; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(var(--ink-t) / 0.14); border-radius: 22px; background: rgb(var(--ink-t) / 0.06); color: rgb(var(--ink-t) / 0.85); cursor: pointer; transition: background-color 0.15s ease, width 0.2s ease; }
html.nim-b .nim-mic:hover { background: rgb(var(--ink-t) / 0.12); color: var(--text-hi); }
html.nim-b .nim-mic:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
html.nim-b .nim-mic .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.nim-b .nim-mic.rec { width: auto; padding: 0 14px 0 12px; border-color: #dc2626; background: #dc2626; color: #fff; }
html.nim-b .nim-mic.rec .ico { fill: currentColor; stroke: none; }
html.nim-b .nim-mic.rec::after { content: ''; position: absolute; inset: -4px; border: 2px solid rgba(220, 38, 38, 0.55); border-radius: 26px; animation: nim-mic-pulse 1.3s ease-out infinite; pointer-events: none; }
@keyframes nim-mic-pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }
html.nim-b .nim-mic.busy { cursor: progress; opacity: 0.8; }
/* the microphone sits where the send button sits: at the field's bottom (a long draft grows upwards), its middle on the button's */
html.nim-b .idea-modal .nim-mic { align-self: end; margin-bottom: 2px; }
.nim-rec-t { font: 600 14px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.nim-mic:not(.rec) .nim-rec-t { display: none; }
@media (max-width: 640px) {
  html.nim-b .im-card .bar { grid-template-columns: minmax(0, 1fr) auto 44px; padding-left: 16px; }
  /* on a phone the send button is centred on the field: so is the microphone */
  html.nim-b .idea-modal .nim-mic { align-self: center; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { html.nim-b .nim-mic.rec::after { animation: none; } }

/* U173: the field's frame stays, half see-through, until the field has the focus; focused, the turning gradient frame in full */
html.nim-b .im-card .bar::before { opacity: 0.4; transition: opacity 0.25s ease; }
html.nim-b .im-card .bar:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.nim-b .im-card .bar::before { transition: none; } }

/* U175: while a new picture is made, the shown one opens up and the earlier ones come back faintly, sliding off to the
   sides; the new one then rises out of the drift (one layer per picture, the last four kept) */
.backdrop img { transition: opacity 1.6s ease, transform 7s cubic-bezier(0.16, 0.8, 0.3, 1); }
.backdrop img.past { opacity: 0; }
.backdrop img.gone { opacity: 0; transition: opacity 1.4s ease, transform 7s cubic-bezier(0.16, 0.8, 0.3, 1); }
.backdrop.waiting img.d0 { opacity: 0.6; transform: scale(1.16); }
.backdrop.waiting img.d1 { opacity: 0.3; transform: translateX(-18%) scale(1.08); }
.backdrop.waiting img.d2 { opacity: 0.24; transform: translateX(18%) scale(1.08); }
.backdrop.waiting img.d3 { opacity: 0.18; transform: translateY(16%) scale(1.12); }
.backdrop img.enter { animation: bd-enter 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bd-enter { from { opacity: 0; transform: scale(1.07); } to { opacity: 0.9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .backdrop img, .backdrop img.gone { transition: opacity 0.6s ease; transform: none; }
  .backdrop.waiting img.d0, .backdrop.waiting img.d1, .backdrop.waiting img.d2, .backdrop.waiting img.d3 { transform: none; }
  .backdrop img.enter { animation: none; opacity: 0.9; }
}

/* U171: a check's page sits on its idea's picture too — darker and softer under the line, so every row stays legible */
body.page-bd .backdrop { display: block; background: rgb(var(--veil-t)); }
body.page-bd:not(.at-home), body.page-bd:not(.at-home) .shell { background: transparent; }
body.page-bd:not(.at-home) .backdrop img.on, body.page-bd:not(.at-home) .backdrop img.enter { opacity: 0.58; animation-name: bd-enter-page; }
@keyframes bd-enter-page { from { opacity: 0; transform: scale(1.07); } to { opacity: 0.58; transform: scale(1); } }
body.page-bd:not(.at-home) .backdrop::after { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 0%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 0%, #000 45%, transparent 100%); }

/* U177 (operator 2026-10-09): the pictures lighter; the darkening and the blur live in the middle only (where the field
   and the pills are) and ease off towards every edge — the edges nearly sharp and nearly as bright as the picture */
.backdrop img { filter: blur(1px) saturate(1.1) brightness(0.95); }
.backdrop::after { background: radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--veil-t) / 0.5) 0%, rgb(var(--veil-t) / 0.32) 50%, rgb(var(--veil-t) / 0.08) 85%, rgb(var(--veil-t) / 0) 100%); }
/* while a new picture is made (≤ ~10 s), every shown one drifts all the way off to a side — the current one left, the
   earlier ones right, up and down — fading as it goes; the new one arrives meanwhile and cuts the drift short */
.backdrop img { transition: opacity 1.6s ease, transform 10s cubic-bezier(0.3, 0.1, 0.3, 1); }
.backdrop.waiting img.d0 { opacity: 0.55; transform: translateX(-100%) scale(1.06); }
.backdrop.waiting img.d1 { opacity: 0.38; transform: translateX(100%) scale(1.06); }
.backdrop.waiting img.d2 { opacity: 0.3; transform: translateY(-100%) scale(1.08); }
.backdrop.waiting img.d3 { opacity: 0.26; transform: translateY(100%) scale(1.08); }
/* a picture appears from every edge towards the middle: a hole in its mask closes over 2.4 s (the page's first picture
   too, so a load is never a sudden flash) */
@property --bd-hole { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.backdrop img.enter { animation: bd-reveal 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, transparent var(--bd-hole), #000 calc(var(--bd-hole) + 38%)); mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, transparent var(--bd-hole), #000 calc(var(--bd-hole) + 38%)); }
@keyframes bd-reveal { from { --bd-hole: 110%; opacity: 0; } 30% { opacity: 0.9; } to { --bd-hole: -40%; opacity: 0.9; } }
body.page-bd:not(.at-home) .backdrop img.enter { animation-name: bd-reveal-page; }
@keyframes bd-reveal-page { from { --bd-hole: 110%; opacity: 0; } 30% { opacity: 0.85; } to { --bd-hole: -40%; opacity: 0.85; } }
/* a check's page: the picture brighter now, its middle darker (the line's rows over it), its edges clear */
body.page-bd:not(.at-home) .backdrop img.on { opacity: 0.85; }
body.page-bd:not(.at-home) .backdrop::after { background: radial-gradient(ellipse 70% 72% at 50% 46%, rgb(var(--veil-t) / 0.74) 0%, rgb(var(--veil-t) / 0.55) 50%, rgb(var(--veil-t) / 0.15) 85%, rgb(var(--veil-t) / 0) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) {
  .backdrop img.enter, body.page-bd:not(.at-home) .backdrop img.enter { animation: none; -webkit-mask-image: none; mask-image: none; opacity: 0.9; }
  .backdrop.waiting img.d0, .backdrop.waiting img.d1, .backdrop.waiting img.d2, .backdrop.waiting img.d3 { transform: none; }
}

/* U176: the similar ideas under the suggestions — the home's cards, two a row (one on a phone), a quiet heading */
.nim-similar { margin-top: 16px; }
.nim-similar[hidden] { display: none; }
.nim-similar-h { margin: 0 0 10px; padding: 0 4px; font: 600 12px/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-t) / 0.55); }
.nim-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .nim-similar-grid { grid-template-columns: minmax(0, 1fr); } }

/* U178 (operator 2026-10-09): the agent's chat has no darkening or blur of its own — it sits on the page's one background
   (the home's and a check page's picture alike); the list's edges fade by the mask, the composer keeps its glass */
body.at-home .chat, body.page-bd .chat { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.page-bd .ch-top::before, body.page-bd .ch-dock::before { display: none; }
body.page-bd .ch-list { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); }
body.page-bd .ch-composer { background: rgb(var(--veil-t) / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 1023px) {
  body.at-home .chat, body.page-bd .chat { background: transparent; }
  /* the full-screen chat on a phone: once it has slid up, the page under it steps out of view — only the picture stays */
  body.page-bd.chat-open main, body.page-bd.chat-open .topbar { visibility: hidden; transition: visibility 0s linear 0.38s; }
}

/* U180: a hovered pill keeps its place and opens evenly to both sides to its whole words (the width and the left edge
   move together, 0.35 s), instead of jumping wider to the right */
.nim-cl { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease, border-color 0.2s ease, background-color 0.2s ease, max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), margin-left 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nim-cl:hover, .nim-cl:focus-visible { max-width: 260px; }
.nim-cl.d2:hover { max-width: 200px; }
.nim-cl.tail:hover { max-width: 220px; }
.nim-cl.grow, .nim-cl.d2.grow, .nim-cl.tail.grow { max-width: var(--hw, 260px); margin-left: var(--hx, 0); }
@media (prefers-reduced-motion: reduce) { .nim-cl { transition: none; } }

/* U181: one layer per picture. The layer carries where the picture is and how visible it is (the drift, the arrival);
   the picture inside carries only its own fade when a newer one has come. The whole change is slow and even — ~15 s of
   drifting and dissolving at once — until the new picture floats up over it in about a second. */
.backdrop .bd-l { position: absolute; inset: 0; opacity: 0; --bd-op: 0.9; }
body.page-bd:not(.at-home) .backdrop .bd-l { --bd-op: 0.85; }
.backdrop .bd-l.on { opacity: var(--bd-op); }
.backdrop .bd-l.past { opacity: 0; }
.backdrop .bd-l > img { opacity: 1; animation: none; -webkit-mask-image: none; mask-image: none; transform: none; transition: opacity 0.9s ease; }
.backdrop .bd-l.gone > img { opacity: 0; }
/* waiting: the current one drifts left and dissolves, the earlier ones peek in faintly to the right, up and down and go */
.backdrop.waiting .bd-l.w0 { animation: bd-off-left 15s cubic-bezier(0.25, 0.35, 0.35, 1) forwards; }
.backdrop.waiting .bd-l.w1 { animation: bd-off-right 15s cubic-bezier(0.25, 0.35, 0.35, 1) forwards; }
.backdrop.waiting .bd-l.w2 { animation: bd-off-up 15s cubic-bezier(0.25, 0.35, 0.35, 1) forwards; }
.backdrop.waiting .bd-l.w3 { animation: bd-off-down 15s cubic-bezier(0.25, 0.35, 0.35, 1) forwards; }
@keyframes bd-off-left { from { opacity: var(--bd-op); transform: none; } to { opacity: 0; transform: translateX(-60%) scale(1.06); } }
@keyframes bd-off-right { from { opacity: 0; transform: none; } 14% { opacity: 0.34; } to { opacity: 0; transform: translateX(60%) scale(1.06); } }
@keyframes bd-off-up { from { opacity: 0; transform: none; } 14% { opacity: 0.26; } to { opacity: 0; transform: translateY(-60%) scale(1.08); } }
@keyframes bd-off-down { from { opacity: 0; transform: none; } 14% { opacity: 0.22; } to { opacity: 0; transform: translateY(60%) scale(1.08); } }
/* the new picture floats up over whatever is drifting (about a second); the page's first one comes in from the edges */
.backdrop .bd-l.swap { animation: bd-float-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bd-float-in { from { opacity: 0; transform: scale(1.045); } to { opacity: var(--bd-op); transform: none; } }
.backdrop .bd-l.enter { animation: bd-reveal-l 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, transparent var(--bd-hole), #000 calc(var(--bd-hole) + 38%)); mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, transparent var(--bd-hole), #000 calc(var(--bd-hole) + 38%)); }
@keyframes bd-reveal-l { from { --bd-hole: 110%; opacity: 0; } 30% { opacity: var(--bd-op); } to { --bd-hole: -40%; opacity: var(--bd-op); } }
@media (prefers-reduced-motion: reduce) {
  .backdrop.waiting .bd-l.w0, .backdrop.waiting .bd-l.w1, .backdrop.waiting .bd-l.w2, .backdrop.waiting .bd-l.w3 { animation: none; }
  .backdrop .bd-l.swap, .backdrop .bd-l.enter { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* U182 / U183: the cloud comes in once and softly — every pill rises out of nothing one after another (--in, a stagger
   of ~45 ms), the ideas on load and the draft's tails as they come; a change first dissolves the shown pills (0.5 s),
   then the new ones come in the same way. Once shown, a later re-layout slides the pills to their places, never jumps. */
.nim-cloud { transition: opacity 0.5s ease; }
.nim-cloud.ready .nim-cl, .nim-tails .nim-cl { animation: nim-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--in, 0s) both, nim-drift var(--dur, 16s) ease-in-out var(--del, 0s) infinite; }
@keyframes nim-in { from { opacity: 0; scale: 0.86; filter: blur(4px); } }
.nim-cloud.settled .nim-cl { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease, border-color 0.2s ease, background-color 0.2s ease, max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), margin-left 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nim-tails { transition: opacity 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .nim-cloud.ready .nim-cl, .nim-tails .nim-cl { animation: none; }
}

/* U184: the suggestions' texts start on one line whatever the label's length — the label sits in a fixed column */
html.nim-b .sug-row { grid-template-columns: 124px minmax(0, 1fr); }
html.nim-b .sug-row .sug-label { justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { html.nim-b .sug-row { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; } }

/* ── U185 (operator 2026-10-09): the background's changes as weather, the pages' changes as a dissolve ──────────────── */
/* the darkening of the middle belongs to each picture, so it comes and goes WITH its picture (never on its own) */
.backdrop::after { background: none; }
.backdrop .bd-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--veil-t) / 0.5) 0%, rgb(var(--veil-t) / 0.32) 50%, rgb(var(--veil-t) / 0.08) 85%, rgb(var(--veil-t) / 0) 100%); }
body.page-bd:not(.at-home) .backdrop .bd-l::after { background: radial-gradient(ellipse 70% 72% at 50% 46%, rgb(var(--veil-t) / 0.74) 0%, rgb(var(--veil-t) / 0.55) 50%, rgb(var(--veil-t) / 0.15) 85%, rgb(var(--veil-t) / 0) 100%); }
/* clouds: whenever no picture is on (the first moments, while a new one is made), soft clouds in the brand's light drift
   over the dark — the screen is never a black void */
.bd-fog { position: absolute; inset: -12%; opacity: 0; transition: opacity 2.4s ease; filter: blur(28px); pointer-events: none; }
.backdrop.empty .bd-fog, .backdrop.waiting .bd-fog { opacity: 1; }
.bd-fog i { position: absolute; width: 58vmax; height: 34vmax; border-radius: 50%; opacity: 0.85; animation: fog-drift 22s ease-in-out infinite alternate; }
.bd-fog i:nth-child(1) { left: -6%; top: 4%; background: radial-gradient(closest-side, rgb(var(--lavender-t) / 0.32), rgb(var(--lavender-t) / 0) 72%); animation-duration: 24s; }
.bd-fog i:nth-child(2) { right: -10%; top: 12%; background: radial-gradient(closest-side, rgb(var(--warn-t) / 0.2), rgb(var(--warn-t) / 0) 72%); animation-duration: 28s; animation-delay: -6s; }
.bd-fog i:nth-child(3) { left: 18%; bottom: -6%; background: radial-gradient(closest-side, rgb(var(--violet-t) / 0.34), rgb(var(--violet-t) / 0) 72%); animation-duration: 21s; animation-delay: -11s; }
.bd-fog i:nth-child(4) { right: 6%; bottom: 8%; background: radial-gradient(closest-side, rgba(226, 232, 240, 0.12), rgba(226, 232, 240, 0) 72%); animation-duration: 30s; animation-delay: -3s; }
.bd-fog i:nth-child(5) { left: 30%; top: 26%; width: 44vmax; height: 26vmax; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0) 72%); animation-duration: 26s; animation-delay: -15s; }
@keyframes fog-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(7%, -5%) scale(1.18); } }
/* the picture on show, while the next is made: it dissolves IN PLACE over ~15 s — opening up a little and softening,
   its darkening fading with it — no sliding, so no edges or overlaps ever show */
.backdrop.waiting .bd-l.w0 { animation: bd-dissolve 15s cubic-bezier(0.3, 0.2, 0.4, 1) forwards; }
@keyframes bd-dissolve { from { opacity: var(--bd-op); transform: none; filter: none; } to { opacity: 0; transform: scale(1.1); filter: blur(10px); } }
.backdrop .bd-l.gone > img { transition: opacity 2.8s ease; }
.backdrop .bd-l.gone::after { opacity: 0; transition: opacity 2.8s ease; }
/* the new picture comes through the clouds in patches: five cloud-shaped openings grow one after another (~5 s) */
@property --bc1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --bc2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --bc3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --bc4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --bc5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.backdrop .bd-l.swap, .backdrop .bd-l.enter {
  animation: bd-patches 5s cubic-bezier(0.35, 0.2, 0.3, 1) both;
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 24% 30%, #000 var(--bc1), transparent calc(var(--bc1) + 26%)), radial-gradient(ellipse 58% 46% at 76% 24%, #000 var(--bc2), transparent calc(var(--bc2) + 26%)), radial-gradient(ellipse 62% 50% at 52% 60%, #000 var(--bc3), transparent calc(var(--bc3) + 26%)), radial-gradient(ellipse 56% 46% at 14% 80%, #000 var(--bc4), transparent calc(var(--bc4) + 26%)), radial-gradient(ellipse 58% 48% at 86% 78%, #000 var(--bc5), transparent calc(var(--bc5) + 26%));
  mask-image: radial-gradient(ellipse 60% 48% at 24% 30%, #000 var(--bc1), transparent calc(var(--bc1) + 26%)), radial-gradient(ellipse 58% 46% at 76% 24%, #000 var(--bc2), transparent calc(var(--bc2) + 26%)), radial-gradient(ellipse 62% 50% at 52% 60%, #000 var(--bc3), transparent calc(var(--bc3) + 26%)), radial-gradient(ellipse 56% 46% at 14% 80%, #000 var(--bc4), transparent calc(var(--bc4) + 26%)), radial-gradient(ellipse 58% 48% at 86% 78%, #000 var(--bc5), transparent calc(var(--bc5) + 26%));
}
@keyframes bd-patches {
  0% { opacity: 0; --bc1: -26%; --bc2: -26%; --bc3: -26%; --bc4: -26%; --bc5: -26%; }
  10% { opacity: var(--bd-op); }
  14% { --bc2: -26%; }
  26% { --bc3: -26%; }
  36% { --bc4: -26%; }
  46% { --bc5: -26%; }
  68% { --bc1: 120%; }
  76% { --bc2: 120%; }
  84% { --bc3: 120%; }
  92% { --bc4: 120%; }
  100% { opacity: var(--bd-op); --bc1: 120%; --bc2: 120%; --bc3: 120%; --bc4: 120%; --bc5: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-fog i { animation: none; }
  .backdrop.waiting .bd-l.w0 { animation: none; opacity: 0; }
}

/* the page itself: the shown content dissolves (0.24 s), the next one rises, its parts one after another */
#check { transition: opacity 0.24s ease, filter 0.24s ease, transform 0.24s ease; }
#check.pg-out { opacity: 0; filter: blur(6px); transform: translateY(6px); }
@keyframes pg-rise { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } }
body.pg-in #check > *, body.pg-in .journey > *, body.pg-in .idea-modal.home .im-card, body.pg-in .home-ideas .hi-card { animation: pg-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.pg-in .journey > *:nth-child(2) { animation-delay: 0.07s; }
body.pg-in .journey > *:nth-child(3) { animation-delay: 0.14s; }
body.pg-in .journey > *:nth-child(4) { animation-delay: 0.21s; }
body.pg-in .journey > *:nth-child(5) { animation-delay: 0.28s; }
body.pg-in .journey > *:nth-child(6) { animation-delay: 0.35s; }
body.pg-in .journey > *:nth-child(n+7) { animation-delay: 0.42s; }
body.pg-in .home-ideas .hi-card:nth-child(n+2) { animation-delay: 0.12s; }
body.pg-in .home-ideas .hi-card:nth-child(n+5) { animation-delay: 0.22s; }
/* the loader: one calm breathing light in the brand's two colours, in the middle of the screen, no words */
.page-loader { display: grid; place-items: center; min-height: calc(100svh - var(--top-h, 76px) - 48px); padding: 0; }
.pg-orb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgb(var(--warn-t) / 0.55), rgb(var(--violet-t) / 0.5) 52%, rgb(var(--violet-t) / 0) 72%); filter: blur(7px); animation: pg-breathe 2.6s ease-in-out infinite, pg-arrive 0.6s ease both; }
@keyframes pg-breathe { 0%, 100% { transform: scale(0.82); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 0.95; } }
@keyframes pg-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #check { transition: none; }
  body.pg-in #check > *, body.pg-in .journey > *, body.pg-in .idea-modal.home .im-card, body.pg-in .home-ideas .hi-card { animation: none; }
  .pg-orb { animation: none; }
}

/* U186: the suggestions under the field on a half see-through glass — the picture shows through, the rows stay legible */
@media (min-width: 641px) { html.nim-b .idea-modal .sug { background: rgb(var(--glass-t) / 0.52); } }
/* U185 fix: a dissolving picture keeps dissolving after the next one arrived (its own animation, not the wait's), and a
   replaced picture fades from where it is — its layer stays, only the picture inside and its darkening fade */
.backdrop .bd-l.w0 { animation: bd-dissolve 15s cubic-bezier(0.3, 0.2, 0.4, 1) forwards; }
.backdrop .bd-l.gone { opacity: var(--bd-op); }

/* ── U187 (operator 2026-10-09): everything slow and smooth, nothing in jerks. Only opacity and transform move (the
   compositor's cheap pair) — no animated blur, no animated mask, no live backdrop blur behind the pictures ── */
.backdrop::after, body.page-bd:not(.at-home) .backdrop::after { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
.backdrop .bd-l { will-change: opacity, transform; }
/* the picture on show dissolves in place over 15 s: a slow opening and fading, its darkening with it */
@keyframes bd-dissolve-soft { from { opacity: var(--bd-op); transform: none; } to { opacity: 0; transform: scale(1.08); } }
.backdrop .bd-l.w0, .backdrop.waiting .bd-l.w0 { animation: bd-dissolve-soft 15s cubic-bezier(0.3, 0.2, 0.4, 1) forwards; }
.backdrop .bd-l.swap, .backdrop .bd-l.enter { animation: none; -webkit-mask-image: none; mask-image: none; }
.bd-fog { transition: opacity 4s ease; will-change: opacity; }
/* the veil of clouds: it closes softly (1.4 s) when a picture has arrived, the picture is put in under it, then the
   clouds part one after another over ~8 s, drifting apart and thinning — the picture shows through piece by piece */
.bd-veil { position: absolute; inset: -12%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; filter: blur(22px); }
.bd-veil.close, .bd-veil.part { opacity: 1; }
.bd-veil i { position: absolute; width: 62vmax; height: 46vmax; border-radius: 50%; will-change: opacity, transform;
  background: radial-gradient(closest-side, rgba(18, 12, 36, 0.97), rgba(24, 14, 46, 0.9) 55%, rgba(36, 18, 70, 0) 100%); }
.bd-veil i:nth-child(1) { left: -14%; top: -12%; --vx: -10%; --vy: -8%; }
.bd-veil i:nth-child(2) { left: 30%; top: -18%; --vx: 0%; --vy: -12%; background: radial-gradient(closest-side, rgba(20, 13, 38, 0.97), rgba(40, 22, 60, 0.88) 55%, rgba(60, 40, 20, 0) 100%); }
.bd-veil i:nth-child(3) { right: -16%; top: -6%; --vx: 10%; --vy: -6%; }
.bd-veil i:nth-child(4) { left: -18%; top: 34%; --vx: -12%; --vy: 4%; background: radial-gradient(closest-side, rgba(18, 12, 36, 0.97), rgba(30, 16, 56, 0.9) 55%, rgba(30, 16, 56, 0) 100%); }
.bd-veil i:nth-child(5) { left: 22%; top: 28%; --vx: 0%; --vy: 6%; }
.bd-veil i:nth-child(6) { right: -14%; top: 40%; --vx: 12%; --vy: 6%; background: radial-gradient(closest-side, rgba(20, 13, 38, 0.97), rgba(46, 28, 40, 0.88) 55%, rgba(60, 40, 20, 0) 100%); }
.bd-veil i:nth-child(7) { left: 8%; bottom: -26%; --vx: -4%; --vy: 12%; }
.bd-veil.part i { animation: veil-part 6.8s cubic-bezier(0.45, 0.05, 0.3, 1) forwards; }
.bd-veil.part i:nth-child(5) { animation-delay: 0s; }
.bd-veil.part i:nth-child(2) { animation-delay: 0.6s; }
.bd-veil.part i:nth-child(4) { animation-delay: 1.1s; }
.bd-veil.part i:nth-child(6) { animation-delay: 1.6s; }
.bd-veil.part i:nth-child(1) { animation-delay: 2.1s; }
.bd-veil.part i:nth-child(3) { animation-delay: 2.6s; }
.bd-veil.part i:nth-child(7) { animation-delay: 3.1s; }
@keyframes veil-part { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--vx, 0), var(--vy, 0)) scale(1.3); } }
/* the cloud of ideas and the tails: each pill rises slowly (1.6 s, one after another, ~0.1 s apart); a change first
   dissolves the shown ones over 1.2 s */
.nim-cloud, .idea-modal.nim-typing .nim-cloud, .nim-tails { transition: opacity 1.2s ease; }
@keyframes nim-in-soft { from { opacity: 0; scale: 0.9; } }
.nim-cloud.ready .nim-cl, .nim-tails .nim-cl { animation: nim-in-soft 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) var(--in, 0s) both, nim-drift var(--dur, 16s) ease-in-out var(--del, 0s) infinite; }
/* the page's parts rise without a blur — slower and lighter */
@keyframes pg-rise-soft { from { opacity: 0; } } /* MP41 SUB-20: opacity only — no card flies up */
body.pg-in #check > *, body.pg-in .journey > *, body.pg-in .idea-modal.home .im-card, body.pg-in .home-ideas .hi-card { animation: pg-rise-soft 1s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
#check.pg-out { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .bd-veil.part i, .nim-cloud.ready .nim-cl, .nim-tails .nim-cl { animation: none; }
  /* the page's parts appear in place: no rise (the idea field's button moved under the pointer for a second) */
  body.pg-in #check > *, body.pg-in .journey > *, body.pg-in .idea-modal.home .im-card, body.pg-in .home-ideas .hi-card, #check .journey .rise { animation: none; }
  .bd-veil.part i { opacity: 0; }
}

/* U188: one pill at a time: it dissolves (1.2 s) and comes back slowly with its new idea (1.6 s) */
.nim-cloud .nim-cl.leaving { opacity: 0 !important; transition: opacity 1.2s ease !important; }
@keyframes nim-come { from { opacity: 0; scale: 0.9; } }
.nim-cloud.ready .nim-cl.coming { animation: nim-come 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) both, nim-drift var(--dur, 16s) ease-in-out var(--del, 0s) infinite; }

/* U189: leaving a page the clouds close over its picture from the top down (row by row, ~2.4 s), into the dark */
.bd-veil.cover { opacity: 1; transition: none; }
.bd-veil.cover i { animation: veil-cover 1.8s cubic-bezier(0.3, 0.2, 0.3, 1) both; }
.bd-veil.cover i:nth-child(1), .bd-veil.cover i:nth-child(2), .bd-veil.cover i:nth-child(3) { animation-delay: 0s; }
.bd-veil.cover i:nth-child(4), .bd-veil.cover i:nth-child(5), .bd-veil.cover i:nth-child(6) { animation-delay: 0.45s; }
.bd-veil.cover i:nth-child(7) { animation-delay: 0.9s; }
@keyframes veil-cover { from { opacity: 0; transform: translateY(-10%) scale(1.2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-veil.cover i { animation: none; } }

/* U190: the header's dark bar dissolves into the home (and comes back on a check page) over 1.4 s, never at once */
.topbar { transition: background-color 1.4s ease, border-color 1.4s ease, box-shadow 1.4s ease, -webkit-backdrop-filter 1.4s ease, backdrop-filter 1.4s ease; }
body.at-home .topbar { background: rgb(var(--ground-t) / 0); border-bottom: 1px solid transparent; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* U191: the veil's sixteen clouds sit on a jittered grid (set each time by the page); a picture comes through from the
   middle outwards at scattered points (--d), and goes under from the edges inwards (--dc) */
.bd-veil i, .bd-veil i:nth-child(n) { left: var(--x, 50%); top: var(--y, 50%); right: auto; bottom: auto; width: 44vmax; height: 34vmax; margin: -17vmax 0 0 -22vmax; }
.bd-veil.part i, .bd-veil.part i:nth-child(n) { animation: veil-part-scatter 4.6s cubic-bezier(0.45, 0.05, 0.3, 1) var(--d, 0s) forwards; }
@keyframes veil-part-scatter { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(var(--vs, 1.3)); } }
.bd-veil.cover i, .bd-veil.cover i:nth-child(n) { animation: veil-cover-scatter 1.8s cubic-bezier(0.3, 0.2, 0.3, 1) var(--dc, 0s) both; }
@keyframes veil-cover-scatter { from { opacity: 0; transform: scale(var(--vs, 1.3)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-veil.part i, .bd-veil.cover i { animation: none; } }

/* U194: a small ✕ in the field clears its text (only while there is text); the field's buttons take a column each */
html.nim-b .im-card .bar { grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
html.nim-b .nim-clear { align-self: end; margin-bottom: 9px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--ink-t) / 0.08); color: rgb(var(--ink-t) / 0.7); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
html.nim-b .nim-clear:hover { background: rgb(var(--ink-t) / 0.16); color: var(--text-hi); }
html.nim-b .nim-clear:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
html.nim-b .nim-clear[hidden] { display: none; }
html.nim-b .nim-clear .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 640px) {
  html.nim-b .im-card .bar { grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
  html.nim-b .nim-clear { align-self: center; margin-bottom: 0; }
}

/* U195: the pictures 10 % darker; on the home the middle as dark as it was (the field and the pills over a calm centre) */
.backdrop img { filter: blur(1px) saturate(1.1) brightness(0.85); }
body.at-home .backdrop .bd-l::after { background: radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--veil-t) / 0.68) 0%, rgb(var(--veil-t) / 0.5) 45%, rgb(var(--veil-t) / 0.16) 82%, rgb(var(--veil-t) / 0.04) 100%); }

/* U196 (operator 2026-10-09): the picture softer and darker, its edges darker too; no jerk when it comes in.
   The clouds and the veil are soft by their own gradients — a blur filter on their parent re-drew them every frame. */
.bd-fog, .bd-veil { filter: none; }
.backdrop img { filter: blur(4px) saturate(1.08) brightness(0.74); }
.backdrop .bd-l { transition: opacity 1.8s ease; }
.backdrop .bd-l::after, body.at-home .backdrop .bd-l::after {
  background:
    radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--veil-t) / 0.62) 0%, rgb(var(--veil-t) / 0.42) 45%, rgb(var(--veil-t) / 0) 80%),
    radial-gradient(ellipse 90% 88% at 50% 50%, rgb(var(--veil-t) / 0) 52%, rgb(var(--veil-t) / 0.45) 82%, rgb(var(--veil-t) / 0.72) 100%);
}
body.page-bd:not(.at-home) .backdrop .bd-l::after {
  background:
    radial-gradient(ellipse 70% 72% at 50% 46%, rgb(var(--veil-t) / 0.76) 0%, rgb(var(--veil-t) / 0.58) 50%, rgb(var(--veil-t) / 0.1) 85%),
    radial-gradient(ellipse 90% 88% at 50% 50%, rgb(var(--veil-t) / 0) 55%, rgb(var(--veil-t) / 0.45) 85%, rgb(var(--veil-t) / 0.7) 100%);
}

/* U197: the header never jumps between the home and a check page — its row widens or narrows (1.2 s), the switcher's
   button and «Новая идея» fade and fold away instead of vanishing (they keep their place while they fade) */
.top-row { transition: max-width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), padding 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
body.at-home .top-row { max-width: 100vw; }
.sw-button { transition: opacity 0.8s ease, visibility 0s linear 0s; }
body.at-home .sw-button { display: grid; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.8s ease, visibility 0s linear 0.8s; }
#new-idea { max-width: 240px; overflow: hidden; transition: opacity 0.8s ease, max-width 1s cubic-bezier(0.2, 0.7, 0.2, 1), padding 1s cubic-bezier(0.2, 0.7, 0.2, 1), margin 1s ease; }
body.at-home #new-idea { display: inline-flex; max-width: 0; padding-left: 0; padding-right: 0; margin: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .top-row, .sw-button, #new-idea { transition: none; } }

/* U198: a new picture shows through nine scattered points first (set per picture), each growing from nothing until
   they meet — small pieces first, the middle ones sooner; only the mask's nine radii move */
@property --r1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r6 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r7 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r8 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r9 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.backdrop .bd-l.pieces { -webkit-mask-image: radial-gradient(circle at var(--p1x, 50%) var(--p1y, 50%), #000 var(--r1), transparent calc(var(--r1) + 10%)), radial-gradient(circle at var(--p2x, 50%) var(--p2y, 50%), #000 var(--r2), transparent calc(var(--r2) + 10%)), radial-gradient(circle at var(--p3x, 50%) var(--p3y, 50%), #000 var(--r3), transparent calc(var(--r3) + 10%)), radial-gradient(circle at var(--p4x, 50%) var(--p4y, 50%), #000 var(--r4), transparent calc(var(--r4) + 10%)), radial-gradient(circle at var(--p5x, 50%) var(--p5y, 50%), #000 var(--r5), transparent calc(var(--r5) + 10%)), radial-gradient(circle at var(--p6x, 50%) var(--p6y, 50%), #000 var(--r6), transparent calc(var(--r6) + 10%)), radial-gradient(circle at var(--p7x, 50%) var(--p7y, 50%), #000 var(--r7), transparent calc(var(--r7) + 10%)), radial-gradient(circle at var(--p8x, 50%) var(--p8y, 50%), #000 var(--r8), transparent calc(var(--r8) + 10%)), radial-gradient(circle at var(--p9x, 50%) var(--p9y, 50%), #000 var(--r9), transparent calc(var(--r9) + 10%)); mask-image: radial-gradient(circle at var(--p1x, 50%) var(--p1y, 50%), #000 var(--r1), transparent calc(var(--r1) + 10%)), radial-gradient(circle at var(--p2x, 50%) var(--p2y, 50%), #000 var(--r2), transparent calc(var(--r2) + 10%)), radial-gradient(circle at var(--p3x, 50%) var(--p3y, 50%), #000 var(--r3), transparent calc(var(--r3) + 10%)), radial-gradient(circle at var(--p4x, 50%) var(--p4y, 50%), #000 var(--r4), transparent calc(var(--r4) + 10%)), radial-gradient(circle at var(--p5x, 50%) var(--p5y, 50%), #000 var(--r5), transparent calc(var(--r5) + 10%)), radial-gradient(circle at var(--p6x, 50%) var(--p6y, 50%), #000 var(--r6), transparent calc(var(--r6) + 10%)), radial-gradient(circle at var(--p7x, 50%) var(--p7y, 50%), #000 var(--r7), transparent calc(var(--r7) + 10%)), radial-gradient(circle at var(--p8x, 50%) var(--p8y, 50%), #000 var(--r8), transparent calc(var(--r8) + 10%)), radial-gradient(circle at var(--p9x, 50%) var(--p9y, 50%), #000 var(--r9), transparent calc(var(--r9) + 10%)); animation: bd-r1 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d1, 0s) both, bd-r2 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d2, 0s) both, bd-r3 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d3, 0s) both, bd-r4 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d4, 0s) both, bd-r5 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d5, 0s) both, bd-r6 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d6, 0s) both, bd-r7 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d7, 0s) both, bd-r8 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d8, 0s) both, bd-r9 6.4s cubic-bezier(0.4, 0.05, 0.3, 1) var(--d9, 0s) both; }
@keyframes bd-r1 { from { --r1: -12%; } to { --r1: 150%; } }
@keyframes bd-r2 { from { --r2: -12%; } to { --r2: 150%; } }
@keyframes bd-r3 { from { --r3: -12%; } to { --r3: 150%; } }
@keyframes bd-r4 { from { --r4: -12%; } to { --r4: 150%; } }
@keyframes bd-r5 { from { --r5: -12%; } to { --r5: 150%; } }
@keyframes bd-r6 { from { --r6: -12%; } to { --r6: 150%; } }
@keyframes bd-r7 { from { --r7: -12%; } to { --r7: 150%; } }
@keyframes bd-r8 { from { --r8: -12%; } to { --r8: 150%; } }
@keyframes bd-r9 { from { --r9: -12%; } to { --r9: 150%; } }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-l.pieces { animation: none; -webkit-mask-image: none; mask-image: none; } }

/* U198 tuning: softer, cloudier edges to each piece (a wide feather), a slower start, a longer spread — no hard circle */
.backdrop .bd-l.pieces { -webkit-mask-image: radial-gradient(circle at var(--p1x, 50%) var(--p1y, 50%), #000 var(--r1), transparent calc(var(--r1) + 24%)), radial-gradient(circle at var(--p2x, 50%) var(--p2y, 50%), #000 var(--r2), transparent calc(var(--r2) + 24%)), radial-gradient(circle at var(--p3x, 50%) var(--p3y, 50%), #000 var(--r3), transparent calc(var(--r3) + 24%)), radial-gradient(circle at var(--p4x, 50%) var(--p4y, 50%), #000 var(--r4), transparent calc(var(--r4) + 24%)), radial-gradient(circle at var(--p5x, 50%) var(--p5y, 50%), #000 var(--r5), transparent calc(var(--r5) + 24%)), radial-gradient(circle at var(--p6x, 50%) var(--p6y, 50%), #000 var(--r6), transparent calc(var(--r6) + 24%)), radial-gradient(circle at var(--p7x, 50%) var(--p7y, 50%), #000 var(--r7), transparent calc(var(--r7) + 24%)), radial-gradient(circle at var(--p8x, 50%) var(--p8y, 50%), #000 var(--r8), transparent calc(var(--r8) + 24%)), radial-gradient(circle at var(--p9x, 50%) var(--p9y, 50%), #000 var(--r9), transparent calc(var(--r9) + 24%)); mask-image: radial-gradient(circle at var(--p1x, 50%) var(--p1y, 50%), #000 var(--r1), transparent calc(var(--r1) + 24%)), radial-gradient(circle at var(--p2x, 50%) var(--p2y, 50%), #000 var(--r2), transparent calc(var(--r2) + 24%)), radial-gradient(circle at var(--p3x, 50%) var(--p3y, 50%), #000 var(--r3), transparent calc(var(--r3) + 24%)), radial-gradient(circle at var(--p4x, 50%) var(--p4y, 50%), #000 var(--r4), transparent calc(var(--r4) + 24%)), radial-gradient(circle at var(--p5x, 50%) var(--p5y, 50%), #000 var(--r5), transparent calc(var(--r5) + 24%)), radial-gradient(circle at var(--p6x, 50%) var(--p6y, 50%), #000 var(--r6), transparent calc(var(--r6) + 24%)), radial-gradient(circle at var(--p7x, 50%) var(--p7y, 50%), #000 var(--r7), transparent calc(var(--r7) + 24%)), radial-gradient(circle at var(--p8x, 50%) var(--p8y, 50%), #000 var(--r8), transparent calc(var(--r8) + 24%)), radial-gradient(circle at var(--p9x, 50%) var(--p9y, 50%), #000 var(--r9), transparent calc(var(--r9) + 24%)); animation: bd-r1s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d1, 0s) both, bd-r2s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d2, 0s) both, bd-r3s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d3, 0s) both, bd-r4s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d4, 0s) both, bd-r5s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d5, 0s) both, bd-r6s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d6, 0s) both, bd-r7s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d7, 0s) both, bd-r8s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d8, 0s) both, bd-r9s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d9, 0s) both; }
@keyframes bd-r1s { from { --r1: -26%; } to { --r1: 135%; } }
@keyframes bd-r2s { from { --r2: -26%; } to { --r2: 135%; } }
@keyframes bd-r3s { from { --r3: -26%; } to { --r3: 135%; } }
@keyframes bd-r4s { from { --r4: -26%; } to { --r4: 135%; } }
@keyframes bd-r5s { from { --r5: -26%; } to { --r5: 135%; } }
@keyframes bd-r6s { from { --r6: -26%; } to { --r6: 135%; } }
@keyframes bd-r7s { from { --r7: -26%; } to { --r7: 135%; } }
@keyframes bd-r8s { from { --r8: -26%; } to { --r8: 135%; } }
@keyframes bd-r9s { from { --r9: -26%; } to { --r9: 135%; } }
/* the tuned pieces above come after the reduced-motion rule for `.pieces`: under reduced motion no mask, no growth (a plain fade) */
@media (prefers-reduced-motion: reduce) { .backdrop .bd-l.pieces { animation: none; -webkit-mask-image: none; mask-image: none; } }

/* MP30 SUB-4: a project's material in the panel (VIEWS.material) — its picture, gallery, clip or article, its two ways out */
.mt-pic { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--hair); margin: 10px 0; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mt-grid .mt-pic { margin: 0; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mt-clip { display: block; width: 100%; max-height: 70vh; border-radius: var(--radius); background: #000; margin: 10px 0; }
.mt-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.mt-acts .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.mt-link { margin: 8px 0; font-size: 16px; }
.mt-card { margin: 8px 0; }
.mt-article { padding-top: 6px; }

/* U199 (operator 2026-10-09): the agent's chat opens as a floating glass card — a stronger blur of its own and a little
   darker than the page, rounded corners, a small gap from the screen's left edge, the header and the bottom; the page
   moves over by the gap too. The list fades under the floating header by its mask (no black gradient). */
@media (min-width: 1024px) {
  .chat, body.at-home .chat, body.page-bd .chat {
    left: 12px; top: calc(var(--top-h, 76px) + 6px); bottom: 12px; border-radius: 22px; overflow: hidden;
    background: rgb(var(--pane-t) / 0.58); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1);
    border: 1px solid rgb(var(--ink-t) / 0.07); box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.45);
  }
  body.chat-open main { margin-left: calc(var(--lw) + 12px); }
  .ch-grip { right: 0; width: 8px; }
}
@media (max-width: 1023px) {
  .chat, body.at-home .chat, body.page-bd .chat { background: rgb(var(--pane-t) / 0.62); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1); }
}
.chat .ch-top::before { display: none; }
.chat .ch-list { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 28px), transparent 100%); }

/* U200: no header flash on load — until the first route the bar and the switcher are not drawn; the first route shows
   them in their own state without a transition (front.js `unboot`) */
body.boot .topbar { background: none; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.boot .sw-button, body.boot #new-idea { visibility: hidden; }
body.boot .topbar, body.boot .topbar *, body.no-tr .topbar, body.no-tr .topbar * { transition: none !important; }

/* U201 (operator 2026-10-09): «Новая идея» in the header is an outline — a border, no filled ground */
.topbar .new-idea { background: transparent; color: #e7dcff; border: 1.5px solid rgba(159, 122, 234, 0.75); box-shadow: none; }
.topbar .new-idea:hover { background: rgba(159, 122, 234, 0.12); border-color: #b794f6; color: #fff; }

/* U202 (operator 2026-10-09): out of focus a field keeps its focused frame's colour, only slightly see-through — the
   home's idea field (its turning frame at 0.75 instead of 0.4) and the chat's composer (its violet at 75 %, not grey) */
html.nim-b .im-card .bar::before { opacity: 0.75; }
html.nim-b .im-card .bar:focus-within::before { opacity: 1; }
.ch-composer { border-color: rgba(92, 34, 195, 0.75); }
.ch-composer:focus-within { border-color: var(--v7); }

/* U204 (operator 2026-10-09): inside an idea the header's black bar floats — a 12 px gap on both sides, its lower
   corners rounded, a hairline around; on the home it is the full-width see-through row as before */
@media (min-width: 641px) {
  .topbar { margin: 0 12px; border: 1px solid transparent; border-top: 0; border-radius: 0 0 18px 18px; transition: background-color 1.4s ease, border-color 1.4s ease, box-shadow 1.4s ease, -webkit-backdrop-filter 1.4s ease, backdrop-filter 1.4s ease, margin 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  body:not(.at-home) .topbar { border-color: var(--hair); }
  body.at-home .topbar { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* U206: a picture at rest unseen never shows again, whatever else its layer carries (`gone` lit a `past` one up) */
.backdrop .bd-l.past, .backdrop .bd-l.past.gone, .backdrop .bd-l.past.w0 { opacity: 0; animation: none; transition: none; }

/* U208 (operator 2026-10-09): the ways to grow the idea load as skeletons only — no spinner in the rows or the heading.
   The bars sit where a row's label and text will be; while a new round comes the old rows stay, dimmed, under a soft
   sweep of light (opacity and transform only) */
html.nim-b .sug-skel { grid-template-columns: 124px minmax(0, 1fr); align-items: start; padding: 12px; border-radius: 10px; }
.sug-skel .bars.lbl i { width: 74%; }
.sug-list { position: relative; }
.sug-list.dim::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 12px; background: linear-gradient(100deg, transparent 35%, rgb(var(--ink-t) / 0.07) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat; animation: sug-sweep 1.8s linear infinite; }
@keyframes sug-sweep { to { background-position: -50% 0; } }
@media (max-width: 640px) { html.nim-b .sug-skel { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sug-list.dim::after { animation: none; } }

/* U209 (operator 2026-10-09): the home's header stays pinned when the page scrolls — the chat card hangs under it, so a
   header scrolling away left the chat floating under an empty strip. At the top it has no ground (as asked); once the
   page moves under it, it takes the floating dark bar of an idea's page */
body.at-home .topbar { position: sticky; top: 0; }
body.at-home.scrolled .topbar { background: rgb(var(--ground-t) / 0.72); border-color: var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 641px) { body.at-home.scrolled .topbar { margin: 0 12px; } }
/* U205 (operator 2026-10-09): on a phone the files and the bell are two buttons again (each opens its own sheet), so the
   header's row makes room: the switcher is its ring and chevron below 441 px (the name is in its label and on the page),
   the row tighter below 380 px, and below 350 px the switcher is its ring alone */
@media (max-width: 440px) {
  .sw-button:not(.listing) .sw-idea { display: none; }
  .sw-button:not(.listing) { width: max-content; margin-inline: auto; grid-template-columns: 28px auto; }
}
@media (max-width: 379px) {
  .top-row, body.at-home .top-row { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .top-actions, .hub { gap: 3px; }
  .new-idea { width: 40px; height: 40px; }
}
@media (max-width: 349px) {
  .sw-button:not(.listing) .sw-chev { display: none; }
  .sw-button:not(.listing) { grid-template-columns: 28px; padding: 5px; }
}

/* U216: one loader per circle — the green ring sits inside the mark, nothing spins around it */
.run-mk .run-spin { width: 14px; height: 14px; background: none; display: block; }
/* U219: a file being made is drawn by a running frame — a slow turning gradient around its chip and its row's mark */
/* MP41 SUB-20 (APP-20): U219's turning frame on a file being made is gone — a tag is dim until its step is done (.tag-off) */
/* U220: the deep research's (and the concept's) final circle — a black ground with a green frame and a green icon,
   as a concept step in progress, instead of a green disc */
.stage-final .stage-mk.run.st-done { background: var(--bg); border: 1.5px solid var(--good); color: var(--good); }
.stage-final .stage-mk.run.st-done .ico { stroke: var(--good); }
/* U223: the project's final card at the end of the line — a darker, blurred ground under it, the picture stays away */
.goal-card { background: radial-gradient(80% 60% at 0% 0%, rgb(var(--yellow-t) / 0.1), transparent 70%), rgb(var(--pane-t) / 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
/* U214: under the AI's heading, the person's own words with a small label */
.understood.own-words { display: grid; gap: 2px; }
.understood.own-words .ow-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
/* MP22 SUB-19 (2026-10-22): the idea's branch links under its heading — «Ответвление от», «Что меняем», «Ветка:» */
.ib-links { display: grid; gap: 3px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ib-row { overflow-wrap: anywhere; }
.ib-l { color: var(--faint); }
.ib-name { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ib-name:hover { text-decoration-color: currentColor; }
/* U215 (operator 2026-10-09): the line is thick and filled down to the last step passed or in work (front.js sets
   --done-h), thin and dashed ahead — the path not walked yet. One element, two backgrounds: no stacking change */
.journey::before { width: 3px; margin-left: -1px; background:
  linear-gradient(var(--purple-text), var(--purple)) top center / 3px var(--done-h, 0px) no-repeat,
  repeating-linear-gradient(to bottom, rgb(var(--lilac-t) / 0.42) 0 5px, transparent 5px 10px) center / 1px 100% no-repeat;
  border-radius: 2px; transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .journey::before { transition: none; } }

/* U210 (operator 2026-10-09): the home's picture is a still ring of the newest ideas' pictures around the field, the
   middle dark — no slideshow. Each tile turned a little and still (U234: no floating, no growing in — they only dissolve
   in and out); the ring fades out while a draft's own picture comes */
.backdrop .bd-ring { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.backdrop .bd-ring.on { opacity: 1; }
.backdrop .bd-ring::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 44% 42% at 50% 50%, rgb(var(--veil-t) / 0.95) 0%, rgb(var(--veil-t) / 0.84) 45%, rgb(var(--veil-t) / 0.4) 78%, rgb(var(--veil-t) / 0.1) 100%); }
.backdrop .bd-tile { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: clamp(120px, 15vmin, 220px); aspect-ratio: 1; opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r)); transition: opacity 1.4s ease var(--d); }
.backdrop .bd-ring.on .bd-tile { opacity: 0.92; }
.backdrop .bd-tile-in { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgb(var(--shade-t) / 0.55); }
.backdrop .bd-tile img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(1.05); transform: none; }
@media (max-width: 640px) { .backdrop .bd-tile { width: 24vw; } }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-tile, .backdrop .bd-ring { transition: none; } }
/* U211: an idea's page keeps the home's darkening — the same picture does not darken on the way in */
body.page-bd:not(.at-home) .backdrop .bd-l { --bd-op: 0.9; }
body.page-bd:not(.at-home) .backdrop .bd-l::after {
  background:
    radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--veil-t) / 0.62) 0%, rgb(var(--veil-t) / 0.42) 45%, rgb(var(--veil-t) / 0) 80%),
    radial-gradient(ellipse 90% 88% at 50% 50%, rgb(var(--veil-t) / 0) 52%, rgb(var(--veil-t) / 0.45) 82%, rgb(var(--veil-t) / 0.72) 100%);
}
/* U218 (operator 2026-10-09): picking one of the concept's ways — the picked way lights up and comes forward, the
   others and «свой вариант» dissolve (opacity and transform only), then the fork folds into the picked way's card */
.fk-ways.picking .fka-row.way:not(.picked), .fk-ways.picking .fka-row.own, .fk-ways.picking .fka-svg { opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fk-ways.picking .fka-row.picked .fka-body { transform: scale(1.02); box-shadow: 0 0 0 1.5px var(--yellow), 0 18px 50px rgb(var(--yellow-t) / 0.14); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease; }
.fk-ways.picking .gate-choose { opacity: 0; transition: opacity 0.4s ease; }
.node.way-chosen { animation: way-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.way-chosen .way-body.chosen { border: 1px solid rgb(var(--yellow-t) / 0.55); border-radius: 18px; padding: 12px; background: rgb(var(--yellow-t) / 0.05); }
.way-chosen .way-label { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 2px; }
@keyframes way-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .node.way-chosen { animation: none; } }
/* U210: the ring's pictures are not the old single-picture <img> (hidden until `.on`) — they always show in their tile */
.backdrop .bd-tile img { opacity: 1; animation: none; -webkit-mask-image: none; mask-image: none; }
/* U227: the dictation in the chat's composer — the same microphone, beside the send button */
.ch-foot .ch-mic { margin-left: auto; width: 40px; height: 40px; flex: none; }
.ch-foot .ch-mic + .ch-send { margin-left: 0; }
/* U228 (operator 2026-10-09): a fork's roads are the path not walked yet — dashed and as thin as the line's own dashes,
   every road the same size (the green «С нами» too); the line steps aside under a road (front.js --spine-mask) */
.fka-svg .p-us, .fka-svg .p-diy, .fka-svg .p-alt, .fka-svg .p-way, .fka-svg .p-own { stroke-width: 1.5; stroke-dasharray: 5 5; }
.journey::before { -webkit-mask-image: var(--spine-mask, none); mask-image: var(--spine-mask, none); background:
  linear-gradient(var(--purple-text), var(--purple)) top center / 3px var(--done-h, 0px) no-repeat,
  repeating-linear-gradient(to bottom, rgb(var(--lilac-t) / 0.45) 0 5px, transparent 5px 10px) center / 1.5px 100% no-repeat; }

/* U229 (operator 2026-10-09): a page opening is its line's skeleton — the idea, the check's ring, the stages — shimmering
   quietly until the check arrives (no black screen, no spinner); a concept run that comes after its check holds three
   skeleton steps, then rises into their place */
.sk { display: block; border-radius: 7px; background: linear-gradient(90deg, rgb(var(--ink-t) / 0.05), rgb(var(--ink-t) / 0.12), rgb(var(--ink-t) / 0.05)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-bars { display: grid; gap: 9px; align-content: start; min-width: 0; }
.sk-bars i { height: 11px; }
.sk-bars .w30 { width: 30%; } .sk-bars .w38 { width: 38%; } .sk-bars .w54 { width: 54%; } .sk-bars .w62 { width: 62%; }
.sk-bars .w72 { width: 72%; } .sk-bars .w80 { width: 80%; } .sk-bars .w86 { width: 86%; }
.sk-bars.sk-h1 { gap: 12px; margin: 6px 0 14px; }
.sk-bars.sk-h1 i { height: 26px; border-radius: 9px; }
.skel-node .sk-bars { padding-top: 6px; }
.sk-ring { width: 88px; height: 88px; border-radius: 50%; }
.sk-dot { width: 30px; height: 30px; border-radius: 50%; margin: 6px auto 0; }
.node.s1.skel-node { padding: 6px 0 22px; }
@media (max-width: 640px) { .sk-ring { width: 48px; height: 48px; } }
.concept-zone.run-in, .journey > .run-in { animation: pg-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.journey > .run-in ~ .run-in { animation-delay: 0.1s; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } .concept-zone.run-in, .journey > .run-in { animation: none; } }

/* U230: the stop button of the dictation starts the change — the cloud's tails fade while the new ones are asked */
.nim-cloud.ready.waiting, .idea-modal.nim-typing .nim-cloud.ready.waiting, .nim-tails.waiting { opacity: 0.06; filter: blur(3px); transition: opacity 0.6s ease, filter 0.6s ease; }

/* U231 (operator 2026-10-09): with words in the field the picture darkens round its edges, the middle stays */
.bd-vig { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
  background: radial-gradient(ellipse 70% 66% at 50% 46%, rgb(var(--veil-t) / 0) 38%, rgb(var(--veil-t) / 0.5) 68%, rgb(var(--veil-t) / 0.88) 100%); }
body.at-home.drafting .bd-vig { opacity: 1; }
@media (max-width: 640px) { .bd-vig { background: radial-gradient(ellipse 90% 70% at 50% 40%, rgb(var(--veil-t) / 0) 34%, rgb(var(--veil-t) / 0.55) 70%, rgb(var(--veil-t) / 0.9) 100%); } }
@media (prefers-reduced-motion: reduce) { .bd-vig { transition: none; } }

/* U233 (operator 2026-10-09): the home's pictures are formless clouds — the union of five soft blobs of random place and
   size (front.js cloudShape), every edge dissolving to nothing; no frame, no corner, no shadow */
.backdrop .bd-tile.cloud { width: clamp(220px, 31vmin, 400px); aspect-ratio: var(--ar, 1.2); }
.backdrop .bd-tile.cloud .bd-tile-in, .backdrop .bd-card.cloud { border-radius: 0; overflow: visible; box-shadow: none;
  -webkit-mask-image:
    radial-gradient(ellipse var(--rx1) var(--ry1) at var(--cx1) var(--cy1), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx2) var(--ry2) at var(--cx2) var(--cy2), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx3) var(--ry3) at var(--cx3) var(--cy3), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx4) var(--ry4) at var(--cx4) var(--cy4), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx5) var(--ry5) at var(--cx5) var(--cy5), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
  mask-image:
    radial-gradient(ellipse var(--rx1) var(--ry1) at var(--cx1) var(--cy1), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.35) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx2) var(--ry2) at var(--cx2) var(--cy2), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx3) var(--ry3) at var(--cx3) var(--cy3), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx4) var(--ry4) at var(--cx4) var(--cy4), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%),
    radial-gradient(ellipse var(--rx5) var(--ry5) at var(--cx5) var(--cy5), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.3) 65%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.backdrop .bd-ring.on .bd-tile.cloud { opacity: 1; }
@media (max-width: 640px) { .backdrop .bd-tile.cloud { width: 34vw; } }

/* U235 (operator 2026-10-09): the home's field in focus — the pictures and the ideas' pills step a little apart (the
   pills along their own outward line `--ox/--oy`, the pictures along their place on the ring); the tails stay by the field */
.idea-modal.home.nim-focus .nim-cloud:not(.tails) .nim-cl { transform: translate(calc(var(--ox, 0px) * 1.75), calc(var(--oy, 0px) * 1.75)) scale(var(--s, 1)); }
.idea-modal.home.nim-focus.nim-typing .nim-cloud:not(.tails) .nim-cl { transform: translate(calc(var(--ox, 0px) * 1.75), calc(var(--oy, 0px) * 1.75)) scale(calc(var(--s, 1) * 0.94)); }
.backdrop .bd-tile { transition: opacity 1.4s ease var(--d), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
body.at-home.idea-focus .backdrop .bd-tile { translate: calc(var(--x) * 0.08) calc(var(--y) * 0.08); }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-tile { transition: none; } }
/* U226 (operator 2026-10-09): the home's themes — the person's ideas grouped by meaning, each a stack of its ideas'
   pictures around the field (2–4 overlapping clouds, the newest in front — U233; still — U234; unnamed — U237), the
   middle dark; they only dissolve in and out, a new set comes in as the old one fades. The ring (U210)
   stays the fallback */
.backdrop .bd-stacks { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.backdrop .bd-stacks.on { opacity: 1; }
.backdrop .bd-stacks::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 44% 42% at 50% 50%, rgb(var(--veil-t) / 0.95) 0%, rgb(var(--veil-t) / 0.82) 45%, rgb(var(--veil-t) / 0.36) 78%, rgb(var(--veil-t) / 0.08) 100%); }
.backdrop .bd-stack { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: clamp(120px, calc(var(--sz) * 1.4vmin), 270px); aspect-ratio: 1; opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r)); transition: opacity 1.4s ease var(--d), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backdrop .bd-stacks.on .bd-stack { opacity: 1; }
.backdrop .bd-stack-in { position: absolute; inset: 0; }
.backdrop .bd-card { position: absolute; inset: 0; transform-origin: 50% 100%; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); }
.backdrop .bd-card.ghost { background: linear-gradient(160deg, rgb(var(--violet-t) / 0.32), rgba(20, 14, 34, 0.9) 70%); }
.backdrop .bd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: brightness(0.84) saturate(1.05); transform: none; transition: none; animation: none;
  -webkit-mask-image: none; mask-image: none; }
.backdrop .bd-card:not(:last-of-type) img { filter: brightness(0.58) saturate(0.95); }
/* a pill of the theme under the pointer lights its stack up: its pictures brighten (nothing moves) */
.backdrop .bd-stacks.settled .bd-stack { transition: opacity 1.4s ease, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backdrop .bd-card img { transition: filter 0.4s ease; }
.backdrop .bd-stack.lit .bd-card img { filter: brightness(1.05) saturate(1.1); }
/* U235: the field in focus — the stacks step a little apart too */
body.at-home.idea-focus .backdrop .bd-stack { translate: calc(var(--x) * 0.08) calc(var(--y) * 0.08); }
/* a phone: the stacks stand by the edges behind the page, unnamed; the strip under the field names the themes — a column
   each, its newest picture and name over two of its ideas */
@media (max-width: 640px) {
  .backdrop .bd-stacks.on .bd-stack { opacity: 0.6; }
  .nim-tails.ideas.themed { grid-template-rows: auto repeat(2, auto); }
  .nim-th { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 0; font: 500 12px/1.3 var(--font-body); letter-spacing: 0.02em; color: rgb(var(--ink-t) / 0.74); white-space: nowrap; }
  .nim-th img { flex: none; width: 24px; height: 24px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--ink-t) / 0.1); }
  .nim-th b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .backdrop .bd-stack, .backdrop .bd-stacks, .backdrop .bd-stacks.settled .bd-stack { transition: none; } }
/* U232 (operator 2026-10-09): the notice cards — errors and the check limit — a small stack of dark glass cards under the
   header, top-right (top, full width, on a phone), the newest on top; each comes and goes as a slow dissolve (opacity and
   a few pixels, never a flight). In the chat, what Fox's tools did is a card of its own under its reply; the home's
   bar glows once when the agent writes a wording into it */
.toasts { position: fixed; z-index: 260; top: calc(var(--top-h, 64px) + 12px); right: 16px; width: min(360px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 8px 12px 12px; border: 1px solid var(--ga3); border-radius: 14px;
  background: rgb(var(--glass-t) / 0.86); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 18px 50px rgb(var(--shade-t) / 0.55);
  color: var(--g12); font: 400 14px/1.4 var(--font-body); opacity: 0; transform: translateY(-6px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.toast-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.toast-ico .ico { width: 17px; height: 17px; }
.toast.t-error .toast-ico { color: var(--bad); background: rgb(var(--bad-t) / 0.12); }
.toast.t-limit .toast-ico { color: var(--yellow); background: var(--yellow-tint); }
.toast-b { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.toast-h { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--text-hi); }
.toast-t { color: var(--g11); font-size: 13.5px; overflow-wrap: anywhere; }
.toast.t-limit .toast-t { font-variant-numeric: tabular-nums; }
.toast-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ga11); cursor: pointer; }
.toast-x .ico { width: 15px; height: 15px; }
.toast-x:hover, .toast-x:focus-visible { background: var(--ga3); color: var(--text-hi); }
@media (max-width: 640px) { .toasts { left: 12px; right: 12px; width: auto; top: calc(var(--top-h, 56px) + 8px); } }
@media (max-width: 1023px) { body.chat-open .toasts { top: calc(84px + var(--sa-t, 0px)); } }
.ch-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; align-self: flex-start; max-width: 85%; padding: 10px 12px; border: 1px solid rgb(var(--yellow-t) / 0.28); border-radius: 12px;
  background: rgb(var(--yellow-t) / 0.06); font-size: 14px; line-height: 1.4; }
.ch-act-ico { color: var(--yellow); margin-top: 1px; }
.ch-act-ico .ico { width: 16px; height: 16px; }
.ch-act-b { display: grid; gap: 2px; min-width: 0; }
.ch-act-b b { font-weight: 600; color: var(--g12); }
.ch-act-b span { color: var(--g11); overflow-wrap: anywhere; }
.ch-act-b a { justify-self: start; color: var(--yellow); text-decoration: none; }
.ch-act-b a:hover, .ch-act-b a:focus-visible { text-decoration: underline; }
.ch-act.ch-new { animation: ch-in 0.28s ease-out; }
html.nim-b .im-card .bar.agent-set { animation: agent-set 1.8s ease-out; }
@keyframes agent-set { from { box-shadow: 0 0 0 1.5px rgb(var(--yellow-t) / 0.85), 0 24px 70px rgb(var(--shade-t) / 0.55); } to { box-shadow: 0 0 0 1.5px rgb(var(--yellow-t) / 0), 0 24px 70px rgb(var(--shade-t) / 0.55); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { transform: none; transition: opacity 0.2s linear; } .ch-act.ch-new, html.nim-b .im-card .bar.agent-set { animation: none; } }

/* U239 (operator 2026-10-09): a hovered idea in the home's cloud opens to its whole words — over several lines when long
   (front.js growPill: at most PILL_OPEN_W wide) */
.nim-cl.grow, .nim-cl.grow > span { white-space: normal; overflow: visible; text-overflow: clip; }
.nim-cl.grow { border-radius: 16px; line-height: 1.35; }

/* U240 (operator 2026-10-09): the home's pictures come in one by one, in no order, slowly (each its own moment over the
   first ~6 s, ~5 s to come through); going they fade quickly, all together */
.backdrop .bd-ring .bd-tile { transition: opacity 1.2s ease, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backdrop .bd-ring.on .bd-tile { transition: opacity 5s ease var(--d), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backdrop .bd-stack, .backdrop .bd-stacks.settled .bd-stack { transition: opacity 0.6s ease, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.backdrop .bd-card { opacity: 0; transition: opacity 1.2s ease; }
.backdrop .bd-stacks.on .bd-card { opacity: 1; transition: opacity 5s ease var(--cd, 0s); }

/* U241 (operator 2026-10-09): the home's pictures twice as big — U243, U245: then smaller twice (×1.3 of the U233 size) */
.backdrop .bd-tile.cloud { width: clamp(286px, 40.3vmin, 520px); }
.backdrop .bd-stack { width: clamp(156px, calc(var(--sz) * 1.82vmin), 351px); }
@media (max-width: 640px) { .backdrop .bd-tile.cloud { width: 44.2vw; } }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-ring .bd-tile, .backdrop .bd-ring.on .bd-tile, .backdrop .bd-card, .backdrop .bd-stacks.on .bd-card { transition: none; } }

/* U244 (operator 2026-10-09): the home's pictures a little darker */
.backdrop .bd-tile img { filter: brightness(0.68) saturate(1.02); }
.backdrop .bd-card img { filter: brightness(0.7) saturate(1.02); }
.backdrop .bd-card:not(:last-of-type) img { filter: brightness(0.5) saturate(0.95); }
.backdrop .bd-stack.lit .bd-card img { filter: brightness(0.9) saturate(1.08); }

/* U246 (operator 2026-10-09): the home's idea cards sit on a darker glass — the words never melt into the pictures */
.hi-card { background: rgba(8, 6, 14, 0.74); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); }
.hi-card:hover, .hi-card:focus-visible { background: rgba(28, 18, 50, 0.82); }

/* U247 (operator 2026-10-09): on the home the pictures dissolve as the page goes down to the ideas (front.js homeFade) */
body.at-home .backdrop { opacity: var(--home-fade, 1); }
/* U225 (operator 2026-10-09): the line holds at every width. Its marks stay centred on the spine (--spine / --mk), its
   text takes the width it has — no word broken into a narrow column, no chip cut in half, no label past its tile — and
   its blocks adapt to their OWN width: a line narrowed by the file panel or the chat at a desktop width, a tablet, a
   phone — not only to the screen's. Layout only; nothing here moves (the motion rules stand). */

/* one text column down the whole line: the idea, the check's head and every node start at --mk-gap from the mark column */
.origin, .s1-grid { gap: 0 var(--mk-gap); }
.lab-data > summary { margin-left: calc(var(--spine) + 18px); }
@media (max-width: 640px) { .lab-data > summary { margin-left: calc(var(--spine) + 12px); } }

/* the blocks that size by their own width: a section's body, a finished stage's result, the project's closing block, a
   call to action (each a container; the nearest one answers the queries below) */
.sec-body, .cf-res, .pk-close-main, .cta-wrap { container-type: inline-size; }

/* the research's eight tiles: four in a row on a wide line, two on a narrow one, one where two would break the words */
@container (max-width: 640px) { .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 330px) { :is(#check, #ch-list) .res-row.rc-tile { padding: 10px 8px 12px; } .rc-t { font-size: 12.5px; } }
@container (max-width: 270px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } :is(#check, #ch-list) .res-row.rc-tile { padding: 10px 12px 12px; } }
.rc-l { flex-wrap: nowrap; min-width: 0; }
/* a tile's name is one line, never broken inside a word (nor at «Юнит-»): one too long for the tile ends in «…», the
   whole name its title */
.rc-l .rc-ln, .ch-act.tl-k .rc-l .rc-ln { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; }
/* a tile's figure is a figure: three lines at most (the report it opens has the rest) */
.rc-fig { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the concept's card: the cover above the words once the line is narrow (beside the panel it took the words' column) */
@container (max-width: 560px) {
  .prod { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .prod-cover:not(.mono) { width: 100%; }
  .prod-name { font-size: 20px; }
}

/* a section's content by the section's width (the same steps the screen's media rules make on a phone) */
.pos-line { grid-template-columns: minmax(max-content, 112px) minmax(0, 1fr); }
@container (max-width: 820px) {
  .rival { grid-template-columns: 28px minmax(0, 1fr); padding: 14px; }
  .rival .rank { font-size: 19px; }
  .rival .params { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--hair); }
}
@container (max-width: 620px) {
  .funnel { grid-template-columns: minmax(0, 1fr); }
  .funnel svg { max-width: 280px; margin: 0 auto; }
  .risk-wrap { grid-template-columns: minmax(0, 1fr); }
  .matrix { max-width: 280px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .unit-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 600px) {
  .risk { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .to { transform: rotate(90deg); }
}
@container (max-width: 540px) {
  .pos-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pos-line { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .queries li { grid-template-columns: 26px minmax(0, 1fr) auto; border-radius: 16px; }
  .queries .it { grid-column: 2 / -1; justify-self: start; }
  .answers li { grid-template-columns: minmax(0, 1fr); }
  .answers li span.d { justify-self: start; }
  .why-part { grid-template-columns: minmax(0, 1fr) auto; }
  .why-part .n { grid-column: 1 / -1; }
}
@container (max-width: 320px) { .rival .params { grid-template-columns: minmax(0, 1fr); } }
/* the development paths stack while three would leave each under ~240 px */
@container (max-width: 760px) {
  .root { text-align: left; justify-self: stretch; }
  .root-stem { margin-left: 18px; justify-self: start; }
  .branches { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 36px; justify-self: stretch; }
  .branches::before { left: 18px; right: auto; top: 0; bottom: 30px; width: 1px; height: auto; }
  .branch::before { top: 28px; left: -18px; width: 18px; height: 1px; }
}
.branch .btn { max-width: 100%; white-space: normal; text-align: left; }

/* the launch's four things: two by two where four or three would squeeze them, one per row where two would */
@container (max-width: 680px) { .pk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) {
  .pk-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pk-tile { grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; }
}
/* the guarantee: its shield above the words where beside them it left the words a narrow column */
@container (max-width: 300px) {
  .pk-guarantee { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pk-shield { width: 36px; height: 36px; }
}
/* a call to action: its price under its words where beside them it squeezed the name onto two lines */
@container (max-width: 360px) {
  .cta { grid-template-columns: 38px minmax(0, 1fr); row-gap: 6px; }
  .cta-price { grid-column: 2; justify-self: start; padding: 4px 11px; font-size: 14px; }
}

/* the folded check's chips: one row; a chip too long for it ends in «…» instead of wrapping into a half-cut second line */
.s1-chips { width: 100%; }
.s1-chips .ins { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.s1-chips .ins .ins-ico { display: inline-block; vertical-align: -3px; margin-right: 7px; }
/* «откроется после оплаты · 21 ⭐» on two lines: the padlock by the first one, no lone star on the second */
.unlock { align-items: flex-start; text-wrap: pretty; }
.unlock .ico { margin-top: 0.15em; }
/* a file's chip on two lines reads from the left, like every other line of text */
.art-chip { text-align: left; }
/* «Твой запрос» over the person's words: the line's smallest text is 12 px */
.understood.own-words .ow-label { font-size: 12px; }

/* the goal's mask over the line ends with the card (it ran 4 px past its lower edge, a dark notch under its corner) */
.node.goal::before { bottom: 4px; }

@media (max-width: 640px) {
  /* the team and the call to action take the zone's width but stay inside its frame — 12 px from it, as on the right */
  .concept-zone .team, .concept-zone .cta-wrap { margin-left: calc(12px - var(--mk) - var(--mk-gap)); }
  /* the team's cards cross the line there: an opaque ground, painted over it, so the line does not run through them */
  .concept-zone .team .agent { position: relative; background-color: #0a100d; }
  /* the goal card: what the person will have takes the card's whole width under the medal and the name */
  .goal-card { grid-template-areas: 'mk head' 'have have'; }
  .goal-have { padding-left: 6px; }
}

/* U249 (operator 2026-10-09): the green sale zone (the concept's, and the project's alike) on a darker ground over the
   page's picture */
.concept-zone:not(.active) { background: radial-gradient(80% 50% at 0% 0%, rgb(var(--good-t) / 0.12), transparent 70%), linear-gradient(180deg, rgb(var(--good-t) / 0.05), rgb(var(--good-t) / 0.015)), rgba(6, 8, 10, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* U250: the zone's darker ground hides the line behind it — the zone draws the line's dashes itself (front.js paintSpine
   sets --zs-x on the line), above its ground and under its content */
.concept-zone:not(.active) { position: relative; z-index: 0; }
.concept-zone:not(.active)::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--zs-x, 0px); width: 1.5px; margin-left: -0.75px;
  background: repeating-linear-gradient(to bottom, rgb(var(--lilac-t) / 0.45) 0 5px, transparent 5px 10px); pointer-events: none; }

/* U251 (operator 2026-10-09): the decision's diamond on the line is violet (the line is filled down to it — front.js
   SPINE_REACHED); the ways' fork inside a run keeps its own */
.journey > .fk-a .fka-dia { border-color: var(--purple-text); box-shadow: 0 0 0 6px rgb(var(--lavender-t) / 0.16); }

/* U252 (operator 2026-10-09): the decision's diamond is the one that pulses — the person stands there; the zone's lock
   below goes still */
.journey > .fk-a .fka-dia { position: relative; }
.journey > .fk-a .fka-dia::after { content: ''; position: absolute; inset: -2.5px; border-radius: 6px; border: 2px solid var(--purple-text); opacity: 0; pointer-events: none; animation: lock-pulse 2s ease-out infinite; }
.concept-zone .lock-mk::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .journey > .fk-a .fka-dia::after { animation: none; } }

/* U253 (operator 2026-10-09): an idea's page comes in card by card from the top — each card rises softly a beat after the
   one above (front.js riseSteps: --rise-d), the page's own rise of its blocks stands aside for the line */
#check .journey .rise { animation: pg-rise-soft 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) var(--rise-d, 0s) both; }
body.pg-in #check > .journey { animation: none; }
#check .journey > .rise-frame { animation: zone-in 0.6s ease both; }
@keyframes zone-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #check .journey .rise, #check .journey > .rise-frame { animation: none; } }

/* U254 (operator 2026-10-09) → 2026-10-22: an opened section on a darker blurred ground with the line drawn through it is
   now every timeline's opened step — § «the opened step» at the end (step-frame.js) */

/* U255 (operator 2026-10-09): on scroll the home's field, its suggestions and the ideas' cloud dissolve with the pictures
   (front.js homeFade) — the ideas below never slide over them */
#home .idea-modal.home { opacity: var(--home-fade, 1); }
#home.faded .idea-modal.home { pointer-events: none; }

/* MP30 SUB-9: the bell's notices on the server — «Отметить всё прочитанным» under the popover's head (only while one is
   new); the rows, their dots and the sheet are U205's */
.hub-mark { display: flex; justify-content: flex-end; padding: 0 6px; }
.hub-markall { min-height: 32px; padding: 4px 10px; border: 0; border-radius: 10px; background: none; color: var(--purple-text); font: 600 13px var(--font-body); cursor: pointer; }
.hub-markall:hover, .hub-markall:focus-visible { background: rgb(var(--purple-t) / 0.12); outline: none; }

/* U242 (operator 2026-10-09): the home at every width. Where its pictures stand, how big and how many is theme-model.js's
   homeSlots for the window (front.js sets --x/--y from the window's middle and --side): round the field, inside the
   window and under the header, off the field and the pills' room round it, the arrow and Fox's avatar, with dark
   gaps between them — the wide size (U241, U243, U245: theme-model.js stackSide / tileSide) where they fit, smaller or
   fewer where they would merge. A phone or a short window (≤ 640 px wide or ≤ 500 px tall: theme-model.js STRIP_MAX_*)
   is a strip home — the field on top, the themes as a strip under it, no pictures behind the page */
.backdrop .bd-stack { width: var(--side, 156px); }
.backdrop .bd-tile.cloud { width: var(--side, 286px); }
/* (U235's step apart with the field in focus: the pictures now stand by the window's edges — a smaller step keeps them in) */
body.at-home.idea-focus .backdrop .bd-stack, body.at-home.idea-focus .backdrop .bd-tile { translate: calc(var(--x) * 0.05) calc(var(--y) * 0.05); }
/* a phone on its side: the phone's composition — the field near the top, the strip, «Твои идеи» right after */
@media (min-width: 641px) and (max-height: 500px) {
  html.nim-b .idea-modal.home { height: auto; min-height: 0; padding: 16px 0 6px; }
  html.nim-b .idea-modal.home .im-card { position: relative; top: auto; left: auto; right: auto; margin: 0 auto; }
  .home-down { display: none !important; }
  .idea-modal .nim-cloud { display: none; }
  .home-ideas { padding-top: 14px; }
  .nim-tails { margin: 0 -16px; padding: 12px 16px 2px; scroll-padding-inline: 16px; gap: 8px; }
  .nim-tails.ideas { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; }
  .nim-tails .nim-cl { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 14px; white-space: nowrap; opacity: 1; filter: none; }
  .nim-tails .nim-cl > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
}
/* the strip is a deliberate sideways scroller — it fades at both edges (its first column starts clear of the left fade,
   the next one is cut and fading at the right), a theme a column of one width: its picture as a cloud, its name, two of
   its ideas over two lines at most; a swipe stops at a column. (Wrapping six themes would push «Твои идеи» a screen
   down; the strip keeps them one swipe away.) */
@media (max-width: 640px), (max-height: 500px) {
  .nim-tails { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 44px), transparent 100%); }
  .nim-tails.ideas.themed { grid-template-rows: auto repeat(2, auto); grid-auto-columns: 224px; column-gap: 16px; row-gap: 8px; scroll-snap-type: x mandatory; }
  .nim-tails.themed .nim-th { display: grid; gap: 4px; align-content: end; min-width: 0; padding: 0; scroll-snap-align: start; font: 500 12.5px/1.3 var(--font-body); letter-spacing: 0.02em; color: rgb(var(--ink-t) / 0.78); white-space: normal; }
  .nim-tails.themed .nim-th b { padding: 0 6px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nim-th-pic { display: block; width: 100%; height: 96px; }
  .nim-tails.themed .nim-th .nim-th-pic img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; box-shadow: none; filter: brightness(0.74) saturate(1.02); }
  /* (a wide low box: one soft body filling it, three of the cloud's random blobs bulging out of it — U233's shape) */
  .nim-th-pic.cloud {
    -webkit-mask-image:
      radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx2) * 1.4) calc(var(--ry2) * 1.4) at var(--cx2) var(--cy2), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx3) * 1.4) calc(var(--ry3) * 1.4) at var(--cx3) var(--cy3), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx4) * 1.4) calc(var(--ry4) * 1.4) at var(--cx4) var(--cy4), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx2) * 1.4) calc(var(--ry2) * 1.4) at var(--cx2) var(--cy2), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx3) * 1.4) calc(var(--ry3) * 1.4) at var(--cx3) var(--cy3), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%),
      radial-gradient(ellipse calc(var(--rx4) * 1.4) calc(var(--ry4) * 1.4) at var(--cx4) var(--cy4), #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 100%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .nim-tails.themed .nim-cl { justify-self: stretch; min-width: 0; border-radius: 14px; text-align: left; white-space: normal; scroll-snap-align: none; }
  .nim-tails.themed .nim-cl > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.3; }
}

/* U256–U258 (operator 2026-10-09): the home's field says what to do with it; the similar ideas show only under a draft
   (front.js similarOff — U256); «Твои идеи» steps aside while there are words in the field */
/* U258: a line over the field — what to do with it; it dissolves while there are words in the field */
.nim-cap { display: none; }
.idea-modal.home .nim-cap { display: block; position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 12px; text-align: center; font: 500 13.5px/1.35 var(--font-body); letter-spacing: 0.01em; color: rgb(var(--ink-t) / 0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity 1s ease; }
.idea-modal.home.nim-typing .nim-cap { opacity: 0; transition: opacity 0.5s ease; }
@media (max-width: 640px), (max-height: 500px) { .idea-modal.home .nim-cap { position: static; margin: 0 2px 8px; text-align: left; font-size: 12.5px; } }
/* U257: «Твои идеи» goes while there are words in the field and comes back softly once it is cleared */
.home-ideas { transition: opacity 1.4s ease; }
body.at-home.drafting .home-ideas { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
@media (prefers-reduced-motion: reduce) { .idea-modal.home .nim-cap, .home-ideas, body.at-home.drafting .home-ideas { transition: none; } }

/* U260 (operator 2026-10-09): a picture still coming through in pieces (its first ~13 s, U198) dissolves like any other
   when the page moves on — the pieces' own animation used to win over the dissolve once the wait ended (the next
   picture came), and the old idea's picture snapped back; now both run together, the pieces where they were */
.backdrop .bd-l.pieces.w0, .backdrop.waiting .bd-l.pieces.w0 { animation: bd-r1s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d1, 0s) both, bd-r2s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d2, 0s) both,
  bd-r3s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d3, 0s) both, bd-r4s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d4, 0s) both, bd-r5s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d5, 0s) both,
  bd-r6s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d6, 0s) both, bd-r7s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d7, 0s) both, bd-r8s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d8, 0s) both,
  bd-r9s 8s cubic-bezier(0.55, 0.05, 0.35, 1) var(--d9, 0s) both, bd-dissolve-soft 15s cubic-bezier(0.3, 0.2, 0.4, 1) forwards; }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-l.pieces.w0, .backdrop.waiting .bd-l.pieces.w0 { animation: none; opacity: 0; } }

/* U261 (operator 2026-10-09): the idea's card at the top of the line and the concept's card (its cover, name, promise
   and files) on a darker blurred ground — their words read over the page's picture, as the opened sections (U254) and
   the sale zone (U249); neither card lies over the line, so the line needs no drawing through them */
.thought { background: radial-gradient(120% 140% at 0% 0%, rgb(var(--yellow-t) / 0.08), transparent 55%), linear-gradient(180deg, rgb(var(--purple-t) / 0.12), rgb(var(--purple-t) / 0.03)), rgb(var(--pane-t) / 0.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.thought::before, .thought::after { background: rgba(30, 22, 50, 0.92); }
.stage-final .prod { background: radial-gradient(80% 60% at 0% 0%, rgb(var(--good-t) / 0.07), transparent 70%), rgba(7, 6, 12, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* MP30 SUB-12: the one chat with the agent companion (front.js block «MP30 SUB-12», timeline-model.js) — shown only where
   the companion's routes answer. The avatar: the unread count, the mute's mark instead of the green dot, the running line
   (the old viewer's conic ring, re-coloured; still under reduced motion). The chat: the mute in its head, the muted line and
   the filter's line under it, each idea's chip on the first row of its run, the closing insight, the history's cards and
   the bot's own lines, the loader rows, the composer's scope chip and its menu. The bubble beside the avatar (under the
   header's avatar below 1024 px) and the avatar's menu; «Что агент помнит». Motion is a slow opacity dissolve and a few
   pixels at most (the operator's rule) — nothing flies. */
.ag-badge { position: absolute; top: -4px; right: -4px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #000; border-radius: 10px; background: var(--purple); color: #fff;
  font: 700 12px/16px var(--font-body); text-align: center; pointer-events: none; }
.ag-badge[hidden], .ag-mutemark[hidden] { display: none; }
.ag-mutemark { position: absolute; right: -2px; bottom: -2px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #000; border-radius: 50%; background: #24202e; color: var(--g11); pointer-events: none; }
.ag-mutemark .ico { width: 11px; height: 11px; }
.ag-rail.muted .ag-tab .ag-dot { display: none; }
.ag-rail.running .ag-tab::before { content: ''; position: absolute; inset: -6px; z-index: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0turn, transparent 0turn 0.32turn, #9466f0 0.72turn, var(--yellow) 0.97turn, transparent 1turn);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: ring-spin 1.6s linear infinite; }
@media (max-width: 1023px) { .top-actions .ag-rail.running .ag-tab::before { inset: -4px; } .top-actions .ag-badge { top: -6px; right: -6px; } }
@media (prefers-reduced-motion: reduce) { .ag-rail.running .ag-tab::before { animation: none; } }

/* the chat's head: the mute beside the close; the lines under the head (the mute's, the filter's) */
.ch-top { flex-direction: column; align-items: center; gap: 6px; }
/* the chat's one column never grows past the screen for a long name (a chip, the scope, a loader row): it cuts them */
.chat { grid-template-columns: minmax(0, 1fr); }
/* a card's link is a real target on a touch screen (U152) */
@media (max-width: 1023px) { .ch-act-b a { display: inline-flex; align-items: center; min-height: 40px; } }
.ch-mute[hidden] { display: none; }
.ch-mute[aria-pressed='true'] { color: var(--yellow); }
.tl-bar { pointer-events: auto; display: flex; align-items: center; gap: 8px; width: 100%; max-width: min(100%, 960px); min-height: 40px; padding: 2px 4px 2px 14px; border-radius: 12px;
  background: rgba(16, 13, 26, 0.9); border: 1px solid rgb(var(--ink-t) / 0.07); color: var(--g11); font: 13px/1.35 var(--font-body); }
.tl-bar[hidden] { display: none; }
.tl-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-muted { color: var(--yellow); }
.tl-bar-b { flex: none; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 9px; background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); font: 600 13px var(--font-body); cursor: pointer; }
.tl-bar-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--g11); cursor: pointer; }
.tl-bar-x .ico { width: 16px; height: 16px; }
.tl-bar-b:hover, .tl-bar-b:focus-visible, .tl-bar-x:hover, .tl-bar-x:focus-visible { background: rgb(var(--ink-t) / 0.1); outline: none; }
.chat[data-bars='1'] .ch-list { padding-top: 138px; }
.chat[data-bars='2'] .ch-list { padding-top: 184px; }
@media (max-width: 1023px) {
  .tl-bar-b, .tl-bar-x { min-height: 40px; min-width: 40px; }
  .chat[data-bars='1'] .ch-list { padding-top: 132px; }
  .chat[data-bars='2'] .ch-list { padding-top: 180px; }
}

/* a row's idea: its chip (the first row of a run — a tap filters the chat to that idea), Fox's name inside a finished project */
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.ch-msg.tl-row.cont > .tl-head:not(:has(.tl-fox)) { display: none; }
.tl-row.cont .tl-chip { display: none; }
.tl-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 0 10px 0 9px; border: 0; background: none;
  color: var(--purple-text); font: 600 12px/1.3 var(--font-display); letter-spacing: 0.01em; cursor: pointer; }
.tl-chip::before { content: ''; position: absolute; inset: 3px 0; z-index: -1; border-radius: 999px; border: 1px solid rgb(var(--purple-t) / 0.38); background: rgb(var(--purple-t) / 0.12); transition: border-color 0.2s ease, background-color 0.2s ease; }
.tl-chip:hover::before, .tl-chip:focus-visible::before { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.2); }
.tl-chip:focus-visible { outline: none; }
.tl-chip > span { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tier { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-text); }
.t-concept .tl-tier, .tl-tier.t-concept { background: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3); }
.t-package .tl-tier, .tl-tier.t-package { background: var(--yellow); box-shadow: 0 0 0 2px rgb(var(--yellow-t) / 0.25); }
.tl-tier.t-none { background: var(--g9); }
@media (max-width: 1023px) { .tl-chip { min-height: 40px; } .tl-chip::before { inset: 8px 0; } }
.tl-fox { display: inline-flex; align-items: center; gap: 5px; color: var(--yellow); font: 600 12px/1.3 var(--font-display); letter-spacing: 0.04em; white-space: nowrap; }
.tl-sep { color: var(--g10); font-size: 12px; }
.tl-row.cont .tl-sep { display: none; }
.ch-msg.ag.fox .ch-bubble { border: 1px solid rgb(var(--yellow-t) / 0.22); }
/* the closing insight: the agent's conclusion, a warmer card with its label */
.tl-ins-h { display: inline-flex; align-items: center; gap: 6px; margin: 2px 2px 0; color: var(--yellow); font: 600 12px/1.3 var(--font-display); }
.tl-ins-h .ico { width: 14px; height: 14px; }
.ch-msg.tl-insight { max-width: 92%; }
.ch-msg.tl-insight .ch-bubble { border: 1px solid rgb(var(--yellow-t) / 0.32); background: linear-gradient(160deg, rgb(var(--yellow-t) / 0.09), rgb(var(--purple-t) / 0.1)); }
/* the bot's own lines (a progress line, a system line) — quiet, centred */
.tl-sys { align-self: center; display: grid; justify-items: center; gap: 4px; max-width: 92%; padding: 2px 10px; color: var(--g10); font: 12.5px/1.45 var(--font-body); text-align: center; }
.tl-sys > .tl-head { justify-content: center; }
.tl-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* MP41 SUB-19 (APP-16): a pack sticker — the image, no bubble; 128 px, 160 px on a wide screen; an opacity dissolve */
.ch-msg.tl-sticker { display: grid; gap: 4px; background: none; animation: none; }
.tl-sticker .tl-stk { display: block; width: 128px; height: 128px; object-fit: contain; }
@media (min-width: 1024px) { .tl-sticker .tl-stk { width: 160px; height: 160px; } }
@media (prefers-reduced-motion: no-preference) { .tl-sticker .tl-stk { animation: tl-stk-in .4s ease-out both; } }
@keyframes tl-stk-in { from { opacity: 0; } to { opacity: 1; } }
.tl-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border-radius: 8px; background: rgb(var(--ink-t) / 0.07); color: var(--g12); font-size: 12.5px; }
.tl-file .ico { flex: none; width: 14px; height: 14px; }
.tl-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* WP-AB W3: a project material's chip opens it (the file within its step); a bubble's card link under its words */
a.tl-file.tl-file-open { color: var(--purple-text); text-decoration: none; cursor: pointer; }
a.tl-file.tl-file-open:hover, a.tl-file.tl-file-open:focus-visible { background: rgb(var(--purple-t) / 0.14); }
.ch-bubble > .tl-open { display: block; margin-top: 8px; font-size: 13.5px; }
.ch-act.tl-card .ch-act-b > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* MP41 SUB-11: the founder questions' round in the chat — its open card answerable here (the same round as Telegram's) */
.ch-act.tl-card.tl-q .ch-act-b { display: grid; gap: 8px; min-width: 0; }
.ch-act.tl-card.tl-q .ch-act-b > span { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tl-q .tl-q-q { font-size: 15px; line-height: 1.45; }
.tl-q .tl-q-why { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tl-q textarea.tl-q-a { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--ground-t) / 0.35); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.45; resize: vertical; }
.tl-q textarea.tl-q-a:focus { border-color: var(--purple-text); outline: none; box-shadow: 0 0 0 3px rgb(var(--purple-t) / 0.18); }
.ch-act.tl-card.tl-q .ch-act-b > .tl-q-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tl-q .btn.qz-btn { min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 14px; box-shadow: none; }
.tl-q .btn.tl-q-skip, .tl-q .btn.tl-q-rest { border: 1px solid rgb(var(--ink-t) / 0.2); background: transparent; color: var(--muted); }
.tl-q-done > span { color: var(--g11); }
@media (prefers-reduced-motion: no-preference) { .tl-q { animation: tl-stk-in .4s ease-out both; } }
/* 2026-10-18: the versions of a vague idea (`growth`) — the lead, the numbered versions, a button each; chosen: its one line */
.ch-act.tl-card.tl-g .ch-act-b { display: grid; gap: 6px; min-width: 0; }
.ch-act.tl-card.tl-g .ch-act-b > span { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tl-g .tl-g-line { font-size: 14.5px; line-height: 1.45; }
.ch-act.tl-card.tl-g .ch-act-b > .tl-g-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tl-g .btn.qz-btn { min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 14px; box-shadow: none; }
.tl-g .btn.tl-g-own { border: 1px solid rgb(var(--ink-t) / 0.2); background: transparent; color: var(--muted); }
.tl-g-done > span { color: var(--g11); }
/* WP-AB: a row's buttons the cabinet taps as Telegram's (a question's choice, a gate's ✅ / ✏️) — wrapping, never sideways */
.tl-taps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-width: 0; }
.tl-taps .btn.qz-btn.tl-tap { min-height: 40px; max-width: 100%; padding: 8px 16px; border-radius: 999px; font-size: 14px; line-height: 1.3; box-shadow: none; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.tl-taps .btn.tl-tap:disabled { opacity: 0.55; cursor: default; }
.tl-taps .btn.tl-tap.on:disabled { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--purple-t) / 0.35); }
.tl-sys .tl-taps { margin-top: 8px; }
.ch-act.tl-card .ch-act-b > .tl-taps { display: flex; }
/* the loader rows (an agent at work, not waiting for the person) and the older page's line */
.tl-loads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tl-load { display: flex; align-items: center; gap: 8px; padding: 6px 12px; color: var(--g11); font: 13px/1.35 var(--font-body); }
.tl-load > span:not(.qspin) { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* WP-AB W6: «Остановить» on a project's running line */
.tl-load > .tl-stop { flex: none; margin-left: auto; padding: 4px 12px; border: 1px solid rgb(var(--ink-t) / 0.2); border-radius: 999px; background: transparent; color: var(--g12); font: inherit; font-size: 12.5px; cursor: pointer; }
.tl-load > .tl-stop:hover, .tl-load > .tl-stop:focus-visible { border-color: var(--purple-text); color: var(--purple-text); }
.tl-load > .tl-stop:disabled { opacity: 0.5; cursor: default; }
.tl-older { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 4px; color: var(--g10); font-size: 12.5px; }
.tl-gone { opacity: 0; transition: opacity 0.3s ease; }
.tl-row .ch-bubble, .ch-act.tl-row { transition: box-shadow 0.8s ease; }
.tl-lit .ch-bubble, .ch-act.tl-lit { box-shadow: 0 0 0 2px rgb(var(--yellow-t) / 0.55); }
@media (prefers-reduced-motion: reduce) { .tl-gone, .tl-row .ch-bubble, .ch-act.tl-row { transition: none; } }

@keyframes tl-in { from { opacity: 0; } }

/* the composer's scope chip (the page's idea, «Общее» on the home) — MP41 SUB-3 (THREAD): a compact pill in the footer
   after 📎, who answers in its title and the menu's head —, its menu above the composer */
.ch-scope { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 32px; padding: 0 8px 0 11px; border: 1px solid rgb(var(--purple-t) / 0.4); border-radius: 999px;
  background: rgb(var(--purple-t) / 0.12); color: var(--g12); font: 600 12.5px/1.3 var(--font-body); cursor: pointer; }
.ch-scope[hidden] { display: none; }
.ch-scope > span { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-scope .ico { flex: none; width: 14px; height: 14px; color: var(--g11); }
.ch-scope:hover, .ch-scope:focus-visible, .ch-scope[aria-expanded='true'] { border-color: var(--purple-text); outline: none; }
.ch-scope-head { margin: 4px 10px 2px; color: var(--g11); font-size: 12.5px; line-height: 1.4; }
.ch-scope-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 8; display: grid; gap: 4px; max-height: min(340px, 50vh); overflow: auto; padding: 6px; border-radius: 14px;
  background: rgb(var(--surface-t) / 0.97); border: 1px solid rgb(var(--ink-t) / 0.1); box-shadow: 0 16px 40px rgb(var(--shade-t) / 0.55); animation: tl-in 0.32s ease both; }
.ch-scope-menu[hidden] { display: none; }
.ch-scope-find { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--g6); border-radius: 10px; background: #000; color: var(--g12); font: 14px var(--font-body); }
.ch-scope-find:focus { border-color: var(--v7); outline: none; }
.ch-scope-list { display: grid; gap: 2px; }
.ch-scope-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: none; color: var(--g12); font: 14px/1.35 var(--font-body); text-align: left; cursor: pointer; }
.ch-scope-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-scope-opt[aria-selected='true'] { background: rgb(var(--purple-t) / 0.16); }
.ch-scope-opt:hover, .ch-scope-opt:focus-visible { background: rgb(var(--purple-t) / 0.24); outline: none; }
.ch-scope-empty { margin: 6px 10px; font-size: 13px; }
.ch-attach-slot:empty { display: none; }
@media (max-width: 1023px) { .ch-scope { min-height: 40px; } }
@media (max-width: 640px) { .ch-scope > span { max-width: min(18ch, 34vw); } }
@media (prefers-reduced-motion: reduce) { .ch-scope-menu { animation: none; } }

/* the bubble beside the avatar (the chat folded): from 1024 px to the floating avatar's right, its tail at it; below, under
   the header's avatar, the 16 px gutters, its tail up at it; hidden while a sheet, the chat or the keyboard is up */
.ag-bubble { position: fixed; z-index: 75; left: 84px; top: 50%; width: min(340px, calc(100vw - 100px)); opacity: 0; transform: translate(-4px, -50%); transition: opacity 0.32s ease, transform 0.32s ease; }
.ag-bubble.in { opacity: 1; transform: translate(0, -50%); }
.ag-bubble[hidden] { display: none; }
.agb-card { position: relative; display: grid; gap: 6px; padding: 8px 6px 10px 14px; border-radius: 16px; background: rgb(var(--surface-t) / 0.95); border: 1px solid rgb(var(--purple-t) / 0.45);
  box-shadow: 0 14px 36px rgb(var(--shade-t) / 0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.agb-card::before { content: ''; position: absolute; left: -7px; top: calc(50% - 6px); width: 12px; height: 12px; background: rgb(13, 11, 20); border-left: 1px solid rgb(var(--purple-t) / 0.45); border-bottom: 1px solid rgb(var(--purple-t) / 0.45); transform: rotate(45deg); }
.agb-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agb-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 10px 2px 8px; border-radius: 999px; border: 1px solid rgb(var(--purple-t) / 0.38); background: rgb(var(--purple-t) / 0.12);
  color: var(--purple-text); font: 600 12px/1.4 var(--font-display); }
.agb-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agb-who { flex: none; color: var(--text-hi); font: 600 13px var(--font-display); letter-spacing: 0.02em; white-space: nowrap; }
.agb-more { margin-left: auto; flex: none; padding: 1px 8px; border-radius: 999px; background: rgb(var(--ink-t) / 0.08); color: var(--g11); font-size: 12px; }
.agb-x { flex: none; margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--g11); cursor: pointer; }
.agb-more + .agb-x { margin-left: 0; }
.agb-x .ico { width: 16px; height: 16px; }
.agb-x:hover, .agb-x:focus-visible { background: rgb(var(--ink-t) / 0.08); color: var(--text-hi); outline: none; }
.agb-text { display: block; width: 100%; min-height: 40px; padding: 0 8px 0 0; border: 0; background: none; color: var(--g12); font: 14px/1.45 var(--font-body); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.agb-text:focus-visible { outline: 2px solid var(--v11); outline-offset: 2px; border-radius: 6px; }
.agb-acts { display: flex; justify-content: flex-end; padding-right: 4px; }
.agb-go { min-height: 36px; padding: 6px 14px; border: 1px solid rgb(var(--purple-t) / 0.55); border-radius: 10px; background: rgb(var(--purple-t) / 0.2); color: #fff; font: 600 13px var(--font-body); cursor: pointer; }
.agb-go:hover, .agb-go:focus-visible { background: rgb(var(--purple-t) / 0.32); outline: none; }
body.chat-open .ag-bubble, body.sheet-open .ag-bubble, body.signed-out .ag-bubble { display: none; }
@media (max-width: 1023px) {
  .ag-bubble { left: auto; right: 16px; top: calc(var(--tail-y, 64px) + 12px); width: min(420px, calc(100vw - 32px)); transform: translateY(-4px); }
  .ag-bubble.in { transform: none; }
  .agb-card::before { left: clamp(14px, calc(var(--tail-x, 100vw) - (100vw - 16px - min(420px, 100vw - 32px)) - 7px), calc(100% - 26px)); top: -7px; border-left: 1px solid rgb(var(--purple-t) / 0.45); border-bottom: 0; border-top: 1px solid rgb(var(--purple-t) / 0.45); }
  .agb-go { min-height: 40px; }
  body:has(textarea:focus, input:focus) .ag-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ag-bubble, .ag-bubble.in { transition: none; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .ag-bubble, .ag-bubble.in { transform: none; } }

/* the avatar's menu (a long press, a right click): the mute and «Что агент помнит» */
.ag-menu { position: fixed; z-index: 90; left: 84px; top: 50%; transform: translateY(-50%); display: grid; gap: 2px; min-width: 230px; padding: 6px; border-radius: 14px; background: rgb(var(--surface-t) / 0.97);
  border: 1px solid rgb(var(--ink-t) / 0.1); box-shadow: 0 16px 40px rgb(var(--shade-t) / 0.55); animation: tl-in 0.32s ease both; }
.ag-menu[hidden] { display: none; }
.ag-mi { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--g12); font: 14px var(--font-body); text-align: left; cursor: pointer; }
.ag-mi .ico { width: 17px; height: 17px; color: var(--g11); }
.ag-mi:hover, .ag-mi:focus-visible { background: rgb(var(--purple-t) / 0.2); outline: none; }
@media (max-width: 1023px) { .ag-menu { left: auto; right: 16px; top: calc(var(--tail-y, 64px) + 10px); transform: none; } }
@media (prefers-reduced-motion: reduce) { .ag-menu { animation: none; } }

/* «Что агент помнит»: a dialog over the dimmed page (a full sheet on a phone) — by scope, each line with its pin and erase */
.mem-back { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgb(var(--ground-t) / 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.32s ease; }
.mem-back.in { opacity: 1; }
.mem-card { display: grid; align-content: start; gap: 10px; width: min(560px, 100%); max-height: min(82vh, 760px); overflow: auto; padding: 16px 16px 20px; border-radius: 18px; background: var(--surface); border: 1px solid rgb(var(--ink-t) / 0.09); box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.6); }
.mem-card:focus { outline: none; }
.mem-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mem-head h2 { margin: 0; font: 600 18px/1.3 var(--font-display); color: var(--text-hi); }
.mem-x { flex: none; width: 40px; height: 40px; }
.mem-note { margin: 0; font-size: 13px; line-height: 1.45; }
.mem-sec h3 { margin: 10px 0 6px; color: var(--g11); font: 600 13px/1.3 var(--font-display); }
.mem-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 6px 8px 12px; border-radius: 12px; border: 1px solid transparent; background: rgb(var(--ink-t) / 0.04); transition: opacity 0.28s ease; }
.mem-row.pinned { border-color: rgb(var(--yellow-t) / 0.32); }
.mem-main { display: grid; gap: 3px; min-width: 0; }
.mem-kind { color: var(--purple-text); font: 600 12px/1.3 var(--font-display); }
.mem-text { color: var(--g12); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.mem-meta { color: var(--g10); font-size: 12px; }
.mem-acts { display: flex; gap: 2px; }
.mem-b { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--g10); cursor: pointer; }
.mem-b .ico { width: 17px; height: 17px; }
.mem-b:hover, .mem-b:focus-visible { background: rgb(var(--ink-t) / 0.08); color: var(--text-hi); outline: none; }
.mem-pin[aria-pressed='true'] { color: var(--yellow); }
.mem-empty { margin: 8px 0; color: var(--g10); font-size: 14px; }
@media (max-width: 640px) {
  .mem-back { padding: 0; place-items: stretch; }
  .mem-card { width: 100%; max-height: none; height: 100dvh; border-radius: 0; border: 0; padding: max(14px, var(--sa-t, 0px)) 14px max(20px, var(--sa-b, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .mem-back, .mem-row { transition: none; } }

/* MP30 SUB-13: the composer's 📎 and the message's files — the paperclip at the foot's start (dimmed on «Общее»), the chips
   over the field: the name, the size or the percent, a thin bar while the bytes go, ✕ */
.ch-attach-slot { display: flex; flex: none; margin-left: -8px; }
.ch-attach { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--g11); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; }
.ch-attach .ico { width: 19px; height: 19px; }
.ch-attach:hover, .ch-attach:focus-visible { color: #fff; background: rgb(var(--purple-t) / 0.18); outline: none; }
.ch-attach.off { color: var(--g8); }
.ch-attach.off:hover { background: none; color: var(--g9); }
.ch-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 0; }
.ch-files[hidden] { display: none; }
.ch-file { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 2px 0 10px; border-radius: 10px; overflow: hidden;
  background: rgb(var(--ink-t) / 0.06); border: 1px solid rgb(var(--ink-t) / 0.1); color: var(--g12); font-size: 12.5px; line-height: 1.3; }
.ch-file-n { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-file-s { flex: none; color: var(--g10); font-size: 11.5px; }
.ch-file-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--v9); opacity: 0; transition: width 0.2s ease, opacity 0.32s ease; }
.ch-file.is-up .ch-file-bar { opacity: 1; }
.ch-file.is-waiting { opacity: 0.7; }
.ch-file.is-bad { border-color: var(--bad); }
.ch-file.is-bad .ch-file-s { color: var(--bad); }
.ch-file-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--g10); cursor: pointer; }
.ch-file-x .ico { width: 14px; height: 14px; }
.ch-file-x:hover, .ch-file-x:focus-visible { background: rgb(var(--ink-t) / 0.08); color: var(--text-hi); outline: none; }
.ch-file-x:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1023px) {
  .ch-attach { width: 44px; height: 44px; }
  .ch-file { min-height: 40px; }
  .ch-file-x { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ch-file-bar, .ch-attach { transition: none; } }
/* U272–U274 (operator 2026-10-10): a project's page — its map, any page of an idea past its package (front.js
   `syncProjectMode`, `body.zo-project`) — is the project's own: the header drops the lab's tag. */
body.zo-project .brand-tag { display: none; }
/* U274: «+ Новая идея» is the switcher list's first row everywhere; a project's header drops its own button (it folds
   away as at home) */
.sw-new { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: center; min-height: 44px; padding: 7px 10px; margin-bottom: 4px; border-radius: 10px; cursor: pointer; list-style: none; border-bottom: 1px solid rgb(var(--ink-t) / 0.06); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sw-new:hover { background: rgb(var(--ink-t) / 0.04); }
.sw-new.on { background: rgb(var(--purple-t) / 0.16); }
.sw-new .sw-o-name { font: 600 14.5px var(--font-display); color: var(--text); }
.sw-face.sw-plus { border-radius: 50%; background: rgb(var(--purple-t) / 0.18); color: #e7dcff; font: 600 20px/1 var(--font-display); }
body.zo-project #new-idea { display: inline-flex; max-width: 0; padding-left: 0; padding-right: 0; margin: 0; border-width: 0; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.8s ease, max-width 1s cubic-bezier(0.2, 0.7, 0.2, 1), padding 1s cubic-bezier(0.2, 0.7, 0.2, 1), margin 1s ease, visibility 0s linear 1s; }
@media (prefers-reduced-motion: reduce) { body.zo-project #new-idea { transition: none; } }
/* U273: the switcher's projects on top — each logo in a ring of its project's accent (`--sw-ac`, D31-18), the level in
   yellow (the level's colour); the button on a project is its logo, its name and its level */
.sw-face.sw-proj { background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); }
.sw-face.sw-proj.ac { box-shadow: 0 0 0 2px rgb(var(--sw-ac)), 0 0 14px rgb(var(--sw-ac) / 0.35); }
.sw-face.sw-proj .mini-medal { width: 18px; height: 18px; font-size: 11px; }
.sw-lvl { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.5 var(--font-display); color: var(--yellow); background: rgb(var(--yellow-t) / 0.1); border: 1px solid rgb(var(--yellow-t) / 0.45); white-space: nowrap; }
/* MP52 SUB-4 (D52-17): the step «Проект запущен» beside the item's level — a form, not a stage (no chip for a seed) */
/* the operator's row rules (MP49's UI pass): the item's level and stage a quiet chip — yellow is a running task's —, the
   graduation step (done) in the team's softened accent, never the evaluative green */
.sw-lvl.sw-prog { color: var(--muted); background: none; border-color: var(--line); }
.sw-grad { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.5 var(--font-display); color: rgb(var(--team-ac)); border: 1px solid rgb(var(--team-ac) / 0.4); white-space: nowrap; }
.sw-button.proj .sw-idea b { font-family: var(--font-display); }
/* the operator 2026-10-18 («не надо в списке … показывать кнопки обложка лого имя и архивация, надо справа сделать иконку
   гайки»): a row is its face, its words and ONE gear on its right — it opens the item's settings (front.js «the item's
   settings», the block «the item's settings» below); quiet until pointed at, the same on every pointer */
.sw-gear { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--faint); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.sw-gear .ico { width: 18px; height: 18px; }
.sw-gear:hover, .sw-gear:focus-visible, .sw-opt.on .sw-gear { color: var(--text); }
.sw-gear:hover, .sw-gear:focus-visible { border-color: var(--line); background: rgb(var(--ink-t) / 0.04); }
.sw-gear:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 1px; }
@media (pointer: coarse) { .sw-gear { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .sw-gear { transition: none; } }
/* the open list never scrolls sideways (the operator 2026-10-18: «в адаптиве при открытии списка появляется горизонтальный
   скролл»): the list scrolls up and down only, every part of a row may shrink, a long word breaks inside its two lines, a
   chip is cut by an ellipsis; on a phone the sheet is the viewport's width with 16 px gutters */
.sw-list { overflow-x: hidden; overscroll-behavior-x: none; }
.sw-opt > * { min-width: 0; }
.sw-o-idea { overflow-wrap: anywhere; }
.sw-o-meta > * { max-width: 100%; }
.sw-o-meta .sw-lvl, .sw-o-meta .sw-grad, .sw-o-meta .audit-badge { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .sw-panel { width: 100%; max-width: 100vw; overflow-x: hidden; } }
/* the header's button keeps room for the item's name: its level and stage chip only — «Проект запущен» is the list's */
.sw-button .sw-grad { display: none; }

/* MP31 SUB-7: the project map (map-view.js draws, map-model.js decides) — once a project's package is done its idea's page
   `/i/<key>` is the map: a layer of its own over the page (`.pm`: the project's picture behind, dark and soft; its stage
   a scroller under the transparent header). The project's card on top, its directions, a group's children as discs on a
   fan of lines, a timeline's task rows on a spine — the operator's approved mock (03-ux.md), on dark blurred glass. The
   project's accent (D31-18) is `--pm-ac` («r g b», the CSSOM) and replaces the purple; yellow stays the system's (the
   next step, Fox, XP, the level). On a page of branches the top card stays pinned (≥ 641 px; it scrolls on a phone). The
   level change (D31-7) dissolves the stage's two snapshots — the stage alone carries a view-transition name — opacity and
   transform only; the same in CSS without the API; none under reduced motion. */
.pm { --pm-ac: var(--team-ac); --pm-on-ac: var(--team-on-ac); --pm-top: 64px; --pm-acc: rgb(var(--pm-ac)); --pm-run: var(--yellow); --pm-line: rgb(var(--ink-t) / 0.16);
  --pm-glass-t: 10 8 7; --pm-glass: rgb(var(--pm-glass-t) / 0.8); --pm-dense: rgb(var(--pm-glass-t) / 0.97); --pm-disc: rgb(var(--pm-glass-t) / 0.94);
  position: fixed; inset: 0; z-index: 50; background: rgb(var(--night-t)); color: var(--text); }
.pm a, .pm a:hover { color: inherit; text-decoration: none; }
body.pm-on { overflow: hidden; }
body.pm-on .shell > main { visibility: hidden; }
body.pm-on .topbar { margin: 0; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pm-bd { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(90% 70% at 50% 0%, rgb(var(--pm-ac) / 0.18), transparent 70%), rgb(var(--night-t)); }
.pm-bd-img { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(6px) saturate(1.05) brightness(0.62); }
.pm-bd::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 72% at 50% 46%, rgb(var(--night-t) / 0.8) 0%, rgb(var(--night-t) / 0.62) 50%, rgb(var(--night-t) / 0.16) 85%),
    radial-gradient(ellipse 90% 88% at 50% 50%, rgb(var(--night-t) / 0) 55%, rgb(var(--night-t) / 0.5) 85%, rgb(var(--night-t) / 0.78) 100%); }
.pm-stage { position: absolute; top: var(--pm-top); left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; view-transition-name: pm-stage; }
.pm-stage:focus { outline: none; }
.pm-lv { position: relative; max-width: 780px; margin: 0 auto; padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.pm-lv.pm-enter { animation: pm-pop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pm-pop { from { opacity: 0; transform: scale(0.97); } }
.pm .ico { stroke-width: 1.7; }

/* the lines: the fan from the card, the trunks down the chains — drawn in as a level comes */
.pm-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pm-edges path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke: rgb(var(--pm-ac) / 0.5); stroke-dasharray: 1 1; }
.pm-edges path.t-d { stroke: rgb(var(--pm-ac) / 0.75); }
.pm-edges path.t-n { stroke: rgb(var(--yellow-t) / 0.62); }
.pm-edges path.t-a { stroke: rgb(var(--yellow-t) / 0.42); }
.pm-edges path.t-t { stroke: rgb(var(--ink-t) / 0.17); }
.pm-edges.pm-draw path { animation: pm-draw 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes pm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the cards: the project's, a group's, a timeline's — dark blurred glass in the project's colour */
.pm-card { position: relative; z-index: 1; background: var(--pm-glass); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border: 1px solid var(--pm-line); border-radius: 22px; padding: 16px; }
.pm-pcard { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.pm-dcard, .pm-scard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.pm-pcard::after, .pm-dcard::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--pm-acc); box-shadow: 0 0 0 4px rgb(var(--pm-ac) / 0.16); }
.pm-cover { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; object-fit: cover; background: linear-gradient(135deg, rgb(var(--pm-ac) / 0.55), rgb(var(--pm-ac) / 0.08)); }
.pm-anchor { display: block; width: 0; height: 0; margin: 0 auto; }
.pm-body { display: grid; gap: 6px; min-width: 0; }
.pm-h { font: 700 clamp(24px, 4vw, 30px)/1.15 var(--font-display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.pm-line { margin: 0; color: var(--muted); }
.pm-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.5; border: 1px solid var(--hair); border-radius: 999px; padding: 1px 9px; color: var(--muted); white-space: nowrap; }
.pm-chip .ico { width: 13px; height: 13px; }
.pm-chip-ok, .pm-chip.st-done { color: var(--pm-acc); border-color: rgb(var(--pm-ac) / 0.4); }
.pm-chip.st-active, .pm-chip.st-waiting { color: var(--yellow); border-color: rgb(var(--yellow-t) / 0.4); }
.pm-chip.st-soon, .pm-chip.st-locked { color: var(--faint); }
.pm-stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 6px; }
.pm-stat { display: grid; }
.pm-stat b { font: 700 20px/1.25 var(--font-display); font-variant-numeric: tabular-nums; }
.pm-stat i { font-style: normal; font-size: 12px; color: var(--faint); }
.pm-segs { display: flex; gap: 4px; margin-top: 8px; }
/* the section's header card, compact (the operator 2026-10-16): a smaller ring, the eyebrow a muted prefix of the title,
   no purpose line and no figures (one tooltip), a thin quiet progress line along the bottom */
.pm-compact { padding-block: 14px; gap: 14px; align-items: center; }
.pm-compact .pm-hero { width: 44px; height: 44px; }
.pm-compact .pm-hero > .pm-i { width: 20px; height: 20px; }
.pm-compact .pm-h { font-size: clamp(19px, 2.6vw, 22px); }
.pm-compact .pm-h .pm-eyebrow { display: block; margin-bottom: 1px; font: 600 10.5px var(--font-body); letter-spacing: 0.1em; }
.pm-compact { padding-bottom: 14px; }
/* the section's description: one line with an ellipsis and «Развернуть», all of it when unfolded (no height animation) */
.pm-desc { display: flex; align-items: baseline; gap: 4px 10px; min-width: 0; }
.pm-desc-t { margin: 0; min-width: 0; flex: 1 1 auto; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-desc-open { flex-wrap: wrap; }
.pm-desc-open .pm-desc-t { white-space: normal; overflow: visible; }
.pm-desc-b { flex: none; border: 0; padding: 0; background: none; color: var(--faint); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.pm-desc-b:hover, .pm-desc-b:focus-visible { color: var(--text); }
.pm-segs i { flex: 1; height: 4px; border-radius: 2px; background: rgb(var(--ink-t) / 0.12); }
.pm-segs i.st-done { background: var(--pm-acc); }
.pm-segs i.st-active, .pm-segs i.st-waiting { background: var(--yellow); }
.pm-segs i.st-soon { opacity: 0.5; }
.pm-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--pm-k, 4), minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pm-kpi { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgb(var(--ink-t) / 0.035); border: 1px solid var(--hair); }
.pm-kpi b { font: 700 18px/1.2 var(--font-display); overflow-wrap: anywhere; }
.pm-kpi span { font-size: 12px; color: var(--muted); }
.pm-kpi i { font-style: normal; font-size: 12px; color: var(--faint); }
.pm-kpi.pm-none b { color: var(--faint); }
/* MP50 SUB-6: a figure from the business audit gone stale greys; a stage kept as it is reads in the softened accent — its
   status chip («как было», `.pm-chip.st-done`) and its «Оставлено как есть» note (never the yellow of a running task) */
.pm-kpi.pm-stale b, .pm-kpi.pm-stale i { color: var(--faint); }
.pm-why { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 8px 10px; border-radius: 12px; background: rgb(var(--yellow-t) / 0.07); border: 1px solid rgb(var(--yellow-t) / 0.25); font-size: 13px; color: var(--muted); max-width: none; }
.pm-why.pm-kept { background: rgb(var(--pm-ac) / 0.07); border-color: rgb(var(--pm-ac) / 0.25); }
.pm-why.pm-kept .ico { color: var(--pm-acc); }
.pm-why .ico { width: 15px; height: 15px; color: var(--yellow); margin-top: 2px; }
.pm-why b { color: var(--text); font-weight: 600; }
.pm-why.pm-hid { background: rgb(var(--ink-t) / 0.04); border-color: var(--hair); }
.pm-why.pm-hid .ico { color: var(--faint); }

/* the level (D31-17): the badge with its ring to the next level, the bar, the ladder */
.pm-lvrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.pm-lvl { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; color: var(--yellow); font: 700 11px var(--font-display); }
.pm-lvl .pm-rt { stroke: rgb(var(--yellow-t) / 0.22); stroke-width: 7; }
.pm-lvl .pm-rp { stroke: var(--yellow); stroke-width: 7; }
.pm-lvl b { position: relative; }
.pm-lvl-big { width: 48px; height: 48px; font-size: 19px; }
.pm-lvt { display: grid; gap: 5px; min-width: 0; flex: 1; }
.pm-lvt b { font: 700 14px var(--font-display); color: var(--yellow); }
.pm-lvt > i { font-style: normal; font-size: 12px; color: var(--faint); }
.pm-grad { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pm-acc, currentColor); }
.pm-grad .ico { width: 14px; height: 14px; }
.pm-lvrow:hover .pm-lvt b { text-decoration: underline; text-underline-offset: 3px; }
.pm-xpbar { display: block; height: 5px; max-width: 340px; border-radius: 3px; background: rgb(var(--ink-t) / 0.1); overflow: hidden; }
.pm-xpbar i { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pm-acc), var(--yellow)); }

/* rings, discs, pips: a done node filled in the accent, the next step yellow with a soft halo, one not begun dashed */
.pm-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pm-rt, .pm-rp { fill: none; stroke-width: 3.5; }
.pm-rt { stroke: rgb(var(--ink-t) / 0.11); }
.pm-rp { stroke: var(--pm-acc); stroke-linecap: round; }
.pm-disc { position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--pm-disc); color: var(--pm-acc); flex: none; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pm-disc > .pm-i { position: relative; width: 22px; height: 22px; }
.pm-big { width: 68px; height: 68px; }
.pm-big > .pm-i, .pm-hero > .pm-i { width: 26px; height: 26px; }
.pm-mid { width: 56px; height: 56px; }
.pm-hero { width: 64px; height: 64px; }
.pm-xs { width: 26px; height: 26px; background: rgb(var(--pm-ac) / 0.14); }
.pm-xs .ico { width: 14px; height: 14px; }
.pm-disc.st-waiting { color: var(--yellow); }
.pm-disc.st-waiting .pm-rt { stroke: rgb(var(--yellow-t) / 0.3); }
.pm-disc.st-waiting .pm-rp { stroke: var(--yellow); }
.pm-disc.st-todo, .pm-disc.st-soon, .pm-disc.st-hidden, .pm-disc.st-locked { color: var(--faint); }
.pm-disc.st-waiting::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgb(var(--yellow-t) / 0.5); animation: pm-halo 2.6s ease-out infinite; }
/* a locked task (the operator 2026-10-16): the not-started look, a lock and one short line naming its blocker (a link);
   the spine between it and the row above dashed */
.pm-lockline { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
.pm-lockico { width: 12px; height: 12px; flex: none; }
.pm-locklink { color: inherit; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.pm-locklink:hover { color: var(--text); }
.pm-row.pm-locked .pm-rmain b { color: var(--muted); }
.pm-row.pm-locked:not(:first-child)::after { content: ''; position: absolute; left: 22px; top: -8px; height: 14px; border-left: 1px dashed rgb(var(--ink-t) / 0.22); }
/* the operator 2026-10-16: «Дальше» looks like a task not started (muted, dashed pip, no yellow, no pulse); the pulsing
   yellow ring and the hand are a task WAITING ON THE PERSON's alone; reduced motion: the ring static */
.pm-row.st-next .pm-rmain b { color: var(--muted); }
.pm-chip .pm-hand { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .pm-pip.st-waiting::before, .pm-disc.st-waiting::before { animation: none; transform: none; opacity: 1; } }
@keyframes pm-halo { from { transform: scale(0.82); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.pm-cu { position: absolute; top: -5px; right: -5px; z-index: 1; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); box-shadow: 0 0 0 2px #000; }
.pm-cu .ico { width: 10px; height: 10px; stroke-width: 2.2; }
.pm-pip { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--pm-disc); border: 1.5px solid var(--pm-acc); color: var(--pm-acc); flex: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pm-pip .pm-i { width: 16px; height: 16px; }
a.pm-pip:hover { transform: scale(1.14); }
.pm-pip.pm-sq { border-radius: 10px; }
.pm-pip.st-done { background: var(--pm-acc); border-color: var(--pm-acc); color: rgb(var(--pm-on-ac)); }
.pm-pip.st-active, .pm-pip.st-waiting { border-color: var(--yellow); color: var(--yellow); }
.pm-pip.st-todo, .pm-pip.st-next, .pm-pip.st-soon, .pm-pip.st-locked, .pm-pip.st-hidden { border-style: dashed; border-color: rgb(var(--ink-t) / 0.26); color: var(--faint); }
.pm-pip.pm-soon { opacity: 0.5; }
.pm-pip.st-waiting::before { content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid rgb(var(--yellow-t) / 0.55); animation: pm-halo 2.6s ease-out infinite; }
.pm-pip.st-active::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--yellow); animation: pm-spin 2.4s linear infinite; }
.pm-pip.pm-sq.st-active::before { border-radius: 14px; border: 1px solid rgb(var(--yellow-t) / 0.6); animation: pm-halo 2.6s ease-out infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-plus { font: 700 12px var(--font-display); color: var(--muted); border-style: dashed; border-color: rgb(var(--ink-t) / 0.28); }
.pm-sm { width: 28px; height: 28px; }
.pm-sm .pm-i { width: 13px; height: 13px; }
.pm-lg { width: 44px; height: 44px; }
.pm-lg .pm-i { width: 20px; height: 20px; }
.pm-pip[data-pm-tip]::after { content: attr(data-pm-tip); position: absolute; top: 50%; left: calc(100% + 10px); z-index: 6; transform: translate(-4px, -50%); opacity: 0; white-space: nowrap;
  background: rgba(12, 9, 8, 0.96); border: 1px solid var(--pm-line); border-radius: 8px; padding: 3px 9px; font: 500 12px/1.4 var(--font-body); color: var(--text); pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.pm-pip[data-pm-tip]:hover::after, .pm-pip[data-pm-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.pm-col.pm-right .pm-pip[data-pm-tip]::after { left: auto; right: calc(100% + 10px); transform: translate(4px, -50%); }
.pm-col.pm-right .pm-pip[data-pm-tip]:hover::after, .pm-col.pm-right .pm-pip[data-pm-tip]:focus-visible::after { transform: translate(0, -50%); }
.pm a:focus-visible, .pm button:focus-visible, .pm summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 14px; }
.pm .pm-pip:focus-visible, .pm .pm-node:focus-visible { border-radius: 50%; }

/* a level's children: one row on a wide screen (up to seven), on a phone up to five, more in two rows */
.pm-cols { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 26px; margin-top: 78px; --pm-c: var(--pm-n, 4); }
.pm-col { flex: 0 0 calc(100% / var(--pm-c)); display: flex; flex-direction: column; align-items: center; min-width: 0; padding-inline: 3px; }
.pm-node { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pm-node:hover .pm-disc { transform: scale(1.06); }
.pm-cap { display: grid; justify-items: center; text-align: center; min-width: 0; max-width: 100%; }
.pm-cap b { font: 600 15px/1.25 var(--font-display); overflow-wrap: anywhere; transition: color 0.25s; }
.pm-cap i { font-style: normal; font-size: 12px; color: var(--faint); }
.pm-cap i.t-n, .pm-cap i.t-a { color: var(--yellow); }
.pm-cap i.t-d { color: var(--pm-acc); }
.pm-node:hover .pm-cap b { color: var(--yellow); }
.pm-chain { display: grid; justify-items: center; gap: 14px; margin-top: 22px; }
.pm-group .pm-chain { gap: 10px; margin-top: 18px; }
.pm-group .pm-chain .pm-pip { width: 28px; height: 28px; }
.pm-group .pm-chain .pm-pip .pm-i { width: 13px; height: 13px; }
.pm-group .pm-pip.pm-sq { border-radius: 8px; }

/* the crumbs, the hub's row, «ещё», the legend, Fox's hint */
.pm-crumbs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 14px; }
.pm-sep { width: 14px; height: 14px; color: var(--faint); }
.pm-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; background: rgb(var(--pm-glass-t) / 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 14px 4px 6px; color: var(--muted); font: 600 13px var(--font-display); }
.pm a.pm-crumb:hover { color: var(--text); border-color: var(--pm-line); }
.pm-hubrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 10px; background: rgb(var(--ink-t) / 0.03); border: 1px solid var(--hair); border-radius: 12px; font-size: 13px; color: var(--muted); }
.pm-hubrow b { color: var(--text); font-weight: 600; }
.pm a.pm-hubrow:hover { border-color: var(--pm-line); }
.pm-hubrow > .ico:last-child { margin-left: auto; color: var(--faint); }
.pm-more { position: relative; z-index: 1; max-width: 560px; margin: 30px auto 0; border: 1px solid var(--hair); border-radius: 16px; background: var(--pm-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pm-more summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; list-style: none; cursor: pointer; font: 600 13px var(--font-display); color: var(--muted); }
.pm-more summary::-webkit-details-marker { display: none; }
.pm-more ul { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 4px; }
.pm-more li > a, .pm-more li > div { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; }
.pm-more li > a:hover { background: rgb(var(--ink-t) / 0.05); }
.pm-more li b { display: block; font: 600 14px var(--font-display); color: var(--text); }
.pm-more li i { display: block; font-style: normal; font-size: 12px; color: var(--faint); }
.pm-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 26px; font-size: 12px; color: var(--faint); }
.pm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pm-legend i { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--pm-acc); border-radius: 50%; }
.pm-legend i.pm-lg-sq { border-radius: 3px; border-style: dashed; border-color: rgb(var(--ink-t) / 0.4); }
.pm-legend i.pm-lg-done { background: var(--pm-acc); }
.pm-legend i.pm-lg-next { border-color: var(--yellow); }
.pm-legend .ico { width: 13px; height: 13px; color: var(--yellow); }
.pm-hint { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; margin-top: 34px; padding: 12px 14px; border-radius: 16px; background: rgba(28, 21, 8, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(var(--yellow-t) / 0.28); font-size: 14px; color: var(--muted); }
.pm-hint b { color: var(--text); font-weight: 600; }
.pm-hint > .ico:first-child { color: var(--yellow); margin-top: 2px; }
.pm-hint > .ico:last-child { margin-left: auto; color: var(--faint); }
.pm a.pm-hint:hover { border-color: rgb(var(--yellow-t) / 0.55); }

/* a timeline: the task rows on a spine — a stage's steps under its header, then its growth */
.pm-rows { position: relative; display: grid; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.pm-rows::before { content: ''; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 1px; background: rgb(var(--ink-t) / 0.14); }
.pm-row, .pm-sec { animation: pm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pm-d, 0ms) both; }
@keyframes pm-rise { from { opacity: 0; transform: translateY(10px); } }
.pm-row { position: relative; }
.pm-row.st-done:not(:last-child)::before { content: ''; position: absolute; left: 22px; top: 30px; height: calc(100% + 6px); width: 1px; background: rgb(var(--pm-ac) / 0.55); }
/* a row's details is the opened step (§ «the opened step» at the end: its frame, ground and line) */
.pm-row summary { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 14px; align-items: center; padding: 8px 0; list-style: none; cursor: pointer; }
.pm-row summary::-webkit-details-marker { display: none; }
.pm-rmain { display: grid; min-width: 0; }
.pm-rmain b { font: 600 16px/1.3 var(--font-display); }
.pm-rmain i { font-style: normal; font-size: 13px; color: var(--muted); }
.pm-row.st-todo .pm-rmain b, .pm-row.pm-soon .pm-rmain b { color: var(--muted); }
.pm-row summary:hover .pm-rmain b { color: var(--yellow); }
.pm-who.pm-mine { color: var(--yellow); }
/* who answers for a task: a small face and a name (the operator: «аватар и имя агента или аватар юзера и имя») */
.pm-resp { display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; vertical-align: middle; }
/* MP51 SUB-5: a task's open issues on its row's meta — a neutral chip, the semantic red only on its dot (never a fill) */
.pm-issues { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px solid var(--hair); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; vertical-align: middle; }
.pm-issues::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.pm-issues:hover { border-color: var(--muted); }
.pm-face { display: inline-flex; align-items: center; gap: 5px; }
/* every face in a circle with a thin light ring and a contrasting backing disc, so a dark artwork (Fox's) reads on the
   dark ground (the operator: «… в круге сделать с рамкой маленькой, а то не видно черт») */
.pm-face img, .pm-face b { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.25px rgb(var(--ink-t) / 0.4); }
.pm-face img { object-fit: cover; background: #ece7f4; }
.pm-face b { display: inline-grid; place-items: center; font: 700 8.5px/1 var(--font-display); color: var(--text); background: rgb(var(--ink-t) / 0.14); }
.pm-resp.pm-mine .pm-face-person span { color: var(--text); }
.pm-chev { color: var(--faint); transition: transform 0.3s; }
details[open] > summary .pm-chev { transform: rotate(90deg); }
.pm-rmore { display: grid; gap: 10px; padding: 2px 0 0 58px; }
.pm-rmore p { margin: 0; max-width: 62ch; font-size: 14px; color: var(--muted); }
.pm-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--faint); }
.pm-meta .ico { width: 14px; height: 14px; }
.pm-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 4px 58px; list-style: none; font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.pm-sec:first-child { margin-top: 4px; }
.pm-sec em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pm-acc); }
.pm-sec.pm-grow { color: var(--yellow); opacity: 0.85; }
.pm-tasks { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pm-tasks li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pm-cb { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid rgb(var(--ink-t) / 0.35); }
.pm-cb .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.pm-tasks li.pm-on .pm-cb { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.pm-tasks li.pm-on > span:last-child { color: var(--muted); text-decoration: line-through; }

/* loading: the card's skeleton (no spinner); an error with its retry */
.pm-skel { animation: pm-breathe 1.8s ease-in-out infinite alternate; }
@keyframes pm-breathe { from { opacity: 0.55; } to { opacity: 1; } }
.pm-skel .pm-pcard { min-height: 190px; }
.pm-skel .pm-pcard::after { display: none; }
.pm-sk { display: block; border-radius: 14px; background: rgb(var(--ink-t) / 0.06); }
.pm-sk-pic { aspect-ratio: 4 / 3; }
.pm-sk-lines { display: grid; gap: 12px; }
.pm-sk-lines i, .pm-sk-row i { display: block; height: 12px; border-radius: 6px; background: rgb(var(--ink-t) / 0.06); }
.pm-sk-lines i:nth-child(1) { width: 40%; }
.pm-sk-lines i:nth-child(2) { width: 75%; height: 22px; }
.pm-sk-lines i:nth-child(3) { width: 60%; }
.pm-sk-row { display: flex; justify-content: space-around; margin-top: 84px; }
.pm-sk-row i { width: 64px; height: 64px; border-radius: 50%; }
.pm-err { display: grid; justify-items: start; gap: 14px; }

/* the ladder: a sheet that dissolves in over the page */
.pm-ovl { --pm-ac: var(--team-ac); --pm-acc: rgb(var(--pm-ac)); position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgb(var(--ground-t) / 0.62); opacity: 0; transition: opacity 0.5s ease; }
.pm-ovl.pm-in { opacity: 1; }
.pm-ovl > .pm-sheet { transform: scale(0.97); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pm-ovl.pm-in > .pm-sheet { transform: none; }
.pm-sheet { display: grid; gap: 10px; width: min(460px, 100%); max-height: 86vh; overflow: auto; padding: 20px; border-radius: 22px; background: rgba(14, 10, 9, 0.98); border: 1px solid rgb(var(--ink-t) / 0.12); }
.pm-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-sh-h h2 { margin: 0; font: 700 20px var(--font-display); }
.pm-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--faint); cursor: pointer; }
.pm-x:hover, .pm-x:focus-visible { background: rgb(var(--ink-t) / 0.08); color: var(--text); }
.pm-sh-note { margin: 0; font-size: 13px; color: var(--muted); }
.pm-ladder { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.pm-ladder li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--muted); }
.pm-ln { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hair); font: 700 12px var(--font-display); }
.pm-ladder li.pm-l-past .pm-ln { background: var(--pm-acc); border-color: transparent; color: rgb(var(--pm-on-ac)); }
.pm-ladder li.pm-l-current { background: rgb(var(--yellow-t) / 0.08); color: var(--text); }
.pm-ladder li.pm-l-current .pm-ln { border-color: var(--yellow); color: var(--yellow); }
.pm-ladder i { font-style: normal; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* the level change (D31-7): the stage's old snapshot dissolves with a slight push toward the tapped node, the new one
   comes up under it; the root (the header, the picture) is not animated; no node carries a name */
html.pm-fin::view-transition-old(root), html.pm-fout::view-transition-old(root) { display: none; }
html.pm-fin::view-transition-new(root), html.pm-fout::view-transition-new(root) { animation: none; }
html.pm-fin::view-transition-group(pm-stage), html.pm-fout::view-transition-group(pm-stage) { animation: none; }
html.pm-fin::view-transition-old(pm-stage), html.pm-fin::view-transition-new(pm-stage), html.pm-fout::view-transition-old(pm-stage), html.pm-fout::view-transition-new(pm-stage) { mix-blend-mode: normal; transform-origin: var(--pm-ox, 50%) var(--pm-oy, 35%); }
html.pm-fin::view-transition-old(pm-stage) { animation: pm-out-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
html.pm-fin::view-transition-new(pm-stage) { animation: pm-in-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; }
html.pm-fout::view-transition-old(pm-stage) { animation: pm-out-out 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
html.pm-fout::view-transition-new(pm-stage) { animation: pm-in-out 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; }
@keyframes pm-out-in { to { opacity: 0; transform: scale(1.05); } }
@keyframes pm-in-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes pm-out-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes pm-in-out { from { opacity: 0; transform: scale(1.03); } }
/* the same without the API: the old level held where it was (`.pm-ghost`) over the new one */
.pm-ghost { position: absolute; top: var(--pm-top); left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; pointer-events: none; transform-origin: var(--pm-ox, 50%) var(--pm-oy, 35%); }
/* U276 (operator 2026-10-10): on a wide screen the companion's chat narrows the map instead of lying over it — the stage
   (and a dissolving level's ghost) starts past the chat's card (`--lw`, front.js `chatSide`, + its 12 px gap); the stage
   dissolves out, takes the width and dissolves back in (map-view.js `room`: opacity only). Below 1024 px the chat is a
   full-screen sheet over the map as over the page. */
.pm-stage { transition: opacity 0.45s ease; }
.pm-stage.pm-hush { opacity: 0; transition-duration: 0.16s; }
@media (min-width: 1024px) {
  .pm.pm-room .pm-stage, .pm.pm-room .pm-ghost { left: calc(var(--lw, 0px) + 12px); }
}
.pm-ghost > .pm-lv { transform: translateY(var(--pm-shift, 0px)); }
.pm-ghost *, .pm-ghost *::before, .pm-ghost *::after { animation: none !important; }
.pm-ghost.pm-g-in { animation: pm-out-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.pm-ghost.pm-g-out { animation: pm-out-out 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.pm-stage.pm-n-in, .pm-stage.pm-n-out { transform-origin: var(--pm-ox, 50%) var(--pm-oy, 35%); }
.pm-stage.pm-n-in { animation: pm-in-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; }
.pm-stage.pm-n-out { animation: pm-in-out 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; }

@media (min-width: 641px) {
  /* a page of branches keeps its card pinned while the branches scroll under it — dense ground, nothing shows through */
  .pm-lv > .pm-pin { position: sticky; top: 8px; z-index: 6; background: var(--pm-dense); -webkit-backdrop-filter: blur(24px) saturate(1.05); backdrop-filter: blur(24px) saturate(1.05); box-shadow: 0 14px 40px rgb(var(--shade-t) / 0.45); }
  .pm-lv > .pm-crumbs { z-index: 7; }
}
@media (min-width: 900px) {
  .pm-lv { max-width: 880px; padding-top: 22px; }
  .pm-pcard { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; padding: 18px; }
  .pm-cols { margin-top: 96px; }
  .pm-cap b { font-size: 16px; }
  .pm-big { width: 80px; height: 80px; }
  .pm-big > .pm-i { width: 30px; height: 30px; }
  .pm-mid { width: 64px; height: 64px; }
  .pm-mid > .pm-i { width: 24px; height: 24px; }
  .pm-hero { width: 72px; height: 72px; }
  .pm-root .pm-chain .pm-pip { width: 40px; height: 40px; }
  .pm-root .pm-chain .pm-pip .pm-i { width: 18px; height: 18px; }
  .pm-group .pm-chain .pm-pip { width: 32px; height: 32px; }
  .pm-group .pm-chain .pm-pip .pm-i { width: 15px; height: 15px; }
  .pm-chain { gap: 16px; }
}
@media (max-width: 640px) {
  /* the phone (03-ux.md § Phone): four directions in a row, a group's children five to a row (more in two), the card's
     picture 92 px and scrolling with the page, the rows without their indent; nothing scrolls sideways */
  .pm-lv { padding-inline: 12px; }
  .pm-pcard { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
  .pm-dcard, .pm-scard { gap: 14px; }
  .pm-cols { --pm-c: var(--pm-pn, 4); margin-top: 62px; }
  .pm-big { width: 58px; height: 58px; }
  .pm-mid { width: 40px; height: 40px; }
  .pm-mid > .pm-i { width: 17px; height: 17px; }
  .pm-hero { width: 54px; height: 54px; }
  .pm-cap b { font-size: 13px; }
  .pm-group .pm-cap b { font-size: 12px; }
  .pm-root .pm-chain .pm-pip { width: 30px; height: 30px; }
  .pm-group .pm-chain .pm-pip { width: 24px; height: 24px; }
  .pm-group .pm-chain .pm-pip .pm-i { width: 12px; height: 12px; }
  .pm-group .pm-chain { gap: 8px; margin-top: 14px; }
  .pm-stat b { font-size: 17px; }
  .pm-stats { gap: 4px 16px; }
  .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-kpi b { font-size: 16px; }
  .pm-row summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 10px; }
  .pm-row summary > .pm-chip, .pm-row summary > .pm-nochip { display: none; }
  .pm-lg { width: 40px; height: 40px; }
  .pm-rows::before, .pm-row.st-done:not(:last-child)::before { left: 20px; }
  .pm-rmore { padding-left: 0; }
  .pm-sec { margin-left: 0; }
  .pm-pip[data-pm-tip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pm *, .pm *::before, .pm *::after, .pm-ovl, .pm-ovl * { animation: none !important; transition: none !important; }
}

/* U278 (operator 2026-10-10): while there are words in the field «Твои идеи» is gone from the page, not only unseen — no
   empty page under the field to scroll into; it comes back softly once the field is cleared */
body.at-home.drafting .home-ideas { display: none; }
.home-ideas { animation: hi-back 1.4s ease both; }
@keyframes hi-back { from { opacity: 0; } }

/* U279 (operator 2026-10-10): the home is a newcomer's first screen — the line over the field is its headline (what to do,
   then what they get), on a dark halo so it reads over the pictures; the empty field calls softly until it is touched */
.idea-modal.home .nim-cap { white-space: normal; overflow: visible; margin: 0 0 22px; text-shadow: 0 2px 18px rgb(var(--veil-t) / 0.95), 0 0 2px rgb(var(--veil-t) / 0.9); }
.idea-modal.home .nim-cap::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(760px, 96vw); height: 150%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--veil-t) / 0.82), rgb(var(--veil-t) / 0.5) 60%, rgb(var(--veil-t) / 0)); }
.nim-cap-t { margin: 0; font: 700 clamp(26px, 3.2vw, 38px)/1.15 var(--font-display, var(--font-body)); letter-spacing: -0.01em; color: var(--text-hi); }
.nim-cap-s { margin: 8px 0 0; font: 500 clamp(14px, 1.3vw, 17px)/1.4 var(--font-body); color: rgb(var(--ink-t) / 0.78); }
/* U280: the field itself stays still — only a soft glow under it breathes (opacity only), until the field is touched */
.idea-modal.home .im-card .bar::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 44px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--lavender-t) / 0.55), rgb(var(--violet-t) / 0.22) 55%, rgb(var(--violet-t) / 0)); filter: blur(10px); opacity: 0; transition: opacity 0.6s ease; }
.idea-modal.home:not(.nim-typing):not(.nim-focus) .im-card .bar::after { animation: field-call 3.2s ease-in-out infinite; }
@keyframes field-call { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (max-width: 640px), (max-height: 500px) {
  .idea-modal.home .nim-cap { margin: 0 2px 12px; }
  .idea-modal.home .nim-cap::before { display: none; }
  .nim-cap-t { font-size: 24px; }
  .nim-cap-s { font-size: 13.5px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .idea-modal.home:not(.nim-typing):not(.nim-focus) .im-card .bar::after { animation: none; opacity: 0.6; } .home-ideas { animation: none; } }

/* U282 (operator 2026-10-10): the header's switcher is as wide as the open idea's or project's name — at least 280 px,
   at most the old 680 px; its list keeps its own width, centred under the button on a wide screen */
@media (min-width: 641px) {
  .switcher { width: auto; max-width: min(680px, 100%); }
  .sw-button { width: auto; min-width: 280px; max-width: 100%; grid-template-columns: 30px minmax(0, 1fr) auto auto; }
}
@media (min-width: 1024px) {
  .sw-panel { left: 50%; right: auto; width: min(680px, calc(100vw - 32px)); transform: translateX(-50%); }
}
/* a browser without anchor positioning, the site's header (the switcher at the row's right end): the list hangs from the
   bar's right gutter — centred under a button near the edge it ran past the viewport and scrolled the page sideways */
@supports not (anchor-name: --a) {
  @media (min-width: 1024px) {
    body.sn-on .switcher { position: static; }
    body.sn-on .sw-panel { left: auto; right: calc(16px - var(--bar-x)); width: min(560px, calc(100% + 2 * var(--bar-x) - 32px)); transform: none; }
  }
}

/* U283: the home never scrolls sideways — an idea pill pushed out by the focus spread (U235) or a far edge slot is
   clipped at the home's edge (clip, not hidden: no scroll box, the sticky header keeps working) */
#home { overflow-x: clip; }

/* U284 (operator 2026-10-10): the line's marks. Done — a violet ring and a violet icon (the stage's or the step's own icon,
   never a tick); the steps inside a stage the same at their smaller size. Ahead (bought, not run yet) — a dashed violet
   ring. Locked behind a payment — grey. A running mark keeps its green loader (U216). */
.concept-zone .stage-mk.run.st-done, .stage-final .stage-mk.run.st-done, .pg-mark .stage-mk.run.st-done,
.package-zone .stage-mk.concept.run.st-done { background: var(--bg); border: 1.5px solid var(--purple-text); color: var(--purple-text); }
.concept-zone .stage-mk.run.st-done .ico, .stage-final .stage-mk.run.st-done .ico, .pg-mark .stage-mk.run.st-done .ico,
.package-zone .stage-mk.concept.run.st-done .ico { stroke: var(--purple-text); }
.run-mk.st-done, .run-mk.st-ready { background: var(--bg); border-color: var(--purple-text); color: var(--purple-text); }
.run-mk.st-done .ico, .run-mk.st-ready .ico { stroke-width: 1.5; stroke: var(--purple-text); }
.concept-zone .stage-mk.run.st-locked, .concept-zone .stage-mk.run.st-pending, .stage-mk.concept.queued, .run-mk.st-pending,
.run-mk.st-locked { border: 1.5px dashed var(--purple-text); color: var(--purple-text); opacity: 0.85; }
.concept-zone .stage-mk.run.st-locked .ico, .stage-mk.concept.queued .ico, .run-mk.st-pending .ico { stroke: var(--purple-text); }
.concept-zone:not(.active) .stage-mk.locked.concept, .package-zone:not(.active) .stage-mk.locked.package { border: 1.5px dashed var(--faint); color: var(--faint); }
.concept-zone:not(.active) .stage-mk.locked .lk, .package-zone:not(.active) .stage-mk.locked .lk { color: var(--faint); border-color: var(--hair); }
.concept-zone:not(.active) .stage-mk.locked .ico, .package-zone:not(.active) .stage-mk.locked .ico { stroke: var(--faint); }

/* U286 (operator 2026-10-10): the goal card fills as the path goes — the future logo beside the name (the name's letters in
   a dashed gold frame until the brand stage draws one), the name and the domain as placeholders until their step, the
   path's share (U287), every stage's files by sections: a locked one dim with its lock, a queued one a dashed violet frame
   with a clock, one at work its loader, a made one its picture or icon (it opens in the panel), lit slowly when it lands. */
.goal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.goal-logo { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; overflow: hidden; }
.goal-logo.has-img { background: var(--bg); border: 1px solid rgb(var(--yellow-t) / 0.45); }
.goal-logo.has-img img { width: 100%; height: 100%; object-fit: contain; }
.goal-logo.future { border: 1.5px dashed rgb(var(--yellow-t) / 0.55); background: radial-gradient(circle at 30% 25%, rgb(var(--yellow-t) / 0.16), rgb(var(--purple-t) / 0.08) 70%); color: var(--yellow); }
.gl-mono { font: 800 21px/1 var(--font-display); letter-spacing: 0.02em; opacity: 0.85; }
.goal-logo .gl-ico { width: 24px; height: 24px; color: var(--yellow); opacity: 0.8; }
.goal-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; flex: 1 1 240px; }
.goal-name.future { font-size: 22px; font-weight: 600; color: var(--faint); }
.goal-head .dom.future { border: 1px dashed var(--hair); border-radius: 999px; padding: 1px 10px; color: var(--faint); }
.goal-path { margin-left: auto; display: grid; gap: 6px; justify-items: end; min-width: 132px; }
.gp-top { display: flex; align-items: baseline; gap: 6px; }
.gp-n { font: 700 22px/1 var(--font-display); color: var(--yellow); }
.gp-l { font-size: 12.5px; color: var(--muted); }
.gp-bar { position: relative; display: block; width: 132px; height: 6px; border-radius: 999px; background: rgb(var(--ink-t) / 0.1); overflow: hidden; }
.gp-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--purple-text), var(--yellow)); transition: width 1.2s ease; }
.goal-soon { margin: 0; font-size: 14px; }
.have-g.g-check { --gc: #38bdf8; }
.have-g.g-concept { --gc: #c084fc; }
.have-b .hb-st { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.have-b .hb-st .ico { width: 14px; height: 14px; color: var(--faint); }
.have-b .qspin { flex: none; }
.have-b.st-locked { border-style: dashed; border-color: rgb(var(--ink-t) / 0.16); color: var(--muted); }
.have-b.st-locked:hover, .have-b.st-locked:focus-visible, .have-b.st-locked.on { border-color: rgb(var(--ink-t) / 0.4); color: var(--text); }
.have-b.st-queued { border-style: dashed; border-color: rgb(var(--lilac-t) / 0.55); color: var(--muted); }
.have-b.st-queued .hb-st .ico { color: var(--purple-text); }
.have-b.st-working { border-color: rgba(74, 222, 128, 0.55); }
.have-b.fresh { animation: goal-fresh 1.8s ease both; }
@keyframes goal-fresh { from { opacity: 0.2; box-shadow: 0 0 0 0 transparent; } 60% { opacity: 1; box-shadow: 0 0 22px -4px var(--gc); } to { opacity: 1; box-shadow: 0 0 0 0 transparent; } }
.hc-unlock { display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.hc-unlock .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.hc-unlock .hc-price { display: block; font-weight: 400; color: var(--muted); }
.hc-unlock.locked, .hc-unlock.locked .ico { color: var(--yellow); }
.hc-unlock.queued, .hc-unlock.queued .ico { color: var(--purple-text); }
.hc-unlock.live, .hc-unlock.ready { color: #4ade80; }
/* U287: the path's share in the header and the switcher — a thin bar and the per cent; gold at 100 (the «1») */
.path-pct { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-display); color: var(--purple-text); white-space: nowrap; }
.pp-bar { position: relative; display: block; width: 34px; height: 4px; border-radius: 999px; background: rgb(var(--ink-t) / 0.12); overflow: hidden; }
.pp-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); border-radius: inherit; background: var(--purple-text); }
.path-pct.full { color: var(--yellow); }
.path-pct.full .pp-bar > i { background: var(--yellow); }
@media (min-width: 641px) { .sw-button .sw-state { display: inline-flex; align-items: center; gap: 8px; } }
.sw-opt.tier-concept, .sw-opt.tier-package { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.sw-o-pct { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
/* the operator 2026-10-21: an unfinished concept's or project's path — a plain bar at the row's bottom, in the level's place */
.sw-o-bar { grid-column: 2; display: block; padding-top: 3px; }
.sw-o-bar .pp-bar { width: 100%; max-width: 220px; height: 4px; }
.sw-o-pct + .sw-o-acts { grid-column: 4; }
.sw-mono { font: 800 11px/1 var(--font-display); color: var(--yellow); letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .goal-logo { width: 44px; height: 44px; border-radius: 13px; }
  .gl-mono { font-size: 17px; }
  .goal-path { margin-left: 0; justify-items: start; flex-basis: 100%; }
  .gp-bar { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .have-b.fresh { animation: none; } .gp-bar > i { transition: none; } }
/* U290 (operator 2026-10-10): the goal's gold frame is dashed until the path is walked to «1», solid once it is */
.goal-card.ahead { border-style: dashed; }
/* U291 (operator 2026-10-10): the goal's description sits right under its name, beside the logo; no caption over the files */
.goal-id { display: grid; gap: 4px; align-content: center; }
.gi-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.goal-id .goal-desc { flex-basis: auto; white-space: normal; overflow: visible; font-size: 15px; line-height: 1.4; }
@media (max-width: 640px) { .goal-id { flex: 1 1 0; } }

/* MP22 SUB-19: «Изменить концепцию» (front.js block «MP22 SUB-19», concept-versions-model.js) — the switcher at the top of
   the concept's zone (the revision node's look: «Версия N», a chip per version, the main one marked; the bar while another
   version is read), the button on the product card, the sheet (a dialog on a wide screen, a bottom sheet below 640 px)
   with its three rows and their price chips, and the slow opacity dissolve between versions (no flying morph). */
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px var(--font-display); cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.cv-chip small { font: 500 11.5px var(--font-body); color: var(--faint); }
.cv-chip:hover, .cv-chip:focus-visible { border-color: var(--purple-text); color: var(--text); }
.cv-chip:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 2px; }
.cv-chip.on { background: var(--tint-strong); border-color: var(--purple-text); color: var(--text); }
.cv-chip.main small { color: var(--yellow); }
.cv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--yellow-tint); border: 1px solid rgb(var(--yellow-t) / 0.35); font-size: 14px; }
.cv-bar > span:first-child { flex: 1 1 220px; min-width: 0; }
.cv-bar-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-bar .btn { padding: 8px 16px; font-size: 14px; }
.cv-note:empty { display: none; }
.cv-note { margin: 0; font-size: 13px; }
.prod-acts { display: flex; margin-top: 4px; }
/* the zone's buttons are green; the quiet ones (the card's «Изменить концепцию», «К основной версии», the cancel) are lines */
.concept-zone .cv-card .btn.line, .concept-zone .prod-acts .btn.line { background: transparent; color: var(--text); border: 1.5px solid rgb(var(--ink-t) / 0.28); box-shadow: none; }
.concept-zone .cv-card .btn.line:hover, .concept-zone .cv-card .btn.line:focus-visible, .concept-zone .prod-acts .btn.line:hover, .concept-zone .prod-acts .btn.line:focus-visible { background: rgb(var(--ink-t) / 0.06); border-color: rgb(var(--ink-t) / 0.45); box-shadow: none; }
.prod-acts .cv-open { padding: 8px 16px; font-size: 14px; }
.prod-acts .cv-open .ico { width: 16px; height: 16px; }
.concept-zone.cv-out { opacity: 0; transition: opacity 0.45s ease; }
.concept-zone.cv-in { animation: cv-in 1s ease both; }
@keyframes cv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cv-sheet { position: fixed; inset: 0; z-index: 160; display: grid; place-items: start center; padding: min(10vh, 90px) 16px 16px; opacity: 0; transition: opacity 0.32s ease; }
.cv-sheet[hidden] { display: none; }
.cv-sheet.in { opacity: 1; }
.cv-sheet-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.5); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }
.cv-panel { position: relative; width: min(680px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 18px 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; transform: translateY(8px); transition: transform 0.32s ease; }
.cv-sheet.in .cv-panel { transform: none; }
.cv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cv-top h2 { margin: 0; font-size: 20px; }
.cv-body { display: grid; gap: 14px; min-width: 0; }
.cv-body > p { margin: 0; }
.cv-lead, .cv-other { font-size: 13.5px; }
.cv-locked { padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(var(--yellow-t) / 0.35); background: var(--yellow-tint); font-size: 14px; }
.cv-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--hair); border-radius: 16px; background: var(--tint); min-width: 0; }
.cv-row > p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.cv-row-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.cv-row-h h3 { margin: 0; font: 700 16px var(--font-display); }
.cv-price { font: 600 13px var(--font-display); color: var(--muted); white-space: nowrap; }
.cv-price.k-free, .cv-price.k-freeMonth, .cv-price.k-held { color: var(--good); }
.cv-price.k-soon { color: var(--faint); }
.cv-ways { display: grid; gap: 10px; }
.cv-way { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--hair); border-radius: 14px; }
.cv-way.now { border-color: var(--line); opacity: 0.75; }
.cv-way .way-pic { width: 88px; height: 66px; }
.cv-way-main { display: grid; gap: 6px; min-width: 0; }
.cv-way-t { font: 700 15px var(--font-display); }
.cv-way-o { font-size: 13px; line-height: 1.4; }
.cv-way .cv-go { justify-self: start; padding: 8px 16px; font-size: 14px; }
.cv-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.cv-field textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--ground-t) / 0.35); color: var(--text); font: 400 15px/1.45 var(--font-body); resize: vertical; }
.cv-field textarea:focus { outline: 2px solid var(--purple-text); outline-offset: 1px; }
.cv-mic { position: relative; display: grid; grid-auto-flow: column; place-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgb(var(--ink-t) / 0.14); border-radius: 22px; background: rgb(var(--ink-t) / 0.06); color: rgb(var(--ink-t) / 0.85); cursor: pointer; }
.cv-mic .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-mic.rec { border-color: #dc2626; background: #dc2626; color: #fff; }
.cv-mic.rec .ico { fill: currentColor; stroke: none; }
.cv-mic:not(.rec) .nim-rec-t { display: none; }
.cv-mic.busy { cursor: progress; opacity: 0.8; }
.cv-mic:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 2px; }
.cv-row > .cv-go { justify-self: start; }
.cv-go { white-space: normal; flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
.cv-go-p { white-space: nowrap; }
.cv-go[disabled] { opacity: 0.5; cursor: not-allowed; }
#cv-note { color: var(--bad); font-size: 13.5px; }
#cv-note:empty { display: none; }
@media (max-width: 640px) {
  .cv-sheet { place-items: end stretch; padding: 0; }
  .cv-panel { width: 100%; max-height: calc(100dvh - var(--kb, 0px) - 24px); margin-bottom: var(--kb, 0px); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
  .cv-way { grid-template-columns: 64px minmax(0, 1fr); }
  .cv-way .way-pic { width: 64px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .concept-zone.cv-out, .concept-zone.cv-in, .cv-sheet, .cv-panel { animation: none !important; transition: none !important; }
}

/* U295 (operator 2026-10-10): the choice after the check — the deep research card on the left (what is done and why,
   «Выбрать этот путь»), the other ideas stacked on the right, each a free check; chosen, the card folds to a small «Твой
   выбор» and the line goes on to the second fork («Сам или с агентом?») and the green zone as before. */
.fk-choice .fc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-left: calc(var(--mk) + var(--mk-gap)); }
.fk-choice .fc-grid.solo { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.fc-deep { position: relative; z-index: 1; display: grid; gap: 10px; padding: 18px 20px; border: 1px solid rgb(var(--lilac-t) / 0.55); border-radius: 18px; background: radial-gradient(90% 120% at 0% 0%, rgb(var(--purple-t) / 0.2), transparent 60%), rgb(var(--pane-2-t) / 0.82); }
.fc-deep h4 { margin: 0; font: 700 20px/1.25 var(--font-display); color: var(--text); }
.fc-deep p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fc-deep .fc-why b { color: var(--text); }
.fc-deep .fc-meta { font-size: 13px; color: var(--purple-text); }
.fc-deep .fc-deep-go { justify-self: start; margin-top: 4px; }
.fc-deep .fc-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid rgb(var(--lilac-t) / 0.25); }
.fc-deep .fc-video { background: #0b0f14; object-fit: cover; } /* MP41 SUB-24: the voiced offer video in the picture's place */
.fc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--purple-t) / 0.18); color: var(--purple-text); }
.fc-ico .ico { width: 22px; height: 22px; }
.fc-alt { position: relative; z-index: 1; display: grid; gap: 8px; align-content: start; }
.fc-alt-h { font: 600 14px/1.3 var(--font-display); color: var(--yellow); padding: 2px 2px 4px; }
.fc-alt .fc-var { background: rgb(var(--pane-2-t) / 0.78); }
.fk-choice.made .fc-made { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-left: calc(var(--mk) + var(--mk-gap)); padding: 10px 14px; border: 1px solid rgb(var(--lilac-t) / 0.45); border-radius: 14px; background: rgb(var(--pane-2-t) / 0.78); max-width: 720px; }
.fc-made .fc-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.fc-made-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fc-made-t b { font: 600 15px/1.3 var(--font-display); }
.fc-chosen { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple-text); }
.fc-change { flex: none; border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fc-change:hover, .fc-change:focus-visible { color: var(--text); }
.fc-in { animation: fc-in 0.9s ease both; }
@keyframes fc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .fk-choice .fc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .fk-choice .fc-grid, .fk-choice.made .fc-made { margin-left: 0; } .fc-deep { padding: 16px; } .fc-deep h4 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .fc-in { animation: none; } }
/* U294 (operator 2026-10-10; U303: checks are always free — no price chip, no tooltip, no day's checks): the wallet
   (front.js block «U294», wallet-model.js) — the header's balance in money (a gold pill that opens the sheet; on a phone's
   home a compact one, on a phone's idea page the avatar's menu and the hub's sheets carry it), and the wallet's sheet — a
   dialog on a wide screen, a bottom sheet below 641 px — with the balance and «Пополнить», the bonuses, the top-up
   amounts. Slow opacity dissolves only. */
/* the header's balance */
.wl-b { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px 0 12px; border: 1px solid rgb(var(--yellow-t) / 0.35); border-radius: 999px; background: rgb(var(--yellow-t) / 0.08); color: var(--yellow); font: 700 15px var(--font-display); white-space: nowrap; cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease; }
.wl-b[hidden] { display: none; }
.wl-b .ico { width: 18px; height: 18px; }
.wl-b:hover, .wl-b:focus-visible, .wl-b[aria-expanded='true'] { border-color: rgb(var(--yellow-t) / 0.7); background: rgb(var(--yellow-t) / 0.14); }
.hub-wallet { display: none; }
.me-wallet:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.me-wallet .ico { width: 17px; height: 17px; color: var(--yellow); }
.me-wallet b { margin-left: auto; color: var(--yellow); font: 700 14.5px var(--font-display); }
/* the sheet */
.wl-sheet { position: fixed; inset: 0; z-index: 170; display: grid; place-items: start center; padding: min(12vh, 110px) 16px 16px; opacity: 0; transition: opacity 0.32s ease; }
.wl-sheet[hidden] { display: none; }
.wl-sheet.in { opacity: 1; }
.wl-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.5); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); }
.wl-panel { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 16px 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; transform: translateY(8px); transition: transform 0.32s ease; }
.wl-sheet.in .wl-panel { transform: none; }
.wl-top { display: flex; align-items: center; gap: 8px; }
.wl-top h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 20px; }
.wl-top .sw-close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.wl-top .sw-close[hidden] { display: none; }
.wl-prev .ico { width: 18px; height: 18px; }
.wl-body { display: grid; gap: 12px; min-width: 0; transition: opacity 0.24s ease, transform 0.24s ease; }
.wl-body.out { opacity: 0; transform: translateY(4px); }
.wl-body > p { margin: 0; }
.wl-bal { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid rgb(var(--yellow-t) / 0.3); border-radius: 18px; background: linear-gradient(135deg, rgb(var(--yellow-t) / 0.13), rgb(var(--purple-t) / 0.1)); }
.wl-bal-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(var(--yellow-t) / 0.16); color: var(--yellow); }
.wl-bal-ico .ico { width: 22px; height: 22px; }
.wl-bal-main { display: grid; gap: 2px; min-width: 0; }
.wl-k { color: var(--muted); font-size: 13px; }
.wl-amt { color: var(--text-hi); font: 700 28px/1.1 var(--font-display); white-space: nowrap; }
.wl-topup { padding: 10px 16px; font-size: 14.5px; }
.wl-topup .ico { width: 16px; height: 16px; }
.wl-h { margin: 6px 2px 0; color: var(--faint); font: 600 12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.wl-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--hair); border-radius: 16px; background: var(--tint); min-width: 0; }
.wl-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(var(--purple-t) / 0.14); color: var(--purple-text); }
.wl-ico .ico { width: 17px; height: 17px; }
.wl-ico.gift { background: rgb(var(--yellow-t) / 0.14); color: var(--yellow); }
.wl-bonuses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wl-bonus { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.wl-bonus-main { display: grid; gap: 2px; min-width: 0; }
.wl-bonus-main b { font: 600 14.5px var(--font-body); }
.wl-bonus-main span { font-size: 13px; line-height: 1.4; }
.wl-tag { padding: 4px 10px; border: 1px solid var(--hair); border-radius: 999px; color: var(--muted); font: 600 12.5px var(--font-body); white-space: nowrap; }
.wl-tag.on { border-color: rgb(var(--good-t) / 0.4); background: rgb(var(--good-t) / 0.1); color: var(--good); }
.wl-lead { font-size: 13.5px; line-height: 1.45; }
.wl-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wl-amount { min-height: 58px; padding: 8px; border: 1.5px solid var(--hair); border-radius: 14px; background: rgb(var(--ink-t) / 0.03); color: var(--text); font: 700 18px var(--font-display); cursor: pointer; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.wl-amount:hover { border-color: rgb(var(--yellow-t) / 0.45); }
.wl-amount.on { border-color: var(--yellow); background: var(--yellow-tint); color: var(--text-hi); box-shadow: 0 0 0 3px rgb(var(--yellow-t) / 0.12); }
.wl-amount:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.wl-after { margin: 0; color: var(--muted); font-size: 14px; }
.wl-pay { width: 100%; padding: 13px 20px; }
.wl-pay-p { font-weight: 700; }
.toast.t-info .toast-ico { color: var(--yellow); background: var(--yellow-tint); }
/* a mid-width header is full (the switcher, «Новая идея», the hub): the money alone, no wider than the Stars were */
@media (min-width: 641px) and (max-width: 1279px) {
  .hub > .wl-b { gap: 0; padding: 0 13px; font-size: 14px; }
  .hub > .wl-b .ico { display: none; }
}
@media (max-width: 640px) {
  .hub > .wl-b { display: none; }
  body.at-home .hub > .wl-b:not([hidden]) { display: inline-flex; height: 40px; padding: 0 12px 0 10px; font-size: 14px; }
  .hub-wallet { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 8px 12px 8px 10px; border: 1px solid rgb(var(--yellow-t) / 0.3); border-radius: 12px; background: rgb(var(--yellow-t) / 0.08); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .hub-wallet .hub-ico { background: rgb(var(--yellow-t) / 0.16); color: var(--yellow); }
  .hub-wallet b { color: var(--yellow); font: 700 17px var(--font-display); }
  .wl-sheet { place-items: end stretch; padding: 0; }
  .wl-panel { width: 100%; max-height: calc(100dvh - 24px); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .wl-amt { font-size: 26px; }
  .wl-bal { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 14px; }
  .wl-bal-ico { width: 42px; height: 42px; }
}
/* a narrow phone's home: the balance is its icon (the amount is in the sheet and the avatar's menu) */
@media (max-width: 379px) {
  body.at-home .hub > .wl-b:not([hidden]) { width: 40px; padding: 0; justify-content: center; }
  body.at-home .hub > .wl-b .wl-b-amt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-b, .wl-sheet, .wl-panel, .wl-body, .wl-amount { transition: none !important; }
}

/* U300 (2026-10-10): the header's switcher never runs into «Новая идея» or the «+» — no wider than its cell (its 280 px
   floor gives way below that), the tier chip and the path's bar dropped below 1100 px (the per cent stays), nothing on
   the right of it on a phone (U287's chip had beaten the phone's `.sw-state { display: none }`) */
@media (min-width: 641px) { .switcher { min-width: 0; } .sw-button { min-width: min(280px, 100%); } }
@media (min-width: 641px) and (max-width: 1100px) { .sw-button .tier-chip, .sw-button .pp-bar, .sw-button .sw-lvl, .sw-button .sw-grad, .sw-button .audit-badge { display: none; } }

/* Site header (the operator 2026-10-14: «в лк должен быть хедер как в сео сайте»; front.js block «Site header»,
   site-nav.js): on the web the cabinet's header is the site's — apps/web `header.css` (the bar, the nav with its section
   colours and the «here» badge, the Lab's and «Развитие проекта»'s mega menus, the Знания dropdown, «Войти», the burger)
   and `site.css`'s mobile sheet, ported under `sn-` with the site's tokens; the bar, its height (75 px, 61 px on a phone),
   the logo, «+ Новая идея» and the avatar's row were already the same (the site's header was ported from this one). The
   cabinet's own controls stand where the site has «Войти». Dark only (the front is). Inside Telegram none of it is drawn. */
:root {
  --sn-c-find: var(--yellow); --sn-c-check: var(--purple-text); --sn-c-projects: #ee8c5e; --sn-c-know: #c3a6f5; --sn-c-company: #d7d0e6;
  --sn-panel: #0d0b14; --sn-row-hover: rgba(255, 255, 255, 0.05); --sn-panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  --sn-hair-2: rgba(255, 255, 255, 0.16); --sn-faint: #8a83a0; --sn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sn-badge-ink: var(--yellow); --sn-badge-line: rgba(255, 194, 51, 0.4); --sn-badge-line-faint: rgba(255, 194, 51, 0.22);
}
.sn-c-find { --sn-c: var(--sn-c-find); }
.sn-c-check { --sn-c: var(--sn-c-check); }
.sn-c-projects { --sn-c: var(--sn-c-projects); }
.sn-c-know { --sn-c: var(--sn-c-know); }
.sn-c-company { --sn-c: var(--sn-c-company); }
/* the row: brand · nav · switcher · actions above 960 px (the site's grid and widths), the nav in the burger below */
body.sn-on .top-row { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; max-width: 1360px; }
body.sn-on.at-home .top-row { max-width: 100vw; }
body.sn-on .switcher { justify-self: end; width: min(420px, 100%); }
@media (max-width: 1240px) { body.sn-on .switcher { width: min(320px, 100%); } }
/* «+ Новая идея» is the site's round «+» at 1240 px and below (the nav takes the room its words had; 1023 px and below
   it already was, U152) */
@media (min-width: 1024px) and (max-width: 1240px) { body.sn-on .topbar .new-idea .lbl { display: none; } body.sn-on .topbar .new-idea { width: 46px; padding: 0; justify-content: center; } }
@media (max-width: 1180px) { body.sn-on .top-row { gap: 8px; padding-left: 16px; padding-right: 16px; } body.sn-on .top-actions { gap: 6px; } }
@media (max-width: 960px) {
  body.sn-on .top-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.sn-on .switcher { justify-self: center; width: min(680px, 100%); }
  .sn-nav, .sn-mega, .sn-drop { display: none !important; }
}
@media (max-width: 640px) { body.sn-on .top-row { gap: 10px; padding: 8px 12px; } body.sn-on.at-home .top-row { padding-left: 16px; padding-right: 16px; } }
/* a phone's row with the burger: the switcher is its ring alone (its name is in its label and on the page — as U205 below 350 px) */
@media (max-width: 440px) {
  body.sn-on .top-actions, body.sn-on .hub { gap: 4px; }
  body.sn-on .top-row { gap: 6px; }
  body.sn-on .sw-button:not(.listing) .sw-chev { display: none; }
  body.sn-on .sw-button:not(.listing) { grid-template-columns: 28px; padding: 5px; }
}
/* a narrow phone: «+ Новая идея» lives in the burger's sheet (its foot) and the switcher's first row — the row keeps the rest */
@media (max-width: 379px) { body.sn-on .top-row, body.sn-on.at-home .top-row { gap: 4px; padding-left: 8px; padding-right: 8px; } body.sn-on .top-actions, body.sn-on .hub { gap: 3px; } body.sn-on .topbar .new-idea { display: none; } }
/* the nav: each section its colour, the current one the yellow badge; a section with a menu is a pair (link + caret) */
.sn-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sn-nv { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 600 15px/1 var(--font-body); white-space: nowrap; cursor: pointer; text-decoration: none; transition: color 0.5s var(--sn-ease); }
.sn-nv:hover { color: var(--text); text-decoration: none; }
.sn-nv::before { content: ''; position: absolute; inset: 9px 2px; z-index: -1; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sn-badge-line-faint); opacity: 0; transition: opacity 0.5s var(--sn-ease); }
.sn-nv:hover::before { opacity: 1; }
.sn-nv:focus-visible, .sn-tog:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 999px; }
.sn-t { display: inline-grid; justify-items: center; }
.sn-t::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font: 600 12.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.sn-nv.here { color: var(--sn-badge-ink); }
.sn-nv.here .sn-t { font: 600 12.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.sn-nv.here::before { opacity: 1; box-shadow: inset 0 0 0 1px var(--sn-badge-line); }
.sn-pair { position: relative; isolation: isolate; display: inline-flex; align-items: center; border-radius: 999px; }
.sn-pair::before { content: ''; position: absolute; inset: 9px 2px; z-index: -1; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sn-badge-line-faint); opacity: 0; transition: opacity 0.5s var(--sn-ease); }
.sn-pair:hover::before, .sn-pair:has(.sn-tog[aria-expanded='true'])::before { opacity: 1; }
.sn-pair.here::before { opacity: 1; box-shadow: inset 0 0 0 1px var(--sn-badge-line); }
.sn-pair > .sn-nv { padding-right: 0; }
.sn-pair > .sn-nv::before { display: none; }
.sn-pair:has(.sn-tog[aria-expanded='true']) > .sn-nv:not(.here) { color: var(--text); }
.sn-tog { display: inline-grid; place-items: center; height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.sn-tog:hover { color: var(--text); }
.sn-tog .ico { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.5s var(--sn-ease), opacity 0.5s var(--sn-ease), color 0.5s var(--sn-ease); }
.sn-tog[aria-expanded='true'] .ico { transform: rotate(180deg); opacity: 1; color: var(--sn-badge-ink); }
.sn-pair.here .sn-tog .ico { color: var(--sn-badge-ink); opacity: 1; }
@media (max-width: 1180px) { .sn-nav { gap: 0; } .sn-nv { padding-inline: 8px; font-size: 14.5px; } .sn-tog { padding: 0 8px 0 4px; } }
@media (max-width: 1080px) { .sn-nv { padding-inline: 9px; } }
/* the menus: the Lab's and «Развитие проекта»'s hang from the bar across it, the Знания dropdown under its pill */
.sn-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 91; padding: 8px 20px 0; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.5s var(--sn-ease), transform 0.6s var(--sn-ease), visibility 0s linear 0.6s; }
.sn-mega.open, .sn-drop.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.5s var(--sn-ease), transform 0.6s var(--sn-ease), visibility 0s; }
.sn-card { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr) 248px; gap: 6px; padding: 10px; background: var(--sn-panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sn-panel-shadow); }
.sn-mega-proj .sn-card { grid-template-columns: repeat(4, minmax(0, 1fr)) 264px; }
/* «Развитие проекта»'s side: «Наши продукты» over the project map's card (the site's header-overlays.css .mg-side) */
.sn-side { display: grid; gap: 6px; align-content: start; min-width: 0; border-left: 1px solid var(--hair); padding-left: 6px; }
.sn-col { display: grid; gap: 2px; align-content: start; min-width: 0; }
.sn-col + .sn-col { border-left: 1px solid var(--hair); padding-left: 6px; }
.sn-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 10px 6px; font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-faint); }
.sn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sn-c); }
.sn-list { display: grid; gap: 2px; }
.sn-list.two { grid-template-columns: 1fr 1fr; }
.sn-mi { position: relative; isolation: isolate; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1px 10px; align-items: center; padding: 8px 12px 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.sn-mi:hover { text-decoration: none; }
.sn-mi::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sn-row-hover); opacity: 0; transition: opacity 0.5s var(--sn-ease); }
.sn-mi:hover::before { opacity: 1; }
.sn-mi:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }
.sn-mi-ico { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--sn-c) 15%, transparent); color: var(--sn-c); }
.sn-mi-ico .ico { width: 17px; height: 17px; }
.sn-mi b { font: 600 14.5px/1.3 var(--font-display); color: var(--text); }
.sn-mi-d { font-size: 12.5px; line-height: 1.35; color: var(--sn-faint); }
.sn-badge { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 600 12px/1.5 var(--font-display); font-style: normal; color: var(--yellow); background: var(--yellow-tint); border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); vertical-align: 1px; white-space: nowrap; }
.sn-mi.planned::before { display: none; }
.sn-mi.planned b { color: var(--muted); }
.sn-agent { position: relative; isolation: isolate; display: grid; gap: 8px; align-content: start; margin: 2px; padding: 16px; border-radius: 12px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--purple-text) 7%, transparent); color: var(--text); text-decoration: none; }
.sn-agent:hover { text-decoration: none; }
.sn-agent::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sn-row-hover); opacity: 0; transition: opacity 0.5s var(--sn-ease); }
.sn-agent:hover::before { opacity: 1; }
.sn-agent img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--line); }
.sn-agent b { font: 700 16px/1.25 var(--font-display); }
.sn-agent > span:not(.sn-go):not(.sn-map-ico) { font-size: 13px; line-height: 1.45; color: var(--muted); }
.sn-go { font: 600 14px var(--font-display); color: var(--yellow); }
.sn-map-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sn-c) 16%, transparent); color: var(--sn-c); box-shadow: 0 0 0 2px var(--line); }
.sn-map-ico .ico { width: 26px; height: 26px; }
.sn-map small { font-size: 12px; line-height: 1.4; color: var(--sn-faint); }
.sn-drop { position: absolute; left: -8px; top: calc(100% + 25px); z-index: 91; min-width: 320px; padding: 6px; background: var(--sn-panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sn-panel-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity 0.5s var(--sn-ease), transform 0.6s var(--sn-ease), visibility 0s linear 0.6s; --sn-c: var(--sn-c-know); }
/* the site's ONE rule for the header's panels (apps/web header.css, 0to1-98, 2026-10-14: «непонятно почему Лаб выровнено
   по левой стороне, а Гроус по центру»), mirrored: every panel opens under its own trigger, its LEFT EDGE AT THE TRIGGER'S
   LEFT EDGE, clamped inside the viewport with a 16 px gutter (it slides left only as far as its width needs). The Lab's
   and «Развитие проекта»'s mega menus (one card each, at most 1120 px) hang from the bar's bottom edge under their pill;
   the Знания dropdown under its pill (`left: 0` of its pair); the idea switcher's panel under its button. CSS anchor
   positioning: the panel's containing block is the bar (`.topbar`, sticky), `anchor(left)` its trigger's left edge, the
   clamp's bounds the viewport's gutters in the bar's coordinates — `--bar-x`, the bar's padding box from the viewport's
   edge (13 px inside an idea: the 12 px float and its hairline, U204; 1 px at home; 0 on a phone). A browser without it
   keeps the old placement (the megas across the bar, the switcher's panel centred at ≥ 1024 px); no script reads the
   layout. Pinned in Chromium by front-site-chromium.test.ts. */
.topbar { --bar-x: 13px; }
body.at-home .topbar { --bar-x: 1px; }
@media (max-width: 640px) { .topbar, body.at-home .topbar { --bar-x: 0px; } }
.sn-drop { left: 0; }
@supports (anchor-name: --a) {
  .sn-pair:has(> .sn-tog[aria-controls='sn-mega']) { anchor-name: --zo-sn-mega; }
  .sn-pair:has(> .sn-tog[aria-controls='sn-proj']) { anchor-name: --zo-sn-proj; }
  #sn-mega { position-anchor: --zo-sn-mega; }
  #sn-proj { position-anchor: --zo-sn-proj; }
  .sn-mega { --pw: min(1120px, calc(100% + 2 * var(--bar-x) - 32px)); right: auto; width: var(--pw); padding: 8px 0 0; left: clamp(calc(16px - var(--bar-x)), anchor(left), calc(100% + var(--bar-x) - 16px - var(--pw))); }
  .sn-mega .sn-card { margin: 0; max-width: none; }
  @media (min-width: 641px) {
    .sw-button { anchor-name: --zo-sw; }
    .switcher { position: static; }
    .sw-panel { position-anchor: --zo-sw; top: calc(anchor(bottom) + 8px); right: auto; transform: none; --pw: min(560px, calc(100% + 2 * var(--bar-x) - 32px)); width: var(--pw); left: clamp(calc(16px - var(--bar-x)), anchor(left), calc(100% + var(--bar-x) - 16px - var(--pw))); }
  }
}
@media (max-width: 1080px) { .sn-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .sn-mega:not(.sn-mega-proj) .sn-agent { display: none; } .sn-mega-proj .sn-card { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sn-side { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 6px; } .sn-side .sn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* «Войти» of a visitor: the site's (a dark pill, the purple person; its word folds away at 1240 px and below) */
.topbar .top-actions .acc-head { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--hair); background: rgb(var(--ground-t) / 0.25); color: var(--text); font: 700 15px var(--font-display); white-space: nowrap; transition: border-color 0.3s; }
.topbar .top-actions .acc-head:hover { border-color: var(--purple-text); }
.topbar .top-actions .acc-head .ico { width: 18px; height: 18px; color: var(--purple-text); }
@media (max-width: 1240px) { .topbar .top-actions .acc-head span { display: none; } .topbar .top-actions .acc-head { width: 46px; padding: 0; justify-content: center; } }
@media (max-width: 640px) { .topbar .top-actions .acc-head { width: 40px; height: 40px; min-height: 40px; } }
/* MP35 SUB-2: the visitor's language switch sits beside «Войти» at its height (a bare .btn.line stretched the phone's bar) */
.topbar .top-actions .acc-lang { height: 46px; min-height: 46px; padding: 0 14px; }
@media (max-width: 640px) { .topbar .top-actions .acc-lang { height: 40px; min-height: 40px; padding: 0 10px; } }
/* the burger (960 px and below) and its sheet: the site's lists, its foot «Войти» · «+ Новая идея» */
.sn-burger { display: none; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--hair); background: rgb(var(--ground-t) / 0.25); color: var(--muted); cursor: pointer; order: 9; flex: none; }
.sn-burger:hover { color: var(--text); border-color: var(--purple-text); }
.sn-burger .ico { width: 20px; height: 20px; }
@media (max-width: 960px) { .top-actions .sn-burger { display: grid; } }
@media (max-width: 640px) { .top-actions .sn-burger { width: 40px; height: 40px; } }
html.sn-lock { overflow: hidden; }
.sn-sheet { position: fixed; inset: 0; z-index: 185; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: var(--sa-t) var(--sa-r) 0 var(--sa-l); background: var(--bg); opacity: 0; transition: opacity 0.6s var(--sn-ease); }
.sn-sheet[hidden] { display: none; }
.sn-sheet.open { opacity: 1; }
.sn-ms-top { height: 61px; display: flex; align-items: center; justify-content: space-between; padding-inline: 16px; border-bottom: 1px solid var(--hair); }
.sn-ms-top .sn-burger { display: grid; width: 40px; height: 40px; }
.sn-ms-logo { display: inline-flex; align-items: center; gap: 8px; }
.sn-ms-logo img { display: block; height: 34px; width: auto; }
.sn-ms-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; transform: translateY(10px); transition: transform 0.7s var(--sn-ease); }
.sn-sheet.open .sn-ms-body { transform: none; }
.sn-ms-group { border-bottom: 1px solid var(--hair); }
.sn-ms-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 800 20px var(--font-display); color: var(--text); cursor: pointer; }
.sn-ms-group > summary::-webkit-details-marker { display: none; }
.sn-ms-group > summary .ico { width: 20px; height: 20px; color: var(--sn-faint); transition: transform 0.5s var(--sn-ease); }
.sn-ms-group[open] > summary .ico { transform: rotate(180deg); }
.sn-ms-sub { font: 600 12px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sn-faint); margin: 12px 0 4px; }
.sn-ms-links { display: grid; padding-bottom: 12px; }
.sn-ms-links a { display: flex; align-items: center; gap: 12px; min-height: 46px; color: var(--text); font-size: 16px; text-decoration: none; }
.sn-ms-links a .ico { color: var(--purple-text); }
.sn-ms-links a span { color: var(--sn-faint); font-size: 13px; margin-left: auto; }
.sn-ms-links a.planned { color: var(--muted); }
.sn-ms-links a.planned .ico { color: var(--sn-faint); }
.sn-ms-link { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--hair); font: 800 20px var(--font-display); color: var(--text); text-decoration: none; }
.sn-ms-link:hover, .sn-ms-links a:hover { text-decoration: none; }
.sn-ms-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px calc(14px + var(--sa-b)); border-top: 1px solid var(--hair); }
.sn-ms-foot.one { grid-template-columns: minmax(0, 1fr); }
.sn-ms-foot .sn-ghost { background: transparent; color: var(--text); border: 1px solid var(--sn-hair-2); }
@media (prefers-reduced-motion: reduce) { .sn-nv, .sn-nv::before, .sn-pair::before, .sn-tog .ico, .sn-mega, .sn-drop, .sn-mi::before, .sn-agent::before, .sn-sheet, .sn-ms-body, .topbar .top-actions .acc-head { transition: none !important; } }
/* the check button (front.js block «Check button»): dimmed while the field is blank — the look only, as the site's */
html.nim-b .idea-modal .bar-go[aria-disabled='true'], .bar-go[aria-disabled='true'] { opacity: 0.45; cursor: default; box-shadow: none; }

/* U298 / U299 (MP22 SUB-21): the anonymous visitor and the quick sign-up — the header's «Войти» in place of the avatar,
   the free checks left under the field, the sign-in sheet (an email and its code, or «Войти через Telegram»), the
   visitor's history note in the switcher. Every class `acc-`; the visitor's page is `body.zo-visitor`. A slow opacity
   dissolve, never a flying morph. */
/* the site's header parity (0to1-98, 2026-10-14): Fox's rail shows to a visitor too — its tap is the sign-in sheet,
   «поговорить с Fox» (front.js `setChat`); the bubble and the badges stay the person's */
body.zo-visitor .me, body.zo-visitor #hub, body.zo-visitor .agb, body.zo-visitor .sw-o-acts { display: none !important; }
body.zo-visitor .ag-rail .ag-badge, body.zo-visitor .ag-rail .ag-mutemark { display: none !important; }
.acc-head { padding: 9px 16px; font-size: 14px; }
.acc-head .ico { width: 18px; height: 18px; stroke-width: 1.9; }
.acc-allow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 10px auto 0; max-width: 640px; font-size: 13.5px; color: var(--muted); text-align: center; }
.acc-allow .acc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgb(var(--good-t) / 0.18); flex: none; }
.acc-allow.none .acc-dot { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-tint); }
.acc-allow.none { color: var(--text); }
.acc-link { border: 0; background: none; padding: 2px 0; font: inherit; color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acc-link:hover, .acc-link:focus-visible { color: var(--text); }
.acc-link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.acc-sheet { position: fixed; inset: 0; z-index: 170; display: grid; place-items: start center; padding: min(12vh, 110px) 16px 16px; opacity: 0; transition: opacity 0.36s ease; }
.acc-sheet[hidden] { display: none; }
.acc-sheet.in { opacity: 1; }
.acc-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.acc-panel { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 26px 24px 22px; background: radial-gradient(120% 70% at 50% 0%, rgb(var(--purple-t) / 0.16), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; opacity: 0.6; transition: opacity 0.36s ease; }
.acc-sheet.in .acc-panel { opacity: 1; }
.acc-x { position: absolute; top: 12px; right: 12px; }
.acc-mark { width: 40px; height: 40px; }
.acc-panel h2 { margin: 2px 0 0; font: 700 22px/1.25 var(--font-display); color: var(--text); padding-right: 28px; }
.acc-lead { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.acc-body { display: grid; gap: 12px; margin-top: 6px; }
.acc-form { display: grid; gap: 6px; }
.acc-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.acc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.acc-input { min-width: 0; padding: 12px 14px; border: 1.5px solid rgb(var(--ink-t) / 0.2); border-radius: 12px; background: rgb(var(--ink-t) / 0.04); color: var(--text); font: 16px var(--font-body); transition: border-color 0.2s ease; }
.acc-input:focus { border-color: var(--yellow); outline: none; }
.acc-input::placeholder { color: var(--faint); }
.acc-code { font: 600 22px/1 var(--font-mono); letter-spacing: 0.32em; text-align: center; }
.acc-go { padding: 11px 18px; }
.acc-err { margin: 0; font-size: 13.5px; color: var(--bad); }
.acc-err:empty { display: none; }
.acc-err.ok { color: var(--good); }
.acc-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12.5px; }
.acc-or::before, .acc-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.acc-tg { width: 100%; background: #2aabee; color: #fff; }
.acc-tg .ico { width: 20px; height: 20px; stroke-width: 1.9; }
.acc-tg:hover, .acc-tg:focus-visible { background: #229ed9; text-decoration: none; }
.acc-fine { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; }
/* the consent line under the sign-up buttons (the `zo_consent` contract): the site's cookies page linked */
.acc-consent-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.acc-consent-link:hover, .acc-consent-link:focus-visible { color: var(--text); }
/* 152-ФЗ: the sign-up's consent boxes (front.js `accConsentBoxes`) — one row, a second box (MP40's mail) beside the first;
   the buttons a required box gates are dimmed until it is ticked (an OAuth provider has no address until then) */
.acc-consents { display: grid; gap: 6px; margin-top: 2px; }
.acc-check.acc-agree { font-size: 13.5px; color: var(--muted); }
.acc-check.acc-agree input { accent-color: var(--yellow); }
.acc-check.acc-agree .acc-consent-link { color: var(--text); }
.acc-tg:disabled, .acc-oa[aria-disabled='true'] { opacity: 0.55; cursor: default; }
.acc-oa[aria-disabled='true']:hover { background: rgb(var(--ink-t) / 0.06); }
.acc-sent { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.acc-resend { margin: 0; font-size: 13px; }
.acc-lab { margin: 0; padding: 8px 12px; border: 1px dashed rgb(var(--yellow-t) / 0.5); border-radius: 10px; font: 13px var(--font-mono); color: var(--yellow); }
.acc-lab[hidden] { display: none; }
.acc-wait { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--muted); }
.acc-back-link { justify-self: start; }
.acc-done { display: grid; justify-items: center; gap: 6px; margin: 10px 0 4px; text-align: center; font-size: 15px; }
.acc-ok { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--good-t) / 0.16); color: var(--good); font-size: 22px; animation: acc-in 0.6s ease both; }
@keyframes acc-in { from { opacity: 0; } to { opacity: 1; } }
.acc-sw-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding: 9px 12px; border: 1px solid rgb(var(--yellow-t) / 0.35); border-radius: 12px; background: var(--yellow-tint); font-size: 13px; color: var(--muted); list-style: none; }
.acc-sw-note .acc-link { flex: none; font-weight: 600; }
@media (max-width: 640px) {
  .acc-sheet { place-items: end stretch; padding: 0; }
  .acc-panel { width: 100%; max-height: calc(100dvh - var(--kb, 0px) - 24px); margin-bottom: var(--kb, 0px); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); }
  .acc-row { grid-template-columns: minmax(0, 1fr); }
  .acc-go { width: 100%; }
  .acc-head { padding: 7px 12px; }
  .acc-head span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .acc-sheet, .acc-panel, .acc-ok { transition: none !important; animation: none !important; } }

/* MP32 SUB-12: the cabinet's sign-in (front.js block «MP32 SUB-12», auth-model.js) — the password door in the sheet of the
   block «U298»: the tabs, the fields with their own error lines, the OAuth providers, the code and reset steps, the
   person's security sheet (the password change, the closure). Every class `acc-`, as the sheet's; a slow opacity
   dissolve, never a flying morph. */
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--hair); border-radius: 14px; background: rgb(var(--ink-t) / 0.03); }
.acc-tab { border: 0; border-radius: 10px; padding: 9px 12px; background: none; color: var(--muted); font: 600 14px var(--font-display); cursor: pointer; transition: background 0.24s ease, color 0.24s ease; }
.acc-tab:hover { color: var(--text); }
.acc-tab.on { background: rgb(var(--ink-t) / 0.09); color: var(--text); }
.acc-tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.acc-form { gap: 10px; }
.acc-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.acc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.acc-input[aria-invalid="true"] { border-color: var(--bad); }
.acc-hint { margin: 0; font-size: 12.5px; line-height: 1.4; }
.acc-ferr { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--bad); }
.acc-ferr:empty { display: none; }
.acc-wide { width: 100%; margin-top: 4px; }
.acc-go:disabled, .acc-danger:disabled { opacity: 0.55; cursor: default; }
.acc-forgot, .acc-code-door { justify-self: start; font-size: 13.5px; }
.acc-code-door { justify-self: center; color: var(--muted); }
/* MP41 SUB-15: one full-width button a way in, in the sheet's order (Telegram, Google, GitHub, Yandex) — each «Войти через …» */
.acc-oas { display: grid; grid-auto-flow: row; gap: 8px; }
.acc-tg-hint { margin-top: -4px; text-align: center; }
.acc-oa { width: 100%; padding: 10px 12px; background: rgb(var(--ink-t) / 0.06); color: var(--text); border: 1px solid rgb(var(--ink-t) / 0.16); font-size: 14px; }
.acc-oa .ico { width: 18px; height: 18px; stroke-width: 1.9; }
.acc-oa:hover, .acc-oa:focus-visible { background: rgb(var(--ink-t) / 0.11); text-decoration: none; }
.acc-sec { display: grid; gap: 10px; padding-top: 4px; }
.acc-sec + .acc-sec { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); }
.acc-sec[hidden] { display: none; }
.acc-sec-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 16px/1.3 var(--font-display); color: var(--text); }
.acc-sec-h .ico { width: 18px; height: 18px; color: var(--muted); }
.acc-close .acc-sec-h .ico { color: var(--bad); }
.acc-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer; }
.acc-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--bad); }
.acc-danger { background: rgb(var(--bad-t) / 0.14); color: var(--bad); border: 1px solid rgb(var(--bad-t) / 0.5); }
.acc-danger:hover, .acc-danger:focus-visible { background: rgb(var(--bad-t) / 0.22); }
/* MP32 SUB-10's closure: what goes, the proof's choice (a segmented control like the tabs), its box, the reason's select */
.acc-close-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.acc-proofs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--hair); border-radius: 12px; background: rgb(var(--ink-t) / 0.03); }
.acc-proof { border: 0; border-radius: 9px; padding: 8px 10px; background: none; color: var(--muted); font: 600 13.5px var(--font-display); cursor: pointer; transition: background 0.24s ease, color 0.24s ease; }
.acc-proof.on { background: rgb(var(--ink-t) / 0.09); color: var(--text); }
.acc-proof:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.acc-proof-box { display: grid; gap: 8px; }
.acc-proof-box [hidden] { display: none; }
select.acc-input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.acc-input option { color: #111; }
.toast.t-ok .toast-ico { color: var(--good); background: rgb(var(--good-t) / 0.14); }
@media (max-width: 640px) {
  .acc-pair { grid-template-columns: minmax(0, 1fr); }
}
/* a tall sheet (the registration, the security's two sections) stays inside the window: the panel scrolls, its bottom on screen */
@media (min-width: 641px) {
  .acc-sheet .acc-panel { max-height: calc(100vh - min(12vh, 110px) - 16px); }
}
@media (prefers-reduced-motion: reduce) { .acc-tab, .acc-proof { transition: none !important; } }

/* ---------- MP35 W6 (SUB-7): the market selector under the idea field (front.js block «MP35 W6») — every class mk- ---------- */
.mk { position: relative; display: flex; align-items: center; padding: 10px 6px 0; min-width: 0; }
.mk[hidden] { display: none; }
.mk-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 6px 14px 6px 10px; border: 1px solid rgb(var(--ink-t) / 0.14); border-radius: 999px; background: rgb(var(--ink-t) / 0.04); color: var(--text); font-size: 13.5px; line-height: 1.2; cursor: pointer; transition: border-color 0.24s ease, background 0.24s ease; }
.mk-btn:hover, .mk-btn[aria-expanded='true'] { border-color: var(--line); background: rgb(var(--purple-t) / 0.12); }
.mk-ico { display: inline-flex; color: var(--purple-text); }
.mk-ico .ico { width: 16px; height: 16px; }
.mk-cap { color: var(--faint); }
.mk-cap::after { content: ':'; }
.mk-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mk-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 96; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); max-height: min(60vh, 460px); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgb(var(--shade-t) / 0.8); }
.mk-pop[hidden] { display: none; }
.mk-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; color: var(--muted); }
.mk-field:focus-within { border-color: var(--purple-text); }
.mk-q { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: none; color: var(--text); font: inherit; }
.mk-q:focus, .mk-q:focus-visible { outline: none; }
.mk-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; min-height: 0; }
.mk-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.mk-opt .ico { grid-row: span 2; width: 16px; height: 16px; color: var(--muted); }
.mk-opt:hover { background: rgb(var(--ink-t) / 0.04); }
.mk-opt.on { background: rgb(var(--purple-t) / 0.16); }
.mk-opt[aria-selected='true'] .mk-o-name { color: var(--purple-text); }
.mk-o-name { min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.mk-o-where { min-width: 0; font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-here { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--yellow-tint); color: var(--yellow); font-size: 11.5px; white-space: nowrap; }
.mk-note { padding: 4px 10px; }
.mk-note[hidden] { display: none; }
.mk-credit { padding: 6px 10px 2px; border-top: 1px solid var(--hair); color: var(--faint); font-size: 11.5px; line-height: 1.4; }
@media (max-width: 640px) {
  .mk-pop { left: 0; right: 0; width: auto; max-height: min(55vh, 420px); }
}
@media (prefers-reduced-motion: reduce) { .mk-btn { transition: none !important; } }
/* MP35 W6 (SUB-8): the region the check ran for, under the idea on the check's page (`mkRanLine`) */
.mk-ran { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mk-ran .ico { width: 15px; height: 15px; color: var(--purple-text); }
.mk-ran-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.mk-only { flex-basis: 100%; font-size: 12px; }

/* ==== MP37 SUB-4 (S4-7): the Mini App's chrome — inside Telegram only (`html.zo-tg`, set by front.js) ==== */
/* the compact header carries the sign alone at every width: Telegram's own header already names the app */
html.zo-tg .brand-full, html.zo-tg .brand-tag { display: none; }
html.zo-tg .brand-sign { display: block; }
/* the page's height is Telegram's stable viewport (no jump while the sheet settles), else the dynamic one */
html.zo-tg .shell { min-height: var(--tg-viewport-stable-height, 100dvh); }

/* ==== MP41 SUB-3 (D41-21; the operator 2026-10-15 — SITE-8, SITE-10, SITE-12, THREAD; front.js block «MP41 SUB-3»): the
   phone's header, the idea field, the composer's footer, the floating header's frame. A slow opacity dissolve, never a
   flying morph. This reverses U205's two phone buttons. ==== */
/* the avatar's badge: the count of UNREAD notifications, on a phone only (above 640 px the bell keeps its own count) */
.avatar { position: relative; }
.me-badge { display: none; position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--bg); border-radius: 10px; background: var(--purple); color: #fff; font: 700 11.5px/16px var(--font-body); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
/* the avatar menu's two rows on a phone: the notifications' and the files' sheets, each with its count of new */
.me-hub:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.me-hub .ico { flex: none; width: 17px; height: 17px; color: var(--purple-text); }
.me-hub-n { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--purple); color: #fff; font: 700 12px/22px var(--font-body); text-align: center; }
@media (max-width: 640px) {
  .me-badge { display: block; }
  .me-badge.on { opacity: 1; }
  /* the header holds the logo, the switcher, Fox and the avatar (and the site's burger): no «+» — the switcher's list opens
     with «+ Новая идея», as the burger's sheet does —, no files, no bell (they live in the avatar's menu) */
  .topbar .new-idea, body.sn-on .topbar .new-idea { display: none; }
  .topbar .hub > .hub-b { display: none; }
  /* the switcher right after the logo, as wide as its idea's name (cut with an ellipsis) */
  .switcher, body.sn-on .switcher { justify-self: start; width: auto; max-width: 100%; min-width: 0; margin-inline: 0; }
  .sw-button:not(.listing), body.sn-on .sw-button:not(.listing) { width: auto; max-width: 100%; margin-inline: 0; grid-template-columns: 28px minmax(0, 1fr) auto; padding: 4px 10px 4px 5px; }
  .sw-button:not(.listing) .sw-idea { display: block; }
  .sw-button:not(.listing) .sw-chev, body.sn-on .sw-button:not(.listing) .sw-chev { display: block; }
}
@media (max-width: 349px) {
  .sw-button:not(.listing) .sw-chev, body.sn-on .sw-button:not(.listing) .sw-chev { display: none; }
  .sw-button:not(.listing), body.sn-on .sw-button:not(.listing) { grid-template-columns: 28px minmax(0, 1fr); padding-right: 8px; }
}
/* Fox's bubble below 1024 px hangs under the header's live bottom (front.js `--bubble-top`), over it, never under it; it
   steps out while the avatar's menu or the idea list is open */
@media (max-width: 1023px) {
  .ag-bubble { top: calc(var(--bubble-top, var(--top-h, 64px)) + 8px); z-index: 95; }
  body:has(#me-menu:not([hidden])) .ag-bubble, body:has(#sw-panel:not([hidden])) .ag-bubble { opacity: 0; pointer-events: none; }
}
/* the idea field on a phone: the text full width, its buttons in a foot row under it — the microphone and ✕ on the left,
   «Проверить» on the right; the empty field is as tall as its placeholder (front.js `fitIdea`), three lines at least */
html.nim-b .nim-mic[hidden] { display: none; }
.idea-mirror { position: absolute; top: 0; left: -10000px; height: auto; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
@media (max-width: 640px) {
  html.nim-b .im-card .bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'field field field field' 'mic clear . go'; grid-auto-flow: row; gap: 8px; align-items: center; padding: 12px 10px 8px 16px; }
  html.nim-b .im-card .form.search .bar > textarea { grid-area: field; min-height: calc(4.2em + 2px); }
  html.nim-b .im-card .bar > .nim-mic { grid-area: mic; align-self: center; margin: 0; }
  html.nim-b .im-card .bar > .nim-clear { grid-area: clear; align-self: center; margin: 0; }
  html.nim-b .idea-modal .bar-go { grid-area: go; justify-self: end; align-self: center; }
}
/* the composer's footer: 📎, the thread's pill, then the microphone and send at the right — ONE row at every width: a
   grid, so a long idea's name shrinks inside its pill (an ellipsis) and never pushes the buttons onto a line of their own
   (a wrapping flex row did, in the 400 px sidebar); the composer's note (a limit, a refused file) takes a row under them */
.ch-foot { display: grid; grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto auto; grid-template-areas: 'clip scope . mic send' 'note note note note note'; align-items: center; align-content: center; column-gap: 8px; row-gap: 0; }
.ch-foot > .ch-attach-slot { grid-area: clip; }
.ch-foot > .ch-scope { grid-area: scope; justify-self: start; }
.ch-foot > .ch-note { grid-area: note; padding: 0 2px 6px; }
.ch-foot > .ch-note:empty { display: none; }
.ch-foot > .ch-mic { grid-area: mic; margin-left: 0; }
.ch-foot > .ch-send { grid-area: send; margin-left: 0; }
/* SITE-10 (OP-41-2, candidate 1): the floating header's frame starts at its rounded corners — its side hairlines no longer
   run up to the page's top edge (the grey strip at the top left); the bottom line and the corners are one drawn frame */
@media (min-width: 641px) {
  body:not(.at-home) .topbar, body.at-home.scrolled .topbar { border-color: transparent; }
  .topbar::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 19px; border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 18px 18px; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
  body:not(.at-home) .topbar::after, body.at-home.scrolled .topbar::after { opacity: 1; }
  body.boot .topbar::after { display: none; } /* U200: nothing of the bar before the first route */
}
@media (prefers-reduced-motion: reduce) { .me-badge, .topbar::after { transition: none; } }

/* ==== MP41 SUB-5 (D41-6; the operator's SITE-6, front.js `thesesBlock`): the folded check's gist «За / Против» under the
   verdict, at the weight of the deep analysis's result — a 16 px lead-in, 15 px sentences, a green + and a red −, each
   thesis's tag in bold over its sentence; the neutral insights stay the small chips below. It appears with a slow
   opacity dissolve (none under reduced motion). ==== */
.s1-main .theses { justify-self: stretch; width: 100%; margin: 4px 0 2px; animation: th-in 0.6s ease both; }
.theses-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.theses-h { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 700 16px/1.3 var(--font-display); }
.theses-h::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.theses-minus .theses-h::before { background: var(--bad); }
.theses-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.thesis { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.th-pm { color: var(--good); font: 700 17px/1.35 var(--font-display); font-style: normal; text-align: center; }
.thesis.minus .th-pm { color: var(--bad); }
.th-body { display: grid; gap: 2px; min-width: 0; }
.th-tag { color: var(--text); font: 700 15px/1.4 var(--font-body); }
.th-text { color: var(--muted); font: 400 15px/1.5 var(--font-body); overflow-wrap: break-word; }
.th-tag + .th-text { color: rgba(244, 241, 250, 0.78); }
/* the operator 2026-10-16: a list's further theses — small quiet tags at its end, the rest behind «+N» */
.th-xs { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 24px; }
.th-x { display: inline-flex; align-items: center; max-width: 100%; min-height: 26px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: 500 13px/1.3 var(--font-body); overflow-wrap: anywhere; text-align: left; }
.th-x[hidden] { display: none; }
button.th-x { cursor: pointer; }
button.th-x:hover, button.th-x:focus-visible { color: var(--text); border-color: currentColor; }
.th-more { font-variant-numeric: tabular-nums; }
@keyframes th-in { from { opacity: 0; } }
@media (max-width: 640px) { .theses { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .s1-main .theses { animation: none; } }

/* ==== MP41 APP-22 (the operator 2026-10-15: «постоянно модалы вылетают по экрану»; front.js the hover card,
   card-intent.js): the hover card dissolves in and out — opacity only, never a flight or a scale from its trigger; it
   opens where it stays (no following the cursor). None of it under reduced motion. ==== */
.hcard:not([hidden]) { animation: hc-in 0.36s ease; }
.hcard.out { opacity: 0; transition: opacity 0.24s ease; pointer-events: none !important; }
@keyframes hc-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hcard:not([hidden]) { animation: none; } .hcard.out { transition: none; } }
/* MP41 SUB-2 (TG-4, OP-L-4): a check made in the other language says so over its report, with a free re-run in the page's */

/* MP40 SUB-3: the one-time «Fox's tips by email?» card on a web person's home (front.js `mailCardBoot`) and the email
   settings' toggles (the sheet's view `mail`). The card dissolves in; either answer removes it for good. */
.mail-card { position: fixed; left: 16px; bottom: 16px; z-index: 40; max-width: 360px; padding: 16px 18px; border-radius: 16px; background: var(--raise); border: 1px solid var(--line); box-shadow: 0 12px 40px rgb(var(--shade-t) / 0.35); animation: mail-card-in 0.6s ease both; }
.mail-card-h { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.mail-card-t { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.mail-card-go { display: flex; align-items: center; gap: 14px; }
.mail-toggles .acc-check.acc-agree { color: var(--text); }
.acc-warn { color: var(--yellow); }
@keyframes mail-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mail-card { animation: none; } }
@media (max-width: 560px) { .mail-card { left: 16px; right: 16px; max-width: none; } }

/* MP41 SUB-13 (SITE-4, SITE-9; D41-13): the one status vocabulary's marks (status-model.js `lookOf`, front.js `stMark`) —
   static everywhere but the page's live tip and its one current step: a violet dot while it runs, the yellow hand when
   it is the person's turn, a clock in the queue. A change of state dissolves (0.6 s, opacity only). */
.st-mk { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--st-idle); transition: opacity 0.6s ease, color 0.6s ease; vertical-align: -3px; }
.st-mk .ico { width: 15px; height: 15px; }
.st-mk.st-run { color: var(--st-run); }
.st-mk.st-wait { color: var(--st-wait); }
.st-mk.st-done { color: var(--st-done); }
.st-mk.st-fail { color: var(--st-fail); }
.st-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(var(--purple-t) / 0.22); }
/* 2026-10-16 (the operator): a thing keeps its own icon in every state — the check's ring in the header, its list and the
   home's cards, the bell's notice icon, a goal file's icon; running, queued or the person's turn is a small badge on its
   corner (front.js `faceBadge`), in the face's own box (no layout shift); it dissolves in and out (0.6 s, opacity only) */
.sw-st { position: relative; }
.sw-st > .sw-ring { width: 100%; height: 100%; }
/* MP52 SUB-9: the item team's logo inside its ring (letterboxed, never cropped — OP-52-17) */
.sw-st > .sw-logo { position: absolute; left: 50%; top: 50%; width: 64%; height: 64%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: contain; background: var(--ga3); }
.sw-logo-st > .sw-ring text { visibility: hidden; }
.hub-ico, .hb-ic { position: relative; }
.hb-ic { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; }
.sw-bdg { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); pointer-events: none; }
.sw-bdg .st-mk { width: 12px; height: 12px; vertical-align: 0; }
.sw-bdg .st-mk .ico { width: 11px; height: 11px; }
.sw-bdg .st-dot { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgb(var(--purple-t) / 0.22); }
.hb-ic .sw-bdg { right: -6px; bottom: -6px; width: 12px; height: 12px; }
.hb-ic .sw-bdg .st-mk, .hb-ic .sw-bdg .st-mk .ico { width: 10px; height: 10px; }
.hb-ic .sw-bdg .st-dot { width: 6px; height: 6px; }
.sw-bdg.in { animation: dissolve-in 0.6s ease both; }
.sw-bdg.out { animation: sw-bdg-out 0.6s ease both; }
@keyframes sw-bdg-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sw-bdg.in { animation: none; } .sw-bdg.out { display: none; } }
/* a running check's words in the list read in the running tone (violet), not the person's turn's yellow */
.sw-o-meta .run { color: var(--st-run); }
.sw-wait { margin-right: 4px; }
.tier-chip .st-mk { width: 12px; height: 12px; }
.tier-chip .st-mk .ico { width: 12px; height: 12px; }
.now-chip .st-mk { margin-left: 4px; }
.now-chip[data-st="waiting"] { border-color: rgb(var(--yellow-t) / 0.5); color: var(--st-wait); }
.tk-you { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--st-wait); }
.tk-you .ico { width: 13px; height: 13px; }
.tk.st-waiting { color: var(--st-wait); }
.run-mk.st-waiting .ico { width: 14px; height: 14px; }
.stage-mk.st-waiting .ico { width: 16px; height: 16px; }
.unlock.concept.wait, .concept-zone .unlock.concept.wait { color: var(--st-wait); }
.unlock.concept .st-mk { margin-right: 2px; }
.hc-unlock.wait, .hc-unlock.wait .st-mk { color: var(--st-wait); }
.hc-unlock.live .st-mk { color: var(--st-run); }
.have-b.st-waiting { border-color: rgb(var(--yellow-t) / 0.45); }
.ch-starter.wait .ch-zap { color: var(--st-wait); }
.hub-ico .st-mk { width: 17px; height: 17px; }
.hub-ico.live { color: var(--st-run); }
/* the map: running YELLOW — `--pm-run`, the product's yellow, the turning arc (the operator 2026-10-16: «идёт — можно
   жёлтым бейдж делать, как и кружок на таймлайне с анимацией»); the person's turn yellow too, told apart by the hand and
   the pulse; done and progress the brand's softened accent */
.pm-chip.st-active { color: var(--pm-run); border-color: rgb(var(--pm-ac) / 0.45); }
.pm-chip.st-waiting { color: var(--st-wait); border-color: rgb(var(--yellow-t) / 0.4); }
.pm-segs i.st-active { background: var(--pm-run); }
.pm-segs i.st-waiting { background: var(--st-wait); }
.pm-pip.st-active { border-color: var(--pm-run); color: var(--pm-run); }
.pm-pip.st-active::before { border-top-color: var(--pm-run); }
.pm-pip.pm-sq.st-active::before { border-color: rgb(var(--pm-ac) / 0.6); }
.pm-pip.st-waiting { border-color: var(--st-wait); color: var(--st-wait); }
@media (prefers-reduced-motion: reduce) { .st-mk { transition: none; } }

/* ---------- MP41 SUB-20 (SITE-5, APP-18, APP-19, APP-20): the calm progress line ---------- */
/* the page never moves under the reader: the browser's anchoring on, the patch holds the node in view (front.js eyeAnchor) */
#check { overflow-anchor: auto; }
/* what the patch inserts (a step, a stage's final card at its fold, the tip) dissolves in — opacity only */
#check .dissolve-in { animation: dissolve-in 0.7s ease both; }
@keyframes dissolve-in { from { opacity: 0; } to { opacity: 1; } }
/* the run's live tip: its state's static mark and the operation being made */
.run-tip { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px 52px; color: var(--muted); font-size: 13.5px; }
/* OP-1: a step waiting for capacity — the same calm tip, dissolving in slowly (the operator: slow opacity, no error colour) */
.run-tip.queued { animation: live-in 900ms ease both; }
/* a stopped run: calm words in the muted colour, never the error colour (the operator 2026-10-21) */
.zone-note { margin: 6px 0 10px 52px; color: var(--muted); font-size: 13.5px; animation: live-in 900ms ease both; }
@media (prefers-reduced-motion: reduce) { .run-tip.queued { animation: none; } }
.tk .tk-run { width: 11px; height: 11px; }
/* «К текущему шагу»: wide screens only (the phone has its chip) */
/* BR-20261017-4T2 #2: fixed on the side the step is on (front.js `syncToNow` sets `data-dir` and the line's right edge) —
   never in the page's flow, where it rested under the last block */
.to-now { position: fixed; bottom: 16px; right: var(--to-now-r, 16px); margin: 0; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--purple-text); background: rgba(20, 16, 30, 0.92); border: 1px solid rgb(var(--purple-t) / 0.45); cursor: pointer; z-index: 5; }
.to-now::before { content: '↓'; }
.to-now[data-dir="up"] { bottom: auto; top: calc(var(--top-h, 74px) + 12px); }
.to-now[data-dir="up"]::before { content: '↑'; }
.to-now:hover { background: rgb(var(--purple-t) / 0.2); }
.to-now[hidden] { display: none; }
@media (max-width: 640px) { .to-now { display: none; } }

/* the disclose control (disclose-model.js): a pill with a chevron in a circle, ≥ 4.5:1, 40 px (44 px on a phone) */
.disclose { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--purple-text); background: rgb(var(--purple-t) / 0.12); border: 1px solid rgb(var(--purple-t) / 0.45);
  transition: background 0.2s ease, border-color 0.2s ease; cursor: pointer; }
summary:hover .disclose, summary:focus-visible .disclose { background: rgb(var(--purple-t) / 0.22); border-color: rgb(var(--purple-t) / 0.7); }
.disclose .dc-chev { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; transition: transform 0.3s ease; }
details[open] > summary .disclose .dc-chev { transform: rotate(180deg); }
.disclose .dc-close, details[open] > summary .disclose .dc-open { display: none; }
details[open] > summary .disclose .dc-close { display: inline; }
@media (max-width: 640px) { .disclose { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .disclose .dc-chev { transition: none; } }
/* a section's or a file row's own chevron: the same chevron in a 28 px circle, quiet */
.node > details > summary > .chev { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair); color: var(--muted); }
/* a done project stage folds its materials */
/* 2026-10-22: its mark on the line like every stage row's (the mark's column, the line's middle — it sat beside the line) */
.pk-stage > details > summary { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 12px 0; cursor: pointer; list-style: none; }
.pk-stage > details > summary > .mark { margin-top: -7px; }
.pk-stage > details > summary::-webkit-details-marker { display: none; }
.pk-stage .pk-body { padding: 4px 0 8px calc(var(--mk) + var(--mk-gap)); }

/* the artefact tags (chip-model.js): dim and inactive until the step is done, then purple badges that open */
.art-chip, .art { transition: opacity 0.6s ease, color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease; }
.art-chip.tag-off, .art.tag-off { opacity: 0.45; border: 1px solid var(--hair); color: var(--faint); background: none; cursor: default; pointer-events: none; }
.art-chip.tag-off .art-ico, .art.tag-off .art-ico { color: var(--faint); }
.art-chip.tag-ready { opacity: 1; background: rgb(var(--purple-t) / 0.14); border: 1px solid rgb(var(--purple-t) / 0.55); color: var(--purple-text); cursor: pointer; }
.art-chip.tag-ready .art-ico { color: var(--purple-text); }
.art-chip.tag-ready:hover, .art-chip.tag-ready:focus-visible { background: rgb(var(--purple-t) / 0.24); }
.art-chip.tag-failed { border: 1px solid var(--bad); color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .art-chip, .art { transition-duration: 0.2s; } #check .dissolve-in { animation: none; } }
/* MP41 SUB-22 (APP-21): «как это сделать» — the method article's mark (a 20 px book, a 40 px hit area, its tooltip on
   hover or focus) and a «Сам» item's «Инструкция: …» line; a planned article's mark is the same, its tooltip says «скоро».
   Opacity only (the operator's dissolves), nothing under reduced motion. */
.ml-mark { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: -4px; color: var(--purple-text); border-radius: 50%; }
.ml-mark::before { content: ''; position: absolute; inset: -10px; }
.ml-mark .ml-ico { width: 16px; height: 16px; }
.ml-mark:hover, .ml-mark:focus-visible { color: var(--yellow); }
.ml-mark:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ml-tip { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: min(280px, 80vw); transform: translateX(-50%); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raise); color: var(--muted); font: 400 12.5px/1.45 var(--font-body); text-align: left; white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
.ml-tip b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.ml-mark:hover .ml-tip, .ml-mark:focus-visible .ml-tip { opacity: 1; visibility: visible; transition: opacity 0.18s ease 0.3s, visibility 0s linear 0.3s; }
.ml-line { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--purple-text); font-size: 13.5px; }
.ml-line .ml-ico { width: 16px; height: 16px; flex: none; }
.ml-line:hover span, .ml-line:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.ml-line .ml-soon { color: var(--faint); }
.ml-row { margin: 0 0 8px; }
.ml-lines { display: flex; flex-wrap: wrap; column-gap: 14px; }
.hc-ml { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .ml-tip, .ml-mark:hover .ml-tip, .ml-mark:focus-visible .ml-tip { transition: none; } }

/* ---------- MP41 SUB-14 (SITE-3, D41-22): the report cards in Fox's chat, each drawn as its own kind ---------- */
/* the same gist, picture and buttons as Telegram's article — wider than a compact card, never clamped */
.ch-act.tl-k { grid-template-columns: minmax(0, 1fr); max-width: min(600px, 94%); padding: 12px 14px; border-color: var(--line); background: rgb(var(--purple-t) / 0.06); }
.ch-act.tl-k .ch-act-b { gap: 8px; }
.ch-act.tl-k .ch-act-b > span, .ch-act.tl-k .ch-act-b > p { display: block; -webkit-line-clamp: none; overflow: visible; }
.ch-act.tl-k.drawn { animation: tlk-in 0.6s ease both; }
/* a report card sizes by its OWN width (the chat panel beside the sheet is narrow): the card is the container its grids
   ask (`tlk`); its width is set, never its words' (a container has none of its own), so drawing it moves nothing */
.ch-act.tl-k { width: min(600px, 94%); }
.ch-act.tl-k .ch-act-b { container: tlk / inline-size; }
.ch-act.tl-k .ch-act-b span { overflow-wrap: break-word; }
.ch-act.tl-k .ch-act-b > .rc, .ch-act.tl-k .ch-act-b > .prod { display: grid; }
.ch-act.tl-k .rc { margin-top: 0; gap: 10px; }
.ch-act.tl-k .rc-lead { font-size: 14.5px; line-height: 1.5; }
@container tlk (max-width: 300px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } }
.ch-act.tl-k .tlk-theses { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 20px; }
.ch-act.tl-k .tlk-axes li { max-width: 100%; }
.ch-act.tl-k .tlk-axes li > span { min-width: 0; }
@keyframes tlk-in { from { opacity: 0; } to { opacity: 1; } }
.ch-act.tl-k .ch-act-b > .tlk-head { display: flex; align-items: center; gap: 10px; }
.tlk-hm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tlk-title { font-size: 15px; font-weight: 650; color: var(--g12); }
.tlk-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--purple-text); background: rgb(var(--purple-t) / 0.14); flex: none; }
.tlk-ico .ico { width: 17px; height: 17px; }
.tlk-st { margin-left: auto; }
.tlk-ring { width: 46px; height: 46px; flex: none; }
.tlk-ring .track { fill: none; stroke: rgb(var(--ink-t) / 0.1); stroke-width: 4; }
.tlk-ring .val { fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; }
.tlk-ring.good .val { stroke: var(--good); }
.tlk-ring.bad .val { stroke: var(--bad); }
.tlk-ring.none .val { stroke: var(--faint); }
.tlk-ring text { fill: var(--g12); font-size: 15px; font-weight: 700; }
.ch-act.tl-k .tlk-lead { margin: 0; font-weight: 600; color: var(--g12); line-height: 1.45; }
.ch-act.tl-k .tlk-h { display: block; font-size: 14.5px; }
.ch-act.tl-k .tlk-p { margin: 0; color: var(--g11); line-height: 1.45; }
.tlk-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--g11); }
.tlk-axes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tlk-axes li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgb(var(--ink-t) / 0.12); font-size: 13px; color: var(--g11); }
.tlk-axes li b { color: var(--g12); }
.tlk-axes li.good b { color: var(--good); }
.tlk-axes li.bad b { color: var(--bad); }
.tlk-theses { margin: 0; }
.tlk-vars { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tlk-vars li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.tlk-vars li > b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--purple-t) / 0.18); color: var(--purple-text); font-size: 13px; }
.tlk-vars li > span { display: grid; gap: 2px; }
.tlk-vars li > span > span { color: var(--g11); font-size: 13.5px; }
.tlk-vars li.on > b { background: var(--purple); color: #fff; }
.tlk-pic { display: block; width: 100%; height: auto; border-radius: 10px; }
.tlk-price { font-weight: 700; color: var(--g12); }
.ch-act.tl-k .ch-act-b > .tlk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ch-act-b .tlk-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--purple-text); background: transparent; border: 1px solid rgb(var(--purple-t) / 0.45); text-decoration: none; cursor: pointer; transition: background 0.2s ease; }
.ch-act-b .tlk-btn.pri { color: #fff; background: var(--purple); border-color: var(--purple); }
.ch-act-b .tlk-btn:hover, .ch-act-b .tlk-btn:focus-visible { text-decoration: none; background: rgb(var(--purple-t) / 0.2); }
.ch-act-b .tlk-btn.pri:hover, .ch-act-b .tlk-btn.pri:focus-visible { background: #a37cf3; }
.tlk-btn .ico { width: 16px; height: 16px; }
.tlk-listen.on { background: rgb(var(--purple-t) / 0.25); }
.tlk-listen:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 640px) { .ch-act.tl-k { width: 100%; max-width: 100%; } .ch-act-b .tlk-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ch-act.tl-k.drawn { animation: none; } }
/* a card drawn again from fresh data stays as it was on screen (no second dissolve) */
.ch-act.tl-k.drawn.still { animation: none; }
/* the concept's gates in the chat: each way short (its name, its gist in two lines, «Выбрать»), the answers explained */
.tlk-vars li:has(> .tlk-choose) { grid-template-columns: 24px minmax(0, 1fr) auto; }
.tlk-vars li > .tlk-var { display: grid; gap: 2px; min-width: 0; }
.tlk-vars .tlk-gist { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--g11); font-size: 13.5px; }
.tlk-vars .tlk-rec { font-style: normal; font-size: 12px; color: var(--purple-text); }
.ch-act-b .tlk-btn.tlk-choose { min-height: 32px; padding: 5px 12px; align-self: center; }
.ch-act.tl-k .tlk-explain { font-size: 13.5px; }
.ch-act.tl-k .tlk-why { font-style: italic; }
.ch-act.tl-k .tlk-note:empty { display: none; }
.ch-act.tl-k .ch-act-b > .tlk-fb:not([hidden]) { display: grid; gap: 8px; }
.ch-act.tl-k .ch-act-b > .tlk-fb[hidden] { display: none; }
.ch-act.tl-k .tlk-fb-a { width: 100%; min-height: 60px; resize: vertical; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgb(var(--ink-t) / 0.04); color: inherit; font: inherit; font-size: 14px; }
.ch-act.tl-k .tlk-fb-send { justify-self: start; }
@container tlk (max-width: 300px) { .tlk-vars li:has(> .tlk-choose) { grid-template-columns: 24px minmax(0, 1fr); } .tlk-vars li > .tlk-choose { grid-column: 2; justify-self: start; } }

/* 2026-10-16 (the operator: «в селекторе идеи в хедере справа поехала стрелка, и при раскрытии анимируется странно») —
   the switcher's chevron is the set's centred chevron-down (front.js `swChev`; the «›» glyph's ink sat off its box's
   centre, so turned 90° it stood off the right padding and swung across while it turned); it always takes the button's
   last column, flush with the right padding (a finished check draws no `.sw-state`: the chevron fell into the third of
   four columns, a gap short of the edge; U282's `minmax(0, auto)` name had spread a short name's spare width over the
   chevron's column too — the name's column takes it now); open, it turns over slowly (0.5 s, transform only). On a phone
   the face is its 28 px column (the 2026-10-16 ring's `.sw-st` box had stayed 30 px). The panel dissolves in and out
   (opacity and `translate` — not `transform`, which places it at 1024 px and up —, 0.5 s; `display` flips at the end
   of the way out); no motion under reduced motion. Pinned by front-chromium.test.ts § the switcher's chevron. */
.sw-button > .sw-chev { grid-column: -2; justify-self: end; width: 14px; height: 14px; color: var(--faint); transform: none; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.sw-button > .sw-chev .ico { display: block; width: 100%; height: 100%; }
.sw-button[aria-expanded='true'] > .sw-chev { transform: rotate(180deg); }
@media (max-width: 640px) { .sw-button > .sw-st, .sw-button > .sw-face { width: 28px; height: 28px; } }
#sw-panel { transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), display 0.5s allow-discrete; }
#sw-panel[hidden] { opacity: 0; translate: 0 -6px; pointer-events: none; }
@starting-style { #sw-panel:not([hidden]) { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .sw-button > .sw-chev, #sw-panel { transition: none; } }
/* MP31 SUB-7 (wave 2): the live map — a row's actions and run, a person step's note, the plan's chip and sheet, the
   level-up card. Every colour a token; the accent through --pm-ac; no inline style (the CSP). */
.pm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pm-acts .btn { padding: 8px 16px; font-size: 14px; }
.pm-acts .btn.ghost { padding: 6px 14px; }
.pm-act-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); min-height: 0; }
.pm-act-note:empty { display: none; }
.pm-run { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.pm-run-active, .pm-run-queued, .pm-run-review { color: rgb(var(--pm-ac, 148 102 240)); }
.pm-run-paused, .pm-run-failed { color: var(--yellow); }
.pm-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.pm-note textarea { width: 100%; min-height: 44px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 14px; padding: 8px 10px; }
.pm-tasks button.pm-cb { cursor: pointer; border: 1px solid var(--line); background: transparent; color: inherit; padding: 0; }
.pm-tasks button.pm-cb[aria-pressed="true"] { background: rgb(var(--pm-ac, 148 102 240) / 0.25); }
.pm-plan { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: 600 13px var(--font-display); cursor: pointer; position: relative; white-space: nowrap; }
.pm-plan .ico { width: 15px; height: 15px; }
.pm-plan-bar { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.pm-plan-bar b { display: block; height: 100%; width: 0; background: var(--yellow); }
.pm-plan-spent { border-color: var(--yellow); }
.pm-plan-ls { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.pm-plan-ls li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 14px; }
.pm-plan-ls li i { color: var(--muted); font-style: normal; font-size: 13px; }
/* a window's plain bar (no percent): what is spent of it */
.pm-plan-w { flex: 1 1 100%; order: 3; height: 4px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.pm-plan-w b { display: block; height: 100%; width: 0; background: var(--yellow); }
.pm-lvup-n { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; font-size: 16px; }
@media (max-width: 640px) { .pm-plan span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .pm-acts .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pm-plan-bar b { transition: none; } }

/* MP50 SUB-3: a business audit's line — the head's three columns, the board with the own row, the checks, the share link */
.audit-line .audit-biz { display: grid; gap: 2px; }
.audit-line .audit-biz b { font-size: 16px; overflow-wrap: anywhere; }
.audit-line .audit-place { font-weight: 700; color: var(--muted); }
.audit-line .audit-place.on { color: var(--text); }
.audit-checks li span { display: grid; gap: 2px; font-size: 14px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.audit-checks q { font-size: 13px; font-style: italic; color: var(--muted); }
.audit-board, .audit-advs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.audit-advs .audit-rival { grid-template-columns: minmax(0, 1fr); }
.audit-rival { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.audit-rival.self { background: var(--tint-strong); box-shadow: inset 3px 0 0 var(--purple); }
.audit-rn { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
/* MP52 SUB-9: the site's logo over its monogram, then the brand name */
.audit-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.audit-you { margin-left: 8px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--bg); background: var(--purple-text); }
.audit-vis { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.audit-bar { width: 100%; height: 6px; }
.audit-bar .t { fill: var(--hair); }
.audit-bar .v { fill: var(--purple); }
.audit-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.audit-ck { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; }
.audit-ck > i { width: 10px; height: 10px; margin-top: 5px; border: 1.5px dashed var(--faint); border-radius: 50%; }
.audit-ck[data-st="pass"] > i { border: none; background: var(--good); }
.audit-ck[data-st="warn"] > i { border: none; background: var(--yellow); }
.audit-ck[data-st="fail"] > i { border: none; background: var(--bad); }
.audit-ck[data-st="none"] b { font-weight: 400; color: var(--muted); }
.node.audit-off > details > summary { opacity: 0.72; }
.audit-fixes { display: grid; gap: 6px; margin: 8px 0 12px; padding-left: 20px; }
/* tranche A + B3 (2026-10-23): the scorecard strip (a card per direction: its light, place, figure), the rival's facts on
   the board, the positions matrix (its own horizontal scroll on a phone, never the page's), the ads, the price corridor,
   «Что тормозит» */
.audit-dirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.audit-dir { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 12px; min-width: 0; }
.audit-dir .ad-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.audit-dir .ad-place { margin-left: auto; font-weight: 700; }
.audit-dir .ad-light { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--faint); flex: none; }
.audit-dir[data-light="green"] .ad-light { border: none; background: var(--good); }
.audit-dir[data-light="yellow"] .ad-light { border: none; background: var(--yellow); }
.audit-dir[data-light="red"] .ad-light { border: none; background: var(--bad); }
.audit-dir[data-light="neutral"] .ad-light { border: 1.5px solid var(--muted); }
.audit-dir[data-light="grey"] { opacity: 0.75; }
.audit-dir .ad-fig { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.audit-dir .ad-meta { font-size: 12.5px; }
.audit-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.audit-tags .ai-chip { white-space: normal; }
.audit-rn .audit-offer, .audit-ad { font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.audit-rn .audit-offer { display: block; font-style: italic; }
.audit-ad { display: grid; gap: 2px; margin-top: 2px; padding-left: 8px; border-left: 2px solid var(--hair); }
.audit-ad b { color: var(--text); font-weight: 600; }
.audit-pos-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 6px; -webkit-overflow-scrolling: touch; }
.audit-pos { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.audit-pos th, .audit-pos td { padding: 6px 8px; border-bottom: 1px solid var(--hair); text-align: center; vertical-align: top; white-space: nowrap; }
.audit-pos th { text-transform: none; letter-spacing: normal; }
.audit-pos thead th { font-weight: 600; color: var(--muted); font-size: 12px; }
.audit-pos tbody th { text-align: left; font-weight: 400; font-size: 13px; color: var(--text); white-space: normal; min-width: 150px; max-width: 280px; overflow-wrap: anywhere; }
.audit-pos .ap-eng { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--tint); font-size: 11.5px; }
.audit-pos .ap-lead { display: block; font-size: 12px; }
.audit-pos .self { background: var(--tint-strong); font-weight: 700; }
.audit-pos td.top { color: var(--good); font-weight: 700; }
.audit-band { display: block; width: 100%; height: 18px; margin: 8px 0 12px; }
.audit-band .ab-track { fill: var(--hair); }
.audit-band .ab-dot { fill: var(--muted); }
.audit-band .ab-own { fill: var(--purple); }
.audit-slow { margin-top: 10px; }
.audit-slow h4 { margin: 0 0 4px; font-size: 14px; }
/* MP51 SUB-4: the site audit — the clean share and the counts in the head, the issue rows, the agency anchor (muted). */
.audit-line .audit-clean, .audit-line .audit-levels { font-size: 14px; color: var(--muted); }
.audit-line .audit-levels.on { color: var(--text); }
/* the operator 2026-10-22: the full «Ошибки» / «Рекомендации» — a compact row each (the dot, the title, its chips: the
   area, where, the effect), opened: why, where, how to fix, the effect and the effort; «Рекомендации» under their effect */
.audit-issues { display: grid; margin: 0; padding: 0; list-style: none; }
.audit-issue { border-top: 1px solid var(--hair); }
.audit-issues > .audit-issue:first-child { border-top: none; }
.ai-s { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; cursor: pointer; list-style: none; }
.ai-s::-webkit-details-marker { display: none; }
.ai-s > i { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--bad); }
.audit-issue[data-st="warn"] .ai-s > i, .audit-recs .audit-issue .ai-s > i, .ar-sec[data-section="recommendations"] .audit-issue .ai-s > i { background: var(--yellow); }
.ai-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; font-size: 14.5px; line-height: 1.45; }
.ai-head > b { font-weight: 600; overflow-wrap: anywhere; }
.ai-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.ai-chip { padding: 0 8px; border: 1px solid var(--hair); border-radius: 999px; font-size: 12px; line-height: 1.7; color: var(--muted); white-space: nowrap; }
.ai-effect[data-effect="high"] { color: var(--text); border-color: rgb(var(--yellow-t) / 0.55); }
.ai-chev { color: var(--faint); transition: transform 0.3s ease; }
.ai-d[open] .ai-chev { transform: rotate(90deg); }
.ai-body { display: grid; gap: 4px; padding: 0 0 12px 24px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-facts { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.ai-group + .ai-group { margin-top: 14px; }
.ai-gh { margin: 4px 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ai-chev { transition: none; } }
/* the step's link to its section of the one report (the panel opens it there) */
.sec-rep { margin: 10px 0 0; }
.sec-rep-b { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.sec-rep-b:hover, .sec-rep-b:focus-visible { color: var(--text); border-color: var(--line); }
.sec-rep-b .ico { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .sec-rep-b { transition: none; } }
/* the competition's score on the board's node */
.audit-comp { display: grid; gap: 4px; margin: 0 0 12px; font-size: 14px; }
/* the own audit's share box: the report's file beside the share */
.audit-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* the operator 2026-10-22: an audit's page heading — the audit's icon on the line's mark, the page's own title, the market */
.zero-mk.audit-mk .ico { width: 24px; height: 24px; }
.audit-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.audit-market { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
/* the one report in the panel: its contents, then each section */
.arep { display: grid; gap: 18px; }
.ar-top { display: grid; gap: 4px; }
.ar-subject { font-size: 22px; overflow-wrap: anywhere; }
.ar-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-go { padding: 3px 10px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.ar-go:hover, .ar-go:focus-visible { color: var(--text); border-color: var(--line); }
.ar-sec { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--hair); scroll-margin-top: 12px; }
.ar-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text); }
.ar-score { font-size: 13px; font-weight: 600; color: var(--muted); }
.ar-line { font-size: 14px; color: var(--muted); }
.ar-take { font-size: 14.5px; }
.ar-rows { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; }
.ar-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; overflow-wrap: anywhere; }
.ar-mk { color: var(--faint); text-align: center; }
.ar-row[data-st="pass"] .ar-mk { color: var(--good); }
.ar-row[data-st="warn"] .ar-mk { color: var(--yellow); }
.ar-row[data-st="fail"] .ar-mk { color: var(--bad); }
.ar-note { margin-top: 4px; }
.audit-pages code { padding: 0 6px; border: 1px solid var(--hair); border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.audit-task { font-size: 13px; }
/* MP51 SUB-5: with the map open, the task is a quiet link to its row (the accent only on its underline — the sparing rule) */
button.audit-task { display: inline; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; }
button.audit-task:hover { color: var(--text); }
.audit-tip { margin: 0 0 6px; font-size: 13px; }
.audit-more > summary { padding: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.audit-anchor { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* MP50 SUB-5 (A-1): the deep path's effort in the fork — the map's three bars and the level in a word; the won't-fit warning */
.audit-est { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: help; }
.audit-est .sl-bars3 i.sl-sc-on { background: currentColor; }
.audit-est-off { cursor: default; color: var(--muted); }
.audit-est-warn { flex-basis: 100%; font-size: 12.5px; color: var(--yellow); }
/* (after the line, never inside it — the spine ends at the last step; its own ground, the note readable on it) */
.audit-share { display: grid; gap: 10px; margin: 10px 0 0; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); }
.audit-share-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.audit-acts .btn.line { color: var(--text); }
.audit-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audit-link input { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; color: var(--text); background: var(--raise); font: inherit; }
/* MP56 SUB-21: the audits' tier — its card in the fork (the idea check's CTA), its run's line, its three deliverables under
   the fork in the text's column (the spine's right, as the stages card was; on a phone on their own ground) */
.audit-tier .cta-wrap { margin-top: 2px; }
/* the gift's price (struck out, 🎁 «бесплатно в этом месяце») takes its own row under the words in the fork's narrow card,
   so «Запустить бесплатно» never wraps beside it */
.audit-tier .cta.gift { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; }
.audit-tier .cta.gift .cta-price { grid-column: 2; justify-self: start; }
.audit-tier .fc-what b { color: var(--text); }
.audit-tier .tier-run { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.audit-tier .tier-ok { color: var(--text); }
.audit-tier .btn.line { justify-self: start; }
.tier-node { display: grid; gap: 10px; margin: 22px 0 0 calc(var(--spine) + var(--mk-gap, 18px)); padding: 16px 18px; border: 1px solid var(--hair); border-radius: 16px; background: linear-gradient(180deg, rgb(var(--ink-t) / 0.025), transparent); }
.tier-node p { margin: 0; font-size: 14px; line-height: 1.5; }
.tier-node .tier-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.tier-node h3 { margin: 0; font: 700 18px/1.3 var(--font-display); text-transform: none; letter-spacing: normal; }
.tier-node .btn.line { justify-self: start; }
.tier-export { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-export .btn { display: inline-flex; align-items: center; gap: 6px; }
.tier-sphere { border-top: 1px solid var(--hair); }
.tier-sphere > summary { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; }
.tier-sphere > summary::-webkit-details-marker { display: none; }
.tier-sphere > summary .faint { margin-left: auto; font-size: 13px; }
.tier-sphere > summary .chev { transition: transform 0.3s ease; color: var(--muted); }
.tier-sphere[open] > summary .chev { transform: rotate(90deg); }
.tier-sphere[data-empty] > summary b { color: var(--muted); font-weight: 600; }
.tier-sphere-b { display: grid; gap: 10px; padding: 0 0 14px; }
.tier-means, .tier-gets { color: var(--muted); }
.tier-means b, .tier-gets b { color: var(--text); font-weight: 600; }
.tz-task { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: rgb(var(--ink-t) / 0.02); }
.tz-task .tz-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tz-task .tz-h b { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tz-chip { flex: none; font-size: 12px; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--hair); color: var(--muted); white-space: nowrap; }
.tz-chip.tz-high { border-color: var(--line); color: var(--purple-text); }
.tz-why { color: var(--text); }
.tz-finding, .tz-pages, .tz-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.tz-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tz-acts .btn { min-height: 40px; }
.tz-brief { max-height: min(52vh, 460px); overflow: auto; margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--raise); font: 12.5px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tier-wks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tier-wk { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; }
.tier-wk.on { background: var(--tint); border-color: var(--purple-text); }
.tier-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tier-week { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.tier-week .tier-wn { grid-row: span 2; font-size: 13px; color: var(--purple-text); font-weight: 600; }
.tier-week ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
@media (max-width: 640px) {
  .tier-node { position: relative; z-index: 4; margin-left: 0; padding: 14px; background: var(--raise); }
  .tier-week { grid-template-columns: minmax(0, 1fr); }
  .tier-week .tier-wn { grid-row: auto; }
  .tz-acts .btn, .tier-wk { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tier-sphere > summary .chev, .tier-wk { transition: none; } }
@media (max-width: 720px) {
  .audit-rival { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .audit-line .node { transition: none; }
}
/* MP50 SUB-4 (OP-50-4): «Что делаем с каждым этапом» right under a finished business audit's fork — a row per stage, a segmented control */
.biz-stages { margin: 28px 0 8px calc(var(--spine) + var(--mk-gap, 18px)); }
/* (the stages card sits in the text's column, right of the fork's dashed spine — the spine ran through its words; on a
   phone, with no room to step in, it lies on its own ground over the spine, as the scorecard's columns do) */
@media (max-width: 640px) { .biz-stages { position: relative; z-index: 4; margin-left: 0; padding: 14px; border-radius: 16px; background: var(--raise); } }
/* the operator 2026-10-21: the deep path's offer in the idea check's look, the stages folded under «Что входит» */
.biz-stages[hidden] { display: none; }
.audit-offer { display: grid; }
.audit-offer .cta-wrap { margin-top: 2px; }
.audit-inc { justify-self: start; min-height: 40px; padding: 8px 2px; background: none; border: 0; color: var(--purple-text, rgb(var(--purple-t))); font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.audit-inc[hidden] { display: none; }
.audit-inc:hover, .audit-inc:focus-visible { text-decoration-thickness: 2px; outline: none; }
.audit-inc[aria-expanded="true"] { text-decoration-style: dotted; }
.plan-ways .pay-way[disabled] { opacity: 0.55; cursor: default; }
@media (max-width: 640px) { .audit-inc { min-height: 44px; } }
.biz-stages .bs-title { margin: 0 0 4px; font-size: 18px; }
.biz-stages .bs-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.biz-stages .bs-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 4px 12px; align-items: center; }
.biz-stages .bs-why { grid-column: 1 / -1; font-size: 13px; }
.biz-stages .bs-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.biz-stages .bs-opt { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, rgba(127, 127, 127, 0.35)); background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; }
.biz-stages .bs-opt.on { background: var(--surface-2, rgba(127, 127, 127, 0.15)); border-color: currentColor; }
.biz-stages .bs-fixed { font-size: 14px; opacity: 0.8; }
.biz-stages .bs-error { color: var(--status-failed, #c0392b); }
@media (max-width: 640px) { .biz-stages .bs-row { grid-template-columns: 1fr; } .biz-stages .bs-opt { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .biz-stages .bs-opt { transition: none; } }
/* MP49 SUB-6: an engine table's row whose state moved, or a new version, dissolves in (opacity only, never a flying row) */
@keyframes zo-dissolve { from { opacity: 0.25; } to { opacity: 1; } }
.zo-kind .zo-dissolve { animation: zo-dissolve 0.6s ease-out; }
/* MP49 SUB-8 (L8-3): a view swap in the panel — a row's detail opened or closed, cards ↔ table — dissolves; opacity only */
@keyframes zo-swap { from { opacity: 0; } to { opacity: 1; } }
.zo-kind.zo-swap { animation: zo-swap 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .zo-kind .zo-dissolve, .zo-kind.zo-swap { animation: none; } }

/* ── MP49 SUB-8: the SEO line on its timeline (map-view.js `lineCardHtml`, `jobBodyHtml`) — MP48's console in the cabinet:
   the card IS the map's `.pm-card`, the rows ARE `.pm-row`; new here are only the site line, the four artefact tiles and
   a job row's unfolded body. Motion: a new estimate and a step that moved dissolve (opacity, 0.6 s); a card's first paint
   rises 6 px at most; nothing under reduced motion. ── */
.sl-card { display: grid; gap: 10px; margin-top: 12px; container-type: inline-size; }
/* MP49 SUB-8 rework, calmed (the operator 2026-10-16): the one score's ring left of the site's name and domain (as the
   map's node card leads with its icon), its band and its two weakest criteria in one line; the criteria folded behind one
   control — two groups, a row each (name · bar · score · weight · finding) in aligned columns, tabular numbers; a row with
   a detail opens to it; whatever opens dissolves in (opacity and a 4 px rise — never its height) */
.sl-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sl-id { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sl-brand { margin: 0; font: 700 clamp(22px, 3.4vw, 28px)/1.15 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sl-ring { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; }
.sl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sl-rt { fill: none; stroke: var(--hair); stroke-width: 3.2; }
.sl-rv { fill: none; stroke: var(--sl-band, var(--faint)); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sl-ring b { position: relative; font: 700 21px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--sl-band, var(--faint)); }
.sl-b-strong { --sl-band: var(--good); }
.sl-b-work { --sl-band: var(--yellow); }
.sl-b-critical { --sl-band: var(--bad); }
.sl-b-none .sl-rt { stroke-dasharray: 3 4; }
.sl-verdict { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.sl-verdict b { font-weight: 600; color: var(--sl-band, var(--faint)); }
.sl-verdict em { font-style: normal; }
.sl-chev { width: 14px; height: 14px; flex: none; color: var(--faint); transition: transform 0.4s; }
[aria-expanded="true"] > .sl-chev { transform: rotate(180deg); }
.sl-crit { display: grid; gap: 0; border-top: 1px solid var(--hair); padding-top: 6px; }
.sl-crit-t { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; width: 100%; padding: 6px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sl-crit-l { font: 600 13.5px var(--font-display); }
.sl-crit-g { display: inline-flex; align-items: center; gap: 18px; margin-left: auto; font-size: 13px; color: var(--muted); }
.sl-gsum { display: inline-flex; align-items: center; gap: 8px; }
.sl-ring-s { width: 34px; height: 34px; }
.sl-ring-s .sl-rt, .sl-ring-s .sl-rv { stroke-width: 3.6; }
.sl-ring-s b { font-size: 12px; }
.sl-crit-g b, .sl-cg h3 b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sl-band, var(--faint)); }
.sl-crit-t:focus-visible, .sl-cr-h:focus-visible { outline: 2px solid rgb(var(--pm-ac)); outline-offset: 2px; border-radius: 8px; }
.sl-crit-b { display: grid; gap: 18px; padding: 8px 0 6px; }
/* a block folded by its `hidden` attribute stays folded: the class's `display` would otherwise win over the UA's (the
   operator: «при клике не сворачиваются») */
.sl-crit-b[hidden], .sl-cd[hidden] { display: none; }
.sl-in { animation: sl-in 0.6s ease-out; }
@keyframes sl-in { from { opacity: 0; transform: translateY(4px); } }
.sl-cg h3 { margin: 0 0 6px; font: 600 11.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sl-cg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sl-cr-h { display: grid; grid-template-columns: minmax(9rem, 13rem) 72px 2.4rem 4.6rem minmax(0, 1fr) 14px; align-items: center; gap: 4px 12px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; transition: background-color 0.4s; }
button.sl-cr-h { cursor: pointer; }
button.sl-cr-h:hover { background: rgb(var(--pm-ac) / 0.06); }
.sl-cr-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-cr-bar { height: 6px; border-radius: 3px; background: rgb(var(--ink-t) / 0.07); overflow: hidden; }
.sl-cr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sl-band, var(--faint)); }
.sl-cr-s { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sl-band, var(--faint)); }
.sl-cr-w { justify-self: start; padding: 0 8px; border-radius: 999px; border: 1px solid var(--hair); font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl-cr-f { min-width: 0; font-size: 13px; color: var(--muted); }
.sl-cn .sl-cr-n, .sl-cn .sl-cr-f { color: var(--faint); }
.sl-cd { margin: 2px 8px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); display: grid; gap: 8px; }
.sl-vbar, .sl-ibar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgb(var(--ink-t) / 0.06); }
.sl-vbar i, .sl-ibar i { display: block; height: 100%; }
.sl-ibar i { background: rgb(var(--ink-t) / 0.5); }
.sl-v-top10 i, .sl-vbar .sl-v-top10 { background: var(--good); }
.sl-v-top50 i, .sl-vbar .sl-v-top50 { background: var(--yellow); }
.sl-v-top100 i, .sl-vbar .sl-v-top100 { background: rgb(var(--pm-ac) / 0.6); }
.sl-v-beyond i, .sl-vbar .sl-v-beyond { background: rgb(var(--ink-t) / 0.2); }
.sl-v-unchecked i, .sl-vbar .sl-v-unchecked { background: rgb(var(--ink-t) / 0.08); }
.sl-vleg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.sl-vleg li { display: inline-flex; align-items: center; gap: 6px; }
.sl-vleg li i { width: 8px; height: 8px; border-radius: 2px; }
.sl-vleg b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sl-cd-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.sl-lead { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.sl-lead li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(60px, 1fr) 3.4rem; gap: 10px; align-items: center; }
.sl-lead li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-lead b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-lead .sl-self { color: rgb(var(--pm-ac)); }
.sl-mbar { height: 4px; border-radius: 2px; background: rgb(var(--ink-t) / 0.08); overflow: hidden; }
.sl-mbar i { display: block; height: 100%; background: rgb(var(--ink-t) / 0.45); border-radius: 2px; }
.sl-self .sl-mbar i { background: var(--good); }
@container (max-width: 640px) {
  .sl-cr-h { grid-template-columns: minmax(0, 1fr) 56px 2.4rem 14px; }
  .sl-cr-w { display: none; }
  .sl-cr-f { grid-column: 1 / -1; grid-row: 2; }
}
.sl-tile-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sl-tile-n b { font: inherit; }
.sl-tile-n i { font-style: normal; font: 400 12.5px var(--font-body); color: var(--faint); }
.sl-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgb(var(--ink-t) / 0.06); }
.sl-split i { display: block; height: 100%; }
.sl-s-used { background: rgb(var(--ink-t) / 0.6); }
.sl-s-rec { background: var(--yellow); }
.sl-s-off { background: rgb(var(--ink-t) / 0.22); }
.sl-s-strong { background: var(--good); }
.sl-s-work { background: var(--yellow); }
.sl-s-critical { background: var(--bad); }
.sl-s-none { background: rgb(var(--ink-t) / 0.18); }
.sl-card.sl-first { animation: sl-rise 0.4s ease-out both; }
@keyframes sl-rise { from { opacity: 0; transform: translateY(6px); } }
.sl-site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 14px; color: var(--muted); }
.sl-site-l { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sl-host { font: 600 16px/1.3 var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.sl-brand .sl-host { font: inherit; color: var(--text); }
.pm a.sl-host:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl-eng { font-size: 12.5px; color: var(--faint); }
.sl-site-none { align-items: center; color: var(--text); }
.sl-site-none .ico { width: 18px; height: 18px; color: var(--yellow); }
.sl-link { border: 0; padding: 0; background: none; color: rgb(var(--pm-ac)); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sl-site-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.sl-site-form input { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 15px; padding: 8px 12px; }
.sl-site-form input:focus { outline: none; border-color: rgb(var(--pm-ac)); }
.sl-confirm { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--yellow-t) / 0.07); border: 1px solid rgb(var(--yellow-t) / 0.3); font-size: 13.5px; }
.sl-confirm .pm-acts { margin-top: 4px; }
.sl-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* the card's own width decides (the panel docked narrows it at 1440 too): after the four columns, or they never applied */
@container (max-width: 640px) { .sl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 340px) { .sl-tiles { grid-template-columns: minmax(0, 1fr); } }
.sl-tile { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 12px; border-radius: 16px; background: rgb(var(--ink-t) / 0.035); border: 1px solid var(--hair); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.4s, background-color 0.4s; }
.sl-tile:hover, .sl-tile:focus-visible { border-color: var(--pm-line); background: rgb(var(--pm-ac) / 0.08); }
.sl-tile-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* the tile's name whole (it was «Стр…», «Кон…» at 390 and «Группы з…» at 1440 beside «новое»): it wraps by words, two
   lines at most, and «новое» is a tag on the tile's top edge, out of the name's line */
.sl-tile-top b { min-width: 0; font: 600 14.5px/1.25 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-tile { position: relative; }
.sl-tile .sl-new { position: absolute; top: -8px; right: 10px; line-height: 16px; }
/* a table's own icon in the muted ink; the accent only on a tile that is «новое» (the sparing-accent rule) */
.sl-ico { background: rgb(var(--ink-t) / 0.06); color: var(--muted); }
.sl-ico-new { color: var(--pm-acc); }
/* «новое» in the project's softened accent — yellow is a running task's and the person's turn, never a tile's news */
.sl-new { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: rgb(var(--pm-on-ac)); background: var(--pm-acc); border-radius: 999px; padding: 0 7px; }
@keyframes sl-fade { from { opacity: 0; } }
.sl-tile-n { font: 700 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.sl-tile-sub { font-size: 12px; color: var(--faint); }
@media (max-width: 900px) { .sl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a job row's unfolded body: its steps with time, the effort and its line, the numbers, the estimate, the tables it fills */
.sl-body { gap: 12px; }
.sl-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sl-st { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 3px 0; font-size: 14px; }
.sl-st em { font-style: normal; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the steps as a timeline, not a todo list (the operator): a thin connector between the marks; a mark is never a box —
   no border-box shape, no hover, no pointer — and says its state by shape */
.sl-steps .sl-st:not(:last-child)::before { content: ''; position: absolute; left: 8.5px; top: calc(50% + 9px); height: calc(100% - 12px); border-left: 1px solid var(--hair); }
.sl-steps .sl-st.sl-st-done:not(:last-child)::before { border-left-color: rgb(var(--pm-ac) / 0.5); }
.sl-mk { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; font: 700 11px/1 var(--font-display); }
.sl-mk-wait { width: 10px; height: 10px; margin: 4px; border: 1.5px dashed rgb(var(--ink-t) / 0.28); }
.sl-mk-run { border: 2px solid rgb(var(--pm-ac) / 0.2); border-top-color: var(--pm-run); animation: sl-turn 1.6s linear infinite; }
@keyframes sl-turn { to { transform: rotate(360deg); } }
.sl-mk-done { background: var(--pm-acc); color: rgb(var(--pm-on-ac)); }
.sl-mk-done .ico { width: 12px; height: 12px; }
.sl-mk-fail { border: 1.5px solid var(--bad, #f87171); color: var(--bad, #f87171); }
.sl-mk-skip::after { content: ''; width: 9px; border-top: 1.5px solid var(--faint); }
.sl-st-wait .sl-st-n { color: var(--muted); }
.sl-st-done .sl-st-n { color: var(--muted); }
.sl-st-run .sl-st-n { color: var(--text); font-weight: 600; }
.sl-st-run em { color: var(--pm-run); }
.sl-st-fail em { color: var(--bad, #f87171); }
@media (prefers-reduced-motion: reduce) { .sl-mk-run { animation: none; border-right-color: var(--pm-run); } }
.sl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sl-eff, .sl-num { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sl-eff select, .sl-num input { background: var(--surface); color: var(--text); border: 1px solid var(--hair); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; }
.sl-num input { width: 96px; }
.sl-eff select:hover, .sl-num input:hover { border-color: var(--pm-line); }
.sl-eff-line { font-size: 12.5px; color: var(--faint); }
/* a job task's effort meter on its title's line, right-aligned, no word (the operator: «сложность задачи надо показывать
   без текста справа от имени задачи»); its hover card on hover, focus or a tap — the scale's grades, this task's place */
.sl-meter { position: relative; display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 3px; border-radius: 6px; vertical-align: middle; cursor: help; outline: none; font-weight: 400; }
/* three rising bars, signal-strength style (the operator: «в 3 полоски»): filled by the scale, the spent part the accent */
.sl-bars3 { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sl-bars3 i { width: 3px; border-radius: 1px; background: rgb(var(--ink-t) / 0.16); }
.sl-bars3 i:nth-child(1) { height: 5px; }
.sl-bars3 i:nth-child(2) { height: 8px; }
.sl-bars3 i:nth-child(3) { height: 12px; }
.sl-bars3 i.sl-sc-on { background: rgb(var(--ink-t) / 0.62); }
.sl-bars3 i.sl-sc-spent { background: var(--pm-run); }
.sl-meter-idle .sl-bars3, .sl-meter-wait .sl-bars3 { opacity: 0.55; }
.sl-meter:focus-visible { box-shadow: 0 0 0 2px rgb(var(--pm-ac) / 0.6); }
.pm-chip.pm-chip-ico { padding: 2px 6px; color: var(--faint); }
.pm-chip.pm-chip-ico .ico { width: 14px; height: 14px; }
/* «Скоро» — a future feature: translucent as a whole, not openable (no pointer, no hover) */
.pm-row-static { opacity: 0.45; }
.pm-row-static .pm-rsum { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 8px 0; cursor: default; }
.pm-row-static .pm-rmain b { color: var(--muted); }
.hcard:has(.sl-hcwrap) { background: #17131f; border-color: rgb(var(--ink-t) / 0.16); box-shadow: 0 18px 44px rgb(var(--shade-t) / 0.7); max-width: min(320px, calc(100vw - 16px)); }
.sl-hcwrap { display: grid; gap: 10px; }
.sl-hc-h { margin: 0; }
.sl-hc-h b { color: var(--text); }
.sl-hc-h i { font-style: normal; color: var(--faint); }
.sl-hc-grades { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sl-hc-grades li { display: grid; grid-template-columns: 18px 8.5rem minmax(0, 1fr); gap: 10px; align-items: center; color: var(--muted); font-size: 12.5px; }
.sl-hc-grades li b { font-weight: 600; color: var(--muted); }
.sl-hc-grades li.on b { color: var(--text); }
.sl-hc-grades li.on .sl-bars3 i.sl-sc-on { background: var(--pm-acc, var(--text)); }
.sl-hc-warn { margin: 0; color: var(--yellow); }
/* a task's status mark on the rail (map-model.js `taskMark`): done a check, running the arc, waiting the hand, locked a lock */
.pm-mark.pm-mk-done .ico, .pm-mark.pm-mk-wait .ico, .pm-mark.pm-mk-lock .ico { width: 18px; height: 18px; }
.pm-mark.pm-mk-lock { border-style: dashed; border-color: rgb(var(--ink-t) / 0.26); color: var(--faint); background: var(--pm-disc); }
/* the effort scale (the operator: «шкала от 0 до 10 … без реальных цифр»): ten small bars filled to the score, the part
   already spent stronger, the level in a word, muted; the warning only when the estimate does not fit the window left */
.sl-scale { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--muted); }
.sl-scale .ico { width: 14px; height: 14px; color: var(--faint); flex: none; }
.sl-scale-m { display: inline-flex; gap: 2px; }
.sl-scale-m i { width: 5px; height: 12px; border-radius: 1.5px; background: rgb(var(--ink-t) / 0.09); transition: background-color 0.6s; }
.sl-scale-m i.sl-sc-on { background: rgb(var(--ink-t) / 0.5); }
.sl-scale-m i.sl-sc-spent { background: var(--pm-run); }
.sl-lv-very_heavy i.sl-sc-on, .sl-lv-very_heavy i.sl-sc-spent { background: var(--yellow); }
.sl-scale b { font-weight: 600; color: var(--text); }
.sl-scale-warn { flex-basis: 100%; font-size: 12.5px; color: var(--yellow); }
.sl-scale-wait { color: var(--faint); }
.sl-tick { animation: sl-fade 0.6s ease-out; }
.sl-quiet { color: var(--muted); border-color: var(--hair); }
/* «Остановить» red (the operator), with a confirmation; «Ещё раз» small and grey before «Обновлено» */
.btn.sl-danger { background: transparent; color: var(--bad); border: 1px solid rgb(248 113 113 / 0.55); }
.btn.sl-danger:hover { background: rgb(248 113 113 / 0.12); }
.modal .btn.sl-danger-fill { background: var(--bad); color: #160707; border-color: var(--bad); }
.sl-again { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color 0.4s, color 0.4s; }
.sl-again:hover, .sl-again:focus-visible { color: var(--text); border-color: var(--pm-line, var(--hair)); }
.sl-modal-back { --pm-ac: var(--team-ac); --pm-acc: rgb(var(--pm-ac)); --pm-run: var(--yellow); --pm-line: rgb(var(--ink-t) / 0.16); }
.sl-modal .sl-scale { margin-top: 2px; }
.sl-quiet:hover { color: var(--text); border-color: var(--pm-line); }
/* a job row not started or not available: a grey dashed border, muted (the operator) */
.pm-row.sl-idle details { border: 1px dashed var(--hair); }
/* opened, it takes the opened step's ground like every step (step-frame.js), its border still dashed and quiet */
.pm-row.sl-idle details[open] { border-color: var(--hair); }
.pm-row.sl-idle .pm-rmain b, .pm-row.sl-idle .pm-rmore { color: var(--muted); }
/* the run's report as its result tile; the tables it worked with (before) or updated (after) */
.sl-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--hair); background: rgb(var(--ink-t) / 0.035); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.4s, background-color 0.4s; }
.sl-result:hover, .sl-result:focus-visible { border-color: var(--pm-line); background: rgb(var(--pm-ac) / 0.08); }
.sl-result > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.sl-result b { font: 600 14px var(--font-display); }
.sl-result i { font-style: normal; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-result-go { width: 14px; height: 14px; color: var(--faint); }
.sl-upd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.sl-upd-h { color: var(--faint); }
.sl-upd-updated .sl-upd-h { color: var(--pm-acc); }
.sl-upd-l > i { font-style: normal; color: var(--faint); }
.sl-upd-i { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.sl-upd-i:hover { color: var(--text); }
.sl-upd-i b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .sl-site-form { grid-template-columns: minmax(0, 1fr) auto; }
  .sl-site-form .btn.ghost { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sl-card.sl-first, .sl-tick, .sl-in { animation: none; } .sl-rv, .sl-chev, .sl-cr-h { transition: none; } }


/* ── MP52 SUB-8 (D52-15): the team space's LIGHT base — the cabinet's first light token set. `team-look.js` puts
   `data-base="light"` on <html> while the person is inside a team whose look is light (the home and other teams keep
   today's dark, OP-52-19); every colour token of the dark set is redefined here (pinned by `front-team-look.test.ts`),
   the text and the semantic colours AA on --bg and --raise. The semantic colours keep their meaning and hue (good green,
   bad red, «ждёт тебя» yellow, the greys) — darkened for a light ground, never the brand's. */
html[data-base='light'] {
  color-scheme: light;
  --bg: #f6f5f9;
  --raise: #ffffff;
  --tint: rgba(98, 50, 201, 0.06);
  --tint-strong: rgba(98, 50, 201, 0.12);
  --line: rgba(40, 28, 72, 0.2);
  --hair: rgba(23, 20, 31, 0.1);
  --text: #17141f;
  --muted: #474255;
  --faint: #635d73;
  --purple: #7040d6;
  --purple-text: #6232c9;
  --yellow: #8a5a00;
  --yellow-tint: rgba(201, 140, 0, 0.12);
  --on-yellow: #ffffff;
  --good: #047857;
  --bad: #c2261f;
  --st-run: #6232c9;
  --ink-t: 23 20 31;
  --shade-t: 40 32 60;
  --ground-t: 246 245 249;
  --veil-t: 246 245 249;
  --purple-t: 112 64 214;
  --violet-t: 109 40 217;
  --lilac-t: 98 50 201;
  --lavender-t: 112 80 210;
  --yellow-t: 201 140 0;
  --warn-t: 180 130 0;
  --good-t: 4 120 87;
  --bad-t: 194 38 31;
  --surface: #ffffff;
  --text-hi: #17141f;
  --panel-t: 255 255 255;
  --surface-t: 255 255 255;
  --glass-t: 255 255 255;
  --pane-t: 250 250 252;
  --pane-2-t: 244 243 247;
  --night-t: 246 245 249;
  --gift-ink: #bbf7d0;
  --gift-mark: #fde68a;
  --brand-t: 98 50 201;
  --on-brand: #ffffff;
  --accent-t: 98 50 201;
  --team-on-ac: 255 255 255;
  /* the panel's greys per base (Radix gray, light) */
  --g1: #ffffff; --g2: #ffffff; --g3: #f4f3f7; --g4: #ecebf0; --g5: #e4e3e9; --g6: #d8d7de; --g7: #c6c5cd; --g8: #9d9ca6;
  --g9: #5f5e68; --g10: #55545d; --g11: #3a3941; --g12: #17141f;
  --ga2: #0000000a; --ga3: #00000012; --ga4: #0000001a; --ga5: #00000021; --ga6: #00000029; --ga8: #00000040; --ga11: #000000a6;
  --v4: #e9e1ff; --v7: #6d3fd4; --v8: #5d2fc4; --v9: #4b1fae; --v10: #6232c9; --v11: #5428b8; --v12: #2a1660;
  --va3: rgba(98, 50, 201, 0.18); --va11: #5428b8;
  --p1: #17141f; --p2: #474255; --p3: #5f5e68;
  --sn-c-projects: #b4521f; --sn-c-know: #6d3fd4; --sn-c-company: #474255; --sn-panel: #ffffff;
  --sn-row-hover: rgba(23, 20, 31, 0.05); --sn-panel-shadow: 0 24px 60px rgba(40, 32, 60, 0.18); --sn-hair-2: rgba(23, 20, 31, 0.14);
  --sn-faint: #635d73; --sn-badge-line: rgba(201, 140, 0, 0.45); --sn-badge-line-faint: rgba(201, 140, 0, 0.25);
}
/* A team's look on (`data-look="team"`): the product's purple identity gives way — its accent text becomes the team's
   SOFTENED accent, its lines, tints and glows go neutral (cards, rows, chips, the page glow), the docked panel's Radix
   violet takes the brand (its fills, with `--on-brand`) and the accent (its marks). After the light set: the same weight,
   so these win in either base. The semantic tokens are untouched. */
html[data-look='team'] {
  --purple-text: var(--accent);
  --line: rgb(var(--ink-t) / 0.16);
  --tint: rgb(var(--ink-t) / 0.04);
  --tint-strong: rgb(var(--ink-t) / 0.08);
  --purple-t: var(--ink-t);
  --violet-t: var(--ink-t);
  --lilac-t: var(--ink-t);
  --lavender-t: var(--ink-t);
  --v4: rgb(var(--brand-t) / 0.5);
  --v7: var(--brand);
  --v8: var(--brand);
  --v9: var(--brand);
  --v10: var(--accent);
  --v11: var(--accent);
  --v12: var(--text);
  --va3: rgb(var(--accent-t) / 0.35);
  --va11: var(--accent);
}
/* the team's picture behind (`data-backdrop="on"`): the docked panel is a translucent, blurred pane of the base's panel
   colour (the lab console's, 69ac4f5d) — it only moves the veil towards the ground; the quiet greys stay AA there */
html[data-backdrop='on'] .fx-app { background: rgb(var(--panel-t) / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* the light base's own spots that a dark-ground literal drew: the logo (the kit's light-ground mark), the header's outline
   «Новая идея» (its lavender ink on a white bar was unreadable) — in the team's brand, AA on the bar */
html[data-base='light'] .brand-full, html[data-base='light'] .sn-ms-logo img { content: url('/front/brand/fox021-horizontal-for-light-bg.svg'); }
html[data-base='light'] .topbar .new-idea { color: var(--brand); border-color: rgb(var(--brand-t) / 0.6); }
html[data-base='light'] .topbar .new-idea:hover { color: var(--brand); border-color: var(--brand); background: rgb(var(--brand-t) / 0.08); }
/* the map's glass panes (its cards, its crumbs, its dense sheets) on the light base's panel colour */
html[data-base='light'] .pm { --pm-glass-t: var(--panel-t); }
/* ---------- Settings: the avatar's grouped menu and the settings modal (front.js block «Settings», settings-model.js) —
   the dark theme's panel and cards; motion is opacity and a few pixels of transform only (slow dissolves), never a filter */
.me-menu { max-height: calc(100vh - var(--top-h, 64px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.me-who { min-width: 0; }
.me-who b, .me-how { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-how { display: block; font-size: 12.5px; }
.me-how[hidden] { display: none; }
.me-group { display: grid; gap: 2px; }
.me-group[hidden] { display: none; }
.me-group + .me-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--hair); }
.me-g-h { padding: 4px 10px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.me-ico:not([hidden]) { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.me-ico .ico { flex: none; width: 17px; height: 17px; color: var(--muted); }
.me-ico.out .ico { color: var(--bad); }
.stg-modal { position: fixed; inset: 0; z-index: 170; display: grid; place-items: start center; padding: min(8vh, 72px) 16px 16px; opacity: 0; transition: opacity 0.32s ease; }
.stg-modal[hidden] { display: none; }
.stg-modal.in { opacity: 1; }
.stg-back { position: absolute; inset: 0; background: rgb(var(--shade-t) / 0.66); }
.stg-panel { position: relative; width: min(880px, 100%); height: min(660px, calc(100vh - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr); background: radial-gradient(90% 50% at 0% 0%, rgb(var(--purple-t) / 0.12), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; overflow: hidden; transform: translateY(8px); transition: transform 0.32s ease; }
.stg-modal.in .stg-panel { transform: none; }
.stg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--hair); }
.stg-top h2 { margin: 0; font: 700 20px/1.25 var(--font-display); color: var(--text); }
.stg-body { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 0; }
.stg-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--hair); overflow-y: auto; }
.stg-tab { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.stg-tab .ico { flex: none; width: 18px; height: 18px; }
.stg-tab:hover { background: var(--tint); color: var(--text); }
.stg-tab.on { background: var(--tint-strong); color: var(--text); }
.stg-tab.on .ico { color: var(--purple-text); }
.stg-tab:focus-visible { outline: 2px solid var(--purple-text); outline-offset: -2px; }
/* `max-content` rows: an overflowing pane never squeezes a clipped list (`overflow: hidden`) to nothing */
.stg-pane { display: grid; grid-auto-rows: max-content; gap: 14px; align-content: start; padding: 20px 26px 28px; overflow-y: auto; overscroll-behavior: contain; outline: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.stg-pane.out { opacity: 0; transform: translateY(4px); }
.stg-h { margin: 0; font: 700 18px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.stg-lead { margin: -6px 0 0; font-size: 13.5px; line-height: 1.5; }
.stg-sub { margin: 4px 0 0; font: 700 14.5px/1.3 var(--font-display); color: var(--text); }
.stg-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.stg-note.faint { color: var(--faint); }
.stg-note[hidden], .stg-block[hidden] { display: none; }
.stg-block { display: grid; gap: 8px; }
.stg-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 16px; background: rgb(var(--ink-t) / 0.03); }
.stg-card > .ico { flex: none; width: 20px; height: 20px; color: var(--yellow); }
.stg-mem > .ico { color: var(--purple-text); }
.stg-who b { display: block; font: 700 16px var(--font-display); }
.stg-who .faint { display: block; font-size: 13px; }
.stg-av { flex: none; width: 48px; height: 48px; font-size: 17px; }
.stg-bal-m { display: grid; flex: 1; min-width: 0; gap: 2px; font-size: 13px; }
.stg-bal-m b { font: 700 17px var(--font-display); color: var(--text); }
.stg-bal-m .faint { line-height: 1.4; }
.stg-btn { flex: none; padding: 9px 16px; font-size: 14px; }
.stg-btn .ico { width: 17px; height: 17px; }
.stg-rows { display: grid; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.stg-row { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; }
.stg-row + .stg-row { border-top: 1px solid var(--hair); }
.stg-k { color: var(--faint); font-size: 13px; }
.stg-v { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.stg-row-go { justify-self: end; font-size: 13.5px; }
.stg-chip { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgb(var(--ink-t) / 0.06); color: var(--muted); font-size: 12px; line-height: 18px; white-space: nowrap; vertical-align: 1px; }
.stg-chip.ok { background: rgb(var(--good-t) / 0.12); color: var(--good); }
.stg-chip.wait { background: var(--yellow-tint); color: var(--yellow); }
.stg-code { font: 13px var(--font-mono); color: var(--text); }
.stg-set { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.stg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.stg-choice { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid rgb(var(--ink-t) / 0.2); border-radius: 999px; color: var(--muted); font-size: 14.5px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; }
.stg-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stg-choice.on, .stg-choice:has(input:checked) { border-color: var(--yellow); color: var(--text); background: var(--yellow-tint); }
.stg-choice:has(input:focus-visible) { outline: 2px solid var(--purple-text); outline-offset: 2px; }
.stg-ways { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.stg-way { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.stg-way + .stg-way { border-top: 1px solid var(--hair); }
.stg-way > .ico { flex: none; width: 18px; height: 18px; color: var(--muted); }
.stg-way-n { display: grid; flex: 1; min-width: 0; gap: 2px; color: var(--text); }
.stg-way-n .faint { font-size: 12.5px; overflow-wrap: anywhere; }
.stg-link { display: grid; gap: 10px; }
.stg-link-go { display: flex; flex-wrap: wrap; gap: 8px; }
.stg-link-box { display: grid; gap: 10px; }
.stg-link-box:empty { display: none; }
/* «Способы входа» (2026-10-18): a way's «Подключить» / «Отключить» at the row's end; the last way in's is disabled */
.stg-way-do { flex: none; min-height: 32px; font-size: 13px; white-space: nowrap; }
.stg-way-do:disabled { opacity: 0.7; }
.stg-ways + .stg-note { margin-top: 8px; }
.stg-merge { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid rgb(var(--bad-t) / 0.4); border-radius: 16px; }
.stg-plan-t { margin: 0; font-size: 14px; color: var(--text); }
.stg-parked { display: grid; gap: 10px; margin-top: 10px; }
.stg-buys { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.stg-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; }
.stg-buy + .stg-buy { border-top: 1px solid var(--hair); }
.stg-buy-n { display: grid; min-width: 0; gap: 2px; }
.stg-buy-n .faint { font-size: 12.5px; }
.stg-buy-p { display: grid; justify-items: end; gap: 4px; }
.stg-plans { margin-top: 2px; }
.stg-plans[hidden] { display: none; }
.stg-plan-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.stg-plan-who .stg-buy-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-pane .acc-sec + .acc-sec, .stg-pane .stg-block + .acc-sec { margin-top: 4px; }
.stg-pane .acc-form { max-width: 420px; }
.stg-pane .acc-go { justify-self: start; }
@media (max-width: 640px) {
  .stg-modal { padding: 0; place-items: stretch; }
  .stg-panel { width: 100%; height: 100%; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .stg-top { padding: 10px 12px 10px 16px; }
  .stg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .stg-nav { flex-direction: row; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--hair); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .stg-nav::-webkit-scrollbar { display: none; }
  .stg-tab { flex: none; min-height: 40px; padding: 8px 12px; white-space: nowrap; font-size: 14px; }
  .stg-pane { padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .stg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .stg-row .stg-k { grid-column: 1 / -1; }
  .stg-card { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .stg-modal, .stg-panel, .stg-pane, .stg-tab, .stg-choice { transition: none; } }
/* ── the item's settings (the operator 2026-10-18; front.js «the item's settings», classes `isg-`): the person's settings
   modal's frame and parts (`stg-`) — one pane of sections («Название», «Логотип», «Облик», the facts, «Архив»), no section
   list; on a desktop narrower and as tall as its content, on a phone the full screen. It dissolves as `stg-` does. ── */
.isg-panel { width: min(560px, 100%); height: auto; max-height: min(760px, calc(100vh - min(8vh, 72px) - 16px)); max-height: min(760px, calc(100dvh - min(8vh, 72px) - 16px)); }
.isg-head { display: grid; gap: 2px; min-width: 0; }
.isg-who { margin: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isg-who:empty { display: none; }
.isg-pane { gap: 20px; }
.isg-sec { display: grid; gap: 10px; min-width: 0; }
.isg-sec + .isg-sec { padding-top: 18px; border-top: 1px solid var(--hair); }
.isg-sec .stg-sub { margin: 0; }
.isg-line { display: flex; gap: 8px; min-width: 0; }
.isg-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.isg-input:focus { outline: none; border-color: var(--purple-text); }
.isg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.isg-logo-card { justify-content: space-between; flex-wrap: wrap; }
.isg-logo { flex: none; display: grid; place-items: center; }
.isg-logo > .sw-st, .isg-logo > .sw-face { width: 56px; height: 56px; }
.isg-logo > .sw-face { border-radius: 16px; }
.isg-logo > .sw-face .ico { width: 26px; height: 26px; }
.isg-logo .sw-mono { font-size: 18px; }
.isg-color { display: block; width: 56px; height: 34px; padding: 2px; border: 1px solid var(--hair); border-radius: 10px; background: transparent; cursor: pointer; }
.isg-said { margin: 0; }
.isg-said:empty { display: none; }
.isg-said.bad { color: var(--bad); }
.btn.line.isg-arch { color: var(--bad); border-color: rgb(var(--bad-t) / 0.45); }
.btn.line.isg-arch:hover, .btn.line.isg-arch:focus-visible { background: rgb(var(--bad-t) / 0.08); border-color: var(--bad); }
.isg-ask { flex-basis: 100%; margin: 0; font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .isg-panel { height: 100%; max-height: none; }
  .isg-line { flex-wrap: wrap; }
  .isg-input { flex-basis: 100%; }
  /* a fact or a colour beside its label, as on a desktop (the person's settings stack theirs) */
  .isg-pane .stg-row { grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); }
  .isg-pane .stg-row .stg-k { grid-column: auto; }
}

/* A chat row's Telegram looks (`tg-text.js`, a closed list drawn after escaping): a quote as its bar, a spoiler veiled
   until hovered or focused; bold, italic, underline, strike and code are the plain tags. */
#ch-list .tg-q { display: inline; padding-left: 8px; border-left: 3px solid rgb(var(--purple-t) / 0.45); color: var(--g11); }
#ch-list .tg-sp { border-radius: 4px; background: var(--g6); color: transparent; transition: color 0.2s ease, background-color 0.2s ease; }
#ch-list .tg-sp:hover, #ch-list .tg-sp:focus-within { background: transparent; color: inherit; }
@media (prefers-reduced-motion: reduce) { #ch-list .tg-sp { transition: none; } }
/* Our custom emoji in a row's words (`tg-text.js`): the set's picture at the line's height, its box sized by the font
   before the file loads — no layout shift; the fallback emoji is its alt. */
img.tg-emo { display: inline-block; width: 1.25em; height: 1.25em; margin: 0 0.04em; vertical-align: -0.28em; object-fit: contain; }

/* ── MP53: promo codes — the admins' «Промокоды» page (SUB-3) and the person's line (SUB-4). Semantic colours for the
   states (never the brand's); the table is the cabinet's `table.wide` in `.tw`; the page's body dissolves on a new list. */
.stg-chip.bad { background: rgb(var(--bad-t) / 0.12); color: var(--bad); }
.stg-chip.mute { background: rgb(var(--ink-t) / 0.06); color: var(--faint); }
.pa-page { display: grid; gap: 16px; padding: 24px 0 48px; }
.pa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pa-head h1 { margin: 0; font-size: 26px; }
.pa-head p { margin: 4px 0 0; }
.pa-tools { display: grid; gap: 10px; }
.pa-q { width: 100%; max-width: 420px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.pa-chips { gap: 6px 8px; }
button.pa-chip { background: none; font: inherit; font-size: 12.5px; min-height: 32px; padding: 0 12px; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; }
button.pa-chip:hover { color: var(--text); }
.pa-sep { width: 1px; align-self: stretch; background: var(--hair); }
.pa-tw.fx-swap { animation: fx-swap 0.5s ease-out; }
.pa-table td, .pa-table th { vertical-align: middle; }
.pa-row { cursor: pointer; transition: background-color 0.3s ease; }
.pa-row:hover, .pa-row.panel-on, .pa-row:focus-visible { background: rgb(var(--ink-t) / 0.04); }
.pa-code { background: none; border: 0; padding: 0; color: var(--text); font: 13px var(--font-mono); cursor: copy; }
.pa-code.big { font-size: 18px; }
.mono { font-family: var(--font-mono); }
.pa-empty { padding: 24px 0; }
.pa-foot { display: flex; justify-content: center; }
.pa-form { display: grid; gap: 16px; }
.pa-set { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pa-set legend { margin-bottom: 4px; font-weight: 600; }
.pa-opts { display: grid; gap: 6px; }
.pa-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.pa-opt.off { color: var(--faint); cursor: not-allowed; position: relative; }
.pa-field { display: grid; gap: 4px; }
.pa-field input, .pa-field textarea { min-height: 40px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.pa-made { display: grid; gap: 10px; }
.pa-made-acts, .pa-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-codes { margin: 0; padding-left: 28px; display: grid; gap: 4px; font-size: 13.5px; }
.pa-detail { display: grid; gap: 14px; }
.pa-detail-code { display: flex; align-items: center; gap: 8px; margin: 0; }
.pa-fields { display: grid; gap: 6px; margin: 0; }
.pa-dl { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 10px; }
.pa-dl dd { margin: 0; overflow-wrap: anywhere; }
.pa-sub { margin: 8px 0 0; font-size: 15px; }
.pa-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; animation: fx-swap 0.4s ease-out; }
.pa-danger { color: var(--bad); }
.promo-line { display: grid; gap: 8px; }
.promo-ask { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.promo-ask:hover { color: var(--text); }
.promo-form { display: grid; gap: 6px; animation: fx-swap 0.4s ease-out; }
.promo-form[hidden], .promo-ask[hidden], .promo-say[hidden], .promo-pick[hidden] { display: none; }
.promo-row { display: flex; gap: 8px; }
.promo-code { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: var(--text); font: 14px var(--font-mono); text-transform: uppercase; }
.promo-say { margin: 0; font-size: 13.5px; }
.promo-say.error { color: var(--bad); }
.promo-say.ok { color: var(--good); }
/* MP53 SUB-2: a discounted price — the book's struck out (muted), one quiet line naming the code; SUB-1's plan pick */
s.was { color: var(--muted, inherit); opacity: 0.7; font-weight: 400; margin-inline-end: 4px; text-decoration-thickness: 1px; }
.promo-cut { margin: 6px 0 0; font-size: 13px; }
/* 2026-10-21: a gift — the price struck out, 🎁 «N бесплатно» in the brand's good green; the CTA says it is free; the press
   asks «Используется 1 подарок» first (`askGift`); a change of the gifts redraws in place (the page's own dissolve) */
.gift-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--good); white-space: nowrap; }
.gift-ico { font-size: 1.05em; line-height: 1; }
.cta-price .gift-tag { color: var(--gift-ink); }
s.gift-was { white-space: nowrap; }
.cta-price s.gift-was { color: inherit; opacity: 0.62; }
.cta.gift .cta-ico { color: var(--gift-mark); }
.cv-price.k-gift { color: var(--good); }
.tlk-price .gift-tag, .hc-price .gift-tag, .unlock .gift-tag { font-weight: 600; }
.gift-ask { display: grid; gap: 6px; justify-items: start; }
.gift-ask h2 { margin: 0; }
.gift-ask p { margin: 0; }
.gift-ask .actions { justify-self: stretch; margin-top: 10px; }
.gift-ask-ico { font-size: 34px; line-height: 1; }
.promo-pick { display: grid; gap: 8px; margin-top: 6px; }
.promo-pick-h { margin: 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .pa-tw.fx-swap, .pa-ask, .promo-form { animation: none; } .pa-row, button.pa-chip { transition: none; } }
@media (max-width: 600px) { .pa-page { padding-top: 16px; } .pa-head h1 { font-size: 22px; } .pa-dl { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- One header on every cabinet page (the operator 2026-10-17) ----------
   The home's header is every page's header: the same bar, the switcher in it (on the home its face is «Список идей»),
   the window's full width — the logo at its left edge, the actions at its right; no row squeezed into the centre. */
.top-row, body.at-home .top-row, body.sn-on .top-row, body.sn-on.at-home .top-row { max-width: none; }
body.at-home .topbar, body.at-home.scrolled .topbar { position: sticky; top: 0; margin: 0; background: rgb(var(--ground-t) / 0.88); border-bottom: 1px solid var(--hair); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the bar floats on every page as inside an idea (U204, SITE-10): a 12 px gap at both sides, its frame drawn by ::after */
@media (min-width: 641px) {
  body.at-home .topbar, body.at-home.scrolled .topbar { margin: 0 12px; border: 1px solid transparent; border-top: 0; border-radius: 0 0 18px 18px; --bar-x: 13px; }
  body.at-home .topbar::after { opacity: 1; }
}
body.at-home .sw-button { display: grid; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
@media (min-width: 1441px) { .top-row, body.sn-on .top-row, body.sn-on.at-home .top-row { padding-left: 32px; padding-right: 32px; } }

/* ---------- The home as the person's cabinet (the operator 2026-10-17 → 2026-10-22) ----------
   «Мой кабинет» and its four sections in one column — «Идеи», «Концепции», «Проекты», «Проверки» — each its heading with
   its count and its own «+», its cards two to a row on a wide screen, one on a phone; an empty section its short line.
   No picture behind it, no tabs. Under the composer (a visitor, a draft) the sections that hold something, no «+». */
#home-ideas.home-list { width: 100%; max-width: 920px; margin: 0 auto; padding-top: 4px; gap: 26px; }
.hl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: -6px; }
.hl-title { margin: 0; font: 700 26px/1.2 var(--font-display); color: var(--text); }
.hs { display: grid; gap: 10px; min-width: 0; }
.hs-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hs-h { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font: 600 12.5px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hs-h .sw-g-ico { width: 16px; height: 16px; flex: none; }
.hs-n { color: var(--faint); letter-spacing: 0.04em; }
.hs[data-section='idea'] .hs-h .sw-g-ico, .hs[data-section='project'] .hs-h .sw-g-ico { color: var(--yellow); }
.hs[data-section='concept'] .hs-h .sw-g-ico { color: var(--purple-text); }
.hs[data-section='check'] .hs-h .sw-g-ico { color: var(--muted); }
.hs-add { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--purple-text); font: 600 13px var(--font-display); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.hs-add .plus { font-size: 16px; line-height: 1; }
.hs-add:hover, .hs-add:focus-visible { background: rgb(var(--purple-t) / 0.12); border-color: var(--purple-text); }
.hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hs-empty { margin: 0; padding: 12px 16px; border: 1px dashed var(--hair); border-radius: 14px; color: var(--faint); font-size: 14px; line-height: 1.5; }
.hs-more { justify-self: start; padding: 4px 2px; border: 0; background: none; color: var(--purple-text); font: 600 13.5px var(--font-body); cursor: pointer; }
.hs-more:hover, .hs-more:focus-visible { color: var(--text); }
/* a card: the face, the words, the side (the score, a state, a level), a project's bar under the words */
.hi-card.hc { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; min-height: 68px; padding: 11px 14px; }
.hi-card.hc > .hc-face, .hi-card.hc > .sw-face { grid-row: span 2; align-self: center; }
.hi-card.hc > .sw-face { width: 44px; height: 44px; border-radius: 13px; }
.hi-card.hc > .sw-face .ico { width: 22px; height: 22px; }
.hi-card.hc > .sw-face .sw-mono { font-size: 13px; }
.hi-card.hc .hi-chips { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-content: flex-end; }
.hi-card.hc .hi-t { grid-column: 2; grid-row: 1 / span 2; align-self: center; gap: 1px; }
.hi-card.hc:has(.hc-bar) .hi-t { grid-row: 1; align-self: end; }
.hi-card.hc .hi-t > .audit-badge { margin-bottom: 2px; }
.hc-line { -webkit-line-clamp: 2; }
.hi-card.hc .hi-t > b + .hc-line { -webkit-line-clamp: 1; }
.hi-card.hc[data-section='idea'] .hc-line { color: var(--text); font-size: 14px; }
.hc-branch { font-size: 12px !important; color: var(--faint) !important; -webkit-line-clamp: 1 !important; }
/* an idea's and a check's face: the avatar ringed by the score's line */
.hc-face { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.hc-face > .hc-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc-arc .track { fill: none; stroke: rgb(var(--ink-t) / 0.1); stroke-width: 3; }
.hc-arc .val { stroke-width: 3; }
.hc-av { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgb(var(--yellow-t) / 0.1); color: var(--yellow); }
.hc-av .ico { width: 17px; height: 17px; }
.hc-av img { width: 100%; height: 100%; object-fit: contain; background: var(--ga3); }
.hi-card.hc[data-section='check'] .hc-av { background: rgb(var(--purple-t) / 0.16); color: var(--purple-text); }
.hc-mono { font: 800 11.5px/1 var(--font-display); letter-spacing: 0.02em; }
.hc-score { font: 700 22px/1 var(--font-display); color: var(--yellow); }
.hc-score[data-tone='go'] { color: var(--good); }
.hc-score[data-tone='rethink'] { color: var(--bad); }
.hc-score[data-tone='thin'] { color: var(--muted); }
.hc-st { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.hc-bar { grid-column: 2 / -1; grid-row: 2; align-self: start; display: block; padding-top: 4px; }
.hc-bar .sw-o-bar { padding-top: 0; }
.hc-bar .pp-bar { max-width: none; }
/* a check stays a check: the dashed edge of a report, its kind on its badge (WP-O's one-off look, the own audit too) */
.hi-card.hc[data-section='check'] { border-style: dashed; }
@media (max-width: 900px) { .hs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .hl-title { font-size: 22px; }
  #home-ideas.home-list { gap: 22px; }
  /* a project's level and its step go under its name on a phone — the name keeps the row */
  .hi-card.hc[data-section='project'] .hi-t { grid-row: 1; }
  .hi-card.hc[data-section='project'] .hi-chips { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; padding-top: 4px; }
  .hs-add { min-height: 36px; }
}
.home-wait { display: grid; place-items: center; min-height: 40vh; }

/* The item's own page (the operator 2026-10-17): one head over every item page — back to the list, what the item is. */
.item-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: -14px; font-size: 13px; color: var(--muted); }
.item-crumb[hidden] { display: none; }
.ic-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; border-radius: 8px; padding: 2px 6px 2px 2px; }
.ic-back:hover, .ic-back:focus-visible { color: var(--text); background: rgb(var(--ink-t) / 0.05); }
.ic-back .ico, .ic-kind .ic-ico { width: 16px; height: 16px; }
.ic-sep { color: var(--faint); }
.ic-kind { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text); font-weight: 600; }
.ic-kind[data-level='concept'] .ic-ico { color: var(--purple-text); }
.ic-kind[data-level='project'] .ic-ico, .ic-kind[data-level='idea'] .ic-ico { color: var(--yellow); }
/* MP55: a one-off's section «Разовые проверки» and the checked name after it (cut to one line) */
.ic-kind[data-level='oneoff'] { color: var(--muted); font-weight: 500; flex: none; }
.ic-kind[data-level='oneoff'] .ic-ico { color: var(--purple-text); }
.ic-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }

/* The operator 2026-10-18: the page of an item that is not there (gone-model.js, front.js `goneShow` / `goneIn`) — an old
   link, another account's item, a visitor's read, a read that failed. Calm: no red (red is for danger), the line's «0» on
   its quiet tint, the brand on its ONE primary action (the identity spot `.so-btn`), the rest quiet outlines; it
   dissolves in (opacity only). */
.gone { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; padding: 88px 0 72px; text-align: center; }
.gone-zero { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 30px/1 var(--font-display); color: var(--muted);
  border: 2px solid var(--line); box-shadow: 0 0 0 7px var(--tint); margin-bottom: 6px; }
.gone-title { margin: 0; font: 700 26px/1.25 var(--font-display); color: var(--text); text-wrap: balance; }
.gone-line { margin: 0; max-width: 460px; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.gone-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.gone-btn { min-height: 44px; padding: 11px 20px; }
.gone-btn.line { text-align: center; }
.gone-panel { max-width: none; padding: 40px 8px; gap: 10px; }
.gone-panel .gone-zero { width: 48px; height: 48px; font-size: 22px; box-shadow: 0 0 0 5px var(--tint); margin-bottom: 2px; }
.gone-panel .gone-title { font-size: 19px; }
.gone-panel .gone-line { font-size: 14.5px; }
/* the item's crumb names an item that is not there: it stands down while the page shows */
body:has(#check > .gone) .item-crumb { display: none; }
@media (prefers-reduced-motion: no-preference) { #check > .gone { animation: dissolve-in 0.7s ease both; } }
@media (max-width: 640px) {
  .gone { padding: 56px 0 48px; gap: 12px; }
  .gone-title { font-size: 22px; }
  .gone-acts { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
}

/* MP55: one-off checks — a competitor row's chips (the done kinds' numbers, «идёт», «Проверить: бизнес · сайт и SEO»),
   the one-off card's note and the one-off page's actions row. Neutral chips (the brand stays on its identity spots), running
   in the yellow; a slow dissolve when the chips arrive (none under reduced motion). */
.oo-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; min-height: 0; }
.oo-slot:empty { display: none; }
.oo-slot > * { animation: oo-in 0.6s ease both; }
@keyframes oo-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .oo-slot > * { animation: none; } }
.oo-go { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.oo-go-h { font-size: 12px; color: var(--muted); }
.oo-sep { color: var(--muted); font-size: 12px; }
.oo-chip { display: inline-flex; align-items: center; gap: 4px; background: transparent; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; text-decoration: none; white-space: nowrap; }
.oo-chip:hover, .oo-chip:focus-visible { color: var(--text); border-color: var(--muted); }
.oo-chip.oo-done { color: var(--text); background: var(--raise); }
.oo-chip.oo-run { color: var(--yellow-t); border-color: var(--yellow); background: var(--yellow-tint); }
.oo-chip.oo-run i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--yellow); border-right-color: transparent; }
.lb > .oo-under { padding: 0 12px 6px 46px; }
.lb-row > summary > .oo-under { grid-column: 1 / -1; padding-left: 34px; }
.audit-rn .oo-slot { margin-top: 2px; }
.so-tbl .oo-slot { display: flex; margin-top: 4px; }
.so-tbl .oo-slot:empty { display: none; }
.biz-oneoff { margin: -4px 0 8px; font-size: 13px; }
/* The one-off's end (the operator 2026-10-22): ONE calm card after the line — never inside the journey, so the spine ends at
   the last step and never crosses it; its own opaque ground (the words never on the backdrop picture, AA in both bases);
   one row of three equal buttons (stacked full width on a phone); the share's line under the row */
.oo-end { display: grid; gap: 12px; margin: 10px 0 0; padding: 20px 22px 18px; border: 1px solid var(--hair); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 36px rgb(var(--shade-t) / 0.18); }
.oo-end-h { font-size: 18px; line-height: 1.3; color: var(--text); }
.oo-end-sub { margin-top: -6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.oo-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 680px; margin-top: 4px; }
.oo-acts > .btn.line { width: 100%; min-height: 46px; padding: 10px 16px; justify-content: center; text-align: center; color: var(--text); }
.oo-end-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.oo-end-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 680px; }
.oo-end-link input { flex: 1 1 260px; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; color: var(--text); background: var(--raise); font: inherit; font-size: 14px; }
.oo-end-off { padding: 6px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.oo-end-off:hover { color: var(--text); }
@media (max-width: 560px) {
  .oo-end { padding: 16px 16px 14px; border-radius: 16px; }
  .oo-acts { grid-template-columns: minmax(0, 1fr); }
}

/* MP57 (the direct entry): the direct pay window over the check's page (front.js block «MP57») — a slow dissolve (opacity
   and 8 px up, 0.45 s), a bottom sheet on a phone, none under reduced motion; the chain's rows with their status's static
   marks; the check page's one calm band instead of the fork. Every class `dx-`. */
.dx-sheet { position: fixed; inset: 0; z-index: 165; display: grid; place-items: start center; padding: min(14vh, 120px) 16px 16px; opacity: 0; transition: opacity 0.45s ease; }
.dx-sheet[hidden] { display: none; }
.dx-sheet.in { opacity: 1; }
.dx-back { position: absolute; inset: 0; background: rgb(var(--ground-t) / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dx-panel { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 24px 24px 20px; background: radial-gradient(120% 70% at 50% 0%, rgb(var(--purple-t) / 0.14), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgb(var(--shade-t) / 0.7); outline: none; transform: translateY(8px); transition: transform 0.45s ease; }
.dx-sheet.in .dx-panel { transform: none; }
.dx-x { position: absolute; top: 12px; right: 12px; }
.dx-panel h2 { margin: 2px 0 0; padding-right: 32px; font: 700 22px/1.25 var(--font-display); color: var(--text); }
.dx-next { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.dx-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dx-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.dx-row .dx-mk { width: 22px; height: 22px; margin-top: 1px; }
.dx-row .dx-mk .ico { width: 18px; height: 18px; }
.dx-row-t { display: grid; gap: 1px; min-width: 0; }
.dx-row-t b { font-size: 15px; color: var(--text); }
.dx-row-t small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.dx-price { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.dx-price.dx-held { color: var(--good); }
.dx-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dx-acts .btn.ghost { padding: 11px 18px; font-size: 15px; }
.dx-panel .cta-hint { margin: 0; text-align: right; }
@media (max-width: 640px) {
  .dx-sheet { place-items: end stretch; padding: 0; }
  .dx-panel { width: 100%; max-height: calc(100dvh - 24px); border-radius: 22px 22px 0 0; border-bottom: 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); }
  .dx-acts { justify-content: stretch; flex-wrap: nowrap; }
  .dx-acts .btn { flex: 1 1 auto; white-space: nowrap; }
  .dx-acts .btn.ghost { flex: 0 0 auto; }
  .dx-panel .cta-hint { text-align: left; }
}
.dx-band .quiet-row { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); gap: 0 var(--mk-gap); align-items: start; padding: 2px 0 22px; }
.dx-band-mk { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--purple-text); color: var(--purple-text); position: relative; z-index: 1; }
.dx-band-mk .art-ico { width: 19px; height: 19px; }
.dx-band-main { display: grid; gap: 8px; justify-items: start; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: var(--tint); min-width: 0; }
.dx-band-line { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.dx-band-hint { margin: 0; font-size: 13.5px; }
.dx-band-go { margin-top: 2px; }
.dx-band .cta-error:empty { display: none; }
/* 2026-10-22: a direct check refused or failed — «Оплата сохранена», the shield instead of the research mark */
.dx-saved .dx-band-mk { border-color: var(--good, var(--purple-text)); color: var(--good, var(--purple-text)); }
.dx-band-mk .ico { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) { .dx-sheet, .dx-panel { transition: none !important; } }

/* ---------- The create sheet «Что делаем?» (2026-10-22, the operator) ----------
   ONE sheet for every start — the header's «+ Новое», the switcher's first row, a section's «+» (preselected). The free
   choices, then the paid ones (their price or 🎁), «скоро» for the slot not built; the footer says what happens and leads
   into the existing entry. It dissolves (opacity only — the operator's motion), never slides. */
.cs-modal .stg-panel { transform: none; transition: none; }
.cs-panel { width: min(760px, 100%); height: auto; max-height: min(820px, calc(100vh - min(8vh, 72px) - 16px)); max-height: min(820px, calc(100dvh - min(8vh, 72px) - 16px)); grid-template-rows: auto minmax(0, 1fr) auto; }
.cs-head { display: grid; gap: 2px; min-width: 0; }
.cs-lead { margin: 0; font-size: 13.5px; }
.cs-body { display: grid; gap: 16px; padding: 16px 22px 6px; overflow-y: auto; overscroll-behavior: contain; }
.cs-g { display: grid; gap: 8px; }
.cs-g-h { margin: 0; font: 600 11.5px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cs-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 108px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 16px; background: rgb(var(--ink-t) / 0.025); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease; }
.cs-opt:hover { border-color: var(--line); }
.cs-opt[aria-pressed='true'] { border-color: var(--purple-text); background: rgb(var(--purple-t) / 0.1); }
.cs-opt:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.cs-opt[disabled] { cursor: default; opacity: 0.55; }
.cs-o-h { display: flex; align-items: center; gap: 8px; }
.cs-o-h b { font: 700 15px/1.3 var(--font-display); }
.cs-ico { width: 18px; height: 18px; flex: none; color: var(--yellow); }
.cs-opt[data-cs='deep'] .cs-ico, .cs-opt[data-cs='site'] .cs-ico, .cs-opt[data-cs='business'] .cs-ico { color: var(--purple-text); }
.cs-o-s { font-size: 13px; line-height: 1.45; color: var(--muted); }
.cs-price { margin-top: auto; padding-top: 4px; font: 600 13.5px var(--font-display); color: var(--text); }
.cs-price .gift-tag { color: var(--gift-ink); }
.cs-soon { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--faint); }
.cs-foot { display: grid; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--hair); background: var(--surface); }
.cs-foot.in { animation: dissolve-in 0.5s ease both; }
.cs-how { margin: 0; font-size: 14px; line-height: 1.5; }
.cs-go { justify-self: start; background: var(--yellow); color: var(--on-yellow); }
.cs-go:hover { background: rgb(var(--yellow-t) / 0.88); }
.cs-from { display: grid; gap: 6px; font-size: 13px; }
.cs-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-pick { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 12px; border: 1px solid var(--hair); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.cs-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pick b { color: var(--yellow); }
.cs-pick:hover, .cs-pick:focus-visible { border-color: var(--purple-text); }
@media (max-width: 760px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cs-panel { max-height: none; }
  .cs-body { padding: 14px 16px 6px; }
  .cs-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cs-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cs-opt { min-height: 0; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) { .cs-foot.in { animation: none; } }

/* The composer's mode (2026-10-22): the create sheet's choice above the field — «Аудит сайта ✕», «Глубокий анализ ✕» */
.im-mode { display: flex; margin: 0 0 8px; }
.im-mode[hidden] { display: none; }
.im-mode-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--purple-t) / 0.12); color: var(--text); font: 600 13px var(--font-display); animation: dissolve-in 0.5s ease both; }
.im-mode-ico { width: 15px; height: 15px; color: var(--purple-text); }
.im-mode-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.im-mode-x:hover, .im-mode-x:focus-visible { color: var(--text); background: rgb(var(--ink-t) / 0.08); }
@media (prefers-reduced-motion: reduce) { .im-mode-chip { animation: none; } }
.sw-face.sw-grid { border-radius: 9px; background: rgb(var(--purple-t) / 0.16); color: var(--purple-text); }
.sw-group[data-level='check'] .sw-g-ico, .ic-kind[data-level='check'] .ic-ico { color: var(--muted); }

/* 2026-10-22: a site's or a business's audit in the composer — the idea cloud's pills fade out slowly (no idea to pick),
   and back as slowly when the mode is cleared */
.idea-modal.nim-lens .nim-cloud, .idea-modal.nim-lens .nim-cloud.ready, .idea-modal.nim-lens.nim-typing .nim-cloud.tails.ready, .idea-modal.nim-lens .nim-tails { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.idea-modal.nim-lens-back .nim-cloud, .idea-modal.nim-lens-back .nim-tails { transition: opacity 0.9s ease, visibility 0s; }
.cs-pick.ahead { flex-wrap: wrap; border-radius: 14px; text-align: left; }
.cs-pick-ahead { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .idea-modal.nim-lens .nim-cloud, .idea-modal.nim-lens .nim-tails, .idea-modal.nim-lens-back .nim-cloud, .idea-modal.nim-lens-back .nim-tails { transition: none; } }

/* ---------- the opened step (the operator 2026-10-22: «for every step on every timeline … the frame on the left extends
   past the timeline, the background darkens … one unified UI everywhere») — ONE look for every step and sub-step that
   opens on a timeline: a native `<details class="tl-step">` (a sub-step `tl-step tl-sub`), wired by step-frame.js. Closed,
   its frame is there but unseen (a transparent border, the same reach), so opening moves nothing sideways; opened, the
   frame reaches past the line on the left (`--tl-reach`: the mark sits inside it), the ground darkens and blurs (its
   words read over the page's picture, AA in both bases), the line is drawn through it above the ground and under the
   words (`--zs-x` / `--zs-done`, front.js paintSpine for the check's journey, step-frame.js for the other lines; not on a
   phone, where the body runs under the mark's column — the line enters the frame and leaves it), the head's title grows.
   Motion: the frame's border and ground dissolve (0.45 s), the body dissolves in on the person's open (opacity and a few
   pixels of rise, `tl-in`) and out before it closes (`tl-out`) — never a size morph; none under reduced motion. */
.tl-step { --tl-reach: 14px; --tl-reach-r: 16px; --tl-ground: rgb(var(--veil-t) / 0.88); position: relative;
  margin-left: calc(-1 * var(--tl-reach)); margin-right: calc(-1 * var(--tl-reach-r)); padding-left: calc(var(--tl-reach) - 1px); padding-right: calc(var(--tl-reach-r) - 1px);
  border: 1px solid transparent; border-radius: 22px; transition: border-color 0.45s ease, background-color 0.45s ease; }
.tl-step[open] { z-index: 1; margin-top: 8px; margin-bottom: 14px; padding-top: 4px; padding-bottom: 6px; border-color: var(--line);
  background: linear-gradient(180deg, rgb(var(--purple-t) / 0.08), transparent 160px), var(--tl-ground);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tl-step[open]:hover, .tl-step[open]:focus-within { z-index: 5; }
/* the quiet words keep AA on the darker ground (the dark base's faint grey is for the page's own ground) */
html:not([data-base='light']) .tl-step[open] { --faint: #958eab; }
/* the light base's ground a shade denser: its semantic inks (the good green, the links) stay AA over a mid-tone picture */
html[data-base='light'] .tl-step:not(.tl-sub) { --tl-ground: rgb(var(--veil-t) / 0.95); }
.tl-step > summary:focus-visible { outline: 2px solid var(--purple-text); outline-offset: 2px; border-radius: 14px; }
/* the head: more room, a bigger title and ring — the same in every timeline */
.tl-step:not(.tl-sub)[open] > summary { padding-top: 14px; padding-bottom: 10px; }
.tl-step:not(.tl-sub)[open] > summary .sum .t, .tl-step:not(.tl-sub)[open] > summary .cf-title, .tl-step:not(.tl-sub)[open] > summary .pm-rmain > b { font-size: 22px; line-height: 1.25; }
.tl-step:not(.tl-sub)[open] > summary .t-ico { width: 20px; height: 20px; }
.tl-step[open] > summary .mini { width: 62px; height: 62px; }
.tl-step[open] > summary .sec-info { right: calc(50% - 40px); top: -4px; }
/* a sub-step (a stage's file, an audit's error or recommendation): a smaller frame round its own mark, a lighter shade */
.tl-step.tl-sub { --tl-reach: 10px; --tl-reach-r: 10px; --tl-ground: rgb(var(--veil-t) / 0.6); border-radius: 16px; }
.tl-step.tl-sub[open] { margin-top: 4px; margin-bottom: 8px; padding-top: 0; padding-bottom: 4px; background: var(--tl-ground); }
.tl-sub[open] > summary .sum .t, .tl-sub[open] > summary .ai-head > b { font-size: 16.5px; }
/* the line through it: the host's own line continued — filled as far as the host's fill reaches into it, dashed after
   (the check's journey), the map's thin line (its done rows in their accent) */
.tl-step[open][data-zs]::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--zs-x, 0px); width: 3px; margin-left: -1.5px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(var(--purple-text), var(--purple)) top center / 3px var(--zs-done, 0px) no-repeat,
  repeating-linear-gradient(to bottom, rgb(var(--lilac-t) / 0.45) 0 5px, transparent 5px 10px) center / 1.5px 100% no-repeat; }
.pm-rows .tl-step[open][data-zs]::before { width: 1px; margin-left: -0.5px; background: rgb(var(--ink-t) / 0.14); }
.pm-row.st-done > .tl-step[open][data-zs]::before { background: rgb(var(--pm-ac) / 0.55); }
/* the body: it dissolves in when the person opens the step, out before it closes */
.tl-step.tl-in > :not(summary) { animation: tl-body-in 0.56s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes tl-body-in { from { opacity: 0; transform: translateY(6px); } }
.tl-step.tl-out { border-color: transparent; --tl-ground: transparent; }
.tl-step.tl-out > :not(summary) { opacity: 0; transform: translateY(4px); transition: opacity 0.34s ease, transform 0.34s ease; }
/* the timelines' own hosts: a stage's steps in the concept's zone reach less (the zone's own frame is close), the map's
   rows as its spine lies */
.concept-zone .tl-step:not(.tl-sub) { --tl-reach: 8px; --tl-reach-r: 8px; }
/* «Что улучшить»'s spheres keep their hairline between them while folded */
.tier-sphere.tl-step:not([open]) { border-top-color: var(--hair); border-radius: 0; }
.tier-sphere.tl-step[open] + .tier-sphere.tl-step:not([open]) { border-top-color: transparent; }
/* a sub-step on the line inside an opened stage stays inside the stage's frame */
.cf-body .tl-sub { --tl-reach: 5px; --tl-reach-r: 5px; }
.pm-rows .tl-step:not(.tl-sub) { --tl-reach: 12px; --tl-reach-r: 12px; border-radius: 18px; }
@media (max-width: 640px) {
  .tl-step { --tl-reach: 8px; --tl-reach-r: 8px; }
  .tl-step[open] { --tl-ground: rgb(var(--veil-t) / 0.95); }
  .tl-step.tl-sub { --tl-reach: 6px; --tl-reach-r: 6px; }
  .tl-step.tl-sub[open] { --tl-ground: rgb(var(--veil-t) / 0.6); }
  .concept-zone .tl-step:not(.tl-sub) { --tl-reach: 6px; --tl-reach-r: 6px; }
  /* the map's stage is the phone's full width: its rows' frames keep to it on the right */
  .pm-rows .tl-step:not(.tl-sub) { --tl-reach: 6px; --tl-reach-r: 1px; }
  .cf-body .tl-sub { --tl-reach: 4px; --tl-reach-r: 4px; }
  .tl-step[open][data-zs]::before { content: none; }
  .tl-step > .sec-body { background: none; }
  .tl-step:not(.tl-sub)[open] > summary .sum .t, .tl-step:not(.tl-sub)[open] > summary .cf-title, .tl-step:not(.tl-sub)[open] > summary .pm-rmain > b { font-size: 19px; }
  .tl-step[open] > summary .mini { width: 46px; height: 46px; }
  .tl-step[open] > summary .sec-info { right: calc(50% - 33px); top: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-step, .tl-step > :not(summary) { transition: none; animation: none; }
  .tl-step.tl-in > :not(summary) { animation: none; }
}

/* ── MP64 SUB-7: the admins' «API-ключи» page — the promo page's frame (`.pa-page`, `table.wide` in `.tw`: on a phone the
   table scrolls sideways inside its frame, never the page); a cell's second line is small and faint. */
.ka-table th[scope="row"], .ka-table td { white-space: nowrap; }
.ka-sub { display: block; margin-top: 2px; font-size: 12px; }
.ka-serving, .ka-updated { margin: 0; }