/* ═══════════════════════════════════════════════════════════════════
   Ghawy design system — the generic `t-` components (PLATFORM-REDESIGN §5.1).
   Moved out of team-ui.css unchanged; the team dashboard and the member app
   both load it, after ghawy-tokens.css.

   Every colour, size, radius, shadow, z-index and duration comes from
   ghawy-tokens.css. One implementation per component, prefix `t-`.
   The admin shell and the team sections' layout hooks are in team-shell.css.

   Direction: logical properties only (inline-start / inline-end), so the
   same rules serve Arabic (RTL, the default) and English (LTR). Only
   directional icons are mirrored (.t-flip), never search, clocks, refresh,
   charts or numbers (Material, bidirectionality).
═══════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.t-app {
  margin: 0;
  min-height: 100vh;
  background: var(--t-bg);
  color: var(--t-text);
  font-family: var(--t-font);
  font-size: var(--t-fs-14);
  line-height: var(--t-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.t-app [hidden] { display: none !important; }
:where(.t-app) :where(h1, h2, h3, h4) { margin: 0; line-height: var(--t-lh-tight); color: var(--t-text); }
:where(.t-app) :where(p) { margin: 0; }
:where(.t-app) :where(a) { color: var(--t-accent-ink); text-underline-offset: 3px; }
:where(.t-app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.t-app) :where(img) { max-width: 100%; }
:where(.t-app) :where(code) { font-family: var(--t-font-mono); font-size: .92em; }
.t-app ::selection { background: var(--t-accent); color: var(--t-on-accent); }
.t-num, .t-app .t-table td.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.t-ltr { direction: ltr; unicode-bidi: isolate; }
.t-muted { color: var(--t-text-3); }
.t-text-2 { color: var(--t-text-2); }
.t-nowrap { white-space: nowrap; }
.t-strong { font-weight: var(--t-fw-bold); color: var(--t-text); }
.t-sr, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.t-app :focus { outline: none; }
.t-app :focus-visible {
  outline: 2px solid var(--t-focus);
  outline-offset: 2px;
  border-radius: var(--t-r-sm);
}
.t-skip {
  position: fixed; inset-block-start: var(--t-2); inset-inline-start: var(--t-2);
  z-index: calc(var(--t-z-toast) + 1);
  padding: var(--t-2) var(--t-4); border-radius: var(--t-r-md);
  background: var(--t-accent); color: var(--t-on-accent); font-weight: var(--t-fw-bold);
  transform: translateY(-160%); transition: transform var(--t-dur) var(--t-ease);
}
.t-skip:focus { transform: none; }
.t-flip { display: inline-flex; }
[dir="rtl"] .t-flip { transform: scaleX(-1); }

/* Lucide icons: one size system */
.t-ic { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.9; }
.t-ic-sm { width: 15px; height: 15px; }
.t-ic-xs { width: 13px; height: 13px; }
.t-ic-lg { width: 22px; height: 22px; }
svg.lucide { flex: 0 0 auto; }

/* Scrollbars (the dark theme's default ones are bright grey) */
.t-app * { scrollbar-width: thin; scrollbar-color: var(--t-border-strong) transparent; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--t-2);
  min-height: 36px; padding: 0 var(--t-4);
  border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface-2); color: var(--t-text);
  font-weight: var(--t-fw-medium); font-size: var(--t-fs-14); line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}
.t-btn:hover { background: var(--t-surface-3); border-color: var(--t-border-strong); }
.t-btn:disabled, .t-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.t-btn--primary { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); font-weight: var(--t-fw-bold); }
.t-btn--primary:hover { background: var(--t-accent-hover); border-color: var(--t-accent-hover); }
.t-btn--ghost { background: transparent; border-color: transparent; color: var(--t-text-2); }
.t-btn--ghost:hover { background: var(--t-surface-2); color: var(--t-text); }
.t-btn--danger { background: var(--t-danger-fill); border-color: var(--t-danger-fill); color: #fff; }
.t-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.t-btn--danger-soft { background: var(--t-danger-bg); border-color: var(--t-danger-border); color: var(--t-danger); }
.t-btn--danger-soft:hover { background: var(--t-danger-bg); border-color: var(--t-danger); }
.t-btn--success-soft { background: var(--t-success-bg); border-color: var(--t-success-border); color: var(--t-success); }
.t-btn--sm { min-height: 30px; padding: 0 var(--t-3); font-size: var(--t-fs-13); border-radius: var(--t-r-sm); gap: 6px; }
.t-btn--block { width: 100%; }
.t-btn.is-on, .t-btn[aria-pressed="true"] { background: var(--t-accent-soft); border-color: var(--t-accent-ink); color: var(--t-text); }

.t-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--t-r-md);
  background: transparent; color: var(--t-text-2); cursor: pointer;
  transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}
.t-iconbtn:hover { background: var(--t-surface-2); color: var(--t-text); }
.t-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.t-iconbtn--sm { width: 30px; height: 30px; border-radius: var(--t-r-sm); }
.t-iconbtn--danger:hover { color: var(--t-danger); background: var(--t-danger-bg); }
.t-iconbtn--bordered { border-color: var(--t-border); }
.t-btn-group { display: inline-flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.t-link-btn {
  border: 0; background: none; padding: 0; color: var(--t-accent-ink);
  font-weight: var(--t-fw-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ── Badges, counts, pills, chips ─────────────────────────────────── */
.t-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--t-r-pill);
  background: var(--t-surface-3); color: var(--t-text-2);
  font-size: 11px; font-weight: var(--t-fw-bold); line-height: 1; font-variant-numeric: tabular-nums;
}
.t-count--accent { background: var(--t-accent); color: var(--t-on-accent); }
.t-count--danger { background: var(--t-danger-fill); color: #fff; }
.t-dot-badge {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--t-r-pill);
  background: var(--t-danger-fill); color: #fff; font-size: 10px; font-weight: var(--t-fw-bold);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  border: 2px solid var(--t-bg);
}
.t-pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 24px; padding: 0 10px; border-radius: var(--t-r-pill);
  border: 1px solid var(--t-neutral-border); background: var(--t-neutral-bg); color: var(--t-neutral);
  font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); white-space: nowrap; line-height: 1;
}
.t-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.t-pill--plain::before { display: none; }
/* A pill that opens something (the monthly sales table's «جدّدوا أكتر من مرة»): a real <button>. */
.t-pill--btn { font-family: inherit; cursor: pointer; transition: border-color var(--t-dur) var(--t-ease); }
.t-pill--btn:hover { border-color: currentColor; }
.t-pill--success { color: var(--t-success); background: var(--t-success-bg); border-color: var(--t-success-border); }
.t-pill--warning { color: var(--t-warning); background: var(--t-warning-bg); border-color: var(--t-warning-border); }
.t-pill--danger  { color: var(--t-danger);  background: var(--t-danger-bg);  border-color: var(--t-danger-border); }
.t-pill--info    { color: var(--t-info);    background: var(--t-info-bg);    border-color: var(--t-info-border); }
.t-pill--accent  { color: var(--t-accent-ink); background: var(--t-accent-soft); border-color: transparent; }
.t-pill--healthy  { color: var(--t-health-healthy);  background: var(--t-health-healthy-bg);  border-color: transparent; }
.t-pill--monitor  { color: var(--t-health-monitor);  background: var(--t-health-monitor-bg);  border-color: transparent; }
.t-pill--at_risk  { color: var(--t-health-at-risk);  background: var(--t-health-at-risk-bg);  border-color: transparent; }
.t-pill--critical { color: var(--t-health-critical); background: var(--t-health-critical-bg); border-color: transparent; }
.t-tag {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 8px; border-radius: var(--t-r-sm);
  background: var(--t-surface-2); border: 1px solid var(--t-border); color: var(--t-text-2);
  font-size: var(--t-fs-12); font-weight: var(--t-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px;
  border-radius: var(--t-r-pill); background: var(--t-accent-soft); color: var(--t-text);
  border: 1px solid transparent; font-size: var(--t-fs-13); font-weight: var(--t-fw-medium); white-space: nowrap;
}
[dir="rtl"] .t-chip { padding: 0 10px 0 4px; }
.t-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: transparent; color: var(--t-text-2); cursor: pointer;
}
.t-chip button:hover { background: var(--t-surface-3); color: var(--t-text); }
.t-role { /* team-role badge: colour from team-roles.js via --role */
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--t-r-pill);
  font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); white-space: nowrap;
  color: color-mix(in srgb, var(--role, var(--t-neutral)) 72%, #fff); background: color-mix(in srgb, var(--role, #888) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--role, #888) 32%, transparent);
}
:root[data-theme="light"] .t-role { color: color-mix(in srgb, var(--role, #555) 50%, #000); }

/* ── Avatars ──────────────────────────────────────────────────────── */
.t-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--t-surface-3); color: var(--t-text-2);
  font-size: 12px; font-weight: var(--t-fw-bold); line-height: 1; text-transform: uppercase;
}
.t-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.t-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.t-person { display: flex; align-items: center; gap: var(--t-3); min-width: 0; }
.t-person-text { min-width: 0; display: flex; flex-direction: column; }
.t-person-name { font-weight: var(--t-fw-bold); color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.t-person-name { min-height: 24px; max-width: 100%; }  /* WCAG 2.2 target size */
.t-person-sub { color: var(--t-text-3); font-size: var(--t-fs-12); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* ── Form controls ────────────────────────────────────────────────── */
.t-input, .t-select, .t-textarea {
  width: 100%; min-height: 36px; padding: 6px var(--t-3);
  border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface-1); color: var(--t-text);
  font-size: var(--t-fs-14); line-height: 1.4;
  transition: border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
.t-input::placeholder, .t-textarea::placeholder { color: var(--t-text-3); opacity: 1; }
.t-input:hover, .t-select:hover, .t-textarea:hover { border-color: var(--t-text-3); }
.t-input:focus, .t-select:focus, .t-textarea:focus {
  outline: none; border-color: var(--t-focus); box-shadow: 0 0 0 3px var(--t-accent-soft);
}
.t-input:disabled, .t-select:disabled, .t-textarea:disabled { opacity: .55; cursor: not-allowed; }
.t-textarea { min-height: 88px; resize: vertical; }
.t-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-inline-end: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
[dir="rtl"] .t-select { background-position: left 10px center; }
.t-select option { background: var(--t-surface-1); color: var(--t-text); }
.t-input[type="date"], .t-input[type="datetime-local"] { color-scheme: inherit; }
.t-input--sm, .t-select--sm { min-height: 30px; font-size: var(--t-fs-13); border-radius: var(--t-r-sm); }
.t-search { position: relative; min-width: 0; }
.t-search .t-ic { position: absolute; inset-inline-start: 10px; inset-block-start: 50%; transform: translateY(-50%); color: var(--t-text-3); pointer-events: none; }
.t-search .t-input { padding-inline-start: 34px; }
.t-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-field > label, .t-label { font-size: var(--t-fs-13); font-weight: var(--t-fw-bold); color: var(--t-text-2); }
.t-hint { font-size: var(--t-fs-12); color: var(--t-text-3); line-height: 1.6; }
.t-error { font-size: var(--t-fs-13); color: var(--t-danger); }
.t-error:empty { display: none; }
.t-form { display: flex; flex-direction: column; gap: var(--t-4); margin: 0; }
.t-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--t-4); }
.t-form-grid .t-span-2 { grid-column: 1 / -1; }
.t-counter { align-self: flex-end; font-size: 11px; color: var(--t-text-3); font-variant-numeric: tabular-nums; }
.t-check, .t-radio {
  display: inline-flex; align-items: flex-start; gap: var(--t-2); cursor: pointer;
  font-size: var(--t-fs-14); color: var(--t-text); line-height: 1.5;
}
.t-check input, .t-radio input {
  width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--t-accent-ink); cursor: pointer;
}
:root:not([data-theme="light"]) .t-check input, :root:not([data-theme="light"]) .t-radio input { accent-color: #9be000; }
.t-check-input { width: 18px; height: 18px; margin: 0; accent-color: #9be000; cursor: pointer; }
:root[data-theme="light"] .t-check-input { accent-color: var(--t-accent-ink); }

.t-switch { position: relative; display: inline-flex; align-items: center; gap: var(--t-2); cursor: pointer; }
.t-switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.t-switch-track {
  position: relative; width: 40px; height: 22px; border-radius: var(--t-r-pill); flex: 0 0 auto;
  background: var(--t-surface-3); border: 1px solid var(--t-border-strong);
  transition: background var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease);
}
.t-switch-track::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--t-text-2);
  transition: transform var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease);
}
.t-switch input:checked + .t-switch-track { background: var(--t-accent); border-color: var(--t-accent); }
.t-switch input:checked + .t-switch-track::after { background: var(--t-on-accent); transform: translateX(18px); }
[dir="rtl"] .t-switch input:checked + .t-switch-track::after { transform: translateX(-18px); }
.t-switch input:focus-visible + .t-switch-track { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.t-switch input:disabled + .t-switch-track { opacity: .45; }
.t-switch input:disabled { cursor: not-allowed; }
.t-switch-label { font-size: var(--t-fs-13); color: var(--t-text-2); }
/* .t-switch--strong (OCT24 §6): the track's edge meets WCAG 1.4.11 in both states (≥ 3:1 on the surface; the default
   border-strong is 1.6:1, and a lime "on" track is 1.2:1 on white). Opt-in: switches elsewhere are unchanged. */
.t-switch--strong .t-switch-track { border-color: var(--t-text-3); }
.t-switch--strong input:checked + .t-switch-track { border-color: var(--t-accent-ink); }

/* ── Segmented control / tabs ─────────────────────────────────────── */
.t-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-1);
}
.t-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--t-3);
  border: 0; border-radius: 7px; background: transparent; color: var(--t-text-2);
  font-weight: var(--t-fw-medium); font-size: var(--t-fs-13); white-space: nowrap; cursor: pointer;
}
.t-seg button:hover { color: var(--t-text); background: var(--t-surface-2); }
.t-seg button[aria-selected="true"], .t-seg button[aria-pressed="true"], .t-seg button.is-on {
  background: var(--t-surface-3); color: var(--t-text); box-shadow: var(--t-shadow-1);
}
.t-seg .t-count { height: 18px; min-width: 18px; font-size: 10px; }
/* .t-seg--marked (OCT24 §6): the chosen segment also carries an accent bar (≥ 3:1 on its fill), so the state isn't told by
   a 1.2:1 fill alone (WCAG 1.4.11). Opt-in: the other segmented controls are unchanged. */
