/* ============================================================================
   WithRajesh.com - v4 component layer (Feature #27)
   Loaded after tokens.css and app.css.

   Every component here is used by all three shells (marketing, app, console).
   v3 expressed these as ad-hoc inline utility strings repeated per screen,
   which is why the same button had three different paddings. Naming them once
   is the point of v4.

   Rule: TIER 2/3 tokens only. No literal colors, no magic spacing.
   ============================================================================ */

/* ============================================================================
   BUTTONS
   Three sizes. Heights honour SC 2.5.8: sm = 32px (over the 24px floor),
   md = 44px, lg = 52px. Pill radius is the v3 brand signature, retained.
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding-inline: var(--control-px-md);
  border: var(--border-thin) solid transparent;
  border-radius: var(--control-radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* Small is a smaller box, not smaller type. --text-xs (12px) on an interactive
   label reads as fine print; the size step is carried by height and padding. */
.btn-sm { height: var(--control-height-sm); padding-inline: var(--control-px-sm); font-size: var(--text-sm); }
.btn-lg { height: var(--control-height-lg); padding-inline: var(--control-px-lg); font-size: var(--text-base); }

.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary - one per view, the single most important action. */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}
.btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-text-on-brand); }
.btn-primary:active { background: var(--color-brand-active); border-color: var(--color-brand-active); }

/* Secondary - the default for everything else. */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-hover); border-color: var(--color-text-primary); color: var(--color-text-primary); }

/* Ghost - low-emphasis, inside toolbars and cards. */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }

/* Danger - destructive. Never the default-focused button in a dialog. */
.btn-danger {
  background: var(--color-status-danger-fg);
  color: var(--color-text-on-brand);
  border-color: var(--color-status-danger-fg);
}
.btn-danger:hover { filter: brightness(0.92); color: var(--color-text-on-brand); }

.btn-link {
  /* height:auto would collapse to the line box (16px) and miss the 24px target
     floor (SC 2.5.8), so keep a min-height while staying visually flush. */
  height: auto;
  min-height: var(--target-min);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Icon-only. Square, and never below the 24px minimum target (SC 2.5.8). */
.btn-icon {
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  border-radius: var(--radius-full);
}
.btn-icon.btn-sm { width: var(--control-height-sm); height: var(--control-height-sm); }
.btn-icon.btn-lg { width: var(--control-height-lg); height: var(--control-height-lg); }

.btn .icon { width: 1.125em; height: 1.125em; flex: none; }

/* Loading state. aria-busy carries it to assistive tech; this is the visual. */
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 1em; height: 1em;
  border: var(--border-medium) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-on-brand);
  animation: v4-spin var(--dur-slower) linear infinite;
}
.btn-secondary[aria-busy="true"]::after,
.btn-ghost[aria-busy="true"]::after { color: var(--color-text-primary); }

@keyframes v4-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   FORMS
   ============================================================================ */

.field-group { display: block; }
.field-group + .field-group { margin-top: var(--space-5); }

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.field-label .required { color: var(--color-status-danger-fg); }

/* Optional/required must not be conveyed by an asterisk alone. */
.field-optional {
  margin-left: var(--space-2);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

.field {
  display: block;
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  /* border-strong, not border: an input's boundary IS its affordance, so it
     must clear 3:1 (SC 1.4.11). Decorative dividers use --color-border. */
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--control-radius-form);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.field::placeholder { color: var(--color-text-muted); }
.field:hover:not(:focus):not([disabled]) { border-color: var(--color-text-secondary); }
.field:focus {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring-shadow);
}
.field:disabled,
.field[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
textarea.field { min-height: 7rem; resize: vertical; }

select.field {
  appearance: none;
  padding-right: var(--space-10);
  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='%236E6E6E' 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 var(--space-4) center;
}

/* Error state is announced by aria-invalid; the border and message are the
   visual half. Color alone never carries it (SC 1.4.1, 3.3.1). */
.field[aria-invalid="true"] { border-color: var(--color-status-danger-fg); }
.field[aria-invalid="true"]:focus {
  border-color: var(--color-status-danger-fg);
  box-shadow: 0 0 0 3px var(--color-status-danger-tint);
}

.field-help {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-status-danger-fg);
}
.field-error .icon { width: 1em; height: 1em; margin-top: 0.2em; flex: none; }

