/* ============================================================
   LEO — Bennie-inspired design system
   Display: Averia Libre  ·  Labels/UI: Fragment Mono  ·  Body: Helvetica Neue
   ============================================================ */
:root {
  --cream: #FFFEF5;
  --ink: #151414;
  --red: #EB2832;
  --yellow: #EEE272;
  --blue: #356CC0;
  --white: #ffffff;
  --soft: rgba(21,20,20,.62);
  --line: rgba(21,20,20,.14);
  --radius: 14px;
  --shadow: 0 14px 40px rgba(21,20,20,.10);
  --display: "Averia Libre", Georgia, serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad-x: clamp(20px, 6vw, 88px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  overflow-x: clip;
}
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }

/* ---------- TYPE PRIMITIVES ---------- */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .8rem;
  font-weight: 400;
  color: var(--soft);
  margin: 0 0 18px;
}
/* eyebrows: no leading bullet (cleaner over the photo bands & heroes) */
.eyebrow.light { color: rgba(255,255,255,.85); }

/* ---------- BUTTONS / PILLS ---------- */
.btn {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  border: none;
  border-radius: 12px;
  padding: 16px 26px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  color: var(--white);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-red { background: var(--red); }
.btn-blue { background: var(--blue); }
.btn-ink { background: var(--ink); }
.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- DOTS ---------- */
.dot { position: absolute; border-radius: 50%; display: block; z-index: 2; }
.d-red { background: var(--red); }
.d-yellow { background: var(--yellow); }
.d-blue { background: var(--blue); }
.d-white { background: var(--cream); }

/* ============================================================
   LOGIN
   ============================================================ */
.login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  position: relative; overflow: hidden;
}
.login-dots { position: absolute; inset: 0; overflow: hidden; }
.login-dots .dot { display: block; }
.login-dots .d-red { top: 9%; left: 11%; width: 84px; height: 84px; }
.login-dots .d-yellow { bottom: 12%; right: 9%; width: 150px; height: 150px; }
.login-dots .d-blue { top: 24%; right: 14%; width: 56px; height: 56px; }
.login-dots .d-red.small { top: 34%; left: 19%; bottom: auto; width: 44px; height: 44px; }
.login-dots .d-yellow.small { top: 64%; left: 6%; width: 30px; height: 30px; }
.login-card {
  position: relative; z-index: 3;
  background: var(--white);
  border-radius: 24px;
  padding: 48px 38px;
  max-width: 460px; width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.6rem, 17vw, 5.6rem);
  margin: 0 0 16px;
  line-height: .95;
}
.login-sub { color: var(--soft); margin: 0 0 28px; font-size: 1.04rem; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
.login-card input {
  font-family: var(--body);
  font-size: 1.05rem;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  text-align: center;
  outline: none;
}
.login-card input:focus { border-color: var(--blue); }
.login-err { color: var(--red); font-weight: 600; min-height: 1.2em; margin: 14px 0 0; }
.login-private { color: var(--soft); font-size: .82rem; line-height: 1.5; margin: 22px 0 0; }
.login-private a { color: var(--blue); text-decoration: none; }
.pg-form { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
   TOPBAR  (cream, Fragment Mono nav with bullet separators)
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 14px var(--pad-x);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.8rem;
  display: flex; align-items: center; gap: 5px;
  line-height: 1;
}
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; align-self: flex-end; margin-bottom: .28em; }
.nav { display: flex; align-items: center; margin-left: 8px; position: relative; top: 4px; }
.nav a {
  font-family: var(--mono);
  font-weight: 400; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink);
  transition: color .12s, opacity .12s; opacity: .85;
}
.nav a:hover { opacity: 1; }
.nav a.active { color: var(--red); opacity: 1; }
.nav a + a { margin-left: 26px; position: relative; }
.nav a + a::before { content: "\2022"; color: var(--red); position: absolute; left: -16px; }

/* World clocks = compact pills tucked into the top-right of the header */
.wc-track {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-width: 60%;
}
.wc-track::-webkit-scrollbar { display: none; }
.wc-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
}
.wc-pill.wc-home { background: var(--yellow); border-color: transparent; }
.wc-pill.wc-you { background: transparent; border-style: dashed; border-color: var(--line); }
.wc-flag { font-size: .9rem; line-height: 1; }
.wc-label { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); white-space: nowrap; }
.wc-time { font-family: var(--mono); font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.wc-pill.wc-home .wc-label { color: rgba(21,20,20,.7); }

/* ============================================================
   FULL-BLEED HERO  (tall colour block, inset frame, scattered dots)
   ============================================================ */
.view { width: 100%; }
.hero {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--white);
  padding: 76px var(--pad-x) 84px;
  text-align: center;
  overflow: visible;
}
.hero-timeline { background: var(--blue); min-height: 42vh; padding-top: 52px; padding-bottom: 56px; }
.hero-letterbox { background: var(--ink); }
.hero-family { background: var(--yellow); color: var(--ink); min-height: 42vh; padding-top: 52px; padding-bottom: 56px; }
.hero-family .eyebrow.light, .hero-family .hero-parents { color: rgba(21,20,20,.72); }
.hero-family .hero-frame { border-color: rgba(21,20,20,.45); }
.hero-guide { background: var(--red); }

/* ---------- FAMILY GUIDE ---------- */
.gd-intro { max-width: 620px; margin: 0 auto 30px; text-align: center; font-size: 1.12rem; }
.gd-step { display: flex; gap: 18px; align-items: flex-start; background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 24px; margin: 0 auto 16px; max-width: 620px; }
.gd-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; }
.gd-step:nth-child(3n) .gd-num { background: var(--blue); }
.gd-step:nth-child(3n+1) .gd-num { background: var(--yellow); color: var(--ink); }
.gd-step h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 4px 0 6px; }
.gd-step p { margin: 0; line-height: 1.55; color: var(--ink); }
.gd-tip { max-width: 620px; margin: 24px auto 0; background: var(--cream); border: 2px dashed var(--line); border-radius: 14px; padding: 18px 22px; line-height: 1.55; }
.gd-cta-row { text-align: center; margin: 28px auto 0; }
.gd-cta-row .btn { display: inline-block; }
/* inset rounded frame, like Bennie */
.hero-frame {
  position: absolute; inset: 16px;
  border: 1.5px solid rgba(255,254,245,.85);
  border-radius: 16px;
  pointer-events: none; z-index: 4;
}
.hero-inner { max-width: 760px; position: relative; z-index: 5; }
.hero-dots { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
/* big dot straddles the bottom edge: overlaps the inset frame line AND bleeds into the cream module below */
.hero .dot-a { width: 150px; height: 150px; bottom: -64px; left: 8%; z-index: 6; }
.hero .dot-b { width: 84px; height: 84px; bottom: 14%; right: 11%; }
.hero .dot-c { width: 120px; height: 120px; top: 18%; right: -38px; z-index: 6; }
.hero .dot-d { width: 46px; height: 46px; top: 16%; left: 14%; }
.hero-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.8rem, 10vw, 5rem);
  line-height: 1.02; margin: 14px 0 14px; letter-spacing: 0;
}
.hero-parents { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .8rem; margin: 0 0 30px; color: rgba(255,255,255,.85); opacity: 1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.age-pill, .hero-cta {
  display: inline-block;
  background: transparent; color: var(--white);
  font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: 0;
  text-transform: none;
  padding: 14px 28px; border: 1.5px solid rgba(255,255,255,.92); border-radius: 12px;
  box-shadow: none;
}
.hero-cta { transition: background .14s ease, color .14s ease; }
.hero-cta:hover { background: var(--white); color: var(--ink); }

/* ============================================================
   FULL-BLEED SPLIT "CROSS SECTION" BAND  (colour half + art half)
   ============================================================ */
.band {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 56vh;
  overflow: hidden;
}
.band-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px var(--pad-x);
  position: relative; z-index: 2;
}
.band-yellow .band-text { background: var(--yellow); color: var(--ink); }
.band-blue .band-text { background: var(--blue); color: var(--white); }
.band-red .band-text { background: var(--red); color: var(--white); }
.band-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.04; margin: 6px 0 14px;
}
.band-copy { font-size: 1.05rem; max-width: 38ch; margin: 0; opacity: .92; }
.band-art { position: relative; overflow: hidden; min-height: 56vh; background: var(--ink); }
.band-flip .band-text { order: 2; }
.band-flip .band-art { order: 1; }
/* Solo band (no photo): full-width, shorter, content in a comfortable centred column */
.band-solo { grid-template-columns: 1fr; min-height: 0; }
.band-solo .band-text { padding: 52px var(--pad-x); align-items: center; text-align: center; }
.band-solo .band-copy { max-width: 46ch; }
.band-solo .email-mount { width: 100%; max-width: 620px; margin-top: 26px; }
.band-art img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }

@media (max-width: 720px) {
  .band { grid-template-columns: 1fr; min-height: 0; }
  .band-art { min-height: 320px; }
  .band-flip .band-text { order: 2; }
  .band-flip .band-art { order: 1; }
}

/* ============================================================
   CONTENT SECTIONS  (sit on cream, centred column)
   ============================================================ */
.section {
  padding: 64px var(--pad-x);
}
.section-cream { background: var(--cream); }
.intro-section { position: relative; padding-top: 52px; padding-bottom: 40px; }
.wrap { max-width: 680px; margin: 0 auto; }

/* two-column welcome: text left, composer right (stacks on mobile).
   Equal height (stretch) so the two cards' bottoms line up; the welcome's rows
   spread to fill the extra height so there's no dead gap at the bottom. */
.intro-grid {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch;
}
.intro-left { align-self: stretch; display: flex; }
.intro-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow);
  padding: 28px 28px 30px;
}
.intro-body { display: flex; flex-direction: column; flex: 1; }
/* Leo circle photo replaces the yellow dot: straddles the red hero's bottom edge
   and bleeds into the cream below (same spot the yellow circle used to sit). */
.hero-photo {
  position: absolute; z-index: 6;
  width: 150px; height: 150px; bottom: -64px; left: 8%;
  object-fit: cover; object-position: 50% 38%;
  border-radius: 50%; box-shadow: 0 10px 26px rgba(21,20,20,.22);
}
.intro-left .eyebrow { margin-bottom: 10px; }
/* Welcome header lines up with the composer title (same margins + size) */
.intro-card .intro-kicker { margin: 4px 0 10px; }
.intro-copy { color: var(--soft); margin: 0; font-size: .9rem; line-height: 1.55; max-width: 42ch; }
/* Intro lead sits in its own soft-yellow module */
.intro-lead { margin: 0 0 4px; font-size: .88rem; line-height: 1.5;
  background: var(--yellow); color: var(--ink); border-radius: 12px; padding: 12px 15px; }
/* Scannable icon rows (replaces the dense bullet list). Sit in their own soft-blue
   module and grow to fill the card so the welcome height matches the taller composer. */
.intro-points { list-style: none; margin: 14px 0 0; padding: 16px 18px; display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 12px;
  background: rgba(53,108,192,.08); border-radius: 14px; }
.intro-points .ip { display: flex; align-items: flex-start; gap: 11px; font-family: var(--display); font-size: .98rem; line-height: 1.4; color: var(--ink); }
.intro-points .ip-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: .42em; }
.intro-points .ip-dot.d-red { background: var(--red); }
.intro-points .ip-dot.d-blue { background: var(--blue); }
.intro-points .ip-dot.d-yellow { background: var(--yellow); }
.intro-points .ip-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--white); display: inline-flex; align-items: center; justify-content: center;
  font-size: .98rem; box-shadow: 0 1px 3px rgba(21,20,20,.1); }
