/* ═══════════════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════════════ */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--drawer-width); max-width: 85vw;
  background:
    radial-gradient(ellipse 60% 30% at 30% 0%, var(--drawer-gradient), transparent),
    var(--bg-surface);
  border-right: 1px solid var(--border);
  z-index: 1;
  display: flex; flex-direction: column;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.drawer-header {
  padding: max(28px, calc(env(safe-area-inset-top) + 14px)) 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-title-group { display: flex; align-items: center; gap: 10px; }
.drawer-mark {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--success));
  display: grid; place-items: center;
  color: white;
  box-shadow: 0 0 16px var(--accent-glow);
}
.drawer-mark svg { width: 16px; height: 16px; stroke-width: 2.5; }
.drawer-mark img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.drawer-title { font-family: var(--display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; }
.drawer-subtitle { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.drawer-content {
  flex: 1 1 auto;
  /* min-height:0 is essential — without it a flex child keeps its default
     min-height:auto and refuses to shrink below its content, so overflow
     never becomes scrollable and the module list is clipped (you can't reach
     the items below the fold, e.g. the last module + the other sites). */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  overscroll-behavior: contain;        /* don't chain-scroll the page behind */
  padding: 14px 10px;
  /* Match the global thin transparent-track scrollbar so it's consistent
     with the main app surface. Without this explicit declaration, some
     browsers (Safari overlay-scrollbar mode) render their default chrome
     here which doesn't match the rest of the app. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.drawer-content::-webkit-scrollbar { width: 8px; background: transparent; }
.drawer-content::-webkit-scrollbar-track { background: transparent; border: none; }
.drawer-content::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.drawer-content::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.drawer-section-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 12px 6px;
}
.drawer-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-md); cursor: pointer;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
}
.drawer-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.drawer-item.disabled { opacity: 0.45; cursor: not-allowed; }
.drawer-item.disabled:hover { background: transparent; color: var(--text-secondary); }
.drawer-item-icon { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.drawer-item-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.drawer-item-soon {
  margin-left: auto; font-size: var(--text-xs);
  color: var(--text-muted); background: var(--bg-elevated);
  padding: 1px 7px; border-radius: var(--radius-pill); font-weight: 500;
}
.drawer-footer {
  border-top: 1px solid var(--border);
  padding: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ─── DRAWER: SITE ACCORDION ─── */
.drawer-site {
  margin-bottom: 2px;
}
.drawer-site-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-md); font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  background: transparent; border: none;
  width: 100%; text-align: left;
  font-family: var(--body);
}
.drawer-site-header:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-site.expanded .drawer-site-header {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.drawer-site-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.drawer-site-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.drawer-site-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-site-chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.drawer-site.expanded .drawer-site-chevron { transform: rotate(90deg); color: var(--accent); }

.drawer-site-modules {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  padding-left: 18px;
}
.drawer-site.expanded .drawer-site-modules {
  max-height: 400px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.drawer-site-module {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
  position: relative;
}
.drawer-site-module::before {
  content: ""; position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
  border-radius: var(--radius-xs);
}
.drawer-site-module:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-site-module.active {
  color: var(--accent);
  font-weight: 500;
}
.drawer-site-module.active::before { background: var(--accent); }
.drawer-site-module.disabled { opacity: 0.45; cursor: not-allowed; }
.drawer-site-module.disabled:hover { background: transparent; color: var(--text-secondary); }
.drawer-site-module-icon { width: 16px; height: 16px; flex-shrink: 0; display: grid; place-items: center; }
.drawer-site-module-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.drawer-site-module-soon {
  margin-left: auto; font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 6px; border-radius: var(--radius-pill);
  font-weight: 500; letter-spacing: 0.04em;
}

/* ─── SITE BADGE (shows current site context in module headers) ─── */
.current-site-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600;
  margin-bottom: 10px;
}
.current-site-banner svg { width: 13px; height: 13px; stroke-width: 2.4; }

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════════════ */
.app-shell {
  position: relative; height: 100%;
  /* Flex column: app-bar is a fixed flex child at the top; .main is the
     scroll container below it. Same architecture as .fullscreen-settings
     (.fs-settings-header + .fs-settings-body). The shell itself never
     scrolls — only .main does. */
  display: flex; flex-direction: column;
  background: var(--bg-base); z-index: 10;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), background 0.3s ease;
  will-change: transform;
  overflow: hidden;
  overscroll-behavior-x: none;
}
.app-shell.open { transform: translateX(var(--drawer-width)); }
.app-shell.dragging { transition: none; }
.app-shell::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background 0.3s; z-index: 25;
}
.app-shell.open::before { background: rgba(0,0,0,0.45); pointer-events: auto; }
[data-theme="light"] .app-shell.open::before { background: rgba(15,23,42,0.25); }

