/* ============================================================================
   Funnel Leak Finder — app layer on the ListeningMind design tokens.

   Motion policy (emil-design-eng / animate):
   - The brand file ships --lm-ease, a weak built-in-like curve. Stronger UI
     curves are ADDED here rather than replacing it.
   - transform and opacity only. No `transition: all`. No entrance from scale(0).
   - Frequency gate: cards appear once per run (~60s) -> 300ms + 40ms stagger.
     Tabs are pressed often -> 180ms indicator, 140ms opacity, nothing else.
     Sheet is occasional -> 300ms iOS drawer curve, exits the way it entered.
   - Sparklines never animate: they are data being read.
   - Reduced motion and hover gating ship with the animation, not after it.
   ========================================================================== */

:root {
  --fl-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --fl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --fl-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --fl-d-press: 160ms;
  --fl-d-fast:  180ms;
  --fl-d-ui:    220ms;
  --fl-d-sheet: 300ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--lm-white);
  color: var(--lm-ink);
  font-family: var(--lm-font);
  font-size: var(--lm-fs-base);
  line-height: var(--lm-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
button { font-family: inherit; }

.fl-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* header, lockup and nav: rendered by the LM family shell (GNB + rail) */

.fl-select {
  height: 32px; padding: 0 28px 0 10px; max-width: 100%;
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm);
  background: var(--lm-white) no-repeat right 8px center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237F7A8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  font-size: var(--lm-fs-sm); color: var(--lm-ink-2);
  appearance: none; cursor: pointer; text-overflow: ellipsis;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out);
}
.fl-select:focus-visible { outline: 2px solid var(--lm-violet); outline-offset: 1px; }


/* ------------------------------------------------------------------ layout */
.fl-main { flex: 1; width: 100%; max-width: var(--lm-container); margin: 0 auto;
  padding: var(--lm-space-8) var(--lm-gutter) 96px; }

.fl-hero { margin-bottom: var(--lm-space-8); }
.fl-hero .fl-eyebrow { margin: 0 0 var(--lm-space-2); }
.fl-hero h1 { margin: 0; font-size: var(--lm-fs-xxl); line-height: var(--lm-lh-xxl);
  font-weight: var(--lm-fw-black); letter-spacing: var(--lm-tracking-tight);
  word-break: keep-all; }
.fl-hero p { margin: var(--lm-space-2) 0 0; color: var(--lm-ink-2); }

/* ---------------------------------------------------------------- composer */
.fl-composer {
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-md);
  background: var(--lm-white); box-shadow: var(--lm-shadow);
}
.fl-composer > .fl-fieldset:first-child {
  border-radius: var(--lm-r-md) var(--lm-r-md) 0 0; }
.fl-fieldset { padding: var(--lm-space-6) var(--lm-space-8);
  border-bottom: 1px solid var(--lm-line-soft); }
.fl-fieldset:last-of-type { border-bottom: 0; }
.fl-legend {
  display: block; font-size: var(--lm-fs-xs); line-height: var(--lm-lh-xs);
  font-weight: var(--lm-fw-bold);
  color: var(--lm-red-deep); margin-bottom: var(--lm-space-3);
}
.fl-legend-hint { font-size: var(--lm-fs-xs); color: var(--lm-muted); margin: -6px 0 10px; }
.fl-row { display: flex; flex-wrap: wrap; gap: var(--lm-space-2); align-items: center; }
.fl-row + .fl-row { margin-top: var(--lm-space-3); }
.fl-row__label { font-size: var(--lm-fs-sm); color: var(--lm-ink-3); min-width: 44px; }
.fl-row[data-disabled="true"] { opacity: .45; }

.fl-chip {
  height: 34px; padding: 0 14px; border-radius: var(--lm-r-pill);
  border: 1px solid var(--lm-line); background: var(--lm-white);
  font-size: var(--lm-fs-sm); color: var(--lm-ink-2); cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--fl-d-fast) var(--fl-ease-out),
              border-color var(--fl-d-fast) var(--fl-ease-out),
              color var(--fl-d-fast) var(--fl-ease-out),
              transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-chip:active { transform: scale(0.97); }
.fl-chip[aria-pressed="true"] {
  background: var(--lm-ink); border-color: var(--lm-ink); color: var(--lm-white);
  font-weight: var(--lm-fw-medium);
}
.fl-chip[disabled] { cursor: not-allowed; }
.fl-chip:focus-visible { outline: 2px solid var(--lm-violet); outline-offset: 2px; }

.fl-inline-note {
  font-size: var(--lm-fs-sm); line-height: 21px; color: var(--lm-ink-3);
  background: var(--lm-surface); border: 1px solid var(--lm-line-soft);
  border-radius: var(--lm-r-sm); padding: 10px 12px; margin-bottom: var(--lm-space-3);
}

.fl-inputrow { display: flex; gap: var(--lm-space-2); align-items: stretch; }
.fl-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm);
  font-size: var(--lm-fs-base); color: var(--lm-ink); background: var(--lm-white);
  transition: border-color var(--fl-d-fast) var(--fl-ease-out);
}
.fl-input::placeholder { color: var(--lm-muted); }
.fl-input:focus { outline: none; border-color: var(--lm-violet); }
.fl-btn--seed { height: 44px; padding: 0 16px; white-space: nowrap; }
.fl-btn--seed[disabled] { opacity: .45; cursor: not-allowed; }

