/* ==========================================================================
   components.css — Design System v1.0.0 shared components (ds-* prefix)
   Built ONLY from semantic tokens (constitution rule 2: no local values).
   Every component ships with both languages (rule 3): direction comes from
   the page (rtl/ltr); only logical properties are used here, so the flip is
   automatic. Numbers/Latin stay LTR via .ds-num (unicode-bidi isolate not
   needed: tabular-nums + text-align end).
   ========================================================================== */

/* ---------- buttons ---------- */
.ds-btn{font:inherit;font-size:.85rem;min-height:var(--control-h);padding:0 18px;border-radius:var(--radius-btn);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.ds-btn:disabled{opacity:.4;cursor:default}
.ds-btn-primary{background:var(--color-primary);border:1px solid var(--color-primary);color:var(--color-primary-ink)}
.ds-btn-primary:not(:disabled):hover{background:var(--color-primary-deep)}
.ds-btn-ghost{background:var(--color-surface);border:1px solid var(--color-line);color:var(--color-ink)}
.ds-btn-ghost:not(:disabled):hover{border-color:var(--color-primary);color:var(--color-primary)}
.ds-btn-s{min-height:var(--control-h-s);padding:0 14px;font-size:.8rem}

/* ---------- chips ---------- */
.ds-chip{display:inline-block;font-size:.68rem;border-radius:var(--radius-chip);padding:2px 10px;
  background:var(--color-accent-soft);border:1px solid var(--color-accent-line);color:var(--color-accent-ink);
  white-space:nowrap;margin:1px 2px}
.ds-chip-neutral{background:var(--color-neutral-soft);border-color:var(--color-line);color:var(--color-muted)}
.ds-chip-danger{background:var(--color-danger-bg);border-color:var(--color-danger-line);color:var(--color-danger)}

/* ---------- panel / card ---------- */
.ds-panel{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-1)}

/* ---------- tabs ---------- */
.ds-tabs{display:flex;gap:6px;margin:14px 0 10px;border-bottom:1px solid var(--color-line)}
.ds-tab{padding:8px 16px;font-size:.85rem;border-radius:var(--radius-btn) var(--radius-btn) 0 0;color:var(--color-muted)}
.ds-tab-on{background:var(--color-primary);color:var(--color-primary-ink);font-weight:600}

/* ---------- smart data table ---------- */
.ds-tbl-wrap{overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.ds-tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.ds-tbl th{background:var(--color-bg);color:var(--color-muted);font-weight:600;text-align:start;
  padding:10px 12px;border-bottom:1px solid var(--color-line);white-space:nowrap}
.ds-tbl td{padding:10px 12px;border-bottom:1px solid var(--color-line-soft);vertical-align:middle}
.ds-tbl tr:last-child td{border-bottom:0}
.ds-num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-center{text-align:center}
/* headers follow their column's alignment class (a bare .ds-num on th loses to .ds-tbl th specificity) */
.ds-tbl th.ds-num{text-align:end}
.ds-tbl th.ds-center{text-align:center}

/* ---------- pager ---------- */
.ds-pager{display:flex;align-items:center;gap:14px;justify-content:center;margin:16px 0;font-size:.85rem;color:var(--color-muted)}

/* ---------- switch (on/off) ---------- */
.ds-switch-label{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:.8rem}
.ds-switch-label input{position:absolute;opacity:0;width:0;height:0}
.ds-switch{width:34px;height:19px;border-radius:10px;background:var(--color-line);position:relative;transition:background .15s;flex:none}
.ds-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:15px;height:15px;border-radius:50%;background:var(--color-surface);transition:transform .15s}
.ds-switch-label input:checked+.ds-switch{background:var(--color-primary)}
.ds-switch-label input:checked+.ds-switch::after{transform:translateX(-15px)}
[dir="ltr"] .ds-switch-label input:checked+.ds-switch::after{transform:translateX(15px)}
.ds-switch-label input:focus-visible+.ds-switch{outline:3px solid var(--color-focus);outline-offset:2px}

/* ---------- notices ---------- */
.ds-notice{background:var(--color-accent-soft);border:1px solid var(--color-accent-line);border-radius:var(--radius-card);
  padding:14px 16px;font-size:.85rem;color:var(--color-accent-ink)}
.ds-notice-danger{background:var(--color-danger-bg);border-color:var(--color-danger-line);color:var(--color-danger)}

/* ---------- text helpers ---------- */
.ds-muted{color:var(--color-muted);font-size:.78rem}

/* ---------- header settings control (theme + font, one click) ---------- */
.ds-settings{position:relative}
.ds-settings-btn{display:grid;place-items:center;min-width:var(--control-h);min-height:var(--control-h);
  border:1px solid var(--color-line);border-radius:var(--radius-btn);background:var(--color-surface);
  color:var(--color-primary);font-size:19px;cursor:pointer}
