/* vrednyj.merkinvest.ru — статический сайт данных Data Foundry (MIF-086) */
:root {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #efece5;
  --line: #d9d4c9;
  --line-strong: #b9b2a3;
  --text: #1a1e24;
  --muted: #545b66;
  --accent: #b3381d;
  --accent-ink: #ffffff;
  --link: #1f4f8f;
  --focus: #1f5fbf;
  --ink: #15233a;
  --spark: #2c5d9c;
  --hl: #fff1c2;

  --err: #a3221a; --err-bg: #fbe4e1;
  --warn: #7a4f00; --warn-bg: #fbedc8;
  --ok: #1b6a37; --ok-bg: #dcf1e2;
  --nc: #4e5563; --nc-bg: #e7e9ee;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

  --r: 10px;
  --tap: 44px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sticky-w: 172px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --surface: #181c22;
    --surface-2: #20252d;
    --line: #313843;
    --line-strong: #4a5361;
    --text: #e9e6df;
    --muted: #a9b0bb;
    --accent: #ff8d6e;
    --accent-ink: #1a0c07;
    --link: #8cb8ff;
    --focus: #8cb8ff;
    --spark: #8cb8ff;
    --hl: #4a3d12;
    --err: #ff9c92; --err-bg: #3d1b18;
    --warn: #ffcb70; --warn-bg: #3a2e12;
    --ok: #86dba2; --ok-bg: #16331f;
    --nc: #c3c8d2; --nc-bg: #2a2f38;
  }
}
@media (min-width: 760px) { :root { --sticky-w: 340px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--text-base)/1.5 var(--font);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; outline: none; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
a { color: var(--link); text-underline-offset: 2px; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus:not(.vbtn):not(.mbtn) { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 28px; } }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--surface); color: var(--text); padding: 12px 16px; border-radius: 8px; }
.skip:focus { top: 8px; }

/* шапка */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: var(--tap); }
.brand__mark { width: 32px; height: 32px; flex: none; border-radius: 7px; }
@media (prefers-color-scheme: dark) { .brand__mark { box-shadow: 0 0 0 1px var(--line-strong); } }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand__text span { font-size: var(--text-xs); color: var(--muted); }
.top__in { flex-wrap: wrap; }
.live { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); min-height: 24px; flex-wrap: wrap; }
.live__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.live--loading .live__dot, .live--new .live__dot { background: var(--accent); }
.live--failed .live__dot { background: var(--nc); }
.live--loading .live__t, .live--new .live__t { color: var(--text); }
.live__bar { display: inline-block; width: 96px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.live__bar > i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.live__bar--ind > i { animation: ind 1.4s ease-in-out infinite alternate; }
@keyframes ind { from { margin-left: 0; } to { margin-left: 65%; } }
@media (prefers-reduced-motion: reduce) { .live__bar--ind > i { animation: none; } }
@media (max-width: 640px) { .live { width: 100%; } }
@media (min-width: 641px) { .live { justify-content: flex-end; text-align: right; max-width: 60%; } }
.newver { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.newver[hidden] { display: none; }
.newver__t { font-weight: 600; font-size: var(--text-sm); }
.newver__t .note { font-weight: 400; margin-left: 4px; }
.newver__a { display: flex; gap: 8px; }
@media (min-width: 760px) { .newver { left: auto; right: 24px; bottom: 24px; max-width: 520px; } }

/* подвал */
.foot { margin-top: 48px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--text-xs); }
.foot__in { padding-top: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 6px; }
.foot b { color: var(--text); font-weight: 600; }

/* общие элементы */
.state { display: flex; align-items: center; gap: 12px; padding: 48px 0; color: var(--muted); flex-wrap: wrap; }
.state--err { color: var(--err); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.progress { width: min(320px, 100%); height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); min-width: var(--tap); padding: 0 14px;
  font: 500 var(--text-sm)/1.2 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn--icon { padding: 0; border-color: transparent; background: transparent; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.field { display: grid; gap: 4px; }
.field > span { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
.input, .select {
  min-height: var(--tap); width: 100%; padding: 0 12px;
  font: 400 var(--text-base)/1.2 var(--font); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--surface); max-width: 100%; overflow-x: auto; }
.seg button {
  min-height: var(--tap); padding: 0 14px; border: 0; background: transparent; color: var(--text);
  font: 500 var(--text-sm)/1.1 var(--font); cursor: pointer; white-space: nowrap; border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); } }
.seg button:disabled { color: var(--muted); cursor: not-allowed; text-decoration: line-through; }
.seg button small { font-weight: 400; opacity: .8; margin-left: 4px; font-size: var(--text-xs); }

.chip { display: inline-flex; align-items: center; font-size: var(--text-xs); line-height: 1.3; padding: 2px 7px; border-radius: 10px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); max-width: 100%; overflow-wrap: anywhere; }
.chip--basis { color: var(--text); font-weight: 600; }
.chip--unit { color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.v-error_confirmed { color: var(--err); background: var(--err-bg); }
.v-unexplained { color: var(--warn); background: var(--warn-bg); }
.v-not_error { color: var(--ok); background: var(--ok-bg); }
.v-not_checked { color: var(--nc); background: var(--nc-bg); }

/* главная */
.hero { padding: 28px 0 18px; display: grid; gap: 10px; }
.hero h1 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.hero p { color: var(--muted); max-width: 70ch; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; font-size: var(--text-sm); }
.stats b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; margin-right: 4px; }
.filters { display: grid; gap: 10px; grid-template-columns: 1fr; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.filters > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .filters { grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr); align-items: end; position: sticky; top: 0; z-index: 5; } .filters > :first-child { grid-column: auto; } }
@media (max-width: 759px) { .hero { padding: 18px 0 14px; gap: 8px; } .hero p { font-size: var(--text-sm); } .stats { gap: 4px 16px; } .stats b { font-size: var(--text-base); } }
.filters__sort { display: flex; gap: 8px; }
.filters__sort .select { flex: 1; }
.count { margin: 14px 2px 8px; color: var(--muted); font-size: var(--text-sm); }

