/* LAura - premium dark design system. One stylesheet drives every page
   (marketing + logged-in app). Class names are unchanged; this file is the
   single source of visual truth. */

/* ── Font: self-hosted Inter (variable, latin) - no external requests ─────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}
/* Modern Hebrew face (Heebo), self-hosted like Inter. Scoped to the Hebrew
   unicode range so it only loads when Hebrew text is present and only renders
   Hebrew glyphs; Latin keeps Inter. */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/heebo-hebrew-var.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-200F, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  /* Surfaces */
  --bg: #090d1a;
  --card: #121a2e;
  --card-2: #161f38;        /* top of the card gradient / hover surface */
  --field: #0d1424;         /* form inputs */
  /* Text */
  --ink: #eef1fa;
  --muted: #97a1bd;
  --faint: #6c7796;
  /* Lines */
  --line: #222b48;
  --line-2: #2e3a64;        /* brighter border on hover/focus */
  /* Brand + accents */
  --brand: #6d6ff5;
  --brand-2: #8b5cf6;       /* gradient partner */
  --brand-dark: #5457e6;
  --accent: #aeb8ff;        /* links + text accents */
  --accent-soft: #1a2240;   /* secondary button / chips */
  --accent-ink: #cdd3fb;
  /* Status */
  --good: #34d399; --good-bg: #10271e; --good-line: #1d4a37;
  --danger: #fb7185; --danger-bg: #2a1622; --danger-line: #5a2230;
  /* Shape */
  --radius: 14px;
  --radius-lg: 18px;
  --radius-sm: 10px;
  /* Effects */
  --grad: linear-gradient(135deg, #6d6ff5 0%, #8b5cf6 100%);
  --ring: 0 0 0 3px rgba(109, 111, 245, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 30px rgba(2, 6, 20, 0.45);
  --shadow-lg: 0 24px 64px rgba(2, 6, 20, 0.60);
  --glow: 0 10px 34px rgba(109, 111, 245, 0.40);
  --hover-overlay: rgba(255, 255, 255, 0.03); /* subtle raise on ghost surfaces */
}

/* ── Light theme ───────────────────────────────────────────────────────────
   The palette above is the dark default. Light values apply when the user picks
   Light, OR when they're on "system" (no data-theme) and the OS prefers light.
   Forcing dark (data-theme="dark") always beats the OS. theme.js sets the
   attribute before first paint. The two blocks are intentionally identical; CSS
   can't share declarations across a media query and an attribute selector. */
:root[data-theme="light"] {
  --bg: #f4f6fc;
  --card: #ffffff;
  --card-2: #f4f6fd;
  --field: #ffffff;
  --ink: #1b2138;
  --muted: #5c6580;
  --faint: #8b94ac;
  --line: #e4e8f2;
  --line-2: #cfd6e6;
  --accent: #5457e6;
  --accent-soft: #eceefe;
  --accent-ink: #4245c9;
  --good: #16a34a; --good-bg: #e7f6ee; --good-line: #bce3cc;
  --danger: #e11d48; --danger-bg: #fdecef; --danger-line: #f5c7d1;
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 12px 30px rgba(20, 30, 60, 0.10);
  --shadow-lg: 0 24px 64px rgba(20, 30, 60, 0.18);
  --glow: 0 10px 30px rgba(109, 111, 245, 0.22);
  --hover-overlay: rgba(24, 34, 64, 0.05);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6fc;
    --card: #ffffff;
    --card-2: #f4f6fd;
    --field: #ffffff;
    --ink: #1b2138;
    --muted: #5c6580;
    --faint: #8b94ac;
    --line: #e4e8f2;
    --line-2: #cfd6e6;
    --accent: #5457e6;
    --accent-soft: #eceefe;
    --accent-ink: #4245c9;
    --good: #16a34a; --good-bg: #e7f6ee; --good-line: #bce3cc;
    --danger: #e11d48; --danger-bg: #fdecef; --danger-line: #f5c7d1;
    --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06);
    --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 12px 30px rgba(20, 30, 60, 0.10);
    --shadow-lg: 0 24px 64px rgba(20, 30, 60, 0.18);
    --glow: 0 10px 30px rgba(109, 111, 245, 0.22);
    --hover-overlay: rgba(24, 34, 64, 0.05);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
  line-height: 1.6;
  /* Ambient brand glow - faint, applies everywhere; fixed so it doesn't scroll. */
  background:
    radial-gradient(820px 480px at 88% -8%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(820px 480px at -5% 2%, rgba(109, 111, 245, 0.12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
/* Lighter ambient glow on the light palette (the dark opacities read as smudges
   on a white page). */
:root[data-theme="light"] body {
  background:
    radial-gradient(820px 480px at 88% -8%, rgba(139, 92, 246, 0.07), transparent 60%),
    radial-gradient(820px 480px at -5% 2%, rgba(109, 111, 245, 0.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background:
      radial-gradient(820px 480px at 88% -8%, rgba(139, 92, 246, 0.07), transparent 60%),
      radial-gradient(820px 480px at -5% 2%, rgba(109, 111, 245, 0.07), transparent 55%),
      var(--bg);
    background-attachment: fixed;
  }
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 700px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.brand { font-weight: 800; font-size: 22px; letter-spacing: -0.6px; color: var(--ink); }
.brand a { color: inherit; text-decoration: none; }
/* On the app pages the brand is a link back to the dashboard; keep it looking
   like the wordmark, not a link. */
a.brand { text-decoration: none; cursor: pointer; }
a.brand:hover { color: var(--ink); text-decoration: none; opacity: 0.9; }
.brand-mark { width: 26px; height: 26px; vertical-align: middle; margin-right: 9px; position: relative; top: -2px; }
.brand span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { margin: 0; color: var(--muted); font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--ink); text-decoration: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 66px 0 30px; }
.hero h1 {
  font-size: clamp(38px, 6vw, 58px); line-height: 1.04; margin: 0 0 18px;
  letter-spacing: -1.6px; font-weight: 800; color: #fff;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(180deg, #ffffff 0%, #b7bfe8 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.hero p { font-size: 19px; color: var(--muted); max-width: 600px; margin: 0 auto 30px; }
.hero .sub { font-size: 14px; color: var(--faint); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-size: 15px; font-weight: 600; font-family: inherit;
  padding: 11px 20px; border-radius: 12px; background: var(--grad); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.15s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--glow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--line); box-shadow: none; }
.btn-secondary:hover { background: #202a4e; border-color: var(--line-2); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--hover-overlay); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn-danger { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: none; }
.btn-danger:hover { box-shadow: 0 10px 34px rgba(244, 63, 94, 0.38); }
.btn-block { display: flex; width: 100%; }

.provider-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.provider-btns .btn { min-width: 210px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 14px;
  /* Long unbreakable strings (email addresses, sender domains, URLs) must break
     instead of forcing a card, and the whole page, wider than a phone. `anywhere`
     also shrinks the card's min-content so it never drives horizontal overflow. */
  overflow-wrap: anywhere;
}
.card h2 { margin-top: 0; font-size: 21px; letter-spacing: -0.3px; }
.card h3 { font-size: 16px; margin: 18px 0 8px; }

/* Attention card: an actionable queue (e.g. items awaiting approval) that
   should stand out from informational cards. Accent border + soft brand glow. */
.card.attention {
  border-color: var(--brand);
  box-shadow: var(--shadow), var(--glow);
}
.card.attention > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card.attention.flash { animation: attention-flash 1.1s ease-out 1; }
@keyframes attention-flash {
  0%, 100% { box-shadow: var(--shadow), var(--glow); }
  30% { box-shadow: var(--shadow), 0 0 0 4px rgba(109, 111, 245, 0.55); }
}

/* ── Dashboard overview grid ───────────────────────────────────────────────
   Two columns on wide screens so the key cards sit above the fold as a
   quadrant; one column on narrow screens. Cards keep their own show/hide
   logic; hidden (display:none) cards simply don't take a grid cell. */
/* Single column so every card aligns to one width; a dense list card can't push
   a sibling narrow (the old 1fr 1fr let content inflate one column). */
/* minmax(0, 1fr) not 1fr: a plain 1fr track's minimum is min-content, so an
   unbreakable child (a long email/URL) expands the column past the viewport and
   the page pans sideways. minmax(0, …) lets the track shrink to the container. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.dash-grid > .card { margin-bottom: 0; min-width: 0; }
.dash-grid > .span-2 { grid-column: 1 / -1; }
.dash-grid > .stats { grid-column: 1 / -1; margin: 0; }
/* A calm "nothing here" line for the always-visible queue/created cards. */
.card-empty { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* "View all →" affordance on a clickable quadrant card header (drill-down). */
.card-link { margin-left: auto; align-self: flex-start; font-size: 13px; color: var(--accent); white-space: nowrap; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Detail (drill-down) pages: back link, filter tabs, per-day bar chart. */
.back-link { display: inline-block; margin: 0 0 14px; color: var(--accent); text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; }
.detail-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.filter-btn.is-active { background: var(--accent-soft, rgba(165,180,252,0.12)); border-color: var(--brand); color: var(--ink); }
/* Dashboard "What LAura created": optional group-by-type control + sections. */
/* Inline rename of the "Worth a look" card: a quiet pencil that only shows on
   hover/focus of the card head, so the title still reads as a title. */
.worth-rename {
  background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity 0.12s ease;
}
.card-head:hover .worth-rename, .worth-rename:focus-visible { opacity: 1; }
.worth-rename:hover { color: var(--ink); }
#worthHeading.is-editing {
  outline: none; cursor: text; padding: 0 4px; border-radius: 4px;
  background: var(--field); box-shadow: 0 0 0 2px var(--accent);
}
@media (hover: none) { .worth-rename { opacity: 1; } }
.activity-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.activity-controls .filter-btn { padding: 5px 12px; font-size: 13px; }
.citem-group + .citem-group { margin-top: 14px; }
.citem-group-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0; }
.citem-group-head .muted { font-weight: 600; }
.detail-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; }
.detail-toolbar select { width: auto; min-width: 140px; }
.detail-toolbar input[type=search] { flex: 1; min-width: 180px; }
.day-group-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin: 16px 0 4px; }
.day-chart { display: flex; align-items: flex-end; gap: 6px; min-height: 140px; }
.day-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
a.day-col { text-decoration: none; }
a.day-col:hover .day-bar { filter: brightness(1.15); }
.day-bar-wrap { width: 100%; height: 110px; display: flex; align-items: flex-end; }
/* Stacked bar: tasks / events / drafts segments from the bottom up. The bar
   fills the wrap so segment heights (a % of the busiest day) resolve against it. */
.day-bar { width: 100%; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; background: transparent; }
.day-seg { display: block; width: 100%; }
.day-seg:last-child { border-radius: 4px 4px 0 0; }
.day-seg.t { background: #34d399; }
.day-seg.e { background: #a5b4fc; }
.day-seg.d { background: #8b5cf6; }
.day-seg.zero { background: var(--line); }
.day-num { font-size: 11px; color: var(--ink); font-weight: 600; }
.day-label { font-size: 11px; color: var(--muted); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Breakdown rows (triage / filtered out) on the insights page. */
.breakdown-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.breakdown { display: flex; flex-direction: column; gap: 8px; }
.breakdown-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.breakdown-row .bd-label { flex: 0 0 auto; min-width: 130px; color: var(--ink); }
.breakdown-row .bd-track { flex: 1; height: 8px; background: var(--field); border-radius: 999px; overflow: hidden; }
.breakdown-row .bd-fill { display: block; height: 100%; background-image: linear-gradient(90deg, #6d6ff5, #8b5cf6); border-radius: 999px; }
.breakdown-row .bd-n { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
[dir="rtl"] .breakdown-row .bd-fill { background-image: linear-gradient(270deg, #6d6ff5, #8b5cf6); }

/* Slim status bar (state + facts on the left, actions on the right) — replaces
   the old full-height status card so the overview grid is all content. */
.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px;
  flex-wrap: wrap; padding: 12px 18px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.statusbar-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.statusbar-facts { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px 9px; flex-wrap: wrap; align-items: center; }
.statusbar-facts b { color: var(--ink); font-weight: 600; }
.statusbar-facts a { color: var(--accent); }
.statusbar-facts .pill { font-size: 12px; }
.statusbar-facts .dot { color: var(--line-2, var(--muted)); }
.statusbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.statusbar-actions .btn { padding: 9px 16px; font-size: 14px; }
/* Compact stand-in for the facts line: hidden on desktop, shown only in the
   minimized status bar below. */
.statusbar-compact { display: none; font-size: 13px; color: var(--muted); }
.statusbar-compact b { color: var(--ink); font-weight: 600; }
.statusbar-compact a { color: var(--accent); }
/* Minimized status bar on phones and the installed app (comma = logical OR):
   drop the mailbox-names/last-checked/cadence facts and the Pause / Re-scan
   buttons, keeping just the Active/Paused pill, a mailbox count, and Scan now. */
@media (max-width: 560px), (display-mode: standalone) {
  .statusbar-facts { display: none; }
  .statusbar-compact { display: inline-flex; align-items: center; gap: 6px; }
  #toggleActive, #reprocess { display: none; }
}
@media (max-width: 760px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dash-grid > .span-2 { grid-column: auto; }
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: 13px; }
/* Labels whose explanation moved into a hover tooltip (title attr) get a subtle
   ⓘ affordance + help cursor so the tooltip is discoverable. */
label.tip { cursor: help; }
label.tip::after { content: "\00a0ⓘ"; color: var(--muted); font-weight: 400; font-size: .8em; }
input[type=text], input[type=email], input[type=number], input[type=password], textarea, select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; background: var(--field); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
textarea { min-height: 92px; resize: vertical; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.checkbox { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.checkbox input { width: auto; accent-color: var(--brand); }
.checkbox label { margin: 0; }

.list-item { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.list-item input { flex: 1; }
.remove-x {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); border-radius: 8px;
  width: 38px; height: 40px; cursor: pointer; font-size: 18px; line-height: 1; transition: background 0.15s ease;
}
.remove-x:hover { background: #3a1d2a; }

/* ── Trust badge ─────────────────────────────────────────────────────────── */
.trust-badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--good-bg);
  color: var(--good); border: 1px solid var(--good-line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
}
.trust-badge a { color: var(--good); text-decoration: underline; }

/* ── Privacy bullets ─────────────────────────────────────────────────────── */
.privacy-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
.privacy-points .pt {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow);
}
.privacy-points .pt b { display: block; margin-bottom: 6px; color: #f2f4fc; }

/* ── Banner ──────────────────────────────────────────────────────────────── */
.banner {
  background: linear-gradient(180deg, rgba(24, 34, 64, 0.55), rgba(20, 29, 56, 0.55)), var(--card);
  border: 1px solid #29345e; border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 20px; font-size: 14px; color: var(--ink);
  overflow-wrap: anywhere; /* long mailbox names in the reconnect banner must wrap */
}
.banner b { color: var(--accent); }

/* "Add LAura to your phone" nudge: icon, text, action, dismiss on one line,
   wrapping on narrow screens. Shown by install-hint.js (see dashboard.html). */
#installHint { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
#installHint .install-ic { font-size: 20px; }
#installHint .install-text { flex: 1; min-width: 200px; }
#installHint .install-text b { color: var(--accent); margin-right: 6px; }
#installHint #installDismiss { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Plan / trial banner (dashboard). A quiet coral-tinted strip so it reads as
   "action available" without shouting over the assistant status below. */
.plan-banner {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(219,90,62,0.12), rgba(219,90,62,0.06)), var(--card);
  border: 1px solid var(--line-2, #3a2a2a); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: var(--ink);
}
.plan-banner .plan-ic { color: var(--accent); font-size: 16px; }
.plan-banner .plan-text { flex: 1; min-width: 200px; }
.plan-banner .btn { white-space: nowrap; }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 10px 0 4px; }
.stat {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.stat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: #f4f6fd; }
.stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; }

/* ── Card header (shared) ──────────────────────────────────────────────────── */
/* A colored icon chip + title (+ optional pill) + subtitle, so every dashboard
   card reads as a clearly-labeled section. Accent set per card via .card-acc-*. */
.card-head { display: flex; align-items: flex-start; gap: 12px; }
.card-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--card-accent, var(--brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--brand)) 34%, transparent);
}
.card-head-text { flex: 1; min-width: 0; }
.card-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-sub { color: var(--muted); font-size: 13px; margin: 4px 0 0; line-height: 1.5; }
.card-acc-indigo  { --card-accent: #818cf8; }
.card-acc-emerald { --card-accent: #34d399; }
.card-acc-violet  { --card-accent: #c084fc; }
.card-acc-amber   { --card-accent: #fbbf24; }
.card-acc-sky     { --card-accent: #38bdf8; }
.card-acc-pink    { --card-accent: #f472b6; }
[dir="rtl"] .card-head h2 { text-align: right; }

/* Compact section header (mailbox-style): smaller icon + heading, no subtitle,
   tighter padding, so the list itself leads instead of the card chrome. */
.card-compact { padding: 16px 18px; }
.card-compact .card-head { align-items: center; gap: 10px; }
.card-compact .card-ic { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.card-compact .card-head h2 { font-size: 16px; }
.card-compact .card-sub { display: none; }

/* ── Promo Highlights ──────────────────────────────────────────────────────── */
.promo-item {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 13px 4px; border-radius: 8px; transition: background 0.12s ease;
}
.promo-item + .promo-item { border-top: 1px solid var(--line); }
.promo-item:hover { background: var(--card-2); }
/* Merchant logo avatar: the initial shows first; the server-proxied logo image
   fades in over it once loaded (and is removed on error, revealing the initial). */
.promo-logo {
  position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  overflow: hidden; background: var(--field); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 15px;
}
.promo-logo::after { content: attr(data-initial); }
.promo-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #fff; opacity: 0; transition: opacity 0.15s ease;
}
.promo-logo.has-logo img { opacity: 1; }
.promo-main { flex: 1 1 240px; min-width: 0; }
.promo-merchant { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; overflow-wrap: anywhere; }
.promo-headline { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.promo-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.promo-actions .btn { padding: 6px 12px; font-size: 13px; }
/* Compact ✕ to dismiss a deal (tap fallback for the swipe). */
.promo-dismiss { padding: 6px 10px; color: var(--muted); line-height: 1; }
.promo-dismiss:hover { color: var(--ink); }

/* ── First-run preview (example task/event/draft on a brand-new dashboard) ──── */
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 10px; }
.preview-item {
  display: flex; gap: 11px; background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px;
}
.preview-ic { font-size: 19px; line-height: 1; flex: 0 0 auto; }
.preview-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; }
.preview-title { font-size: 14px; color: var(--ink); margin: 3px 0; font-weight: 600; line-height: 1.35; }
.preview-meta { font-size: 12px; color: var(--muted); }

/* ── "This week" mini-recap card ───────────────────────────────────────────── */
/* Full-width horizontal recap strip: headline · meta · chips on one line, wrapping
   on narrow screens, so the wide card reads as a compact stat bar (not a tall box). */
#weekBody { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 6px; }
.week-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.week-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--accent); }
.week-label { font-size: 15px; color: var(--ink); }
.week-delta { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; }
.week-delta.up { color: var(--good); }
.week-delta.down { color: var(--muted); }
.week-delta.same { color: var(--muted); }
.week-meta { font-size: 13px; color: var(--muted); margin: 0; }
.week-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.week-chip { font-size: 13px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

/* "What LAura created" high-level summary on the dashboard (what by type + where
   by mailbox); the full list lives on the /created.html drilldown. */
.activity-summary { display: flex; flex-direction: column; gap: 12px; }
.activity-where { display: flex; flex-wrap: wrap; gap: 8px; }
.activity-where .mbox { margin-left: 0; }
.card-clickable { cursor: pointer; transition: border-color 0.12s ease; }
.card-clickable:hover { border-color: var(--line-2); }

/* ── Assistant status ──────────────────────────────────────────────────────── */
/* State pill: a dot + label. Green when active, muted when paused. */
.state-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.state-pill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.state-pill.on { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }
.state-pill.off { background: var(--accent-soft); color: var(--muted); border: 1px solid var(--line); }
/* Scannable label/value rows (Mailboxes, Last check, How it acts). */
.status-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 14px 0 2px; font-size: 14px; }
.status-grid dt { color: var(--muted); font-weight: 600; }
.status-grid dd { margin: 0; color: var(--ink); }
.status-grid dd a { color: var(--accent); }
.status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
[dir="rtl"] .status-grid dt { text-align: right; }

/* ── Table ───────────────────────────────────────────────────────────────── */
/* Wrapper so a wide data table scrolls horizontally on small screens instead of
   widening the whole page. Harmless on desktop (the table fits, no scrollbar). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pill.brand { background: var(--grad); color: #fff; border: 1px solid transparent; }
.pill.ok { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }
.pill.err { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }

/* ── Danger zone ─────────────────────────────────────────────────────────── */
.danger-zone { border-color: var(--danger-line); }
.danger-zone h2 { color: var(--danger); }
.danger-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.danger-actions > div { flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 18, 0.66);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1000;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow-lg);
}
.modal h3 { margin-top: 0; color: var(--danger); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
/* "Don't show this again" style checkbox inside a dialog. */
.modal-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
.modal-check input { width: auto; margin: 0; }

/* ── Guided tour (tour.js) ─────────────────────────────────────────────────── */
/* Full-screen click shield so the page can't be interacted with mid-tour; the
   dimming itself comes from the spotlight hole's huge box-shadow. */
.tour-block { position: fixed; inset: 0; z-index: 1200; }
.tour-hole {
  position: fixed; z-index: 1201; border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(5, 8, 18, 0.72), var(--ring);
  pointer-events: none; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-pop {
  position: fixed; z-index: 1202; width: min(360px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-lg);
  transition: left .18s ease, top .18s ease;
}
.tour-step { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent); margin-bottom: 6px; }
.tour-title { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.tour-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-actions .tour-spacer { flex: 1; }
.tour-actions .btn { padding: 8px 15px; font-size: 14px; }
.tour-skip { padding-left: 4px !important; padding-right: 4px !important; }
@media (max-width: 560px) {
  .tour-pop { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-pop { transition: none; }
}

/* ── Misc ────────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.center { text-align: center; }

/* "Which mailbox" indicator on created items. */
.mbox {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; color: var(--muted); background: var(--field);
  border: 1px solid var(--line); vertical-align: middle; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}

/* Created-item rows (shared: "What LAura created", review, insights, dashboard
   activity). Resting state = icon + title + mailbox; actions reveal on hover. */
ul:has(> li.citem) { list-style: none; margin: 4px 0; padding: 0; }
li.citem {
  list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 12px; border-radius: 8px; font-size: 14px;
  transition: background 0.12s ease;
}
/* A divider between rows so the list reads like a mailbox: clear separation,
   and on mobile where a row wraps to two lines it's obvious where one item ends
   and the next begins. */
ul:has(> li.citem) > li.citem + li.citem { border-top: 1px solid var(--line); }
li.citem:hover { background: var(--card-2); }
li.citem.peekable { cursor: pointer; }

/* Origin-email summary: floating box on hover, and an on-page overlay on click. */
.summary-peek {
  position: absolute; z-index: 60; max-width: 360px;
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); pointer-events: none;
}
.summary-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: flex-start; justify-content: center;
  background: rgba(5, 8, 20, 0.55); padding: 12vh 16px 16px;
}
.summary-overlay-box {
  position: relative; width: 100%; max-width: 560px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 20px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.summary-overlay-title { font-weight: 700; font-size: 15px; margin: 0 24px 8px 0; color: var(--ink); }
.summary-overlay-body { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
/* The item's actions, copied from its row so it can be acted on right here. */
.summary-overlay-acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px;
}
.summary-overlay-acts a { color: var(--accent); }
.summary-overlay-acts a:hover { color: var(--accent-ink); }
.summary-overlay-acts a.undo-link:hover { color: var(--danger); }
.summary-overlay-acts .rowfb { display: inline-flex; gap: 8px; }
.summary-overlay-acts .rowfb a { text-decoration: none; font-size: 16px; }
/* Preview / rephrase output shown inside the box (below the actions). */
.summary-overlay-result { margin-top: 12px; }
.summary-overlay-result .draft-preview { margin: 0; max-height: 240px; overflow: auto; }
/* The refine bar sits under the preview, so its space goes above it. */
.summary-overlay-result .refine-bar { margin: 10px 0 0; }
.summary-overlay-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.summary-overlay-close:hover { color: var(--ink); }
li.citem.is-undone { opacity: 0.55; }
.citem .ic { flex: 0 0 auto; width: 18px; text-align: center; color: var(--muted); }
.citem .ic.task { color: #34d399; }
.citem .ic.event { color: var(--accent); }
.citem .ic.draft { color: #c084fc; }
.citem .citem-star { flex: 0 0 auto; }
.citem .ctitle { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Subject/context after a draft's "Reply to X" title, muted so the recipient
   still reads first. Shares the ctitle's ellipsis by living inside it. */
.citem .ctitle .csub { color: var(--muted); }
.citem .cwarn { flex: 0 0 auto; color: var(--danger); font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citem .cright { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.citem .cright .mbox { margin-left: 0; }
.citem .ctag { font-size: 11px; color: var(--muted); }
.citem .rowacts {
  display: flex; align-items: center; gap: 12px; font-size: 13px; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s ease;
}
.citem:hover .rowacts, .citem:focus-within .rowacts { opacity: 1; }
.citem .rowacts a { color: var(--muted); }
.citem .rowacts a:hover { color: var(--ink); }
.citem .rowacts a.undo-link:hover { color: var(--danger); }
.citem .rowacts .rowfb a { text-decoration: none; }
/* Inline extras (rephrase bar / draft preview) wrap to their own line below. */
.citem .refine-bar, .citem .draft-preview { flex: 0 0 100%; }
@media (hover: none) { .citem .rowacts { opacity: 1; } }
/* On phones the action cluster (send / rephrase / undo / 👍👎 + mailbox tag) is
   too wide to sit beside the title, so it overflowed to the screen edge. Give
   the title its own line and let the actions wrap below, inside the card. */
@media (max-width: 560px) {
  /* Keep the type icon inline with the title on line 1; only the action cluster
     (.cright) drops to its own line below. Forcing the title to 100% width used
     to bump it under the icon, so the icon appeared alone on top of the row. */
  .citem .cright { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
  .citem .rowacts { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
}
/* Inline preview of a (re)phrased draft body. */
.draft-preview {
  margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px;
  background: var(--field); border: 1px solid var(--line);
  color: var(--ink); font-size: 12px; white-space: pre-wrap; line-height: 1.45;
}
/* Gmail-style "Refine" preset buttons for rewriting a drafted reply. */
.refine-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.refine-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.refine-btn { padding: 3px 10px; font-size: 12px; border-radius: 999px; }
/* "Scanning your inbox" row on the first-run card. */
.scanning-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; color: var(--accent); font-size: 13px; font-weight: 600; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: laura-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes laura-spin { to { transform: rotate(360deg); } }
[dir="rtl"] .scanning-note { flex-direction: row-reverse; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: linear-gradient(180deg, #1b2444, #141b34); color: #f4f6fc; border: 1px solid var(--line-2);
  padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: 14px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Undo snackbar: acts-now feedback with a live "Undo" and a shrinking timer
   bar, like a mailbox. Dark on both themes (reads as an overlay), sits above
   the toast slot so the two don't collide. */
.undo-snackbar {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px);
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #1b2444, #141b34); color: #f4f6fc;
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: 11px 12px 11px 18px; box-shadow: var(--shadow-lg);
  font-size: 14px; z-index: 70; opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-width: min(92vw, 460px); overflow: hidden;
}
.undo-snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.undo-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-action {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 14px; padding: 4px 8px; border-radius: 8px;
}
.undo-action:hover { background: rgba(255, 255, 255, 0.08); color: #dfe4ff; text-decoration: none; }
.undo-action:focus-visible { outline: none; box-shadow: var(--ring); }
/* The timer: a full-width bar under the snackbar that shrinks to zero over the
   Undo window, so the remaining time is visible. */
.undo-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left; transform: scaleX(1);
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
[dir="rtl"] .undo-progress { transform-origin: right; }
@media (prefers-reduced-motion: reduce) {
  .undo-snackbar { transition: opacity 0.18s ease; }
  .undo-progress { display: none; }
}

/* Icon-only feedback launcher (a round floating button), small so it doesn't
   crowd the Undo snackbar. It lifts above the snackbar while that's showing. */
.fb-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  width: 48px; height: 48px; min-width: 0; padding: 0; border-radius: 50%;
  font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: transform 0.18s ease;
}
[dir="rtl"] .fb-launcher { right: auto; left: 20px; }
body:has(.undo-snackbar.show) .fb-launcher { transform: translateY(-64px); }
@media (prefers-reduced-motion: reduce) { .fb-launcher { transition: none; } }
.footer { text-align: center; color: var(--faint); font-size: 13px; padding: 48px 0; }
.policy h2 { margin-top: 28px; font-size: 18px; }
.policy pre, .policy p { white-space: pre-wrap; font-family: inherit; font-size: 15px; }

/* ── Marketing sections ──────────────────────────────────────────────────── */
.section { padding: 52px 0; border-top: 1px solid var(--line); }
.eyebrow { text-transform: uppercase; letter-spacing: 1.4px; font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 10px; }
.section h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.12; letter-spacing: -0.7px; margin: 0 0 12px; font-weight: 800; }
.section .lead { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0; }
.section.center .lead { margin-left: auto; margin-right: auto; }

/* Numbered how-it-works steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.step {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.step .num {
  width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 14px;
  box-shadow: var(--glow);
}
.step b { display: block; margin-bottom: 5px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* Feature cards */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.feature {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.feature:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.feature .ic {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 13px; background: var(--accent-soft); border: 1px solid var(--line); font-size: 22px; line-height: 1;
}
.feature b { display: block; margin: 14px 0 5px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

/* FAQ accordion */
.faq { display: grid; gap: 10px; margin-top: 28px; }
.faq details {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 20px; box-shadow: var(--shadow);
  transition: border-color 0.18s ease;
}
.faq details[open] { border-color: var(--line-2); }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.quote {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.quote:hover { transform: translateY(-3px); border-color: var(--line-2); }
.quote-mark { font-size: 30px; line-height: 0.6; color: var(--accent); height: 14px; }
.quote-body { margin: 0; font-size: 15px; line-height: 1.6; color: #dfe4f2; }
.quote-author { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.quote-avatar {
  width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.quote-name { font-weight: 600; font-size: 14px; }
.quote-role { font-size: 13px; color: var(--muted); }
.illus-tag {
  display: inline-block; margin-top: 8px; font-size: 12px; color: var(--faint);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 4px 12px;
}

/* Two-column check list */
.checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.checklist li { position: relative; padding-left: 28px; font-size: 15px; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; color: var(--good); font-weight: 800; font-size: 13px;
  width: 18px; height: 18px; border-radius: 6px; background: var(--good-bg); display: inline-flex;
  align-items: center; justify-content: center;
}

/* ── Settings: collapsible section-cards ─────────────────────────────────── */
.settings-head { margin: 6px 0 16px; }
.settings-head h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.4px; }
.settings-head p { margin: 0; }

/* Settings page: a denser, calmer layout so the page reads as a short scannable
   list rather than a wall. Scoped to .settings-page so other pages' cards keep
   their roomier spacing. */
.settings-page .card { padding: 16px 18px; margin-bottom: 10px; }
.settings-page .card h2 { font-size: 17px; }
.settings-page .card > .muted { font-size: 12.5px; line-height: 1.5; }
.settings-page .settings-head { margin: 24px 0 10px; }
.settings-page .settings-head h2 { font-size: 18px; }
.settings-page .settings-head p { font-size: 13px; }
.settings-page .set { margin-bottom: 8px; }
.settings-page .set > summary { padding: 12px 16px; gap: 12px; }
.settings-page .set-ic { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
.settings-page .set > .set-body { padding: 14px 16px 18px; }
.set {
  --set-accent: var(--accent); /* per-section colour, overridden by .set--* below */
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); margin-bottom: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.set[open] {
  border-color: color-mix(in srgb, var(--set-accent) 55%, var(--line-2));
  box-shadow: var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--set-accent) 30%, transparent),
    0 14px 32px color-mix(in srgb, var(--set-accent) 14%, transparent);
}
.set > summary {
  cursor: pointer; padding: 16px 20px; list-style: none;
  display: flex; align-items: center; gap: 14px;
}
.set > summary::-webkit-details-marker { display: none; }
.set > summary:hover .set-h b { color: #fff; }
/* Colour-tinted icon chip */
.set-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1;
  background: color-mix(in srgb, var(--set-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--set-accent) 34%, transparent);
}
.set-h { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.set-h b { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; transition: color 0.15s ease; }
.set-sub { font-size: 13px; color: var(--muted); font-weight: 400; }
.set > summary::after { content: "+"; color: var(--set-accent); font-size: 22px; font-weight: 400; line-height: 1; }
.set[open] > summary::after { content: "\2013"; }
.set > .set-body { padding: 16px 20px 22px; border-top: 1px solid var(--line); }
.set > .set-body > label:first-child { margin-top: 0; }
/* Per-section accent palette (cohesive on dark) */
.set--indigo  { --set-accent: #818cf8; }
.set--emerald { --set-accent: #34d399; }
.set--violet  { --set-accent: #c084fc; }
.set--amber   { --set-accent: #fbbf24; }
.set--sky     { --set-accent: #38bdf8; }
.set--pink    { --set-accent: #f472b6; }
.set--teal    { --set-accent: #2dd4bf; }
.set--rose    { --set-accent: #fb7185; }

@media (max-width: 640px) {
  .privacy-points, .steps, .features, .checklist, .quotes { grid-template-columns: 1fr; }
  /* Stat tiles read better two-up than as four tall stacked blocks. */
  .stats { grid-template-columns: 1fr 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 24px; }
  .section { padding: 40px 0; }
  .set > summary, .set > .set-body { padding-left: 16px; padding-right: 16px; }
  .wrap { padding: 0 16px; }

  /* Data tables (run log, admin) can't compress to phone width; tighten the
     cells so they scroll less inside .table-wrap. */
  th, td { padding: 10px 7px; }
  table { font-size: 13px; }

  /* Header: stack the brand over a wrapping nav so a long nav (landing) can't
     push the page into horizontal overflow on a phone. */
  .topbar {
    flex-wrap: wrap; gap: 10px 16px;
    padding: 16px 0 14px; margin-bottom: 24px;
  }
  .brand { font-size: 20px; }
  .nav {
    width: 100%; flex-wrap: wrap; gap: 12px 16px;
    font-size: 14px; row-gap: 12px;
  }
  /* Push the language switcher to the end of its own row for a clean break
     (landing/marketing nav, which has no hamburger). */
  .nav .langswitch { margin-left: auto; }
  [dir="rtl"] .nav .langswitch { margin-left: 0; margin-right: auto; }

  /* App pages carry a hamburger: collapse the whole nav into a dropdown behind
     it so the mobile header is just the brand + menu button (mailbox style).
     Scoped with :has so the landing nav (no button) keeps its inline wrap.
     `.topbar .nav-toggle` outranks the base `.nav-toggle{display:none}` so the
     button shows regardless of source order. */
  .topbar .nav-toggle { display: inline-flex; }
  .topbar:has(.nav-toggle) { position: relative; flex-wrap: nowrap; }
  .topbar:has(.nav-toggle) .nav {
    display: none;
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
    width: auto; min-width: 210px; max-width: min(88vw, 320px);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px;
  }
  .topbar:has(.nav-toggle).menu-open .nav { display: flex; }
  .topbar:has(.nav-toggle) .nav > a,
  .topbar:has(.nav-toggle) .nav > .theme-toggle {
    padding: 9px 10px; border-radius: 9px; font-size: 15px;
  }
  .topbar:has(.nav-toggle) .nav > a:hover,
  .topbar:has(.nav-toggle) .nav > .theme-toggle:hover { background: var(--hover-overlay); }
  /* Menu filter box: shown only inside the mobile dropdown. */
  .topbar:has(.nav-toggle) .nav > .nav-search-wrap { display: block; margin: 0 0 6px; }
  .nav-search {
    width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 15px;
    border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink);
  }
  .nav-search:focus-visible { outline: none; box-shadow: var(--ring); }
  .nav-search-none { margin: 8px 4px 2px; font-size: 14px; }
  .topbar:has(.nav-toggle) .nav .langswitch {
    margin: 4px 0 0; width: 100%; justify-content: flex-start;
    gap: 10px; padding: 10px; border-top: 1px solid var(--line);
  }
}
/* The menu filter box only exists inside the mobile hamburger dropdown. */
.nav-search-wrap { display: none; }
/* Settings filter box, under the header on the Settings page. */
.settings-search { margin: 0 0 20px; }
.settings-search-input { width: 100%; box-sizing: border-box; }
.settings-search-none { margin: 10px 2px 0; font-size: 14px; }
/* Home-tabs reorder/hide list (Settings). */
.hometabs-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hometab-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field);
}
.hometab-reorder { display: flex; gap: 4px; flex: 0 0 auto; }
.hometab-move {
  width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px;
}
.hometab-move:hover { border-color: var(--line-2); }
.hometab-move:focus-visible { outline: none; box-shadow: var(--ring); }
.hometab-move:disabled { opacity: 0.35; cursor: default; }
.hometab-name { flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.hometab-vis-l { display: flex; align-items: center; gap: 7px; margin: 0; flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.hometab-vis-l input { width: auto; accent-color: var(--brand); }
/* The hamburger itself is hidden on desktop (nav shows inline). */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 38px; padding: 0; font-size: 19px; line-height: 1;
  background: none; color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.nav-toggle:hover { background: var(--hover-overlay); border-color: var(--line-2); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Landing flourish ────────────────────────────────────────────────────── */
/* The whole app already carries the ambient glow (on body). The marketing /
   content pages add a stronger spotlight behind the hero. */
body.landing {
  background:
    radial-gradient(1100px 560px at 50% -180px, rgba(124, 92, 246, 0.22) 0%, rgba(9, 13, 26, 0) 60%),
    radial-gradient(820px 480px at 88% -8%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(820px 480px at -5% 2%, rgba(109, 111, 245, 0.12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ── Language switcher + RTL (Hebrew) ──────────────────────────────────────── */
/* Theme toggle: a compact nav control that cycles auto/light/dark. */
.theme-toggle { cursor: pointer; user-select: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.theme-toggle:hover { color: var(--ink); text-decoration: none; }
.langswitch { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.langswitch a { color: var(--muted); text-decoration: none; cursor: pointer; }
.langswitch a.lang-active { color: var(--accent); font-weight: 700; }
.langswitch .sep { color: var(--line-2, var(--line)); }

/* Hebrew is right-to-left. Most flex/grid layout mirrors automatically; these
   rules flip the directional bits (text alignment, accent markers, brand mark). */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] th,
[dir="rtl"] td { text-align: right; }
[dir="rtl"] .brand-mark { margin-right: 0; margin-left: 9px; }
[dir="rtl"] .set-h { margin-right: 0; margin-left: auto; }
[dir="rtl"] .checklist li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
[dir="rtl"] .section.center .lead { margin-left: auto; margin-right: auto; }
[dir="rtl"] ul,
[dir="rtl"] ol { padding-left: 0; padding-right: 22px; }
/* Form fields read RTL; keep email/number/url LTR (addresses + digits read
   better left-to-right) but anchored to the right edge. */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

/* ── Inbox (webmail) ─────────────────────────────────────────────────────── */
.wrap-wide { max-width: 1280px; }
nav .is-current { color: var(--accent); font-weight: 700; }

.inbox {
  display: flex;
  height: calc(100vh - 120px);
  min-height: 480px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}

/* Folders */
.inbox-side {
  flex: 0 0 220px;
  border-right: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.inbox-compose { width: 100%; }
.inbox-labels { display: flex; flex-direction: column; gap: 2px; }
.inbox-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 14px; cursor: pointer; border: none; background: none; text-align: inherit;
}
.inbox-label:hover { background: var(--card-2); }
.inbox-label.is-active { background: var(--accent-soft); font-weight: 600; }
.inbox-label .cnt { color: var(--muted); font-size: 12px; }
.inbox-label .cnt.has-unread { color: var(--accent); font-weight: 700; }

/* Thread list */
.inbox-listcol { flex: 0 0 360px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.inbox-toolbar { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.inbox-search { flex: 1; min-width: 0; }
.inbox-icon-btn { padding: 8px 10px; line-height: 1; }
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-row { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.inbox-row:hover { background: var(--card-2); }
.inbox-row.is-active { background: var(--accent-soft); }
.inbox-row.is-unread .inbox-row-from, .inbox-row.is-unread .inbox-row-subj { font-weight: 700; }
.inbox-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.inbox-row-from { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-date { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.inbox-row-subj { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-snip { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-meta { display: inline-flex; gap: 5px; align-items: center; }
.inbox-row-star { color: #fbbf24; }
.inbox-row-count { color: var(--muted); font-size: 11px; }
.inbox-list-foot { padding: 10px; text-align: center; border-top: 1px solid var(--line); }

/* Reading pane */
.inbox-read { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.inbox-read-empty { margin: auto; padding: 40px; text-align: center; }
.inbox-read-head { padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.inbox-read-subject { font-size: 18px; margin: 0 0 10px; color: var(--ink); }
.inbox-read-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inbox-read-actions .btn { padding: 6px 10px; font-size: 13px; }
.inbox-msg { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.inbox-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inbox-msg-from { font-weight: 600; color: var(--ink); font-size: 14px; }
.inbox-msg-to { color: var(--muted); font-size: 12px; margin-top: 2px; }
.inbox-msg-date { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.inbox-images-note { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 13px; color: var(--muted); }
/* Email bodies are authored for a white background, so render them on white for
   fidelity (and readability) rather than the app's dark surface. */
.mailbody { background: #fff; color: #111; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; overflow-x: auto; }
.mailbody img { max-width: 100%; height: auto; }
.mailbody a { color: #1a56db; }
.inbox-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.inbox-att { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); text-decoration: none; }
.inbox-att:hover { border-color: var(--line-2); }
.inbox-reply { padding: 16px 20px; }
.inbox-reply textarea { width: 100%; margin-bottom: 8px; }

/* Compose modal */
.inbox-compose-modal { width: min(640px, 92vw); max-width: 640px; text-align: left; }
.inbox-compose-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.inbox-compose-head h3 { margin: 0; }
.inbox-compose-fields { display: flex; flex-direction: column; gap: 8px; }
.inbox-compose-fields textarea { width: 100%; }
.inbox-compose-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

[dir="rtl"] .inbox-side { border-right: none; border-left: 1px solid var(--line); }
[dir="rtl"] .inbox-listcol { border-right: none; border-left: 1px solid var(--line); }
[dir="rtl"] .inbox-compose-modal { text-align: right; }

@media (max-width: 900px) {
  .inbox { flex-direction: column; height: auto; }
  .inbox-side { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--line); }
  .inbox-compose { width: auto; }
  .inbox-labels { flex-direction: row; flex-wrap: wrap; }
  .inbox-listcol { flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--line); max-height: 50vh; }
}

/* ── Dashboard "Worth a look" feed ────────────────────────────────────────── */
.worth-item { padding: 12px 10px; border-bottom: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; transition: background .12s ease, opacity .2s; }
.worth-item:last-child { border-bottom: none; }
.worth-item:hover { background: var(--card-2); }
/* Unread dot, like a mailbox: a small accent mark on mail you haven't handled
   here yet. It clears once the row is acted on. */
.worth-unread { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 6px; }
.worth-item.is-acted .worth-unread { visibility: hidden; }
.worth-main { flex: 1; min-width: 220px; }
.worth-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.worth-from { font-weight: 600; color: var(--ink); font-size: 14px; }
.worth-when { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.worth-subj { color: var(--ink); font-size: 13px; }
.worth-snip { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.worth-summary { margin-top: 6px; white-space: pre-wrap; font-size: 13px; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.worth-reply { flex-basis: 100%; margin-top: 6px; }
.worth-reply textarea { width: 100%; }
.worth-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.worth-actions .btn { padding: 5px 9px; font-size: 12px; }
/* A button whose action you've already taken on this item (summarize / make task)
   turns green so it's clear it was reviewed. */
.worth-actions .btn.is-reviewed { color: var(--good); border-color: var(--good-line); background: var(--good-bg); }

/* Instant filter over the loaded rows. */
.worth-search { width: 100%; margin: 4px 0 8px; padding: 7px 10px; font-size: 13px; }

/* A message you've already handled here (summarized / made a task or event /
   replied). It deliberately STAYS in the list and keeps its position — it just
   reads as done, so you can find it again instead of re-scanning similar rows. */
.worth-item.is-acted { background: var(--good-bg); border-left: 3px solid var(--good-line); padding-left: 9px; }
.worth-item.is-acted .worth-subj, .worth-item.is-acted .worth-from { opacity: .72; }
.worth-acted { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--good);
  border: 1px solid var(--good-line); background: var(--good-bg); border-radius: 999px; padding: 1px 8px; }

/* ── Mailbox-style swipe actions (touch) ───────────────────────────────────
   Additive: only touch devices reserve horizontal drags for the gesture (so a
   left/right swipe fires the mapped action), and only there does the JS wrap a
   row. Vertical scrolling and desktop hover/tap are untouched. */
@media (hover: none) and (pointer: coarse) {
  li.citem, .worth-item, .promo-item, .task-item, .draft-item { touch-action: pan-y; }
}
/* A wrapped row: its content becomes a single translatable foreground over a
   static colored background that holds the two action indicators. */
li.citem.swipe-enabled, .worth-item.swipe-enabled, .promo-item.swipe-enabled, .task-item.swipe-enabled, .draft-item.swipe-enabled { position: relative; overflow: hidden; padding: 0; }
/* Deals rows reproduce their own layout on the swipe foreground. */
.promo-item.swipe-enabled > .swipe-fg { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 13px 4px; }
.swipe-enabled > .swipe-fg {
  position: relative; z-index: 1; background: var(--card);
  transition: transform 0.18s ease; will-change: transform;
}
/* Reproduce each list's own inner layout on the foreground so the resting row
   looks identical to its un-wrapped form. */
li.citem.swipe-enabled > .swipe-fg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 12px; }
.worth-item.swipe-enabled > .swipe-fg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; width: 100%; padding: 12px 10px; }
.swipe-bg { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: space-between; align-items: stretch; }
.swipe-ind {
  flex: 1 1 50%; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 18px; color: #fff; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; opacity: 0;
}
.swipe-ind-left { justify-content: flex-start; }
.swipe-ind-right { justify-content: flex-end; }
.swipe-ind-ic { font-size: 16px; flex: 0 0 auto; }
.swipe-ind-label { overflow: hidden; text-overflow: ellipsis; }
/* Action tone = the strip color behind the row while swiping. */
.swipe-tone-danger { background: var(--danger); }
.swipe-tone-good { background: #16a34a; }
.swipe-tone-accent { background: var(--accent); }
.swipe-tone-warn { background: #d97706; }
.swipe-tone-muted { background: #64748b; }
.swipe-ind.is-armed { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
  .swipe-enabled > .swipe-fg { transition: none; }
}

/* ── Mobile home: LAura'd mailbox + Deals tab + action-square popup ─────────
   A phone-only layer over the dashboard (built by js/home-mobile.js). It turns
   "What LAura created" into a full-bleed mailbox, collapses each row's action
   links into a tappable square that opens a bottom sheet of large actions, and
   adds a LAura'd / Deals tab bar up top so deals leave the hamburger. Every
   piece is gated to <=640px, so desktop is completely untouched. */

/* Injected chrome is hidden by default (desktop + before-JS); the media query
   turns the tab bar on. The Deals panel shows only in Deals mode (allowlist). */
#mHomeTabs, #mHomePromos, #mTasksPanel, #mDraftsPanel, .laura-sq, .laura-back, #dashViewLink,
#mSearchBar, #mSearchResults { display: none; }
/* home-mobile.js injects these on every width; off the phone the wrapper is a
   no-op (its children lay out as if it weren't there) and the type label is
   hidden, so desktop rows are unchanged. The phone layout re-enables both. */
.citem-main { display: contents; }
.citem-kind { display: none; }

@media (max-width: 640px) {
  /* Tab bar: underline tabs, sits directly under the header. Four tabs, so it
     scrolls sideways rather than wrapping if they don't all fit. */
  .wrap > #mHomeTabs {
    display: flex; gap: 18px; margin: 0 0 14px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .wrap > #mHomeTabs::-webkit-scrollbar { display: none; }
  .mtab {
    appearance: none; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
    padding: 6px 2px 12px; position: relative; white-space: nowrap; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .mtab.on { color: var(--ink); }
  .mtab.on::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2.5px;
    border-radius: 2px; background: var(--grad);
  }
  .mtab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
  .mtab-count {
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
  }
  .mtab-count:empty { display: none; }

  /* LAura'd mailbox: strip the card chrome so the rows run edge to edge like a
     mail app. The tab above is the section title, so the card head is hidden. */
  #activityCard.card {
    background: none; border: 0; box-shadow: none; padding: 0;
    margin-inline: -16px; border-radius: 0;
  }
  #activityCard > .card-head { display: none; }
  #activityCard .activity-controls { padding: 0 16px 4px; margin: 0; }

  /* Rows: full-width, comfortable tap height, one clean divider between them. */
  #activityCard li.citem,
  #activityCard li.citem.swipe-enabled > .swipe-fg { padding: 14px 16px; }
  #activityCard .citem .cright { flex: 0 0 auto; margin-inline-start: auto; width: auto; }
  /* Inline action links collapse into the square; the links stay in the DOM
     (hidden) so swipe, the summary overlay, and the sheet all still fire them. */
  #activityCard .citem .rowacts { display: none !important; }
  #activityCard .citem .laura-sq { display: grid; }

  /* Events tab: no action-square. The row shows its inline 👍/👎 directly (like
     the Drafts tab), and taps train + clear behind an Undo snackbar. The other
     actions (delete, summary, respond) stay in the sheet, opened by tapping the
     row body. Event rows never get a .laura-sq injected (home-mobile.js). */
  #activityCard .citem:has(.ic.event) .rowacts { display: flex !important; align-items: center; }
  #activityCard .citem:has(.ic.event) .rowacts > :not(.rowfb) { display: none !important; }
  #activityCard .citem .rowfb { display: inline-flex; gap: 2px; }
  #activityCard .citem .rowfb a {
    font-size: 20px; line-height: 1; text-decoration: none;
    padding: 8px 8px; border-radius: 10px; -webkit-tap-highlight-color: transparent;
  }
  #activityCard .citem .rowfb a:active { transform: scale(0.9); }

  /* Rows read like the Deals cards: a tinted type-icon tile, a colored type
     label, and the title as a headline (up to two lines). home-mobile.js injects
     the label and wraps it with the title into .citem-main. Keep the row on one
     line (tile | body | square); it's the title's flex-basis, not wrapping, that
     used to blow the row up. */
  #activityCard .citem,
  #activityCard .citem.swipe-enabled > .swipe-fg { align-items: center; flex-wrap: nowrap; }
  #activityCard .citem .ic {
    width: 36px; height: 36px; border-radius: 10px; font-size: 16px;
    display: grid; place-items: center;
    background: color-mix(in srgb, currentColor 16%, transparent);
  }
  #activityCard .citem-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  #activityCard .citem-kind {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3;
  }
  /* Priority: hide the loose ⭐ (it sat before the tile and shifted the column)
     and show it on the type label instead. Desktop keeps the loose star. */
  #activityCard .citem .citem-star { display: none; }
  #activityCard .citem:has(.citem-star) .citem-kind::before { content: "⭐"; font-size: 12px; letter-spacing: 0; }
  #activityCard .citem-kind.kind-task { color: #34d399; }
  #activityCard .citem-kind.kind-event { color: var(--accent); }
  #activityCard .citem-kind.kind-draft { color: #c084fc; }
  #activityCard .citem-kind.kind-invite { color: #f59e0b; }
  #activityCard .citem .ctitle {
    flex: 0 0 auto; min-width: 0;
    white-space: normal; overflow: hidden; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  /* The Deals panel replaces the page in Deals mode. */
  .wrap > #mHomePromos.laura-deals { display: none; }
  .deals-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
  .deals-head h2 { font-size: 18px; margin: 0; font-weight: 700; }
  .deals-head .mtab-count { margin-inline-start: 2px; }
  .deals-head .btn { margin-inline-start: auto; }
  .deals-sub { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

  /* The mobile main page is a four-tab app: Tasks / Events / Drafts (all the
     created-items mailbox, type-filtered) and Promos (the deals panel).
     Everything else, the status/trial/"your data is private" banners and the
     Worth-a-look / This-week / stats / runs cards, belongs to the Dashboard,
     reached from the hamburger for now.
     The type tabs are allowlists via :not(), so #activityCard keeps its OWN
     show/hide (empty state vs first-run); dashboard is the original page with
     just the home-only chrome removed. */
  /* Gated by :not([data-home-search]) so global-search mode (below) takes over
     the layout without fighting these per-tab allowlists. */
  body[data-home-tab="tasks"]:not([data-home-search])  .wrap > *:not(.topbar):not(#mHomeTabs):not(#mTasksPanel):not(#mSearchResults):not(.footer),
  body[data-home-tab="events"]:not([data-home-search]) .wrap > *:not(.topbar):not(#mHomeTabs):not(#activityCard):not(#mSearchResults):not(.footer),
  body[data-home-tab="drafts"]:not([data-home-search]) .wrap > *:not(.topbar):not(#mHomeTabs):not(#mDraftsPanel):not(#mSearchResults):not(.footer),
  body[data-home-tab="fyi"]:not([data-home-search])    .wrap > *:not(.topbar):not(#mHomeTabs):not(#worthCard):not(#mSearchResults):not(.footer),
  body[data-home-tab="promos"]:not([data-home-search]) .wrap > *:not(.topbar):not(#mHomeTabs):not(#mHomePromos):not(#mSearchResults):not(.footer) {
    display: none !important;
  }
  body[data-home-tab="tasks"]:not([data-home-search])  .wrap > #mTasksPanel { display: block !important; }
  body[data-home-tab="drafts"]:not([data-home-search]) .wrap > #mDraftsPanel { display: block !important; }
  body[data-home-tab="promos"]:not([data-home-search]) .wrap > #mHomePromos { display: block !important; }

  /* Global-search mode: the search box stays in the top bar (a child of it), and
     EVERY other .wrap child — the tabs, the active panel, and all the dashboard
     cards the per-tab allowlist normally hides — steps aside so only the
     consolidated results show. An allowlist (not a fixed id list) so new
     dashboard cards can't leak into the results view. */
  #mSearchResults { display: none; }
  body[data-home-search] .wrap > *:not(.topbar):not(#mSearchResults):not(.footer) { display: none !important; }
  body[data-home-search] .wrap > #mSearchResults { display: block !important; }

  /* The search box sits as a full-width second row of the header. */
  .topbar:has(#mSearchBar) { flex-wrap: wrap; row-gap: 10px; }
  #mSearchBar { display: flex; flex: 0 0 100%; order: 5; gap: 8px; align-items: center; }
  #mSearchInput {
    flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 15px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
  }
  #mSearchInput:focus-visible { outline: none; box-shadow: var(--ring); }
  #mSearchClear {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0; font-size: 15px; cursor: pointer;
    background: var(--card-2); color: var(--muted); border: 1px solid var(--line); border-radius: 10px;
  }
  #mSearchClear:focus-visible { outline: none; box-shadow: var(--ring); }
  /* Consolidated results: one flat list of matching items. */
  #mSearchResults { padding: 8px 0; }
  .search-result {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
    text-align: start; cursor: pointer; font-family: inherit;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  }
  .search-result:active { background: var(--card-2); }
  .search-result:focus-visible { outline: none; box-shadow: var(--ring); }
  .search-result .citem-kind { display: inline; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
  .search-result .citem-kind.kind-task { color: #34d399; }
  .search-result .citem-kind.kind-event { color: var(--accent); }
  .search-result .citem-kind.kind-draft { color: #c084fc; }
  .search-result-t { font-size: 15px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
  .search-empty { margin-top: 22px; }

  /* FYI tab = the Worth-a-look triage card, presented as a full-bleed mailbox:
     card chrome off, body forced open, rows get the action square (which fires
     the row's existing worth actions), and the button row is hidden. */
  body[data-home-tab="fyi"] #worthCard.card { background: none; border: 0; box-shadow: none; padding: 0; margin-inline: -16px; border-radius: 0; }
  body[data-home-tab="fyi"] #worthToggle { display: none; }
  body[data-home-tab="fyi"] #worthBody { display: block !important; }
  body[data-home-tab="fyi"] .worth-search { margin: 8px 16px; width: auto; }
  /* The whole FYI row is the tap target now (opens the action sheet); no square. */
  body[data-home-tab="fyi"] .worth-item { padding: 13px 16px; align-items: center; cursor: pointer; }
  body[data-home-tab="fyi"] .worth-item .worth-actions { display: none; }
  body[data-home-tab="fyi"] .worth-item .worth-main { flex: 1 1 auto; min-width: 0; }
  body[data-home-tab="fyi"] .worth-item.swipe-enabled > .swipe-fg { align-items: center; }

  /* Events shows only its own rows (Tasks + Drafts have their own live panels).
     The type lives on the row's icon (.ic.event); hide the rest, and the group
     headers + group-by-type toggle (the tabs group already). */
  body[data-home-tab="events"] #activityList .citem:not(:has(.ic.event)) { display: none !important; }
  #activityCard .activity-controls,
  #activityCard .citem-group-head { display: none !important; }
  #mTypeEmpty { margin: 20px 16px; text-align: center; }

  /* Dashboard view: the full page, minus the mailbox, Deals panel, and tabs.
     A back link returns to the LAura'd home. */
  body[data-home-tab="dashboard"] .wrap > #mHomeTabs,
  body[data-home-tab="dashboard"] .wrap > #activityCard,
  body[data-home-tab="dashboard"] .wrap > #mTasksPanel,
  body[data-home-tab="dashboard"] .wrap > #mDraftsPanel,
  body[data-home-tab="dashboard"] .wrap > #mHomePromos { display: none !important; }
  body[data-home-tab="dashboard"] .wrap > .laura-back { display: inline-block; }

  /* Tasks manager (Tasks tab): full-bleed like the mailbox. */
  #mTasksPanel { margin-inline: -16px; }
  .task-add { display: flex; gap: 8px; margin: 0 16px 12px; }
  .task-add input { flex: 1 1 auto; min-width: 0; }
  .task-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -2px 16px 10px; }
  .task-sort-bar .task-sort-l { font-size: 13px; color: var(--muted); }
  .task-sort { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--field); color: var(--ink); border: 1px solid var(--line); }
  #mTasksEmpty { margin: 20px 16px; text-align: center; }
  .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .task-check {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--line-2); background: var(--field); cursor: pointer; padding: 0;
  }
  .task-check:active { background: var(--card-2); }
  .task-check:focus-visible { outline: none; box-shadow: var(--ring); }
  .task-main { flex: 1 1 auto; min-width: 0; }
  .task-title { font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
  .task-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; margin-top: 2px; }
  .task-due { font-size: 12px; color: var(--muted); }
  .task-acct { font-size: 11px; color: var(--faint); }
  .task-del { flex: 0 0 auto; background: none; border: 0; color: var(--faint); font-size: 15px; cursor: pointer; padding: 6px 8px; }
  .task-del:active { color: var(--danger); }
  .task-item.swipe-enabled > .swipe-fg { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }

  /* Task detail sheet (tap a task): name + details, the origin, and actions. */
  .task-sheet { display: flex; flex-direction: column; gap: 10px; }
  .task-sheet .ts-title { font-size: 16px; font-weight: 600; }
  .task-sheet .ts-notes { width: 100%; resize: vertical; min-height: 64px; font-family: inherit; }
  .task-sheet .ts-field { display: flex; align-items: center; gap: 10px; }
  .task-sheet .ts-field label { font-size: 13px; color: var(--muted); }
  .task-sheet .ts-origin { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .task-sheet .ts-origin-head { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .task-sheet .ts-from, .task-sheet .ts-subj { font-size: 13.5px; overflow-wrap: anywhere; }
  .task-sheet .ts-from { color: var(--ink); }
  .task-sheet .ts-subj { color: var(--muted); }
  .task-sheet .ts-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
  .task-sheet .ts-links a { color: var(--accent); font-size: 14px; font-weight: 600; }
  .task-sheet .ts-actions { display: flex; gap: 8px; margin-top: 4px; }
  .task-sheet .ts-actions .btn { flex: 1 1 auto; }
  .task-sheet .ts-delete { color: var(--danger); flex: 0 0 auto; }

  /* Drafts manager (Drafts tab): full-bleed like the mailbox + Tasks. */
  #mDraftsPanel { margin-inline: -16px; }
  #mDraftsEmpty { margin: 20px 16px; text-align: center; }
  .draft-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
  .draft-main { flex: 1 1 auto; min-width: 0; }
  .draft-title { font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
  .draft-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; margin-top: 2px; }
  .draft-to { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
  .draft-acct { font-size: 11px; color: var(--faint); }
  .draft-snip { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .draft-acts { flex: 0 0 auto; display: flex; gap: 2px; }
  .draft-good, .draft-notthis { background: none; border: 0; font-size: 17px; line-height: 1; cursor: pointer; padding: 6px 6px; opacity: 0.85; -webkit-tap-highlight-color: transparent; }
  .draft-good:active, .draft-notthis:active { opacity: 1; transform: scale(0.9); }
  .draft-item.swipe-enabled > .swipe-fg { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
  /* Tapping a draft opens the SHARED action sheet (laura-sheet), same as created
     items + FYI; the reply body is its pull-up-expand content. No bespoke sheet. */

  /* The hamburger's "Dashboard" entry only makes sense on the phone layout. */
  .topbar:has(.nav-toggle) #dashViewLink { display: block; }
}

/* Pull-to-refresh indicator (home-mobile.js): a small spinner that follows the
   pull from the top of the page, then spins while a scan/refresh runs. */
.ptr-indicator {
  position: fixed; top: 10px; left: 50%; z-index: 260;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  display: grid; place-items: center;
  transform: translate(-50%, -48px); opacity: 0; pointer-events: none;
}
.ptr-indicator .ptr-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--accent);
}
.ptr-indicator.ready { border-color: var(--accent); }
.ptr-indicator.refreshing .ptr-spin { animation: ptr-rotate 0.8s linear infinite; }
@keyframes ptr-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator.refreshing .ptr-spin { animation-duration: 1.6s; }
}

/* The action square: a 2x2 mini-grid of glyphs that reads as "actions here".
   Sized as a comfortable tap target; visible only on phones (rule above). */
.laura-sq {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--field);
  cursor: pointer; place-items: center; color: var(--muted);
}
.laura-sq:active { background: var(--card-2); }
.laura-sq:focus-visible { outline: none; box-shadow: var(--ring); }
.laura-sq-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px; width: 20px; height: 20px;
}
.laura-sq-grid span {
  font-size: 9px; line-height: 1; display: grid; place-items: center;
}

/* Bottom-sheet action popup (built once, reused). Fixed overlay + slide-up. */
.laura-sheet-wrap {
  position: fixed; inset: 0; z-index: 220; display: none;
}
.laura-sheet-wrap.open { display: block; }
/* While any bottom sheet is open, lock the page so a vertical drag can't scroll
   the list behind it (or arm pull-to-refresh — also guarded in JS). */
body:has(.laura-sheet-wrap.open) { overflow: hidden; }
.laura-sheet-scrim {
  position: absolute; inset: 0; background: rgba(4, 7, 16, 0.6);
  opacity: 0; transition: opacity 0.2s ease;
  touch-action: none; /* the backdrop never scrolls the page behind it */
}
.laura-sheet-wrap.open .laura-sheet-scrim { opacity: 1; }
.laura-sheet {
  position: absolute; inset-inline: 0; bottom: 0;
  background: var(--card); border-top: 1px solid var(--line-2);
  border-radius: 18px 18px 0 0; padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  max-height: 82vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.laura-sheet-wrap.open .laura-sheet { transform: translateY(0); }
.laura-sheet-grab {
  width: 38px; height: 4px; border-radius: 2px; background: var(--line-2);
  margin: 6px auto 12px;
}
/* When an item has a summary to show, the grab handle hints "pull up". */
.laura-sheet-wrap.can-expand:not(.expanded) .laura-sheet-grab { background: var(--accent); }
/* Invitation conflict status line in the action sheet. */
.laura-sheet-conflict {
  font-size: 13.5px; font-weight: 600; margin: 6px 0 2px;
  padding: 8px 12px; border-radius: 10px;
}
.laura-sheet-conflict.has-conflict { color: #b45309; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); }
.laura-sheet-conflict.no-conflict { color: var(--good); background: var(--field); border: 1px solid var(--line); }
/* Summary reveal: a TAPPABLE pill (also drag-up), shown only when the sheet can
   expand and hasn't. It reads like a button so people tap it to get the summary. */
.laura-sheet-hint {
  display: none; cursor: pointer; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--accent);
  width: fit-content; margin: 2px auto 12px; padding: 9px 18px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--field);
  -webkit-tap-highlight-color: transparent;
}
.laura-sheet-hint:active { background: var(--card-2); }
.laura-sheet-hint:focus-visible { outline: none; box-shadow: var(--ring); }
.laura-sheet-wrap.can-expand:not(.expanded) .laura-sheet-hint { display: block; }
/* Origin-email summary, revealed when the sheet is expanded. */
.laura-sheet-summary { display: none; margin: 2px 0 12px; }
.laura-sheet-wrap.expanded .laura-sheet-summary { display: block; }
.laura-sheet-summary-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
.laura-sheet-summary-body {
  font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere;
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; max-height: 42vh; overflow-y: auto; white-space: pre-wrap;
}
/* Editable reply box (drafts): rewrite the reply in place, then Save. */
.laura-sheet-summary-body.editable { outline: none; }
.laura-sheet-summary-body.editable:focus { border-color: var(--accent); box-shadow: var(--ring); }
.laura-sheet-summary-save { margin-top: 10px; width: 100%; }
.laura-sheet-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.laura-sheet-head .ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--card-2); font-size: 15px;
}
.laura-sheet-title {
  font-size: 15px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.laura-sheet-acts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-top: 14px;
}
.laura-act {
  appearance: none; border: 1px solid var(--line); background: var(--field);
  border-radius: 12px; padding: 12px 4px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.laura-act:active { background: var(--card-2); }
.laura-act:focus-visible { outline: none; box-shadow: var(--ring); }
.laura-act .laura-act-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; background: var(--card-2); color: var(--ink);
}
.laura-act .laura-act-l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: center; }
.laura-act.tone-send .laura-act-ic { background: var(--grad); color: #fff; }
.laura-act.tone-good .laura-act-ic { color: var(--good); }
.laura-act.tone-warn .laura-act-ic { color: #f59e0b; }
.laura-act.tone-danger .laura-act-ic { color: var(--danger); }
/* "Not this" why-chooser: three big, one-tap reasons stacked full width. */
.why-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.why-btn {
  appearance: none; width: 100%; text-align: start; cursor: pointer; font-family: inherit;
  padding: 15px 16px; font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 14px;
}
.why-btn:active { background: var(--card-2); }
.why-btn:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) {
  .laura-sheet, .laura-sheet-scrim { transition: none; }
}