/* The Curie Notes: series look on top of ../kit/notebook.css.
   A laboratory notebook: the same parchment, a faint grid instead of ruled
   lines, and the pale blue-green of radium's glow as the series accent.
   Also the styles for exercise.js (one question at a time). */

:root {
  --cu-glow: #2f7f86;
  --cu-glow-soft: rgba(47, 127, 134, 0.14);
  --cu-right: #3f6b3a;
  --cu-wrong: #a3352a;
  --cu-grid: rgba(64, 92, 140, 0.09);
}

body {
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0) 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(150, 110, 60, 0.18), rgba(150, 110, 60, 0) 70%),
    radial-gradient(70% 50% at 0% 0%, rgba(150, 110, 60, 0.12), rgba(150, 110, 60, 0) 70%),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--cu-grid) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--cu-grid) 23px 24px);
}

.nb-plate { color: var(--cu-glow); }

sub, sup { font-size: 0.72em; line-height: 0; }

/* ---------- exercise plates ---------- */

.ex {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.ex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ex-count { font-size: 0.95rem; color: var(--nb-ink-soft); font-style: italic; }
.ex-count b { color: var(--nb-ink); font-style: normal; }
.ex-score { margin-left: 12px; font-style: normal; color: var(--cu-glow); font-weight: 600; }

.ex-dots { display: flex; gap: 6px; flex-wrap: wrap; }

.ex-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--nb-ink-soft);
  background: transparent;
  cursor: pointer;
}

.ex-dot[aria-current='step'] { box-shadow: 0 0 0 3px var(--cu-glow-soft); border-color: var(--cu-glow); }
.ex-dot.is-right { background: var(--cu-right); border-color: var(--cu-right); }
.ex-dot.is-shown { background: rgba(166, 90, 36, 0.45); border-color: var(--nb-copper); }
.ex-dot:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }

.ex-card { display: flex; flex-direction: column; gap: 8px; }

.ex-q { font-size: 1.06rem; line-height: 1.42; }
.ex-q p { margin: 0 0 6px; }
.ex-q p:last-child { margin-bottom: 0; }
.ex-big { font-family: var(--nb-title); font-size: 2.2rem; line-height: 1; color: var(--cu-glow); }

.ex-answer { display: flex; flex-direction: column; gap: 6px; }

.ex-numrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ex-input {
  font: inherit;
  font-size: 1.05rem;
  width: 11em;
  max-width: 100%;
  min-height: 38px;
  padding: 4px 10px;
  color: var(--nb-ink);
  background: rgba(255, 252, 240, 0.85);
  border: 1px solid rgba(90, 64, 36, 0.5);
  border-radius: 8px;
  font-variant-numeric: tabular-nums lining-nums;
}

.ex-input.ex-wide { width: 100%; max-width: 22em; }
.ex-input:focus-visible, .ex-coef:focus-visible { outline: 2px solid var(--cu-glow); outline-offset: 1px; }
.ex-unit { font-size: 1.02rem; color: var(--nb-ink-soft); }
.ex-preview { font-size: 1.15rem; min-height: 1.4em; color: var(--nb-blue); }

.ex-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-primary { background: var(--nb-ink); color: var(--nb-paper); border-color: var(--nb-ink); }
.ex-primary:hover { background: #3d3022; }
.ex-next { margin-left: auto; }

.ex-feedback { min-height: 1.3em; font-size: 1rem; }
.ex-feedback.is-right { color: var(--cu-right); font-weight: 600; }
.ex-feedback.is-wrong { color: var(--cu-wrong); }

.ex-hints p, .ex-hint {
  margin: 0 0 4px;
  padding: 6px 10px;
  border-left: 3px solid var(--nb-copper);
  background: rgba(166, 90, 36, 0.07);
  font-size: 0.98rem;
}

.ex-solution {
  padding: 8px 12px;
  border: 1px dashed rgba(47, 127, 134, 0.6);
  border-radius: 8px;
  background: var(--cu-glow-soft);
  font-size: 0.98rem;
}

.ex-solution p { margin: 0 0 5px; }
.ex-solution ol { margin: 0; padding-left: 1.3em; }
.ex-sol-head { font-family: var(--nb-title); font-variant: small-caps; letter-spacing: 0.08em; color: var(--cu-glow); }

.ex-choices { display: flex; flex-direction: column; gap: 6px; }

.ex-choice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  padding: 7px 12px;
  color: var(--nb-ink);
  background: rgba(255, 252, 240, 0.55);
  border: 1px solid rgba(90, 64, 36, 0.4);
  border-radius: 10px;
  cursor: pointer;
}

.ex-choice:hover { background: rgba(255, 252, 240, 0.95); }
.ex-choice[aria-checked='true'] { border-color: var(--cu-glow); box-shadow: inset 0 0 0 1px var(--cu-glow); background: rgba(255, 252, 240, 0.95); }
.ex-choice:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.ex-letter { font-family: var(--nb-title); color: var(--cu-glow); min-width: 1em; }

.ex-equation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 1.2rem;
}

.ex-term { display: inline-flex; align-items: center; gap: 3px; }

.ex-coef {
  font: inherit;
  font-size: 1.05rem;
  width: 2.2em;
  min-height: 34px;
  text-align: center;
  padding: 2px;
  color: var(--nb-ink);
  background: rgba(255, 252, 240, 0.85);
  border: 1px solid rgba(90, 64, 36, 0.5);
  border-radius: 6px;
}

.ex-op { color: var(--nb-ink-soft); }
.ex-arrow { padding: 0 4px; }

.ex-ledger {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 260px;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.ex-lrow { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 1px 6px; border-bottom: 1px solid var(--nb-faint); }
.ex-lhead { font-style: italic; color: var(--nb-ink-soft); }
.ex-lrow.is-even span:not(:first-child) { color: var(--cu-right); }
.ex-lrow.is-odd span:not(:first-child) { color: var(--cu-wrong); }

.ex-ends { margin: 0; font-style: italic; font-size: 0.92rem; color: var(--nb-ink-soft); }
.ex-order { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 4px; }

.ex-oitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  background: rgba(255, 252, 240, 0.55);
  border: 1px solid rgba(90, 64, 36, 0.3);
  border-radius: 8px;
}

.ex-otext { flex: 1 1 auto; }

.ex-obtn {
  font: inherit;
  width: 32px;
  height: 30px;
  border: 1px solid rgba(90, 64, 36, 0.4);
  border-radius: 6px;
  background: rgba(255, 252, 240, 0.8);
  color: var(--nb-ink);
  cursor: pointer;
}

.ex-obtn:disabled { opacity: 0.3; cursor: default; }
.ex-obtn:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 1px; }

@media (max-width: 420px) {
  .ex-q { font-size: 1rem; }
  .ex-equation { font-size: 1.08rem; }
  .ex-next { margin-left: 0; }
}

.ex-coef, .ex-input, .ex-coef::placeholder, .ex-input::placeholder, .ex-ledger, .ex-count { font-variant-numeric: lining-nums tabular-nums; }

/* Chemistry is full of numbers: lining figures everywhere in Curie plates. */
body, .nb-date, .nb-readout, .ex-q, .ex-solution, .ex-hint, .ex-feedback, input, button, output { font-variant-numeric: lining-nums; }