/* Checkbox and radio: 20px box inside a 44px hit area. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--target-comfort);
  padding-block: var(--space-2);
  cursor: pointer;
}
.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  flex: none;
  accent-color: var(--color-brand);
  cursor: pointer;
}
.choice-label { font-size: var(--text-sm); color: var(--color-text-primary); }
.choice-help  { font-size: var(--text-sm); color: var(--color-text-muted); }

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  background: var(--color-border-strong);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.switch:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.switch[aria-checked="true"] { background: var(--color-brand); }
.switch::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 1.25rem; height: 1.25rem;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.switch[aria-checked="true"]::after { transform: translateX(1.25rem); }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================================================
   CARDS AND SURFACES
   ============================================================================ */

.card {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.card-flush { padding: 0; overflow: hidden; }
.card-sunken { background: var(--color-surface-sunken); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.card-body  { padding: var(--space-6); }
.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface-sunken);
}

/* Whole-card link target without nesting interactive elements. */
.card-link { position: relative; }
.card-link .stretched::after { content: ""; position: absolute; inset: 0; }

/* ============================================================================
   STATUS CHIPS AND BADGES
   Status is never color-only: every chip carries a text label, and the dot is
   supplementary (SC 1.4.1).
   ============================================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  flex: none;
  border-radius: var(--radius-full);
  background: currentColor;
}
.chip-plain::before { display: none; }

.chip-success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); border-color: var(--color-status-success-border); }
.chip-warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); border-color: var(--color-status-warning-border); }
.chip-danger  { background: var(--color-status-danger-bg);  color: var(--color-status-danger-fg);  border-color: var(--color-status-danger-border); }
.chip-info    { background: var(--color-status-info-bg);    color: var(--color-status-info-fg);    border-color: var(--color-status-info-border); }
.chip-neutral { background: var(--color-status-neutral-bg); color: var(--color-status-neutral-fg); border-color: var(--color-status-neutral-border); }
.chip-brand   { background: var(--color-brand-subtle-bg);   color: var(--color-text-brand);        border-color: var(--color-brand-border); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--space-1-5);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.badge-dot { min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; }

/* ============================================================================
   AVATAR
   ============================================================================ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  flex: none;
  overflow: hidden;
  background: var(--color-brand-subtle-bg);
  color: var(--color-text-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); font-size: var(--text-xs); }
.avatar-lg { width: var(--avatar-size-lg); height: var(--avatar-size-lg); font-size: var(--text-lg); }
.avatar-xl { width: var(--avatar-size-xl); height: var(--avatar-size-xl); font-size: var(--text-2xl); }

/* ============================================================================
   TABS
   ============================================================================ */

.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: var(--border-thin) solid var(--color-border);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: var(--border-medium) solid transparent;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tab:hover { color: var(--color-text-primary); }
.tab[aria-selected="true"],
.tab[aria-current="page"] {
  color: var(--color-text-brand);
  border-bottom-color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

/* ============================================================================
   BREADCRUMB
   ============================================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text-primary); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-text-disabled); }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); font-weight: var(--weight-medium); }

/* ============================================================================
   TABLE
   Below `md` the table collapses to stacked rows, because a 10-column table
   cannot reflow to 320px without two-dimensional scrolling (SC 1.4.10).
   Each cell exposes its header via data-label.
   ============================================================================ */

.table-wrap {
  width: 100%;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  padding: var(--space-3) var(--table-cell-px);
  background: var(--table-header-bg);
  border-bottom: var(--border-thin) solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--table-cell-px);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table .cell-actions { text-align: right; white-space: nowrap; }

.table th[aria-sort] { cursor: pointer; }
.table th[aria-sort="ascending"],
.table th[aria-sort="descending"] { color: var(--color-text-brand); }

@media (max-width: 47.99rem) {
  .table-responsive .table,
  .table-responsive .table tbody,
  .table-responsive .table tr,
  .table-responsive .table td { display: block; width: 100%; }
  .table-responsive .table thead { display: none; }
  .table-responsive .table tr {
    padding: var(--space-4);
    border-bottom: var(--border-thin) solid var(--color-border);
  }
  .table-responsive .table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border: 0;
    text-align: right;
  }
  .table-responsive .table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    text-align: left;
  }
  .table-responsive .table .cell-actions { justify-content: flex-end; }
}

/* ============================================================================
   LIST-PAGE TOOLBAR (search, filters, bulk actions, pagination)
   One component shared by every admin list and every app list view.
   ============================================================================ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.toolbar-search { flex: 1 1 16rem; min-width: 0; }
.toolbar-spacer { flex: 1 1 auto; }

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-brand-subtle-bg);
  border: var(--border-thin) solid var(--color-brand-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-comfort);
  height: var(--target-comfort);
  padding-inline: var(--space-3);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
}
.pagination a:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.pagination [aria-current="page"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-semibold);
}

/* ============================================================================
   FORM PAGE - sticky save bar
   The bar is sticky at the bottom, so it must not cover a focused field
   (SC 2.4.11). The page reserves its height via scroll-margin on fields.
   ============================================================================ */

