/* Общая система DOC-04, 10.09.2026. Роли и основания — DESIGN.md. */
@import url("fonts.css");

:root{

  --bg:#f0efed;
  --surface:#ffffff; --on-acc:#ffffff; --file-bg:#e5eef6; --file-ink:#173e5d;
  --st-live-bg:#edf3ee; --st-hot-bg:#f8eeeb; --neutral-bg:#f3f4f4;
  --ink:#172126;
  --on-ink:#f0efed;
  --ink-soft:#34434d;
  --muted:#58646b;

  --hair:#b6bec3;
  --rule:#b6bec3;
  --edge:#76828a;
  --scrim:rgba(20,18,15,.38);

  --acc:#145e9f; --action-bg:#145e9f; --on-action:#ffffff;

  --st-hot:#9b4234;
  --st-live:#326749;
  --st-wait:#58646b;

  --font-body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-title:24px;
  --fs-body:16px;
  --fs-sub:14px;
  --fs-btn:14px;
  --fs-data:14px;
  --fs-label:14px;
  --fs-tab:12px;

  --wash:7%;  --tint:6%;
  --radius:4px; --fs-person:12px;
  --pad:16px;
  --tabbar-h:58px;  --kb:0px;
}

:root[data-theme="dark"]{
  --bg:#181d20; --surface:#242c31; --on-acc:#181d20; --file-bg:#283f50; --file-ink:#d9eaff;
  --st-live-bg:#25382e; --st-hot-bg:#3d2d2a; --neutral-bg:#1e2529; --ink:#f0f3f4; --on-ink:#181d20;
  --ink-soft:#d9d9d9; --muted:#bdbdbd; --hair:#58636b; --rule:#58636b;
  --edge:#8c9aa3; --scrim:rgba(0,0,0,.58); --acc:#9dcdff; --action-bg:#2a79b3; --on-action:#ffffff;
  --st-hot:#f1b2a4; --st-live:#a1d1b3; --st-wait:#bdbdbd;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#181d20; --surface:#242c31; --on-acc:#181d20; --file-bg:#283f50; --file-ink:#d9eaff;
  --st-live-bg:#25382e; --st-hot-bg:#3d2d2a; --neutral-bg:#1e2529; --ink:#f0f3f4; --on-ink:#181d20;
    --ink-soft:#d9d9d9; --muted:#bdbdbd; --hair:#58636b; --rule:#58636b;
    --edge:#8c9aa3; --scrim:rgba(0,0,0,.58); --acc:#9dcdff; --action-bg:#2a79b3; --on-action:#ffffff;
    --st-hot:#f1b2a4; --st-live:#a1d1b3; --st-wait:#bdbdbd;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:var(--fs-body); line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:0 var(--pad) calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom) + var(--kb));
}

svg{width:24px; height:24px; flex:0 0 auto; display:block;
    fill:none; stroke:currentColor; stroke-width:1.75;
    stroke-linecap:round; stroke-linejoin:round}

.appbar{
  display:flex; align-items:center; gap:10px; margin:0 calc(-1 * var(--pad));
  padding:4px var(--pad); background:var(--bg);
}

.appbar .brand{flex:1; display:flex; align-items:center; gap:7px;
               font-family:var(--font-body); font-size:var(--fs-label);
               letter-spacing:0; text-transform:none; color:var(--muted)}
.icon-btn{width:44px; height:44px; padding:0; border:none; background:none;
          color:var(--muted); display:grid; place-items:center}
.icon-btn svg{width:20px; height:20px}

h1{font-size:var(--fs-title); font-weight:600; letter-spacing:-.01em; margin:0}
h2{font-family:var(--font-body); font-size:var(--fs-body); text-transform:none;
   letter-spacing:0; color:var(--ink); font-weight:600; margin:24px 0 8px}
h2.sec{font-family:var(--font-body); font-size:var(--fs-body); font-weight:600;
       letter-spacing:-.01em; color:var(--ink); text-transform:none; margin:16px 0 6px}
.hint{color:var(--muted); font-size:var(--fs-sub); line-height:1.45}

a{color:var(--acc); text-decoration:underline; text-underline-offset:3px}

.page-title{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
            margin:0 calc(-1 * var(--pad)) 8px; padding:2px var(--pad) 4px;
            border-bottom:none;
            font-family:var(--font-body); font-size:var(--fs-title); font-weight:600;
            text-transform:none; letter-spacing:0; color:var(--ink)}

.page-title.top{padding-top:12px}
.page-title .num{font-size:var(--fs-sub); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:0;
                 color:var(--muted)}
.page-title.lead{font-family:var(--font-body); font-size:var(--fs-body);
                 text-transform:none; letter-spacing:normal; color:var(--ink);
                 gap:10px; padding-bottom:11px}
.page-title p{margin:0; color:var(--muted); font-size:var(--fs-sub); flex:1 0 100%}
.err{color:var(--st-hot); font-size:var(--fs-sub); padding:6px 0; white-space:pre-line}

input,select,textarea{
  width:100%; border:1px solid var(--edge); background:var(--bg);
  color:var(--ink); border-radius:var(--radius); padding:11px 12px;
  font-size:var(--fs-body); font-family:inherit; outline:none; margin-bottom:8px;
  resize:none;
}

input::placeholder,textarea::placeholder{color:var(--muted); font-size:var(--fs-sub)}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button:active,summary:active{filter:brightness(.94)}
label.hint{display:block; font-size:var(--fs-sub); margin-bottom:5px}

