/* Reading companion: bubble from the header mark, progress line, changed tags, select-to-ask.
   Colours come from the site tokens, so every palette and dark mode follow. */

/* ---------- progress line and tab under the header ---------- */
.cc-rail{ position:absolute; left:0; right:0; bottom:-2px; height:3px; pointer-events:none; --p:0; }
.cc-fill{ position:absolute; inset:0; background:var(--yellow); transform-origin:0 50%; transform:scaleX(var(--p)); }
.cc-headdot{ position:absolute; top:50%; left:clamp(8px, calc(var(--p) * 100%), calc(100% - 8px)); width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 28%, transparent); }
.cc-zero .cc-headdot{ opacity:0; }
.cc-headdot{ transition:opacity .3s; }
.cc-ticks{ position:absolute; inset:0; }
.cc-ticks .cc-tick{ position:absolute; top:-3px; width:3px; height:9px; margin-left:-1.5px; border-radius:2px; background:var(--hot); }
.cc-ticks .cc-was{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; border:2px solid var(--ink); background:var(--paper); }
.cc-tab{ position:absolute; right:var(--gutter,16px); top:100%; margin-top:1px; display:flex; align-items:center; gap:.55rem; padding:.28rem .35rem .3rem .6rem; background:var(--panel); border:1px solid var(--rule); border-top:0; border-radius:0 0 8px 8px; font:500 .6875rem/1 var(--mono); letter-spacing:.02em; color:var(--muted); white-space:nowrap; transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.cc-tab.cc-away{ transform:translateY(-8px); opacity:0; pointer-events:none; }
.cc-tab.cc-idle{ transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s, visibility 0s .28s; }
.cc-left{ font-variant-numeric:tabular-nums; }
.cc-q{ display:inline-flex; align-items:center; gap:.35rem; position:relative; background:none; border:0; padding:.2rem .25rem; margin:0; color:var(--muted); font:inherit; cursor:pointer; border-radius:4px; }
.cc-q::before{ content:""; position:absolute; inset:-10px -6px; }
.cc-q i{ position:relative; width:22px; height:12px; border-radius:6px; background:var(--rule); transition:background .2s; flex:none; }
.cc-q i::after{ content:""; position:absolute; top:2px; left:2px; width:8px; height:8px; border-radius:50%; background:var(--paper); transition:transform .2s; }
.cc-q[aria-checked="true"]{ color:var(--ink); }
.cc-q[aria-checked="true"] i{ background:var(--ink); }
.cc-q[aria-checked="true"] i::after{ transform:translateX(10px); }
.cc-q:hover{ color:var(--ink); }
.cc-q:focus-visible, .cc-bubble button:focus-visible, .cc-bubble a:focus-visible, .cc-askbtn:focus-visible, .cc-note button:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

/* ---------- the bubble (a note from the mark) ---------- */
.cc-bubble{ --cc-bg:var(--ink); --cc-fg:var(--paper); --cc-acc:var(--yellow);
  position:fixed; z-index:30; max-width:min(25rem, calc(100vw - 32px)); display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"dot msg x" ". hush hush"; column-gap:.55rem;
  padding:.7rem .5rem .6rem .8rem; border-radius:12px; background:var(--cc-bg); color:var(--cc-fg);
  font:500 .8125rem/1.5 var(--mono); letter-spacing:.005em; box-shadow:0 14px 34px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12); transform-origin:var(--tail,40px) 0; }
