/* Журнал в кабинете — стили прототипа. Токены — /assets/tokens.css, копии здесь нет. */

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Literata,Georgia,serif; font-weight:600; margin:0; text-wrap:balance}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-radius:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

.wrap{max-width:1180px; margin:0 auto; padding-inline:18px; padding-block:0 80px}
header.top{border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20}
.top-in{max-width:1180px; margin:0 auto; padding-inline:18px; padding-block:16px 0}
.brandline{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brandline h1{font-size:22px; letter-spacing:-.01em}
.brand{margin:0; line-height:0}
/* 25.09.2026: логотип в шапке ведёт на главную сайта, как привыкли на любом сайте */
.brand-home{display:inline-block; border-radius:6px}
.brand-home:focus-visible{outline:2px solid var(--wine); outline-offset:4px}
.mlw-logo{height:40px; width:auto; display:block}
@media (max-width:560px){ .mlw-logo{height:32px} }
.brandline .farmname{font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.brandline .farmname:empty{display:none}
.brandline .sub{color:var(--ink-3); font-size:12.5px}
.topacts{margin-left:auto; display:flex; gap:6px; align-items:center}
.btn{
  border:1px solid var(--line-2); border-radius:6px; padding:6px 12px; font-size:13.5px;
  color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); color:var(--ink)}
.btn svg{width:14px; height:14px; flex:none}
.btn.primary{background:var(--wine); border-color:var(--wine); color:var(--on-wine)}
.btn.primary:hover{filter:brightness(1.08); background:var(--wine); color:var(--on-wine)}
.btn.icon{padding:6px 8px}

nav.tabs{display:flex; gap:2px; margin-top:14px; overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 14px 11px; border-bottom:2px solid transparent; color:var(--ink-3);
  font-size:14px; font-weight:500; white-space:nowrap}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--wine)}
/* разделы, которых ещё нет (22.09.2026): светлее остальных, чтобы видно было, что будут */
.tab.soon{color:var(--line-2); font-weight:400; cursor:default}
.tab.soon:hover{color:var(--ink-3)}

.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px 4px 7px; border-radius:4px;
  font-size:12.5px; font-weight:500; white-space:nowrap; border:1px solid transparent}
.chip svg{width:14px; height:14px; flex:none}
.ev svg{width:12px; height:12px; flex:none}
.nextline svg{width:14px; height:14px; flex:none}
.chip.g-vine{background:var(--vine-s); color:var(--vine)}
.chip.g-must{background:var(--must-s); color:var(--must)}
.chip.g-plum{background:var(--plum-s); color:var(--plum)}
.chip.g-oak{background:var(--oak-s); color:var(--oak)}
.chip.g-slate{background:var(--slate-s); color:var(--slate)}
.chip.g-wine{background:var(--wine-s); color:var(--wine)}
.chip.g-clay{background:var(--clay-s); color:var(--clay)}
.chip.g-fizz{background:var(--fizz-s); color:var(--fizz)}
.chip.g-other{background:var(--surface-2); color:var(--ink-2); border-color:var(--line-2)}
.chip.ghost{background:none; border-color:var(--line-2); color:var(--ink-2)}
button.chip{cursor:pointer}
button.chip:hover{box-shadow:inset 0 0 0 1px currentColor}
.vessel-tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-2);
  font-family:"IBM Plex Mono",monospace}
.vessel-tag svg{width:13px; height:13px; opacity:.8; flex:none}

.empty-state{
  margin-top:40px; border:1px dashed var(--line-2); border-radius:10px; padding:38px 24px;
  text-align:center; max-width:560px; margin-inline:auto;
}
.empty-state h2{font-size:20px; margin-bottom:8px}
.empty-state p{color:var(--ink-2); font-size:14px; margin:0 auto 20px; max-width:44ch}
.empty-state .row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}

/* лента */
.split{display:grid; grid-template-columns:232px 1fr; gap:28px; align-items:start; margin-top:22px}
.split > *{min-width:0}
.split > * > *{min-width:0}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:18px} }
.rail h3{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  font-family:"Golos Text",sans-serif; font-weight:500; margin-bottom:10px}
.rail-list{display:flex; flex-direction:column; gap:3px}
.rail-item{display:grid; grid-template-columns:3px 1fr; gap:10px; text-align:left; padding:8px 9px;
  border-radius:5px; width:100%}