button{
  border:none; border-radius:var(--radius); padding:13px 16px; font-size:var(--fs-btn);
  font-weight:400; background:var(--action-bg); color:var(--on-action); font-family:inherit; min-height:44px;
  cursor:pointer;
}
button:disabled{opacity:.5}
button.ghost{background:none; color:var(--acc); padding:6px 8px;
             text-decoration:underline; text-underline-offset:3px}
button.danger{background:none; color:var(--st-hot); padding:6px 8px}
button.small{padding:7px 11px; font-size:var(--fs-sub)}
button.mute{background:var(--surface); color:var(--ink); border:1px solid var(--edge)}
button.wide{width:100%}
button.linkish{background:none; border:0; padding:0; margin:0; width:auto;
               color:var(--acc); font-size:var(--fs-sub); text-align:left;
               text-decoration:underline; text-underline-offset:3px}

.row{display:flex; gap:8px}
.row > *{flex:1}
.empty{color:var(--muted); padding:24px 0; font-size:var(--fs-sub)}
.mat-title{font-size:var(--fs-body)}

.search{position:relative; margin:0 0 10px}
.search.folded{display:none}
.search svg{position:absolute; left:0; top:11px; width:20px; height:20px;
            color:var(--muted); pointer-events:none}
.search input{padding:9px 0 9px 30px; margin:0; border:none;
              border-bottom:1px solid var(--rule); border-radius:0; background:none}
.search input:focus{border-bottom-width:2px}

.search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.hits-head{display:flex; justify-content:space-between; align-items:baseline;
           font-family:var(--font-body); font-size:var(--fs-data); color:var(--muted);
           margin:2px 0 6px}

.filters,.seg{display:flex; gap:16px; overflow-x:auto; scrollbar-width:none;
              margin:0 calc(-1 * var(--pad)) 4px; padding:4px var(--pad);
              border-bottom:1px solid var(--hair)}
.filters::-webkit-scrollbar,.seg::-webkit-scrollbar{height:0}
.filters button,.seg button{
  flex:0 0 auto; border:none; background:none; color:var(--muted);
  padding:8px 0; min-width:44px; min-height:44px; font-size:var(--fs-sub); white-space:nowrap; border-radius:0;
}

.filters button.on,.seg button.on{color:var(--acc); box-shadow:inset 0 -2px 0 var(--acc)}

.fab{
  position:fixed; left:var(--pad); right:var(--pad); z-index:40;
  bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:auto; height:auto; padding:13px; border-radius:var(--radius);
}
.fab svg{width:18px; height:18px}

.act-bar{
  position:fixed; left:var(--pad); right:var(--pad); z-index:40;
  bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
  display:flex; gap:8px;
}
.act-bar .fab{position:static; left:auto; right:auto; bottom:auto; flex:1}
.act-bar .second{background:var(--surface); color:var(--ink); border:1px solid var(--edge);
                 padding:13px 16px; white-space:nowrap}

body.with-act{padding-bottom:calc(var(--tabbar-h) + 74px + env(safe-area-inset-bottom) + var(--kb))}

.scrim{position:fixed; inset:0; z-index:60; background:var(--scrim);
       display:flex; align-items:flex-end}
.sheet{
  width:100%; max-height:92vh; overflow-y:auto; background:var(--surface);
  border-top:1px solid var(--rule); border-radius:0;
  padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom));
  animation:rise .18s ease-out;
}
@keyframes rise{from{transform:translateY(24px)} to{transform:none}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet .grip{display:none}
.sheet h3{margin:0 calc(-1 * var(--pad)) 12px; padding:14px var(--pad);
          font-size:var(--fs-title); font-weight:600; display:flex;
          align-items:center; gap:8px; border-bottom:1px solid var(--hair)}
.sheet h3 .x{margin-left:auto}
.sheet .submit{width:100%; display:flex; align-items:center; justify-content:center;
               gap:7px; padding:14px; font-size:var(--fs-btn); margin-top:4px}
.sheet .submit svg{width:17px; height:17px}
.chips{display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.chips button{flex:1; background:none; color:var(--ink); border:1px solid var(--edge);
              padding:9px 4px; font-size:var(--fs-sub)}
.chips button.on{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.acts{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.acts button{flex:1; min-width:84px; background:none; color:var(--ink);
             border:1px solid var(--edge); font-size:var(--fs-sub); padding:11px}
.acts button.del{color:var(--st-hot); border-color:var(--st-hot)}
.acts button.ack{color:var(--st-live); border-color:var(--st-live)}

#toastbox{position:fixed; left:var(--pad); right:var(--pad); z-index:100; display:flex;
          flex-direction:column; gap:6px; pointer-events:none;
          bottom:calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom))}
.toast{pointer-events:auto; background:var(--ink); color:var(--on-ink);
       border-radius:var(--radius); padding:11px 13px; font-size:var(--fs-sub);
       word-break:break-word}
.toast.err{background:var(--st-hot-bg); color:var(--st-hot);border:1px solid var(--st-hot)}

.tabs{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
      background:var(--bg); border-top:1px solid var(--rule);
      padding:11px 0 calc(11px + env(safe-area-inset-bottom))}
.tabs a{min-height:36px;flex:1; display:grid; place-items:center; text-decoration:none;
        color:var(--muted)}
.tabs a.on{color:var(--acc)}
.tabs a .lbl{display:none}