.app-bg {
  /* Fixed height = viewport only — prevents the gradient from stretching
     across the entire scroll-content height and disappearing on scroll. */
  position: absolute; top: 0; left: 0; right: 0; height: 100vh;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-gradient-1), transparent),
    radial-gradient(ellipse 60% 40% at 90% 40%, var(--bg-gradient-2), transparent),
    var(--bg-base);
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.float-btn {
  position: fixed;
  top: max(18px, calc(env(safe-area-inset-top) + 14px));
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--float-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--float-border);
  color: var(--text-secondary);
  display: grid; place-items: center;
  z-index: 30;
  transition: all 0.18s ease;
  box-shadow: var(--float-shadow);
  cursor: pointer;
}
.float-btn:hover {
  color: var(--text-primary);
  border-color: var(--float-border-hover);
  background: var(--float-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--float-shadow-hover);
}
.float-btn:active { transform: translateY(0); }
.float-btn svg { width: 20px; height: 20px; stroke-width: 2; }
.float-hamburger { left: 14px; }
.float-search    { right: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */
.main {
  position: relative;
  /* .main is now the scroll container — app-bar lives above it as a flex
     sibling inside .app-shell. Top padding gives breathing room below the
     bar; safe-area bottom clears the home indicator on notched devices. */
  padding: 16px 20px calc(env(safe-area-inset-bottom) + 32px);
  max-width: 720px;
  margin: 0 auto;
  z-index: 1;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  /* Keep iOS rubber-band / elastic overscroll — same feel as the Settings
     panel. Do NOT add overscroll-behavior-y: none here; it would kill the
     soft pull-bounce on mobile. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, var(--border)) transparent;
}

/* ─── PAGE HEADER ─── */
.page-header { margin-bottom: 24px; }
.page-header h1 {
  font-family: var(--display);
  font-size: var(--text-4xl); font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.page-header p { color: var(--text-muted); font-size: var(--text-base); }

/* ─── SECTION LABEL ─── */
.section-label {
  display: flex; align-items: center; justify-content: space-between;
  margin: 24px 4px 12px;
  font-family: var(--display);
  font-size: var(--text-md); font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.section-label > span:last-child {
  font-size: var(--text-xs); color: var(--text-muted);
  font-weight: 500; font-family: var(--body);
}

/* ═══════════════════════════════════════════════════════════════════════
   HUB MODULE CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.module-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.32,0.72,0,1);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  min-height: 130px;
}
.module-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 3px var(--accent-soft);
}
.module-card:active { transform: translateY(0); }
.module-card.disabled { cursor: not-allowed; opacity: 0.55; }
.module-card.disabled:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.module-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.module-card-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.module-card.disabled .module-card-icon { background: var(--bg-elevated); color: var(--text-muted); }
.module-card-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.module-card-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.module-card-soon {
  position: absolute;
  top: 14px; right: 14px;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.module-card-arrow {
  position: absolute;
  bottom: 14px; right: 14px;
  color: var(--text-muted);
  transition: all 0.15s;
}
.module-card:hover .module-card-arrow { color: var(--accent); transform: translateX(2px); }
.module-card-arrow svg { width: 18px; height: 18px; stroke-width: 2; }

/* Module wrapper (each module renders inside this) */
.module-view { display: none; }
.module-view.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN SETTINGS PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.fullscreen-settings {
  position: fixed; inset: 0;
  background: var(--bg-base);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.fullscreen-settings.open { transform: translateY(0); }

.fs-settings-header {
  padding: max(28px, calc(env(safe-area-inset-top) + 14px)) 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface);
}
.fs-settings-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: -0.02em;
}
.fs-settings-title svg { width: 20px; height: 20px; stroke-width: 2; color: var(--accent); }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: grid; place-items: center;
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }

.fs-settings-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: grid; place-items: center;
  transition: all 0.15s;
}
.fs-settings-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.fs-settings-close svg { width: 18px; height: 18px; stroke-width: 2; }

.fs-settings-body {
  flex: 1;
  overflow: hidden; /* desktop: pane scrolls internally */
  display: flex;
  flex-direction: column;
}
/* Desktop sidebar nav — hidden on mobile, visible side-by-side at ≥768px */
.fs-settings-nav { display: none; }
.fs-settings-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  /* Firefox themed scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, var(--border)) transparent;
}
/* Webkit scrollbar theming — applied to all scrollable areas of the
   settings panel so the white default system bar doesn't leak through. */
.fs-settings-pane::-webkit-scrollbar { width: 8px; }
.fs-settings-pane::-webkit-scrollbar-track { background: transparent; }
.fs-settings-pane::-webkit-scrollbar-thumb {
  background: var(--border-strong, var(--border));
  border-radius: var(--radius-sm);
}
.fs-settings-pane::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Mobile / narrow: every section visible, stacked vertically (current behaviour) */
.fs-settings-section + .fs-settings-section { margin-top: 8px; }

@media (min-width: 768px) {
  /* Two-column layout: nav rail on the left, active section on the right */
  .fs-settings-body {
    flex-direction: row;
  }
  .fs-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 8px;
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: var(--bg-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong, var(--border)) transparent;
  }
  .fs-settings-nav::-webkit-scrollbar { width: 6px; }
  .fs-settings-nav::-webkit-scrollbar-track { background: transparent; }
  .fs-settings-nav::-webkit-scrollbar-thumb {
    background: var(--border-strong, var(--border));
    border-radius: var(--radius-sm);
  }
  .fs-settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--body);
    font-size: var(--text-md);
    font-weight: 500;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .fs-settings-nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }
  .fs-settings-nav-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .fs-settings-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .fs-settings-nav-item span {
    pointer-events: none;
    flex: 1;
    min-width: 0;
  }

  /* On desktop only the active section renders */
  .fs-settings-section {
    display: none;
  }
  .fs-settings-section.is-active {
    display: block;
  }
}

