/* TAMMY — Brand palette
   color-1 #FFF, color-2 #947DED (primary purple), color-3 #1F1C30 (ink),
   color-4 #C0ACFF (light purple), color-5 #3E3D40 (neutral gray)
*/
:root {
  /* Paper — white scale */
  --canvas: #FFFFFF;
  --canvas-tint: #F6F3FF;
  --surface: #FFFFFF;
  --surface-2: #F0EAFF;

  /* Ink — deep cool near-black with purple tint */
  --ink: #1F1C30;                        /* primary text */
  --ink-2: #3E3D40;                      /* secondary, neutral gray */
  --ink-3: rgba(31, 28, 48, 0.55);       /* tertiary */
  --mauve: rgba(31, 28, 48, 0.18);       /* border */
  --mauve-soft: rgba(31, 28, 48, 0.07);  /* hairline */

  /* Accent — brand purple, used for the most important moment per screen */
  --amber: #947DED;                      /* primary purple */
  --amber-hi: #C0ACFF;                   /* light purple highlight */
  --amber-soft: rgba(148, 125, 237, 0.14);
  --amber-glow: rgba(148, 125, 237, 0.38);

  /* Legacy aliases — keep existing JSX working */
  --iris: var(--ink);
  --iris-2: var(--ink-2);
  --lilac: var(--mauve);
  --sage: var(--amber);
  --sage-soft: var(--amber-soft);
  --sienna: var(--amber);
  --sienna-soft: var(--amber-soft);
  --ivory: var(--surface);

  --f-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-serif: 'Inter', -apple-system, system-ui, sans-serif;
  --f-mono: 'Inter', ui-monospace, 'SF Mono', monospace;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(31, 28, 48, 0.05);
  --shadow-md: 0 8px 24px rgba(31, 28, 48, 0.08);
  --shadow-lg: 0 20px 60px rgba(31, 28, 48, 0.14);
  --shadow-glow-amber: 0 0 40px rgba(148, 125, 237, 0.30);

  /* Fluid layout variables — all pages use these via CSS overrides */
  --page-left: 94px;
  --page-pad: 0 32px 32px 94px;
  /* Mobile nav bar height (used for padding-bottom) */
  --mobile-nav-h: 64px;

  /* ── Theme-aware bottom nav bar ────────────────────────── */
  /* Light mode values — overridden by [data-theme="purple"] below */
  --nav-bar-bg: rgba(255, 255, 255, 0.94);
  --nav-bar-border: rgba(31, 28, 48, 0.10);
  --nav-icon-inactive: rgba(31, 28, 48, 0.45);
}

/* ── DESKTOP LAYOUT WRAPPERS ───────────────────────────────── */
.desktop-layout {
  min-height: 100vh;
  padding: 64px 64px 120px 64px;
  max-width: 1280px;
  margin: 0 auto;
  margin-left: 120px;
}

@media (max-width: 1023px) {
  :root {
    --page-left: 72px;
    --page-pad: 0 20px 80px 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-left: 58px;
    --page-pad: 0 16px 80px 64px;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-sans);
  color: var(--ink);
  background:
    radial-gradient(1000px 700px at 88% 8%, var(--amber-soft), transparent 60%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas-tint) 100%);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0 0.19 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
}

.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.muted { color: var(--ink-3); }
.faint { color: var(--mauve); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 14px; font-weight: 500;
  border: none; cursor: pointer;
  transition: all 250ms ease;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--amber);
  color: #FFFFFF;
  box-shadow: 0 6px 22px var(--amber-glow);
}
.btn-primary:hover {
  background: var(--amber-hi);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--amber-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--mauve);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink-3);
  color: var(--ink);
}

.card {
  background: var(--surface);
  border: 1px solid var(--mauve-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* ── Dark / Purple theme nav-bar variables ───────────────── */
[data-theme="purple"] {
  --nav-bar-bg: rgba(31, 28, 48, 0.96);
  --nav-bar-border: rgba(255, 255, 255, 0.10);
  --nav-icon-inactive: rgba(255, 255, 255, 0.52);
}

/* --- Global Responsive Utilities --- */
.fullscreen { min-height: 100dvh; }
.projects-chart-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* Fluid Typography */
.serif.hero  { font-size: clamp(28px, 6vw, 72px) !important; }
.serif.title { font-size: clamp(22px, 4vw, 48px) !important; }
.serif.sub   { font-size: clamp(18px, 3vw, 32px) !important; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--mauve); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ─── Pill & Dot ─────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  font-family: var(--f-sans); border: 1px solid var(--mauve);
  background: var(--surface); color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ─── Onboarding: fork, upload, reveal ───────────────────── */
.onboarding-fork-card:hover {
  border-color: var(--amber) !important;
  background: var(--amber-soft) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(148, 125, 237, 0.18);
}
.onboarding-fork-card:nth-child(2) { animation-delay: 120ms; }
.onboarding-dropzone:hover { border-color: var(--amber) !important; }

/* The orb while Tammy is reading an upload — a harder, brighter pulse layered
   over its idle breathing, so it reads as work rather than a spinner. */
.onboarding-orb-reading {
  position: relative;
  border-radius: 50%;
  animation: onboarding-read-pulse 1600ms ease-in-out infinite;
}
.onboarding-orb-reading::after {
  content: '';
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148, 125, 237, 0.30), transparent 62%);
  filter: blur(10px);
  animation: onboarding-read-halo 1600ms ease-in-out infinite;
  pointer-events: none;
}
@keyframes onboarding-read-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes onboarding-read-halo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.14); }
}

/* ─── Global Positioning ─────────────────────────────────── */
.tammy-ws-switcher {
  top: 18px;
  right: 170px;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP (≥1024px) — hide mobile/tablet navs only
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .tammy-tablet-nav         { display: none !important; }
  .tammy-mobile-nav         { display: none !important; }
  .tammy-mobile-more-drawer { display: none !important; }
  
  /* Provide clearance for the desktop sidebar for extra pages (Network, etc.) */
  .screen-wrap {
    margin-left: 88px !important;
    padding-left: 64px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLET (768px – 1023px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Nav */
  .tammy-desktop-nav { display: none !important; }
  .tammy-tablet-nav  { display: flex !important; }

  /* Touch targets */
  button, .btn { min-height: 44px; }
  .tammy-ws-btn, .tammy-ctx-chip {
    min-height: 28px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
  }
  .tammy-ws-btn svg, .tammy-ctx-chip svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* ScreenWrap pages (DNA, Projects, Calibration, Network, Decisions, Mirror) */
  .screen-wrap {
    padding: 88px 24px 80px 88px !important;
    max-width: 100% !important;
  }

  /* Today — tablet: narrower sidebar + let the page flow/scroll instead of
     inheriting the desktop fixed 100vh (which clips the lower half here). */
  .today-layout {
    margin-left: 80px !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 88px 32px 48px 32px !important;
  }
  /* Bucket strip is the first child — drop its 48px inset so it lines up
     with the greeting/cards below it. */
  .today-layout > div:first-child {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Frame pills — 5 across is too tight on tablet; 3 columns reads cleanly. */
  .today-frame-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Chat */
  .chat-layout         { margin-left: 88px !important; }
  .chat-input-bar      { left: 88px !important; width: calc(100% - 88px) !important; }
  .chat-history-sidebar{ left: 72px !important; }
  .chat-history-toggle { left: 72px !important; top: calc(76px + env(safe-area-inset-top, 0px)) !important; z-index: 10000 !important; }
  .chat-history-toggle.open { left: 326px !important; }

  /* ── PROJECTS Screen (Premium WOW Redesign for Tablet & Mobile) ── */
  .projects-header {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  
  /* Make the title italic part glow gorgeously on smaller screens */
  .projects-header h1 em {
    background: linear-gradient(135deg, #947DED 0%, #C0ACFF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 4px 24px rgba(148, 125, 237, 0.4) !important;
  }
  
  /* Premium Action Buttons */
  .projects-header-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .projects-header-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }
  
  /* Rescan button deep glow */
  .projects-header-actions .btn-primary {
    background: linear-gradient(135deg, #947DED 0%, #7B6BA8 100%) !important;
    box-shadow: 0 12px 28px rgba(148, 125, 237, 0.35), inset 0 1px 1px rgba(255,255,255,0.2) !important;
    border: none !important;
  }
  
  /* My Book button glassmorphism */
  .projects-header-actions button:not(.btn-primary) {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(178, 157, 217, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
    color: var(--ink) !important;
  }
  
  /* Stats Grid Glassmorphism */
  .projects-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
  }
  
  .projects-stat-grid > div {
    background: linear-gradient(145deg, var(--surface) 0%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(178, 157, 217, 0.25) !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    box-shadow: 0 12px 32px rgba(43, 20, 86, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  /* Make stat numbers pop */
  .projects-stat-grid > div .serif {
    font-size: 42px !important;
    text-shadow: 0 4px 12px rgba(148, 125, 237, 0.15) !important;
  }
  /* …but the "Heaviest" value is a project TITLE, not a number — keep it small
     so long names like "Tammy Beta Launch" don't blow up the tile. */
  .projects-stat-grid > div .proj-stat-sm {
    font-size: 22px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    word-break: break-word !important;
  }
  
  /* Project Cards Grid */
  .projects-card-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Project Cards Glassmorphism */
  .projects-card-grid > div {
    background: linear-gradient(160deg, var(--surface) 0%, rgba(255,255,255,0.01) 100%) !important;
    border: 1px solid rgba(178, 157, 217, 0.25) !important;
    box-shadow: 0 16px 40px rgba(43, 20, 86, 0.05) !important;
    border-radius: 24px !important;
    padding: 28px 24px !important;
  }
  
  /* ── PROFILE Screen WOW Redesign ─────────────────────────── */
  .profile-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  /* Make the section nav horizontal on smaller screens */
  .profile-grid > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(178, 157, 217, 0.2) !important;
  }
  
  .profile-grid > div:first-child button {
    text-align: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(178, 157, 217, 0.15) !important;
  }
  
  /* Highlight active section button */
  .profile-grid > div:first-child button[style*="var(--surface-2)"],
  .profile-grid > div:first-child button[style*="var(--ink)"] {
    background: linear-gradient(135deg, #947DED 0%, #C0ACFF 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(148, 125, 237, 0.3) !important;
  }
  
  /* Hide scrollbar for the mobile tab row */
  .profile-grid > div:first-child::-webkit-scrollbar {
    display: none !important;
  }
  
  /* WOW Profile Header on Mobile */
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
    background: linear-gradient(180deg, rgba(148, 125, 237, 0.08) 0%, transparent 100%) !important;
    padding: 32px 16px 24px !important;
    border-radius: 32px !important;
    border: 1px solid rgba(178, 157, 217, 0.15) !important;
    margin-top: -20px !important;
  }
  
  .profile-avatar {
    width: 100px !important;
    height: 100px !important;
    font-size: 42px !important;
    box-shadow: 0 16px 40px var(--amber-glow), 0 0 0 6px var(--canvas), 0 0 0 8px var(--amber-soft) !important;
    margin-bottom: 8px !important;
  }
  
  .profile-name-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .profile-h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  
  .profile-badge-wrap {
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  
  /* ── WOW Profile Sections on Mobile ── */
  .profile-panel-title {
    text-align: center !important;
    font-size: 32px !important;
    margin-bottom: 24px !important;
    margin-top: 16px !important;
    background: linear-gradient(135deg, var(--ink) 0%, var(--mauve) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .profile-panel-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(178, 157, 217, 0.15) !important;
    border-radius: 32px !important;
    padding: 16px 24px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Profile Rows (Name, User ID, etc.) */
  .profile-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(178, 157, 217, 0.1) !important;
  }
  .profile-row:last-child {
    border-bottom: none !important;
  }
  
  /* Label and Sub-label wrapper */
  .profile-row > div:first-child {
    width: 100% !important;
  }
  
  /* Value and Action wrapper */
  .profile-row > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    word-break: break-word !important;
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(178, 157, 217, 0.08) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* WOW Edit Button */
  .profile-edit-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--ink) !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  .profile-edit-btn.danger {
    background: rgba(255, 100, 100, 0.1) !important;
    color: #ff8c8c !important;
    border-color: rgba(255, 100, 100, 0.2) !important;
  }

  /* ── SETTINGS Screen WOW Redesign ────────────────────────── */
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  .settings-sidenav {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    top: 0 !important;
  }
  
  /* Hide the "on this page" text on smaller screens */
  .settings-sidenav > .mono {
    display: none !important;
  }
  
  /* The container holding the nav links */
  .settings-sidenav > div {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(178, 157, 217, 0.2) !important;
  }
  
  .settings-sidenav a {
    text-align: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(178, 157, 217, 0.15) !important;
    border-left: none !important;
  }
  
  /* Highlight active link */
  .settings-sidenav a[style*="var(--surface)"],
  .settings-sidenav a[style*="var(--ink)"] {
    background: linear-gradient(135deg, #947DED 0%, #C0ACFF 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(148, 125, 237, 0.3) !important;
  }
  
  /* Setting Rows */
  .settings-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }
  
  .settings-row-control {
    width: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  
  /* Profile Card inside Settings */
  .settings-profile-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  
  .settings-profile-facts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }
  .settings-profile-facts > div {
    flex: 0 0 auto !important;
  }
  .settings-profile-avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
  }
  
  /* Big Radio buttons wrap */
  .settings-big-radio {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .settings-big-radio button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }

  /* Landing — the 2-column split only works on a wide desktop. Below 1024 the
     hero column gets too narrow and the 80px headline wraps one word per line.
     Stack it into a single fluid column + a premium, theme-aware treatment.
     (Desktop ≥1024 keeps its original design untouched.) */
  .page-inner {
    margin: 0 !important;
    padding: 88px 24px 120px 24px !important;
    max-width: 100vw !important;
  }
  
  .landing-layout {
    grid-template-columns: 1fr !important;
    min-height: 100dvh !important;
    align-content: start !important;   /* pack hero + form to the top; no mid-gap stretch */
  }
  .landing-left {
    padding: 64px 44px 36px !important;
    justify-content: flex-start !important;
    gap: 26px !important;
    text-align: left !important;
  }
  .landing-title { font-size: clamp(48px, 8.5vw, 76px) !important; }
  .landing-left p { max-width: 640px !important; }

  /* Form section — blend seamlessly out of the hero (top = --canvas) and add a
     soft ambient purple glow behind the card so it reads as depth, not a seam. */
  .landing-right {
    padding: 16px 44px 64px !important;
    min-height: 44vh !important;
    background:
      radial-gradient(130% 90% at 50% 20%, rgba(148, 125, 237, 0.20), transparent 60%),
      linear-gradient(180deg, var(--canvas) 0%, var(--canvas-tint) 100%) !important;
  }
  .landing-orb { transform: scale(0.95) !important; opacity: 0.9 !important; }

  /* Premium glass card — was a hard-coded near-white panel (washed out on the
     Purple theme). Now uses theme tokens: dark glass on Purple, light on White. */
  .landing-form-card {
    width: 100% !important;
    max-width: 452px !important;
    padding: 30px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--mauve) !important;
    border-radius: 26px !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    animation: fadeInUp 560ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
  /* Recess the fields so they sit inside the lifted card at any theme. */
  .landing-form-card input {
    background: var(--canvas) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SHORT LANDSCAPE (≥1024px wide but limited height) — iPad landscape,
   split-screen, and short desktop windows. Today's desktop layout is a
   fixed 100vh with overflow:hidden; on a short viewport that clips the
   bottom grid with no way to scroll. Let it flow instead. Tall desktop
   monitors (height > 860px) never match this, so the web shape is intact.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-height: 860px) {
  .today-layout {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (≤767px) — all pages, all buttons, all layouts
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Nav Visibility ──────────────────────────────────────── */
  .tammy-desktop-nav        { display: none !important; }
  .tammy-tablet-nav         { display: none !important; }
  .tammy-mobile-nav         { display: flex !important; }
  .tammy-mobile-more-drawer { display: flex !important; }

  /* ── Global mobile layout ────────────────────────────────── */
  body { 
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  /* Prevent iOS input zoom */
  input, textarea, select { font-size: 16px !important; }

  /* Hide scrollbars on mobile */
  ::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

  /* Touch targets */
  button, .btn { min-height: 44px; min-width: 44px; }
  .tammy-ws-btn, .tammy-ctx-chip {
    min-height: 28px !important;
    min-width: auto !important;
  }

  /* ── SHARED ScreenWrap (DNA, Projects, Network etc.) ─────── */
  .screen-wrap {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 88px 16px 120px 16px !important;
    min-height: 100dvh !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .screen-wrap h1 { font-size: clamp(32px, 7vw, 56px) !important; }

  /* ── Shared page-inner overrides (Settings, Arc, Calendar, Memory, Profile) ── */
  .page-inner {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 88px 16px 120px 16px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .today-layout {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px !important;
    height: auto !important;
    min-height: 100dvh !important;
    /* Single scroll container = the document. Don't make the layout its own
       scroller (that's where this page's past scroll bugs came from). */
    overflow: visible !important;
  }
  /* Bucket strip aligns to the page edge on mobile too (kills its 48px inset). */
  .today-layout > div:first-child {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .today-greeting-row   { flex-direction: column !important; gap: 16px !important; }
  .today-greeting-content { flex: none !important; }
  .today-orb-card       { min-height: 140px !important; flex: none !important; padding: 20px !important; }
  .today-action-btns    { flex-direction: column !important; gap: 10px !important; }
  .today-action-btns button { width: 100% !important; justify-content: center !important; }
  .today-bottom-grid    { grid-template-columns: 1fr !important; }

  /* Frame card carousel */
  .today-frame-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 8px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .today-frame-card {
    min-width: 200px !important;
    max-width: 200px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
  }

  /* ── CHAT Screen ─────────────────────────────────────────── */
  .chat-layout {
    margin: 0 !important;
    margin-left: 0 !important;
    width: 100vw !important;
  }
  .chat-main {
    padding: 88px 16px 160px 16px !important;
  }
  .chat-input-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    bottom: 64px !important;
  }
  .chat-history-sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    transition: width 280ms ease !important;
  }
  .chat-history-sidebar.open {
    width: 85vw !important;
    box-shadow: 20px 0 60px rgba(0,0,0,0.25) !important;
  }
  .chat-history-toggle {
    left: 16px !important;
    top: calc(76px + env(safe-area-inset-top, 0px)) !important;
    z-index: 10000 !important;
  }
  .chat-history-toggle.open {
    left: calc(85vw - 14px) !important;
  }

  /* ── SETTINGS Screen (Handled by Tablet query above) ─────── */

  /* ── CALENDAR Screen ─────────────────────────────────────── */
  .cal-day-cell   { min-height: 52px !important; padding: 4px !important; }
  .cal-day-num    { font-size: 11px !important; }
  .cal-event-label { display: none !important; }
  .cal-event-dot  { display: block !important; }

  /* ── PROJECTS Screen (Handled by Tablet query above) ─────── */

  /* ── NETWORK Screen ──────────────────────────────────────── */
  .network-grid        { grid-template-columns: 1fr !important; }
  .network-person-card { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .network-header      { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .network-actions     { flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; }
  .network-actions button { flex: 1 !important; }
  .network-card-actions { flex-direction: column !important; align-items: stretch !important; }
  .network-card-actions button { margin-left: 0 !important; width: 100% !important; }

  /* ── DECISIONS Screen ────────────────────────────────────── */
  .decisions-stat-row  { flex-wrap: wrap !important; }
  .decisions-stat-row > * { flex: 1 1 calc(50% - 16px) !important; }

  /* ── ARC / MEMORY ────────────────────────────────────────── */
  .arc-grid      { grid-template-columns: 1fr !important; }
  .memory-grid   { grid-template-columns: 1fr !important; }
  .memory-header { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .memory-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .memory-stats-grid > div { border-right: none !important; border-bottom: 1px solid var(--mauve-soft); padding: 24px 16px !important; }
  .memory-stats-grid > div:nth-child(even) { border-left: 1px solid var(--mauve-soft); }
  .memory-footer-card { flex-direction: column !important; text-align: center !important; gap: 24px !important; }
  .memory-footer-card button { width: 100% !important; }

  /* ── ORGANIZATION / TEAM ─────────────────────────────────── */
  .org-grid   { grid-template-columns: 1fr !important; }
  .org-header { flex-direction: column !important; gap: 16px !important; }

  /* ── DNA / BLINDSPOTS / CALIBRATION / MIRROR ─────────────── */
  .insight-grid  { grid-template-columns: 1fr !important; }
  .quadrant-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── LANDING & ONBOARDING ────────────────────────────────── */
  .landing-layout    { grid-template-columns: 1fr !important; min-height: 100dvh !important; }
  .landing-left  { padding: calc(40px + env(safe-area-inset-top, 0px)) 22px 20px !important; justify-content: flex-start !important; gap: 22px !important; }
  .landing-right { padding: 4px 22px calc(40px + env(safe-area-inset-bottom, 0px)) !important; min-height: auto !important; }
  .landing-title     { font-size: clamp(40px, 12vw, 60px) !important; }
  .landing-left p    { font-size: 16px !important; max-width: 100% !important; }
  .landing-orb       { transform: scale(0.6) !important; }
  .landing-form-card { width: 100% !important; max-width: 420px !important; padding: 28px 22px !important; }
  .onboarding-layout {
    min-height: 100dvh !important;
    padding: 88px 20px 48px 20px !important;
    align-items: center !important;
    overflow-y: auto !important;
  }
  .onboarding-stage { margin: auto 0 !important; padding-top: 0 !important; }
  .onboarding-title  { font-size: clamp(24px, 6vw, 32px) !important; margin-top: 24px !important; margin-bottom: 8px !important; }
  .onboarding-fork      { flex-direction: column !important; }
  .onboarding-dropzone  { padding: 28px 20px !important; }
  .onboarding-orb-wrap svg { width: 110px !important; height: 110px !important; }

  /* ── MODALS & OVERLAYS ───────────────────────────────────── */
  .tammy-ws-modal {
    width: calc(100vw - 32px) !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
  .tammy-book-modal {
    top: 0 !important; left: 0 !important; transform: none !important;
    width: 100vw !important; max-height: 100dvh !important; height: 100dvh !important;
    border-radius: 0 !important;
  }
  .tammy-notif-dropdown {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    top: 72px !important;
  }
  .tammy-voice-modal {
    min-height: 100dvh !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .cal-event-modal {
    width: 100vw !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* ── OLD sidebar ─────────────────────────────────────────── */
  .tammy-sidebar { left: 8px !important; }
  .tammy-sidebar > div > div { width: 58px !important; pointer-events: none !important; }
  .tammy-sidebar button { pointer-events: auto !important; }

  /* ── Stat numbers ────────────────────────────────────────── */
  .stat-number { font-size: clamp(28px, 8vw, 56px) !important; }

  /* ── CALENDAR Screen — Mobile ────────────────────────────── */

  /* (Calendar mobile/tablet rules live in the consolidated section below.) */
}

/* Desktop (≥1024) shows full weekday names by default. */
@media (min-width: 1024px) {
  .cal-day-short { display: none; }
  .cal-day-full  { display: inline; }
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR — mobile + tablet redesign (desktop ≥1024 untouched)
   Full-width, single column, comfortably-sized month grid.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Drop the desktop 120px rail offset + 1280 cap → full-bleed page. */
  .cal-root { margin: 0 !important; max-width: 100% !important; padding: 0 !important; }
  .cal-page-inner { padding: 52px 28px 96px !important; }

  /* Header: title block, then a full-width controls row. */
  .cal-header { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; margin-bottom: 32px !important; }
  .cal-title {
    font-size: clamp(44px, 8vw, 64px) !important;
    background: linear-gradient(135deg, var(--ink) 20%, var(--iris) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 8px 16px rgba(148, 125, 237, 0.18));
  }
  .cal-subtitle { display: none !important; }
  
  /* Redesign the nav buttons as premium glass pills */
  .cal-header-nav { width: 100% !important; gap: 8px !important; flex-wrap: wrap !important; align-items: center !important; }
  .cal-header-nav button:not(.cal-new-event) {
    background: var(--surface-2) !important;
    border: 1px solid var(--mauve) !important;
    box-shadow: 0 4px 12px rgba(31, 28, 48, 0.06);
    color: var(--ink) !important;
    border-radius: 14px !important;
  }

  /* Stack month grid + side cards into one full-width column. */
  .cal-main-layout { display: flex !important; flex-direction: column !important; gap: 24px !important; align-items: stretch !important; }
  
  /* Premium glassmorphism grid container */
  .cal-month-grid-outer {
    padding: 24px 20px !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
    border: 1px solid rgba(178, 157, 217, 0.15) !important;
    box-shadow: 0 32px 80px rgba(31, 28, 48, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.05) !important;
  }

  /* Weekday header + comfortable, uniform day cells that fill the width. */
  .cal-day-header { font-size: 11px !important; padding: 10px 0 !important; text-align: center !important; opacity: 0.6 !important; letter-spacing: 0.05em !important; }
  .cal-cell { min-height: 64px !important; padding: 7px 5px !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
  .cal-cell.selected {
    background: var(--surface-2) !important;
    box-shadow: 0 4px 24px rgba(148, 125, 237, 0.12) !important;
    border: 1px solid var(--iris) !important;
  }
  
  /* The active selected date circle inside the cell gets a premium pop */
  .cal-cell.selected > div:first-child {
    background: linear-gradient(135deg, var(--ink), var(--iris)) !important;
    color: var(--canvas) !important;
    box-shadow: 0 4px 12px rgba(148, 125, 237, 0.3) !important;
  }

  /* Events shown as compact colored bars under the day number. */
  .cal-event-pill { height: 5px !important; padding: 0 !important; margin-bottom: 4px !important; border-radius: 4px !important; overflow: hidden !important; }
  .cal-event-label, .cal-event-dot { display: none !important; }
}

/* Tablet keeps full weekday names; New-event button sits at the row end.
   Left padding clears the fixed tablet nav rail (left:16, ~48px wide). */
@media (min-width: 768px) and (max-width: 1023px) {
  .cal-page-inner { padding: 52px 40px 96px 92px !important; }
  .cal-day-full  { display: inline !important; }
  .cal-day-short { display: none !important; }
  .cal-new-event { margin-left: auto !important; }
  .cal-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .cal-view-switch button { min-height: 36px; }
}

/* Phone: tighter padding, single-letter weekdays, full-width CTA. */
@media (max-width: 767px) {
  .cal-page-inner { padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 120px !important; }
  .cal-title { font-size: clamp(38px, 12vw, 52px) !important; }
  .cal-day-full  { display: none !important; }
  .cal-day-short { display: inline !important; }
  .cal-day-header { font-size: 10px !important; }
  .cal-cell { min-height: 56px !important; padding: 5px 3px !important; }
  .cal-week-grid { grid-template-columns: 1fr !important; }
  .cal-view-switch { width: 100%; }
  .cal-view-switch button { flex: 1; }

  /* Upgrade the New Event CTA to a massive, floating glowing pill on mobile */
  .cal-new-event {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--ink) 0%, #352f44 100%) !important;
    box-shadow: 0 12px 32px rgba(31, 28, 48, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    min-height: 54px !important;
    font-size: 15.5px !important;
    margin-top: 6px !important;
    letter-spacing: 0.02em !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDING — global fixes (all widths, both themes-aware)
   ═══════════════════════════════════════════════════════════ */

/* Kill horizontal scroll: the landing has no legitimately-scrollable wide
   content, so clip any x-overflow (fixed-width Google button, orb glow, etc.).
   `clip` doesn't create a scroll container, so vertical scroll is unaffected. */
.landing-layout { overflow-x: clip !important; }

/* Purple theme: the form card must be dark at EVERY width, or the white
   labels ("EMAIL"/"PASSWORD"), the "or with email" divider, placeholders and
   the "or skip" link wash out on the light glass (the desktop bug). */
[data-theme="purple"] .landing-form-card {
  background: rgba(40, 37, 60, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="purple"] .landing-form-card input {
  background: var(--canvas) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="purple"] .landing-form-card input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}
/* Lift the faint hairline dividers ("or with email") so they read on dark. */
[data-theme="purple"] .landing-form-card .landing-divider-line {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ═══════════════════════════════════════════════════════════
   TODAY — mobile/tablet type scale + chrome (desktop untouched)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* The floating Purple/Light toggle is hidden on smaller screens; the theme
     control lives in Settings → Appearance instead. */
  .app-theme-toggle { display: none !important; }

  /* Notification bell: dock into the top-right corner (the toggle used to sit
     there) and shrink it so it doesn't crowd the greeting. */
  #tammy-notif-bell {
    top: 14px !important;
    right: 16px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9px !important;
  }
  #tammy-notif-bell svg { width: 16px !important; height: 16px !important; }
  #tammy-notif-bell > span {
    min-width: 15px !important; height: 15px !important;
    font-size: 9px !important; top: -5px !important; right: -5px !important;
  }
  
  /* Workspace switcher: sit right below the mobile header on the right */
  .tammy-ws-switcher {
    top: calc(76px + env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
  }

  /* Hero orb caption "breathing in." — quiet, small, sits clear of the orb. */
  .today-orb-card .serif { font-size: 15px !important; letter-spacing: -0.01em !important; }

  /* Keep "Where you've been" and "Still open" compact: cap their height and let
     each list scroll internally (a real scrollbar) instead of stretching the
     whole page into an endless column. */
  .today-sessions-list,
  .today-open-list {
    max-height: 420px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: none !important;
  }
  .today-open-list { padding-right: 6px !important; }
  /* Make the scrollbar visible on these capped lists (mobile hides it globally). */
  .today-sessions-list::-webkit-scrollbar,
  .today-open-list::-webkit-scrollbar {
    width: 6px !important; height: 6px !important;
  }
  .today-sessions-list::-webkit-scrollbar-thumb,
  .today-open-list::-webkit-scrollbar-thumb {
    background: var(--mauve) !important; border-radius: 6px !important;
  }
  .today-sessions-list::-webkit-scrollbar-track,
  .today-open-list::-webkit-scrollbar-track { background: transparent !important; }
}

@media (max-width: 767px) {
  /* Headline: smaller, fluid — no longer dominates the phone screen. */
  .today-greeting-content h1 {
    font-size: clamp(26px, 7.2vw, 38px) !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
  }
  /* Greeting body + section headings: phone-appropriate scale. */
  .today-greeting-content p   { font-size: 15px !important; }
  .today-bottom-grid h3       { font-size: 19px !important; }
  .today-orb-card .serif      { font-size: 14px !important; }
  /* Push the orb to the right so the "breathing in." caption sits cleanly to its
     left instead of floating on top of the circle on a narrow screen. */
  .today-orb-card { justify-content: flex-end !important; }
  /* Session titles read a touch large on narrow rows. */
  .today-session-row .serif   { font-size: 15.5px !important; }
  /* Tighter caps on phones so neither list runs long. */
  .today-sessions-list,
  .today-open-list { max-height: 340px !important; }
}


@media (max-width: 1023px) {
  /* Shrink composer buttons on mobile/tablet for a more professional UI */
  .chat-input-bar .btn-primary {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 13.5px !important;
    min-width: auto !important;
  }
  .chat-input-bar button[title="Add files or actions"],
  .chat-input-bar button[title="Voice mode"] {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
  }
  .chat-input-bar button[title="Add files or actions"] svg,
  .chat-input-bar button[title="Voice mode"] svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS — mobile + tablet redesign (desktop ≥1024 untouched)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Header: hero block on top, actions on their own full-width row
     (was a cramped space-between row that pushed the buttons off-screen). */
  .projects-header { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  .projects-header h1 { font-size: clamp(40px, 6vw, 58px) !important; }
  .projects-header p  { max-width: 100% !important; }
  .projects-header-actions { margin-top: 0 !important; width: 100% !important; flex-wrap: wrap !important; flex-shrink: 1 !important; }
}

@media (max-width: 767px) {
  .projects-header h1 { font-size: clamp(30px, 8.5vw, 42px) !important; }
  /* Two equal, comfortably-tappable action buttons side by side. */
  .projects-header-actions { gap: 10px !important; }
  .projects-header-actions > button { flex: 1 1 0 !important; justify-content: center !important; min-width: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }
  /* The circular "gravity map" can't be read on a phone (12 labelled nodes in a
     ring overflow/overlap). Hide it here — the stats + project list carry the
     same information. It stays on tablet & desktop where it has room. */
  .projects-map-section { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   BOOK VIEWER — mobile + tablet (desktop ≥1024 untouched)
   Stack the header so the title/meta get full width instead of
   being crushed by the action buttons (title was wrapping per word).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .book-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 18px !important;
  }
  .book-title-block { min-width: 0 !important; }
  .book-header-actions { width: 100% !important; flex-wrap: wrap !important; gap: 10px !important; }
  .book-header-actions > button,
  .book-header-actions > a { min-height: 42px !important; }
  /* Push the close button to the end of the actions row. */
  .book-header-actions > button:last-child { margin-left: auto !important; }
  .book-body { padding: 20px 22px calc(40px + env(safe-area-inset-bottom, 0px)) !important; }
  /* The floating notification bell overlapped the open book — hide it while
     the fullscreen/near-fullscreen book sheet is up. */
  body:has(.tammy-book-modal) #tammy-notif-bell { display: none !important; }
}

@media (max-width: 767px) {
  .book-title-block .serif { font-size: 30px !important; }   /* title */
}

/* ═══════════════════════════════════════════════════════════
   THE ARC, DNA, BLINDSPOTS — mobile + tablet redesign
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Blindspots WOW Layout */
  .blindspot-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  /* DNA Page WOW Layout */
  .dna-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .dna-archetype-card {
    background: linear-gradient(160deg, rgba(148,125,237,0.15) 0%, rgba(148,125,237,0.02) 100%) !important;
    border: 1px solid rgba(148,125,237,0.3) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .dna-strand, .dna-inspector-list {
    background: linear-gradient(160deg, var(--surface) 0%, rgba(255,255,255,0.01) 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
  }
  .dna-inspector-card {
    box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
  }
  .screen-wrap h1 span {
    text-shadow: 0 0 24px rgba(148,125,237,0.4) !important;
  }

  /* Reset the desktop 120px rail offset (its inline margin used px-0s that the
     generic reset selector didn't match, so the page was pushed right). */
  .arc-root { margin: 0 !important; max-width: 100% !important; padding: 0 0 100px !important; }
  .arc-inner { padding: 48px 32px 0 92px !important; }   /* left clears the tablet rail */
  .arc-inner h1 { font-size: clamp(38px, 6vw, 52px) !important; line-height: 1.1 !important; }
  .arc-inner > p { max-width: 100% !important; }
  .arc-stats { grid-template-columns: 1fr 1fr !important; }   /* 4 → 2×2, no overflow */
  .arc-stats .serif { font-size: 22px !important; }
  /* Bucket strip above the content clears the rail and aligns with it. */
  .arc-root > div:first-child { padding-left: 92px !important; max-width: 100% !important; }
}

@media (max-width: 767px) {
  /* DNA Mobile Tweaks */
  .dna-archetype-card { padding: 24px !important; }
  .dna-archetype-card .serif { font-size: 28px !important; }
  .dna-inspector-card { padding: 20px !important; }
  .dna-inspector-list { padding: 16px !important; }
  
  .arc-inner { padding: calc(88px + env(safe-area-inset-top, 0px)) 16px 0 16px !important; }
  .arc-inner h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .arc-stats .serif { font-size: 20px !important; }
  .arc-root > div:first-child { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════
   FOUNDER DNA — mobile + tablet redesign (desktop ≥1024 untouched)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* The strand chart + inspector were a fixed 420px + 1fr grid, so the 420px
     column alone overflowed and pushed the inspector off-screen. Stack them. */
  .dna-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* When stacked, the strand card must NOT stick to the top — otherwise it
     stays pinned while the inspector scrolls up over it (they overlap). */
  .dna-strand { position: static !important; top: auto !important; }
}
/* Tablet hero clamp (phones already handled by .screen-wrap h1 at ≤767). */
@media (min-width: 768px) and (max-width: 1023px) {
  .screen-wrap h1 { font-size: clamp(40px, 6vw, 56px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   TAMMY SIGNATURE HEADER — shared mobile + tablet (desktop never shows it)
   Two bounded regions (lockup | tools) so they can never collide.
   ═══════════════════════════════════════════════════════════ */
.tammy-mobile-header { display: none !important; }

@media (max-width: 1023px) {
  .tammy-mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9998;                 /* above content, below full-screen modals */
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0;
    background: var(--nav-bar-bg);                 /* theme-aware (light/purple) */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--nav-bar-border);
    transition: height 260ms cubic-bezier(0.32,0.72,0.24,1), box-shadow 260ms ease;
  }
  .tammy-mobile-header.is-scrolled {
    height: calc(52px + env(safe-area-inset-top, 0px));
    box-shadow: 0 6px 22px rgba(31,28,48,0.12);
  }

  /* ── Signature lockup (left region) ── */
  .tmh-lockup {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0; flex-shrink: 1;              /* yields space; never pushes tools */
    background: none; border: none; padding: 4px; margin: -4px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tmh-word {
    font-family: var(--f-serif);
    font-style: italic; font-weight: 600;
    font-size: 23px; letter-spacing: -0.02em; line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    transition: font-size 260ms cubic-bezier(0.32,0.72,0.24,1);
  }
  .tammy-mobile-header.is-scrolled .tmh-word { font-size: 18px; }

  /* Breathing orb icon (echoes the Home orb) */
  .tmh-orb {
    position: relative; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #C0ACFF 0%, #947DED 55%, #6B5BC8 100%);
    box-shadow: inset 0 -5px 9px rgba(31,28,48,0.22), inset 0 5px 8px rgba(255,255,255,0.30), 0 4px 14px rgba(148,125,237,0.42);
    animation: tmh-breathe 3.6s ease-in-out infinite;
    transition: width 260ms cubic-bezier(0.32,0.72,0.24,1), height 260ms cubic-bezier(0.32,0.72,0.24,1);
  }
  .tammy-mobile-header.is-scrolled .tmh-orb { width: 24px; height: 24px; }
  .tmh-orb-hi {
    position: absolute; top: 16%; left: 22%; width: 30%; height: 22%;
    background: rgba(255,255,255,0.6); border-radius: 50%; filter: blur(1px);
  }
  @keyframes tmh-breathe {
    0%, 100% { transform: scale(1);    box-shadow: inset 0 -5px 9px rgba(31,28,48,0.22), inset 0 5px 8px rgba(255,255,255,0.30), 0 4px 14px rgba(148,125,237,0.38); }
    50%      { transform: scale(1.06); box-shadow: inset 0 -5px 9px rgba(31,28,48,0.22), inset 0 5px 8px rgba(255,255,255,0.30), 0 6px 20px rgba(148,125,237,0.62); }
  }

  /* ── Utility cluster (right region) ── */
  .tmh-tools { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .tmh-tool {
    width: 38px; height: 38px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: var(--nav-icon-inactive);
    position: relative;
    transition: background 160ms ease, color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tmh-tool:active { background: var(--surface-2); }
  .tmh-bell { color: var(--ink-2); }
  .tmh-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ED5050, #C0335A);
    color: #fff; font-size: 9px; font-weight: 800; font-family: var(--f-mono);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--nav-bar-bg);
    box-sizing: content-box;
  }
  .tmh-avatar {
    width: 34px; height: 34px; border-radius: 50%; margin-left: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ink) 0%, var(--amber) 100%);
    color: #fff; font-size: 13px; font-weight: 600; font-family: var(--f-sans);
    border: 1.5px solid var(--nav-bar-border); cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* The old floating chrome is now owned by this header — hide the duplicates. */
  .app-theme-toggle { display: none !important; }
  #tammy-notif-bell { display: none !important; }
}

/* Tablet tier — a larger, more spacious signature (same height envelope so no
   page top-padding breaks; just a bigger, more confident lockup). */
@media (min-width: 768px) and (max-width: 1023px) {
  .tammy-mobile-header { padding-left: 28px; padding-right: 28px; }
  .tmh-word { font-size: 27px; }
  .tammy-mobile-header.is-scrolled .tmh-word { font-size: 21px; }
  .tmh-orb { width: 34px; height: 34px; }
  .tammy-mobile-header.is-scrolled .tmh-orb { width: 27px; height: 27px; }
  .tmh-tool { width: 42px; height: 42px; }
  .tmh-tool svg { width: 19px; height: 19px; }
  .tmh-avatar { width: 38px; height: 38px; font-size: 14px; }
}

/* Reduced motion: the orb holds still. */
@media (prefers-reduced-motion: reduce) {
  .tmh-orb { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   CALIBRATION — mobile + tablet redesign (desktop ≥1024 untouched)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Header: hero on top, full-width "Log a prediction" below (was a cramped
     space-between row). */
  .calib-header { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; }
  .calib-log-btn { margin-top: 0 !important; width: 100% !important; justify-content: center !important; }

  /* Hero card: the gauge (260px) + "Tammy's read" (1fr) overflowed off-screen.
     Stack the gauge above the read, centered. */
  .calib-hero-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 20px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .calib-hero-card > div:last-child { width: 100%; }
  /* Center the Right / Partial / Wrong score lines under the read. */
  .calib-hero-card > div:last-child > div:last-child { justify-content: center !important; gap: 24px !important; }

  /* Prediction rows: the 4-column grid (date · text · conf · verdict) doesn't
     fit — stack it so the claim leads and the meta sits below. */
  .calib-pred-row {
    grid-template-columns: 1fr auto !important;
    gap: 10px 12px !important;
    align-items: start !important;
  }
  .calib-pred-row > :nth-child(1) { grid-column: 1; grid-row: 2; align-self: center; }  /* date */
  .calib-pred-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }                   /* claim text */
  .calib-pred-row > :nth-child(3) { grid-column: 2; grid-row: 2; text-align: right !important; } /* conf */
  .calib-pred-row > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }                   /* verdict badge */
  .calib-pred-actual { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════
   MIRROR MOMENT — mobile + tablet (desktop ≥1024 untouched)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Excerpt (1fr) + "Generated from" (320px) crushed the excerpt into a
     one-word-per-line column. Stack them full-width — excerpt reads, then the
     "generated from" list sits below it. */
  .mirror-body { grid-template-columns: 1fr !important; gap: 30px !important; }
}
@media (max-width: 767px) {
  /* Excerpt is the reflection read — size it comfortably for a phone. */
  .mirror-body .serif { font-size: 19px !important; line-height: 1.55 !important; margin-bottom: 18px !important; }
}

/* ── NEW MEMORY STYLES (Filter & Row) ────────────────────── */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.memory-filter-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  align-items: center;
}
.memory-filter-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 6px;
  flex-shrink: 0;
}
.memory-filter-btn {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--f-sans);
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--mauve-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 160ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.memory-filter-btn.active {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.memory-filter-count {
  font-size: 11px;
  font-family: var(--f-mono);
  opacity: 0.5;
  letter-spacing: 0.05em;
}
.memory-filter-btn.active .memory-filter-count {
  opacity: 0.7;
}

.memory-row {
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  grid-template-areas: "cat text time";
  align-items: flex-start;
  gap: 24px;
  padding: 22px 8px;
  background: transparent;
  border-left: 2px solid transparent;
  transition: all 200ms ease;
}
.memory-row-meta {
  grid-area: cat;
  padding-top: 6px;
}
.memory-row-content {
  grid-area: text;
}
.memory-row-time {
  grid-area: time;
}

@media (max-width: 1023px) {
  .memory-row {
    grid-template-columns: 100px 1fr 90px !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .memory-filter-wrap {
    overflow-x: auto;
    padding-bottom: 12px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .memory-filter-label {
    display: none !important;
  }
  .memory-filter-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
  .memory-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "cat time"
      "text text" !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  .memory-row-meta {
    padding-top: 0 !important;
  }
  .memory-row-text {
    font-size: 18px !important;
  }
  .memory-row-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-top: 14px !important;
  }
}

/* ── SETTINGS FIXES (Grid Blowout & Typography) ──────────── */
.settings-hero-h1 {
  font-size: 64px;
}
@media (max-width: 767px) {
  .settings-hero-h1 {
    font-size: 44px !important;
  }
  .settings-grid > *,
  .profile-grid > * {
    min-width: 0;
  }
}

.toggle-switch {
  min-height: 24px !important;
  min-width: 42px !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .settings-profile-name-row {
    justify-content: center !important;
    align-items: center !important;
  }
}

.settings-edit-btn {
  min-height: 26px !important;
  min-width: 48px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(178, 157, 217, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
}

@media (max-width: 1023px) {
  /* ── LOCKED STATE FIXES (Mobile/Tablet) ── */
  .locked-shell-main {
    margin-left: 0 !important;
    padding: calc(80px + env(safe-area-inset-top)) 24px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  .locked-shell-h1 {
    font-size: 44px !important;
  }
  .locked-shell-p {
    font-size: 16px !important;
    margin-bottom: 40px !important;
  }
  .locked-shell-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .locked-shell-hero-wrap svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .locked-shell-voice {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px !important;
  }
  .locked-shell-voice > div:last-child {
    width: 100% !important;
  }
  .locked-shell-voice button {
    width: 100% !important;
  }
}

/* ── NOTIFICATIONS Screen ────────────────────────────────── */
.notifications-page {
  margin-left: 96px;
  min-height: 100vh;
  padding: 32px 48px 80px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .notifications-page {
    padding-right: 130px; /* clear fixed theme toggle */
  }
}
.notifications-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.notifications-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 8px;
}
.notifications-title {
  font-size: clamp(36px, 4vw, 52px) !important;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.notifications-subtitle {
  font-size: 15px;
  color: var(--ink-3);
  margin: 0;
  max-width: 520px;
  line-height: 1.55;
  font-family: var(--f-sans);
}
.notifications-mark-read {
  flex-shrink: 0;
  background: rgba(148,125,237,0.10);
  border: 1px solid rgba(148,125,237,0.25);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-family: var(--f-sans);
  font-weight: 500;
  color: var(--iris);
  cursor: pointer;
  transition: all 150ms ease;
}
.notifications-mark-read:hover {
  background: rgba(148,125,237,0.20);
}
.notifications-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mauve-soft);
  border-bottom: 1px solid var(--mauve-soft);
  margin-bottom: 32px;
}
.notifications-stat {
  padding: 22px 0 22px 24px;
  border-right: 1px solid var(--mauve-soft);
}
.notifications-stat.is-accent .notifications-stat-num {
  color: var(--amber);
}
.notifications-stat-num {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.notifications-stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
.notifications-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
.notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.notifications-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.notifications-tab {
  padding: 7px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-family: var(--f-sans);
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.notifications-tab.is-active {
  border-color: var(--iris);
  background: rgba(148,125,237,0.12);
  color: var(--iris);
}
.notifications-loading,
.notifications-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-3);
}
.notifications-empty-orb {
  font-size: 48px;
  margin-bottom: 16px;
}
.notifications-empty-title {
  font-size: 22px;
  font-style: italic;
  margin-bottom: 10px;
  color: var(--ink);
}
.notifications-empty-body {
  font-size: 14px;
  max-width: 360px;
  margin: 0 auto 20px;
  line-height: 1.55;
  font-family: var(--f-sans);
}
.notifications-group {
  margin-bottom: 24px;
}
.notifications-group-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0 10px;
}
.notifications-group-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.notifications-item-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
}
.notifications-item-btn.is-unread {
  background: rgba(148,125,237,0.04);
}
.notifications-item-btn:hover {
  background: rgba(148,125,237,0.08);
}
.notifications-item-icon {
  font-size: 20px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notifications-item-body {
  flex: 1;
  min-width: 0;
}
.notifications-item-content {
  flex: 1;
  min-width: 0;
}
.notifications-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.notifications-item-title {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.notifications-item-btn.is-read .notifications-item-title {
  font-weight: 400;
}
.notifications-priority-badge {
  font-size: 10px;
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(237, 125, 151, 0.14);
  color: #ED7D97;
}
.notifications-item-text {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-bottom: 6px;
}
.notifications-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
}
.notifications-type-chip {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
}
.notifications-action-link {
  color: var(--iris);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
}
.notifications-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow);
  flex-shrink: 0;
  margin-top: 8px;
}
.notifications-load-more {
  text-align: center;
  padding-top: 8px;
}
.notifications-load-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 24px;
  font-size: 13px;
  font-family: var(--f-sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 150ms ease;
}
.notifications-load-btn:hover {
  border-color: var(--iris);
  color: var(--iris);
}
.notifications-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
.notifications-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--mauve-soft);
  border-radius: 18px;
  padding: 20px 22px;
}
.notifications-sidebar-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.notifications-glance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 500;
  margin-bottom: 10px;
}
.notifications-glance-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.4;
}
.notifications-sidebar-note {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
  font-family: var(--f-sans);
}
.notifications-type-list,
.notifications-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notifications-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-family: var(--f-sans);
}
.notifications-type-emoji {
  font-size: 16px;
  width: 28px;
  text-align: center;
}
.notifications-type-name {
  flex: 1;
  color: var(--ink-2);
}
.notifications-type-count {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.notifications-quick-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--mauve-soft);
  background: var(--canvas-tint);
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}
.notifications-quick-btn:hover {
  border-color: var(--iris);
  background: rgba(148,125,237,0.06);
}
.notifications-quick-emoji {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
.notifications-quick-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--f-sans);
}
.notifications-quick-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--f-sans);
}
.notifications-watch-card {
  background: linear-gradient(145deg, rgba(148,125,237,0.08) 0%, var(--surface) 100%);
}
.notifications-watch-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  font-family: var(--f-sans);
}
.notifications-watch-list li {
  margin-bottom: 8px;
}
.notifications-watch-list li:last-child {
  margin-bottom: 0;
}

/* Legacy class aliases */
.notifications-layout {
  margin: 0 auto;
  padding: 60px 48px 100px;
  max-width: 1000px;
}
.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

@media (max-width: 1023px) {
  .notifications-page {
    margin-left: 0 !important;
    padding: calc(env(safe-area-inset-top) + 80px) 16px 120px 16px !important;
  }
  .notifications-hero {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 20px;
  }
  .notifications-mark-read {
    align-self: flex-start;
    border-radius: 99px;
    padding: 8px 16px;
    flex-shrink: 0;
  }
  .notifications-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .notifications-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .notifications-stat:nth-child(2) {
    border-right: none;
  }
  .notifications-stat:nth-child(1),
  .notifications-stat:nth-child(2) {
    border-bottom: 1px solid var(--mauve-soft);
  }
  .notifications-body {
    grid-template-columns: 1fr;
  }
  .notifications-sidebar {
    position: static;
    order: -1;
  }
  .notifications-sidebar-card:last-child {
    display: none;
  }
  .notifications-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .notifications-tabs::-webkit-scrollbar {
    display: none;
  }
  .notifications-group-card {
    background: transparent;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .notifications-item-btn {
    padding: 16px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(31, 28, 48, 0.04) !important;
  }
  .notifications-item-btn.is-unread {
    background: linear-gradient(145deg, rgba(148,125,237,0.06) 0%, rgba(148,125,237,0.01) 100%) !important;
    border: 1px solid rgba(148, 125, 237, 0.25) !important;
  }
  .notifications-layout {
    margin-left: 0 !important;
    padding: calc(env(safe-area-inset-top) + 80px) 16px 120px 16px !important;
    max-width: 100% !important;
  }
  .notifications-header {
    margin-bottom: 24px !important;
  }
  .notifications-title {
    font-size: 30px !important;
  }
}

/* ── GUIDED TOUR ───────────────────────────────────────────────
   The tour is overlay-only: it never changes page structure, so nothing here
   touches the desktop frame. These rules only place the launch nudge and make
   sure the spotlight sits above every other fixed layer in the app. */

/* The wrapper is a grouping element only — its fixed children must sit in the
   root stacking context so their z-index beats the nav (9000) and drawer (8900). */
.tammy-tour { display: contents; }

/* On phones the bottom nav owns the lower edge — lift the nudge clear of it. */
@media (max-width: 767px) {
  .tammy-tour-nudge {
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-nav-h) + 14px) !important;
  }
}

/* ── DECISIONS Screen ────────────────────────────────────── */
.decisions-title-huge {
  font-size: 64px;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.decisions-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mauve-soft);
  border-bottom: 1px solid var(--mauve-soft);
  margin-bottom: 56px;
}
.stat-card {
  padding: 28px 0;
  padding-left: 28px;
}
.stat-card-num {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-card-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.decisions-spotlight-card {
  padding: 44px 48px;
  background: var(--surface);
  border: 1px solid var(--amber);
  box-shadow: 0 0 0 6px var(--amber-soft), 0 30px 80px rgba(43,20,86,0.10);
  border-radius: 24px;
  margin-bottom: 56px;
}
.decisions-spotlight-title {
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  line-height: 1.15;
}

.decisions-filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  align-items: center;
}
.decisions-filter-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--mauve-soft);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 150ms ease;
}
.decisions-filter-btn.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.decisions-empty-card {
  padding: 60px;
  text-align: center;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--mauve-soft);
  margin-bottom: 56px;
}

.decision-row-container {
  padding: 22px 4px;
  cursor: pointer;
  transition: all 200ms ease;
}
.decision-row-grid {
  display: grid;
  grid-template-columns: 24px 1fr 140px;
  gap: 20px;
  align-items: baseline;
}
.decision-row-title {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.decision-row-meta {
  text-align: right;
}

.made-row-grid {
  padding: 20px 4px;
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: 24px;
  align-items: baseline;
}
.made-row-date {
  font-size: 11px;
  letter-spacing: 0.06em;
}
.made-row-title {
  font-size: 18px;
  line-height: 1.4;
}
.made-row-outcome {
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .decisions-title-huge {
    font-size: 44px !important;
  }
  .decisions-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 0 !important;
    padding: 32px 0 !important;
  }
  .stat-card {
    padding: 0 16px !important;
    border-right: none !important;
  }
  .stat-card:nth-child(odd) {
    border-right: 1px solid var(--mauve-soft) !important;
  }
  .stat-card-num {
    font-size: 40px !important;
  }
  .decisions-spotlight-card {
    padding: 28px 24px !important;
    box-shadow: 0 0 0 4px var(--amber-soft), 0 20px 40px rgba(43,20,86,0.06) !important;
    border-radius: 20px !important;
  }
  .decisions-spotlight-title {
    font-size: 30px !important;
  }
  
  .decisions-filter-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .decisions-filter-btn {
    flex: 1;
    text-align: center;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .decisions-empty-card {
    padding: 40px 20px !important;
  }
  
  .decision-row-container {
    padding: 20px 16px !important;
    background: var(--surface) !important;
    border: 1px solid var(--mauve-soft) !important;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }
  .decision-row-grid {
    grid-template-columns: 20px 1fr !important;
    gap: 8px 12px !important;
  }
  .decision-row-title {
    font-size: 20px !important;
  }
  .decision-row-meta {
    grid-column: 2;
    text-align: left !important;
    margin-top: 4px;
  }

  .made-row-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    background: var(--surface);
    border: 1px solid var(--mauve-soft) !important;
    border-radius: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    gap: 8px !important;
  }
  .made-row-date {
    font-size: 10px !important;
    color: var(--amber) !important;
    font-weight: 600;
  }
  .made-row-title {
    font-size: 18px !important;
  }
  .made-row-outcome {
    font-size: 14px !important;
    background: var(--surface-2);
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 4px;
    font-style: normal !important;
  }
}

/* Onboarding Responsive Tweaks */
@media (max-width: 520px) {
  .onboarding-title {
    font-size: 32px !important;
  }
  .onboarding-fork {
    flex-direction: column !important;
  }
  .onboarding-fork-card {
    width: 100% !important;
  }
  .onboarding-input-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .onboarding-input-row input {
    width: 100% !important;
    box-sizing: border-box;
  }
  .onboarding-input-row button {
    width: 100% !important;
  }
}