/* FireInk Designer — widget styles. No external fonts, no CDN, no vendor tree. */

.fi-widget{--fi-ink:#141414;--fi-line:#d8d4cf;--fi-bg:#faf8f5;--fi-accent:#8c2f18;
  max-width:56rem;margin:2rem auto;color:var(--fi-ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.fi-widget *{box-sizing:border-box}

.fi-group{border:0;border-top:1px solid var(--fi-line);margin:0;padding:1.25rem 0}
.fi-group__legend{font-weight:600;font-size:1rem;padding:0}
.fi-group__help{margin:.35rem 0 .75rem;font-size:.875rem;opacity:.72}

.fi-choices{display:flex;flex-wrap:wrap;gap:.5rem}
.fi-choice{border:1px solid var(--fi-line);background:#fff;color:inherit;
  padding:.5rem .85rem;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer;
  transition:border-color .12s,background .12s}
.fi-choice:hover{border-color:var(--fi-ink)}
.fi-choice.is-on{background:var(--fi-ink);border-color:var(--fi-ink);color:#fff}
.fi-choice:focus-visible{outline:2px solid var(--fi-accent);outline-offset:2px}

.fi-subject{width:100%;padding:.7rem .85rem;border:1px solid var(--fi-line);
  border-radius:.5rem;font:inherit;background:#fff}
.fi-subject:focus{outline:2px solid var(--fi-accent);outline-offset:1px;border-color:var(--fi-ink)}
.fi-count{display:block;margin-top:.35rem;font-size:.8rem;opacity:.6}

.fi-age{display:flex;align-items:center;gap:.5rem;padding:1rem 0;
  border-top:1px solid var(--fi-line);font-size:.9rem}

.fi-go{margin-top:.5rem;width:100%;padding:.9rem 1.25rem;border:0;border-radius:.5rem;
  background:var(--fi-ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.fi-go[disabled]{opacity:.4;cursor:not-allowed}
.fi-go:not([disabled]):hover{background:var(--fi-accent)}

.fi-status{min-height:1.5rem;margin:.75rem 0 0;font-size:.9rem;opacity:.8}

.fi-results{margin-top:1.5rem}
.fi-results__title{margin:0 0 .25rem;font-size:1.15rem}
.fi-results__note{margin:0 0 1rem;font-size:.9rem;opacity:.75}
.fi-results__links{font-size:.875rem;margin-top:1rem}

.fi-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fi-card{margin:0;border:1px solid var(--fi-line);border-radius:.6rem;
  overflow:hidden;background:var(--fi-bg)}
.fi-card__img{display:block;width:100%;height:auto;background:#fff}
.fi-card__cap{padding:.5rem .7rem;font-size:.75rem;letter-spacing:.02em;
  text-transform:uppercase;opacity:.65}
.fi-card__dl{display:block;width:100%;padding:.6rem;border:0;border-top:1px solid var(--fi-line);
  background:#fff;font:inherit;font-size:.875rem;cursor:pointer}
.fi-card__dl:hover{background:var(--fi-ink);color:#fff}
/* Busy state. The composite + toBlob locks the main thread for ~1s on a real
   image, so the button must LOOK unavailable for that whole second — and must
   not take a hover highlight, which reads as "still clickable". */
.fi-card__dl[disabled]{cursor:progress;opacity:.6}
.fi-card__dl[disabled]:hover{background:#fff;color:inherit}
@media (prefers-color-scheme:dark){
  .fi-card__dl[disabled]:hover{background:#232120}
}

.fi-disclose{max-width:56rem;margin:1.5rem auto;padding:1rem 1.15rem;
  border-left:3px solid var(--fi-line);font-size:.85rem;line-height:1.5;opacity:.85}
.fi-disclose p{margin:0 0 .5rem}
.fi-disclose p:last-child{margin:0}
.fi-disclose__privacy{opacity:.8}

.fi-widget--off,.fi-widget--nojs{padding:1.25rem;border:1px dashed var(--fi-line);
  border-radius:.6rem;text-align:center}

@media (prefers-color-scheme:dark){
  .fi-widget{--fi-ink:#f2efec;--fi-line:#3a3733;--fi-bg:#1b1917}
  .fi-choice,.fi-subject,.fi-card__dl{background:#232120;color:inherit}
  .fi-card__img{background:#fff}
  .fi-choice.is-on{background:var(--fi-ink);color:#141414}
  .fi-go{background:var(--fi-ink);color:#141414}
}

/* ---------------------------------------------------------------------
 * 0.1.19 — the result card's actions row.
 *
 * Share is styled FROM .fi-card__dl rather than given its own look, so the two
 * read as one control group. The first draft gave Share a currentColor border
 * and 8px radius against Download's borderless flat bar — a matched pair in
 * the markup and two unrelated buttons on screen.
 *
 * They share the top rule via the row, and split with a hairline between.
 * ------------------------------------------------------------------ */

.fi-card__acts{display:flex;flex-wrap:wrap;border-top:1px solid var(--fi-line)}
.fi-card__acts > *{flex:1 1 50%;min-width:0}
.fi-card__acts .fi-card__dl{border-top:0}
.fi-card__share{display:block;width:100%;padding:.6rem;border:0;
  border-left:1px solid var(--fi-line);
  background:#fff;font:inherit;font-size:.875rem;cursor:pointer;
  /* 44px floor — the same accessible tap target applied to the consent button. */
  min-height:44px}
.fi-card__share:hover{background:var(--fi-ink);color:#fff}
.fi-card__share[data-fi-busy="1"]{cursor:progress;opacity:.6}
.fi-card__share[data-fi-busy="1"]:hover{background:#fff;color:inherit}
@media (prefers-color-scheme:dark){
  .fi-card__share{background:transparent}
  .fi-card__share[data-fi-busy="1"]:hover{background:#232120}
}
/* Stacked on very narrow cards: the divider moves from side to top. */
@media (max-width:380px){
  .fi-card__acts > *{flex:1 1 100%}
  .fi-card__share{border-left:0;border-top:1px solid var(--fi-line)}
}