/* Feature 4 (flagged.js): the checks, the style groups, the bar, the all-answered state, the landed line and the Change popover.
   Ported from frames/kit/feat.css (fx-* renamed fl-*); tokens only, no new ones. Gaps up to 16 even, above 16 multiples of 4. */
.tile .fl-ck{position:absolute;top:8px;left:8px;z-index:4;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgb(var(--p-navy-rgb) / .64);box-shadow:inset 0 0 0 2px rgba(238,240,251,.72);cursor:pointer;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.tile .fl-ck::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.tile .fl-ck .i{width:var(--icon-md);height:var(--icon-md);color:var(--ink);stroke-width:2.6;visibility:hidden}
.tile .fl-ck:hover{box-shadow:inset 0 0 0 2px var(--text);background:var(--on-image)}
.tile .fl-ck:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--text),var(--ring-gap-bg),0 0 0 4px var(--accent)}
.tile .fl-ck[aria-checked=true]{background:var(--accent);box-shadow:0 0 0 2px rgb(var(--p-navy-rgb) / .64)}
.tile .fl-ck[aria-checked=true] .i{visibility:visible}
.tile.fl-on{box-shadow:0 0 0 2px var(--accent);border-color:transparent}
.tile.fl-on .media{border-radius:inherit}
.p2-flag:has(.i){color:inherit}
.agrid .fl-sech{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s-2);margin:var(--s-6) 0 -4px;font-size:var(--fs-3);line-height:20px;font-weight:600}
.agrid .fl-sech:first-child{margin-top:0}
.agrid .fl-head{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s-2);min-height:36px;margin:0}
.fl-head .fl-hint{flex:1;min-width:0;margin:0;color:var(--text-2);font:var(--fs-2)/18px var(--font)}
.agrid .fl-head + .fl-sech{margin-top:var(--s-4)}
.fl-sech .count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-2);background:var(--raised);color:var(--text-2);font:600 var(--fs-0)/20px var(--font);text-align:center}
.fl-sech .link{margin-left:var(--s-1);font-size:var(--fs-2)}
.fl-bar{position:fixed;z-index:var(--z-actionbar);left:var(--fx-c,calc(248px + (100vw - 280px) / 2));bottom:var(--s-4);translate:-50% 0;display:flex;align-items:center;gap:var(--s-3);height:var(--ctl-m);padding:0 var(--s-1);border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--raised);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);white-space:nowrap}
.fl-bar .fl-n{font:600 var(--fs-3)/20px var(--font);font-variant-numeric:tabular-nums}
.fl-bar .fl-gap{flex:1;min-width:12px}
.fl-bar .btn{height:var(--ctl-s)}   /* FX-8b (UI-COVER-20): the same compact bar as the Covers select bar (remark.css) */
.fl-bar .link{font-size:var(--fs-2)}
.fl-done{display:grid;place-items:center;padding:var(--s-9) 0}
.fl-rd{margin:var(--s-1) 0 0;overflow:hidden;color:var(--text-2);font-size:var(--fs-2);line-height:18px;text-overflow:ellipsis;white-space:nowrap}
.fl-left .rt-lab{margin:0 0 var(--s-2);font-weight:600}
.fl-left .rt-lab small{color:var(--text-3);font-size:var(--fs-2);font-weight:400}
.fl-left .rt-help{margin:var(--s-2) 0 var(--s-5);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.fl-left .fl-ta{width:100%;min-height:124px;resize:vertical}
.fl-rows{margin-top:0}
.fl-stand{margin:var(--s-4) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.fl-ch .link{margin-left:var(--s-1);font-size:var(--fs-2)}
@media (prefers-reduced-motion:reduce){.tile .fl-ck{transition:none}}