/* Fill-missing card review (fill-cards.js). Uses the Studio tokens from
   studio-shell.css / review.html: --bg --card --ink --sub --line --accent
   --ok --warn --err. */
.fc-wrap { display: flex; flex-direction: column; gap: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toolbar: progress + filters */
.fc-toolbar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .65rem; }
.fc-progtext { font-size: .88rem; }
.fc-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: .35rem; border: 1px solid var(--line); }
.fc-bar span { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .25s ease; }
.fc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fc-filters .segfilter button { display: inline-flex; gap: .35rem; align-items: center; }
.fc-n { font-size: .72rem; font-weight: 600; opacity: .75; }
.fc-srcsel { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; font-weight: 600; color: var(--sub); }
.fc-srcsel select { font-size: .82rem; max-width: 14rem; }
.fc-spacer { flex: 1; }
.fc-save { font-size: .76rem; color: var(--sub); min-width: 6rem; text-align: right; }
.fc-save.ok { color: var(--ok); } .fc-save.err { color: var(--err); } .fc-save.busy { color: var(--sub); }

/* Card */
.fc-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; scroll-margin-top: 7.5rem; }
.fc-row { scroll-margin-top: 8rem; scroll-margin-bottom: 5rem; }
.fc-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.fc-head h2 { margin: 0; font-size: 1.15rem; font-weight: 650; line-height: 1.3; }
/* The title only receives programmatic focus (new card announced to screen readers). */
.studio-page .fc-head h2:focus, .studio-page .fc-head h2:focus-visible { outline: none; }
.fc-sub { font-size: .8rem; margin-top: .1rem; }
.fc-headnav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; font-size: .8rem; white-space: nowrap; }
.fc-headnav button { padding: .2rem .6rem; font-size: 1rem; line-height: 1.2; }
.fc-body { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; gap: 1.2rem; padding: 1rem 1.1rem; align-items: start; }