.settings-section-title {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px; margin-top: 24px;
  padding-left: 4px;
}
.settings-section-title:first-child { margin-top: 0; }
/* When inside the wrapped section structure, the first title in the
   active section is effectively the page header — no top margin. The
   .fs-settings-section-body variant covers the mobile accordion, where the
   content is wrapped one level deeper. */
.fs-settings-section > .settings-section-title:first-child,
.fs-settings-section-body > .settings-section-title:first-child { margin-top: 0; }

/* ── Settings nav category labels (desktop rail) ──────────────────────────
   Small uppercase group headers in the left rail. The rail itself is hidden
   on mobile, so these never show there. */
.fs-settings-nav-group {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 12px 5px;
}
.fs-settings-nav-group:first-child { padding-top: 2px; }

/* ── Settings mobile accordion ────────────────────────────────────────────
   Built at runtime by wireSettingsAccordion_(). The section header, the
   category dividers and the chevron are hidden by default; the mobile media
   query below reveals them and drives the collapse. Desktop keeps the side
   rail + single active section untouched. */
.fs-settings-section-head { display: none; }
.fs-settings-cat { display: none; }
.fs-settings-chev { transition: transform 0.18s ease; }

@media (max-width: 767px) {
  .fs-settings-cat {
    display: block;
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px 3px;
    margin: 20px 0 0;
  }
  .fs-settings-cat:first-child { margin-top: 2px; }

  /* each section becomes a self-contained card */
  .fs-settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
  }
  .fs-settings-section + .fs-settings-section { margin-top: 8px; }

  .fs-settings-section-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 13px 15px;
    background: transparent; border: 0;
    color: var(--text-primary);
    font-family: var(--body); font-size: var(--text-md); font-weight: 600;
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fs-settings-section-head:active { background: var(--bg-elevated); }
  .fs-settings-section-head > svg {
    width: 19px; height: 19px; flex: none; color: var(--accent);
  }
  .fs-settings-section-head-label { flex: 1; min-width: 0; }
  .fs-settings-section-head .fs-settings-chev {
    width: 18px; height: 18px; flex: none;
    color: var(--text-muted); margin-left: auto;
  }
  .fs-settings-section-head .fs-settings-chev.is-open { transform: rotate(90deg); }

  /* collapsed: only the header shows */
  .fs-settings-section:not(.is-open) > .fs-settings-section-body { display: none; }
  .fs-settings-section-body { padding: 2px 15px 16px; }

  /* a first title that just repeats the header name (flagged at build) */
  .fs-set-dupe-title { display: none; }
}

