/* Shared components: tokens, cards, status hero, meters, trends, tiles. Tone: add .ok / .warn / .bad / .off to a component. */
body{--ok:var(--accent);--warn:var(--amber);--bad:var(--red);--r-s:8px;--r-m:12px;--r-l:16px;
  --sh-1:0 1px 2px color-mix(in srgb,var(--text) 5%,transparent),0 6px 20px color-mix(in srgb,var(--text) 6%,transparent);
  --sh-2:0 2px 4px color-mix(in srgb,var(--text) 6%,transparent),0 12px 32px color-mix(in srgb,var(--text) 10%,transparent)}
body.dark{--sh-1:0 1px 2px #0004,0 8px 24px #0003;--sh-2:0 2px 6px #0005,0 14px 36px #0004}
.ok{--tone:var(--ok)}.warn{--tone:var(--warn)}.bad{--tone:var(--bad)}.off{--tone:var(--muted)}
.c-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);transition:box-shadow .2s;min-width:0}
.c-card:hover{box-shadow:var(--sh-2)}
.c-section{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:8px 2px -6px;font-size:15px;font-weight:700;letter-spacing:-.2px}
.c-section span{font-size:12px;font-weight:500;color:var(--muted)}
.c-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--tone,var(--accent)) 13%,var(--surface));color:var(--tone,var(--accent));flex:none}
.c-ico .ico,.c-ico .ico svg{width:17px;height:17px}
.c-value{font-size:34px;line-height:1;font-weight:700;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;margin:14px 0 12px;overflow-wrap:anywhere}
.c-value.sm{font-size:28px;letter-spacing:-.8px;margin:12px 0 8px}
.off .c-value{color:var(--muted);font-size:26px}
.c-foot{margin:10px 0 0;font-size:12px;color:var(--muted)}
.c-meter{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.c-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tone,var(--accent)) 70%,var(--surface)),var(--tone,var(--accent)));transition:width .3s}
.c-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:650;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,var(--surface));white-space:nowrap}
.c-badge i,.c-dot{width:7px;height:7px;border-radius:50%;background:var(--tone);display:inline-block;flex:none}
.c-trend{display:block;width:100%;height:44px;margin-top:14px}
.c-trend polyline{fill:none;stroke:var(--tone,var(--accent));stroke-width:1.8;vector-effect:non-scaling-stroke}
.c-trend polygon{fill:color-mix(in srgb,var(--tone,var(--accent)) 14%,transparent)}
.c-trend.empty{height:44px}
.c-range{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.c-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.c-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.c-tile{padding:18px 20px}
.c-tile-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.c-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 32px;padding:22px 26px;border-radius:var(--r-l);
  border:1px solid color-mix(in srgb,var(--tone) 30%,var(--line));background:radial-gradient(120% 180% at 0% 0%,color-mix(in srgb,var(--tone) 16%,var(--surface)) 0%,var(--surface) 60%);box-shadow:var(--sh-1)}
