/* DearNext — App Styles (v1.5)
   - Adds purple-tinted hover lift to list/board cards (parity with marketing)
   - Preserves all existing layout, spacing, and components
*/

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal bounce on mobile */
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:root{
  --ink:#0B1220;
  --ink-soft:#6E7A91;

  --bg:#FFFFFF;
  --surface:#FFFFFF;

  /* Brand core (slightly warmer gradient) */
  --brand:#7C3AED;
  --brand-500:#8B5CF6;
  --brand-rose:#C084FC; /* subtle warmth */
  --grad-btn: linear-gradient(135deg, var(--brand-500), var(--brand));
  --grad-header: linear-gradient(180deg, rgba(139,92,246,0.10), rgba(192,132,252,0.06) 40%, rgba(255,255,255,0));
  --grad-footer: linear-gradient(180deg, rgba(139,92,246,0.10), rgba(192,132,252,0.00));

  --accent: var(--brand);
  --accent-ink:#FFFFFF;
  --accent-soft: rgba(124,58,237,.12);

  --maxw:1280px;
  --radius:16px;
  --radius-sm:12px;
  --shadow-card:0 8px 22px rgba(2,6,23,.08);
  --shadow-soft:0 10px 28px rgba(2,6,23,.18);

  /* tighter type scale */
  --type-1: clamp(14px, 1.00vw, 16px);
  --type-2: clamp(15px, 1.15vw, 17px);
  --type-3: clamp(18px, 1.45vw, 21px);

  --line: rgba(2,6,23,.08);
  --line-strong: rgba(2,6,23,.12);
  --line-dashed: rgba(2,6,23,.18);

  --success:#16a34a;
  --danger:#dc2626;
}

body.theme-warm{
  background: var(--bg);
  color: var(--ink);
  font: var(--type-1)/1.55 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  display:flex; min-height:100vh; flex-direction:column;
}

/* When onboarding runs, keep the page from scrolling behind it */
body.onboarding-open,
body.wizard-open,
body.mobile-menu-open{
  overflow: hidden;
}

.muted { color: var(--ink-soft); }
[hidden] { display: none !important; }

.soft-press { transform: translateY(0); transition: transform .08s ease; }
.soft-press:active { transform: translateY(1px); }

main.layout { opacity: 0; }
.reveal-in{ opacity:0; transform:translateY(6px); transition:opacity .45s cubic-bezier(.25,1,.5,1), transform .45s cubic-bezier(.25,1,.5,1); }
.reveal-in.is-visible{ opacity:1; transform:none; }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.75);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header::before{
  content:""; position:absolute; inset:0; pointer-events:none; background: var(--grad-header);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, #8B5CF6, #7C3AED 40%, transparent 75%);
  opacity:.35; pointer-events:none;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 24px; max-width: var(--maxw); margin:0 auto;
}
.brand-wrap{ display:flex; align-items:baseline; gap:10px; }
.brand{ text-decoration:none; color:var(--ink); font-weight:900; letter-spacing:.2px; font-size:1.25rem; }
.brand-word{ font-weight:900; }
.brand-dot{ color: var(--brand); font-weight:900; margin-left:1px; }
.tagline{ color:var(--ink-soft); font-size:.95rem; }

.menu{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}

/* Mobile hamburger — hidden by default, shown only in mobile media query */
.mobile-menu-toggle{
  display:none;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
}

/* Temporarily hide header Dear Next AI button (AI lives in the wizard for now) */
#btn-ai{
  display:none;
}

.icon-btn{
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius: var(--radius-sm); padding:6px 10px; cursor:pointer;
}
.menu-popover{
  position:absolute; top:100%; right:0; margin-top:8px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); border-radius:var(--radius-sm);
  padding:8px; min-width:220px; display:none;
}
.menu-popover[aria-hidden="false"]{ display:block; }
.menu-popover a,
.menu-popover .linklike{
  display:block; padding:8px 10px; text-decoration:none; color:var(--ink); border-radius:10px; text-align:left;
}
.menu-popover a:hover,
.menu-popover .linklike:hover{ background: rgba(124,58,237,.06); cursor:pointer; }

/* ---------- MOBILE MENU OVERLAY (NO EXTRA WRAPPER NEEDED) ---------- */
/* ---------- MOBILE DRAWER (replaces old mobile menu sheet) ---------- */
#mobile-drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  z-index: 4500;                 /* above header */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

#mobile-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(86vw, 340px);
  background: #fff;
  z-index: 4600;                 /* above backdrop */
  transform: translateX(-102%);
  transition: transform 180ms ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  border-right: 1px solid var(--line);
}

/* open state */
body.dn-drawer-open #mobile-drawer-backdrop{
  opacity: 1;
  pointer-events: auto;
}
body.dn-drawer-open #mobile-drawer{
  transform: translateX(0);
}

/* lock page scroll behind drawer */
body.dn-drawer-open{
  overflow: hidden;
  touch-action: none;
}

/* drawer internals */
.dn-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom:1px solid var(--line);
}
.dn-drawer-title{
  font-weight: 700;
}
.dn-drawer-close{
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  background:#fff;
  padding:6px 10px;
  cursor:pointer;
}

.dn-drawer-body{
  padding: 10px 12px 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.dn-drawer-section-label{
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 10px 6px 6px;
}

.dn-drawer-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.dn-drawer-item{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  border: 1px solid var(--line);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  text-decoration:none;
  color: inherit;
}

.dn-drawer-divider{
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}

/* ---------- NAV TABS ---------- */
.nav-tabs{
  max-width: var(--maxw); margin:12px auto 4px; padding:0 24px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.nav-tabs .chip{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; cursor:pointer; font-size:var(--type-2); font-weight:700;
  transition: background .15s ease, border-color .15s ease;
}
.nav-tabs .chip[aria-selected="true"]{
  border-color: rgba(124,58,237,.35);
  background: var(--accent-soft);
}

/* ---------- SUBHEAD / SORT ROW ---------- */
.top-row{
  max-width: var(--maxw); margin:2px auto 10px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.subhead{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:var(--type-3); letter-spacing:.2px; }

/* Section suggestions trigger */
.section-suggest-btn{
  border:none;
  background:none;
  padding:4px 8px;
  font-size:0.85rem;
  font-weight:500;
  color:#7C3AED;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease, transform .08s ease, box-shadow .15s ease, color .15s ease;
}
.section-suggest-btn::before{
  content:'✨';
  font-size:0.9rem;
}
.section-suggest-btn:hover{
  background:rgba(124,58,237,0.06);
  box-shadow:0 0 0 1px rgba(124,58,237,0.18);
}
.section-suggest-btn:active{
  transform:translateY(1px);
}

.chip-row{ display:flex; align-items:center; gap:8px; }
/* Widened search bar after removing mode chip */#search-input {
  min-width: 260px;
  flex: 1;
}
.chip{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:var(--type-2); font-weight:700;
}
#mode-indicator{ opacity:.75; }

/* ---------- MAIN LAYOUT ---------- */
.layout.content{ 
  max-width: var(--maxw); margin:0 auto; padding:16px 24px 96px;
  flex:1;
}

/* ---------- PERSISTENT QUICK ADD ---------- */
.inline-capture{
  position: relative;
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap:10px;
  width:100%;
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); padding:12px 14px; margin-bottom:12px;
  box-shadow: var(--shadow-card);
}
.inline-capture .prompt-chips{
  width:100%;
  display:none; /* Suggestion chips retired in favor of Section Suggestions */
}
.inline-capture input{
  flex:1; min-width: 240px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; font-size:.98rem;
  transition: border-color .15s ease, box-shadow .15s ease; width:100%;
}
.inline-capture input:focus{
  outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--accent-soft);
}
.inline-capture .primary.small{ padding:9px 14px; }