.form-page { padding-bottom: calc(var(--control-height-lg) + var(--space-8)); }
.form-page .field-group { scroll-margin-bottom: calc(var(--control-height-lg) + var(--space-8)); }

.save-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-top: var(--space-8);
  background: var(--color-surface-glass);
  backdrop-filter: blur(8px);
  border-top: var(--border-thin) solid var(--color-border);
}
.save-bar-status { margin-right: auto; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================================
   OVERLAYS
   ============================================================================ */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--color-backdrop);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}
.modal-panel {
  width: 100%;
  max-width: var(--modal-width);
  max-height: calc(100dvh - var(--space-8));
  display: flex;
  flex-direction: column;
  background: var(--color-surface-overlay);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--elevation-modal);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.modal-body   { padding: var(--space-6); overflow-y: auto; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(var(--drawer-width), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-overlay);
  box-shadow: var(--elevation-modal);
}
.drawer-left  { left: 0;  border-right: var(--border-thin) solid var(--color-border); }
.drawer-right { right: 0; border-left:  var(--border-thin) solid var(--color-border); }

/* Mobile bottom sheet. */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--color-surface-overlay);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: var(--elevation-modal);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}

.menu {
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-surface-overlay);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-overlay);
  z-index: var(--z-dropdown);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: var(--color-surface-hover); }
.menu-item-danger { color: var(--color-status-danger-fg); }
.menu-separator { height: var(--border-thin); margin: var(--space-2) 0; background: var(--color-border-subtle); }
.menu-label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* Toasts. The container is an aria-live region so arrivals are announced
   without moving focus (SC 4.1.3). */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(var(--toast-width), calc(100vw - var(--space-8)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-overlay);
  border: var(--border-thin) solid var(--color-border);
  border-left-width: var(--border-thick);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-overlay);
  font-size: var(--text-sm);
}
.toast-success { border-left-color: var(--color-status-success-fg); }
.toast-warning { border-left-color: var(--color-status-warning-fg); }
.toast-danger  { border-left-color: var(--color-status-danger-fg); }
.toast-info    { border-left-color: var(--color-status-info-fg); }

.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  max-width: 18rem;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  box-shadow: var(--elevation-overlay);
}

/* ============================================================================
   ALERTS (inline, page-level)
   ============================================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-thin) solid;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.alert .icon { width: 1.25em; height: 1.25em; flex: none; margin-top: 0.1em; }
.alert-title { font-weight: var(--weight-semibold); }
.alert-success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); border-color: var(--color-status-success-border); }
.alert-warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); border-color: var(--color-status-warning-border); }
.alert-danger  { background: var(--color-status-danger-bg);  color: var(--color-status-danger-fg);  border-color: var(--color-status-danger-border); }
.alert-info    { background: var(--color-status-info-bg);    color: var(--color-status-info-fg);    border-color: var(--color-status-info-border); }

/* ============================================================================
   STATE COMPONENTS
   Every list and detail view must design all four: loading, empty, error,
   and permission-denied.
   ============================================================================ */

.skeleton {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  animation: v4-pulse 1.6s var(--ease-standard) infinite;
}
.skeleton-text { height: var(--space-4); margin-bottom: var(--space-2); }
.skeleton-title { height: var(--space-6); width: 40%; margin-bottom: var(--space-4); }
.skeleton-avatar { width: var(--avatar-size-md); height: var(--avatar-size-md); border-radius: var(--radius-full); }

@keyframes v4-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.state-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.state-body  { max-width: 32rem; color: var(--color-text-secondary); }

/* ============================================================================
   PROGRESS
   ============================================================================ */

.progress {
  width: 100%;
  height: var(--space-2);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
}
.progress-bar {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width var(--dur-normal) var(--ease-decelerate);
}

/* ============================================================================
   FILE UPLOAD
   The dropzone is an enhancement. The picker button is the primary control and
   is always present, because drag must never be the only way (SC 2.5.7).
   ============================================================================ */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-surface-sunken);
  border: var(--border-medium) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.dropzone[data-dragging="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle-bg);
}

.file-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}
.file-row + .file-row { margin-top: var(--space-2); }
.file-meta { min-width: 0; flex: 1; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }

/* ============================================================================
   REORDER LIST
   Drag handle plus explicit move up/down buttons. The buttons are the
   accessible path and are never hidden (SC 2.5.7).
   ============================================================================ */

