/* "The Number Was Wrong": a seven-mission lesson on mistakes that do not throw errors.
   Built on the tokens in site.css, so all four reading themes work without extra colours.
   Only two colours are added here, a warn red and its wash, because the lesson needs
   to show a wrong answer next to a right one and the site has no red of its own. */
:root {
  --warn: #a93a25;
  --warn-wash: #fae9e4;
  --good-wash: #e1f0e8;
  --note-wash: #faf0d8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --warn: #e08161; --warn-wash: #361e18; --good-wash: #15301f; --note-wash: #2f2512; }
}
:root[data-theme="dim"] { --warn: #e08161; --warn-wash: #361e18; --good-wash: #15301f; --note-wash: #2f2512; }
:root[data-theme="warm"] { --warn: #9c3a22; --warn-wash: #f6e3d9; --good-wash: #e4eee2; --note-wash: #f6ead0; }

/* ------------------------------------------------------------------ mission rhythm */
.nww { max-width: 74ch; }
.nww-mission { padding-top: clamp(38px, 5vw, 64px); border-top: 1px solid var(--rule); margin-top: clamp(34px, 5vw, 56px); scroll-margin-top: 92px; }
.nww-mission:first-of-type { border-top: 0; }
.nww-n { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
.nww-mission h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 14px; text-wrap: balance; }
.nww-mission h3 { font-size: 1.22rem; margin: 30px 0 8px; }
.nww p { max-width: 68ch; }

/* a jump strip, so seven missions are navigable without a sticky second header */
.nww-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.nww-jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  border-radius: 999px; text-decoration: none; font-size: 0.9rem; font-weight: 650;
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.nww-jump a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }

/* ------------------------------------------------------------------ the three blocks each mission uses */
.nww-goal {
  margin: 18px 0; padding: 13px 17px; font-size: 1rem; color: var(--soft);
  background: color-mix(in srgb, var(--green) 9%, var(--card));
  border-left: 3px solid var(--green); border-radius: 0 10px 10px 0;
}
.nww-goal b { display: block; margin-bottom: 3px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--green) 85%, var(--ink)); }

