/*
 * FILE: /td-os/core/td-components.css
 * Purpose (EN): td-components stylesheet for TDOS runtime.
 * مقصد (UR): TDOS runtime ke liye td-components stylesheet.
 *
 * Version: v1.0.0
 *
 * Sections (Index)
 *  01) Implementation
 */


/* =========================================================
   SECTION 01 — IMPLEMENTATION
   EN: Main styling rules for this stylesheet.
   UR: Is stylesheet ke main styling rules.
   ========================================================= */

/* Assumptions:
   1) All .td-* component classes in this file are public API and must not be renamed.
   2) /core/td-style.css is loaded before this file so all tokens are available.
   3) JS handles ARIA and open/close state for FAQ, overlays, notes drawer, and tabs.
   4) Tabs, toggles, checklist rows are rendered as proper interactive elements (<button>, <label>, etc.).
*/


/* =========================================================
   01) TEXT, ICONS & STACK HELPERS

   [EN] PURPOSE:
   • Provide basic text helpers and layout stacks shared across engines.
   [UR] مقصد:
   • Multi-engines ke لیے basic text helpers aur stack layouts deta hai۔
   ========================================================= */

.td-eyebrow {
  font-size: var(--td-font-eyebrow);
  color: var(--td-text-eyebrow);
  letter-spacing: var(--td-tracking-wide);
  text-transform: uppercase;
}

.td-title {
  font-size: var(--td-font-h2);
  line-height: var(--td-line-tight);
  color: var(--td-text-title);
}

.td-subtitle {
  font-size: var(--td-font-body);
  color: var(--td-text-soft);
}

.td-muted {
  color: var(--td-text-muted);
}

.td-note {
  font-size: var(--td-font-small);
  color: var(--td-text-muted);
  line-height: var(--td-line-relaxed);
}

.td-text-sm {
  font-size: var(--td-font-small);
}

.td-text-xs {
  font-size: var(--td-font-size-xs);
}

.td-text-strong {
  font-weight: var(--td-font-weight-semibold);
  color: var(--td-text-soft-strong);
}

.td-strong {
  font-weight: var(--td-font-weight-semibold);
  color: var(--td-text-body);
}

/* Generic inline icon (CANONICAL) */
.td-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Text safety for dense components (mobile overflow guard)
   IMPORTANT:
   • Do NOT apply to <th>/<td> so tables can keep words intact.
*/
.td-shell,
.td-shell *:not(code):not(pre):not(.td-code-block):not(th):not(td) {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tables should never shatter words – hard override */
.td-shell .td-table,
.td-shell .td-table th,
.td-shell .td-table td {
  overflow-wrap: normal;
  word-break: normal;
}

/* =========================================================
   02) BADGES, PILLS, TAGS, CHIPS

   [EN] PURPOSE:
   • Small inline status elements used across UI.
   [UR] مقصد:
   • UI mein use honay walay chhotay status/pills/chips.
   ========================================================= */

.td-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--td-radius-pill);
  font-size: var(--td-font-size-xs);
  font-weight: var(--td-font-weight-semibold);
  letter-spacing: var(--td-tracking-wide);
  color: var(--td-badge-text);
  background: var(--td-badge-bg);
  border: 1px solid var(--td-badge-border);
}

.td-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--td-radius-pill);
  font-size: var(--td-font-small);
  border: 1px solid var(--td-pill-border);
  background: rgba(255, 255, 255, 0.75);
  color: var(--td-text-soft-strong);
}

.td-pill-primary {
  background: var(--td-pill-primary-bg);
  color: var(--td-pill-primary-text);
  border-color: rgba(15, 23, 42, 0.88);
}

.td-pill-soft {
  background: var(--td-pill-soft-bg);
  color: var(--td-pill-soft-text);
  border-color: rgba(191, 219, 254, 0.9);
}

.td-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--td-radius-pill);
  border: 1px solid var(--td-pill-border);
  background: var(--td-chip-bg);
  color: var(--td-chip-text);
  font-size: var(--td-font-small);
}