.fs-settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 8px;
}
.fs-settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.fs-settings-row:last-child { border-bottom: none; }
.fs-settings-row:hover { background: var(--bg-elevated); }
.fs-settings-row-label {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-md); flex: 1; min-width: 0;
}
.fs-settings-row-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.fs-settings-row-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.fs-settings-row-text { min-width: 0; }
.fs-settings-row-name { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); }
.fs-settings-row-desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: 1px; }

/* Theme mode picker */
.mode-picker {
  display: flex; background: var(--bg-elevated);
  border-radius: var(--radius-md); padding: 3px; gap: 2px;
}
.mode-btn {
  flex: 1; padding: 7px 10px; border-radius: var(--radius-md);
  color: var(--text-muted); font-size: var(--text-sm); font-weight: 500;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.mode-btn:hover { color: var(--text-secondary); }
.mode-btn.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.mode-btn svg { width: 14px; height: 14px; stroke-width: 2; }

/* Accent picker */
.accent-picker {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; padding: 4px 0 8px;
}
.accent-swatch {
  aspect-ratio: 1; border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.18s; position: relative;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.active { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px currentColor, 0 0 14px currentColor; }
.accent-swatch.cyan   { background: #00d8e6; color: #00d8e6; }
.accent-swatch.teal   { background: #2dd4a4; color: #2dd4a4; }
.accent-swatch.purple { background: #a78bfa; color: #a78bfa; }
.accent-swatch.amber  { background: #f5a623; color: #f5a623; }
.accent-swatch.rose   { background: #f472b6; color: #f472b6; }
.accent-swatch.sky    { background: #38bdf8; color: #38bdf8; }
.accent-swatch.slate  { background: #94a3b8; color: #94a3b8; }

/* ─── API CONNECTION ─── */
.conn-status-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  flex-shrink: 0;
}
.add-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--text-xl); font-family: var(--body);
  color: var(--text-primary); outline: none;
  transition: border-color 0.15s;
}
.add-input::placeholder { color: var(--text-muted); }
.add-input:focus { border-color: var(--accent); }
.add-btn {
  padding: 8px 14px;
  background: var(--accent);
  color: var(--bg-base);
  border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 600; font-family: var(--body);
  transition: all 0.15s;
  white-space: nowrap; border: none; cursor: pointer;
}
.add-btn:hover { opacity: 0.88; }
.add-btn.secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 12px 18px 12px 14px;
  /* 10px matches the app's standard radius. Previously 999px (full
     pill) which felt like a different visual system from the rest
     of the app — Radek's feedback that toasts had too big a radius. */
  border-radius: var(--radius-md);
  font-size: var(--text-md); font-weight: 500;
  /* Above the modal-stack ceiling (overlays get elevated past 10000): a
     validation/undo toast fired while a modal or sheet is open must be
     visible, not buried behind the backdrop. Non-clickable toasts are
     pointer-events:none so sitting this high steals no taps. */
  z-index: 100001;
  opacity: 0;
  transition: opacity 0.25s, transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--bg-base);
}
.toast-icon svg { width: 14px; height: 14px; }
.toast.toast-error .toast-icon { background: var(--danger); color: white; }
.toast.toast-info .toast-icon { background: var(--text-muted); color: var(--bg-base); }
.toast-msg {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Clickable toast — used for retry/undo actions (e.g. "Couldn't load — tap
   to try again", "Task completed — tap to undo"). The base .toast sets
   pointer-events: none so a dying toast never blocks taps; a clickable one
   MUST restore it or the onClick is unreachable (bug: undo/retry toasts were
   un-tappable app-wide until 2026-07-03). */
.toast.toast-clickable {
  cursor: pointer;
  pointer-events: auto;
}
.toast.toast-clickable:hover {
  filter: brightness(1.08);
}
.toast.toast-clickable:active {
  transform: translateX(-50%) translateY(0) scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE MANAGEMENT (Hub Settings)
   ═══════════════════════════════════════════════════════════════════════ */
.site-manage-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  transition: background 0.1s;
}
.site-manage-row:hover { background: var(--bg-elevated); }
.site-manage-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--accent); flex-shrink: 0;
}
.site-manage-name { flex: 1; font-size: var(--text-md); font-weight: 500; min-width: 0; }
.site-manage-type { font-size: var(--text-xs); color: var(--text-muted); margin-right: 4px; }
.site-manage-prefix {
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-right: 6px;
  flex-shrink: 0;
}
.site-manage-btns { display: flex; gap: 2px; flex-shrink: 0; }
.site-manage-btn {
  width: 30px; height: 30px; border-radius: var(--radius-md);
  color: var(--text-muted); display: grid; place-items: center;
  transition: all 0.12s; background: transparent; border: none; cursor: pointer;
}
.site-manage-btn:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.site-manage-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.site-manage-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.site-manage-btn[disabled] { opacity: 0.3; pointer-events: none; }

.site-edit-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 8px;
}
.site-edit-field { margin-bottom: 10px; }
.site-edit-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.site-edit-actions {
  display: flex; gap: 8px;
  /* Pin Save / Cancel to the bottom of the scrolling Settings pane so they are
     never hidden below the fold on mobile — the dept editor (name + icon +
     colour + 16 module toggles + room perms) is far taller than the viewport,
     so closing Settings before scrolling down used to silently discard edits.
     Sticky (not fixed) keeps it inside the modal + below the impersonation
     banner. Bleeds to the card edges (panel has 14px padding) to read as a
     proper card footer, with a divider so content scrolls cleanly underneath. */
  position: sticky; bottom: 0; z-index: 2;
  margin: 12px -14px -14px; padding: 12px 14px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.site-edit-save {
  flex: 1; padding: 9px;
  background: var(--accent); color: var(--bg-base);
  border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 600; font-family: var(--body);
  border: none; cursor: pointer; transition: opacity 0.15s;
}
.site-edit-save:hover { opacity: 0.88; }
.site-edit-cancel {
  padding: 9px 16px;
  background: var(--bg-surface); color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-base); font-family: var(--body);
  border: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.site-edit-cancel:hover { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   ORGANISATION & USERS (Hub Settings)
   ═══════════════════════════════════════════════════════════════════════ */

/* Org info card */
.org-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
.org-card-mark {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--success));
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--accent-glow);
  font-family: var(--display);
  font-weight: 700; font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}
.org-card-info { flex: 1; min-width: 0; }
.org-card-name {
  font-family: var(--display);
  font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.org-card-plan {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Current user identity card */
.identity-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.identity-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600; font-size: var(--text-md);
  font-family: var(--display);
  flex-shrink: 0;
}
.identity-info { flex: 1; min-width: 0; }
.identity-name { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); }
.identity-email { font-size: var(--text-sm); color: var(--text-muted); }

/* Role badge — used everywhere */
.role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.role-badge::before {
  content: ""; width: 6px; height: 6px;
  border-radius: var(--radius-full); background: currentColor;
  flex-shrink: 0;
}

/* Role picker (testing tool) */
.role-picker {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 6px; padding: 4px 0 0;
}
.role-pick-btn {
  padding: 10px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-align: left; cursor: pointer;
  transition: all 0.15s;
  display: flex; flex-direction: column; gap: 2px;
}
.role-pick-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.role-pick-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.role-pick-name {
  font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
}
.role-pick-btn.active .role-pick-name { color: var(--accent); }
.role-pick-desc {
  font-size: var(--text-xs); color: var(--text-muted);
  line-height: 1.35;
}

/* Users table rows — richer card: avatar (role-tinted) + name + email +
   role badge + calm scope chips (which sites / departments they see). */
.user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.user-row:hover { border-color: var(--border-strong, var(--border)); background: var(--bg-elevated); }
.user-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-row-avatar {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--text-md);
  font-family: var(--display);
  flex-shrink: 0;
}
.user-row-info { flex: 1; min-width: 0; }
.user-row-name {
  font-size: var(--text-md); font-weight: 600; color: var(--text-primary);
  line-height: 1.25;
}
.user-row-you { color: var(--text-muted); font-weight: 400; }
.user-row-email {
  font-size: var(--text-xs); color: var(--text-muted);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px;
}
/* Scope chip (sites / departments) — same pill treatment as .role-badge so
   the chip row reads as one consistent family. Kept calm/neutral (colour
   stays on the role badge, per the two-tier card rule); a small icon marks
   site vs department instead of the role badge's dot. */
.user-scope-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.user-scope-chip svg { width: 12px; height: 12px; stroke-width: 2; flex-shrink: 0; color: var(--text-muted); }
.user-scope-chip.is-full { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.user-scope-chip.is-full svg { color: var(--accent); }
.user-row-btns { display: flex; gap: 2px; flex-shrink: 0; }
.user-row-btn {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  color: var(--text-muted); display: grid; place-items: center;
  transition: all 0.12s; background: transparent; border: none; cursor: pointer;
}
.user-row-btn:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.user-row-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.user-row-btn svg { width: 15px; height: 15px; stroke-width: 2; }
/* The single ⋯ "More actions" trigger on a user row. ≥44px hit area (§4);
   the row itself is the primary tap target, so this can never be a dead tap. */
.user-row-menu {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  color: var(--text-muted); display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.user-row-menu:hover { background: color-mix(in srgb, var(--text-primary) 9%, transparent); color: var(--text-primary); }
.user-row-menu:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.user-row-menu svg { width: 20px; height: 20px; stroke-width: 2; }

/* Users filter bar — Site + Department dropdowns (reusing taxonomyDropdown) */
.users-filter-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.users-filter-field { flex: 1; min-width: 0; }
.users-filter-field .asset-form-cat-dd,
.users-filter-field .tasks-priority-trigger { width: 100%; }
@media (max-width: 520px) { .users-filter-bar { flex-direction: column; } }

/* Collapsible site/group sections in the users list */
.user-group { margin-bottom: 12px; }
.user-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 4px; margin-bottom: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); text-align: left;
  border-bottom: 1px solid var(--border);
}
.user-group-head:hover { color: var(--text-primary); }
.user-group-chev {
  width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted);
  transform: rotate(90deg); transition: transform 0.15s;
}
.user-group.is-collapsed .user-group-chev { transform: rotate(0deg); }
.user-group-label {
  flex: 1; min-width: 0; font-family: var(--display); font-weight: 600;
  font-size: var(--text-sm); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-group-count {
  flex-shrink: 0; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted); background: var(--bg-elevated);
  border-radius: var(--radius-pill); padding: 2px 8px; min-width: 22px; text-align: center;
}
/* Department roster sub-section inside a site group (two-tier card rule:
   colour lives on the dept icon only; the header stays calm). */