.prompt-chips{
  width:100%;
  display:none; /* Hide legacy suggestion chips everywhere */
}
.prompt-chips .chip{
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}

.sticky-quick-add{ position: sticky; top: 8px; z-index: 40; box-shadow: var(--shadow-soft); }

/* ---------- EMPTY STATE ---------- */
.empty-state{
  display:flex; justify-content:center; align-items:center;
  min-height:38vh; text-align:center; color:var(--ink-soft);
}
.empty-inner{
  background:#fff; border:1px dashed var(--line-dashed); padding:20px 22px; border-radius:var(--radius);
  max-width:560px; width:100%; box-shadow: var(--shadow-card);
}
.empty-inner h3{ margin:0 0 6px; color:var(--ink); }
.empty-inner p{ margin:0 0 10px; }
.empty-inner .prompt-chips{ justify-content:center; margin-top:8px; }
.empty-inner .large{ padding:11px 18px; margin-top:10px; }

/* ---------- LIST VIEW ---------- */
.items{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.note-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:12px; box-shadow: var(--shadow-card);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.note-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(124,58,237,.18);   /* purple-tinted lift */
  border-color: rgba(124,58,237,.25);
}
.note-card .card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.note-card .title{ font-weight:800; letter-spacing:.2px; }
.note-card .notes{ margin-top:8px; color:var(--ink); }

.mini-actions{ display:flex; align-items:center; gap:6px; opacity:0; transition: opacity .12s ease; }
.note-card:hover .mini-actions,
.board-card:hover .mini-actions{ opacity:1; }
.mini-actions button{
  border:1px solid var(--line); background:#fff; border-radius:10px; padding:4px 8px; cursor:pointer;
}

/* ---------- BOARD ---------- */
.board{ display:grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap:12px; }
.board-col{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  min-height:120px; display:flex; flex-direction:column; box-shadow: var(--shadow-card);
  transition: box-shadow .12s ease, transform .12s ease;
}
.board-head{
  padding:10px 12px; border-bottom:1px solid var(--line); font-weight:900; color:#1F2660; display:flex; align-items:center; gap:6px;
}
.board-drop{
  padding:10px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Persistent add button/card at top of each column */
.board-add{
  padding:8px 12px;
  border-radius:999px;
  border:1px dashed var(--line-dashed);
  background:rgba(124, 58, 237, 0.03); /* soft purple tint */
  color:#4c1d95;
  font-size:0.875rem;
  text-align:center;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}

.board-add:hover{
  background:rgba(124, 58, 237, 0.08);
  border-color:rgba(124, 58, 237, 0.55);
  transform:translateY(-1px);
}

.board-add:active{
  transform:translateY(0);
}

.board-drop.drag-over{
  outline:2px solid var(--brand);
  outline-offset:-2px;
}
.board-col.drag-over .board-head{ background: var(--accent-soft); }

.board-card{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow: var(--shadow-card);
  cursor:grab; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.board-card:active{ cursor:grabbing; }
.board-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(124,58,237,.18);   /* purple-tinted lift */
  border-color: rgba(124,58,237,.25);
}
.board-card .title-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.board-card .title{ font-weight:800; }
.board-card .notes{ margin-top:6px; color:var(--ink); }

/* ---------- BADGES (plan cues) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.badge-premium {
  background: rgba(124,58,237,0.12);
  color: #4c1d95;
  border: 1px solid rgba(124,58,237,0.25);
  margin-left: 6px;
}

/* ---------- BUTTONS ---------- */
.primary{
  border:none; border-radius:999px;
  background: var(--grad-btn);
  color: var(--accent-ink);
  padding:10px 18px; font-weight:700; font-size:.95rem; cursor:pointer;
  transition: transform .05s ease, filter .15s ease;
}
.primary:hover{ filter: brightness(.98); }
.primary:active{ transform: translateY(1px); }

.secondary{
  background:#fff; color: var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:700; font-size:.95rem; cursor:pointer;
}
.secondary:hover{ background: rgba(2,6,23,.03); }

/* ---------- LOGIN: Subscription required buttons ---------- */
#btn-start-sub-annual,
#btn-start-sub-monthly{
  flex: 1;
  min-width: 220px;
  text-align: center;
}

/* Annual button uses 2-line label */
#btn-start-sub-annual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px 18px; /* a touch taller */
}

#btn-start-sub-annual .btn-title{
  font-weight:800;
  font-size:1rem;
  line-height:1.1;
}

#btn-start-sub-annual .btn-sub{
  font-weight:600;
  font-size:.85rem;
  opacity:.9;
}

/* Monthly stays a normal secondary button */
#btn-start-sub-monthly.secondary{
  padding:11px 18px;
}

.ghost{
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:9px 16px;
  font-weight:500;
  font-size:.9rem;
  cursor:pointer;
}
.ghost:hover{
  background:rgba(15,23,42,0.02);
}

.fab{
  position: fixed; right:18px; bottom:18px; z-index: 2000;
  width:56px; height:56px; border-radius:50%;
  border:none; background: var(--grad-btn); color:#fff;
  font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); cursor: pointer;
}

/* ---------- MODAL / WIZARD / ACK ---------- */
.modal{ position: fixed; inset:0; background: rgba(0,0,0,.18); display:none; z-index:2500; }
.modal.show{ display:block; }
.modal-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  max-width:720px;
  margin:4vh auto;
  padding:0;
  box-shadow: var(--shadow-soft);
  max-height:92vh;
  overflow:auto;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); }
.modal-body{ padding:14px; }

/* Compact app-style header used on Life Stories page */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.app-header-inner {
  max-width: var(--maxw, 1120px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Make the brand feel clickable but not loud */
.app-header-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
}

.app-header-brand .brand-word {
  font-size: 1rem;
}

.app-header-brand .brand-dot {
  font-size: 1.4rem;
  line-height: 1;
}

/* Small pill label for the section name */
/* Life Stories label next to brand – simple text, no pill */
.life-header-pill {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280; /* soft neutral so Dear Next still leads */
}

/* Dear Next Life Stories: ensure modal content can scroll and footer is reachable */
#life-modal .modal-box{
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;            /* scrolling handled by inner body */
}

#life-modal .modal-body,
#life-modal .onboarding-body{
  flex: 1 1 auto;
  overflow-y: auto;            /* scroll the content area */
}

/* Onboarding: mobile-safe scrolling + keep action buttons reachable */
#onboarding-modal .modal-box,
#first-choice-modal .modal-box,
#start-choice-modal .modal-box{
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  overflow: hidden;            /* scrolling handled by inner body */
  margin: 12px auto;
}

#onboarding-modal .onboarding-body,
#first-choice-modal .modal-body,
#start-choice-modal .modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep the onboarding action row visible on mobile when content scrolls */
#onboarding-modal .onboarding-actions{
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-bottom: 8px;
}

/* ===== LS6 – Life Stories desktop tightening ===== */

@media (min-width: 960px) {
  /* Two-column layout: sidebar + editor */
  .life-layout {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: flex-start;
    gap: 20px;
  }

  /* Sidebar card gets a max height and internal scroll for the list */
  .life-list {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 125px); /* tweak this number if needed */
  }

  /* Story list scrolls inside the card */
  .life-list-items {
    margin-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Keep “Guided interview” and “Book preview” anchored below the list */
  .life-list-interview,
  .life-list-book {
    flex: 0 0 auto;
    margin-top: 12px;
  }
}

/* ----- Dear Next AI modal polish ----- */

.ai-modal-box .modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-intro {
  margin-top: 0;
  margin-bottom: 4px;
}