/* Clickable chip button */
.td-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--td-radius-pill);
  border: 1px solid var(--td-pill-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--td-text-soft-strong);
  font-size: var(--td-font-small);
  cursor: pointer;
  transition:
    transform var(--td-motion-med) var(--td-motion-ease-out),
    box-shadow var(--td-motion-med) var(--td-motion-ease-out);
}

.td-chip-button:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--td-focus-ring), var(--td-shadow-focus);
}

/* =========================================================
   03) BUTTONS

   [EN] PURPOSE:
   • Primary / outline / ghost / danger buttons.
   [UR] مقصد:
   • Primary, outline, ghost aur danger buttons.
   ========================================================= */

.td-btn,
.td-btn-outline,
.td-btn-ghost,
.td-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: var(--td-btn-padding-y) var(--td-btn-padding-x);
  border-radius: var(--td-radius-btn);
  font-size: var(--td-btn-font-size);
  font-weight: var(--td-font-weight-semibold);

  cursor: pointer;
  user-select: none;

  transition:
    transform var(--td-motion-med) var(--td-motion-ease-out),
    box-shadow var(--td-motion-med) var(--td-motion-ease-out),
    background var(--td-motion-med) var(--td-motion-ease-out),
    border-color var(--td-motion-med) var(--td-motion-ease-out),
    color var(--td-motion-med) var(--td-motion-ease-out);
}

.td-btn {
  background: var(--td-btn-bg);
  color: var(--td-btn-text);
  border: 1px solid var(--td-btn-border);
  box-shadow: var(--td-btn-shadow-rest);
}

.td-btn:hover {
  background: var(--td-btn-bg-hover);
  box-shadow: var(--td-btn-shadow-hover);
}

.td-btn:active {
  box-shadow: var(--td-btn-shadow-active);
  transform: translateY(0);
}

.td-btn-outline {
  background: var(--td-btn-outline-bg);
  color: var(--td-btn-outline-text);
  border: 1px solid var(--td-btn-outline-border);
  box-shadow: var(--td-shadow-soft);
}

.td-btn-ghost {
  background: var(--td-btn-ghost-bg);
  color: var(--td-btn-ghost-text);
  border: 1px solid var(--td-btn-ghost-border);
}

.td-btn-danger {
  background: var(--td-btn-danger-bg);
  color: var(--td-btn-danger-text);
  border: 1px solid rgba(185, 28, 28, 0.55);
  box-shadow: var(--td-shadow-soft);
}

.td-btn:focus-visible,
.td-btn-outline:focus-visible,
.td-btn-ghost:focus-visible,
.td-btn-danger:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--td-btn-focus-ring);
}

.td-btn:disabled,
.td-btn-outline:disabled,
.td-btn-ghost:disabled,
.td-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* =========================================================
   04) INPUTS & FORM FIELDS

   [EN] PURPOSE:
   • Inputs, textarea, select styling driven by tokens.
   [UR] مقصد:
   • Inputs, textarea aur select ka token-driven styling.
   ========================================================= */

.td-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-label {
  font-weight: var(--td-font-weight-semibold);
  color: var(--td-label-text);
  font-size: var(--td-font-small);
}

.td-input,
.td-textarea,
.td-select {
  width: 100%;
  border-radius: var(--td-input-radius);
  padding: 12px 14px;
  background: var(--td-input-bg);
  color: var(--td-input-text);
  border: 1px solid var(--td-input-border);

  transition:
    border-color var(--td-motion-med) var(--td-motion-ease-out),
    box-shadow var(--td-motion-med) var(--td-motion-ease-out),
    background var(--td-motion-med) var(--td-motion-ease-out);
}

.td-textarea {
  min-height: 120px;
  resize: vertical;
}

.td-input::placeholder,
.td-textarea::placeholder {
  color: var(--td-input-placeholder);
}

.td-input:focus,
.td-textarea:focus,
.td-select:focus {
  outline: none;
  border-color: var(--td-input-border-focus);
  background: var(--td-input-bg-focus);
  box-shadow: 0 0 0 3px var(--td-input-focus-ring);
}

