/* ==========================================================================
   Pagelight — the printed textbook.  See DESIGN.md before changing anything.

   Paper, ink, a highlighter and a red pen. Square corners, hairline rules,
   no shadows, no gradients, no glow. Hierarchy comes from type.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:   #F4F0E6;
  --ink:     #1A1916;
  --marker:  #EDF046;
  --pen:     #B3321E;
  --good:    #2D6A3E;

  /* neutrals are the ink mixed into the paper, so every grey is related */
  --ink-2:   color-mix(in srgb, var(--ink) 64%, var(--paper));
  --ink-3:   color-mix(in srgb, var(--ink) 42%, var(--paper));
  --rule:    color-mix(in srgb, var(--ink) 16%, var(--paper));
  --tint:    color-mix(in srgb, var(--ink) 5%, var(--paper));

  /* older names the app's stylesheets and scripts still reach for */
  --paper-2: var(--tint);
  --card: var(--paper);
  --card-2: var(--tint);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);
  --rule-soft: color-mix(in srgb, var(--ink) 8%, var(--paper));
  --border: var(--rule);
  --border-strong: var(--ink);
  --marker-ink: #1A1916;
  --marker-soft: color-mix(in srgb, var(--marker) 55%, var(--paper));
  --red: var(--pen);
  --amber: #8A5A11;
  --accent: var(--ink);
  --accent-ink: var(--paper);

  --display: "Markazi Text", "Noto Naskh Arabic", Georgia, serif;
  --serif: var(--display);
  --sans: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --edge: 0;
  --edge-lg: 0;
  --pill: 0;
  --line: 1px solid var(--rule);
  --line-ink: 1.5px solid var(--ink);

  --t-fast: 120ms;
  --t-mid: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --btn-h: 46px;
  --btn-h-lg: 54px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12120F; --ink: #ECE6D8; --marker: #DDE63C; --pen: #E8745D; --good: #6CC38A;
    --amber: #E0A93B;
  }
}
:root[data-theme="dark"] {
  --paper: #12120F; --ink: #ECE6D8; --marker: #DDE63C; --pen: #E8745D; --good: #6CC38A;
  --amber: #E0A93B;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
:root[dir="rtl"] body { font-size: 18px; line-height: 1.85; }

::selection { background: var(--marker); color: var(--marker-ink); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3, :root[dir="rtl"] h4 { line-height: 1.3; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

.ico { inline-size: 18px; block-size: 18px; flex: none; }

/* Arabic never capitalises and never tracks out: letters must stay joined. */
:root[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
:root[dir="rtl"] p, :root[dir="rtl"] li, :root[dir="rtl"] .bubble { overflow-wrap: anywhere; }
:root[dir="rtl"] .cite, :root[dir="rtl"] .pagenum, :root[dir="rtl"] code { unicode-bidi: isolate; }

/* the ruled page, used sparingly */
.ruled { background-image: none; }

/* small print: captions, metadata. Sentence case, never tracked out. */
.mono, .tag {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-2);
}
.tag { display: inline-block; margin: 0; }

/* ---------- the highlighter ----------
   A flat band behind the lower two thirds of the line, the way a chisel
   highlighter actually sits. On dark paper it covers the whole line so the
   dark text on it stays readable. */

.mark {
  color: var(--marker-ink);
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-position: 0 .38em;
  background-size: 100% .72em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: .06em;
}
.mark--sweep { background-size: 0 .72em; animation: sweep 700ms var(--ease-out) forwards; }
@keyframes sweep { to { background-size: 100% .72em; } }
:root[dir="rtl"] .mark { background-position: 100% .38em; }

:root[data-theme="dark"] .mark { background-position: 0 0; background-size: 100% 100%; }
:root[data-theme="dark"][dir="rtl"] .mark { background-position: 100% 0; }
:root[data-theme="dark"] .mark--sweep { background-size: 0 100%; animation-name: sweep-full; }
@keyframes sweep-full { to { background-size: 100% 100%; } }

/* the page reference: a number, highlighted. The one place the brand
   colour sits in the interface. */
.pagenum {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 0 .35em;
  background: var(--marker);
  color: var(--marker-ink);
  white-space: nowrap;
}
:root[dir="rtl"] .pagenum { font-family: var(--sans); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  block-size: var(--btn-h);
  padding-inline: var(--s5);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }

.btn--primary, .btn--marker { background: var(--ink); color: var(--paper); }
.btn--primary:hover, .btn--marker:hover { background: var(--paper); color: var(--ink); }

.btn--ghost { border-color: transparent; }
.btn--ghost:hover { background: var(--tint); color: var(--ink); border-color: transparent; }

.btn--lg { block-size: var(--btn-h-lg); padding-inline: var(--s6); font-size: 1.02rem; }
.btn--sm { block-size: 38px; padding-inline: var(--s4); font-size: .88rem; }
.btn--icon { inline-size: var(--btn-h); padding-inline: 0; }
.btn--sm.btn--icon { inline-size: 38px; }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: transparent;
  color: var(--ink-3);
  border-color: var(--rule);
}
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- focus ---------- */

:where(a, button, select, textarea, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- form controls ---------- */

select, textarea, input {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  min-block-size: 44px;
  inline-size: 100%;
}
select:focus, textarea:focus, input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline: none; }
::placeholder { color: var(--ink-3); opacity: 1; }
textarea { resize: none; line-height: 1.6; }

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:root[dir="rtl"] select { padding-inline: 12px 32px; background-position: 12px 52%, 17px 52%; }

.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > label { font-size: .88rem; font-weight: 600; }
.field.err > input, .field.err > textarea, .field.err > select { border-color: var(--pen); }
.err-msg { color: var(--pen); font-size: .88rem; margin: 0; }

/* ---------- shared bits ---------- */

.wrap { max-inline-size: 1180px; margin-inline: auto; padding-inline: var(--s6); }
.wrap--narrow { max-inline-size: 700px; }
@media (max-width: 640px) { .wrap { padding-inline: var(--s4); } }

.sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-block-start: -80px; inset-inline-start: var(--s4);
  z-index: 200; background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-size: .9rem; font-weight: 600;
}
.skip:focus { inset-block-start: var(--s3); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.logo-mark {
  inline-size: 26px; block-size: 26px; flex: none;
  background: url("/static/logo-ink.svg") center / contain no-repeat;
}
:root[data-theme="dark"] .logo-mark { background-image: url("/static/logo-paper.svg"); }
.logo-word { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }

.spin {
  inline-size: 14px; block-size: 14px; flex: none;
  border: 1.5px solid currentColor; border-block-start-color: transparent;
  border-radius: 50%; animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mark--sweep { background-size: 100% .72em; }
}

/* ---------- consent: a ruled slip at the foot of the page ---------- */

.consent {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s6);
  background: var(--paper);
  border-block-start: var(--line-ink);
}
.consent-p { font-size: .9rem; color: var(--ink-2); margin: 0; max-inline-size: 70ch; }
.consent-btns { display: flex; gap: var(--s2); }
@media (max-width: 640px) { .consent { padding: var(--s4); } .consent-btns { inline-size: 100%; } .consent-btns .btn { flex: 1; } }