.reorder-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
}
.reorder-item + .reorder-item { margin-top: var(--space-2); }
.reorder-handle { color: var(--color-text-muted); cursor: grab; }
.reorder-controls { display: flex; gap: var(--space-1); margin-left: auto; }

/* ============================================================================
   DOMAIN COMPONENTS - feed, messaging, activity
   ============================================================================ */

.post-card {
  max-width: var(--post-card-max);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
.post-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-comfort);
  padding-inline: var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}
.post-action:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.post-action[aria-pressed="true"] { color: var(--color-text-brand); font-weight: var(--weight-semibold); }

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--target-comfort);
  padding: var(--space-3) var(--space-4);
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
}
.poll-option + .poll-option { margin-top: var(--space-2); }
.poll-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--color-brand-tint-10);
  transition: width var(--dur-slow) var(--ease-decelerate);
}
.poll-option > * { position: relative; }

.bubble {
  max-width: var(--message-bubble-max);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
/* Own vs other differ by alignment AND fill AND a visible sender label in the
   markup - not by color alone (SC 1.4.1). */
.bubble-own {
  margin-left: auto;
  background: var(--color-bubble-own-bg);
  color: var(--color-bubble-own-text);
  border: var(--border-thin) solid var(--color-bubble-own-border);
  border-bottom-right-radius: var(--radius-sm);
}
.bubble-other {
  margin-right: auto;
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  border: var(--border-thin) solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}
.bubble-meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-top: var(--border-thin) solid var(--color-border);
  /* Keep the composer clear of the iOS home indicator. The dvh/visualViewport
     handling that keeps it above the virtual keyboard lives in main.js - see
     Feature #26, do not regress it. */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.composer .field { min-height: var(--composer-min-height); max-height: 10rem; resize: none; }

.timeline { position: relative; padding-left: var(--space-6); }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.3rem; top: var(--space-2); bottom: var(--space-2);
  width: var(--border-medium);
  background: var(--color-border-subtle);
}
.timeline-item { position: relative; padding-bottom: var(--space-5); }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: 0.45rem;
  width: 0.75rem; height: 0.75rem;
  background: var(--color-surface);
  border: var(--border-medium) solid var(--color-border-strong);
  border-radius: var(--radius-full);
}

/* ============================================================================
   AUTH SHELL

   The third shell. No header and no footer: these pages exist to complete one
   task, and every extra link is somewhere to get lost. A brand wordmark above
   the card is the only way back out.
   ============================================================================ */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-4) var(--space-16);
  background: var(--color-bg-secondary);
}
.auth-card { width: 100%; max-width: 26rem; }
.auth-card-wide { max-width: 34rem; }
.auth-head { text-align: center; }
.auth-head > h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.auth-foot {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
/* Badge above a heading, used where the page is a security checkpoint. */
.auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  color: var(--color-text-brand);
  background: var(--color-brand-subtle-bg);
  border-radius: var(--radius-full);
}
/* Label row that carries a trailing link, e.g. Password / Forgot password. */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* A standalone control, not a link inside a sentence, so the inline exception
   to SC 2.5.8 does not apply and it has to clear 24px on its own. */
.field-label-row > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* ============================================================================
   MARKETING SHELL
   ============================================================================ */

/* Fixed, not sticky: the hero sits under it and the bar fades in on scroll.
   .is-scrolled is set by main.js. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--topbar-height);
  border-bottom: var(--border-thin) solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.site-header.is-scrolled {
  background: var(--color-surface-glass);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}
.site-header > .container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Flex strips the whitespace between "Connect" and the wordmark, so the word
     space has to be restored. In em, because it is a typographic relationship. */
  gap: 0.25em;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--color-text-primary); }
/* Not --color-brand-display: that is 3.56:1 and only legal at large sizes. The
   wordmark is 16px, so it needs the text-grade brand token. */
.brand-mark { color: var(--color-text-brand); }

/* The wordmark doubles as the sections menu, so the whole brand is a button.
   Home is the first item in the menu, since a button cannot also be the link
   back to the homepage. */