/* suggested seeds + category topics */
.fl-sugbox:not(:empty) { margin-top: var(--lm-space-4); }
.fl-sughead { font-size: var(--lm-fs-sm); color: var(--lm-ink-3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-sughead strong { color: var(--lm-ink); }
.fl-sugchips { display: flex; flex-wrap: wrap; gap: var(--lm-space-2); }
.fl-sugchip {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%;
  padding: 8px 14px; border-radius: var(--lm-r-pill);
  border: 1px dashed var(--lm-line-strong); background: var(--lm-white);
  cursor: pointer; text-align: left;
  opacity: 0; transform: translateY(6px);
  animation: fl-in 260ms var(--fl-ease-out) forwards;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out),
              background-color var(--fl-d-fast) var(--fl-ease-out),
              transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-sugchip:active { transform: scale(0.97); }
.fl-sugchip[aria-pressed="true"] {
  border-style: solid; border-color: var(--lm-ink); background: var(--lm-ink);
}
.fl-sugchip[aria-pressed="true"] .fl-sugchip__kw { color: var(--lm-white); }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__angle,
.fl-sugchip[aria-pressed="true"] .fl-sugchip__vol { color: rgba(255,255,255,.62); }
.fl-sugchip__kw { font-size: var(--lm-fs-sm); font-weight: var(--lm-fw-medium);
  color: var(--lm-ink); }
.fl-sugchip__angle { font-size: var(--lm-fs-xxs); color: var(--lm-coral); white-space: nowrap; }
.fl-sugchip__vol { font-size: var(--lm-fs-xxs); color: var(--lm-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-sugfoot { margin-top: 10px; font-size: var(--lm-fs-xs); color: var(--lm-muted); }

.fl-topicchip {
  padding: 6px 12px; border-radius: var(--lm-r-pill);
  border: 1px dashed var(--lm-line); background: var(--lm-white);
  font-size: var(--lm-fs-xs); color: var(--lm-ink-3); cursor: pointer;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out),
              background-color var(--fl-d-fast) var(--fl-ease-out),
              color var(--fl-d-fast) var(--fl-ease-out),
              transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-topicchip:active { transform: scale(0.97); }
.fl-topicchip[aria-pressed="true"] {
  border-style: solid; border-color: var(--lm-ink);
  background: var(--lm-ink); color: var(--lm-white);
}

.fl-question {
  padding: var(--lm-space-5) var(--lm-space-8);
  background: rgba(234,232,238,.8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lm-space-6); flex-wrap: wrap;
}
.fl-question__text { font-size: var(--lm-fs-lg); line-height: var(--lm-lh-lg);
  color: var(--lm-ink); word-break: keep-all; }
.fl-question__text b { color: var(--lm-coral); font-weight: var(--lm-fw-bold); }
.fl-question__meta { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); margin-top: 4px; }

.fl-cta {
  height: 44px; padding: 0 24px; border: 0; border-radius: var(--lm-r-pill);
  background: var(--lm-grad-cta); color: var(--lm-white);
  font-size: var(--lm-fs-base); font-weight: var(--lm-fw-bold); cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fl-d-press) var(--fl-ease-out),
              opacity var(--fl-d-fast) var(--fl-ease-out);
}
.fl-cta:active { transform: scale(0.97); }
.fl-cta[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- progress */
.fl-progress { margin-top: var(--lm-space-8); }
.fl-progress__track { height: 4px; border-radius: 2px; background: var(--lm-line-soft);
  overflow: hidden; }
.fl-progress__bar {
  height: 100%; background: var(--lm-grad-cta);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 400ms var(--fl-ease-out);
}
.fl-steps { list-style: none; margin: var(--lm-space-5) 0 0; padding: 0; }
.fl-steps li {
  display: flex; gap: var(--lm-space-3); align-items: baseline;
  padding: 7px 0; font-size: var(--lm-fs-sm); color: var(--lm-ink-2);
  border-bottom: 1px solid var(--lm-line-soft);
  opacity: 0; transform: translateY(6px);
  animation: fl-in 260ms var(--fl-ease-out) forwards;
}
.fl-steps li .t { color: var(--lm-muted); font-size: var(--lm-fs-xs); min-width: 48px; }
.fl-steps li .c { margin-left: auto; color: var(--lm-muted); font-size: var(--lm-fs-xs); }
@keyframes fl-in { to { opacity: 1; transform: translateY(0); } }

.fl-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--lm-line); border-top-color: var(--lm-coral);
  animation: fl-spin 620ms linear infinite; display: inline-block; vertical-align: -2px;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- result bar */
.fl-resultbar {
  display: flex; align-items: center; gap: var(--lm-space-3); flex-wrap: wrap;
  padding-bottom: var(--lm-space-5); border-bottom: 1px solid var(--lm-line);
  margin-bottom: var(--lm-space-6);
}
.fl-resultbar h2 { margin: 0; font-size: var(--lm-fs-h3); line-height: var(--lm-lh-h3);
  font-weight: var(--lm-fw-bold); word-break: keep-all; }
.fl-meta { display: flex; gap: var(--lm-space-4); flex-wrap: wrap;
  font-size: var(--lm-fs-sm); color: var(--lm-ink-3); }
.fl-actions { margin-left: auto; display: flex; gap: var(--lm-space-2); flex-wrap: wrap; }
.fl-btn {
  height: 34px; padding: 0 14px; border-radius: var(--lm-r-sm);
  border: 1px solid var(--lm-line-strong); background: var(--lm-white);
  font-size: var(--lm-fs-sm); color: var(--lm-ink-2); cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out),
              color var(--fl-d-fast) var(--fl-ease-out),
              transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-btn:active { transform: scale(0.97); }
.fl-btn--danger { color: var(--lm-red-deep); border-color: rgba(200,20,20,.3); }
.fl-btn--primary { background: var(--lm-coral); border-color: var(--lm-coral); color: var(--lm-white); font-weight: 700;
  box-shadow: var(--lm-shadow); }
.fl-btn--primary:hover { opacity: .88; }
.fl-btn--accent { background: var(--lm-white); border-color: var(--lm-ink); color: var(--lm-ink); font-weight: 700; }
.fl-btn--accent:hover { background: var(--lm-ink); color: var(--lm-white); }

/* -------------------------------------------------------------------- tabs */
.fl-tabs { position: relative; display: flex; gap: var(--lm-space-1);
  border-bottom: 1px solid var(--lm-line); margin-bottom: var(--lm-space-6); }
.fl-tab {
  position: relative; height: 40px; padding: 0 14px; border: 0; background: none;
  font-size: var(--lm-fs-sm); color: var(--lm-ink-3); cursor: pointer;
  white-space: nowrap;
  transition: color var(--fl-d-fast) var(--fl-ease-out);
}
.fl-tab[aria-selected="true"] { color: var(--lm-ink); font-weight: var(--lm-fw-bold); }
.fl-tab__count { margin-left: 6px; color: var(--lm-muted); font-size: var(--lm-fs-xs); }
.fl-tabs__ink {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 1px;
  background: var(--lm-coral); transform-origin: left center;
  transition: transform var(--fl-d-ui) var(--fl-ease-in-out);
}
.fl-panel { opacity: 1; transition: opacity 140ms var(--fl-ease-out); }
.fl-panel[data-fading="true"] { opacity: 0; }

/* ------------------------------------------------------------- trend cards */
.fl-grid { display: grid; gap: var(--lm-space-4);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fl-card {
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-md);
  background: var(--lm-white); padding: var(--lm-space-5) var(--lm-space-6);
  display: flex; flex-direction: column; gap: var(--lm-space-3); min-width: 0;
  opacity: 0; transform: translateY(8px);
  animation: fl-in 300ms var(--fl-ease-out) forwards;
  transition: box-shadow var(--fl-d-ui) var(--fl-ease-out),
              border-color var(--fl-d-ui) var(--fl-ease-out);
}
.fl-card__top { display: flex; align-items: flex-start; gap: var(--lm-space-3); }
.fl-card__kw { font-size: var(--lm-fs-h4); line-height: var(--lm-lh-h4);
  font-weight: var(--lm-fw-bold); color: var(--lm-ink); word-break: keep-all; }
.fl-card__kind {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: var(--lm-r-sm);
  background: var(--lm-line-soft); color: var(--lm-ink-3);
  font-size: var(--lm-fs-xxs); line-height: 16px;
}
.fl-score { margin-left: auto; text-align: right; flex-shrink: 0; }
.fl-score__n { font-size: 28px; line-height: 32px; font-weight: var(--lm-fw-black);
  color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.fl-score__l { font-size: var(--lm-fs-xxs); color: var(--lm-muted); }

.fl-spark { height: 34px; width: 100%; display: block; }
.fl-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--lm-space-4); }
.fl-metric { min-width: 0; }
.fl-metric__l { font-size: var(--lm-fs-xxs); color: var(--lm-muted); white-space: nowrap; }
.fl-metric__v { font-size: var(--lm-fs-base); font-weight: var(--lm-fw-bold);
  color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.fl-metric__v.up { color: var(--lm-red-deep); }
.fl-metric__v.down { color: var(--lm-ink-3); }

.fl-tag {
  display: inline-block; padding: 2px 7px; border-radius: var(--lm-r-sm);
  border: 1px solid var(--lm-line); font-size: var(--lm-fs-xxs); line-height: 16px;
  color: var(--lm-ink-3); margin: 2px 4px 0 0;
}
/* Source labels sit on every metric, so they stay neutral: red is reserved for
   the eyebrow, the CTA and the one link per card. */
.fl-tag--label { border-color: var(--lm-line-soft); color: var(--lm-muted);
  background: var(--lm-surface); margin-left: 6px; vertical-align: 1px; }

.fl-qlist { border-top: 1px solid var(--lm-line-soft); padding-top: 10px; }
.fl-q { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.fl-q__k { font-size: var(--lm-fs-xs); color: var(--lm-ink-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-q__v { margin-left: auto; font-size: var(--lm-fs-xxs); color: var(--lm-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-q__more { font-size: var(--lm-fs-xxs); color: var(--lm-muted); padding-top: 3px; }

.fl-card__foot { margin-top: auto; padding-top: var(--lm-space-3);
  border-top: 1px solid var(--lm-line-soft); display: flex; align-items: center; gap: 10px; }
.fl-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--lm-fs-sm); font-weight: var(--lm-fw-bold); color: var(--lm-coral);
  transition: opacity var(--fl-d-fast) var(--fl-ease-out);
}
.fl-link:active { opacity: .7; }
.fl-cost { margin-left: auto; font-size: var(--lm-fs-xxs); color: var(--lm-muted); }

/* ------------------------------------------------------------------- sheet */
.fl-scrim {
  position: fixed; inset: 0; z-index: 50; max-width: 100vw;
  background: rgba(35,33,40,.42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--fl-d-sheet) var(--fl-ease-out);
}
.fl-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.fl-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(560px, 100vw); max-width: 100vw; background: var(--lm-white);
  border-left: 1px solid var(--lm-line);
  transform: translateX(100%);
  transition: transform var(--fl-d-sheet) var(--fl-ease-drawer);
  display: flex; flex-direction: column;
}
.fl-sheet[data-open="true"] { transform: translateX(0); visibility: visible; }
.fl-sheet[data-open="false"] { visibility: hidden;
  transition: transform var(--fl-d-sheet) var(--fl-ease-drawer), visibility 0s linear var(--fl-d-sheet); }
.fl-sheet__head {
  padding: var(--lm-space-5) var(--lm-space-6); border-bottom: 1px solid var(--lm-line);
  display: flex; align-items: flex-start; gap: var(--lm-space-3);
}
.fl-sheet__body { flex: 1; overflow-y: auto; padding: var(--lm-space-6);
  -webkit-overflow-scrolling: touch; }
.fl-sheet__tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto;
  align-items: center; }
.fl-btn--sm { height: 28px; padding: 0 10px; font-size: var(--lm-fs-xs);
  display: inline-flex; align-items: center; text-decoration: none; }
.fl-btn--sm[disabled] { opacity: .5; cursor: progress; }

.fl-close {
  width: 32px; height: 32px; border-radius: var(--lm-r-sm);
  border: 1px solid var(--lm-line); background: var(--lm-white); cursor: pointer;
  color: var(--lm-ink-3); font-size: 16px; line-height: 1; flex-shrink: 0;
  transition: transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-close:active { transform: scale(0.94); }

.fl-sec { margin-bottom: var(--lm-space-6); }
.fl-sec__h { font-size: var(--lm-fs-xs); font-weight: var(--lm-fw-bold); color: var(--lm-red-deep); margin-bottom: var(--lm-space-2); }
.fl-sec ul { margin: 0; padding-left: 18px; }
.fl-sec li { font-size: var(--lm-fs-sm); line-height: 22px; color: var(--lm-ink-2);
  margin-bottom: 6px; word-break: break-word; }
.fl-sec li .ev { display: block; color: var(--lm-muted); font-size: var(--lm-fs-xs); }

.fl-stage { display: flex; gap: var(--lm-space-2); overflow-x: auto; padding-bottom: 6px; }
.fl-stage__col { min-width: 150px; flex: 1; }
.fl-stage__h { font-size: var(--lm-fs-xxs); color: var(--lm-muted);
  margin-bottom: 6px; }
.fl-stage__item { font-size: var(--lm-fs-xs); line-height: 18px; color: var(--lm-ink-2);
  background: var(--lm-surface); border: 1px solid var(--lm-line-soft);
  border-radius: var(--lm-r-sm); padding: 5px 8px; margin-bottom: 4px; word-break: keep-all; }

.fl-path { font-size: var(--lm-fs-xs); line-height: 20px; color: var(--lm-ink-2);
  padding: 6px 0; border-bottom: 1px solid var(--lm-line-soft); }
.fl-path span::after { content: " → "; color: var(--lm-muted); }
.fl-path span:last-child::after { content: ""; }

/* -------------------------------------------------------------------- misc */
.fl-note { background: rgba(234,232,238,.8); border-radius: var(--lm-r-md);
  padding: var(--lm-space-4) var(--lm-space-5); font-size: var(--lm-fs-sm);
  line-height: 22px; color: var(--lm-ink-2); margin-bottom: var(--lm-space-6); }
.fl-empty { text-align: center; padding: 64px 0; color: var(--lm-ink-3); }

.fl-details { border: 1px solid var(--lm-line); border-radius: var(--lm-r-md);
  padding: 10px 16px; }
.fl-details > summary { cursor: pointer; font-size: var(--lm-fs-sm);
  color: var(--lm-ink-2); list-style: none; }
.fl-details > summary::-webkit-details-marker { display: none; }
.fl-details > summary::before { content: "▸ "; color: var(--lm-muted); }
.fl-details[open] > summary::before { content: "▾ "; }
.fl-details > ul { margin-top: 10px; columns: 2; column-gap: 32px; }

.fl-table-wrap { overflow-x: auto; }
.fl-table { width: 100%; border-collapse: collapse; font-size: var(--lm-fs-sm); }
.fl-table th { text-align: left; color: var(--lm-ink-3); font-weight: var(--lm-fw-medium);
  padding: 8px 12px; border-bottom: 1px solid var(--lm-line); font-size: var(--lm-fs-xs); }
.fl-table td { padding: 10px 12px; border-bottom: 1px solid var(--lm-line-soft);
  color: var(--lm-ink-2); }
.fl-table td b { color: var(--lm-ink); }

.fl-runrow { display: flex; align-items: center; gap: var(--lm-space-3);
  padding: 14px 0; border-bottom: 1px solid var(--lm-line-soft); }
.fl-runrow__t { font-size: var(--lm-fs-base); color: var(--lm-ink); word-break: break-word; }
.fl-runrow__m { font-size: var(--lm-fs-xs); color: var(--lm-muted); word-break: break-all; }

.fl-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  padding: 12px 18px; border-radius: var(--lm-r-md);
  background: var(--lm-charcoal); color: var(--lm-white); font-size: var(--lm-fs-sm);
  box-shadow: var(--lm-shadow);
  transform: translate(-50%, calc(100% + 24px)); opacity: 0;
  transition: transform var(--fl-d-ui) var(--fl-ease-out),
              opacity var(--fl-d-ui) var(--fl-ease-out);
}
.fl-toast[data-open="true"] { transform: translate(-50%, 0); opacity: 1; }

.fl-menu { position: relative; }
.fl-menu__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 200px; padding: 6px; background: var(--lm-white);
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-md);
  box-shadow: var(--lm-shadow);
  transform-origin: top right; transform: scale(0.96); opacity: 0;
  pointer-events: none;
  transition: transform var(--fl-d-fast) var(--fl-ease-out),
              opacity var(--fl-d-fast) var(--fl-ease-out);
}
.fl-menu__list[data-open="true"] { transform: scale(1); opacity: 1; pointer-events: auto; }
.fl-menu__list a {
  display: block; padding: 8px 10px; border-radius: var(--lm-r-sm);
  font-size: var(--lm-fs-sm); color: var(--lm-ink-2); text-decoration: none;
  transition: background-color 120ms var(--fl-ease-out);
}

/* methodology note above the family footer (the old app footer) */
.fl-method-note { max-width: var(--lm-container); margin: 0 auto; padding: 0 var(--lm-gutter) 40px;
  font-size: 12px; line-height: 16.8px; color: var(--lm-ink-3); text-align: center; }

/* --------------------------------------------------- hover, gated to mouse */
@media (hover: hover) and (pointer: fine) {
  .fl-card:hover { box-shadow: var(--lm-shadow); border-color: var(--lm-line-strong); }
  .fl-menu__list a:hover { background: var(--lm-line-soft); }
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 1024px) {
  .fl-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 600px) {
  .fl-main { padding: var(--lm-space-5) 16px 72px; }
  .fl-hero { margin-bottom: var(--lm-space-5); }
  .fl-hero h1 { font-size: var(--lm-fs-h3); line-height: var(--lm-lh-h3); }
  .fl-hero p { font-size: var(--lm-fs-sm); }

  .fl-fieldset { padding: var(--lm-space-4); }
  .fl-row { gap: 6px; }
  .fl-row__label { flex-basis: 100%; min-width: 0; margin-bottom: 2px; }
  .fl-chip { height: 32px; padding: 0 12px; font-size: var(--lm-fs-xs); }
  .fl-inputrow { flex-wrap: wrap; }
  .fl-inputrow .fl-input { flex: 1 1 100%; }
  .fl-btn--seed { flex: 1 1 100%; }

  .fl-question { padding: var(--lm-space-4); flex-direction: column;
    align-items: stretch; gap: var(--lm-space-3); }
  .fl-question__text { font-size: var(--lm-fs-base); line-height: var(--lm-lh-base); }
  .fl-cta { width: 100%; }

  .fl-resultbar { flex-direction: column; align-items: flex-start;
    gap: var(--lm-space-3); }
  .fl-actions { margin-left: 0; width: 100%; }
  .fl-meta { gap: 4px 12px; font-size: var(--lm-fs-xs); }

  .fl-tabs { overflow-x: auto; scrollbar-width: none; }
  .fl-tabs::-webkit-scrollbar { display: none; }
  .fl-tab { flex: 0 0 auto; padding: 0 10px; font-size: var(--lm-fs-xs); }

  .fl-grid { grid-template-columns: 1fr; }
  .fl-card { padding: var(--lm-space-4) var(--lm-space-5); }
  .fl-card__kw { font-size: var(--lm-fs-lg); line-height: var(--lm-lh-lg); }
  .fl-score__n { font-size: 24px; line-height: 28px; }

  .fl-details > ul { columns: 1; }

  /* On a phone the drill-down is a bottom sheet, and it leaves the way it came. */
  .fl-sheet { left: 0; right: 0; top: auto; width: 100vw; height: 92vh;
    border-left: 0; border-top: 1px solid var(--lm-line);
    border-top-left-radius: var(--lm-r-lg); border-top-right-radius: var(--lm-r-lg);
    transform: translateY(100%); }
  .fl-sheet[data-open="true"] { transform: translateY(0); }
  .fl-sheet__head { padding: var(--lm-space-4); flex-wrap: wrap; }
  .fl-sheet__tools { order: 3; width: 100%; margin-left: 0; }
  .fl-sheet__tools .fl-btn--sm { flex: 1 1 auto; justify-content: center; }
  .fl-sheet__body { padding: var(--lm-space-4); }
  .fl-stage__col { min-width: 132px; }

  .fl-runrow { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fl-runrow .fl-actions { width: 100%; }
  .fl-table { font-size: var(--lm-fs-xs); }
  .fl-table th, .fl-table td { padding: 8px; }

  .fl-toast { left: 16px; right: 16px; bottom: 16px;
    transform: translateY(calc(100% + 16px)); }
  .fl-toast[data-open="true"] { transform: translateY(0); }
}

@media (max-width: 380px) {
  .fl-chip { padding: 0 10px; }
  .fl-brand__mark svg { height: 20px; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fl-card, .fl-steps li, .fl-sugchip {
    animation: fl-fade 200ms ease forwards; transform: none;
  }
  .fl-sheet { transition: opacity var(--fl-d-ui) ease; }
  .fl-sheet[data-open="false"] { opacity: 0; }
  .fl-chip:active, .fl-btn:active, .fl-cta:active, .fl-close:active,
  .fl-ghost:active, .fl-brand:active, .fl-sugchip:active,
  .fl-topicchip:active { transform: none; }
  .fl-toast { transition: opacity var(--fl-d-ui) ease; }
  .fl-spinner { animation-duration: 1.4s; }
}
@keyframes fl-fade { to { opacity: 1; } }

/* entity tab: generic-demand divider */
.fl-subhead {
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--lm-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--lm-ink-3);
}

/* entity attribution chip on query cards */
.fl-entchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: -2px 0 10px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--lm-line);
  border-radius: 999px;
  background: var(--lm-line-soft);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition: background 160ms var(--fl-ease-out), border-color 160ms var(--fl-ease-out);
}
.fl-entchip:hover { background: #fff; border-color: var(--lm-coral); }
.fl-entchip:active { transform: scale(0.97); }
.fl-entchip__t { color: var(--lm-ink-3); }
.fl-entchip__n { font-weight: 700; color: var(--lm-ink); }
.fl-entchip__c { color: var(--lm-coral); font-weight: 700; }

.fl-card.is-focus {
  box-shadow: 0 0 0 2px var(--lm-coral);
  transition: box-shadow 200ms var(--fl-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .fl-entchip, .fl-card.is-focus { transition: none; }
}

/* co-query formation (Query Finder) */
.fl-form {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--lm-line-soft);
  font-size: 12px; line-height: 16px; color: var(--lm-ink-3);
}
.fl-form__l { white-space: nowrap; }
.fl-form__bar {
  flex: 1 1 auto; min-width: 40px; height: 5px; border-radius: 3px;
  background: var(--lm-line-soft); overflow: hidden;
}
.fl-form__fill {
  display: block; height: 100%; border-radius: 3px;
  background: var(--lm-coral);
}
.fl-form__v { white-space: nowrap; color: var(--lm-ink-2); font-weight: 500; }
.fl-form__age { white-space: nowrap; color: var(--lm-ink-3); }
.fl-form__side {
  margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--lm-ink-3);
}