.nww-task { margin: 22px 0; padding: 18px 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }
.nww-task .nww-lab { margin: 0 0 7px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.nww-task h4 { font-size: 1.08rem; font-weight: 750; margin: 0 0 8px; font-variation-settings: "CASL" 1; }
.nww-task p:last-child { margin-bottom: 0; }

.nww-reveal { margin: 15px 0; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.nww-reveal summary {
  display: flex; gap: 10px; align-items: center; list-style: none; cursor: pointer;
  padding: 13px 17px; font-weight: 700; font-size: 0.98rem; color: color-mix(in srgb, var(--green) 85%, var(--ink));
  border-radius: 12px; min-height: 44px;
}
.nww-reveal summary::-webkit-details-marker { display: none; }
.nww-reveal summary::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: none; transition: transform .2s var(--ease); }
.nww-reveal[open] summary::before { transform: rotate(90deg); }
.nww-reveal summary:hover { background: color-mix(in srgb, var(--rule) 30%, transparent); }
.nww-reveal summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nww-body { padding: 14px 17px 16px; border-top: 1px solid var(--rule); color: var(--soft); }
.nww-body > :last-child { margin-bottom: 0; }
.nww-body strong { color: var(--ink); }

/* ------------------------------------------------------------------ the figure blocks: a wrong number beside a right one */
.nww-fig {
  margin: 16px 0; padding: 14px 16px; overflow-x: auto; white-space: pre;
  font-family: var(--mono); font-size: 0.79rem; line-height: 1.66; color: var(--ink);
  background: color-mix(in srgb, var(--rule) 26%, var(--card));
  box-shadow: inset 0 0 0 1px var(--rule); border-radius: 12px;
}
.nww-fig b { color: color-mix(in srgb, var(--green) 85%, var(--ink)); font-weight: 700; }
.nww-fig i { color: var(--warn); font-style: normal; font-weight: 700; }
.nww code { font-family: var(--mono); font-size: 0.85em; padding: 0.12em 0.36em; border-radius: 4px; background: color-mix(in srgb, var(--rule) 32%, transparent); }

/* ------------------------------------------------------------------ the three note kinds */
.nww-note { margin: 16px 0; padding: 14px 17px; border-radius: 0 10px 10px 0; font-size: 1rem; color: var(--soft); border-left: 3px solid; }
.nww-note b { display: block; margin-bottom: 4px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.nww-note strong { color: var(--ink); }
.nww-note > :last-child { margin-bottom: 0; }
.nww-note.bad { background: var(--warn-wash); border-left-color: var(--warn); }
.nww-note.bad b { color: var(--warn); }
.nww-note.good { background: var(--good-wash); border-left-color: var(--green); }
.nww-note.good b { color: color-mix(in srgb, var(--green) 85%, var(--ink)); }
.nww-note.tip { background: var(--note-wash); border-left-color: var(--amber); }
.nww-note.tip b { color: var(--amber-ink); }

/* ------------------------------------------------------------------ tables */
.nww-tw { margin: 18px 0; overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule); }
.nww-tw table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 0.93rem; background: var(--card); }
.nww-tw th { text-align: left; padding: 10px 13px; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--soft); background: color-mix(in srgb, var(--rule) 30%, var(--card)); border-bottom: 1px solid var(--rule); }
.nww-tw td { padding: 10px 13px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--soft); }
.nww-tw tr:last-child td { border-bottom: 0; }
.nww-tw td strong { color: var(--ink); font-weight: 700; }
.nww-tw .m { font-family: var(--mono); font-size: 0.84rem; white-space: nowrap; }
.nww-no { color: var(--warn); font-weight: 700; }
.nww-yes { color: color-mix(in srgb, var(--green) 85%, var(--ink)); font-weight: 700; }

/* ------------------------------------------------------------------ the data files on offer */
.nww-files { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.nww-files li { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.nww-files .nm { font-family: var(--mono); font-size: 0.85rem; font-weight: 650; }
.nww-files .de { font-size: 0.88rem; color: var(--soft); }

/* ------------------------------------------------------------------ the fan-out calculator */
.nww-calc { margin: 22px 0; padding: 20px 22px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow); }
.nww-calc h4 { font-size: 1.1rem; font-weight: 780; margin: 0 0 3px; font-variation-settings: "CASL" 1; }
.nww-calc .nww-calc-sub { font-size: 0.92rem; color: var(--soft); margin: 0 0 18px; }
.nww-sld { display: grid; grid-template-columns: 136px minmax(0, 1fr) 54px; gap: 12px; align-items: center; margin-bottom: 12px; }
.nww-sld label { font-size: 0.93rem; color: var(--soft); }
.nww-sld input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--green); }
.nww-sld input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.nww-sld .v { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; text-align: right; color: color-mix(in srgb, var(--green) 85%, var(--ink)); font-variant-numeric: tabular-nums; }
.nww-out { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.nww-out div { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline; font-size: 0.95rem; }
.nww-out .k { color: var(--soft); }
.nww-out .n { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.nww-out .hl .n { color: var(--warn); font-size: 1.3rem; }
.nww-out .ok .n { color: color-mix(in srgb, var(--green) 85%, var(--ink)); }

/* ------------------------------------------------------------------ closing */
.nww-kicker { margin: 28px 0 12px; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.nww-last { margin: 26px 0 0; padding: 20px 22px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 2px var(--green); }
.nww-last h3 { margin: 0 0 8px; color: color-mix(in srgb, var(--green) 85%, var(--ink)); }
.nww-last p { margin-bottom: 0; }

@media (max-width: 560px) {
  .nww-sld { grid-template-columns: 1fr; gap: 2px; }
  .nww-sld .v { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .nww-reveal summary::before { transition: none; }
}