/* Sol Design System · components */

/* ---------- Icon ---------- */
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}

/* ---------- Spinner ---------- */
.spinner{display:inline-block;width:16px;height:16px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Button ---------- */
.btn{--btn-h:40px;--btn-px:16px;--btn-bg:var(--surface-2);--btn-fg:var(--text);--btn-bd:var(--border);--btn-bg-hover:color-mix(in srgb,var(--surface-2),var(--text) 6%);--btn-bd-hover:var(--border-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--btn-h);padding:0 var(--btn-px);
  border:1px solid var(--btn-bd);border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-14);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:hover:not(:disabled):not([aria-disabled='true']){background:var(--btn-bg-hover);border-color:var(--btn-bd-hover);text-decoration:none}
.btn:active:not(:disabled):not([aria-disabled='true']){transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled='true']{opacity:0.45;cursor:not-allowed}
.btn-sm{--btn-h:32px;--btn-px:12px}
.btn-lg{--btn-h:48px;--btn-px:24px;font-size:var(--fs-16)}
.btn-icon{width:var(--btn-h);padding:0}

.btn-primary{--btn-bg:var(--text);--btn-fg:var(--bg);--btn-bd:var(--text);--btn-bg-hover:var(--text-2);--btn-bd-hover:var(--text-2)}
.btn-secondary{--btn-bg:var(--surface-2);--btn-fg:var(--text);--btn-bd:var(--border)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--text-2);--btn-bd:transparent;--btn-bg-hover:var(--surface-2);--btn-bd-hover:transparent}
.btn-ghost:hover:not(:disabled):not([aria-disabled='true']){color:var(--text)}
.btn-danger{--btn-bg:var(--error);--btn-fg:var(--on-error);--btn-bd:var(--error);--btn-bg-hover:color-mix(in srgb,var(--error),var(--text) 12%);--btn-bd-hover:transparent}

.btn.is-loading{color:transparent;pointer-events:none}
.btn.is-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--btn-fg);border-right-color:transparent;border-radius:50%;animation:spin 0.7s linear infinite}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{border-style:dotted}}

/* ---------- Segmented (переключатель) ---------- */
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
.seg-btn{height:32px;padding:0 var(--s-3);border:0;border-radius:4px;background:transparent;color:var(--text-2);font-size:var(--fs-14);font-weight:500;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.seg-btn:hover{color:var(--text)}
.seg-btn[aria-pressed='true']{background:var(--surface-2);color:var(--text)}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--fs-14);color:var(--text-2)}
.input,.textarea,.select{width:100%;height:40px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:var(--fs-16);line-height:1.2;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.textarea{height:auto;min-height:96px;resize:vertical;line-height:1.5}
.select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input::placeholder,.textarea::placeholder{color:var(--text-3);opacity:1}
.input:hover,.textarea:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.textarea:focus,.select:focus,.input.is-focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.input.is-invalid,.input.is-invalid:focus,.textarea.is-invalid,.select.is-invalid{border-color:var(--error)}
.input.is-valid,.input.is-valid:focus,.textarea.is-valid,.select.is-valid{border-color:var(--success)}
.input:disabled,.textarea:disabled,.select:disabled{opacity:0.5;cursor:not-allowed;background:var(--surface-2)}
.field-msg{margin:0;font-size:var(--fs-12);color:var(--text-3)}
.field-msg.is-error{color:var(--error)}
.field-msg.is-ok{color:var(--success)}

/* ---------- Checkbox / Radio / Switch ---------- */
.check{display:flex;align-items:flex-start;gap:var(--s-3);min-height:24px;font-size:var(--fs-14);cursor:pointer}
.check.is-disabled{opacity:0.5;cursor:not-allowed}
.check-input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:20px;height:20px;margin:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:5px;cursor:inherit;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.check-input:hover:not(:disabled){border-color:var(--text-3)}
.check-input::after{content:'';position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform var(--dur-fast) var(--ease)}
.check-input:checked{background:var(--accent);border-color:var(--accent)}
.check-input:checked::after{transform:rotate(45deg) scale(1)}
.check-input[type='radio']{border-radius:50%}
.check-input[type='radio']::after{left:4px;top:4px;width:10px;height:10px;border:0;border-radius:50%;background:#fff;transform:scale(0)}
.check-input[type='radio']:checked::after{transform:scale(1)}
.check-input:disabled{cursor:not-allowed}

.switch{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-14);cursor:pointer}
.switch.is-disabled{opacity:0.5;cursor:not-allowed}
.switch-input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:22px;margin:0;background:var(--surface-2);border:1px solid var(--text-3);border-radius:var(--r-full);cursor:inherit;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.switch-input::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.switch-input:checked{background:var(--accent);border-color:var(--accent)}
.switch-input:checked::after{background:#fff;transform:translateX(18px)}
.switch-input:disabled{cursor:not-allowed}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-5);transition:border-color var(--dur-fast) var(--ease)}
.card-hover:hover,.card-hover.is-hover{border-color:var(--border-strong)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2)}
.card-title{margin:0;font-size:var(--fs-16);font-weight:500;line-height:1.3}
.card-desc{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.card-footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4)}

/* ---------- Badge ---------- */
.badge{--badge-c:var(--text-3);display:inline-flex;align-items:center;gap:6px;height:24px;padding:4px 10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--badge-c) 14%,transparent);color:var(--badge-c);font-size:var(--fs-12);font-weight:500;line-height:1;white-space:nowrap}
.badge-success{--badge-c:var(--success)}
.badge-warning{--badge-c:var(--warning)}
.badge-error{--badge-c:var(--error)}
.badge-muted{background:var(--surface-2);color:var(--text-3)}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Progress ---------- */
.progress{height:4px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}
.progress-fill{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}