.intro-list { color: var(--soft); margin: 14px 0 0; padding-left: 1.15em; font-size: .96rem; line-height: 1.55; max-width: 42ch; }
.intro-list li { margin-bottom: 8px; }
.intro-list li::marker { color: var(--red); }
.intro-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.intro-link:hover { color: var(--red); }
.intro-closer { margin-top: 12px; }
/* Toggle is an icon chip so it's noticeable */
.intro-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.intro-toggle {
  background: var(--white); border: 1.5px solid #ece6d4; padding: 8px 16px; cursor: pointer;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(21,20,20,.08);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-size: .72rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.intro-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,20,20,.14); }
.intro-toggle::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.intro-toggle::after { content: "\25B4"; font-size: .78rem; line-height: 1; }
.intro-section.collapsed .intro-toggle::after { content: "\25BE"; }
.intro-grid-wrap { overflow: hidden; transition: max-height .34s ease, opacity .28s ease; }
.intro-section.collapsed .intro-grid { display: none; }
/* Collapsed: drop the dead space above Leo's Feed pill */
.intro-section.collapsed { padding-top: 26px; padding-bottom: 8px; }
.intro-section.collapsed .intro-bar { margin-bottom: 0; position: static; }
/* Desktop: float the Hide-welcome pill into the right margin so its top lines up
   with the top of the two modules (pulls the modules up to meet it). Only kicks in
   wide enough that the pill sits clear to the RIGHT of the 980px grid, never over it. */
@media (min-width: 1024px) {
  .intro-bar { position: absolute; top: 52px; right: var(--pad-x); margin: 0; z-index: 5; }
  .intro-section.collapsed .intro-bar { position: static; }
}
@media (max-width: 760px) {
  .intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .intro-card { padding: 24px 22px 26px; }
  .hero-photo { width: 108px; height: 108px; bottom: -46px; left: 8%; }
  .intro-card .intro-kicker { font-size: 1.3rem; margin: 4px 0 10px; }
  .intro-copy, .intro-list { font-size: .9rem; max-width: none; }
}

/* Leo's Feed section header: centered pill module */
.feed-head { text-align: center; margin: 0 0 22px; }
.feed-pill {
  display: inline-block; margin: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  background: var(--yellow); color: var(--ink);
  padding: 10px 26px; border-radius: 999px; box-shadow: var(--shadow);
}

.section-kicker {
  font-family: var(--display); font-weight: 700;
  font-size: 1.7rem; margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.kicker-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* ---------- COMPOSER ---------- */
.composer {
  background: var(--white); border-radius: 18px;
  padding: 28px 26px; box-shadow: var(--shadow);
}
.composer-help { color: var(--soft); margin: 0 0 16px; font-size: 1rem; }
.fam-intro { text-align: center; margin: 0 auto 22px; max-width: none; }
.composer-title { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 4px 0 10px; display: flex; align-items: center; gap: 9px; }
.composer-title .kicker-dot { width: 11px; height: 11px; }
/* Composer intro copy sits in its own soft-blue module (not yellow — that's the idea card) */
.prompt-lead { font-family: var(--body); color: var(--ink); font-size: .88rem; margin: 0 0 12px; line-height: 1.5;
  background: rgba(53,108,192,.10); border-radius: 12px; padding: 12px 15px; }
.prompt-card {
  background: var(--yellow); border-radius: 12px; padding: 12px 15px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--body); font-weight: 400; font-size: .88rem;
  line-height: 1.5;
}
.prompt-card span { flex: 1; }
.prompt-hint { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .68rem; color: var(--soft); margin: 0 0 16px; text-align: center; }
#prompt-shuffle {
  border: none; background: var(--red); color: var(--cream);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.4,1.4,.5,1), background .12s;
}
#prompt-shuffle:hover { background: var(--ink); transform: rotate(-180deg); }
#prompt-shuffle:active { transform: rotate(-360deg); }
.field {
  width: 100%; font-family: var(--body); font-size: 1rem;
  padding: 14px 15px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--cream); outline: none; margin-bottom: 12px; resize: vertical;
}
.field:focus { border-color: var(--blue); }
/* Smaller, softer placeholder/prompt text in the composer fields (Amy) */
.composer #caption::placeholder { font-size: .88rem; }
.composer .who-btn-label.placeholder { font-size: .88rem; }
.composer .who-name::placeholder, .composer .who-relation::placeholder { font-size: .88rem; }
/* Custom date picker — on-brand calendar anchored under the field */
.datepick { position: relative; }
.dp-field { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  font-family: var(--body); font-size: 1rem; color: var(--ink); text-align: left;
  padding: 14px 15px; border: 2px solid var(--line); border-radius: 12px; background: var(--cream); cursor: pointer;
  transition: border-color .12s; }
.dp-field:hover, .dp-field.open { border-color: var(--blue); }
.dp-val.dp-placeholder { color: var(--soft); }
.dp-ico { color: var(--blue); flex-shrink: 0; }
.dp-pop { position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50; width: 300px; max-width: 100%;
  background: var(--white); border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(21,20,20,.18); padding: 14px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.dp-nav { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--cream); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.dp-nav:hover { background: var(--blue); color: #fff; }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-dow span { font-family: var(--mono); text-transform: uppercase; font-size: .62rem; letter-spacing: .02em; color: var(--soft); text-align: center; padding: 4px 0; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day { aspect-ratio: 1 / 1; border: none; background: none; border-radius: 9px; font-family: var(--body); font-size: .9rem;
  color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; }
.dp-day.dp-empty { visibility: hidden; cursor: default; }
.dp-day:hover:not(.dp-empty) { background: var(--cream); }
.dp-day.today { color: var(--blue); font-weight: 700; }
.dp-day.sel { background: var(--blue); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.dp-today { font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .7rem; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 4px 6px; }
.dp-today:hover { text-decoration: underline; }
@media (max-width: 460px) { .dp-pop { width: 280px; } }
/* compact composer: name + file picker share a row */
.composer-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.composer-row #author { flex: 1 1 55%; min-width: 140px; margin-bottom: 12px; }
.composer-row .filepick { flex: 1 1 100%; min-width: 130px; margin-bottom: 12px; }
/* "Who's posting?" custom dropdown — styled to match the site, not the native OS list */
.composer-who { position: relative; margin-bottom: 2px; }
.who-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; background: var(--cream); }
.who-btn-label { color: var(--ink); font-size: 1rem; font-weight: 400; }
.who-btn-label.placeholder { color: #9a968a; }
.who-btn-chevron { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 6px solid var(--ink); transition: transform .18s; }
.who-btn[aria-expanded="true"] .who-btn-chevron { transform: rotate(180deg); }
.who-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--white); border: 1.5px solid #ece6d4; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(21,20,20,.18); padding: 8px; max-height: 320px; overflow-y: auto; }
.who-menu.hidden { display: none; }
.who-group-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em;
  font-size: .62rem; color: var(--soft); padding: 6px 10px 4px; }
.who-opt { display: block; width: 100%; text-align: left; border: none; background: none;
  cursor: pointer; font-family: var(--body); font-size: .98rem; color: var(--ink);
  padding: 9px 10px; border-radius: 9px; }
