/* ==========================================================================
   Free AI APIs for Builders — the providers finder.
   Studio theme (theme/tokens.css): indigo --accent, teal --signal, Space
   Grotesk / Inter / JetBrains Mono. Everything scoped under .free-finder.
   Sibling of coding_models/llm-board.css — a card FINDER, not a dense table.
   ========================================================================== */

.free-finder{
  --fa-line-2:color-mix(in srgb, var(--ink) 22%, transparent);
  --fa-cream:var(--surface-2);
  --fa-ok:#0f8f74; --fa-ok-soft:rgba(77,184,168,.16);
}

/* ---------- freshness ticker ---------- */
.fa-ticker{border:1px solid var(--line); border-radius:var(--radius);
  background:var(--fa-cream); overflow:hidden; display:flex; align-items:stretch; margin-bottom:18px}
.fa-ticker__tag{flex:none; display:flex; align-items:center; gap:8px; padding:0 15px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 78%, var(--ink)); background:var(--surface);
  border-right:1px solid var(--line); white-space:nowrap}
.fa-ticker__dot{width:8px; height:8px; border-radius:50%; background:var(--signal); animation:fa-pulse 2.2s infinite}
@keyframes fa-pulse{0%{box-shadow:0 0 0 0 var(--fa-ok-soft)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fa-ticker__track{overflow:hidden; flex:1; display:flex; align-items:center}
.fa-ticker__move{display:inline-flex; gap:26px; padding:11px 0 11px 26px; white-space:nowrap;
  font-family:var(--font-mono); font-size:12.5px; align-items:center; animation:fa-scroll 46s linear infinite}
.fa-ticker__track:hover .fa-ticker__move{animation-play-state:paused}
@keyframes fa-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fa-tk{color:var(--muted)} .fa-tk b{color:var(--ink); font-weight:600}
.fa-tk__sep{color:var(--muted); opacity:.5}
@media (prefers-reduced-motion:reduce){.fa-ticker__move{animation:none}}

/* ---------- top: headline left, tiles right ---------- */
.fa-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);
  gap:28px; align-items:center; margin-bottom:18px}
@media(max-width:860px){.fa-top{grid-template-columns:1fr}}
.fa-hero h1{font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 10px; color:var(--ink); text-wrap:balance; font-weight:700}
.fa-lede{max-width:58ch; color:var(--muted); font-size:15px; line-height:1.55; margin:0}
.fa-lede b{color:var(--ink); font-weight:600}

.fa-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0}
.fa-tile{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 13px; box-shadow:var(--shadow-sm); min-width:0}
.fa-tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); opacity:.6}
.fa-tile .k{font-family:var(--font-mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.fa-tile .v{font-family:var(--font-display); font-size:22px; font-weight:700; margin-top:3px; letter-spacing:-.01em; color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums}
.fa-tile .sub{font-size:10px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- provider/model view switch (shared by both surfaces) ---------- */
.fm-switch{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:2px 0 14px;
  font-size:13px; color:var(--muted)}
.fm-switch a{color:var(--accent); font-weight:600; text-decoration:none}
.fm-switch a:hover{text-decoration:underline}

/* ---------- controls ---------- */
.fa-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 16px}
.fa-search{flex:1 1 220px; min-width:180px}
.fa-search input{width:100%; font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 15px; transition:.13s}
.fa-search input:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.fa-seg{display:inline-flex; background:var(--fa-cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px; gap:2px; flex-wrap:wrap}
.fa-seg button{font-family:var(--font-body); font-size:12.5px; font-weight:600; border:0; cursor:pointer;
  background:transparent; color:var(--muted); padding:6px 12px; border-radius:8px; transition:.12s}
.fa-seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.fa-chips{display:inline-flex; flex-wrap:wrap; gap:8px}
.fa-chip{font-family:var(--font-mono); font-size:12px; color:var(--muted); cursor:pointer;
  border:1px solid var(--line); background:var(--surface); padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px; transition:.13s; user-select:none}
.fa-chip:hover{border-color:var(--fa-line-2); color:var(--ink)}
.fa-chip .x{width:13px; height:13px; border-radius:4px; border:1.5px solid var(--fa-line-2); display:inline-block; position:relative; transition:.13s}
.fa-chip[aria-pressed="true"]{border-color:var(--accent); color:var(--ink); background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.fa-chip[aria-pressed="true"] .x{background:var(--accent); border-color:var(--accent)}
.fa-chip[aria-pressed="true"] .x::after{content:""; position:absolute; left:3px; top:0; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.fa-controls__spacer{flex:1 1 auto}
.fa-count{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); white-space:nowrap}
.fa-count b{color:var(--ink)}

/* ---------- finder grid ---------- */
.fa-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
@media(max-width:520px){.fa-grid{grid-template-columns:1fr}}
.fa-card{display:flex; flex-direction:column; gap:11px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 13px; box-shadow:var(--shadow-sm); transition:.15s; color:inherit}
.fa-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent); transform:translateY(-2px); box-shadow:var(--shadow)}
.fa-card__head{display:flex; align-items:flex-start; gap:11px}
.fa-logo{flex:none; width:38px; height:38px; border-radius:9px; overflow:hidden; display:grid; place-items:center;
  background:var(--fa-cream); border:1px solid var(--line)}
.fa-logo img{width:100%; height:100%; object-fit:contain; padding:5px}
.fa-logo .fb{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--accent)}
.fa-card__title{min-width:0; flex:1}
.fa-name{display:block; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); line-height:1.2}
.fa-tag{display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.fa-badge{flex:none; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; white-space:nowrap}
.fa-badge.nocard{color:var(--fa-ok); background:var(--fa-ok-soft)}

.fa-free{font-size:13.5px; line-height:1.4; color:var(--ink); font-weight:600;
  background:var(--fa-cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px}

.fa-meta{display:flex; flex-wrap:wrap; gap:6px}
.fa-pill{font-family:var(--font-mono); font-size:10px; letter-spacing:.02em; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.fa-pill.mod{color:color-mix(in srgb,var(--accent) 70%,var(--ink)); border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.fa-pill.oai{color:var(--fa-ok); border-color:color-mix(in srgb,var(--fa-ok) 35%,transparent)}
.fa-pill.access{color:var(--ink); background:var(--surface)}
.fa-pill.access.always_free{color:#0f7a63; border-color:color-mix(in srgb,var(--fa-ok) 40%,transparent)}
.fa-pill.access.one_time_credit{color:#9a6a11; border-color:rgba(245,215,110,.6)}
.fa-pill.access.via_aggregator{color:color-mix(in srgb,var(--accent) 80%,var(--ink)); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.fa-pill.access.open_playground{color:var(--muted)}

.fa-models{font-size:11.5px; line-height:1.4; color:var(--muted); border-top:1px dashed var(--line); padding-top:10px}
.fa-models .k{font-family:var(--font-mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; display:block; margin-bottom:2px}
.fa-models .v{color:var(--ink)}
.fa-models .more{color:var(--muted)}

.fa-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:4px}
.fa-verified{font-family:var(--font-mono); font-size:10px; color:var(--muted)}
.fa-more{font-size:12px; font-weight:600; color:var(--accent)}

.fa-empty,.fa-noresults{color:var(--muted); font-size:14px; padding:24px 0; text-align:center}
.fa-noresults button{background:none; border:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline}

/* ---------- methodology ---------- */
.fa-note{margin-top:26px; border-top:1px solid var(--line); padding-top:16px}
.fa-note p{max-width:80ch; font-size:12.5px; line-height:1.65; color:var(--muted)}
.fa-note b{color:var(--ink); font-weight:600}