/* ═══════════════════════════════════════════════════
   COMMENT MODE
   ═══════════════════════════════════════════════════
   Two card shapes:
     .sdoc-card-pill     - inline-block, sits next to anchored text
     .sdoc-card-sidecar  - block, sits below the commented block
   Each shape works in three modes (view / edit / compose) using the
   same DOM and class set; `.sdoc-card-edit` swaps body text for an
   <input>/<textarea> and a Save/Cancel pair. Icons throughout use
   `.sdoc-icon-btn` - the same transparent-plus-hover pattern as the
   write-mode toolbar (`.write-tb-btn`).
*/

:root {
  /* Default per-comment colour. The body override in comment mode
     (applyPrefColorToBody) and per-element inline sets on cards,
     anchors, and gutter tabs all derive from this single var. */
  --sdoc-anchor-color: #ffbb00;
}

/* ── Comment-mode toolbar ──────────────────────────────────────── */
#_sd_comment-toolbar {
  display: none;
  align-items: center;
  gap: 6px;
  height: 0;
  opacity: 0;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
  overflow: hidden;
  transition: height .3s cubic-bezier(.4,0,.2,1),
              opacity .22s ease,
              border-color .3s ease,
              padding .3s cubic-bezier(.4,0,.2,1);
}
body.comment-mode #_sd_comment-toolbar {
  position: relative;
  display: flex;
  justify-content: center;
  height: 34px;
  opacity: 1;
  border-bottom-color: var(--border-subtle);
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.comment-mode #_sd_comment-toolbar::-webkit-scrollbar { display: none; }

/* Mobile: same shape as the write toolbar - left-aligned, sticky below the
   left toolbar, horizontally scrollable. The "commenting as:" prefs sit
   first so the toolbar always reads as belonging to the current author,
   even when scrolled away from the count/nav controls. */
@media (max-width: 768px) {
  body.comment-mode #_sd_comment-toolbar {
    position: sticky;
    top: 36px;
    z-index: 98;
    justify-content: flex-start;
  }
  body.comment-mode #_sd_comment-toolbar > * { flex-shrink: 0; }
}

/* Right-edge fade hint when the toolbar overflows. Matches the write
   toolbar's hint at the same breakpoint. */
@media (max-width: 560px) {
  body.comment-mode #_sd_comment-toolbar.has-overflow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg) 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
  }
  body.comment-mode #_sd_comment-toolbar.scrolled-end::after {
    opacity: 0;
  }
}

.sdoc-comment-count {
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--font-ui);
  min-width: 70px;
  text-align: center;
}
/* Hint text in the zero-state of the toolbar middle. Uses the same
   token as the top-menu icons so it tracks panel theme/background. */
.sdoc-toolbar-zero {
  font-size: 11.5px;
  color: var(--text-2);
  font-family: var(--font-ui);
}
@media (max-width: 640px) {
  .sdoc-toolbar-zero { font-size: 11px; }
}
.sdoc-comment-orphan {
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-hover);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 7px;
  margin-left: 8px;
}

/* Author + colour preferences applied to NEW comments. Live at the
   left of the toolbar so they're always present regardless of count. */
.sdoc-comment-prefs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.sdoc-comment-prefs-label {
  font-size: 11.5px;
  font-family: var(--font-ui);
  color: var(--text-2);
  white-space: nowrap;
}
.sdoc-comment-pref-author {
  font-size: 11.5px;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg-input, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 6px;
  width: 64px;
  height: 22px;
  box-sizing: border-box;
  outline: none;
}
.sdoc-comment-pref-author:focus {
  border-color: var(--text-3);
}
.sdoc-comment-pref-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.sdoc-comment-pref-color::-webkit-color-swatch-wrapper { padding: 2px; }
.sdoc-comment-pref-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.sdoc-comment-pref-color::-moz-color-swatch    { border: none; border-radius: 2px; }
@media (max-width: 640px) {
  .sdoc-comment-pref-author { width: 56px; }
}

/* Toolbar middle slot: shows either the zero-comments hint OR the
   active prev/count/next/copy cluster. Only ONE state is in the
   layout at a time (display: none on the other) so the wrapper
   sizes to the visible content and the parent's justify-content:
   center keeps everything tight in the middle. The active state
   fades in via a one-shot CSS animation when display flips from
   none to flex; the outgoing state disappears instantly. */
.sdoc-toolbar-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  flex-shrink: 0;
}
.sdoc-toolbar-state {
  display: none;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}