/* AI Mode buttons */
.ai-mode-container{
  margin-top: 8px;
  margin-bottom: 4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ai-mode-intro{
  font-size:0.85rem;
  color:var(--ink-soft);
}

.ai-modes-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ai-mode-btn{
  border-radius:999px;
  border:1px solid var(--line);
  padding:6px 10px;
  font-size:0.85rem;
  background:#fff;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .08s ease;
}

.ai-mode-btn:hover{
  background:rgba(124,58,237,0.04);
  border-color:rgba(124,58,237,0.35);
}

.ai-mode-btn.active{
  background:var(--accent-soft);
  border-color:rgba(124,58,237,0.8);
}

/* AI loader */
.ai-loader{
  margin-top:8px;
  margin-bottom:2px;
  display:none;
  align-items:center;
  gap:6px;
}

.ai-loader.is-active{
  display:inline-flex;
}

.ai-loader .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#7C3AED;
  animation:ai-bounce 1s infinite ease-in-out;
}

.ai-loader .dot:nth-child(2){
  animation-delay:0.15s;
}
.ai-loader .dot:nth-child(3){
  animation-delay:0.3s;
}

@keyframes ai-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.4;}
  40%{ transform:translateY(-3px); opacity:1;}
}

.ai-context-preview{
  font-size:0.8rem;
  margin:0 0 6px 0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ----- Life Stories inline AI helper (Phase 7) ----- */

.life-ai{
  margin-top: 6px;
  margin-bottom: 4px;
}

.life-ai-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--ink-soft);
}

.life-ai-label{
  font-weight:500;
}

/* Hide the inline AI bar when viewing the Draft Book */
.life-book-mode .life-ai{
  display:none;
}

/* ----- Life Stories layout (Phase 3) ----- */

/* Life Stories layout – mobile-first */
.life-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.life-list{
  border-radius:14px;
  border:1px solid var(--line);
  padding:10px;
  background:#fff;
}

.life-list-head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:4px;
}

.life-list-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.life-list-title{
  font-weight:700;
  font-size:0.95rem;
}

.life-list-hint{
  font-size:0.8rem;
  color:var(--ink-soft);
  margin:0;
}

.life-list-items{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:220px;
  overflow:auto;
}

.life-list-empty{
  font-size:0.82rem;
  margin:2px 0;
}

.life-list-item{
  width:100%;
  text-align:left;
  border-radius:10px;
  border:1px solid transparent;
  padding:6px 8px;
  cursor:pointer;
  background:transparent;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.85rem;
}

