/*!
 * Lectern: reading settings. Pairs with lectern.js.
 *
 * A site fits it to its own look by setting any of these on :root (all optional):
 *   --lectern-bg          the panel's paper          --lectern-ink        its text
 *   --lectern-muted       labels and quiet text      --lectern-rule       hairlines
 *   --lectern-accent      the chosen option          --lectern-on-accent  text on the accent
 *   --lectern-page        the preview's paper (defaults to --lectern-bg)
 *   --lectern-font-ui     labels and buttons         --lectern-font-display  the preview's title
 *   --lectern-font-text   the preview's text (used only without preview.className)
 *   --lectern-base        the preview's text size at 100% (default 18px)
 * Without them it uses its own calm palette for Bright, Sepia and Dark.
 *
 * The reading mode reads its column width from --lectern-reader-measure (default 680px).
 *
 * Lectern sets on <html>:  --lectern-scale (e.g. 1.16), data-lectern-light (bright | sepia | dark),
 * data-lectern-large while an accessibility size is chosen, and whatever the site configured.
 */

/* ---------------------------------------------------------------- own palette, used when the site sets none */
.lectern,.lectern-reader{
  --_bg:#FBFAF7; --_ink:#1D232A; --_muted:#646C74; --_rule:#DEDAD2; --_accent:#2F4F45; --_on:#FBFAF7;
  --_track:#7C8288; --_shadow:rgba(16,22,28,.22);
}
:where(:root[data-lectern-light="sepia"]) :is(.lectern,.lectern-reader){
  --_bg:#F3EBDC; --_ink:#2E261C; --_muted:#6E6150; --_rule:#DCCFB8; --_accent:#6B4A2B; --_on:#F6EFE2; --_track:#8C7D68;
}
:where(:root[data-lectern-light="dark"]) :is(.lectern,.lectern-reader){
  --_bg:#121A22; --_ink:#E8E4DC; --_muted:#9AA4AE; --_rule:#26323D; --_accent:#E8E4DC; --_on:#121A22;
  --_track:#4A5662; --_shadow:rgba(0,0,0,.55);
}
.lectern,.lectern-reader{
  --l-bg:var(--lectern-bg,var(--_bg)); --l-ink:var(--lectern-ink,var(--_ink)); --l-muted:var(--lectern-muted,var(--_muted));
  --l-rule:var(--lectern-rule,var(--_rule)); --l-accent:var(--lectern-accent,var(--_accent));
  --l-on:var(--lectern-on-accent,var(--_on)); --l-page:var(--lectern-page,var(--l-bg));
  --l-ui:var(--lectern-font-ui,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);
  --l-track:var(--lectern-track,color-mix(in srgb,var(--l-ink) 58%,var(--l-bg)));
  --l-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------- the dialog */
/* the page stays still behind the panel: no scrolling, and the scrollbar's space is kept */
:root.lectern-locked{overflow:hidden;scrollbar-gutter:stable;}
/* a sheet that rises from the foot of the screen, as in Libby: the page stays in view above it */
.lectern{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:end center;padding:0;
  -webkit-tap-highlight-color:transparent;}
.lectern[hidden]{display:none;}
/* a plain dim, not a blur: blurring a whole page is slow on modest phones */
.lectern-backdrop{position:absolute;inset:0;background:rgba(10,15,20,.44);opacity:0;transition:opacity .24s var(--l-ease);}
.lectern-sheet{position:relative;display:flex;flex-direction:column;width:min(620px,100%);max-height:min(90vh,880px);
  background:var(--l-bg);color:var(--l-ink);border-radius:16px 16px 0 0;overflow:hidden;outline:none;
  box-shadow:0 -18px 60px var(--_shadow),0 -1px 0 color-mix(in srgb,var(--l-rule) 70%,transparent);
  transform:translateY(100%);transition:transform .38s var(--l-ease);}
.lectern[data-open] .lectern-backdrop{opacity:1;}
.lectern[data-open] .lectern-sheet{transform:none;}
.lectern-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;}

.lectern-grip{position:absolute;top:2px;left:50%;z-index:2;transform:translateX(-50%);display:grid;place-items:center;
  width:96px;height:30px;padding:0;border:0;border-radius:15px;background:transparent;color:var(--l-ink);cursor:grab;
  opacity:.62;transition:opacity .18s,background-color .18s;touch-action:none;}
