/* module-v1.css — the module-only styles, lifted out of the 2008 module when
* modules became data (CET-D5-A20). Everything else comes from atlas-v3.css.
* Versioned by filename because Hostinger edge-caches CSS for seven days.
*/
.big{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:12px 0 2px}
.bigsub{font-size:12px;color:var(--muted);margin:0 0 4px;line-height:1.45}
.beat{display:none}
.beat.on{display:block}
.beat.done{display:block}
/* The same trap as .btn[hidden] and .door form[hidden]: a class that sets
display:block beats the hidden attribute, so the cover stayed on screen after
the reader pressed Start. An explicit rule, and it has to come after .on. */
.beat[hidden]{display:none}
.pin{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tl{margin:12px 0 0;padding:0;list-style:none}
.tl li{position:relative;padding:0 0 12px 16px;border-left:2px solid var(--line);
font-size:13.5px;line-height:1.5}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;
border-radius:50%;background:var(--accent)}
.tl b{display:block;font-size:12px;color:var(--muted);letter-spacing:.03em}
.srcs{font-size:11px;color:var(--muted);line-height:1.7}
.srcs a{color:var(--muted)}
.done .opt:not(.right):not(.wrong){opacity:.55}
.scorebox{text-align:center;padding:22px 14px}
.scorebox .big{font-size:52px;margin:4px 0}
/* ---- explainers, rule 5 ---------------------------------------------------
* The theory sits BESIDE the story and never in it. The handle is a button, so
* it is keyboard reachable with nothing else running, and it is underlined
* dotted rather than coloured, because a coloured word inside a sentence reads
* as a link to somewhere else.
*
* .tdl is the no-JavaScript fallback: a real definition list at the foot of the
* step, which module-v1.js folds away only once it has built the panels out of
* it. It is the source of the panels rather than a copy of them, so the two
* cannot drift apart.
*/
.tm{font:inherit;font-size:inherit;line-height:inherit;background:none;border:0;padding:0;
color:inherit;cursor:pointer;border-bottom:1.5px dotted var(--accent)}
.tm:hover{border-bottom-style:solid}
.tm:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.tp{display:block;margin:8px 0;padding:10px 12px;border-left:3px solid var(--accent);
background:#f7f9ff;border-radius:0 9px 9px 0;font-size:12.5px;line-height:1.55;
color:var(--ink)}
.tp em{display:block;margin-top:6px;color:var(--muted);font-style:normal}
.tp[hidden]{display:none}
/* The right order, printed in the reveal when the reader did not have it.
* Numbered, so it reads as an order rather than as a list of things. */
.ordans{display:block;margin:10px 0 4px}
.ordlist{margin:0 0 4px;padding-left:20px;font-size:13px;line-height:1.5}
.ordlist li{margin:2px 0}
/* RULE 46. The source marker is a REFERENCE, not a control.
*
* It shipped as a chip reading "source" and Luke asked for the encyclopaedia
* form instead: a superscript numeral at the end of the point. A chip asks to
* be pressed; a numeral waits to be asked. Numbered per page, so the same
* institution keeps the same number all the way down. */
.sref{font-size:0;line-height:0;white-space:nowrap}
.sm{font:inherit;font-size:10.5px;line-height:1;vertical-align:super;
background:none;border:0;padding:0 0 0 1px;margin:0;color:var(--accent);
cursor:pointer;font-variant-numeric:tabular-nums}
.sm:hover{text-decoration:underline}
.sm:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px}
.sm[aria-expanded="true"]{font-weight:800}
.sp{display:block;margin:8px 0;padding:10px 12px;border-left:3px solid var(--line,#d7dced);
background:#fafbfe;border-radius:0 9px 9px 0;font-size:12.5px;line-height:1.55;
color:var(--ink)}
.sp[hidden]{display:none}
.sp b{display:block;margin-top:8px}
.sp b:first-child{margin-top:0}
.sp i{font-style:normal;color:var(--muted)}
.sdl[hidden]{display:none}
.tdl{margin:14px 0 0;font-size:12.5px;line-height:1.55}
.tdl dt{font-weight:800;margin-top:8px}
.tdl dd{margin:2px 0 0;color:var(--muted)}
.tdl[hidden]{display:none}
/* ---- the decision step, rule 6 --------------------------------------------
* Beat 4 is hidden until the reader has chosen and read what their own choice
* would have meant. A timeline that runs past the decision is refused by the
* build, so what happened next can only appear in here.
*/
.then{margin:12px 0 0;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
background:#fff;font-size:13.5px;line-height:1.6}
.then > b{display:block;margin-bottom:6px}
.then[hidden]{display:none}
/* ---- a contested question, rule 1 -----------------------------------------
* Both sides, side by side, and no adjudication. The layout is the neutrality:
* one of these set below the other in smaller type would be the page choosing.
*/
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 0}
.two .side{margin:0;padding:10px 11px;border:1px solid var(--line);border-radius:10px;
background:#fafbfe;font-size:12.5px;line-height:1.55}
.two .side b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.03em;
text-transform:uppercase;color:var(--muted)}
@media (max-width:430px){.two{grid-template-columns:1fr}}
/* ---- the six step mechanics, rule 8 ---------------------------------------
* Ports of the games, so the look is theirs: the same green/amber/red banding,
* the same "mark up the thing the reader was already looking at" reveal, the
* same points line. A reader who has played Guess the Value already knows how
* to answer one of these.
*/
.rev{margin:12px 0 0;padding:12px 13px;border-radius:11px;font-size:13.5px;line-height:1.6;
border:1px solid var(--line);background:#fafbfe}
.rev > b{display:block;font-size:15px;margin-bottom:2px}
.rev.a{background:#f0faf4;border-color:#bde5cd}
.rev.a > b{color:#166b40}
.rev.b{background:#fdf7ec;border-color:#f0dcb6}
.rev.b > b{color:#8a5a00}
.rev.c{background:#fdf2f2;border-color:#f2c9c9}
.rev.c > b{color:#a02020}
.rev .pts{display:block;margin:2px 0 8px;font-size:11px;font-weight:800;
letter-spacing:.05em;text-transform:uppercase}
.rev[hidden]{display:none}
/* value: type the number. The chips are the game's own multipliers, offered
only where a metric actually runs into those bands. */
.val .vlab{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 6px}
.val .num{width:100%;font:inherit;font-size:22px;font-weight:800;padding:11px 13px;
border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}
.val .num:focus{outline:2px solid var(--accent);outline-offset:1px}
.val .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.val .chip{font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:6px 11px;
border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--muted)}
.val .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.val .guess{font-size:12.5px;color:var(--muted);margin:8px 0 0;min-height:1.2em}
.val .lock{margin-top:10px}
/* [hidden] is a UA rule and any author display rule beats it, so a button set
to hidden stays on screen. Same trap as the door form and the tick. */
.btn[hidden],.lock[hidden]{display:none}
/* The two markers on a log axis. The distance between them IS the score, which
is why the axis is logarithmic: being 3x out looks like being 3x out whether
the number is 20 or 20 million. */
.trk{display:block;position:relative;height:40px;margin:12px 0 34px;
border-bottom:2px solid var(--line)}
.trk .mk{position:absolute;bottom:0;width:2px;height:16px}
.trk .mk b{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
font-size:11px;font-weight:800;padding:2px 5px;border-radius:5px}
.trk .mk.t{background:#166b40}
.trk .mk.t b{bottom:18px;background:#166b40;color:#fff}
.trk .mk.g{background:#a02020}
.trk .mk.g b{top:18px;background:#a02020;color:#fff}
/* higher or lower: both cards are tappable, and the feedback lands on the one
the finger was on. */
.hl{margin-top:10px}
.hlcard{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
color:var(--ink)}
.hlcard .hlab{display:block;font-size:14px;font-weight:700;line-height:1.3}
.hlcard .hval{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.hl .vs{display:block;text-align:center;font-size:11px;font-weight:800;color:var(--muted);
letter-spacing:.08em;margin:7px 0}
.hl .tie{font-size:11.5px;color:var(--muted);margin:9px 0 0}
.hlcard.right{border-color:#166b40;background:#f0faf4}
.hlcard.wrong{border-color:#a02020;background:#fdf2f2}
.hlcard[disabled]{cursor:default}
/* order and odd one out share a tile. Order numbers them as they are tapped,
then rewrites the numbers to the true order on the reveal. */
.ord,.odd{margin-top:10px}
.oitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;
font-size:14px;cursor:pointer;padding:12px 13px;margin:0 0 8px;border:1px solid var(--line);
border-radius:11px;background:#fff;color:var(--ink)}
.oitem .onum{flex:0 0 24px;height:24px;border-radius:50%;background:#eef2ff;color:#22397a;
font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.oitem.picked .onum{background:var(--accent);color:#fff}
.oitem .olab{flex:1 1 auto}
.oitem em{font-style:normal;color:var(--muted);font-size:12.5px;margin-left:6px}
.oitem.right{border-color:#166b40;background:#f0faf4}
.oitem.wrong{border-color:#a02020;background:#fdf2f2}
.oitem.dim{opacity:.55}
.oitem[disabled]{cursor:default}
/* matcher: two columns, tap one then the other. A pair shares a number, and
tapping either half again undoes it. */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mcol{display:flex;flex-direction:column;gap:8px}
.mtile{display:flex;align-items:center;flex-wrap:wrap;gap:7px;width:100%;text-align:left;font:inherit;
font-size:12.5px;line-height:1.35;cursor:pointer;padding:10px 11px;border:1px solid var(--line);
border-radius:10px;background:#fff;color:var(--ink)}
.mtile .pin{flex:0 0 18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.mtile.paired .pin{background:var(--accent);color:#fff}
.mtile.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,92,255,.18)}
.mtile.right{border-color:#166b40;background:#f0faf4}
.mtile.wrong{border-color:#a02020;background:#fdf2f2}
.mtile .fix{display:block;width:100%;margin-top:4px;font-size:11.5px;font-weight:800;
color:#a02020}
.mtile[disabled]{cursor:default}
.mat .lock{margin-top:10px}
/* beat 3, the three named parts. The labels are what stop it collapsing back
into one sentence. */
.arole{display:block;margin:10px 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.rev .arole:first-of-type{margin-top:6px}
.then .yours{font-weight:700;margin:0 0 4px}
.opt.taken{border-color:#166b40;background:#f0faf4}
/* The recap is a list of POINTS now, not a list of names, so the lines wrap.
.rowlist was built for a country and a number, which fit on one line. */
.row.pt{align-items:flex-start}
.row.pt .nm{white-space:normal;line-height:1.45;padding-right:12px;font-weight:600}
.row.pt .vl{white-space:nowrap;flex:0 0 auto}
/* ---------------------------------------------------------------------------
14 AUGUST. The on-ramp, the boxes and the two buttons, after Luke's review.
--------------------------------------------------------------------------- */
/* THE COVER. The screen that has to make somebody care before the module asks
them anything. It is also the expanded card on the series page, so the copy
is written once and sells and orients with the same words. */
.cover .hook{margin:0 0 10px;font-size:21px;line-height:1.28;letter-spacing:-.015em}
.cover p{margin:0 0 10px}
.cover .cvh{margin:14px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.cover .cvl{margin:0;padding-left:18px;color:var(--ink)}
.cover .cvl li{margin:3px 0;line-height:1.5}
.cover .lvl{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--wash);
font-size:12.5px;line-height:1.55;color:var(--muted)}
/* A11: the Start button sits directly under the hook so it is above the fold
on a phone, and the rest of the cover is scrollable detail beneath it. It
therefore needs air on BOTH sides — it is no longer the last thing on the
card, it is a break in the middle of one. */
.cover .btnrow{margin:14px 0 18px}
/* THE CATCH-UP LINE (D2). Above the hook, and therefore the one thing on this
page that can push the Start button back below the fold — which is what A11
and M7 cost half a day to fix. So it is deliberately small and tight: 12.5px
at 1.5, which is three lines at 375px for a 40-word cap, and rule 45 asserts
the cap. test_atlas.js measures the button at 375x812 with this rendered.
It reads as context rather than as a warning. No border, no icon, no colour
that means "careful" — a reader who skipped ahead did something the product
explicitly allows, and a yellow box would tell them otherwise. */
.cover .catchup{margin:0 0 12px;padding:9px 11px;border-radius:10px;
background:var(--wash);font-size:12.5px;line-height:1.5;color:var(--muted)}
.cover .catchup[hidden]{display:none}
/* A DEFINITION PANEL CARRIES ITS TERM. Two panels open at once were
indistinguishable, which is the note Luke made on 14 August. */
.tp .tt{display:block;margin-bottom:4px;font-weight:800;color:var(--ink)}
/* AN EXPLAINER IS NOT A DEFINITION. It answers a question about a mechanism, so
it gets a row of its own under the paragraph rather than an underline inside
a sentence, and it is closed until somebody wants it. A reader who knows the
theory reads straight past. */
.xp{margin:8px 0 10px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.xh{display:flex;width:100%;align-items:center;gap:10px;justify-content:space-between;
padding:10px 12px;font:inherit;font-size:13px;font-weight:700;text-align:left;
color:var(--accent);background:var(--wash);border:0;cursor:pointer;line-height:1.4}
.xh i{flex:0 0 auto;font-style:normal;font-weight:800;font-size:16px;line-height:1}
.xh[aria-expanded="true"] i{transform:rotate(45deg)}
.xh:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.xb{padding:2px 12px 12px;font-size:13px;line-height:1.6;color:var(--ink)}
.xb[hidden]{display:none}
/* THE BENCHMARK. What turns a figure into a fact a reader can weigh. */
.bm{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.bm b{color:var(--ink)}
/* THE BOARD on a decision step: the state of the world before you choose, one
row per quantity, each with what its figure MEANS. */
.board{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 12px;
border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.brow .bq{font-weight:700;font-size:13px}
.brow .bv{font-weight:800;font-size:13px;white-space:nowrap;text-align:right}
.brow .bm2{grid-column:1/-1;font-size:12px;line-height:1.5;color:var(--muted)}
/* NEXT IN THE SERIES IS THE PRIMARY ACTION. It was a row in a list under the
recap, which left "share your score" as the loudest thing on a page whose one
job is to send the reader to the next module. */
/* THE SHORT LOUD ONE. Luke, 17 August: "I keep missing it. This is the most
important button to make people continue to the next module." The rich card
below opens on a module title; this one opens on a verb, is centred, is the
full width of the column and repeats under the score. */
.btn.gonow{display:block;width:100%;margin:8px 0 10px;padding:15px 16px;text-align:center;
text-decoration:none;font-size:16px;font-weight:800;letter-spacing:.01em}
.scorebox .btn.gonow{margin:14px 0 2px}
.btn.go{display:block;width:100%;margin:6px 0 4px;padding:13px 16px;text-align:left;
text-decoration:none}
.btn.go .gon{display:block;font-weight:800;font-size:15px;line-height:1.3}
.btn.go .god{display:block;margin-top:3px;font-weight:500;font-size:12.5px;line-height:1.45;
opacity:.85}
#retry{width:100%}
.again2{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}
/* ---------------------------------------------------------------------------
15 AUGUST. Quotes, pictures, the escape hatch, and the end screen as a
retention screen rather than a scoreboard.
--------------------------------------------------------------------------- */
/* A PULL QUOTE. Somebody's actual words, which is the one thing on the page a
reader might repeat to somebody else. */
.pull{margin:0 0 14px;padding:14px 16px;border-radius:12px;background:var(--wash);
border-left:3px solid var(--accent)}
.pull blockquote{margin:0;font-size:16px;line-height:1.45;font-weight:600;letter-spacing:-.01em}
.pull blockquote::before{content:"\201C"}
.pull blockquote::after{content:"\201D"}
.pull figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--muted)}
.pull figcaption b{display:block;color:var(--ink);font-size:12.5px}
/* A PICTURE, and its credit. The credit is not decoration: every open licence
except public domain requires it, and the build refuses an image without one. */
.pic{margin:0 0 14px}
/* CAPPED BY HEIGHT, not width. A portrait at full column width takes most of a
phone screen before the reader has read a word, and these are illustrations
beside the story rather than the story. Height is the right cap because the
pictures are mostly portraits; a landscape one simply comes out wider and
still short. */
.pic img{display:block;max-height:180px;width:auto;max-width:100%;height:auto;
border-radius:10px;background:var(--wash)}
.pic figcaption{max-width:100%}
.pic figcaption{margin-top:6px;font-size:12px;line-height:1.5;color:var(--muted)}
.pic .cred{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);opacity:.8}
.pic .cred a{color:inherit}
/* THE ESCAPE HATCH. A list of what else was on the table, not an argument for
one of them. */
.rev.alts ul{margin:6px 0 0;padding-left:18px}
.rev.alts li{margin:5px 0;line-height:1.5}
/* THE END SCREEN. What the reader came for is first: the consequence of the
decision they just took, then the way on. The score is second because a score
is a result and the next module is a reason. */
.nextbox{margin-bottom:12px}
.nextbox .lede{margin:6px 0 14px;font-size:15px;line-height:1.5;font-weight:500}
.nextbox .prog{margin:10px 0 4px;font-size:12px;color:var(--muted);text-align:center}
.pbar{display:flex;gap:4px;justify-content:center}
.pbar i{width:100%;max-width:26px;height:4px;border-radius:2px;background:var(--line)}
.pbar i.on{background:var(--accent)}
.scorebox .big{font-size:34px}
/* A recap line is a POINT and a figure, and the point can be long while the
figure can also be long. The old two-column flex squeezed the label to one
character wide when both were. A grid with a floor under the label column,
stacking when the figure is a phrase rather than a number. */
.row.pt{display:grid;grid-template-columns:minmax(58%,1fr) auto;gap:2px 10px;
align-items:baseline}
.row.pt .nm{white-space:normal;line-height:1.45;font-weight:600;padding-right:0}
.row.pt .vl{white-space:normal;text-align:right;font-weight:800}
/* An explainer that answers "why did X happen" about something with more than
one cause lists them. The list is the content, not decoration. */
.xb .causes{margin:8px 0 0;padding-left:20px}
.xb .causes li{margin:6px 0;line-height:1.55}
/* ---------------------------------------------------------------------------
B5, 15 August. The two accessibility items the review left unchecked.
--------------------------------------------------------------------------- */
/* WCAG 1.4.1, USE OF COLOUR. .right and .wrong were a green border on a green
wash and a red border on a red wash, and nothing else. The REVEAL always
carried a word — "Correct", "Not quite", "3 of 6 pairs the right way round" —
but the buttons did not, so a reader who cannot separate the two hues could
see which options had been marked and not which way. This is the commonest
failure in quiz interfaces and the fix is a word.
.opt.taken is the decision step, where nothing is right or wrong: it is
painted the same green as .right, so without a word it reads as a mark. */
.opt.right::after, .hlcard.right::after, .opt.wrong::after,
.hlcard.wrong::after, .opt.taken::after{
display:block;width:100%;margin-top:4px;font-size:11px;font-weight:800;
letter-spacing:.05em;text-transform:uppercase}
.oitem.right::after, .oitem.wrong::after{
flex:0 0 auto;margin-left:auto;font-size:11px;font-weight:800;
letter-spacing:.05em;text-transform:uppercase}
.opt.right::after, .hlcard.right::after{content:'The answer';color:#166b40}
.opt.wrong::after, .hlcard.wrong::after{content:'Your answer';color:#a02020}
/* An ORDER step marks a POSITION, not an option: every row is the reader's
answer, and what is right or wrong is where they put it. "The answer" on row
three of four would be nonsense. */
.oitem.right::after{content:'Right place';color:#166b40}
.oitem.wrong::after{content:'Wrong place';color:#a02020}
/* And a DECISION marks neither. This is painted the same green as .right, so
without a word it reads as a mark on a step that must never carry one. */
.opt.taken::after{content:'What was done';color:#166b40}
/* VISIBLE FOCUS ON EVERY CONTROL. The term handles, the number box and the
explainer headers had focus rings; the things a reader actually answers with
did not, so a keyboard user tabbing through the options had nothing to tell
them where they were. Same ring as the rest of the page. */
.opt:focus-visible, .hlcard:focus-visible, .oitem:focus-visible,
.mtile:focus-visible, .btn:focus-visible, .lock:focus-visible{
outline:2px solid var(--accent);outline-offset:2px}
/* The reveal takes focus when it appears (A12) and is not in the tab order, so
it must NOT draw a ring — the scroll and the new content are the signal. */
.rev:focus{outline:none}
/* B1 item 4 and C8, 15 August. THE RECAP IS NOW TAPPABLE, and the module ends on
the terms it taught.
The row is a flex line, so a definition panel opening inside it has to take a
line of its own rather than squeeze in beside the figure. The label is a
because module-v1.js inserts the panel after the handle's closest
, and a
gave it nowhere to put one. */
.recap{margin-top:14px}
/* .row.pt is a GRID, not a flex line — a dynamically inserted panel becomes a
third grid item and lands in column two beside the label. Placing all three
explicitly puts the panel on its own row across the full width, whatever
order the engine inserts it in. */
.row.pt .nm{margin:0;grid-column:1;grid-row:1}
.row.pt .vl{grid-column:2;grid-row:1}
.row.pt .tp{grid-column:1 / -1;grid-row:2;margin:8px 0 2px}
.terml{margin:0;line-height:2.1}
.terml .tm{margin-right:2px}
.recap .cvh{margin:16px 0 6px}
/* B1 item 2 and B2, 15 August. THE DECISION, RECALLED ON THE END SCREEN.
It sits between the next-module card and the score: what the reader did comes
before how they were marked, because the decision is the thing only this
product has and the score is the thing every quiz has. */
.yourdec{margin-top:10px}
.yourdec .ydm{margin:2px 0 0;font-size:16px;font-weight:800;line-height:1.35}
.yourdec .yds{margin:4px 0 0;color:var(--muted);line-height:1.5}
.yourdec[hidden]{display:none}
/* The series page's decision count. A register, in the same quiet type as the
module count above it — deliberately not a badge. */
.dec{margin-top:-4px}
/* B7. The recommended pace. Deliberately the quietest type on the screen: it is
a recommendation an adult can ignore, and anything louder reads as a rule. */
.pace{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.nextbox .pace{margin-top:10px}
/* ---- DELIBERATE NAVIGATION, on a module page -------------------------------
Luke, 18 August: "once you start a module, there is no button to go back to
the series page".
He is right, and the reason is that the two things that COULD take you there
were both written as text rather than as controls: a 12px breadcrumb and a
12px line reading "Thatcher's Economic Policy, module 2 of 13". Neither is a
target on a phone, and the second was carrying the whole job of "get me back
to the list" on its own.
The breadcrumb stays where it is, because it is the structured breadcrumb a
search result renders. What replaces the second line is a real button, and it
names where it goes and where you are in one string.
IT IS ABOVE THE COVER, SO IT COSTS FOLD. A11 and M7 put the Start button
directly under the hook and test_atlas.js asserts it stays above 812px at
375 wide; this row and the catch-up line are both drawn before it, so both
are in that measurement. */
.navrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.navbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;
padding:9px 13px;border:1px solid var(--line);border-radius:11px;
background:var(--card);color:var(--ink);font-weight:700;font-size:13px;
line-height:1.25;text-decoration:none}
.navbtn:hover{border-color:var(--accent);color:var(--accent)}
.navbtn .arw{font-weight:800;color:var(--muted)}
.navbtn:hover .arw{color:var(--accent)}
.navbtn .pos{color:var(--muted);font-weight:600}
.navbtn:hover .pos{color:var(--accent)}
/* On the end screen the row sits under the next-module block, and there it is
full width: a reader who has finished is choosing between two real places to
go rather than glancing at a header. */
.navrow.after{margin:14px 0 4px}
.navrow.after .navbtn{flex:1 1 46%;justify-content:center}
@media (max-width:380px){.navrow.after .navbtn{flex:1 1 100%}}
.navbtn .nb{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.navbtn .pos{font-size:11.5px;font-weight:600}
.navbtn.wide .nb{align-items:center}
/* THE LICENCE TO BE WRONG, above the first question of a module only. A reader
who reads question one as a test of what they already know is the reader who
leaves at step one, and every module is built on guessing before being told.
Quiet: it sits above the question and must not compete with it. */
.guessnote{margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--muted);
font-weight:600}