.life-list-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.life-list-delete {
  flex: 0 0 auto;
  align-self: center;
  padding: 0 0.5rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.life-list-delete:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.life-list-item:hover{
  background:rgba(124,58,237,0.03);
  border-color:rgba(148,163,184,0.6);
}

.life-list-item.is-active{
  background:var(--accent-soft);
  border-color:rgba(124,58,237,0.7);
}

.life-list-item-title{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.life-list-item-meta{
  font-size:0.75rem;
  color:var(--ink-soft);
}

.life-meta{
  font-size:0.8rem;
  color:var(--ink-soft);
  margin:0 0 4px;
}

/* ----- Life Stories Guided Interview (Phase 4) ----- */

.life-guided-toprow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  margin-bottom:8px;
}

.life-guided-category select{
  min-width:200px;
}

@media (max-width:600px){
  .life-guided-toprow{
    flex-direction:column;
    align-items:flex-start;
  }
}

.life-guided-counter{
  font-size:0.8rem;
  color:var(--ink-soft);
}

.life-guided-prompt{
  font-size:1rem;
  font-weight:500;
  margin:4px 0 8px;
}

.life-guided-answer textarea{
  width:100%;
}

.life-guided-actions{
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}

.life-guided-footer{
  justify-content:flex-end;
  margin-top:4px;
}

.life-guided-link{
  margin-top:4px;
  padding:0;
  border:none;
  background:none;
  font-size:0.8rem;
  color:var(--accent);
  cursor:pointer;
  text-decoration:underline;
  text-align:left;
}
.life-guided-link:hover{
  text-decoration:none;
}

/* Mobile layout tweaks for Life Stories (non-layout pieces) */
@media (max-width: 768px) {
  .life-list {
    flex: 0 0 auto;
    width: 100%;
  }

  .life-editor {
    width: 100%;
  }

  .app-header-inner {
    padding-inline: 16px;
  }

  .app-header-right {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Desktop layout – sidebar + editor side by side */
@media (min-width: 768px) {
  .life-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .life-list {
    flex: 0 0 260px;
  }
  .life-editor {
    flex: 1;
  }
}

.ai-buttons {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* LS8 — Life Letters AI helper (inline panel) */
.life-letters-card .life-ai,
.life-stories-card .life-ai {
  margin-top: 12px;
}

.life-letters-card .life-ai-row,
.life-stories-card .life-ai-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.life-letters-card .life-ai-label,
.life-stories-card .life-ai-label {
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
}

.life-letters-card .ai-loader,
.life-stories-card .ai-loader {
  margin-top: 8px;
}

.life-letters-card .ai-output-wrap,
.life-stories-card .ai-output-wrap {
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
}

.life-letters-card .ai-output-label,
.life-stories-card .ai-output-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft, #6b7280);
  margin-bottom: 4px;
}

.life-letters-card .ai-output,
.life-stories-card .ai-output {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Tone chips */
.life-letters-card .life-ai-tones,
.life-stories-card .life-ai-tones {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.life-letters-card .ai-chip,
.life-stories-card .ai-chip {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  background: #ffffff;
  cursor: pointer;
  line-height: 1.2;
}

.life-letters-card .ai-chip.ai-chip-active,
.life-stories-card .ai-chip.ai-chip-active {
  border-color: var(--brand, #5b46ff);
  background: rgba(91, 70, 255, 0.06);
}

/* Optional refine note input */
.life-letters-card .life-ai-refine-label,
.life-stories-card .life-ai-refine-label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
}

.life-letters-card .life-ai-refine-input,
.life-stories-card .life-ai-refine-input {
  margin-top: 4px;
  font-size: 13px;
}

/* AI error message */
.life-letters-card #ls-letter-ai-error,
.life-stories-card #ls-story-ai-error {
  font-size: 12px;
}

.ai-output-wrap {
  margin-top: 6px;
}

.ai-output-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563; /* muted gray */
  margin-bottom: 4px;
}

.ai-output {
  min-height: 80px;
  max-height: 260px;        /* NEW — prevents clipping */
  overflow-y: auto;         /* NEW — allows scrolling for long text */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--accent-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ai-reminder {
  margin-top: 6px;
  font-size: 0.8rem;
}

.life-ai-inline-link {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
}

.life-ai-inline-link:hover {
  text-decoration-thickness: 2px;
}

.lbl{ display:block; font-weight:800; margin:12px 0 6px; }
input[type="text"], input[type="url"], textarea, select, input[type="date"]{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
textarea{ resize: vertical; }

.wiz-progress{ list-style:none; display:flex; gap:8px; padding:0; margin:0 0 12px 0; }
.wiz-progress li{
  padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:.9rem; color:var(--ink-soft); font-weight:700;
}
.wiz-progress li.active{ border-color: rgba(124,58,237,.35); background: var(--accent-soft); color: var(--ink); }

.wiz-step{ animation: none; }
.wiz-step.fade-in{ animation: fadeIn .18s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.helper-line{
  background: rgba(2,6,23,.03); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:12px; padding:8px 10px; margin-bottom:10px; font-size:.92rem;
}

/* Section Suggestions (AI) */
.section-suggestions{
  max-width:var(--maxw);
  margin:0 auto 10px;
  padding:0 24px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .25s ease, opacity .2s ease;
}
.section-suggestions.open{
  max-height:420px; /* enough for several suggestions */
  opacity:1;
}
.section-suggestions-inner{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:12px 14px 10px;
  box-shadow:var(--shadow-card-soft);
}
.section-suggestions-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.section-suggestions-title{
  font-size:0.95rem;
  margin:0;
}
.section-suggestions-sub{
  margin:4px 0 6px 0;
  font-size:0.82rem;
}
.section-suggestions-list{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.section-suggestion{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:#F9FAFB;
}
.section-suggestion-text{
  flex:1;
  min-width:0;
}
.section-suggestion-title{
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:2px;
}
.section-suggestion-desc{
  font-size:0.82rem;
  color:var(--ink-soft);
}
.section-suggestion-actions{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.section-suggestion-actions .primary.small,
.section-suggestion-actions .secondary.small,
.section-suggestion-actions .ghost.small{
  font-size:0.8rem;
  padding:5px 10px;
}

/* Make the loader sit nicely in the panel */
#section-suggestions-loader{
  margin-top:4px;
}

/* Dear Next AI inline wizard button placement */
.notes-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wiz-ai-inline {
  margin-left: 10px;
  flex-shrink: 0;
  font-size: 0.85rem;
  padding: 6px 10px;
}

.priority-row{ display:flex; align-items:center; gap:8px; }
.due-input{ min-width: 180px; }

.button-row{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

.review-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px;
}
.review-grid .full{ grid-column: 1 / -1; }
.review-grid .k{ display:block; font-size:.8rem; color:var(--ink-soft); }
.review-grid .k + .v{ font-weight:800; }

.radio-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; margin-right:6px; cursor:pointer;
}
.radio-pill input{ accent-color: var(--brand); }

/* ---------- TOAST ---------- */
.toast{
  position: fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition: opacity .18s ease; z-index: 3000;
}
.toast.show{ opacity:1; }

/* ---------- COACHMARKS ---------- */
.coachmark, .coachmark-multi{
  position: fixed; z-index: 3200; background:#111827; color:#fff; padding:.75rem 1rem; border-radius:12px; box-shadow:var(--shadow-soft);
}
.coachmark{ bottom:5.5rem; right:1rem; max-width:240px; font-size:.9rem; }
.coachmark-multi{ bottom:6rem; right:50%; transform:translateX(50%); text-align:left; }
.coachmark-multi div{ margin-bottom:.25rem; }
#coach-close.small{ padding:6px 10px; }

/* ---------- FOOTER ---------- */
.site-footer{
  max-width: var(--maxw); margin:24px auto 16px; padding:12px 24px;
  color: var(--ink-soft); display:flex; gap:8px; align-items:center;
  background: var(--grad-footer);
  border-radius: 12px;
}

@media (min-width: 900px){
  .inline-capture input{ min-width:420px; }
}

/* Hard hides */
.empty-state[hidden],
.coachmark[hidden],
.coachmark-multi[hidden] { display: none !important; }

/* === LOGIN PAGE OFFSET FALLBACK === */
body.login main.layout.content {
  margin-top: 96px;  /* gets overridden by JS with exact measured height */
}

/* === LOGIN PAGE: keep branded gradient but remove stickiness === */
body.login .site-header {
  position: static; /* header participates in normal flow = no overlap */
}

/* === LOGIN PAGE: ensure main is visible === */
body.login main.layout {
  opacity: 1;
  transform: none;
}
/* v1.7 board header centering */
.board-head{
  display:flex;                /* override any previous layout */
  align-items:center;
  justify-content:center;      /* center title + count */
  text-align:center;
  gap:8px;
}

/* make the count look intentional next to the title */
.board-head [id^="colcount-"]{
  opacity:.7;
  font-weight:600;
  letter-spacing:.2px;
}
/* Link preview line on cards */
.link-row { margin-top:8px; }
.item-link {
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#4a3dd9;                 /* brand-ish purple */
  text-decoration:underline;
  text-underline-offset:2px;
}
.item-link:hover { color:#6b4de6; }
/* refined rounded drag-over highlight */
.board-col {
  border-radius: 16px;
  overflow: hidden;
}

.board-drop {
  position: relative;
  min-height: 48px;
}

.board-drop.drag-over::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(107,77,230,0.08); /* soft purple wash instead of border */
  box-shadow: inset 0 0 0 2px rgba(107,77,230,0.25);
  pointer-events: none;
  z-index: 0;
}

/* keep cards above the highlight */
.board-drop > * {
  position: relative;
  z-index: 1;
}
/* unify card rounding inside board columns */
.board-item,
.card {
  border-radius: 12px;         /* match the drag highlight curve */
  overflow: hidden;            /* clip any inner corners or outlines */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* optional: refine hover */
.board-item:hover,
.card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
/* v1.7 refine: no hard box on drag-over */
.board-drop.drag-over::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(107,77,230,0.06); /* soft glow only */
  box-shadow:none !important;       /* remove inner border */
  pointer-events:none;
  z-index:0;
}

/* keep cards above the wash */
.board-drop > * { position:relative; z-index:1; }

/* remove default focus rings that can look like boxes while dragging */
.board-drop:focus,
.board-card:focus { outline:none; }
/* Kill any hard outline/box on drag-over and keep only a soft wash */
.board-drop.drag-over,
.board-drop.drag-over::before,
.board-drop.drag-over::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* If an older ::after border still exists anywhere, cancel it */
.board-drop.drag-over::after { content: none !important; }

/* Soft rounded wash behind cards */
.board-col { border-radius: 16px; overflow: hidden; }
.board-drop { position: relative; min-height: 48px; }
.board-drop.drag-over::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(107,77,230,0.06);
  pointer-events: none;
  z-index: 0;
}
/* keep cards above the wash */
.board-drop > * { position: relative; z-index: 1; }
/* === v1.7 UI polish: gentle hover lift & purple cues === */

/* 1) Header tab buttons (section chips) */
.nav-tabs .chip{
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  will-change: transform;
}
.nav-tabs .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107,77,230,.18);
  border-color: #6b4de6;
  color:#3e2ecb;
}

/* 1b) Suggested quick-add chips */
.prompt-chips .chip{
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.prompt-chips .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(107,77,230,.15);
  border-color:#6b4de6;
  color:#3e2ecb;
}

/* 2) Floating “+” (wizard FAB) */
#fab-add{
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
#fab-add:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(107,77,230,.35);
}

/* 2b) Purple Add button in quick-add row */
#quick-add-btn{
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
#quick-add-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(107,77,230,.28);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .nav-tabs .chip,
  .prompt-chips .chip,
  #fab-add,
  #quick-add-btn{ transition: none; }
}
/* Subtle background tint test (reversible) */
body {
  background-color: #faf9ff; /* try #faf9ff or #f8f7fc for a soft lavender-gray */
}
/* === v1.7 Menu polish: cohesive pills, hover lift, purple cues === */
.menu-popover{
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(17, 17, 26, .12);
  border: 1px solid #eee;
  background:#fff;
}

.menu-popover .menu-group-label{
  font-size:.85rem;
  color:#6b6b6b;
  margin:6px 4px 6px;
}

.menu-popover a[role="menuitem"],
.menu-popover button[role="menuitem"],
.menu-popover .linklike{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid transparent;         /* remove the heavy black border */
  border-radius:12px;
  padding:10px 12px;
  margin:6px 0;
  font: inherit;
  color:#111;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}

.menu-popover a[role="menuitem"]:hover,
.menu-popover button[role="menuitem"]:hover,
.menu-popover .linklike:hover{
  transform: translateY(-1px);
  background: rgba(107,77,230,.07);
  border-color:#dcd6ff;
  box-shadow: 0 10px 22px rgba(107,77,230,.18);
  color:#3e2ecb;
  text-decoration: none;
}

/* Focus: subtle purple ring, no jump */
.menu-popover a[role="menuitem"]:focus,
.menu-popover button[role="menuitem"]:focus,
.menu-popover .linklike:focus{
  outline: 2px solid rgba(107,77,230,.35);
  outline-offset: 2px;
  border-color:#cfc7ff;
}

/* Compact plain links (Privacy / Contact) keep spacing but no pill if preferred */
.menu-popover > a:not(.linklike)[role="menuitem"]{
  border-radius:10px;
  padding:8px 10px;
  margin:4px 0;
}
.menu-popover > a:not(.linklike)[role="menuitem"]:hover{
  background: rgba(107,77,230,.05);
  color:#3e2ecb;
}
/* === v1.7 layout polish === */

/* 1) Header alignment fix */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header .menu {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* 2) Truncate long card content */
.note-card .title,
.board-card .title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-card .notes,
.board-card .notes {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.5em; /* fallback for non-webkit */
}
/* === v1.7 card actions: kebab menu === */
.mini-actions{ position:relative; display:flex; align-items:center; gap:6px; }
.mini-actions .kebab{
  width:28px; height:28px; line-height:28px;
  border:1px solid #e6e6f4; border-radius:8px; background:#fff;
  font-size:18px; padding:0; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-actions .kebab:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(107,77,230,.18); border-color:#cfc7ff; color:#3e2ecb; }

.mini-actions .mini-menu{
  position:absolute; right:0; top:36px; min-width:160px; z-index:5;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:6px;
  box-shadow:0 14px 30px rgba(17,17,26,.12); display:none;
}
.mini-actions.open .mini-menu{ display:block; }

.mini-actions .mini-menu button{
  display:block; width:100%; text-align:left;
  background:#fff; border:1px solid transparent; border-radius:10px;
  padding:8px 10px; margin:4px 0; cursor:pointer; font:inherit; color:#111;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.mini-actions .mini-menu button:hover{
  transform:translateY(-1px); background:rgba(107,77,230,.07); border-color:#dcd6ff; box-shadow:0 10px 22px rgba(107,77,230,.18); color:#3e2ecb;
}

/* hide old inline action buttons if they’re still rendered outside mini-menu */
.mini-actions > .pin,
.mini-actions > .edit,
.mini-actions > .del{ display:none !important; }
/* Keep card title rows as the positioning context */
.card-head,
.title-row{
  position: relative;
  padding-right: 40px; /* reserve room for kebab so text doesn't collide */
}

/* Mini-actions pinned to top-right, out of normal flow */
.mini-actions{
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

/* Kebab button look/feel */
.mini-actions .kebab{
  width:28px; height:28px; line-height:28px;
  border:1px solid #e6e6f4; border-radius:8px; background:#fff;
  font-size:16px; padding:0; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-actions .kebab:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107,77,230,.18);
  border-color: #cfc7ff; color:#3e2ecb;
}

/* The popover menu */
.mini-actions .mini-menu{
  position:absolute; right:0; top:34px; min-width:160px; z-index:5;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:6px;
  box-shadow:0 14px 30px rgba(17,17,26,.12);
  display:none;
}
.mini-actions.open .mini-menu{ display:block; }

/* Menu items */
.mini-actions .mini-menu button{
  display:block; width:100%; text-align:left;
  background:#fff; border:1px solid transparent; border-radius:10px;
  padding:8px 10px; margin:4px 0; cursor:pointer; font:inherit; color:#111;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.mini-actions .mini-menu button:hover{
  transform:translateY(-1px); background:rgba(107,77,230,.07); border-color:#dcd6ff; box-shadow:0 10px 22px rgba(107,77,230,.18); color:#3e2ecb;
}

/* Keep your old inline action buttons hidden if they still render elsewhere */
.mini-actions > .pin,
.mini-actions > .edit,
.mini-actions > .del{ display:none !important; }

/* Screen-reader only helper */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* --- v1.7 fix: pin kebab to card top-right, reserve space, hide sr-only text --- */

/* Make the entire card the positioning context and reserve room for kebab */
.note-card,
.board-card,
.card,
.board-item {
  position: relative;
  padding-right: 44px;           /* prevents overlap with kebab */
}

/* If your templates also have a title row, keep its padding tight */
.card-head,
.title-row { padding-right: 0 !important; }

/* Pin kebab container to the true top-right of the card */
.mini-actions{
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

/* Kebab button styles (icon = bullets, reliable across fonts) */
.mini-actions .kebab{
  width: 28px; height: 28px; line-height: 28px;
  border: 1px solid #e6e6f4; border-radius: 8px; background: #fff;
  font-size: 16px; padding: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-actions .kebab:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107,77,230,.18);
  border-color: #cfc7ff; color: #3e2ecb;
}

/* Kebab popover */
.mini-actions .mini-menu{
  position: absolute; right: 0; top: 34px; min-width: 160px; z-index: 5;
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 30px rgba(17,17,26,.12);
  display: none;
}
.mini-actions.open .mini-menu{ display: block; }

/* Menu items */
.mini-actions .mini-menu button{
  display: block; width: 100%; text-align: left;
  background: #fff; border: 1px solid transparent; border-radius: 10px;
  padding: 8px 10px; margin: 4px 0; cursor: pointer; font: inherit; color: #111;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}
.mini-actions .mini-menu button:hover{
  transform: translateY(-1px);
  background: rgba(107,77,230,.07);
  border-color: #dcd6ff;
  box-shadow: 0 10px 22px rgba(107,77,230,.18);
  color: #3e2ecb;
}

/* Visually hidden text (prevents stray “A”) */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* --- v1.7 kebab: anchor to card top-right and keep content clear --- */

/* Make the whole card the positioning context */
.board-card,
.note-card,
.board-item,
.card {
  position: relative;
}

/* Keep titles from colliding with the kebab */
.title-row,
.card-head {
  padding-right: 44px !important;
}

/* Absolute, true top-right for the kebab cluster */
.mini-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

/* Kebab look/feel */
.mini-actions .kebab {
  width: 28px; height: 28px; line-height: 28px;
  border: 1px solid #e6e6f4; border-radius: 8px; background: #fff;
  font-size: 16px; padding: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-actions .kebab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107,77,230,.18);
  border-color: #cfc7ff; color: #3e2ecb;
}

/* Popover menu */
.mini-actions .mini-menu {
  position: absolute; right: 0; top: 34px; min-width: 160px; z-index: 5;
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 30px rgba(17,17,26,.12);
  display: none;
}
.mini-actions.open .mini-menu { display: block; }
/* --- v1.7 kebab harden: anchor, reserve space, kill any stray markers --- */

/* 1) Make every card a positioning context */
.board-card,
.note-card,
.board-item,
.card {
  position: relative;
}

/* 2) Reserve space on the header line so text/links never collide with kebab */
.title-row,
.card-head {
  padding-right: 48px !important;
}

/* 3) Pin kebab container to absolute top-right of the CARD (not the row) */
.mini-actions {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex;
  gap: 6px;
  z-index: 5;
}

/* 4) Kebab button look/feel */
.mini-actions .kebab {
  width: 28px; height: 28px; line-height: 28px;
  border: 1px solid #e6e6f4; border-radius: 8px; background: #fff;
  font-size: 16px; padding: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mini-actions .kebab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(107,77,230,.18);
  border-color: #cfc7ff; color: #3e2ecb;
}

/* 5) Popover menu placement */
.mini-actions .mini-menu {
  position: absolute; right: 0; top: 34px; min-width: 160px;
  background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 30px rgba(17,17,26,.12);
  display: none;
  z-index: 6;
}
.mini-actions.open .mini-menu { display: block; }

/* 6) Defensive: remove any list/marker-like decorations that can render as "A" */
.title-row,
.card-head,
.notes,
.board-card,
.note-card {
  list-style: none !important;
}
.title-row::marker,
.card-head::marker,
.notes::marker { content: none !important; }
/* Force kebab to anchor to the card, not the title row */
.title-row,
.card-head {
  position: static !important;   /* was sometimes relative; turn it off */
  padding-right: 0 !important;   /* we’ll reserve space on the card instead */
}

/* Last-resort: kill any markers that can render as stray letters */
.board-card *::marker,
.note-card *::marker {
  content: none !important;
}
/* Bring kebab menu above neighboring cards */
.mini-actions.open,
.mini-actions.open .mini-menu { z-index: 10000 !important; }

/* Ensure the card itself floats above siblings while menu is open/hovered */
.board-card, .note-card, .board-item, .card { position: relative; z-index: 1; }
.board-card:hover, .note-card:hover, .board-item:hover, .card:hover { z-index: 2; }
/* if menu is open, elevate the whole card stack context */
.mini-actions.open { position: absolute !important; }
.mini-actions.open ~ * { position: relative; z-index: 2; }

/* Let menus spill outside columns (avoid clipping) */
.board-col { overflow: visible !important; }

/* === Mobile polish: list-only, fast capture (<=640px) === */
@media (max-width: 640px){
    /* --- Mobile fix: allow kebab menus to render (avoid overflow clipping) --- */
  .board-item,
  .card,
  .board-card,
  .note-card{
    overflow: visible !important;
  }

  /* Ensure the popover is above surrounding content */
  .mini-actions.open,
  .mini-actions.open .mini-menu{
    z-index: 10000 !important;
  }

  /* --- Mobile fix: prevent long text from pushing layout off-screen --- */
  .title-row,
  .card-head{
    min-width: 0;
  }

  .note-card .title,
  .board-card .title{
    max-width: 100%;
  }

  .note-card .notes,
  .board-card .notes{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Hide board UI entirely */
  #board, .board, .board-wrap, .board-cols, .board-col, .board-drop {
    display:none !important;
  }

  /* Make sure list is visible */
  #list, .list, .list-wrap {
    display:block !important;
  }

    /* Life header: keep clean on mobile (drawer holds these) */
  #ls-header-export,
  #ls-back-dashboard{
    display:none !important;
  }

  /* Tighten spacing for small screens */
  .nav-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:0 16px 6px;
    margin:12px 0 4px;
    gap:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* hide scrollbar (Firefox) */
  }
  .nav-tabs::-webkit-scrollbar{
    display:none;                  /* hide scrollbar (iOS/Chrome/Safari) */
  }
  .nav-tabs .chip{
    flex:0 0 auto;
  }
  .quick-add{
    position:sticky;
    top:0;
    z-index:3;
    background:#fff;
    padding-top:8px;
    border-bottom:1px solid #eee;
  }
  .search-row{
    margin:8px 0;
  }

  /* Bigger touch targets */
  .mk-btn, .secondary, .chip{
    min-height:40px;
  }

    /* Mobile: prevent long titles/words from pushing the kebab/menu off-screen */
  .note-card,
  .board-card{
    max-width: 100%;
    overflow: hidden; /* ensures nothing can force horizontal overflow */
  }

  .note-card .title,
  .board-card .title{
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* wraps up to 2 lines, then truncates */
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;         /* breaks long unbroken strings/URLs */
    word-break: break-word;
  }

  .note-card .notes,
  .board-card .notes{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Clamp notes more aggressively on mobile */
  .note-card .notes,
  .board-card .notes{
    -webkit-line-clamp: 3;
    max-height: 5em;
  }

  /* Layout & padding tighten for app on phones */
  .layout.content{
    padding:12px 16px 80px;
    max-width:100%;
  }

  .top-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin:4px auto 8px;
    padding:0 4px;
  }

  .chip-row{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  /* Let search shrink instead of forcing horizontal scroll */
  #search-input{
    min-width:0;
    flex:1;
  }

    /* Mobile: let main content use the screen */
  .layout.content{
    max-width: none !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ensure key inner containers can expand */
  .panel,
  .cards,
  #cards,
  .board,
  .board-list{
    width: 100% !important;
    max-width: none !important;
  }

  /* Quick add: single column on narrow screens (no overflow) */
  .inline-capture{
    grid-template-columns:1fr;
    padding:10px 10px 12px;
  }

  .inline-capture input{
    min-width:0;
  }

  .inline-capture .primary.small{
    width:100%;
    justify-content:center;
  }

  /* Hard clamp any horizontal expansion */
  html, body{
    max-width:100vw;
    overflow-x:hidden;
  }

  .site-header,
  .header-inner,
  .top-row,
  .layout.content,
  .site-footer,
  .list-wrap{
    max-width:100%;
    overflow-x:hidden;
  }

  /* Mobile header: compact with hamburger */
  .site-header .header-inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    row-gap: 0;
  }

  .brand-wrap{
    display:flex;
    flex-direction:column;
    gap:2px;
    width:auto;
  }

  .tagline{
    font-size:.8rem;
  }

  .menu{
    display:none !important;
  }

  #btn-signout,
  #btn-help,
  #btn-account{
    display:none !important;
  }

  .mobile-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto; /* pushes hamburger all the way right */
  }
}

