/* ============================================================
   FELIZ & THRIVING — MINI APP v6 — styles.css
   Part 1: base system (formerly ft-mini-v2.css)
   Part 2: v4+ additions (formerly ft-mini-v4.css, appended below)
   ============================================================ */

/* ============================================================
   FELIZ & THRIVING — MINI APP v2 (public prototype)
   Dashboard-grade layout. All classes prefixed ft2- for Webflow.
   Tokens: cream paper + navy ink + plum accent (brand core),
   pale pink hairlines, blush/lilac washes, pill buttons and the
   Mental Map wheel language from the current F&T Dashboard.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ft2-paper: #FFF4E9;
  --ft2-surface: #FFFAF3;
  --ft2-ink: #23395B;
  --ft2-body: #2C3340;
  --ft2-muted: #63594B;
  --ft2-faint: #8D785C;
  --ft2-plum: #A01A7D;
  --ft2-plum-deep: #7C1160;
  --ft2-plum-soft: #C863AC;
  --ft2-line: #F2DEE0;          /* pale pink hairline */
  --ft2-line-strong: #E8CBD2;
  --ft2-wash-blush: #F9E4EE;
  --ft2-wash-lilac: #EFE8F7;
  --ft2-wash-peach: #FBEBD9;
  --ft2-on-ink: #EDE6D9;
  --ft2-good: #4A6B52;
  --ft2-crit: #8E4438;
  /* wheel / accent family (from the F&T Dashboard) */
  --ft2-ac-rose: #C24A7A;   --ft2-tint-rose: #FBDDE9;
  --ft2-ac-lilac: #9C5FAE;  --ft2-tint-lilac: #EEE2F4;
  --ft2-ac-peri: #6E86C9;   --ft2-tint-peri: #E4E8F7;
  --ft2-ac-peach: #E08A4E;  --ft2-tint-peach: #FBE7D6;
  --ft2-ac-teal: #4F9E86;   --ft2-tint-teal: #DCEEE7;
  --ft2-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ft2-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ft2-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --ft2-r-lg: 20px; --ft2-r-md: 14px; --ft2-r-sm: 10px; --ft2-r-pill: 999px;
  --ft2-shadow: 0 1px 2px rgba(35, 57, 91, 0.04), 0 18px 40px -24px rgba(35, 57, 91, 0.18);
  --ft2-shadow-hover: 0 2px 4px rgba(35, 57, 91, 0.05), 0 26px 50px -24px rgba(35, 57, 91, 0.26);
  --ft2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Shell ---- */
.ft2-app {
  font-family: var(--ft2-sans); color: var(--ft2-body);
  background:
    radial-gradient(900px 520px at 6% -6%, var(--ft2-wash-blush) 0%, rgba(249, 228, 238, 0) 55%),
    radial-gradient(820px 600px at 100% -4%, var(--ft2-wash-lilac) 0%, rgba(239, 232, 247, 0) 52%),
    var(--ft2-paper);
  max-width: 100%; min-height: 680px; box-sizing: border-box;
  font-size: 16.5px; line-height: 1.6; padding: 20px clamp(16px, 4vw, 44px) 56px;
}
.ft2-app *, .ft2-app *::before, .ft2-app *::after { box-sizing: border-box; }
.ft2-app a { color: var(--ft2-plum); text-decoration: underline; text-underline-offset: 2px; }
.ft2-app a:hover { color: var(--ft2-plum-deep); }
.ft2-app button { font-family: inherit; }
.ft2-app :focus-visible { outline: 2px solid var(--ft2-plum); outline-offset: 2px; border-radius: 3px; }
.ft2-shellwidth { max-width: 980px; margin: 0 auto; }

.ft2-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 4px 0 16px; border-bottom: 1px solid var(--ft2-line); margin-bottom: 28px; flex-wrap: wrap;
}
.ft2-wordmark {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.ft2-wordmark img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}
.ft2-nav { display: flex; gap: 6px; }
.ft2-navbtn {
  background: none; border: 1.5px solid transparent; cursor: pointer; border-radius: var(--ft2-r-pill);
  font-family: var(--ft2-sans); font-size: 13.5px; font-weight: 600; color: var(--ft2-muted);
  padding: 8px 16px; transition: all 160ms var(--ft2-ease);
}
.ft2-navbtn:hover { color: var(--ft2-ink); background: rgba(255, 255, 255, 0.7); }
.ft2-navbtn.ft2-on { background: #fff; color: var(--ft2-plum); border-color: var(--ft2-line); box-shadow: var(--ft2-shadow); }
.ft2-footer {
  margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--ft2-line);
  font-size: 12.5px; color: var(--ft2-muted); line-height: 1.5; max-width: 980px; margin-left: auto; margin-right: auto;
}