.lectern-grip:active{cursor:grabbing;}
.lectern-grip svg{width:24px;height:10px;}
.lectern-grip:hover{opacity:1;background:color-mix(in srgb,var(--l-ink) 7%,transparent);}

/* ---------------------------------------------------------------- the live preview */
.lectern-preview{position:relative;flex:none;height:clamp(180px,32vh,268px);overflow:hidden;background:var(--l-page);
  border-bottom:1px solid var(--l-rule);}
.lectern-preview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--l-page) 0%,transparent),
    color-mix(in srgb,var(--l-page) 70%,var(--l-rule)));}
.lectern-page{padding:36px 36px 0;font-size:calc(var(--lectern-base,18px) * var(--lectern-scale,1));
  transition:font-size .2s var(--l-ease);}
/* the heading stays put; only the reading text follows the slider, as it does on the page */
.lectern-head{font-size:16px;}
.lectern-kicker{margin:0 0 .85em;padding:0 0 .55em;border-bottom:1px solid var(--l-ink);font-family:var(--l-ui);
  font-size:.72em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
.lectern-title{margin:0 0 .45em;font-family:var(--lectern-font-display,Georgia,"Times New Roman",serif);
  font-size:1.62em;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;}
.lectern-by{margin:0 0 1.15em;font-family:var(--l-ui);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:var(--l-muted);}
.lectern-text p{margin:0 0 .9em;font-family:var(--lectern-font-text,Georgia,"Times New Roman",serif);font-size:1em;line-height:1.62;}
.lectern-page p:last-child{margin-bottom:0;}
/* a narrow preview reads best set ragged-right, whatever the page itself does */
.lectern-page p{text-align:start;}

/* ---------------------------------------------------------------- controls */
.lectern-controls{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 36px 26px;
  font-family:var(--l-ui);}
.lectern-col:empty{display:none;}
.lectern-sec{margin:0 0 22px;}
.lectern-label{margin:0 0 11px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--l-muted);}

/* text scale: a stepped slider */
.lectern-scale{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;}
.lectern-a{font-family:var(--lectern-font-display,Georgia,serif);color:var(--l-muted);line-height:1;user-select:none;}
.lectern-a-s{font-size:14px;}
.lectern-a-l{font-size:24px;}
.lectern-track{--th:20px;position:relative;height:54px;border-radius:12px;background:var(--l-track);
  transition:box-shadow .18s;}
.lectern-track:has(.lectern-range:focus-visible){box-shadow:0 0 0 2px var(--l-bg),0 0 0 4px var(--l-accent);}
.lectern-dots{position:absolute;inset:0 7px;pointer-events:none;}
.lectern-dot{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--l-bg);opacity:.92;left:calc(var(--th) / 2 + (100% - var(--th)) * var(--i) / var(--lectern-steps));}
.lectern-dot-l{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;}
.lectern-range{position:absolute;inset:0 7px;width:calc(100% - 14px);height:100%;margin:0;padding:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;outline:none;}
.lectern-range::-webkit-slider-runnable-track{height:100%;background:transparent;border:0;}
.lectern-range::-moz-range-track{height:100%;background:transparent;border:0;}
.lectern-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--th);height:42px;margin-top:6px;
  border:0;border-radius:7px;background:var(--l-bg) center/9px 15px no-repeat
  linear-gradient(to right,var(--l-muted) 0 1.5px,transparent 1.5px 7.5px,var(--l-muted) 7.5px 9px);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.16);transition:transform .15s var(--l-ease);}
.lectern-range::-moz-range-thumb{width:var(--th);height:42px;border:0;border-radius:7px;
  background:var(--l-bg) center/9px 15px no-repeat
  linear-gradient(to right,var(--l-muted) 0 1.5px,transparent 1.5px 7.5px,var(--l-muted) 7.5px 9px);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.16);}
.lectern-range:active::-webkit-slider-thumb{transform:scale(1.04);}

/* accessibility sizes: a switch */
.lectern-switchrow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-4px 0 22px;padding:14px 0;
  border-bottom:1px solid var(--l-rule);}
.lectern-switchlabel{font-size:14px;color:var(--l-muted);}
.lectern-switch{position:relative;flex:none;width:52px;height:30px;padding:0;border:0;border-radius:15px;cursor:pointer;
  background:color-mix(in srgb,var(--l-ink) 22%,var(--l-bg));transition:background-color .2s var(--l-ease);}