/* === Export modal visibility control (robust) === */
#export-modal {
  position: fixed;
  inset: 0;
  display: none;               /* default: not rendered */
  pointer-events: none;
  opacity: 0;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.35);
  z-index: 1000;
}

#export-modal .modal-box {
  width: min(680px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

/* Only when opened do we show and allow interactions */
#export-modal.show[aria-hidden="false"] {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}

/* Ensure header & help menu are always clickable and on top */
.site-header { z-index: 1200; }

.menu-popover {
  z-index: 1300;               /* above header */
  position: absolute;
  top: 100%;
  right: 0;
}

/* Defensive: any hidden modal cannot intercept clicks */
.modal:not(.show) { display: none !important; pointer-events: none !important; }
/* Keep header above content and popover above header */
.site-header { position: sticky; top: 0; z-index: 1200; }

.menu-popover {
  z-index: 1300;       /* ensure it floats above header */
}
/* -------------------------------------
   Keepsake – AI Assist Layout
-------------------------------------- */
.keepsake-ai-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 6px 0 8px;
}

.keepsake-ai-row select {
  min-width: 170px;
}

.keepsake-ai-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Keepsake letter font */
#export-letter {
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.45;
}
/* Signup plan reminder chip on the login page */
body.login #signup-plan-note {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);        /* soft Dear Next purple tint */
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #4c1d95;
  font-weight: 600;
  font-size: 0.8rem;
}
/* === Step 6: Full-screen onboarding modal === */