.t-seg--marked button[aria-pressed="true"], .t-seg--marked button[aria-selected="true"], .t-seg--marked button.is-on {
  box-shadow: var(--t-shadow-1), inset 0 -2px 0 var(--t-accent-ink);
}

/* ── Page header ──────────────────────────────────────────────────── */
.t-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--t-4);
}
.t-page-titles { min-width: 0; flex: 1 1 320px; }
.t-page-title { font-size: var(--t-fs-24); font-weight: var(--t-fw-black); letter-spacing: -.01em; }
.t-page-desc { margin-block-start: 4px; color: var(--t-text-2); font-size: var(--t-fs-14); max-width: 72ch; }
.t-page-actions { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.t-back { display: inline-flex; align-items: center; gap: 6px; margin-block-end: var(--t-2); }
.t-subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--t-3); flex-wrap: wrap; }
.t-subhead h2, .t-h2 { font-size: var(--t-fs-16); font-weight: var(--t-fw-bold); }
.t-h3 { font-size: var(--t-fs-14); font-weight: var(--t-fw-bold); color: var(--t-text); }

/* ── Cards, KPIs, charts ──────────────────────────────────────────── */
.t-card {
  background: var(--t-surface-1); border: 1px solid var(--t-border); border-radius: var(--t-r-lg);
  padding: var(--t-5);
}
.t-card--flush { padding: 0; overflow: hidden; }
.t-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-3); flex-wrap: wrap; margin-block-end: var(--t-4); }
.t-card-title { display: flex; align-items: center; gap: var(--t-2); font-size: var(--t-fs-14); font-weight: var(--t-fw-bold); color: var(--t-text); }
.t-card-sub { color: var(--t-text-3); font-size: var(--t-fs-13); }
.t-grid { display: grid; gap: var(--t-4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.t-grid-2 { display: grid; gap: var(--t-4); grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

.t-kpis { display: grid; gap: var(--t-4); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.t-kpi {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--t-4) var(--t-5); min-height: 104px;
  background: var(--t-surface-1); border: 1px solid var(--t-border); border-radius: var(--t-r-lg);
  text-align: start; color: inherit; text-decoration: none;
}
button.t-kpi, a.t-kpi { cursor: pointer; transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease); }
button.t-kpi:hover, a.t-kpi:hover { border-color: var(--t-border-strong); background: var(--t-surface-2); }
.t-kpi[aria-pressed="true"] { border-color: var(--t-accent-ink); box-shadow: inset 0 0 0 1px var(--t-accent-ink); }
.t-kpi-label { display: flex; align-items: center; gap: var(--t-2); color: var(--t-text-2); font-size: var(--t-fs-13); font-weight: var(--t-fw-medium); }
.t-kpi-value {
  font-size: var(--t-fs-32); font-weight: var(--t-fw-black); line-height: 1.1; color: var(--t-text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.t-kpi-value--md { font-size: var(--t-fs-24); }
.t-kpi-foot { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; color: var(--t-text-3); font-size: var(--t-fs-12); }
.t-kpi--healthy  { border-block-start: 3px solid var(--t-health-healthy); }
.t-kpi--monitor  { border-block-start: 3px solid var(--t-health-monitor); }
.t-kpi--at_risk  { border-block-start: 3px solid var(--t-health-at-risk); }
.t-kpi--critical { border-block-start: 3px solid var(--t-health-critical); }
.t-kpi .t-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.t-kpi--healthy .t-kpi-label { color: var(--t-health-healthy); }
.t-kpi--monitor .t-kpi-label { color: var(--t-health-monitor); }
.t-kpi--at_risk .t-kpi-label { color: var(--t-health-at-risk); }
.t-kpi--critical .t-kpi-label { color: var(--t-health-critical); }
.t-trend { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--t-fw-bold); font-variant-numeric: tabular-nums; direction: ltr; }
.t-trend--up { color: var(--t-success); }
.t-trend--down { color: var(--t-danger); }
.t-chart-card { display: flex; flex-direction: column; gap: var(--t-3); }
.t-chart { position: relative; height: 260px; min-width: 0; }
.t-chart--sm { height: 220px; }
.t-chart--donut { height: 260px; max-width: 340px; margin-inline: auto; width: 100%; }

/* Definition lists (drawer facts) */
.t-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--t-3) var(--t-4); margin: 0; }
.t-dl--1 { grid-template-columns: 1fr; }
.t-dl > div { min-width: 0; }
.t-dl dt { font-size: var(--t-fs-12); color: var(--t-text-3); font-weight: var(--t-fw-medium); }
.t-dl dd { margin: 2px 0 0; color: var(--t-text); font-weight: var(--t-fw-medium); overflow-wrap: anywhere; }

/* Progress + segmented bars */
.t-progress { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.t-progress-top { display: flex; justify-content: space-between; gap: var(--t-2); font-size: var(--t-fs-12); font-variant-numeric: tabular-nums; }
.t-progress-bar { height: 6px; border-radius: var(--t-r-pill); background: var(--t-surface-3); overflow: hidden; }
.t-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--t-accent-ink); }
.t-progress--low > .t-progress-bar > span { background: var(--t-health-critical); }
.t-progress--mid > .t-progress-bar > span { background: var(--t-health-at-risk); }
.t-progress--high > .t-progress-bar > span { background: var(--t-health-monitor); }
.t-progress--done > .t-progress-bar > span { background: var(--t-health-healthy); }
.t-segbar { display: flex; height: 6px; border-radius: var(--t-r-pill); overflow: hidden; background: var(--t-surface-3); }
.t-segbar > span { display: block; height: 100%; }
.t-seg-critical { background: var(--t-health-critical); }
.t-seg-at_risk { background: var(--t-health-at-risk); }
.t-seg-monitor { background: var(--t-health-monitor); }
.t-seg-healthy { background: var(--t-health-healthy); }
.t-legend { display: flex; flex-wrap: wrap; gap: var(--t-3); font-size: var(--t-fs-12); color: var(--t-text-2); }
.t-legend span { display: inline-flex; align-items: center; gap: 6px; }
.t-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Callouts */
.t-callout {
  display: flex; gap: var(--t-3); align-items: flex-start; padding: var(--t-3) var(--t-4);
  border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-1);
  color: var(--t-text-2); font-size: var(--t-fs-13); line-height: 1.7;
}
.t-callout > .t-ic { margin-block-start: 3px; }
.t-callout b, .t-callout strong { color: var(--t-text); }
.t-callout--warning { border-color: var(--t-warning-border); background: var(--t-warning-bg); }
.t-callout--warning > .t-ic { color: var(--t-warning); }
.t-callout--danger { border-color: var(--t-danger-border); background: var(--t-danger-bg); }
.t-callout--danger > .t-ic { color: var(--t-danger); }
.t-callout--info { border-color: var(--t-info-border); background: var(--t-info-bg); }
.t-callout--info > .t-ic { color: var(--t-info); }
.t-callout--success { border-color: var(--t-success-border); background: var(--t-success-bg); }
.t-callout--success > .t-ic { color: var(--t-success); }