.brand-menu { position: relative; display: flex; align-items: center; }
.brand-trigger {
  gap: var(--space-1-5);
  min-height: var(--target-min);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.brand-caret { color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.brand-trigger[aria-expanded="true"] .brand-caret { transform: rotate(180deg); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-link:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.nav-link[aria-current="page"] { color: var(--color-text-brand); }

.nav-menu { position: relative; display: flex; align-items: center; }
.nav-caret { color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
/* A trigger stays lit while its own menu is open, otherwise the dropdown looks
   detached from the thing that opened it. */
.nav-link[aria-expanded="true"] { color: var(--color-text-primary); background: var(--color-surface-hover); }
.about-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  width: max-content;
}

/* .site-nav owns the single auto margin that pushes the right-hand group over.
   Two auto margins would split the free space between them instead of pooling
   it, and About would drift into the middle of the bar. */
.site-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Below the desktop breakpoint About collapses to its icon. The label goes
   sr-only rather than display:none so the button keeps its accessible name
   from its own content, and the trigger stays a 44px target. */
.nav-about-icon { display: none; }
@media (max-width: 63.9375rem) {
  .nav-about { width: var(--control-height-md); padding-inline: 0; justify-content: center; }
  .nav-about .nav-about-icon { display: block; }
  .nav-about .nav-caret { display: none; }
  .nav-about .nav-about-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The trigger now sits at the right end of the bar, so a menu anchored to
     its left edge would run off screen. */
  .about-menu { inset-inline-start: auto; inset-inline-end: 0; }
}

/* At 320px the bar must hold the wordmark, About and Log in inside 288px of
   content width, and it does not fit: the row overflows by ~20px. Nothing
   reports it, because html/body carry overflow-x: clip - the bar is silently
   cut off instead. The wordmark is the part that can flex, so it takes one
   step down the type scale and the container gives back a little padding. */
@media (max-width: 22.5rem) {
  .site-header > .container { padding-inline: var(--space-3); }
  .site-header .brand { font-size: var(--text-sm); }
  .site-actions .btn-sm { padding-inline: var(--space-3); }
}

/* Sections dropdown - the live subdomains, each in its own accent. Automate is
   built but deliberately unlisted until the service is stood up; its landing
   page is parked in the prototype, not advertised. */
.section-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .section-menu { grid-template-columns: 1fr 1fr; width: 30rem; } }
.section-menu .menu-item .icon { color: var(--section-accent, var(--color-text-brand)); }

/* ----------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------- */
.site-footer {
  border-top: var(--border-thin) solid var(--color-border);
  background: var(--color-bg-secondary);
}
.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-16);
}
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; column-gap: var(--space-12); } }
.footer-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.footer-links { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-comfort);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}
/* 44px is the touch-target rule. Held on desktop it spaces a link list out
   until it stops reading as a column. */
@media (pointer: fine) { .footer-links a { min-height: var(--space-8); } }
.footer-links a:hover { color: var(--color-text-brand); }
/* Copyright left, legal links right. space-between (not margin-left:auto) so
   that when the row wraps on narrow screens both parts stay left-aligned. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: inherit;
  text-decoration: none;
}
.footer-legal a:hover { color: var(--color-text-brand); }

/* ----------------------------------------------------------------------------
   Floating cluster (theme switcher + back to top)
   ---------------------------------------------------------------------------- */
.floating-cluster {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.floating-cluster .btn {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--elevation-overlay);
}

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--topbar-height) + var(--space-16));
  padding-bottom: var(--space-16);
}
@media (min-width: 48rem) {
  .hero { padding-top: calc(var(--topbar-height) + var(--space-24)); padding-bottom: var(--space-24); }
}
.hero-centered { text-align: center; }
.hero-centered .hero-body { margin-inline: auto; }
.hero-body { max-width: 44rem; }
/* Document header: legal pages, no decoration. */
.hero-doc { padding-bottom: var(--space-8); }

/* The rotating word and "with RAJESh" share a line now, so the headline is ~23
   characters at its longest ("Collaborate with RAJESh") rather than ~11, and
   the .text-display sizes no longer fit on one line.

   Stepped sizes cannot hold one line here: at any step there is a viewport
   where "Collaborate" wraps and the seven shorter words do not, so the headline
   grows a second line for 2.6 seconds every rotation and shunts the page down
   and back. It scales continuously instead, so the longest word always fits and
   the height never changes. The cap is the old --text-6xl; the floor keeps it
   the largest thing on a 320px screen. */