.rail-item:hover{background:var(--surface-2)}
.rail-item[aria-pressed="true"]{background:var(--surface); box-shadow:var(--shadow)}
.rail-item .bar{border-radius:2px; background:var(--c)}
.rail-item .nm{display:block; font-weight:500; font-size:13.5px; line-height:1.25}
.rail-item .st{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.rail-add{margin-top:10px; width:100%; justify-content:center}

.quickbar{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:13px 14px; margin-bottom:22px}
.quickbar .lbl{font-size:12px; color:var(--ink-3); margin-bottom:9px}
.quickbar .row{display:flex; flex-wrap:wrap; gap:6px}

.ahead{margin-bottom:24px}
.ahead .lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.ahead .row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.acard{flex:none; min-width:186px; border:1px dashed var(--line-2); border-radius:6px; padding:9px 11px 10px;
  display:flex; flex-direction:column; gap:6px; text-align:left; align-items:flex-start}
.acard:hover{border-color:var(--ink-3)}
.acard .ad{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3)}
.acard .ab{font-size:12.5px; color:var(--ink-2)}

.daygroup{margin-bottom:28px}
.dayhead{display:flex; align-items:baseline; gap:12px; margin-bottom:12px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.dayhead .dn{font-family:Literata,serif; font-size:17px; font-weight:600}
.dayhead .dw{font-size:12px; color:var(--ink-3)}
.dayhead .today{margin-left:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wine); border:1px solid var(--wine); border-radius:3px; padding:1px 6px}
.entry{display:grid; grid-template-columns:58px 1fr; gap:14px; padding:11px 12px; border-radius:6px;
  background:var(--surface); border:1px solid var(--line); text-align:left; width:100%}
.entry + .entry{margin-top:6px}
.entry:hover{box-shadow:var(--shadow)}
.entry.planned{background:none; border-style:dashed}
.entry .when{font-size:12px; color:var(--ink-3); padding-top:3px; font-family:"IBM Plex Mono",monospace}
.entry .head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.entry .batch{font-weight:600; font-size:13.5px}
.entry .note{color:var(--ink-2); font-size:13.5px; margin-top:6px; max-width:62ch; white-space:pre-wrap}
.metrics{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:8px}
.metrics div{font-size:12px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.metrics b{color:var(--ink); font-weight:500}
.done-mark{margin-left:auto; color:var(--vine); display:flex; align-items:center}
.done-mark svg{width:15px; height:15px}
.done-mark.late{color:var(--clay)}

/* календарь */
.cal-layout{display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; margin-top:22px}
.cal-layout > *{min-width:0}
@media (max-width:920px){ .cal-layout{grid-template-columns:1fr} }
.cal-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.cal-head h3{font-size:19px}
.cal-nav{display:flex; gap:4px; margin-left:auto}
.cal{display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid var(--line);
  border-top:1px solid var(--line); background:var(--surface); border-radius:6px; overflow:hidden}
.cal .dow{padding:7px 8px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2)}
.cal .cell{min-height:104px; padding:6px 7px 8px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; overflow:hidden; min-width:0}
.cal .cell.out{background:var(--surface-2); color:var(--ink-3)}
.cal .cell.today{box-shadow:inset 0 0 0 2px var(--wine)}
.cal .dnum{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin-bottom:2px}
.cal .cell.today .dnum{color:var(--wine); font-weight:500}
.ev{display:flex; align-items:center; gap:5px; font-size:11.5px; line-height:1.25; padding:3px 5px;
  border-radius:3px; text-align:left; width:100%; border-left:2px solid currentColor}
