/* Reader mode, file dialogs, the exam trainer, and schedule course blocks */

/* ---- reader mode ---- */
#readercol { display: none; position: fixed; inset: 0; z-index: 35;
  background: var(--bg); flex-direction: column; }
body.readermode #readercol { display: flex; }
body.readermode .app { display: none; }
body.readermode #openTasks { display: none !important; }
/* the Library's two tabs, Readings and Course files, each with the
   picked week's count */
.libtabs { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; width: calc(100% - 24px); max-width: 736px; margin: 4px auto 2px;
  padding: 3px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); }
.libtabs button { border: none; background: none; color: var(--dim);
  font: inherit; font-size: 13px; padding: 7px 0; border-radius: 7px;
  cursor: pointer; display: inline-flex; justify-content: center;
  align-items: baseline; gap: 6px; transition: color .15s, background .15s; }
.libtabs button span { font-size: 11px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.libtabs button:hover { color: var(--text); }
.libtabs button.on { background: var(--panel2); color: var(--text);
  font-weight: 600; }
.libtabs button.on span { color: var(--accent2); }
.libtabs button:focus-visible { outline: 2px solid var(--accent2);
  outline-offset: 1px; }
/* the heading is the block picker: a native select laid over it, so a
   phone gets its own wheel */
.blockpick { position: relative; display: inline-flex; align-items: center;
  gap: 6px; cursor: pointer; color: var(--text); border-radius: 8px; }
.blockpick svg { color: var(--dim); transition: color .15s; }
.blockpick:hover svg { color: var(--accent2); }
.blockpick select { position: absolute; inset: 0; width: 100%; opacity: 0;
  cursor: pointer; font-size: 16px; }
.blockpick:focus-within h2 { color: var(--accent2); }
/* Files and the Reader: a week carousel over the list (modeStrip) */
.mwbox { flex-shrink: 0; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 0 12px; }
.mwbar .strip-main { margin-top: 4px; }
/* a swiped week's list slides in from the side it came from */
@keyframes mwinr { from { opacity: 0; transform: translateX(22px); } }
@keyframes mwinl { from { opacity: 0; transform: translateX(-22px); } }
.readerlist.mwin-r { animation: mwinr .18s ease-out; }
.readerlist.mwin-l { animation: mwinl .18s ease-out; }
/* a week with nothing in it stays on the strip as a quiet date */
.weekchip.nil .n { color: var(--dim); font-weight: 500; }
.weekchip.nil .d { opacity: .6; }
/* a course's block in the Library and Course files: a dark card with a
   faint border, the course named in its color, each item a chip with a
   faint course-tinted fill and outline (the schedule's reading chips): an
   icon by kind on a tile tinted in the course's color, the name (two
   lines at most) over a dim line of facts, a note at the right (a
   file's posted day, a reading's share read), and a thin bar in the
   course's color along the bottom as it is read; a folder named once
   above its chips */
/* the chips take the course's own color, kept faint */
.libgroup { --chip: var(--course, var(--accent)); margin: 0 0 12px; padding: 12px 10px 8px;
  background: #111014; border: 1px solid #1d1b23; border-radius: 14px; }
.flhead { display: flex; align-items: baseline; gap: 10px;
  margin: 0 4px 10px; font-size: 14.5px; font-weight: 600;
  color: var(--course, var(--text)); }
.flhead .cname { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.flhead .n { margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-size: 11.5px; font-weight: 400; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.lnode { margin: 14px 4px 6px; font-size: 11.5px;
  color: color-mix(in srgb, var(--course, var(--dim)) 60%, var(--dim)); }
.lnode:first-child { margin-top: 0; }
.lnode span { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.libgroup .rdrow { position: relative; overflow: hidden; display: flex;
  align-items: flex-start; gap: 11px; padding: 9px 12px; margin: 0 0 6px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--chip) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 9%,
  transparent); transition: background .15s, border-color .15s; }
.libgroup .rdrow:hover { background: color-mix(in srgb,
  var(--chip) 8%, transparent); border-color:
  color-mix(in srgb, var(--chip) 18%, transparent); }
.libgroup .rdrow .ric { flex-shrink: 0; width: 28px; height: 28px;
  margin-top: 1px; border-radius: 8px; display: grid; place-items: center;
  color: color-mix(in srgb, var(--chip) 60%, var(--faint));
  background: color-mix(in srgb, var(--chip) 7%, transparent); }
.libgroup .rdrow .ric svg { width: 15px; height: 15px; }
.libgroup .rdrow .rtx { flex: 1; min-width: 0; display: flex;
  flex-direction: column; gap: 2px; }
.libgroup .rdrow .rname { font-size: 14.5px; line-height: 1.3;
  color: var(--text); overflow: hidden; white-space: normal;
  overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.libgroup .rdrow .rmeta { font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libgroup .rdrow .rmeta .new { color: var(--accent2); font-weight: 600; }
.libgroup .rdrow .rtag { flex-shrink: 0; margin-top: 2px; font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.libgroup .rdrow .rtag.prog { color: var(--chip);
  font-weight: 600; }
.libgroup .rdrow .rbar { position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--chip); opacity: .75; }
.libgroup .rdrow.done .rname { color: var(--dim); }
.libgroup .rdrow .newdot { display: none; }
.flmore { display: block; width: 100%; margin: 0 0 4px; padding: 7px 12px;
  border: 0; background: none; color: var(--dim); font: inherit;
  font-size: 12.5px; text-align: left; cursor: pointer;
  transition: color .15s; }
.flmore:hover { color: var(--course, var(--text)); }
.rdrow .rpct.nil { color: var(--faint); }
.flrow .rmeta .new { color: var(--accent2); font-weight: 600; }

.readerhead { display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 4px; flex-shrink: 0; }
.readerhead .readermenu { width: 50px; height: 44px; padding: 0;
  justify-content: center; gap: 0; border: none; background: none;
  border-radius: 10px; color: var(--text); position: relative; top: 3px;
  transition: color .15s, background .15s; }
.readerhead .readermenu:hover { color: #fff;
  background: rgba(255,255,255,.06); }
.readerhead h2 { font-size: 17px; line-height: 1.2; }
.readerhead .crumb { color: var(--dim); font-size: 11.5px; }

/* the library: scheduled PDFs grouped by week */
.readerlist { flex: 1; overflow-y: auto; padding: 8px 16px 40px;
  max-width: 760px; width: 100%; margin: 0 auto; }
.rdweek { font-size: 11px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .07em; margin: 18px 2px 6px; }
.rdweek .rdweekcur { color: var(--accent); }
.rdrow { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 6px; background: var(--panel);
  cursor: pointer; transition: border-color .15s, background .15s; }
.rdrow:hover { border-color: var(--hodb); background: var(--panel2); }
.rdrow .rname { grid-column: 1; font-size: 13.5px; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rdrow .rmeta { grid-column: 1; font-size: 11px; color: var(--dim);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rdrow .rpct { grid-column: 2; grid-row: 1 / 3; align-self: center;
  font-size: 12px; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.rdrow.done .rname { color: var(--dim); text-decoration: line-through; }
.rdrow.done .rpct { color: var(--green); }

/* the e-book view: one page per screen, no scrolling; the page color
   (reader.js, READER_PAGES) sets --rdbg (the page), --rdfg (the chrome's
   lines and icons, as an rgb triple), --rdsheet (the settings sheet and
   contents) and the inks; AMOLED black by default */
:root { --rdbg: #000; --rdfg: 255 255 255; --rdsheet: #0c0c0e; }
.rdviewer { position: absolute; inset: 0; background: var(--rdbg);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.rdviewer.hidden { display: none; }
.libtabs.hidden, .mwbox.hidden { display: none; }
/* while a book is open the whole screen is black, the strips the
   browser and the phone draw around the page included */
html.rdblack, html.rdblack body { background: var(--rdbg); }
/* the header: quiet line icons on the black, the title between them; the
   type controls and the text color sit together in one faint pill */
.rdvhead { display: flex; align-items: center; gap: 6px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 6px;
  flex-shrink: 0; background: var(--rdbg); }
.rdvhead > .iconbtn { width: 44px; height: 44px; padding: 0;
  justify-content: center; color: rgb(var(--rdfg) / .42);
  background: none; border: none; border-radius: 10px;
  transition: color .15s, background .15s, transform .1s; }
.rdvhead > .iconbtn:hover { color: rgb(var(--rdfg) / .85);
  background: rgb(var(--rdfg) / .06); }
.rdvhead .iconbtn:active, .rdvtool:active { transform: scale(.93); }
.rdvtitle { flex: 1; min-width: 0; font-size: 12.5px;
  color: rgb(var(--rdfg) / .38); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 4px; cursor: pointer; }
.rdvtools { display: flex; align-items: center; flex-shrink: 0;
  gap: 6px; padding: 2px 4px; border-radius: 12px;
  border: 1px solid rgb(var(--rdfg) / .07); }
.rdvtool { min-width: 44px; height: 40px; padding: 0 8px; border: none;
  background: none; border-radius: 9px; color: rgb(var(--rdfg) / .5);
  font: 650 12px/1 Geist, Inter, system-ui, sans-serif; letter-spacing: .3px;
  cursor: pointer; display: grid; place-items: center;
  transition: color .15s, background .15s, transform .1s; }
.rdvtool:hover { color: rgb(var(--rdfg) / .9); background: rgb(var(--rdfg) / .06); }
/* the reading settings: a sheet up from the bottom over the dimmed page,
   a sample sentence on top; every control a fingertip (44px) tall */
.rdvsheet { position: absolute; inset: 0; z-index: 20; }
.rdvsheet.hidden { display: none; }
.rdvscrim { position: absolute; inset: 0; background: rgba(0,0,0,.55);
  animation: rdfade .16s ease-out; }
@keyframes rdfade { from { opacity: 0; } }
.rdvpanel { position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--rdsheet); border-top: 1px solid rgb(var(--rdfg) / .08);
  border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: rdsheet .2s cubic-bezier(.2,.8,.2,1);
  font-family: Geist, Inter, system-ui, sans-serif; }
@media (min-width: 640px) { .rdvpanel { left: 50%; width: 520px;
  margin-left: -260px; } }
@keyframes rdsheet { from { transform: translateY(24px); opacity: 0; } }
.rdvgrab { width: 38px; height: 4px; border-radius: 4px; margin: 0 auto 14px;
  background: rgb(var(--rdfg) / .18); }
.rdvsample { border: 1px solid rgb(var(--rdfg) / .07); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 18px; color: var(--rdink, #e4ddd0);
  line-height: var(--rdlh, 1.65); text-align: var(--rdalign, left);
  hyphens: auto; }
.rssec { margin: 0 0 16px; }
.rssec.rsline { display: flex; align-items: center;
  justify-content: space-between; }
.rssec.rsline .rslab { margin: 0; }
.rslab { font-size: 11.5px; color: rgb(var(--rdfg) / .42); margin: 0 2px 8px;
  letter-spacing: .02em; }
.rsrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rschip { min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgb(var(--rdfg) / .08); background: none;
  color: rgb(var(--rdfg) / .7); font-size: 14px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s; }
.rschip:hover { color: rgb(var(--rdfg)); background: rgb(var(--rdfg) / .04); }
.rschip.on { color: var(--rdhead, #f1ebe0);
  border-color: color-mix(in srgb, var(--rdink, #e4ddd0) 40%, transparent);
  background: color-mix(in srgb, var(--rdink, #e4ddd0) 7%, transparent); }
.rssize { display: flex; align-items: center; gap: 6px; }
.rssize b { min-width: 58px; text-align: center; font-weight: 500;
  font-size: 15px; color: var(--rdhead, #f1ebe0);
  font-variant-numeric: tabular-nums; }
.rsbtn { width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgb(var(--rdfg) / .08); background: none;
  color: rgb(var(--rdfg) / .8); font-size: 20px; line-height: 1; }
.rsbtn:hover { background: rgb(var(--rdfg) / .05); }
.rsdots { display: flex; flex-wrap: wrap; gap: 4px; }
.rsreset { display: block; width: 100%; min-height: 44px; margin: 6px 0 0;
  border: 1px solid rgb(var(--rdfg) / .07); border-radius: 12px;
  background: none; color: rgb(var(--rdfg) / .5); font: inherit;
  font-size: 13.5px; cursor: pointer; transition: color .15s, background .15s; }
.rsreset:hover { color: rgb(var(--rdfg) / .9); background: rgb(var(--rdfg) / .04); }
.rsdot { width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none;
  border: 1px solid transparent; }
.rsdot i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.rsdot.on { border-color: color-mix(in srgb, var(--rdink, #e4ddd0) 55%,
  transparent); }
.rdvstage { position: relative; flex: 1; overflow: hidden;
  background: var(--rdbg); touch-action: none; }
/* the converted book: one CSS column per screen. The browser paginates
   (margins, orphans, figures), so nothing clips and any font size reflows */
/* on a wide screen the text keeps a readable measure (about 70 to 90
   characters), centered; the Margins setting picks how wide */
.rdvp { position: absolute; inset: 0;
  /* close under the header on top, a calm band of black at the bottom so
     the last line never crowds the page count and the progress line */
  padding: 10px max(var(--rdpad, 30px),
    calc((100% - var(--rdmax, 720px)) / 2)) 38px;
  overflow: hidden; contain: layout paint; }
/* a tap turns the page: the text never selects (a long press or a quick
   double tap would, and a live selection then eats the next taps); the
   stage's touch-action: none already keeps zoom and scroll out */
.rdvstage { -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rdcols { height: 100%; column-fill: auto; font-size: 16px;
  line-height: var(--rdlh, 1.65); text-align: var(--rdalign, left);
  hyphens: auto;
  color: var(--rdink, #e4ddd0);   /* the picked ink, ivory by default */
  font-family: var(--bookfont, "Literata", Georgia,
    "Times New Roman", serif); }
/* turns are instant swaps: a sliding layer on a 1000-screen book would
   stall the phone, so the fade is on the viewport-sized wrapper */
.rdvp.rdturn { animation: rdturn .09s ease-out; }
@keyframes rdturn { from { opacity: .5; } to { opacity: 1; } }
.rdcols p { margin: 0 0 .85em; orphans: 2; widows: 2; }
.rdcols h2 { margin: .45em 0 .5em; font-size: 1.28em; font-weight: 650;
  color: var(--rdhead, #f1ebe0); line-height: 1.35; break-after: avoid-column; }
.rdcols ul { margin: 0 0 .85em 1.15em; }
.rdcols li { margin: .16em 0; }
.rdcols .rdsec { display: block; height: 18px; }
.rdcols figure.rdfig { margin: .2em 0 1em; break-inside: avoid; }
.rdcols figure.rdfig img { display: block; margin: 0 auto;
  background: rgb(var(--rdfg) / .04); border-radius: 4px; }
.rdcols figure.rdfig figcaption { font-size: .78em; opacity: .65;
  margin-top: .45em; text-align: center; }
.rdcols img.rdpage { display: block; margin: 0 auto;
  object-fit: contain; break-inside: avoid; }
.rdcols .hard { break-before: column; }
/* a near-empty file: say so instead of silently showing scraps */
.rdcols .rdnotice { border: 1px solid rgba(232,180,90,.5);
  background: rgba(232,180,90,.09); color: #ecc27a;
  border-radius: 10px; padding: 12px 14px; margin: 0 0 1.2em;
  font-size: 13.5px; line-height: 1.5; break-inside: avoid; }
.rdcols .rdnotice button { display: block; margin-top: 9px;
  background: rgba(232,180,90,.16); border: 1px solid rgba(232,180,90,.5);
  color: #f2d9a6; border-radius: 8px; padding: 7px 12px;
  font-size: 13px; cursor: pointer; font-family: Geist, Inter, sans-serif; }
.rdcols .rdnotice button:hover { background: rgba(232,180,90,.28); }
/* the contents overlay: tap the book's title */
.rdtoc { position: absolute; inset: 0; z-index: 12; background: var(--rdsheet);
  display: flex; flex-direction: column; }
.rdtoc.hidden { display: none; }
.rdtochead { display: flex; align-items: center; justify-content:
  space-between; padding: 14px 16px 10px; font-weight: 650;
  color: rgb(var(--rdfg)); font-size: 15px; }
.toclist { overflow: auto; padding: 0 8px 20px; }
.tocrow { padding: 10px 12px; border-radius: 8px; font-size: 14px;
  color: rgb(var(--rdfg) / .72); cursor: pointer; }
.tocrow:hover { background: rgb(var(--rdfg) / .06); color: rgb(var(--rdfg)); }
.rdvfont { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.rdvloading { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: rgb(var(--rdfg) / .45); font-size: 13px; }
.rdvloading.hidden { display: none; }
.rdvnav { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 42px; height: 76px; border: none; border-radius: 10px;
  background: rgb(var(--rdfg) / .06); color: var(--rdink); font-size: 26px;
  line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity .15s, background .15s; }
.rdvstage:hover .rdvnav, .rdvnav:active { opacity: 1; }
.rdvnav:hover { background: rgb(var(--rdfg) / .14); }
.rdvnav:disabled { opacity: 0 !important; pointer-events: none; }
.rdvnav.prev { left: 10px; }
.rdvnav.next { right: 10px; }
@media (hover: none), (pointer: coarse) { .rdvnav { display: none; } }
/* progress: a 2px hairline on the bottom edge, counter in the corner */
.rdprog { position: absolute; left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px); height: 2px;
  background: rgb(var(--rdfg) / .06); z-index: 6; }
/* the bright line is where you are, the faint one how much you read */
.rdprogfill, .rdprogread { position: absolute; left: 0; top: 0;
  height: 100%; width: 0%; background: var(--rdink, #e4ddd0);
  transition: width .25s; }
.rdprogfill { opacity: .45; }
.rdprogread { opacity: .14; }
.rdvcount { position: absolute; right: 10px; z-index: 6;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  font-size: 10px; color: color-mix(in srgb, var(--rdink, #fff) 38%, transparent);
  font-variant-numeric: tabular-nums; cursor: pointer;
  padding: 2px 5px; border-radius: 5px; }
.rdvcount:hover { color: rgb(var(--rdfg)); background: rgb(var(--rdfg) / .07); }
.rdvcount input { width: 40px; background: rgb(var(--rdfg) / .06);
  border: 1px solid rgb(var(--rdfg) / .18); border-radius: 5px;
  color: rgb(var(--rdfg)); font-size: 10px; padding: 1px 3px; text-align: center; }

/* reading progress on schedule pills: bottom hairline plus percentage */
.pill { position: relative; }
.pill .pprogb { position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 0 0 14px 6px; opacity: .85;
  pointer-events: none; }
.pill .pprog { grid-column: 3; grid-row: 2; justify-self: end;
  margin-right: 7px; align-self: center; color: var(--accent);
  font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pill.pproged { padding-top: 17.6px; }
.pill.done .pprogb, .pill.done .pprog { display: none; }

/* ---- file dialogs ---- */
/* the two-option file dialog (reader vs raw file) */
.filechoice { position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: center; justify-content: center;
  background: rgba(4,6,10,.65); }
.filechoice.hidden { display: none; }
.filechoice .fcbox { width: min(350px, 88vw); background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.filechoice .fctitle { font-size: 13px; font-weight: 600;
  color: var(--text); margin-bottom: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.filechoice .fcremark { font-size: 10px; color: var(--faint);
  letter-spacing: .06em; margin-bottom: 11px; }
.filechoice .fcbtn { display: block; width: 100%; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-size: 13px;
  cursor: pointer; margin-bottom: 8px; text-align: left;
  transition: border-color .15s, background .15s; }
.filechoice .fcbtn:hover { border-color: var(--hodb); }
.filechoice .fcbtn.primary { border-color: var(--accent);
  background: rgba(123,108,230,.16); }
.filechoice .fcbtn:last-child { margin-bottom: 0; }
/* the dark-mode PDF: a bare overlay showing the document with inverted pages */
.pdfdark { position: fixed; inset: 0; z-index: 68;
  background: #0b0c0f; overflow-y: auto; }
.pdfdark.hidden { display: none; }
.pdfdarkpages { padding: 18px 0 30px; }
.pdfdarkpage { display: block; width: min(92%, 900px); height: auto;
  margin: 0 auto 22px; border-radius: 4px;
  /* invert turns white pages near-black; the hue rotates back so images and
     color accents keep their natural look */
  filter: invert(0.92) hue-rotate(180deg);
  box-shadow: 0 2px 14px rgba(0,0,0,.55); }
.pdfdarkstatus { color: var(--dim); font-size: 12px;
  text-align: center; padding: 30px 0; }
.pdfdarkx { position: fixed; top: 12px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(22,27,34,.85);
  color: var(--dim); font-size: 14px; cursor: pointer; }
.pdfdarkx:hover { color: var(--text); border-color: var(--dim); }
/* the reader's font picker: each option is set in its own typeface */
.rfontpop { position: fixed; top: 60px; right: 16px; z-index: 80;
  width: min(300px, 92vw); background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.rfontpop.hidden { display: none; }
.rfontpop .fphead { font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); padding: 5px 8px 6px; }
.rfontopt { display: flex; align-items: baseline; gap: 8px; width: 100%;
  border: 1px solid transparent; background: none; color: var(--text);
  border-radius: 8px; padding: 0 10px; min-height: 44px;
  align-items: center; font-size: 15px; cursor: pointer; text-align: left; }
.rfontopt:hover { background: var(--panel2); }
.rfontopt.on { border-color: color-mix(in srgb, var(--accent) 45%,
  transparent); background: color-mix(in srgb, var(--accent) 9%,
  transparent); }
.rfontopt .fname { flex: 1; min-width: 0; }
.rfontopt .fnote { font-size: 10px; color: var(--dim);
  font-family: Geist, Inter, system-ui, sans-serif; }
.rfontopt.on .fnote { color: var(--accent2); }
.filechoice .fcsub { display: block; font-size: 11px; color: var(--dim);
  margin-top: 1px; }

/* ---- exam trainer: header, stats, questions ---- */
.examhead { display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 4px; flex-shrink: 0; }
@media (max-width: 640px) {
  .examhead { padding: 8px 12px 2px; gap: 10px; }
  .examtitle h2 { font-size: 16px; }
  .examtitle .crumb { font-size: 10.5px; white-space: nowrap;
    max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
}
.examhead .exammenu { width: 50px; height: 44px; padding: 0;
  justify-content: center; gap: 0; border: none; background: none;
  border-radius: 10px; color: var(--text); position: relative; top: 3px;
  transition: color .15s, background .15s; }
.examhead .exammenu:hover { color: #fff;
  background: rgba(255,255,255,.06); }
.examtitle h2 { font-size: 17px; line-height: 1.2; }
.examtitle .crumb { color: var(--dim); font-size: 11.5px; }
/* the crumb names the trainer's course; tapping it lists the others */
.coursepick { display: block; border: none; background: none; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer; }
.coursepick::after { content: " \25BE"; font-size: .9em; }
.coursepick:hover { color: var(--text); }
.coursemenu { position: fixed; z-index: 60; min-width: 220px;
  padding: 5px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel, #16181d);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.coursemenu button { display: block; width: 100%; text-align: left;
  border: none; background: none; font-family: inherit; font-size: 13px;
  color: var(--dim); padding: 8px 10px; border-radius: 7px;
  cursor: pointer; }
.coursemenu button:hover { color: var(--text);
  background: rgba(255,255,255,.05); }
.coursemenu button.on { color: var(--text); font-weight: 600; }
.examtopstats { margin-left: auto; display: flex; gap: 20px; }
.examheadbtns { display: flex; gap: 6px; }
/* the all-time panel overlays below the header so it never shoves the
   question down */
#examstats.hidden { display: none; }
.examstats { position: absolute; top: 64px; left: 50%;
  transform: translateX(-50%); z-index: 6;
  width: min(680px, calc(100% - 24px));
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  animation: cardin .22s cubic-bezier(.2,.7,.3,1); }
.strow { display: flex; gap: 22px; flex-wrap: wrap; }
.strow > div { display: flex; flex-direction: column; gap: 1px; }
.strow b { font-size: 17px; font-variant-numeric: tabular-nums; }
.strow span { font-size: 10.5px; color: var(--dim); }
/* per-domain progress: one row per topic with a coverage count and an
   accuracy bar; thin domains get a note instead of a fake percentage */
.proglist { margin-top: 12px; display: flex; flex-direction: column;
  gap: 9px; }
.progrow { display: grid; grid-template-columns: 16px minmax(0, 1fr)
  auto auto; gap: 0 8px; align-items: baseline; font-size: 12px; }
.progrow .pname { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--dim2); }
.progrow .pcount { color: var(--dim); font-size: 11px;
  font-variant-numeric: tabular-nums; }
.progrow .ppct { font-weight: 700; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.progrow .ppct.good { color: var(--green); }
.progrow .ppct.mid { color: #ffcf8a; }
.progrow .ppct.bad { color: var(--red); }
.progbar { grid-column: 1 / -1; height: 4px; margin-top: 4px;
  border-radius: 2px; background: var(--panel2); overflow: hidden; }
.progbar i { display: block; height: 100%; border-radius: 2px; }
.progbar i.good { background: var(--green); }
.progbar i.mid { background: #ffcf8a; }
.progbar i.bad { background: var(--red); }
.progrow.low .pname { color: var(--dim); }
.progrow .plow { grid-column: 2 / 4; font-size: 10.5px;
  color: var(--dim); opacity: .75; }
.qactions .primary.ghost { background: none; border: 1px solid var(--border);
  color: var(--dim); }
.qactions .primary.ghost:hover { color: var(--text); }

/* the replay badge on a miss-replay question: amber, never a punishment color */
.qreplay { margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--amber, #ffb454); }
.tnum { font-style: normal; font-size: 10px; color: var(--dim);
  font-variant-numeric: tabular-nums; text-align: right; opacity: .85; }

.exammain { flex: 1; min-height: 0; overflow-y: auto; display: flex;
  flex-direction: column; align-items: center; padding: 18px 20px 46px; }
.examcard { width: min(660px, 100%); animation: cardin .22s
  cubic-bezier(.2,.7,.3,1); }
@keyframes cardin { from { opacity: 0; transform: translateY(7px); } }

.qmeta { display: flex; gap: 7px; align-items: baseline;
  margin-bottom: 13px; font-size: 12px; color: var(--dim); }
.qdot { color: var(--dim2); }
.qdiff { display: inline-flex; gap: 3px; align-items: center; }
.qdiff i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); }
.qdiff i.on { background: var(--dim2); }
.qstem { font-size: 16.5px; font-weight: 650; line-height: 1.5;
  margin-bottom: 15px; }

.qcode { background: #0d1017; border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 18px 14px; overflow-x: auto;
  margin-bottom: 16px; }
.qcode code { font: 800 13px/1.75 "JetBrains Mono", ui-monospace,
  "SF Mono", Menlo, monospace;
  color: var(--text); white-space: pre; }
.tok-kw { color: var(--tok-kw); }
.tok-str { color: var(--tok-str); }
.tok-num, .tok-bool { color: var(--tok-num); }
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-bi { color: var(--tok-bi); }

.qoptions { display: grid; gap: 8px; }
/* terminal output can be multi-line: keep the line structure visible */
.qopt .otext { white-space: pre-line; }
.qopt { display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 14px; cursor: pointer;
  color: var(--text); font-size: 14px; line-height: 1.45; width: 100%;
  transition: border-color .12s, background .12s; }
.qopt:hover:not(:disabled) { border-color: var(--hodb);
  background: var(--panel2); }
.qopt .key { flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 6px; border: 1px solid var(--border); color: var(--dim);
  font-size: 11px; font-weight: 700; display: flex; align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums; }
/* answer states: right option green with a filled key, wrong pick red,
   the rest fades */
.qopt.right { border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent); }
.qopt.right .key { background: var(--green); border-color:
  var(--green); color: #fff; }
.qopt.wrong { border-color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent); }
.qopt.wrong .key { border-color: var(--red); color: var(--red); }
.qopt.dim { opacity: .5; }
.qopt.right, .qopt.wrong, .qopt.dim { pointer-events: none; }
.qopt:disabled { cursor: default; }
.qopt code { font: 600 12.5px "JetBrains Mono", ui-monospace, Menlo,
  monospace; }

.qactions { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-top: 16px; }
.qactions .primary { background: var(--accent); border: none;
  color: #fff; border-radius: 10px; padding: 11px 20px; font-size: 14px;
  font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s; }
.qactions .primary:hover:not(:disabled) { background: var(--hov); }
.qactions .primary:active:not(:disabled) { transform: translateY(1px); }
.qactions .primary:disabled { opacity: .45; cursor: default; }
.qhint { align-self: center; color: var(--dim); font-size: 11.5px; }

/* the verdict line: colored words, no panels */
.qverdict { font-size: 13px; font-weight: 650; }
/* why the key is right, shown after a pick when the bank explains it */
.qwhy { margin: 12px 0 2px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02);
  font-size: 13px; line-height: 1.55; color: var(--dim); }
.qverdict.good { color: var(--green); }
.qverdict.bad { color: var(--red); }
.qverdict b { font-weight: 750; }
.qverdict .left { color: var(--dim); font-weight: 500; }

@keyframes popnum { 0% { transform: scale(1); }
  40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.popnum { animation: popnum .4s cubic-bezier(.2,.7,.3,1);
  display: inline-block; }

/* the streak chip: flame, current run, best; the flame warms at 5+ */
.flamebox { display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); }
.flamebox svg { width: 13px; height: 17px; fill: var(--border);
  transition: fill .2s; }
.flamebox.hot svg { fill: #ffcf8a; }
.flamebox b { font-size: 15px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.flamebox.hot b { color: #ffcf8a; }
.flamebox .fbl { font-size: 9.5px; letter-spacing: .4px;
  color: var(--dim); }
.flamebox .fbdim { font-size: 10px; color: var(--dim2); }
.flamebox .fbbest { font-size: 12px; color: var(--dim);
  font-weight: 600; }

/* the intro panel's tree: sections fold into exercises and questions */
.xtree { max-width: 620px; margin: 18px auto 0; text-align: left; }
.xsec { border: 1px solid var(--border); border-radius: 11px;
  background: var(--panel); margin-bottom: 8px; overflow: hidden; }
.xsechead { display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer; transition: background .15s; }
.xsechead:hover { background: rgba(255,255,255,.03); }
.xsechead .no { font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--dim); flex-shrink: 0; }
.xsechead .st { flex: 1; min-width: 0; font-size: 13px;
  font-weight: 650; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.xsechead .sv { font-size: 11px; color: var(--dim); flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.xsechead .pbar { width: 64px; height: 3px; border-radius: 99px;
  background: rgba(255,255,255,.06); overflow: hidden; flex-shrink: 0; }
.xsechead .pbar i { display: block; height: 100%; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width .3s; }
.xsec.done .xsechead .pbar i { background:
  color-mix(in srgb, var(--green) 60%, transparent); }
.xsec.done .xsechead .sv { color: var(--green); }
.xsechead .chev { color: var(--dim2); flex-shrink: 0;
  transition: transform .18s; }
.xsec.open .xsechead .chev { transform: rotate(90deg); }
.xsec.open .xsechead { border-bottom: 1px solid var(--border); }
.xsecbody { padding: 4px 13px 10px; max-height: 46vh; overflow-y: auto; }
.xex { margin-top: 8px; }
.xexhead { display: flex; align-items: baseline; gap: 8px;
  padding: 3px 2px 4px; }
.xexhead .no { font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--accent2); flex-shrink: 0; }
.xexhead .t { flex: 1; min-width: 0; font-size: 11.5px;
  font-weight: 650; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.xexhead .n { font-size: 10px; color: var(--dim); flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.xqrow { display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 8px; cursor: pointer; font-size: 11.5px;
  color: var(--dim); transition: background .12s, color .12s; }
.xqrow:hover { background: rgba(255,255,255,.04); color: var(--text); }
.xqrow .mark { font-weight: 700; width: 13px; text-align: center;
  flex-shrink: 0; }
.xqrow.ok .mark { color: var(--green); }
.xqrow.bad .mark { color: var(--red); }
.xqrow:not(.ok):not(.bad) .mark { color: var(--dim); opacity: .5; }
.xqrow .qt { flex: 1; min-width: 0; overflow: hidden; white-space:
  nowrap; text-overflow: ellipsis; }
.xqrow .qtag { font-size: 9px; font-weight: 600;
  color: var(--dim); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 4px; margin-left: 6px; }
.xqrow .vno { font-size: 9.5px; color: var(--dim2); flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.xqrow .qdiff { display: inline-flex; gap: 3px; flex-shrink: 0; }
.xqrow .qdiff i { width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.14); }
.xqrow .qdiff i.on { background: var(--dim2); }

@media (max-width: 900px) {
  .exammain { padding: 14px 12px 30px; }
  .examhead { padding: 8px 10px 2px; gap: 8px; }
  .readerhead { padding: 8px 10px 2px; gap: 8px; }
  .readerlist { padding: 8px 10px 40px; }
  .rdvnav { width: 38px; height: 64px; }
  .rdvnav.prev { left: 6px; }
  .rdvnav.next { right: 6px; }
  .examtopstats { gap: 10px; }
  .flamebox { padding: 6px 9px; gap: 5px; }
  .flamebox .fbl { display: none; }
  /* the stats overlay hugs the tighter header */
  .examstats { top: 56px; }
}

/* phones: tree rows give the title room; bar and dots shrink first */
@media (max-width: 640px) {
  .xsechead .pbar { width: 34px; }
  .xqrow .qdiff { display: none; }
  .xqrow .vno { font-size: 9px; }
  .xexhead .n { display: none; }
  .qactions { gap: 8px; }
  .qactions .primary { padding: 10px 16px; font-size: 13px; }
}

/* ---- schedule: course sessions and task blocks ---- */
/* the session: hairline on top, text indented off the spine. Baseline
   alignment keeps type and course name on one line despite different sizes */
.lecture-row { display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: 7px; row-gap: 1px; padding: 8px 0 8px 10px;
  margin-bottom: 8px; font-size: 12px; color: var(--dim2);
  position: relative; }
.lecture-row::before { content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--border); }
.lecture-row .lstack { min-width: 0; }
/* time and location on their own line, under the session type */
.lecture-row .lmeta { flex: 1 1 100%; font-size: 11px; }
.lecture-row b { color: var(--text); font-weight: 600; font-size: 12.5px; }
.lecture-row .ls { color: var(--dim); opacity: .55; }
.lecture-row .coursename { font-weight: 700;
  color: var(--course, var(--text)); }
/* the course name links to Brightspace, with a course-colored arrow that
   grows a label on hover */
.coursename.bspace { display: inline-flex; align-items: baseline;
  gap: 4px; text-decoration: none; }
.coursename.bspace:hover { color: var(--course); }
.coursename.bspace .blbl { display: none; }
.coursename.bspace:hover .blbl { display: inline; }
.coursename.bspace:hover .cname { text-decoration: underline;
  text-underline-offset: 2px; }

details.reading-body summary { list-style: none; cursor: pointer; }
details.reading-body summary::-webkit-details-marker { display: none; }
details.reading-body .cite { display: block; margin-top: 7px;
  padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--dim); }
details.reading-body .c-open { display: none; }
details.reading-body[open] .c-closed { display: none; }
details.reading-body[open] .c-open { display: inline; }
details.reading-body .lit { color: var(--dim); font-size: 12px;
  margin-top: 6px; }

/* tasks hang in one block below the course's sessions, set off by the
   course-colored accent line (drawn by .group::before so it reaches the
   dot above). The right inset is small on purpose: pills and the citation
   button almost reach the card's right border */
.taskblock { margin: 4px 6px 0 var(--tb-x); padding: 0; }
.taskblock > :last-child { margin-bottom: 0; }
/* pills meet the spine at its right edge: the pull is derived, so the edge
   stays flush at every breakpoint's inset; square left corners */
.taskblock .pill { margin-left: calc(var(--spine-w) - var(--tb-x));
  border-radius: 0 14px 14px 0; border-left-color: transparent; }
.taskblock .card { margin-left: calc(var(--spine-w) - var(--tb-x)); }
.taskblock .pill:hover { border-left-color: transparent; }
/* reading with file pills: borderless block, citation in a popover;
   readings without files stay a plain task card */
.card.reading .readrow { display: flex; align-items: center;
  gap: 11px; flex: 1; min-width: 0; }
details.reading-body { flex: 1; min-width: 0; }
.readingblock { position: relative; margin: 2px 0 6px; }
.readingblock .readhead { display: flex; align-items: flex-start;
  gap: 8px; margin-bottom: 7px; }
.readingblock .rtext { flex: 1; min-width: 0; }
.readingblock .rtitle { font-size: 13.5px; }
/* right corners match the pills' right edge so the chip doesn't bulge past */
.citebtn { flex-shrink: 0; margin-top: 1px; padding: 3px 9px;
  border-radius: 6px 14px 14px 6px; border: 1px solid var(--border);
  background: none; color: var(--dim); font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: color .15s, border-color .15s, background .15s; }
.citebtn:hover { color: var(--text); border-color: var(--hodb);
  background: var(--panel2); }
.citepop { position: absolute; top: 34px; right: 0; z-index: 6;
  width: min(440px, calc(100vw - 90px));
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  line-height: 1.5; color: var(--dim); white-space: pre-wrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.citepop.hidden { display: none; }
.citepop.floating { position: fixed; right: auto; z-index: 60;
  overflow-y: auto; overscroll-behavior: contain; }
/* a split reading: one reference per work, a quiet label over each,
   hairlines between */
.citepop.list { white-space: normal; padding: 4px 14px; }
.citepop .cref { padding: 10px 0; }
.citepop .cref + .cref { border-top: 1px solid var(--border); }
.citepop .clab { font: 500 10px/1.3 "JetBrains Mono", ui-monospace,
  monospace; letter-spacing: .6px; text-transform: uppercase;
  color: var(--faint); margin-bottom: 4px; }
.citepop .ctext { color: var(--text); padding-left: 1.2em;
  text-indent: -1.2em; overflow-wrap: anywhere; }
.reading-files { display: flex; flex-direction: column; gap: 8px; }
.reading-files .pill { margin-bottom: 0; }

/* Continue reading: the reading or book left halfway, at the top of the
   Library, drawn as its chips are */
.rdcontinue { position: relative; overflow: hidden; display: flex;
  align-items: center; gap: 12px; width: 100%; margin: 0 0 12px;
  padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
  background: color-mix(in srgb, var(--course, var(--accent)) 6%, #111014);
  border: 1px solid color-mix(in srgb, var(--course, var(--accent)) 16%, transparent);
  transition: background .15s, border-color .15s; }
.rdcontinue:hover { border-color: color-mix(in srgb, var(--course, var(--accent)) 30%, transparent); }
.rdcontinue .ric { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: var(--course, var(--accent));
  background: color-mix(in srgb, var(--course, var(--accent)) 12%, transparent); }
.rdcontinue .rtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdcontinue .rclab { font-size: 11px; letter-spacing: .03em;
  color: var(--course, var(--accent)); }
.rdcontinue .rname { font-size: 14.5px; line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rdcontinue .rmeta { font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.rdcontinue .rcgo { flex-shrink: 0; font-size: 22px; color: var(--faint); }
.rdcontinue .rbar { position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--course, var(--accent)); opacity: .75; }

/* the page colors in the settings sheet: a swatch of each page with "Aa"
   in its ink, the name under it */
.rspages { display: flex; gap: 6px; }
.rspage { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 5px; padding: 4px 0 2px; border: 0;
  background: none; cursor: pointer; color: rgb(var(--rdfg) / .55);
  font: 500 11.5px/1.2 Geist, Inter, system-ui, sans-serif; }
.rspage i { display: grid; place-items: center; width: 100%; max-width: 64px;
  height: 46px; border-radius: 12px; font: 600 15px/1 var(--bookfont, Georgia, serif);
  font-style: normal; border: 1px solid rgb(var(--rdfg) / .12);
  transition: border-color .15s, box-shadow .15s; }
.rspage.on { color: rgb(var(--rdfg) / .92); }
.rspage.on i { border-color: rgb(var(--rdfg) / .55);
  box-shadow: 0 0 0 2px var(--rdsheet), 0 0 0 3px rgb(var(--rdfg) / .35); }
html.rdlightpage .rdvscrim { background: rgba(0,0,0,.22); }
/* the one-time tip at the gear (update.js, readerNewsTip): a small card
   under the header, a notch pointing at the gear */
.rdtip { position: absolute; right: 10px; z-index: 15; width: min(272px, calc(100% - 20px));
  padding: 12px 14px 8px; border-radius: 14px; background: var(--rdsheet);
  border: 1px solid rgb(var(--rdfg) / .12); color: rgb(var(--rdfg) / .78);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font: 400 13.5px/1.45 Geist, Inter, system-ui, sans-serif;
  animation: rdsheet .22s cubic-bezier(.2,.8,.2,1); }
.rdtip::before { content: ""; position: absolute; top: -6px; right: var(--tipx, 22px);
  width: 10px; height: 10px; background: var(--rdsheet); transform: rotate(45deg);
  border-left: 1px solid rgb(var(--rdfg) / .12); border-top: 1px solid rgb(var(--rdfg) / .12); }
.rdtip.out { opacity: 0; transition: opacity .2s; }
.rdtip p { margin: 0 0 6px; }
.rdtip b { font-weight: 600; color: rgb(var(--rdfg) / .95); }
.rdtipbtns { display: flex; justify-content: flex-end; gap: 4px; }
.rdtipbtns button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: rgb(var(--rdfg) / .55); font: 500 13px/1 Geist, Inter, system-ui, sans-serif;
  cursor: pointer; }
.rdtipbtns .rdtipgo { color: var(--rdhead); background: rgb(var(--rdfg) / .07); }
/* the Page row lit once when the tip's Show me opens the sheet */
.rssec.rshl { border-radius: 14px; animation: rshl 2.4s ease-out; }
@keyframes rshl { 0%, 40% { box-shadow: 0 0 0 6px rgb(var(--rdfg) / .08);
  background: rgb(var(--rdfg) / .08); } 100% { box-shadow: 0 0 0 6px transparent; } }