.hero-title {
  font-size: clamp(1.375rem, 7.4vw, 3.75rem);
  line-height: 1.05;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

/* Rotating word, rebuilt on the v1 model: one element whose text is replaced
   while it is invisible. There is no width to manage - the box is simply as
   wide as the word currently in it - so the word can never be cut off by a box
   that is still animating towards it, and nothing has to be clipped.
   Out and in both travel upward, so the words read as one strip moving past a
   window rather than two unrelated fades. */
.word-rotator {
  display: inline-block;
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
.word-rotator[data-out] {
  opacity: 0;
  transform: translateY(-0.35em);
}

/* ----------------------------------------------------------------------------
   Pillar row - alternating product tour, one per section accent
   ---------------------------------------------------------------------------- */
.pillar {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12);
}
/* Same reason as .grid > * in app.css: a grid item defaults to min-width auto,
   so one inflexible row inside a figure widens the whole track past 320px. */
.pillar > * { min-width: 0; }
/* Single column: stretched to the full container a figure becomes a 700px-wide
   panel of mostly nothing, and anything with an aspect ratio in it (an article
   cover) grows to match. Cap and centre it until the two-column layout. */
@media (max-width: 63.9375rem) {
  .pillar-figure { width: 100%; max-width: 30rem; margin-inline: auto; }
}
@media (min-width: 64rem) {
  .pillar { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  /* Visual order flips; DOM order stays text-then-figure so the reading order
     and the tab order never diverge from each other (SC 1.3.2). */
  /* of-type, not child: intro copy above the first pillar would otherwise shift
     which side every figure lands on. */
  .pillar:nth-of-type(even) > .pillar-figure { order: -1; }
}
.pillar-eyebrow { color: var(--section-accent, var(--color-text-brand)); }
.pillar-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-size: var(--text-sm);
}
@media (min-width: 40rem) { .pillar-list { grid-template-columns: 1fr 1fr; } }
.pillar-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.pillar-list .icon { color: var(--section-accent, var(--color-text-brand)); flex: none; margin-top: 0.15em; }

/* ----------------------------------------------------------------------------
   Check list + numbered steps
   ---------------------------------------------------------------------------- */
.step-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  counter-reset: step;
}
.step {
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-brand);
}

/* ----------------------------------------------------------------------------
   Editorial split - sticky heading column beside prose
   ---------------------------------------------------------------------------- */
.editorial {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 64rem) {
  .editorial { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
  .editorial-aside { position: sticky; top: calc(var(--topbar-height) + var(--space-6)); }
}

/* ----------------------------------------------------------------------------
   Nav CTA row - icon tile + title + subtitle + arrow
   ---------------------------------------------------------------------------- */
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
  text-decoration: none;
  color: inherit;
}
.nav-cta:hover { border-color: var(--color-border-hover); }
.nav-cta .icon-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  flex: none;
  color: var(--color-text-brand);
  background: var(--color-brand-subtle-bg);
  border-radius: var(--radius-md);
}
/* A main form with a supporting aside. Aside first on narrow screens would bury
   the form, so it stays second in both DOM and visual order. */
.form-aside { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) {
  .form-aside { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
  .form-aside > aside { margin-top: 0; position: sticky; top: calc(var(--topbar-height) + var(--space-6)); }
}

.nav-cta .icon-trail { margin-left: auto; color: var(--color-text-muted); flex: none; }

/* ============================================================================
   SHELL CHROME
   ============================================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface-glass);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.sidebar {
  width: var(--sidebar-width);
  flex: none;
  background: var(--color-bg-secondary);
  border-right: var(--border-thin) solid var(--color-border);
  overflow-y: auto;
}
.nav-group + .nav-group { margin-top: var(--space-5); }
.nav-group-label {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-comfort);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
}
.nav-item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.nav-item[aria-current="page"] {
  background: var(--color-brand-subtle-bg);
  color: var(--color-text-brand);
  font-weight: var(--weight-semibold);
}
.nav-item .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.nav-item .badge { margin-left: auto; }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  margin-bottom: var(--space-6);
}
.page-title { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-bold); }
.page-subtitle { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Object header - the shared anatomy for every Work detail page. */
.object-header { padding-block: var(--space-6); }
.object-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.object-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.object-meta > div { display: flex; align-items: center; gap: var(--space-2); }

/* ----------------------------------------------------------------------------
   Segmented control
   Replaces the three ad-hoc "view toggle" implementations (cards/list,
   Write/Split/Preview, modality tabs).
   ---------------------------------------------------------------------------- */
.btn-group {
  display: inline-flex;
  padding: var(--space-1);
  gap: var(--space-1);
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.btn-group > button {
  height: var(--control-height-sm);
  padding-inline: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.btn-group > button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text-brand);
  font-weight: var(--weight-medium);
  box-shadow: var(--elevation-raised);
}

/* ----------------------------------------------------------------------------
   Field addons - prefix (+91) and trailing button (password reveal, clear)
   ---------------------------------------------------------------------------- */
.field-wrap { position: relative; display: flex; align-items: stretch; }
.field-wrap > .field { flex: 1; min-width: 0; }

.field-prefix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-border-strong);
  border-right: 0;
  border-radius: var(--control-radius-form) 0 0 var(--control-radius-form);
}
.field-prefix + .field { border-radius: 0 var(--control-radius-form) var(--control-radius-form) 0; }

