/*
Модуль: web/base.css
Назначение: общая вёрстка и компоненты Лайта (шапка, вкладки, чипы, карточка, раскрытый отзыв, плашки, настройки, вход).
Публичное: классы .top .seg .chip .card .row .x-* .hold .toast .sheet .login и др.
Зависит от: переменных themes.css (цвета, шрифты, радиусы)
Вызывают: index.html
Инварианты: ни одного цвета темы напрямую, только var(--…). Тап-зоны не меньше 44px. Колонка до 560px.
Карта: MODULES.md#webbase.css
*/

/* ==== [БЛОК: Основа] ==== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--accent)}
.num{font-family:var(--font-num);font-feature-settings:'tnum' 1;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hit{position:relative}
.hit::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
svg.i{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.i.s14{width:14px;height:14px}
svg.i.fill{fill:currentColor;stroke:none}
#app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
[hidden]{display:none !important}
.dummy{opacity:.45}
.dummy-note{font-size:12px;color:var(--muted)}

/* ==== [БЛОК: Вход] ==== */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 16px 48px;gap:14px}
.login .logo{width:64px;height:64px;border-radius:16px;align-self:flex-start}
.login h1{margin:4px 0 0;font-family:var(--font-title);font-weight:var(--title-weight);font-size:30px;letter-spacing:var(--title-ls);line-height:1.15}
.login p{margin:0;color:var(--muted);font-size:14px}
.login label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.field{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--field-radius);background:var(--field-bg);border:1px solid var(--field-bd);color:var(--field-fg);font-size:16px;outline:none}
.field:focus,.ta:focus{border-color:var(--accent)}
.login .field{background:var(--surface);border-color:var(--line-2)}
.login .err{color:var(--bad);font-size:14px;min-height:20px}