/* ------------------------------------------------- brief / purpose input */
.fl-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 84px; padding: 12px 14px;
  border: 1px solid var(--lm-line-strong); border-radius: var(--lm-r-sm);
  background: var(--lm-white); color: var(--lm-ink);
  font: inherit; font-size: var(--lm-fs-md); line-height: 26px;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out);
}
.fl-textarea:focus { outline: none; border-color: var(--lm-violet); }
.fl-textarea::placeholder { color: var(--lm-muted); }
.fl-briefrow { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }

.fl-readback:empty { display: none; }
.fl-readback {
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm);
  background: var(--lm-line-soft);
}
.fl-readback__h {
  font-size: 13px; font-weight: 700; color: var(--lm-ink); margin-bottom: 10px;
}
.fl-readback__list { display: grid; gap: 7px; }
.fl-readback__r {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px;
  align-items: baseline; font-size: 13px; line-height: 20px;
}
.fl-readback__k { color: var(--lm-ink-3); }
.fl-readback__v { color: var(--lm-ink); font-weight: 500; word-break: keep-all; }
.fl-readback__q { color: var(--lm-muted); font-size: 12px; text-align: right; }
.fl-readback__f {
  margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--lm-ink-3);
}
.fl-readback__u {
  margin-top: 8px; padding-left: 16px; position: relative;
  font-size: 13px; line-height: 20px; color: var(--lm-coral);
}
.fl-readback__u::before { content: "?"; position: absolute; left: 0; font-weight: 700; }

.fl-purposegroups { display: grid; gap: 12px; }
.fl-purposegroup__l { font-size: 11px; font-weight: 700;
  color: var(--lm-muted); margin-bottom: 6px; }
.fl-purposes { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-purpose {
  padding: 8px 15px; border-radius: var(--lm-r-pill);
  border: 1px solid var(--lm-line-strong); background: var(--lm-white);
  font: inherit; font-size: 13px; line-height: 20px; color: var(--lm-ink-2);
  cursor: pointer; text-align: left;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out),
              background-color var(--fl-d-fast) var(--fl-ease-out),
              transform var(--fl-d-press) var(--fl-ease-out);
}
.fl-purpose:hover { border-color: var(--lm-violet); }
.fl-purpose:active { transform: scale(0.98); }
.fl-purpose[aria-pressed="true"] {
  border-color: var(--lm-coral); color: var(--lm-white); background: var(--lm-coral);
  font-weight: 600;
}

/* what the chosen purpose moves - stated, not implied */
.fl-effects { margin-top: 12px; padding: 12px 14px;
  border: 1px dashed var(--lm-line-strong); border-radius: var(--lm-r-sm);
  background: var(--lm-line-soft); }
.fl-effects__none { font-size: 12px; line-height: 19px; color: var(--lm-ink-3); }
.fl-effects__h { font-size: 11px; font-weight: 700; color: var(--lm-ink-3); margin-bottom: 8px; }
.fl-effects__list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fl-effects__i { display: inline-flex; gap: 6px; align-items: baseline;
  font-size: 13px; line-height: 20px; }
.fl-effects__k { color: var(--lm-ink-3); }
.fl-effects__v { color: var(--lm-ink); font-weight: 600; }
.fl-effects__d { margin-top: 9px; font-size: 12px; line-height: 19px;
  color: var(--lm-ink-3); word-break: keep-all; }

.fl-toggle {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  cursor: pointer;
}
.fl-toggle input { margin-top: 3px; accent-color: var(--lm-coral); }
.fl-toggle__t { display: block; font-size: 13px; font-weight: 600; color: var(--lm-ink); }
.fl-toggle__d {
  display: block; font-size: 12px; line-height: 19px; color: var(--lm-ink-3);
  margin-top: 2px; word-break: keep-all;
}

/* --------------------------------------------------- numbered steps */
.fl-step__h { display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--lm-space-3); }
.fl-step__h .fl-legend { margin-bottom: 0; }
.fl-step__n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lm-red-deep); color: var(--lm-white);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.fl-briefrow { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 10px; }
.fl-briefrow__skip { font-size: 12px; color: var(--lm-muted); }

/* the summary bar: what will run, without unfolding anything */
.fl-summary { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.fl-summary__pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 320px; }
.fl-pill { display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: var(--lm-r-pill);
  background: var(--lm-line-soft); border: 1px solid var(--lm-line);
  font-size: 13px; line-height: 20px; }
