/* ---------- «Режимы и эффекты» (web/admin-mode-stats.js): the page and the block of the creator's bot window ---------- */
/* The five groups of the daily chart: the dark categorical slots validated on the graphite panel (#232326): lightness band,
   chroma, adjacent-pair CVD separation (worst ΔE 8.4) and 3:1 contrast all pass. Status colours stay reserved for outcomes;
   every coloured mark sits next to its name (legend, table rows), so a group is never told by colour alone. */
.mst-g-effects { --mst-color: #3987e5; }
.mst-g-edit { --mst-color: #d95926; }
.mst-g-animate_fast { --mst-color: #199e70; }
.mst-g-animate_best { --mst-color: #c98500; }
.mst-g-animate_ultra { --mst-color: #d55181; }

/* One column with the site's section rhythm; blocks never set their own outer margin. */
.mst-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); margin-top: var(--space-section); }
.mst-page > * { min-width: 0; margin: 0; }
.mst-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mst-controls p { margin: 0; }
.mst-controls .segmented, .mst-block .segmented, .mst-section .segmented { flex-wrap: wrap; }
.mst-section { display: grid; gap: 10px; min-width: 0; }
.mst-section > * { margin: 0; }
.mst-section .section-title { flex-wrap: wrap; gap: 10px 16px; margin: 0; }
.mst-section .table-wrap { margin-top: 0; }
.mst-empty { padding: 40px var(--space-card); }
.mst-empty h2 { margin-bottom: 6px; }
.mst-empty p { margin: 0; }
.mst-notes { margin: 0; }

.mst-table td, .mst-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mst-table td:first-child { white-space: normal; min-width: 150px; }
.mst-row .mst-name { white-space: nowrap; }
.mst-name { display: inline; }
.mst-row .mst-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--mst-color); }
.mst-total td { border-top: 1px solid var(--line-2); color: var(--text); font-weight: 600; }

.mst-chart .stats-chart { margin-top: 4px; }
.mst-seg { fill: var(--mst-color); }
.mst-hit { fill: transparent; }
.mst-day:hover .mst-hit { fill: rgb(255 255 255 / .05); }
.mst-chart .chart-dates span:nth-child(2) { text-align: center; }
.mst-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 13px; }
.mst-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mst-legend strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.mst-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--mst-color); }
.mst-link { min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: underline;
  text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.mst-link:hover { color: var(--primary-hover); text-decoration-color: var(--text-2); }

/* The bot window holds the block: a wider dialog on larger screens, the phone sheet as it is. */
dialog:has(.mst-block) { width: min(780px, calc(100vw - 24px)); }
.mst-block { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.mst-block > * { margin: 0; min-width: 0; }
.mst-block .section-title { flex-wrap: wrap; gap: 10px 14px; margin: 0; }
.mst-block h3 { font-size: 16px; }
.mst-block h4 { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.mst-block .table-wrap { margin-top: 0; }
.mst-block .mst-table th, .mst-block .mst-table td { padding: 10px 12px; }
.mst-block .mst-table td:last-child { white-space: normal; }
.mst-block .chart-card { padding: 14px; }
.mst-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mst-facts div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-deep); }
.mst-facts dt { color: var(--muted); font-size: 13px; }
.mst-facts dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mst-more { justify-self: start; }

@media (min-width: 620px) {
  .mst-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
  .mst-empty { padding: 28px var(--space-card-sm); }
}
/* On phones the numbers stay a table that scrolls sideways (the site's card rows would make a ten-column table metres
   long), the name column stays in view. */
@media (max-width: 540px) {
  .table-wrap.mst-table { overflow-x: auto; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  .table-wrap.mst-table table { display: table; }
  .table-wrap.mst-table thead { display: table-header-group; }
  .table-wrap.mst-table tbody { display: table-row-group; }
  .table-wrap.mst-table tr { display: table-row; margin: 0; padding: 0; border: 0; background: none; }
  .table-wrap.mst-table th, .table-wrap.mst-table td { display: table-cell; padding: 10px 12px; font-size: 13px; }
  .table-wrap.mst-table td { border-bottom: 1px solid var(--line); text-align: left; }
  .table-wrap.mst-table tr:last-child td { border-bottom: 0; }
  .table-wrap.mst-table td:last-child { text-align: right; }
  .table-wrap.mst-table td::before { content: none; }
  .table-wrap.mst-table td:first-child, .table-wrap.mst-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 156px; max-width: 176px; white-space: normal; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
  .table-wrap.mst-table th:first-child { background: var(--bg-deep); }
  .table-wrap.mst-table .mst-row .mst-name { white-space: normal; }
}
@media (forced-colors: active) {
  .mst-seg, .mst-swatch { fill: CanvasText; background: CanvasText; }
  .mst-row .mst-name::before { background: CanvasText; }
}