/* ── Filter bar ───────────────────────────────────────────────────── */
.t-filterbar { display: flex; flex-direction: column; gap: var(--t-3); }
.t-filter-row { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.t-filter-row .t-search { flex: 1 1 260px; max-width: 420px; }
.t-filter-row .t-select { width: auto; min-width: 140px; max-width: 220px; }
.t-filter-row > .t-spacer { flex: 1 1 auto; }
.t-chips { display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.t-chips:empty { display: none; }
.t-more-filters {
  display: grid; gap: var(--t-3); grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  padding: var(--t-4); border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-1);
}
.t-result-count { color: var(--t-text-3); font-size: var(--t-fs-13); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-date-range { display: inline-flex; align-items: center; gap: var(--t-2); flex-wrap: wrap; }
.t-date-range .t-input { width: auto; min-width: 150px; }
.t-date-label { color: var(--t-text-2); font-size: var(--t-fs-13); }
@media (max-width: 640px) {
  .t-filter-row .t-search { flex-basis: 100%; max-width: none; }
  .t-filter-row .t-select { flex: 1 1 calc(50% - 4px); max-width: none; min-width: 0; }
}

/* ── Tables (one component for every list) ───────────────────────── */
.t-table-wrap {
  position: relative; width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--t-surface-1); border: 1px solid var(--t-border); border-radius: var(--t-r-lg);
  --row-h: var(--t-row-h);
}
/* scroll hint: shadows at whichever edge has more content */
.t-table-wrap.is-scroll-start { box-shadow: inset 12px 0 10px -10px rgba(0, 0, 0, .55); }
.t-table-wrap.is-scroll-end { box-shadow: inset -12px 0 10px -10px rgba(0, 0, 0, .55); }
.t-table-wrap.is-scroll-start.is-scroll-end { box-shadow: inset 12px 0 10px -10px rgba(0, 0, 0, .55), inset -12px 0 10px -10px rgba(0, 0, 0, .55); }
.t-dense .t-table-wrap { --row-h: var(--t-row-h-compact); }
.t-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-fs-14); }
.t-table thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  height: 40px; padding: 0 var(--t-3); background: var(--t-surface-1);
  border-block-end: 1px solid var(--t-border);
  color: var(--t-text-3); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold);
  text-align: start; white-space: nowrap; vertical-align: middle;
}
.t-table thead th:first-child { border-start-start-radius: var(--t-r-lg); }
.t-table thead th:last-child { border-start-end-radius: var(--t-r-lg); }
.t-sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin-inline: -6px;
  border: 0; border-radius: var(--t-r-sm); background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.t-sort:hover { color: var(--t-text); background: var(--t-surface-2); }
th[aria-sort="ascending"] .t-sort, th[aria-sort="descending"] .t-sort { color: var(--t-text); }
.t-sort-ic { opacity: .5; }
th[aria-sort="ascending"] .t-sort-ic, th[aria-sort="descending"] .t-sort-ic { opacity: 1; color: var(--t-accent-ink); }
.t-table tbody td {
  height: var(--row-h); padding: 6px var(--t-3); vertical-align: middle;
  border-block-end: 1px solid var(--t-border); color: var(--t-text-2);
  transition: background var(--t-dur) var(--t-ease);
}
.t-dense .t-table tbody td { padding-block: 3px; }
.t-table tbody tr:last-child td { border-block-end: 0; }
.t-table tbody tr:hover td { background: var(--t-surface-2); }
.t-table tbody tr.t-row-click { cursor: pointer; }
.t-table tbody tr.is-selected td { background: var(--t-accent-soft); }
.t-table tbody tr.is-muted td { opacity: .62; }
.t-table tbody tr.is-unseen td:first-child { box-shadow: inset 3px 0 0 var(--t-accent); }
[dir="rtl"] .t-table tbody tr.is-unseen td:first-child { box-shadow: inset -3px 0 0 var(--t-accent); }
.t-table td.t-col-primary, .t-table td .t-strong { color: var(--t-text); }
.t-table .t-col-check { width: 44px; padding-inline: var(--t-3) 0; }
.t-table .t-col-actions { width: 1%; white-space: nowrap; text-align: end; }
.t-table .t-col-actions .t-btn-group { justify-content: flex-end; flex-wrap: nowrap; }
.t-table td.t-num, .t-table th.t-num { text-align: end; }
.t-table td.t-wrap { white-space: normal; min-width: 220px; line-height: 1.6; }
.t-table tfoot td { padding: var(--t-3); border-block-start: 1px solid var(--t-border-strong); font-weight: var(--t-fw-bold); color: var(--t-text); background: var(--t-surface-2); }
.t-table--compact tbody td { height: 36px; padding-block: 2px; }
.t-table-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-row-more { display: none; }

/* State rows: skeleton, empty, error, no results */
.t-state-cell { padding: 0 !important; height: auto !important; }
.t-table tbody tr:hover td.t-state-cell { background: transparent; }
.t-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--t-2);
  padding: var(--t-10) var(--t-5); text-align: center; color: var(--t-text-2);
}
.t-state-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--t-surface-2); color: var(--t-text-3); margin-block-end: var(--t-1);
}
.t-state-title { font-weight: var(--t-fw-bold); color: var(--t-text); font-size: var(--t-fs-14); }
.t-state-sub { font-size: var(--t-fs-13); color: var(--t-text-3); max-width: 46ch; }
.t-state-action { margin-block-start: var(--t-2); }
.t-state--error .t-state-ic { background: var(--t-danger-bg); color: var(--t-danger); }
.t-skel {
  display: block; height: 12px; border-radius: var(--t-r-sm);
  background: linear-gradient(90deg, var(--t-surface-2) 0%, var(--t-surface-3) 40%, var(--t-surface-2) 80%);
  background-size: 300% 100%; animation: t-shimmer 1.4s ease-in-out infinite;
}
.t-skel--avatar { width: 32px; height: 32px; border-radius: 50%; }
.t-skel-card { height: 104px; border-radius: var(--t-r-lg); }
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .t-skel { animation: none; } }

/* Bulk bar: replaces the table header while rows are selected */
.t-bulkbar {
  display: flex; align-items: center; gap: var(--t-2); flex-wrap: wrap;
  padding: var(--t-2) var(--t-3); border-radius: var(--t-r-md);
  background: var(--t-surface-3); border: 1px solid var(--t-accent-ink); box-shadow: var(--t-shadow-2);
  position: sticky; inset-block-start: calc(var(--t-topbar-h) + 8px); z-index: var(--t-z-sticky);
}
.t-bulk-count { font-weight: var(--t-fw-bold); color: var(--t-text); margin-inline-end: auto; }
.t-bulkbar .t-select { width: auto; }

/* Pagination / load more */
.t-pager { display: flex; align-items: center; justify-content: center; gap: var(--t-1); flex-wrap: wrap; }
.t-pager:empty { display: none; }
.t-pager button {
  min-width: 34px; height: 34px; padding: 0 var(--t-2);
  border: 1px solid var(--t-border); border-radius: var(--t-r-sm); background: var(--t-surface-1);
  color: var(--t-text-2); font-weight: var(--t-fw-medium); font-variant-numeric: tabular-nums; cursor: pointer;
}
.t-pager button:hover:not(:disabled) { border-color: var(--t-border-strong); color: var(--t-text); }
.t-pager button[aria-current="page"] { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); font-weight: var(--t-fw-bold); }
.t-pager button:disabled { opacity: .4; cursor: not-allowed; }
.t-pager .t-pager-gap { color: var(--t-text-3); padding: 0 4px; }
.t-pager .t-pager-info { color: var(--t-text-3); font-size: var(--t-fs-13); padding: 0 var(--t-2); }

/* Members table: fits 1440 with the sidebar open, no horizontal scroll. Long
   values truncate; their full text is the cell's data-tip tooltip. */