.ds-settings-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:1300;min-width:220px;
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);padding:12px 14px;font-size:.85rem;color:var(--color-ink)}
.ds-settings-pop[hidden]{display:none}
.ds-settings-pop h3{margin:0 0 6px;font-size:.72rem;font-weight:600;color:var(--color-muted);letter-spacing:.04em}
.ds-settings-pop h3:not(:first-child){margin-top:12px}
.ds-palette-ico{width:22px;height:22px;display:block}
.ds-settings-pop{min-width:320px;max-width:min(360px,94vw);max-height:min(560px,80vh);overflow-y:auto}
.ds-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ds-tcard{border:1.5px solid var(--color-line);border-radius:12px;padding:7px 7px 6px;cursor:pointer;background:var(--color-surface);text-align:center}
.ds-tcard:hover{border-color:var(--color-accent)}
.ds-tcard:has(input:checked){border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);background:var(--color-bg)}
.ds-tcard input,.ds-frow input{position:absolute;opacity:0;pointer-events:none}
.ds-prev{height:52px;border-radius:7px;overflow:hidden;display:flex;border:1px solid rgba(0,0,0,.18);margin-bottom:5px}
.ds-pv-side{width:22%;height:100%}
.ds-pv-main{flex:1;display:flex;flex-direction:column}
.ds-pv-hdr{height:26%}
.ds-pv-body{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 5px}
.ds-pv-block{width:38%;height:62%;border-radius:3px}
.ds-pv-dot{width:7px;height:7px;border-radius:50%;flex:none}
.ds-tname{font-size:12px;color:var(--color-ink);font-weight:500}
.ds-tcard:has(input:checked) .ds-tname{font-weight:700}
/* theme identity previews: each paints the theme's own real colors (identity illustration, not UI colors) */
.ds-t-a .ds-pv-side{background:#3B4E2B}.ds-t-a .ds-pv-hdr{background:#FFF;border-bottom:1px solid #e5dfd2}.ds-t-a .ds-pv-body{background:#F5F3ED}.ds-t-a .ds-pv-block{background:#FFF}.ds-t-a .ds-pv-dot{background:#C4A15A}
.ds-t-b .ds-pv-side{background:#4A4038}.ds-t-b .ds-pv-hdr{background:#FFF;border-bottom:1px solid #E3DCD3}.ds-t-b .ds-pv-body{background:#FAF8F4}.ds-t-b .ds-pv-block{background:#FFF}.ds-t-b .ds-pv-dot{background:#B0804F}
.ds-t-c .ds-pv-side{background:#26313B}.ds-t-c .ds-pv-hdr{background:#FFF;border-bottom:1px solid #D5DDE2}.ds-t-c .ds-pv-body{background:#F2F4F5}.ds-t-c .ds-pv-block{background:#FFF}.ds-t-c .ds-pv-dot{background:#C9A227}
.ds-t-d .ds-pv-side{background:#3B4E2B}.ds-t-d .ds-pv-hdr{background:#FFF;border-bottom:1px solid #E4DDCE}.ds-t-d .ds-pv-body{background:#FAF7F1}.ds-t-d .ds-pv-block{background:#FFF;border-radius:6px}.ds-t-d .ds-pv-dot{background:#C4A15A}.ds-t-d .ds-prev{border-radius:9px}
.ds-t-e .ds-pv-side{background:#1E2420}.ds-t-e .ds-pv-hdr{background:#1E2420;border-bottom:1px solid #46504A}.ds-t-e .ds-pv-body{background:#232A26}.ds-t-e .ds-pv-block{background:#2E3631}.ds-t-e .ds-pv-dot{background:#D9BC77}
.ds-t-f .ds-pv-side{background:#26331A}.ds-t-f .ds-pv-hdr{background:#33431F}.ds-t-f .ds-pv-body{background:#EFEBDD}.ds-t-f .ds-pv-block{background:#FBF9F2}.ds-t-f .ds-pv-dot{background:#C9A24E}
.ds-frows{display:grid;gap:6px}
.ds-frow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--color-line);border-radius:12px;padding:8px 12px;cursor:pointer;background:var(--color-surface)}
.ds-frow:hover{border-color:var(--color-accent)}
.ds-frow:has(input:checked){border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);background:var(--color-bg)}
.ds-fsample{font-size:15px;color:var(--color-ink)}
.ds-fname{font-size:11px;color:var(--color-muted)}
.ds-font-assistant .ds-fsample{font-family:Assistant,var(--font-family-base)}
.ds-font-arial .ds-fsample{font-family:Arial,sans-serif}