/* Clippings on the article (partials/csi-clip-pop.hbs): a small plate by the selection, gold highlights over
   your clipped passages (CSS Custom Highlights; whole paragraphs get a gold rule while the page is translated). */
.csi-clip {
    position: absolute; z-index: 996; max-width: min(340px, calc(100vw - 16px)); padding: 0.45rem; border: 1px solid var(--csi-line-gold, rgba(212, 175, 55, 0.58));
    border-radius: 12px; background: rgba(10, 10, 16, 0.98); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55); color: var(--pure-white); font-family: var(--font-body); letter-spacing: 0;
}
.csi-clip[hidden], .csi-clip [hidden] { display: none !important; }
.csi-clip__row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.csi-clip__btn {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0 0.85rem; border: 1px solid transparent; border-radius: 8px;
    background: none; color: var(--pure-white); font: 600 0.84rem/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.csi-clip__btn .csi-i { color: var(--noble-gold-light); }
.csi-clip__btn:hover { background: rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.45); }
.csi-clip__btn--on { background: var(--csi-on, #0071e3); }
.csi-clip__btn--on:hover { background: var(--accent-hover, #0077ed); border-color: transparent; }
.csi-clip__btn--danger { border-color: rgba(255, 120, 120, 0.5); }
.csi-clip__btn:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
.csi-clip__form textarea { display: block; width: min(300px, 80vw); margin: 0.2rem 0.2rem 0.45rem; padding: 0.6rem 0.7rem; border: 1px solid var(--csi-line, rgba(236, 240, 246, 0.42)); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--pure-white); font: 400 0.9rem/1.5 var(--font-body); resize: vertical; }
.csi-clip__form textarea:focus { outline: none; border-color: var(--accent-glow); }
.csi-clip__kicker { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem 0.2rem; color: var(--noble-gold-light); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.csi-clip__note { max-width: 300px; padding: 0.2rem 0.5rem 0.5rem; color: rgba(236, 240, 246, 0.9); font-size: 0.88rem; line-height: 1.5; white-space: pre-line; }
.csi-clip__msg { padding: 0 0.5rem; color: rgba(236, 240, 246, 0.85); font-size: 0.82rem; line-height: 1.5; }
.csi-clip__msg:has(> :not([hidden])) { padding: 0.4rem 0.5rem; }
.csi-clip--confirm { padding: 0.8rem; }
.csi-clip--confirm p { margin: 0 0.2rem 0.6rem; font-size: 0.88rem; line-height: 1.5; }
::highlight(csi-clip) { background-color: rgba(212, 175, 55, 0.3); color: inherit; }
.gh-content .csi-clipped { background: rgba(212, 175, 55, 0.07); box-shadow: -14px 0 0 -11px var(--noble-gold); } /* a gold rule in the margin: no layout shift */