/* ---- Type ---- */
.ft2-h1 {
  font-family: var(--ft2-serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--ft2-ink); margin: 0 0 10px; text-wrap: pretty;
}
.ft2-h2 { font-family: var(--ft2-serif); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ft2-ink); margin: 0 0 8px; text-wrap: pretty; }
.ft2-sub { color: var(--ft2-muted); margin: 0 0 30px; font-size: 16px; max-width: 56ch; }
.ft2-body { margin: 0 0 16px; max-width: 58ch; }
.ft2-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ft2-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--ft2-ac, var(--ft2-plum)); flex: none; }
.ft2-eyebrow span { font-family: var(--ft2-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ft2-ink); font-weight: 700; }

/* ---- Buttons (dashboard pills) ---- */
.ft2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ft2-sans); font-weight: 600; font-size: 14.5px; line-height: 1;
  padding: 13px 24px; border-radius: var(--ft2-r-pill); cursor: pointer; text-decoration: none;
  transition: all 160ms var(--ft2-ease); border: 1.5px solid transparent;
}
.ft2-btn:active { transform: translateY(1px); }
.ft2-btn--primary { background: var(--ft2-plum); color: #fff; box-shadow: 0 10px 22px -12px rgba(160, 26, 125, 0.7); }
.ft2-btn--primary:hover { background: var(--ft2-plum-deep); transform: translateY(-1px); }
.ft2-btn--secondary { background: rgba(255, 255, 255, 0.75); color: var(--ft2-ink); border-color: var(--ft2-line-strong); }
.ft2-btn--secondary:hover { border-color: var(--ft2-plum-soft); color: var(--ft2-plum); }
.ft2-btn--ghost { background: transparent; color: var(--ft2-plum); padding: 13px 10px; }
.ft2-btn--ghost:hover { opacity: 0.7; }
.ft2-btn--invert { background: var(--ft2-surface); color: var(--ft2-ink); }
.ft2-btn--invert:hover { background: #fff; transform: translateY(-1px); }
.ft2-btn--sm { padding: 9px 16px; font-size: 13.5px; }
.ft2-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.ft2-textlink { background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--ft2-sans); font-size: 14px; color: var(--ft2-plum); text-decoration: underline; text-underline-offset: 2px; }
.ft2-textlink:hover { color: var(--ft2-plum-deep); }
.ft2-circlebtn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ft2-line-strong);
  background: rgba(255, 255, 255, 0.7); color: var(--ft2-ink); display: grid; place-items: center;
  cursor: pointer; font-size: 17px; line-height: 1; transition: all 160ms var(--ft2-ease); flex: none;
}
.ft2-circlebtn:hover { color: var(--ft2-plum); border-color: var(--ft2-plum-soft); }