html[data-palette="ultramarine"] .cc-bubble, html[data-palette="moss"] .cc-bubble, html[data-palette="ink"] .cc-bubble{ --cc-acc:var(--paper); }
.cc-bubble.cc-has-acts{ grid-template-areas:"dot msg x" ". acts hush"; }
.cc-bubble[hidden]{ display:none; }
.cc-bubble.cc-pre{ opacity:0; }
.cc-bubble[data-side="top"]::before{ content:""; position:absolute; left:var(--tail,40px); top:-6px; width:13px; height:13px; margin-left:-6.5px; background:var(--cc-bg); transform:rotate(45deg); border-radius:2px 0 0 0; }
.cc-bubble[data-side="bottom"]{ left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); top:auto; max-width:none; max-height:calc(100vh - 160px); overflow:auto; transform-origin:30px 100%; }
@media (min-width:700px){ .cc-bubble[data-side="bottom"]{ right:auto; max-width:min(26rem, calc(100vw - 32px)); } }
.cc-bubble.cc-in{ animation:cc-pop .42s cubic-bezier(.2,1.35,.4,1) both; }
.cc-bubble[data-side="bottom"].cc-in{ animation-name:cc-rise; }
.cc-bubble.cc-leave{ opacity:0; transform:translateY(-4px) scale(.98); transition:opacity .2s, transform .2s; }
.cc-bubble[data-side="bottom"].cc-leave{ transform:translateY(8px); }
@keyframes cc-pop{ from{ opacity:0; transform:translateY(-6px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes cc-rise{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.cc-dot{ grid-area:dot; width:9px; height:9px; margin-top:.36rem; border-radius:50%; background:var(--cc-acc); }
.cc-bubble.cc-in .cc-dot{ animation:cc-catch .6s ease-out; }
@keyframes cc-catch{ 0%{ transform:scale(1.8); box-shadow:0 0 0 0 color-mix(in srgb, var(--cc-acc) 60%, transparent); } 100%{ transform:scale(1); box-shadow:0 0 0 9px transparent; } }
.cc-msg{ grid-area:msg; min-height:1.5em; padding-top:.05rem; text-wrap:pretty; }
.cc-msg em{ display:block; margin-top:.35rem; font:italic 400 1rem/1.4 var(--serif); letter-spacing:0; }
.cc-caret{ display:inline-block; width:.5em; height:1.05em; margin-left:1px; vertical-align:-.18em; background:var(--cc-acc); animation:cc-blink 1s steps(2) infinite; }
@keyframes cc-blink{ 50%{ opacity:0; } }
.cc-acts{ grid-area:acts; display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; animation:cc-fade .3s ease-out both; }
.cc-acts[hidden]{ display:none; }
@keyframes cc-fade{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.cc-b, .cc-b2{ display:inline-block; min-height:30px; padding:.45rem .85rem; border-radius:999px; font:600 .75rem/1.3 var(--mono); letter-spacing:.01em; text-decoration:none; text-align:left; cursor:pointer; }
.cc-b small, .cc-b2 small{ font:inherit; font-weight:500; opacity:.7; white-space:nowrap; margin-left:.45em; }
.cc-bubble .cc-b{ background:var(--cc-fg); color:var(--cc-bg); border:1px solid var(--cc-fg); }
.cc-bubble .cc-b2{ background:transparent; color:var(--cc-fg); border:1px solid color-mix(in srgb, var(--cc-fg) 45%, transparent); }
.cc-bubble .cc-b:hover{ background:color-mix(in srgb, var(--cc-fg) 86%, var(--cc-bg)); }
.cc-bubble .cc-b2:hover{ border-color:var(--cc-fg); }
.cc-x{ grid-area:x; align-self:start; justify-self:end; width:28px; height:28px; margin:-.3rem -.1rem 0 0; border:0; border-radius:50%; background:transparent; color:inherit; opacity:.75; font:400 1.15rem/1 var(--mono); cursor:pointer; }
.cc-x:hover{ opacity:1; }
.cc-hush{ grid-area:hush; justify-self:end; align-self:end; margin:.2rem .1rem 0 0; padding:.2rem .25rem; border:0; background:transparent; color:inherit; opacity:.85; font:500 .6875rem/1 var(--mono); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cc-hush:hover{ opacity:1; }
.cc-hush[hidden]{ display:none; }
.cc-spark{ position:fixed; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px color-mix(in srgb, var(--yellow) 30%, transparent), 0 0 14px color-mix(in srgb, var(--yellow) 60%, transparent); z-index:31; pointer-events:none; }
.cc-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- paragraphs that changed, and "here you are" ---------- */
.cc-changed{ --cc-tint:color-mix(in srgb, var(--yellow) 12%, transparent); position:relative; background:var(--cc-tint); box-shadow:0 0 0 .5rem var(--cc-tint); border-radius:.35rem; }
html[data-palette="ultramarine"] .cc-changed, html[data-palette="moss"] .cc-changed, html[data-palette="ink"] .cc-changed{ --cc-tint:color-mix(in srgb, var(--ink) 9%, transparent); }
.cc-changed::before{ content:""; position:absolute; left:-.9rem; top:.15rem; bottom:.15rem; width:3px; border-radius:2px; background:var(--yellow); }
li.cc-changed{ box-shadow:0 0 0 .35rem var(--cc-tint); }
li.cc-changed::before{ left:-2rem; }
.cc-pill{ display:inline-block; margin-right:.5em; padding:.32em .6em .3em; border-radius:999px; background:var(--hot); color:#fff; font:600 .625rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; vertical-align:.2em; user-select:none; -webkit-user-select:none; font-style:normal; }
html[data-palette="ultramarine"] .cc-pill, html[data-palette="moss"] .cc-pill, html[data-palette="ink"] .cc-pill{ color:#15171A; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .cc-pill{ color:#15171A; } }
html[data-theme="dark"] .cc-pill{ color:#15171A; }
.cc-here{ animation:cc-here 2.4s ease-out; border-radius:.35rem; }
@keyframes cc-here{ 0%, 35%{ box-shadow:0 0 0 .5rem color-mix(in srgb, var(--yellow) 30%, transparent); background:color-mix(in srgb, var(--yellow) 30%, transparent); } 100%{ box-shadow:0 0 0 .5rem transparent; background:transparent; } }
.cc-changed.cc-here{ animation-name:cc-here-c; }
html[data-palette="ultramarine"] .cc-here, html[data-palette="moss"] .cc-here, html[data-palette="ink"] .cc-here{ --yellow-veil:color-mix(in srgb, var(--ink) 18%, transparent); animation-name:cc-here-d; }
@keyframes cc-here-d{ 0%, 35%{ box-shadow:0 0 0 .5rem var(--yellow-veil); background:var(--yellow-veil); } 100%{ box-shadow:0 0 0 .5rem var(--cc-tint, transparent); background:var(--cc-tint, transparent); } }
@keyframes cc-here-c{ 0%, 35%{ box-shadow:0 0 0 .5rem color-mix(in srgb, var(--yellow) 34%, transparent); background:color-mix(in srgb, var(--yellow) 34%, transparent); } 100%{ box-shadow:0 0 0 .5rem color-mix(in srgb, var(--yellow) 12%, transparent); background:color-mix(in srgb, var(--yellow) 12%, transparent); } }

/* ---------- select to ask ---------- */
.cc-askbtn{ position:absolute; z-index:25; display:inline-flex; align-items:center; gap:.45rem; min-height:32px; padding:.4rem .8rem .4rem .65rem; border:0; border-radius:999px; background:var(--ink); color:var(--paper); font:600 .75rem/1 var(--mono); letter-spacing:.01em; white-space:nowrap; box-shadow:0 8px 22px rgba(0,0,0,.22); cursor:pointer; user-select:none; -webkit-user-select:none; font-style:normal; text-indent:0; animation:cc-fade .18s ease-out both; }
.cc-askbtn i{ width:8px; height:8px; border-radius:50%; background:var(--yellow); flex:none; }
html[data-palette="ultramarine"] .cc-askbtn i, html[data-palette="moss"] .cc-askbtn i, html[data-palette="ink"] .cc-askbtn i{ background:var(--paper); }
@media (pointer:coarse){ .cc-askbtn{ min-height:40px; padding-inline:1rem .9rem; } }
::highlight(cc-quote){ background-color:color-mix(in srgb, var(--yellow) 30%, transparent); }
html[data-palette="ultramarine"] ::highlight(cc-quote), html[data-palette="moss"] ::highlight(cc-quote), html[data-palette="ink"] ::highlight(cc-quote){ background-color:color-mix(in srgb, var(--ink) 24%, transparent); }

.cc-note{ position:absolute; z-index:20; box-sizing:border-box; padding:.75rem .85rem .8rem; background:var(--panel); color:var(--ink); border:1px solid var(--rule); border-left:3px solid var(--yellow); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.14); font:500 .8125rem/1.5 var(--mono); animation:cc-fade .3s ease-out both; }
.cc-note:focus, .cc-note:focus-visible{ outline:none; }
.cc-nh{ display:flex; align-items:center; gap:.5rem; margin:-.15rem -.3rem .5rem 0; }
.cc-nl{ display:inline-flex; align-items:center; gap:.45rem; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:auto; }
.cc-nl i{ width:8px; height:8px; border-radius:50%; background:var(--yellow); }
.cc-note .cc-x{ margin:0; color:var(--muted); }
.cc-kept{ display:none; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hot); }
.cc-is-kept .cc-kept{ display:inline; }
.cc-quote{ margin:0 0 .6rem; padding:0 0 0 .7rem; border-left:2px solid var(--rule); font:italic 400 .95rem/1.4 var(--serif); color:var(--muted); max-height:7.2em; overflow:hidden; text-wrap:pretty; }
.cc-ans{ font:400 1rem/1.5 var(--serif); color:var(--ink); }
.cc-ans p{ margin:0 0 .55rem; }
.cc-ans p:last-child{ margin-bottom:0; }
.cc-ans.cc-arrive p{ animation:cc-fade .45s ease-out both; }
.cc-ans.cc-arrive p:nth-child(2){ animation-delay:.12s; } .cc-ans.cc-arrive p:nth-child(3){ animation-delay:.24s; }
.cc-err .cc-ans{ font:500 .8125rem/1.5 var(--mono); color:var(--ink); }
.cc-reading{ font:500 .8125rem/1.5 var(--mono) !important; color:var(--muted); }
.cc-reading b{ font-weight:600; animation:cc-dots 1.2s infinite both; }
.cc-reading b:nth-child(2){ animation-delay:.2s; } .cc-reading b:nth-child(3){ animation-delay:.4s; }
@keyframes cc-dots{ 0%, 100%{ opacity:.2; } 40%{ opacity:1; } }
.cc-nacts{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; }
.cc-nacts[hidden]{ display:none; }
.cc-note .cc-b{ background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.cc-note .cc-b2{ background:transparent; color:var(--ink); border:1px solid var(--rule); }
.cc-note .cc-b2:hover{ border-color:var(--ink); }
.cc-note .cc-b[hidden], .cc-note .cc-b2[hidden]{ display:none; }
.cc-note.cc-gone{ opacity:0; transform:translateX(10px); transition:opacity .22s, transform .22s; }
.cc-note.cc-inline{ position:relative; margin:-.25rem 0 1.5rem; box-shadow:none; animation:cc-fade .3s ease-out both; }
.cc-note.cc-sheet{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40; max-height:72vh; overflow:auto; overscroll-behavior:contain; padding:1.1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); border:1px solid var(--rule); border-bottom:0; border-top:3px solid var(--yellow); border-radius:16px 16px 0 0; box-shadow:0 -14px 34px rgba(0,0,0,.2); animation:cc-sheet .32s cubic-bezier(.2,.8,.2,1) both; }
.cc-note.cc-sheet::before{ content:""; position:absolute; top:6px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--rule); }
.cc-note.cc-sheet .cc-nacts button{ min-height:40px; padding-inline:1rem; }
.cc-note.cc-sheet .cc-x{ width:40px; height:40px; }
@keyframes cc-sheet{ from{ transform:translateY(100%); } to{ transform:none; } }

@media (max-width:699px){
  .cc-bubble{ font-size:.8125rem; }
  .cc-bubble .cc-b, .cc-bubble .cc-b2{ min-height:38px; }
  .cc-x{ width:36px; height:36px; }
  .cc-tab{ padding:.3rem .3rem .32rem .55rem; }
}
@media (prefers-reduced-motion: reduce){
  .cc-bubble, .cc-bubble *, .cc-tab, .cc-note, .cc-note *, .cc-askbtn, .cc-here, .cc-changed, .cc-q i, .cc-q i::after{ animation:none !important; transition:none !important; }
  .cc-caret{ display:none; }
  .cc-here{ background:color-mix(in srgb, var(--yellow) 28%, transparent); box-shadow:0 0 0 .5rem color-mix(in srgb, var(--yellow) 28%, transparent); }
}
@media print{ .cc-bubble, .cc-rail, .cc-tab, .cc-askbtn, .cc-note, .cc-spark, .cc-pill{ display:none !important; } .cc-changed{ background:none; box-shadow:none; } }