/* DMF · визуальный язык «Тёмная комната проявки».
   Нормативный источник — DESIGN.md и design/51-rabochiy-ekran.html.
   Правила системы: колонки и волосяные линии вместо контейнеров,
   ни одного border-radius, ничего мельче 14 px, теней нет. */

:root{
  --room:#0B0D12; --sunk:#0E111A; --sheet:#141822; --raised:#181D28; --picked:#1B1F2A;
  --line:#222936; --line-2:#2C3444; --stroke:#5E6A85; --stroke-2:#72809C;
  --ink:#FFFFFF; --ink-2:#C9CED8; --ink-3:#9AA3B5; --dim:#6B7383;
  --amber:#FFB020; --amber-lit:#FFC24D; --amber-ink:#1A1200;
  --exact:#3DDC84; --likely:#5AA9FF; --maybe:#8A93A6; --attention:#FF4D4D;
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Oswald","Golos Text",system-ui,sans-serif;
  --text:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:32px; --gap:32px; --aside:404px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--room)}
body{margin:0;background:var(--room);color:var(--ink-2);font:400 15px/1.5 var(--text);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--amber);color:var(--amber-ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--room)}
*::-webkit-scrollbar-thumb{background:var(--line-2);border:2px solid var(--room)}
h1,h2,h3,p,dl,dd,dt,figure,blockquote,ul,ol{margin:0}
/* правило четырнадцати: small не уменьшает кегль сам по себе */
small{font-size:inherit;font-weight:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--likely);text-underline-offset:3px;text-decoration-thickness:1px}

/* ——— навигация приложения ——— */
.top{display:flex;align-items:center;gap:24px;height:52px;padding:0 var(--pad);
  border-bottom:1px solid var(--line);background:#080A0E;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font:700 18px/1 var(--text);color:var(--ink);
  letter-spacing:-.01em;flex:none}
.brand i{width:10px;height:10px;background:var(--amber);box-shadow:0 0 14px 1px rgba(255,176,32,.5)}
.top nav{display:flex;gap:20px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;height:100%;align-items:center}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:var(--ink-3);text-decoration:none;font:500 15px/1 var(--text);white-space:nowrap;
  height:100%;display:flex;align-items:center;position:relative;transition:color 140ms var(--ease)}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink)}
.top nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber)}
.top .org{color:var(--ink-3);font-size:14px;white-space:nowrap;flex:none}

/* ——— заголовки ——— */
h2{font:700 21px/1.25 var(--text);letter-spacing:-.015em;color:var(--ink);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
h2 em{font-style:normal;font:500 14px/1.3 var(--text);color:var(--ink-3);margin-left:auto}
h3{font:600 16.5px/1.3 var(--text);color:var(--ink)}
.note{font:400 15px/1.5 var(--text);color:var(--ink-2);max-width:78ch}
.crumb{font:500 14px/1.2 var(--text);color:var(--ink-3)}
.crumb b{color:var(--ink-2);font-weight:500}

/* ——— кнопки ——— */
.btn{height:40px;padding:0 16px;font:600 15px/1 var(--text);display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;
  transition:background 140ms var(--ease),color 140ms var(--ease),border-color 140ms var(--ease)}
.btn-1{background:var(--amber);color:var(--amber-ink)}
.btn-1:hover,.btn-1.is-hover{background:var(--amber-lit)}
.btn-2{border:1px solid var(--stroke);color:var(--ink)}
.btn-2:hover,.btn-2.is-hover{background:var(--raised);border-color:var(--stroke-2)}
.btn-3{border:1px solid var(--stroke);color:var(--ink-2);padding:0 12px}
.btn-3:hover{color:var(--ink);border-color:var(--stroke-2)}
.btn-4{border:1px solid var(--attention);color:var(--attention)}
.btn-4:hover{background:rgba(255,77,77,.1)}
.btn-big{height:48px;padding:0 22px;font-size:17px}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn:active{transform:translateY(1px)}
.btn.is-focus{outline:2px solid var(--amber);outline-offset:2px}
.hand{height:30px;padding:0 10px;border:1px solid rgba(255,176,32,.45);color:var(--amber);
  font:600 14px/1 var(--text);display:inline-flex;align-items:center;
  transition:background 140ms var(--ease),border-color 140ms var(--ease)}
.hand:hover{background:rgba(255,176,32,.12);border-color:var(--amber)}
.link-btn{font:600 15px/1 var(--text);color:var(--ink-2);height:34px;display:inline-flex;align-items:center;
  transition:color 140ms var(--ease)}
.link-btn:hover{color:var(--amber)}

/* ——— чипы ——— */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:30px;padding:0 12px;border:1px solid var(--stroke);color:var(--ink-2);
  font:500 14px/1 var(--text);display:inline-flex;align-items:center;gap:7px;transition:all 140ms var(--ease)}