.who-opt:hover { background: var(--cream); }
.who-opt-alt { color: var(--blue); font-weight: 600; }
.who-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.composer-who .who-name, .composer-who .who-relation { margin-top: 8px; }
.filepick {
  display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 12px; color: var(--soft); font-weight: 600; font-size: 1rem;
  transition: border-color .12s, color .12s; white-space: nowrap;
}
.filepick:hover { border-color: var(--blue); color: var(--blue); }
.composer-row .filepick { margin-bottom: 12px; }
.preview { margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: #000; }
.preview img, .preview video { width: 100%; display: block; max-height: 420px; object-fit: contain; }
.post-status { text-align: center; font-weight: 600; min-height: 1.2em; margin-top: 12px; font-size: .96rem; }
.post-status.ok { color: var(--blue); }
.post-status.err { color: var(--red); }
.bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.bar > i { display: block; height: 100%; background: var(--blue); width: 0; transition: width .15s; }

/* ---------- FEED ---------- */
.wrap-feed { max-width: 1140px; }
/* ---------------------------------------------------------------------------
   FEED GRID INVARIANT (see skills/leo-feed-grid before changing any of this):
   - Every card in a row is the SAME height (grid-auto-rows:1fr + stretch + .card height:100%).
   - The MEDIA / TILE block is a FIXED height on EVERY card (photo, video, colour tile) via
     --tile-h. NEVER flex-grow it — growing the media is what stretched videos and colour
     tiles unevenly (the recurring whack-a-mole).
   - The BODY (.card-body) is the flexible part: flex:1 absorbs leftover row height; the
     comment bar (.comments-mount margin-top:auto) is pinned to the bottom. Any slack shows
     as a little white space under the caption — never a taller image or longer colour block.
   --------------------------------------------------------------------------- */
.feed-list { --tile-h: clamp(204px, 20.5vw, 262px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
@media (max-width: 860px) { .feed-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .feed-list { grid-template-columns: 1fr; } }
.card { background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; height: 100%; }
.card-media { position: relative; background: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; height: var(--tile-h); overflow: hidden; cursor: pointer; }
.card-media img, .card-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Play badge on video tiles */
.play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(21,20,20,.78); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  display: flex; align-items: center; justify-content: center;
  padding-left: 3px; pointer-events: none; backdrop-filter: blur(2px);
  transition: background .15s, transform .15s;
}
.card-media:hover .play-badge { background: var(--red); transform: translate(-50%,-50%) scale(1.06); }
/* Text-only cards get a brand-coloured tile at the SAME fixed height (--tile-h) as a
   photo/video tile, so its content centres at the same level as a video's play button
   and the grid stays even. Do NOT flex-grow it. */
.card-tile { flex-direction: column; text-align: center; padding: 22px 20px; }
.card-tile .tile-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-height: 100%; overflow: hidden; padding: 6px; }
.card-tile .tile-emoji { font-size: 2.4rem; line-height: 1; }
.card-tile .tile-title { font-family: var(--display); font-weight: 700; font-size: 1.28rem; line-height: 1.22; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Decorative quote glyph for a text post's tile (the message sits in the body) */
.card-tile .tile-quote-mark { font-family: var(--display); font-weight: 700; font-size: 4rem; line-height: .6; opacity: .5; }
.card-tile-red { background: var(--red); color: var(--cream); }
.card-tile-blue { background: var(--blue); color: var(--cream); }
.card-tile-yellow { background: var(--yellow); color: var(--ink); }
.card-tile .ms-badge { background: rgba(255,254,245,.9); color: var(--ink); }
.card-body { padding: 13px 18px 14px; display: flex; flex-direction: column; flex: 1; }
/* Milestone feed card: title as a small header above the story */
.card-ms-title { font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; margin: 0 0 2px; color: var(--ink); }
/* Milestone feed cards: keep the story tight under its title (Amy: remove the gap) */
.card-ms-title + .card-caption { margin-top: 1px; }
/* Text-only "copy update" card — no media tile, the note leads */
.card-text { background: var(--white); }
.card-text .card-body { padding: 18px 20px 18px; }
/* Uniform tiles: cards in a row match height (align-items:stretch), so anchor the
   attribution + comments to the bottom of every card and the note/caption to the top. */
.card-text .card-head { order: 2; margin: 14px 0 0; }
.card-caption-text { order: 1; margin: 0; font-family: var(--display); font-size: 1.12rem; line-height: 1.4; color: var(--ink); -webkit-line-clamp: 6; }
.card-text .comments-mount { order: 3; margin-top: 12px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: var(--white); font-size: 1.1rem;
}
.card-who { font-weight: 700; }
.card-when { font-family: var(--mono); font-size: .72rem; color: var(--soft); text-transform: uppercase; letter-spacing: .02em; }
.card-caption { margin: 4px 0 0; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; font-size: .92rem; line-height: 1.5; }
/* With equal-height tiles (stretch), the comment toggle is anchored to the bottom,
   so no caption-height reserve is needed. */
/* Reserve a consistent caption height so resting media cards in a row line up */
/* (caption min-height reserve no longer needed: uniform card height handles alignment) */
.card-caption.expanded { -webkit-line-clamp: unset; min-height: 0; }
/* Clear "read more" affordance when a caption is truncated (clean line-clamp, no half-faded words) */
.card-caption.clamped { -webkit-line-clamp: 3; }
.cap-more {
  display: block; align-self: flex-start; text-align: left;
  margin: 6px 0 0; padding: 0; background: none; border: none; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em;
  font-size: .64rem; font-weight: 600; color: var(--blue);
}
/* In text/milestone cards the caption is flex order 1, so keep Read more with it
   (a default-order button would float up above the body). */
.card-text .cap-more { order: 1; }
.cap-more:hover { filter: brightness(.85); }
.card-caption.expanded + .cap-more { display: none; }
/* Comment bar sits directly under the caption (no big gap between them). Any
   leftover row height falls at the card's bottom edge, reading as padding rather
   than a gap. See skills/leo-feed-grid. */
.card .comments-mount { margin-top: 10px; padding-top: 0; }
.feed-empty { text-align: center; color: var(--soft); padding: 30px; font-size: 1.05rem; }
.feed-empty .see-everyone { margin-top: 14px; display: inline-block; background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; padding: 11px 22px; border-radius: 999px; }
.feed-empty .see-everyone:hover { filter: brightness(1.06); }

/* ---------- COMMENTS ---------- */
.comments { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.comment { display: flex; gap: 9px; margin-bottom: 11px; }
.comment .cav {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: var(--white); font-size: .85rem;
}
.comment-main { flex: 1; }
.comment-who { font-weight: 700; font-size: .92rem; }
.comment-when { font-family: var(--mono); font-size: .68rem; color: var(--soft); margin-left: 7px; text-transform: uppercase; }
.comment-text { margin: 1px 0 0; font-size: .96rem; white-space: pre-wrap; }
/* Parent-mode edit/delete controls on a comment */
.comment-head { display: flex; align-items: center; gap: 0; }
.comment-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.comment-edit, .comment-del {
  width: 24px; height: 24px; padding: 5px; border: none; cursor: pointer;
  background: transparent; border-radius: 50%; color: var(--soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.comment-edit svg, .comment-del svg { width: 100%; height: 100%; }
.comment-edit:hover { background: rgba(53,108,192,.12); color: var(--blue); }
.comment-del:hover { background: rgba(235,40,50,.12); color: var(--red); }
.comment-edit-box { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.comment-edit-box .ce-input {
  flex: 1 1 60%; min-width: 140px; padding: 7px 10px; border-radius: 9px;
  border: 1.5px solid #e7e1cf; font-family: var(--body); font-size: .92rem;
}
.comment-edit-box .ce-save, .comment-edit-box .ce-cancel {
  padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; font-size: .66rem;
}
.comment-edit-box .ce-save { background: var(--blue); color: var(--white); }
.comment-edit-box .ce-cancel { background: #efe9d8; color: var(--ink); }
.comment-confirm { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--soft); flex-wrap: wrap; }
.comment-confirm .cc-yes, .comment-confirm .cc-no {
  padding: 5px 11px; border-radius: 999px; border: none; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; font-size: .64rem;
}
.comment-confirm .cc-yes { background: var(--red); color: var(--white); }
.comment-confirm .cc-no { background: #efe9d8; color: var(--ink); }
/* Collapsible comments: a small toggle chip that accordions open the thread + form */
.comments-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 6px 12px; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--line); cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em;
  font-size: .68rem; color: var(--soft);
  transition: border-color .15s, color .15s, background .15s;
}
.comments-toggle .ct-ico { display: inline-flex; }
.comments-toggle .ct-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .18s; margin-left: 1px; }
.comments-toggle.open .ct-chev { transform: rotate(180deg); }
.comments-toggle:hover, .comments-toggle.open { border-color: var(--blue); color: var(--blue); }
.comments.hidden { display: none; }
.comments { margin-top: 10px; }
/* Posted comments grouped in their own soft panel so they read as the thread, not the compose box */
.comment-list { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px 4px; margin-bottom: 10px; }
.comment-list .comment:last-child { margin-bottom: 9px; }
/* Secondary "Add a comment" button — keeps viewing separate from composing */
.comment-add-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: none; padding: 2px 2px; color: var(--blue);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; font-weight: 600;
}
.comment-add-btn:hover { filter: brightness(.85); }
.comment-add-btn.hidden { display: none; }
.comment-form { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.comment-form.hidden { display: none; }
.comment-form input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .78rem;
  padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--cream); outline: none;
}
.comment-form input::placeholder { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .72rem; color: var(--soft); }
.comment-form input:focus { border-color: var(--blue); }
.comment-form .cf-name { flex: 0 0 30%; }
/* In the narrow 4-up feed cards, stack the comment fields so they stay full,
   tappable pills (same height as the CTA) instead of collapsing to circles. */
.card .comment-form { flex-direction: column; align-items: stretch; }
.card .comment-form .cf-name { flex: none; }
.card .comment-send { width: 100%; }
.comment-send {
  flex-shrink: 0; border: none; background: var(--blue); color: var(--white);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em;
  font-weight: 400; padding: 10px 16px; border-radius: 999px; cursor: pointer; font-size: .78rem;
}
.comment-send:hover { filter: brightness(1.06); }

/* ============================================================
   FEED CONTROLS (family filter cards + sort)
   ============================================================ */
.feed-controls { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 6px; }
/* Horizontal filter scroller with a fade + arrow on each side */
.feed-filters-wrap { position: relative; display: flex; align-items: center; }
.feed-filters { display: flex; gap: 26px; overflow-x: auto; padding: 10px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; min-width: 0; }
.feed-filters::-webkit-scrollbar { display: none; }
/* Scroll arrows — on-brand round buttons (white circle, ink chevron, red on hover) */
.ff-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink);
  font-size: 1.25rem; line-height: 1; cursor: pointer; z-index: 3; opacity: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
  box-shadow: 0 2px 10px rgba(21,20,20,.12); transition: color .15s, border-color .15s, transform .15s;
}
.ff-arrow:hover { color: var(--red); border-color: var(--red); transform: scale(1.08); background: var(--white); }
.ff-prev { margin-right: 12px; }
.ff-next { margin-left: 12px; }
.ff-arrow[hidden] { display: none; }
.fam-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; flex-shrink: 0; padding: 3px 2px;
  font-family: var(--body); width: 62px;
}
.fam-chip .fc-av {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: #fff; font-size: 1.3rem;
  border: 3px solid transparent; transition: border-color .12s, transform .1s;
}
.fam-chip:hover .fc-av { transform: translateY(-2px); }
/* Selected chip gets a white ring (faint edge so it reads on cream) */
.fam-chip.on .fc-av { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(21,20,20,.16); }
/* ...except the Everyone chip, which keeps the ink ring */
.fam-chip[data-key=""].on .fc-av { border-color: var(--ink); box-shadow: none; }
.fam-chip .fc-name { font-size: .72rem; color: var(--soft); white-space: nowrap; }
.fam-chip.on .fc-name { color: var(--ink); font-weight: 600; }
.feed-sort { display: flex; gap: 8px; }
.sort-btn {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .68rem;
  background: none; border: 2px solid var(--line); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; color: var(--soft); transition: all .12s;
}
.sort-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ============================================================
   FAMILY TREE
   ============================================================ */