.td-helper {
  font-size: var(--td-font-small);
  color: var(--td-helper-text);
}

.td-error {
  font-size: var(--td-font-small);
  color: var(--td-error-text);
}

/* =========================================================
   05) CARDS, LISTS, STATUS, CHECKLIST

   [EN] PURPOSE:
   • Card base + list row + checklist row patterns.
   [UR] مقصد:
   • Card base + list rows + checklist patterns.
   ========================================================= */

.td-card {
  background: var(--td-section-bg-default);
  border: 1px solid var(--td-border-subtle);
  border-radius: var(--td-radius-card);
  padding: var(--td-space-lg);
  box-shadow: var(--td-shadow-card-primary);
  transition:
    transform var(--td-motion-med) var(--td-motion-ease-out),
    box-shadow var(--td-motion-med) var(--td-motion-ease-out);
}

.td-card-subtle {
  background: var(--td-section-bg-muted);
  border-color: var(--td-border-subtle);
  box-shadow: var(--td-shadow-card-secondary);
}

.td-list {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-sm);
}

.td-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--td-space-md);
  padding: var(--td-space-md);
  border-radius: var(--td-radius-lg);
  border: 1px solid var(--td-border-subtle);
  background: rgba(255, 255, 255, 0.75);
}

.td-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-sm);
}

.td-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--td-space-md);
  border-radius: var(--td-radius-lg);
  border: 1px solid var(--td-border-subtle);
  background: rgba(255, 255, 255, 0.8);
  transition:
    transform var(--td-motion-med) var(--td-motion-ease-out),
    background var(--td-motion-med) var(--td-motion-ease-out);
}

.td-check-row input[type="checkbox"] {
  margin-top: 3px;
}

/* =========================================================
   06) CTA (CALL TO ACTION)

   [EN] PURPOSE:
   • CTA block styling for conversions.
   [UR] مقصد:
   • Conversions ke liye CTA block styling.
   ========================================================= */

.td-cta {
  border-radius: var(--td-radius-2xl);
  padding: var(--td-space-2xl);
  background: var(--td-accent-gradient);
  color: #ffffff;
  box-shadow: var(--td-shadow-strong);
}

.td-cta-title {
  font-size: var(--td-font-h2);
  line-height: var(--td-line-tight);
  margin-bottom: var(--td-space-sm);
  color: #ffffff;
}

.td-cta-subtitle {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--td-space-lg);
}

/* =========================================================
   07) FAQ, ALERTS, TABLE, PAGINATION, CODE, TABS

   [EN] PURPOSE:
   • Shared components across guide/tools/FAQ.
   [UR] مقصد:
   • Guide/tools/FAQ mein shared components.
   ========================================================= */

.td-alert {
  border-radius: var(--td-radius-lg);
  padding: var(--td-space-md);
  border: 1px solid var(--td-alert-border);
  background: var(--td-alert-bg);
  color: var(--td-alert-text);
}

.td-alert-info {
  border-color: var(--td-alert-info-border);
  background: var(--td-alert-info-bg);
  color: var(--td-alert-info-text);
}

.td-alert-success {
  border-color: var(--td-alert-success-border);
  background: var(--td-alert-success-bg);
  color: var(--td-alert-success-text);
}

.td-alert-warning {
  border-color: var(--td-alert-warning-border);
  background: var(--td-alert-warning-bg);
  color: var(--td-alert-warning-text);
}

.td-alert-danger {
  border-color: var(--td-alert-danger-border);
  background: var(--td-alert-danger-bg);
  color: var(--td-alert-danger-text);
}

/* Table */
.td-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.td-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--td-font-small);
}

.td-table th,
.td-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--td-table-border);
  text-align: left;
  vertical-align: top;
}

.td-table th {
  background: var(--td-table-header-bg);
  color: var(--td-table-header-text);
  font-weight: var(--td-font-weight-semibold);
}

.td-table tbody tr:hover td {
  background: var(--td-table-row-hover-bg);
}