.sdoc-toolbar-state.is-active {
  display: flex;
  animation: sdoc-tb-fade-in .25s ease;
}
@keyframes sdoc-tb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Shared icon button ─────────────────────────────────────────
   Same vocabulary as `.write-tb-btn` so chrome looks consistent
   across the app: transparent at rest, hover gets a tinted square,
   no border and no filled colors. */
.sdoc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.sdoc-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* Icon buttons inside a comment card pick up the card's colour for
   their hover tile, so save / cancel / delete blend with the card
   tint instead of flashing the neutral panel-hover grey. */
.sdoc-card .sdoc-icon-btn:hover {
  background: color-mix(in srgb, var(--sdoc-card-color, var(--sdoc-anchor-color)) 42%, var(--md-bg, var(--bg-input)));
  color: var(--text);
}
.sdoc-icon-btn svg { display: block; }

/* ── Anchor highlight ───────────────────────────────────────────
   Translucent tint of the per-comment colour over whatever document
   background is in scope, so a dark theme + yellow comment yields a
   muted amber rather than a fluorescent block. Text colour inherits
   from --md-color (the document text colour, theme-aware) so the
   highlight stays readable in both directions of the cascade. */
.sdoc-anchor {
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
  background: color-mix(in srgb, var(--sdoc-anchor-color) 40%, transparent);
}

/* ── Card surface (shared by pill + sidecar, view + edit) ────────
   Lives inside the document, so colours derive from --md-color /
   --md-bg (the document tokens that style mode drives) rather than
   the panel theme tokens. A custom document background or text
   colour cascades into the card automatically. */
.sdoc-card {
  font-family: var(--font-ui);
  font-size: 0.82em;
  line-height: 1.4;
  color: var(--md-color, var(--text));
  background: color-mix(in srgb, var(--sdoc-card-color, var(--sdoc-anchor-color)) 22%, var(--md-bg, var(--bg-input)));
  border: 1px solid color-mix(in srgb, var(--sdoc-card-color, var(--sdoc-anchor-color)) 50%, transparent);
  border-radius: var(--radius-sm, 4px);
}
.sdoc-card.sdoc-card-focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Brief halo pulse applied for one frame when a card gains focus via the
   prev/next nav. Helps the user catch the "I jumped here" moment when the
   target sits in a section that was just expanded - the static outline
   alone is easy to miss after a scroll. The .sdoc-card-focus-flash class
   is added in JS, removed after ~900ms. */
@keyframes sdoc-card-focus-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sdoc-card.sdoc-card-focus-flash {
  animation: sdoc-card-focus-flash .8s cubic-bezier(.4, 0, .2, 1);
}
.sdoc-card-orphaned {
  border-style: dashed;
  opacity: 0.85;
}
.sdoc-card-author {
  font-weight: 600;
  color: var(--text);
}
.sdoc-card-body {
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Pill (inline) ───────────────────────────────────────────────
   Sits right after the anchored text. Used for view/edit/compose
   of selection-anchored comments. */
.sdoc-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px 0 4px;
  padding: 1px 4px 1px 7px;
  vertical-align: baseline;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
}
.sdoc-card-pill.sdoc-card-edit { cursor: default; }
.sdoc-card-sidecar { cursor: pointer; }
.sdoc-card-sidecar.sdoc-card-edit { cursor: default; }
.sdoc-card-pill .sdoc-card-author { margin-right: 2px; }
.sdoc-card-pill .sdoc-card-author::after { content: ":"; color: var(--text-3); margin-left: 1px; }

/* Pill in edit/compose: input takes the visual place of the body. */
.sdoc-card-pill.sdoc-card-edit { padding: 1px 4px 1px 7px; }
.sdoc-card-pill .sdoc-card-input {
  flex: 1 1 220px;
  min-width: 160px;
  width: auto;
  padding: 1px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--sdoc-card-color, var(--sdoc-anchor-color)) 80%, transparent);
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  outline: none;
}
.sdoc-card-pill .sdoc-card-input:focus {
  border-bottom-color: var(--sdoc-card-color, var(--sdoc-anchor-color));
}

/* ── Sidecar (block) ────────────────────────────────────────────
   Sits below the commented block, INSIDE its .sdoc-block-host so
   the host's left stripe spans block + card with no gap. Layout
   mirrors the pill: single line of "user: comment text", wrapping
   when long. No timestamp, no separate author header. */