/* ---------- Toast ---------- */
.toast-region{position:fixed;right:var(--s-4);bottom:var(--s-4);z-index:1000;display:flex;flex-direction:column;gap:var(--s-2);width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{--toast-c:var(--text-2);pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);animation:toast-in var(--dur) var(--ease)}
.toast[data-tone='success']{--toast-c:var(--success)}
.toast[data-tone='warning']{--toast-c:var(--warning)}
.toast[data-tone='error']{--toast-c:var(--error)}
.toast-icon{color:var(--toast-c);padding-top:6px}
.toast-text{margin:0;padding-top:6px;font-size:var(--fs-14);color:var(--text)}
.toast.is-leaving{animation:toast-out var(--dur-fast) var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(4px)}}
@media (max-width:480px){.toast-region{left:var(--s-4);right:var(--s-4);width:auto}}

/* ---------- Tooltip ---------- */
.tooltip{position:fixed;left:0;top:0;z-index:1100;max-width:240px;padding:6px 10px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text);font-size:var(--fs-12);line-height:1.4;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.tooltip.is-visible{opacity:1}

/* ---------- Modal ---------- */
.modal{padding:0;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.modal[open]{animation:modal-in var(--dur) var(--ease)}
.modal::backdrop{background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);padding:var(--s-5) var(--s-4) 0 var(--s-6)}
.modal-title{font-size:var(--fs-20);padding-top:6px}
.modal-body{padding:var(--s-3) var(--s-6) var(--s-6);font-size:var(--fs-14);color:var(--text-2)}
.modal-body p{color:var(--text-2)}
.modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-2);padding:0 var(--s-6) var(--s-6)}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(0.98)}to{opacity:1;transform:none}}

/* ---------- ConfirmationCard ---------- */
.confirm{position:relative;overflow:hidden;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.confirm-timer{height:2px;background:var(--surface-2)}
.confirm-timer-fill{display:block;height:100%;background:var(--warning);transform-origin:left center;transition:transform 200ms linear}
.confirm[data-state='confirmed'] .confirm-timer-fill{background:var(--success)}
.confirm[data-state='cancelled'] .confirm-timer-fill,.confirm[data-state='expired'] .confirm-timer-fill{background:var(--text-3)}
.confirm-head{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) 0}
.confirm-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2)}
.confirm-title{margin:0;font-size:var(--fs-16);font-weight:500;line-height:1.3}
.confirm-sub{margin:2px 0 0;font-size:var(--fs-14);color:var(--text-2)}
.confirm-count{margin-left:auto;padding-top:2px;font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.confirm-details{display:grid;gap:var(--s-3);margin:var(--s-4) var(--s-5) 0}
.confirm-details dt{margin-bottom:2px;font-size:var(--fs-12);color:var(--text-3)}
.confirm-details dd{margin:0;font-size:var(--fs-14);color:var(--text);overflow-wrap:anywhere}
.confirm-message{padding:var(--s-3);background:var(--surface-2);border-radius:var(--r-sm);color:var(--text-2)}
.confirm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5) var(--s-5)}
.confirm-cost{font-size:var(--fs-14);color:var(--text-2)}
.confirm-actions{display:flex;gap:var(--s-2);margin-left:auto}
.confirm-after{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:0 var(--s-5) var(--s-5)}
.confirm-after:not(:has(*:not([hidden]))){padding:0}
.confirm-result{margin:0;font-size:var(--fs-14);color:var(--text-2)}
.confirm-result:empty{display:none}

/* ---------- ActionCard ---------- */
.action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-14)}
.action-icon{display:grid;place-items:center;color:var(--text-3)}
.action-text{flex:1 1 160px;min-width:0;color:var(--text);overflow-wrap:anywhere}
.action-meta{font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums}
.action-status{display:grid;place-items:center;color:var(--text-3)}
.action[data-status='done'] .action-status{color:var(--success)}
.action[data-status='error'] .action-status{color:var(--error)}
.action[data-status='blocked'] .action-status{color:var(--warning)}
.action[data-status='running'] .action-status{color:var(--accent-fg)}

/* ---------- PresenceOrb ---------- */
.orb{--orb:48px;position:relative;display:inline-block;flex:none;width:var(--orb);height:var(--orb)}
.orb-sm{--orb:24px}
.orb-lg{--orb:96px}
.orb-glow{position:absolute;inset:-45%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,transparent 0,transparent 30%,color-mix(in srgb,var(--accent) 55%,transparent) 36%,color-mix(in srgb,var(--accent) 14%,transparent) 52%,transparent 70%);animation:orb-breathe 6s ease-in-out infinite}
.orb-core{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 70% 30%,#1c1c24 0,#0a0a0c 68%);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 calc(var(--orb) * 0.18) color-mix(in srgb,var(--accent) 40%,transparent)}
@keyframes orb-breathe{0%,100%{transform:scale(0.92);opacity:0.7}50%{transform:scale(1.06);opacity:1}}

/* Стили для карточки подтверждения (ConfirmCard) */
.action[data-status='needs_confirm'] {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.02) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.action-confirm-buttons {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-2);
  justify-content: flex-end;
}
.action-confirm-buttons button {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s ease;
}
.action-confirm-buttons button:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}
.action-confirm-buttons button:first-child {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.action-confirm-buttons button:first-child:hover {
  background: var(--accent-hover);
}