/* T-008 "What to fix first": the card at the top of Topics, the table view and the send preview. Tokens only, so light and dark follow. */
.ff {
  margin: 0 0 16px; padding: 14px 14px 12px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
}
.ff-head { display: flex; align-items: center; gap: 10px; }
.ff-label { color: var(--ink-2); }
.ff-basis { font-size: var(--t-xs); color: var(--ink-3); flex: 1; min-width: 0; }
.ff-info {
  width: 28px; height: 28px; border-radius: var(--r-pill); display: inline-grid; place-items: center;
  color: var(--ink-3); font-size: var(--t-sm); flex: none;
}
.ff-info:hover, .ff-info:focus-visible { color: var(--ink); background: var(--surface-3); }
.ff-lead { margin: 6px 0 10px; font-size: var(--t-md); font-weight: 600; line-height: 1.35; color: var(--ink); text-wrap: pretty; }

.ff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ff-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main cost" "meta meta" "why why";
  align-items: center; column-gap: 8px; padding: 6px 4px 8px; border-top: 1px solid var(--line);
}
.ff-item:first-child { border-top: 0; }
.ff-main {
  grid-area: main; display: grid; grid-template-columns: 18px minmax(0, auto) minmax(40px, 1fr); align-items: center; gap: 8px;
  min-height: 32px; text-align: left; border-radius: var(--r-xs); padding: 2px 4px; margin: 0 -4px;
}
.ff-main:hover .ff-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ff-rank { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); text-align: center; }
.ff-name { font-weight: 600; font-size: var(--t-sm); line-height: 1.3; min-width: 0; }
.ff-bar { height: 6px; border-radius: var(--r-pill); background: var(--neg-soft); overflow: hidden; }
.ff-bar i { display: block; height: 100%; border-radius: inherit; background: var(--neg); transform-origin: left; animation: ffGrow var(--t-reveal, 600ms) var(--settle) both; }
@keyframes ffGrow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ff-bar i { animation: none; } }
.ff-cost {
  grid-area: cost; min-width: 40px; min-height: 32px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: var(--t-md); font-weight: 600; color: var(--neg-text); text-align: right;
}
.ff-cost:hover, .ff-cost:focus-visible { background: var(--neg-soft); }
.ff-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 26px; align-items: center; }
.ff-meta:empty { display: none; }
.ff-badge { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.ff-badge.bad { color: var(--neg-text); font-weight: 500; }
.ff-badge.good { color: var(--pos-text); font-weight: 500; }
.ff-badge.rise::before { content: "↑ "; }
.ff-badge.fall::before { content: "↓ "; }
.ff-few, .ff-pin { font-size: var(--t-xs); color: var(--warn-text); background: var(--warn-soft); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap; font-weight: 500; }
.ff-pin { color: var(--ink-2); background: var(--surface-3); }
.ff-why { grid-area: why; margin: 4px 0 0; padding-left: 26px; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.ff-half { color: var(--ink-3); }

.ff-note, .ff-lifts { margin: 10px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); }
.ff-note { padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-text); }
.ff-lifts-k { color: var(--ink-3); }
.ff-link { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); padding: 2px 0; }
.ff-link:hover { text-decoration-color: currentColor; }
.ff-lifts .ff-link b { color: var(--pos-text); font-weight: 600; }
.ff-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.ff-more { display: none; }

/* the Mood lens list line: "· costs Mood 7 points" */
.ff-line.cost { color: var(--neg-text); }
.ff-line.lift { color: var(--pos-text); }

/* side-by-side test (?fixfirst=compare) */
.ff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-compare .ff-why { padding-left: 0; }

/* Phone: names, costs and badges; one tap opens the sentences */
@media (max-width: 767px) {
  .ff-more { display: inline-flex; }
  .ff:not(.open) .ff-why { display: none; }
  .ff-cost, .ff-main { min-height: 44px; }
  .ff-info { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
  .ff-link { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
  .ff-pair { grid-template-columns: 1fr; }
  .ff-foot .btn { flex: 1 1 auto; }
}

/* How this number is made (until T-017's card) */
.ff-howto-lead { font-weight: 600; margin: 0 0 12px; }
.ff-howto-e { padding: 10px 0; border-top: 1px solid var(--line); }
.ff-howto-e h4 { margin: 0 0 4px; font-size: var(--t-sm); }
.ff-howto-e p { margin: 4px 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }

/* Table view */
.ff-tbl-note { font-size: var(--t-xs); margin: 0 0 10px; }
.ff-tbl-wrap { overflow-x: auto; margin: 0 -4px; }
.ff-table th { padding: 4px 6px; }
.ff-table td { padding: 8px 6px; }
.ff-sort { font: inherit; color: inherit; padding: 6px 4px; border-radius: var(--r-xs); white-space: nowrap; }
.ff-sort:hover, .ff-sort:focus-visible { color: var(--ink); background: var(--surface-2); }
th[aria-sort="ascending"] .ff-sort, th[aria-sort="descending"] .ff-sort { color: var(--ink); }

/* Send preview */
.ff-order { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ff-order-what { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }
.ff-grp { margin: 14px 0 4px; font-size: var(--t-sm); }
.ff-send-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.ff-send-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ff-send-h .num { color: var(--neg-text); font-size: var(--t-sm); }
.ff-send-facts { margin: 4px 0 0; font-size: var(--t-xs); color: var(--ink-2); }
.ff-dup { margin: 6px 0 0; font-size: var(--t-xs); padding: 6px 8px; border-radius: var(--r-xs); background: var(--warn-soft); color: var(--warn-text); }
.ff-ex .quote { display: block; width: 100%; text-align: left; font-size: var(--t-xs); margin-top: 6px; }
.ff-send-note { font-size: var(--t-xs); margin: 14px 0 10px; }

/* UX review P3: the cost carries its unit, so it never reads as the topic's Mood or the Why it changed bar */
.ff-cost { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.1; }
.ff-unit { font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); white-space: nowrap; }