/* ---------- "Soft & Friendly" pass, part 2 (Sep 2026) ----------
     The first pass (see the block in the main stylesheet, right before
     the closing tag around line 3965) covered Practice Rooms, Events and
     Flashcards. It missed the "All sections" menu sheet and the Teacher
     Portal, both defined in style tags that load AFTER that block, so
     their own flat var(--paper) tile styling was winning the cascade.
     This is placed last on purpose — after every other style tag in the
     document head — so these overrides always win without needing
     !important.
     IMPORTANT for future edits to this block's comments: never type the
     literal 4-character sequence that closes an HTML style tag inside
     this comment, even describing it in prose — the HTML parser looks
     for that exact text anywhere in a raw <style> block, comment or not,
     and closes the tag right there. That bug shipped once already: it
     truncated this whole block and dumped the rest of this comment's
     text onto the visible page. Spell it out in words instead, like the
     two sentences just above do. */

  /* ---- "All sections" menu (#moreSheet) ----
     First attempt colored the whole tile with the same 4 pastels used
     elsewhere — Erick flagged it as harder to read/scan, fair for a
     dense utility list of 20+ same-size nav tiles (unlike Practice
     Rooms' 4-wide grid with room to breathe). Revised approach: tiles
     stay plain white/cream so the label text stays high-contrast, and
     only the icon sits in a small tinted circle — same friendly color,
     much lower visual noise. */
  /* v37 — still hard to read on a desktop browser: the sheet stretched the
     full 2000px window, so 4 tiles per row became huge empty boxes with a
     tiny centered icon + 11px label. Now: the sheet is capped and centered
     like a real menu, tiles are horizontal rows (icon left, 14px label
     right), and color is coded by SECTION — Learn green, Practice orange,
     Connect purple, Your stuff pink — so each color means something. */
  #moreSheet{ justify-content:center; }
  #moreSheetPanel{ max-width:760px; box-shadow:0 -20px 50px rgba(29,145,120,0.14), 0 -2px 10px rgba(6,40,34,0.06); background:var(--paper); }
  @media (min-width:800px){
    #moreSheet{ align-items:center; }
    #moreSheetPanel{ border-radius:26px; max-height:86vh; padding:22px 22px 18px; }
  }
  /* Computer screens: the All sections menu was small next to the page. */
  @media (min-width:1000px) and (hover:hover) and (pointer:fine){
    #moreSheetPanel{ zoom:1.17; max-height:calc(86vh / 1.17); }
  }
  .more-group{ --g-bg:var(--tile-1-bg); --g-ink:var(--tile-1-ink); --g-solid:#1d9178;
    border:0; background:var(--card); border-radius:18px; box-shadow:0 4px 14px rgba(6,40,34,.06); }
  .more-group[data-label="Practice"]{ --g-bg:var(--tile-2-bg); --g-ink:var(--tile-2-ink); --g-solid:#e8894a; }
  .more-group[data-label="Connect"]{ --g-bg:var(--tile-3-bg); --g-ink:var(--tile-3-ink); --g-solid:#6d5fe0; }
  .more-group[data-label="Your stuff"]{ --g-bg:var(--tile-4-bg); --g-ink:var(--tile-4-ink); --g-solid:#d9549b; }
  .more-group-header{ font-size:15px; padding:14px 16px; gap:10px; }
  .more-group-header::before{ color:var(--g-ink); }
  .more-group-header::after{ content:''; order:-1; width:10px; height:10px; border-radius:50%; background:var(--g-solid); flex-shrink:0; }
  .more-group-count{ background:var(--g-bg); color:var(--g-ink); font-size:11.5px; font-weight:800; padding:2px 9px; }
  .more-group-tiles{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; padding:0 12px 14px; }
  @media (min-width:760px){ .more-group-tiles{ grid-template-columns:repeat(3, 1fr); } }
  .more-item{
    flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; gap:11px;
    padding:10px 12px; min-height:58px; border:0; border-radius:14px;
    background:var(--paper); box-shadow:none; font-size:14px; font-weight:800; color:var(--ink);
    transition:background .12s ease, transform .12s ease;
  }
  .more-item:hover{ background:var(--g-bg); color:var(--g-ink); }
  .more-item:active{ transform:scale(.98); }
  .more-item .more-icon{
    width:38px; height:38px; border-radius:11px; flex-shrink:0; background:var(--g-bg);
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .more-item .more-text{ display:flex; flex-direction:column; min-width:0; }
  .more-item .more-label{ line-height:1.2; }
  .more-item .more-desc{ font-size:11.5px; text-align:left; margin-top:2px; font-weight:600; }
  .more-item.featured, .more-item.pinned{ border:0; box-shadow:inset 0 0 0 2px var(--g-solid); }
  .more-item.active{ color:var(--g-ink); background:var(--g-bg); }
  .more-item .more-pin{ top:6px; right:8px; font-size:11px; }
  .more-grid.editing .more-item{ border:0; box-shadow:inset 0 0 0 1.5px var(--line); }
  .more-grid.editing .more-item.pinned{ box-shadow:inset 0 0 0 2px var(--g-solid); background:var(--g-bg); }
  .more-hint{ font-size:12px; }

  /* ---- Teacher Portal (#tab-teach) ---- */
  .tp-hero{ box-shadow:0 20px 50px rgba(29,145,120,0.14), 0 2px 10px rgba(6,40,34,0.06); border-color:transparent; }
  .tp-stats button{ box-shadow:0 4px 10px rgba(6,40,34,.06); border-color:transparent; }
  .tp-sec{ box-shadow:0 6px 18px rgba(6,40,34,.06); border-color:transparent; }
  .tp-student{ box-shadow:0 4px 10px rgba(6,40,34,.06); border-color:transparent; }
  /* "Your teaching toolbox" — 15 tiles, same flat cream as the old
     Practice Rooms grid before its own pass. Same 4-pastel cycle. */
  .tp-tools .tp-tool{ box-shadow:0 4px 10px rgba(6,40,34,.07); border-color:transparent; }
  .tp-tools .tp-tool:nth-of-type(4n+1){ background:var(--tile-1-bg); color:var(--tile-1-ink); }
  .tp-tools .tp-tool:nth-of-type(4n+2){ background:var(--tile-2-bg); color:var(--tile-2-ink); }
  .tp-tools .tp-tool:nth-of-type(4n+3){ background:var(--tile-3-bg); color:var(--tile-3-ink); }
  .tp-tools .tp-tool:nth-of-type(4n+4){ background:var(--tile-4-bg); color:var(--tile-4-ink); }
  .tp-tools .tp-tool .tp-tool-ic{ filter:none; }
  .tp-tools .tp-tool > span:last-child{ color:inherit; opacity:.75; }
  .tp-step{ box-shadow:0 4px 10px rgba(6,40,34,.06); border-color:transparent; }

  /* ---- Teacher profile modal, v36 (cleaner, italki-style info) ---- */
  #teacherModalOverlay .teacher-modal{ max-width:440px; padding:20px 16px 22px; background:var(--paper); }
  .tm2-head{ display:flex; gap:14px; align-items:center; padding-right:34px; margin-bottom:14px; }
  .tm2-avatar{ width:68px; height:68px; border-radius:50%; flex-shrink:0; overflow:hidden; background:var(--tile-1-bg); color:var(--tile-1-ink); display:flex; align-items:center; justify-content:center; font:800 28px var(--font-display); box-shadow:0 0 0 3px var(--card), 0 6px 16px rgba(6,40,34,.12); }
  .tm2-avatar img{ width:100%; height:100%; object-fit:cover; }
  .tm2-id{ min-width:0; }
  .tm2-id .teacher-modal-name{ font:800 21px/1.2 var(--font-display, var(--font)); margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .tm2-flag{ font-size:16px; }
  .tm2-id .teacher-region{ font-size:13px; color:var(--muted); margin-top:3px; text-transform:none; letter-spacing:0; font-weight:600; }
  .tm2-id .tc-verified{ font-size:11px; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--cover); color:#fff; margin:0; }
  .tm2-head{ padding-right:0; margin-top:34px; }
  .tm2-id .teacher-modal-name{ font-size:20px; }
  .tm2-langs{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
  .tm2-lang{ font:600 11.5px var(--font); color:var(--muted); background:var(--card); border-radius:999px; padding:3px 9px; box-shadow:0 2px 6px rgba(6,40,34,.06); }
  .tm2-lang b{ color:var(--cover-deep); font-weight:800; margin-left:3px; }
  .tm2-stats{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--card); border-radius:18px; box-shadow:0 6px 18px rgba(6,40,34,.07); padding:12px 4px; margin-bottom:12px; }
  .tm2-stats > div{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px; min-width:0; }
  .tm2-stats > div + div{ border-left:1px solid var(--line); }
  .tm2-stats b{ font:800 16px/1.15 var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .tm2-stats span{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.2; }
  .tm2-badges{ display:flex; gap:8px; overflow-x:auto; margin:0 -16px 12px; padding:2px 16px 4px; scrollbar-width:none; }
  .tm2-badges::-webkit-scrollbar{ display:none; }
  .tm2-badge{ flex-shrink:0; display:flex; align-items:center; gap:8px; background:var(--card); border-radius:14px; padding:8px 12px 8px 8px; box-shadow:0 3px 10px rgba(6,40,34,.06); }
  .tm2-bi{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--primary-tint); }
  .tm2-badge:nth-child(4n+2) .tm2-bi{ background:var(--tile-2-bg); }
  .tm2-badge:nth-child(4n+3) .tm2-bi{ background:var(--tile-3-bg); }
  .tm2-badge:nth-child(4n+4) .tm2-bi{ background:var(--tile-4-bg); }
  .tm2-badge b{ display:block; font:700 12.5px var(--font); color:var(--ink); white-space:nowrap; }
  .tm2-badge small{ display:block; font-size:11px; color:var(--muted); white-space:nowrap; }
  .tm2-video{ border-radius:18px; overflow:hidden; margin-bottom:12px; box-shadow:0 6px 18px rgba(6,40,34,.08); background:#000; }
  .tm2-video video{ display:block; width:100%; max-height:240px; }
  .tm2-card{ background:var(--card); border-radius:18px; padding:14px; margin-bottom:12px; box-shadow:0 6px 18px rgba(6,40,34,.06); }
  .tm2-h{ font:800 14.5px var(--font); color:var(--ink); margin-bottom:8px; }
  .tm2-next{ font-weight:700; color:var(--cover-deep); font-size:12.5px; }
  .tm2-bio{ font-size:14px; line-height:1.55; margin:0; white-space:pre-line; }
  .tm2-bio.clamped{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .tm2-more{ background:none; border:0; padding:4px 0 0; font:700 13px var(--font); color:var(--cover-deep); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .tm2-card .teacher-tags{ margin-top:10px; }
  .tm2-card .tm-lesson-info{ margin:0; }
  .tm2-card .tm-lesson-info > div{ border:0; background:var(--paper); }
  .tm2-grid{ display:grid; grid-template-columns:42px repeat(7,1fr); gap:3px; }
  .tm2-gh{ text-align:center; font-size:10.5px; color:var(--muted); line-height:1.2; padding-bottom:3px; }
  .tm2-gh b{ display:block; font-size:13px; color:var(--ink); }
  .tm2-gh.today b{ color:var(--cover-deep); }
  .tm2-gl{ font-size:10px; color:var(--muted); display:flex; align-items:center; }
  .tm2-gc{ height:22px; border-radius:6px; border:0; padding:0; background:var(--paper); }
  .tm2-gc.on{ background:#5cc9a7; cursor:pointer; }
  .tm2-gc.on:hover{ background:var(--cover); }
  .tm2-tz{ font-size:11px; color:var(--muted); margin-top:8px; text-align:center; }
  .tm2-rsum{ display:flex; gap:16px; align-items:center; background:var(--card); border-radius:16px; padding:12px 14px; margin-bottom:10px; box-shadow:0 4px 12px rgba(6,40,34,.06); }
  .tm2-rbig{ display:flex; flex-direction:column; align-items:center; min-width:74px; }
  .tm2-rbig b{ font:800 30px/1 var(--font-display, var(--font)); color:var(--ink); }
  .tm2-rbig small{ font-size:11px; color:var(--muted); margin-top:2px; }
  .tm2-rdist{ flex:1; display:flex; flex-direction:column; gap:3px; }
  .tm2-rdist > div{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
  .tm2-rdist i{ flex:1; height:6px; border-radius:99px; background:var(--paper); overflow:hidden; }
  .tm2-rdist em{ display:block; height:100%; background:var(--gold); border-radius:99px; }
  .tm2-rev{ background:var(--card); border-radius:14px; padding:12px; margin-bottom:8px; border:0; box-shadow:0 3px 10px rgba(6,40,34,.05); }
  .tm2-rev-top{ display:flex; align-items:center; gap:10px; }
  .tm2-rev-top > div{ flex:1; min-width:0; }
  .tm2-rev-top b{ display:block; font-size:13px; }
  .tm2-rev-top small{ font-size:11px; color:var(--muted); white-space:nowrap; }
  .tm2-rev-av{ width:32px; height:32px; border-radius:50%; background:var(--tile-3-bg); color:var(--tile-3-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; }
  .tm2-rev .rev-comment{ margin-top:8px; font-size:13.5px; line-height:1.5; }