.lectern-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--l-bg);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--l-ease);}
.lectern-switch[aria-checked="true"]{background:var(--l-accent);}
.lectern-switch[aria-checked="true"] .lectern-knob{transform:translateX(22px);background:var(--l-on);}
.lectern-switch:focus-visible{outline:2px solid var(--l-accent);outline-offset:3px;}

/* lighting: three illustrated tiles */
.lectern-lights{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--l-rule);border-radius:8px;overflow:hidden;}
.lectern-light{position:relative;display:block;aspect-ratio:16/10;padding:0;border:0;border-left:1px solid var(--l-rule);
  background:var(--l-bg);cursor:pointer;overflow:hidden;}
.lectern-light:first-child{border-left:0;}
.lectern-light svg{display:block;width:100%;height:100%;filter:grayscale(1) contrast(.86) brightness(1.06);opacity:.62;
  transition:filter .28s var(--l-ease),opacity .28s var(--l-ease),transform .5s var(--l-ease);}
.lectern-light:hover svg{filter:grayscale(.35);opacity:.9;}
.lectern-light[aria-checked="true"] svg{filter:none;opacity:1;transform:scale(1.03);}
.lectern-light-name{position:absolute;left:0;right:0;bottom:0;padding:6px 9px 5px;text-align:left;font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l-muted);
  background:color-mix(in srgb,var(--l-bg) 84%,transparent);transition:background-color .2s,color .2s;}
.lectern-light[aria-checked="true"] .lectern-light-name{background:var(--l-accent);color:var(--l-on);}
.lectern-light:focus-visible{outline:2px solid var(--l-accent);outline-offset:-2px;z-index:1;}

/* further choices: segmented */
.lectern-seg{display:flex;border:1px solid var(--l-rule);border-radius:8px;overflow:hidden;}
.lectern-seg button{flex:1;padding:10px 6px;border:0;border-left:1px solid var(--l-rule);background:transparent;
  color:var(--l-ink);font:inherit;font-size:13px;cursor:pointer;transition:background-color .18s,color .18s;}
.lectern-seg button:first-child{border-left:0;}
.lectern-seg button:hover{background:color-mix(in srgb,var(--l-ink) 6%,transparent);}
.lectern-seg button[aria-checked="true"]{background:var(--l-accent);color:var(--l-on);}
.lectern-seg button:focus-visible{outline:2px solid var(--l-accent);outline-offset:-2px;}

/* footer */
.lectern-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding-top:18px;
  border-top:1px solid var(--l-rule);}
.lectern-reset{padding:6px 2px;border:0;background:none;font:inherit;font-size:13px;color:var(--l-muted);cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .18s,color .18s;}
.lectern-reset:hover{color:var(--l-ink);text-decoration-color:currentColor;}
.lectern-done{padding:10px 24px;border:0;border-radius:999px;background:var(--l-accent);color:var(--l-on);font:inherit;
  font-size:13px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:transform .15s var(--l-ease),opacity .15s;}
.lectern-done:hover{opacity:.9;}
.lectern-done:active{transform:scale(.97);}
.lectern button:focus-visible{outline:2px solid var(--l-accent);outline-offset:2px;}


/* ---------------------------------------------------------------- reading mode: the text, alone */
/* While it lasts, the rest of the page steps out and the reading mode is the page: the document itself
   scrolls, so a phone's browser folds its own bars away as the reader reads on, as on any article. */
:root.lectern-reading body > :not(.lectern-reader):not(.lectern){display:none !important;}
.lectern-reader{position:relative;min-height:100vh;min-height:100dvh;outline:none;
  background:var(--l-page);color:var(--l-ink);opacity:0;transition:opacity .32s var(--l-ease);
  -webkit-tap-highlight-color:transparent;}
.lectern-reader[hidden]{display:none;}
.lectern-reader[data-open]{opacity:1;}

.lectern-reader-progress{position:fixed;top:0;left:0;right:0;z-index:3;height:2px;background:var(--l-accent);
  transform:scaleX(0);transform-origin:0 50%;opacity:.7;pointer-events:none;}

.lectern-reader-bar{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;
  gap:14px;height:60px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--l-page) 94%,transparent);border-bottom:1px solid var(--l-rule);font-family:var(--l-ui);
  transition:transform .34s var(--l-ease),opacity .34s var(--l-ease);}