.ev span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev.g-vine{background:var(--vine-s); color:var(--vine)}
.ev.g-must{background:var(--must-s); color:var(--must)}
.ev.g-plum{background:var(--plum-s); color:var(--plum)}
.ev.g-oak{background:var(--oak-s); color:var(--oak)}
.ev.g-slate{background:var(--slate-s); color:var(--slate)}
.ev.g-wine{background:var(--wine-s); color:var(--wine)}
.ev.g-clay{background:var(--clay-s); color:var(--clay)}
.ev.g-fizz{background:var(--fizz-s); color:var(--fizz)}
.ev.g-other{background:var(--surface-2); color:var(--ink-2)}
.ev.is-planned{background:none; border:1px dashed var(--line-2); border-left:2px solid currentColor}
@media (max-width:700px){ .cal .cell{min-height:64px} .ev span{display:none} .ev{justify-content:center; padding:3px} }
.tasks{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:15px}
.tasks h3{font-size:15px; margin-bottom:3px}
.tasks .sub{font-size:12px; color:var(--ink-3); margin-bottom:14px}
.tgroup + .tgroup{margin-top:16px}
.tgroup .glbl{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.tgroup.late .glbl{color:var(--clay)}
.task{display:grid; grid-template-columns:18px 1fr; gap:9px; padding:6px 0; text-align:left; width:100%; align-items:start}
.task + .task{border-top:1px solid var(--line)}
.box{width:16px; height:16px; margin-top:2px; border:1.5px solid var(--line-2); border-radius:4px;
  display:flex; align-items:center; justify-content:center; color:transparent}
.box svg{width:11px; height:11px}
.task:hover .box{border-color:var(--vine); color:var(--vine)}
.tt{display:block; font-size:13.5px; line-height:1.35}
.tm{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; font-family:"IBM Plex Mono",monospace}
.legend{margin-top:18px; display:flex; flex-wrap:wrap; gap:6px}

/* погреб */
.cellar{display:grid; grid-template-columns:repeat(auto-fill,minmax(296px,1fr)); gap:14px; margin-top:22px}
.vcard{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:15px 16px 16px;
  text-align:left; display:flex; flex-direction:column; gap:12px; width:100%}
.vcard.free{background:none; border-style:dashed}
.vcard:hover{box-shadow:var(--shadow)}
.vcard .vh{display:flex; align-items:flex-start; gap:10px}
.vcard .vh > span:nth-child(2){min-width:0; flex:1}
.vcard .vicon{color:var(--ink-3); margin-top:1px}
.vcard .vicon svg{width:20px; height:20px}
.vcard .vn{display:block; font-family:Literata,serif; font-size:16px; font-weight:600; line-height:1.2}
.vcard .vspec{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; font-family:"IBM Plex Mono",monospace}
.vcard .vol{margin-left:auto; text-align:right; font-family:"IBM Plex Mono",monospace}
.vcard .vol b{display:block; font-size:17px; font-weight:500}
.vcard .vol span{display:block; font-size:10.5px; color:var(--ink-3)}
.fill{height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.fill i{display:block; height:100%; background:var(--c); border-radius:3px}
.batchline{font-size:14px; font-weight:600}
.stepper{display:flex; gap:3px}
.stepper div{flex:1; height:3px; border-radius:2px; background:var(--surface-3)}
.stepper div.on{background:var(--c)}
.steplbl{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:5px; gap:8px}
.vmetrics{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:10px 0}
.vmetrics div span{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.vmetrics div b{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500}
.nextline{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)}
.nextline .dt{font-family:"IBM Plex Mono",monospace; color:var(--ink-3); margin-left:auto}
.nextline.late{color:var(--clay)}
.lastline{font-size:12px; color:var(--ink-3)}

/* справочники */
.admin{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.admin > *{min-width:0}
@media (max-width:820px){ .admin{grid-template-columns:1fr} }
.panel h3{font-size:16px; margin-bottom:4px}
.panel .psub{font-size:12.5px; color:var(--ink-3); margin-bottom:12px}
.plist{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.prow{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:6px}
.prow .pn{font-weight:500; font-size:14px}
.prow .pd{font-size:12px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.prow .acts{margin-left:auto; display:flex; gap:4px}
.prow .acts button{color:var(--ink-3); padding:4px 8px; border-radius:4px; font-size:12.5px}
.prow .acts button:hover{background:var(--surface-2); color:var(--ink)}
.danger{color:var(--clay)!important}

/* формы и модалка */
.backdrop{position:fixed; inset:0; background:rgba(20,12,18,.45); z-index:50; display:flex;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:24px 16px 60px}
.modal{background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg);
  width:100%; max-width:560px; padding:20px 22px 22px; margin-top:24px}
.modal h2{font-size:19px; margin-bottom:2px}
.modal .msub{font-size:12.5px; color:var(--ink-3); margin-bottom:16px}
.mhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px}
.mhead .x{margin-left:auto; color:var(--ink-3); font-size:20px; line-height:1; padding:2px 6px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px}
.fgrid .full{grid-column:1 / -1}
@media (max-width:560px){ .fgrid{grid-template-columns:1fr} }
.f label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.fgrid > *{min-width:0}   /* иначе ячейка сетки растёт по ширине своего поля (дата на iOS) */
/* 16px, а не 14 (22.09.2026, скрин с айфона): iOS зумит страницу при фокусе на поле
   мельче 16px и не отзумливает после закрытия окна — «страница немного приближена» */
.f input, .f select, .f textarea{
  width:100%; max-width:100%; min-width:0; background:var(--surface); border:1px solid var(--line-2); border-radius:6px;
  padding:8px 10px; font-size:16px;
}
/* дата и время на iOS: своё оформление с внутренней мин. шириной и текстом по центру —
   поле вылезало за правый край. Снимаем оформление, высоту держим как у соседей */
.f input[type=date], .f input[type=time]{-webkit-appearance:none; appearance:none; display:block;
  min-height:40px; text-align:left; line-height:1.4}
.f input::-webkit-date-and-time-value{text-align:left; margin:0}
.f input:focus, .f select:focus, .f textarea:focus{border-color:var(--wine); outline:none}
.f textarea{min-height:64px; resize:vertical; font-family:inherit}
.f .unit{font-family:"IBM Plex Mono",monospace; color:var(--ink-3); font-size:11px; margin-left:4px; text-transform:none; letter-spacing:0}
.opgrid{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
/* «все операции» по этапам: ряд на этап, между рядами — просвет */
.opstages{margin-bottom:6px}
.opstages .opgrid{margin-bottom:12px}
.opstages .opgrid:last-child{margin-bottom:0}
.secline{display:flex; align-items:center; gap:10px; margin:18px 0 12px}
.secline span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.secline i{flex:1; height:1px; background:var(--line)}
.mfoot{display:flex; gap:8px; margin-top:20px; align-items:center}
.mfoot .spacer{flex:1}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:var(--bg);
  padding:9px 16px; border-radius:6px; font-size:13.5px; z-index:80; box-shadow:var(--shadow-lg)}
.fab{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:30;
  background:var(--wine); color:var(--on-wine); border-radius:30px; padding:13px 20px; font-size:15px; font-weight:500;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px}
.fab svg{width:16px; height:16px}
@media (prefers-reduced-motion:no-preference){ .fab{transition:transform .15s} .fab:hover{transform:translateY(-2px)} }
.footnote{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); max-width:70ch}
/* купаж и объёмы (21.09.2026) */
.srow{display:grid; grid-template-columns:minmax(0,1fr) 88px auto auto; gap:8px; align-items:center; margin-bottom:8px}
.srow .u{font-size:13px; color:var(--ink-2)}
.srow .x{border:0; background:none; font-size:20px; color:var(--ink-3); cursor:pointer; padding:4px 8px}
.ro{font-size:14px; color:var(--ink); background:var(--surface-2); border-radius:var(--radius); padding:10px 12px; line-height:1.5}
.ro small{color:var(--ink-2)}
/* переопределяем подпись поля (.f label — капсом и мелко): у переключателя это текст выбора */
.f label.radio{display:flex; flex-direction:row; justify-content:flex-start; gap:8px; align-items:center;
  text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px}
.f label.radio input{width:auto; margin:0; accent-color:var(--wine)}
.srow select, .srow input{font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--surface); color:var(--ink); min-width:0; width:100%}
.batchline .lit{font-weight:500; color:var(--ink-2)}

/* состояние сохранения в шапке */
#syncState{font-size:12px; color:var(--ink-2); white-space:nowrap}
#syncState[data-st="offline"], #syncState[data-st="error"]{color:var(--clay); font-weight:600}
#syncState[data-st="locked"]{color:var(--clay); font-weight:600}
/* отбитое сервером, конфликт с другим устройством, сервер не принимает, ждём базу (22.09.2026) */
#syncState[data-st="bad"], #syncState[data-st="conflict"], #syncState[data-st="broken"]{color:var(--clay); font-weight:600}
#syncState[data-st="dbdown"]{color:var(--must); font-weight:600}
#syncState[data-issues="1"]{cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px}
/* показатель вне разумного: предупреждение в окне записи, сохранить всё равно можно */
.warnbox{margin-top:14px; padding:10px 12px; border-radius:var(--radius); background:var(--clay-s); color:var(--ink);
  font-size:13.5px; line-height:1.5; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.warnbox b{color:var(--clay)}
.issues .prow .pd{white-space:normal}

/* подписка (этап H) */
.rotag{display:inline-block; font-size:11px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px; vertical-align:1px}
.lockbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;
  padding:12px 14px; margin:0 0 14px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--surface-2); font-size:13.5px; color:var(--ink-2)}