/* Trailing control sits inside the field's padding, so the field reserves room. */
.field-wrap > .field-action {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-comfort);
  height: var(--target-comfort);
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.field-wrap > .field-action:hover { color: var(--color-text-primary); }
.field-wrap:has(> .field-action) > .field { padding-right: var(--space-12); }

/* Both icons ship in the markup; aria-pressed chooses which one shows. */
.field-action [data-when-shown],
.field-action[aria-pressed="true"] [data-when-hidden] { display: none; }
.field-action[aria-pressed="true"] [data-when-shown] { display: block; }

.field-otp {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  text-align: center;
  letter-spacing: 0.3em;
}
.field-mono { font-family: var(--font-mono); }

/* Counter for maxlength fields. Turns warning-toned near the limit. */
.field-count {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
}
.field-count[data-near="true"] { color: var(--color-status-warning-fg); }

/* ----------------------------------------------------------------------------
   Choice card - radio/checkbox rendered as a selectable tile
   ---------------------------------------------------------------------------- */
.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choice-card > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.choice-card > input:checked + span {
  border-color: var(--color-border-focus);
  border-width: var(--border-medium);
  background: var(--color-brand-subtle-bg);
  color: var(--color-text-brand);
  /* Compensate the thicker border so the tile does not shift on select. */
  padding: calc(var(--space-4) - 1px);
}
.choice-card > input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ----------------------------------------------------------------------------
   Error summary - SC 3.3.1. Focusable block at the top of a failed form that
   links to each bad field, so a screen-reader user is not hunting for them.
   ---------------------------------------------------------------------------- */
.error-summary {
  padding: var(--space-4) var(--space-5);
  background: var(--color-status-danger-bg);
  border: var(--border-medium) solid var(--color-status-danger-border);
  border-radius: var(--radius-md);
}
.error-summary-title {
  font-weight: var(--weight-semibold);
  color: var(--color-status-danger-fg);
}
.error-summary ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.error-summary a { color: var(--color-status-danger-fg); }

/* ----------------------------------------------------------------------------
   Stat card
   ---------------------------------------------------------------------------- */
.stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
.stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.stat-value {
  margin-top: var(--space-1);
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--weight-semibold);
}
.stat-delta { margin-top: var(--space-1); font-size: var(--text-xs); }
.stat-delta-up   { color: var(--color-status-success-fg); }
.stat-delta-down { color: var(--color-status-danger-fg); }
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  color: var(--color-text-brand);
  background: var(--color-brand-subtle-bg);
  border-radius: var(--radius-md);
  flex: none;
}
/* Clickable stat that is also a filter. */
a.stat-card { text-decoration: none; color: inherit; }
a.stat-card[aria-current="true"] { border-color: var(--color-border-focus); border-width: var(--border-medium); }

/* ----------------------------------------------------------------------------
   Definition list - replaces the 2/3/4-col key-value grids
   ---------------------------------------------------------------------------- */
.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-5);
  margin: 0;
}
.detail-list dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.detail-list dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

/* ----------------------------------------------------------------------------
   Data list - divider row list with a header ("Recent x" + View all)
   ---------------------------------------------------------------------------- */
.data-list { list-style: none; margin: 0; padding: 0; }
.data-list > li { border-top: var(--border-thin) solid var(--color-border-subtle); }
.data-list > li:first-child { border-top: 0; }
.data-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  min-height: var(--target-comfort);
  text-decoration: none;
  color: inherit;
}
a.data-list-row:hover { background: var(--color-surface-hover); }

/* ----------------------------------------------------------------------------
   Meta row - icon + text pairs under a title
   ---------------------------------------------------------------------------- */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.meta-row > span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ----------------------------------------------------------------------------
   Code block
   ---------------------------------------------------------------------------- */