#family-tree { display: flex; flex-direction: column; gap: 30px; margin-top: 10px; }
.fam-gen { text-align: center; }
.fam-gen-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--soft); margin: 0 0 16px; }
.fam-row { display: flex; flex-wrap: wrap; gap: 18px 22px; justify-content: center; }
.fam-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; width: 96px; padding: 4px;
  font-family: var(--body); position: relative;
}
.fam-card .av-lg {
  width: 78px; height: 78px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: #fff; font-size: 2rem;
  box-shadow: var(--shadow); transition: transform .12s;
}
.fam-card:hover .av-lg { transform: translateY(-3px) scale(1.03); }
.fam-card .av-lg.has-photo { overflow: hidden; }
.fam-card .av-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.fam-card.leo .av-lg { width: 110px; height: 110px; font-size: 2.8rem; border: 4px solid var(--white); outline: 3px solid var(--red); }
.fam-card .fam-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.fam-card .fam-rel { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .62rem; color: var(--soft); }
.fam-card .fam-qual { font-size: .64rem; color: var(--soft); font-style: italic; line-height: 1.2; }
.fam-flag { font-size: .8rem; }
.fam-card.editable .av-lg::after {
  content: "\270E"; position: absolute; bottom: -2px; right: -2px;
  background: var(--ink); color: #fff; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--cream);
  display: flex; align-items: center; justify-content: center; font-size: .68rem;
}
.fam-card { position: relative; }

/* title editor popover */
.title-editor { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; margin-top: 16px; }
.title-editor h3 { font-family: var(--display); font-weight: 700; margin: 0 0 4px; font-size: 1.2rem; }
.title-editor .composer-help { margin-bottom: 12px; }
.title-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.title-row { display: flex; gap: 10px; }
.title-row .field { margin-bottom: 0; flex: 1; }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notify-box { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.notify-h { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0 0 4px; }
.notify-modes { display: flex; gap: 8px; margin-top: 4px; }
.nmode {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .72rem;
  background: none; border: 2px solid var(--line); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; color: var(--soft); transition: all .12s;
}
.nmode.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.keepsake-box { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }

/* ============================================================
   TIMELINE ADD: segmented tabs (Quick update / Milestone)
   ============================================================ */
.tl-tabs { display: flex; gap: 6px; background: var(--cream); border-radius: 12px; padding: 5px; margin-bottom: 18px; }
.tl-tab {
  flex: 1; font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .72rem;
  background: none; border: none; border-radius: 9px; padding: 11px 10px; cursor: pointer; color: var(--soft);
  transition: background .12s, color .12s;
}
.tl-tab.active { background: var(--white); color: var(--ink); box-shadow: 0 2px 6px rgba(21,20,20,.08); }

/* Mum/Dad picker */
.who-pick { display: flex; gap: 10px; }
.who-btn {
  flex: 1; font-family: var(--body); font-size: 1rem; font-weight: 600;
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px;
  padding: 13px 16px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s, transform .1s;
}
.who-btn:active { transform: scale(.97); }
.who-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tl-panel.hidden { display: none; }

/* ============================================================
   DAILY CHECK-IN CHIPS
   ============================================================ */
.checkin-wrap { max-width: 680px; margin: 0 auto 18px; }
.chip-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .7rem; color: var(--soft); margin: 16px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
/* Mini Update states as tiles — same tile language as the milestone emoji picker */
.chips.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.chips.tiles .chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 14px; padding: 12px 8px; }
.chips.tiles .chip .chip-emoji { font-size: 1.4rem; line-height: 1; }
.chips.tiles .chip .chip-word { font-size: .8rem; font-weight: 600; }
.chips.tiles .chip.chip-add { border-style: dashed; }
.chip {
  font-family: var(--body); font-size: .92rem; font-weight: 500;
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 9px 15px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.chip:hover { border-color: var(--blue); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
#chips-mood .chip.on { background: var(--red); border-color: var(--red); }

/* ============================================================
   LETTERBOX
   ============================================================ */
.parent-zone { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 28px; }
.parent-line { font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; color: var(--soft); margin: 0 0 12px; }
.parent-unlock { display: flex; gap: 10px; align-items: stretch; }
.parent-unlock .field { margin-bottom: 0; flex: 1; }
.parent-unlock .btn { white-space: nowrap; }
.parent-guide-link { margin-top: 22px; }
.parent-guide-link a { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .78rem; color: var(--blue); }
.letters-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.letter {
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow);
  padding: 22px 24px; position: relative;
  border-left: 5px solid var(--yellow);
}
.letter:nth-child(3n+2) { border-left-color: var(--red); }
.letter:nth-child(3n) { border-left-color: var(--blue); }
.letter-text { white-space: pre-wrap; font-size: 1.04rem; line-height: 1.6; margin: 0 0 12px; }
.letter-meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; font-size: .72rem; color: var(--soft); }
.letter-meta b { color: var(--ink); font-weight: 400; }