.fl-pill__k { color: var(--lm-ink-3); font-size: 11px; }
.fl-pill__v { color: var(--lm-ink); font-weight: 600; word-break: keep-all; }
.fl-pill--free { border-color: var(--lm-coral); background: var(--lm-white); }
.fl-linkbtn { border: 0; background: none; padding: 0; font: inherit;
  font-size: 13px; color: var(--lm-violet); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.fl-linkbtn:hover { color: var(--lm-coral); }

.fl-details { margin-top: 18px; }
.fl-group + .fl-group { margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed var(--lm-line); }
.fl-group__l { font-size: 12px; font-weight: 700; color: var(--lm-ink-2);
  margin-bottom: 10px; }
.fl-group > .fl-input { width: 100%; box-sizing: border-box; }

/* the category selection is silently ignored while free text is present */
.fl-row[data-overridden="true"] { opacity: .45; }
.fl-override { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 11px; border-radius: var(--lm-r-sm);
  background: rgba(255,91,96,.07); border: 1px solid rgba(255,91,96,.28); }
.fl-override__t { font-size: 12px; line-height: 19px; color: var(--lm-ink-2);
  word-break: keep-all; }

/* options fold */
.fl-opts { padding-top: var(--lm-space-4); padding-bottom: var(--lm-space-4); }
.fl-opts__h { display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  text-align: left; }
.fl-opts__h .fl-legend { margin-bottom: 0; flex: none; }
.fl-opts__sum { flex: 1; font-size: 12px; color: var(--lm-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-opts__c { flex: none; width: 22px; height: 22px; line-height: 20px;
  text-align: center; border: 1px solid var(--lm-line-strong);
  border-radius: 50%; color: var(--lm-ink-3); font-size: 13px; }

/* the cost and the button stay reachable however long the form gets */
.fl-question { position: sticky; bottom: 0; z-index: 3;
  backdrop-filter: blur(6px); border-top: 1px solid var(--lm-line);
  border-radius: 0 0 var(--lm-r-md) var(--lm-r-md); }

@media (max-width: 640px) {
  .fl-summary__pills { flex-basis: 100%; }
  .fl-readback__r { grid-template-columns: 1fr; gap: 2px; }
  .fl-readback__q { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-textarea, .fl-purpose { transition: none; }
}
.fl-note--warn {
  border-left: 3px solid var(--lm-coral);
  background: var(--lm-white);
}

/* colourways and fits of one model, shown as attributes not as separate cards */
.fl-variants {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 11px; font-size: 12px; line-height: 16px;
}
.fl-variants__l { color: var(--lm-ink-3); margin-right: 3px; }
.fl-vchip {
  padding: 2px 7px; border-radius: 999px;
  background: var(--lm-line-soft); color: var(--lm-ink-2);
}

/* situation lean — the axis that works where demography does not exist */
.fl-ctx {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 11px; font-size: 12px; line-height: 16px;
}
.fl-ctx__l { color: var(--lm-ink-3); margin-right: 2px; }
.fl-ctx__c {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--lm-line); background: var(--lm-white);
}
.fl-ctx__n { color: var(--lm-ink-2); }
.fl-ctx__v { color: var(--lm-coral); font-weight: 700; }

/* which of the three a thing is, and why — stated on the card, not inferred */
.fl-bucket {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: -2px 0 10px;
}
.fl-bucket__n {
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; line-height: 17px; font-weight: 700; white-space: nowrap;
}
.fl-bucket__w { font-size: 12px; line-height: 17px; color: var(--lm-ink-3);
  word-break: keep-all; }
.fl-bucket[data-b="surge"]    .fl-bucket__n { background: var(--lm-coral-soft); color: var(--lm-red-deep); }
.fl-bucket[data-b="distinct"] .fl-bucket__n { background: var(--lm-violet-soft); color: var(--lm-violet-hover); }
.fl-bucket[data-b="nascent"]  .fl-bucket__n { background: rgba(140,189,87,.16); color: var(--fl-ok); }
.fl-bucket[data-b="none"]     .fl-bucket__n { background: var(--lm-line-soft);
  color: var(--lm-ink-3); font-weight: 500; }

/* ============================================================================
   Funnel Leak Finder additions: KPI tiles, share bars, sankey, tree, class table
   ========================================================================== */
.fl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--lm-space-3); margin-bottom: var(--lm-space-6); }
.fl-kpi { border: 1px solid var(--lm-line); border-radius: var(--lm-r-md); background: var(--lm-white);
  padding: 14px 16px; min-width: 0;
  opacity: 0; transform: translateY(8px); animation: fl-in 300ms var(--fl-ease-out) forwards; }
.fl-kpi__l { font-size: var(--lm-fs-xxs); color: var(--lm-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-kpi__v { font-size: 26px; line-height: 32px; font-weight: var(--lm-fw-black); color: var(--lm-ink);
  font-variant-numeric: tabular-nums; margin-top: 4px; word-break: keep-all; }
.fl-kpi__v.my { color: var(--lm-coral); }
.fl-kpi__v.comp { color: var(--lm-violet); }
.fl-kpi__v small { font-size: 13px; font-weight: var(--lm-fw-medium); color: var(--lm-ink-3); }
.fl-kpi__s { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); margin-top: 4px; }
.fl-kpi__s .up { color: var(--lm-red-deep); } .fl-kpi__s .down { color: var(--lm-cat-green); }

.fl-overview { background: rgba(234,232,238,.8); border-radius: var(--lm-r-md);
  padding: var(--lm-space-5) var(--lm-space-6); font-size: var(--lm-fs-base); line-height: 26px;
  color: var(--lm-ink); margin-bottom: var(--lm-space-6); word-break: keep-all; }
.fl-overview .fl-tag { vertical-align: 2px; }

.fl-bars { display: grid; gap: 10px; }
.fl-bar { display: grid; grid-template-columns: 150px 1fr 150px; gap: 12px; align-items: center;
  font-size: var(--lm-fs-sm); }
.fl-bar__n { color: var(--lm-ink); font-weight: var(--lm-fw-medium); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.fl-bar__n .r { font-size: var(--lm-fs-xxs); color: var(--lm-muted); margin-left: 6px; }
.fl-bar__t { position: relative; height: 18px; background: var(--lm-line-soft); border-radius: 4px; overflow: hidden; }
.fl-bar__f { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lm-violet); border-radius: 4px;
  transform-origin: left center; }
.fl-bar__f.my { background: var(--lm-coral); }
.fl-bar__p { position: absolute; left: 0; top: 11px; height: 4px; background: rgba(61,58,70,.45); border-radius: 2px; }
.fl-bar__v { text-align: right; font-variant-numeric: tabular-nums; color: var(--lm-ink-2); white-space: nowrap; }
.fl-bar__v small { color: var(--lm-muted); }

.fl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--lm-fs-xs); color: var(--lm-ink-3);
  margin: 10px 0 14px; }
.fl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.c-my { background: var(--lm-coral); } .c-comp { background: var(--lm-violet); } .c-other { background: var(--lm-line-strong); }
.c-generic { background: var(--lm-ink-3); } .c-exit { background: var(--lm-line-strong); } .c-stage { background: var(--lm-cat-steel); }

.fl-chartwrap { overflow-x: auto; border: 1px solid var(--lm-line); border-radius: var(--lm-r-md);
  background: var(--lm-white); padding: 12px; }
.fl-chartwrap svg { display: block; }
.fl-sk-node { cursor: default; }
.fl-sk-node text { font-size: 12px; fill: var(--lm-ink); }
.fl-sk-node text.v { fill: var(--lm-ink-3); font-size: 11px; }
.fl-sk-link { fill: var(--lm-line-strong); fill-opacity: .32; transition: fill-opacity 140ms var(--fl-ease-out); }
.fl-sk-link.my { fill: var(--lm-coral); } .fl-sk-link.comp { fill: var(--lm-violet); }
.fl-sk-link:hover { fill-opacity: .6; }
.fl-sk-link.dim { fill-opacity: .08; }

.fl-tree text { font-size: 12px; fill: var(--lm-ink); cursor: pointer; }
.fl-tree text.cnt { fill: var(--lm-muted); font-size: 10px; cursor: pointer; }
.fl-tree .edge { fill: none; stroke: var(--lm-line); }
.fl-tree .node { cursor: pointer; }
.fl-tree .node rect { fill: var(--lm-white); stroke: var(--lm-line); }
.fl-tree .node.my rect { stroke: var(--lm-coral); fill: rgba(255,91,96,.08); }
.fl-tree .node.comp rect { stroke: var(--lm-violet); fill: rgba(120,110,190,.10); }
.fl-tree .node.exit rect { stroke: var(--lm-line-strong); stroke-dasharray: 3 3; }
.fl-tree .node.compare rect { fill: var(--lm-surface); }
.fl-tree .node.entry rect { fill: var(--lm-ink); stroke: var(--lm-ink); }
.fl-tree .node.entry text { fill: var(--lm-white); }
.fl-tree .tog { cursor: pointer; }
.fl-tree .tog rect { fill: var(--lm-line-soft); stroke: none; }
.fl-tree .tog text { fill: var(--lm-ink-2); font-size: 10px; text-anchor: middle; }
.fl-treetools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }

.fl-brandchip { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--lm-line); font-size: var(--lm-fs-xxs); line-height: 16px; color: var(--lm-ink-2);
  margin: 2px 4px 2px 0; white-space: nowrap; }
.fl-brandchip b { color: var(--lm-violet); font-weight: 700; }
.fl-brandchip.my b { color: var(--lm-coral); }
.fl-brandchip.new { border-color: var(--lm-coral); }

.fl-score { font-weight: var(--lm-fw-black); font-size: 16px; color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.fl-table td.kw { min-width: 180px; }
.fl-table td.kw b { cursor: pointer; }
.fl-table td.kw b:hover { color: var(--lm-coral); }
.fl-stage { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--lm-line-soft);
  font-size: var(--lm-fs-xxs); color: var(--lm-ink-3); white-space: nowrap; }
.fl-mini { height: 6px; background: var(--lm-line-soft); border-radius: 3px; overflow: hidden; width: 90px; display: inline-block;
  vertical-align: middle; margin-right: 6px; }
.fl-mini i { display: block; height: 100%; background: var(--lm-violet); }
.fl-mini i.my { background: var(--lm-coral); }
.fl-delta.up { color: var(--lm-red-deep); } .fl-delta.down { color: var(--lm-cat-green); } .fl-delta.new { color: var(--lm-coral); }

.fl-hubfilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }

.fl-edge { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--lm-line-soft);
  font-size: var(--lm-fs-sm); flex-wrap: wrap; }
.fl-edge .arrow { color: var(--lm-muted); }
.fl-edge .to { font-weight: var(--lm-fw-bold); color: var(--lm-violet); }
.fl-edge .m { margin-left: auto; font-size: var(--lm-fs-xs); color: var(--lm-muted); font-variant-numeric: tabular-nums; }
.fl-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lm-space-6); }
@media (max-width: 800px) { .fl-two { grid-template-columns: 1fr; } .fl-bar { grid-template-columns: 110px 1fr 110px; } }

.fl-classrow select { height: 28px; font-size: 12px; border: 1px solid var(--lm-line); border-radius: 6px; background: #fff; }
.fl-classrow input { height: 28px; font-size: 12px; border: 1px solid var(--lm-line); border-radius: 6px; padding: 0 8px; width: 110px; }
.fl-src { font-size: 10px; color: var(--lm-muted); }

.fl-split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.fl-split div { border: 1px solid var(--lm-line-soft); border-radius: var(--lm-r-sm); padding: 8px 10px; }
.fl-split .l { font-size: 10px; color: var(--lm-muted); }
.fl-split .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-serp li { font-size: var(--lm-fs-xs); }
.fl-serp .host { color: var(--lm-muted); }
.fl-serp .mine { color: var(--lm-coral); font-weight: 700; }
.fl-ok { color: var(--lm-cat-green); font-weight: 700; } .fl-no { color: var(--lm-red-deep); font-weight: 700; }
.fl-inline-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .fl-inline-form { grid-template-columns: 1fr; } .fl-split { grid-template-columns: repeat(2, 1fr); } }
.fl-exchip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 12px;
  border: 1px dashed var(--lm-line-strong); border-radius: var(--lm-r-md); background: #fff; cursor: pointer; text-align: left;
  transition: border-color var(--fl-d-fast) var(--fl-ease-out), background-color var(--fl-d-fast) var(--fl-ease-out); }
.fl-exchip:hover { border-color: var(--lm-coral); }
.fl-exchip .s { font-size: var(--lm-fs-sm); font-weight: 600; color: var(--lm-ink); }
.fl-exchip .b { font-size: var(--lm-fs-xxs); color: var(--lm-muted); }
.fl-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fl-modebadge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--lm-line-soft);
  font-size: var(--lm-fs-xxs); color: var(--lm-ink-3); margin-left: 8px; vertical-align: 2px; }

/* evidence badge + capture group chip + destination line */
.fl-ev { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; line-height: 16px;
  font-weight: 600; white-space: nowrap; border: 1px solid var(--lm-line); color: var(--lm-ink-3); background: var(--lm-white); }
.fl-ev--very_low { border-color: rgba(200,20,20,.35); color: var(--lm-red-deep); background: var(--lm-coral-soft); }
.fl-ev--low { border-color: var(--lm-d4); color: var(--fl-warn); background: rgba(191,160,85,.14); }
.fl-ev--directional { border-color: var(--lm-line-strong); color: var(--lm-ink-2); }
.fl-ev--strong { border-color: var(--lm-pos); color: var(--fl-ok); background: rgba(140,189,87,.16); }
.fl-grp { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.fl-grp--winning { background: rgba(140,189,87,.16); color: var(--fl-ok); }
.fl-grp--contested { background: rgba(191,160,85,.14); color: var(--fl-warn); }
.fl-grp--leaking { background: var(--lm-violet-soft); color: var(--lm-violet-hover); }
.fl-grp--uncaptured { background: var(--lm-line-soft); color: var(--lm-ink-3); }
.fl-dest { font-size: var(--lm-fs-sm); color: var(--lm-ink-2); padding: 6px 10px; border-radius: var(--lm-r-sm);
  background: var(--lm-surface); border: 1px solid var(--lm-line-soft); word-break: keep-all; }
.fl-dest b { color: var(--lm-violet); }
.fl-shrunk { color: var(--lm-muted); font-weight: 400; }

/* AI helper chips for competitors */
.fl-sugchip--wide { flex-direction: column; align-items: flex-start; gap: 3px; max-width: 420px; }
.fl-sugchip__note { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); line-height: 17px; word-break: keep-all; }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__note { color: rgba(255,255,255,.8); }
.fl-sugchip .fl-sugchip__vol { white-space: normal; }