.c-hero-status{display:flex;align-items:center;gap:18px;min-width:0}
.c-hero-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--tone);color:var(--surface);box-shadow:0 8px 22px color-mix(in srgb,var(--tone) 35%,transparent);flex:none}
.c-hero-icon .ico,.c-hero-icon svg{width:28px;height:28px}.c-hero-icon svg{stroke-width:2.4}
.c-hero h2{margin:0 0 4px;font-size:24px;letter-spacing:-.6px}
.c-hero p{margin:0;color:var(--muted);font-size:13px}
.c-facts{display:flex}
.c-facts>div{display:grid;gap:2px;padding:4px 22px;border-left:1px solid var(--line);min-width:150px}
.c-facts span,.c-facts small{font-size:12px;color:var(--muted)}
.c-facts strong{font-size:18px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.c-issues{grid-column:1/-1;margin:0;padding:0;list-style:none;display:grid;gap:6px}
.c-issues li{font-size:12.5px;padding:9px 12px;border-radius:9px;background:color-mix(in srgb,var(--warn) 11%,var(--surface))}
.c-issues li.error{background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
@media (max-width:1180px){.c-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.c-hero{grid-template-columns:1fr}.c-facts>div:first-child{border-left:0;padding-left:0}}
@media (max-width:720px){.c-grid4,.c-grid2{grid-template-columns:1fr}.c-hero{padding:18px}.c-facts{flex-wrap:wrap;gap:12px}.c-facts>div{border-left:0;padding:0;min-width:40%}.c-value{font-size:30px}}
@media (prefers-reduced-motion:reduce){.c-card,.c-meter i{transition:none}}
@media print{.c-card,.c-hero{box-shadow:none}}

/* Global fixes (stage 3) */
/* Chart labels keep a real 11 px size however wide the chart is drawn (--k is set by app.mjs fitCharts). */
svg[style*="--k"] text{font-size:calc(11px / var(--k))}
/* A visually hidden label inside a scrolling table must not widen the page. */
.table-wrap{position:relative}
.asset-ring-layout{flex-wrap:wrap}.asset-ring-layout .workflow-legend{min-width:min(100%,220px)}
.history-bars{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#ka-freshness:empty{display:none}
@media (min-width:1181px){.system-kpis:has(> .kpi:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Shared look for existing blocks on every page (stage 3). Views keep their markup. */
.card{border-radius:var(--r-l);box-shadow:var(--sh-1)}
.kpi{border-top:3px solid color-mix(in srgb,var(--accent) 70%,var(--line));transition:box-shadow .2s}
.kpi:hover{box-shadow:var(--sh-2)}
.kpi .value{font-weight:700;letter-spacing:-1.1px}
.kpi-top{font-weight:600}
.kpi-top .ico{width:32px;height:32px;padding:7px;border-radius:10px;background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.notice{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:var(--text);line-height:1.5}
.notice.warning{border-color:color-mix(in srgb,var(--amber) 30%,var(--line));border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,var(--surface));color:var(--text)}
.notice.error{border-color:color-mix(in srgb,var(--red) 35%,var(--line));border-left-color:var(--red);background:color-mix(in srgb,var(--red) 9%,var(--surface));color:var(--text)}
.empty{margin:14px 22px 20px;padding:16px 18px;border:1px dashed color-mix(in srgb,var(--muted) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--soft) 60%,transparent);color:var(--muted)}
.body .empty,.drawer .empty,#content > .empty{margin:12px 0}
.pill{border-radius:99px;padding:4px 9px;font-weight:600}
th{position:sticky;top:0;z-index:1}
tbody tr{transition:background-color .15s}
@media (prefers-reduced-motion:reduce){.kpi,tbody tr{transition:none}}
@media print{.card,.kpi{box-shadow:none}.kpi:hover{box-shadow:none}}
.az-action{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:170px}
.az-action small{flex-basis:100%;order:3;color:var(--muted);font-size:12px}
.az-action .btn{padding:6px 11px;font-size:12px}
.help-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px 22px}
.help-line-title{display:grid;gap:2px;min-width:220px}
.help-line-title strong{font-size:14px}.help-line-title span{font-size:12px;color:var(--muted)}
.help-line-items{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.help-line-item{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;font-size:12px;background:color-mix(in srgb,var(--tone) 10%,var(--surface))}
.help-line-item i{width:8px;height:8px;border-radius:50%;background:var(--tone)}
.help-line-item b{font-variant-numeric:tabular-nums}
.help-line-link{font-size:12.5px;font-weight:600;white-space:nowrap}
.notice-dashboard.empty-catalog{grid-template-columns:1fr}
.kpis.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:720px){.kpis.kpis-3{grid-template-columns:1fr}}
.az-next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 28px;padding:20px 24px;margin:16px 0;border-left:4px solid var(--accent);background:radial-gradient(120% 180% at 0% 0%,color-mix(in srgb,var(--accent) 10%,var(--surface)) 0%,var(--surface) 60%)}
.az-next-label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
.az-next p{margin:6px 0 8px;font-size:15px;font-weight:600;line-height:1.45}
.az-next small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.az-next .az-actions{margin:0;justify-content:flex-end}
@media (max-width:1100px){.az-next{grid-template-columns:1fr}.az-next .az-actions{justify-content:flex-start}}
/* Analyzer history: the management disclosure is a section heading, not a card around cards. */
#content .ka-management{border:0;padding:0;background:none}
#content .ka-management>summary{padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-1)}
#content .ka-management .card{margin:14px 0}
.diag-days{display:flex;flex-wrap:wrap;gap:12px;padding:16px 22px 0}
.diag-days>div{display:grid;gap:2px;min-width:150px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--soft)}
.diag-days span,.diag-days small{font-size:12px;color:var(--muted)}
.diag-days strong{font-size:26px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}

/* Chart axis labels are wider than the viewBox margin; the card padding has room for them */
svg[style*="--k"]{overflow:visible}
/* П5 trust badge under a headline number: a dot and one line; tap opens why and the definition changes. */
.tr{--tr:var(--accent);margin:8px 0 4px;max-width:100%}
.tr-yellow{--tr:var(--amber)}.tr-red{--tr:var(--red)}
.tr-line{display:inline-flex;align-items:flex-start;gap:7px;max-width:100%;padding:4px 9px;border:1px solid color-mix(in srgb,var(--tr) 30%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--tr) 7%,var(--surface));color:var(--muted);font-size:12px;line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere}
.tr-line[aria-expanded=true]{border-radius:10px}
.tr-dot{flex:none;width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--tr)}
.tr-more{margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--tr);border-radius:10px;background:var(--surface);font-size:12px;line-height:1.5;color:var(--text)}
.tr-more[hidden]{display:none}
.tr-more p{margin:0 0 6px}.tr-more ul{margin:0 0 8px;padding-left:18px}.tr-more li{margin:2px 0}
.tr-more small,.tr-rules{color:var(--muted)}.tr-head{font-weight:650}

/* «Подписи CarrotQuest»: подпись без действующей учётной записи. */
.sig-unmatched td{background:color-mix(in srgb,var(--amber) 9%,var(--surface))}.sig-unmatched td small{display:block}
/* Phone: the rows are cards (adm-stack) under the card's heading, with its side padding. */
@media(max-width:760px){.adm-stack.sig-stack tr{padding-left:16px;padding-right:16px}}