/* ==========================================================================
   Stackly UI Kit — components.css
   Reusable components shared by the marketing site, auth pages and app.
   Class reference: see README.md → "Component classes".
   ========================================================================== */

/* ---------- Icons ---------- */
.icon { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.375rem; height: 1.375rem; }

/* ---------- Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 750; font-size: 1.125rem; letter-spacing: -.02em; color: var(--ink); }
.brand__mark { width: 28px; height: 28px; }
.brand__mark .l1 { fill: var(--brand); }
.brand__mark .l2 { fill: var(--accent); }
.brand__mark .l3 { fill: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--btn-h); padding: 0 1rem;
  font-size: var(--text-base); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .icon { width: 1rem; height: 1rem; }

.btn-primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--ink-inverse); }
.btn-ink:hover { background: color-mix(in srgb, var(--ink) 85%, var(--brand)); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
:root[data-theme="dark"] .btn-danger { color: #1A0504; }
.btn-soft { background: var(--brand-soft); color: var(--brand-soft-ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand-soft) 80%, var(--brand)); }

.btn-sm { --btn-h: 2rem; padding: 0 .75rem; font-size: var(--text-sm); }
.btn-lg { --btn-h: 3rem; padding: 0 1.35rem; font-size: var(--text-md); border-radius: 9px; }
.btn-block { width: 100%; }
.btn-icon { width: var(--btn-h); padding: 0; }

.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--brand-contrast); border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn-secondary.is-loading::after { border-color: var(--ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm); color: var(--ink-2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
  position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }

/* ---------- Theme toggle ---------- */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ---------- Forms ---------- */
.field { display: grid; gap: .4rem; min-width: 0; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.label .optional { font-weight: 400; color: var(--ink-3); }
.hint { font-size: var(--text-sm); color: var(--ink-3); }
.field-error { display: none; align-items: center; gap: .35rem; font-size: var(--text-sm); color: var(--danger); font-weight: 500; }
.field-error::before { content: "!"; display: grid; place-items: center; width: .95rem; height: .95rem; flex: none; border-radius: 50%; background: var(--danger); color: var(--surface); font-size: .65rem; font-weight: 800; line-height: 1; }
.field.has-error .field-error { display: flex; }

.input, .select, .textarea {
  width: 100%; min-height: 2.5rem; padding: .55rem .8rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .85; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible,
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input-sm, .select-sm { min-height: 2rem; padding-top: .3rem; padding-bottom: .3rem; font-size: var(--text-sm); }

.input-group { position: relative; display: flex; align-items: center; }
.input-group > .icon { position: absolute; left: .75rem; color: var(--ink-3); pointer-events: none; }
.input-group > .icon ~ .input { padding-left: 2.35rem; }
.input-group .input-action { position: absolute; right: .3rem; }
.input-group .input-action ~ .input, .input-group .input:has(~ .input-action) { padding-right: 2.75rem; }
.input-addon { display: flex; }
.input-addon > span { display: inline-flex; align-items: center; padding: 0 .75rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--ink-3); font-size: var(--text-sm); white-space: nowrap; }
.input-addon > .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }

/* Checkbox & radio */
.check { display: inline-flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: var(--text-base); line-height: 1.4; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 1.1rem; height: 1.1rem; margin-top: .1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::after { content: ""; width: .55rem; height: .32rem; border: 2px solid var(--brand-contrast); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input[type="radio"]::after { width: .45rem; height: .45rem; border: 0; border-radius: 50%; background: var(--brand-contrast); transform: none; }
.check input:checked, .check input:indeterminate { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { opacity: 1; }
.check input:indeterminate::after { opacity: 1; width: .5rem; height: 0; border-left: 0; border-bottom-width: 2px; transform: none; }
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--danger); }
.check-plain { margin: 0; }

/* Switch (checkbox role="switch") */
.switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
  position: relative; width: 2.35rem; height: 1.35rem; border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background-color var(--dur) var(--ease);
}
.switch input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px);
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked { background: var(--brand); }
.switch input:checked::before { transform: translateX(1rem); }
.switch input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch input:disabled { opacity: .5; cursor: not-allowed; }

