:root{
    --bg:#000000;
    --card:#16181c;
    --card-hover:#1c1f23;
    --accent:#1d9bf0;
    --accent-hover:#1a8cd8;
    --text:#e7e9ea;
    --muted:#71767b;
    --border:#2f3336;
    --input:#202327;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic","Noto Sans",sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:16px;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    -webkit-font-smoothing:antialiased;
  }
  @media (min-width:640px){
    body{ padding:24px; }
  }
  /* ---------------------------------------------------------------
     Layout shell
       phones  : one column, settings collapse behind a button
       desktop : sticky settings sidebar on the left, timeline centre
  ---------------------------------------------------------------- */
  .shell{
    max-width:600px;
    margin:0 auto;
  }
  .brand-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  h1{
    font-size:1.5rem;
    margin:0 0 2px;
    color:var(--text);
    font-weight:800;
    letter-spacing:0.02em;
  }
  .settings-toggle{
    flex-shrink:0;
    font-size:0.82rem;
    padding:8px 14px;
    min-height:36px;
  }
  .settings-panel{ display:block; }
  .settings-panel.collapsed{ display:none; }

  /* On phones the brand and MENU sit on a fixed bar along the bottom edge,
     where a thumb reaches them without shifting grip. The bar spans the full
     screen width so cards pass underneath rather than beside it, and the menu
     opens upward - hence column-reverse, which flips the painted order of
     brand-row and settings-panel without touching the markup. */
  @media (max-width:999px){
    body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
    .sidebar{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:30;
      display:flex;
      flex-direction:column-reverse;
      background:var(--bg);
      margin:0;
      padding:8px 16px;
      padding-bottom:max(8px, env(safe-area-inset-bottom));
      border-top:1px solid var(--border);
      box-shadow:0 -8px 24px rgba(0,0,0,0.55);
    }
    /* an open menu scrolls on its own rather than growing past the screen */
    .settings-panel{
      max-height:calc(100vh - 116px);
      max-height:calc(100dvh - 116px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:10px;
    }
    /* nothing overlaps the top of the page now, so jump targets need only a
       small breathing gap */
    .sub-head, .card{ scroll-margin-top:16px; }
  }
  @media (min-width:640px) and (max-width:999px){
    .sidebar{ padding:8px 24px; }
  }

  /* Floating stop button - reachable with a thumb while audio loops */
  .stop-fab{
    position:fixed;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:20;
    display:none;
    box-shadow:0 6px 20px rgba(0,0,0,0.5);
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
    padding:10px 18px;
  }
  .stop-fab:hover{ background:var(--card-hover); }
  body.is-playing .stop-fab{ display:block; }
  /* on phones it has to sit above the fixed bottom bar */
  @media (max-width:999px){
    .stop-fab{ bottom:calc(70px + env(safe-area-inset-bottom)); }
  }

  @media (min-width:1000px){
    body{ padding:24px 32px; }
    .shell{
      max-width:1060px;
      display:grid;
      grid-template-columns:300px minmax(0,1fr);
      gap:0 32px;
      align-items:start;
    }
    .topbar{ grid-column:1 / -1; justify-content:flex-end; }
    .sidebar{
      position:sticky;
      top:24px;
      max-height:calc(100vh - 48px);
      overflow-y:auto;
      scrollbar-width:thin;
    }
    /* On desktop the settings are always visible - no toggle needed. */
    .settings-toggle{ display:none; }
    .settings-panel.collapsed{ display:block; }
    .sidebar .controls{
      flex-direction:column;
      align-items:stretch;
    }
    .sidebar .controls label{
      width:100%;
      justify-content:space-between;
    }
    .sidebar .controls select,
    .sidebar .controls input[type="text"]{ width:100%; }
    .sidebar #langControls{ flex-direction:column; align-items:flex-start; }
    .sidebar #langControls label{ justify-content:flex-start; }
    h1{ font-size:1.9rem; }
    .stop-fab{ right:auto; left:32px; bottom:32px; }
  }
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px 14px;
    margin-bottom:12px;
  }
  .controls label{
    font-size:0.85rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
  }
  select, input[type="text"], input[type="password"]{
    padding:9px 12px;
    border-radius:9999px;
    border:1px solid var(--border);
    font-size:16px;
    background:var(--input);
    color:var(--text);
    min-height:40px;
    outline:none;
  }
  select:focus, input[type="text"]:focus, input[type="password"]:focus{
    border-color:var(--accent);
  }
  input::placeholder{ color:var(--muted); }
  input[type="text"]{
    flex:1;
    min-width:160px;
  }
  input[type="checkbox"]{
    accent-color:var(--accent);
    width:16px;
    height:16px;
  }
  /* X-style single-column timeline: never two cards side by side */
  .grid{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
  }
  .card{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    padding:16px 18px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:background .15s ease;
  }
  .card:last-child{ border-bottom:none; }
  .card:hover{
    background:var(--card-hover);
  }
  /* Phrase block: play button floats over it at the phrase's own height */
  .phrase-block{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:6px;
    padding:18px 4px 16px;
    min-height:118px;   /* keeps the tap area consistent across short and long phrases */
  }
  .hanzi{
    font-size:2.15rem;
    font-weight:700;
    letter-spacing:0.01em;
    color:var(--text);
    line-height:1.3;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:balance;   /* spreads long sentences evenly over 2-3 lines */
  }
  .pinyin{
    color:var(--text);
    font-size:1.2rem;
    opacity:0.82;
    line-height:1.45;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:balance;
  }
  /* Longer sentences step down in size so they stay within about three lines */
  .hanzi.len-long{  font-size:1.6rem;  line-height:1.35; }
  .hanzi.len-xlong{ font-size:1.35rem; line-height:1.4; }
  .pinyin.len-long{  font-size:1.02rem; }
  .pinyin.len-xlong{ font-size:0.92rem; }
  .meaning{
    font-size:0.88rem;
    color:var(--text);
  }
  .meaning .label{
    color:var(--muted);
    font-size:0.72rem;
    margin-right:5px;
  }
  .tag-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:4px;
  }
  .cat-tag{
    display:inline-block;
    font-size:0.7rem;
    color:var(--accent);
    background:rgba(29,155,240,0.12);
    border-radius:9999px;
    padding:3px 10px;
    width:fit-content;
  }
  .hd-tag{
    display:inline-block;
    font-size:0.62rem;
    font-weight:800;
    letter-spacing:0.06em;
    color:#0f9d58;
    background:rgba(15,157,88,0.14);
    border-radius:4px;
    padding:2px 6px;
    width:fit-content;
  }
  .lang-tag{
    display:inline-block;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.03em;
    color:var(--muted);
    background:rgba(231,233,234,0.07);
    border:1px solid var(--border);
    border-radius:9999px;
    padding:2px 9px;
    width:fit-content;
  }
  /* English phrases run longer per character, so they start smaller */
  .hanzi.lang-en{
    font-size:1.5rem;
    line-height:1.35;
  }
  .hanzi.lang-en.len-long{  font-size:1.22rem; line-height:1.4; }
  .hanzi.lang-en.len-xlong{ font-size:1.06rem; line-height:1.45; }
  button{
    cursor:pointer;
    border:none;
    border-radius:9999px;
    padding:10px 16px;
    font-size:0.9rem;
    font-weight:600;
    background:var(--accent);
    color:#fff;
    transition:background .15s ease, opacity .15s ease;
    min-height:40px;
    touch-action:manipulation;
  }
  button:hover{ background:var(--accent-hover); }
  button.secondary{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
  }
  button.secondary:hover{ background:rgba(239,243,244,0.1); }
  button:disabled{opacity:0.45; cursor:not-allowed;}

  /* --- Faint triangle play button, overlaid at the phrase's height --- */
  .play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    border-radius:0;
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    min-height:0;
    transition:opacity .2s ease;
  }
  .play-btn:hover{ background:transparent; }
  .play-btn svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    display:block;
    transition:opacity .2s ease;
    pointer-events:none;
  }
  .play-btn .icon-play{ opacity:0.28; }
  .play-btn:hover .icon-play{ opacity:0.55; }
  .play-btn:active .icon-play{ opacity:0.7; }
  .play-btn .play-tri,
  .play-btn .pause-bar{ fill:var(--text); }

  /* While playing, the button is completely invisible - even on hover.
     The area still responds to clicks so the phrase can be stopped. */
  .card.playing .play-btn .icon-play,
  .card.playing .play-btn:hover .icon-play,
  .card.playing .play-btn:active .icon-play{ opacity:0; }

  /* Pause icon: invisible until a click flashes it for a moment */
  .play-btn .icon-pause{ opacity:0; }
  .play-btn.flash-pause .icon-pause{
    animation:pauseFlash .55s ease-out;
  }
  @keyframes pauseFlash{
    0%   { opacity:0;    transform:translate(-50%,-50%) scale(0.9); }
    22%  { opacity:0.75; transform:translate(-50%,-50%) scale(1); }
    60%  { opacity:0.75; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0;    transform:translate(-50%,-50%) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){
    .play-btn.flash-pause .icon-pause{ animation-duration:.01s; }
  }

  .card.playing{
    background:rgba(29,155,240,0.06);
  }
  .empty{
    color:var(--muted);
    padding:30px;
    text-align:center;
    line-height:1.6;
  }
  /* Scrolling this into view loads the next page of cards */
  .sentinel{
    height:1px;
    display:none;
  }

  /* --- favourites / history / feedback --- */
  .card-footer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }
  .fav-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    font-size:1.15rem;
    line-height:1;
    padding:4px 6px;
    min-height:0;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
  }
  .fav-btn:hover{ background:rgba(231,233,234,0.08); color:var(--text); }
  .fav-btn.on{ color:#f5b301; }
  .play-count{
    font-size:0.72rem;
    color:var(--muted);
  }
  .play-count[hidden]{ display:none; }
  .report-link{
    margin-left:auto;
    font-size:0.72rem;
    color:var(--muted);
    text-decoration:none;
  }
  .report-link:hover{ color:var(--accent); text-decoration:underline; }

  /* Share and copy-link, sat next to the favourite star */
  .share-btn, .copy-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    padding:5px 6px;
    min-height:0;
    line-height:0;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
  }
  .share-btn:hover, .copy-btn:hover{
    background:rgba(231,233,234,0.08);
    color:var(--text);
  }
  .copy-btn.copied{ color:var(--accent); }
  .copy-btn.copied::after{
    content:"✓";
    font-size:0.7rem;
    margin-left:3px;
    vertical-align:middle;
  }

  /* ---------- subcategory pages ---------- */
  /* Table of contents on a category page. Every entry is a real page, so
     these links are also how a crawler reaches the 257 subcategories. */
  /* The subcategory index reads as a run of links rather than a wall of
     cards: ten boxes cost four rows of screen and still gave no hint that
     they were tappable, where blue text says "link" in any language. The
     vertical padding is there to keep each one a thumb-sized target. */
  .topic-index{ margin:0 0 18px; }
  .topic-index ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
  }
  .topic-index li{ display:flex; align-items:baseline; }
  .topic-index li + li::before{
    content:"·";
    color:var(--border);
    padding:0 9px;
  }
  .topic-index a{
    display:inline-flex;
    align-items:baseline;
    gap:5px;
    padding:7px 0;
    color:var(--accent);
    text-decoration:none;
    font-size:0.95rem;
    line-height:1.45;
  }
  .topic-index a:hover{ text-decoration:underline; }
  .topic-n{
    font-size:0.72rem;
    color:var(--muted);
  }

  .crumb{
    font-size:0.78rem;
    color:var(--muted);
    margin-bottom:8px;
  }
  .crumb a{ color:var(--muted); text-decoration:none; }
  .crumb a:hover{ color:var(--accent); text-decoration:underline; }

  .topic-intro{
    margin:0 0 16px;
    color:var(--muted);
    font-size:0.86rem;
    line-height:1.7;
  }

  /* Previous / up / next, at the foot of a subcategory page. This is the
     link that turns one page view into a session. */
  .seq{
    display:flex;
    align-items:stretch;
    gap:8px;
    margin:24px 0 8px;
  }
  .seq-link{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    color:var(--text);
    text-decoration:none;
    font-size:0.86rem;
    font-weight:600;
    transition:background .15s ease, border-color .15s ease;
  }
  .seq-link:hover{ background:var(--card-hover); border-color:var(--accent); }
  .seq-link.next{ justify-content:flex-end; text-align:right; }
  .seq-link.up{
    flex:0 0 auto;
    color:var(--muted);
    font-weight:500;
  }
  .seq-dir{ color:var(--muted); font-size:1rem; }
  @media (max-width:480px){
    .seq{ flex-wrap:wrap; }
    .seq-link.up{ order:3; flex:1 0 100%; justify-content:center; }
  }

  /* "Continue where you left off" bar */
  .resume-bar{
    width:100%;
    text-align:left;
    background:rgba(29,155,240,0.10);
    border:1px solid rgba(29,155,240,0.35);
    color:var(--text);
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:12px;
    font-size:0.88rem;
    font-weight:600;
  }
  .resume-bar:hover{ background:rgba(29,155,240,0.18); }
  .resume-bar[hidden]{ display:none; }

  /* brief highlight after jumping to a heading */
  .sub-head.just-resumed{
    animation:resumeGlow 1.2s ease-out;
  }
  /* brief highlight after jumping back to a phrase */
  .card.just-resumed{
    animation:resumeGlow 1.8s ease-out;
  }
  @keyframes resumeGlow{
    0%   { background:rgba(29,155,240,0.28); }
    100% { background:transparent; }
  }
  @media (prefers-reduced-motion: reduce){
    .card.just-resumed{ animation:none; background:rgba(29,155,240,0.12); }
  }
  .voice-tip{
    color:var(--muted);
    font-size:0.75rem;
    line-height:1.55;
    margin:-4px 0 12px;
    padding:0 4px;
  }
  .voice-warning{
    background:rgba(255,212,0,0.08);
    border:1px solid rgba(255,212,0,0.3);
    color:#f0c987;
    padding:10px 14px;
    border-radius:12px;
    font-size:0.85rem;
    margin-bottom:12px;
    display:none;
  }
  @media (max-width:480px){
    .controls{ padding:10px 12px; }
    .controls label{ width:100%; }
    select, input[type="text"], input[type="password"]{ width:100%; }
  }

  /* --- Ad placeholder styling (mockup only, no real ads served) --- */
  .ad-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(231,233,234,0.03);
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    height:90px;
    margin-bottom:12px;
  }
  /* In-feed ad sits as its own row in the timeline */
  .ad-infeed{
    margin:0;
    border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:rgba(231,233,234,0.02);
  }
  /* Ad slot directly beneath the play button */
  .ad-under-play{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(231,233,234,0.03);
    border:1px dashed var(--border);
    border-radius:10px;
    padding:9px 12px;
    margin-top:2px;
    font-size:0.75rem;
    color:var(--muted);
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
  }
  .ad-under-play:hover{
    background:rgba(231,233,234,0.06);
    border-color:#3d4145;
  }
  .ad-under-play .ad-label{
    font-size:0.6rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    background:rgba(231,233,234,0.08);
    color:var(--muted);
    border-radius:4px;
    padding:2px 5px;
    flex-shrink:0;
  }
  .ad-under-play .ad-chip-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

/* ---------------- menu screens ---------------- */
.menu{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:560px){
  .menu{ grid-template-columns:1fr 1fr; }
}
.menu-tile{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;
  text-decoration:none;
  color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.menu-tile:hover{ background:var(--card-hover); border-color:#3d4145; }
.menu-title{ font-size:1.15rem; font-weight:700; }
.lang-tile .menu-title{ font-size:1.6rem; }
.menu-sub{ font-size:0.8rem; color:var(--muted); }

.lead{
  color:var(--muted);
  font-size:0.9rem;
  margin:0 0 14px;
}

/* breadcrumb */
.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:10px;
}
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs .sep{ opacity:0.5; }
.crumbs strong{ color:var(--text); font-weight:600; }

/* the brand is a link on every page */
.brand-link{ text-decoration:none; color:inherit; }

/* ---------------- sidebar navigation ---------------- */
/* Styled as rounded rows in the same dark card language as the phrase list,
   rather than a bare list of blue links. */
.nav{ margin-bottom:14px; }
.nav-lang{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  margin-bottom:10px;
}
.nav-lang-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  padding:2px 10px 8px;
}
.nav-lang-name::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li{ margin:2px 0; }
.nav-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.nav-list a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0;
  transition:background .15s ease, transform .15s ease;
}
.nav-list a:hover{
  background:rgba(231,233,234,0.06);
}
.nav-list a:hover::before{ background:var(--accent); }
.nav-list a.current{
  background:rgba(29,155,240,0.14);
  color:var(--text);
  font-weight:700;
}
.nav-list a.current::before{
  background:var(--accent);
  transform:scale(1.3);
}
.nav-count{
  margin-left:auto;
  font-size:0.72rem;
  color:var(--muted);
  background:rgba(231,233,234,0.06);
  border-radius:9999px;
  padding:2px 8px;
  flex-shrink:0;
}
.nav-list a.current + .nav-count{
  color:var(--accent);
  background:rgba(29,155,240,0.14);
}

