/* Кабинет ресторана «Как вас видят ИИ».
   Палитра и шрифты — как в демо-кабинете 04-demo-13 (Cormorant Garamond и Rubik,
   если они есть в системе; иначе системные). Шрифты не грузим из сети.
   Без инлайновых стилей: страницы отдаются с Content-Security-Policy style-src 'self'. */
:root {
  --bg: #F5F1E8;
  --surface: #FBF9F4;
  --surface-2: #EFE8DA;
  --surface-3: #E6DDCB;
  --ink: #17221C;
  --ink-2: #4F5D54;
  --ink-3: #667069;
  --line: #E2D9C6;
  --accent: #A84320;
  --accent-soft: rgba(168, 67, 32, 0.10);
  --good: #2F5D46;
  --good-soft: rgba(47, 93, 70, 0.11);
  --warn: #946312;
  --warn-soft: rgba(148, 99, 18, 0.12);
  --info: #245A86;
  --info-soft: rgba(36, 90, 134, 0.10);
  --header: #17221C;
  --on-header: #F5F1E8;
  --on-accent: #FBF9F4;
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-text: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serp-bg: #FFFFFF;
  --serp-title: #1A0DAB;
  --serp-url: #006621;
  --serp-text: #4D5156;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --side-w: 220px;
  --pad: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111814; --surface: #18221C; --surface-2: #202C25; --surface-3: #2A382F;
    --ink: #ECE7DB; --ink-2: #AEB8B1; --ink-3: #94A099; --line: #2D3A32;
    --accent: #E0805A; --accent-soft: rgba(224, 128, 90, 0.16);
    --good: #74B592; --good-soft: rgba(116, 181, 146, 0.15);
    --warn: #DDB05A; --warn-soft: rgba(221, 176, 90, 0.15);
    --info: #86B4E0; --info-soft: rgba(134, 180, 224, 0.15);
    --header: #0B100D; --on-header: #ECE7DB; --on-accent: #111814;
    --serp-bg: #202124; --serp-title: #8AB4F8; --serp-url: #81C995; --serp-text: #BDC1C6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.5 var(--f-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
[lang="zh"] { font-family: var(--f-text), var(--f-cjk); }
[lang="ar"] { direction: rtl; text-align: right; unicode-bidi: plaintext; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.005em; }
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 24px; line-height: 1.15; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--info); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); font-size: 13px; }
.small { font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── шапка ───────── */
.bar {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding: 10px var(--pad); background: var(--header); color: var(--on-header);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.logo__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; flex: none; }
.logo__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bar__client { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.bar__sp { flex: 1; }
.bar__user { font-size: 14px; opacity: 0.85; }
.bar form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.bar select { background: transparent; color: var(--on-header); border: 1px solid color-mix(in srgb, var(--on-header) 40%, transparent); border-radius: var(--r-sm); padding: 4px 6px; max-width: 180px; }
.bar select option { color: #17221C; }
.bar__ghost {
  font-size: 14px; padding: 5px 12px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--on-header) 40%, transparent); background: transparent; color: var(--on-header);
}
.bar__ghost:hover { background: color-mix(in srgb, var(--on-header) 12%, transparent); }
.bar__help { display: inline-flex; align-items: center; gap: 7px; }
.bar__help[hidden] { display: none; }
.bar__help-mark {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 12px; font-weight: 700; line-height: 1; background: var(--accent); color: var(--on-accent);
}
.preview { background: var(--warn-soft); color: var(--warn); padding: 8px var(--pad); font-size: 14px; }
/* the dev stand (R13_ENV=dev): never shown on prod */
.stand {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-sm); background: var(--warn); color: #fff; white-space: nowrap;
}

/* ───────── каркас ───────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - 52px); }
.side {
  background: var(--surface-2); border-right: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}
.side__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 20px; color: var(--ink); text-decoration: none; font-size: 15px;
  border-left: 3px solid transparent;
}
.side__item:hover { background: var(--surface-3); }
.side__item[aria-current="page"] { background: var(--surface); border-left-color: var(--accent); font-weight: 600; }
.side__badge { font-size: 12px; font-weight: 600; min-width: 22px; text-align: center; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 7px; }
.page { padding: 24px var(--pad) 80px; display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 980px; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.lead { color: var(--ink-2); max-width: 70ch; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section > h2 { margin-top: 8px; }

/* ───────── карточки ───────── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.card--accent { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.card--tint { background: var(--surface-2); border-color: transparent; }
.card--off { opacity: 0.75; }
.card__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.card__title { font-size: 16px; font-weight: 600; }
.card__meta { font-size: 13px; color: var(--ink-2); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { text-decoration: none; color: inherit; gap: 4px; }
a.kpi:hover { border-color: var(--ink-3); }
.kpi__label { font-size: 13.5px; color: var(--ink-2); }
.kpi__value { font-size: 34px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 13px; color: var(--ink-2); }
.kpi--accent .kpi__value { color: var(--accent); }

/* ───────── строки «что не так / как надо» ───────── */
.rows { display: flex; flex-direction: column; }
.rows__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--line); }
.rows__row:first-child { border-top: 0; }
.rows__lbl { font-size: 13.5px; color: var(--ink-2); }
.rows__row > span:last-child, .quote__text, .choice span { overflow-wrap: anywhere; }
.now { color: var(--accent); }
.now a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rows__why { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

/* ───────── как сайт выглядит в поиске: два маленьких результата поиска ───────── */
.serp__caption { font-size: 14px; color: var(--ink-2); }
.serps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.serp { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.serp__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.serp--now .serp__label { color: var(--accent); }
.serp--ok .serp__label { color: var(--good); }
.serp__item {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--serp-bg); border: 1px solid var(--line); font-family: Arial, "Helvetica Neue", sans-serif;
}
.serp--now .serp__item { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.serp--ok .serp__item { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.serp__title { color: var(--serp-title); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.serp__url { color: var(--serp-url); font-size: 13.5px; overflow-wrap: anywhere; }
.serp__desc { color: var(--serp-text); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.serp__none { color: var(--ink-3); font-style: italic; }
.filter--empty { border-style: dashed; color: var(--ink-2); }
.empty--sm { padding: 12px; }
.empty--sm .empty__title { font-size: 18px; }
.oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok { color: var(--good); font-weight: 500; }

/* ───────── чипы, метки ───────── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.3; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
/* long platform names (e.g. several Chinese services in one option) wrap on a phone */
.chips > .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.chip--ok { background: var(--good-soft); color: var(--good); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--info { background: var(--info-soft); color: var(--info); }
.chip--accent, .chip--high { background: var(--accent); color: var(--on-accent); }
.chip--mid { background: var(--accent-soft); color: var(--accent); }
.chip--low, .chip--muted { background: var(--surface-2); color: var(--ink-3); }
.chip--est { background: transparent; border: 1px dashed var(--warn); color: var(--warn); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.filter[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.filter__n { color: var(--ink-3); margin-left: 4px; font-size: 12.5px; }
.filter[aria-current="true"] .filter__n { color: inherit; opacity: 0.8; }

/* ───────── кнопки и формы ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; min-height: 36px;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn--link { background: var(--info); border-color: var(--info); color: #fff; }
.btn--link:hover { background: color-mix(in srgb, var(--info) 85%, var(--ink)); }
.btn--sm { padding: 5px 10px; font-size: 13.5px; min-height: 32px; }
.btn--ghost { background: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label, .field > .field__label { font-size: 13.5px; color: var(--ink-2); }
.input, textarea.input, select.input {
  font-size: 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; width: 100%; max-width: 100%;
}
textarea.input { min-height: 70px; resize: vertical; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.input--budget { max-width: 200px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.check small { display: block; color: var(--ink-3); font-size: 13px; }
.choices { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.choices legend { font-size: 13.5px; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); cursor: pointer; }
.choice input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.choice__where { display: block; font-size: 13px; color: var(--ink-3); }
.inline-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ───────── раскрывающиеся блоки ───────── */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--ink-3); transition: transform 0.15s; }
details[open] > summary::before { transform: rotate(90deg); }
.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 18px; }
.fold > summary { font-weight: 600; font-size: 16px; }
.fold[open] > summary { margin-bottom: 10px; }
.fold__body { display: flex; flex-direction: column; gap: 10px; }
.mini > summary { font-size: 14px; color: var(--info); }
.mini[open] > summary { margin-bottom: 8px; }
.mini__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-md); }

/* ───────── группы площадок ───────── */
.group { display: flex; flex-direction: column; gap: 10px; }
.group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.group__head h3 { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.group__who { font-size: 13.5px; color: var(--ink-2); }
.list-plain > li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.list-plain > li:first-child { border-top: 0; }
.list-plain__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.history { font-size: 13px; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; }

/* ───────── выноски ───────── */
.callout { display: block; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14.5px; }
.callout--ok { background: var(--good-soft); color: var(--good); }
.callout--error { background: var(--accent-soft); color: var(--accent); }
.callout--accent { background: var(--accent-soft); }
.callout--info { background: var(--info-soft); }
.empty { padding: 18px; text-align: center; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 6px; }
.empty__title { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--ink); }

/* ───────── последние изменения: дата · что изменилось · где ───────── */
.changes > li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 200px); gap: 4px 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px;
}
.changes > li:first-child { border-top: 0; }
.changes__date { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.changes__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.changes__where { color: var(--ink-2); font-size: 13.5px; text-align: right; }

/* ───────── ответы ИИ ───────── */
.vis > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.vis > li:first-child { border-top: 0; }
.vis__value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.vis__sub { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.quote { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.quote__q { font-weight: 500; }
.quote__meta { font-size: 13px; color: var(--ink-3); }
.quote__text { white-space: normal; }
.quote__open { white-space: nowrap; }
.quote__more > summary { color: var(--ink); }
.quote__more > summary::before { content: none; }
.quote__toggle { color: var(--info); font-size: 13.5px; white-space: nowrap; }
.quote__toggle--close, .quote__more[open] .quote__toggle--open, .quote__more[open] .quote__excerpt { display: none; }
.quote__more[open] .quote__toggle--close { display: inline; }
.quote__more[open] > summary { margin-bottom: 6px; }
.vis__state { display: flex; justify-content: flex-end; align-items: center; }
.chip--api { background: transparent; border: 1px dashed var(--info); color: var(--info); }
.asked { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.asked:first-of-type { border-top: 0; padding-top: 0; }
.asked > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.asked > summary::before { align-self: center; }
/* a long theme chip wraps next to the marker instead of widening the page (360 px) */
.asked > summary .chip { max-width: calc(100% - 24px); white-space: normal; overflow-wrap: anywhere; }
.asked__q { font-weight: 500; flex: 1 1 260px; min-width: 0; }
.asked__n { font-size: 13px; color: var(--ink-3); white-space: nowrap; margin-left: auto; }
.asked__body { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0 1em; }
.more { font-size: 14px; }
#ans-topics .filter { white-space: normal; }

/* «Советуют ли вас» opened: the line itself is the summary of its answers */
.vis > li.vis__item--runs { display: block; }
.runs > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.runs > summary::before { content: none; }
.runs > summary .vis__value { color: var(--info); text-decoration: underline dotted; text-underline-offset: 3px; }
.runs__hint { color: var(--info); white-space: nowrap; }
.runs__hint::after { content: " ▸"; }
.runs[open] .runs__hint::after { content: " ▾"; }
.runs[open] > summary { margin-bottom: 6px; }
.runs__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px 12px; border-left: 2px solid var(--line); }
.runs__list { display: flex; flex-direction: column; }
.run { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.run:first-child { border-top: 0; padding-top: 2px; }
.run__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.run__q .chip, #answer-question .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.run__text { font-weight: 500; flex: 1 1 240px; min-width: 0; }
.run__ru { flex-basis: 100%; font-size: 13.5px; color: var(--ink-2); }
.run__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; color: var(--ink-2); }
.run__date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.run__place { color: var(--good); }
.run__names { min-width: 0; }
.run__open { margin-left: auto; white-space: nowrap; }

/* the answer page */
.crumbs { font-size: 14px; color: var(--ink-3); }
.answer__q { font-size: 17px; font-weight: 500; }
.answer__orig { border-top: 1px solid var(--line); padding-top: 10px; }
.answer__orig > summary { font-size: 14px; color: var(--info); }
.answer__orig[open] > summary { margin-bottom: 8px; }
.named > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.named > li:first-child { border-top: 0; }
.named__pos { min-width: 1.6em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* a long name wraps in its own column, next to its number */
.named > li > span:not(.named__pos):not(.chip) { flex: 1 1 0; min-width: 0; }
.named--you { font-weight: 600; }
.sources > li { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14.5px; scroll-margin-top: 12px; }
.sources > li:first-child { border-top: 0; }
.sources > li:target { background: var(--info-soft); border-radius: var(--r-sm); }
.sources__n { min-width: 1.6em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sources__body { min-width: 0; overflow-wrap: anywhere; }

/* text of an AI answer (r13web/markdown.py) */
.md { display: flex; flex-direction: column; gap: 8px; white-space: normal; overflow-wrap: anywhere; }
.md p, .md h4, .md h5 { margin: 0; }
.md ul, .md ol { margin: 0; padding-inline-start: 1.5em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li + li, .md li > ul, .md li > ol { margin-top: 3px; }
.md__h { font-family: var(--f-text); font-size: 15.5px; font-weight: 600; line-height: 1.35; }
h5.md__h { font-size: 15px; }
.md hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.md blockquote { margin: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); color: var(--ink-2); }
.md code, .md__pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--surface-2); border-radius: 4px; }
.md code { padding: 1px 4px; }
.md__pre { margin: 0; padding: 8px 10px; white-space: pre-wrap; }
.md__table { max-width: 100%; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 14px; }
.md th, .md td { border: 1px solid var(--line); padding: 5px 8px; text-align: start; vertical-align: top; overflow-wrap: normal; }
.md th { background: var(--surface-2); font-weight: 600; }
.md__ref { font-size: 11px; line-height: 0; color: var(--ink-3); }
.md__ref a { text-decoration: none; }
.md mark, .named mark { background: color-mix(in srgb, var(--accent) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ───────── реклама ───────── */
.calc { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.calc__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.calc__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calc__cell { background: var(--surface); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.calc__cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
.calc__cell span { font-size: 13px; color: var(--ink-2); }

/* ───────── аналитика (r13web/analytics.py, templates/analytics.html) ─────────
   Lines of the assistants: 7 categorical colours in a fixed order, then 3
   muted shades (8–10) for a market with more lines; validated for colour-blind
   readers (adjacent pairs, light on --surface, dark on the dark --surface).
   Every chart is SVG with classes only: no inline styles under the CSP. */
:root {
  --series-0: #8A928C;
  --series-1: #1F5FA0; --series-2: #A84320; --series-3: #0F94B0; --series-4: #A88300;
  --series-5: #9C4F8F; --series-6: #6E8B1E; --series-7: #6A5ACD;
  --series-8: #924761; --series-9: #349470; --series-10: #9A6327;
}
@media (prefers-color-scheme: dark) {
  :root {
    --series-0: #7D877F;
    --series-1: #4F8FD6; --series-2: #D9734B; --series-3: #1FA5BE; --series-4: #AD8A0C;
    --series-5: #C070B2; --series-6: #7E9E2C; --series-7: #8C80E6;
    --series-8: #A65872; --series-9: #46A37F; --series-10: #A1642D;
  }
}
.ser-0 { color: var(--series-0); }
.ser-1 { color: var(--series-1); }
.ser-2 { color: var(--series-2); }
.ser-3 { color: var(--series-3); }
.ser-4 { color: var(--series-4); }
.ser-5 { color: var(--series-5); }
.ser-6 { color: var(--series-6); }
.ser-7 { color: var(--series-7); }
.ser-8 { color: var(--series-8); }
.ser-9 { color: var(--series-9); }
.ser-10 { color: var(--series-10); }

.an-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.filter--api { border-style: dashed; border-color: var(--info); }
.an-kpis .kpi__value { font-variant-numeric: normal; }
.an-kpis .kpi__label { min-height: 2.6em; }

/* line chart: the plot stretches (preserveAspectRatio="none"), the strokes and
   the dots keep their size (vector-effect: non-scaling-stroke) */
.lc {
  margin: 4px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: ". ev" "y plot" ". x"; column-gap: 8px;
}
.lc__ev { grid-area: ev; display: flex; margin-bottom: 6px; }
.lc__x { grid-area: x; display: flex; margin-top: 8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lc__ev > span, .lc__x > span { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; white-space: nowrap; }
.lc__y { grid-area: y; position: relative; width: 3.4em; }
.lc__yt { position: absolute; right: 0; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc__yt--100 { top: 0; }
.lc__yt--50 { top: 50%; }
.lc__yt--0 { top: 100%; }
.lc__svg { grid-area: plot; display: block; width: 100%; height: 190px; overflow: visible; }
.lc__grid { stroke: var(--line); stroke-width: 1px; }
.lc__event { stroke: var(--accent); stroke-width: 1px; stroke-dasharray: 3 3; }
.lc__line { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.lc__ring { fill: none; stroke: var(--surface); stroke-width: 12px; stroke-linecap: round; }
.lc__dot { fill: none; stroke: currentColor; stroke-width: 8px; stroke-linecap: round; }
/* a line over an earlier one with the same values: dashed, its dots smaller,
   so the line underneath shows in the gaps and as a ring round the dot */
.lc__series--over .lc__line { stroke-dasharray: 10 8; }
.lc__dot--dup, .lc__series--over .lc__dot { stroke-width: 4px; }
/* an API line («по API, оценка»): dashed, open dots; over another line — dotted */
.lc__series--api .lc__line { stroke-dasharray: 7 5; }
.lc__series--api.lc__series--over .lc__line { stroke-dasharray: 2 6; }
.lc__hole { fill: none; stroke: var(--surface); stroke-width: 3.5px; stroke-linecap: round; }
.lc__hit { fill: none; stroke: transparent; stroke-width: 24px; stroke-linecap: round; pointer-events: stroke; cursor: default; }
.lc__mark {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.legend > li { display: inline-flex; align-items: center; gap: 7px; }
.legend__key { width: 18px; height: 0; border-top: 3px solid currentColor; border-radius: 2px; flex: none; }
.legend__v { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend__sq { width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* the legend of the trend: a list under the chart, one assistant a line
   (two columns on a wide screen); a long name wraps, the numbers stay */
.lc-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 24px; font-size: 13.5px; }
.lc-legend__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; }
.lc-legend__name { min-width: 0; overflow-wrap: anywhere; }
.lc-legend__name .chip { font-size: 11.5px; padding: 1px 7px; margin-left: 2px; }
.lc-legend__key { display: block; width: 28px; height: 12px; overflow: visible; }
.lc-legend__line { stroke: currentColor; stroke-width: 2.5px; stroke-linecap: round; }
.lc-legend__dot { fill: currentColor; stroke: var(--surface); stroke-width: 1.5px; }
.lc-legend__key--api .lc-legend__line { stroke-dasharray: 5 3; stroke-linecap: butt; }
.lc-legend__key--api .lc-legend__dot { fill: var(--surface); stroke: currentColor; stroke-width: 2px; }
.mx__api { display: block; font-size: 11px; color: var(--info); white-space: nowrap; }
.legend--facts { font-size: 13px; color: var(--ink-2); }
.events { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.events > li { display: flex; align-items: baseline; gap: 8px; }
.events__date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.events__what { min-width: 0; }

/* horizontal bars: who is named, which sites */
.bars { display: flex; flex-direction: column; }
.bars__row {
  display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.bars__row:first-child { border-top: 0; }
.bars__row--you { font-weight: 600; }
.bars__place { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.bars__name { min-width: 0; overflow-wrap: anywhere; }
.bars__val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__val .subtle { font-weight: 400; }
.bars__bar { grid-column: 2 / -1; display: block; width: 100%; height: 8px; }
.bars__sub { grid-column: 2 / -1; font-size: 13px; color: var(--ink-3); font-weight: 400; }
.bars__gap { color: var(--ink-3); padding: 2px 0 2px 0.6em; }
.bars__fill--other { fill: color-mix(in srgb, var(--ink-3) 65%, var(--surface)); }
.bars__fill--you { fill: var(--accent); }
.bars__fill--sister { fill: color-mix(in srgb, var(--info) 50%, var(--surface)); }
.bars__fill--site { fill: color-mix(in srgb, var(--info) 80%, var(--surface)); }

/* tables: themes x assistants, numbers per day; a phone shows each row as a block */
.mx-wrap { max-width: 100%; overflow-x: auto; }   /* a guard: the page itself never scrolls sideways */
.mx { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 14px; }
.mx th, .mx td { text-align: center; vertical-align: middle; padding: 0; }
.mx thead th { font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 0 2px 4px; }
.mx thead th:first-child { text-align: left; }
.mx tbody th { text-align: left; font-weight: 500; padding-right: 8px; min-width: 8em; }
.mx--nums td > span { display: block; padding: 4px 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx--nums tbody tr:nth-child(odd) td, .mx--nums tbody tr:nth-child(odd) th { background: var(--surface-2); }
.heat { display: block; padding: 6px 8px; border-radius: var(--r-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.heat--none { color: var(--ink-3); border: 1px dashed var(--line); font-size: 12.5px; white-space: normal; }
.heat--0 { background: var(--surface-2); color: var(--ink-2); }
.heat--1 { background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.heat--2 { background: color-mix(in srgb, var(--info) 30%, var(--surface)); }
.heat--3 { background: color-mix(in srgb, var(--info) 55%, var(--surface)); }
.heat--4 { background: color-mix(in srgb, var(--info) 88%, var(--surface)); color: var(--surface); }
.heat-scale { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-3); }
.heat-scale .heat { width: 22px; height: 12px; padding: 0; border-radius: 3px; }

/* facts: right / wrong per field */
.facts { display: flex; flex-direction: column; }
.facts > li { border-top: 1px solid var(--line); }
.facts > li:first-child { border-top: 0; }
.fact__row { display: grid; grid-template-columns: minmax(8em, 11em) minmax(0, 1fr); gap: 3px 14px; align-items: center; padding: 8px 0; }
.fact > summary.fact__row::before { content: none; }
.fact > summary .fact__label { color: var(--info); text-decoration: underline dotted; text-underline-offset: 3px; }
.fact > summary .fact__label::after { content: " ▸"; text-decoration: none; display: inline-block; margin-left: 2px; }
.fact[open] > summary .fact__label::after { content: " ▾"; }
.fact__row--none { color: var(--ink-3); }
.fact__bar { display: block; width: 100%; height: 10px; border-radius: 3px; }
.fact__text { grid-column: 2; font-size: 13px; color: var(--ink-3); }
.fact__body { display: flex; flex-direction: column; gap: 6px; padding: 0 0 10px 12px; border-left: 2px solid var(--line); margin-bottom: 8px; }
.fact__ex { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.fact__ex > li { overflow-wrap: anywhere; }
.fact__open { white-space: nowrap; }
.fbar--ok { fill: var(--good); background: var(--good); }
.fbar--bad { fill: var(--accent); background: var(--accent); }
.fbar--unsure { fill: var(--surface-3); background: var(--surface-3); }
.fbar--none { fill: var(--surface-2); }
.fbar__gap { stroke: var(--surface); stroke-width: 2px; }

@media (max-width: 900px) {
  /* tables: each row becomes a block, every cell a line «assistant — value» */
  .mx, .mx tbody, .mx tr, .mx td, .mx tbody th { display: block; margin: 0; }
  .mx thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mx tr { padding: 8px 0; border-top: 1px solid var(--line); }
  .mx tbody tr:first-child { border-top: 0; }
  .mx tbody th { min-width: 0; padding: 0 0 4px; }
  .mx td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; text-align: right; }
  .mx td::before { content: attr(data-label); color: var(--ink-2); font-size: 13.5px; text-align: left; min-width: 0; }
  .mx td > span { flex: none; }
  .mx--nums tbody tr:nth-child(odd) td, .mx--nums tbody tr:nth-child(odd) th { background: transparent; }
  .mx .heat { display: inline-block; min-width: 5.5em; text-align: center; }
}
@media (max-width: 640px) {
  .lc__svg { height: 160px; }
  /* a table of an answer: each row a card of «column: value», no sideways scroll */
  .md__table table, .md__table tbody, .md__table tr, .md__table td { display: block; }
  .md__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .md__table tr { border-top: 1px solid var(--line); padding: 6px 0; }
  .md__table td { border: 0; padding: 2px 0; overflow-wrap: anywhere; }
  .md__table td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--ink-2); }
  .md__table td[data-label=""]::before { content: none; }
  .lc__x-minor { visibility: hidden; }
  .fact__row { grid-template-columns: minmax(0, 1fr); }
  .fact__text { grid-column: 1; }
  .bars__row { grid-template-columns: 1.6em minmax(0, 1fr) auto; }
}

/* ───────── вход ───────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login__box { width: min(400px, 100%); }
.login__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 4px; }
.login__brand .logo__mark { color: var(--ink); }

/* ───────── тур «Как пользоваться» ───────── */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour__shade { position: absolute; inset: 0; background: rgba(10, 15, 12, 0.55); }
.tour__spot {
  position: fixed; border-radius: var(--r-md); pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(10, 15, 12, 0.55);
  transition: top 0.15s, left 0.15s, width 0.15s, height 0.15s;
}
.tour__shade[hidden], .tour__spot[hidden] { display: none; }
.tour__pop {
  position: fixed; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(10, 15, 12, 0.28); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.tour__pop--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour__pop--sheet { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-height: 48vh; }
.tour__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour__count { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tour__x {
  border: 0; background: transparent; color: var(--ink-2); font-size: 22px; line-height: 1;
  width: 32px; height: 32px; margin: -6px -8px -6px 0; border-radius: var(--r-sm); cursor: pointer;
}
.tour__x:hover { background: var(--surface-2); }
.tour__title { font-family: var(--f-text); font-size: 16px; font-weight: 600; line-height: 1.3; }
.tour__text { font-size: 14.5px; color: var(--ink-2); }
.tour__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.tour__nav .btn[disabled] { opacity: 0.45; cursor: default; }

/* ───────── адаптив ───────── */
@media (max-width: 900px) {
  :root { --pad: 16px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { flex-direction: row; flex-wrap: wrap; padding: 8px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side { position: static; height: auto; overflow: visible; }
  .side__item {
    position: relative; flex: 1 1 calc(33.333% - 6px); min-width: 0; justify-content: center; text-align: center;
    padding: 8px 4px; border-left: 0; border-radius: var(--r-sm); font-size: 14px; line-height: 1.25; background: var(--surface);
    border: 1px solid var(--line); hyphens: none;
  }
  .side__item[aria-current="page"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
  .side__badge { position: absolute; top: -7px; right: -4px; font-size: 11px; min-width: 18px; padding: 0 5px; white-space: nowrap; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  h1 { font-size: 28px; }
  .bar { gap: 6px 10px; }
  .bar__user, .logo__text, .bar__help-text { display: none; }
  .bar__help { padding: 5px 8px; }
  .rows__row { grid-template-columns: minmax(0, 1fr); }
  .changes > li { grid-template-columns: 48px minmax(0, 1fr); }
  .changes__where { grid-column: 2; text-align: left; }
  .kpi__value { font-size: 28px; }
  .calc__rows { grid-template-columns: minmax(0, 1fr); }
  .serps { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 14px; }
  .fold { padding: 12px 14px; }
  .side__item { font-size: 13px; }
}
@media print {
  .bar, .side, form, .preview, .tour { display: none; }
  .app { display: block; }
  body { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
/* «Аналитика» made the menu seven items: on a narrow screen four in the
   first row, three in the second (after the adaptive block above) */
@media (max-width: 900px) {
  .side__item { flex-basis: calc(25% - 6px); }
}
/* «Почему советуют» / «Откуда» under a place (24.10.2026): full width of the
   row, wraps on a phone (360 px) instead of widening the page */
.why { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); overflow-wrap: anywhere; }
.vis > li > .why { grid-column: 1 / -1; }
.bars__row > .why { grid-column: 2 / -1; }
.why__label { color: var(--ink-3); }
.why .chip { font-size: 11.5px; padding: 1px 7px; vertical-align: 1px; }
/* «Отзывы» in «Аналитика» (25.10.2026): two columns «Хвалят» / «На что
   жалуются» on a wide screen, one on a phone (360 px); quotes as cards */
.rv-period { margin-left: auto; }
.rv-period .filter { font-size: 13.5px; }
.rv-h { font-size: 14.5px; font-weight: 600; margin: 6px 0 2px; }
.rv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.rv-col { min-width: 0; }
.rv-platform { min-width: 0; overflow-wrap: anywhere; }
.rv-stars { color: var(--warn); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.rv-phrases { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.rv-latest { display: flex; flex-direction: column; gap: 8px; }
.rv-latest .quote__meta .chip { font-size: 11.5px; padding: 1px 7px; vertical-align: 1px; }
.rv-themes .vis__sub { overflow-wrap: anywhere; }
.rv-topics > li { padding: 6px 0; gap: 0 12px; }
/* «Упоминания в сети» (27.10.2026): the parts of «Отзывы»; a long channel or
   site name and the line «что сказано» wrap on a phone (360 px) */
.mn-total > li { padding: 6px 0; }
.mn-latest .quote__meta, .mn-latest .quote__text { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .rv-cols { grid-template-columns: minmax(0, 1fr); }
  .rv-period { margin-left: 0; }
  .mn-latest .quote__open { align-self: flex-start; }
}