/* ==== [БЛОК: Кнопки] ==== */
.btn{min-height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--btn2-bd);background:var(--btn2-bg);color:var(--btn2-fg);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent;box-shadow:var(--primary-shadow)}
.btn.small{min-height:44px;font-size:14px;padding:0 14px;border-radius:12px}
.btn[disabled]{opacity:.55;cursor:default}
.link{background:none;border:0;padding:0 2px;min-height:44px;color:var(--accent);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.link.muted{color:var(--muted-2);font-weight:500}

/* ==== [БЛОК: Шапка ленты] ==== */
.top{padding:12px 16px 0;display:flex;flex-direction:column;gap:12px;position:relative}
.top-row{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.company{font-size:13px;font-weight:500;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-btns{display:flex;gap:2px}
.ibtn{width:44px;height:44px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--icon-btn-fg)}
.ibtn .ring{width:34px;height:34px;border-radius:17px;background:var(--icon-btn-bg);border:1px solid var(--icon-btn-bd);display:flex;align-items:center;justify-content:center}
.ibtn .ring svg{width:16px;height:16px}
.ibtn.avatar .ring{background:var(--avatar-bg);color:var(--avatar-fg);border-color:var(--avatar-bd);font-family:var(--font-num);font-size:12px;font-weight:600;letter-spacing:.02em}
.title{margin:0;font-family:var(--font-title);font-weight:var(--title-weight);font-size:var(--title-size);line-height:1.18;letter-spacing:var(--title-ls);font-style:normal}
.subtitle{margin:2px 0 0;font-size:13px;line-height:18px;color:var(--muted)}
.search{display:flex;gap:8px;align-items:center}
.search .field{min-height:44px;font-size:15px;padding:10px 12px}

/* Вкладки */
.seg{display:flex;gap:var(--seg-gap);padding:var(--seg-pad);background:var(--seg-bg);border:1px solid var(--seg-bd);border-radius:var(--seg-radius)}
.seg button{min-height:44px;padding:0 4px;border:1px solid var(--seg-item-bd);border-radius:var(--seg-item-radius);background:transparent;color:var(--seg-fg);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;min-width:0;flex:1 1 0}
.seg button[aria-pressed=true]{flex:0 0 auto;padding:0 10px;background:var(--seg-on-bg);color:var(--seg-on-fg);border-color:var(--seg-on-bd);box-shadow:var(--seg-on-shadow);font-weight:600}
.seg .cnt{font-size:11px;font-weight:600;color:var(--seg-count-fg);background:var(--seg-count-bg);border-radius:8px;padding:1px 6px}
.seg button[aria-pressed=true] .cnt{opacity:.85}

/* Фильтры */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.filters::-webkit-scrollbar{display:none}
.chip{position:relative;flex:0 0 auto;height:36px;margin:4px 0;padding:0 10px 0 12px;border-radius:var(--chip-radius);border:1px solid var(--chip-bd);background:var(--chip-bg);color:var(--chip-fg);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.chip.on{border-color:var(--accent);color:var(--ink)}
.chip select{position:absolute;inset:-4px 0;opacity:0;width:100%;cursor:pointer;font-size:16px}
.chip.reset{background:none;border-color:transparent;color:var(--accent);font-weight:600;padding:0 8px}

/* Над лентой */
.bulk{margin:12px 16px 0;min-height:44px;width:calc(100% - 32px);border-radius:14px;border:1px dashed var(--line-2);background:transparent;color:var(--muted-2);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.newbar{position:sticky;top:8px;z-index:5;margin:10px auto 0;width:fit-content;min-height:44px;padding:0 18px;border-radius:22px;border:0;background:var(--primary-bg);color:var(--primary-fg);font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.18);display:flex;align-items:center;gap:6px}

/* ==== [БЛОК: Лента и строка карточки] ==== */
.feed{padding:12px 16px 0;display:flex;flex-direction:column;gap:8px}
.card{position:relative;border-radius:var(--card-radius);overflow:hidden;touch-action:pan-y}
.card .swipe-bg{position:absolute;inset:0;background:var(--swipe-bg);color:var(--swipe-fg);display:flex;align-items:center;justify-content:flex-end;padding-right:20px;font-size:13px;font-weight:600;gap:6px}
.row{position:relative;width:100%;min-height:64px;display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--card-bg);border:1px solid var(--card-bd);border-radius:var(--card-radius);box-shadow:var(--card-shadow);color:inherit;text-align:left;transition:transform .18s ease}
.row.dragging{transition:none}
.tile{flex:0 0 auto;width:40px;height:40px;border-radius:var(--tile-radius);display:flex;align-items:center;justify-content:center;gap:2px}
.tile b{font-family:var(--font-num);font-weight:var(--num-weight);font-size:16px;font-feature-settings:'tnum' 1}
.tile svg{width:9px;height:9px;fill:currentColor}
.tile.low{color:var(--r-low);background:var(--r-low-bg)}
.tile.mid{color:var(--r-mid);background:var(--r-mid-bg)}
.tile.high{color:var(--r-high);background:var(--r-high-bg)}
.tile.big{width:44px;height:44px;border-radius:calc(var(--tile-radius) + 2px)}
.tile.big b{font-size:18px}
.rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.l1,.l2{display:flex;align-items:center;gap:8px;min-width:0}
.author{flex:0 1 auto;min-width:0;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.unread .author{font-weight:700}
.where{flex:1 1 auto;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snip{flex:1;min-width:0;font-size:13px;line-height:18px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.when{flex:0 0 auto;font-size:12px;color:var(--muted);font-family:var(--font-num);font-feature-settings:'tnum' 1}
:root[data-theme=atlas] .when,:root[data-theme=atlas] .seg .cnt,:root[data-theme=atlas] .num{font-weight:600}
.st-deleted ~ * .snip,.row.is-deleted .snip{text-decoration:line-through;color:var(--muted)}
.row.is-deleted .author{color:var(--muted)}
.mini{font-size:11px;font-weight:600;color:var(--warn)}

/* Статус-чип: цвет всегда рядом со словом */
.st{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--chip-st-radius);font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.st i{display:var(--dot-display);width:5px;height:5px;border-radius:3px}
.st-new{color:var(--st-new-fg);background:var(--st-new-bg);border-color:var(--st-new-bd)}.st-new i{background:var(--st-new-dot)}
.st-draft{color:var(--st-draft-fg);background:var(--st-draft-bg);border-color:var(--st-draft-bd)}.st-draft i{background:var(--st-draft-dot)}
.st-answered{color:var(--st-answered-fg);background:var(--st-answered-bg);border-color:var(--st-answered-bd)}.st-answered i{background:var(--st-answered-dot)}
.st-complaint{color:var(--st-complaint-fg);background:var(--st-complaint-bg);border-color:var(--st-complaint-bd)}.st-complaint i{background:var(--st-complaint-dot)}
.st-deleted{color:var(--st-deleted-fg);background:var(--st-deleted-bg);border-color:var(--st-deleted-bd);text-decoration:line-through}.st-deleted i{background:var(--st-deleted-dot)}
.st.big{height:22px;padding:0 9px}

.feed-foot{padding:16px 16px 28px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.feed-foot .dot{display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--ok);margin-right:6px}
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:14px}

/* ==== [БЛОК: Раскрытый отзыв] ==== */
.x{background:var(--cardx-bg);border:1px solid var(--cardx-bd);border-radius:var(--cardx-radius);box-shadow:var(--cardx-shadow);padding:16px;scroll-margin-top:12px}
.x-head{display:flex;align-items:center;gap:12px}
.x-who{flex:1;min-width:0}
.x-author{font-size:16px;line-height:22px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-label{font-size:12px;line-height:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-close{width:44px;height:44px;margin:-6px -8px -6px 0;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--icon-btn-fg)}
.x-close .ring{width:32px;height:32px;border-radius:16px;background:var(--raised);display:flex;align-items:center;justify-content:center}
.x-text{margin:14px 0 0;font-size:15px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere}
.x-text.deleted{color:var(--muted);text-decoration:line-through}
.facts{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.fact{font-size:11px;font-weight:600;color:var(--muted-2);background:var(--raised);border-radius:8px;padding:2px 8px}
.photos{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.photos button{width:64px;height:64px;padding:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--raised)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.sep{height:1px;background:var(--line);margin:16px 0}
.sec + .sec{margin-top:14px}
.sec-h{display:flex;align-items:center;gap:8px;min-height:28px;flex-wrap:wrap}
.sec-t{font-size:13px;font-weight:600}
.badge{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:8px;padding:2px 8px}
.sec-r{margin-left:auto;font-size:12px;color:var(--muted)}
.ta{display:block;margin-top:8px;width:100%;resize:none;overflow:hidden;background:var(--field-bg);border:1px solid var(--field-bd);border-radius:var(--field-radius);padding:11px 12px;color:var(--field-fg);font-size:16px;line-height:22px;outline:none}
.ta.small{font-size:15px;line-height:21px;color:var(--ink-2)}
.ta::placeholder{color:var(--muted)}
.under{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.reply-co{margin-top:8px;width:100%;text-align:left;background:var(--raised);border:0;border-radius:12px;padding:10px 12px;min-height:44px;display:flex;flex-direction:column;gap:4px;color:inherit}
.reply-co .t{font-size:14px;line-height:20px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.reply-co.open .t{white-space:pre-wrap;overflow-wrap:anywhere}
.pub{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pub i{width:6px;height:6px;border-radius:3px;background:currentColor}
.pub.sent{color:var(--muted-2)}.pub.checking{color:var(--warn)}.pub.published{color:var(--ok)}
.note{margin-top:8px;font-size:13px;line-height:18px;color:var(--muted)}
.note.warn{color:var(--warn)}
.swap{margin-top:8px;display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:12px;background:var(--raised);font-size:13px;color:var(--ink-2)}
.swap .link{margin-left:auto}

/* Жалоба */
.rtabs{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--seg-gap);padding:var(--seg-pad);background:var(--seg-bg);border:1px solid var(--seg-bd);border-radius:calc(var(--seg-radius) - 1px)}
.rtabs.one{grid-template-columns:1fr}
.rtabs button{min-height:44px;border:1px solid var(--seg-item-bd);border-radius:var(--seg-item-radius);background:transparent;color:var(--seg-fg);font-size:13px;font-weight:500;padding:4px 6px;white-space:normal;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
.rtabs button[aria-pressed=true]{background:var(--seg-on-bg);color:var(--seg-on-fg);border-color:var(--seg-on-bd);box-shadow:var(--seg-on-shadow);font-weight:600}
.chance{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.score{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-num);font-weight:var(--num-weight);font-feature-settings:'tnum' 1}
.score b{font-size:20px;line-height:22px}
.score span{font-size:12px;color:var(--muted)}
.cw{font-size:12px;font-weight:600;padding:2px 8px;border-radius:8px}
.cw.hi{color:var(--ok);background:var(--raised)}
.cw.md{color:var(--warn);background:var(--raised)}
.cw.lo,.cw.no{color:var(--muted-2);background:var(--raised)}
.mode{font-size:12px;color:var(--muted)}
.rule{font-size:12px;color:var(--muted)}
.ystep{margin-top:8px;font-size:13px;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap}
.ystep b{font-weight:600}
.fold{margin-top:8px;width:100%;min-height:44px;border:0;border-radius:12px;background:var(--raised);color:var(--ink-2);font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;padding:0 12px;text-align:left}
.fold svg{margin-left:auto;transition:transform .15s}
.fold[aria-expanded=true] svg{transform:rotate(180deg)}
.yw{margin-top:14px;padding:12px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-size:14px;line-height:20px;font-weight:600}
.yw .yw-btns{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Плашка удержания */
.hold{margin-top:14px;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--raised);border:1px solid var(--line-2);font-size:14px;font-weight:600}
.hold .msg{flex:1;min-width:0}
.hold .bar{height:3px;border-radius:2px;background:var(--line-2);margin-top:6px;overflow:hidden}
.hold .bar i{display:block;height:100%;background:var(--accent);transition:width 1s linear}
.hold.failed{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.hold.done{color:var(--ok)}
.hold.executing{color:var(--warn)}
.sendoff{margin-top:14px;font-size:13px;color:var(--warn);display:flex;align-items:center;gap:6px}

/* Панель действий */
.acts{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.act{min-height:54px;border-radius:14px;border:1px solid var(--btn2-bd);background:var(--btn2-bg);color:var(--btn2-fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;padding:4px 2px;line-height:1.15;text-align:center}
.act svg{width:17px;height:17px}
.act.primary{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent;box-shadow:var(--primary-shadow);font-weight:600}
.act.dummy{opacity:.45}
.act.off{opacity:.6}

/* ==== [БЛОК: Тост, просмотр фото, слой] ==== */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:min(528px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 16px;border-radius:14px;background:var(--toast-bg);color:var(--toast-fg);font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.plain{padding-right:16px}
.toast button{min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.viewer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer .vclose{position:absolute;top:calc(8px + env(safe-area-inset-top));right:8px;width:44px;height:44px;border:0;border-radius:22px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center}
.viewer .vnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center}
.viewer .vprev{left:0;border-radius:0 12px 12px 0}.viewer .vnext{right:0;border-radius:12px 0 0 12px}
.viewer .vcount{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#fff;font-size:13px}

/* ==== [БЛОК: Профиль и настройки] ==== */
.sheet{flex:1;padding:8px 16px 32px;display:flex;flex-direction:column;gap:16px}
.sheet-top{display:flex;align-items:center;gap:4px;min-height:52px}
.sheet-top h2{margin:0;font-size:20px;font-weight:700}
.who{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--card-radius);background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-shadow)}
.who .av{width:52px;height:52px;border-radius:26px;background:var(--avatar-bg);color:var(--avatar-fg);border:1px solid var(--avatar-bd);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-weight:600;font-size:18px;flex:0 0 auto}
.who .n{font-size:16px;font-weight:700}
.who .r{font-size:13px;color:var(--muted)}
.grp-t{margin:6px 4px -8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:none}
.grp{border-radius:var(--card-radius);background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--card-shadow);overflow:hidden}
.it{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:10px 14px;background:none;border:0;border-top:1px solid var(--line);color:inherit;text-align:left;font-size:15px;text-decoration:none}
.grp > .it:first-child{border-top:0}
.it .lbl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.it .sub{font-size:12px;color:var(--muted);line-height:16px}
.it .val{font-size:13px;color:var(--muted);text-align:right}
.it .chk{width:22px;height:22px;border-radius:11px;border:2px solid var(--line-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.it[aria-checked=true] .chk{border-color:var(--accent);background:var(--accent)}
.it[aria-checked=true] .chk::after{content:'';width:8px;height:8px;border-radius:4px;background:var(--surface)}
.it.danger{color:var(--bad)}
.sw{position:relative;width:48px;height:28px;flex:0 0 auto;border-radius:14px;background:var(--line-2);transition:background .15s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(20px)}
.foot-note{font-size:12px;color:var(--muted);text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}