.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.clist__head { display: none; }
.crow { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline;
  padding: 12px 14px; min-height: var(--tap); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); text-decoration: none; }
.crow:hover { border-color: var(--line-strong); background: var(--surface-2); }
.crow__t { font-weight: 700; font-family: var(--mono); font-size: var(--text-sm); color: var(--accent); min-width: 4.6em; }
.crow__n { font-weight: 600; }
.crow__meta { grid-column: 2; color: var(--muted); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.crow__flags { color: var(--err); font-weight: 600; }
.crow__c { display: none; }
@media (min-width: 900px) {
  .cwrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
  .clist { gap: 0; }
  .clist__head, .crow { grid-template-columns: 90px minmax(260px, 1fr) 200px 110px 110px 90px; align-items: center; gap: 0 14px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
  .clist__head { display: grid; padding: 0 14px; background: var(--surface-2); font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
  .clist__head button { min-height: var(--tap); border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
  .clist__head button[aria-sort] { color: var(--text); }
  .clist__head .r, .crow .r { text-align: right; justify-content: flex-end; }
  .crow__meta { display: none; }
  .crow__c { display: block; font-size: var(--text-sm); color: var(--muted); }
  .crow__c.r { font-variant-numeric: tabular-nums; color: var(--text); }
  .crow:last-child { border-bottom: 0; }
}
.empty { padding: 32px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); display: grid; gap: 12px; justify-items: center; }

/* эмитент */
.crumbs { padding-top: 14px; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); gap: 6px; font-size: var(--text-sm); }
.ihead { padding: 4px 0 18px; display: grid; gap: 8px; }
.ihead h1 { font-size: var(--text-xl); letter-spacing: -0.02em; outline: none; }
.ihead__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: var(--text-sm); }
.ihead__meta b { color: var(--text); font-weight: 600; }
.tick { font-family: var(--mono); font-weight: 700; color: var(--accent); }

.flags { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--err); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; display: grid; gap: 12px; }
.flags h2 { font-size: var(--text-lg); }
.flags > p { color: var(--muted); font-size: var(--text-sm); }
.flags ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flag { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.flag__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.flag__m { font-weight: 600; }
.flag__note { font-size: var(--text-sm); }
.flag__act { display: flex; flex-wrap: wrap; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }

.toolbar { display: grid; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; }
@media (min-width: 900px) { .toolbar { grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; } }
.toolbar__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--text-sm); cursor: pointer; padding-right: 6px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.note { color: var(--muted); font-size: var(--text-xs); }
.note b { color: var(--text); }

.sec { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); content-visibility: auto; contain-intrinsic-size: auto 600px; }
.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: var(--r); }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin: 0 4px; }
.sec[open] > summary::before { transform: rotate(45deg); }
.sec h2 { font-size: var(--text-lg); }
.sec__n { color: var(--muted); font-size: var(--text-sm); }
.sec__body { border-top: 1px solid var(--line); }

