/* ==========================================================================
   Firoozeh · component primitives
   Naming: .k-<component>[--<variant>] and .k-<component>__<part>.
   State lives in ARIA/data attributes (aria-selected, aria-invalid, data-state)
   so styling always matches what assistive tech announces.
   ========================================================================== */

/* ---------- kashi band: the signature stripe stack ---------- */
.k-band { display: block; height: 6px; background:
  linear-gradient(to bottom, var(--tile-firoozeh) 0 33.3%, var(--tile-khormalu) 33.3% 50%, var(--tile-khesht) 50% 66.6%, var(--tile-pesteh) 66.6% 83.3%, var(--tile-lajvard) 83.3% 100%); }
.k-band--thin { height: 4px; }
.k-band--loading { background-size: 200% 100%; background-image:
  repeating-linear-gradient(90deg, var(--tile-firoozeh) 0 24px, var(--tile-khormalu) 24px 36px, var(--tile-khesht) 36px 48px, var(--tile-pesteh) 48px 60px);
  animation: k-weave 900ms linear infinite; }
@keyframes k-weave { to { background-position: -120px 0; } }

/* The khatam (8-point star) mark used for the logo, avatars of the AI and empty states */
.k-khatam { width: 2rem; height: 2rem; color: var(--k-accent); flex: none; }

/* ---------- buttons ---------- */
.k-btn {
  --b-bg: var(--k-surface); --b-fg: var(--k-ink); --b-line: var(--k-line-strong); --b-hover: var(--k-surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-2);
  min-height: var(--k-control-h); padding: 0 var(--k-4);
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-line); border-radius: var(--k-radius-sm);
  font: 700 var(--k-text-sm) / 1 var(--k-font-display); white-space: nowrap; text-decoration: none;
  transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease), transform var(--k-dur-1) var(--k-ease), box-shadow var(--k-dur-1);
  position: relative; user-select: none; -webkit-tap-highlight-color: transparent;
}
.k-btn:hover { background: var(--b-hover); color: var(--b-fg); }
.k-btn:active:not(:disabled) { transform: translateY(1px); }
.k-btn:focus-visible { outline: none; box-shadow: var(--k-ring); }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.k-btn--primary { --b-bg: var(--k-accent); --b-fg: var(--k-on-accent); --b-line: var(--k-accent); --b-hover: var(--k-accent-hover); }
.k-btn--deep { --b-bg: var(--k-deep); --b-fg: var(--k-on-deep); --b-line: var(--k-deep); --b-hover: color-mix(in srgb, var(--k-deep) 85%, white); }
.k-btn--ghost { --b-bg: transparent; --b-line: transparent; --b-hover: var(--k-surface-2); }
.k-btn--danger { --b-bg: var(--k-surface); --b-fg: var(--k-danger); --b-line: color-mix(in srgb, var(--k-danger) 45%, transparent); --b-hover: var(--k-danger-soft); }
.k-btn--danger-solid { --b-bg: var(--k-danger); --b-fg: var(--k-on-danger); --b-line: var(--k-danger); --b-hover: color-mix(in srgb, var(--k-danger) 85%, black); }
.k-btn--sm { min-height: var(--k-control-h-sm); padding: 0 var(--k-3); font-size: var(--k-text-sm); }
.k-btn--lg { min-height: 3rem; padding: 0 var(--k-5); font-size: var(--k-text-md); }
.k-btn--block { width: 100%; }
.k-btn--icon { padding: 0; width: var(--k-control-h); }
.k-btn--icon.k-btn--sm { width: var(--k-control-h-sm); }
.k-btn[data-loading="true"] { color: transparent; pointer-events: none; }
.k-btn[data-loading="true"]::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid var(--b-fg); border-inline-end-color: transparent; animation: k-spin 700ms linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-btn-group { display: inline-flex; }
.k-btn-group > .k-btn { border-radius: 0; margin-inline-start: -1px; }
.k-btn-group > .k-btn:first-child { border-start-start-radius: var(--k-radius-sm); border-end-start-radius: var(--k-radius-sm); margin-inline-start: 0; }
.k-btn-group > .k-btn:last-child { border-start-end-radius: var(--k-radius-sm); border-end-end-radius: var(--k-radius-sm); }