/* Segmented control (radio group styled as tabs) */
.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; gap: 2px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); transition: background-color var(--dur-fast), color var(--dur-fast); }
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Form message (demo notice after a valid submit) */
.form-notice { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-soft-ink); font-size: var(--text-sm); line-height: 1.5; }
.form-notice .icon { margin-top: .1rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 1.4rem; padding: 0 .5rem; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-brand   { background: var(--brand-soft); color: var(--brand-soft-ink); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--info-soft); color: var(--info); }
.badge-accent  { background: var(--accent); color: #3A2C00; }
.badge-outline { background: transparent; border: 1px solid var(--line-strong); }
.badge-pill    { border-radius: var(--radius-pill); }

/* ---------- Avatars (initials — no photos) ---------- */
.avatar {
  --av: 2rem;
  display: inline-grid; place-items: center; flex: none;
  width: var(--av); height: var(--av); border-radius: 50%;
  font-size: calc(var(--av) * .38); font-weight: 700; letter-spacing: .01em;
  background: var(--av-bg, var(--brand-soft)); color: var(--av-fg, var(--brand-soft-ink));
}
.avatar-xs { --av: 1.5rem; } .avatar-sm { --av: 1.75rem; } .avatar-lg { --av: 2.75rem; } .avatar-xl { --av: 4rem; }
.avatar-square { border-radius: 9px; }
.av-1 { --av-bg: #DCEFE7; --av-fg: #0A5543; }
.av-2 { --av-bg: #E7E3FB; --av-fg: #3F2FA6; }
.av-3 { --av-bg: #FFF1C2; --av-fg: #5A4300; }
.av-4 { --av-bg: #FBE3E1; --av-fg: #8E231F; }
.av-5 { --av-bg: #E2EBFB; --av-fg: #1D4396; }
.av-6 { --av-bg: #E9ECEA; --av-fg: #36423C; }
:root[data-theme="dark"] .av-1 { --av-bg: #123128; --av-fg: #86E3C4; }
:root[data-theme="dark"] .av-2 { --av-bg: #231D48; --av-fg: #BDB3FF; }
:root[data-theme="dark"] .av-3 { --av-bg: #3A3113; --av-fg: #FFE68F; }
:root[data-theme="dark"] .av-4 { --av-bg: #3D1817; --av-fg: #FFABA5; }
:root[data-theme="dark"] .av-5 { --av-bg: #172642; --av-fg: #A9C3FF; }
:root[data-theme="dark"] .av-6 { --av-bg: #26302C; --av-fg: #C7D2CC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .av-1 { --av-bg: #123128; --av-fg: #86E3C4; }
  :root:not([data-theme="light"]) .av-2 { --av-bg: #231D48; --av-fg: #BDB3FF; }
  :root:not([data-theme="light"]) .av-3 { --av-bg: #3A3113; --av-fg: #FFE68F; }
  :root:not([data-theme="light"]) .av-4 { --av-bg: #3D1817; --av-fg: #FFABA5; }
  :root:not([data-theme="light"]) .av-5 { --av-bg: #172642; --av-fg: #A9C3FF; }
  :root:not([data-theme="light"]) .av-6 { --av-bg: #26302C; --av-fg: #C7D2CC; }
}
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -.3rem; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); min-width: 0; }
.card-pad { padding: clamp(1rem, .8rem + .8vw, 1.5rem); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.card-title { font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; }
.card-subtitle { font-size: var(--text-sm); color: var(--ink-3); }
.card-body { padding: 1.25rem; }
.card-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ---------- Alerts ---------- */
.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start;
  padding: .9rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); line-height: 1.5;
}
.alert .icon { margin-top: .1rem; }
.alert-title { font-weight: 650; font-size: var(--text-base); margin-bottom: .1rem; }
.alert-info    { background: var(--info-soft);    border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert-info > .icon { color: var(--info); }
.alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.alert-success > .icon { color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-warning > .icon { color: var(--warning); }
.alert-danger  { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert-danger > .icon { color: var(--danger); }
.alert .icon-btn { width: 1.75rem; height: 1.75rem; margin: -.2rem -.3rem 0 0; }

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed; z-index: var(--z-toast); right: 1rem; bottom: 1rem;
  display: grid; gap: .6rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: start;
  padding: .85rem .9rem; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); line-height: 1.45;
  animation: toast-in var(--dur-slow) var(--ease);
}
.toast.is-leaving { animation: toast-out var(--dur) var(--ease) forwards; }
.toast-title { font-weight: 650; font-size: var(--text-base); color: var(--ink); }
.toast-msg { color: var(--ink-2); }
.toast > .icon { margin-top: .12rem; color: var(--brand); }
.toast-success > .icon { color: var(--success); }
.toast-warning > .icon { color: var(--warning); }
.toast-danger > .icon  { color: var(--danger); }
.toast .icon-btn { width: 1.75rem; height: 1.75rem; margin: -.25rem -.3rem 0 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); animation: fade-in var(--dur) var(--ease); }
.modal-dialog {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: modal-in var(--dur-slow) var(--ease);
}
.modal-dialog-lg { width: min(720px, 100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0; }
.modal-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.015em; }
.modal-body { padding: 1rem 1.25rem 1.25rem; color: var(--ink-2); }
.modal-footer { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
body.has-modal { overflow: hidden; }

/* ---------- Tabs ---------- */
.tabs-list { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs-list::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem .85rem; font-size: var(--text-base); font-weight: 600; color: var(--ink-3); white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.tab:focus-visible { outline-offset: -2px; }
.tab-panel { padding-top: 1.5rem; }
.tab-panel:focus-visible { outline-offset: 4px; }
.tabs-pills .tabs-list { border: 0; background: var(--surface-2); padding: 3px; border-radius: 9px; display: inline-flex; max-width: 100%; }
.tabs-pills .tab { padding: .4rem .8rem; border-radius: 6px; font-size: var(--text-sm); }
.tabs-pills .tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
.tabs-pills .tab[aria-selected="true"]::after { display: none; }

/* ---------- Dropdown menu ---------- */
.dropdown { position: relative; display: inline-flex; }
.menu {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  animation: menu-in var(--dur) var(--ease);
}
.menu-end { left: auto; right: 0; }
.menu-up { top: auto; bottom: calc(100% + 6px); }
.menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border-radius: 6px; text-align: left;
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-2);
}
.menu-item .icon { width: 1rem; height: 1rem; color: var(--ink-3); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .icon { color: var(--danger); }
.menu-item .kbd { margin-left: auto; }
.menu-sep { height: 1px; margin: .35rem -.35rem; background: var(--line); }
.menu-label { padding: .45rem .6rem .25rem; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Tooltip ---------- */
.has-tooltip { position: relative; display: inline-flex; }
.tooltip {
  position: absolute; z-index: var(--z-dropdown); left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 4px); width: max-content; max-width: 240px;
  padding: .4rem .6rem; border-radius: 6px;
  background: var(--ink); color: var(--ink-inverse); font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.has-tooltip:hover .tooltip, .has-tooltip:focus-within .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.has-tooltip.tooltip-dismissed .tooltip { opacity: 0; visibility: hidden; }

/* ---------- Progress & meters ---------- */
.progress { height: .5rem; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--brand); transition: width var(--dur-slow) var(--ease); }
.progress-sm { height: .3rem; }
.progress-warning > span { background: var(--warning); }
.progress-danger > span { background: var(--danger); }
.progress-indeterminate > span { width: 40%; animation: indeterminate 1.4s var(--ease) infinite; }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.progress-ring { --value: 0; --size: 3rem; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--value) * 1%), var(--surface-3) 0);
  display: grid; place-items: center; }
.progress-ring::before { content: attr(data-label); display: grid; place-items: center; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; background: var(--surface); font-size: var(--text-xs); font-weight: 700; }

/* ---------- Skeleton loaders ---------- */
.skeleton {
  display: block; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skeleton-text { height: .75rem; }
.skeleton-title { height: 1.1rem; width: 50%; }
.skeleton-circle { border-radius: 50%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Empty state ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 2.5rem 1.25rem; }
.empty-art { width: 120px; height: 96px; margin-bottom: .4rem; }
.empty-title { font-size: var(--text-md); font-weight: 650; }
.empty-text { color: var(--ink-3); font-size: var(--text-sm); max-width: 38ch; }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.15rem 0; text-align: left; font-size: var(--text-md); font-weight: 600; color: var(--ink);
}
.accordion-trigger .icon { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(45deg); color: var(--brand); }
.accordion-panel { padding: 0 2.5rem 1.25rem 0; color: var(--ink-2); max-width: 70ch; }

/* ---------- Tables ---------- */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: inherit; } /* position: relative keeps .sr-only cells inside the scroller */
.table-wrap:focus-visible { outline-offset: -2px; }
.table { width: 100%; font-size: var(--text-sm); }
.table th, .table td { padding: .75rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--ink-3); font-weight: 600; font-size: var(--text-xs); }
.table tbody tr { transition: background-color var(--dur-fast); }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table tbody tr.is-selected { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.table .cell-check { width: 2.75rem; padding-right: 0; }
.th-sort { display: inline-flex; align-items: center; gap: .3rem; font: inherit; color: inherit; border-radius: 4px; }
.th-sort:hover { color: var(--ink); }
.th-sort .sort-icon { width: .8rem; height: .8rem; opacity: .35; transition: transform var(--dur-fast), opacity var(--dur-fast); }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--ink); }
th[aria-sort="ascending"] .sort-icon { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .sort-icon { opacity: 1; }
.num .th-sort { flex-direction: row-reverse; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.page-btn { min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); display: inline-grid; place-items: center; }
.page-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.page-btn[aria-current="page"] { background: var(--ink); color: var(--ink-inverse); }
.page-btn:disabled { opacity: .4; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); transition: all var(--dur-fast); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }

/* ---------- Code blocks ---------- */
.code-block { position: relative; margin: 1.25rem 0; border-radius: var(--radius-md); background: #0F1714; border: 1px solid #1F2A26; color: #DDE8E3; overflow: hidden; }
.code-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .5rem .45rem 1rem; border-bottom: 1px solid #1F2A26; font-size: var(--text-xs); color: #8FA39A; font-weight: 600; }
.code-block pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; tab-size: 2; }
.code-block code { font-family: inherit; }
.copy-btn { display: inline-flex; align-items: center; gap: .35rem; height: 1.8rem; padding: 0 .6rem; border-radius: 6px; color: #B8C9C1; font-size: var(--text-xs); font-weight: 600; }
.copy-btn:hover { background: #1B2622; color: #fff; }
.copy-btn.is-copied { color: #5FE0B5; }
.copy-btn:focus-visible { outline-color: #5FE0B5; }
.tok-k { color: #FF9E8A; }  /* keyword */
.tok-s { color: #A8E6A1; }  /* string */
.tok-n { color: #FFD84A; }  /* number */
.tok-c { color: #7C8F87; font-style: italic; }  /* comment */
.tok-f { color: #8CC8FF; }  /* function / property */
.tok-p { color: #C9B8FF; }  /* punctuation-ish / flags */
:not(pre) > code { font-family: var(--font-mono); font-size: .86em; padding: .12em .38em; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 1rem; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs .icon { width: .85rem; height: .85rem; }

/* ---------- Dividers & misc ---------- */
.divider { display: flex; align-items: center; gap: .75rem; color: var(--ink-3); font-size: var(--text-sm); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-3); }
.status-dot.is-online { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.list-plain { list-style: none; padding: 0; }
.check-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.check-list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.check-list .icon { width: 1.1rem; height: 1.1rem; color: var(--brand); margin-top: .18rem; }