.td-code-block,
pre.td-code-block {
  padding: var(--td-space-md);
  border-radius: var(--td-radius-lg);
  background: var(--td-code-bg);
  color: var(--td-code-text);
  border: 1px solid var(--td-code-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* Tabs */
.td-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.td-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--td-radius-pill);
  border: 1px solid var(--td-border-subtle);
  background: rgba(255, 255, 255, 0.85);
  color: var(--td-text-soft-strong);
  font-size: var(--td-font-small);
  cursor: pointer;
}

.td-tab[aria-selected="true"] {
  background: rgba(45, 163, 255, 0.14);
  border-color: rgba(45, 163, 255, 0.35);
}

/* =========================================================
   08) TOOLTIP

   [EN] PURPOSE:
   • Lightweight tooltip style via tokens.
   [UR] مقصد:
   • Tokens ke zariye lightweight tooltip.
   ========================================================= */

.td-tooltip {
  position: absolute;
  z-index: var(--td-z-toast);
  padding: 10px 12px;
  border-radius: var(--td-radius-lg);
  background: var(--td-tooltip-bg);
  color: var(--td-tooltip-text);
  border: 1px solid var(--td-tooltip-border);
  box-shadow: var(--td-tooltip-shadow);
  font-size: var(--td-font-small);
  max-width: 260px;
}

.td-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   09) OVERLAYS & NOTES DRAWER

   [EN] PURPOSE:
   • Baseline overlay + drawer surfaces (token-driven).
   [UR] مقصد:
   • Overlay + drawer ki token-driven surfaces.
   ========================================================= */

.td-overlay {
  position: fixed;
  inset: 0;
  background: var(--td-overlay-backdrop-bg);
  backdrop-filter: blur(var(--td-overlay-backdrop-blur));
  z-index: var(--td-z-overlay);
}

.td-overlay-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(100%, var(--td-drawer-max-width));
  background: var(--td-overlay-panel-bg);
  border-left: 1px solid var(--td-overlay-panel-border);
  box-shadow: var(--td-overlay-panel-shadow);
  border-top-left-radius: var(--td-overlay-panel-radius);
  border-bottom-left-radius: var(--td-overlay-panel-radius);
  z-index: calc(var(--td-z-overlay) + 1);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Notes drawer inner */
.td-notes-header,
.td-notes-body {
  padding: var(--td-space-lg);
}

.td-notes-header {
  border-bottom: 1px solid var(--td-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--td-space-md);
}

.td-notes-title {
  font-size: var(--td-font-h3);
  color: var(--td-text-heading);
}

.td-notes-body {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-md);
}

.td-notes-actions {
  display: flex;
  gap: var(--td-space-sm);
  flex-wrap: wrap;
}

.td-notes-grow {
  flex: 1;
}

@media (max-width: 480px) {
  .td-notes-header,
  .td-notes-body {
    padding-inline: 12px;
  }
}


/* =========================================================
   10) GRID UTIL

   [EN] PURPOSE:
   • Provide a simple responsive two-column grid utility for cards/sections.
   [UR] مقصد:
   • Cards/sections ke لیے simple responsive do-column grid utility deta hai۔
   ========================================================= */

.td-grid-2 {
  display: grid;
  gap: var(--td-space-md);
}

@media (min-width: 768px) {
  .td-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   10.A) UNIVERSAL SWIPE OVERFLOW (MOBILE-FIRST)

   [EN] PURPOSE:
   • Provide a universal horizontal swipe wrapper for wide content (tables/code) without relying on visible scrollbars.
   [UR] مقصد:
   • Wide content (tables/code) ke liye universal horizontal swipe wrapper deta hai, bina visible scrollbar par depend kiye.
   ========================================================= */

.td-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox */
}

.td-scroll-x::-webkit-scrollbar {
  display: none; /* WebKit */
}


/* =========================================================
   11) POINTER-AWARE HOVER (DESKTOP ONLY LIFT)

   [EN] PURPOSE:
   • Add subtle lift effects only on pointer/fine devices (no extra motion on touch).
   [UR] مقصد:
   • Sirf pointer/fine devices par halkay lift effects add karta hai, touch devices par nahi۔
   ========================================================= */

