/* web/scheme/sound_base.css — общий фирменный стиль SOUND для обеих версий: градиент, шапка, поиск, карточка, фишки, статусы, кнопки решений */
/* Layout: светлая тема (решение Паши 01.11): белый фон с лёгким серым градиентом, подложки под текст — еле голубые,
   акценты — оранжевые; заголовки — фирменная AKIRA (латиница Akira Expanded, кириллица SMENA AKIRA CYR), текст — как в Telegram */
@font-face { font-family:"Akira"; src:url("../fonts/Akira_Expanded.otf") format("opentype"); font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122; }
@font-face { font-family:"Akira"; src:url("../fonts/vz-display-cyr.ttf") format("truetype"); font-display:swap;
  unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root {
  --g1:#FFFFFF; --g2:#F6F7F9; --g3:#ECEEF2; --g4:#DFE3E9;
  --grad:linear-gradient(180deg, var(--g1) 0%, var(--g2) 35%, var(--g3) 70%, var(--g4) 100%);
  --ink:#16191F; --ink-2:rgba(22,25,31,.78); --muted:rgba(22,25,31,.55); --on-ink:#FFFFFF;
  --glass:rgba(242,248,255,.92); --glass-hi:#F4F9FF; --soft:rgba(30,90,170,.06); --rule:rgba(30,60,100,.13);
  --btn:#FFFFFF; --hi:rgba(40,120,230,.10); --head-bg:rgba(255,255,255,.85); --dock-bg:rgba(250,252,255,.96);
  --halo:rgba(255,255,255,.95); --dots:rgba(30,60,100,.10);
  --line:rgba(30,50,80,.35); --boss:#2F6FE0; --sub:#E0364E; --peer:#17A05A;
  --warn:#C26A00; --warn-bg:rgba(255,150,0,.13); --gap:#D33A3A; --gap-bg:rgba(230,60,60,.11);
  --ok:#15894B; --ok-bg:rgba(23,160,90,.12); --fog:#8A6D00; --fog-bg:rgba(240,200,40,.18);
  --accent:#FF6A00;
  --shadow:0 1px 3px rgba(20,35,60,.08), 0 8px 24px rgba(20,35,60,.08);
  --f-display:"Akira",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
html, body { height:100%; }
body { background-color:var(--g4); background-image:var(--grad); color:var(--ink); font:16px/1.5 var(--f-body); -webkit-font-smoothing:antialiased; }
.brand img { filter:invert(1); }  /* логотип SOUND белый — на светлом фоне делаем его чёрным */
button { font:inherit; color:inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* шапка */
.top { position:relative; z-index:8; display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-block:10px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  background:var(--head-bg); border-bottom:1px solid var(--rule); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand img { flex:none; height:42px; width:auto; }
.brand h1 { margin:0; font:700 16px/1.15 var(--f-display); letter-spacing:.02em; }
.brand p { margin:3px 0 0; font-size:12.5px; color:var(--ink-2); }
.progress { margin:0; font:500 12px/1.3 var(--f-mono); color:var(--ink-2); }
.search { position:relative; flex:1 1 240px; max-width:420px; min-width:0; }
.search input { width:100%; box-sizing:border-box; padding:9px 12px; font-size:14px; color:var(--ink);
  background:var(--btn); border:1px solid var(--rule); border-radius:10px; }
.search input::placeholder { color:var(--muted); }
.search input:focus { outline:2px solid var(--ink); outline-offset:1px; }
.results { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; max-height:60vh; overflow:auto; padding:6px;
  background:var(--glass-hi); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); }
.results button { display:flex; gap:8px; align-items:baseline; width:100%; padding:8px 10px; text-align:left; font-size:14px;
  background:none; border:0; border-radius:8px; cursor:pointer; }
.results button:hover, .results button:focus-visible { background:var(--soft); }
.results .muted, .results .none { color:var(--muted); }
.results .none { margin:8px 10px; font-size:14px; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--ink-2); }
.legend li { display:flex; align-items:center; gap:7px; }
.legend i { width:24px; border-top:3px solid var(--line); }
.legend i.l-boss { border-top-color:var(--boss); } .legend i.l-sub { border-top-color:var(--sub); }
.legend i.l-peer { border-top:3px dashed var(--peer); }

/* карточка */
.panel { box-sizing:border-box; overflow:auto; overscroll-behavior:contain; padding:18px 18px 22px; background:var(--glass-hi);
  border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.card-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kicker, .panel h3 { margin:0; font:700 10.5px/1.2 var(--f-display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.panel h2 { margin:5px 0 3px; font:700 19px/1.25 var(--f-display); text-wrap:balance; }
.who { margin:0; font-size:14px; color:var(--ink-2); }
.x { flex:none; width:36px; height:36px; font-size:20px; line-height:1; background:var(--soft); border:1px solid var(--rule); border-radius:10px; cursor:pointer; }
.panel section { margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); }
.panel h3 { margin-bottom:9px; }
.panel p { margin:6px 0; font-size:14px; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px; }
.lbl { flex:0 0 100%; font-size:12px; font-weight:600; }
.lbl.boss { color:var(--boss); } .lbl.sub { color:var(--sub); } .lbl.peer { color:var(--peer); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; font-size:13px; background:var(--soft);
  border:1.5px solid var(--line); border-radius:999px; cursor:pointer; }
.chip i { font:500 11px var(--f-mono); font-style:normal; color:var(--muted); }
.c-boss { border-color:var(--boss); } .c-sub { border-color:var(--sub); } .c-peer { border-color:var(--peer); border-style:dashed; }
.c-fn { border-color:var(--warn); } .c-fnu { border-color:var(--warn); border-style:dashed; }
.fn { margin-bottom:6px; background:var(--soft); border:1px solid var(--rule); border-radius:10px; }
.fn summary { display:grid; grid-template-columns:auto 1fr auto; gap:3px 8px; padding:8px 10px; font-size:13.5px; line-height:1.35; list-style:none; cursor:pointer; }
.fn summary::-webkit-details-marker { display:none; }
.fn .also { grid-column:2 / 4; font-size:12px; color:var(--warn); }
.fn[open] summary { border-bottom:1px solid var(--rule); }
.fn p { margin:8px 10px; font-size:13px; line-height:1.5; }
.doc, .todo, .muted { color:var(--muted); }
.fn .doc, .panel .doc { font-size:12.5px; }
.link { margin:0 10px 10px; padding:0; font-size:13px; color:var(--boss); text-decoration:underline; background:none; border:0; cursor:pointer; }
.st { align-self:start; padding:4px 6px; border-radius:5px; white-space:nowrap; font:500 10.5px/1 var(--f-mono); }
.st-ok { background:var(--ok-bg); color:var(--ok); } .st-dub { background:var(--warn-bg); color:var(--warn); }
.st-gap { background:var(--gap-bg); color:var(--gap); } .st-fog { background:var(--fog-bg); color:var(--fog); }
.vs { align-self:start; font:500 10.5px/1 var(--f-mono); padding:4px 6px; border-radius:5px; }
.vs:empty { display:none; }
.tag { flex:none; padding:3px 5px; border-radius:5px; font:500 10.5px/1 var(--f-mono); }
.tag-dup { background:var(--warn-bg); color:var(--warn); } .tag-gap { background:var(--gap-bg); color:var(--gap); }
.tag-ok { background:var(--ok-bg); color:var(--ok); }
.vs-yes { background:var(--ok-bg); color:var(--ok); } .vs-no { background:var(--gap-bg); color:var(--gap); } .vs-talk { background:var(--warn-bg); color:var(--warn); }

/* решения */
.vote { display:grid; gap:8px; margin:6px 10px 12px; }
.vbtns { display:flex; flex-wrap:wrap; gap:6px; }
.vbtns button { padding:6px 13px; font-size:13px; background:var(--soft); border:1px solid var(--rule); border-radius:999px; cursor:pointer; }
.vbtns button[aria-pressed="true"][data-v="yes"] { background:var(--peer); border-color:var(--peer); color:var(--on-ink); }
.vbtns button[aria-pressed="true"][data-v="no"] { background:var(--sub); border-color:var(--sub); color:var(--on-ink); }
.vbtns button[aria-pressed="true"][data-v="talk"] { background:var(--warn); border-color:var(--warn); color:var(--on-ink); }
.vcomment { width:100%; box-sizing:border-box; padding:7px 10px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--btn); border:1px solid var(--rule); border-radius:8px; }
.vcomment::placeholder { color:var(--muted); }
.vothers p { margin:0; font-size:12.5px; color:var(--ink-2); }
.chip:focus-visible, .x:focus-visible, .vbtns button:focus-visible, .vcomment:focus { outline:2px solid var(--ink); outline-offset:2px; }