/**
 * 100x Life Planning System - Component Styles
 * Buttons, cards, modals, forms, and reusable UI components
 */

/* ===== DASHBOARD HEADER DROPDOWN ===== */
.dashboard-dropdown {
  position: relative;
}

.dashboard-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.dashboard-dropdown .dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 0.15rem;
}

.dashboard-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  padding: 0.35rem 0;
}

.dashboard-dropdown.open .dropdown-menu {
  display: block;
}

.dashboard-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-dark);
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out);
}

.dashboard-dropdown .dropdown-item:hover {
  background: var(--bg-secondary);
}

.dashboard-dropdown .dropdown-item.active {
  color: var(--teal-ink);
  font-weight: 600;
}

.dashboard-dropdown .dropdown-item.active::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--teal-accent);
  border-radius: 2px;
  position: absolute;
  left: 0.25rem;
}

/* ===== GLOW PULSE EFFECT ===== */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(74, 155, 181, 0.3),
                0 0 10px rgba(74, 155, 181, 0.2),
                0 0 15px rgba(74, 155, 181, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(74, 155, 181, 0.5),
                0 0 20px rgba(74, 155, 181, 0.3),
                0 0 30px rgba(74, 155, 181, 0.2);
  }
}

/* ===== BUTTONS ===== */
.btn {
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: calc(14px + var(--text-bump));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: calc(13px + var(--text-bump));
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: calc(24px + var(--text-bump));
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
}

.btn-ghost:hover {
  color: var(--text-dark);
  border-color: var(--text-dark);
  background: var(--bg-tertiary);
}

/* Bootstrap derives every button state from its own --bs-btn-* variables, and
   the app only ever overrode `background`. So hover was ours and everything
   else — pressed, focused, disabled — was still Bootstrap's electric #0d6efd,
   which belongs to no palette here and is what a member sees for as long as
   focus stays on the button after a click (owner, 2026-08-18).
   Setting the variables rather than the properties means every state Bootstrap
   knows about comes from our own colours, including ones not listed here.

   The pressed fill goes DARKER, not to the slate: white on --slate-blue is
   2.54:1, well under the 4.5:1 a filled button's label needs. The slate is
   the halo instead, which is the part that was shouting. */
.btn-primary {
  --bs-btn-bg: var(--teal-fill);
  --bs-btn-border-color: var(--teal-fill);
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--teal-fill-hover);
  --bs-btn-hover-border-color: var(--teal-fill-hover);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-active-bg: var(--teal-fill-hover);
  --bs-btn-active-border-color: var(--teal-fill-hover);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-disabled-bg: var(--teal-fill);
  --bs-btn-disabled-border-color: var(--teal-fill);
  --bs-btn-disabled-color: var(--text-on-accent);
  --bs-btn-focus-shadow-rgb: 131, 169, 178; /* --slate-blue */
  background: var(--teal-fill);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: var(--teal-fill-hover);
}

.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.active,
.btn-primary.show {
  background: var(--teal-fill-hover);
  border-color: var(--teal-fill-hover);
  color: var(--text-on-accent);
}

/* Same treatment for the gold button, for the same reason. */
.btn-secondary {
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-color: var(--text-light);
  --bs-btn-hover-bg: var(--gold-dark);
  --bs-btn-hover-border-color: var(--gold-dark);
  --bs-btn-hover-color: var(--text-light);
  --bs-btn-active-bg: var(--gold-dark);
  --bs-btn-active-border-color: var(--gold-dark);
  --bs-btn-active-color: var(--text-light);
  --bs-btn-focus-shadow-rgb: 131, 169, 178; /* --slate-blue */
  background: var(--gold);
  color: var(--text-light);
}

.btn-secondary:active,
.btn-secondary:focus-visible,
.btn-secondary.active,
.btn-secondary.show {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--text-light);
}

.btn-secondary:hover {
  background: var(--gold-dark);
}

.btn-gold,
.btn-accent {
  background: var(--teal-fill);
  color: var(--text-on-accent);
}

.btn-gold:hover,
.btn-accent:hover {
  background: var(--teal-fill-hover);
  color: var(--text-on-accent);
}

.btn-outline-primary {
  background: transparent;
  color: var(--teal-ink);
  border: 1px solid var(--teal-accent);
}

.btn-outline-primary:hover {
  background: var(--teal-fill);
  color: var(--text-on-accent);
}

.btn i {
  color: inherit;
}

/* Responsive button text - show long by default, short on mobile */
.btn-text-long {
  display: inline;
}

.btn-text-short {
  display: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  background: transparent;
  color: var(--text-secondary);
  padding: 0.5rem;
  border-radius: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-dark);
}

.btn-icon i {
  font-size: calc(1.1rem + var(--text-bump));
  transition: transform var(--transition-fast);
}