/* ---- Cards ---- */
.ft2-card {
  background: var(--ft2-surface); border: 1px solid var(--ft2-line);
  border-radius: var(--ft2-r-lg); box-shadow: var(--ft2-shadow); padding: clamp(20px, 2.6vw, 30px);
  transition: box-shadow 200ms var(--ft2-ease), transform 200ms var(--ft2-ease);
}
.ft2-card--ink { background: var(--ft2-ink); border-color: #40587E; color: var(--ft2-on-ink); }
.ft2-card--ink .ft2-h2, .ft2-card--ink .ft2-cardtitle { color: #fff; }
.ft2-card--ink .ft2-eyebrow span { color: var(--ft2-plum-soft); }
.ft2-card--ink .ft2-eyebrow::before { background: var(--ft2-plum-soft); }
.ft2-cardtitle { font-family: var(--ft2-serif); font-weight: 500; font-size: 23px; letter-spacing: -0.015em; line-height: 1.15; color: var(--ft2-ink); margin: 0 0 8px; text-wrap: pretty; }
.ft2-carddesc { font-size: 15px; line-height: 1.55; margin: 0 0 18px; max-width: 54ch; }
.ft2-card--ink .ft2-carddesc { opacity: 0.88; }

/* ---- Home dashboard ---- */
.ft2-home-head { margin: 4px 0 30px; }
.ft2-featured {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px, 3vw, 44px);
  align-items: center; margin: 0 0 18px;
}
.ft2-featured-wheel { display: grid; place-items: center; }
.ft2-toolgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 0 0 8px; }
.ft2-toolcard { display: flex; flex-direction: column; }
.ft2-toolcard .ft2-carddesc { flex: 1; }
.ft2-toolcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft2-recent { display: grid; gap: 8px; margin: 26px 0 6px; }
.ft2-recent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--ft2-line);
  border-radius: var(--ft2-r-md); padding: 12px 16px;
}
.ft2-recent-main { min-width: 0; }
.ft2-recent-tool { font-family: var(--ft2-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ft2-muted); display: block; font-weight: 700; }
.ft2-recent-preview { font-size: 14.5px; color: var(--ft2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 520px; }
.ft2-statuschip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--ft2-r-pill);
  font-size: 11.5px; font-weight: 600; background: var(--ft2-wash-blush); color: var(--ft2-plum-deep);
}
.ft2-statuschip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ft2-plum-soft); }

/* ---- Flow screens ---- */
.ft2-flow { max-width: 660px; margin: 0 auto; }
.ft2-stephead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; }
.ft2-back { background: none; border: none; cursor: pointer; padding: 4px 0; font-size: 14px; color: var(--ft2-muted); display: inline-flex; gap: 6px; align-items: center; }
.ft2-back:hover { color: var(--ft2-ink); }
.ft2-progress { font-family: var(--ft2-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ft2-muted); font-weight: 700; }
.ft2-progressbar { height: 4px; border-radius: 999px; background: var(--ft2-line); overflow: hidden; margin: 0 0 26px; }
.ft2-progressbar i { display: block; height: 100%; border-radius: 999px; background: var(--ft2-plum); transition: width 300ms var(--ft2-ease); }

