/* Modern suggestions inspector — white, legible, category-organised.
   Scoped to .sg-panel (set alongside .unified-suggestion-panel on the root). */
.sg-panel {
  --sg-ink:#1a2030; --sg-ink-2:#3d4759; --sg-muted:#6b7688; --sg-faint:#97a1b2;
  --sg-line:#e4e8f0; --sg-line-2:#eef1f6; --sg-surface:#ffffff; --sg-surface-2:#f5f7fb;
  --sg-primary:#5b5bd6; --sg-primary-ink:#4b4bc4; --sg-primary-wash:#eeeefb;
  --c-discourse:var(--color-discourse,#7c6cf0);
  --c-lexical:var(--color-lexical,#0ea5c4);
  --c-morphosyntax:var(--color-morphosyntax,#e8930c);
  --c-acronyms:var(--color-acronyms,#10b981);
  --c-general:#94a3b8;
  display:flex; flex-direction:column; min-height:0; height:100%;
  container-type:inline-size;
  color:var(--sg-ink); background:var(--sg-surface);
  font-family:var(--font-body,var(--font-heading,"Inter",system-ui,sans-serif));
}

/* icon buttons shared */
.sg-panel .sg-iconbtn { display:grid; place-items:center; width:32px; height:32px; border:0; background:transparent; border-radius:9px; color:var(--sg-muted); text-decoration:none; cursor:pointer; }
.sg-panel .sg-iconbtn:hover { background:var(--sg-surface-2); color:var(--sg-ink); }
.sg-panel .sg-iconbtn svg { width:16px; height:16px; }

/* ---- header ---- */
.sg-panel .sg-head { display:flex; align-items:center; gap:9px; padding:14px 14px 11px; border-bottom:1px solid var(--sg-line-2); }
.sg-panel .sg-title { display:flex; align-items:baseline; gap:8px; min-width:0; }
.sg-panel .sg-title h2 { margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--sg-ink); }
.sg-panel .sg-total { padding:2px 9px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:999px; font-size:12px; font-weight:650; color:var(--sg-ink-2); font-variant-numeric:tabular-nums; }
.sg-panel .sg-sub { color:var(--sg-faint); font-size:12px; white-space:nowrap; }
.sg-panel .sg-acts { display:flex; align-items:center; gap:2px; margin-left:auto; }
.sg-panel .sg-nav { display:flex; align-items:center; gap:2px; color:var(--sg-faint); font-size:12px; font-variant-numeric:tabular-nums; }

@container (max-width:480px) {
  .sg-panel .sg-head { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; row-gap:7px; }
  .sg-panel .sg-title { width:100%; }
  .sg-panel .sg-acts { width:100%; margin-left:0; justify-content:flex-end; }
}

/* ---- filter chips ---- */
.sg-panel .sg-chips { display:flex; flex-wrap:wrap; gap:7px; padding:11px 14px; overflow:visible; border-bottom:1px solid var(--sg-line-2); }
.sg-panel .sg-chip { display:flex; align-items:center; gap:7px; padding:6px 12px; white-space:nowrap; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:999px; color:var(--sg-ink-2); font-size:12.5px; font-weight:550; cursor:pointer; }
.sg-panel .sg-chip:hover { background:var(--sg-surface-2); }
.sg-panel .sg-chip .n { color:var(--sg-faint); font-weight:650; font-variant-numeric:tabular-nums; }
.sg-panel .sg-chip.on { background:var(--sg-ink); border-color:var(--sg-ink); color:#fff; }
.sg-panel .sg-chip.on .n { color:rgba(255,255,255,.72); }
.sg-panel .sg-chip .dot { width:7px; height:7px; border-radius:50%; }

/* category dots */
.sg-panel .dot-discourse { background:var(--c-discourse); }
.sg-panel .dot-lexical { background:var(--c-lexical); }
.sg-panel .dot-morphosyntax { background:var(--c-morphosyntax); }
.sg-panel .dot-acronyms { background:var(--c-acronyms); }
.sg-panel .dot-general { background:var(--c-general); }

/* ---- list ---- */
.sg-panel .sg-list { flex:1; min-height:0; overflow:auto; padding:0 12px 22px; scroll-behavior:smooth; }
.sg-panel .sg-cat { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:9px; padding:14px 6px 8px; background:linear-gradient(var(--sg-surface) 72%, rgba(255,255,255,0)); }
.sg-panel .sg-cat .dot { width:8px; height:8px; border-radius:50%; }
.sg-panel .sg-cat h3 { flex:1; margin:0; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--sg-muted); }
.sg-panel .sg-cat .n { padding:1px 8px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:999px; font-size:11.5px; font-weight:650; color:var(--sg-ink-2); font-variant-numeric:tabular-nums; }

/* ---- card ---- */
.sg-panel .sg-card { margin:7px 0; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:10px; overflow:hidden; transition:border-color .12s, box-shadow .12s; }
.sg-panel .sg-card:hover { border-color:#d3dae6; }
.sg-panel .sg-card.open { border-color:color-mix(in srgb, var(--sg-primary) 32%, var(--sg-line)); box-shadow:0 0 0 3px color-mix(in srgb, var(--sg-primary) 9%, transparent), 0 8px 22px -14px rgba(16,24,40,.28); }
.sg-panel .sg-card-head { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:11px; width:100%; padding:12px 13px; border:0; background:transparent; text-align:left; cursor:pointer; }
.sg-panel .sg-card-head .t { min-width:0; font-size:13.5px; font-weight:600; line-height:1.35; color:var(--sg-ink); }
.sg-panel .sg-card-head .cnt { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; background:var(--sg-surface-2); border-radius:999px; font-size:12px; font-weight:650; color:var(--sg-muted); font-variant-numeric:tabular-nums; }
.sg-panel .sg-card-head .chev { width:16px; height:16px; color:var(--sg-faint); transition:transform .16s; }
.sg-panel .sg-card.open .sg-card-head .chev { transform:rotate(180deg); }

.sg-panel .sg-card-body { padding:2px 15px 15px; }
.sg-panel .sg-desc { margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--sg-ink-2); }

/* recommendation callout — quiet side-rule note */
.sg-panel .sg-rec { display:block; margin:0 0 14px; padding:1px 0 1px 12px; background:transparent; border-left:2px solid var(--sg-line); border-radius:0; }
.sg-panel .sg-rec svg { display:none; }
.sg-panel .sg-rec p { margin:0; font-size:13px; line-height:1.55; color:var(--sg-ink-2); }
.sg-panel .sg-rec b { color:var(--sg-ink); font-weight:650; }

/* identified points — clickable list; selected expands its suggestions */
.sg-panel .sg-points { border-top:1px solid var(--sg-line-2); padding-top:12px; }
.sg-panel .sg-points-head { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.sg-panel .sg-points-head span { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-muted); }
.sg-panel .sg-points-head .c { padding:1px 7px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:999px; font-size:11px; font-weight:650; color:var(--sg-ink-2); font-variant-numeric:tabular-nums; }
.sg-panel .sg-point-list { display:flex; flex-direction:column; gap:0; }
.sg-panel .sg-point { background:transparent; border:0; border-top:1px solid var(--sg-line-2); overflow:hidden; transition:background .12s; }
.sg-panel .sg-point:first-child { border-top:0; }
.sg-panel .sg-point:hover { background:var(--sg-surface-2); }
.sg-panel .sg-point.is-active { background:var(--sg-surface-2); box-shadow:inset 2px 0 0 var(--sg-primary); }
.sg-panel .sg-point-head { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; background:transparent; text-align:left; cursor:pointer; }
.sg-panel .sg-point-head .q { flex:1; min-width:0; font-size:13px; line-height:1.45; color:var(--sg-ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sg-panel .sg-point.is-active .sg-point-head .q { color:var(--sg-ink); }
.sg-panel .sg-point-head .chev { width:15px; height:15px; color:var(--sg-faint); flex:0 0 auto; }
.sg-panel .sg-point.is-active .sg-point-head .chev { color:var(--sg-primary); }
.sg-panel .sg-point-body { padding:2px 12px 12px; }

/* connectors + glossary options */
.sg-panel .sg-conn-label { margin:0 0 8px; font-size:12px; font-weight:650; color:var(--sg-ink); }
.sg-panel .sg-relgroup { margin-bottom:6px; }
.sg-panel .sg-relgroup:last-child { margin-bottom:0; }
.sg-panel .sg-rel-head { display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:9px; color:var(--sg-ink); font-size:12.5px; font-weight:600; cursor:pointer; list-style:none; }
.sg-panel .sg-rel-head::-webkit-details-marker { display:none; }
.sg-panel .sg-rel-head:hover { background:#eef1f7; }
.sg-panel .sg-rel-head .n { margin-left:auto; padding:1px 8px; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:999px; font-size:11.5px; color:var(--sg-muted); font-weight:650; }
.sg-panel .sg-rel-head svg { width:15px; height:15px; color:var(--sg-faint); transition:transform .16s; }
.sg-panel .sg-relgroup[open] > .sg-rel-head { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.sg-panel .sg-relgroup[open] > .sg-rel-head svg { transform:rotate(180deg); }
.sg-panel .sg-relgroup[open] > .sg-opts { border:1px solid var(--sg-line); border-top:0; border-radius:0 0 9px 9px; }
.sg-panel .sg-opts { display:flex; flex-wrap:wrap; gap:7px; padding:10px; }
.sg-panel .sg-point-body > .sg-opts { padding:0; }

/* long-sentence split hints */
.sg-panel .sg-segments { display:flex; flex-direction:column; gap:0; }
.sg-panel .sg-seg { padding:9px 11px; background:var(--sg-surface-2); border:1px solid var(--sg-line); border-radius:9px; font-size:12.5px; line-height:1.5; color:var(--sg-ink-2); }
.sg-panel .sg-cut { display:flex; align-items:center; gap:7px; padding:5px 4px; color:var(--sg-primary-ink); font-size:11.5px; font-weight:600; }
.sg-panel .sg-cut svg { width:14px; height:14px; }
.sg-panel .sg-cut::after { content:""; flex:1; height:0; border-top:1px dashed color-mix(in srgb, var(--sg-primary) 40%, var(--sg-line)); }
.sg-panel .sg-opt { display:inline-flex; align-items:stretch; background:var(--sg-surface); border:1px solid var(--sg-line); border-radius:999px; overflow:hidden; }
.sg-panel .sg-opt:hover { border-color:color-mix(in srgb, var(--sg-primary) 50%, var(--sg-line)); }
.sg-panel .sg-opt-main { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:0; background:transparent; color:var(--sg-ink-2); font-size:13px; cursor:pointer; font-family:inherit; }
.sg-panel .sg-opt-main:hover { color:var(--sg-primary-ink); background:var(--sg-primary-wash); }
.sg-panel .sg-opt-main.is-success { color:var(--c-acronyms); }
.sg-panel .sg-opt-main svg { width:13px; height:13px; color:var(--sg-faint); }
.sg-panel .sg-opt-main:hover svg { color:var(--sg-primary); }
.sg-panel .sg-opt-icon { display:grid; place-items:center; width:30px; border:0; border-left:1px solid var(--sg-line); background:transparent; color:var(--sg-muted); cursor:pointer; }
.sg-panel .sg-opt-icon:hover { color:var(--sg-primary-ink); background:var(--sg-primary-wash); }
.sg-panel .sg-opt-icon svg { width:14px; height:14px; }

/* empty state */
.sg-panel .sg-empty { display:grid; place-items:center; gap:10px; padding:48px 20px; text-align:center; color:var(--sg-muted); }
.sg-panel .sg-empty svg { width:28px; height:28px; color:var(--c-acronyms); }
.sg-panel .sg-empty p { margin:0; font-size:13px; line-height:1.5; }

/* editor apply preview dialog */
.sg-panel .sg-preview { border:0; border-radius:14px; padding:0; max-width:360px; box-shadow:0 24px 60px -20px rgba(16,24,40,.5); }
.sg-panel .sg-preview::backdrop { background:rgba(15,23,42,.34); }
.sg-panel .sg-preview > div { display:flex; flex-direction:column; gap:10px; padding:16px; }
.sg-panel .sg-preview header { display:flex; align-items:center; justify-content:space-between; }
.sg-panel .sg-preview h2 { margin:0; font-size:14.5px; font-weight:700; color:var(--sg-ink); }
.sg-panel .sg-preview section > span { display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sg-faint); }
.sg-panel .sg-preview section > p { margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--sg-ink-2); }
.sg-panel .sg-preview footer { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
.sg-panel .sg-btn { padding:8px 14px; font-size:13px; font-weight:600; border:1px solid var(--sg-line); background:var(--sg-surface); color:var(--sg-ink-2); border-radius:9px; cursor:pointer; font-family:inherit; }
.sg-panel .sg-btn:hover { background:var(--sg-surface-2); }
.sg-panel .sg-btn.primary { color:#fff; background:var(--sg-primary); border-color:transparent; }
.sg-panel .sg-btn.primary:hover { background:var(--sg-primary-ink); }

@media (max-width:700px) {
  .sg-panel .sg-card-head .t { font-size:14px; }
  .sg-panel .sg-desc, .sg-panel .sg-rec p { font-size:14px; }
}