/*
  Public knowledge site — design direction "Табло + Списание" (design-canvas-2026-09-04, owner's
  choice 04.09.2026): the app's panel/readout skeleton around a magazine reading column.
  Tokens extend site.css (the app's) so both remain one system; no JS for reading.
*/
body.public {
  --pub-bg: #EFECE2;
  --pub-panel: #FFFDF9;
  --pub-panel-2: #F3F0E5;
  --pub-deep: #2B2723;
  --pub-deep-ink: #F1EBE1;
  --pub-deep-soft: #B9B0A2;
  --pub-ink: #2A2820;
  --pub-soft: #6E6858;
  --pub-line: #D5CCBE;
  --pub-accent: #B9812A;
  --pub-accent-hover: #CB9040;
  --pub-accent-ink: #2A2013;
  --pub-tint: #EFE4CF;
  --pub-warn: #7A2E12;
  --pub-warn-bg: #F1D9CF;
  --pub-warn-line: #E4C7BC;
  --pub-notice-draft-bg: #F4E7C3; --pub-notice-draft-ink: #5A4300;
  --pub-notice-review-bg: #E3E9F1; --pub-notice-review-ink: #223B66;
  --pub-display: 'Big Shoulders Display', Impact, system-ui, sans-serif;
  --pub-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  background: var(--pub-bg);
  color: var(--pub-ink);
}
/* The app already has a dark theme; the public pages follow the same switch with their own full set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.public {
    --pub-bg: #17160F; --pub-panel: #201E15; --pub-panel-2: #262418;
    --pub-deep: #2A2820; --pub-deep-ink: #F1EBE1; --pub-deep-soft: #C6BDAA;
    --pub-ink: #ECE6D6; --pub-soft: #C6BDAA; --pub-line: #3F3A2E;
    --pub-accent: #E3A94A; --pub-accent-hover: #EFBB63; --pub-accent-ink: #1B1509;
    --pub-tint: #33301F; --pub-warn: #E9A28C; --pub-warn-bg: #3A2620; --pub-warn-line: #5A3A31;
    --pub-notice-draft-bg: #3A3220; --pub-notice-draft-ink: #F0DDA8;
    --pub-notice-review-bg: #22293A; --pub-notice-review-ink: #C9D6EE;
  }
}
:root[data-theme="dark"] body.public {
  --pub-bg: #17160F; --pub-panel: #201E15; --pub-panel-2: #262418;
  --pub-deep: #2A2820; --pub-deep-ink: #F1EBE1; --pub-deep-soft: #C6BDAA;
  --pub-ink: #ECE6D6; --pub-soft: #C6BDAA; --pub-line: #3F3A2E;
  --pub-accent: #E3A94A; --pub-accent-hover: #EFBB63; --pub-accent-ink: #1B1509;
  --pub-tint: #33301F; --pub-warn: #E9A28C; --pub-warn-bg: #3A2620; --pub-warn-line: #5A3A31;
  --pub-notice-draft-bg: #3A3220; --pub-notice-draft-ink: #F0DDA8;
  --pub-notice-review-bg: #22293A; --pub-notice-review-ink: #C9D6EE;
}

/* ---- chrome: dark bar from the app, amber action ---- */
body.public nav.topbar.public-topbar { background: var(--pub-deep); border-bottom: 0; box-shadow: none; }
body.public .public-topbar .brand { color: var(--pub-deep-ink); text-decoration: none; font-family: var(--pub-display); font-weight: 700; letter-spacing: .02em; }
body.public .public-topbar .links a { color: var(--pub-deep-soft); font-size: .92rem; }
body.public .public-topbar .links a:hover, body.public .public-topbar .links a:focus-visible { color: var(--pub-deep-ink); background: transparent; }
body.public .public-topbar .links a.app-link { color: var(--pub-accent-ink); background: var(--pub-accent); font-weight: 600; border-radius: 6px; padding: .35rem .75rem; }
body.public .public-topbar .links a.app-link:hover { color: var(--pub-accent-ink); background: var(--pub-accent-hover); }
body.public .public-topbar .links a:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }

/* ---- reading column ---- */
.public-page { max-width: 780px; padding-top: 1.4rem; padding-bottom: 3.5rem; }
.public-breadcrumb, .public-language { font-family: var(--pub-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pub-soft); display: flex; gap: .6rem; flex-wrap: wrap; }
.public-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem 1.2rem; flex-wrap: wrap; margin: 0 0 1rem; }
.public-breadcrumb { margin: 0; }
.public-breadcrumb a, .public-language a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pub-line); }
.public-breadcrumb a:hover, .public-language a:hover { border-color: var(--pub-accent); }
.public-language { margin: 0; gap: .9rem; }
.public-language .current { color: var(--pub-ink); font-weight: 600; }
.public-language .unavailable { color: var(--pub-soft); opacity: .7; }

.public-page article h1 { color: var(--pub-ink); font-family: var(--pub-display); font-weight: 800; font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: .98; letter-spacing: .005em; margin: 0 0 .9rem; text-wrap: balance; }
.public-page article h2 { color: var(--pub-ink); font-family: var(--pub-display); font-weight: 800; font-size: 1.65rem; line-height: 1.1; margin: 2.4rem 0 .7rem; text-wrap: balance; }
.public-page article h3 { color: var(--pub-ink); font-family: var(--pub-display); font-weight: 700; font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.public-page article p, .public-page article li { font-size: 1.14rem; line-height: 1.65; }
.public-page article p { margin: 0 0 1rem; }
.public-page article > p:first-of-type { font-size: 1.28rem; line-height: 1.5; color: var(--pub-ink); }
.public-page article ul, .public-page article ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.public-page article li { margin: .35rem 0; }
.public-page article li p { margin: 0; }
.public-page article a { color: var(--pub-ink); text-decoration: underline; text-decoration-color: var(--pub-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.public-page article a:hover { text-decoration-color: var(--pub-ink); }
.public-page article strong { font-weight: 700; }
.public-page article blockquote { border-left: 4px solid var(--pub-accent); margin: 1.2rem 0; padding: .2rem 1rem; font-size: 1.14rem; font-weight: 500; }
.public-page article hr { border: 0; border-top: 1px solid var(--pub-line); margin: 2rem 0; }
.public-page article code { font-family: var(--pub-mono); font-size: .9em; background: var(--pub-tint); padding: .05rem .3rem; border-radius: 4px; }
.public-page article table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
.public-page article th, .public-page article td { border-bottom: 1px solid var(--pub-line); padding: .45rem .5rem; text-align: left; vertical-align: top; }
.public-page article .table-wrap, .public-page article table { display: block; overflow-x: auto; }

/* ---- notices ---- */
.public-notice { border-radius: 8px; padding: .6rem .9rem; font-size: .92rem; margin: 0 0 1rem; }
.public-notice.draft { background: var(--pub-notice-draft-bg); color: var(--pub-notice-draft-ink); }
.public-notice.stale { background: var(--pub-warn-bg); color: var(--pub-warn); }
.public-notice.review { background: var(--pub-notice-review-bg); color: var(--pub-notice-review-ink); }

/* ---- readout: the evidence strip above the title ---- */
.public-readout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem .8rem; align-items: center; background: var(--pub-panel); border: 1px solid var(--pub-line); border-radius: 8px; padding: .45rem .7rem; margin: 0 0 .8rem; font-size: .86rem; line-height: 1.35; }
.public-readout .grade { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 6px; background: var(--pub-deep); color: var(--pub-accent); font-family: var(--pub-display); font-weight: 800; font-size: 1.45rem; line-height: 1; }
.public-readout .grade-C, .public-readout .grade-D { color: var(--pub-deep-ink); }
.public-readout .readout-text { color: var(--pub-ink); }
.public-readout .readout-meta { font-family: var(--pub-mono); font-size: .66rem; letter-spacing: .04em; color: var(--pub-soft); text-align: right; line-height: 1.4; white-space: nowrap; }

/* ---- guided journey: segment bar ---- */
.public-journey { margin: 0 0 .9rem; }
.public-journey-label { font-family: var(--pub-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pub-soft); display: flex; gap: .5rem; align-items: baseline; margin-bottom: .35rem; }
.public-journey-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pub-line); }
.public-journey-label strong { color: var(--pub-ink); font-weight: 600; }
.public-journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.public-journey-steps li a, .public-journey-steps li > span { display: block; height: 8px; border-radius: 4px; background: var(--pub-line); text-decoration: none; color: inherit; }
.public-journey-steps li a:hover, .public-journey-steps li a:focus-visible { background: var(--pub-soft); outline: none; }
.public-journey-steps li.done a { background: var(--pub-ink); }
.public-journey-steps li.current > span { background: var(--pub-accent); }
.public-journey-steps .num, .public-journey-steps .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.public-journey-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem; }
.public-journey-list li a { display: flex; gap: .8rem; align-items: baseline; padding: .8rem 1rem; border: 1px solid var(--pub-line); border-radius: 8px; background: var(--pub-panel); color: var(--pub-ink); text-decoration: none; font-size: 1.08rem; }
.public-journey-list li a:hover { border-color: var(--pub-accent); }
.public-journey-list .num { font-family: var(--pub-mono); font-weight: 600; font-size: .9rem; color: var(--pub-accent); min-width: 1.4rem; }
.public-previous { margin: 2rem 0 -.8rem; font-family: var(--pub-mono); font-size: .9rem; }
.public-previous a { color: var(--pub-ink); text-decoration: none; border-bottom: 1px solid var(--pub-line); padding-bottom: .1rem; }
.public-previous a:hover { border-color: var(--pub-accent); }