.sdoc-card-sidecar {
  display: block;
  /* --card-attach-gap above (so the card reads as attached to its block);
     --md-block-gap below (so the next block resumes the document rhythm). */
  margin: var(--card-attach-gap) 0 var(--md-block-gap);
  padding: 3px 30px 3px 8px;
  position: relative;
  max-width: 60ch;
}
/* When two cards stack on the same block, keep them tight. */
.sdoc-card-sidecar + .sdoc-card-sidecar { margin-top: var(--card-attach-gap); }
.sdoc-card-sidecar .sdoc-card-author { margin-right: 0; }
.sdoc-card-sidecar .sdoc-card-author::after {
  content: ":";
  color: var(--text-3);
  margin-right: 3px;
}
.sdoc-card-sidecar .sdoc-card-body {
  display: inline;
}

/* Sidecar action icons sit at the top-right corner. */
.sdoc-card-sidecar .sdoc-icon-btn {
  position: absolute;
  top: 1px;
}
.sdoc-card-sidecar .sdoc-card-save   { right: 24px; }
.sdoc-card-sidecar .sdoc-card-cancel { right: 2px; }
.sdoc-card-sidecar .sdoc-card-delete { right: 2px; }

/* Sidecar in edit/compose: transparent textarea sits directly on
   the card's tint, identical to the view-mode body. */
.sdoc-card-sidecar .sdoc-card-input {
  display: block;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  min-height: 1.4em;
  field-sizing: content;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
}
.sdoc-card-sidecar .sdoc-card-input::placeholder {
  color: color-mix(in srgb, var(--text) 35%, transparent);
}

/* ── Orphan badge ───────────────────────────────────────────────
   Subtle outline-style badge that matches the "n orphaned" toolbar
   pill (no heavy fill). */
