/* ===========================================================================
   iLabs — "card list" pages (Re-agents: 50 chemistry exceptions, Forces: 50 physics myths)
   Generated by build/cardlist-page.mjs, behaviour in assets/cardlist.js.
   Card body = two side-by-side boxes (.cl-a "what you believe" / .cl-b "what's true"), a "why", an optional tip and lab link.
   --cl-b sets the colour of the right-hand box; --cat the card's topic colour.
   ===========================================================================*/
  /* ---------- toolbar ---------- */
  .cl-chipwrap{ padding:22px 0 4px; }
  .cl-bar{ background:var(--bg); border-block:1px solid var(--edge); padding:12px 0 8px; margin-top:10px; }
  @media (min-width:900px){ .cl-bar{ position:sticky; top:64px; z-index:50; } }
  .cl-bar .cl-row{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
  .cl-search{ flex:1 1 240px; min-width:0; }
  .cl-search input{ width:100%; font:inherit; font-size:1rem; color:var(--chrome); background:var(--field);
    border:1px solid var(--edge-hi); border-radius:var(--r-sm); padding:.65em .9em; min-height:44px; }
  .cl-search input::placeholder{ color:var(--chrome-3); }
  .cl-search input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .cl-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-small); color:var(--chrome-2); user-select:none; min-height:44px; }
  .cl-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
  .cl-switch .cl-knob{ width:42px; height:24px; border-radius:999px; background:var(--field-hi); border:1px solid var(--edge-hi);
    position:relative; transition:background .2s; flex:0 0 auto; }
  .cl-switch .cl-knob::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:var(--chrome); transition:transform .2s; }
  .cl-switch input:checked + .cl-knob{ background:var(--accent); border-color:var(--accent); }
  .cl-switch input:checked + .cl-knob::after{ transform:translateX(18px); background:var(--on-accent); }
  .cl-switch input:focus-visible + .cl-knob{ outline:2px solid var(--accent); outline-offset:2px; }
  .cl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .cl-chip{ font:inherit; font-size:var(--fs-small); font-weight:500; color:var(--chrome-2); background:var(--surface);
    border:1px solid var(--edge); border-radius:999px; padding:.45em 1em; min-height:40px; cursor:pointer;
    transition:background .15s,border-color .15s,color .15s; }
  .cl-chip span{ color:var(--chrome-3); font-variant-numeric:tabular-nums; margin-left:4px; }
  .cl-chip:hover{ border-color:var(--edge-hi); color:var(--chrome); }
  .cl-chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
  .cl-chip.on span{ color:inherit; opacity:.75; }
  .cl-meta{ display:flex; flex-wrap:wrap; gap:0 18px; align-items:center; margin-top:2px; font-size:var(--fs-small); color:var(--chrome-2); }
  .cl-meta b{ color:var(--chrome); font-variant-numeric:tabular-nums; }
  .cl-meta .cl-spacer{ flex:1; }
  .cl-btn{ font:inherit; font-size:var(--fs-small); font-weight:600; color:var(--accent); background:transparent; border:0; cursor:pointer; padding:.4em .2em; min-height:40px; }
  .cl-btn:hover{ text-decoration:underline; }
  @media (max-width:700px){
    .cl-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter); }
    .cl-chips::-webkit-scrollbar{ display:none; }
    .cl-chip{ flex:0 0 auto; }
  }

  /* ---------- cards ---------- */
  .cl-list{ display:grid; gap:18px; max-width:900px; margin:26px auto 0; }
  .cl-card{ position:relative; background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-lg);
    padding:22px 24px 20px; scroll-margin-top:170px; border-left:4px solid var(--cat,var(--accent)); }
  .cl-card[hidden]{ display:none; }
  .cl-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:10px; }
  .cl-num{ font-family:"IBM Plex Mono",monospace; font-size:var(--fs-small); font-weight:600; color:var(--chrome-3); }
  .cl-num:hover{ color:var(--accent); text-decoration:none; }
  .cl-cat{ display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-2); }
  .cl-cat::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cat,var(--accent)); margin-right:7px; flex:0 0 auto; }
  .cl-badges{ margin-left:auto; display:flex; flex-wrap:wrap; gap:6px; }
  .cl-badge{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:.25em .6em;
    color:var(--bc,var(--accent-2)); background:color-mix(in srgb,var(--bc,var(--accent-2)) 14%,transparent); }
  .cl-badge.star{ --bc:var(--accent-2); }
  .cl-badge.busted{ --bc:#e5674f; }
  .cl-badge.half{ --bc:#c9a227; }
  .cl-badge.confirmed{ --bc:#3fae7a; }
  .cl-badge.daily{ --bc:var(--phys); }
  .cl-card h3{ font-size:clamp(1.15rem,2.4vw,1.4rem); line-height:1.25; margin:0 0 6px; display:flex; gap:10px; align-items:baseline; }
  .cl-emo{ flex:0 0 auto; }
  .cl-joke{ margin:0 0 16px; color:var(--chrome-2); font-style:italic; line-height:1.55; }
  .cl-duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:12px; }
  .cl-duo > div{ border-radius:var(--r-md); padding:14px 16px; }
  .cl-duo b{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
  .cl-duo p{ margin:0; font-size:1rem; line-height:1.6; }
  .cl-a{ background:var(--panel-2); border:1px dashed var(--edge-hi); }
  .cl-a b{ color:var(--chrome-3); }
  .cl-a p{ color:var(--chrome-2); }
  .cl-b{ background:color-mix(in srgb,var(--cl-b,var(--accent-2)) 11%,transparent); border:1px solid color-mix(in srgb,var(--cl-b,var(--accent-2)) 38%,transparent); }
  .cl-b b{ color:var(--cl-b,var(--accent-2)); }
  .cl-b p{ color:var(--chrome); }
  .cl-why, .cl-tip{ margin:14px 0 0; font-size:1rem; line-height:1.65; color:var(--chrome-2); }
  .cl-why b{ color:var(--chrome); }
  .cl-tip{ padding:10px 14px; border-radius:var(--r-sm); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--chrome); }
  .cl-tip b{ color:var(--accent); }
  .cl-reveal{ display:none; margin-top:14px; font:inherit; font-weight:600; font-size:var(--fs-small); cursor:pointer; min-height:44px;
    color:var(--on-accent); background:var(--accent); border:0; border-radius:var(--r-sm); padding:.6em 1.2em; }
  .cl-reveal:hover{ filter:brightness(1.08); }
  @media (max-width:700px){
    .cl-card{ padding:18px 16px 16px; border-radius:var(--r-md); scroll-margin-top:80px; }
    .cl-duo{ grid-template-columns:minmax(0,1fr); }
    .cl-badges{ margin-left:0; }
  }

  /* guess mode: the twist stays in the HTML, it's just tucked away until you tap */
  .cl-list.guess .cl-card:not(.open) :is(.cl-b,.cl-why,.cl-tip){ display:none; }
  .cl-list.guess .cl-card:not(.open) .cl-duo{ grid-template-columns:minmax(0,1fr); }
  .cl-list.guess .cl-card:not(.open) .cl-reveal{ display:inline-block; }
  .cl-prompt{ display:none; margin-top:8px; font-weight:600; color:var(--accent-2); }
  .cl-list.guess .cl-card:not(.open) .cl-prompt{ display:block; }
  .cl-lab{ margin:14px 0 0; font-size:var(--fs-small); }
  .cl-lab a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent); }
  .cl-list.guess .cl-card:not(.open) .cl-lab{ display:none; }

  .cl-empty{ max-width:900px; margin:26px auto 0; padding:28px; text-align:center; border:1px dashed var(--edge-hi); border-radius:var(--r-lg); color:var(--chrome-2); }
  .cl-empty b{ color:var(--chrome); display:block; font-size:1.125rem; margin-bottom:6px; }
  .cl-flash{ animation:clFlash 1.6s ease-out; }
  @keyframes clFlash{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); } 100%{ box-shadow:0 0 0 18px transparent; } }
  @media (prefers-reduced-motion:reduce){ .cl-flash{ animation:none; outline:2px solid var(--accent); } }
  .cl-foot{ max-width:900px; margin:34px auto 0; text-align:center; color:var(--chrome-2); }
  .cl-foot p{ margin:0 0 14px; }