.tscroll { scroll-padding-left: calc(var(--sticky-w) + 12px); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tbl { border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); min-width: 100%; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 0; vertical-align: middle; background: var(--surface); }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-align: right; padding: 8px 10px; white-space: nowrap; height: 48px; }
.tbl thead th.h-m { text-align: left; z-index: 3; }
.tbl thead th .cum { display: block; font-weight: 500; color: var(--accent); }
.tbl .h-m { position: sticky; left: 0; z-index: 1; width: var(--sticky-w); min-width: var(--sticky-w); max-width: var(--sticky-w); text-align: left; border-right: 1px solid var(--line-strong); }
.tbl .h-s { width: 108px; min-width: 108px; padding: 0 8px; text-align: center; }
.mbtn { display: grid; gap: 4px; width: var(--sticky-w); min-height: 56px; padding: 8px 10px; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.mbtn:hover .mbtn__n { text-decoration: underline; }
.mbtn__n { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mbtn__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mbtn__spark { display: none; }
.mbtn__meth { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.vbtn { display: flex; align-items: center; justify-content: flex-end; width: 100%; min-height: 56px; min-width: 96px; padding: 0 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; position: relative; }
.vbtn:hover { background: var(--surface-2); }
.vbtn:focus-visible { outline-offset: -3px; }
.vbtn.neg { color: var(--err); }
.vbtn.empty-v { color: var(--muted); cursor: default; }
.vbtn.fl { font-weight: 700; box-shadow: inset 0 0 0 2px currentColor; border-radius: 4px; }
.vbtn.fl::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent currentColor transparent transparent; }
.vbtn.fl.f-error_confirmed { color: var(--err); background: var(--err-bg); }
.vbtn.fl.f-unexplained { color: var(--warn); background: var(--warn-bg); }
.vbtn.fl.f-not_error { color: var(--ok); background: var(--ok-bg); }
.vbtn.fl.f-not_checked { color: var(--nc); background: var(--nc-bg); }
.vbtn .rv-mark { font-size: 10px; color: var(--muted); margin-left: 3px; }
.vbtn.hl { animation: hl 2.4s ease-out 1; }
@keyframes hl { 0%, 60% { background: var(--hl); } 100% { background: transparent; } }
.spark { display: block; margin: 0 auto; color: var(--spark); }
.more { padding: 12px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: var(--text-sm); }

/* панель */
.panel { border: 0; padding: 0; background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.panel::backdrop { background: rgba(10, 14, 20, .55); }
.panel__head { position: sticky; top: 0; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); z-index: 1; }
.panel__title { font-size: var(--text-lg); }
.panel__body { padding: 16px 18px 22px; display: grid; gap: 14px; }
.panel__big { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.panel__big small { font-size: var(--text-sm); color: var(--muted); font-weight: 500; margin-left: 6px; }
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 0; margin: 0; font-size: var(--text-sm); }
.kv dt, .kv dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); padding-right: 12px; }
.kv dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--text-xs); }
.copy { margin-left: 6px; min-height: var(--tap); padding: 0 12px; vertical-align: middle; }
.chart { width: 100%; height: auto; color: var(--spark); }
.chart text { fill: var(--muted); font: 11px var(--font); }
@media (max-width: 640px) {
  .panel { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 759px) {
  :root { --sticky-w: 150px; }
  .tbl .h-s { display: none; }
  .mbtn { padding: 8px 8px; }
  .mbtn__spark { display: block; }
  .mbtn__spark .spark { margin: 0; width: 92px; height: 24px; }
  .mbtn__spark .note { display: none; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; overflow: visible; }
  .seg button { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .seg button:nth-child(2n) { border-right: 0; }
  .seg button:nth-child(n+3) { border-bottom: 0; }
  .toolbar { padding: 10px; gap: 8px; }
  .toolbar__row { gap: 0 14px; }
  .ihead { padding-bottom: 12px; gap: 6px; }
  .ihead__meta { font-size: var(--text-xs); gap: 4px 14px; }
  .flags { padding: 12px; gap: 10px; }
  .vbtn { min-width: 84px; }
}
.flag__act .btn { min-height: var(--tap); }
body.has-nv { padding-bottom: 120px; }

/* MIF-118 (PWA-PERF-1, замер 02.11: CLS 0,882): место под строку статуса резервируется с первого кадра,
   подвал стартует ниже первого экрана — показ #live и замена спиннера списком не сдвигают макет. */
.live[hidden] { display: flex; visibility: hidden; }
#main { min-height: 100vh; min-height: 100svh; }
@media (max-width: 640px) { .live { min-height: 56px; align-content: center; } }   /* строка статуса на телефоне — две строки текста */