/* journey tree: key lines, flow motion, selected path */
.fl-tree .edge.key { stroke: #3D3A46; }
.fl-tree .edge.key.comp { stroke: var(--lm-violet); }
.fl-tree .edge.key.my { stroke: var(--lm-coral); }
.fl-tree .edge.sel { stroke: var(--lm-coral); }
.fl-tree .flow { fill: none; stroke: rgba(61,58,70,.28); stroke-linecap: round;
  stroke-dasharray: 3 14; animation: fl-flow 3s linear infinite; }
.fl-tree .flow.key { stroke: rgba(61,58,70,.85); }
.fl-tree .flow.key.comp { stroke: var(--lm-violet); }
.fl-tree .flow.key.my { stroke: var(--lm-coral); }
.fl-tree .flow.sel { stroke: var(--lm-coral); stroke-dasharray: 4 10; }
@keyframes fl-flow { to { stroke-dashoffset: -34; } }
.fl-tree .node.key rect { stroke-width: 2; }
.fl-tree .node.sel rect { stroke: var(--lm-coral); stroke-width: 2; }
.fl-tree .node.entry.sel rect { stroke: var(--lm-coral); }
@media (prefers-reduced-motion: reduce) { .fl-tree .flow { animation: none; stroke-dasharray: none; opacity: .35; } }
.fl-keylines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fl-keyline { border: 1px solid var(--lm-line); background: var(--lm-white); border-radius: 999px; padding: 4px 11px;
  font: inherit; font-size: 12px; color: var(--lm-ink-2); cursor: pointer; text-align: left; }
.fl-keyline b { color: var(--lm-white); background: var(--lm-ink); border-radius: 999px; padding: 0 6px; margin-right: 4px; font-size: 11px; }
.fl-keyline .m { color: var(--lm-muted); margin-left: 6px; }
.fl-keyline:hover { border-color: var(--lm-coral); }
.fl-keyline.on { border-color: var(--lm-coral); background: rgba(255,91,96,.08); box-shadow: inset 0 0 0 1px var(--lm-coral); }
.fl-keyline.on b { background: var(--lm-coral); }
.fl-sugbox .fl-briefrow { justify-content: flex-start; gap: 12px; }
.fl-sugstatus { font-size: var(--lm-fs-xs); color: var(--lm-red-deep); font-weight: 700; margin-left: 10px; }
.fl-sugstatus[data-on="true"] { color: var(--lm-ink-3); font-weight: 500; }
.fl-pathbox { margin-top: 14px; border: 1px solid var(--lm-line); border-left: 4px solid var(--lm-coral); border-radius: var(--lm-r-md); padding: 14px 16px; background: var(--lm-white); }
.fl-pathbox__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fl-pathbox__head .fl-sec__h { margin-bottom: 0; }
.fl-pathsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fl-pathstep { border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm); padding: 6px 10px; min-width: 120px; }
.fl-pathstep.my { border-color: var(--lm-coral); background: rgba(255,91,96,.06); }
.fl-pathstep.comp { border-color: var(--lm-violet); background: rgba(120,110,190,.08); }
.fl-pathstep .k { font-size: 13px; font-weight: 700; color: var(--lm-ink); word-break: keep-all; }
.fl-pathstep .s { font-size: 11px; color: var(--lm-ink-3); }
.fl-pathstep .v { font-size: 11px; color: var(--lm-muted); font-variant-numeric: tabular-nums; }
.fl-patharrow { color: var(--lm-muted); }

.fl-story { border-left: 4px solid var(--lm-coral); line-height: 1.7; }
.fl-story .fl-sec__h { margin-bottom: 6px; }

/* ------------------------------------------------------------ marketer view */
.fl-watchhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.fl-watchhead .fl-sec__h { margin-bottom: 4px; }
.fl-watchlist { display: flex; flex-direction: column; gap: 14px; }
.fl-wcard { border: 1px solid var(--lm-line); border-left: 4px solid var(--lm-ink-3); border-radius: var(--lm-r-md); background: var(--lm-white); padding: 14px 16px;
  opacity: 0; transform: translateY(6px); animation: fl-in 260ms var(--fl-ease-out) forwards; }