.lockbar span{flex:1 1 240px}
.paybox .payopts{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.paybox .check{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); margin-bottom:8px; cursor:pointer}
.paybox .check input{margin-top:3px; flex:none}
.panel .pline{font-size:14px; margin:0 0 10px}
.paybox a, .lockbar a{color:var(--wine)}
/* логотипы способов оплаты (22.09.2026): монохром в цвет подписей — цветные
   сливались с тёмной темой. Белые SVG из пакета PayKeeper работают как маска */
.paylogos{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.paylogos i{display:block; background:var(--ink-2); -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat}
.paylogos .pl-mir{--m:url(/assets/pay/mir.svg); width:48px; height:14px}
.paylogos .pl-visa{--m:url(/assets/pay/visa.svg); width:43px; height:14px}
.paylogos .pl-mc{--m:url(/assets/pay/mastercard.svg); width:36px; height:22px}
.paylogos .pl-sbp{--m:url(/assets/pay/sbp.svg); width:40px; height:22px}
.paybox .paylogos{margin-top:12px}

/* лента порциями */
.feedmore{display:flex; justify-content:center; padding:18px 0 8px}
.feedend{text-align:center; font-size:13px; color:var(--ink-3); padding:18px 0}
.loadnote{font-size:12px; font-weight:500; color:var(--ink-3)}

/* описание операции в окне записи */
.ophelp{margin:-4px 0 14px; font-size:13px; color:var(--ink-2)}
.ophelp summary{cursor:pointer; color:var(--wine); font-weight:500; width:max-content}
.ophelp p{margin:8px 0 0; line-height:1.55}

/* промокод в «Аккаунте» */
.promo{margin-top:16px}
.promo label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.promo-row{display:flex; gap:8px}
.promo-row input{flex:1; min-width:0; background:var(--surface); border:1px solid var(--line-2); border-radius:6px;
  padding:8px 10px; font-size:16px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase}   /* 16 — иначе iOS зумит */
.promo-row input:focus{border-color:var(--wine); outline:none}

/* подсказка «на экран Домой» */
.hshint{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line-2);
  border-left:3px solid var(--wine); border-radius:8px; padding:12px 14px; margin-bottom:16px}