.onboarding-modal{
  z-index: 2600;
  background: radial-gradient(circle at top,
    rgba(124,58,237,0.20),
    rgba(15,23,42,0.82));
}

.onboarding-box{
  max-width: 840px;
  width: min(840px, 100vw - 32px);
  margin: 6vh auto;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(248,247,252,1), #ffffff);
  position: relative; /* to anchor the choice popup */
}

/* === LS11: First-login Start Choice modal === */
.start-choice-box{
  max-width: 860px;
  width: min(860px, 100vw - 32px);
}

.start-choice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.start-choice-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 16px 16px 14px;
  text-align: left;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.start-choice-label{
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.1px;
}

.start-choice-text{
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.start-choice-btn{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Ensure the older first-choice modal is always peer-to-peer on desktop */
.first-choice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Mobile: stack */
@media (max-width: 740px){
  .start-choice-grid{ grid-template-columns: 1fr; }
  .first-choice-grid{ grid-template-columns: 1fr; }
}

.onboarding-head{
  border-bottom: none;
  padding: 18px 22px 10px;
}

.onboarding-subtitle{
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 2px;
}

.onboarding-body{
  padding: 12px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onboarding-progress{
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}

.onboarding-progress li{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148,163,184,0.6);
  transition: background 0.18s ease, transform 0.18s ease;
}

.onboarding-progress li.active{
  background: var(--brand);
  transform: scale(1.15);
}

.onboarding-step h2{
  margin: 4px 0 6px;
  font-size: 1.1rem;
}

.onboarding-step p{
  margin: 0 0 10px;
}

.onboarding-section-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.onboarding-section-list button{
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.onboarding-section-list button span{
  display: block;
}

.onboarding-section-list button .onb-section-label{
  font-size: 0.95rem;
}

.onboarding-section-list button .onb-section-caption{
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 2px;
}

.onboarding-section-list button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(107,77,230,0.2);
  border-color: rgba(124,58,237,0.55);
}

.onboarding-section-list button.onb-selected{
  background: var(--accent-soft);
  border-color: rgba(124,58,237,0.9);
}

.onboarding-actions{
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.onboarding-actions #onb-back{
  min-width: 90px;
}

.onboarding-actions #onb-next,
.onboarding-actions #onb-finish{
  min-width: 160px;
}

/* First-save choice overlay inside onboarding */
.onb-choice-backdrop{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15,23,42,0.25), rgba(15,23,42,0.65));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2601; /* sits above onboarding modal (2600) */
}