@media (pointer: fine) {
  .td-btn:not(:disabled):hover,
  .td-btn-outline:not(:disabled):hover,
  .td-btn-ghost:not(:disabled):hover,
  .td-btn-danger:not(:disabled):hover {
    transform: translateY(-1px);
  }

  .td-card:hover {
    transform: translateY(-2px);
  }

  .td-chip-button:hover,
  .td-tooltip-trigger:hover {
    transform: translateY(-1px);
  }

  .td-check-row:hover {
    transform: translateY(-1px);
  }
}


/* TD-OS Phase 1 — Overflow-wrap guard + light module styling (additive)
   Applies to the real operational wrappers: main[data-td-root] and [data-td-page].
   Excludes tables + code blocks to avoid mangling layout.
*/

/* A4: long URL/text wrapping inside operational wrappers */
:where(main[data-td-root], [data-td-page]) :where(p, li, a, span, div, h1, h2, h3, h4, h5, h6, blockquote) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(main[data-td-root], [data-td-page]) :where(table, th, td, pre, code, kbd, samp) {
  overflow-wrap: normal;
  word-break: normal;
}

/* Optional safe styling: breadcrumbs */
.td-breadcrumbs {
  display: block;
}
.td-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.td-linkslot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.td-linkslot-link {
  text-decoration: none;
}
.td-linkslot-link:hover,
.td-linkslot-link:focus-visible {
  text-decoration: underline;
}

/* =========================================================
   09.A — MASTERCLASS POLISH (KBD ALIAS + PROGRESS SHINE)

   [EN] PURPOSE:
   • Provide tiny additive helpers used by the Guide Master Copy,
     without changing existing component contracts.
   [UR] مقصد:
   • Guide Master Copy ke chhote helpers add karna, bina existing
     components ko break kiye.
   ========================================================= */

/* Optional progress shine (purely visual). Safe: does not change widths or layout. */
.td-progress-fill { position: relative; }
.td-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: translateX(-70%);
  animation: td-progress-shine 2.6s var(--td-motion-ease-out) infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes td-progress-shine {
  0% { transform: translateX(-70%); }
  60% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* =========================================================
   Section 99 — Guide Contract Utilities (v1.0)
   Purpose:
   - Elevate Guide.html primitives to GLOBAL components
   - Safe for all engines (guide, tools, workspace)
   ========================================================= */

/* Keyboard hint / shortcut badge (CANONICAL) */
.td-kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.25rem;
  height:1.25rem;
  padding:0 .35rem;
  border-radius:.45rem;
  border:1px solid var(--td-border-subtle);
  background:var(--td-surface);
  color:var(--td-text-soft-strong);
  font-size:.75rem;
  line-height:1;
  box-shadow:var(--td-shadow-soft);
}

/* Chip intent extensions (non-breaking) */
.td-chip--primary{
  background:color-mix(in srgb, var(--td-blue) 14%, var(--td-surface-subtle));
  border-color:color-mix(in srgb, var(--td-blue) 30%, var(--td-pill-border));
  color:var(--td-text-strong);
}

.td-chip--minor{
  background:var(--td-surface-subtle);
  color:var(--td-text-soft-strong);
}
/* =========================================================
   12) STEP HEADER (GUIDE / TOOLS / WORKSPACE)

   PURPOSE:
   • Canonical hero/header block for steps.
   • Purely semantic — no layout breaking changes.
   ========================================================= */

.td-step-header {
  display: block;
}

.td-step-header .td-band {
  display: flex;
  flex-direction: column;
  gap: var(--td-space-md);
}

.td-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-space-sm);
  align-items: center;
}
/* =========================================================
   13) RAIL CARD (CANONICAL)

   PURPOSE:
   • Secondary intelligence cards (right rail).
   ========================================================= */

