/* Consultation recorder: a full-screen sheet over the dashboard. */
body.cx-open { overflow: hidden; }
.cx { position: fixed; inset: 0; z-index: 70; background: rgba(8,20,22,.5); display: grid; place-items: stretch; padding: 18px; animation: cx-fade .2s ease both; }
.cx-in { background: radial-gradient(900px 380px at 12% -10%, color-mix(in srgb, var(--tint-teal) 80%, transparent), transparent 70%), var(--bg); border-radius: 24px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; min-height: 0; overflow: hidden; max-width: 1280px; width: 100%; margin-inline: auto; animation: cx-rise .32s cubic-bezier(.2,.7,.2,1) both; }
.cx-in.phase-ready { max-width: 620px; height: fit-content; align-self: center; }
@keyframes cx-fade { from { opacity: 0; } }
@keyframes cx-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.cx-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px; }
.cx-who { display: flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; }
.cx-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cx-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; }
.cx-meta { font-size: var(--fs-s); color: var(--ink-3); }
.cx-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.cx-x:hover { background: var(--surface-2); }
.cx-x svg { width: 18px; height: 18px; }

/* Ready */
.cx-ready { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 6px 32px 30px; }
.cx-mic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 10px var(--accent-soft), var(--shadow); margin: 8px 0 6px; }
.cx-mic svg { width: 36px; height: 36px; }
.cx-ready h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; max-width: 22ch; }
.cx-ready > p.muted { max-width: 46ch; }
.cx-consent { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; margin-top: 6px; }
.cx-consent:has(input:checked) { border-color: var(--accent-2); background: var(--tint-teal); }
.cx-consent input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.cx-consent b { display: block; }
.cx-consent small { display: block; color: var(--ink-3); font-size: var(--fs-s); }
.cx-start { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px 20px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--fs-b); transition: background .15s, transform .1s, opacity .15s; }
.cx-start:hover:not(:disabled) { background: var(--accent-2); }
.cx-start:active:not(:disabled) { transform: scale(.99); }
.cx-start:disabled { opacity: .4; cursor: not-allowed; }
.cx-start-dot { width: 12px; height: 12px; border-radius: 50%; background: #FF6B5E; box-shadow: 0 0 0 4px rgba(255,107,94,.25); }
.cx-fine { font-size: var(--fs-xs); color: var(--ink-3); max-width: 50ch; }
.cx-error { color: var(--red); background: var(--red-bg); border: 1px solid var(--red-line); border-radius: 12px; padding: 10px 14px; font-size: var(--fs-s); text-align: left; width: 100%; }

/* Live bar */
.cx-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 0 24px; padding: 14px 16px 14px 20px; background: var(--ink); color: #EAF4F3; border-radius: 18px; }
.cx-rec { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-s); letter-spacing: .04em; text-transform: uppercase; }
.cx-led { width: 12px; height: 12px; border-radius: 50%; background: #FF5A4D; box-shadow: 0 0 0 0 rgba(255,90,77,.55); animation: cx-led 1.6s ease-out infinite; }
.cx-bar.paused .cx-led { background: #F0B44C; animation: none; }
.cx-bar.finishing .cx-led { background: #8FD3CB; animation: none; }
@keyframes cx-led { 0% { box-shadow: 0 0 0 0 rgba(255,90,77,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,90,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,77,0); } }
.cx-time { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 500; letter-spacing: .02em; min-width: 4.5ch; }
.cx-meter { display: flex; align-items: center; gap: 3px; height: 40px; min-width: 0; overflow: hidden; }
.cx-meter i { flex: 1 1 0; min-width: 2px; max-width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(#9BE3D9, #4FB3A6); transform: scaleY(.06); transform-origin: center; transition: transform .08s linear; }
.cx-bar.paused .cx-meter i { background: #5C6F72; }
.cx-ctrl { display: flex; align-items: center; gap: 10px; }
.cx-round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.cx-round:hover { background: rgba(255,255,255,.16); }
.cx-round svg { width: 20px; height: 20px; }
.cx-stop { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font-weight: 700; }
.cx-stop:hover { background: #E6F2F0; }
.cx-stop span { width: 12px; height: 12px; border-radius: 3px; background: #E5483B; }
.cx-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #9BE3D9; animation: cx-spin .8s linear infinite; }
.cx-bar .muted { color: #A9BDBF; }
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* Panes */
.cx-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; padding: 16px 24px 24px; flex: 1; min-height: 0; }
.cx-pane { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow); }
.cx-pane-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cx-pane-head h3 { margin-right: auto; font-size: var(--fs-b); }
.cx-scroll { overflow: auto; padding: 16px 18px 20px; flex: 1; min-height: 0; scroll-behavior: smooth; }
.cx-line { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; padding: 6px 0; line-height: 1.6; animation: cx-in .4s ease both; }
.cx-line .ts { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); padding-top: 3px; }
@keyframes cx-in { from { opacity: 0; transform: translateY(4px); } }
.cx-status { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; }
.cx-status.busy::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: cx-ell 1.2s steps(4) infinite; }
.cx-status.warn { color: var(--amber); }
@keyframes cx-ell { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.cx-age { font-size: var(--fs-xs); color: var(--ink-3); }
.cx-link { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: var(--fs-s); padding: 4px 6px; border-radius: 8px; }
.cx-link:hover { background: var(--accent-soft); }
.cx-pane.notes.busy .cx-pane-head { background: linear-gradient(90deg, transparent, var(--tint-teal), transparent) 0 0 / 200% 100%; animation: cx-sheen 1.6s linear infinite; }
@keyframes cx-sheen { to { background-position: -200% 0; } }
.cx-pane.notes.busy #cx-notes { opacity: .72; transition: opacity .3s; }

.cx-empty { height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--ink-3); font-size: var(--fs-s); }
.cx-empty p { max-width: 32ch; }
.cx-dots { display: flex; gap: 6px; }
.cx-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: cx-dot 1.2s ease-in-out infinite; }
.cx-dots i:nth-child(2) { animation-delay: .15s; }
.cx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cx-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.cx-summary { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; margin-bottom: 14px; }
.cx-sec { padding: 12px 0; border-top: 1px solid var(--line); }
.cx-sec h4, .cx-check h4 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cx-sec ul, .cx-check ul { margin: 0; padding-left: 1.1em; }
.cx-sec li { margin: 3px 0; }
.cx-meds { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.cx-meds li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--tint-teal); }
.cx-meds span { color: var(--ink-2); font-size: var(--fs-s); }
.cx-check { background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.cx-check h4 { color: var(--amber); }
.cx-check li { margin: 3px 0; }

/* Review */
.cx-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; padding: 0 24px 24px; flex: 1; min-height: 0; }
.cx-review-main { overflow: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.cx-review-top h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.cx-field { display: flex; flex-direction: column; gap: 6px; }
.cx-field > span { font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.cx-field em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); margin-left: 6px; }
.cx-field textarea, .cx-field input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; line-height: 1.55; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.cx-field textarea:focus, .cx-field input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.cx-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 2px; background: linear-gradient(transparent, var(--bg) 30%); }
.cx-save { flex: 1 1 260px; padding: 15px 18px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cx-save:hover:not(:disabled) { background: var(--accent-2); }
.cx-save:disabled { opacity: .6; }
.cx-discard { padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; }
.cx-discard:hover, .cx-discard.armed { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.cx-review-side { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cx-review-side[open] { display: flex; }
.cx-review-side summary { padding: 14px 18px; font-weight: 700; cursor: pointer; border-bottom: 1px solid var(--line); list-style: none; }
.cx-review-side summary::-webkit-details-marker { display: none; }
.cx-review-side summary::after { content: '▾'; float: right; color: var(--ink-3); }
.cx-review-side:not([open]) summary::after { content: '▸'; }

@media (max-width: 900px) {
  .cx { padding: 0; }
  .cx-in { border-radius: 0; }
  .cx-in.phase-ready { align-self: stretch; height: auto; max-width: none; }
  .cx-head { padding: 16px 16px 12px; }
  .cx-bar { margin: 0 16px; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 12px 12px 16px; }
  .cx-meter { grid-column: 1 / -1; grid-row: 2; height: 28px; }
  .cx-time { font-size: 1.5rem; justify-self: start; }
  .cx-panes { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 0.8fr) minmax(0, 1.2fr); padding: 12px 16px 16px; gap: 12px; }
  .cx-review { grid-template-columns: 1fr; padding: 0 16px 16px; overflow: auto; }
  .cx-review-main { overflow: visible; }
  .cx-ready { padding: 6px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx, .cx-in, .cx-line, .cx-led, .cx-dots i, .cx-pane.notes.busy .cx-pane-head { animation: none; }
  .cx-meter i { transition: none; }
}

/* Past recordings, on the patient page */
.rec-list:empty { display: none; }
.rec-list { margin-top: 12px; }
.rec-list-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.rec-list ul { list-style: none; margin: 0; padding: 0; }
.rec-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.rec-item > div { margin-right: auto; min-width: 0; display: flex; flex-direction: column; }
.rec-item b { font-size: var(--fs-s); }
.rec-item span { font-size: var(--fs-xs); color: var(--ink-3); }
.rec-item.deleted b { color: var(--ink-3); text-decoration: line-through; }
.rec-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rec-del:hover, .rec-del.armed { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.tx-sheet { max-width: 720px; }
.tx-body { padding: 0 24px 24px; }

.cx-q { padding: 10px 0; border-top: 1px solid var(--amber-line); }
.cx-q:first-of-type { border-top: 0; padding-top: 2px; }
.cx-q-text { font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cx-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cx-pill { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--amber-line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.cx-pill:hover { border-color: var(--amber); background: var(--amber-bg); }
.cx-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-pill.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cx-q-own { display: flex; gap: 6px; }
.cx-q-own input { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--amber-line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-s); }
.cx-q-own input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.cx-answered { list-style: none; padding: 8px 0 0 !important; margin: 4px 0 0; border-top: 1px solid var(--amber-line); }
.cx-answered li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-s); padding: 3px 0; color: var(--ink-2); }
.cx-answered b { color: var(--green); text-align: right; }
.cx-q-hint, .cx-q-busy { font-size: var(--fs-xs); color: var(--ink-2); margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.cx-upload { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; padding: 12px 16px; width: 100%; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--accent); font-weight: 600; cursor: pointer; text-align: center; }
.cx-upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.cx-upload small { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.cx-upload.off { opacity: .45; cursor: not-allowed; }
.cx-mic.busy { display: grid; place-items: center; }

.cx-turns { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; margin: 0 0 10px; }
.cx-turns > .ts { grid-row: span 20; color: var(--ink-3); font-size: var(--fs-xs); padding-top: 3px; }
.cx-turn { grid-column: 2; margin: 0 0 6px; padding: 7px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); line-height: 1.45; }
.cx-turn b { display: block; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1px; }
.cx-turn.doctor { background: var(--accent-soft); border-color: transparent; }
.cx-turn.doctor b { color: var(--accent); }
.cx-turn.patient b { color: var(--amber); }
.cx-turn.other b { color: var(--ink-3); }

.cx-copilot { border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 85%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.cx-co-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.cx-co-head small { font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); }
.cx-co-spark { font-size: 1.05rem; }
.cx-co { margin-top: 8px; }
.cx-co h5 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 4px; }
.cx-co ul { list-style: none; margin: 0; padding: 0; }
.cx-co li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed var(--line); font-size: var(--fs-s); }
.cx-co li:first-child { border-top: 0; }
.cx-co li em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.cx-co.flag h5 { color: var(--red); }
.cx-co.flag li > span { color: var(--red); font-weight: 600; }
.cx-co.gap h5 { color: var(--amber); }
.cx-co.ask h5 { color: var(--accent); }
.cx-co.ask li > span { font-style: italic; }

.cx-pm { margin: 18px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--green-bg); border: 1px solid var(--green-line); }
.cx-pm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cx-pm-head h4 { margin: 0; color: var(--green); font-size: var(--fs-s); letter-spacing: .06em; text-transform: uppercase; }
.cx-pm-head small { color: var(--ink-3); font-size: var(--fs-xs); }
.cx-pm textarea { width: 100%; border-radius: 12px; border: 1px solid var(--green-line); background: var(--surface); color: var(--ink); padding: 10px 12px; font: inherit; font-size: var(--fs-s); line-height: 1.5; resize: vertical; }
.cx-pm-acts { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 8px; }

/* A clip waiting for its correction pass: speaker not yet named, a soft shimmer. */
.cx-turns.pending .cx-turn { position: relative; overflow: hidden; }
.cx-turns.pending .cx-turn b { color: var(--ink-3); }
.cx-fixing { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: cx-shimmer 1.6s linear infinite; pointer-events: none; }
@keyframes cx-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.cx-turn.named b { animation: cx-name .5s ease both; }
@keyframes cx-name { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* A corrected word: sweeps in, sparkles once, and shows what was first heard on hover. */
@media (prefers-reduced-motion: reduce) {
}

.cx-turns.live .cx-turn { border-style: dashed; background: var(--surface); }
.cx-turns.live .cx-turn b { color: var(--ink-3); }
.cx-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: cx-blink 1s steps(2) infinite; }
@keyframes cx-blink { 50% { opacity: 0; } }
.cx-turns.swapped .cx-turn > span { animation: cx-swap .6s ease both; }
@keyframes cx-swap { from { opacity: .35; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
.cx-status.live::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 6px; animation: cx-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cx-caret, .cx-turns.swapped .cx-turn > span, .cx-status.live::before { animation: none; } }
.cx-romanizing { color: var(--ink-3, var(--ink-2)); font-style: italic; background: linear-gradient(90deg, currentColor 30%, transparent 50%, currentColor 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cx-rom 1.6s linear infinite; }
@keyframes cx-rom { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .cx-romanizing { animation: none; -webkit-text-fill-color: currentColor; } }

.cx-turn { position: relative; }
.cx-who { display: block; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1px; color: var(--ink-3); cursor: pointer; }
.cx-who:hover { text-decoration: underline; }
.cx-who:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.cx-turn.doctor .cx-who { color: var(--accent); }
.cx-turn.patient .cx-who { color: var(--amber); }
.cx-pen { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .15s; }
.cx-turn:hover .cx-pen, .cx-pen:focus-visible { opacity: 1; }
@media (hover: none) { .cx-pen { opacity: .7; } }
.cx-edit { display: block; }
.cx-edit textarea { width: 100%; font: inherit; line-height: 1.45; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--ink); resize: vertical; }
.cx-edit-row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.sg { position: relative; display: inline; border-bottom: 2px dotted var(--amber); cursor: help; outline: none; }
.sg:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 3px; }
.sg-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; display: none; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 220px; max-width: 320px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 20px rgb(0 0 0 / .14); cursor: default; }
.sg:hover .sg-pop, .sg:focus-within .sg-pop { display: flex; }
.sg-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.sg-why { flex-basis: 100%; font-size: var(--fs-xs); color: var(--ink-3); }
.sg-ok, .sg-no { font: inherit; font-size: var(--fs-s, 14px); padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.sg-ok { border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.sg-no { border: 1px solid var(--line); background: none; color: var(--ink-2); }
.sg-ok:focus-visible, .sg-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }