:root {
  --bg: #ffffff; --fg: #111111; --muted: #6b6b6b; --line: #d9d9d9; --soft: #f3f3f3; --done: #e6e6e6;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --fg: #e8e8e8; --muted: #9a9a9a; --line: #333; --soft: #1c1c1c; --done: #2a2a2a; color-scheme: dark; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
/* The page itself never scrolls: the bar and footer stay put and each pane scrolls on its own.
   Pinned to the screen edges rather than sized with 100dvh, which the iPad home-screen app
   sometimes gets wrong (the footer and the end of the passage ended up below the screen). */
.app { display: flex; flex-direction: column; position: fixed; inset: 0; }
.muted { color: var(--muted); }

button, select, input[type=text] { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); padding: 4px 8px; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
button.link { border: none; padding: 0; background: none; color: var(--muted); text-decoration: underline; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
       padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; flex: none;
       padding-top: calc(8px + env(safe-area-inset-top)); }
/* Home-screen app: the page runs under the iPad status bar, which blurs what is behind it.
   Keep the filters clear of the status bar and its blur. Safari tabs are unaffected (inset 0). */
@media (display-mode: standalone) {
  .bar { padding-top: calc(16px + env(safe-area-inset-top)); }
}
.filters { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.filters select { max-width: 260px; }
.filters label { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.progress { color: var(--muted); }

.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.split.single { grid-template-columns: 1fr; }
.split.single .left { display: none; }
.split.single .right { padding-inline: max(24px, calc((100% - 712px) / 2)); }
.left, .right { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.left { padding: 20px 24px 40px; border-right: 1px solid var(--line); font-family: var(--serif); font-size: 16px; line-height: 1.6; }
.left p { margin: 0 0 0.9em; }
.left img, .right img { max-width: 100%; height: auto; display: block; margin: 0 0 12px; background: #fff; }
.right { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.meta { font-size: 12px; color: var(--muted); }
.stem p { margin: 0 0 0.6em; }
.stem { font-weight: 600; }
.split.single .stem { font-weight: 400; }

.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.choice { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line);
          background: var(--bg); text-align: left; width: 100%; cursor: pointer; }
.choice b { font-weight: 600; min-width: 1.2em; }
/* Hover only with a mouse: on iPad a tap leaves :hover on whatever lands under the finger. */
@media (hover: hover) {
  .choice:hover:not(:disabled) { background: var(--soft); }
  .list button:hover { background: var(--soft); }
}
.choice:disabled { cursor: default; color: var(--fg); }
.choice.picked { background: var(--done); }
.choice.correct { border: 2px solid var(--fg); }
.choice .mark { margin-left: auto; padding-left: 8px; white-space: nowrap; font-size: 13px; }
.tita { display: flex; gap: 8px; }
.tita input { width: 12ch; }

.result { font-weight: 600; margin: 0; }
.note { font-size: 13px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; }
.explanation { border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; }
.explanation p { margin: 0 0 0.7em; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav button:disabled { color: var(--muted); cursor: default; }
.result:empty { display: none; }
.nav .marks { margin-left: auto; display: flex; gap: 12px; font-size: 12px; align-self: center; }
#flagNote input { width: 100%; font-size: 13px; }
.footlinks { display: flex; gap: 16px; }

.foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; flex: none;
        padding-bottom: max(8px, env(safe-area-inset-bottom)); }
u { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* History and starred lists */
.list-head { display: flex; gap: 16px; align-items: baseline; }
.list-head h2 { font-size: 15px; margin: 0; }
.list-head button.link.on { color: var(--fg); text-decoration: none; font-weight: 600; }
.list-head .back { margin-left: auto; }
.list { list-style: none; margin: 0; padding: 0; }
.list button { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--line); padding: 8px 0; background: none; }
.list .row { display: block; font-size: 12px; color: var(--muted); }
.list .ex { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .ex.passage { color: var(--muted); font-family: var(--serif); font-size: 14px; }

/* Phones: one column, and the whole question area scrolls as one. */
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  .left, .right { overflow: visible; }
  .left { border-right: none; border-bottom: 1px solid var(--line); padding: 16px; }
  .right, .split.single .right { padding: 16px; }
  .filters select { max-width: 100%; }
}