.fl-wcard--conquest { border-left-color: var(--lm-coral); }
.fl-wcard--uncaptured { border-left-color: var(--lm-violet); }
.fl-wcard--defend { border-left-color: var(--lm-red-deep); }
.fl-wcard--poach { border-left-color: var(--lm-violet, #786EBE); }
.fl-wcard--strengthen { border-left-color: var(--lm-pos); }
.fl-wcard__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-wrank { width: 22px; height: 22px; border-radius: 999px; background: var(--lm-ink); color: var(--lm-white); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fl-wtype { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.fl-wtype--conquest { color: var(--lm-coral); }
.fl-wtype--uncaptured { color: var(--lm-violet-hover); }
.fl-wtype--defend { color: var(--lm-red-deep); }
.fl-wtype--poach { color: var(--lm-violet, #786EBE); }
.fl-wtype--strengthen { color: var(--fl-ok); }
.fl-wchain { font-size: 15px; color: var(--lm-ink); word-break: keep-all; }
.fl-wchain b { font-weight: 500; }
.fl-wchain b.end { font-weight: 700; }
.fl-wchain .sep { color: var(--lm-muted); margin: 0 6px; }
.fl-wev { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.fl-wfacts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--lm-ink-3); font-variant-numeric: tabular-nums; }
.fl-wfacts b { color: var(--lm-ink); }
.fl-wwhy { margin-top: 12px; }
.fl-wwhy .rule { font-size: 13px; color: var(--lm-ink-2); }
.fl-wwhy .narr, .fl-wframe .narr { font-size: 13px; color: var(--lm-ink); line-height: 1.65; margin-top: 4px; }
.fl-wframe { margin-top: 12px; border: 1px solid var(--lm-line); border-radius: var(--lm-r-sm); padding: 10px 12px; background: var(--lm-surface); }
.fl-wframe .row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--lm-line); font-size: 13px; align-items: baseline; }
.fl-wframe .row:first-of-type { border-top: 0; }
.fl-wframe .k { color: var(--lm-muted); font-size: 12px; }
.fl-wframe .v { color: var(--lm-ink); }
.fl-wchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fl-wchip { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--lm-line-strong); background: var(--lm-white); }
.fl-wchip.bid { border-color: var(--lm-coral); color: var(--lm-red-deep); }
.fl-wchip.conq { border-color: var(--lm-violet, #786EBE); color: var(--lm-violet-hover); }
.fl-wchip.ch { background: var(--lm-ink); color: var(--lm-white); border-color: var(--lm-ink); }
.fl-wchip.against { border-color: var(--lm-violet, #786EBE); color: var(--lm-violet-hover); margin-left: 6px; }
@media (max-width: 640px) { .fl-wframe .row { grid-template-columns: 1fr; gap: 2px; } .fl-wev { margin-left: 0; } }

.fl-brandchip--act { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--lm-line); border-radius: 999px; margin: 0 6px 6px 0; }
.fl-brandchip--act span { color: var(--lm-muted); font-size: 12px; }

/* ------------------------------------------------------------ AI Overview */
.fl-aio { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; line-height: 16px; }
.fl-aio--safe { color: var(--fl-ok); border-color: var(--lm-pos); background: rgba(61,170,122,.10); }
.fl-aio--contested { color: var(--fl-warn); border-color: var(--lm-d4); background: rgba(224,163,58,.12); }
.fl-aio--risk { color: #C81414; border-color: #FF5B60; background: rgba(255,91,96,.10); }
.fl-aio--info { color: var(--lm-violet-hover); border-color: #786EBE; background: rgba(120,110,190,.10); }
.fl-aio--empty { color: var(--lm-ink-3); border-color: var(--lm-line-strong); }
.fl-aio--none { color: var(--lm-muted); border-color: var(--lm-line); border-style: dashed; }
.fl-aio--unchecked { color: var(--lm-muted); border-color: var(--lm-line); border-style: dotted; font-weight: 500; }
.fl-tree circle.aio { stroke: #fff; stroke-width: 1.5; }
circle.aio-safe { fill: var(--lm-pos); } circle.aio-contested { fill: var(--lm-d4); } circle.aio-risk { fill: #FF5B60; }
circle.aio-info { fill: #786EBE; } circle.aio-empty { fill: var(--lm-line-strong); } circle.aio-none { fill: #fff; stroke: var(--lm-line-strong) !important; }
.fl-legend__aio i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin: 0 3px 0 6px; vertical-align: -1px; }
.fl-legend__aio i.a-safe { background: var(--lm-pos); } .fl-legend__aio i.a-contested { background: var(--lm-d4); } .fl-legend__aio i.a-risk { background: #FF5B60; }
.fl-legend__aio i.a-empty { background: var(--lm-line-strong); } .fl-legend__aio i.a-none { background: #fff; border: 1px solid var(--lm-line-strong); }
.fl-pathstep .a { margin-top: 4px; }
.fl-waio { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; margin-top: 4px; }
.fl-waio__k { font-size: 12px; color: var(--lm-ink-2); margin-right: 2px; }
.fl-waio .sep { color: var(--lm-muted); margin: 0 4px; }

/* ============================================================================
   Design pass 2026-09 · bright and plain.
   Six rules: one accent per screen, chips without borders, hierarchy by
   surface not by lines, wider type and spacing, quieter data colours,
   simpler KPI tiles and a split sticky toolbar. Overrides the layer above.
   ========================================================================== */
:root {
  --fl-ok:      color-mix(in srgb, var(--lm-pos) 62%, var(--lm-ink));   /* readable green text, from the family green */
  --fl-warn:    color-mix(in srgb, var(--lm-d4) 62%, var(--lm-ink));
  --fl-risk:    var(--lm-red-deep);
  --fl-tint:    rgba(61,58,70,.05);
  --fl-tint-2:  rgba(61,58,70,.09);
  --fl-surface: var(--lm-surface);
  --fl-r:       6px;
  --fl-hover: var(--lm-shadow);
}

/* 1 · accent discipline: coral stays on the primary action and the selection */
.fl-fieldset > .fl-legend, .fl-step__h .fl-legend, .fl-opts__h .fl-legend { display: block; color: var(--lm-ink); font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; font-weight: 700; margin-bottom: 12px; }
.fl-step__h .fl-legend, .fl-opts__h .fl-legend { margin-bottom: 0; }
.fl-sec__h { color: var(--lm-ink-2); font-size: 12px; text-transform: none; margin-bottom: 8px; }
.fl-step__n { background: var(--lm-ink); }
.fl-tabs__ink { background: var(--lm-ink); }
.fl-sugchip__angle { color: var(--lm-ink-3); }
.fl-sugstatus { color: var(--fl-warn); }
.fl-sugstatus[data-on="true"] { color: var(--lm-ink-3); }
.fl-note--warn { border-left-color: var(--fl-warn); background: var(--fl-surface); }
.fl-override { background: var(--fl-surface); border-color: var(--lm-line-soft); }
.fl-pill--free { border: 0; background: var(--fl-tint); }
.fl-purpose[aria-pressed="true"] { background: var(--lm-ink); border-color: var(--lm-ink); }
.fl-purpose:hover { border-color: var(--lm-line-strong); }
.fl-question__text b { color: var(--lm-coral); }
.fl-cta { background: var(--lm-coral); border-radius: 10px; box-shadow: none; }
.fl-cta:hover { background: var(--lm-coral); }
.fl-btn { border-color: var(--lm-line); border-radius: 8px; color: var(--lm-ink-2); }
.fl-btn:hover { border-color: var(--lm-line-strong); color: var(--lm-ink); }
.fl-btn--primary { box-shadow: none; }
.fl-btn--accent { border-color: var(--lm-line-strong); }
.fl-btn--accent:hover { background: var(--lm-ink); border-color: var(--lm-ink); }
.fl-link { color: var(--lm-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lm-line-strong); }
.fl-linkbtn { color: var(--lm-ink-2); }
.fl-linkbtn:hover { color: var(--lm-ink); }
.fl-kpi__s .up { color: var(--fl-risk); } .fl-kpi__s .down { color: var(--fl-ok); }
.fl-delta.up { color: var(--fl-risk); } .fl-delta.down { color: var(--fl-ok); } .fl-delta.new { color: var(--lm-ink); }
.fl-ok { color: var(--fl-ok); } .fl-no { color: var(--fl-risk); }
.fl-metric__v.up { color: var(--lm-ink); }
.fl-readback__u { color: var(--lm-ink-2); }
.fl-entchip__c, .fl-ctx__v { color: var(--lm-ink); }
.fl-serp .mine { color: var(--lm-ink); text-decoration: underline; text-decoration-color: var(--lm-coral); }
.fl-table td.kw b:hover { color: var(--lm-ink); text-decoration: underline; }
.fl-toggle input { accent-color: var(--lm-ink); }
.fl-input:focus, .fl-textarea:focus { border-color: var(--lm-ink); }
.fl-chip:focus-visible, .fl-brand:focus-visible, .fl-select:focus-visible { outline-color: var(--lm-ink); }

/* 2 · chips: no border, a faint tint, 6px radius, status only in the text */
.fl-chip { border: 0; background: var(--fl-tint); border-radius: 8px; height: 32px; color: var(--lm-ink-2); }
.fl-chip:hover { background: var(--fl-tint-2); }
.fl-chip[aria-pressed="true"] { background: var(--lm-ink); color: var(--lm-white); }
.fl-topicchip { border: 0; background: var(--fl-tint); border-radius: 8px; }
.fl-purpose { border-color: var(--lm-line); border-radius: 8px; }
.fl-sugchip { border: 1px solid var(--lm-line-soft); background: var(--lm-white); border-radius: 10px; padding: 12px 16px;
  box-shadow: none; }
.fl-sugchip:hover { border-color: var(--lm-line-strong); }
.fl-sugchip[aria-pressed="true"] { background: var(--lm-white); border: 1px solid var(--lm-ink); box-shadow: inset 0 0 0 1px var(--lm-ink); }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__kw { color: var(--lm-ink); }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__angle,
.fl-sugchip[aria-pressed="true"] .fl-sugchip__vol { color: var(--lm-ink-3); }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__note { color: var(--lm-ink-2); }
.fl-sugchip[aria-pressed="true"] .fl-sugchip__kw::before { content: "✓ "; color: var(--lm-ink); }
.fl-sugchip--wide { max-width: 460px; }
.fl-sugchip__kw { font-size: 14px; font-weight: 700; }
.fl-sugchip__note { font-size: 13px; line-height: 19px; color: var(--lm-ink-2); }
.fl-tag, .fl-tag--label { border: 0; background: var(--fl-tint); color: var(--lm-ink-3); border-radius: var(--fl-r); padding: 1px 7px; }
.fl-modebadge, .fl-stage, .fl-vchip, .fl-card__kind, .fl-pill { border: 0; background: var(--fl-tint); border-radius: var(--fl-r); }
.fl-pill { padding: 5px 10px; }
.fl-entchip, .fl-ctx__c { border: 0; background: var(--fl-tint); border-radius: var(--fl-r); }
.fl-entchip:hover { background: var(--fl-tint-2); border-color: transparent; }
.fl-brandchip { border: 0; background: var(--fl-tint); border-radius: var(--fl-r); padding: 2px 8px; }
.fl-brandchip.new { box-shadow: inset 0 0 0 1px var(--lm-coral); }
.fl-brandchip--act { border: 0; background: var(--fl-tint); border-radius: 8px; }
.fl-ev { border: 0; border-radius: var(--fl-r); background: var(--fl-tint); color: var(--lm-ink-3); font-weight: 600; }
.fl-ev--very_low { background: rgba(217,72,78,.10); color: var(--fl-risk); }
.fl-ev--low { background: rgba(201,138,30,.12); color: var(--fl-warn); }
.fl-ev--directional { background: var(--fl-tint); color: var(--lm-ink-2); }
.fl-ev--strong { background: rgba(46,139,106,.12); color: var(--fl-ok); }
.fl-grp { border-radius: var(--fl-r); }
.fl-grp--winning { background: rgba(46,139,106,.12); color: var(--fl-ok); }
.fl-grp--contested { background: rgba(201,138,30,.12); color: var(--fl-warn); }
.fl-grp--leaking { background: rgba(120,110,190,.14); color: var(--lm-violet-hover); }
.fl-grp--uncaptured { background: var(--fl-tint); color: var(--lm-ink-3); }
.fl-keyline { border: 0; background: var(--fl-tint); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; }
.fl-keyline:hover { background: var(--fl-tint-2); }
.fl-keyline.on { background: var(--lm-ink); color: var(--lm-white); box-shadow: none; }
.fl-keyline.on .m { color: rgba(255,255,255,.65); }
.fl-keyline.on b { background: var(--lm-white); color: var(--lm-ink); }
.fl-wtype { border: 0; border-radius: var(--fl-r); background: var(--fl-tint); }
.fl-wtype--conquest { color: var(--fl-risk); background: rgba(217,72,78,.10); }
.fl-wtype--uncaptured { color: var(--lm-violet-hover); background: rgba(120,110,190,.14); }
.fl-wtype--defend { color: var(--fl-warn); background: rgba(201,138,30,.12); }
.fl-wtype--poach { color: var(--lm-violet-hover); background: rgba(120,110,190,.14); }
.fl-wtype--strengthen { color: var(--fl-ok); background: rgba(46,139,106,.12); }
.fl-wrank { border-radius: 6px; }
.fl-wchip { border: 0; border-radius: var(--fl-r); background: var(--fl-tint); color: var(--lm-ink-2); padding: 3px 9px; }
.fl-wchip.bid { background: rgba(255,91,96,.10); color: var(--lm-red-deep); }
.fl-wchip.conq { background: rgba(120,110,190,.14); color: var(--lm-violet-hover); }
.fl-wchip.ch { background: var(--fl-tint-2); color: var(--lm-ink); }
.fl-wchip.against { background: rgba(120,110,190,.14); color: var(--lm-violet-hover); }
.fl-aio { border: 0; border-radius: var(--fl-r); font-weight: 600; padding: 2px 8px; }
.fl-aio--safe { background: rgba(46,139,106,.12); color: var(--fl-ok); }
.fl-aio--contested { background: rgba(201,138,30,.12); color: var(--fl-warn); }
.fl-aio--risk { background: rgba(217,72,78,.10); color: var(--fl-risk); }
.fl-aio--info { background: rgba(120,110,190,.14); color: var(--lm-violet-hover); }
.fl-aio--empty { background: var(--fl-tint); color: var(--lm-ink-3); }
.fl-aio--none { background: transparent; color: var(--lm-muted); box-shadow: inset 0 0 0 1px var(--lm-line-soft); }
.fl-aio--unchecked { background: transparent; color: var(--lm-muted); box-shadow: inset 0 0 0 1px var(--lm-line-soft); font-weight: 500; }
.fl-legend__aio i.a-safe { background: var(--fl-ok); } .fl-legend__aio i.a-contested { background: var(--fl-warn); } .fl-legend__aio i.a-risk { background: var(--fl-risk); }
.fl-bucket__n { border-radius: var(--fl-r); }
.fl-exchip { border: 1px solid var(--lm-line-soft); border-radius: 10px; }
.fl-exchip:hover { border-color: var(--lm-line-strong); }
.fl-classrow select, .fl-classrow input { border-color: var(--lm-line-soft); background: var(--fl-surface); }

/* 3 · hierarchy by surface: one light frame outside, no lines inside */
.fl-composer { border-color: var(--lm-line-soft); box-shadow: none; border-radius: 14px; }
.fl-composer > .fl-fieldset:first-child { border-radius: 14px 14px 0 0; }
.fl-question { background: var(--fl-surface); border-top-color: var(--lm-line-soft); border-radius: 0 0 14px 14px; backdrop-filter: none; }
.fl-card, .fl-kpi, .fl-wcard, .fl-pathbox, .fl-chartwrap, .fl-details, .fl-readback, .fl-menu__list {
  border-color: var(--lm-line-soft); box-shadow: none; }
.fl-card, .fl-wcard, .fl-pathbox, .fl-chartwrap { border-radius: 14px; }
.fl-wframe { border: 0; background: var(--fl-surface); border-radius: 10px; padding: 14px 16px; }
.fl-wframe .row { border-top: 0; padding: 6px 0; }
.fl-overview, .fl-note { background: var(--fl-surface); border-radius: 12px; }
.fl-inline-note, .fl-dest, .fl-stage__item, .fl-effects, .fl-readback { border: 0; background: var(--fl-surface); }
.fl-split div { border: 0; background: var(--fl-surface); border-radius: 10px; }
.fl-pathstep { border-color: var(--lm-line-soft); border-radius: 10px; padding: 10px 12px; }
.fl-pathstep.my { border-color: rgba(255,91,96,.5); background: rgba(255,91,96,.05); }
.fl-pathstep.comp { border-color: rgba(120,110,190,.5); background: rgba(120,110,190,.06); }
.fl-pathbox { border-left-width: 3px; }
.fl-story { border-left-width: 3px; }
.fl-wcard { border-left-width: 3px; }
.fl-wcard--conquest { border-left-color: var(--fl-risk); }
.fl-wcard--defend { border-left-color: var(--fl-warn); }
.fl-wcard--strengthen { border-left-color: var(--fl-ok); }
.fl-wcard--uncaptured, .fl-wcard--poach { border-left-color: var(--lm-violet); }
.fl-table th { border-bottom-color: var(--lm-line-soft); }
.fl-table td { border-bottom-color: var(--fl-tint); }
.fl-sheet { border-left-color: var(--lm-line-soft); box-shadow: var(--lm-shadow); }
.fl-sheet__head { border-bottom-color: var(--lm-line-soft); }
.fl-close { border: 0; background: var(--fl-tint); border-radius: 8px; }
.fl-resultbar { border-bottom-color: var(--lm-line-soft); }
.fl-tabs { border-bottom-color: var(--lm-line-soft); }
.fl-group + .fl-group { border-top-style: solid; border-top-color: var(--lm-line-soft); }
@media (hover: hover) and (pointer: fine) {
  .fl-card:hover, .fl-wcard:hover { box-shadow: var(--fl-hover); border-color: var(--lm-line-soft); }
  .fl-kpi:hover { box-shadow: none; }
}

/* 4 · type scale and breathing room */
.fl-main { font-size: 14px; line-height: 1.6; }
.fl-fieldset { padding: 24px 28px; }
.fl-sec { margin-bottom: 32px; }
.fl-sec li { font-size: 14px; line-height: 23px; margin-bottom: 8px; }
.fl-sec li .ev { font-size: 12px; margin-top: 2px; }
.fl-legend-hint { font-size: 12.5px; line-height: 19px; margin: -4px 0 12px; }
.fl-note, .fl-overview { padding: 18px 22px; font-size: 14px; line-height: 24px; }
.fl-table { font-size: 13.5px; }
.fl-table th { font-size: 12px; padding: 10px 12px; }
.fl-table td { padding: 12px; }
.fl-card { padding: 22px 24px; gap: 14px; }
.fl-wcard { padding: 20px 24px; }
.fl-watchlist { gap: 20px; }
.fl-wchain { font-size: 16px; }
.fl-wfacts { font-size: 12.5px; gap: 8px 18px; margin-top: 10px; }
.fl-wwhy { margin-top: 16px; }
.fl-wwhy .rule { font-size: 14px; line-height: 22px; }
.fl-wwhy .narr, .fl-wframe .narr { font-size: 14px; line-height: 23px; margin-top: 6px; }
.fl-wframe { margin-top: 16px; }
.fl-wframe .row { font-size: 13.5px; }
.fl-wframe .k { font-size: 12px; }
.fl-pathbox { padding: 18px 20px; margin-top: 18px; }
.fl-pathstep .k { font-size: 14px; }
.fl-pathstep .s, .fl-pathstep .v { font-size: 12px; }
.fl-treetools, .fl-hubfilters { margin-bottom: 14px; }
.fl-keylines { margin-top: 14px; gap: 8px; }
.fl-tabs { margin-bottom: 28px; }
.fl-tab { height: 42px; font-size: 14px; }
.fl-resultbar { padding-bottom: 20px; margin-bottom: 24px; }
.fl-meta { font-size: 13px; }
.fl-score__n, .fl-kpi__v, .fl-split .v, .fl-metric__v { font-weight: 600; }
.fl-sughead { font-size: 14px; margin-bottom: 12px; }
.fl-sugchips { gap: 10px; }
.fl-steps li { padding: 9px 0; font-size: 14px; }

/* 5 · data colours: flow lines recede, only key lines and the selection read at full strength */
.fl-tree .edge { stroke: rgba(61,58,70,.16); }
.fl-tree .edge.key { stroke: rgba(61,58,70,.9); }
.fl-tree .edge.key.comp { stroke: rgba(120,110,190,.9); }
.fl-tree .flow { stroke: rgba(61,58,70,.2); }
.fl-tree .flow.key { stroke: rgba(61,58,70,.75); }
.fl-tree .node rect { stroke: var(--lm-line-soft); rx: 6; }
.fl-tree .node.my rect { fill: var(--lm-white); stroke: var(--lm-coral); }
.fl-tree .node.comp rect { fill: var(--lm-white); stroke: rgba(120,110,190,.8); }
.fl-tree .node.comp text { fill: var(--lm-violet-hover); }
.fl-tree .node.my text { fill: var(--lm-red-deep); }
.fl-tree .node.compare rect { fill: var(--fl-surface); }
.fl-tree .node.exit rect { stroke: var(--lm-line); }
.fl-tree .tog rect { fill: var(--fl-tint); }
.fl-tree circle.aio-safe { fill: var(--fl-ok); } .fl-tree circle.aio-contested { fill: var(--fl-warn); } .fl-tree circle.aio-risk { fill: var(--fl-risk); }
.fl-sk-link { fill-opacity: .22; }
.fl-sk-link.my, .fl-sk-link.comp { fill-opacity: .34; }
.fl-sk-link:hover { fill-opacity: .5; }
.fl-bar__f { background: rgba(120,110,190,.75); }
.fl-bar__f.my { background: rgba(255,91,96,.8); }
.fl-bar__t { background: var(--fl-tint); border-radius: 6px; }
.fl-mini { background: var(--fl-tint); }
.fl-mini i { background: rgba(120,110,190,.75); }
.fl-progress__bar { background: var(--lm-ink); }
.fl-progress__track { background: var(--fl-tint); }
.fl-spinner { border-color: var(--fl-tint-2); border-top-color: var(--lm-ink); }
.c-my { background: var(--lm-coral); } .c-comp { background: rgba(120,110,190,.9); } .c-generic { background: var(--lm-ink-3); }

/* 6 · KPI tiles and the toolbar */
.fl-kpis { gap: 12px; margin-bottom: 28px; }
.fl-kpi { border: 0; background: var(--fl-surface); border-radius: 12px; padding: 16px 18px; }
.fl-kpi__l { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--lm-ink-3); }
.fl-kpi__v { font-size: 28px; line-height: 34px; font-weight: 600; margin-top: 6px; }
.fl-kpi__v.my { color: var(--lm-ink); } .fl-kpi__v.comp { color: var(--lm-ink); }
.fl-kpi__v small { font-weight: 500; }
.fl-kpi__s { font-size: 12px; margin-top: 6px; }
.fl-kpi .fl-aio { vertical-align: 4px; }
.fl-treetools { position: sticky; top: var(--lm-gnb-h, 56px); z-index: 5; margin: 0 0 14px; padding: 10px 0;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lm-line-soft); }
.fl-treetools .fl-legend { margin: 0 0 0 auto; }
.fl-treetools .fl-toggle { margin: 0; }
.fl-treetools .fl-select { height: 30px; }
.fl-hubfilters { position: sticky; top: var(--lm-gnb-h, 56px); z-index: 5; padding: 10px 0; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--lm-line-soft); }
@media (max-width: 640px) { .fl-treetools, .fl-hubfilters { position: static; } .fl-treetools .fl-legend { margin-left: 0; } }

/* composer 2: fewer decisions on screen */
.fl-inline-form--2 { grid-template-columns: 1fr 1fr; }
.fl-legend-hint--under { margin: 8px 0 0; }
.fl-more { margin-top: 12px; }
.fl-more > summary { cursor: pointer; font-size: 13px; color: var(--lm-ink-3); list-style: none; }
.fl-more > summary::-webkit-details-marker { display: none; }
.fl-more > summary::before { content: "+ "; color: var(--lm-muted); }
.fl-more[open] > summary::before { content: "− "; }
.fl-more > .fl-inline-form { margin-top: 10px; }
.fl-checks:empty { display: none; }
.fl-checks { margin-top: 12px; display: grid; gap: 6px; }
.fl-check { font-size: 13px; line-height: 20px; color: var(--lm-ink-2); padding: 8px 12px; border-radius: 8px; background: rgba(201,138,30,.10); border-left: 3px solid var(--fl-warn); }
.fl-legend--sub { display: block; font-size: 13px; font-weight: 700; color: var(--lm-ink); margin: 18px 0 4px; letter-spacing: 0; text-transform: none; }
.fl-legend--sub:first-child { margin-top: 0; }
.fl-opts__h { align-items: center; }
.fl-opts__h .fl-legend { display: inline-block; color: var(--lm-ink); font-size: 14px; font-weight: 700; margin: 0; letter-spacing: 0; text-transform: none; }
.fl-opts__c { border: 0; background: var(--fl-tint); }
.fl-dlgroup { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 8px; background: var(--fl-tint); }
.fl-dlgroup__l { font-size: 12px; color: var(--lm-ink-3); margin-right: 4px; }
.fl-btn--link { text-decoration: none; background: var(--lm-white); border-color: transparent; }
.fl-btn--link:hover { border-color: var(--lm-line-strong); }
@media (max-width: 640px) { .fl-inline-form--2 { grid-template-columns: 1fr; } }
.fl-inline-form .fl-input, .fl-inline-form--2 .fl-input { width: 100%; }
.fl-hero .fl-eyebrow { color: var(--lm-ink-3); font-weight: 700; }
.fl-hero h1 { font-weight: 800; letter-spacing: -.01em; }
.fl-hero p { max-width: 760px; line-height: 1.65; }
.fl-fieldset > #comp-in { width: 100%; display: block; }

/* market select inside the shell GNB (language is the shell's) */
.fl-gl { height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--lm-line); border-radius: var(--lm-r-pill); background: var(--lm-white) no-repeat right 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239691A2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-size: 16px; font: 500 14px/21px var(--lm-font); color: var(--lm-ink-2); appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 200px; }
.fl-gl:hover { border-color: var(--lm-line-strong); color: var(--lm-ink); }
.fl-gl:focus-visible { outline: 2px solid var(--lm-violet); outline-offset: 2px; }

/* -------------------------------------------- hero: frame is .lm-hero / .lm-sigcard (shell); the app draws the sample body */
.fl-hero3.lm-hero { padding-top: 48px; padding-bottom: 12px; }
/* home: the input section follows the hero closely; results pages keep the normal top padding */
.fl-hero3:not([hidden]) + .fl-main { padding-top: 12px; }
.fl-hero3:not([hidden]) + .fl-main .fl-c3head { margin-top: 0; }
.fl-hero3[hidden] { display: none; }

.lm-sigcard__body.fl-sample__body { padding: 14px 20px 10px; min-height: 0; }
.fl-sample__eyebrow { font-size: 12px; font-weight: 700; color: var(--lm-red-deep); margin-bottom: 4px; }
.fl-sample__q { font-size: 15px; font-weight: 700; color: var(--lm-ink); word-break: keep-all; margin-bottom: 8px; line-height: 1.4; }
.fl-sample__tree { display: block; font-family: inherit; }
.fl-sample__tree .e { fill: none; stroke: rgba(61,58,70,.16); }
.fl-sample__tree .e.key { stroke: rgba(120,110,190,.85); stroke-linecap: round; }
.fl-sample__tree .f { fill: none; stroke: rgba(255,255,255,.7); stroke-linecap: round; stroke-dasharray: 3 12; animation: fl-flow 3s linear infinite; }
.fl-sample__tree .n rect { fill: var(--lm-white); stroke: var(--lm-line-soft); }
.fl-sample__tree .n text { font-size: 11px; fill: var(--lm-ink); }
.fl-sample__tree .n.entry rect { fill: var(--lm-ink); stroke: var(--lm-ink); }
.fl-sample__tree .n.entry text { fill: var(--lm-white); font-weight: 700; }
.fl-sample__tree .n.comp rect { stroke: rgba(120,110,190,.8); }
.fl-sample__tree .n.comp text { fill: var(--lm-violet-hover); }
.fl-sample__tree .n.my rect { stroke: var(--lm-coral); }
.fl-sample__tree .n.my text { fill: var(--lm-red-deep); }
.fl-sample__tree .n.sel rect { stroke: var(--lm-coral); stroke-width: 2; }
.fl-sample__tree .c { font-size: 10px; fill: var(--lm-muted); }
.fl-sample__tree .a { stroke: #fff; stroke-width: 1.5; }
.fl-sample__tree .a-risk { fill: var(--fl-risk); } .fl-sample__tree .a-safe { fill: var(--fl-ok); }
/* the selected path as four compact rows: step number, keyword, n, AIO badge */
.fl-sample__steps { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.fl-sample__step { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--lm-line-soft); border-radius: 8px; }
.fl-sample__step.comp { border-color: rgba(120,110,190,.5); background: rgba(120,110,190,.05); }
.fl-sample__step i { flex: none; width: 16px; height: 16px; border-radius: 999px; background: var(--lm-ink); color: var(--lm-white); font: 700 10px/16px var(--lm-font); text-align: center; font-style: normal; }
.fl-sample__step b { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--lm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-sample__step span { flex: none; font-size: 10.5px; color: var(--lm-ink-3); }
.fl-sample__step em { flex: none; font-style: normal; }
.fl-sample__step .fl-aio { font-size: 10px; padding: 2px 6px; white-space: nowrap; }
.fl-sample__arrow { color: var(--lm-muted); }
.fl-sample__story { border-left: 3px solid var(--lm-coral); background: var(--fl-surface); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.6; color: var(--lm-ink); word-break: keep-all; }
.fl-sample__story b { display: block; font-size: 12px; color: var(--lm-red-deep); margin-bottom: 4px; }
.fl-sample__note { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--fl-tint); font-size: 13px; color: var(--lm-ink-2); word-break: keep-all; }
@media (max-width: 600px) { .fl-cta--hero { width: 100%; } }
/* keep-all suits Korean only; Japanese has no spaces to break at */
html[lang="ja"] .fl-sample__q, html[lang="ja"] .fl-sample__story, html[lang="ja"] .fl-sample__note { word-break: normal; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- composer 3 */
.fl-c3head { margin: 8px 0 20px; }
.fl-c3head__eyebrow { font-size: 13px; font-weight: 700; color: var(--lm-red-deep); margin-bottom: 6px; }
.fl-c3head h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--lm-ink); word-break: keep-all; }
.fl-c3head p { margin: 0; font-size: 14.5px; color: var(--lm-ink-3); word-break: keep-all; }
.fl-c3 { background: var(--lm-white); border: 1px solid var(--lm-line-soft); border-radius: 16px; box-shadow: var(--lm-shadow); overflow: hidden; margin-bottom: 40px; }
.fl-c3__step { padding: 28px 32px; }
.fl-c3__step + .fl-c3__step { border-top: 1px solid var(--lm-line-soft); }
.fl-c3__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.fl-c3__n { flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,91,96,.12); color: var(--lm-red-deep); font-size: 13px; font-weight: 800; margin-top: 1px; }
.fl-c3__t h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--lm-ink); display: flex; align-items: center; gap: 8px; }
.fl-c3__tag { font-size: 11px; font-weight: 600; color: var(--lm-ink-3); background: var(--fl-surface); border-radius: 999px; padding: 2px 8px; }
.fl-c3__tag--req { color: var(--lm-red-deep); background: rgba(255,91,96,.10); }
.fl-c3__hint { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--lm-ink-3); word-break: keep-all; max-width: 860px; }
.fl-c3__body { padding-left: 44px; }
.fl-c3__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.fl-c3__field { min-width: 0; }
.fl-c3__label { display: block; font-size: 13px; font-weight: 600; color: var(--lm-ink-2); margin-bottom: 6px; }
.fl-c3__in.fl-input { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--lm-line); background: var(--lm-white); font-size: 15px; box-sizing: border-box; }
.fl-c3__in.fl-input:focus { border-color: var(--lm-coral); box-shadow: 0 0 0 3px rgba(255,91,96,.15); outline: none; }
.fl-c3__in.fl-input::placeholder { color: var(--lm-muted); }
.fl-c3__in--s.fl-input { width: 110px; height: 38px; border-radius: 10px; font-size: 14px; padding: 0 12px; }
.fl-c3__under { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--lm-ink-3); word-break: keep-all; }
.fl-c3__more { margin-top: 12px; }
.fl-c3__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lm-ink-2); padding: 6px 12px; border: 1px solid var(--lm-line); border-radius: 999px; }
.fl-c3__more > summary::-webkit-details-marker { display: none; }
.fl-c3__more > summary::before { content: "+"; font-weight: 700; color: var(--lm-red-deep); }
.fl-c3__more[open] > summary::before { content: "−"; }
.fl-c3__more > .fl-c3__grid2 { margin-top: 14px; }
.fl-c3 .fl-checks:not(:empty) { margin-top: 12px; }
.fl-c3__ex { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--lm-line-soft); }
.fl-c3__exhead { font-size: 12.5px; font-weight: 700; color: var(--lm-ink-3); margin-bottom: 10px; }
.fl-c3__exlist { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-c3__exchip { border: 1px solid var(--lm-line); background: var(--lm-white); border-radius: 12px; padding: 9px 13px; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s; }
.fl-c3__exchip:hover { border-color: var(--lm-coral); background: rgba(255,91,96,.04); }
.fl-c3__exchip .s { font-size: 13.5px; font-weight: 700; color: var(--lm-ink); }
.fl-c3__exchip .b { font-size: 11.5px; color: var(--lm-ink-3); }
.fl-c3__helper { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-cta--helper { height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; background: var(--lm-grad-cta); }
.fl-cta--helper:hover { background: var(--lm-grad-cta); filter: brightness(1.04); }
.fl-cta__cost { font-size: 12px; font-weight: 600; opacity: .85; background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; }
.fl-c3 .fl-sugbox:not(:empty) { margin-top: 14px; }
.fl-c3__or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; font-size: 12.5px; color: var(--lm-muted); }
.fl-c3__or::before, .fl-c3__or::after { content: ""; flex: 1; height: 1px; background: var(--lm-line-soft); }
.fl-c3__strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fl-c3__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-c3__pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--fl-surface); font-size: 13px; color: var(--lm-ink-3); }
.fl-c3__pill b { color: var(--lm-ink); font-weight: 700; }
.fl-btn--pill { border-radius: 999px; height: 36px; padding: 0 16px; font-weight: 600; }
.fl-c3__sheet { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; padding: 22px 24px; background: var(--fl-surface); border-radius: 14px; }
.fl-c3__opt { min-width: 0; }
.fl-c3__opthead { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.fl-c3__opthead b { font-size: 14px; font-weight: 700; color: var(--lm-ink); }
.fl-c3__opthead span { font-size: 12.5px; line-height: 1.55; color: var(--lm-ink-3); word-break: keep-all; }
.fl-c3__sheet .fl-row { margin: 0; gap: 8px; }
.fl-c3__sheet .fl-chip { border-radius: 999px; height: 34px; padding: 0 14px; background: var(--lm-white); }
.fl-c3__sheet .fl-chip[aria-pressed="true"] { background: var(--lm-ink); color: var(--lm-white); border-color: var(--lm-ink); }
.fl-c3__toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.fl-c3__toggle input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lm-coral); }
.fl-c3__toggle .fl-c3__opthead { margin-bottom: 0; }
.fl-c3__num { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--lm-ink-2); }
.fl-c3__toggle + .fl-c3__num { padding-left: 30px; }
.fl-c3__unit { color: var(--lm-muted); }
.fl-c3__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 32px; background: var(--lm-charcoal); color: var(--lm-white); }
.fl-c3__q { min-width: 0; }
.fl-c3__foot .fl-question__text { font-size: 18px; font-weight: 700; color: var(--lm-white); line-height: 1.4; word-break: keep-all; }
.fl-c3__foot .fl-question__text b { color: var(--lm-coral); }
.fl-c3__foot .fl-question__meta { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.fl-c3__foot .fl-cta--hero { flex: none; }
.fl-c3__foot .fl-cta:disabled { opacity: .45; filter: none; }
@media (max-width: 860px) {
  .fl-c3__step { padding: 22px 18px; } .fl-c3__body { padding-left: 0; } .fl-c3__grid2, .fl-c3__sheet { grid-template-columns: 1fr; }
  .fl-c3__foot { flex-direction: column; align-items: stretch; padding: 20px 18px; } .fl-c3__foot .fl-cta--hero { width: 100%; }
}
html[lang="ja"] .fl-c3head h2, html[lang="ja"] .fl-c3head p, html[lang="ja"] .fl-c3__hint, html[lang="ja"] .fl-c3__under, html[lang="ja"] .fl-c3__opthead span, html[lang="ja"] .fl-c3__foot .fl-question__text { word-break: normal; overflow-wrap: anywhere; }
.fl-c3__num .fl-c3__in--s.fl-input { width: 110px; flex: none; }
/* suggestion box inside composer 3: a soft panel with a 3-column card grid */
.fl-c3 .fl-sugbox:not(:empty) { margin-top: 16px; padding: 20px 22px; background: var(--fl-surface); border-radius: 14px; }
.fl-c3 .fl-sughead { font-size: 14px; color: var(--lm-ink-3); margin-bottom: 4px; }
.fl-c3 .fl-sugbox > .fl-legend-hint { margin-bottom: 14px; }
.fl-c3 .fl-sugchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-c3 .fl-sugchip, .fl-c3 .fl-sugchip--wide { max-width: none; width: 100%; border-radius: 12px; padding: 12px 14px; background: var(--lm-white); border: 1px solid var(--lm-line-soft); box-shadow: none; }
.fl-c3 .fl-sugchip:hover { border-color: var(--lm-line-strong); }
.fl-c3 .fl-sugchip[aria-pressed="true"] { border: 1px solid var(--lm-coral); box-shadow: 0 0 0 1px var(--lm-coral) inset; background: rgba(255,91,96,.04); }
.fl-c3 .fl-sugchip[aria-pressed="true"] .fl-sugchip__kw::before { color: var(--lm-red-deep); }
.fl-c3 .fl-sugchip[aria-pressed="false"] { opacity: .72; }
.fl-c3 .fl-sugchip[aria-pressed="false"]:hover { opacity: 1; }
.fl-c3 .fl-sugchip__kw { font-size: 14px; }
.fl-c3 .fl-sugchip__note { font-size: 12.5px; line-height: 18px; }
.fl-c3 .fl-sugbox .fl-briefrow { margin-top: 16px; align-items: center; }
.fl-c3 .fl-sugbox .fl-briefrow .fl-btn { border-radius: 999px; height: 40px; padding: 0 18px; font-weight: 700; }
.fl-c3 .fl-sugstatus { margin-left: 0; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; background: rgba(201,138,30,.10); }
.fl-c3 .fl-sugstatus[data-on="true"] { background: rgba(46,139,106,.10); color: var(--fl-ok); }
.fl-c3 .fl-sugbox .fl-btn--sm { border-radius: 999px; }
.fl-c3 .fl-sugfoot { margin-top: 12px; font-size: 12.5px; color: var(--lm-ink-3); }
@media (max-width: 900px) { .fl-c3 .fl-sugchips { grid-template-columns: 1fr; } }

/* shell chrome keeps its own link weights */
.lm-footer a, .lm-rail a, .lm-gnb a { font-weight: inherit; }
.fl-shell { min-height: 0; }
.fl-eyebrow { font-size: 12px; line-height: 16.8px; font-weight: 700; color: var(--lm-red-deep); margin-bottom: 8px; }
/* Japanese has no spaces: keep-all (shell default) leaves the hero head unbreakable */
html[lang="ja"] .lm-h1, html[lang="ja"] .lm-lead, html[lang="ja"] .lm-benefits li { word-break: normal; overflow-wrap: anywhere; }
/* <600px: GNB right slot holds language + market; collapse the language label to the globe so both fit */
@media (max-width: 599px) {
  .fl-gl { max-width: 90px; padding: 0 22px 0 8px; font-size: 12px; background-position: right 6px center; }
  .lm-gnb__in { gap: 12px; }
  .lm-gnb__right { gap: 6px; }
  .lm-lang__btn span { display: none; }
  .lm-lang__btn { padding: 0 8px; gap: 2px; }
}
.fl-runs__divider { margin: 28px 0 10px; }
.fl-sample .lm-sigcard__head { padding: 12px 20px; }
.fl-sample .lm-sigcard__foot { padding: 10px 20px 12px; }

/* ------------------------------------------------- hero: recent runs of this market */
.fl-recent { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--lm-line-soft); max-width: 560px; }
.fl-recent:empty { display: none; }
.fl-recent__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fl-recent__head b { font-size: 14px; font-weight: 700; color: var(--lm-ink); }
.fl-recent__head span { font-size: 12px; color: var(--lm-ink-3); }
.fl-recent__list { display: grid; gap: 6px; }
.fl-recent__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "m go"; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--lm-line-soft); border-radius: 10px; background: var(--lm-white); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.fl-recent__row:hover { border-color: var(--lm-coral); background: rgba(255,91,96,.04); }
.fl-recent__t { grid-area: t; font-size: 13.5px; font-weight: 700; color: var(--lm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-recent__t em { font-style: normal; color: var(--lm-red-deep); }
.fl-recent__m { grid-area: m; font-size: 12px; color: var(--lm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-recent__go { grid-area: go; color: var(--lm-red-deep); font-weight: 700; }
.fl-recent__row--sample .fl-recent__go { color: var(--lm-muted); }