.code-block {
  margin: 0;
  padding: var(--space-4);
  max-height: 20rem;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

/* ----------------------------------------------------------------------------
   Sortable table header. Today sorting only exists via filter selects, so
   aria-sort has no prior art in this codebase - it is required here.
   ---------------------------------------------------------------------------- */
.table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.table-sort .icon { opacity: 0; }
.table-sort:hover .icon { opacity: 0.5; }
[aria-sort="ascending"] .table-sort .icon,
[aria-sort="descending"] .table-sort .icon { opacity: 1; }
[aria-sort="descending"] .table-sort .icon { transform: rotate(180deg); }

/* ----------------------------------------------------------------------------
   Wizard - multi-step form progress
   ---------------------------------------------------------------------------- */
.wizard-steps {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.wizard-steps > li { display: flex; align-items: center; gap: var(--space-2); }
.wizard-steps > li[aria-current="step"] { color: var(--color-text-brand); font-weight: var(--weight-medium); }
.wizard-steps > li[data-done="true"] { color: var(--color-status-success-fg); }

/* ----------------------------------------------------------------------------
   Section divider - uppercase label + count + hairline
   ---------------------------------------------------------------------------- */
.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-divider-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.section-divider::after {
  content: "";
  flex: 1;
  height: var(--border-thin);
  background: var(--color-border-subtle);
}

/* ----------------------------------------------------------------------------
   Feature card - marketing capability tile
   ---------------------------------------------------------------------------- */
.feature-card {
  display: block;
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
a.feature-card:hover { border-color: var(--color-border-hover); }
a.feature-card:hover .feature-title { color: var(--color-text-brand); }
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  margin-bottom: var(--space-4);
  color: var(--color-text-brand);
  background: var(--color-brand-subtle-bg);
  border-radius: var(--radius-md);
}
.feature-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* ----------------------------------------------------------------------------
   Stat strip - hairline-separated cells via grid gap over a border colour
   ---------------------------------------------------------------------------- */
.stat-strip {
  display: grid;
  gap: var(--border-thin);
  background: var(--color-border);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.stat-strip > * { background: var(--color-surface); padding: var(--space-6); }

/* ----------------------------------------------------------------------------
   CTA band
   ---------------------------------------------------------------------------- */
.cta-band {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: var(--color-bg-primary);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* ----------------------------------------------------------------------------
   Article card
   ---------------------------------------------------------------------------- */
.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
.article-card:hover { border-color: var(--color-border-hover); }
.article-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  /* Applied to an <img> once a cover exists. On the empty <div> placeholder the
     gradient reads as a deliberate blank rather than a failed image. */
  background: linear-gradient(135deg, var(--color-brand-subtle-bg), var(--color-surface-sunken));
}
.article-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.article-card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* The featured card is the same component turned sideways once there is room.
   Below that it is just a taller card, so no separate markup is needed. */
.article-featured .article-card-body { padding: var(--space-8); gap: var(--space-4); }
@media (min-width: 64rem) {
  .article-featured { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .article-featured .article-cover { aspect-ratio: auto; height: 100%; }
  .article-featured .article-card-body { justify-content: center; }
}

/* Horizontal scroll rail for tag filters. */
.tag-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
/* A rail is a horizontally scrollable region, so it must be reachable and
   scrollable from the keyboard (SC 2.1.1). tabindex="0" on the element plus a
   visible focus ring is the accepted pattern. */
.tag-rail:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Reading progress. Decorative duplicate of the scrollbar, so aria-hidden. */
.read-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--border-thick);
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}
.read-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-brand);
  transform-origin: left center;
  transform: scaleX(0);
  /* The fill tracks the scroll position, so it must never transition: an
     in-flight tween would lag the thumb, and the reduced-motion rule's
     near-zero duration leaves the property pinned at its start value. */
  transition: none;
}

/* Article detail */
.article-header { max-width: var(--measure-prose); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block: var(--border-thin) solid var(--color-border);
}
.byline-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.article-hero-cover {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, var(--color-brand-subtle-bg), var(--color-surface-sunken));
  border: var(--border-thin) solid var(--color-border);
}
.author-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-surface-sunken);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}

/* ----------------------------------------------------------------------------
   Conversation list item
   ---------------------------------------------------------------------------- */
.conversation-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--target-comfort);
  text-decoration: none;
  color: inherit;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.conversation-item:hover { background: var(--color-surface-hover); }
.conversation-item[aria-current="true"] { background: var(--color-brand-subtle-bg); }
.conversation-body { min-width: 0; flex: 1; }
.conversation-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------------------------
   Typing indicator
   ---------------------------------------------------------------------------- */
.typing { display: inline-flex; gap: var(--space-1); align-items: center; }
.typing > span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  animation: typing-bounce 1.2s var(--ease-standard) infinite;
}
.typing > span:nth-child(2) { animation-delay: 0.15s; }
.typing > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.3; }
  30%           { opacity: 1; }
}

/* ----------------------------------------------------------------------------
   Browser-chrome mockup (marketing screenshots)
   ---------------------------------------------------------------------------- */
.mockup {
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--card-radius);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.mockup-dot { width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); background: var(--color-border-strong); }
.mockup-url {
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: var(--radius-full);
}
.mockup-body { padding: var(--space-5); }