/* Media */
.fc-media { position: sticky; top: 8.5rem; display: flex; flex-direction: column; gap: .5rem; }
.fc-mainimg { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: zoom-in; overflow: hidden; aspect-ratio: 1 / 1; }
.fc-mainimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fc-mainimg.fc-hl { box-shadow: 0 0 0 3px var(--accent); }
.fc-imgno { position: absolute; right: .4rem; bottom: .4rem; font-size: .7rem; background: rgba(30, 30, 30, .65); color: #fff; padding: .05rem .4rem; border-radius: 999px; }
.fc-thumbs { display: flex; flex-wrap: wrap; gap: .35rem; }
.fc-thumb { position: relative; width: 56px; height: 56px; padding: 0; border: 2px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.fc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-thumb span { position: absolute; left: 2px; top: 2px; font-size: .6rem; line-height: 1; background: rgba(255, 255, 255, .85); border-radius: 4px; padding: 1px 3px; color: var(--ink); }
.fc-thumb.on { border-color: var(--accent); }
.fc-noimg { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 10px; color: var(--sub); }

/* Proposals */
.fc-props { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.fc-sec h3 { margin: 0 0 .25rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); font-weight: 700; }
.fc-hidden { font-size: .8rem; margin: 0; }
.fc-row { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "thumb main meta dec" "detail detail detail detail"; align-items: center; gap: .2rem .7rem; padding: .5rem .55rem; border: 1px solid transparent; border-top-color: var(--line); border-radius: 8px; }
.fc-row:first-child { border-top-color: transparent; }
.fc-row:focus { outline: none; }
.fc-row:focus-visible, .fc-row:focus-within { border-color: var(--accent); background: #fbf8f4; }
.fc-row:focus-visible { box-shadow: 0 0 0 1px var(--accent); }
.fc-row.st-accepted { background: #f1f8f3; }
.fc-row.st-rejected .fc-val { text-decoration: line-through; opacity: .5; }
.fc-row.conflict { box-shadow: inset 3px 0 0 var(--warn); }
.fc-vthumbs { grid-area: thumb; display: inline-flex; align-items: center; }
.fc-row:not(:has(.fc-vthumbs)) { grid-template-areas: "main main meta dec" "detail detail detail detail"; }
.fc-vthumb { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; margin-right: -14px; box-shadow: 0 0 0 2px var(--card); }
.fc-vthumb:last-of-type { margin-right: 0; }
.fc-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-vthumb.sm { width: 34px; height: 34px; margin: 0; flex: none; }
.fc-vthumb.empty { display: inline-block; background: var(--bg); border-style: dashed; box-shadow: none; }
.fc-vthumbs.fallback .fc-vthumb { opacity: .55; }
.fc-more { font-size: .7rem; color: var(--sub); margin-left: .5rem; }
.fc-main { grid-area: main; min-width: 0; }
.fc-flabel { font-size: .74rem; color: var(--sub); font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fc-vone { font-weight: 500; }
.fc-val { font-size: .95rem; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; overflow-wrap: anywhere; }
.fc-val .muted { font-weight: 500; }
.fc-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.fc-chip { font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.fc-arrow { color: var(--sub); font-weight: 400; }
.fc-fam { display: inline-flex; align-items: center; gap: .3rem; }
.fc-swatch { width: 1em; height: 1em; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); display: inline-block; flex: none; }
.fc-edited { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 .35rem; }
.fc-editbtn, .fc-vcount { border: none; background: none; padding: .1rem .3rem; font-size: .78rem; color: var(--sub); border-radius: 5px; }
.fc-editbtn:hover, .fc-vcount:hover { background: var(--bg); color: var(--ink); }
.fc-vcount { font-weight: 600; color: var(--accent); }
.fc-meta { grid-area: meta; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.fc-src { font-size: .72rem; line-height: 1.4; padding: .05rem .45rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--sub); white-space: nowrap; text-decoration: none; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.fc-src.web { color: var(--accent); }
.fc-src.web:hover, button.fc-src:hover { background: var(--bg); }
button.fc-src { cursor: pointer; font-family: inherit; }
.fc-conf { display: inline-flex; align-items: center; gap: .25rem; }
.fc-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.fc-dot.high { background: var(--ok); } .fc-dot.medium { background: var(--warn); } .fc-dot.low { background: var(--err); }
.fc-conflict { font-size: .66rem; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: .03em; }
.fc-dec { grid-area: dec; }
.fc-dec .dec button { padding: .3rem .7rem; font-size: .9rem; }
.fc-detail { grid-area: detail; padding: .3rem 0 .1rem; }
.fc-evidence { margin: 0 0 .35rem; padding-left: 1.1rem; font-size: .78rem; color: var(--sub); }
.fc-variants { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.fc-variants li { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; font-size: .82rem; }
.fc-variants li.rejected .fc-vlabel { text-decoration: line-through; opacity: .55; }
.fc-variants li.accepted { background: #f1f8f3; }
.fc-vlabel { flex: 1; min-width: 0; }
.fc-variants .dec button { padding: .1rem .5rem; font-size: .8rem; }

/* Edit-in-place */
.fc-edit { margin-top: .3rem; display: flex; flex-direction: column; gap: .3rem; }
.fc-edit label { margin: .2rem 0 0; }
.fc-inrow { display: flex; align-items: center; gap: .35rem; }
.fc-inrow input, .fc-inrow select { flex: 1; max-width: 22rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: .9rem; }
.fc-unit { font-size: .82rem; color: var(--sub); }
.fc-checks { border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem .5rem; margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.fc-checks legend { font-size: .74rem; font-weight: 600; color: var(--sub); padding: 0 .2rem; }
.fc-checks label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; font-size: .84rem; color: var(--ink); margin: .2rem 0 0; }
.fc-checks input { width: auto; }
.fc-err { color: var(--err); font-size: .8rem; margin: 0; font-weight: 600; }
.fc-editbtns { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.fc-editbtns .muted { font-size: .72rem; }

.fc-trust { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .3rem; border-top: 1px dashed var(--line); }
.fc-trust button { font-size: .78rem; }

/* Card actions: sticky at the bottom of the viewport while the card scrolls. */
.fc-actbar { position: sticky; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.fc-actions { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; padding: .7rem 1.1rem; flex-wrap: wrap; }
.fc-actions .primary { font-weight: 650; }
.fc-actpos { margin-right: auto; font-size: .78rem; }

.fc-empty { padding: 1.2rem 1.3rem; }
.fc-empty h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.fc-keys { margin: .2rem 0 .6rem; }
.fc-keys th { text-transform: none; font-size: .85rem; color: var(--ink); width: 6.5rem; }
.fc-keys td { font-size: .85rem; }
kbd { font: 600 .78rem ui-monospace, Menlo, monospace; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); }
.fc-lbnav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .35); color: #fff; border: none; font-size: 2rem; line-height: 1; padding: .3rem .7rem; border-radius: 8px; }
.fc-lbnav.prev { left: 1rem; } .fc-lbnav.next { right: 1rem; }

/* Tablet / phone: stack images over proposals; the action bar stays sticky. */
@media (max-width: 860px) {
  .fc-body { grid-template-columns: 1fr; }
  .fc-media { position: static; }
  .fc-mainimg { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .fc-toolbar { padding: .7rem .75rem; }
  .fc-head { flex-direction: column; gap: .4rem; padding: .8rem .8rem; }
  .fc-headnav { justify-content: flex-start; }
  .fc-body { padding: .8rem; gap: .8rem; }
  .fc-row { grid-template-columns: auto 1fr auto; grid-template-areas: "thumb main dec" "meta meta meta" "detail detail detail"; padding: .5rem .3rem; }
  .fc-row:not(:has(.fc-vthumbs)) { grid-template-areas: "main main dec" "meta meta meta" "detail detail detail"; }
  .fc-meta { justify-content: flex-start; }
  /* Editing on a phone: the form gets the full card width. */
  .fc-row.editing { grid-template-areas: "thumb dec dec" "main main main" "meta meta meta" "detail detail detail"; }
  .fc-row.editing:not(:has(.fc-vthumbs)) { grid-template-areas: "dec dec dec" "main main main" "meta meta meta" "detail detail detail"; }
  .fc-row.editing .fc-dec { justify-self: end; }
  .fc-actions { padding: .55rem .6rem; gap: .35rem; flex-wrap: nowrap; }
  .fc-actions button { padding: .5rem .55rem; font-size: .85rem; }
  .fc-actions .primary { flex: 1; }
  .fc-actpos { display: none; }
  .fc-save { min-width: 0; }
  .fc-thumb { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-bar span { transition: none; }
}