.td-rail-card {
  background: var(--td-section-bg-muted);
  border: 1px solid var(--td-border-subtle);
  border-radius: var(--td-radius-card);
  padding: var(--td-space-md);
  box-shadow: var(--td-shadow-card-secondary);
}

.td-rail-card .td-eyebrow {
  margin-bottom: var(--td-space-sm);
}
/* =========================================================
   14) ACTIONS ROW (BUTTON GROUP)

   PURPOSE:
   • Consistent action grouping (prev/next/save/etc).
   ========================================================= */

.td-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-space-sm);
  margin-top: var(--td-space-lg);
}

@media (max-width: 480px) {
  .td-actions-row {
    flex-direction: column;
  }
}
/* =========================================================
   15) CHECKLIST ROW (BRIDGE + POLISH)

   PURPOSE:
   • Normalize checklist rows used in guides.
   ========================================================= */

.td-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--td-space-md);
  border-radius: var(--td-radius-lg);
  border: 1px solid var(--td-border-subtle);
  background: rgba(255, 255, 255, 0.8);
}

.td-check input[type="checkbox"] {
  margin-top: 3px;
}
/* =========================================================
   16) STATUS ROW (MICRO)

   PURPOSE:
   • Rows inside status cards.
   ========================================================= */

.td-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--td-space-sm);
  padding: 6px 0;
  font-size: var(--td-font-small);
}
/* =========================================================
   17) LIST STACK

   PURPOSE:
   • Vertical rhythm for structured lists.
   ========================================================= */

.td-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* =========================================================
   18) EMPTY STATE

   PURPOSE:
   • Calm, non-alarming empty states.
   ========================================================= */

.td-empty {
  text-align: center;
  padding: var(--td-space-lg);
  color: var(--td-text-muted);
  font-size: var(--td-font-small);
}
/* =========================================================
   19) DIVIDER

   PURPOSE:
   • Soft visual separation.
   ========================================================= */

.td-divider {
  height: 1px;
  background: var(--td-border-subtle);
  margin: var(--td-space-lg) 0;
}
/* =========================================================
   20) ACCESSIBILITY HELPERS

   PURPOSE:
   • Small a11y enhancements.
   ========================================================= */

.td-focus-ring:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--td-focus-ring);
}

/* =========================================================
   21) ACCORDIONS (FAQ / collapsible lists)

   PURPOSE:
   • Provide accessible accordion pattern for FAQs and other collapsible lists.
   ========================================================= */

.td-acc {
  margin: 0;
  padding: 0;
}

.td-acc-item {
  border-top: 1px solid var(--td-border-subtle);
  padding: 0;
}

.td-acc-item:first-child {
  border-top: none;
}

.td-acc-q {
  width: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: var(--td-space-sm) 0;
  text-align: left;
  font-size: var(--td-font-body);
  font-weight: var(--td-font-weight-medium);
  color: var(--td-text-title);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--td-space-xs);
  cursor: pointer;
}

.td-acc-q:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--td-focus-ring);
}

.td-acc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--td-motion-med) var(--td-motion-ease-out);
}

.td-acc-q[aria-expanded="true"] .td-acc-icon {
  transform: rotate(90deg);
}

.td-acc-a {
  padding: var(--td-space-xs) 0 var(--td-space-sm);
  font-size: var(--td-font-small);
  color: var(--td-text-body);
}

/* =========================================================
   22) BANDS & LAYOUT BASICS

   PURPOSE:
   • Provide hero band and responsive layout utilities used across pages.
   ========================================================= */

.td-band {
  background: var(--td-surface-secondary);
  padding: var(--td-space-lg) var(--td-space-md);
  border-radius: var(--td-radius-lg);
  margin-bottom: var(--td-space-lg);
}

.td-layout {
  display: grid;
  gap: var(--td-space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .td-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

.td-sub {
  font-size: var(--td-font-body);
  color: var(--td-text-soft);
}

.td-inline-code {
  font-family: var(--td-font-mono);
  background: var(--td-surface-tertiary);
  color: var(--td-text-body);
  padding: 2px 6px;
  border-radius: var(--td-radius-sm);
  font-size: 0.9em;
}