.t-sub-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.t-sub-cell .t-switch { gap: 0; }
.t-contact-phone { font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-role-cell { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.t-role-cell .t-role { height: 20px; padding: 0 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-role-cell .t-iconbtn--sm { width: 24px; height: 24px; }
@media (min-width: 769px) {
  #usersTable thead th, #usersTable tbody td { padding-inline: var(--t-2); }
  #usersTable .t-col-check { padding-inline: var(--t-3) 0; }
  #usersTable .t-person-name { max-width: 160px; }
  #usersTable .t-person-sub { max-width: 170px; }
  #usersTable .as-chip-btn { max-width: 112px; }
  #usersTable .t-contact-email { max-width: 150px; }
  #usersTable .t-col-place .t-trunc { max-width: 100px; }
  #usersTable .t-col-actions .t-iconbtn--sm { width: 28px; height: 28px; }
  #usersTable .t-col-actions .t-btn-group { gap: 2px; }
}

/* ≤ 768 px: rows become cards. Key cells on top, the rest collapsed. */
@media (max-width: 768px) {
  .t-table-wrap:not(.t-table-wrap--scroll) { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none !important; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table,
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody { display: block; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table thead { display: none; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--t-3);
    padding: var(--t-3) var(--t-4); margin-block-end: var(--t-2);
    background: var(--t-surface-1); border: 1px solid var(--t-border); border-radius: var(--t-r-lg);
  }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody tr:hover td { background: transparent; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--t-3);
    grid-column: 1 / -1; height: auto; min-height: 0; padding: 4px 0; border: 0; text-align: start;
  }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 45%;
    color: var(--t-text-3); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold);
  }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td > * { min-width: 0; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-primary { grid-column: 1; display: block; padding: 0; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-primary::before { display: none; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-check { grid-column: 2; grid-row: 1; width: auto; padding: 0; justify-content: flex-end; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-check::before { display: none; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-sec { display: none; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody tr.t-open td.t-col-sec { display: flex; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-actions { width: auto; justify-content: flex-start; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-actions::before { display: none; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-col-actions .t-btn-group { flex-wrap: wrap; justify-content: flex-start; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-state-cell { display: block; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody tr.t-state-row { display: block; padding: 0; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-wrap { min-width: 0; display: block; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tbody td.t-wrap::before { display: block; margin-block-end: 2px; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-row-more { display: inline-flex; grid-column: 1 / -1; justify-self: start; }
  .t-table-wrap:not(.t-table-wrap--scroll) .t-table tfoot { display: none; }
  .t-bulkbar { inset-block-start: calc(var(--t-topbar-h) + 4px); }
}

/* ── Menus, tooltips ──────────────────────────────────────────────── */
.t-menu-wrap { position: relative; display: inline-flex; }
.t-menu {
  position: absolute; z-index: var(--t-z-dropdown); min-width: 220px; max-width: min(320px, 92vw);
  padding: var(--t-1); border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface-1); box-shadow: var(--t-shadow-2); display: none;
}
.t-menu.open { display: block; animation: t-pop var(--t-dur) var(--t-ease); }
/* A menu that belongs to a drawer or a modal stacks above its owner (F-147). */
.t-menu.t-menu--over-drawer { z-index: calc(var(--t-z-drawer) + 2); }
.t-menu.t-menu--over-modal { z-index: calc(var(--t-z-modal) + 1); }
.t-menu-item {
  display: flex; align-items: center; gap: var(--t-2); width: 100%; min-height: 36px; padding: 6px var(--t-3);
  border: 0; border-radius: var(--t-r-sm); background: transparent; color: var(--t-text);
  font-size: var(--t-fs-14); text-align: start; text-decoration: none; cursor: pointer;
}
.t-menu-item:hover, .t-menu-item:focus-visible { background: var(--t-surface-2); outline: none; }
.t-menu-item .t-ic { color: var(--t-text-2); }
.t-menu-item--danger, .t-menu-item--danger .t-ic { color: var(--t-danger); }
.t-menu-sep { height: 1px; margin: var(--t-1) 0; background: var(--t-border); }
.t-menu-head { padding: var(--t-3); border-block-end: 1px solid var(--t-border); margin-block-end: var(--t-1); }
@keyframes t-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.t-tooltip {
  position: fixed; z-index: var(--t-z-toast); max-width: 280px; padding: 6px 10px; pointer-events: none;
  border-radius: var(--t-r-sm); background: var(--t-text); color: var(--t-bg);
  font-size: var(--t-fs-12); font-weight: var(--t-fw-medium); line-height: 1.5; box-shadow: var(--t-shadow-2);
}

/* ── Toasts ───────────────────────────────────────────────────────── */
.t-toasts {
  position: fixed; z-index: var(--t-z-toast); inset-block-end: var(--t-5); inset-inline-end: var(--t-5);
  display: flex; flex-direction: column; gap: var(--t-2); width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.t-toast {
  display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-3) var(--t-4);
  border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface-1); color: var(--t-text); box-shadow: var(--t-shadow-3);
  font-size: var(--t-fs-14); line-height: 1.5; pointer-events: auto;
  animation: t-toast-in var(--t-dur-slow) var(--t-ease);
}
.t-toast .t-ic { margin-block-start: 2px; }
.t-toast--success .t-ic { color: var(--t-success); }
.t-toast--error { border-color: var(--t-danger-border); }
.t-toast--error .t-ic { color: var(--t-danger); }
.t-toast--info .t-ic { color: var(--t-info); }
.t-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.t-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease); }
@keyframes t-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .t-toasts { inset-inline: var(--t-4); inset-block-end: var(--t-4); width: auto; } }

/* ── Overlays: modal, drawer, palette ─────────────────────────────── */
.t-overlay {
  position: fixed; inset: 0; z-index: var(--t-z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--t-4);
  background: var(--t-overlay); animation: t-fade var(--t-dur) var(--t-ease);
}
.t-overlay[hidden] { display: none !important; }
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-modal {
  position: relative; display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: min(88vh, 900px);
  background: var(--t-surface-1); border: 1px solid var(--t-border-strong); border-radius: var(--t-r-lg);
  box-shadow: var(--t-shadow-3); animation: t-modal-in var(--t-dur-slow) var(--t-ease);
}
.t-modal--sm { width: min(440px, 100%); }
.t-modal--lg { width: min(760px, 100%); }
.t-modal--xl { width: min(980px, 100%); }
@keyframes t-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.t-modal-head, .t-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--t-3);
  padding: var(--t-4) var(--t-5); border-block-end: 1px solid var(--t-border);
}
.t-modal-title, .t-drawer-title { font-size: var(--t-fs-16); font-weight: var(--t-fw-bold); color: var(--t-text); min-width: 0; overflow-wrap: anywhere; }
.t-modal-body { padding: var(--t-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--t-4); }
.t-modal-foot, .t-drawer-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--t-2); flex-wrap: wrap;
  padding: var(--t-3) var(--t-5); border-block-start: 1px solid var(--t-border);
}
.t-modal-foot .t-spacer { flex: 1 1 auto; }
.t-confirm-who { font-weight: var(--t-fw-bold); color: var(--t-text); overflow-wrap: anywhere; }
.t-confirm-detail { font-family: var(--t-font-mono); font-size: var(--t-fs-13); color: var(--t-text-2); overflow-wrap: anywhere; }
.t-typed { font-family: var(--t-font-mono); letter-spacing: .04em; direction: ltr; }
.t-phrase {
  display: block; padding: var(--t-2); text-align: center; border: 1px dashed var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface-2); color: var(--t-accent-ink); font-family: var(--t-font-mono); letter-spacing: .06em;
  user-select: all; direction: ltr;
}

.t-drawer-overlay {
  position: fixed; inset: 0; z-index: var(--t-z-drawer);
  background: var(--t-overlay); animation: t-fade var(--t-dur) var(--t-ease);
}
.t-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: calc(var(--t-z-drawer) + 1);
  display: flex; flex-direction: column; width: min(600px, 100vw);
  background: var(--t-surface-1); border-inline-start: 1px solid var(--t-border-strong); box-shadow: var(--t-shadow-3);
  animation: t-drawer-in-ltr var(--t-dur-slow) var(--t-ease);
}
[dir="rtl"] .t-drawer { animation-name: t-drawer-in-rtl; }
.t-drawer--wide { width: min(1040px, 100vw); }
@keyframes t-drawer-in-ltr { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-drawer-in-rtl { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }
.t-drawer-head { align-items: flex-start; }
.t-drawer-head-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.t-drawer-actions { display: flex; align-items: center; gap: var(--t-1); flex-wrap: wrap; }
.t-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--t-5); display: flex; flex-direction: column; gap: var(--t-5); }
.t-block { display: flex; flex-direction: column; gap: var(--t-3); }
.t-block + .t-block { padding-block-start: var(--t-5); border-block-start: 1px solid var(--t-border); }
.t-block-title { display: flex; align-items: center; gap: var(--t-2); font-size: var(--t-fs-13); font-weight: var(--t-fw-bold); color: var(--t-text-2); }
.t-block-title .t-ic { color: var(--t-text-3); }
.t-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-2); flex-wrap: wrap; }
.t-quote {
  padding: var(--t-2) var(--t-3); border-inline-start: 3px solid var(--t-border-strong);
  background: var(--t-surface-2); border-radius: var(--t-r-sm); color: var(--t-text); white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .t-overlay { align-items: flex-end; padding: 0; }
  .t-modal { width: 100% !important; max-height: 92vh; border-radius: var(--t-r-lg) var(--t-r-lg) 0 0; }
  .t-drawer, .t-drawer--wide { width: 100vw; }
  .t-drawer-body, .t-modal-body { padding: var(--t-4); }
  .t-modal-head, .t-drawer-head, .t-modal-foot, .t-drawer-foot { padding-inline: var(--t-4); }
  .t-modal-foot .t-btn { flex: 1 1 auto; }
}

.t-palette-overlay {
  position: fixed; inset: 0; z-index: var(--t-z-palette);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--t-4) var(--t-4);
  background: var(--t-overlay); animation: t-fade var(--t-dur) var(--t-ease);
}
.t-palette {
  width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--t-surface-1); border: 1px solid var(--t-border-strong); border-radius: var(--t-r-lg); box-shadow: var(--t-shadow-3);
  animation: t-modal-in var(--t-dur-slow) var(--t-ease);
}
.t-palette-input { display: flex; align-items: center; gap: var(--t-3); padding: 0 var(--t-4); border-block-end: 1px solid var(--t-border); }
.t-palette-input input {
  flex: 1 1 auto; height: 52px; border: 0; background: transparent; color: var(--t-text);
  font-size: var(--t-fs-16); outline: none;
}
.t-palette-input input::placeholder { color: var(--t-text-3); }
.t-palette-list { overflow-y: auto; padding: var(--t-2); }
.t-palette-group { padding: var(--t-2) var(--t-3) var(--t-1); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); color: var(--t-text-3); }
.t-palette-item {
  display: flex; align-items: center; gap: var(--t-3); width: 100%; min-height: 40px; padding: 6px var(--t-3);
  border: 0; border-radius: var(--t-r-md); background: transparent; color: var(--t-text); text-align: start; cursor: pointer;
}
.t-palette-item .t-ic { color: var(--t-text-3); }
.t-palette-item[aria-selected="true"] { background: var(--t-surface-3); }
.t-palette-item[aria-selected="true"] .t-ic { color: var(--t-accent-ink); }
.t-palette-item-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-palette-item-sub { color: var(--t-text-3); font-size: var(--t-fs-12); white-space: nowrap; }
.t-palette-empty { padding: var(--t-6) var(--t-4); text-align: center; color: var(--t-text-3); }
.t-palette-foot {
  display: flex; gap: var(--t-4); flex-wrap: wrap; padding: var(--t-2) var(--t-4); border-block-start: 1px solid var(--t-border);
  color: var(--t-text-3); font-size: var(--t-fs-12);
}
.t-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .t-palette-overlay { padding-block-start: var(--t-4); } }

/* Bell panel */
.t-bell-panel { width: min(380px, 92vw); max-height: min(520px, 70vh); overflow-y: auto; padding: 0; }
.t-bell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-2); padding: var(--t-3) var(--t-4); border-block-end: 1px solid var(--t-border); position: sticky; inset-block-start: 0; background: var(--t-surface-1); }
.t-bell-item { display: flex; gap: var(--t-3); padding: var(--t-3) var(--t-4); border-block-end: 1px solid var(--t-border); color: var(--t-text); text-decoration: none; cursor: pointer; background: transparent; border-inline: 0; border-block-start: 0; width: 100%; text-align: start; }
.t-bell-item:hover { background: var(--t-surface-2); }
.t-bell-item.is-unread { background: var(--t-accent-soft); }
.t-bell-item-text { min-width: 0; flex: 1 1 auto; font-size: var(--t-fs-13); line-height: 1.5; overflow-wrap: anywhere; }
.t-bell-item-time { color: var(--t-text-3); font-size: var(--t-fs-12); }

/* ── Status sub-lines (members' end date, members activity). They must stay BEFORE .t-sub below: an element
   with both classes takes .t-sub's colour, as it did in team-ui.css (PLATFORM-REDESIGN §5.1 cascade order). ── */
.t-sub-ok { color: var(--t-text-3); font-size: var(--t-fs-12); }
.t-sub-warn { color: var(--t-warning); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); }
.t-sub-bad { color: var(--t-danger); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); }

/* ── Layout + text utilities used across sections ─────────────────── */
.t-stack { display: flex; flex-direction: column; gap: var(--t-4); min-width: 0; }
.t-stack-sm { display: flex; flex-direction: column; gap: var(--t-2); min-width: 0; }
.t-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-2); }
.t-plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.t-plain-fieldset > legend { padding: 0; margin-block-end: var(--t-2); }
.t-sub { display: block; color: var(--t-text-3); font-size: var(--t-fs-12); }
.t-k { color: var(--t-text-3); font-size: var(--t-fs-12); font-weight: var(--t-fw-medium); margin-block-start: var(--t-2); }
.t-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 46ch; }
.t-list { margin: 0; padding-inline-start: var(--t-5); display: flex; flex-direction: column; gap: 4px; color: var(--t-text-2); }
.t-list--plain { list-style: none; padding: 0; }
.t-list--tight { gap: 2px; font-size: var(--t-fs-13); }
.t-tone { font-weight: var(--t-fw-bold); color: var(--t-text); }
.t-tone--critical { color: var(--t-health-critical); }
.t-tone--at_risk { color: var(--t-health-at-risk); }
.t-tone--monitor { color: var(--t-health-monitor); }
.t-online { display: inline-flex; align-items: center; gap: 6px; color: var(--t-success); font-weight: var(--t-fw-bold); }
.t-online .t-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.t-dot[data-color] { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--role, var(--t-info)); }
.t-delta { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--t-r-pill); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); background: var(--t-surface-3); color: var(--t-text-2); vertical-align: middle; }
.t-delta--up { background: var(--t-success-bg); color: var(--t-success); }
.t-delta--down { background: var(--t-danger-bg); color: var(--t-danger); }
.t-counted { display: flex; flex-direction: column; gap: 2px; }
.t-counter, .t-counted .t-counter { align-self: flex-end; font-size: var(--t-fs-12); color: var(--t-text-3); font-variant-numeric: tabular-nums; direction: ltr; }
.t-input--narrow { max-width: 120px; }
.t-check--top { align-items: flex-start; }
.t-check--top input { margin-block-start: 3px; }
.t-dl--grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.t-card--inset { background: var(--t-surface-2); box-shadow: none; }
.t-kpis--2 { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); max-width: 520px; }
.t-kpis--pipeline { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--t-3); }
.t-kpis--pipeline .t-kpi { padding: var(--t-3) var(--t-4); text-align: start; }
.t-kpis--pipeline .t-kpi-value { font-size: var(--t-fs-24); }
.t-iconbtn--xs { width: 24px; height: 24px; border-radius: var(--t-r-sm); }
.t-iconbtn--xs .t-ic { width: 14px; height: 14px; }
.t-sticky-foot { position: sticky; inset-block-end: 0; padding-block: var(--t-3); background: linear-gradient(to top, var(--t-surface-1) 70%, transparent); z-index: 1; }
.t-switch-text { font-size: var(--t-fs-13); color: var(--t-text-2); font-weight: var(--t-fw-medium); }
.t-bulkbar-count { font-weight: var(--t-fw-bold); color: var(--t-text); margin-inline-end: var(--t-2); }

/* Table states */
.t-table tbody tr.t-muted-row td { color: var(--t-text-3); }
.t-table tbody tr.t-muted-row .t-person-name { color: var(--t-text-2); }
.t-table tbody tr.t-row-bad td { background: var(--t-danger-bg); }
.t-table tbody tr.is-unread .t-person-name { font-weight: var(--t-fw-black); }
.t-table tbody tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--t-info); }
[dir="rtl"] .t-table tbody tr.is-unread td:first-child { box-shadow: inset -3px 0 0 var(--t-info); }
.t-col-center { text-align: center; }
.t-table--dense thead th, .t-table--dense tbody td { padding-block: 6px; }

/* Skeleton block (drawers, panels) */
.t-skel-block { display: flex; flex-direction: column; gap: var(--t-3); padding-block: var(--t-2); }
.t-skel-block .t-skel { height: 14px; }

/* Selectable option cards (role modal) and rows (pickers) */
.t-option {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--t-2); width: 100%;
  padding: var(--t-3) var(--t-4); border: 1px solid var(--t-border); border-radius: var(--t-r-md);
  background: var(--t-surface-1); color: var(--t-text); text-align: start; cursor: pointer; font: inherit;
  transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease);
}
.t-option:hover { border-color: var(--t-border-strong); background: var(--t-surface-2); }
.t-option.is-on, .t-option[aria-checked="true"] { border-color: var(--t-accent-ink); box-shadow: inset 0 0 0 1px var(--t-accent-ink); }
.t-option-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-2); }
.t-option--row { flex-direction: row; align-items: center; padding: var(--t-2) var(--t-3); border-color: transparent; }
.t-option--row .t-person-text { flex: 1 1 auto; }
.t-chip.is-off { opacity: .6; }

/* Tabs (member drawer) */
.t-tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--t-border); overflow-x: auto; scrollbar-width: none; }
.t-tabs::-webkit-scrollbar { display: none; }
.t-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 40px; padding: 0 var(--t-3);
  border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; background: transparent;
  color: var(--t-text-2); font: inherit; font-size: var(--t-fs-14); font-weight: var(--t-fw-medium); cursor: pointer;
}
.t-tab:hover { color: var(--t-text); }
.t-tab[aria-selected="true"] { color: var(--t-text); border-block-end-color: var(--t-accent-ink); font-weight: var(--t-fw-bold); }
.t-tabpanel { display: flex; flex-direction: column; gap: var(--t-5); padding-block-start: var(--t-4); }
.t-tabpanel:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 4px; border-radius: var(--t-r-sm); }
.t-drawer-sub { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* The member's number in the drawer header, with its copy button: one unit that never splits across lines
   (the row around it still wraps). The number is LTR in both languages, in the primary text colour. */
.t-drawer-idbox { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.t-drawer-id {
  direction: ltr; unicode-bidi: isolate; color: var(--t-text);
  font-size: var(--t-fs-16); font-weight: var(--t-fw-bold); font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* Headings that receive focus programmatically (section change) show no ring;
   the skip link and real controls keep theirs. */
[tabindex="-1"]:focus { outline: none; }
.t-table td .as-chip-btn, .t-table td > .t-muted { white-space: nowrap; }

/* Phones: two KPIs a row (four stacked filled the whole first screen). */
@media (max-width: 640px) {
  .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-3); }
  .t-kpi { padding: var(--t-3); }
  .t-kpi-value { font-size: var(--t-fs-24); overflow-wrap: anywhere; }
  .t-kpi-value--md { font-size: var(--t-fs-20); }
  .t-kpi-foot { font-size: 11px; }
  .t-kpis--2 { max-width: none; }
}

.t-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-kpi-value--danger { color: var(--t-danger); }
.t-stack--tight { gap: var(--t-2); }
.t-row { display: flex; align-items: center; gap: var(--t-2); min-width: 0; }
.t-form-error { margin: 0; min-height: 1.2em; color: var(--t-danger); font-size: var(--t-fs-13); }
.t-form-error:empty { display: none; }


/* ══════════════════════════════════════════════════════════════════
   Member-app components (PLATFORM-REDESIGN §5.1.2) — generic, so every
   member page (and chat/DMs in wave 3) shares one implementation.
   Catalogue: .claude/skills/ghawy-design-system/references/components.md §7
   ══════════════════════════════════════════════════════════════════ */

/* KPI icon tile (home "this week", profile stats) */
.t-kpi-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: var(--t-r-md); background: var(--t-surface-2); color: var(--t-text-2);
}
.t-kpi-ic--accent  { background: var(--t-accent-soft); color: var(--t-accent-ink); }
.t-kpi-ic--success { background: var(--t-success-bg); color: var(--t-success); }
.t-kpi-ic--warning { background: var(--t-warning-bg); color: var(--t-warning); }
.t-kpi-ic--info    { background: var(--t-info-bg); color: var(--t-info); }
.t-kpi-ic--danger  { background: var(--t-danger-bg); color: var(--t-danger); }

/* Course card (course-card.js renders it on the home and the courses page): cover — the image, or the brand
   gradient — under a scrim, the track over it, the progress ring once started; the title is the card's one link
   (a stretched link, so the instructor link inside still works); lessons and runtime as chips; the progress bar. */