.hshint > div:first-child{flex:1 1 240px}
.hshint b{font-size:14px}
.hshint p{margin:4px 0 0; font-size:13px; color:var(--ink-2); line-height:1.5}
.hsacts{display:flex; gap:8px; align-items:center}

/* ───────── справочник (22.09.2026, web/app/ref.mjs) ───────── */
.ref{padding-top:20px}
.ref-h1{font-size:26px; line-height:1.2; margin:4px 0 6px}
.ref-lead{color:var(--ink-2); margin:0; max-width:62ch}
.ref-lead a, .ref a{color:var(--wine); text-underline-offset:2px}
.ref-crumbs{display:flex; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--ink-3)}
.ref-crumbs a{color:var(--ink-2); text-decoration:none}
.ref-crumbs a:hover{color:var(--wine)}
.ref-search{position:relative; margin-top:16px; max-width:560px}
.ref-search input{width:100%; height:44px; padding:0 14px; border:1px solid var(--line-2); border-radius:6px;
  background:var(--surface); font-size:16px}
.ref-hits{margin-top:6px; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow:hidden}
.ref-hits a{display:block; padding:9px 14px; color:var(--ink); text-decoration:none; border-top:1px solid var(--line)}
.ref-hits a:first-child{border-top:0}
.ref-hits a:hover{background:var(--surface-2)}
.ref-hits small{color:var(--ink-3)}
/* Замеры: у карточки показателя единицы измерения — по ним его и узнают. */
.teh-card b{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.teh-card b i{font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  font-weight:400; text-align:right}
.zam-unit{display:inline-block; margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--ink-3)}
/* Добавки: особые вещества отделены и помечены «проф.» — чтобы медь или ферроцианид
   не приняли за домашний препарат (28.09.2026). */
.dob-prof h3{color:var(--clay)}
.dob-prof-note{margin-top:8px; font-size:13px; color:var(--ink-2); max-width:65ch}
.teh-card.dob-card-prof{border-style:dashed}
.teh-card b .dob-prof-tag, .dob-prof-tag{font-style:normal; font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--clay); letter-spacing:.03em}
.dob-prof-warn{margin:0 0 14px}
.dob-doza{font-family:var(--font-mono); font-size:11px; color:var(--ink-3)}
/* Пороки (28.09.2026): определитель — первым блоком, его таблицы шире текста статьи */
.por-opr{margin-top:22px; max-width:none}
.por-opr .por-h{margin-top:0}
.por-gr{font-size:11px; color:var(--ink-3); letter-spacing:.03em}
.por-priz{font-size:14px; color:var(--ink-2)}
.ref-none{color:var(--ink-3); padding:14px 2px}

.ref-hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:22px}
.ref-sec{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow)}
.ref-sec:hover{border-color:var(--wine)}
.ref-sec h3{font-size:17px}
.ref-sec p{margin:0; color:var(--ink-2); font-size:13.5px}
.ref-count{margin-top:auto; padding-top:6px; font-size:12.5px; color:var(--ink-3)}
/* разделы, которых ещё нет: полупрозрачные и не нажимаются */
.ref-sec.off{opacity:.45; box-shadow:none; background:transparent; cursor:default; pointer-events:none; user-select:none}

.ref-letters{display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 4px}
.ref-letters button{min-width:34px; height:34px; border:1px solid var(--line-2); background:var(--surface); border-radius:4px;
  font-weight:600; font-size:13px; color:var(--ink-2)}
.ref-letters button.on{background:var(--wine); border-color:var(--wine); color:var(--on-wine)}
.ref-letters button:disabled{opacity:.35; cursor:default}
.ref-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}
.ref-seg{display:inline-flex; border:1px solid var(--line-2); border-radius:6px; overflow:hidden}
.ref-seg button{padding:6px 12px; font-size:13px; color:var(--ink-2); background:var(--surface); min-height:34px}
.ref-seg button + button{border-left:1px solid var(--line-2)}
.ref-seg button.on{background:var(--ink); color:var(--bg)}
.ref-pick{flex:1; text-align:right; font-size:13px; color:var(--ink-3)}
.ref-bar .btn:disabled{opacity:.45; cursor:default}

.ref-list{margin-top:12px; border-top:1px solid var(--line)}
.ref-row{display:grid; grid-template-columns:24px minmax(0,1.2fr) minmax(0,1fr); gap:12px; align-items:center;
  padding:10px 4px; border-bottom:1px solid var(--line)}