.user-subgroup { margin: 4px 0 10px; }
.user-subgroup-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px 4px 6px;
}
.user-subgroup-ico { width: 16px; height: 16px; flex-shrink: 0; }
.user-subgroup-ico svg { width: 16px; height: 16px; }
.user-subgroup-label {
  flex: 1; min-width: 0; font-weight: 600; font-size: var(--text-xs);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-subgroup-count {
  flex-shrink: 0; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted); background: var(--bg-elevated);
  border-radius: var(--radius-pill); padding: 1px 7px; min-width: 20px; text-align: center;
}
.users-empty { font-size: var(--text-sm); color: var(--text-muted); padding: 14px 4px; text-align: center; }
/* One-click "assign teams from access" nudge above the roster. */
.users-seed-hint {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-md);
}
.users-seed-hint-text { flex: 1; min-width: 180px; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.users-seed-hint-text strong { color: var(--text-primary); font-weight: 600; }
.users-seed-btn { flex-shrink: 0; }

/* Reset-password modal — share-this success state */
.reset-pwd-success { text-align: center; padding: 6px 4px 2px; }
.reset-pwd-success-ico {
  width: 44px; height: 44px; margin: 0 auto 12px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
  color: var(--success, #16a34a);
  display: grid; place-items: center;
}
.reset-pwd-success-ico svg { width: 22px; height: 22px; }
.reset-pwd-success-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); font-family: var(--display); }
.reset-pwd-success-desc { font-size: var(--text-sm); color: var(--text-secondary); margin: 4px auto 14px; max-width: 320px; line-height: 1.45; }
.reset-pwd-share {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 12px;
}
.reset-pwd-share code {
  flex: 1; text-align: left; font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--text-md); font-weight: 600; color: var(--text-primary);
  letter-spacing: 0.3px; word-break: break-all;
}
.reset-pwd-copy {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary);
  display: grid; place-items: center; cursor: pointer; transition: all 0.12s;
}
.reset-pwd-copy:hover { background: var(--bg-elevated); color: var(--text-primary); }
.reset-pwd-copy svg { width: 16px; height: 16px; }