.chip span{color:var(--ink-3)}
.chip:hover{color:var(--ink);border-color:var(--stroke-2)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);color:var(--room);border-color:var(--ink);font-weight:600}
.chip[aria-pressed="true"] span,.chip.is-on span{color:var(--dim)}

/* ——— поля ——— */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .lbl{font:500 14px/1.3 var(--text);color:var(--ink-3)}
.input,input.input,textarea.input,select.input{height:40px;padding:0 12px;border:1px solid var(--stroke);
  background:var(--sunk);color:var(--ink);font:400 15px/1.5 var(--text);font-variant-numeric:tabular-nums;
  border-radius:0;display:flex;align-items:center;transition:border-color 140ms var(--ease)}
textarea.input{height:auto;min-height:80px;padding:10px 12px;align-items:flex-start;line-height:1.45}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:var(--stroke-2)}
.input:focus,.input.is-focus{outline:none;border-color:var(--amber)}
.input.is-error{border-color:var(--attention)}
.input:disabled,.input.is-disabled{opacity:.45;cursor:not-allowed}
.field .err{font:400 14px/1.35 var(--text);color:var(--attention)}
.field .tip{font:400 14px/1.4 var(--text);color:var(--dim)}

/* ——— ведомость: общая грамматика списков ——— */
.ledger-head{display:grid;gap:0 20px;padding:0 0 7px;border-bottom:1px solid var(--line-2)}
.ledger-head span{font:500 14px/1.2 var(--text);color:var(--dim)}
.ledger-row{display:grid;gap:0 20px;align-items:baseline;width:100%;text-align:left;
  border-bottom:1px solid var(--line);transition:background 140ms var(--ease)}
.ledger-row:hover{background:var(--raised)}
.ledger-row.is-picked{background:var(--picked);box-shadow:inset 2px 0 0 var(--amber)}
.mark-sq{width:7px;height:7px;flex:none}
.mark-sq[data-sev="attention"]{background:var(--attention)}
.mark-sq[data-sev="note"]{background:var(--amber)}
.word{font:700 17px/1.25 var(--text);white-space:nowrap}
.word[data-c="exact"]{color:var(--exact)}
.word[data-c="likely"]{color:var(--likely)}
.word[data-c="maybe"]{color:var(--maybe)}
.word[data-c="wait"]{color:var(--amber)}
.word[data-c="off"]{color:var(--ink-3)}

/* ——— сигналы ——— */
.sigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);
  border-top:1px solid var(--line-2);margin-top:8px}
.sig{padding:13px 0 15px;display:grid;grid-template-columns:8px minmax(0,1fr);gap:3px 11px;align-content:start}
.sig > *{grid-column:2;min-width:0}
.sig i{grid-column:1;grid-row:1;width:8px;height:8px;margin-top:7px;align-self:start}
.sig[data-sev="attention"] i{background:var(--attention)}
.sig[data-sev="note"] i{background:var(--amber)}
.sig .sev{font:700 14px/1.2 var(--text)}
.sig[data-sev="attention"] .sev{color:var(--attention)}
.sig[data-sev="note"] .sev{color:var(--amber)}
.sig h3{font:600 16px/1.3 var(--text);color:var(--ink)}
.sig p{font:400 14.5px/1.42 var(--text);color:var(--ink-2);margin-top:3px}
.sig .src{font:500 14px/1.2 var(--text);color:var(--dim);margin-top:5px}
.sig + .sig{border-left:1px solid var(--line);padding-left:var(--gap)}

/* ——— пары «ключ — значение» ——— */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
.kv dt{font:500 14px/1.35 var(--text);color:var(--ink-3)}
.kv dd{font:500 14px/1.35 var(--text);color:var(--ink);min-width:0;overflow-wrap:anywhere}

/* ——— хроника ——— */
.log-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 12px;padding:8px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.log-row:last-child{border-bottom:0}
.log-row time{font:500 14px/1.35 var(--text);color:var(--dim)}
.log-row span{font:400 14px/1.4 var(--text);color:var(--ink-2)}
.log-row b{color:var(--ink);font-weight:600}

/* ——— состояние работы ——— */
.live{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--text);color:var(--ink-2)}
.live i{width:36px;height:2px;background:var(--amber);box-shadow:0 0 12px rgba(255,176,32,.8);flex:none;
  animation:breathe 2.4s ease-in-out infinite}
.hint{font:500 14px/1.3 var(--text);color:var(--ink-3)}
.hint b{color:var(--amber);font-weight:700}

/* ——— подвал ——— */
.foot{padding:16px var(--pad) 26px;border-top:1px solid var(--line);color:var(--dim);
  font:500 14px/1.5 var(--text);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes develop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (min-width:1700px){:root{--pad:44px;--gap:40px;--aside:470px}}
@media (max-width:1240px){:root{--aside:340px}}
@media (max-width:820px){.top .org{display:none}}
@media (max-width:1240px){
  .sigs{grid-template-columns:1fr}
  .sig + .sig{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  :root{--pad:16px}
}