/* ============================== A3: TEMPLATE GALLERY ============================== */
  #galleryView{ z-index:160; }
  .gal-bar-sub{ margin-left:6px; font-size:12.5px; font-weight:400; }
  @media (max-width:720px){ .gal-bar-sub{ display:none; } }
  #galleryBody{ max-width:1060px; margin:0 auto; padding:28px 24px 60px; }
  .gal-shelf-hd{ font-size:11px; line-height:13px; text-transform:uppercase; letter-spacing:.08em; font-stretch:var(--stretch-label); color:var(--text-muted); font-weight:600; margin:0 0 12px; }
  .gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
  .gal-shelf + .gal-shelf{ margin-top:40px; }

  /* ---- card anatomy (spec §3) ---- */
  .gal-card{ background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; }
  .gal-card:hover{ border-color:var(--border-control); }
  .gal-card:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; }
  .gal-thumb{ height:104px; background:var(--surface-sunken); border-bottom:1px solid var(--border-default); position:relative; display:flex; align-items:center; justify-content:center; }
  .gal-thumb svg{ display:block; }
  .gal-body{ padding:16px 18px 16px; }
  .gal-name{ font-size:14px; line-height:20px; font-weight:600; letter-spacing:0; color:var(--text-primary); }
  /* Saved-template card name — same look as .gal-name but an actual <input> (.inline-edit,
     04-canvas-nodes.css) so it can be renamed in place, no prompt() (spec accepted item). */
  .gal-name-edit{ font-size:14px; line-height:20px; font-weight:600; letter-spacing:0; padding:3px 5px; margin:-3px -5px; }
  .gal-desc{ font-size:13px; line-height:1.5; color:var(--text-secondary); margin-top:6px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .gal-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; min-height:0; }
  .gal-chip{ font-size:12px; font-weight:600; height:22px; display:inline-flex; align-items:center; padding:0 8px; border-radius:var(--r-chip); background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-700); white-space:nowrap; }
  .gal-chip-warn{ background:var(--warning-bg); border:1px solid var(--warning-line); color:var(--warning-fg); }
  .gal-meta{ font-size:12.5px; color:var(--text-muted); margin-top:10px; }
  .gal-foot{ margin-top:auto; padding:6px 8px; border-top:1px solid var(--border-default); display:flex; gap:0; }
  .gal-foot button{ flex:1; font-size:13px; padding:9px 4px; background:transparent; border:none; color:var(--text-secondary); border-radius:var(--r-control); white-space:nowrap; }
  .gal-foot button:hover{ background:var(--brand-50); color:var(--text-primary); }
  .gal-foot button.gal-use{ color:var(--brand-700); font-weight:600; }
  .gal-foot button.gal-use:hover{ background:var(--brand-50); }
  .gal-foot button.gal-use:disabled{ opacity:.5; cursor:not-allowed; color:var(--text-muted); }
  .gal-foot button.gal-use:disabled:hover{ background:transparent; }

  /* ---- blank cell (spec §4) ---- */
  .gal-blank{ border:1px dashed var(--border-control); background:var(--surface-subtle); border-radius:var(--r-card);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:270px; cursor:pointer; }
  .gal-blank:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; }
  .gal-blank-ic{ width:36px; height:36px; border-radius:50%; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; }
  .gal-blank-title{ font-size:14px; line-height:20px; font-weight:600; color:var(--text-primary); }
  .gal-blank-sub{ font-size:13px; color:var(--text-secondary); }
  .gal-blank.gal-disabled{ opacity:.5; cursor:not-allowed; }

  /* ---- your templates: quiet icon buttons over the thumbnail ---- */
  .gal-thumb-ic{ position:absolute; top:8px; width:28px; height:28px; background:var(--surface-default); border:1px solid var(--border-control); border-radius:var(--r-control);
    display:flex; align-items:center; justify-content:center; color:var(--text-secondary); z-index:2; padding:0; }
  .gal-thumb-ic:hover{ background:var(--surface-sunken); }
  .gal-thumb-ic:first-of-type{ right:42px; }
  .gal-thumb-ic-danger{ right:8px; }
  .gal-thumb-ic-danger:hover{ color:var(--error-fg); background:var(--error-bg); border-color:var(--error-fg); }

  /* ---- empty state (spec §4) — honest, no dead CTA ---- */
  .gal-empty{ grid-column:1/-1; border:1px dashed var(--border-control); border-radius:var(--r-card); background:var(--surface-subtle); padding:28px; text-align:center; font-size:13px; color:var(--text-secondary); }

  /* ---- plan-limit banner (spec §4) — same tokens as the plan badge fix, so both read as one state ---- */
  .gal-limit{ display:flex; align-items:center; gap:10px; margin-bottom:24px; padding:12px 16px; background:var(--warning-bg); border:1px solid var(--warning-line); border-radius:var(--r-card); font-size:13px; color:var(--warning-fg); }
  .gal-limit button.ghost{ border-radius:var(--r-control); background:var(--surface-default); }

  /* ---- preview bar chrome (spec §5) — third mode of #respondentBar ---- */
  .tpl-preview-title{ display:flex; align-items:center; gap:6px; }
  .tpl-preview-strong{ font-size:14px; font-weight:700; color:var(--text-primary); }
  .tpl-preview-dot{ color:var(--text-muted); }
  .tpl-preview-name{ font-size:13px; font-weight:500; color:var(--text-secondary); }
  .tpl-preview-note{ font-size:12px; color:var(--text-muted); font-weight:400; }
  @media (max-width:640px){
    .tpl-preview-note, .tpl-preview-dot, .tpl-preview-name{ display:none; }
    /* #respondentBar IS the .fullview-bar element (same div carries both the id and the
       class — see index.html), not an ancestor of one, so a descendant-combinator
       selector here would never match anything; using the id and class together as one
       compound selector is what actually reaches its button children. */
    #respondentBar.fullview-bar button{ white-space:nowrap; }
    #respondentBar .tpl-back-long{ display:none; }
    /* Deviation beyond the literal review diff (see HANDOFF): hiding the dot/name/note
       still left "Template preview" itself wrapping onto a second line at 390px — the
       flex title item's default min-width:auto kept it wide enough to fit that phrase
       even though nothing else could shrink further. min-width:0 lets it shrink like the
       other flex children; the ellipsis on the label keeps it a single line instead of
       wrapping, matching the "preview bar is one line" acceptance check. */
    .tpl-preview-title{ min-width:0; }
    .tpl-preview-strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  }