/* Highlight-to-comment: floating button, composer card, highlighted passages, comment popover.
   Cards sit in a side column beside the text (a bottom sheet on narrow screens); comment text uses the page's size and font. */
.cg-ui{position:absolute;z-index:90;font:15px/1.5 var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);color:var(--ink,#1d1d1f)}
.cg-ui[hidden],.cg-ui [hidden]{display:none!important}
.cg-ui svg{display:block;flex:none}
.cg-add{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;font-size:13px;font-weight:600;border-radius:99px;border:0;background:var(--accent-ink,#2667a8);color:#fff;box-shadow:0 3px 10px #0003;cursor:pointer}
.cg-add:hover{filter:brightness(1.1)}
/* Corner hint: icon + count; the words show on pages without comments and on hover. */
.cg-hint{position:fixed;right:14px;bottom:14px;z-index:80;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:13px;border-radius:99px;border:1px solid var(--rule,#d8d4ca);background:var(--surface,#fff);color:var(--muted,#5d5d66);box-shadow:0 1px 4px #0002;cursor:pointer}
.cg-hint b{font-weight:600;color:var(--ink,#1d1d1f)}
.cg-hint.cg-has span{display:none}.cg-hint.cg-has:hover span,.cg-hint.cg-has:focus-visible span{display:inline}
.cg-hint:hover{color:var(--ink,#1d1d1f)}
/* Round icon buttons (edit, delete, cancel, send, save). */
.cg-icon{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--rule,#d8d4ca);background:var(--surface,#fff);color:var(--muted,#5d5d66);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.cg-icon:hover{color:var(--ink,#1d1d1f);background:var(--bg,#f7f5f0)}
.cg-icon:disabled{opacity:.45;cursor:default}
.cg-icon:focus-visible{outline:2px solid var(--accent,#4a90d9);outline-offset:1px}
@media print{.cg-hint{display:none}}
.cg-composer,.cg-popover{width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:16px 18px;background:var(--surface,#fff);border:1px solid var(--rule,#d8d4ca);border-radius:10px;box-shadow:0 8px 30px #0002}
.cg-composer{display:grid;gap:12px}
.cg-composer label{display:grid;gap:5px;font-weight:600;font-size:14px}
.cg-name{display:flex;align-items:center;gap:8px;margin-bottom:-7px}
.cg-help{width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--rule,#ccc);background:none;color:var(--muted,#5d5d66);font:600 13px/1 inherit;font-family:inherit;cursor:pointer}
.cg-help[aria-expanded=true]{background:var(--accent-ink,#2667a8);border-color:var(--accent-ink,#2667a8);color:#fff}
.cg-flow{font-size:13px;color:var(--muted,#5d5d66);background:var(--bg,#f7f5f0);border-radius:8px;padding:10px 12px}
.cg-flow p{margin:8px 0 0}.cg-flow b{color:var(--ink,#1d1d1f)}
.cg-steps{list-style:none;margin:0;padding:0;display:grid;justify-items:start}
.cg-steps li{position:relative;padding:4px 10px;border:1px solid var(--rule,#d8d4ca);border-radius:6px;background:var(--surface,#fff);color:var(--ink,#1d1d1f)}
.cg-steps li small{margin-left:6px;font-size:11px;color:var(--muted,#5d5d66)}
.cg-steps li+li{margin-top:20px}
.cg-steps li+li::before{content:"↓";position:absolute;top:-21px;left:16px;color:var(--muted,#5d5d66)}
.cg-composer input,.cg-composer textarea{width:100%;box-sizing:border-box;font:400 15px/1.5 inherit;font-family:inherit;border:1px solid var(--rule,#ccc);border-radius:6px;padding:9px 10px;background:var(--surface,#fff);color:inherit}
.cg-composer textarea{min-height:140px;resize:vertical;font:var(--cg-size,17px)/1.6 var(--cg-font,Georgia,serif)}
.cg-sheet{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-height:55vh;border-radius:12px 12px 0 0;box-shadow:0 -6px 24px #0002}
.cg-preview{border:1px dashed var(--rule,#d8d4ca);border-radius:6px;padding:8px 10px}
.cg-preview-head{font-size:12px;color:var(--muted,#5d5d66);margin-bottom:2px}
.cg-preview-body{font:var(--cg-size,17px)/1.6 var(--cg-font,Georgia,serif);white-space:pre-wrap;overflow-wrap:anywhere}
.cg-actions{display:flex;justify-content:flex-end;gap:8px}
.cg-actions .cg-icon{width:34px;height:34px}
.cg-icon.cg-send{background:var(--accent-ink,#2667a8);border-color:transparent;color:#fff}.cg-icon.cg-send:hover{filter:brightness(1.1)}
.cg-status{margin:0;font-size:13px;color:var(--muted,#5d5d66)}.cg-status:empty{display:none}
.cg-status[data-state=error]{color:var(--open,#a3324a)}.cg-status a{color:inherit;font-weight:600}
.cg-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cg-challenge:empty{display:none}
mark.cg-hl{background:#fde68a;color:inherit;padding:0;border-radius:2px;cursor:pointer;box-shadow:0 2px 0 #f59e0b}
mark.cg-hl.cg-pending{background:#bfdbfe;box-shadow:0 2px 0 #3b82f6;cursor:default}
mark.cg-pin{display:inline-block;vertical-align:-2px;background:none;box-shadow:none;margin-left:4px;color:#d97706}
mark.cg-hl:focus-visible{outline:2px solid var(--accent,#4a90d9)}
.cg-popover-head{font-size:13px;color:var(--muted,#5d5d66);margin-bottom:6px;display:flex;gap:8px;align-items:center}
.cg-tools{margin-left:auto;display:flex;gap:4px}.cg-tools .cg-icon{width:26px;height:26px;border-color:transparent}.cg-tools svg{width:14px;height:14px}
.cg-tools .cg-edit:hover{color:var(--accent-ink,#2667a8)}.cg-tools .cg-delete:hover{color:#a33;background:#fbeaea}
.cg-popover .cg-status{margin-top:4px}
.cg-editor label{display:block;font-size:13px;color:var(--muted,#5d5d66);margin-bottom:8px}
.cg-editor input,.cg-editor textarea{display:block;width:100%;box-sizing:border-box;margin-top:3px;font:var(--cg-size,17px)/1.5 var(--cg-font,Georgia,serif);color:var(--ink,#1d1d1f);padding:6px 8px;border:1px solid var(--rule,#d8d4ca);border-radius:6px;background:var(--surface,#fff)}
.cg-editor input{font-size:15px}
.cg-editor .cg-status{margin-top:6px}
.cg-popover-body{font:var(--cg-size,17px)/1.6 var(--cg-font,Georgia,serif);white-space:pre-wrap;overflow-wrap:anywhere}
.cg-popover-body+.cg-popover-head{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule,#d8d4ca)}
.cg-popover .katex-display,.cg-preview .katex-display{overflow-x:auto;overflow-y:hidden;margin:.4em 0}
.cg-note{clear:both;margin:12px 0;padding:10px 12px;border-left:3px solid var(--prov,#1f7a4d);background:var(--surface,#fff);text-align:left}
.cg-note-head{font:12px/1.5 var(--sans,sans-serif);color:var(--muted,#5d5d66)}
.cg-note-body{white-space:pre-wrap;overflow-wrap:anywhere}
@media (prefers-color-scheme:dark){mark.cg-hl{background:#854d0e;box-shadow:0 2px 0 #f59e0b}mark.cg-hl.cg-pending{background:#1e3a8a}}
@media print{.cg-ui{display:none!important}mark.cg-hl{background:none;box-shadow:none}}