/* ---------- form fields ---------- */
.k-field { display: flex; flex-direction: column; gap: var(--k-1); min-width: 0; }
.k-label { font: 700 var(--k-text-sm) / 1.5 var(--k-font-display); color: var(--k-ink-2); }
.k-label .k-req { color: var(--k-warm); margin-inline-start: 2px; }
.k-hint { font-size: var(--k-text-sm); color: var(--k-muted); }
.k-error { font-size: var(--k-text-sm); color: var(--k-danger); display: flex; gap: var(--k-1); align-items: center; }
.k-error:empty { display: none; }
.k-input, .k-select, .k-textarea {
  width: 100%; min-height: var(--k-control-h); padding: 0 var(--k-3);
  background: var(--k-surface); color: var(--k-ink);
  border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-sm);
  font-size: var(--k-text-md); line-height: 1.5;
  transition: border-color var(--k-dur-1), box-shadow var(--k-dur-1), background var(--k-dur-1);
}
.k-textarea { padding: var(--k-2) var(--k-3); min-height: 6rem; resize: vertical; line-height: var(--k-leading-body); }
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-faint); }
.k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--k-muted); }
.k-input:focus, .k-select:focus, .k-textarea:focus { outline: none; border-color: var(--k-accent); box-shadow: var(--k-ring); }
.k-input[aria-invalid="true"], .k-select[aria-invalid="true"], .k-textarea[aria-invalid="true"] { border-color: var(--k-danger); }
.k-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-danger) 30%, transparent); }
.k-input:disabled, .k-select:disabled, .k-textarea:disabled { background: var(--k-surface-2); color: var(--k-muted); }
.k-input--sm, .k-select--sm { min-height: var(--k-control-h-sm); font-size: var(--k-text-sm); }
.k-input[type="number"], .k-input[type="tel"], .k-input[type="email"], .k-input--ltr { direction: ltr; text-align: end; }
.k-input--code { direction: ltr; text-align: center; letter-spacing: 0.6em; font: 700 var(--k-text-2xl) / 1 var(--k-font-mono); min-height: 3.5rem; }
.k-select { appearance: none; padding-inline-end: var(--k-6); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23566c6e' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left var(--k-3) center; }
[dir="ltr"] .k-select { background-position: right var(--k-3) center; }
.k-input-wrap { position: relative; display: flex; align-items: center; }
.k-input-wrap > .k-icon { position: absolute; inset-inline-start: var(--k-3); color: var(--k-faint); pointer-events: none; }
.k-input-wrap > .k-icon + .k-input { padding-inline-start: 2.5rem; }
.k-input-wrap > .k-input-action { position: absolute; inset-inline-end: var(--k-1); }
.k-input-wrap > .k-input-action + .k-input, .k-input-wrap .k-input:has(+ .k-input-action) { padding-inline-end: 2.75rem; }
.k-form-grid { display: grid; gap: var(--k-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.k-form-grid > .k-field--wide { grid-column: 1 / -1; }
.k-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--k-2); min-width: 0; }
.k-fieldset > legend { padding: 0; margin-bottom: var(--k-2); }

/* checkbox / radio: square tile and round bead */
.k-check, .k-radio { display: inline-flex; align-items: flex-start; gap: var(--k-2); cursor: pointer; font-size: var(--k-text-md); line-height: 1.6; }
.k-check input, .k-radio input { appearance: none; margin: 0.2em 0 0; flex: none; width: 1.125rem; height: 1.125rem;
  border: 1.5px solid var(--k-line-strong); background: var(--k-surface); display: grid; place-content: center; cursor: pointer;
  transition: background var(--k-dur-1), border-color var(--k-dur-1); }
.k-check input { border-radius: var(--k-radius-xs); }
.k-radio input { border-radius: 50%; }
.k-check input::before { content: ""; width: 0.65rem; height: 0.65rem; transform: scale(0); transition: transform var(--k-dur-1) var(--k-ease-out);
  background: var(--k-on-accent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.k-radio input::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: scale(0); background: var(--k-on-accent); transition: transform var(--k-dur-1) var(--k-ease-out); }
.k-check input:checked, .k-radio input:checked { background: var(--k-accent); border-color: var(--k-accent); }
.k-check input:checked::before, .k-radio input:checked::before { transform: scale(1); }
.k-check input:focus-visible, .k-radio input:focus-visible { box-shadow: var(--k-ring); outline: none; }

/* switch */
.k-switch { display: inline-flex; align-items: center; gap: var(--k-3); cursor: pointer; }
.k-switch input { appearance: none; margin: 0; width: 2.75rem; height: 1.5rem; border-radius: var(--k-radius-pill); background: var(--k-line-strong);
  position: relative; cursor: pointer; transition: background var(--k-dur-2) var(--k-ease); flex: none; }
.k-switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: #fff; box-shadow: var(--k-shadow-1); transition: transform var(--k-dur-2) var(--k-ease-out); }
.k-switch input:checked { background: var(--k-accent); }
[dir="rtl"] .k-switch input:checked::after { transform: translateX(-1.25rem); }
[dir="ltr"] .k-switch input:checked::after, .k-switch input:checked::after { transform: translateX(1.25rem); }
[dir="rtl"] .k-switch input:checked::after { transform: translateX(-1.25rem); }
.k-switch input:focus-visible { box-shadow: var(--k-ring); outline: none; }
.k-switch input:disabled { opacity: 0.5; }

/* segmented control (radio group styled as tiles) */
.k-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--k-surface-2); border: 1px solid var(--k-line); border-radius: var(--k-radius-md); }
.k-seg > button, .k-seg > label { border: 0; background: transparent; padding: 0 var(--k-3); min-height: calc(var(--k-control-h-sm)); border-radius: var(--k-radius-sm);
  font: 400 var(--k-text-sm) / 1 var(--k-font-display); color: var(--k-muted); display: inline-flex; align-items: center; gap: var(--k-1); cursor: pointer; }
.k-seg > [aria-pressed="true"], .k-seg > [aria-checked="true"], .k-seg > label:has(input:checked) { background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow-1); font-weight: 700; }
.k-seg input { position: absolute; opacity: 0; pointer-events: none; }

/* ---------- tags, badges, status ---------- */
.k-tag { display: inline-flex; align-items: center; gap: var(--k-1); padding: 0.125rem var(--k-2); min-height: 1.625rem;
  border-radius: var(--k-radius-xs); background: var(--k-surface-2); color: var(--k-ink-2); border: 1px solid var(--k-line);
  font-size: var(--k-text-sm); line-height: 1.4; white-space: nowrap; }
.k-tag button { border: 0; background: none; padding: 0; color: inherit; display: inline-grid; }
.k-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem var(--k-2); border-radius: var(--k-radius-xs);
  font: 700 var(--k-text-sm) / 1.5 var(--k-font-display); background: var(--k-surface-2); color: var(--k-ink-2); white-space: nowrap; }
.k-badge::before { content: ""; width: 0.5rem; height: 0.5rem; background: currentColor; flex: none; } /* square pip */
.k-badge--plain::before { display: none; }
.k-badge--accent { background: var(--k-accent-soft); color: var(--k-accent-ink); }
.k-badge--ok { background: var(--k-ok-soft); color: var(--k-ok); }
.k-badge--warn { background: var(--k-warn-soft); color: var(--k-warn); }
.k-badge--danger { background: var(--k-danger-soft); color: var(--k-danger); }
.k-badge--info { background: var(--k-info-soft); color: var(--k-info); }
.k-badge--warm { background: var(--k-warm-soft); color: var(--k-warm); }
.k-badge--clay { background: var(--k-clay-soft); color: var(--k-clay); }
.k-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: var(--k-radius-pill);
  background: var(--k-warm); color: var(--k-on-warm); font: 700 0.8125rem / 1 var(--k-font-display); }
.k-count:empty, .k-count[data-value="0"] { display: none; }

/* ---------- avatar: a glazed square tile ---------- */
.k-avatar { --a: 2.25rem; width: var(--a); height: var(--a); flex: none; display: inline-grid; place-items: center; overflow: hidden;
  border-radius: var(--k-radius-sm); background: var(--k-accent-soft); color: var(--k-accent-ink);
  font: 700 calc(var(--a) * 0.42) / 1 var(--k-font-display); }
.k-avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-avatar--sm { --a: 1.75rem; }
.k-avatar--lg { --a: 3.25rem; }
.k-avatar[data-tone="1"] { background: var(--k-warm-soft); color: var(--k-warm); }
.k-avatar[data-tone="2"] { background: var(--k-clay-soft); color: var(--k-clay); }
.k-avatar[data-tone="3"] { background: var(--k-ok-soft); color: var(--k-ok); }
.k-avatar[data-tone="4"] { background: var(--k-info-soft); color: var(--k-info); }

