/* Компоненты: список и поведение — из каркаса Work/Дизайн-система.md, форма своя: углы почти прямые,
   заливка плоская, заголовки контрастной антиквой. Только токены. Своё у экранов — в app.css. */
[hidden]{display:none !important;}

.icon{width:var(--icon-base); height:var(--icon-base); flex-shrink:0; pointer-events:none;
      fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.icon.sm{width:var(--icon-sm); height:var(--icon-sm);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8);
     min-height:var(--control-md); padding:var(--space-8) var(--space-24); box-sizing:border-box;
     border:1px solid transparent; border-radius:var(--radius-sm);
     font:inherit; font-size:var(--text-base); font-weight:var(--weight-medium);
     line-height:var(--leading-tight); text-align:center; text-decoration:none;
     cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
     transition:transform var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.btn:active:not(:disabled){transform:scale(.98);}
.btn:disabled{opacity:.55; cursor:default;}
.btn.sm{min-height:var(--control-sm); padding:var(--space-4) var(--space-16); font-size:var(--text-sm);}
.btn.wide{width:100%;}
.btn.primary{min-height:var(--control-lg); background:var(--accent); color:var(--accent-fg); font-size:var(--text-md);
             font-weight:var(--weight-semibold);}
.btn.primary.compact{min-height:var(--control-md); font-size:var(--text-base);}
.btn.secondary{background:transparent; color:var(--fg); border-color:var(--input);}
.btn.ghost{background:transparent; color:var(--muted-fg);}
.btn.danger{background:var(--destructive); color:var(--destructive-fg); font-weight:var(--weight-semibold);}
.btn.secondary.danger{background:transparent; color:var(--destructive-text); border-color:var(--input);}
@media (hover:hover){
  .btn.primary:hover:not(:disabled){filter:brightness(1.15);}
  .btn.secondary:hover:not(:disabled){background:var(--hover);}
  .btn.ghost:hover:not(:disabled){background:var(--hover); color:var(--fg);}
}

.field{display:flex; flex-direction:column; gap:var(--space-8);}
.field-label{font-size:var(--text-sm); font-weight:var(--weight-medium);}
.field-hint{font-size:var(--text-sm); color:var(--muted-fg); line-height:var(--leading-normal);}
.field-error{font-size:var(--text-sm); color:var(--destructive-text); line-height:var(--leading-normal);}
.input{width:100%; min-height:var(--control-md); padding:var(--space-12) var(--space-16); box-sizing:border-box;
       background:var(--field); color:var(--fg); border:1px solid var(--input);
       border-radius:var(--radius-md); font:inherit; font-size:var(--text-touch);
       line-height:var(--leading-normal); transition:border-color var(--dur-fast);}
.input::placeholder{color:var(--muted-fg); opacity:.75;}
.input:focus{outline:2px solid var(--focus); outline-offset:-1px; border-color:transparent;}
.input[aria-invalid="true"]{border-color:var(--destructive-text);}
textarea.input{resize:none; display:block;}

.card{display:flex; flex-direction:column; gap:var(--space-16); padding:var(--space-24) var(--space-16);
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
      box-shadow:var(--shadow);}
.card-title{margin:0; font-size:var(--text-md); font-weight:var(--weight-semibold);
            line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);}

.badge{display:inline-flex; align-items:center; align-self:flex-start; gap:var(--space-4);
       padding:var(--space-2) var(--space-12); border-radius:var(--radius-full);
       background:var(--muted); color:var(--muted-fg); font-size:var(--text-xs);
       font-weight:var(--weight-medium); line-height:var(--leading-normal); white-space:nowrap;}
.badge.accent{background:var(--accent); color:var(--accent-fg);}

.note{margin:0; padding:var(--space-12) var(--space-16); border-radius:var(--radius-md); background:var(--muted);
      color:var(--muted-fg); font-size:var(--text-sm); line-height:var(--leading-normal);}
.note.warn{background:var(--warn-bg); color:var(--warn);}

.seg{display:flex; gap:var(--space-2); padding:var(--space-4); background:var(--muted);
     border-radius:var(--radius-md);}
.seg.big .seg-btn{min-height:var(--control-md); font-size:var(--text-md); font-weight:var(--weight-semibold);}
.seg-btn{flex:1 1 0; min-width:0; min-height:var(--control-sm); padding:var(--space-4) var(--space-8);
         border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-fg);
         font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-tight);
         cursor:pointer; -webkit-tap-highlight-color:transparent;
         transition:background-color var(--dur-fast), color var(--dur-fast);}
.seg-btn:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.seg-btn[aria-pressed="true"]{background:var(--fg); color:var(--bg);}

.kpis{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-8);}
.kpi{display:flex; flex-direction:column; align-items:center; gap:var(--space-4); padding:var(--space-16) var(--space-8);
     background:var(--raised); border-radius:var(--radius-lg); text-align:center;}
.kpi-label{font-size:var(--text-xs); color:var(--muted-fg); letter-spacing:var(--tracking-wide); text-transform:uppercase;}
.kpi-value{font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-xl); line-height:var(--leading-tight);
           font-variant-numeric:lining-nums;
           letter-spacing:var(--tracking-tight);}
.kpi-sub{font-size:var(--text-xs); color:var(--muted-fg);}

.table-wrap{overflow-x:auto;}
.table{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
:where(.table) th{padding:var(--space-4); text-align:right; color:var(--muted-fg);
                  font-weight:var(--weight-medium); white-space:nowrap;}
:where(.table) td{padding:var(--space-8) var(--space-4); text-align:right; border-top:1px solid var(--border);
                  white-space:nowrap;}
:where(.table) th:first-child, :where(.table) td:first-child{text-align:left; padding-left:0;}
:where(.table) th:last-child, :where(.table) td:last-child{padding-right:0;}

.dialog{width:min(var(--dialog-sm), calc(100vw - 2 * var(--space-16))); padding:var(--space-24);
        box-sizing:border-box; border:1px solid var(--border); border-radius:var(--radius-lg);
        background:var(--card); color:var(--fg); box-shadow:var(--shadow-lg);}
.dialog::backdrop{background:var(--scrim);}
.dialog-title{margin:0 0 var(--space-8); font-size:var(--text-lg);
              font-weight:var(--weight-semibold); line-height:var(--leading-tight);}
.dialog-text{margin:0; font-size:var(--text-base); line-height:var(--leading-normal);}
.dialog-actions{display:flex; gap:var(--space-8); margin-top:var(--space-24);}
.dialog-actions .btn{flex:1 1 0; padding-inline:var(--space-8);}

/* popover снимает у области браузерные inset, рамку и фон: так тост выше модального окна */
.toast-region{position:fixed; inset:auto var(--space-16) var(--space-16) var(--space-16);
              display:flex; flex-direction:column; gap:var(--space-8);
              width:auto; max-width:var(--page-max); margin:0 auto; padding:0;
              border:0; background:transparent; overflow:visible; pointer-events:none;}
.toast{padding:var(--space-12) var(--space-16); border-radius:var(--radius-md);
       background:var(--fg); color:var(--bg); font-size:var(--text-sm);
       line-height:var(--leading-normal); box-shadow:var(--shadow-lg);}
.toast.error{background:var(--destructive); color:var(--destructive-fg);}