.onb-choice-backdrop[hidden]{
  display: none;
}

.onb-choice-sheet{
  max-width: 460px;
  width: 100%;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15,23,42,0.35);
  padding: 18px 20px 16px;
}

.onb-choice-sheet h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.onb-choice-sheet p{
  margin: 0 0 14px;
  font-size: 0.9rem;
}

/* Purple-alt button (sits next to primary, same color family) */
.purple-alt {
  background: rgba(124, 58, 237, 0.12);
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.purple-alt:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
}

/* Make Save + Dashboard feel like one group */
.onboarding-actions-right{
  margin-left: auto;              /* pushes the group to the right */
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-actions-right .purple-alt,
.onboarding-actions-right #onb-finish{
  min-width: 150px;
}

/* Mobile stacking */
@media (max-width: 640px){
  .onboarding-actions{
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .onboarding-actions-right{
    width: 100%;
    justify-content: stretch;
  }

  .onboarding-actions-right .purple-alt,
  .onboarding-actions-right #onb-finish{
    flex: 1 1 50%;
  }
}

.onb-choice-actions{
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 640px){
  .onb-choice-sheet{
    max-width: 100%;
    padding-inline: 16px;
  }

  .onb-choice-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .onb-choice-actions .secondary,
  .onb-choice-actions .primary{
    width: 100%;
    justify-content: center;
  }
}

/* Trusted Contact viewer UI */
.viewer-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  font-size:0.9rem;
}

.viewer-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:0.85rem;
}

.viewer-select{
  min-width: 260px;
  max-width: 460px;
}

.viewer-exit{
  white-space: nowrap;
}

.viewer-panel{
  max-width: 980px;
  margin: 10px auto 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.65);
  text-align: center;
}

.viewer-note{
  margin: 2px auto 8px;
}

.viewer-nudge{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.viewer-nudge-actions{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile: contained onboarding sheet (no backdrop scroll, no side-scroll, buttons pinned) */
@media (max-width: 640px){
  .onboarding-box{
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: 12px auto;
    border-radius: 18px;
    overflow: hidden;          /* body scrolls, box does not */
    box-sizing: border-box;
  }

  .onboarding-body{
    padding-inline: 16px;
    padding-bottom: 12px;
    overflow-y: auto;
    overflow-x: hidden;        /* prevents sideways scroll */
    -webkit-overflow-scrolling: touch;
  }

  .onboarding-section-list{
    grid-template-columns: 1fr;
  }

  /* Keep actions pinned to bottom of the modal */
  .onboarding-actions{
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .onboarding-actions-right{
    width: 100%;
    justify-content: stretch;
  }

  .onboarding-actions #onb-back,
  .onboarding-actions #onb-next,
  .onboarding-actions #onb-finish,
  .onboarding-actions-right .purple-alt,
  .onboarding-actions-right #onb-finish{
    width: 100%;
    justify-content: center;
    min-width: 0;              /* avoids weird sizing on mobile */
  }
}

/* ----- Dear Next Life Stories: Draft book view (Phase 5A readability pass) ----- */

.life-view-toggle {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
}

.life-view-chip {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.life-view-chip-active {
  background: var(--purple);
  color: #fff;
}

#life-book {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-soft, #e4e4ef);
  background: #ffffff;
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.6;
}

.life-book-empty {
  color: var(--muted, #6b7280);
}

.life-book-section {
  margin-bottom: 20px;
}

.life-book-section-title {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.life-book-entry {
  margin-bottom: 12px;
}

.life-book-entry-title {
  font-weight: 600;
  margin-bottom: 3px;
}

.life-book-entry-meta {
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}

.life-book-entry-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- Life Stories Draft Book View: Chapter intros (Phase 5B) ---- */

.life-book-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.life-book-section-header .life-book-section-title {
  margin: 0;
}

.life-book-section-header .small {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.life-book-chapter-intro {
  border-radius: 10px;
  background: rgba(248, 247, 252, 0.9);
  padding: 8px 10px;
  margin-bottom: 10px;
}

.life-book-chapter-intro-body {
  margin-top: 4px;
}

.life-book-chapter-intro-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.life-book-chapter-intro-empty {
  margin: 0;
  font-size: 0.82rem;
  color: #6b7280; /* muted */
}

.life-book-chapter-intro-edit {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.life-book-chapter-intro-textarea {
  width: 100%;
  min-height: 68px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  resize: vertical;
}

.life-book-chapter-intro-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.life-book-section-entries {
  margin-top: 4px;
}

/* Toggle visibility when in book view */
.life-book-mode #life-story {
  display: none;
}

.life-book-mode #life-book {
  display: block;
}

.life-book-mode #life-save {
  display: none;
}

/* Dear Next Life Stories: tighten top spacing in the modal only */
#life-modal .onboarding-body{
  padding-top: 8px;        /* slightly tighter than global 12px */
}

/* ===== Dear Next Life Stories — Layout & polish (LS Unified) ===== */

/* Subtle global background just for Life Stories page – match app dashboard */
body.life-stories-page {
  background-color: #faf9ff; /* same base tone as the main app */
}

/* Main content frame under the shared app header */
.life-page-main {
  max-width: 1120px;
  margin: 24px auto 44px;
  padding: 0 20px 36px;
}

/* Intro hero at top of Life Stories page */
.life-page-intro {
  text-align: center;
  margin-bottom: 12px;
}

.life-page-intro h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.life-page-intro .muted {
  margin: 0 auto;
  font-size: 1rem;
  max-width: 640px;
  line-height: 1.5;
}

/* Layout shell where the JS renders the sidebar + panels */
.life-page-content {
  margin-top: 24px;
}

/* Layout shell where the JS renders the sidebar + panels */
.life-page-content {
  margin-top: 18px;
}

/* Left sidebar card with Dear Next purple feel */
.life-list {
  flex: 0 0 260px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: linear-gradient(180deg, #f7f3ff 0%, #ffffff 70%);
  padding: 14px 14px 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* Legacy story list — no longer used for scrolling */
.life-list-items {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

.life-list-items-hidden {
  display: none;
}

/* Allow the left sidebar card to grow naturally with its content */
.life-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Sidebar headings and hint text */
.life-list-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.life-list-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}

/* Story rows + buttons */
.life-list-row {
  margin-bottom: 6px;
}

.life-list-item {
  width: 100%;
  text-align: left;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 7px 12px;
  background: #f9fafb;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.life-list-item:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.45);
  transform: translateY(-1px);
}

.life-list-item:active {
  transform: translateY(0);
}

.life-list-item-title {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Sidebar sections: Guided interview + Book preview + Letters */
.life-list-interview,
.life-list-book,
.life-list-letters {
  margin-top: 12px;      /* reduced from 18px */
  border-top: 1px solid #eef0f4;
  padding-top: 8px;      /* reduced from 12px */
}

.life-list-interview-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.life-list-interview-progress {
  font-size: 0.8rem;
  margin-bottom: 8px;
}

/* Life Stories sidebar CTA buttons – premium purple hover */
.life-list-interview button.secondary,
.life-list-book button.secondary,
.life-list-letters button.secondary,
.life-stories-open-btn {
  width: 100%;
  justify-content: center;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.12);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.06s ease,
    border-color 0.16s ease;
}

.life-list-interview button.secondary:hover,
.life-list-book button.secondary:hover,
.life-list-letters button.secondary:hover,
.life-stories-open-btn:hover {
  background: var(--grad-btn);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}

/* Right-hand editor column */
.life-editor {
  flex: 1;
}

/* Shared panel header */
.life-editor-header {
  margin-bottom: 12px;
}

.life-editor-header-main h2 {
  font-size: 1.4rem;
  margin: 0 0 4px;
}

.life-editor-header-main p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Main card shell for interview / editor / book panels */
.life-editor-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 16px 18px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

/* ----- Life Stories: Letters & milestones panel (LS7 base) ----- */

.life-letters-card {
  margin-top: 4px;
}

.life-letters-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.life-letters-select-row {
  margin-bottom: 12px;
}

.life-letters-select-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink-soft);
}

#ls-letters-select {
  font-size: 0.86rem;
}

.life-letters-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.life-letters-hint {
  font-size: 0.85rem;
}

.life-letters-list {
  margin-bottom: 14px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.life-letters-empty {
  font-size: 0.85rem;
}

.life-letter-row {
  margin-bottom: 6px;
}

.life-letter-item {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid var(--line-soft, #e4e4ef);
  padding: 8px 10px;
  background: #faf5ff;
  cursor: pointer;
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.06s ease,
    box-shadow 0.12s ease;
}

.life-letter-item:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.12);
  transform: translateY(-1px);
}

.life-letter-item-title {
  font-weight: 600;
}

.life-letter-item-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.life-letter-editor-block {
  border-top: 1px solid #eef0f4;
  padding-top: 12px;
}

.life-letter-editor-heading {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.life-letter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 10px;
}

.life-letter-field .lbl {
  font-size: 0.78rem;
}

.life-letter-actions {
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 768px) {
  .life-letter-grid {
    grid-template-columns: 1fr;
  }

  .life-letters-list {
    max-height: 160px;
  }
}

/* ----- Life Stories: My Stories panel dropdown ----- */

.life-stories-card {
  margin-top: 4px;
}

.life-stories-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.life-stories-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.life-stories-hint {
  font-size: 0.85rem;
}

.life-stories-select-row {
  margin-bottom: 12px;
}

.life-stories-select-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink-soft);
}

