/* ==========================================================================
     DIGI — shared front-page styles for the three sections.
     Every page sets data-section on <html>; the section decides the accent.
     Neutrals, type and layout are shared, so the three read as one family.
     ========================================================================== */
  :root{
    --canvas:#FCFCFB; --paper:#FFFFFF; --ink:#15171C; --muted:#5F636B;
    --faint:#9AA0A6; --hair:#E6E6E2;
    /* the one borrowed token: Digi Puzzles' marigold active cell. On News it
       appears nowhere else, so a puzzle tile is the only thing that glows. */
    --play:#FFD54A;
    --display:'Archivo','Helvetica Neue',Arial,sans-serif;
    --body:'Inter','Helvetica Neue',Arial,sans-serif;
    /* section accents (text-safe on white: all >= 4.5:1) */
    --news:#1C46C2;    --news-soft:#ECF0FC;
    --puzzles:#0E7A4B; --puzzles-soft:#E4F4EB;
    --games:#6A2BC9;   --games-soft:#F1EAFC;
    --lab:#C2185B;     --lab-soft:#FCE7EF;
    --accent:var(--news); --accent-soft:var(--news-soft);
    --mono-bg:var(--accent); --mono-ink:#fff;
  }
  html[data-section="puzzles"]{--accent:var(--puzzles);--accent-soft:var(--puzzles-soft)}
  html[data-section="games"]{--accent:var(--games);--accent-soft:var(--games-soft)}
  html[data-section="lab"]{--accent:var(--lab);--accent-soft:var(--lab-soft)}

  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--canvas);color:var(--ink);font-family:var(--body);
    line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px}
  .wrap{max-width:720px;margin:0 auto;padding:0 16px 72px}
  @media(min-width:560px){.wrap{padding:0 20px 72px}}
  /* Full-screen app on phones with a camera cutout: the page is drawn under
     it (viewport-fit=cover on each front page) and content keeps clear. */
  html{background:var(--canvas)}
  .wrap{padding-top:env(safe-area-inset-top,0px);
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  @media(min-width:560px){.wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

  /* ---------- masthead ---------- */
  .mast{display:flex;align-items:center;gap:11px;padding:14px 0 10px;border-bottom:2px solid var(--ink)}
  .mono{width:30px;height:30px;background:var(--mono-bg);color:var(--mono-ink);font-family:var(--display);
    font-weight:800;font-size:17px;display:grid;place-content:center;border-radius:4px;letter-spacing:-1px}
  .word{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em}
  .word b{color:var(--accent)}
  .mast .kick{margin-left:auto;font-weight:600;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faint);text-align:right;line-height:1.5}
  .mast .kick .k2{display:block}
  /* phones: one kicker line, so the masthead is one row tall */
  @media(max-width:479px){.mast .kick .k2{display:none}}

  /* ---------- controls ---------- */
  .controls{position:sticky;top:0;z-index:20;background:var(--canvas);
    border-bottom:1px solid var(--hair);padding:10px 0 8px;margin-bottom:4px}
  /* section switcher: one pill per desk, each carrying its own colour dot */
  .bar{display:flex;align-items:center;gap:6px}
  .sections{display:flex;gap:5px;min-width:0}
  .sec{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;
    font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;
    border:1px solid var(--hair);background:var(--paper);color:var(--muted);border-radius:999px}
  .sec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot)}
  .sec.news{--dot:var(--news)} .sec.puzzles{--dot:var(--puzzles)} .sec.games{--dot:var(--games)} .sec.lab{--dot:var(--lab)}
  /* four pills (News, Puzzles, Games, Lab) on one row down to 320px */
  @media(max-width:399px){.sections{gap:4px}.sec{padding:6px 9px;gap:5px;letter-spacing:.05em}}
  @media(max-width:345px){.sec{font-size:10.5px;padding:6px 7px;gap:4px}}
  .sec[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .sec:not([aria-current]):hover{border-color:var(--ink);color:var(--ink)}
  /* search: an icon at the end of the section row; tapping it opens the field
     underneath. The field stays open while it holds a query. */
  .sbtn{margin-left:auto;flex:none;width:34px;height:34px;display:grid;place-content:center;
    border:1px solid var(--hair);background:var(--paper);color:var(--muted);border-radius:999px;cursor:pointer}
  .sbtn[hidden]{display:none}   /* search parked for now: remove `hidden` on the button to bring it back */
  .sbtn svg{width:16px;height:16px;display:block}
  .sbtn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .searchrow{display:flex;gap:8px;align-items:center;margin-top:8px}
  .searchrow[hidden]{display:none}
  .search{flex:1;font-family:var(--body);font-size:15px;padding:9px 12px;border:1px solid var(--hair);
    border-radius:6px;background:var(--paper);color:var(--ink)}
  .search::placeholder{color:var(--faint)}
  .chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips[hidden]{display:none}
  .chip{white-space:nowrap;font-weight:600;font-size:12.5px;padding:6px 12px;border:1px solid var(--hair);
    background:var(--paper);color:var(--muted);border-radius:999px;cursor:pointer}
  .chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  .count{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    color:var(--faint);padding:8px 0 0}

  /* ---------- cards ---------- */
  .feed{list-style:none}
  .card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;
    padding:18px 0;border-bottom:1px solid var(--hair)}
  .card.nothumb{grid-template-columns:1fr}
  .card:hover .hl{color:var(--accent)}
  /* Tiles are square and top-aligned: a three-line headline must not stretch
     the tile next to it, or the column stops reading as a column. */
  .thumb{width:96px;aspect-ratio:1;align-self:start;background:var(--accent-soft);
    border:1px solid var(--hair);border-radius:6px;object-fit:cover;display:block}
  .glyph{display:grid;place-content:center;font-family:var(--display);font-weight:800;
    font-size:11px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}

  /* stat tile: the piece's first hero stat — measured figures only, per §3.
     The figure is fitted to the box by its own length (cqw off the tile's own
     width, stepped by data-len), the unit is demoted, and the label carries the
     noun — so the tile states a fact rather than floating a number. */
  .stat{container-type:inline-size;position:relative;display:grid;place-content:center;
    text-align:center;padding:4px;background:var(--paper);border-color:var(--ink)}
  .stat .fig{display:flex;align-items:baseline;justify-content:center;
    font-family:var(--display);font-weight:800;color:var(--accent);
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
  .stat[data-len="1"] .fig{font-size:50cqw}
  .stat[data-len="2"] .fig{font-size:42cqw}
  .stat[data-len="3"] .fig{font-size:32cqw}
  .stat[data-len="4"] .fig{font-size:26cqw}
  .stat[data-len="5"] .fig{font-size:21cqw}
  .stat[data-len="6"] .fig{font-size:17cqw}
  .stat .unit{font-size:.42em;font-weight:700;color:var(--faint);
    letter-spacing:0;margin-left:.05em}
  .stat.haslabel .fig{margin-top:-8cqw}
  /* --muted, not --faint: 6.03:1 on the tile against --faint's 2.64:1, which
     failed WCAG AA outright. Sized off the tile but floored in px — at 7.5cqw
     this set at 7.2px on a phone, which no contrast ratio can rescue. */
  .stat .lab{position:absolute;left:0;right:0;bottom:7cqw;padding:0 5px;
    font-family:var(--display);font-weight:600;font-size:min(10.5cqw,11px);
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Container queries are Safari 16+ / Chrome 105+. Older browsers get the
     same tile at fixed sizes off the 96px box rather than a 1em numeral. */
  @supports not (container-type:inline-size){
    .stat[data-len="1"] .fig{font-size:48px}
    .stat[data-len="2"] .fig{font-size:40px}
    .stat[data-len="3"] .fig{font-size:31px}
    .stat[data-len="4"] .fig{font-size:25px}
    .stat[data-len="5"] .fig{font-size:20px}
    .stat[data-len="6"] .fig{font-size:16px}
    .stat.haslabel .fig{margin-top:-8px}
    .stat .lab{font-size:10px;bottom:7px}
  }

  /* puzzle tile: a preview of the piece's own grid, built from feed.json's
     mask. Blocks read as a Mini, pre-locked cells as a Doku, a bare 4x4 of
     chips as a Link — so the types
     are told apart from the feed without reading a word. */
  .puzzle{background:var(--ink);border-color:var(--ink);padding:9px}
  .pgrid{width:100%;height:100%;display:grid;gap:1.5px;background:var(--ink);
    grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
    outline:1.5px solid var(--ink)}
  .pgrid.six{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}
  /* Link: sixteen loose chips, no blocks, no locks, no start square */
  .pgrid.four{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:2.5px}
  .pgrid i{background:var(--paper);display:block}
  .pgrid i.b{background:var(--ink)}
  .pgrid i.l{background:var(--news-soft)}
  .pgrid i.a{background:var(--play)}
  .hl{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.22;letter-spacing:-.01em}
  .sf{font-size:14px;color:var(--muted);margin-top:7px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .meta{margin-top:9px;font-size:12px;font-weight:600;color:var(--faint);
    display:flex;flex-wrap:wrap;align-items:center;gap:7px}
  .meta .t{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
  .meta .dot{color:var(--hair)}
  /* Lab mixes all three desks, so each card's topic and fallback tile take
     that desk's colour rather than the page accent. */
  html[data-section="lab"] li[data-kind="report"]{--accent:var(--news);--accent-soft:var(--news-soft)}
  html[data-section="lab"] li[data-kind="puzzle"]{--accent:var(--puzzles);--accent-soft:var(--puzzles-soft)}
  html[data-section="lab"] li[data-kind="game"]{--accent:var(--games);--accent-soft:var(--games-soft)}
  .thumbwrap{position:relative;width:96px;align-self:start}
  .thumbwrap .thumb{display:block}
  .badge{position:absolute;left:5px;right:5px;bottom:5px;text-align:center;background:rgba(20,22,26,.82);color:#fff;
    font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1;padding:4px 2px;border-radius:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kindtag{border:1px solid var(--hair);border-radius:3px;padding:1px 5px;font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  @media(min-width:560px){.hl{font-size:21px}.card{grid-template-columns:120px 1fr;gap:18px}.thumb,.thumbwrap{width:120px}.badge{font-size:11px}}

  /* ---------- states ---------- */
  .note{background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--accent);
    border-radius:4px;padding:12px 14px;font-size:13px;color:var(--muted);margin:16px 0}
  .note b{color:var(--ink)}
  .skel{height:96px;border-bottom:1px solid var(--hair);margin:0;
    background:linear-gradient(90deg,var(--canvas),#F2F2EF,var(--canvas));
    background-size:200% 100%;animation:sh 1.2s linear infinite}
  @keyframes sh{to{background-position:-200% 0}}
  .empty{padding:40px 0;color:var(--muted);font-size:15px;text-align:center}

  /* ---------- footer ---------- */
  .foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--hair);
    font-size:12px;color:var(--faint);line-height:1.6}
  .foot b{color:var(--muted)}
  .foot .privacy{margin-top:8px}
  .foot .privacy a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
  .optout{font:inherit;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px}
  .optout:disabled{cursor:default;text-decoration:none}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}