/* Folding groups: 日常会話3000 > 初級1000 > あいさつ100.
   Each level is a <details>, so the tree folds without any script. */
.nav-group > details > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .15s ease, color .15s ease;
}
.nav-group > details > summary::-webkit-details-marker{ display:none; }
.nav-group > details > summary::before{
  content:"";
  width:0;
  height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  flex-shrink:0;
  transition:transform .15s ease;
}
.nav-group > details[open] > summary::before{ transform:rotate(90deg); }
.nav-group > details > summary:hover{
  background:rgba(231,233,234,0.06);
  color:var(--text);
}
/* indent each level, with a hairline so the nesting reads at a glance */
.nav-nested{
  margin:2px 0 6px 18px;
  padding-left:10px;
  border-left:1px solid var(--line, rgba(231,233,234,0.12));
}
.nav-nested a{ font-size:0.92rem; }

/* page + home headings */
.page-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.page-title{
  font-size:1.35rem;
  margin:0;
  font-weight:800;
  letter-spacing:-0.01em;
}
.page-count{
  font-size:0.8rem;
  color:var(--muted);
}
.home-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.home-title{
  font-size:1.15rem;
  margin:0;
  font-weight:800;
}
#shuffleBtn{ font-size:0.82rem; padding:8px 14px; min-height:36px; }