/* ===== CARDS ===== */
.card {
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.card-title {
  font-family: var(--font-heading);
  font-size: calc(1rem + var(--text-bump));
  font-weight: 500;
  color: var(--text-dark);
}

.card-body {
  padding: var(--spacing-lg);
}

/* Grid Card (for foundation items) */
.grid-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 0;
  padding: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .grid-card:hover {
    border-color: var(--teal-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.grid-card.completed {
  border-color: var(--teal-accent);
  border-left: 4px solid var(--teal-accent);
}

.grid-card.suggested {
  border-color: var(--navy-primary);
  box-shadow: 0 0 0 2px rgba(26, 43, 74, 0.1);
}

.card-status {
  font-size: calc(0.7rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.card-status.complete {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.card-preview {
  color: var(--text-secondary);
  font-size: calc(0.85rem + var(--text-bump));
  line-height: 1.5;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: calc(0.85rem + var(--text-bump));
}

/* ===== MODALS ===== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 43, 74, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--bg-primary);
  border: none;
  border-radius: 0;
  padding: var(--spacing-lg);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.modal-header h3 {
  color: var(--text-dark);
  font-size: calc(1.1rem + var(--text-bump));
  font-weight: 500;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: calc(1.5rem + var(--text-bump));
  cursor: pointer;
}

.modal-close:hover {
  color: var(--text-dark);
}

.modal-body textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 0;
  padding: var(--spacing-md);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: calc(0.95rem + var(--text-bump));
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

.modal-body textarea:focus {
  border-color: var(--teal-accent);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: var(--spacing-md);
}

.quick-edit-status {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: right;
}

/* What the row wants (Member Guide p. 51), above the box that wants it. Filled
   by roadmap_controller from the clicked cell's row-hint param. */
.quick-edit-hint {
  font-family: var(--font-body);
  font-size: calc(0.85rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
}

/* Export Modal */
.export-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 43, 74, 0.7);
  z-index: 1001;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.export-modal-overlay.active {
  display: flex;
}

.export-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.export-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.export-modal-header h3 {
  color: var(--navy-primary);
  font-size: calc(1.25rem + var(--text-bump));
  font-weight: 600;
}

.export-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: calc(1.75rem + var(--text-bump));
  cursor: pointer;
  line-height: 1;
}

.export-modal-close:hover {
  color: var(--navy-primary);
}

.export-modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

/* Compact export modal (no content preview) */
.export-modal-compact {
  max-width: 480px;
}

/* Export Actions Row — primary (Excel/Print) + secondary (JSON) */
.export-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.export-action-btn {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  gap: 0.375rem;
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .export-action-btn:hover {
    border-color: var(--teal-accent);
    background: var(--teal-light);
    transform: translateY(-1px);
  }
}

.export-action-btn:active {
  transform: translateY(0);
}

.export-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.export-action-btn i {
  font-size: calc(1.25rem + var(--text-bump));
  color: var(--navy-primary);
}

.export-action-btn:hover i {
  color: var(--teal-ink);
}

.export-action-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--navy-primary);
  white-space: nowrap;
}

/* Secondary actions (JSON import/export) — less prominent */
.export-action-btn--secondary {
  background: transparent;
  border-style: dashed;
}

.export-action-btn--secondary i,
.export-action-btn--secondary .export-action-label {
  color: var(--text-muted);
}

.export-action-btn--secondary:hover i,
.export-action-btn--secondary:hover .export-action-label {
  color: var(--teal-ink);
}

@media (max-width: 640px) {
  .export-action-btn {
    flex-basis: calc(50% - 0.3125rem);
  }
}

/* Export status message */
.export-status {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--teal-ink);
  min-height: 1.5rem;
}

.export-status.error {
  color: #dc3545;
}

/* Assessments section inside Data modal */
.export-modal-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.export-modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: calc(1.05rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: 0.375rem;
}

.export-modal-section-desc {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin-bottom: 0.875rem;
  line-height: 1.5;
}

/* Sync Conflict Modal */
.sync-conflict-modal {
  max-width: 650px;
}

.sync-conflict-modal .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #e67e22;
}

.sync-conflict-message {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Conflict List */
.conflict-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.conflict-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.conflict-item:last-child {
  border-bottom: none;
}

.conflict-item-name {
  font-weight: 500;
  color: var(--navy-primary);
}

.conflict-item-status {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.conflict-item-status.resolved {
  color: var(--teal-ink);
}

/* Bulk Options */
.sync-bulk-options {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.sync-bulk-label {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.sync-bulk-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.sync-bulk-buttons .btn {
  flex: 1;
  min-width: 120px;
  justify-content: center;
}

.review-each-btn {
  width: 100%;
  justify-content: center;
}

/* Per-Field Review View */
.conflict-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.conflict-review-progress {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
}

.conflict-field-name {
  color: var(--navy-primary);
  margin-bottom: 1rem;
  font-size: calc(1.1rem + var(--text-bump));
}

.conflict-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.conflict-version {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.conflict-version-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  font-size: calc(0.8rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
  border-bottom: 1px solid var(--border-light);
}

.conflict-version-label i {
  color: var(--teal-ink);
}

.conflict-version-content {
  padding: 0.75rem;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-secondary);
  max-height: 150px;
  overflow-y: auto;
  line-height: 1.5;
  white-space: pre-wrap;
}

.conflict-version-content:empty::before {
  content: "(empty)";
  color: var(--text-muted);
  font-style: italic;
}

.conflict-review-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.conflict-review-actions .btn {
  flex: 1;
  justify-content: center;
}

/* Status */
.sync-conflict-status {
  margin-top: 1rem;
  text-align: center;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--teal-ink);
  min-height: 1.5rem;
}

.sync-conflict-status.error {
  color: #dc3545;
}

/* Settings Modal */
.settings-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 43, 74, 0.7);
  z-index: 10000;
  padding: var(--spacing-xl);
}

.settings-modal-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: min(90vh, 700px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.settings-modal.settings-modal-lg {
  max-width: 600px;
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.settings-modal-header h3 {
  color: var(--navy-primary);
  font-size: calc(1.25rem + var(--text-bump));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: calc(1.75rem + var(--text-bump));
  cursor: pointer;
  line-height: 1;
}

.settings-modal-close:hover {
  color: var(--navy-primary);
}

.settings-modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  /* Don't hand the flick to the page behind the scrim (see .drawer-body). */
  overscroll-behavior: contain;
  flex: 1;
}

.settings-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-legal-links {
  font-size: calc(0.8rem + var(--text-bump));
}

.settings-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
}

.settings-legal-links a:hover {
  color: var(--teal-ink);
  text-decoration: underline;
}

.settings-legal-links .separator {
  color: var(--border-medium);
  margin: 0 0.5rem;
}

.settings-section {
  margin-bottom: var(--spacing-lg);
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-header h4 {
  font-size: calc(0.9rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: var(--spacing-md);
}

/* ===== FORMS ===== */
.form-control {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: calc(0.95rem + var(--text-bump));
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  border-color: var(--teal-accent);
}

.form-control::placeholder {
  color: var(--text-muted);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* Storage Options */
.storage-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.storage-option {
  cursor: pointer;
}

.storage-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.storage-option-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.storage-option input:checked + .storage-option-content {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.storage-option:hover .storage-option-content {
  border-color: var(--border-medium);
}

.storage-option-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.storage-option-icon.local {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.storage-option-icon.cloud {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.storage-option-title {
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: 0.25rem;
}

.storage-option-desc {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
}

.storage-warning {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: #fef3cd;
  border: 1px solid #ffc107;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  font-size: calc(0.85rem + var(--text-bump));
  color: #856404;
}

[data-theme="dark"] .storage-warning {
  background: var(--gold-light);
  border-color: var(--gold-dark);
  color: var(--gold);
}

/* Settings Toggle */
.settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.settings-toggle-label span {
  display: block;
}

.settings-toggle-label span:first-child {
  font-weight: 500;
  color: var(--navy-primary);
}

.settings-toggle-desc {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.settings-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-medium);
  transition: var(--transition-normal);
  border-radius: 26px;
}

.settings-switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: var(--transition-normal);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.settings-switch input:checked + .settings-switch-slider {
  background-color: var(--teal-accent);
}

.settings-switch input:checked + .settings-switch-slider:before {
  transform: translateX(22px);
}

/* AI Provider Options */
.ai-provider-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-provider-option {
  cursor: pointer;
}

.ai-provider-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-provider-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.ai-provider-option input:checked + .ai-provider-content {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.ai-provider-option:hover .ai-provider-content {
  border-color: var(--border-medium);
}

.ai-provider-title {
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: 0.25rem;
}

.ai-provider-desc {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
}

.ai-provider-badge {
  font-size: calc(0.75rem + var(--text-bump));
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
  display: inline-block;
  width: fit-content;
}

/* WebLLM Progress */
.webllm-status {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.webllm-progress-bar {
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.webllm-progress-fill {
  height: 100%;
  background: var(--teal-accent);
  width: 0%;
  transition: width var(--motion-enter) var(--ease-out);
}

.webllm-progress-text {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

.webllm-ready {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--teal-light);
  border-radius: var(--radius-md);
  color: var(--teal-ink);
}

/* ===== Settings Tabs ===== */
.settings-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  padding: 0 1rem;
  background: var(--bg-secondary);
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: calc(0.875rem + var(--text-bump));
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.settings-tab:hover {
  color: var(--text-dark);
  background: var(--bg-tertiary);
}

.settings-tab.active {
  color: var(--teal-ink);
  border-bottom-color: var(--teal-accent);
  background: var(--bg-primary);
}

.settings-tab i {
  font-size: calc(1rem + var(--text-bump));
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

/* Settings section description */
.settings-section-desc {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.settings-section-header h4 i {
  margin-right: 0.375rem;
  color: var(--teal-ink);
}

/* ===== Memory Summary ===== */
.memory-summary {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.memory-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  padding: 1rem;
}

.memory-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
}

.memory-empty i {
  font-size: calc(2rem + var(--text-bump));
  margin-bottom: 0.5rem;
  display: block;
  opacity: 0.5;
}

.memory-category {
  margin-bottom: 1rem;
}

.memory-category:last-child {
  margin-bottom: 0;
}

.memory-category-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.memory-category-header i {
  color: var(--teal-ink);
  font-size: calc(0.9rem + var(--text-bump));
}

.memory-items {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.6;
}

.memory-item {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.memory-item-label {
  color: var(--text-muted);
  min-width: 80px;
}

.memory-item-value {
  color: var(--text-dark);
}

.memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.memory-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: calc(0.75rem + var(--text-bump));
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}

.memory-quote {
  font-style: italic;
  color: var(--text-secondary);
  border-left: 2px solid var(--teal-accent);
  padding-left: 0.75rem;
  margin: 0.5rem 0;
}

/* Memory Controls */
.memory-controls {
  margin-bottom: 1rem;
}

/* AI Memory Sync (export/import between 100x and other AIs) */
.memory-sync {
  margin: 1rem 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.memory-sync-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: calc(0.95rem + var(--text-bump));
  color: var(--navy-primary);
  margin-bottom: 0.5rem;
}

.memory-sync-block {
  margin-bottom: 1rem;
}

.memory-export {
  margin-top: 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.memory-export-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  background: var(--bg-tertiary, #f1f5f9);
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
}

.memory-export-text {
  margin: 0;
  padding: 0.75rem;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: calc(0.82rem + var(--text-bump));
  background: var(--bg-primary, #fff);
}

.memory-export-empty,
.memory-import-note {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* The form is a flex item in .settings-sync-action; without this it shrinks to
   content and the 100%-width textarea only fills that narrow form. */
.memory-import-form {
  width: 100%;
}

.memory-import-textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: calc(0.9rem + var(--text-bump));
  resize: vertical;
  margin-bottom: 0.5rem;
}

.memory-import-success {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--teal-ink);
}

/* ===== AI MEMORY SYNC (guided import + review, Settings › AI Memory) ===== */
.memory-sync-providers-intro,
.memory-sync-tip,
.memory-sync-help {
  font-size: calc(0.82rem + var(--text-bump));
  color: var(--text-muted);
  margin: 0.5rem 0;
}

.memory-sync-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.memory-sync-provider i { font-size: 0.75em; }

.memory-sync-prompt { margin: 0.75rem 0; }

.memory-sync-paste-label {
  display: block;
  font-weight: 600;
  font-size: calc(0.85rem + var(--text-bump));
  margin-bottom: 0.35rem;
}

.memory-sync-processing {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0;
  color: var(--text-secondary);
  font-size: calc(0.9rem + var(--text-bump));
}

.memory-sync-review-group {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.memory-sync-review-group legend {
  float: none;
  width: auto;
  font-size: calc(0.85rem + var(--text-bump));
  font-weight: 600;
  padding: 0 0.35rem;
  margin: 0;
}

.memory-sync-review-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0;
}

.memory-sync-review-input {
  flex: 1;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.88rem + var(--text-bump));
}

.memory-sync-review-replaces {
  font-size: calc(0.78rem + var(--text-bump));
  color: var(--text-muted);
  margin: 0.15rem 0 0 1.7rem;
}

.memory-sync-review-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.memory-actions {
  display: flex;
  gap: 0.75rem;
}

.memory-actions .btn {
  color: var(--text-muted);
}

.memory-actions .btn:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.webllm-ready-icon {
  display: flex;
  align-items: center;
}

/* AI Status Indicator (Header) */
.ai-status-indicator {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: calc(0.8rem + var(--text-bump));
  color: #DF9A32;
  margin-right: 0.5rem;
}

.ai-status-loading,
.ai-status-ready {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Circular progress indicator */
.ai-progress-circle {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.ai-progress-bg {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 3;
}

.ai-progress-fill {
  fill: none;
  stroke: var(--teal-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray var(--motion-enter) var(--ease-out);
}

.ai-status-ready {
  color: var(--teal-ink);
}

.ai-status-ready i {
  font-size: calc(0.9rem + var(--text-bump));
}

.ai-status-text {
  white-space: nowrap;
}

/* Theme Segmented Control */
.theme-segmented-control {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}

.theme-segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-segmented-control label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: calc(0.9rem + var(--text-bump));
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.theme-segmented-control label:hover {
  color: var(--text-dark);
}

.theme-segmented-control input:checked + label {
  background: var(--bg-primary);
  color: var(--navy-primary);
  box-shadow: var(--shadow-sm);
}

.theme-segmented-control label i {
  font-size: calc(1rem + var(--text-bump));
}

/* ===== PROGRESS ===== */
.progress-bar {
  background: var(--border-light);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}

.progress-fill {
  background: var(--teal-accent);
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--motion-ceremony) var(--ease-out);
}

.progress-text {
  color: var(--text-muted);
  font-size: calc(0.875rem + var(--text-bump));
  margin-top: 0.5rem;
}

/* ===== ICONS ===== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.icon-lg {
  width: 1.25em;
  height: 1.25em;
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
  /* Settings Modal - full screen on mobile */
  .settings-modal-overlay {
    padding: 0 !important;
  }

  .settings-modal-overlay.active {
    align-items: stretch;
    justify-content: stretch;
  }

  .settings-modal {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    height: 100%;
    border-radius: 0;
  }

  .settings-modal-header {
    padding: 1rem;
    flex-shrink: 0;
  }

  /* Horizontally scrolling tabs on mobile */
  .settings-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 0 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .settings-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .settings-tab {
    flex-shrink: 0;
    padding: 0.75rem 0.875rem;
    font-size: calc(0.8rem + var(--text-bump));
  }

  .settings-modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .settings-modal-footer {
    padding: 1rem;
    flex-shrink: 0;
  }

  /* Storage options - stack on mobile */
  .storage-option-content {
    padding: 0.75rem;
  }

  .storage-option-icon {
    width: 36px;
    height: 36px;
  }

  .storage-option-title {
    font-size: calc(0.95rem + var(--text-bump));
  }

  .storage-option-desc {
    font-size: calc(0.8rem + var(--text-bump));
  }

  /* User info - wrap on mobile */
  .user-info {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
  }

  .user-details {
    flex: 1;
    min-width: 0;
  }

  .user-name {
    font-size: calc(0.95rem + var(--text-bump));
  }

  .user-email {
    font-size: calc(0.8rem + var(--text-bump));
    word-break: break-all;
  }

  .user-info .btn {
    width: 100%;
    margin-top: 0.5rem;
    justify-content: center;
  }

  /* Theme segmented control */
  .theme-segmented-control {
    flex-direction: column;
  }

  .theme-segmented-control label {
    justify-content: flex-start;
    padding: 0.75rem 1rem;
  }

  /* Settings toggle row */
  .settings-toggle-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .settings-toggle-label {
    width: 100%;
  }

  .settings-switch {
    align-self: flex-start;
  }

  /* Export modal */
  .export-modal {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .export-modal-overlay.active {
    padding: 0;
  }

  .export-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* Short viewport - ensure settings modal scrolls properly */
@media (max-height: 700px) {
  .settings-modal {
    max-height: calc(100dvh - 3rem);
  }

  .settings-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
}

/* ===== MODULE VIDEO EMBED =====
   One video row, everywhere (owner, 2026-08-18). This block and a guide step's
   Watch summary were two different objects doing the same job: this one was a
   grey panel with its own padding, a bold title and a second line of italic
   hint, and stood about twice as tall for it.

   It now wears the step row's clothes — white card, one line, the poster and
   the title and nothing else. The hint is gone rather than restyled: the
   poster says there is a video and "Watch:" says what clicking does, so a line
   of italics repeating both was the reason the block was tall.

   The DOM is unchanged; the platform and roadmap system tests pin it (header >
   toggle, hint as a direct child, content > container > iframe). */
.module-video {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.module-video-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  color: var(--teal-ink);
  cursor: pointer;
}

.module-video-header:hover {
  color: var(--navy-primary);
}

/* The hover-recolours-the-hint rule that used to sit here is gone with the
   hint itself (see .module-video-hint below). */

.module-video-header i:first-child {
  font-size: calc(1.25rem + var(--text-bump));
}

.module-video-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.module-video-toggle:hover {
  color: var(--teal-ink);
  background: var(--bg-tertiary);
}

.module-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-dark);
}

.module-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.module-video-description {
  color: var(--text-secondary);
  font-size: calc(0.875rem + var(--text-bump));
  margin: var(--spacing-md) 0 0;
  line-height: 1.5;
}

/* The player and its description carry the inset the box used to, so the
   header can run edge to edge like the step row's summary. */
.module-video-content {
  padding: 0 1.25rem 1.25rem;
}

/* Collapsed state. Nothing to adjust but the content: the header is the whole
   block when it is closed, and it already has the padding it needs. */
.module-video.collapsed .module-video-content {
  display: none;
}

/* The hint is retired (owner, 2026-08-18). It said "Click to view Lloyd's
   video overview of this section" under every title, on its own line, which is
   what made this block twice the height of a step's Watch row. The poster says
   there is a video and "Watch:" says what the click does.

   Hidden rather than removed from the markup: the platform and roadmap system
   tests assert it is a direct child of .module-video, deliberately, because the
   copied CSS depends on that adjacency. Restyling is a smaller change than
   re-cutting the DOM those tests were written to protect. */
.module-video-hint {
  display: none;
}

/* ===== VIDEO POSTER FRAME =====
   Lloyd, via the owner (2026-08-18): members were not registering that there
   was a video behind the dropdown at all. A play icon says one COULD be here;
   a frame from the film says one IS.

   It takes the icon's place in the header rather than opening a block of its
   own, because there is not much room on these pages — the header gains a row
   of height, not a panel. Used by the three module-video headers and by a
   guide step's Watch summary.

   The source files are 295x166 (Videos / videos:thumbnails), so 104px wide is
   roughly 3x on a retina screen and needs no srcset. */
.video-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Deliberately not a token. This is the letterbox behind a photograph and
     what shows for the moment a lazy image has not arrived, so it has to stay
     dark in both themes — --navy-dark resolves to near-white under
     [data-theme="dark"] and would flash white there. */
  background: #14181c;
  line-height: 0;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The badge that makes it read as a video rather than a photograph. Never a
   pointer target of its own — the header or the summary around it is the
   control.

   Centred by transform, not by inset: 0 + flex. Font Awesome gives the glyph a
   width of its own, so an absolutely positioned icon does not stretch to its
   containing block and "centre the flex content" centred it inside 30px rather
   than inside the frame. This centres the box itself, whatever its width. */
.video-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

@media (max-width: 560px) {
  .video-thumb { width: 76px; }
  .video-thumb-play { font-size: 1.15rem; }
}

.module-video-hint:hover {
  color: var(--text-secondary);
}

/* Dark mode */
/* No dark override for .module-video itself. It wears --bg-primary now, the
   same token the step row wears, and that token is already redefined under
   [data-theme="dark"] — a second rule here would make the two blocks disagree
   in dark mode after being made to agree in light. */

[data-theme="dark"] .module-video-container {
  background: #000;
}

/* ===== FOUNDATION CARD VIDEO FOOTER ===== */
.foundation-card--with-video .card-body {
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.foundation-card-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--teal-light, #e8f4f8);
  color: var(--teal-ink, #2F7A93);
  border: none;
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 0;
  font-size: calc(0.8125rem + var(--text-bump));
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s) ease;
  text-align: center;
}

.foundation-card-video-btn:hover,
.foundation-card-video-btn:focus-visible {
  background: var(--teal-fill);
  color: #fff;
}

.foundation-card-video-btn i {
  font-size: calc(1rem + var(--text-bump));
}

/* ===== VIDEO PLAYER MODAL ===== */
.video-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.85);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md, 1rem);
}

.video-modal-overlay.active {
  display: flex;
}

.video-modal {
  position: relative;
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg, 8px);
  width: min(960px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.3));
  padding: var(--spacing-md, 1rem);
}

.video-modal-header {
  padding-right: 3rem;
  margin-bottom: var(--spacing-md, 1rem);
}

.video-modal-header h3 {
  margin: 0;
  font-family: var(--font-heading, inherit);
  color: var(--navy-primary, #1a2b4a);
  font-size: calc(1.25rem + var(--text-bump));
}

.video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted, #718096);
  font-size: calc(1.25rem + var(--text-bump));
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 999px;
  line-height: 1;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  color: var(--navy-primary, #1a2b4a);
  background: var(--bg-secondary, #f8f9fa);
}

.video-modal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: #000;
}

.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-modal-description {
  color: var(--text-secondary, #4a5568);
  font-size: calc(0.9rem + var(--text-bump));
  margin: var(--spacing-md, 1rem) 0 0;
  line-height: 1.5;
}

[data-theme="dark"] .video-modal {
  background: var(--bg-tertiary, #1a2b4a);
}

/* ===== AREA-LEVEL INTERVIEW MODAL ===== */
.area-interview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.7);
  z-index: 1050;
  padding: var(--spacing-md, 1rem);
  align-items: stretch;
  justify-content: center;
}

.area-interview-overlay.active {
  display: flex;
}

.area-interview-modal {
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-lg);
  width: min(900px, 100%);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: hidden;
}

.area-interview-header {
  position: relative;
  padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.25rem);
  border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
}

.area-interview-title {
  margin: 0 2.5rem 0.25rem 0;
  font-family: var(--font-heading, inherit);
  color: var(--navy-primary, #1a2b4a);
  font-size: calc(1.2rem + var(--text-bump));
}

.area-interview-area-name {
  color: var(--teal-ink, #2F7A93);
}

.area-interview-subtitle {
  margin: 0;
  color: var(--text-secondary, #4a5568);
  font-size: calc(0.85rem + var(--text-bump));
}

.area-interview-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  font-size: calc(1.1rem + var(--text-bump));
  color: var(--text-muted, #718096);
  cursor: pointer;
  border-radius: 999px;
  padding: 0.4rem;
  line-height: 1;
}

.area-interview-close:hover,
.area-interview-close:focus-visible {
  color: var(--navy-primary, #1a2b4a);
  background: var(--bg-secondary, #f8f9fa);
}

.area-interview-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.area-interview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem var(--spacing-lg, 1.25rem);
  border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
  background: var(--bg-secondary, #f8f9fa);
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary, #4a5568);
}

.area-chip--filled {
  background: var(--teal-light, #e8f4f8);
  border-color: var(--teal-accent, #4a9bb5);
  color: var(--navy-primary, #1a2b4a);
}

.area-chip-icon {
  font-size: calc(0.95rem + var(--text-bump));
  color: var(--text-muted, #718096);
}

.area-chip--filled .area-chip-icon {
  color: var(--teal-ink, #2F7A93);
}

.area-chip-label {
  white-space: nowrap;
}

.area-chip-synth-btn {
  background: transparent;
  border: none;
  color: var(--teal-ink, #2F7A93);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  line-height: 1;
  font-size: calc(0.85rem + var(--text-bump));
}

.area-chip-synth-btn:hover,
.area-chip-synth-btn:focus-visible {
  background: var(--teal-fill);
  color: #fff;
}

.area-chip-synth-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.area-interview-chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.area-interview-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.25rem);
}

.area-interview-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem var(--spacing-lg, 1.25rem);
  border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
  background: var(--bg-primary, #fff);
}

.area-interview-input {
  flex: 1 1 auto;
  resize: none;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: calc(0.95rem + var(--text-bump));
  color: var(--text-dark, #1a2b4a);
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  background: var(--bg-secondary, #f8f9fa);
}

.area-interview-input:focus {
  border-color: var(--teal-accent, #4a9bb5);
}

.area-interview-send-btn {
  background: var(--teal-fill);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.area-interview-send-btn:hover,
.area-interview-send-btn:focus-visible {
  background: var(--navy-primary, #1a2b4a);
}

.area-interview-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.area-interview-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem var(--spacing-lg, 1.25rem);
  border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
  background: var(--bg-secondary, #f8f9fa);
}

/* Review panel */
.area-interview-review-panel {
  padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.25rem);
  overflow-y: auto;
  flex: 1 1 auto;
}

.area-review-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading, inherit);
  color: var(--navy-primary, #1a2b4a);
  font-size: calc(1.1rem + var(--text-bump));
}

.area-review-subtitle {
  margin: 0 0 1rem;
  color: var(--text-secondary, #4a5568);
  font-size: calc(0.875rem + var(--text-bump));
}

.area-review-field {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.area-review-label {
  font-size: calc(0.85rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary, #1a2b4a);
}

.area-review-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-dark, #1a2b4a);
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  background: var(--bg-secondary, #f8f9fa);
  min-height: 70px;
  resize: vertical;
}

.area-review-textarea:focus {
  border-color: var(--teal-accent, #4a9bb5);
}

.area-review-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
}

[data-theme="dark"] .area-interview-modal {
  background: var(--bg-tertiary, #1a2b4a);
}

/* ===== INPUT / CONFIRM MODAL ===== */
.input-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.7);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md, 1rem);
}

.input-modal-overlay.active {
  display: flex;
}

.input-modal {
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-lg);
  width: min(440px, 100%);
  padding: var(--spacing-lg, 1.25rem);
}

.input-modal-title {
  margin: 0 0 var(--spacing-md, 1rem);
  font-family: var(--font-heading, inherit);
  color: var(--navy-primary, #1a2b4a);
  font-size: calc(1.1rem + var(--text-bump));
}

.input-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--spacing-md, 1rem);
}

.input-modal-label {
  font-size: calc(0.85rem + var(--text-bump));
  font-weight: 500;
  color: var(--text-secondary, #4a5568);
}

.input-modal-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: calc(1rem + var(--text-bump));
  font-family: inherit;
  color: var(--text-dark, #1a2b4a);
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  transition: border-color var(--transition-fast, 0.15s) ease;
}

.input-modal-input:focus {
  border-color: var(--teal-accent, #4a9bb5);
}

.input-modal-description {
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--text-secondary, #4a5568);
  margin: 0;
  line-height: 1.4;
}

.input-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: var(--spacing-sm, 0.75rem);
}

[data-theme="dark"] .input-modal {
  background: var(--bg-tertiary, #1a2b4a);
}

/* ===== ONBOARDING MODAL ===== */
.onboarding-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 43, 74, 0.85);
  z-index: 10001;
  padding: var(--spacing-lg);
}

.onboarding-modal-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
}

.onboarding-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.onboarding-header h1 {
  font-family: var(--font-display);
  font-size: calc(1.75rem + var(--text-bump));
  color: var(--navy-primary);
  margin-bottom: var(--spacing-xs);
}

.onboarding-subtitle {
  color: var(--text-secondary);
  font-size: calc(1rem + var(--text-bump));
}

.onboarding-step h2 {
  text-align: center;
  color: var(--navy-primary);
  font-size: calc(1.25rem + var(--text-bump));
  margin-bottom: var(--spacing-sm);
}

.onboarding-description {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  font-size: calc(0.95rem + var(--text-bump));
}

/* Option Cards */
.onboarding-options {
  display: grid;
  gap: var(--spacing-md);
}

.onboarding-options-3 {
  grid-template-columns: repeat(3, 1fr);
}

.onboarding-options-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
  margin: 0 auto;
}

.onboarding-option {
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .onboarding-option:hover {
    border-color: var(--teal-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.onboarding-option.recommended {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.onboarding-option-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal-fill);
  color: white;
  padding: 2px 12px;
  border-radius: 12px;
  font-size: calc(0.7rem + var(--text-bump));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.onboarding-option-icon {
  font-size: calc(2.25rem + var(--text-bump));
  margin-bottom: var(--spacing-sm);
  color: var(--navy-primary);
}

.onboarding-option-icon i {
  display: inline-block;
}

.onboarding-option h3 {
  font-family: var(--font-heading);
  font-size: calc(1.1rem + var(--text-bump));
  color: var(--navy-primary);
  margin-bottom: var(--spacing-xs);
}

.onboarding-option > p {
  color: var(--text-secondary);
  font-size: calc(0.85rem + var(--text-bump));
  margin-bottom: var(--spacing-md);
}

.onboarding-option-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
}

.onboarding-option-features li {
  padding: var(--spacing-xs) 0;
  padding-left: 1.5rem;
  position: relative;
}

.onboarding-option-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--teal-ink);
  font-weight: bold;
}

.onboarding-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.onboarding-option.disabled .onboarding-option-icon {
  color: var(--text-muted);
}

.onboarding-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: calc(0.85rem + var(--text-bump));
  margin-top: var(--spacing-lg);
}

/* Dark mode */
[data-theme="dark"] .onboarding-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .onboarding-option {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .onboarding-option.recommended {
  background: rgba(74, 155, 181, 0.15);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .onboarding-modal-overlay {
    padding: var(--spacing-md);
  }

  .onboarding-modal {
    padding: var(--spacing-lg);
    max-height: 95vh;
  }

  .onboarding-header h1 {
    font-size: calc(1.5rem + var(--text-bump));
  }

  .onboarding-options-3,
  .onboarding-options-2 {
    grid-template-columns: 1fr;
  }

  .onboarding-option {
    padding: var(--spacing-md);
  }

  .onboarding-option-icon {
    font-size: calc(1.75rem + var(--text-bump));
  }

  .onboarding-option h3 {
    font-size: calc(1rem + var(--text-bump));
  }
}

/* ===== GLOBAL TRIX EDITOR STYLES ===== */
/* Base Trix content area styling for module textareas */
.trix-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  min-height: 80px;
  font-family: var(--font-body);
  font-size: calc(0.95rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-dark);
}

.trix-content:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.trix-content:empty:not(:focus)::before {
  color: var(--text-muted);
}

/* Compact variant for smaller fields */
.trix-content.trix-compact {
  min-height: 60px;
  padding: 0.5rem 0.75rem;
  font-size: calc(0.9rem + var(--text-bump));
}

/* Dark mode for global Trix */
[data-theme="dark"] .trix-content {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
  color: #e8ecf4;
}

[data-theme="dark"] .trix-content:focus {
  border-color: var(--teal-accent);
}

/* Shared rich-text field autosave status line. Same state colors as
   .autosave-status (interview.css): calm teal on save, clear red on error. */
.rich-text-field .field-status {
  min-height: 1.1em;
  margin-top: 0.35rem;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted, #718096);
}

.rich-text-field .field-status[data-state="saved"] {
  color: var(--teal-ink, #2F7A93);
}

.rich-text-field .field-status[data-state="error"] {
  color: #c0392b;
  font-weight: 600;
}

/* ── Trix toolbar: brand it and limit to the original's compact button set ── */
trix-toolbar {
  margin-bottom: 0.4rem;
}

trix-toolbar .trix-button-row {
  justify-content: flex-start;
  gap: 0.4rem;
}

trix-toolbar .trix-button-group {
  margin-bottom: 0;
  border-color: var(--border-light);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
}

trix-toolbar .trix-button-group-spacer {
  display: none;
}

trix-toolbar .trix-button {
  border-bottom: none;
  color: var(--text-secondary);
}

trix-toolbar .trix-button.trix-active {
  background: var(--teal-light, #e8f4f8);
  color: var(--teal-ink);
}

/* Keep only bold / italic / bullet / number / undo / redo (the original's set);
   hide every other default Trix control. */
trix-toolbar .trix-button--icon-strike,
trix-toolbar .trix-button--icon-link,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-quote,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level,
trix-toolbar .trix-button--icon-attach,
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

[data-theme="dark"] trix-toolbar .trix-button-group {
  border-color: var(--border-medium);
}

[data-theme="dark"] trix-toolbar .trix-button {
  color: #cbd5e0;
}

/* ===== PROFILE COMPLETION MODAL ===== */
.profile-complete-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.profile-complete-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalSlideIn var(--motion-enter) var(--ease-out);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-complete-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.profile-complete-modal .modal-header h3 {
  color: var(--navy-primary);
  font-size: calc(1.25rem + var(--text-bump));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.profile-complete-modal .modal-header h3 i {
  color: var(--teal-ink);
}

.profile-complete-modal .modal-body {
  padding: 1.5rem;
}

.profile-complete-modal .modal-body p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.profile-name-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-name-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: calc(1rem + var(--text-bump));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-dark);
  transition: border-color var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
}

.profile-name-input:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.profile-name-input::placeholder {
  color: var(--text-muted);
}

.profile-complete-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
}

.profile-complete-modal .modal-footer .btn {
  min-width: 120px;
  justify-content: center;
}

/* Dark mode */
[data-theme="dark"] .profile-complete-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
}

[data-theme="dark"] .profile-name-input {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-dark);
}

[data-theme="dark"] .profile-name-input:focus {
  border-color: var(--teal-accent);
}

/* ===== EDIT NAME (Settings) ===== */
.user-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.edit-name-icon-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-size: calc(0.75rem + var(--text-bump));
  border-radius: var(--radius-sm);
  transition: all var(--motion-quick) var(--ease-out);
  opacity: 0.6;
}

.edit-name-icon-btn:hover {
  color: var(--teal-ink);
  background: var(--bg-tertiary);
  opacity: 1;
}

.edit-name-inline {
  /* Hidden until the pencil is clicked; the settings controller toggles the
     inline display. (form_with drops a top-level style:, so default it here.) */
  display: none;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.edit-name-inputs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.edit-name-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: calc(0.9rem + var(--text-bump));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-dark);
}

.edit-name-input:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.edit-name-input::placeholder {
  color: var(--text-muted);
}

.edit-name-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Dark mode */
[data-theme="dark"] .edit-name-inline {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .edit-name-input {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
  color: var(--text-dark);
}

/* ===== PROFILE COMPLETION MODAL (Premium Styling) ===== */
.profile-modal {
  max-width: 500px;
  border-radius: 12px;
  padding: 2rem;
}

.profile-modal .modal-header {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.profile-modal .modal-header h3 {
  font-size: calc(1.25rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-modal .modal-header h3 i {
  color: var(--teal-ink);
}

.profile-modal .modal-body {
  text-align: center;
}

.profile-modal-subtitle {
  color: var(--text-secondary);
  font-size: calc(0.95rem + var(--text-bump));
  margin-bottom: 1.5rem;
}

.profile-name-fields {
  display: flex;
  gap: 0.75rem;
}

.profile-field {
  flex: 1;
}

.profile-field label {
  display: none;
}

.profile-field input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: calc(1rem + var(--text-bump));
  border: 2px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-dark);
  transition: all var(--motion-quick) var(--ease-out);
}

.profile-field input:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.profile-field input::placeholder {
  color: var(--text-muted);
}

.profile-modal .modal-actions {
  justify-content: flex-end;
  margin-top: 1.25rem;
  gap: 0.5rem;
}

.profile-modal .modal-actions .btn {
  padding: 0.75rem 1.25rem;
  font-size: calc(0.9rem + var(--text-bump));
  font-weight: 600;
  border-radius: 6px;
}

/* Dark mode for profile modal */
[data-theme="dark"] .profile-modal {
  background: var(--bg-secondary);
}

[data-theme="dark"] .profile-modal .modal-header h3 {
  color: var(--text-dark);
}

[data-theme="dark"] .profile-field input {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-dark);
}

[data-theme="dark"] .profile-field input:focus {
  border-color: var(--teal-accent);
}

/* ===== SYNC ERROR STYLES ===== */

/* Sync status warning state */
.sync-error-warning {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  padding: 4px 12px;
  border-radius: 4px;
  animation: syncErrorPulse 2s ease-in-out infinite;
}

.sync-error-warning i {
  color: #dc2626 !important;
}

@keyframes syncErrorPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Sync error banner */
.sync-error-banner {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(0.9rem + var(--text-bump));
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.sync-error-banner i {
  font-size: calc(1.2rem + var(--text-bump));
  flex-shrink: 0;
}

.sync-error-banner span {
  flex: 1;
}

.sync-error-banner .sync-error-dismiss {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity var(--motion-quick) var(--ease-out);
}

.sync-error-banner .sync-error-dismiss:hover {
  opacity: 1;
}

/* Dark mode */
[data-theme="dark"] .sync-error-warning {
  background: #450a0a !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .sync-error-warning i {
  color: #fca5a5 !important;
}

/* ===== IMPERSONATION BANNER ===== */
.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: calc(14px + var(--text-bump));
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.impersonation-exit-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4px 12px;
  font-size: calc(12px + var(--text-bump));
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.impersonation-exit-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

body.impersonating .app-wrapper,
body.impersonating .login-screen {
  margin-top: 40px;
}

body.impersonating .module-nav {
  top: 40px;
}

/* ============================================================
   Settings tray — transcribed from the redesign reference
   (docs/design-reference/extracted/drawer-settings-*.html).

   The panel chrome (scrim, 620px panel, header, body, footer) is the shared
   tray language in components/drawers.css; this block is what the Settings
   tray adds on top: the horizontal tab strip, the segmented controls that
   sit in a tray row, and the two-field name edit.

   Literal pixel type from the captures is written calc(Npx * var(--text-scale)),
   the convention modules/hub.css established.
   ============================================================ */

.settings-modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Tab strip ──────────────────────────────────────────────── */

.settings-nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1.1rem;
  overflow-x: auto;
}

.settings-nav-item {
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.85rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.settings-nav-item:hover { color: var(--navy-primary); }

.settings-nav-item.active {
  border-bottom-color: var(--teal-accent);
  color: var(--navy-primary);
}

.settings-nav-item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -2px; }

/* ── Panes ──────────────────────────────────────────────────── */

.settings-pane { display: none; }
.settings-pane.active { display: block; }
.settings-pane[hidden] { display: none; }

/* Rows whose control is too tall or too wide to sit beside its label
   (the memory summary, the AI-sync flow) stack instead. */
.tray-row--stacked {
  display: block;
}

.tray-row--stacked > .tray-row-label { margin-bottom: 0.6rem; }

/* ── Segmented controls in a tray row ───────────────────────── */

/* The theme / text-size / dictation controls keep their radio+label
   mechanics (the input is visually hidden; the label is the hit target)
   and take the reference's segmented button skin. */
.theme-segmented-control.tray-seg {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 0.25rem;
}

.theme-segmented-control.tray-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-segmented-control.tray-seg label {
  flex: 0 0 auto;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  font-weight: 400;
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
  transition: all var(--transition-fast);
}

.theme-segmented-control.tray-seg label:hover { color: var(--navy-primary); }

.theme-segmented-control.tray-seg input:checked + label {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
  box-shadow: none;
}

/* ── Account: photo + name edit ─────────────────────────────── */

.settings-avatar-form { display: inline-flex; margin: 0; }

.settings-avatar-error { color: var(--status-danger); }

/* Hidden until the pencil is clicked; settings_controller flips
   style.display. (form_with swallows a top-level style: option, so the
   hidden default lives here rather than inline.) */
.settings-edit-name {
  display: none;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--border-light);
}

.settings-edit-name-inputs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.settings-edit-name-actions { display: flex; gap: 0.5rem; }

/* The tray's one text input shape. */
.tray-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  background: var(--bg-secondary);
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-dark);
}

.tray-input:focus { border-color: var(--teal-accent); }

/* ── Your data ──────────────────────────────────────────────── */

.settings-import-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.settings-memory-export {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.settings-danger-confirm { display: none; margin-top: 0.85rem; }
.settings-danger-confirm .tray-input { width: 220px; max-width: 100%; margin: 0.4rem 0 0.6rem; }
.settings-danger-confirm-actions { display: flex; gap: 0.5rem; }

/* ── Kept from the pre-redesign Settings sheet: chrome the memory-sync
   partials and the file picker still use, restyled to the tray scale. ── */

.settings-block-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  margin-bottom: 0.5rem;
}

.settings-block-head i { color: var(--teal-ink); }

.settings-block-desc {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

/* Styled file picker — the native control is hidden and driven from a label. */
.file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.file-input-trigger { cursor: pointer; }

.file-input-native:focus-visible + .file-input-trigger {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.file-input-name {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: calc(13px * var(--text-scale));
}

/* "What 100x knows about you" reads as plain rows inside the tray, not a card. */
.settings-pane .memory-summary {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}

.settings-pane .memory-empty {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0;
  text-align: left;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
}

.settings-pane .memory-empty i {
  display: inline;
  font-size: 1.15em;
  margin: 0;
  opacity: 1;
  color: var(--teal-ink);
}

.settings-pane .memory-empty p { margin: 0; line-height: 1.6; }

.settings-danger-link {
  background: none;
  border: none;
  padding: 0.2rem 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  cursor: pointer;
  text-decoration: underline;
  align-self: center;
}

.settings-danger-link:hover { color: var(--status-danger); }

/* ── The app's own confirmation ───────────────────────────────────────────
   Standing in for window.confirm everywhere (shared/_confirm_dialog,
   lib/confirm.js). Square like the rest of the app, both themes through
   tokens, and the destructive answer is the one that looks it. */
.confirm-dialog {
  width: min(94vw, 26rem);
  padding: 0;
  border: none;
  background: var(--bg-primary);
  color: var(--text-dark);
  box-shadow: var(--shadow-lg);
}

.confirm-dialog::backdrop { background: rgba(19, 19, 19, 0.45); }

.confirm-dialog__card { padding: 1.5rem 1.5rem 1.25rem; }

.confirm-dialog__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: calc(21px * var(--text-scale, 1));
  line-height: 1.25;
  color: var(--text-dark);
}

.confirm-dialog__message {
  margin: 0;
  color: var(--text-secondary);
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1.55;
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.confirm-dialog__btn {
  min-height: 40px;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-dark);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--text-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.confirm-dialog__btn:hover { border-color: var(--text-dark); }

.confirm-dialog__btn.is-primary {
  border-color: var(--teal-accent);
  background: var(--teal-accent);
  color: var(--bg-primary);
}

.confirm-dialog__btn.is-primary:hover { background: var(--teal-ink); border-color: var(--teal-ink); }

.confirm-dialog__btn.is-danger {
  border-color: var(--status-danger);
  background: var(--status-danger);
  color: #fff;
}

.confirm-dialog__btn.is-danger:hover { filter: brightness(0.92); }