/* bq.css: "20 Questions by expected information gain", the signature figure.
   Markup contract, API and theming notes: README.md. Nothing below 12px. */

/* 1. Fallback palette. Only used when the host page does not define the tokens.
   These live on the themed element itself, so the nearest [data-theme] wins. */
:root{--bqd-bg:#fbfaf7;--bqd-sf:#fff;--bqd-fg:#1d2127;--bqd-mu:#5f646c;--bqd-ac:#2c6a8a;--bqd-ln:#e2dfd7}
@media (prefers-color-scheme:dark){
  :root{--bqd-bg:#141517;--bqd-sf:#1c1e21;--bqd-fg:#e6e6e8;--bqd-mu:#a0a4ab;--bqd-ac:#80bfdc;--bqd-ln:#2e3035}
}
/* After the media query, so a forced theme beats the system one. */
[data-theme="light"]{color-scheme:light;--bqd-bg:#fbfaf7;--bqd-sf:#fff;--bqd-fg:#1d2127;--bqd-mu:#5f646c;--bqd-ac:#2c6a8a;--bqd-ln:#e2dfd7}
[data-theme="dark"]{color-scheme:dark;--bqd-bg:#141517;--bqd-sf:#1c1e21;--bqd-fg:#e6e6e8;--bqd-mu:#a0a4ab;--bqd-ac:#80bfdc;--bqd-ln:#2e3035}

/* 2. Tokens. Per-figure --bq-* overrides win over the page tokens, which win over the fallbacks. */
.bq{
  --_bg:var(--bq-bg,var(--bg,var(--bqd-bg)));
  --_sf:var(--bq-surface,var(--surface,var(--bg,var(--bqd-sf))));
  --_fg:var(--bq-fg,var(--fg,var(--text,var(--bqd-fg))));
  --_mu:var(--bq-muted,var(--muted,var(--bqd-mu)));
  --_ac:var(--bq-accent,var(--accent,var(--bqd-ac)));
  --_ln:var(--bq-line,var(--line,var(--bqd-ln)));
  --_r:var(--bq-radius,12px);
  --_r2:calc(var(--_r)*.7);
  --_fs:max(12px,var(--bq-size,13px));
  --_sm:max(12px,calc(var(--_fs) - 1px));
  --_ff:var(--bq-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  --_nf:var(--bq-num-font,var(--_ff));
  --_ty:color-mix(in srgb,var(--_ac) 14%,var(--_sf)); /* tile: would answer yes / found */
  --_tr:color-mix(in srgb,var(--_ac) 10%,var(--_bg)); /* row: hover and "asking now" */
  --_bar:color-mix(in srgb,var(--_fg) 42%,var(--_ln));
  container-type:inline-size;display:block;box-sizing:border-box;width:100%;max-width:var(--bq-width,560px);margin:0;
  color:var(--_fg);background:var(--_bg);border:1px solid var(--_ln);border-radius:var(--_r);
  font-family:var(--_ff);
  font-size:var(--_fs);font-weight:400;font-style:normal;line-height:1.35;letter-spacing:normal;
  font-variant-numeric:tabular-nums;text-align:left;text-transform:none
}
.bq *,.bq ::before{box-sizing:border-box}
.bq-in{padding:12px 12px 0}
:where(.bq) button{font:inherit;color:inherit;letter-spacing:inherit;text-align:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bq :focus-visible{outline:2px solid var(--_ac);outline-offset:2px}

/* 3. Header: title, the setting, and the controls (hidden until bq.js runs; space kept). */
.bq-hd{display:grid;grid-template:"t c" auto "s s" auto/minmax(0,1fr) auto;align-items:center;column-gap:10px;margin-bottom:10px}
.bq-ttl{grid-area:t;align-self:end;font-weight:600}
.bq-sub{grid-area:s;color:var(--_mu);font-size:var(--_sm)}
.bq-ctl{grid-area:c;display:flex;gap:6px}
.bq:not([data-ready]) .bq-ctl{visibility:hidden}
.bq-ctl button{display:inline-grid;align-items:center;justify-items:center;min-height:26px;padding:3px 10px;
  font-size:var(--_sm);line-height:1.2;border:1px solid var(--_mu);border-radius:var(--_r2)}
@media (hover:hover){.bq-ctl button:hover{background:var(--_tr)}}
.bq-ctl button>span{grid-area:1/1;visibility:hidden}
.bq[data-ready] .p0,.bq[data-state="playing"] .p1,.bq[data-state="done"] .p2{visibility:visible}
.bq[data-state="playing"] .p0,.bq[data-state="done"] .p0{visibility:hidden}

/* 4. Board: tiles and the belief strip. */
.bq-main{display:grid;gap:12px}
.bq-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.bq-grid{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:6px}
.bq-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:48px;padding:4px 2px;
  text-align:center;background:var(--_sf);border:1px solid color-mix(in srgb,var(--_mu) 62%,var(--_ln));border-radius:var(--_r2);
  transition:background-color .3s,border-color .3s,box-shadow .3s}
.bq-t .e{font-size:20px;line-height:1;transition:opacity .45s,filter .45s}
.bq-t .n{font-size:var(--_sm);line-height:1.2;white-space:nowrap}
@media (hover:hover){button.bq-t:hover{border-color:var(--_mu)}}
.bq-t.x{background:var(--_bg)}
.bq-t.x .e{opacity:.35;filter:grayscale(1)}
.bq-t.x .n{color:var(--_mu);text-decoration:line-through 1px;text-decoration-color:var(--_mu)}
.bq-t.y,.bq-t.w{background:var(--_ty);border-color:var(--_ac)}
.bq-t.w{box-shadow:inset 0 0 0 1px var(--_ac)}
.bq-t.w .n{font-weight:600}
.bq[data-emoji="off"] .bq-t{min-height:36px}
.bq[data-emoji="off"] .bq-t .e{display:none}
.bq[data-emoji="off"] .bq-t .n{font-size:var(--_fs)}
.bq[data-emoji="mono"] .bq-t .e{filter:grayscale(1)}
.bq[data-emoji="mono"] .bq-t:is(.y,.w) .e{filter:none}

.bq-bel{display:flex;align-items:center;gap:8px;font-size:var(--_sm);color:var(--_mu)}
/* Segment i sits at --x (its share of the strip before it) with width --w; transforms only, so no layout shift. */
.bq-bs{flex:1;position:relative;height:6px;min-width:0}
.bq-bs i{position:absolute;inset:0;border-radius:1px;background:var(--_ac);transform-origin:0 0;
  transform:translateX(calc(var(--x,0)*100%)) scaleX(var(--w,.0733));transition:transform .6s ease,opacity .25s}
.bq-bs i.n{opacity:.28}
.bq-hv{min-width:14ch;text-align:right;color:var(--_fg);font-family:var(--_nf)}

/* 5. Questions ranked by EIG. Asked ones move to the top with their answer. */
.bq-side{display:flex;flex-direction:column;min-width:0}
.bq-lh{display:flex;justify-content:space-between;gap:8px;padding:0 6px 4px;color:var(--_mu);
  font-size:max(12.5px,var(--_sm));line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.bq-list{list-style:none;margin:0;padding:0}
.bq-list li{position:relative;margin:0;padding:0;background:var(--_bg)}
.bq-list li.up{z-index:1}
.bq-list li:focus-within{z-index:2}
.bq-list li.d+li:not(.d)::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px dashed var(--_mu);opacity:.6}
.bq-q{display:grid;grid-template-columns:1.1em minmax(0,1fr) 38px 2.4em;align-items:center;gap:6px;width:100%;min-height:28px;
  padding:4px 6px;border-radius:var(--_r2);transition:background-color .25s}
@media (hover:hover){button.bq-q:not([aria-disabled="true"]):hover{background:var(--_tr)}}
.bq-q[aria-disabled="true"]{cursor:default}
.bq-q.on{background:var(--_tr)}
.bq-q .k{color:var(--_mu);font-size:var(--_sm);font-family:var(--_nf)}
.bq-q .b{height:5px;border-radius:3px;background:var(--_ln);overflow:hidden}
.bq-q .b i{display:block;height:100%;background:var(--_bar);transform-origin:left;transform:scaleX(var(--v,0));transition:transform .5s ease}
.bq-q .v{text-align:right;font-family:var(--_nf)}
.bq-q .a{display:none;justify-self:start;padding:0 6px;font-size:var(--_sm);line-height:16px;border:1px solid var(--_ln);border-radius:var(--_r2)}
.bq-list li.top .b i{background:var(--_ac)}
.bq-list li.top .v{color:var(--_ac);font-weight:600}
.bq-list li.d .bq-q{background:none}
.bq-list li.d .t,.bq-list li.d .v{color:var(--_mu)}
.bq-list li.d .b{display:none}
.bq-list li.d .a{display:block}
.bq-list li.d .a.yes{color:var(--_ac);border-color:var(--_ac)}
.bq-note{margin:auto 0 0;padding:8px 6px 0;min-height:calc(2.7em + 8px);color:var(--_mu);font-size:var(--_sm);text-wrap:pretty}
.bq-note b{color:var(--_fg);font-weight:600}

/* 6. Caption (a direct child of figure.bq, after .bq-in) and the screen-reader line. */
.bq-cap{margin:10px 12px 0;padding:8px 0 12px;border-top:1px solid var(--_ln);color:var(--_mu);font-size:var(--_fs);line-height:1.4;text-wrap:pretty}
.bq-lab{color:var(--_fg);font-weight:600}
.bq-cap a{color:var(--_fg);text-decoration:underline 1px var(--_ac);text-underline-offset:.18em;text-decoration-skip-ink:auto}
@media (hover:hover){.bq-cap a:hover{color:var(--_ac);text-decoration-thickness:2px}}
.bq-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 7. Container queries (the figure is its own container): 400px stacks the title
   beside the controls; 520px puts the board left and the questions right. */
@container (min-width:400px){.bq-hd{grid-template:"t c" auto "s c" auto/minmax(0,1fr) auto}}
@container (min-width:520px){
  .bq-in{padding:14px 16px 0}
  .bq-cap{margin-inline:16px}
  .bq-hd{grid-template:"t s c"/auto minmax(0,1fr) auto;align-items:baseline;margin-bottom:12px}
  .bq-ttl{align-self:baseline}
  .bq-main{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:16px}
  .bq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 8. Touch, motion, forced colours, print. */
@media (pointer:coarse){
  .bq-ctl button,.bq[data-emoji="off"] .bq-t{min-height:44px}
  .bq-q{min-height:36px}
}
@media (prefers-reduced-motion:reduce){.bq *,.bq ::before{transition:none!important}}
@media (forced-colors:active){
  .bq-t.y,.bq-t.w{border:2px solid Highlight}
  .bq-bs i,.bq-q .b i{background:CanvasText}
}
@media print{.bq{display:none}}