/* The study app, set like a worked page of a textbook: each question is a
   heading ("س:"), its answer is text under it, and page references are the
   highlighted numbers. The book page opens beside it. See DESIGN.md: no
   bubbles, no cards, no shadows, square corners, rules for structure. */

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  background: var(--paper);
}

/* ---------- running head ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: 10px var(--s5);
  background: var(--paper);
  border-block-end: var(--line-ink);
  /* folds by its own width: the page panel takes 44rem off it on a laptop */
  container: bar / inline-size;
}
.bar .logo-word { font-size: 1.45rem; }

/* the book pickers: one joined row of fields, like a form header */
.scope { display: flex; flex: 1; min-inline-size: 0; max-inline-size: max-content; }
.scope select {
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 13rem;
  min-block-size: 38px;
  padding-block: 4px;
  font-size: .9rem;
  font-weight: 500;
}
.scope select + select { margin-inline-start: -1.5px; }
.scope select:focus { position: relative; z-index: 1; }

.scope-btn { display: none; }

.nav-tools { display: flex; align-items: center; gap: 2px; flex: none; margin-inline-start: auto; }
.nav-tools .btn { border-color: transparent; color: var(--ink-2); }
.nav-tools .btn:hover { background: transparent; color: var(--ink); }
.nav-tools .btn--icon { inline-size: 38px; block-size: 38px; }
.nav-tools .ico { inline-size: 20px; block-size: 20px; }
#lang { font-size: .9rem; font-weight: 600; }

.scope-note {
  margin: 0;
  padding: 6px var(--s5);
  font-size: .85rem;
  color: var(--ink-3);
  border-block-end: var(--line);
}
.scope-note.warn { color: var(--pen); }
.scope-note:empty { display: none; }