.sdoc-card-orphan-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  color: var(--text-2);
  background: var(--bg-hover);
  border-radius: var(--radius-sm, 4px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Block-host + gutter add button ─────────────────────────────
   Matches the heading-anchor / heading-copy button family:
   `--md-link-color` icon, opacity-only hover, no background tile.
   The button is a full-height transparent hit zone so the cursor
   never falls into a dead gap between block and icon. */
.sdoc-block-host { position: relative; }

/* When a sidecar card sits under a block, drop the wrapped block's bottom
   margin so --card-attach-gap is the only space above the card. Without
   this, paragraphs/lists/headings would push the card down by their own
   --md-block-gap on top of the attach gap. */
#_sd_rendered .sdoc-block-host:has(> .sdoc-card-sidecar) > :first-child { margin-bottom: 0; }

/* ── Gutter tab ─────────────────────────────────────────────────
   A vertical tab attached to each block in comment mode. Full block
   height, panel-tone fill so it reads as chrome rather than as a
   floating button, asymmetric rounding (heavier on the outer edge,
   slight on the inner edge) so it looks tucked in from the page
   margin. The tab spans the host's full height, which means it also
   covers any sidecar comment cards the host wraps (the sidecar
   sits inside the host, not below it). On a commented block the
   tab itself fills with the comment colour, replacing the standalone
   stripe that used to sit beside the block. One element, two roles:
   "click to add" + "this block has a comment". */
.sdoc-gutter-add {
  position: absolute;
  left: -32px;
  top: 0;
  bottom: 0;
  width: 20px;
  padding: 6px 0 0 0;
  background: var(--bg-surface);
  border: none;
  border-radius: 8px 3px 3px 8px;
  cursor: pointer;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  transition: background .2s ease,
              color .2s ease,
              opacity .2s cubic-bezier(.4,0,.2,1),
              box-shadow .15s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.sdoc-gutter-add svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Visibility:
   - No comment, desktop: invisible at rest, fades in on block hover
     (or when the tab itself is hovered/focused).
   - No comment, touch: always visible (no hover).
   - Has block comment: always visible, filled with the comment colour.
   `display: none` rules below override these to hide tabs in
   collapsed sections regardless of hover. */
body.comment-mode .sdoc-gutter-add {
  opacity: 0;
  pointer-events: none;
}
body.comment-mode .sdoc-block-host:hover > .sdoc-gutter-add,
body.comment-mode .sdoc-gutter-add:hover,
body.comment-mode .sdoc-gutter-add:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  body.comment-mode .sdoc-gutter-add {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Direct hover or keyboard focus: subtle darken using the standard
   panel hover tone, icon goes to the standard top-menu hover colour,
   soft right-edge shadow gives a "lifted off the page" feel. */
body.comment-mode .sdoc-gutter-add:hover,
body.comment-mode .sdoc-gutter-add:focus-visible {
  background: var(--bg-hover);
  color: var(--text);
  box-shadow: 1px 0 4px rgba(0,0,0,.06);
}

/* Custom focus ring on the tab silhouette so keyboard nav reads as
   a designed state, not the browser's default outline. */
body.comment-mode .sdoc-gutter-add:focus { outline: none; }
body.comment-mode .sdoc-gutter-add:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--md-link-color, #2563eb) 55%, transparent);
  outline-offset: 1px;
}

/* When the block already has a comment, the tab IS the indicator -
   always visible, filled with the comment colour at low alpha so the
   icon stays readable. Replaces the legacy 3px stripe (hidden below). */
body.comment-mode .sdoc-host-commented > .sdoc-gutter-add {
  opacity: 1;
  pointer-events: auto;
  background: color-mix(in srgb, var(--sdoc-block-comment-color, var(--sdoc-anchor-color)) 32%, var(--bg-surface));
  color: var(--text-2);
}
body.comment-mode .sdoc-host-commented:hover > .sdoc-gutter-add {
  background: color-mix(in srgb, var(--sdoc-block-comment-color, var(--sdoc-anchor-color)) 42%, var(--bg-surface));
}
body.comment-mode .sdoc-host-commented > .sdoc-gutter-add:hover,
body.comment-mode .sdoc-host-commented > .sdoc-gutter-add:focus-visible {
  background: color-mix(in srgb, var(--sdoc-block-comment-color, var(--sdoc-anchor-color)) 55%, var(--bg-surface));
  color: var(--text);
}

/* ── Collapsed-section visibility ────────────────────────────────
   Tabs only appear next to content the reader can currently see.
   Three rules cover the cases:
   1. A heading h2/h3/h4 whose own toggle is closed (its body is
      hidden) gets no tab on the heading itself. h1 is intentionally
      excluded - h1 stays commentable since its non-header children
      remain visible regardless of toggle state.
   2. A fully-closed body (no descendant body is open) hides every
      tab inside it.
   3. A partially-closed body (a descendant body IS open) hides
      tabs only on its dimmed direct children, NOT on the open
      sub-section's content. This preserves the case "h2 is closed,
      h3 inside is open" - the open h3 and its children stay
      commentable. */
body.comment-mode .sdoc-block-host:not(.sdoc-host-commented):not(.sdoc-has-direct-section-comment):has(> :is(h2, h3, h4) > .section-toggle:not(.open)) > .sdoc-gutter-add {
  display: none;
}
body.comment-mode .md-section-body:not(.open):not(:has(.md-section-body.open)) .sdoc-block-host:not(.sdoc-host-commented):not(.sdoc-has-direct-section-comment) > .sdoc-gutter-add {
  display: none;
}
body.comment-mode .md-section-body:not(.open):has(.md-section-body.open) > :not(.md-section) .sdoc-block-host:not(.sdoc-host-commented):not(.sdoc-has-direct-section-comment) > .sdoc-gutter-add {
  display: none;
}

/* Heading whose section directly contains comments (the "owner" heading)
   AND whose section is currently closed. Once the user expands the section,
   the comment is visible in place inline so the hint stops showing - the
   tab falls back to the default hover-only behaviour, same as any other
   uncommented heading host. The :has() probe matches the same
   .section-toggle:not(.open) used by the hide-on-closed rules above. */
body.comment-mode .sdoc-block-host.sdoc-has-direct-section-comment:has(> :is(h2, h3, h4) > .section-toggle:not(.open)) > .sdoc-gutter-add {
  opacity: 1;
  pointer-events: auto;
  background: color-mix(in srgb, var(--sdoc-descendant-comment-color, var(--accent)) 32%, var(--bg-surface));
  color: var(--text-2);
}
body.comment-mode .sdoc-block-host.sdoc-has-direct-section-comment:has(> :is(h2, h3, h4) > .section-toggle:not(.open)):hover > .sdoc-gutter-add {
  background: color-mix(in srgb, var(--sdoc-descendant-comment-color, var(--accent)) 42%, var(--bg-surface));
}
body.comment-mode .sdoc-block-host.sdoc-has-direct-section-comment:has(> :is(h2, h3, h4) > .section-toggle:not(.open)) > .sdoc-gutter-add:hover,
body.comment-mode .sdoc-block-host.sdoc-has-direct-section-comment:has(> :is(h2, h3, h4) > .section-toggle:not(.open)) > .sdoc-gutter-add:focus-visible {
  background: color-mix(in srgb, var(--sdoc-descendant-comment-color, var(--accent)) 55%, var(--bg-surface));
  color: var(--text);
}

/* Invisible "hover catchment" pseudo on every block-host in comment
   mode. Spans from ~32px to the LEFT of the tab all the way to the
   block's left edge - so the gutter tab is sandwiched in the middle
   of one wide hover rectangle. Two roles in one shape:

   1. Bridge across the 12px gap between tab and block, so cursor
      traversal block <-> tab stays inside host:hover (without this,
      the tab fades to 0 just as the user reaches for it).
   2. Overshoot buffer to the LEFT of the tab. The tab is only 20px
      wide, so it's easy to mouse past it; with the buffer, the
      cursor has ~30px of slack past the visual edge before it
      leaves the hover zone. Combined with the existing 200ms
      fade-out, brief overshoots don't lose the tab.

   The pseudo sits behind the real <button> in document order, so
   clicks land on the button when cursor is on it, and on the pseudo
   (which fires host:hover) elsewhere. The pseudo fires host:hover
   not gutter:hover, so the tab keeps its lighter "in flight" look
   across the buffer and only deepens to direct-hover when the cursor
   actually lands on the tab itself. */
body.comment-mode .sdoc-block-host::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -64px;
  width: 64px;
  pointer-events: auto;
}

/* Fallback: same stripe on a block directly when there's no host
   wrapper (defensive - every block should be hosted in comment mode). */
.sdoc-block-commented { position: relative; }
.sdoc-block-commented::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--sdoc-block-comment-color, var(--sdoc-anchor-color));
  border-radius: 2px;
  pointer-events: none;
}