/* Inline user-edit panel */
.user-edit-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 8px;
}
.user-edit-field { margin-bottom: 10px; }
.user-edit-label {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.user-edit-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Locked-feature placeholder */
.permission-locked {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.permission-locked-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: grid; place-items: center;
  margin: 0 auto 12px;
  color: var(--text-muted);
}
.permission-locked-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.permission-locked-title {
  font-size: var(--text-md); font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.permission-locked-sub { font-size: var(--text-sm); }

/* Mobile width pass (2026-06-25): tighten horizontal padding on mobile so content
   uses the screen width. Appended at end-of-file so it beats the base rules AND any
   wider-breakpoint (600/640/767px) blocks at equal specificity (later source wins).
   Desktop (>=600px) untouched. */
@media (max-width: 599px) {
  .main { padding: 12px 14px calc(env(safe-area-inset-bottom) + 16px); }
  .fs-settings-pane { padding: 14px; }
  .fs-settings-header { padding: max(28px, calc(env(safe-area-inset-top) + 14px)) 14px 16px; }
  .permission-locked { padding: 20px 14px; }
  .drawer-header { padding: max(28px, calc(env(safe-area-inset-top) + 14px)) 12px 16px; }
}


/* Floating chat-bubble clearance (2026-07-05): modules/chat/nudge.js flags
   body.has-chat-nudge while the bubble (.chat-nudge) is on screen. The bubble
   is FIXED at bottom-left — top edge ~78px up (22px offset + 56px dot) — so
   without this the list's LAST card could never scroll clear of it. The two
   max() arms agree at the standard 34px iPhone inset; the env() arm only wins
   on devices with larger bottom insets. All widths: the bubble floats over
   .main on every breakpoint. Longhand on purpose (base rule's shorthand sets
   asymmetric sides). */
body.has-chat-nudge .main {
  padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 56px));
}