@container bar (max-width: 1060px) {
  .bar .logo-word { display: none; }
  .scope-btn {
    all: unset;
    cursor: pointer;
    order: 1;
    flex: 1;
    min-inline-size: 0;
    max-inline-size: 30rem;
    display: flex; align-items: center; gap: 8px;
    min-block-size: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--ink);
    font-size: .9rem; font-weight: 500;
  }
  .scope-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .scope-btn-dot { display: none; }
  .scope-btn.warn { color: var(--pen); border-color: var(--pen); }
  .scope-btn-text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scope-btn-chev { inline-size: 16px; block-size: 16px; }
  .bar.scope-open .scope-btn-chev { transform: rotate(180deg); }
  .logo { order: 0; }
  .nav-tools { order: 2; }
  .scope {
    order: 3;
    flex: 1 1 100%;
    max-inline-size: none;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s2);
    padding-block: var(--s2);
  }
  .bar.scope-open .scope { display: grid; }
  .scope select { inline-size: 100%; max-inline-size: none; min-block-size: 44px; margin: 0; }
}
@container bar (max-width: 520px) {
  .scope-btn { order: 3; flex: 1 1 100%; max-inline-size: none; }
  .scope { order: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bar { gap: var(--s2); padding: 8px var(--s4); }
}

/* ---------- the page of questions ---------- */

.chat { flex: 1; }

.thread {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: var(--s6) var(--s5) var(--s8);
  display: flex;
  flex-direction: column;
}

.welcome { padding-block: clamp(24px, 7vh, 72px) var(--s5); }
.welcome .tag { margin-block-end: var(--s4); }
.welcome-h { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-block-end: var(--s4); }
.welcome-p { color: var(--ink-2); max-inline-size: 36em; font-size: 1.06rem; margin-block-end: var(--s6); }

/* starter questions: an exercise list, not a grid of cards */
.suggest { border-block-start: var(--line-ink); }
.suggest button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  inline-size: 100%;
  box-sizing: border-box;
  padding: 14px 0;
  border-block-end: var(--line);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.suggest button::after { content: "\2190"; font-family: var(--sans); font-size: 1rem; color: var(--ink-3); }
:root[dir="ltr"] .suggest button::after { content: "\2192"; }
.suggest button:hover::after { color: var(--ink); }
.suggest button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.suggest button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* a conversation in bubbles: the student's question is a block of ink on
   their side, the answer is a ruled sheet of paper on the other. Square,
   flat, no shadows -- bubbles in the same print language as everything else. */
.thread { gap: var(--s4); }
.msg { display: flex; flex-direction: column; }
.msg.user { align-items: flex-end; }
.msg.bot { align-items: flex-start; }
.msg + .msg.user { margin-block-start: var(--s3); }

.msg.user .bubble {
  max-inline-size: min(34rem, 86%);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.7;
}
.msg.bot .bubble {
  inline-size: 100%;
  max-inline-size: 40rem;
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: var(--line-ink);
  font-size: 1.02rem;
}

/* what was attached, inside the question's bubble */
.shot {
  all: unset;
  cursor: zoom-in;
  display: block;
  position: relative;
  margin-block-end: 8px;
  max-inline-size: 260px;
  line-height: 0;
  border: 1.5px solid var(--paper);
  background: #fff;
}
.shot img { inline-size: 100%; block-size: auto; display: block; }
.shot:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
/* a piece of the book: the page it came from, labelled like a figure */
.shot--region { max-inline-size: 320px; }
.shot-cap {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  padding: 1px 6px;
  background: var(--marker);
  color: var(--marker-ink);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.6;
}
.file {
  display: flex; align-items: center; gap: 10px;
  margin-block-end: 8px;
  padding: 8px 12px 8px 8px;
  border: 1.5px solid color-mix(in srgb, var(--paper) 45%, transparent);
  color: inherit;
  text-decoration: none;
  max-inline-size: 300px;
}
a.file:hover { border-color: var(--paper); }
a.file:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
.file-ico {
  display: grid; place-items: center; flex: none;
  inline-size: 38px; block-size: 46px;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
}
.file-meta { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.file-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: .78rem; opacity: .7; }
.bubble p { margin: 0 0 var(--s3); }
.bubble p:last-child { margin-block-end: 0; }
.bubble ul, .bubble ol { margin: 0 0 var(--s3); padding-inline-start: 1.25em; }
.bubble li { margin-block-end: var(--s1); }
.bubble h3 { font-size: 1.3rem; margin-block: var(--s4) var(--s2); }
.bubble strong { font-weight: 700; }

/* the inline page reference */
.cite {
  all: unset;
  cursor: pointer;
  display: inline-block;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 .35em;
  margin-inline-start: 4px;
  background: var(--marker);
  color: var(--marker-ink);
  white-space: nowrap;
  vertical-align: 1px;
}
:root[dir="rtl"] .cite { font-family: var(--sans); }
.cite:hover, .cite.on { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.cite:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sources {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
  margin-block-start: var(--s4); padding-block-start: var(--s3);
  border-block-start: var(--line);
  font-size: .92rem;
}
.sources-label { color: var(--ink-3); }
.src {
  all: unset; cursor: pointer;
  font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.src:hover { text-decoration-thickness: 2px; }
.src:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.flag {
  all: unset; cursor: pointer;
  font-size: .85rem; color: var(--ink-3);
  text-decoration: underline dotted; text-underline-offset: .25em;
}
.flag:hover { color: var(--ink); }
.flag[aria-pressed="true"] { color: var(--pen); text-decoration-style: solid; }
.flag:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tick {
  display: inline-block; inline-size: 1.5px; block-size: 1.1em; margin-inline-start: 2px;
  background: var(--ink); vertical-align: -.2em;
  animation: tick 1s steps(2) infinite;
}
@keyframes tick { 50% { opacity: 0; } }
.thinking { display: flex; align-items: center; gap: var(--s3); margin: 0; color: var(--ink-3); font-size: .95rem; }
.notice { font-size: .9rem; color: var(--pen); margin: var(--s3) 0 0; }

/* ---------- the tray: activities and the composer ---------- */

.tray {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: var(--paper);
  border-block-start: var(--line-ink);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

/* activities: tabs, underlined when chosen */
.acts {
  display: flex;
  gap: var(--s5);
  padding: 0 var(--s5);
  max-inline-size: 46rem;
  margin-inline: auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-block-end: var(--line);
}
.acts::-webkit-scrollbar { display: none; }
.act {
  all: unset;
  flex: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 0 8px;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
}
.act:hover:not([disabled]) { color: var(--ink); }
.act:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.act[aria-checked="true"] { color: var(--ink); font-weight: 700; border-block-end-color: var(--ink); }
.act[disabled] { cursor: default; color: var(--ink-3); }
.act-soon { font-size: .76rem; margin-inline-start: 4px; }

.composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s4);
  max-inline-size: 46rem;
  margin-inline: auto;
  inline-size: 100%;
}
.composer-row { display: flex; align-items: stretch; }
.composer-row textarea { flex: 1; max-block-size: 9rem; min-block-size: 48px; padding: 12px; font-size: 1rem; }
.composer textarea { flex: 1; max-block-size: 9rem; }
.attach-btn {
  flex: none;
  inline-size: 48px !important;
  block-size: auto !important;
  min-block-size: 48px;
  border-inline-end: 0 !important;
  color: var(--ink-2);
}
:root[dir="ltr"] .attach-btn { border-inline-end: 0 !important; }
.attach-btn:hover { background: var(--tint) !important; color: var(--ink) !important; }
.attach-btn .ico { inline-size: 20px; block-size: 20px; }
.send {
  flex: none;
  inline-size: 56px !important;
  block-size: auto !important;
  min-block-size: 48px;
  border-inline-start: 0 !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.send:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)) !important; }