/* Mobile: indent the rendered body so gutter buttons have room. */
@media (max-width: 768px) {
  body.comment-mode #_sd_rendered { padding-left: 44px; }
  .sdoc-block-commented::before { left: -8px; }
}

/* ── Selection popover ──────────────────────────────────────────
   Floating "+" that appears above a selection. Pill-shaped with a
   soft shadow and a touch of backdrop-blur so it reads as a real,
   tappable affordance over arbitrary text. The fill is a translucent
   tint of the user's current comment colour, so the popover already
   looks like the highlight it will create. Icon colour stays in the
   `--md-link-color` family, matching the gutter button. */
.sdoc-selection-add {
  position: fixed;
  z-index: 200;
  padding: 6px;
  background: color-mix(in srgb, var(--sdoc-anchor-color) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--sdoc-anchor-color) 65%, transparent);
  border-radius: 999px;
  color: var(--md-link-color, #2563eb);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .15s cubic-bezier(.4,0,.2,1),
              box-shadow .15s ease,
              background .15s ease;
}
.sdoc-selection-add:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--sdoc-anchor-color) 70%, transparent);
}
.sdoc-selection-add:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.sdoc-selection-add svg {
  display: block;
  opacity: 0.85;
  transition: opacity .15s;
}
.sdoc-selection-add:hover svg { opacity: 1; }

/* ── Copy-with-comments buttons ─────────────────────────────────
   Toolbar button = uses the `.btn.ghost` vocabulary (see
   layout.css). Heading companion = invisible at rest like the
   header-anchor / header-copy siblings, opacity-up on heading hover. */
.sdoc-copy-with-c {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.sdoc-copy-with-c:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}
.sdoc-copy-with-c svg { flex-shrink: 0; color: inherit; }
.sdoc-copy-with-c-label { white-space: nowrap; color: inherit; }

.sdoc-head-copy-c.sdoc-copy-with-c {
  margin-left: 4px;
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: var(--md-link-color, var(--text-3));
  opacity: 0.5;
  font-size: 11.5px;
  font-weight: 500;
  vertical-align: middle;
  border-radius: var(--radius-sm, 4px);
  transition: opacity .15s;
}
.sdoc-head-copy-c.sdoc-copy-with-c:hover { opacity: 1; }

/* ── Info-panel comment prefs ───────────────────────────────────
   Generic small text input used by the comments prefs section. */
.info-settings-text {
  padding: 4px 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.info-settings-text:focus {
  outline: none;
  border-color: var(--accent);
}