/* ---------- surfaces ---------- */
.k-card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-md); }
.k-card--pad { padding: var(--k-5); }
.k-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); padding: var(--k-4) var(--k-5); border-bottom: 1px solid var(--k-line); flex-wrap: wrap; }
.k-card__title { font: 700 var(--k-text-lg) / 1.4 var(--k-font-display); }
.k-card__body { padding: var(--k-5); }
.k-card__foot { padding: var(--k-3) var(--k-5); border-top: 1px solid var(--k-line); display: flex; gap: var(--k-2); justify-content: flex-end; flex-wrap: wrap; background: var(--k-surface-2); border-radius: 0 0 var(--k-radius-md) var(--k-radius-md); }
@media (max-width: 40rem) { .k-card__head, .k-card__body { padding-inline: var(--k-4); } .k-card--pad { padding: var(--k-4); } }
.k-panel { background: var(--k-surface-2); border-radius: var(--k-radius-md); padding: var(--k-4); }
.k-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-3); margin-bottom: var(--k-4); flex-wrap: wrap; }
.k-section-title h2 { font-size: var(--k-text-xl); }

/* stat: number first, label second; a stripe marks the series colour */
.k-stat { position: relative; padding: var(--k-4) var(--k-5); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-md); overflow: hidden; }
.k-stat::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--k-stat-color, var(--k-series-1)); }
.k-stat__value { font: 700 var(--k-text-3xl) / 1.15 var(--k-font-display); font-variant-numeric: tabular-nums; }
.k-stat__label { color: var(--k-muted); font-size: var(--k-text-sm); margin-top: var(--k-1); }
.k-stat__delta { font-size: var(--k-text-sm); color: var(--k-ok); }

/* alert / callout */
.k-alert { display: flex; gap: var(--k-3); align-items: flex-start; padding: var(--k-3) var(--k-4); border-radius: var(--k-radius-sm);
  background: var(--k-info-soft); color: var(--k-ink); border-inline-start: 4px solid var(--k-info); font-size: var(--k-text-sm); line-height: 1.7; }
.k-alert > .k-icon { color: var(--k-info); margin-top: 0.15em; }
.k-alert--ok { background: var(--k-ok-soft); border-color: var(--k-ok); } .k-alert--ok > .k-icon { color: var(--k-ok); }
.k-alert--warn { background: var(--k-warn-soft); border-color: var(--k-warn); } .k-alert--warn > .k-icon { color: var(--k-warn); }
.k-alert--danger { background: var(--k-danger-soft); border-color: var(--k-danger); } .k-alert--danger > .k-icon { color: var(--k-danger); }
.k-alert:empty { display: none; }

/* ---------- table ---------- */
.k-table-wrap { overflow-x: auto; border: 1px solid var(--k-line); border-radius: var(--k-radius-md); background: var(--k-surface); }
.k-table { font-size: var(--k-text-sm); }
.k-table th { text-align: start; font: 700 var(--k-text-sm) / 1.4 var(--k-font-display); color: var(--k-muted); background: var(--k-surface-2);
  padding: var(--k-row-pad) var(--k-4); border-bottom: 1px solid var(--k-line); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.k-table td { padding: var(--k-row-pad) var(--k-4); border-bottom: 1px solid var(--k-line); vertical-align: middle; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr { transition: background var(--k-dur-1); }
.k-table tbody tr:hover { background: color-mix(in srgb, var(--k-accent-soft) 45%, transparent); }
.k-table tr[data-clickable] { cursor: pointer; }
.k-table .k-col-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-table .k-col-actions { text-align: end; white-space: nowrap; width: 1%; }
.k-table th button.k-sort { all: unset; cursor: pointer; display: inline-flex; gap: var(--k-1); align-items: center; }
.k-table th button.k-sort:focus-visible { outline: 2px solid var(--k-focus); }
@media (max-width: 48rem) {
  .k-table--stack thead { display: none; }
  .k-table--stack, .k-table--stack tbody, .k-table--stack tr, .k-table--stack td { display: block; width: 100%; }
  .k-table--stack tr { padding: var(--k-3) var(--k-4); border-bottom: 1px solid var(--k-line); }
  .k-table--stack td { border: 0; padding: var(--k-1) 0; display: flex; justify-content: space-between; gap: var(--k-3); }
  .k-table--stack td::before { content: attr(data-label); color: var(--k-muted); font-family: var(--k-font-display); }
  .k-table--stack .k-col-actions { justify-content: flex-start; width: auto; }
  .k-table--stack .k-col-actions::before { display: none; }
}

/* ---------- tabs ---------- */
.k-tabs { display: flex; gap: var(--k-1); border-bottom: 1px solid var(--k-line); overflow-x: auto; scrollbar-width: none; }
.k-tabs::-webkit-scrollbar { display: none; }
.k-tab { border: 0; background: none; padding: var(--k-3) var(--k-3); color: var(--k-muted); font: 400 var(--k-text-sm) / 1 var(--k-font-display);
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: var(--k-2); align-items: center; }
.k-tab:hover { color: var(--k-ink); }
.k-tab[aria-selected="true"] { color: var(--k-ink); font-weight: 700; border-bottom-color: var(--k-accent); }
.k-tabpanel:focus-visible { outline: none; }

/* ---------- pagination ---------- */
.k-pager { display: flex; align-items: center; gap: var(--k-1); justify-content: center; flex-wrap: wrap; }
.k-pager button { min-width: var(--k-control-h-sm); height: var(--k-control-h-sm); border: 1px solid var(--k-line); background: var(--k-surface);
  border-radius: var(--k-radius-sm); font: 400 var(--k-text-sm) / 1 var(--k-font-display); display: inline-grid; place-items: center; }
.k-pager button[aria-current="page"] { background: var(--k-deep); color: var(--k-on-deep); border-color: var(--k-deep); font-weight: 700; }
.k-pager button:disabled { opacity: 0.4; }

/* ---------- tooltip ---------- */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px);
  background: var(--k-deep); color: var(--k-on-deep); padding: 0.25rem 0.5rem; border-radius: var(--k-radius-xs);
  font: 400 var(--k-text-sm) / 1.4 var(--k-font-body); white-space: nowrap; pointer-events: none; opacity: 0; z-index: var(--k-z-popover);
  transition: opacity var(--k-dur-1), transform var(--k-dur-1) var(--k-ease-out); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }
[data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 6px); }
/* touch screens never hover; the invisible bubble near a screen edge also widened the page (sideways scroll on phones) */
@media (hover: none), (max-width: 40rem) { [data-tip]::after { display: none; } } /* touch / narrow: no hover, and a hidden tip near the edge would widen the page */

/* ---------- popover / menu ---------- */
.k-popover { position: fixed; z-index: var(--k-z-popover); min-width: 12rem; max-width: min(22rem, calc(100vw - 1rem));
  background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-3); padding: var(--k-1);
  animation: k-pop var(--k-dur-2) var(--k-ease-out); }
@keyframes k-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.k-menu { display: flex; flex-direction: column; }
.k-menu__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--k-2); padding: var(--k-2) var(--k-3); border-radius: var(--k-radius-sm);
  font-size: var(--k-text-sm); cursor: pointer; color: var(--k-ink); text-decoration: none; }
.k-menu__item:hover, .k-menu__item:focus-visible { background: var(--k-surface-2); color: var(--k-ink); outline: none; }
.k-menu__item--danger { color: var(--k-danger); }
.k-menu__sep { height: 1px; background: var(--k-line); margin: var(--k-1) 0; }
.k-menu__label { padding: var(--k-2) var(--k-3) var(--k-1); font: 400 var(--k-text-sm) / 1 var(--k-font-display); color: var(--k-faint); }

/* ---------- modal (native <dialog>) ---------- */
.k-modal { border: 0; padding: 0; background: var(--k-surface); color: var(--k-ink); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-3);
  width: min(var(--k-modal-w, 36rem), calc(100vw - 2rem)); max-height: min(88vh, 54rem); overflow: hidden; display: none; flex-direction: column; }
.k-modal[open] { display: flex; animation: k-rise var(--k-dur-3) var(--k-ease-out); }
.k-modal--wide { --k-modal-w: 56rem; }
.k-modal--full { --k-modal-w: 72rem; height: 88vh; }
.k-modal::backdrop { background: var(--k-overlay); backdrop-filter: blur(2px); animation: k-fade var(--k-dur-2) var(--k-ease); }
@keyframes k-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes k-fade { from { opacity: 0; } }
.k-modal__head { display: flex; align-items: center; gap: var(--k-3); padding: var(--k-4) var(--k-5); border-bottom: 1px solid var(--k-line); }
.k-modal__head h2 { font-size: var(--k-text-xl); flex: 1; }
.k-modal__body { padding: var(--k-5); overflow-y: auto; flex: 1; }
.k-modal__foot { padding: var(--k-3) var(--k-5); border-top: 1px solid var(--k-line); display: flex; gap: var(--k-2); justify-content: flex-end; background: var(--k-surface-2); flex-wrap: wrap; }
@media (max-width: 40rem) {
  .k-modal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; }
  .k-modal--full { height: 92vh; }
  .k-modal[open] { animation-name: k-sheet; }
  .k-modal__body { padding: var(--k-4); }
}
@keyframes k-sheet { from { transform: translateY(100%); } }