.t-courses { display: grid; gap: var(--t-4); grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.t-course {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--t-surface-1); border: 1px solid var(--t-border); border-radius: var(--t-r-lg);
  transition: border-color var(--t-dur) var(--t-ease), transform var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease);
}
.t-course:hover { border-color: var(--t-border-strong); transform: translateY(-2px); box-shadow: var(--t-shadow-2); }
.t-course:focus-within { border-color: var(--t-accent-ink); }
.t-course-cover { position: relative; aspect-ratio: 16 / 9; background: var(--t-surface-3); overflow: hidden; }
.t-course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-course-cover.is-gradient { background: var(--t-cover-gradient); }
.t-course-cover::after { content: ""; position: absolute; inset: 0; background: var(--t-cover-fade); pointer-events: none; }
.t-course-cover.is-gradient::after { content: none; }
.t-course-track {
  position: absolute; z-index: 1; inset-block-end: var(--t-2); inset-inline-start: var(--t-2); max-width: calc(100% - 64px);
  padding: 2px var(--t-2); border-radius: var(--t-r-pill); background: var(--t-overlay); color: var(--t-on-image);
  font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-ring { position: absolute; z-index: 1; inset-block-start: var(--t-2); inset-inline-end: var(--t-2); width: 34px; height: 34px; display: grid; place-items: center; }
.t-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
[dir="rtl"] .t-ring svg { transform: rotate(-90deg) scaleY(-1); }   /* the arc grows clockwise in both directions */
.t-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.t-ring-track { stroke: var(--t-overlay); }
.t-ring-arc { stroke: var(--t-accent); transition: stroke-dashoffset var(--t-dur-slow) var(--t-ease); }
.t-ring.is-done .t-ring-arc { stroke: var(--t-success); }
.t-ring-num { position: absolute; color: var(--t-on-image); font-size: var(--t-fs-12); font-weight: var(--t-fw-black); font-variant-numeric: tabular-nums; }
.t-course-body { display: flex; flex-direction: column; gap: var(--t-2); padding: var(--t-3) var(--t-4) var(--t-4); flex: 1 1 auto; }
.t-course-title { margin: 0; font-size: var(--t-fs-16); font-weight: var(--t-fw-bold); line-height: var(--t-lh-tight); }
.t-course-link { color: var(--t-text); text-decoration: none; }
.t-course-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }       /* the whole card is the link */
.t-course-link:focus-visible { outline: none; }
.t-course-title mark { background: var(--t-accent-soft); color: inherit; border-radius: 3px; }
.t-course-inst { position: relative; z-index: 3; display: flex; align-items: center; gap: var(--t-2); min-width: 0; }
.t-course-inst-name { color: var(--t-text-2); font-size: var(--t-fs-13); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-course-inst-name:hover { color: var(--t-text); text-decoration: underline; }
.t-course-meta { display: flex; flex-wrap: wrap; gap: var(--t-2); margin-block-start: auto; padding-block-start: var(--t-2); border-block-start: 1px solid var(--t-border); }
.t-course-bar { margin-block-start: var(--t-1); }
.t-course-bar.is-done > span { background: var(--t-success); }
.t-course--skel .t-course-cover { border-radius: 0; }
.t-skel--title { height: 18px; width: 80%; }
.t-skel--line { height: 12px; width: 50%; }
.t-skel--chips { height: 26px; width: 70%; }
@media (prefers-reduced-motion: reduce) { .t-course:hover { transform: none; } }

/* Message row (compact form — the home widget; chat and DMs get the full row in wave 3) */
.t-msgs { display: flex; flex-direction: column; gap: var(--t-1); overflow-y: auto; }
.t-msg { display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-2); border-radius: var(--t-r-md); min-width: 0; }
.t-msg:hover { background: var(--t-surface-2); }
.t-msg-main { flex: 1 1 auto; min-width: 0; }
.t-msg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--t-2); }
.t-msg-name { font-weight: var(--t-fw-bold); font-size: var(--t-fs-13); color: var(--t-text); }
.t-msg-time { font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-msg-body { font-size: var(--t-fs-14); color: var(--t-text-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.t-msg-body a { color: var(--t-accent-ink); text-decoration: underline; }
.t-msg--compact { padding-block: 6px; }
.t-pill--xs { height: 18px; padding: 0 6px; font-size: var(--t-fs-12); }

/* Composer (compact: one line + send; the full one lands with chat in wave 3) */
.t-composer { display: flex; align-items: center; gap: var(--t-2); }
.t-composer .t-input { flex: 1 1 auto; min-width: 0; }

/* Countdown (next live session) */
.t-countdown { display: flex; gap: var(--t-2); }
.t-countdown-unit {
  display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: var(--t-2);
  border-radius: var(--t-r-md); background: var(--t-surface-2); font-size: var(--t-fs-12); color: var(--t-text-3);
}
.t-countdown-unit strong { font-size: var(--t-fs-20); font-weight: var(--t-fw-black); color: var(--t-text); font-variant-numeric: tabular-nums; direction: ltr; }

/* A list of linked rows inside a card (AI Updates on the home, help topics…) */
.t-linklist { display: flex; flex-direction: column; }
.t-linkrow {
  display: flex; align-items: flex-start; gap: var(--t-3); padding: var(--t-3) var(--t-2); min-height: 44px;
  border-block-end: 1px solid var(--t-border); color: var(--t-text); text-decoration: none; border-radius: var(--t-r-sm);
}
.t-linkrow:last-child { border-block-end: 0; }
.t-linkrow:hover { background: var(--t-surface-2); }
.t-linkrow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.t-linkrow-title { font-weight: var(--t-fw-medium); max-width: none; }
.t-linkrow-meta { display: flex; align-items: center; gap: var(--t-2); font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-linkrow-meta > span { display: inline-flex; align-items: center; gap: 4px; }

/* Page header (member pages): title + one line + the primary action at the end */
.t-page-head .t-page-lede { margin: 0; color: var(--t-text-2); font-size: var(--t-fs-14); }

/* Small celebratory pop (reactions, a lesson completed); off under reduced motion via the tokens. Its keyframes
   are `t-bounce`: `t-pop` is the menus' opening animation (above) and a second definition replaced it (fixed in wave 2). */
@keyframes t-bounce { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.t-pop { animation: t-bounce var(--t-dur-slow) var(--t-ease); }

/* Rating scale 1–5 (the renewal survey): a radiogroup of five large targets; the chosen one is the lime fill */
.t-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--t-2); }
.t-scale-opt {
  min-height: 48px; border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md); background: var(--t-surface-2);
  color: var(--t-text); font: inherit; font-size: var(--t-fs-20); font-weight: var(--t-fw-black); cursor: pointer;
  transition: border-color var(--t-dur) var(--t-ease), background var(--t-dur) var(--t-ease);
}
.t-scale-opt:hover { border-color: var(--t-accent-ink); }
.t-scale-opt[aria-checked="true"] { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }
.t-scale-ends { display: flex; justify-content: space-between; gap: var(--t-2); margin-block-start: var(--t-1); }

/* What's New: the popup body (a t-modal) and the home widget's carousel */
.t-wn { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--t-5); }
.t-wn-side { display: flex; flex-direction: column; gap: var(--t-3); padding: var(--t-4); border-radius: var(--t-r-lg);
  background: radial-gradient(90% 60% at 50% 100%, var(--t-accent-soft), transparent 70%), var(--t-surface-2); }
.t-wn-brand { display: flex; align-items: center; gap: var(--t-2); font-weight: var(--t-fw-black); }
.t-wn-headline { margin: 0; font-size: var(--t-fs-24); font-weight: var(--t-fw-black); line-height: var(--t-lh-tight); }
.t-wn-accent { color: var(--t-accent-ink); }
.t-wn-ver { display: inline-block; margin-inline-start: var(--t-2); padding: 0 6px; border-radius: var(--t-r-sm); background: var(--t-accent); color: var(--t-on-accent); font-size: var(--t-fs-12); vertical-align: middle; }
.t-wn-sub { margin: 0; color: var(--t-text-2); font-size: var(--t-fs-13); }
.t-wn-list { display: flex; flex-direction: column; gap: var(--t-2); max-height: min(60vh, 460px); overflow-y: auto; padding-inline-end: var(--t-1); }
.t-wn-item { display: flex; flex-direction: column; gap: var(--t-2); padding: var(--t-3); border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-1); }
.t-wn-shot { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--t-r-sm); border: 1px solid var(--t-border); }
.t-wn-row { display: flex; gap: var(--t-3); align-items: flex-start; }
.t-wn-text { min-width: 0; }
.t-wn-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-2); flex-wrap: wrap; }
.t-wn-title { margin: 0; font-size: var(--t-fs-14); font-weight: var(--t-fw-bold); }
.t-wn-desc { margin: 2px 0 0; color: var(--t-text-2); font-size: var(--t-fs-13); }
.t-wn-carousel { padding: 0 var(--t-4) var(--t-4); }
.t-wn-carousel .t-wn-item { border: 0; padding: 0; background: transparent; }
.t-wn-dots { display: flex; justify-content: center; gap: 6px; margin-block-start: var(--t-3); }
.t-wn-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.t-wn-dot::before { content: ""; width: 7px; height: 7px; border-radius: var(--t-r-pill); background: var(--t-border-strong); transition: width var(--t-dur) var(--t-ease); }
.t-wn-dot[aria-current="true"]::before { width: 18px; background: var(--t-accent); }
@media (max-width: 640px) { .t-wn { grid-template-columns: 1fr; } .t-wn-list { max-height: none; } }
body.t-no-scroll { overflow: hidden; }
.t-avatar--xl { width: 72px; height: 72px; font-size: var(--t-fs-24); }

/* ── Player frame (wave 2): 16:9 held from the first paint, whatever plays in it ─────────────────────────────── */
.t-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--t-r-lg); background: var(--t-player-bg); color: var(--t-on-image); }
.t-player > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Lesson row (the curriculum): done / current states, the intro badge «مقدمة» (report 1.2) ──────────────── */
.t-lesson { position: relative; display: flex; align-items: center; gap: var(--t-1); list-style: none; }
.t-lesson-btn {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: var(--t-3); padding: var(--t-2) var(--t-3);
  border: 0; border-radius: var(--t-r-md); background: transparent; color: var(--t-text-2); font: inherit; text-align: start; cursor: pointer;
}
.t-lesson-btn:hover { background: var(--t-surface-2); color: var(--t-text); }
.t-lesson-state {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--t-border-strong); color: var(--t-text-3);
}
.t-lesson-done-ic { display: none; }
.t-lesson.is-done .t-lesson-state { border-color: var(--t-success); background: var(--t-success); color: var(--t-on-accent); }
.t-lesson.is-done .t-lesson-done-ic { display: inline-block; }
.t-lesson.is-done .t-lesson-play-ic { display: none; }
.t-lesson.is-current .t-lesson-btn { background: var(--t-accent-soft); color: var(--t-text); font-weight: var(--t-fw-bold); }
.t-lesson.is-current .t-lesson-state { border-color: var(--t-accent-ink); color: var(--t-accent-ink); }
.t-lesson.is-current.is-done .t-lesson-state { color: var(--t-on-accent); }
.t-lesson-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: var(--t-lh-tight); }
.t-lesson-dur { flex: 0 0 auto; font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-lesson-project { flex: 0 0 auto; }
.t-intro-badge {
  display: inline-flex; align-items: center; padding: 1px var(--t-2); border-radius: var(--t-r-pill);
  background: var(--t-info-bg); color: var(--t-info); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); vertical-align: middle;
}

