/* Примитивы. Классы с префиксом ui- — по одному блоку на примитив, без каскадных пересечений. */

/* Panel — стекло. Фолбэк без backdrop-filter: непрозрачный слой. */
.ui-panel {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-md)) saturate(var(--saturate));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--panel-pad);
}
.ui-panel[data-depth="2"] { background: var(--glass-raised); box-shadow: var(--shadow-2); }
.ui-panel[data-depth="0"] { background: transparent; border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-panel__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ui-panel__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-muted); }
.ui-panel__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-faint); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-panel, .ui-sheet__body, .ui-toast, .shell-tabbar, .shell-topbar, .pal__box { background: var(--surface-solid) !important; }
}

/* Button */
.ui-btn {
  --btn-bg: var(--glass-raised);
  --btn-fg: var(--text);
  --btn-edge: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--btn-edge);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: transform var(--dur-instant) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.ui-btn:hover { --btn-edge: var(--accent); }
.ui-btn:active { transform: scale(0.97); }
.ui-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ui-btn--primary { --btn-bg: var(--accent); --btn-fg: var(--text-on-accent); --btn-edge: transparent; font-weight: var(--fw-semibold); }
.ui-btn--primary:hover { --btn-bg: var(--accent-strong); --btn-edge: transparent; }
.ui-btn--ghost { --btn-bg: transparent; --btn-edge: transparent; color: var(--text-muted); }
.ui-btn--ghost:hover { --btn-bg: var(--accent-soft); --btn-edge: transparent; color: var(--text); }
.ui-btn--danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); --btn-edge: transparent; }
.ui-btn--sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-13); border-radius: var(--r-sm); }
.ui-btn--block { width: 100%; }

/* IconButton — цель касания не меньше 44px */
.ui-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.ui-iconbtn:hover { background: var(--accent-soft); color: var(--text); }
.ui-iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.ui-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Chip + StatusDot */
.ui-chip {
  --chip-fg: var(--text-muted);
  --chip-bg: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-chip[data-tone="accent"] { --chip-fg: var(--accent); --chip-bg: var(--accent-soft); border-color: transparent; }
.ui-chip[data-tone="ok"] { --chip-fg: var(--ok); --chip-bg: var(--ok-soft); border-color: transparent; }
.ui-chip[data-tone="warn"] { --chip-fg: var(--warn); --chip-bg: var(--warn-soft); border-color: transparent; }
.ui-chip[data-tone="danger"] { --chip-fg: var(--danger); --chip-bg: var(--danger-soft); border-color: transparent; }
.ui-chip[data-tone="protect"] { --chip-fg: var(--protect); --chip-bg: var(--protect-soft); border-color: transparent; }
.ui-chip .ui-icon { width: 13px; height: 13px; stroke-width: 2; }

.ui-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.ui-dot[data-state="ok"] { background: var(--ok); }
.ui-dot[data-state="warn"] { background: var(--warn); }
.ui-dot[data-state="danger"] { background: var(--danger); }
.ui-dot[data-state="busy"] { background: var(--info); }
.ui-dot[data-live="true"]::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid currentColor; color: inherit;
  animation: ui-ping 2.4s var(--ease-out) infinite;
}
.ui-dot[data-state="ok"][data-live="true"]::after { color: var(--ok); }
.ui-dot[data-state="busy"][data-live="true"]::after { color: var(--info); }
@keyframes ui-ping { 0% { transform: scale(0.6); opacity: 0.9; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

/* Input / Textarea */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field__label { font-size: var(--fs-13); color: var(--text-muted); font-weight: var(--fw-medium); }
.ui-field__hint { font-size: var(--fs-12); color: var(--text-faint); }
.ui-field__hint[data-error="true"] { color: var(--danger); }
.ui-input, .ui-textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  color: var(--text);
  font-size: 16px; /* 16px — иначе iOS увеличивает страницу при фокусе */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-faint); }
.ui-input:focus-visible, .ui-textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--r-sm); }
.ui-input[aria-invalid="true"] { border-color: var(--danger); }
.ui-textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }

/* Sheet — снизу на мобиле, справа на десктопе */
.ui-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; }
.ui-sheet__scrim { position: absolute; inset: 0; background: var(--backdrop); animation: ui-fade var(--dur-base) var(--ease-out); border: 0; padding: 0; width: 100%; cursor: default; }
.ui-sheet__body {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  overflow: auto;
  /* Лист несет текст и поля ввода: непрозрачная поверхность, читаемость важнее стекла */
  background: var(--surface-raised-solid);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--saturate));
  border: 1px solid var(--glass-edge);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  padding: var(--sp-2) var(--sp-5) calc(var(--sp-6) + var(--safe-bottom));
  animation: ui-sheet-up var(--dur-slow) var(--ease-out);
}
.ui-sheet__grip { width: 36px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto var(--sp-3); }
.ui-sheet__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ui-sheet__head h2 { flex: 1; }
@media (min-width: 900px) {
  .ui-sheet { justify-content: flex-end; align-items: stretch; }
  .ui-sheet__body {
    width: 420px; max-height: none; height: 100%;
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    border-bottom: 1px solid var(--glass-edge); border-right: 0;
    padding: var(--sp-6);
    animation-name: ui-sheet-left;
  }
  .ui-sheet__grip { display: none; }
}
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-sheet-up { from { transform: translateY(24%); opacity: 0; } }
@keyframes ui-sheet-left { from { transform: translateX(12%); opacity: 0; } }

/* Toast */
.ui-toasts {
  position: fixed; z-index: var(--z-toast);
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
@media (min-width: 900px) { .ui-toasts { bottom: var(--sp-6); } }
.ui-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-raised-solid);
  -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-13);
  pointer-events: auto;
  animation: ui-toast-in var(--dur-base) var(--ease-spring);
}
@keyframes ui-toast-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } }

/* ProgressRing */
.ui-ring { display: inline-grid; place-items: center; position: relative; flex: none; }
.ui-ring svg { transform: rotate(-90deg); display: block; }
.ui-ring__track { stroke: var(--line-strong); fill: none; }
.ui-ring__value { stroke: var(--accent); fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.ui-ring[data-tone="ok"] .ui-ring__value { stroke: var(--ok); }
.ui-ring[data-tone="protect"] .ui-ring__value { stroke: var(--protect); }
.ui-ring__label { position: absolute; font-family: var(--font-mono); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }

/* Kbd */
.ui-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--bg-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* EmptyState */
.ui-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6) var(--sp-2); max-width: 46ch; }
.ui-empty__mark { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-13); }
.ui-empty__title { font-size: var(--fs-17); font-weight: var(--fw-semibold); }
.ui-empty__text { color: var(--text-muted); font-size: var(--fs-13); }
.ui-empty .ui-btn { margin-top: var(--sp-2); }

/* Skeleton */
.ui-skel {
  display: block; height: 14px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--line) 0%, var(--line-strong) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: ui-shimmer 1.6s linear infinite;
}
@keyframes ui-shimmer { to { background-position: -200% 0; } }

.ui-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ui-sheet__actions .ui-btn { flex: 1 1 auto; }

/* QrCode: черное на белом всегда, скругление и рамка - чтобы QR не сливался со стеклом */
.qr { display: block; width: min(224px, 100%); height: auto; aspect-ratio: 1; border-radius: var(--r-xs); background: #ffffff; }
.qr--empty { background: var(--line); }
.qr-block { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.qr-block__side { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.secret-text { overflow-wrap: anywhere; word-break: break-all; }
.codes-list { columns: 2; column-gap: var(--sp-4); padding-left: 1.6em; }
@media (max-width: 380px) { .codes-list { columns: 1; } }

/* Группы списка задач: по сферам и по статусу (ui/groups.js, решения владельца 30.10) */
.grp { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.grp__head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-muted); }
[data-testid="task-tier"][data-tier="chronic"] { color: var(--danger); font-weight: var(--fw-semibold); }
[data-testid="task-tier"][data-tier="urgent"] { color: var(--warn); }