.static-list{ color:var(--muted); line-height:1.7; }

/* ---------------- top language bar ---------------- */
.topbar{
  display:flex;
  justify-content:flex-start;
  margin-bottom:12px;
}
.flag-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:9999px;
  padding:5px 7px;
}
.flag-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:1px solid transparent;
  border-radius:9999px;
  color:var(--muted);
  padding:5px 10px;
  min-height:0;
  font-size:0.78rem;
  font-weight:600;
  line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.flag-btn:hover{ background:rgba(231,233,234,0.08); color:var(--text); }
.flag-btn.on{
  background:rgba(29,155,240,0.15);
  border-color:rgba(29,155,240,0.45);
  color:var(--text);
}
.flag-btn .flag{
  font-size:1.05rem;
  line-height:1;
  /* fall back to a colour emoji font where one exists */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
@media (max-width:480px){
  .flag-btn .flag-label{ display:none; }   /* flags only, to fit one row */
  .flag-btn{ padding:6px 9px; }
  .flag-btn .flag{ font-size:1.25rem; }
}

/* the nav sits inside the collapsible menu on phones */
.settings-panel .nav{ margin-bottom:12px; }

/* ---------------- subcategories ---------------- */
/* Heading that separates one subcategory from the next inside a page */
.sub-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:14px 18px 10px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(231,233,234,0.03);
  border-bottom:1px solid var(--border);
}
.sub-head::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
  order:1;
}
.sub-count{
  order:2;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  background:rgba(231,233,234,0.06);
  border-radius:9999px;
  padding:2px 8px;
}
.grid > .sub-head:first-child{ border-top:none; }

/* Jump links for those subcategories, nested under the current section */
.nav-sub{
  list-style:none;
  margin:2px 0 6px;
  padding:0 0 0 16px;
  border-left:1px solid var(--border);
}
.nav-sub li{ margin:0; }
.nav-sub a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:400;
}
.nav-sub a::before{ content:none; }
.nav-sub a:hover{ background:rgba(231,233,234,0.06); color:var(--text); }
.nav-sub a.dim{ opacity:0.4; }