/* ─── Settings — collapsible sub-section folds (shared) ───────────────────
   A Settings-wide fold used by Knowledge Base (AI Integration + Chip library),
   Asset Register (Service types) and Guest access (Service buttons / audience /
   branding) so opening a section gives tidy fold rows instead of a long sprawl
   (collapsed by default). Reuses the roles-editor (.role-editor-module) /
   inv-form-fold mechanics: a button head + chevron rotate keyed off
   aria-expanded + an explicit [hidden] body rule (§6). The fold IS the card —
   no nested .settings-ai-card. ≤599px override follows the base rules per the
   §4 source-order law (this file's tail). Wired by wireSettingsFolds_(). */
.settings-fold {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 12px;
}
.settings-fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  background: var(--bg-elevated);
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.settings-fold-head:hover { background: var(--border); }
.settings-fold-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.settings-fold-head[aria-expanded="true"] { border-bottom: 1px solid var(--border); }
.settings-fold-chev {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.settings-fold-head[aria-expanded="true"] .settings-fold-chev { transform: rotate(90deg); }
.settings-fold-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.settings-fold-meta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.settings-fold-body { padding: 4px 16px 16px; }
.settings-fold-body[hidden] { display: none; }
@media (max-width: 599px) {
  .settings-fold-head { min-height: 48px; padding: 12px 12px; }
  .settings-fold-body { padding: 4px 12px 14px; }
}