/* Стили витрины. Основа — mockup.html, согласованный с заказчиком.
Добавлено против макета:
.sticky-4 РРЦ тоже закреплена: от неё считается подсветка
каждого дня, и сравнивать не с чем, если она уехала;
.range поля произвольного периода, скрыты пока не нужны;
option[disabled] сценарии, которых нет — видно, что именно нет;
.vspacer распорки виртуализации: строки рисуются окном,
иначе 1817 × 98 ячеек рисуются секундами;
.login форма входа. */
:root{
--indigo:#5B6EE8; --amber:#C8862B; --amber-soft:#C8862B1f;
--clay:#C9453F; --clay-soft:#C9453F1a; --teal:#1E8878; --teal-soft:#1E88781a;
--r:3px;
--mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,monospace;
--sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
--row:29px;
}
[data-theme="dark"]{
--bg:#12171E; --panel:#181F28; --raise:#1F2833; --line:#2B3643;
/* --faint был #5D6D80 — контраст 3.13 к панели при пороге 4.5.
Им покрашено почти всё, что человек ЧИТАЕТ: подпись под медианой
«по 765 из 1025», счётчики в группах, подписи источника под
названием колонки, объяснение под алертом. Новое значение даёт
5.30 к панели, 4.76 к приподнятому фону и 5.75 к фону страницы —
проходит везде и остаётся тише --mute (5.84), то есть ступень
«тише основного» сохранилась. */
--ink:#E6ECF3; --mute:#8B9BAD; --faint:#8493A6;
--indigo:#7C8CF0; --amber:#D9A34A; --amber-soft:#D9A34A26;
--clay:#E0605A; --clay-soft:#E0605A22; --teal:#3FB5A0; --teal-soft:#3FB5A022;
--shadow:0 1px 0 #0b0f14,0 8px 24px -12px #000a;
}
[data-theme="light"]{
--bg:#EEF2F6; --panel:#FFFFFF; --raise:#F5F8FB; --line:#DBE3EC;
/* было #8698AA — 2.96 к белому. Стало 5.18 к панели, 4.86
к приподнятому фону и 4.60 к фону страницы. */
--ink:#141C26; --mute:#5C6E82; --faint:#5C6F83;
--shadow:0 1px 0 #0000000a,0 8px 24px -16px #1a2a3a40;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);
-webkit-font-smoothing:antialiased;transition:background .18s,color .18s}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;
flex-wrap:wrap;padding:11px 20px;background:var(--panel);
border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.brand{display:flex;align-items:baseline;gap:9px}
.brand b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.brand span{font:11px/1 var(--mono);color:var(--faint);letter-spacing:.06em}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{appearance:none;border:0;background:transparent;color:var(--mute);
font:12px/1 var(--sans);padding:7px 11px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink);background:var(--raise)}
.seg button[aria-pressed="true"]{background:var(--indigo);color:#fff}
.field{display:flex;align-items:center;gap:7px;color:var(--mute);font-size:12px}
.field select,.field input{background:var(--raise);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;font:12px var(--sans)}
.field select option[disabled]{color:var(--faint)}
.range{display:flex;align-items:center;gap:6px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--raise);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:12.5px;cursor:pointer}
.btn:hover{border-color:var(--indigo);color:var(--indigo)}
.btn-primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.btn-primary:hover{filter:brightness(1.08);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--line);color:var(--ink)}
.icon{width:15px;height:15px;display:block}
.summary{display:flex;flex-wrap:wrap;padding:13px 20px;background:var(--panel);
border-bottom:1px solid var(--line);margin:0}
.stat{padding:0 22px;border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0}
.stat dt{margin:0 0 3px;font-size:11px;color:var(--mute)}
.stat dd{margin:0;font:600 19px/1.1 var(--mono);letter-spacing:-.02em}
.stat small{font:400 11px var(--sans);color:var(--faint);margin-left:5px}
.stat.warn dd{color:var(--amber)}
.stat.bad dd{color:var(--clay)}
.stat.good dd{color:var(--teal)}
/* Состояние справочников. Полоса поуже и потише сводки: это не
события дня, а фон, который должен быть на виду, но не спорить
за внимание с тем, что горит сегодня. */
.refstate{display:flex;flex-wrap:wrap;gap:0 18px;align-items:baseline;
padding:8px 20px;background:var(--panel);border-bottom:1px solid var(--line);
font-size:12px}
.refstate .title{color:var(--mute);font-size:11px;text-transform:uppercase;
letter-spacing:.06em;margin-right:4px}
.refstate .gap{padding:2px 0;color:var(--ink)}
.refstate .gap b{font:600 13px var(--mono);letter-spacing:-.02em}
.refstate .gap.warn b{color:var(--amber)}
.refstate .gap small{color:var(--faint);margin-left:5px}
/* Нижний отступ держит место под всплывающее сообщение: без него
последняя строка пояснений оказывалась ровно под плашкой. */
.wrap{padding:16px 20px 96px}
.scroller{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--line);
border-radius:5px;background:var(--panel);position:relative}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
thead th{position:sticky;background:var(--raise);z-index:20;border-bottom:1px solid var(--line);
font-weight:550;color:var(--mute);text-align:right;padding:7px 10px;white-space:nowrap}
thead tr:first-child th{top:0;height:32px}
thead tr:last-child th{top:32px;font-size:11px}
th.daygroup{text-align:center;color:var(--ink);font:12px/1 var(--mono);
border-left:1px solid var(--line)}
th.daygroup.today{color:var(--indigo)}
th.daygroup em{display:block;font:400 10px var(--sans);color:var(--faint);
font-style:normal;margin-top:3px}
/* подпись источника под названием колонки: величина сменила
происхождение, и об этом сказано на самом экране */
th em{display:block;font:400 10px var(--sans);color:var(--faint);
font-style:normal;margin-top:3px}
th.plangroup{text-align:center;color:var(--teal);font:12px/1 var(--sans);
border-left:2px solid var(--teal)}
th.sub-first{border-left:1px solid var(--line)}
th.plan-first{border-left:2px solid var(--teal)}
.sticky-1{position:sticky;left:0;z-index:30;background:var(--panel);text-align:left}
.sticky-2{position:sticky;z-index:30;background:var(--panel);text-align:left}
.sticky-3{position:sticky;z-index:30;background:var(--panel);text-align:left}
.sticky-4{position:sticky;z-index:30;background:var(--panel);text-align:right}
thead .sticky-1,thead .sticky-2,thead .sticky-3,thead .sticky-4{z-index:40;background:var(--raise)}
.sticky-4::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}
.scroller.shifted .sticky-4::after{box-shadow:6px 0 10px -6px #0006}
tbody td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;
white-space:nowrap;font:13px/1.3 var(--mono);font-variant-numeric:tabular-nums;
height:var(--row)}
tbody td.text{font-family:var(--sans);text-align:left}
tbody tr:hover td{background:var(--raise)}
tr.season td{background:var(--indigo);color:#fff;padding:7px 10px;font:600 12.5px var(--sans);
border-bottom:1px solid var(--line);cursor:pointer}
tr.season td.sticky-1{background:var(--indigo)}
tr.season span{opacity:.75;font-weight:400;margin-left:10px}
tr.group td{background:var(--raise);font:12.5px var(--sans);color:var(--ink);
padding:7px 10px 7px 24px;cursor:pointer}
tr.group td.sticky-1{background:var(--raise)}
tr.group b{font-weight:600}
tr.group span{color:var(--faint);font-size:11.5px;margin-left:9px}
.caret{display:inline-block;width:14px}
tr.size td{background:color-mix(in srgb,var(--indigo) 5%,transparent)}
tr.size td.text{color:var(--mute);font-size:12.5px}
[data-theme="light"] tr.size td{background:#F7F9FD}
tr.vspacer td{padding:0;border:0;background:transparent}
tr.vspacer:hover td{background:transparent}
.nm{color:var(--indigo);font:12.5px var(--mono)}
.muted{color:var(--faint)}
.rowbtn{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--mute);
font:12px var(--mono);padding:0 6px 0 0}
.rowbtn:hover{color:var(--indigo)}
.mgr{appearance:none;background:var(--raise);color:var(--ink);border:1px solid var(--line);
border-radius:2px;font:12px var(--mono);padding:2px 5px;cursor:pointer;min-width:26px}
.mgr:hover{border-color:var(--indigo)}
.mgr.saving{opacity:.5}
td.below{color:var(--amber);background:var(--amber-soft)!important}
td.above{color:var(--teal);background:var(--teal-soft)!important}
td.loss{color:var(--clay);background:var(--clay-soft)!important;font-weight:600}
/* ВЫПОЛНЕНО. Зелёный ставится по тому же порогу, что и подсветка
невыполнения (planTone), — иначе цвет ячейки и подсветка строки
однажды сказали бы про одну строку разное. Фон мягкий: выполненных
строк много, и сплошная заливка перебила бы отстающие. */
td.good{color:var(--teal);background:var(--teal-soft)!important;font-weight:600}
td.gone{color:var(--clay)}
/* КУДА ПОЕХАЛА ЦЕНА ДЛЯ ПОКУПАТЕЛЯ со вчера. Стрелка, а не заливка:
фон этой ячейки уже занят сравнением с РРЦ, и два смысла одной
заливкой спорили бы. Дешевле — зелёная вниз, дороже — красная вверх;
не менялась — ничего, потому что «не менялась» это не событие. */
/* РАЗМЕРНАЯ СЕТКА «5/7» рядом с остатком. Тише самого остатка: это
подсказка «стоит ли разворачивать», а не величина. Цветом отмечено
только выбитое — сплошная раскраска перебила бы остаток. */
span.sizes{margin-left:6px;font-size:11px;font-variant-numeric:tabular-nums;
color:var(--mute)}
span.sizes.gone{color:var(--clay);font-weight:600}
span.sizes.part{color:var(--amber)}
span.sizes i{font-style:normal;margin-left:2px;color:var(--faint)}
i.trend{font-style:normal;margin-left:5px;font-size:10px;vertical-align:1px}
i.trend.down{color:var(--teal)}
i.trend.up{color:var(--clay)}
/* ЧИСЛА В СТРОКЕ ЧИТАЮТСЯ ВСЕ, включая приглушённые.
Здесь стоял --faint, и он не проходит по контрасту: 3.13 к фону
панели в тёмной теме и 2.96 в светлой при пороге 4.5 для обычного
текста. Колонки «откл.» и «Δ» получают этот класс не только когда
данных нет, но и когда у артикула не сезон, — а в августе не сезон
почти у всех зимних шапок, и вся колонка уходила в нечитаемое.
--mute даёт 5.84 и 5.24: приглушение остаётся заметным, но цифру
можно прочесть, не приглядываясь. Размер и начертание те же, что
у остальных чисел строки: 13px моно, как у соседей. */
td.nodata{color:var(--mute)}
td.plan-first{border-left:2px solid var(--teal)}
.chip{display:inline-block;padding:1px 6px;border-radius:9px;font:10.5px/1.55 var(--sans);border:1px solid}
.chip.out{color:var(--clay);border-color:var(--clay);background:var(--clay-soft)}
.chip.nocost{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.chip.pending{color:var(--faint);border-color:var(--line)}
/* «цифра не полная»: часть остатка отброшена исключённым складом */
.excl{color:var(--clay);font:11px/1.4 var(--sans);white-space:nowrap;cursor:help}
.legend{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:14px;
font-size:12px;color:var(--mute)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.note{margin-top:18px;padding:12px 14px;border-left:2px solid var(--indigo);background:var(--panel);
color:var(--mute);font-size:12.5px;max-width:820px;border-radius:0 var(--r) var(--r) 0}
.note b{color:var(--ink);font-weight:600}
/* Сообщение о прогоне. В УГЛУ, а не по центру: по центру оно ложилось
поверх пояснений под таблицей — при любой высоте окна, — и человек
видел обрывок текста под всплывшей плашкой. Снизу для него оставлено
место отступом .wrap, поэтому в конце прокрутки оно висит над пустым
местом, а не над строкой. */
.toast{position:fixed;right:20px;bottom:20px;transform:translateY(14px);
background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:5px;
padding:10px 16px;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;
transition:opacity .18s,transform .18s;z-index:80;max-width:min(70vw,420px)}
.toast.on{opacity:1;transform:translateY(0)}
.toast.bad{border-color:var(--clay);color:var(--clay)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:6px;
padding:26px 28px;width:340px;box-shadow:var(--shadow)}
.login h1{margin:0 0 4px;font-size:17px;font-weight:650}
.login p{margin:0 0 18px;color:var(--mute);font-size:12.5px}
.login label{display:block;margin-bottom:12px;font-size:12px;color:var(--mute)}
.login input{width:100%;margin-top:5px;background:var(--raise);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font:13px var(--sans)}
.login .err{color:var(--clay);font-size:12.5px;margin:0 0 12px;min-height:17px}
.login button{width:100%}
/* ИДЁТ РАБОТА. Таблица остаётся на месте и приглушается — контекст
терять нельзя: цифры на экране ещё верны, они устарели на один
запрос. Ввод на это время отключается, иначе два нажатия подряд
дают ответы не в том порядке, в каком их просили. */
.busy-bar{position:sticky;top:0;z-index:40;padding:7px 20px;
background:var(--indigo);color:#fff;font-size:12px;font-weight:600;
letter-spacing:.02em;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.busy-bar::after{content:"";display:inline-block;width:7px;height:7px;
margin-left:9px;border-radius:50%;background:currentColor;
animation:busy-pulse 1s ease-in-out infinite}
@keyframes busy-pulse{0%,100%{opacity:.25}50%{opacity:1}}
body.busy #grid{opacity:.45;filter:saturate(.6);pointer-events:none;
transition:opacity .12s ease}
body.busy .top .seg,body.busy .top .field{pointer-events:none;opacity:.65}
/* Кому анимация мешает — её не будет, полоса останется. */
@media (prefers-reduced-motion:reduce){
.busy-bar::after{animation:none;opacity:.8}
body.busy #grid{transition:none}
}
@media (max-width:720px){.stat{padding:0 12px}.wrap{padding:12px}
.sticky-2,.sticky-3,.sticky-4{position:static}}
/* ── экран «Склады» ──────────────────────────────────────────────
Отдельный экран, а не вкладка внутри таблицы цен: здесь другое
действие — не смотреть, а решать, что учитывать. */
.controls{display:contents}
.panel-head{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.panel-head h2{margin:0;font-size:15px;font-weight:650}
h2.mt{margin:34px 0 12px;font-size:15px;font-weight:650}
table.plain{border-collapse:collapse;font:12.5px/1.5 var(--sans);
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
min-width:640px}
table.plain th{background:var(--raise);color:var(--mute);font-weight:500;
text-align:right;padding:8px 12px;border-bottom:1px solid var(--line);
white-space:nowrap}
table.plain td{padding:7px 12px;text-align:right;border-bottom:1px solid var(--line);
font-variant-numeric:tabular-nums}
table.plain th.text,table.plain td.text{text-align:left}
table.plain tr:last-child td{border-bottom:none}
/* исключённый склад приглушён, но НЕ спрятан: он остаётся частью
картины, просто не входит в учёт */
table.plain tr.off td{color:var(--faint)}
table.plain tr.off td:first-child{color:var(--clay)}
.why{display:block;color:var(--faint);font-size:11px;margin-top:2px}
.check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
color:var(--mute);font-size:12px}
.check input{accent-color:var(--indigo);width:14px;height:14px;cursor:pointer}
.check input[disabled]{cursor:not-allowed;opacity:.5}
/* БЫСТРЫЙ ФИЛЬТР над таблицей. Стоит между сводкой и таблицей
намеренно: цифры в плитках и цифры у галочек — одни и те же, и
видеть их надо рядом. */
.quickfilter{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
padding:0 20px 10px}
.quickfilter .check{color:var(--ink);font-size:12.5px}
.quickfilter .check span{color:var(--mute);font-variant-numeric:tabular-nums}
.quickfilter-note{color:var(--mute);font-size:12px}
/* ── окна подтверждения ─────────────────────────────────────────
Исключение убирает товар из учёта. Решение с последствиями
принимается в окне, а не промахом мыши по галочке. */
.dlg{background:var(--panel);color:var(--ink);border:1px solid var(--line);
border-radius:6px;padding:22px 24px;width:min(560px,92vw);
box-shadow:var(--shadow);font:13px/1.55 var(--sans)}
.dlg::backdrop{background:#000a}
.dlg h3{margin:0 0 16px;font-size:15px;font-weight:650}
.dlg p{margin:0 0 12px;font-size:12.5px}
.dlg .field{margin-bottom:12px}
.dlg .field.wide{display:block}
.dlg .field.wide span{display:block;margin-bottom:5px}
.dlg .field.wide input{width:100%}
.dlg .field.range{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dlg-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dlg .bad{color:var(--clay)}
/* последствия: то, ради чего окно и показывается */
.impact{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px;margin:4px 0 12px}
.impact dt{color:var(--mute);font-size:11.5px;margin-bottom:3px}
.impact dd{margin:0;font:600 17px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.impact dd.warn{color:var(--amber)}
table.mini{border-collapse:collapse;width:100%;font:12px/1.45 var(--sans);
margin:6px 0 12px}
table.mini th{color:var(--mute);font-weight:500;text-align:right;
padding:4px 8px;border-bottom:1px solid var(--line)}
table.mini td{padding:4px 8px;text-align:right;
font-variant-numeric:tabular-nums;color:var(--mute)}
table.mini th:nth-child(-n+3),table.mini td:nth-child(-n+3){text-align:left}
/* ── экран «Коэффициент» ─────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:18px 20px;margin:16px 0;max-width:760px}
.panel h3{margin:0 0 14px;font-size:14px;font-weight:650}
.rate-inputs{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.rate-inputs .field{flex-direction:column;align-items:flex-start;gap:5px}
.rate-inputs input{width:150px;font:14px var(--mono)}
.panel .field.wide{display:block;margin-bottom:6px}
.panel .field.wide span{display:block;margin-bottom:5px}
.panel .field.wide input{width:100%}
.panel .dlg-buttons{justify-content:flex-start;margin-top:14px}
#rate-current{max-width:760px}
#rate-current .impact{margin-top:0}
#rate-current p{font-size:12.5px;color:var(--mute);margin:10px 0 0}
.impact dd.small{font:600 13px/1.3 var(--sans)}
/* РРЦ правится в строке, как менеджер: та же кнопка-ячейка. Точка
после числа — знак того, что значение задано вручную. */
.rrc{appearance:none;background:transparent;color:var(--ink);border:1px solid transparent;
border-radius:2px;font:13px/1.3 var(--mono);font-variant-numeric:tabular-nums;
padding:1px 4px;cursor:pointer;text-align:right;width:100%}
.rrc:hover{border-color:var(--indigo);color:var(--indigo)}
.rrc.saving{opacity:.5}
body.readonly .rrc{cursor:default}
body.readonly .rrc:hover{border-color:transparent;color:var(--ink)}
/* Поле ввода НА МЕСТЕ ячейки. Размер и шрифт те же, что у значения:
строка не должна дёргаться от того, что её начали править. */
.cell-input{width:100%;box-sizing:border-box;background:var(--raise);color:var(--ink);
border:1px solid var(--indigo);border-radius:2px;padding:1px 4px;
font:13px/1.3 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.cell-input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--indigo) 35%,transparent)}
td.text .cell-input{text-align:left;font-family:var(--sans)}
/* Итог по всем исключённым складам — строкой над таблицей, всегда
на виду: цена решения не должна прятаться внутри окна. */
.totals{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
background:var(--clay-soft);border:1px solid var(--clay);
border-radius:var(--r);padding:10px 14px;margin:0 0 14px;
font:12.5px/1.5 var(--sans);max-width:1100px}
.totals b{color:var(--clay);font-weight:650}
.totals span{color:var(--ink)}
.totals span.muted{color:var(--mute);font-size:11.5px}
/* Экран алертов. Группы по типу, внутри — короткий список; хвост
прячется за одну строку и разворачивается кликом. */
.algroup{margin:0 0 22px}
.algroup h3{margin:0 0 8px;font-size:13px;font-weight:650}
.algroup h3 .muted{font-weight:400;font-size:12px;margin-left:6px}
table.plain tr.more td{background:var(--raise)}
.linky{background:none;border:0;padding:0;font:inherit;color:var(--teal);
cursor:pointer}
.linky:hover{text-decoration:underline}
/* Предупреждение о сдвиге СПП по кабинету. Заметное, но не аварийное:
это новость от Wildberries, а не сбой сбора. */
.sppshift{padding:10px 20px;background:var(--amber-soft);
border-bottom:1px solid var(--amber);font-size:12.5px;line-height:1.5}
.sppshift b{font-weight:650}
.sppshift .what{display:block;color:var(--mute);font-size:11px;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
/* Период не кончился. Спокойнее, чем предупреждение о СПП: это не
новость и не сбой, а состояние календаря — но видеть его надо
раньше, чем цифру выполнения. */
.period-note{padding:8px 20px;background:var(--raise);
border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;
color:var(--mute)}
.period-note b{font-weight:650;color:var(--ink)}
.period-note span + span{margin-left:14px}
.period-note .what{color:var(--mute);font-size:11px;
text-transform:uppercase;letter-spacing:.06em;margin-left:0}