.lectern-chrome-off .lectern-reader-bar{transform:translateY(-100%);opacity:0;pointer-events:none;}
.lectern-reader-name{margin:0;text-align:center;font-size:13px;letter-spacing:.02em;color:var(--l-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lectern-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--l-ink);cursor:pointer;transition:background-color .18s;}
.lectern-icon:hover{background:color-mix(in srgb,var(--l-ink) 8%,transparent);}
.lectern-icon svg{width:20px;height:20px;}
.lectern-aa{font-family:var(--lectern-font-display,Georgia,"Times New Roman",serif);font-size:19px;letter-spacing:-.01em;line-height:1;}
.lectern-reader button:focus-visible{outline:2px solid var(--l-accent);outline-offset:2px;}

.lectern-reader-page{max-width:var(--lectern-reader-measure,680px);margin:0 auto;padding:clamp(36px,8vh,88px) 28px 24vh;}
.lectern-reader-head{margin:0 0 2.6em;font-size:16px;}
.lectern-reader-head .lectern-kicker{font-size:12px;}
.lectern-reader-title{margin:.35em 0 .4em;font-family:var(--lectern-font-display,Georgia,"Times New Roman",serif);font-weight:400;
  font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.018em;text-wrap:balance;}
.lectern-reader-head .lectern-by{margin:0;font-size:12.5px;}
.lectern-reader-end{margin-top:3.4em;}

.lectern-reader-status{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2;margin:0;padding:6px 14px;
  transform:translateX(-50%);border:1px solid var(--l-rule);border-radius:999px;background:color-mix(in srgb,var(--l-page) 92%,transparent);
  font-family:var(--l-ui);font-size:12px;letter-spacing:.04em;color:var(--l-muted);white-space:nowrap;pointer-events:none;
  transition:opacity .34s var(--l-ease);}
.lectern-chrome-off .lectern-reader-status{opacity:0;}

/* a citation's note, in a small card beside its number */
.lectern-note{position:fixed;z-index:4;max-height:50vh;overflow:auto;padding:14px 16px 15px;border:1px solid var(--l-rule);
  border-radius:8px;background:var(--l-bg);color:var(--l-ink);box-shadow:0 18px 50px var(--_shadow),0 2px 6px rgba(0,0,0,.06);
  font-family:var(--l-ui);font-size:13.5px;line-height:1.55;overflow-wrap:anywhere;}
.lectern-note[hidden]{display:none;}
.lectern-note > b{float:left;margin-right:9px;color:var(--l-accent);font-weight:600;}
.lectern-note a{color:inherit;text-decoration:underline;text-decoration-color:var(--l-rule);text-underline-offset:3px;}
.lectern-note-site{display:block;margin-top:3px;font-size:12px;color:var(--l-muted);}

/* ---------------------------------------------------------------- inside reading mode */
/* The text itself shows every change, so no preview; the page is barely dimmed; on a wide screen the
   choices sit side by side and the sheet stays low, leaving the text in view. */
.lectern[data-in-reader] .lectern-preview,.lectern[data-in-reader] .lectern-page-only{display:none;}
.lectern[data-in-reader] .lectern-backdrop{background:rgba(10,15,20,.12);}
.lectern[data-in-reader] .lectern-sheet{width:min(620px,100%);}
.lectern[data-in-reader] .lectern-sheet.lectern-wide{width:min(900px,100%);}
.lectern[data-in-reader] .lectern-controls{padding-top:36px;}
@media (min-width:760px){
  .lectern[data-in-reader] .lectern-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:44px;}
}

/* ---------------------------------------------------------------- phones */
@media (max-width:640px){
  .lectern{place-items:end stretch;}
  .lectern-sheet,.lectern[data-in-reader] .lectern-sheet{width:100%;max-height:92vh;}
  .lectern-preview{height:clamp(150px,28vh,220px);}
  .lectern-page{padding:32px 22px 0;}
  .lectern-controls{padding:20px 22px calc(22px + env(safe-area-inset-bottom,0px));}
  .lectern-switchlabel{font-size:13.5px;}
  .lectern-reader-bar{height:56px;}
  .lectern-reader-page{padding:32px 20px 26vh;}
  .lectern-note{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));top:auto;width:auto;}
}

@media (prefers-reduced-motion:reduce){
  .lectern-backdrop,.lectern-sheet,.lectern-light svg,.lectern-knob,.lectern-page,
  .lectern-reader,.lectern-reader-bar,.lectern-reader-status{transition:none;}
  .lectern-sheet{transform:none;}
}
@media print{.lectern,.lectern-reader{display:none !important;}}