/* ============================================================
   ADD MILESTONE FORM
   ============================================================ */
.add-ms-wrap { max-width: 680px; margin: 0 auto 28px; }
.add-ms { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); overflow: visible; }
.add-ms > summary { border-radius: 18px; }
.add-ms[open] > summary { border-radius: 18px 18px 0 0; }
.add-ms > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px; font-weight: 700; font-size: 1.08rem;
}
.add-ms > summary::-webkit-details-marker { display: none; }
.add-ms-plus {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; margin-left: auto;
  background: var(--blue); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; transition: transform .2s ease;
}
.add-ms[open] .add-ms-plus { transform: rotate(45deg); }
.add-ms > summary .info-tip { margin-left: 0; flex-shrink: 0; }
.add-ms summary em { color: var(--soft); font-style: normal; font-weight: 500; font-size: .9rem; }
.add-ms-body { padding: 0 24px 24px; }
.ms-row { display: flex; gap: 12px; }
.ms-row .ms-field { flex: 1; }
.ms-field { display: block; margin-bottom: 12px; }
.ms-field > span {
  font-family: var(--mono);
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--soft); margin-bottom: 6px;
}
.ms-field > span em { text-transform: none; letter-spacing: 0; font-style: normal; }
.ms-field .field { margin-bottom: 0; }
.ms-field.grow { flex: 2.6; }
.emoji-field { flex: 0 0 80px; }
.emoji-field .field { text-align: center; font-size: 1.3rem; }

.add-ms-title { font-weight: 700; }

/* Mini Update: breathing room between the state chips and the date field */
.mini-gap { margin-top: 20px; }

/* "+ Your own" state chip + its inline add row */
.chip-add { border-style: dashed; color: var(--soft); }
.chip-add:hover { color: var(--blue); }
.chip-own { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 6px; }
.chip-own.hidden { display: none; }
.chip-own .field { margin-bottom: 0; }
.chip-own-emoji { flex: 0 0 58px; text-align: center; }
.chip-own-word { flex: 1; min-width: 0; }
.chip-own-add { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em;
  font-size: .72rem; padding: 0 16px; border-radius: 10px; border: 2px solid var(--blue);
  background: var(--white); color: var(--blue); cursor: pointer; }
.chip-own-add:hover { background: var(--blue); color: #fff; }

/* Milestone emoji quick-pick palette — tiles fill the column width */
.emoji-quick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0 0 4px; }
.emoji-quick .eq { font-size: 1.25rem; line-height: 1; height: 46px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--white); cursor: pointer; transition: border-color .12s, background .12s, transform .1s; }
.emoji-quick .eq:hover { border-color: var(--blue); }
.emoji-quick .eq:active { transform: scale(.94); }
.emoji-quick .eq.on { border-color: var(--blue); background: var(--blue); }

/* Milestone badge inline on copy-only feed cards (no media tile to sit on) */
.ms-badge.ms-badge-inline { position: static; display: inline-block; margin: 0 0 10px; }
@media (max-width: 460px) {
  .ms-row { flex-wrap: wrap; }
  .ms-field.grow, .emoji-field { flex: 1 1 100%; }
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; max-width: 680px; margin: 0 auto; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 3px; background: var(--line); border-radius: 2px;
}
.ms { position: relative; margin-bottom: 16px; }
.ms::before {
  content: ""; position: absolute; left: -30px; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--cream);
}
.ms:nth-child(3n+2)::before { background: var(--yellow); }
.ms:nth-child(3n)::before { background: var(--blue); }
.ms-card { background: var(--white); border-radius: 16px; padding: 15px 18px; box-shadow: var(--shadow); }
.ms-date { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); }
.ms-title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 4px 0 5px; line-height: 1.2; }
.ms-body { color: var(--soft); margin: 0; font-size: .96rem; line-height: 1.5; }
/* Media capped in height; positive bottom margin so the comment toggle sits clear below it (no overlap) */
.ms-media { margin: 13px -18px 15px; border-radius: 0; overflow: hidden; background: var(--ink); cursor: pointer; max-height: 300px; }
.ms-media img, .ms-media video { width: 100%; height: 300px; object-fit: cover; display: block; }
/* Multi-photo milestone gallery: full-bleed edge tiles, side by side (stacks 1-col on very narrow) */
.ms-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 13px -18px 15px; }
.ms-gallery[data-count="1"] { grid-template-columns: 1fr; }
.ms-gtile { position: relative; overflow: hidden; background: var(--ink); height: 240px; cursor: pointer; }
.ms-gtile[data-lightbox] { cursor: pointer; }
.ms-gtile img, .ms-gtile video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 460px) { .ms-gtile { height: 200px; } }
/* '+N more photos' badge on feed milestone tiles */
.media-count { position: absolute; bottom: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .03em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(21,20,20,.72); color: var(--cream); backdrop-filter: blur(3px); }
.ms-emoji { font-size: 1.25rem; }

/* ============================================================
   FOOTER  (full-bleed ink band)
   ============================================================ */
.footer {
  background: var(--ink); color: rgba(255,254,245,.7);
  text-align: center; padding: 56px var(--pad-x) 64px;
}
.footer-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; margin: 0 3px; }
.footer p { margin: 14px 0 0; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
/* Discreet parent-mode unlock for Luke & Dana */
.parent-mode-btn {
  margin: 18px auto 0; display: inline-block; background: none; border: none; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: .62rem; color: rgba(255,254,245,.34); padding: 4px 6px;
  transition: color .15s;
}
.parent-mode-btn:hover { color: rgba(255,254,245,.75); }
.parent-mode-btn.on { color: var(--yellow); }
.em-card-narrow { width: min(400px, 96vw); }
.pu-lead { margin: 0 0 16px; color: var(--soft); font-size: .95rem; line-height: 1.5; }

/* ============================================================
   MOBILE
   ============================================================ */
.mobnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: none; justify-content: space-around;
  background: var(--white); border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.mobnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; color: var(--soft); padding: 7px 8px; border-radius: 10px; white-space: nowrap; }