/* ── Breadcrumb (wave 2: a staff page reached from a dashboard section) ─────────────────────────────────────── */
.t-crumbs { display: flex; align-items: center; gap: var(--t-1); min-width: 0; margin-block-end: var(--t-3); font-size: var(--t-fs-13); color: var(--t-text-3); }
.t-crumbs a { color: var(--t-text-2); text-decoration: none; border-radius: var(--t-r-sm); }
.t-crumbs a:hover { color: var(--t-text); text-decoration: underline; }
.t-crumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-text); font-weight: var(--t-fw-bold); }

/* ══ Wave 3: the community components (chat, DMs, posts) — generic, documented in references/components.md §7 ══ */
.t-avatar--md { width: 40px; height: 40px; font-size: var(--t-fs-14); }
.t-modal--md { width: min(560px, 100%); }
.t-iconbtn--accent { background: var(--t-accent); color: var(--t-on-accent); border-color: transparent; }
.t-iconbtn--accent:hover { background: var(--t-accent-hover); color: var(--t-on-accent); }
.t-btn--xs { min-height: 26px; padding: 0 var(--t-2); font-size: var(--t-fs-12); border-radius: var(--t-r-sm); gap: 4px; }
.t-btn--danger-text { color: var(--t-danger); }
.t-chip--static { padding-inline: 10px; }
.t-player > video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Message row (full, .t-msg--full — the home's compact preview keeps .t-msg alone): avatar or gutter time · meta · body · reactions · read receipt · a toolbar on hover/focus */
.t-msg--full { position: relative; padding: 6px var(--t-3); border-radius: 0; gap: var(--t-3); }
.t-msg--full.is-grouped { padding-block: 1px; }
.t-msg-av { flex: 0 0 auto; display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.t-msg-av .t-avatar { width: 36px; height: 36px; }
.t-msg-av--sm .t-avatar { width: 28px; height: 28px; }
.t-msg-gutter-time { flex: 0 0 36px; padding-block-start: 3px; font-size: 10px; color: var(--t-text-3); text-align: center; opacity: 0; }
.t-msg--full:hover .t-msg-gutter-time, .t-msg--full:focus-within .t-msg-gutter-time { opacity: 1; }
.t-msg--full .t-msg-name, .t-post .t-msg-name, .t-comment .t-msg-name { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--t-fw-bold); font-size: var(--t-fs-14); color: var(--t-text); cursor: pointer; }
.t-msg--full .t-msg-name:hover, .t-post .t-msg-name:hover, .t-comment .t-msg-name:hover { text-decoration: underline; }
.t-msg-verified { display: inline-flex; color: var(--t-accent-ink); }
.t-msg--full .t-msg-body { width: fit-content; max-width: 100%; color: var(--t-text); line-height: var(--t-lh); }
.t-msg-edited { font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-msg-replyto {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-block: 2px; padding: 2px var(--t-2);
  border: 0; border-inline-start: 2px solid var(--t-accent-ink); border-radius: var(--t-r-sm); background: var(--t-surface-2);
  color: var(--t-text-2); font: inherit; font-size: var(--t-fs-12); cursor: pointer;
}
.t-msg-read { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 2px; padding: 0; border: 0; background: none; color: var(--t-text-3); font: inherit; font-size: var(--t-fs-12); cursor: pointer; }
.t-msg-read:hover { color: var(--t-text-2); }
.t-msg-actions {
  position: absolute; inset-block-start: -14px; inset-inline-end: var(--t-3); display: flex; gap: 2px; padding: 2px;
  border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-1); box-shadow: var(--t-shadow-1);
  opacity: 0; pointer-events: none; transition: opacity var(--t-dur) var(--t-ease);
}
.t-msg--full:hover .t-msg-actions, .t-msg--full:focus-within .t-msg-actions { opacity: 1; pointer-events: auto; }
@media (hover: none) { .t-msg-actions { position: static; opacity: 1; pointer-events: auto; border: 0; box-shadow: none; background: none; align-self: flex-start; } }
.t-msg--full.is-campaign { border-inline-start: 3px solid var(--campaign-color, var(--t-info)); }
.t-msg-campaign-chip { font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); color: var(--campaign-color, var(--t-info)); }
.t-msg--full.is-flash, .t-post.is-flash { background: var(--t-accent-soft); transition: background var(--t-dur-slow) var(--t-ease); }
.t-msg--full.is-leaving, .t-post.is-leaving { opacity: 0; transition: opacity var(--t-dur) var(--t-ease); }
.t-msg-editbox { width: 100%; min-height: 60px; height: var(--ta-h, auto); resize: none; }
.t-msg-editbar { display: flex; align-items: center; gap: var(--t-2); margin-block-start: var(--t-1); flex-wrap: wrap; }

/* Reactions: chips under the message; a picker in a t-menu */
.t-reactions { display: flex; flex-wrap: wrap; gap: 4px; }
.t-reactions:empty { display: none; }
.t-reactions { margin-block-start: 4px; }
.t-reaction {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border: 1px solid var(--t-border);
  border-radius: var(--t-r-pill); background: var(--t-surface-2); color: var(--t-text-2); font: inherit; font-size: var(--t-fs-13); cursor: pointer;
}
.t-reaction:hover { border-color: var(--t-border-strong); }
.t-reaction.is-mine { border-color: var(--t-accent-ink); background: var(--t-accent-soft); color: var(--t-text); }
.t-emoji-row { display: flex; gap: 2px; padding: 2px; }
.t-emoji-row .t-menu-item.t-emoji-opt { width: 40px; min-height: 40px; justify-content: center; padding: 0; font-size: var(--t-fs-20); }
.t-readers-head { padding: var(--t-1) var(--t-3); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); color: var(--t-text-3); }
.t-readers { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; padding: 0 var(--t-3) var(--t-2); }
.t-reader { padding-block: 3px; font-size: var(--t-fs-13); color: var(--t-text); }

/* Dividers and typing */
.t-divider { display: flex; align-items: center; gap: var(--t-3); margin-block: var(--t-3); color: var(--t-text-3); font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); }
.t-divider::before, .t-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--t-border); }
.t-typing { display: inline-flex; gap: 4px; align-self: flex-start; margin: var(--t-1) var(--t-3); padding: var(--t-2) var(--t-3); border-radius: var(--t-r-lg); background: var(--t-surface-2); }
.t-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--t-text-3); animation: t-typing 1.2s infinite ease-in-out; }
.t-typing span:nth-child(2) { animation-delay: .15s; } .t-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes t-typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .t-typing span { animation: none; } }

/* Attachments: an image (opens the lightbox), a file card, a voice note */
.t-media { display: block; max-width: min(360px, 100%); margin-block: 4px; padding: 0; border: 1px solid var(--t-border); border-radius: var(--t-r-md); overflow: hidden; background: var(--t-surface-2); cursor: zoom-in; }
.t-media img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.t-attach {
  display: inline-flex; align-items: center; gap: var(--t-3); max-width: min(320px, 100%); margin-block: 4px; padding: var(--t-2) var(--t-3);
  border: 1px solid var(--t-border); border-radius: var(--t-r-md); background: var(--t-surface-2); color: var(--t-text); text-decoration: none;
}
.t-attach:hover { border-color: var(--t-border-strong); }
.t-attach-ic { color: var(--t-accent-ink); }
.t-attach-text { display: flex; flex-direction: column; min-width: 0; }
.t-attach-name { font-weight: var(--t-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-attach-meta { font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-voice { display: inline-flex; align-items: center; gap: var(--t-2); width: min(320px, 100%); margin-block: 4px; padding: var(--t-1) var(--t-2); border-radius: var(--t-r-pill); background: var(--t-surface-2); border: 1px solid var(--t-border); }
.t-voice-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--t-accent); color: var(--t-on-accent); cursor: pointer; }
.t-voice-track { flex: 1 1 auto; min-width: 0; height: 28px; display: flex; align-items: center; cursor: pointer; border-radius: var(--t-r-sm); }
.t-voice-bars { display: flex; align-items: center; gap: 2px; width: 100%; height: 100%; }
.t-voice-bars span { flex: 1 1 0; height: var(--h, 40%); border-radius: 2px; background: var(--t-border-strong); }
.t-voice-bars span.is-played { background: var(--t-accent-ink); }
.t-voice-dur { flex: 0 0 auto; font-size: var(--t-fs-12); color: var(--t-text-3); min-width: 34px; text-align: end; }

/* The composer (full): reply chip, attachment preview, voice preview, then attach · voice · a growing textarea · send */
.t-composer--full { position: relative; align-items: flex-end; padding: var(--t-2); border: 1px solid var(--t-border-strong); border-radius: var(--t-r-lg); background: var(--t-surface-1); }
.t-composer--full:focus-within { border-color: var(--t-accent-ink); }
.t-composer-input { flex: 1 1 auto; min-width: 0; min-height: 36px; height: var(--ta-h, 36px); max-height: 160px; padding: 7px var(--t-2); border: 0; background: transparent; resize: none; line-height: 1.5; }
.t-composer-input:focus { box-shadow: none; outline: none; }
.t-rec-time { align-self: center; font-size: var(--t-fs-13); color: var(--t-danger); }
#voiceBtn.is-recording, .t-iconbtn.is-recording { color: var(--t-danger); background: var(--t-danger-bg); }
.t-reply-chip, .t-attach-preview, .t-voice-preview {
  display: flex; align-items: center; gap: var(--t-2); margin-block-end: var(--t-2); padding: var(--t-2) var(--t-3);
  border: 1px solid var(--t-border); border-inline-start: 3px solid var(--t-accent-ink); border-radius: var(--t-r-md); background: var(--t-surface-2);
}
.t-reply-chip-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-fs-13); }
.t-reply-chip-text span { color: var(--t-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-attach-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--t-r-sm); }
.t-attach-preview-name { flex: 1 1 auto; min-width: 0; font-size: var(--t-fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-voice-preview audio { flex: 1 1 auto; min-width: 0; height: 36px; }

/* Post card + comments */
.t-post { display: flex; flex-direction: column; gap: var(--t-2); padding: var(--t-4); }
.t-post-head { display: flex; align-items: flex-start; gap: var(--t-3); }
.t-post-who { flex: 1 1 auto; min-width: 0; }
.t-post-title { margin: 0; font-size: var(--t-fs-16); font-weight: var(--t-fw-bold); color: var(--t-text); overflow-wrap: anywhere; }
.t-post-body { color: var(--t-text-2); font-size: var(--t-fs-14); line-height: var(--t-lh); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-post-body a, .t-comment-body a { color: var(--t-accent-ink); text-decoration: underline; }
.t-post-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.t-post-media { max-width: 100%; }
.t-post-media img { max-height: 420px; }
.t-post-foot { display: flex; gap: var(--t-1); padding-block-start: var(--t-2); border-block-start: 1px solid var(--t-border); }
.t-heart.is-on, .t-heart[aria-pressed="true"] { color: var(--t-danger); background: var(--t-danger-bg); border-color: transparent; }
.t-heart.is-on svg { fill: currentColor; }
.t-post-comments { padding-block-start: var(--t-2); border-block-start: 1px solid var(--t-border); }
.t-comments { display: flex; flex-direction: column; gap: var(--t-3); }
.t-comment { display: flex; gap: var(--t-2); align-items: flex-start; }
.t-comment.is-reply { margin-inline-start: var(--t-8); }
.t-comment-main { flex: 1 1 auto; min-width: 0; }
.t-comment-body { font-size: var(--t-fs-14); color: var(--t-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.t-comment-actions { display: flex; gap: var(--t-1); margin-block-start: 2px; }
.t-comment-reply { margin-block-start: var(--t-2); }

/* Lightbox: an image in a TUI modal */
.t-lightbox { display: flex; justify-content: center; }
.t-lightbox-img { max-width: 100%; max-height: 75dvh; height: auto; border-radius: var(--t-r-md); object-fit: contain; }
/* The @mention suggestions (utils.js attachMentions) on the member pages: tokens, and the start side in both languages */
.m-app .mentions-dropdown { inset-inline-start: 0; left: auto; inset-block-end: 100%; background: var(--t-surface-1); border-color: var(--t-border-strong); border-radius: var(--t-r-md); box-shadow: var(--t-shadow-2); z-index: var(--t-z-dropdown); }
.m-app .mention-item { min-height: 40px; color: var(--t-text); }
.m-app .mention-item:hover { background: var(--t-surface-2); }
.m-app .mention-item span { color: var(--t-text); font-size: var(--t-fs-13); }

/* ══ Wave 4: entry + money (auth card, Google button, OTP, checkout) — references/components.md §7 ══ */
/* The page: one centered card, the brand and the language toggle above it, nothing else competing */
.t-auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: var(--t-5); padding: var(--t-6) var(--t-4) calc(var(--t-8) + env(safe-area-inset-bottom, 0px)); background: var(--t-bg); }
.t-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--t-3); width: 100%; max-width: 440px; }
.t-auth-brand { display: inline-flex; align-items: center; gap: var(--t-2); color: var(--t-text); font-weight: var(--t-fw-black); text-decoration: none; }
.t-auth-brand img { width: 32px; height: 32px; }
.t-auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--t-4); padding: var(--t-6); border: 1px solid var(--t-border); border-radius: var(--t-r-lg); background: var(--t-surface-1); box-shadow: var(--t-shadow-1); }
.t-auth-card--wide { max-width: 560px; }
.t-auth-top--wide { max-width: 560px; }
.t-auth-title { margin: 0; font-size: var(--t-fs-24); font-weight: var(--t-fw-black); line-height: var(--t-lh-tight); color: var(--t-text); }
.t-auth-title .t-accent-text { color: var(--t-accent-ink); }
.t-auth-sub { margin: 0; color: var(--t-text-2); font-size: var(--t-fs-14); }
.t-auth-foot { text-align: center; color: var(--t-text-2); font-size: var(--t-fs-14); }
.t-auth-foot a, .t-auth-link { color: var(--t-accent-ink); font-weight: var(--t-fw-bold); text-decoration: none; }
.t-auth-foot a:hover, .t-auth-link:hover { text-decoration: underline; }
.t-or { display: flex; align-items: center; gap: var(--t-3); color: var(--t-text-3); font-size: var(--t-fs-13); }
.t-or::before, .t-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--t-border); }
.t-btn--lg { min-height: 48px; font-size: var(--t-fs-16); border-radius: var(--t-r-md); }
.t-btn.is-loading, .t-btn.loading { position: relative; color: transparent; pointer-events: none; }
.t-btn.is-loading::after, .t-btn.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--t-on-accent); border-inline-end-color: transparent; animation: t-spin .7s linear infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .t-btn.is-loading::after, .t-btn.loading::after { animation-duration: 2s; } }

/* An inline message for the whole form (an error / a success), announced */
.t-alert, .t-auth .alert { display: none; padding: var(--t-3); border-radius: var(--t-r-md); font-size: var(--t-fs-14); line-height: var(--t-lh); }
.t-alert.error, .t-alert.success, .t-alert.info, .t-alert.is-shown, .t-auth .alert.error, .t-auth .alert.success, .t-auth .alert.info { display: block; }
.t-alert.error, .t-auth .alert.error { color: var(--t-danger); background: var(--t-danger-bg); border: 1px solid var(--t-danger-border); }
.t-alert.success, .t-auth .alert.success { color: var(--t-success); background: var(--t-success-bg); border: 1px solid var(--t-success-border); }
.t-alert.info, .t-auth .alert.info { color: var(--t-info); background: var(--t-info-bg); border: 1px solid var(--t-info-border); }

/* Password: a reveal button inside the field, and a Caps Lock hint under it */
.t-pw { position: relative; }
.t-pw .t-input { padding-inline-end: 44px; }
.t-pw-toggle { position: absolute; inset-block: 0; inset-inline-end: 2px; display: inline-flex; align-items: center; justify-content: center; width: 40px; border: 0; background: none; color: var(--t-text-3); cursor: pointer; border-radius: var(--t-r-sm); }
.t-pw-toggle:hover { color: var(--t-text); }
.t-caps { display: inline-flex; align-items: center; gap: 4px; color: var(--t-warning); font-size: var(--t-fs-12); }
.t-caps[hidden] { display: none; }
.t-field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--t-2); }

/* Google's button — their branding guidelines: the "G", their colours (tokens), 40 px high */
.t-google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--t-google-border); border-radius: 20px; background: var(--t-google-bg); color: var(--t-google-text);
  font: inherit; font-size: var(--t-fs-14); font-weight: var(--t-fw-medium); cursor: pointer; text-decoration: none;
}
.t-google-btn:hover { filter: brightness(1.06); }
.t-google-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* A one-time code: separate boxes, paste fills them all, digits only */
.t-otp { display: flex; justify-content: center; gap: var(--t-2); direction: ltr; }
.t-otp input { width: 46px; height: 54px; padding: 0; text-align: center; font-size: var(--t-fs-20); font-weight: var(--t-fw-bold); font-variant-numeric: tabular-nums; border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md); background: var(--t-surface-2); color: var(--t-text); }
.t-otp input:focus { outline: none; border-color: var(--t-accent-ink); box-shadow: 0 0 0 3px var(--t-accent-soft); }
@media (max-width: 380px) { .t-otp input { width: 40px; height: 48px; } }
.t-auth-title .cyan { color: var(--t-accent-ink); }
.t-auth--center { justify-content: center; }
.t-auth-card--status { align-items: center; text-align: center; max-width: 380px; }
.t-spinner { display: inline-block; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--t-border-strong); border-block-start-color: var(--t-accent); animation: t-spin .8s linear infinite; }
.t-spinner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .t-spinner { animation: none; } }
/* Register: the strength meter, the three password checks, the terms row, Turnstile, a field marked invalid */
.t-strength { display: flex; align-items: center; gap: var(--t-2); margin-block-start: var(--t-2); }
.t-strength-bars { flex: 1 1 auto; display: flex; gap: 4px; }
.strength-bar { flex: 1 1 0; height: 4px; border-radius: var(--t-r-pill); background: var(--t-border); }
.strength-bar.weak { background: var(--t-danger); }
.strength-bar.medium { background: var(--t-warning); }
.strength-bar.strong { background: var(--t-success); }
.t-strength-text { min-width: 3em; font-size: var(--t-fs-12); font-weight: var(--t-fw-bold); text-align: end; }
.t-strength-text.is-weak { color: var(--t-danger); } .t-strength-text.is-medium { color: var(--t-warning); } .t-strength-text.is-strong { color: var(--t-success); }
.t-checks { display: flex; flex-direction: column; gap: 4px; margin: var(--t-2) 0 0; padding: 0; list-style: none; }
.t-checks .check-item { display: flex; align-items: center; gap: 6px; font-size: var(--t-fs-12); color: var(--t-text-3); }
.t-checks .check-item.valid { color: var(--t-success); }
/* Not colour alone (WCAG 1.4.1): a met rule's icon fills in, as the old solid/regular Font Awesome pair did. */
.t-checks .check-item.valid svg circle { fill: currentColor; }
.t-checks .check-item.valid svg path { stroke: var(--t-surface-1); }
.t-terms { align-items: flex-start; font-size: var(--t-fs-13); color: var(--t-text-2); }
.t-terms a { color: var(--t-accent-ink); }
.t-turnstile { display: flex; justify-content: center; min-height: 65px; }
.t-turnstile .cf-turnstile { width: 100%; }
.t-input.input-invalid, .t-input[aria-invalid="true"] { border-color: var(--t-danger); }
.invite-welcome { text-align: center; display: flex; flex-direction: column; gap: var(--t-1); }
.invite-welcome-emoji { font-size: var(--t-fs-32); }
.t-auth-badge { align-self: flex-start; }
.t-otp input.filled, .t-otp .otp-cell.filled { border-color: var(--t-accent-ink); }
.t-auth-done { display: flex; flex-direction: column; align-items: center; gap: var(--t-2); text-align: center; }
.t-auth-done[hidden] { display: none; }