.send[disabled] { background: var(--tint) !important; color: var(--ink-3) !important; border-color: var(--ink) !important; }
.send .ico { inline-size: 20px; block-size: 20px; }
:root[dir="rtl"] .send [data-arrow] { transform: scaleX(-1); }
.quiz-btn { flex: none; }

/* the voice picker: a line of text, not a pill */
.modes-row { display: flex; align-items: center; gap: var(--s3); position: relative; }
.voice-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem;
  color: var(--ink-2);
}
.voice-btn .ico { display: none; }
.voice-btn::before { content: "الأسلوب:"; color: var(--ink-3); }
:root[lang="en"] .voice-btn::before { content: "Voice:"; }
.voice-btn .voice-name { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.voice-btn:hover .voice-name { text-decoration-thickness: 2px; }
.voice-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.voice-menu {
  position: absolute;
  inset-block-end: calc(100% + var(--s2));
  inset-inline-start: 0;
  z-index: 60;
  inline-size: min(20rem, calc(100vw - var(--s5) * 2));
  background: var(--paper);
  border: var(--line-ink);
  display: grid;
}
.voice-opt {
  all: unset;
  cursor: pointer;
  display: grid;
  gap: 1px;
  padding: 10px 14px;
  border-block-end: var(--line);
}
.voice-opt:last-child { border-block-end: 0; }
.voice-opt-name { font-weight: 600; font-size: .95rem; }
.voice-opt-why { font-size: .82rem; color: var(--ink-2); }
.voice-opt:hover { background: var(--tint); }
.voice-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.voice-opt[aria-checked="true"] { background: var(--ink); }
.voice-opt[aria-checked="true"] .voice-opt-name,
.voice-opt[aria-checked="true"] .voice-opt-why { color: var(--paper); }

.modes { display: none; }

/* ---------- the book page, opened beside the questions ---------- */

.panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(44rem, 50vw);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-inline-start: var(--line-ink);
  z-index: 70;
  animation: panelin 280ms var(--ease-out) both;
}
@keyframes panelin { from { transform: translateX(var(--from, 24px)); opacity: 0; } to { transform: none; opacity: 1; } }
:root[dir="rtl"] .panel { --from: -24px; }