.life-story-editor-block {
  border-top: 1px solid #eef0f4;
  padding-top: 12px;
}

.life-story-editor-heading {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 8px;
}

/* Life Stories right-panel transitions */
.life-editor-panel {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.life-editor-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Guided interview tweaks */
.life-guided-top {
  margin-bottom: 10px;
}

.life-guided-textarea {
  min-height: 150px;
  font-size: 0.95rem;
}

/* Book preview Q&A styling */
.life-book-section {
  margin-bottom: 20px;
}

.life-book-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
}

.life-book-item {
  margin-bottom: 12px;
}

.life-book-question {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.life-book-answer {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Back-to-interview buttons as soft purple pills */
#ls-story-back,
#ls-book-back {
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  padding: 4px 10px;
  background: rgba(124, 58, 237, 0.08);
  color: #5b21b6;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

#ls-story-back:hover,
#ls-book-back:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.55);
  transform: translateY(-1px);
}

#ls-story-back:active,
#ls-book-back:active {
  transform: translateY(0);
}

/* ===== LS6 – Virtual Book layout & styling ===== */

/* Outer book frame – centers the page in the right column */
.vbook-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Single “page” – fixed width, soft shadow, feels like a real book */
.vbook-page {
  width: min(520px, 100%);
  min-height: 420px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
  padding: 26px 26px 22px;
  display: flex;
}

/* Inner content wrapper reused across page types */
.vbook-page-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Empty state page */
.vbook-page-empty p {
  text-align: center;
  margin: 0;
  padding: 40px 12px;
  font-size: 0.9rem;
}

/* --- Title page --- */

.vbook-titlepage {
  align-items: center;
  text-align: center;
  gap: 8px;
}

.vbook-titlepage h1 {
  margin: 6px 0 6px;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Purple brand dot after “Life Stories” */
.vbook-titlepage .vbook-dot {
  display: inline-flex;
  width: 0.25em;
  height: 0.25em;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--brand);
  vertical-align: middle;
  transform: translateY(4px);
}

.vbook-titlepage p {
  max-width: 360px;
  margin: 4px auto 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* --- Chapter pages --- */

.vbook-chapterpage {
  align-items: center;
  text-align: center;
  gap: 6px;
}

.vbook-chapter-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.vbook-chapterpage h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
}

.vbook-chapter-intro {
  margin: 6px auto 0;
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Story pages --- */

.vbook-storypage {
  gap: 10px;
}

.vbook-chapter-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6b7280;
  margin: 0 0 6px;
}

.vbook-qa-block {
  margin-top: 2px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px solid rgba(209, 213, 219, 0.9);
  padding: 12px 14px 14px;
}

.vbook-edit-link {
  margin-top: 10px;
  align-self: flex-end;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  padding: 0;
  color: #4b5563;
  cursor: pointer;
}

.vbook-edit-link:hover {
  text-decoration: underline;
  color: #4338ca; /* slightly warmer purple on hover */
}

.vbook-question {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.vbook-answer {
  font-size: 0.95rem;
}

.vbook-answer-body {
  margin-top: 2px;
  line-height: 1.6;
  word-break: break-word;
}

/* --- Book navigation row --- */

.vbook-nav {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.85rem;
}

#vbook-page-indicator {
  min-width: 120px;
  text-align: center;
}

.vbook-chapter-select {
  font-size: 0.84rem;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.vbook-chapter-select:focus {
  border-color: rgba(124, 58, 237, 0.75);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.15);
}

/* Tighten nav buttons slightly for this context */
.vbook-nav .secondary.small {
  padding-inline: 16px;
}

/* --- Responsive tweaks --- */

@media (max-width: 768px) {
  .vbook-container {
    margin-top: 8px;
  }

  .vbook-page {
    min-height: 320px;
    padding: 18px 16px 16px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
  }

  .vbook-titlepage h1 {
    font-size: 1.7rem;
  }
}
.plan-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.plan-savings{
  font-size:.85rem;
  font-weight:600;
  color: var(--muted);
  white-space: nowrap;
}