.ref-row:hover{background:var(--surface)}
.ref-cb{width:18px; height:18px; accent-color:var(--wine); margin:0}
.ref-nm a{font-weight:600; font-size:15.5px; color:var(--ink); text-decoration:none}
.ref-nm a:hover{color:var(--wine)}
.ref-nm .mono{font-size:12px; color:var(--ink-3)}
.ref-syn{font-size:12.5px; color:var(--ink-2); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
@media (max-width:640px){ .ref-row{grid-template-columns:24px minmax(0,1fr)} .ref-syn{display:none} .ref-pick{flex-basis:100%; text-align:left; order:3} }

.ref-ripe{margin-top:24px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:10px}
.ref-ripe h3{font-size:16px}
.ref-ripe p{margin:2px 0 10px; font-size:12.5px; color:var(--ink-3)}
.ref-chart{overflow-x:auto}
.ref-chart svg{display:block; width:100%; min-width:560px; height:auto}
.ref-chart .g{stroke:var(--line); stroke-width:1}
.ref-chart .g.d{stroke-dasharray:2 3}
.ref-chart .z{stroke:var(--ink-3); stroke-width:1}
.ref-chart text{font-family:"Golos Text",Arial,sans-serif; font-size:12px; fill:var(--ink-2)}
.ref-chart .ax{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; fill:var(--ink-3)}
.ref-chart .ep{font-size:11px; letter-spacing:.05em; fill:var(--ink-3)}
.ref-chart .nm{fill:var(--ink)}
.ref-chart a:hover .nm{fill:var(--wine)}
.ref-chart rect, .ref-chart circle{fill:var(--wine)}

.ref-art{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:36px; margin-top:6px}
.ref-prose{max-width:70ch}
.ref-prose p{margin:12px 0}
.ref-prose ul, .ref-prose ol{padding-left:20px}
.ref-prose ol{margin:10px 0}
.ref-prose li{margin:6px 0}
.ref-prose h3{font-size:19px; margin:28px 0 8px; padding-top:16px; border-top:1px solid var(--line); scroll-margin-top:140px}
.ref-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--ink-2)}
.ref-meta .mono{font-size:12.5px}
.ref-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:12px}
.ref-chips span{font-size:12.5px; background:var(--surface-2); color:var(--ink-2); padding:2px 8px; border-radius:4px}
.ref-tw{overflow-x:auto; margin:12px 0; border:1px solid var(--line); border-radius:6px; background:var(--surface)}
.ref-tw table{border-collapse:collapse; font-size:13px; min-width:100%}
.ref-tw th, .ref-tw td{padding:7px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.ref-tw th{background:var(--surface-2); font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.ref-tw td{font-variant-numeric:tabular-nums}
.ref-tw tr:last-child td{border-bottom:0}
.ref-toc{position:sticky; top:150px; align-self:start; display:flex; flex-direction:column; gap:12px; font-size:13.5px}
.ref-box{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:12px}
.ref-box label{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:6px}
.ref-box select{width:100%; height:38px; border:1px solid var(--line-2); border-radius:6px; background:var(--bg); font-size:16px; padding:0 8px}
.ref-tocl a{display:block; padding:3px 0; color:var(--ink-2); text-decoration:none}
.ref-tocl a:hover{color:var(--wine)}
.ref-toc .btn{align-self:flex-start; text-decoration:none}
.ref-np{display:flex; justify-content:space-between; gap:10px; margin-top:32px; padding-top:14px; border-top:1px solid var(--line)}
@media (max-width:820px){ .ref-art{grid-template-columns:minmax(0,1fr)} .ref-toc{position:static; order:-1} .ref-tocl{display:none} }

.ref-cmp{overflow-x:auto; margin-top:16px}
.ref-cmp table{border-collapse:collapse; width:100%; min-width:640px; table-layout:fixed}
.ref-cmp > table > * > tr > th, .ref-cmp > table > * > tr > td{border-bottom:1px solid var(--line); padding:12px; vertical-align:top; text-align:left; font-size:13.5px}
.ref-cmp th[scope=row]{width:140px; color:var(--ink-3); font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600}
.ref-cmp thead th{font-family:Literata,Georgia,serif; font-size:19px; font-weight:600}
.ref-cmp thead th a{color:var(--ink); text-decoration:none}
.ref-cmp thead th small{display:block; font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:2px}
.ref-cmp td p{margin:0 0 6px}
.ref-cmp .ref-tw table{font-size:12px}
.ref-cmp .ref-tw th, .ref-cmp .ref-tw td{padding:5px 7px}

/* ── калькуляторы справочника ── */
.calc-form{margin-top:22px; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden}
.calc-row{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:10px 16px; align-items:start;
  padding:12px 14px; border-bottom:1px solid var(--line)}
.calc-row:last-child{border-bottom:0}
.calc-row[hidden]{display:none}
.calc-lab{font-size:13.5px; color:var(--ink-2); padding-top:8px}
.calc-num{display:inline-flex; align-items:center; gap:7px}
.calc-pair{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.calc-num input{width:8ch; padding:7px 9px; min-height:34px; font-family:var(--font-mono); font-size:15px;
  color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:6px}
.calc-num input:focus-visible{outline:2px solid var(--wine); outline-offset:1px}
.calc-num span{font-size:13px; color:var(--ink-2)}
.calc-hint{display:block; margin-top:5px; font-size:12px; color:var(--ink-3); max-width:52ch}
/* сегмент — по содержимому, иначе grid растягивает его на всю колонку (23.09.2026) */
.calc-row > .ref-seg{justify-self:start}
.calc-warn{max-width:560px; margin:18px 0 0; padding:10px 12px; border-radius:8px;
  background:var(--wine-s); color:var(--ink); font-size:13.5px}
.calc-warn[hidden]{display:none}
/* главный ответ: ради него калькулятор и открыли */
.calc-big{margin-top:20px; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.calc-big > b{font-family:var(--font-mono); font-size:38px; line-height:1.1; color:var(--wine); font-variant-numeric:tabular-nums}
.calc-big > span{margin-left:8px; font-size:15px; color:var(--ink-2)}
.calc-big > i{display:block; margin-top:8px; font-style:normal; font-size:13.5px; color:var(--ink-2)}
.calc-big i b{font-family:var(--font-mono); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.calc-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px; margin-top:14px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.calc-tile{display:flex; flex-direction:column; gap:2px; padding:11px 13px; background:var(--surface)}
.calc-tile span{font-size:11.5px; color:var(--ink-2)}
.calc-tile b{font-family:var(--font-mono); font-size:17px; font-variant-numeric:tabular-nums}
.calc-tile i{font-style:normal; font-size:11px; color:var(--ink-3)}
.calc h3{font-size:17px; margin:28px 0 8px}
.calc-f{overflow-x:auto; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface-2); font-family:var(--font-mono); font-size:12.5px; line-height:1.7; color:var(--ink-2)}
.calc-note{margin:16px 0 0; font-size:13px; color:var(--ink-2); max-width:62ch}
@media (max-width:620px){
  .calc-row{grid-template-columns:minmax(0,1fr); gap:6px; padding:12px}
  .calc-lab{padding-top:0; font-size:12.5px}
  .calc-big > b{font-size:32px}
  .ref-seg{flex-wrap:wrap}
}

/* ── раздел «Технологии» ── */
.teh-etap{margin-top:26px}
.teh-etap h3{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); padding-bottom:7px; border-bottom:1px solid var(--line)}
/* без фона у сетки: неполный последний ряд оставлял тёмные пустые клетки (24.09.2026) */
.teh-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin-top:12px}
.teh-card{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); text-decoration:none; color:inherit}
.teh-card:hover{border-color:var(--wine)}
.teh-card b{font-size:15px}
.teh-card span{font-size:12.5px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.teh-tag{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:4px;
  background:var(--surface-2); color:var(--ink-2); letter-spacing:.03em}
.ref-hits small{color:var(--ink-3)}

/* ── раздел «Словарь» ── */
/* Группы словаря: не сегмент (их десять), а лёгкие кнопки в стиле алфавита.
   24.09.2026: общая рамка сегмента с переносом на две строки читалась комом. */
.slov-gr{display:flex; flex-wrap:wrap; gap:4px; margin-top:12px}
.slov-gr button{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  height:32px; padding:0 10px; border:1px solid var(--line); border-radius:4px;
  background:none; color:var(--ink-2); font-size:13px}
.slov-gr button:hover{background:var(--surface); color:var(--ink)}
.slov-gr button i{font-style:normal; font-family:var(--font-mono); font-size:11px; line-height:1; color:var(--ink-3)}
.slov-gr button.on{background:var(--wine); border-color:var(--wine); color:var(--on-wine)}
.slov-gr button.on i{color:var(--on-wine); opacity:.75}
/* На телефоне десять групп занимали семь строк и уводили сам словарь за экран,
   поэтому там это лента с прокруткой вбок, как вкладки. (24.09.2026.) */
@media (max-width:560px){
  .slov-gr{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .slov-gr::-webkit-scrollbar{display:none}
  .slov-gr button{flex:none}
}
.slov-list{margin-top:20px; max-width:70ch}
.slov-item{padding:14px 0; border-bottom:1px solid var(--line)}
.slov-item:last-child{border-bottom:0}
.slov-item h3{font-size:16px; margin:0}
.slov-item h3 i{font-family:var(--font-body); font-style:italic; font-weight:400; font-size:13.5px; color:var(--ink-3)}
.slov-item p{margin:5px 0 0; font-size:14px}
.slov-see{font-size:12.5px; color:var(--ink-2)}