/* Styles for the spot-check task screen and the tutorial (used by plugin-spotcheck.js). */
.sc{--ink:#18202d;--muted:#5a6476;--line:#d3d9e2;--surface:#fff;--sunken:#f5f7fa;--accent:#1d6b66;
  --safe:#2259c4;--safe-soft:#dbe6fb;--forbid:#c22f38;--forbid-soft:#f9dcde;--good:#1f7a43;
  width:min(1040px,96vw);margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.sc .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0}
.sc .eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.sc .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sc .status{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.sc .bar{height:10px;background:var(--sunken);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sc .bar>i{display:block;height:100%;width:0;background:var(--accent)}
.sc .stat{display:flex;flex-direction:column;align-items:flex-end}
.sc .stat b{font-family:var(--f-mono);font-size:1.25rem;font-variant-numeric:tabular-nums}
.sc .stat span{font-size:.75rem;color:var(--muted)}
.sc .task{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}
.sc .col{display:flex;flex-direction:column;gap:14px}
.sc .statement{min-height:110px;display:flex;align-items:center;font-size:1.3rem;font-weight:700;margin:0}
.sc .statement.waiting{color:var(--muted);font-weight:400;font-size:1rem}
.sc .tf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:14px;font-weight:700;font-size:1.05rem}
.sc button:hover:not(:disabled){border-color:var(--muted)}
.sc button:disabled{opacity:.45;cursor:not-allowed}
.sc .flash{min-height:1.5em;font-size:.9rem;margin:0}
  .sc .agent-head{display:flex;align-items:center;justify-content:space-between}
/* "Agent acted" light: pale blue-grey tint for the first tick_lit_ms of every agent action, plain otherwise.
   Its own colour, so only the Check button is teal. Switched on/off from the frame loop (not a CSS animation),
   so it also shows with reduced-motion settings. */
.sc .tick{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;font-size:.95rem;font-weight:700;
  color:var(--muted);background:transparent;border:2px solid var(--line)}
.sc .tick i{width:10px;height:10px;border-radius:50%;background:#c3cad4;display:inline-block}
/* Lit: dark, high-contrast fill (not blue/red/teal, which mean safe/forbidden/Check) */
.sc .tick.lit{background:var(--ink);border-color:var(--ink);color:#fff}
.sc .tick.lit i{background:#fff}
/* While lit, the hidden screen gets a light outline too (not when a check result is showing) */
.sc.acting .screen:not(.safe):not(.forbid){box-shadow:inset 0 0 28px rgba(0,0,0,.45),0 0 0 4px #aab4c3}
.sc .qhead{display:flex;align-items:center;justify-content:space-between}
.sc .qcount{display:table;margin:6px auto 0;padding:2px 10px;text-align:center;font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.sc .qpanel.fresh{background:#fff4d6;border-color:#e0b75a}
.sc .flash.ok{color:var(--good)} .sc .flash.bad{color:var(--forbid)}
/* Agent screen: a dark "monitor" while hidden; light blue/red when an action is revealed */
.sc .screen{height:160px;border-radius:10px;border:2px solid #10151d;color:#e6ebf2;
  background:#1a212c repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  box-shadow:inset 0 0 28px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.sc .screen.acted{border-color:#5b7aa6}
.sc .screen .lbl{font-weight:700;font-size:1.3rem}
.sc .screen .note{color:#93a0b4}
.sc .screen.safe{background:var(--safe-soft);border:2px solid var(--safe);color:var(--safe);box-shadow:none}
.sc .screen.forbid{background:var(--forbid-soft);border:2px solid var(--forbid);color:var(--forbid);box-shadow:none}

.sc .checkbtn{padding:18px;font-size:1.2rem;background:var(--accent);color:#fff;border-color:var(--accent)}
.sc .checkbtn:hover{border-color:var(--accent);filter:brightness(1.1)}
.sc .checkbtn:disabled{background:#9aa1ab;border-color:#9aa1ab;filter:none}
/* Already checked this action: dimmed until the next one. Kept clickable (aria-disabled, not disabled)
   so presses during the wait can be logged. */
.sc .checkbtn.cool{opacity:.4;cursor:not-allowed;filter:none}
.sc.frozen .qpanel{opacity:.45}
.sc.tfhl .tf button:hover:not(:disabled){background:#f1f3f6}
.sc.tfhl .tf button.chosen:disabled{opacity:1;cursor:default;border:2px solid var(--ink);background:#eef1f5}
.sc.frozen .bar>i{opacity:.5}
/* AI agent panel: grey background like the faded question panel, but contents stay at full strength so the result is clear */
.sc.frozen .apanel{background:#f3f5f7}
.sc .note{font-size:.85rem;color:var(--muted);margin:0}
.sc kbd{font-family:var(--f-mono);font-size:.78rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--sunken)}
/* Check history strip: one square per agent action */
.sc .hist{margin-top:16px}
.sc .hist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sc .hist-legend{display:flex;gap:18px;font-size:.85rem;color:var(--ink)}
.sc .hist-legend span{display:inline-flex;align-items:center;gap:5px}
.sc .hist-body{display:flex;align-items:center;gap:28px}
.sc .budget{flex:0 0 auto;min-width:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 12px;border:2px solid var(--line);border-radius:8px;background:var(--sunken)}
.sc .budget b{font-family:var(--f-mono);font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.sc .budget span{font-size:.78rem;line-height:1.3;color:var(--muted);margin-top:4px;text-align:center}
.sc .budget.low{border-color:#e0b75a;background:#fff4d6}
.sc .budget.empty b{color:var(--muted)}
.sc .hist-grid{flex:1;display:grid;gap:4px;justify-content:center} /* columns set inline: 5 rows per round (180 actions -> 36 per row = 90 s) */
.sc .hist-grid i,.sc .hist-legend i{display:block;aspect-ratio:1;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.sc .hist-legend i{width:13px}
.sc .hist-grid i:not([class]){visibility:hidden} /* future actions: not shown, but keep their space so the panel never resizes */
.sc .hist-grid i.past{background:#d5dae2;box-shadow:none}
.sc .hist-grid i.now{box-shadow:inset 0 0 0 2px var(--muted)}
.sc .hist i.safe{background:var(--safe);box-shadow:none}
.sc .hist i.forbid{background:var(--forbid);box-shadow:none}
.sc .debug{font-family:var(--f-mono);font-size:.8rem;color:#a15c00}
/* Tutorial: the highlighted part sits above a dark backdrop; everything else is covered and can't be clicked */
.tut-block{position:fixed;inset:0;z-index:40}
.tut-block.dim{background:rgba(15,20,30,.6)} /* pop-ups that don't point at anything */
.tut-focus{position:relative;z-index:50;box-shadow:0 0 0 4px #fff,0 0 0 9999px rgba(15,20,30,.6)!important;border-radius:10px}
.tut-pop{position:fixed;z-index:60;width:340px;background:#fff;color:#18202d;border-radius:10px;padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:1rem;line-height:1.45;text-align:left}
.tut-pop p{margin:0 0 10px}
.tut-pop .tut-step{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#5a6476;margin-bottom:6px}
.tut-pop .tut-do{font-weight:700;color:#1d6b66;margin:0}
.tut-pop button{font:inherit;font-weight:700;cursor:pointer;border-radius:8px;border:1px solid #1d6b66;background:#1d6b66;color:#fff;padding:8px 16px;margin-top:4px}
.tut-pop::before{content:"";position:absolute;left:var(--ax,50%);width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.tut-pop.below::before{top:-7px} .tut-pop.above::before{bottom:-7px} .tut-pop.center::before{display:none}

/* Former inline style attributes */
.sc .hist-legend i.none{background:#d5dae2;box-shadow:none}
.c-safe{color:var(--safe,#2259c4)} .c-forbid{color:var(--forbid,#c22f38)} .c-grey{color:#8a94a3}

/* A check sent to the server: the result shows when it answers. */
.sc .screen.checking { opacity: 0.85; }
/* The round is over and being closed on the server. */
.sc.ending { opacity: 0.6; pointer-events: none; }