/* ============================== SURVEY SIDEBAR ============================== */
  /* Drawing Set §4 — the navy shell. Layout, widths and collapse are unchanged; only the
     paint moved: navy ground, no right border, white lettering, a 3px blueline marker. */
  #surveySidebar{display:none; position:fixed; left:0; top:0; bottom:0; width:248px; z-index:155;
    background:var(--shell-bg); flex-direction:column; padding:14px 12px; gap:2px; overflow-y:auto;
    scrollbar-color:var(--shell-scroll) transparent;}
  body.survey-shell #surveySidebar{display:flex;}
  body.survey-shell #app{margin-left:248px;}
  body.survey-shell #editorView{left:248px;}
  body.survey-shell #analyzeView{left:248px;}
  body.survey-shell.sb-collapsed #surveySidebar{width:64px; padding:14px 10px;}
  body.survey-shell.sb-collapsed #app{margin-left:64px;}
  body.survey-shell.sb-collapsed #editorView{left:64px;}
  body.survey-shell.sb-collapsed #analyzeView{left:64px;}
  body.sb-collapsed #surveySidebar .sb-word, body.sb-collapsed #surveySidebar .sb-item span,
  body.sb-collapsed #surveySidebar .sb-back span, body.sb-collapsed #surveySidebar .sb-section span{display:none;}
  body.sb-collapsed #surveySidebar .sb-section{border-top:1px solid var(--shell-line); margin:10px 4px 6px; height:0; padding:0;}
  body.sb-collapsed #surveySidebar .sb-item, body.sb-collapsed #surveySidebar .sb-back{justify-content:center; padding:8px 0;}
  body.sb-collapsed #surveySidebar .sb-item.active::before{left:-10px;}
  body.sb-collapsed #surveySidebar .sb-foot .nf-i{transform:rotate(180deg);}
  .sb-brand{display:flex; align-items:center; gap:9px; padding:4px 8px 14px;}
  .sb-word{font-size:15px; line-height:20px; font-weight:600; letter-spacing:-0.005em; color:var(--shell-text-strong);}
  .sb-back, .sb-item{display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent; color:var(--shell-text);
    font-size:13px; line-height:18px; font-weight:500; padding:8px 10px; border-radius:var(--r-control); justify-content:flex-start; position:relative;}
  .sb-back{gap:9px; margin-bottom:6px;}
  .sb-back .nf-i, .sb-item .nf-i{color:var(--shell-icon);}
  .sb-back:hover, .sb-item:hover{background:var(--shell-raised); color:var(--shell-text-strong); border:none;}
  .sb-back:focus-visible, .sb-item:focus-visible{outline:2px solid var(--shell-focus); outline-offset:-2px;}
  .sb-item.active, .sb-item.active:hover{background:var(--shell-active); color:var(--shell-text-strong); font-weight:600;}
  .sb-item.active .nf-i{color:var(--shell-focus);}
  .sb-item.active::before{content:''; position:absolute; left:-12px; top:6px; bottom:6px; width:3px; background:var(--shell-marker);}
  .sb-section{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); text-transform:uppercase; letter-spacing:.10em;
    color:var(--shell-text-muted); padding:16px 10px 6px;}
  .sb-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--shell-line);}
  /* "N new" on Results (spec §5) — white on redline, radius 3, h18; always carries the word. */
  .sb-badge{margin-left:auto; height:18px; display:inline-flex; align-items:center; padding:0 6px; border-radius:var(--r-chip);
    background:var(--redline); color:var(--text-on-accent); font-size:11px; font-weight:600; line-height:1; white-space:nowrap;}
  body.sb-collapsed #surveySidebar .sb-item .sb-badge{display:none;}

  /* Workspace top bars (spec §4) — home, gallery, community: navy, no bottom border, white
     wordmark; height and contents unchanged. The respondent-preview bar stays white. */
  #homeView > .fullview-bar, #galleryView > .fullview-bar, #communityView > .fullview-bar{background:var(--shell-bg); border-bottom-color:var(--shell-bg); color:var(--shell-text-strong);} /* the 1px rule is painted navy so the bar keeps its height */
  #homeView .brand-word, #galleryView .fullview-title, #communityView .breadcrumb-title b{color:var(--shell-text-strong);}
  #homeView .brand-word span{color:var(--shell-text);}
  #galleryView .fullview-bar .panel-hint, #communityView .breadcrumb-title{color:var(--shell-text);}
  #galleryView .fullview-bar .nf-i, #communityView .fullview-bar .nf-i{color:var(--shell-icon);}
  #homeView > .fullview-bar button.ghost, #galleryView > .fullview-bar button.ghost, #communityView > .fullview-bar button.ghost{
    background:transparent; color:var(--shell-text-strong); border-color:var(--shell-line);}
  #homeView > .fullview-bar button.ghost:hover, #galleryView > .fullview-bar button.ghost:hover, #communityView > .fullview-bar button.ghost:hover{background:var(--shell-raised); border-color:var(--shell-line);}
  #homeView > .fullview-bar button:focus-visible, #galleryView > .fullview-bar button:focus-visible, #communityView > .fullview-bar button:focus-visible,
  #homeView .profile-chip:focus-visible{outline:2px solid var(--shell-focus); outline-offset:2px;}
  body.survey-shell #toolbar [data-shell-hide]{display:none;}
  #respondentView{z-index:165;}
  #testModal, #templatesModal{z-index:175;}


  /* ============================== NARROW SHELLS — spec docs/specs/narrow-layouts.md ==============================
     §1: no sideways document scroll — the shell's own boxes fit; nothing is clipped at html/body.
     §2: 768–1023 the 64px icon rail (CSS only; sbCollapsed untouched and honoured again ≥1024).
     §4: ≤767 the same sidebar is an off-canvas drawer (248px, 120ms) behind a menu button. */
  #app{overflow:hidden;}
  #toolbar{min-width:0;}
  .sb-menu-btn{display:none; width:40px; height:40px; padding:0; flex:none; align-items:center; justify-content:center;
    border:1px solid var(--border-control); background:var(--surface-default); color:var(--text-primary); border-radius:var(--r-control);}
  .sb-menu-btn:hover{background:var(--surface-subtle);}
  .sb-close{display:none; margin-left:auto; width:36px; height:36px; padding:0; align-items:center; justify-content:center;
    border:1px solid var(--shell-line); background:transparent; color:var(--shell-text-strong); border-radius:var(--r-control);}
  .sb-close:hover{background:var(--shell-raised); border-color:var(--shell-line);}
  .sb-close:focus-visible{outline:2px solid var(--shell-focus); outline-offset:2px;}
  #sbScrim{display:none;}
  @media (min-width:768px) and (max-width:1023px){
    body.survey-shell #surveySidebar{width:64px; padding:14px 10px;}
    body.survey-shell #app{margin-left:64px;}
    body.survey-shell #editorView, body.survey-shell #analyzeView{left:64px;}
    body.survey-shell #surveySidebar .sb-word, body.survey-shell #surveySidebar .sb-item span,
    body.survey-shell #surveySidebar .sb-back span, body.survey-shell #surveySidebar .sb-section span{display:none;}
    body.survey-shell #surveySidebar .sb-section{border-top:1px solid var(--shell-line); margin:10px 4px 6px; height:0; padding:0;}
    body.survey-shell #surveySidebar .sb-item, body.survey-shell #surveySidebar .sb-back{justify-content:center; padding:8px 0;}
    body.survey-shell #surveySidebar .sb-item.active::before{left:-10px;}
    body.survey-shell #surveySidebar .sb-collapse-item{display:none;}
    body.survey-shell #surveySidebar .sb-item .sb-badge{display:none;} /* no bare red dot: the Analyze header chip carries the count */
  }
  @media (max-width:767px){
    .sb-menu-btn{display:inline-flex;}
    body.survey-shell #app, body.survey-shell.sb-collapsed #app{margin-left:0;}
    body.survey-shell #editorView, body.survey-shell #analyzeView,
    body.survey-shell.sb-collapsed #editorView, body.survey-shell.sb-collapsed #analyzeView{left:0;}
    body.survey-shell #surveySidebar, body.survey-shell.sb-collapsed #surveySidebar{width:248px; padding:14px 12px; z-index:210;
      transform:translateX(-100%); visibility:hidden; box-shadow:var(--shadow-2);
      transition:transform var(--dur-2) var(--ease-step), visibility 0s linear var(--dur-2);}
    body.survey-shell.sb-open #surveySidebar{transform:none; visibility:visible; transition:transform var(--dur-2) var(--ease-step), visibility 0s;}
    /* the drawer always shows full labels, whatever the desktop collapse state */
    body.sb-collapsed #surveySidebar .sb-word, body.sb-collapsed #surveySidebar .sb-item span,
    body.sb-collapsed #surveySidebar .sb-back span, body.sb-collapsed #surveySidebar .sb-section span{display:revert;}
    body.sb-collapsed #surveySidebar .sb-section{border-top:0; margin:0; height:auto; padding:16px 10px 6px;}
    body.sb-collapsed #surveySidebar .sb-item, body.sb-collapsed #surveySidebar .sb-back{justify-content:flex-start; padding:8px 10px;}
    body.sb-collapsed #surveySidebar .sb-item .sb-badge{display:inline-flex;}
    #surveySidebar .sb-collapse-item{display:none;}
    #surveySidebar .sb-close{display:inline-flex;}
    body.survey-shell #sbScrim{display:block; position:fixed; inset:0; z-index:205; background:rgba(13,27,54,.40);
      opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease-step);}
    body.survey-shell.sb-open #sbScrim{opacity:1; pointer-events:auto;}
  }
  @media (prefers-reduced-motion:reduce){
    #surveySidebar, #sbScrim{transition:none !important;}
  }