/* ---------- Sidebar: smaller type on mobile ---------- */
@media(max-width:950px){
  #sidebar .projItem{font-size:13px}
  #sidebar h3{font-size:11.5px}
}

/* ---------- Mobile right-hand flyout ----------
   When a sub-menu (Export, Help…) is expanded inside #topbarOverflow, the swipe
   has to scroll the flyout no matter which part of it the finger lands on.
   Two things used to prevent that: the sub-menu was capped at 900px (so it
   became its own overflow container) and #exportMenu inherits
   overscroll-behavior:contain, which blocks scroll chaining to the parent. */
@media(max-width:700px){
  #topbarOverflow{overscroll-behavior:contain}
  #topbarOverflow #helpMenu,
  #topbarOverflow #exportMenu,
  #topbarOverflow #impMenuBox,
  #topbarOverflow #cprMenuBox,
  #topbarOverflow #pdfOptionsPanel{
    overscroll-behavior:auto;
    -webkit-overflow-scrolling:auto
  }
  #topbarOverflow #helpMenu:not(.hidden),
  #topbarOverflow #exportMenu:not(.hidden){max-height:4000px}
}

/* ---------- Sidebar: CLOUD SYNC heading flush with THEME / PAGE COLORS ----------
   #sidebar h3 carries margin:14px 12px 6px; inside #themeBox that margin is reset
   to 0, but #cloudSyncBox never got the same reset, so its heading sat 12px in. */
#cloudSyncBox h3{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* ---------- Download PDF: same hover as "+ New project" ---------- */
#exportMenu button[data-exp="pdf"]:hover{background:var(--brass)!important;color:#fff!important}

/* ---------- Spell check modal: auto-suggest / auto-correct ---------- */
#spellModal .ssScHr{border:none;border-top:1px solid var(--line);margin:16px 0 14px}
#spellModal .ssScNote{margin:8px 0 0;font-size:11px;color:var(--ink-soft);line-height:1.5}
#spellModal .ssScChk{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:var(--ink-soft);cursor:pointer}
#spellModal .ssScChk input{margin:0}
#spellModal .toggleSwitch[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Inline next-word suggestion ---------- */
#ssAsBox{position:fixed;z-index:63;background:var(--panel);border:1px solid var(--brass-dim);
  border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.5);padding:4px 9px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--brass);
  letter-spacing:.02em;white-space:nowrap;cursor:pointer;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
#ssAsBox::before{content:attr(data-word)}
#ssAsBox:hover{border-color:var(--brass)}
#ssAsBox .ssAsHint{color:var(--ink-soft);font-size:10px;margin-left:8px;letter-spacing:.04em}

#ssSpellInfoBox .ssInfoRow{margin-bottom:14px}
#ssSpellInfoBox .ssInfoRow:last-of-type{margin-bottom:0}
#ssSpellInfoBox .ssInfoRow b{display:block;font-size:12.5px;color:var(--brass);font-weight:600;letter-spacing:.02em}
#ssSpellInfoBox .ssScNote{margin:4px 0 0;font-size:11.5px;color:var(--ink-soft);line-height:1.5}
#spellModal .ssScTitle{font-size:11px;color:var(--ink-soft);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 10px}

/* ---------- Words changed by Auto-correct ---------- */
::highlight(ssFixedHl){background:#c8f2c8;color:#1c3a1c}
/* ---------- Words Auto-correct would change ----------
   A plain light-red fill reads almost exactly like a Note line (red
   italic on pale pink), so the flag is a wavy red underline plus a
   faint tint: unmistakably "spell check", and still legible inside a
   Note. */
::highlight(ssBadHl){background:#f7d6d2;color:#5a1410;
  text-decoration:underline wavy #c0392b;text-decoration-skip-ink:none}

/* ---------- Scrollbars in the theme accent colour ---------- */
:root{scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brass);border:2px solid transparent;background-clip:padding-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--brass-dim);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}