/* ---- Forms ---- */
.ft2-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.ft2-label { font-family: var(--ft2-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ft2-muted); font-weight: 700; }
.ft2-textarea, .ft2-input {
  font-family: var(--ft2-sans); font-size: 16px; color: var(--ft2-ink);
  background: #fff; border: 1.5px solid var(--ft2-line-strong); border-radius: var(--ft2-r-md);
  padding: 12px 15px; width: 100%; transition: border-color 160ms var(--ft2-ease);
}
.ft2-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ft2-textarea:focus, .ft2-input:focus { outline: none; border-color: var(--ft2-plum); box-shadow: 0 0 0 1px var(--ft2-plum); }
.ft2-textarea::placeholder, .ft2-input::placeholder { color: #A9967D; }
.ft2-helper { font-size: 13.5px; color: var(--ft2-muted); }
.ft2-hint { font-size: 14px; color: var(--ft2-crit); margin: 6px 0 0; }
.ft2-examples { font-size: 13.5px; color: var(--ft2-muted); margin: 8px 0 0; line-height: 1.7; }

.ft2-chips { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.ft2-chips--wrap { flex-direction: row; flex-wrap: wrap; }
.ft2-chip {
  text-align: left; background: #fff; color: var(--ft2-body);
  border: 1.5px solid var(--ft2-line-strong); border-radius: var(--ft2-r-md);
  padding: 12px 16px; font-size: 15px; line-height: 1.4; cursor: pointer;
  transition: all 140ms var(--ft2-ease);
}
.ft2-chips--wrap .ft2-chip { padding: 9px 15px; font-size: 14px; border-radius: var(--ft2-r-pill); }
.ft2-chip:hover { border-color: var(--ft2-plum-soft); }
.ft2-chip[aria-pressed="true"] { border-color: var(--ft2-plum); background: var(--ft2-wash-blush); color: var(--ft2-ink); box-shadow: inset 0 0 0 0.5px var(--ft2-plum); }
.ft2-itemrow { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.ft2-itemrow .ft2-input { flex: 1; }
.ft2-removebtn { background: none; border: 1px solid transparent; border-radius: var(--ft2-r-sm); color: var(--ft2-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 8px 10px; flex: none; }
.ft2-removebtn:hover { color: var(--ft2-crit); border-color: var(--ft2-line-strong); }
.ft2-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; align-items: center; }
.ft2-saved-note { color: var(--ft2-good); font-size: 14.5px; font-weight: 600; }

/* triage question group */
.ft2-triage-item {
  background: #fff; border: 1.5px solid var(--ft2-line); border-radius: var(--ft2-r-md);
  padding: 14px 16px; margin: 0 0 20px; font-size: 16.5px; color: var(--ft2-ink); font-family: var(--ft2-serif); font-style: italic;
}
.ft2-qgroup { margin: 0 0 20px; }
.ft2-qgroup-label { font-size: 14.5px; font-weight: 600; color: var(--ft2-ink); margin: 0 0 9px; }

/* ---- Processing ---- */
.ft2-processing { text-align: center; padding: 100px 0 80px; }
.ft2-processing-msg { font-family: var(--ft2-serif); font-size: 21px; color: var(--ft2-ink); font-style: italic; }
.ft2-dots { display: inline-flex; gap: 7px; margin-top: 18px; }
.ft2-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ft2-plum); opacity: 0.25; animation: ft2-pulse 1.1s infinite var(--ft2-ease); }
.ft2-dots span:nth-child(2) { animation-delay: 0.18s; }
.ft2-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ft2-pulse { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ft2-dots span { animation: none; opacity: 0.8; } }

/* ---- Result dashboards ---- */
.ft2-result-head { max-width: 760px; margin: 0 auto 30px; text-align: left; }
.ft2-rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.ft2-rcard {
  position: relative; background: var(--ft2-surface); border: 1px solid var(--ft2-line);
  border-radius: var(--ft2-r-lg); box-shadow: var(--ft2-shadow); padding: clamp(20px, 2.4vw, 28px);
  overflow: hidden; min-width: 0;
}
.ft2-rcard::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--ft2-ac, var(--ft2-plum)); opacity: 0.85; }
.ft2-rcard--wide { grid-column: 1 / -1; }
.ft2-rcard--wash { background: linear-gradient(150deg, #fff 30%, var(--ft2-tint, var(--ft2-wash-blush)) 130%); }
.ft2-rcard--ink { background: var(--ft2-ink); border-color: #40587E; color: var(--ft2-on-ink); }
.ft2-rcard--ink::before { background: var(--ft2-plum-soft); }
.ft2-rcard--ink .ft2-rhead { color: var(--ft2-on-ink); }
.ft2-rcard--ink .ft2-eyebrow span { color: var(--ft2-plum-soft); }
.ft2-rcard--ink .ft2-eyebrow::before { background: var(--ft2-plum-soft); }
.ft2-rhead { font-family: var(--ft2-serif); font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ft2-ink); margin: 0 0 10px; text-wrap: pretty; }
.ft2-rbody { font-size: 15px; line-height: 1.6; margin: 0 0 10px; max-width: 62ch; }
.ft2-rbody:last-child { margin-bottom: 0; }
.ft2-rquote { font-family: var(--ft2-serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--ft2-ink); margin: 8px 0 10px; max-width: 54ch; }
.ft2-rcard--ink .ft2-rquote { color: #fff; }
.ft2-rq { font-family: var(--ft2-serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--ft2-ink); margin: 12px 0 0; max-width: 30em; text-wrap: pretty; }
.ft2-rcard--ink .ft2-rq { color: #fff; }
.ft2-rlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft2-rlist li { padding: 11px 14px; background: #fff; border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-md); font-size: 14.5px; line-height: 1.5; }
.ft2-rcard--ink .ft2-rlist li { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: var(--ft2-on-ink); }
.ft2-rlist .ft2-li-title { display: block; font-weight: 600; color: var(--ft2-ink); }
.ft2-rlist .ft2-li-sub { display: block; font-size: 13.5px; color: var(--ft2-muted); margin-top: 2px; }
.ft2-pillrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.ft2-tagpill { display: inline-flex; padding: 6px 13px; border-radius: var(--ft2-r-pill); font-size: 13px; font-weight: 600; background: var(--ft2-tint, var(--ft2-wash-blush)); color: var(--ft2-ink); }

/* the gap: two-column contrast */
.ft2-gap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin: 12px 0 14px; }
.ft2-gap-cell { background: #fff; border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-md); padding: 16px 18px; }
.ft2-gap-cell .ft2-label { display: block; margin-bottom: 6px; }
.ft2-gap-cell p { margin: 0; font-family: var(--ft2-serif); font-size: 18px; line-height: 1.3; color: var(--ft2-ink); }
.ft2-gap-vs { display: grid; place-items: center; font-family: var(--ft2-mono); font-size: 11px; color: var(--ft2-muted); }

/* make-room plan */
.ft2-plan { display: grid; gap: 8px; margin: 10px 0 0; }
.ft2-plan-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 10px 14px; background: #fff; border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-md); }
.ft2-plan-k { font-family: var(--ft2-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ft2-ac, var(--ft2-plum)); }
.ft2-plan-v { font-size: 14.5px; line-height: 1.5; }

/* ---- Mental Map featured summary ---- */
.ft2-mapcard { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.ft2-mapfacts { display: grid; gap: 16px; }
.ft2-mapfact .ft2-label { display: block; margin-bottom: 3px; }
.ft2-mapfact p { margin: 0; font-family: var(--ft2-serif); font-size: 17.5px; line-height: 1.35; color: var(--ft2-ink); }
.ft2-wheelwrap { display: grid; place-items: center; }
.ft2-wheel { position: relative; }
.ft2-wheel-core {
  position: absolute; left: 50%; top: 50%; width: 54%; height: 54%; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 8px 26px -14px rgba(35, 57, 91, 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 9%;
}
.ft2-wheel-core .ft2-label { margin-bottom: 4px; }
.ft2-wheel-core strong { font-family: var(--ft2-serif); font-weight: 500; font-size: 17px; line-height: 1.1; color: var(--ft2-ink); letter-spacing: -0.01em; }
.ft2-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ft2-legend-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 8px; border-radius: var(--ft2-r-pill); border: 1.5px solid var(--ft2-line); background: #fff; }
.ft2-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ft2-legend-name { font-size: 12px; font-weight: 700; color: var(--ft2-ink); }
.ft2-legend-qual { font-size: 12px; color: var(--ft2-muted); }

/* ---- Reflections ---- */
.ft2-refl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 26px; }
.ft2-refl-card { background: var(--ft2-surface); border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-lg); box-shadow: var(--ft2-shadow); padding: 18px 20px; }
.ft2-refl-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.ft2-refl-date { font-size: 12.5px; color: var(--ft2-muted); white-space: nowrap; }
.ft2-refl-preview { font-size: 14.5px; color: var(--ft2-body); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ft2-refl-actions { display: flex; gap: 14px; }

/* ---- Conversion ---- */
.ft2-convert {
  margin: 26px auto 0; max-width: 860px; padding: clamp(20px, 2.6vw, 30px);
  background: var(--ft2-ink); border-radius: var(--ft2-r-lg); color: var(--ft2-on-ink);
}
.ft2-convert p { margin: 0 0 14px; max-width: 56ch; }
.ft2-convert-small { font-family: var(--ft2-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ft2-plum-soft); margin-bottom: 8px; font-weight: 700; }

/* ---- Modal ---- */
.ft2-overlay { position: fixed; inset: 0; background: rgba(35, 57, 91, 0.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 9999; }
.ft2-modal {
  background: var(--ft2-surface); border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-lg);
  box-shadow: var(--ft2-shadow-hover); padding: 28px; max-width: 480px; width: 100%; max-height: 85vh; overflow: auto;
  font-family: var(--ft2-sans); color: var(--ft2-body); font-size: 16px; line-height: 1.6;
}

/* ---- Safety ---- */
.ft2-safety { border: 1.5px solid var(--ft2-line-strong); border-radius: var(--ft2-r-lg); background: var(--ft2-surface); padding: 28px; max-width: 660px; margin: 0 auto; }

/* ---- Transitions ---- */
.ft2-screen { animation: ft2-enter 240ms var(--ft2-ease); }
@keyframes ft2-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ft2-screen { animation: none; } }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .ft2-toolgrid { grid-template-columns: 1fr; }
  .ft2-featured { grid-template-columns: 1fr; }
  .ft2-featured-wheel { order: -1; }
  .ft2-rgrid { grid-template-columns: 1fr; }
  .ft2-mapcard { grid-template-columns: 1fr; }
  .ft2-refl-list { grid-template-columns: 1fr; }
  .ft2-gap { grid-template-columns: 1fr; }
  .ft2-gap-vs { padding: 2px 0; }
}


/* ============================================================
   Part 2: v4+ additions (formerly ft-mini-v4.css)
   ============================================================ */

/* ============================================================
   FELIZ & THRIVING — MINI APP v4 addendum
   Loads AFTER ft-mini-v2.css. New patterns for v4:
   stacked option lists, direction grid, fit control, action
   card fields, expandable snapshot, anchor line, honest
   copy/email states. Uppercase labels bumped for readability.
   ============================================================ */
.ft2-app .ft2-label { font-size: 12px; letter-spacing: 0.14em; }
.ft2-app .ft2-eyebrow span { font-size: 11.5px; }
.ft2-app .ft2-convert-small { font-size: 11.5px; }

/* stacked options with title + description */
.ft4-opts { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; }
.ft4-opt {
  text-align: left; background: #fff; border: 1.5px solid var(--ft2-line-strong);
  border-radius: var(--ft2-r-md); padding: 14px 16px; cursor: pointer; width: 100%;
  font-family: var(--ft2-sans); transition: border-color 160ms var(--ft2-ease), background 160ms var(--ft2-ease);
}
.ft4-opt:hover { border-color: var(--ft2-plum-soft); }
.ft4-opt[aria-pressed="true"] { border-color: var(--ft2-plum); background: var(--ft2-wash-blush); box-shadow: inset 0 0 0 0.5px var(--ft2-plum); }
.ft4-opt strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--ft2-ink); margin: 0 0 2px; }
.ft4-opt span { display: block; font-size: 14px; line-height: 1.5; color: var(--ft2-muted); }
.ft4-opt span:only-child, .ft4-opt > span.ft4-solo { font-size: 15px; color: var(--ft2-body); }

/* direction grid — six equal choices */
.ft4-dirgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.ft4-dirgrid .ft4-opt { height: 100%; }

/* notes + small honest states */
.ft4-note { font-size: 13px; color: var(--ft2-muted); line-height: 1.5; margin: 8px 0 0; max-width: 60ch; }
.ft2-rcard--ink .ft4-note, .ft2-convert .ft4-note { color: var(--ft2-on-ink); opacity: 0.75; }

/* action-card plan fields */
.ft4-planfields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.ft4-planfields .ft2-field { margin: 0; }
input[type="date"].ft2-input { max-width: 230px; }

/* expandable section header */
.ft4-xhead {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
  font-family: var(--ft2-sans); font-weight: 600; font-size: 14.5px; color: var(--ft2-plum); padding: 6px 0;
}
.ft4-xhead::after { content: "\2193"; font-size: 13px; transition: transform 200ms var(--ft2-ease); }
.ft4-xhead[aria-expanded="true"]::after { transform: rotate(180deg); }

/* anchor statement — single line */
.ft4-anchor {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  padding: 16px 22px; background: var(--ft2-ink); border-radius: var(--ft2-r-md); color: #fff;
}
.ft4-anchor .ft2-label { color: var(--ft2-plum-soft); }
.ft4-anchor em { font-family: var(--ft2-serif); font-size: 18px; line-height: 1.4; }

/* copy fallback + claire prompt box */
.ft4-copybox {
  width: 100%; min-height: 110px; margin-top: 10px; font-family: var(--ft2-mono); font-size: 12.5px;
  line-height: 1.6; color: var(--ft2-ink); background: #fff; border: 1.5px solid var(--ft2-line-strong);
  border-radius: var(--ft2-r-md); padding: 12px 14px; resize: vertical;
}
.ft4-prompt {
  font-family: var(--ft2-serif); font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--ft2-ink);
  background: #fff; border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-md); padding: 14px 18px; margin: 10px 0 12px; max-width: 62ch;
}

/* conversion block extras */
.ft4-charge { font-family: var(--ft2-serif); font-style: italic; font-size: 19px; color: #fff; margin: 0 0 18px; }
.ft4-btn-onink, .ft2-app a.ft4-btn-onink { background: transparent; color: var(--ft2-on-ink); border-color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.ft4-btn-onink:hover, .ft2-app a.ft4-btn-onink:hover { border-color: #fff; color: #fff; }
.ft4-emailrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ft4-emailrow .ft2-input { flex: 1; min-width: 220px; background: rgba(255, 255, 255, 0.95); }
.ft4-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-top: 10px; opacity: 0.85; max-width: 52ch; }
.ft4-check input { accent-color: var(--ft2-plum-soft); margin-top: 3px; }

/* plan display rows on result */
.ft4-planrow { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ft4-planrow:last-child { border-bottom: none; }
.ft4-planrow .ft2-label { padding-top: 2px; }
.ft4-planrow p { margin: 0; font-size: 15px; line-height: 1.55; }
.ft4-planrow .ft4-words { font-family: var(--ft2-serif); font-style: italic; font-size: 16.5px; color: #fff; }

/* ---- Journal ---- */
.ft4-moodgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.ft4-mood {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ft2-body);
  border: 1.5px solid var(--ft2-line-strong); border-radius: var(--ft2-r-pill); padding: 8px 14px;
  cursor: pointer; font-family: var(--ft2-sans); font-size: 14px; transition: border-color 160ms var(--ft2-ease), background 160ms var(--ft2-ease);
}
.ft4-mood:hover { border-color: var(--ft2-plum-soft); }
.ft4-mood[aria-pressed="true"] { border-color: var(--ft2-plum); background: var(--ft2-wash-blush); color: var(--ft2-ink); font-weight: 600; }
.ft4-mood[aria-pressed="true"]::after { content: "\2713"; font-weight: 700; color: var(--ft2-plum); }
.ft4-mood .ft4-mood-ico { font-size: 17px; line-height: 1; }
.ft4-toolbar { display: flex; gap: 6px; margin: 2px 0 8px; }
.ft4-fmtbtn {
  width: 38px; height: 34px; border: 1.5px solid var(--ft2-line-strong); background: #fff;
  border-radius: var(--ft2-r-sm); cursor: pointer; font-family: var(--ft2-serif); font-size: 15px; color: var(--ft2-ink);
  transition: border-color 160ms var(--ft2-ease);
}
.ft4-fmtbtn:hover { border-color: var(--ft2-plum-soft); color: var(--ft2-plum); }
.ft4-editor {
  min-height: 150px; background: #fff; border: 1.5px solid var(--ft2-line-strong); border-radius: var(--ft2-r-md);
  padding: 14px 16px; font-family: var(--ft2-sans); font-size: 16px; line-height: 1.6; color: var(--ft2-ink);
}
.ft4-editor:focus { outline: none; border-color: var(--ft2-plum); box-shadow: 0 0 0 1px var(--ft2-plum); }
.ft4-editor:empty::before { content: attr(data-ph); color: #A9967D; pointer-events: none; }
.ft4-editor ul, .ft4-jbody ul { margin: 8px 0; padding-left: 22px; }
.ft4-editor p, .ft4-jbody p { margin: 0 0 8px; }
.ft4-jbody { font-size: 15px; line-height: 1.6; color: var(--ft2-body); margin: 12px 0 0; overflow-wrap: break-word; }
.ft4-prompts { display: grid; gap: 8px; margin-top: 10px; }
.ft4-promptrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: #fff; border: 1px solid var(--ft2-line); border-radius: var(--ft2-r-md);
}
.ft4-promptrow p { margin: 0; font-size: 14px; line-height: 1.5; }
.ft4-draftbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px;
  background: var(--ft2-wash-peach); border: 1px solid var(--ft2-line-strong); border-radius: var(--ft2-r-md);
  padding: 12px 16px; margin: 0 0 16px;
}

@media (max-width: 720px) {
  .ft4-planfields, .ft4-dirgrid { grid-template-columns: 1fr; }
  .ft4-planrow { grid-template-columns: 1fr; gap: 2px; }
}


/* ===== AI integration additions (loading, refinement, fallback note) ===== */
.ft6-refining { font-size: 14px; font-style: italic; color: var(--ft2-muted); margin: 14px 0 0; }
.ft6-fallback-note { max-width: 760px; margin: -18px auto 24px; font-size: 13.5px; color: var(--ft2-muted); }