.mobnav a .mn-ico { font-size: 1.05rem; line-height: 1; }
.mobnav a .mn-lbl { font-size: .6rem; }
.mobnav a.active { background: var(--ink); color: var(--white); }

@media (max-width: 620px) {
  .nav { display: none; }
  .mobnav { display: flex; }
  .footer { padding-bottom: 92px; }
  .topbar { gap: 10px; padding: 11px 16px; }
  .wc-track { max-width: none; flex: 1 1 0; min-width: 0; }
  .wc-label { display: none; }
  .wc-pill { padding: 5px 9px; gap: 4px; }
  .hero { min-height: 74vh; }
  /* Keep the section heroes (Milestones / Family) compact on mobile — they only
     hold an eyebrow + one-word title, so the tall feed-hero height leaves them
     mostly empty. This restores their intended short height (the .hero rule above,
     later in source, was overriding their 42vh up to 74vh). */
  .hero-timeline, .hero-family { min-height: 46vh; }
  .hero .dot-c { right: -22px; width: 84px; height: 84px; }
  .hero .dot-a { width: 120px; height: 120px; bottom: -40px; }
}

/* ---------- Email signup card ---------- */
.email-mount { margin-top: 16px; }
.email-card {
  background: var(--white);
  border: 1.5px solid #f0ede0;
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  max-width: 620px;
  margin: 0 auto;
}
/* Slim variant for the feed — about half the footprint: lead + one inline row */
.email-card-slim { max-width: 640px; padding: 16px 18px; }
.email-card-slim .ec-lead { display: flex; flex-direction: column; margin-bottom: 12px; }
.email-card-slim .ec-title { font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.email-card-slim .ec-sub { font-family: var(--body); color: var(--soft); font-size: .86rem; margin-top: 2px; }
.email-card-slim .ec-row { display: flex; gap: 8px; align-items: stretch; }
.email-card-slim .ec-row .field { margin-bottom: 0; flex: 1 1 30%; min-width: 0; }
.email-card-slim .ec-row .ec-go { flex: 0 0 auto; white-space: nowrap; margin-top: 0; padding-left: 18px; padding-right: 18px; }
.email-card-slim .ec-status { min-height: 0; }
.email-card-slim .ec-status:empty { margin-top: 0; }
@media (max-width: 620px) {
  .email-card-slim .ec-row { flex-wrap: wrap; }
  .email-card-slim .ec-row .field { flex: 1 1 100%; }
  .email-card-slim .ec-row .ec-go { flex: 1 1 100%; }
}
.gd-step .email-card { box-shadow: none; border-color: #eee7d4; margin-top: 4px; }
.ec-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.ec-sub { margin: 0 0 16px; line-height: 1.5; color: #555; font-size: .98rem; }
.ec-fields { display: flex; gap: 10px; }
.ec-fields .field { margin-bottom: 0; flex: 1; min-width: 0; }
@media (max-width: 520px) { .ec-fields { flex-direction: column; } }
.ec-freq-label {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: #999; margin: 16px 0 8px;
}
.ec-freq { display: flex; gap: 10px; }
.ec-opt {
  flex: 1; cursor: pointer; text-align: left;
  background: var(--cream); border: 1.5px solid #ece8d8; border-radius: 12px;
  padding: 11px 14px; font-family: var(--body); color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 2px;
}
.ec-opt b { font-size: .98rem; }
.ec-opt span { font-size: .8rem; color: #8a8677; }
.ec-opt.active {
  border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 3px rgba(235,40,50,.12);
}
.ec-opt.active span { color: var(--red); }
.email-card .ec-go { margin-top: 16px; }
.ec-status { min-height: 1.1em; margin-top: 12px; }
.ec-off {
  display: block; margin: 12px auto 0; background: none; border: none;
  color: #b6b1a1; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ec-off:hover { color: var(--red); }

/* Confirmation state after signup */
.ec-done { text-align: center; padding: 8px 4px 4px; }
.ec-done-tick {
  font-size: 2.2rem; line-height: 1;
  animation: ecPop .4s cubic-bezier(.2,1.4,.5,1) both;
}
@keyframes ecPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.ec-done-title {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  margin: 10px 0 6px;
}
.ec-done-sub {
  margin: 0 auto; max-width: 380px; line-height: 1.55;
  color: #555; font-size: 1rem;
}
.ec-done .ec-off { margin-top: 18px; }

/* ---------- Section info popups (ⓘ) ---------- */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
.info-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #ece6d4; background: var(--white); color: var(--ink);
  font-size: .92rem; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(21,20,20,.12);
  transition: transform .15s, box-shadow .15s;
}
.info-btn:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(21,20,20,.2); }
.info-pop {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%) translateY(-4px);
  width: max-content; max-width: 260px; z-index: 40;
  background: var(--ink); color: var(--cream);
  font-family: var(--body); font-size: .82rem; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  padding: 12px 14px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s, transform .16s, visibility .16s;
}
.info-pop b { font-weight: 700; color: #fff; }
.info-pop::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--ink);
}
/* Show on hover (desktop) or when tapped open (.open, mobile) */
.info-tip:hover .info-pop,
.info-tip.open .info-pop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
/* Keep the bubble on-screen near the right edge on small viewports */
@media (max-width: 560px) {
  .info-pop { max-width: 200px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(21,20,20,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: lbfade .18s ease;
}
.lightbox.hidden { display: none; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lb-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: min(1000px, 96vw); max-height: 92vh; }
.lb-stage { display: flex; align-items: center; justify-content: center; max-height: 78vh; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: block; background: #000; }
/* Text-only lightbox (copy milestone / text post) */
.lb-textcard { max-width: 560px; width: 100%; background: var(--cream); border-radius: 18px; padding: 40px 34px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lb-tc-emoji { display: block; font-size: 2.6rem; line-height: 1; margin-bottom: 14px; }
.lb-tc-title { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; margin: 0; color: var(--ink); }
.lb-tc-body { font-family: var(--body); font-size: 1rem; line-height: 1.6; margin: 14px 0 0; color: var(--ink); white-space: pre-wrap; }
.lb-tc-quote { font-family: var(--display); font-size: 1.5rem; line-height: 1.4; margin: 0; color: var(--ink); white-space: pre-wrap; }
.lb-meta { text-align: left; max-width: 620px; width: 100%; color: var(--ink); background: var(--cream); border-radius: 14px; padding: 16px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.lb-author { font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--red); margin: 0 0 6px; }
.lb-title { font-family: var(--display); font-weight: 700; font-size: 1.32rem; line-height: 1.25; margin: 0; color: var(--ink); }
.lb-title .lb-emoji { margin-right: .3em; }
.lb-title + .lb-caption { margin-top: 8px; }
.lb-caption { font-family: var(--body); font-size: .92rem; line-height: 1.58; margin: 0; color: var(--ink); white-space: pre-wrap; }
.lb-meta:empty { display: none; }
.lb-close {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,254,245,.14); color: var(--cream); font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lb-close:hover { background: rgba(255,254,245,.28); }
@media (max-width: 620px) {
  .lb-title { font-size: 1.16rem; }
  .lb-caption { font-size: .9rem; }
  .lightbox { padding: 14px; }
}

/* ---------- Email signup sitting inside the blue band ---------- */
.email-on-band { margin-top: 20px; max-width: 480px; }
/* Inline in the blue band — no bounding module. Only the heading gets a small colored chip. */
.email-on-band .email-card {
  background: none; border: none; box-shadow: none; padding: 0; margin: 0;
}
.email-on-band .ec-lead { margin-bottom: 12px; }
.email-on-band .ec-title { display: inline-block; background: rgba(21,20,20,.22);
  color: var(--cream); font-size: .8rem; font-family: var(--mono); font-weight: 400;
  text-transform: uppercase; letter-spacing: .03em; padding: 7px 13px; border-radius: 999px; }
/* Name + email share the top row, button drops full-width beneath (module is narrow) */
.email-on-band .ec-row { flex-wrap: wrap; }
.email-on-band .ec-row .field, .email-on-band .ec-row .ec-go { height: 46px; box-sizing: border-box; }
.email-on-band .ec-row .field { flex: 1 1 40%; min-width: 120px; background: rgba(255,254,245,.96); border-color: transparent; font-size: .9rem; padding: 0 14px; }
.email-on-band .ec-row .ec-go { flex: 1 1 100%; font-size: .78rem; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
.email-on-band .ec-done-title, .email-on-band .ec-done-sub { color: var(--cream); }
.email-on-band .ec-off { color: rgba(255,254,245,.6); }
.email-on-band .ec-off:hover { color: var(--cream); }
/* Red footer band variant: the band title + copy already explain it, so drop the
   module's own chip; recolour the button (btn-red would vanish on red) to yellow. */
.email-on-red { margin-top: 22px; max-width: 520px; }
.email-on-red .ec-lead { display: none; }
.email-on-red .ec-row .ec-go { background: var(--yellow); color: var(--ink); }
.email-on-red .ec-row .ec-go:hover { background: var(--cream); }
/* Blue footer (homepage) — same treatment as red: hide the chip, yellow button. */
.email-on-blue { margin-top: 22px; max-width: 520px; }
.email-on-blue .ec-lead { display: none; }
.email-on-blue .ec-row .ec-go { background: var(--yellow); color: var(--ink); }
.email-on-blue .ec-row .ec-go:hover { background: var(--cream); }
/* Yellow footer (family) — ink text; white fields + a blue button for contrast on yellow. */
.email-on-yellow { margin-top: 22px; max-width: 520px; }
.email-on-yellow .ec-lead { display: none; }
.email-on-yellow .ec-row .field { background: var(--white); border-color: rgba(21,20,20,.14); color: var(--ink); }
.email-on-yellow .ec-row .ec-go { background: var(--blue); color: var(--cream); }
.email-on-yellow .ec-row .ec-go:hover { background: var(--ink); }
.email-on-yellow .ec-done-title, .email-on-yellow .ec-done-sub { color: var(--ink); }
.email-on-yellow .ec-off { color: rgba(21,20,20,.55); }
.email-on-yellow .ec-off:hover { color: var(--ink); }

/* Milestone badge on feed cards derived from a milestone */
.ms-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-size: .6rem; padding: 4px 9px; border-radius: 999px;
  background: rgba(21,20,20,.72); color: var(--cream); backdrop-filter: blur(3px);
}

/* ---------- Edit a post / milestone (parents only: Luke & Dana) ---------- */
.card { position: relative; }
.ms-card { position: relative; }
/* Small pencil control — sits at the card's top-right, on-brand white circle */
.edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--line); color: var(--soft);
  cursor: pointer; box-shadow: 0 2px 8px rgba(21,20,20,.10);
  transition: color .15s, border-color .15s, transform .15s;
  padding: 0;
}
.edit-btn:hover { color: var(--blue); border-color: var(--blue); transform: scale(1.06); }
.edit-btn svg { width: 15px; height: 15px; }
/* In a feed card the pencil rides at the right end of the name/time row */
.card-head .edit-btn { margin-left: auto; }
/* On a milestone-page card there's no head row, so float it top-right */
.ms-card > .edit-btn { position: absolute; top: 13px; right: 14px; z-index: 4; }

/* Modal overlay */
.edit-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(21,20,20,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.edit-modal.hidden { display: none; }
.em-card {
  position: relative; background: var(--cream); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); padding: 26px 26px 22px;
  width: min(520px, 96vw); max-height: 92vh; overflow-y: auto;
}
.em-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 1.7rem; line-height: 1; color: var(--soft); cursor: pointer; opacity: .7;
}
.em-close:hover { opacity: 1; }
.em-title { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0 0 16px; color: var(--ink); }
/* Feed-tile edit note (shown when editing how a milestone reads on the feed only) */
.em-note {
  margin: -6px 0 14px; padding: 10px 13px; border-radius: 11px;
  background: rgba(53,108,192,.10); color: var(--ink);
  font-size: .84rem; line-height: 1.45;
}
.em-note.hidden { display: none; }
.em-date-wrap.hidden, .em-date-label.hidden { display: none; }
.em-reset {
  background: none; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  color: var(--soft); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-size: .66rem; padding: 8px 14px; transition: color .15s, border-color .15s;
}
.em-reset:hover { color: var(--blue); border-color: var(--blue); }
.em-reset.hidden { display: none; }
.em-label {
  display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-size: .66rem; color: var(--soft); margin: 14px 0 6px;
}
.em-fields > .em-label:first-child { margin-top: 0; }
.em-input {
  width: 100%; box-sizing: border-box; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font-family: var(--body); font-size: .96rem; color: var(--ink); line-height: 1.5;
}
.em-input:focus { outline: none; border-color: var(--blue); }
.em-area { resize: vertical; min-height: 84px; }
.em-emoji-text { margin-top: 8px; max-width: 180px; }
.em-fields .emoji-quick { margin: 0; }
.em-fields .datepick { margin-top: 2px; }
.em-error { color: var(--red); font-size: .86rem; margin: 12px 0 0; }
.em-error.hidden { display: none; }
.em-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; gap: 12px; }
.em-actions-right { display: flex; align-items: center; gap: 10px; }
.em-cancel {
  background: none; border: none; cursor: pointer; color: var(--soft);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; padding: 8px;
}
.em-cancel:hover { color: var(--ink); }
.em-delete {
  background: none; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  color: var(--soft); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  font-size: .68rem; padding: 8px 14px; transition: color .15s, border-color .15s;
}
.em-delete:hover { color: var(--red); border-color: var(--red); }
.em-save { background: var(--blue); font-size: .8rem; padding: 11px 20px; }
/* Delete confirm sub-panel */
.em-confirm { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 16px; }
.em-confirm.hidden { display: none; }
.em-confirm-text { margin: 0 0 12px; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.em-delete-yes {
  background: var(--red); color: var(--cream); border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; padding: 10px 18px;
}
.em-delete-yes:hover { filter: brightness(1.06); }
.em-modal-hide { display: none !important; }