/* ---- next action: one panel, one action ---- */
.public-next { margin: 2.6rem 0 1.6rem; padding: .95rem 1.1rem; border: 1px solid var(--pub-line); border-radius: 8px; background: var(--pub-panel); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.public-next .eyebrow { margin: 0; font-family: var(--pub-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-soft); flex-basis: 100%; }
.public-next p { margin: 0; font-size: 1rem; }
.public-next-link { font-family: var(--pub-display); font-size: 1.45rem; font-weight: 800; text-decoration: none; color: var(--pub-ink); }
.public-next-link:hover { color: var(--pub-accent); }
.public-next .btn { display: inline-block; margin: 0; background: var(--pub-accent); color: var(--pub-accent-ink); border: 0; border-radius: 6px; padding: .55rem .95rem; font-weight: 600; text-decoration: none; }
.public-next .btn:hover { background: var(--pub-accent-hover); }

/* ---- sources as footnotes with their limitation ---- */
.public-sources { margin-top: 2.4rem; border-top: 2px solid var(--pub-ink); padding-top: .8rem; font-size: .9rem; }
.public-sources h2 { font-family: var(--pub-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-soft); margin: 0 0 .6rem; font-weight: 500; }
.public-sources ol { list-style: none; counter-reset: src; padding: 0; margin: 0; }
.public-sources li { counter-increment: src; position: relative; padding: .45rem 0 .45rem 2rem; border-bottom: 1px solid var(--pub-line); line-height: 1.45; }
.public-sources li::before { content: counter(src); position: absolute; left: 0; top: .6rem; font-family: var(--pub-mono); font-size: .78rem; color: var(--pub-soft); }
.public-sources li a { color: var(--pub-ink); text-decoration: underline; text-decoration-color: var(--pub-line); text-underline-offset: 3px; }
.public-sources li a:hover { text-decoration-color: var(--pub-accent); }
.public-sources .kind { color: var(--pub-soft); font-size: .84rem; margin-left: .3rem; }
.public-sources .limitation { color: var(--pub-soft); font-size: .86rem; }
.public-sources .licence { font-family: var(--pub-mono); font-size: .68rem; letter-spacing: .04em; color: var(--pub-soft); }
.public-registry li { padding: .6rem 0; }

.public-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-family: var(--pub-mono); font-size: .7rem; letter-spacing: .04em; color: var(--pub-soft); margin-top: 1.4rem; }
.public-disclaimer { font-size: .84rem; color: var(--pub-soft); border-top: 1px solid var(--pub-line); padding-top: .8rem; margin-top: 1rem; line-height: 1.5; }
.public-footer { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; justify-content: center; padding: 1.4rem 1.2rem 2rem; font-size: .84rem; border-top: 1px solid var(--pub-line); }
.public-footer a { color: var(--pub-soft); text-decoration: none; border-bottom: 1px solid var(--pub-line); }
.public-footer a:hover { color: var(--pub-ink); border-color: var(--pub-accent); }