.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 8px 12px 8px 16px;
  border-block-end: var(--line-ink);
  flex: none;
}
.panel-h { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--sans); font-size: .95rem; font-weight: 600; min-inline-size: 0; }
.panel-h .pagenum { font-size: .85rem; }
.panel-book { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-nav { display: flex; align-items: center; gap: 0; flex: none; }
.panel-nav .btn, .panel-foot .btn { border-color: transparent; color: var(--ink-2); }
.panel-nav .btn:hover, .panel-foot .btn:hover { background: transparent; color: var(--ink); }
.cite-count { color: var(--ink-2); min-inline-size: 3.4em; text-align: center; font-size: .85rem; }

.panel-body { flex: 1; overflow-y: auto; padding: var(--s5); background: var(--tint); }

.page-skel {
  display: grid; place-items: center;
  max-inline-size: 40rem; margin-inline: auto;
  aspect-ratio: 1 / 1.414;
  background: var(--paper);
  border: var(--line);
  color: var(--ink-3);
}

.frame { position: relative; inline-size: 100%; line-height: 0; margin-inline: auto; max-inline-size: 40rem; }
.frame img { inline-size: 100%; block-size: auto; display: block; background: #fff; border: var(--line); }
.overlay { position: absolute; inset: 0; pointer-events: none; }

/* the highlight: pulled across the line, the product's one gesture */
.hl {
  position: absolute;
  background: var(--marker);
  mix-blend-mode: multiply;
  transform: scaleX(0);
  transform-origin: right center;
  animation: swipe 460ms var(--ease-out) forwards;
}
:root[dir="ltr"] .hl { transform-origin: left center; }
@keyframes swipe { to { transform: scaleX(1); } }

.scrim { position: fixed; inset: 0; z-index: 60; background: rgb(18 18 15 / .45); }

@media (min-width: 1120px) {
  .scrim { display: none; }
  body.panel-open { padding-inline-end: min(44rem, 50vw); }
}
@media (max-width: 1119px) { .panel { inline-size: min(34rem, 100vw); } }

@media (max-width: 640px) {
  .thread { padding-inline: var(--s4); padding-block-start: var(--s5); }
  .composer { padding-inline: var(--s4); }
  .acts { padding-inline: var(--s4); gap: var(--s4); }
  .scope-note { padding-inline: var(--s4); }
  .panel { inline-size: 100%; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hl { transform: none; }
  .tick { animation: none; }
}

/* ==========================================================================
   Study tools: saved pages, browsing the book, the revision sheet.
   ========================================================================== */

.saved-btn { gap: 4px; padding-inline: 6px; }
.saved-btn .ico { inline-size: 20px; block-size: 20px; flex: none; }
.saved-count {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  padding: 0 .35em;
  background: var(--marker);
  color: var(--marker-ink);
}
.saved-count:empty, .saved-count[data-n="0"] { display: none; }

#savePage[aria-pressed="true"] { color: var(--ink); }
#savePage[aria-pressed="true"] svg path { fill: currentColor; }

.panel-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 8px var(--s4) calc(8px + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--line-ink);
}
.page-jump { inline-size: 4.4rem; min-block-size: 38px; padding: 4px 8px; text-align: center; font-family: var(--mono); font-size: .88rem; }
.page-jump::-webkit-outer-spin-button, .page-jump::-webkit-inner-spin-button { appearance: none; margin: 0; }
.page-of { color: var(--ink-2); min-inline-size: 5.5em; font-size: .88rem; }

.panel.unreadable .panel-body::before {
  content: attr(data-warn);
  display: block;
  max-inline-size: 40rem;
  margin: 0 auto var(--s3);
  padding: var(--s3) 0;
  border-block: 1.5px solid var(--pen);
  color: var(--pen);
  font-size: .9rem;
}

/* ---------- sheets: saved pages, past conversations ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgb(18 18 15 / .45);
}
.sheet-card {
  inline-size: min(36rem, 100%);
  max-block-size: min(82vh, 680px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--line-ink);
}
.sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s5); border-block-end: var(--line-ink); flex: none;
}
:root[dir="rtl"] .sheet-bar { padding: var(--s3) var(--s5) var(--s3) var(--s3); }
.sheet-title { font-size: 1.6rem; }
.sheet-bar .btn { border-color: transparent; }

.saved-list { list-style: none; margin: 0; padding: 0 var(--s5); overflow-y: auto; flex: 1; }
.saved-list:empty::after {
  content: attr(data-empty);
  display: block;
  padding: var(--s7) 0;
  color: var(--ink-2);
  font-size: .98rem;
}
.saved-item, .hist-item { display: flex; align-items: center; gap: var(--s3); padding: 12px 0; border-block-end: var(--line); }
.saved-open, .hist-open { all: unset; cursor: pointer; flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.saved-open:hover .saved-snip, .hist-open:hover .hist-q { text-decoration: underline; text-underline-offset: .25em; }
.saved-open:focus-visible, .hist-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.saved-head { display: flex; align-items: baseline; gap: var(--s2); }
.saved-meta, .hist-meta { font-size: .84rem; color: var(--ink-3); }
.saved-snip { font-size: .92rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hist-q { font-size: 1rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item[aria-current="true"] .hist-q { font-weight: 700; }
.hist-item[aria-current="true"] .hist-q::after { content: " \2022"; }
.saved-drop {
  all: unset; cursor: pointer; flex: none;
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  color: var(--ink-3);
}
.saved-drop:hover { color: var(--pen); }
.saved-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sheet-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s5); border-block-start: var(--line-ink); flex: none;
}
.sheet-foot .spin { margin-inline-end: var(--s2); }

@media (max-width: 640px) {
  .saved-btn span:not(.saved-count) { display: none; }
  .sheet { place-items: end stretch; padding: 0; }
  .sheet-card { inline-size: 100%; max-block-size: 86vh; border-inline: 0; border-block-end: 0; padding-block-end: env(safe-area-inset-bottom, 0px); }
  .saved-list { padding-inline: var(--s4); }
}

/* ---------- pointing at the page ---------- */

.frame img { cursor: crosshair; user-select: none; -webkit-user-drag: none; }
.frame.selecting { touch-action: none; }
#pointMode[aria-pressed="true"], #findBtn[aria-pressed="true"], #nightBtn[aria-pressed="true"] {
  background: var(--ink); color: var(--paper);
}

.sel-box {
  position: absolute;
  border: 1.5px solid var(--ink);
  background: color-mix(in srgb, var(--marker) 30%, transparent);
  pointer-events: none;
}

.askbar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  background: var(--paper);
  border-block-start: var(--line-ink);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  line-height: 1.5;
}
.askbar-text { margin: 0; font-size: .9rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.askbar-row { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.askbar-note { inline-size: 100%; min-block-size: 40px; padding: 6px 12px; font-size: .9rem; }

/* a small note when a link is copied */
.copied { position: relative; }
.copied::after {
  content: attr(data-copied);
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 5;
  white-space: nowrap;
  background: var(--ink); color: var(--paper);
  font-size: .8rem; font-weight: 600;
  padding: 4px 10px;
  animation: copiedfade 1500ms linear forwards;
  pointer-events: none;
}
@keyframes copiedfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- searching the book ---------- */

.find { flex: none; display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4); border-block-end: var(--line); }
.find input { min-block-size: 38px; padding: 6px 10px; }
.find input::-webkit-search-cancel-button { appearance: none; }
.find-count { color: var(--ink-2); flex: none; min-inline-size: 5em; text-align: end; font-size: .85rem; }
.find-results { list-style: none; margin: 0; padding: 0 var(--s4); max-block-size: 42vh; overflow-y: auto; flex: none; border-block-end: var(--line-ink); }
.find-hit { all: unset; cursor: pointer; display: block; inline-size: 100%; box-sizing: border-box; padding: 10px 0; border-block-end: var(--line); }
.find-hit:hover .find-hit-text { color: var(--ink); }
.find-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.find-hit em { font-style: normal; background: var(--marker); color: var(--marker-ink); }
.find-hit-page { display: inline-block; margin-block-end: 4px; }
.find-hit-text { display: block; font-size: .9rem; color: var(--ink-2); }

/* ---------- night reading, your own marks ---------- */

.frame.night img { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(1.05); }
.frame.night .hl { mix-blend-mode: screen; opacity: .45; }
.frame.night .mark-own { mix-blend-mode: screen; opacity: .5; }
.mark-own { position: absolute; background: var(--ink); mix-blend-mode: multiply; opacity: .18; pointer-events: none; }
.mark-note {
  position: absolute;
  inline-size: 18px; block-size: 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: auto; cursor: help;
}
.marks-count { font-size: .82rem; color: var(--ink-2); margin-inline-start: var(--s2); }

/* ---------- say it back ---------- */

.recall { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px dashed var(--ink-3); }
.recall-h { font-weight: 700; font-size: 1rem; margin: 0 0 var(--s3); }
.recall-hint { display: block; font-weight: 400; font-size: .86rem; color: var(--ink-2); }
.recall-in { display: flex; align-items: stretch; }
.recall-in textarea { flex: 1; resize: vertical; min-block-size: 2.8rem; font: inherit; font-size: .96rem; line-height: 1.6; padding: 9px 12px; }
.recall-in .btn { border-inline-start: 0; block-size: auto; }
.recall-in textarea:disabled { opacity: .6; }
.recall-again { margin-block-start: var(--s3); }

/* the marking: the verdict in the teacher's hand, then the reasons */
.judge { margin-block-start: var(--s4); font-size: .98rem; }
.judge--wait { color: var(--ink-3); }
.judge-raw { white-space: pre-wrap; }
.judge-v { margin: 0 0 var(--s3); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.judge-badge { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.judge[data-v="right"] .judge-badge { color: var(--good); }
.judge[data-v="nearly"] .judge-badge { color: var(--amber); }
.judge[data-v="not-yet"] .judge-badge { color: var(--pen); }
.judge-why { color: var(--ink-2); font-size: .95rem; }
.judge-row { padding-block: var(--s2); border-block-start: var(--line); }
.judge-row p { margin: 2px 0 0; }
.judge-lbl { font-size: .84rem; font-weight: 600; color: var(--ink-3); }

/* ---------- the page panel on a phone ---------- */

@media (max-width: 640px) {
  .panel-bar { flex-wrap: wrap; row-gap: var(--s1); padding: 8px; }
  .panel-h { flex: 1 1 auto; min-inline-size: 0; }
  .panel-nav { flex: 1 1 100%; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; }
  .panel-body { display: flex; padding: var(--s3); }
  .panel-body > .frame, .panel-body > .page-skel { margin: auto; }
}

/* ---------- attaching a photo ---------- */

.attach-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 6px 0;
  border-block-end: var(--line);
}
.attach-thumb { inline-size: 44px; block-size: 44px; object-fit: cover; border: var(--line); flex: none; }
.attach-name { flex: 1; min-inline-size: 0; font-size: .88rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-drop { all: unset; cursor: pointer; flex: none; font-size: .88rem; color: var(--pen); text-decoration: underline; text-underline-offset: .25em; }
.attach-drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.attach-file { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: var(--line-ink); flex: none; }
.attach-file .ico { inline-size: 22px; block-size: 22px; }

/* a file being dragged over the composer */
.composer.dropping .composer-row { outline: 2px dashed var(--ink); outline-offset: 4px; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--s5);
  background: rgba(18, 18, 15, .92);
}
.lightbox[hidden] { display: none !important; }
body.has-lightbox { overflow: hidden; }
.lightbox-fig { margin: 0; display: grid; gap: var(--s3); justify-items: center; }
.lightbox-fig img { max-inline-size: min(1100px, 92vw); max-block-size: 80vh; inline-size: auto; block-size: auto; background: #fff; }
.lightbox-fig figcaption { color: #ECE6D8; font-size: .9rem; text-align: center; max-inline-size: 60ch; }
.lightbox-close {
  all: unset; cursor: pointer;
  position: absolute; inset-block-start: var(--s5); inset-inline-end: var(--s5);
  font-size: .95rem; font-weight: 600; color: #ECE6D8;
  text-decoration: underline; text-underline-offset: .25em;
}
.lightbox-close:focus-visible { outline: 2px solid #ECE6D8; outline-offset: 3px; }

/* ==========================================================================
   Activities: exam and summary take the middle of the screen.
   ========================================================================== */

.stage { flex: 1; padding: var(--s6) var(--s5) var(--s7); }
.stage[hidden] { display: none !important; }
.stage-mid { max-inline-size: 34rem; margin-inline: auto; padding-block-start: var(--s8); }
.stage-note { color: var(--ink-2); margin: 0; font-size: 1.05rem; }

/* ---------- exam: set like an exam paper ---------- */

.exam { max-inline-size: 42rem; margin-inline: auto; display: grid; gap: var(--s4); }
.exam-top { display: flex; align-items: center; gap: var(--s4); padding-block-end: var(--s2); border-block-end: var(--line-ink); }
.exam-count { font-size: .92rem; font-weight: 600; flex: none; }
.exam-bar { flex: 1; block-size: 2px; background: var(--rule); }
.exam-bar > span { display: block; block-size: 100%; background: var(--ink); transition: width 300ms var(--ease-out); }

.exam-q { margin: var(--s3) 0 0; font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 600; line-height: 1.4; }
/* the answer space is ruled, like the lines on an exam sheet */
.exam-in {
  inline-size: 100%; resize: vertical; min-block-size: 9.6rem;
  font: inherit; font-size: 1.02rem; line-height: 2.4rem;
  padding: 0 4px;
  border: 0;
  border-block: var(--line-ink);
  background-image: linear-gradient(to bottom, transparent calc(2.4rem - 1px), var(--rule) calc(2.4rem - 1px));
  background-size: 100% 2.4rem;
  background-attachment: local;
}
.exam-in:focus { box-shadow: none; border-block-width: 2px; }
.exam-in:disabled { opacity: .7; }
.exam-acts { display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; }
.exam-mark:empty { display: none; }
.exam-cite { all: unset; cursor: pointer; justify-self: start; font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.exam-cite:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.exam-done { font-size: 1rem; font-weight: 600; color: var(--ink-2); margin: 0; }
.exam-score { font-family: var(--display); font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 700; line-height: 1.05; margin: 0; }

/* ---------- the summary: a revision sheet ---------- */

.gist { max-inline-size: 44rem; margin-inline: auto; display: grid; gap: var(--s4); }
.gist-h { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0; padding-block-end: var(--s3); border-block-end: var(--line-ink); }
.gist-points { margin: 0; padding: 0; list-style: none; counter-reset: gist; }
.gist-point {
  counter-increment: gist;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s3);
  border-block-end: var(--line);
  line-height: 1.75;
}
.gist-point::before { content: counter(gist); font-family: var(--mono); font-size: .85rem; color: var(--ink-3); }
:root[dir="rtl"] .gist-point::before { font-family: var(--sans); }
.gist-sub { font-weight: 700; margin: var(--s5) 0 0; }
.gist-terms { margin: 0; }
.gist-term { padding-block: var(--s3); border-block-end: var(--line); }
.gist-term dt { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.gist-term dd { margin: 0; color: var(--ink-2); line-height: 1.75; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.gist-cite {
  all: unset; cursor: pointer; flex: none;
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  padding: 0 .35em;
  background: var(--marker); color: var(--marker-ink);
}
:root[dir="rtl"] .gist-cite { font-family: var(--sans); }
.gist-cite:hover { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.gist-acts { display: flex; gap: var(--s3); justify-content: flex-end; margin-block-start: var(--s3); flex-wrap: wrap; }

@media (max-width: 640px) {
  .stage { padding-inline: var(--s4); }
  .gist-point { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .gist-point .gist-cite { grid-column: 2; justify-self: start; }
}