/* ---------- drawer ---------- */
.k-drawer { border: 0; padding: 0; margin: 0; margin-inline-start: auto; height: 100vh; height: 100dvh; max-height: none;
  width: min(var(--k-drawer-w, 26rem), 92vw); background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow-3); display: none; flex-direction: column; }
.k-drawer[open] { display: flex; animation: k-slide-in var(--k-dur-3) var(--k-ease-out); }
.k-drawer--start { margin-inline-start: 0; margin-inline-end: auto; }
.k-drawer::backdrop { background: var(--k-overlay); }
[dir="rtl"] .k-drawer[open] { animation-name: k-slide-in-rtl; }
@keyframes k-slide-in { from { transform: translateX(100%); } }
@keyframes k-slide-in-rtl { from { transform: translateX(-100%); } }
[dir="rtl"] .k-drawer--start[open] { animation-name: k-slide-in; }

/* ---------- toast ---------- */
.k-toasts { position: fixed; z-index: var(--k-z-toast); inset-block-end: var(--k-4); inset-inline-start: var(--k-4); display: flex; flex-direction: column; gap: var(--k-2);
  width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.k-toast { pointer-events: auto; display: flex; gap: var(--k-3); align-items: flex-start; padding: var(--k-3) var(--k-4); border-radius: var(--k-radius-md);
  background: var(--k-deep); color: var(--k-on-deep); box-shadow: var(--k-shadow-3); font-size: var(--k-text-sm); line-height: 1.7;
  animation: k-rise var(--k-dur-3) var(--k-ease-out); position: relative; overflow: hidden; }
.k-toast::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--tile-firoozeh); }
.k-toast[data-tone="ok"]::before { background: var(--tile-pesteh); }
.k-toast[data-tone="error"]::before { background: var(--tile-khormalu); }
.k-toast[data-tone="warn"]::before { background: var(--tile-khesht); }
.k-toast__msg { flex: 1; }
.k-toast button { border: 0; background: none; color: inherit; opacity: 0.7; padding: 0; }
.k-toast button:hover { opacity: 1; }
.k-toast__action { font: 700 var(--k-text-sm) / 1.6 var(--k-font-display); text-decoration: underline; opacity: 1 !important; }
.k-toast[data-leaving] { animation: k-fade var(--k-dur-2) reverse forwards; }
@media (max-width: 40rem) { .k-toasts { inset-inline: var(--k-3); width: auto; inset-block-end: calc(var(--k-3) + env(safe-area-inset-bottom)); } }

/* ---------- skeleton ---------- */
.k-skel { display: block; border-radius: var(--k-radius-sm); min-height: 1em;
  background: linear-gradient(90deg, var(--k-surface-2) 0%, var(--k-surface-3) 40%, var(--k-surface-2) 80%); background-size: 300% 100%; animation: k-shimmer 1.4s var(--k-ease) infinite; }
.k-skel--line { height: 0.9rem; margin: 0.4rem 0; }
.k-skel--title { height: 1.6rem; width: 40%; }
.k-skel--block { height: 7rem; }
@keyframes k-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- empty state ---------- */
.k-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-3); padding: var(--k-7) var(--k-5); color: var(--k-muted); }
.k-empty__mark { width: 4rem; height: 4rem; color: var(--k-accent); opacity: 0.9; }
.k-empty__title { font: 700 var(--k-text-lg) / 1.4 var(--k-font-display); color: var(--k-ink); }
.k-empty p { max-width: 36ch; font-size: var(--k-text-sm); line-height: 1.8; }

/* ---------- misc primitives ---------- */
.k-kbd { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; border: 1px solid var(--k-line-strong);
  border-bottom-width: 2px; border-radius: var(--k-radius-xs); font: 400 0.8125rem / 1 var(--k-font-mono); color: var(--k-muted); background: var(--k-surface); }