/* ---- client-side tools: panels in, readout tiles out ---- */
.tool { margin: .4rem 0 2rem; }
.tool-form fieldset { border: 1px solid var(--pub-line); border-radius: 8px; padding: .8rem 1rem 1rem; margin: 0 0 .8rem; background: var(--pub-panel); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.tool-form legend { font-family: var(--pub-mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-soft); padding: 0 .3rem; }
.tool-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; color: var(--pub-soft); }
.tool-form input, .tool-form select { font: inherit; font-family: var(--pub-mono); font-size: .95rem; padding: .45rem .55rem; border: 1px solid var(--pub-line); border-radius: 6px; background: var(--pub-panel); color: var(--pub-ink); }
.tool-form input:focus-visible, .tool-form select:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 1px; }
.tool-form [data-when] { display: contents; }
.tool-form [data-when][hidden] { display: none; }
.tool-result { padding: 0; border: 0; background: transparent; }
.tool-headline { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; background: var(--pub-deep); color: var(--pub-deep-ink); border-radius: 8px; padding: .9rem 1.1rem .8rem; }
.tool-big { font-family: var(--pub-mono); font-size: 2.1rem; font-weight: 600; color: var(--pub-accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.tool-unit { color: var(--pub-deep-soft); font-size: .92rem; }
.tool-note { font-size: .9rem; color: var(--pub-soft); margin: .7rem 0 .9rem; line-height: 1.5; }
.tool-privacy { margin-top: .8rem; margin-bottom: 0; font-family: var(--pub-mono); font-size: .7rem; letter-spacing: .04em; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.tool-grid > div { background: var(--pub-panel); border: 1px solid var(--pub-line); border-radius: 8px; padding: .55rem .75rem; }
.tool-grid dt { font-family: var(--pub-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-soft); }
.tool-grid dd { margin: .15rem 0 0; font-family: var(--pub-mono); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tool-error { color: var(--pub-warn); margin: 0; background: var(--pub-panel); border: 1px solid var(--pub-warn-line); border-radius: 8px; padding: .6rem .8rem; }
.tool-warn { color: var(--pub-warn); }
.tool-subhead { font-family: var(--pub-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-soft); margin: 1rem 0 .4rem; }

/* ---- diet comparison: a data panel ---- */
.cmp { margin: 1.2rem 0 2rem; }
.cmp-filters { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: end; margin-bottom: .8rem; font-size: .88rem; background: var(--pub-panel); border: 1px solid var(--pub-line); border-radius: 8px; padding: .7rem .9rem; }
.cmp-filters label { display: flex; flex-direction: column; gap: .25rem; color: var(--pub-soft); font-family: var(--pub-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.cmp-filters label.cmp-check { flex-direction: row; align-items: center; gap: .4rem; font-family: inherit; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--pub-ink); }
.cmp-filters select { font: inherit; font-family: var(--pub-mono); font-size: .9rem; padding: .35rem .5rem; border: 1px solid var(--pub-line); border-radius: 6px; background: var(--pub-panel); color: var(--pub-ink); }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--pub-line); border-radius: 8px; background: var(--pub-panel); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .88rem; }
.cmp-table th, .cmp-table td { padding: .55rem .7rem; vertical-align: top; border-bottom: 1px solid var(--pub-line); text-align: left; }
.cmp-table thead th { font-family: var(--pub-display); font-size: 1.05rem; font-weight: 700; background: var(--pub-deep); color: var(--pub-deep-ink); position: sticky; top: 0; }
.cmp-table thead th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pub-deep-soft); }
.cmp-table thead th a:hover { border-color: var(--pub-accent); }
.cmp-table tbody th { font-family: var(--pub-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--pub-soft); width: 11rem; background: var(--pub-panel-2); }
.cmp-table [hidden] { display: none; }
.cmp-source { font-family: var(--pub-mono); font-size: .68rem; color: var(--pub-soft); text-decoration: none; border-bottom: 1px dotted currentColor; margin-left: .25rem; cursor: help; }
.cmp-notset { color: var(--pub-soft); font-style: italic; border-bottom: 1px dotted currentColor; cursor: help; }
.cmp-dash { color: var(--pub-soft); }
.cmp-score { display: inline-block; font-family: var(--pub-mono); font-size: .74rem; padding: .08rem .4rem; border-radius: 4px; background: var(--pub-panel-2); border: 1px solid var(--pub-line); }
.cmp-score-3 { color: var(--pub-warn); background: var(--pub-warn-bg); border-color: var(--pub-warn-line); }
.cmp-empty { color: var(--pub-warn); }
.cmp-legend { font-size: .85rem; color: var(--pub-soft); margin-top: .6rem; line-height: 1.5; }
.cmp-table .grade { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 4px; background: var(--pub-deep); color: var(--pub-accent); font-family: var(--pub-display); font-weight: 800; margin-right: .3rem; }
.cmp-table .grade-C, .cmp-table .grade-D { color: var(--pub-deep-ink); }

/* ---- glossary ---- */
.glossary-sections { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 1rem 0 .6rem; }
.glossary-sections a { font-family: var(--pub-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--pub-soft); border: 1px solid var(--pub-line); border-radius: 999px; padding: .25rem .65rem; background: var(--pub-panel); }
.glossary-sections a:hover { color: var(--pub-ink); border-color: var(--pub-accent); }
.glossary-list { margin: 0 0 1.5rem; }
.glossary-term { padding: .7rem 0; border-bottom: 1px solid var(--pub-line); }
.glossary-term dt { font-weight: 700; font-size: 1.05rem; color: var(--pub-ink); }
.glossary-term dd { margin: .2rem 0 0; color: var(--pub-soft); font-size: 1rem; line-height: 1.5; }
.glossary-link { margin-left: .4rem; white-space: nowrap; font-size: .9rem; }
.glossary-term:target { background: var(--pub-tint); margin: 0 -.6rem; padding: .7rem .6rem; border-radius: 6px; }

/* ---- small screens ---- */
@media (max-width: 720px) {
  body.public nav.topbar.public-topbar { flex-wrap: wrap; row-gap: .2rem; padding: .7rem 1rem .4rem; }
  body.public .public-topbar .links { display: flex; flex-direction: row; flex-wrap: nowrap; position: static; flex: 1 0 100%; width: 100%; overflow-x: auto; gap: .15rem; padding: .1rem 0 .35rem; margin: 0; white-space: nowrap; scrollbar-width: none; background: transparent; border: 0; box-shadow: none; }
  body.public .public-topbar .links::-webkit-scrollbar { display: none; }
  body.public .public-topbar .links { padding-right: 3rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); }
  body.public .public-topbar .links a { flex: 0 0 auto; width: auto; min-width: 0; display: inline-block; border: 0; border-radius: 6px; padding: .35rem .6rem; font-size: .84rem; text-align: left; }
}
@media (max-width: 640px) {
  .public-page { padding-top: .5rem; }
  /* one row less: the top bar already names the section, so the breadcrumb goes; the language switch stays */
  .public-breadcrumb { display: none; }
  .public-head { margin-bottom: .5rem; }
  .public-journey { margin-bottom: .6rem; }
  .public-journey-label { margin-bottom: .25rem; }
  /* title first, then the evidence strip: the reader came for the title */
  .public-page article { display: flex; flex-direction: column; }
  .public-page article > h1 { order: -1; margin-bottom: .6rem; }
  .public-readout { margin: 0 0 .9rem; padding: .4rem .6rem; font-size: .8rem; }
  .public-readout .grade { width: 1.8rem; height: 1.8rem; font-size: 1.1rem; }
  body.public nav.topbar.public-topbar { padding: .5rem 1rem .25rem; }
  body.public .public-topbar .brand { font-size: 1rem; }
  .public-page article h1 { font-size: 2rem; }
  .public-page article p, .public-page article li { font-size: 1.05rem; }
  .public-page article > p:first-of-type { font-size: 1.15rem; }
  .public-readout { grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; }
  .public-readout .readout-meta { grid-column: 2; text-align: left; white-space: normal; }
  .public-head { margin-bottom: .8rem; }
  .public-language { gap: .7rem; }
  .public-topbar .links { flex-wrap: wrap; }
  .tool-form fieldset, .tool-grid { grid-template-columns: 1fr; }
  .public-next { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .public-journey-steps li a, .public-next .btn, .public-topbar .links a.app-link { transition: background-color .15s ease; }
}