.k-divider { display: flex; align-items: center; gap: var(--k-3); color: var(--k-faint); font-size: var(--k-text-sm); }
.k-divider::before, .k-divider::after { content: ""; flex: 1; height: 1px; background: var(--k-line); }
.k-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-1); font-size: var(--k-text-sm); color: var(--k-muted); list-style: none; padding: 0; margin: 0; }
.k-crumbs li + li::before { content: "/"; margin-inline-end: var(--k-1); color: var(--k-faint); }
.k-crumbs a { color: var(--k-muted); text-decoration: none; }
.k-crumbs a:hover { color: var(--k-accent-ink); }
.k-crumbs [aria-current="page"] { color: var(--k-ink); }
.k-copy { display: flex; align-items: stretch; border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-sm); overflow: hidden; background: var(--k-surface-2); }
.k-copy code, .k-copy input { flex: 1; min-width: 0; padding: var(--k-2) var(--k-3); border: 0; background: transparent; font: 400 var(--k-text-sm) / 1.6 var(--k-font-mono); direction: ltr; overflow-x: auto; white-space: nowrap; }
.k-copy .k-btn { border-radius: 0; border: 0; border-inline-start: 1px solid var(--k-line-strong); }
.k-code { display: block; padding: var(--k-4); background: var(--k-deep); color: var(--k-on-deep); border-radius: var(--k-radius-md); overflow-x: auto; white-space: pre; font: 400 var(--k-text-sm) / 1.7 var(--k-font-mono); direction: ltr; text-align: left; }
.k-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--k-2); text-align: center; padding: var(--k-6) var(--k-4);
  border: 1.5px dashed var(--k-line-strong); border-radius: var(--k-radius-md); background: var(--k-surface-2); color: var(--k-muted); cursor: pointer; transition: border-color var(--k-dur-1), background var(--k-dur-1); position: relative; }
.k-dropzone:hover, .k-dropzone[data-over] { border-color: var(--k-accent); background: var(--k-accent-soft); color: var(--k-accent-ink); }
.k-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.k-dropzone:focus-within { box-shadow: var(--k-ring); }
.k-progress { height: 6px; background: var(--k-surface-3); border-radius: var(--k-radius-pill); overflow: hidden; }
.k-progress > span { display: block; height: 100%; background: var(--k-accent); width: var(--v, 0%); transition: width var(--k-dur-3) var(--k-ease); }
.k-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--k-2); }
.k-thumb { position: relative; aspect-ratio: 1; border-radius: var(--k-radius-sm); overflow: hidden; border: 1px solid var(--k-line); background: var(--k-surface-2); }
.k-thumb img { width: 100%; height: 100%; object-fit: cover; }
.k-thumb .k-btn { position: absolute; top: var(--k-1); inset-inline-end: var(--k-1); }
.k-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--k-line-strong); border-inline-end-color: var(--k-accent); animation: k-spin 700ms linear infinite; display: inline-block; }
.k-dot-live { width: 0.5rem; height: 0.5rem; background: var(--k-ok); display: inline-block; box-shadow: 0 0 0 0 color-mix(in srgb, var(--k-ok) 60%, transparent); animation: k-pulse 2s var(--k-ease) infinite; }
@keyframes k-pulse { 70% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- command palette ---------- */
.k-palette { --k-modal-w: 38rem; margin-top: 12vh; }
.k-palette .k-modal__body { padding: var(--k-2); }
.k-palette__input { border: 0; border-bottom: 1px solid var(--k-line); border-radius: 0; min-height: 3.25rem; font-size: var(--k-text-lg); padding-inline: var(--k-5); background: transparent; }
.k-palette__input:focus { box-shadow: none; border-color: var(--k-accent); }
.k-palette__list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.k-palette__item { display: flex; align-items: center; gap: var(--k-3); padding: var(--k-2) var(--k-3); border-radius: var(--k-radius-sm); cursor: pointer; }
.k-palette__item[aria-selected="true"] { background: var(--k-accent-soft); color: var(--k-accent-ink); }
.k-palette__item small { margin-inline-start: auto; color: var(--k-faint); }
/* LTR values (email/phone/number) inside an RTL icon field: the icon sits on the physical right,
   so reserve physical right padding instead of inline-start (which flips to the left in an LTR input). */
[dir="rtl"] .k-input-wrap > .k-icon + .k-input:is([dir="ltr"], [type="email"], [type="tel"], [type="number"], .k-input--ltr) { padding-inline-start: var(--k-3); padding-right: 2.5rem; }