/* Journal Basket: the design system (D43). It follows UNSW's digital design language while the site stays an
   independent academic resource: no UNSW logo, crest or wordmark, and a disclaimer in every footer.
   Colour: UNSW yellow (#FFDC00, never tinted), black and white dominate. One accent, indigo (a UNSW secondary accent),
   is used sparingly: its 15% tint for notes and larger panels, its 30% tint for small tags, and full strength only for
   thin edges. Accent colours are never used for text. Black 30% and 15% greys only where a line or state needs them.
   Several hues appear only in a diagram (the guide's circles diagram).
   Type: Roboto, hosted with the site (public/fonts/, SIL Open Font License): Light for body copy, Regular for small
   text and for text on black (dark mode), Medium for controls and labels, Bold for headings. UNSW's heading typeface,
   Clancy, is licensed by UNSW and not available to this site, so headings use Roboto Bold (--font-heading is the one
   place to change if a licence is granted). Roboto Mono for small labels, numbers and technical details.
   Shape: square corners and thin lines instead of rounded cards and soft shadows; numbers sit in yellow or black squares.
   Layout: a square module (--module) of one twentieth of a wide screen, never less than 2.5rem so that a phone still has
   at least four across its narrow edge. It sets the large spaces and the angled edge of the yellow title blocks.
   Motion: short, purposeful animations, switched off for people who ask for reduced motion. */

/* ---------- Fonts (self-hosted; nothing is loaded from other websites) ---------- */
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/roboto-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/fonts/roboto-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/fonts/roboto-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonts/roboto-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonts/roboto-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  /* UNSW primary palette */
  --yellow: #ffdc00;
  --black: #000000;
  --white: #ffffff;
  /* The one accent: indigo, with its 30% and 15% tints (indigo mixed with white) */
  --indigo: #3f61c4;
  --indigo-30: #c5d0ed;
  --indigo-15: #e2e7f6;
  /* Functional greys: black 30% and 15% */
  --grey-30: #b3b3b3;
  --grey-15: #d9d9d9;

  /* What each colour is for (light mode) */
  --bg: var(--white);
  --surface: var(--white);
  --ink: var(--black);
  --muted: #4d4d4d;                  /* secondary text only: black 70%, 8.4:1 on white, 6.2:1 on yellow */
  --line: var(--grey-15);            /* thin lines around and between things */
  --line-strong: var(--black);       /* form fields and emphasis */
  --info-bg: var(--indigo-15);       /* notes, callouts, activities, text to copy */
  --info-edge: var(--indigo);        /* a thin edge beside them */
  --tag-bg: var(--indigo-30);        /* small tags */
  --tag-line: transparent;
  --hover-bg: var(--indigo-15);      /* table rows under the pointer */
  --focus: var(--black);
  --tier-a: var(--black);   --tier-a-fg: var(--white);
  --tier-b: var(--grey-30); --tier-b-fg: var(--black);
  --tier-c: var(--grey-15); --tier-c-fg: var(--black);
  --cell-right: var(--indigo-30);    /* concept matrix: a link found */
  --cell-extra: var(--grey-30);      /* concept matrix: ticked but not in the study */
  --shadow-float: 0 6px 20px rgba(0, 0, 0, .2);   /* only for the Back to top button, which floats over the page */

  /* Type */
  --font-heading: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  --body-weight: 300;

  /* Space: a 4-pixel scale, and the square module of the grid */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --module: clamp(2.5rem, 5vw, 4rem);

  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* Dark mode is not covered by the UNSW guide. It keeps the same rules on black: white or yellow text (both approved on
   black), Roboto Regular for text reversed out of a dark background, indigo only as thin edges. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--black);
    --surface: var(--black);
    --ink: var(--white);
    --muted: var(--grey-30);         /* 10:1 on black */
    --line: #4d4d4d;
    --line-strong: var(--white);
    --info-bg: #161616;
    --info-edge: var(--indigo-30);
    --tag-bg: transparent;
    --tag-line: var(--indigo-30);
    --hover-bg: #161616;
    --focus: var(--yellow);
    --tier-a: var(--white);   --tier-a-fg: var(--black);
    --tier-c: #4d4d4d;        --tier-c-fg: var(--white);
    --cell-right: var(--indigo);
    --cell-extra: #4d4d4d;
    --body-weight: 400;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; color: var(--ink); background: var(--bg); font: var(--body-weight) 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
p { margin: 0; }
strong, b { font-weight: 600; }
/* Links: underlined in the colour of the text; under the pointer they sit on yellow (black on yellow). */
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:is(p, li, td, dd) a:not(.button) { font-weight: 500; }
@media (hover: hover) { :is(p, li, td, dd, h3) a:not(.button):hover { background: var(--yellow); color: var(--black); } }
/* Links in the text that open another website get a small arrow. */
.guide-body a[target="_blank"]:not(.button)::after, .prose a[target="_blank"]::after, .note a[target="_blank"]::after { content: "\2197" / ""; display: inline-block; text-decoration: none; font-size: .8em; margin-left: .12em; }
code { font-family: var(--font-mono); font-size: .86em; font-weight: 400; padding: .05rem .3rem; border: 1px solid var(--line); letter-spacing: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.hint { color: var(--muted); font-size: .94rem; font-weight: 400; line-height: 1.5; }
.lede { font-size: 1.2rem; font-weight: 400; line-height: 1.5; }
.wrap { max-width: 76rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
/* Small labels: Roboto Mono capitals. */
.eyebrow, .label, .hero-about-title, .go-title, .toc-title, .card-label, .activity-label, .perspective-tag, .scenario-tag,
.pathway-kicker, .node-circles, .facets dt, .mini-example > span:first-child {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap; min-height: 4rem; padding-block: .5rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--yellow); }
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.brand-mark path:first-child { fill: var(--black); }
.brand-mark path:last-child { stroke: var(--black); stroke-width: 2.2; stroke-linecap: round; }
.brand-name { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; min-height: 2.5rem;
  color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav a[aria-current="page"] { background: var(--yellow); color: var(--black); }
/* The menus scroll sideways on small screens, which would cut off a focus ring drawn outside; draw it inside. */
.nav a:focus-visible, .toc a:focus-visible { outline-offset: -3px; }
.nav-count { font: 500 .7rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums; background: var(--ink); color: var(--bg); padding: 0 .35rem; min-width: 1.4rem; text-align: center; }
.nav a[aria-current="page"] .nav-count { background: var(--black); color: var(--white); }
.nav-count:empty { display: none; }

/* "Not an official ABDC tool" notice under the top bar, on every page */
.official-note { background: var(--info-bg); border-bottom: 1px solid var(--line); color: var(--ink); font-size: .85rem; font-weight: 400; line-height: 1.5; }
.official-note-inner { display: flex; align-items: flex-start; justify-content: center; gap: .5rem; padding-block: .55rem; }
.official-note svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }
.official-note strong { font-weight: 700; }
.official-note a { color: var(--ink); font-weight: 500; white-space: nowrap; }
@media (max-width: 640px) { .official-note-inner { justify-content: flex-start; } .official-more { display: none; } .official-note a { white-space: normal; } }
.page > .note { font-size: .94rem; }

/* ---------- Pages ---------- */
main.wrap { padding-block: var(--space-6) var(--space-7); }
.view { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.view:not([hidden]) { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.search-card > *, .step > *, .field > *, .more-grid > *, .journal-choices > * { min-width: 0; }

/* Cards: white, with a thin line instead of a shadow. */
.card, .search-card, .go, .results-card, .block, .preset-info, .journal-choices, .settings-grid {
  background: var(--surface); border: 1px solid var(--line);
}

/* ---------- Yellow title blocks (Search page and the three guides) ----------
   UNSW yellow, black type, and an angled edge one module wide: down the right on wide screens, across the bottom on
   phones. The drawing sits beside it on white. */
.home { gap: var(--space-6); }
.hero, .guide-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.hero-text, .guide-hero-text {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: center;
  background: var(--yellow); color: var(--black);
  padding: var(--module) calc(var(--module) * .6) calc(var(--module) * 1.5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--module)), 0 100%);
}
.hero-text :is(a, .lede, .eyebrow), .guide-hero-text :is(a, .lede, .eyebrow, summary) { color: var(--black); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-6); }
  .guide-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); }
  .hero-text, .guide-hero-text {
    padding: var(--module) calc(var(--module) * 1.75) var(--module) var(--module);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--module)) 100%, 0 100%);
  }
}
.hero h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.02; letter-spacing: -.025em; }
.hero-facts { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-facts li { font-size: .9rem; font-weight: 400; background: var(--white); color: var(--black); padding: .4rem .8rem; }
.hero-facts strong { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-art { display: block; width: 100%; height: auto; max-width: 21rem; justify-self: center; }
@media (min-width: 900px) { .hero-art { max-width: 30rem; } }
.hero-about { display: grid; gap: .3rem; max-width: 40rem; padding: 1rem 1.15rem; background: var(--white); color: var(--black); font-size: .95rem; line-height: 1.55; }
.hero-about a { white-space: nowrap; }
.hero-about a::after { content: " →"; }
/* The drawings: black lines, white fills, a yellow sun. (The pale glow they used to have was a tint of yellow.) */
.art-glow { display: none; }
.art-sun { fill: var(--yellow); }
.art-sun { transform-box: fill-box; transform-origin: center; animation: sunrise 1.4s var(--ease) both; }
@keyframes sunrise { from { transform: translateY(18px); opacity: 0; } to { transform: none; } }
.art-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.art-hair { stroke-width: 1; opacity: .5; }
.art-fill { fill: var(--surface); }
/* The map of Australia (Natural Earth outline, public domain): capital cities joined like a research network */
.map-land { fill: var(--surface); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.map-links { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .55; }
.map-city { fill: var(--ink); stroke: var(--surface); stroke-width: 2.5; }

/* ---------- Search page ---------- */
.search-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.search-card { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 2.25rem; }
@media (min-width: 960px) { .search-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.intro { display: grid; gap: .75rem; }
.step { display: grid; gap: .75rem; }
.step h2 { display: flex; align-items: center; gap: .75rem; }
.step h2 label { font: inherit; }
/* Numbers in squares: yellow for the steps people take, black for steps in a list. */
.num, .section-num, .step-n {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  background: var(--yellow); color: var(--black); font: 500 .9rem/1 var(--font-mono); letter-spacing: 0;
}
.preset-note { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; color: var(--muted); font-size: .94rem; font-weight: 400; }
.field { display: grid; gap: .4rem; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
label { font-size: .9rem; font-weight: 500; color: var(--ink); }

select, input {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); width: 100%; max-width: 100%; min-height: 3rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; padding: .65rem 1rem;
  transition: box-shadow .15s var(--ease);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23757575' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem;
}
input::placeholder { color: var(--muted); opacity: 1; }
select:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[type="search"] { font-size: 1.05rem; min-height: 3.3rem; }
.field-message { position: relative; padding-left: 1.75rem; color: var(--ink); font-weight: 500; font-size: .94rem; animation: rise .3s var(--ease) both; }
.field-message::before { content: "!"; content: "!" / ""; position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; background: var(--ink); color: var(--bg); font: 700 .8rem/1 var(--font-body); }
.word-check { background: var(--info-bg); border-left: 4px solid var(--info-edge); padding: .8rem 1rem; font-size: .94rem; font-weight: 400; line-height: 1.5; animation: rise .3s var(--ease) both; }
.word-check-title { font-weight: 700; margin: 0 0 .35rem; }
.word-check ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* Basket-size choices: the chosen one turns yellow. */
.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.level {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; align-items: center; text-align: left;
  padding: .95rem 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.level:active { transform: scale(.985); }
.level[aria-checked="true"] { background: var(--yellow); border-color: var(--black); }
.level[aria-checked="true"], .level[aria-checked="true"] .detail { color: var(--black); }
.level .radio { grid-row: span 2; position: relative; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--ink); transition: background-color .2s var(--ease); }
.level[aria-checked="true"] .radio { background: var(--black); border-color: var(--black); }
.level[aria-checked="true"] .radio::after { content: ""; position: absolute; left: .42rem; top: .2rem; width: .3rem; height: .62rem; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); animation: pop .25s var(--ease) both; }
@keyframes pop { from { transform: rotate(45deg) scale(.4); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
.level .title { font-weight: 700; font-size: 1rem; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.level .detail { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .86rem; }
.level .chips { display: inline-flex; gap: 3px; }
.recommended { font: 500 .62rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--black); color: var(--white); padding: .1rem .4rem; }

/* Disclosures (tips, more options, search text) */
details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .96rem; color: var(--ink); width: max-content; max-width: 100%; padding: .2rem 0; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .25s var(--ease); margin-right: .1rem; }
details[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
details[open] > summary { margin-bottom: .8rem; }
details[open] > :not(summary) { animation: rise .3s var(--ease) both; }
.tips ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .96rem; }
.more-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding: 1.1rem; border: 1px solid var(--line); }
@media (min-width: 720px) { .more-grid { grid-template-columns: 1fr 1fr; } }

/* Your basket and the search buttons */
.go { position: relative; display: grid; gap: .85rem; padding: clamp(1.5rem, 3vw, 2rem); border-top: 0; }
.go::before { content: ""; position: absolute; inset: 0 -1px auto -1px; height: 8px; background: var(--yellow); }
.go-count { font-family: var(--font-heading); font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.go-count #go-count-word { font-size: 1.15rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.go-buttons { display: flex; gap: .65rem; flex-wrap: wrap; }
@media (min-width: 960px) {
  .go { position: sticky; top: 5.5rem; }
  .go-buttons { flex-direction: column; }
  .go-buttons .button { width: 100%; }
}
.summary { font-size: .96rem; font-weight: 400; color: var(--muted); }
.summary strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Buttons: square. The main action is yellow; the others are outlined. Under the pointer both turn black. */
.button {
  font: inherit; font-size: .98rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.9rem; padding: 0 1.3rem; border: 1px solid var(--ink); border-radius: 0; background: transparent; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.button:active { transform: translateY(1px); }
.button.primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.button.big { min-height: 3.4rem; padding: 0 1.8rem; font-size: 1.05rem; }
.button.small { min-height: 2.2rem; padding: 0 .95rem; font-size: .88rem; }
.button:disabled { opacity: .45; cursor: default; }
.linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (hover: hover) {
  .nav a:not([aria-current="page"]):hover { box-shadow: inset 0 -3px 0 var(--ink); }
  select:hover, input:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
  .level:not([aria-checked="true"]):hover { border-color: var(--ink); }
  .button:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .button.primary:not(:disabled):hover { background: var(--black); border-color: var(--black); color: var(--yellow); }
  details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (hover: hover) and (prefers-color-scheme: dark) {
  .button.primary:not(:disabled):hover { background: var(--white); border-color: var(--white); color: var(--black); }
}

/* ---------- Results (shown after searching) ---------- */
.results-card { max-width: 52rem; width: 100%; margin: 0 auto; padding: clamp(1.5rem, 5vw, 2.75rem); display: grid; gap: 1.3rem; animation: rise .5s var(--ease) both; }
.results-card:focus { outline: none; }
.results-card h2 { font-size: 1.6rem; }
.results-card h2::before { content: ""; display: block; width: 2.5rem; height: .4rem; background: var(--yellow); margin-bottom: 1rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .85rem; counter-increment: step; }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--ink); color: var(--bg); font: 500 .85rem/1 var(--font-mono); }
.steps > li > div { display: grid; gap: .65rem; min-width: 0; }
.steps strong { font-weight: 700; }
.part-buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
/* A part that has been opened turns white, so people can see which parts are still to open. */
.part-buttons a.button.primary:visited { background-color: var(--surface); border-color: var(--ink); color: var(--ink); }
.combine { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.combine code { font-size: 1rem; padding: .3rem .65rem; }
.notice { font-size: .95rem; font-weight: 400; background: var(--info-bg); border-left: 4px solid var(--info-edge); padding: .8rem 1rem; }
.search-text { display: grid; gap: .45rem; margin-bottom: 1rem; }
.search-text-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; color: var(--muted); }
pre.query { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: .85rem 1rem; font: 400 .8rem/1.55 var(--font-mono); letter-spacing: 0; white-space: pre-wrap; word-break: break-word; max-height: 10rem; overflow: auto; }
.next-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .98rem; padding-top: .3rem; }
.next-links a { font-weight: 500; }
.next-links a::after { content: " →"; display: inline-block; text-decoration: none; transition: transform .2s var(--ease); }
.next-links a:hover::after { transform: translateX(.2rem); }

/* Next steps under the search: four cards, each with a line icon on a yellow square. */
.more-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .more-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .more-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.more-card {
  display: grid; gap: .35rem; align-content: start; padding: 1.35rem 1.45rem; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.more-card svg { width: 2.75rem; height: 2.75rem; padding: .6rem; margin-bottom: .5rem; background: var(--yellow); fill: none; stroke: var(--black); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.more-card strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; }
.more-card strong::after { content: " →"; }
.more-card span { color: var(--muted); font-size: .93rem; font-weight: 400; line-height: 1.5; }
@media (hover: hover) { .more-card:hover { border-color: var(--ink); transform: translateY(-2px); } }

/* ---------- Inner pages (Journals, Write-up, Help) ----------
   The page title sits on a small yellow block with the same angled edge as the large title blocks. */
.page { max-width: 58rem; width: 100%; margin: 0 auto; }
.page > h1 {
  justify-self: start; background: var(--yellow); color: var(--black);
  padding: .3em calc(.45em + var(--module) * .5) .3em .45em;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--module) * .5) 100%, 0 100%);
}
.block { padding: clamp(1.25rem, 3.5vw, 1.9rem); display: grid; gap: .9rem; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.methods { font-size: 1.04rem; line-height: 1.7; overflow-wrap: anywhere; }   /* long addresses wrap on small phones */
.fingerprint code { font-size: 1.25rem; padding: .4rem .8rem; letter-spacing: .08em; background: var(--yellow); color: var(--black); border: 0; }
.explain, .references { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.explain { color: var(--muted); font-weight: 400; }
.references { list-style: none; padding-left: 0; font-size: .95rem; }
.references li { padding-left: 1.5rem; text-indent: -1.5rem; overflow-wrap: anywhere; }
/* Text the site writes for people to copy (D37, D43): black text on the indigo 15% tint, with a thin indigo edge. */
.methods, .references { color: var(--ink); font-weight: 400; background: var(--info-bg); padding: 1rem 1.2rem 1rem 1.4rem; border-left: 4px solid var(--info-edge); }
.methods { margin: 0; }
.methods a, .references a { color: inherit; }

/* Two or three choices in a row (Write-up page): the chosen one turns yellow. */
.segmented { display: inline-flex; border: 1px solid var(--ink); }
.segmented button { font: inherit; font-size: .88rem; font-weight: 500; border: 0; background: none; color: var(--ink); padding: .4rem .9rem; cursor: pointer; transition: background-color .2s var(--ease); }
.segmented button + button { border-left: 1px solid var(--ink); }
.segmented button[aria-checked="true"] { background: var(--yellow); color: var(--black); }

.journal-choices { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.4rem; }
@media (min-width: 720px) { .journal-choices { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.preset-info { display: grid; gap: .5rem; font-size: .96rem; padding: 1.25rem 1.4rem; }
.preset-info > p:first-child strong { font-weight: 700; }
.preset-info ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-weight: 400; }
/* How a discipline fits the ABDC fields: tags with words, in black and white; a coverage gap is filled black. */
.fit { display: inline-block; font: 500 .66rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: .1rem .5rem; border: 1px solid var(--ink); color: var(--ink); white-space: nowrap; justify-self: start; vertical-align: middle; }
.fit-gap { background: var(--ink); color: var(--bg); }

.journal-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.journal-tools input { width: 20rem; max-width: 100%; }
.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); max-height: 72vh; }
table.journals { border-collapse: collapse; width: 100%; font-size: .93rem; font-weight: 400; min-width: 36rem; }
.journals th {
  position: sticky; top: 0; z-index: 1; text-align: left; font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  padding: .8rem .9rem; background: var(--surface); box-shadow: inset 0 -2px 0 var(--ink);
}
.journals td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; transition: background-color .15s var(--ease), opacity .2s var(--ease); }
.journals tr:last-child td { border-bottom: 0; }
.journals tr.off td:not(:first-child) { opacity: .38; }
.journals tr.off td:nth-child(2) { text-decoration: line-through; }
.journals td.issns { font-family: var(--font-mono); font-size: .78rem; letter-spacing: 0; white-space: nowrap; color: var(--muted); }
.journals .role { display: inline-block; margin-left: .4rem; font: 500 .62rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--tag-bg); box-shadow: inset 0 0 0 1px var(--tag-line); padding: .05rem .4rem; vertical-align: middle; }
.journals .publisher { display: block; color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.journals input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
@media (hover: hover) { .journals tbody tr:hover td { background: var(--hover-bg); } }

/* ABDC ratings: A* yellow, A black, B and C in the two functional greys, always with the letter. */
.tier { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.35rem; padding: 0 .35rem; font: 700 .72rem/1 var(--font-body); letter-spacing: 0; }
.t-Astar { background: var(--yellow); color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.t-A { background: var(--tier-a); color: var(--tier-a-fg); }
.t-B { background: var(--tier-b); color: var(--tier-b-fg); }
.t-C { background: var(--tier-c); color: var(--tier-c-fg); }

/* Help page */
.prose { max-width: 46rem; gap: 1rem; line-height: 1.65; }
.prose h2 { margin-top: var(--space-5); font-size: 1.4rem; }
.prose p, .prose li { color: var(--ink); }
.prose ol, .prose ul { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.fit-list { list-style: none; padding-left: 0 !important; }
.fit-list .fit { margin-right: .5rem; min-width: 11.5rem; text-align: center; }
/* One setting per row, so the menus line up and their longest choice fits ("No library login (on campus, …)"). */
.settings-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding: 1.4rem; }
.settings-grid .field + .field { border-top: 1px solid var(--line); padding-top: 1rem; }
.settings-grid select { max-width: 28rem; }

/* Back to top: a small black square, bottom right, shown once the page has been scrolled */
.to-top {
  position: fixed; z-index: 40; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 1.05rem 0 .85rem;
  border: 0; font: 500 .9rem/1 var(--font-body); color: var(--bg); background: var(--ink); cursor: pointer; box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.to-top:active { transform: translateY(1px); }
@media (hover: hover) { .to-top:hover { background: var(--yellow); color: var(--black); } }
h1[tabindex="-1"]:focus { outline: none; }

/* Use with an AI assistant (Write-up page) */
.ai-purpose { max-width: 24rem; }
pre.ai-text { max-height: 18rem; font-family: var(--font-body); font-size: .88rem; }

/* What the ratings mean (Help page) */
.prose h3 { margin-top: .6rem; font-size: 1.08rem; }
.ratings { display: grid; gap: .6rem; margin: 0; }
.rating-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.2rem; }
.rating-row dt { padding-top: .1rem; }
.rating-row dt .tier { min-width: 3rem; height: 1.75rem; font-size: .88rem; }
.rating-row dd { margin: 0; }
.rating-count { display: block; margin-top: .25rem; color: var(--muted); font-size: .88rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.t-none { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: .75rem !important; }

/* Usage so far (Help page) */
.usage { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); animation: rise .5s var(--ease) both; }
.usage[hidden] { display: none; }
.usage-stat { display: grid; gap: .15rem; background: var(--surface); border: 1px solid var(--line); padding: 1.1rem 1.25rem; }
.usage-total { grid-column: 1 / -1; position: relative; border-left: 0; }
.usage-total::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 6px; background: var(--yellow); }
.usage-number { font-family: var(--font-heading); font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.usage-label { color: var(--muted); font-size: .9rem; font-weight: 400; }
@media (min-width: 720px) { .usage { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } .usage-total { grid-column: auto; } }

/* ---------- The guides (literature-reviews.html, citing.html, ai-tools.html) ---------- */
html:has(.guide-page) { scroll-padding-top: calc(var(--topbar-h, 4rem) + var(--toc-h, 0px) + 1rem); }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left center; }
.guide-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6) var(--space-7); }

.guide-hero { animation: rise .45s var(--ease) both; }
.guide-art { display: none; width: 100%; max-width: 22rem; height: auto; justify-self: center; align-self: center; }
@media (min-width: 900px) { .guide-art { display: block; } }
.art-shadow { fill: var(--grey-15); }
.art-lens { fill: var(--indigo-15); }
.art-handle { stroke-width: 7; }
.art-cite { fill: var(--yellow); stroke-width: 1.6; }
.art-head { stroke-width: 3.5; }
.art-link { stroke-width: 1.8; stroke-dasharray: 3 5; }
.art-dot { fill: var(--ink); stroke: none; }
.guide-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -.025em; max-width: 18ch; }
.guide-hero .lede { max-width: 44rem; }
.big-idea { max-width: 46rem; font-family: var(--font-heading); font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 500; line-height: 1.4; padding-left: 1rem; border-left: 4px solid currentColor; }
.outcomes ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; max-width: 46rem; font-weight: 400; }

/* The beginner's guide to download, under the opening block (D30). */
.starter { display: grid; gap: 1.25rem; padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--surface); border: 1px solid var(--line); line-height: 1.6; animation: rise .45s var(--ease) both; }
.starter-text { display: grid; gap: .75rem; max-width: 48rem; }
.starter h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.starter-action { display: grid; gap: .45rem; justify-items: start; }
@media (min-width: 760px) { .starter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2.5rem; } .starter-action { justify-items: center; } }

/* The section menu: a bar under the top bar on phones and tablets, a list beside the guide on wide screens. */
.guide-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.toc { position: sticky; top: var(--topbar-h, 4rem); z-index: 30; margin-inline: calc(-1 * max(20px, env(safe-area-inset-left))); padding: .5rem max(20px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--line); }
.toc-title { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; counter-reset: toc; }
.toc ol::-webkit-scrollbar { display: none; }
.toc li { counter-increment: toc; flex: none; }
.toc a { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem .4rem .4rem; color: var(--ink); font-size: .88rem; font-weight: 400; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease); }
.toc a::before { content: counter(toc); display: inline-grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font: 500 .72rem/1 var(--font-mono); }
.toc a[aria-current] { font-weight: 700; }
.toc a[aria-current]::before { background: var(--yellow); color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
@media (hover: hover) { .toc a:not([aria-current]):hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 1080px) {
  .guide-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-6); }
  .toc { top: calc(var(--topbar-h, 4rem) + 1.5rem); margin: 0; padding: 1.1rem 1rem; border: 1px solid var(--line); background: var(--surface); }
  .toc-title { display: block; color: var(--muted); margin: 0 0 .6rem .4rem; }
  .toc ol { flex-direction: column; overflow: visible; gap: .1rem; }
  .toc a { display: flex; white-space: normal; padding: .4rem; line-height: 1.3; }
}

.guide-body { display: grid; gap: var(--space-5); min-width: 0; }
.guide-section { display: grid; gap: 1rem; min-width: 0; padding: clamp(1.4rem, 4vw, 2.6rem); background: var(--surface); border: 1px solid var(--line); line-height: 1.65; }
.guide-section > h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.02em; margin-bottom: .2rem; }
.guide-section h3 { font-size: 1.18rem; margin-top: .6rem; }
.guide-section h4 { font-size: 1rem; margin: .4rem 0 0; }
.guide-section ul, .guide-section ol:not([class]) { margin: 0; padding-left: 1.3rem; display: grid; gap: .4rem; }
.section-num { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.guide-section > *, .activity > *, .perspective > *, .scenario > * { min-width: 0; }

/* Ticks and crosses: a black tick on a yellow square; a black cross in an outlined square. */
ul.ticks, ul.crosses { list-style: none; padding-left: 0; }
.ticks li, .crosses li { position: relative; padding-left: 1.75rem; }
.ticks li::before, .crosses li::before, .m-bad::before, .m-good::before { position: absolute; left: 0; top: .22rem; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; font: 700 .7rem/1 var(--font-body); }
.ticks li::before, .m-good::before { content: "✓"; content: "✓" / ""; background: var(--yellow); color: var(--black); }
.crosses li::before, .m-bad::before { content: "✕"; content: "✕" / ""; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }

/* The simple flow: find → evaluate → … (and Diagram A) */
.flow { margin: .4rem 0; display: grid; gap: .8rem; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: flow; }
.flow-steps li { counter-increment: flow; position: relative; display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--line); font-weight: 500; font-size: .95rem; line-height: 1.3; }
.flow-steps li::before { content: counter(flow); flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; background: var(--ink); color: var(--bg); font: 500 .78rem/1 var(--font-mono); }
.flow-steps li:last-child { background: var(--yellow); border-color: var(--black); color: var(--black); }
.flow-steps li:last-child::before { background: var(--black); color: var(--white); }
.flow figcaption, .diagram-title { color: var(--muted); font-size: .9rem; font-weight: 400; }
.diagram-title { font-weight: 700; color: var(--ink); }
@media (min-width: 760px) {
  .flow-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.4rem; }
  .flow-steps li { flex-direction: column; align-items: flex-start; }
  .flow-steps li:not(:last-child)::after { content: "→"; content: "→" / ""; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%); color: var(--ink); font-weight: 400; }
}

/* A quotation to remember: Roboto Mono with a yellow edge. */
blockquote.teaching { margin: .4rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 6px solid var(--yellow); font: 400 1.02rem/1.65 var(--font-mono); letter-spacing: -.01em; }

.compare-cards { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .compare-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.example-card { display: grid; gap: .5rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); }
.example-card.strong { background: var(--info-bg); border-color: var(--info-bg); }
.card-label, .activity-label, .perspective-tag, .scenario-tag { color: var(--muted); }
.example-text { font-size: .98rem; }
/* Example requests to an AI assistant (AI tools guide) */
.prompt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.prompt-list li { background: var(--info-bg); border-left: 4px solid var(--info-edge); padding: .7rem 1rem; font-size: .96rem; font-weight: 400; line-height: 1.5; }
.fiction { color: var(--muted); font-size: .82rem; font-weight: 400; font-style: italic; }

/* Activities: an indigo 15% panel with white cards to choose from. */
.activity { display: grid; gap: .8rem; padding: clamp(1rem, 3vw, 1.4rem); background: var(--info-bg); margin-top: .4rem; }
.activity h3 { margin-top: 0; }
.activity-label { color: var(--ink); display: inline-flex; align-items: center; gap: .45rem; }
.activity-label::before { content: ""; width: .6rem; height: .6rem; background: var(--yellow); box-shadow: inset 0 0 0 1px var(--black); }
.passages { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .passages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.passage { display: grid; gap: .4rem; align-content: start; text-align: left; font: inherit; font-size: .95rem; line-height: 1.5; color: var(--ink); padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .12s var(--ease); }
.passage:active { transform: translateY(1px); }
.passage-label { font-weight: 700; font-size: .85rem; }
.passage.right { border: 2px solid var(--black); background: var(--yellow); color: var(--black); }
.passage.wrong { border: 2px dashed var(--ink); }
.feedback { font-size: .95rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); animation: rise .3s var(--ease) both; }
.feedback strong { font-weight: 700; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: grid; gap: .45rem; }
.choices legend { font-weight: 700; margin-bottom: .55rem; padding: 0; }
.choice { display: flex; align-items: flex-start; gap: .65rem; font-size: .96rem; font-weight: 400; line-height: 1.4; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.choice input, .checklist input, .matrix input { width: 1.15rem; height: 1.15rem; min-height: 0; margin: .12rem 0 0; padding: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--black); background: var(--yellow); color: var(--black); }
.choice:has(input:checked) input { accent-color: var(--black); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.approach-result { display: grid; gap: .6rem; }
.approach-result [data-approach] { background: var(--surface); padding: .9rem 1rem; border: 1px solid var(--line); animation: rise .3s var(--ease) both; }
.approach-note { color: var(--muted); font-size: .9rem; font-weight: 400; }
@media (hover: hover) { .passage:not(.right):hover, .choice:hover { border-color: var(--ink); } }

/* University resources: a numbered pathway */
.pathway { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: path; }
.pathway li { counter-increment: path; position: relative; display: grid; gap: .3rem; padding: 0 0 1.4rem 3.1rem; }
.pathway li::before { content: counter(path); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--ink); color: var(--bg); font: 500 .92rem/1 var(--font-mono); }
.pathway li:first-child::before { background: var(--yellow); color: var(--black); }
.pathway li:not(:last-child)::after { content: ""; position: absolute; left: 1rem; top: 2.1rem; bottom: 0; width: 2px; background: var(--line); }
.pathway-kicker { color: var(--muted); line-height: 2.1rem; }
.pathway h3 { margin: -.15rem 0 0; font-size: 1.12rem; }
.pathway h3 a::after { content: " ↗"; font-weight: 400; }
.pathway-source { font-size: .84rem; font-weight: 500; color: var(--muted); }
.pathway-why { font-size: .93rem; font-weight: 400; color: var(--muted); }
.pathway-why strong { color: var(--ink); }

/* Types of review: tabs. The chosen tab turns yellow. */
.tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.tablist [role="tab"] { font: inherit; font-size: .9rem; font-weight: 500; line-height: 1.25; border: 0; background: none; color: var(--ink); padding: .7rem .5rem; cursor: pointer; transition: background-color .2s var(--ease); }
.tablist [role="tab"] + [role="tab"] { border-left: 1px solid var(--ink); }
.tablist [aria-selected="true"] { background: var(--yellow); color: var(--black); font-weight: 700; }
@media (hover: hover) { .tablist [aria-selected="false"]:hover { box-shadow: inset 0 -3px 0 var(--ink); } }
.tabpanel { display: grid; gap: .8rem; padding-top: 1rem; }
.tabs:not(.tabs-on) .tabpanel + .tabpanel { margin-top: 1rem; border-top: 1px solid var(--line); }
.tabs-on .tabpanel:not([hidden]) { animation: rise .3s var(--ease) both; }
.tabs-on .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabpanel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.facets { display: grid; gap: .55rem; margin: .2rem 0 0; }
.facets > div { display: grid; gap: .2rem; padding: .8rem 1rem; border: 1px solid var(--line); }
.facets dt { color: var(--muted); }
.facets dd { margin: 0; }
@media (min-width: 760px) { .facets > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; } .facets dt { padding-top: .2rem; } }

/* Notes and callouts: the indigo 15% tint. */
.callout { display: grid; gap: .7rem; padding: 1.1rem 1.25rem; background: var(--info-bg); border-left: 4px solid var(--info-edge); }
.callout h3 { margin-top: 0; }
.two-col { display: grid; gap: .9rem 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.note { padding: .9rem 1.1rem; background: var(--info-bg); font-size: .96rem; }

/* How to: the eight steps (an accordion) */
.steps-accordion { display: grid; gap: .5rem; }
.step-item { border: 1px solid var(--line); background: var(--surface); transition: border-color .2s var(--ease); }
.step-item > summary { display: flex; width: 100%; align-items: flex-start; gap: .85rem; padding: .95rem 1.1rem; margin: 0; font-weight: 400; font-size: 1rem; }
.step-item > summary::before { order: 3; margin: .55rem 0 0 auto; flex: none; }
.step-item[open] > summary { margin-bottom: 0; }
.step-item[open] { border-color: var(--ink); }
.step-n { width: 1.9rem; height: 1.9rem; font-size: .85rem; background: var(--ink); color: var(--bg); }
.step-item[open] .step-n { background: var(--yellow); color: var(--black); }
.step-item summary strong { display: block; font-weight: 700; }
.step-line { display: block; color: var(--muted); font-size: .92rem; line-height: 1.45; margin-top: .1rem; }
.step-body { display: grid; gap: .75rem; padding: 0 1.1rem 1.1rem 3.85rem; }
@media (max-width: 640px) { .step-body { padding-left: 1.1rem; } }
@media (hover: hover) { .step-item:not([open]):hover { border-color: var(--ink); } }
.mini-example { font-size: .94rem; padding: .75rem .9rem; border: 1px solid var(--line); }
.mini-example > span:first-child { display: inline-block; margin-right: .5rem; color: var(--muted); }
.quick-check { font-size: .93rem; font-weight: 400; color: var(--muted); }
.quick-check strong { color: var(--ink); }
.callout-inline { padding: .75rem .9rem; background: var(--info-bg); font-size: .95rem; }
@media (min-width: 760px) { .two-col-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

/* Two perspectives */
.perspective { display: grid; align-content: start; gap: .9rem; padding: clamp(1.1rem, 3vw, 1.6rem); background: var(--surface); border: 1px solid var(--ink); }
.perspective > h3 { margin-top: -.3rem; font-size: 1.35rem; }
.perspective-tag { display: inline-block; justify-self: start; padding: .15rem .5rem; background: var(--tag-bg); box-shadow: inset 0 0 0 1px var(--tag-line); color: var(--ink); }
.ref { font-size: .9rem; font-weight: 400; color: var(--muted); padding-left: 1.4rem; text-indent: -1.4rem; overflow-wrap: anywhere; }
.ref em { color: var(--ink); }
.circles-text > div { display: grid; gap: .3rem; padding: .85rem 1rem; border: 1px solid var(--line); }

/* The circles diagram: a diagram, so it may use a second hue (UNSW allows several hues in information design):
   the inner circle indigo, the outer circle black; the chosen activity yellow. */
.circles { position: relative; width: 100%; aspect-ratio: 720 / 440; }
.circles-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { stroke-width: 2.5; transition: stroke-width .3s var(--ease); }
.ring-inner { fill: var(--surface); stroke: var(--indigo); }
.ring-outer { fill: none; stroke: var(--ink); }
.ring-arrows { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ring-arrows-inner { stroke: var(--indigo); }
.ring-arrows-outer { stroke: var(--ink); }
.ring-label { fill: var(--muted); font: 500 15px var(--font-mono); text-anchor: middle; letter-spacing: .04em; }
.circles[data-ring="inner"] .ring-inner, .circles[data-ring="outer"] .ring-outer, .circles[data-ring="both"] .ring { stroke-width: 4.5; }
@media (prefers-color-scheme: dark) { .ring-inner { fill: none; stroke: var(--indigo-30); } .ring-arrows-inner { stroke: var(--indigo-30); } }
.circle-nodes { position: absolute; inset: 0; }
.node-group { display: none; }
.node {
  position: absolute; transform: translate(-50%, -50%); max-width: 8.6rem; padding: .38rem .7rem; border: 1px solid var(--ink);
  font: 500 .8rem/1.2 var(--font-body); text-align: center; color: var(--ink); background: var(--surface); cursor: pointer;
  transition: background-color .2s var(--ease), transform .15s var(--ease);
}
.node-shared { border-width: 2px; }
.node[aria-pressed="true"] { background: var(--yellow); border-color: var(--black); color: var(--black); }
.node:active { transform: translate(-50%, -50%) scale(.96); }
.n-searching { left: 45.7%; top: 21%; } .n-sorting { left: 23.7%; top: 21.1%; } .n-selecting { left: 13.9%; top: 50%; }
.n-acquiring { left: 23.7%; top: 78.9%; } .n-reading { left: 45.7%; top: 79%; } .n-identifying { left: 54%; top: 62.8%; }
.n-refining { left: 54%; top: 37.2%; } .n-mapping { left: 70.8%; top: 92.2%; } .n-assessment { left: 89%; top: 63.3%; }
.n-argument { left: 84.9%; top: 21.1%; } .n-questions { left: 62.5%; top: 7.1%; }
.node-info { display: grid; gap: .3rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); min-height: 6.5rem; margin-top: .6rem; }
.node-info-title { font-weight: 700; font-size: 1.02rem; }
.node-circles { display: block; color: var(--muted); margin-bottom: .2rem; }
.walk { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.walk-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.walk-count { font: 500 .88rem var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.activity .button:not(.primary):not(:hover) { background: var(--surface); }
@media (max-width: 720px) {
  .circles { aspect-ratio: auto; display: grid; gap: .6rem; }
  .circles-art { position: static; height: auto; aspect-ratio: 720 / 440; }
  .ring-label { font-size: 22px; }
  .circle-nodes { position: static; display: flex; flex-wrap: wrap; gap: .45rem; }
  .node-group { display: block; flex-basis: 100%; margin-top: .4rem; font: 500 .72rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .node { position: static; transform: none; max-width: none; }
  .node:active { transform: scale(.96); }
}

/* Tables: the comparison, the readings and the concept matrix. Stacked cards on phones. */
.table-card { border: 1px solid var(--line); overflow: hidden; }
table.compare, table.readings, table.matrix { border-collapse: collapse; width: 100%; font-size: .93rem; font-weight: 400; line-height: 1.5; }
.compare th, .compare td, .readings td, .readings th, .matrix th, .matrix td { text-align: left; vertical-align: top; padding: .8rem .95rem; border-bottom: 1px solid var(--line); }
.compare thead th, .readings thead th, .matrix thead th { font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); }
.compare tbody tr:last-child > *, .matrix tbody tr:last-child > * { border-bottom: 0; }
.compare tbody th { font-weight: 700; width: 24%; }
.compare tbody td { background: var(--surface); }

.readings td { background: var(--surface); }
.readings tr.rec:nth-last-child(2):not(.open) > td { border-bottom: 0; }
.rec-discipline { font-weight: 700; width: 19%; }
.rec-reading { width: 43%; }
.rec-paper + .rec-paper { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.rec-cite { display: block; font-weight: 700; }
.rec-title { display: block; margin-top: .1rem; }
.rec-journal { display: block; color: var(--muted); font-size: .84rem; font-style: italic; margin-top: .15rem; }
.label-cross, .label-discipline { display: inline-block; font: 500 .62rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: .1rem .5rem; white-space: nowrap; vertical-align: middle; color: var(--ink); }
.label-cross { box-shadow: inset 0 0 0 1px var(--ink); }
.label-discipline { background: var(--tag-bg); box-shadow: inset 0 0 0 1px var(--tag-line); }
.rec-reading > .label-cross, .rec-reading > .label-discipline { margin-top: .6rem; }
.legend { font-size: .9rem; font-weight: 400; color: var(--muted); line-height: 1.9; }
.rec-contribution { display: block; font-weight: 500; }
.rec-approach { display: block; color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.rec-toggle { margin-top: .55rem; font: inherit; font-size: .86rem; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; text-decoration: underline; text-underline-offset: 3px; }
.rec-toggle::after { content: ""; width: .42rem; height: .42rem; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.rec-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.rec.open > td { border-bottom-color: transparent; }
.rec-details > td { background: var(--info-bg) !important; }
.rec-full { display: grid; gap: .5rem; animation: rise .3s var(--ease) both; }
.rec-full + .rec-full { margin-top: 1rem; }
.rec-ref { padding-left: 1.4rem; text-indent: -1.4rem; overflow-wrap: anywhere; }
.rec-summary { color: var(--ink); }
.rec-copy { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rec-copy .button:not(:hover) { background: var(--surface); }
.readings-tools { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .readings-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* The concept matrix: links found on indigo 30%, extra ticks on grey, missed links with a dashed outline. */
.matrix td { text-align: center; vertical-align: middle; background: var(--surface); }
.matrix thead th:not(:first-child) { text-align: center; }
.matrix-study { background: var(--surface); width: 40%; font-weight: 400; font-size: .88rem; }
.matrix-study strong { display: block; font-size: .92rem; }
.matrix-study span { color: var(--muted); }
.matrix-cell { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; cursor: pointer; }
.matrix td.right .matrix-cell { background: var(--cell-right); }
.matrix td.extra .matrix-cell { background: var(--cell-extra); }
.matrix td.missed .matrix-cell { outline: 2px dashed var(--ink); outline-offset: -3px; }
.matrix tfoot th, .matrix tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--line); }
.matrix-feedback { display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--line); font-size: .95rem; animation: rise .3s var(--ease) both; }

@media (max-width: 760px) {
  table.compare, table.readings, table.matrix, .compare tbody, .readings tbody, .matrix tbody, .matrix tfoot, .compare tr, .readings tr, .matrix tr, .compare tbody th, .compare td, .readings td, .matrix th, .matrix td { display: block; width: auto; }
  .compare thead, .readings thead, .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-card { border: 0; overflow: visible; }
  .compare tr, .readings tr.rec, .matrix tr { border: 1px solid var(--line); padding: .35rem 0; margin-bottom: .7rem; }
  .readings tr[hidden], .matrix tfoot[hidden] { display: none; }
  .readings tr.rec.open { border-bottom: 0; margin-bottom: 0; }
  .readings tr.rec-details { border: 1px solid var(--line); border-top: 0; margin-bottom: .7rem; overflow: hidden; }
  .compare th, .compare td, .readings td, .matrix th, .matrix td { border: 0 !important; padding: .45rem 1rem; background: none !important; }
  .readings tr.rec-details > td { background: var(--info-bg) !important; padding: .9rem 1rem; }
  .compare tbody th, .rec-discipline { font-size: 1rem; padding-top: .7rem; }
  .compare td::before, .readings td::before, .matrix td::before { content: attr(data-label); display: block; font: 500 .66rem/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
  .rec-discipline::before, .rec-details > td::before { content: none !important; }
  .matrix tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem; padding: .7rem .8rem .8rem; }
  .matrix-study { grid-column: 1 / -1; padding: 0 0 .3rem !important; }
  .matrix td { display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem .2rem .2rem; border: 1px solid var(--line) !important; background: var(--surface) !important; text-align: left; }
  .matrix td::before { order: 2; margin: 0; font: 400 .8rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink); hyphens: auto; }
  .matrix-cell { width: 2rem; height: 2rem; flex: none; }
  .matrix tfoot tr { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .7rem .8rem; }
  .matrix tfoot th { flex-basis: 100%; padding: 0 !important; }
  .matrix tfoot td { border: 0 !important; background: none !important; padding: 0 !important; }
  .matrix tfoot td::before { order: 0; }
}

@media (max-width: 440px) { .matrix tbody tr { grid-template-columns: minmax(0, 1fr); } }

/* Three papers first */
.first-papers { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .first-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paper-card { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); }
.paper-cite { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.paper-link { font-size: .9rem; font-weight: 500; }
.paper-link::after { content: " ↗"; }
.paper-extra { background: var(--info-bg); border-color: var(--info-bg); }

/* Examples */
.scenario { display: grid; gap: .8rem; padding: clamp(1.1rem, 3vw, 1.6rem); background: var(--surface); border: 1px solid var(--ink); }
.scenario h3 { margin-top: -.3rem; font-size: 1.3rem; }
.scenario-tag { display: inline-block; justify-self: start; padding: .15rem .5rem; box-shadow: inset 0 0 0 1px var(--line); }
.scenario-q { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; padding-left: 1rem; border-left: 6px solid var(--yellow); }
.rounds { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rounds li { padding: .8rem 1rem; border: 1px solid var(--line); }
.framings { display: grid; gap: .5rem; margin: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .framings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.framings > div { padding: .8rem 1rem; border: 1px solid var(--line); }
.framings dt { font-weight: 700; font-size: .92rem; }
.framings dd { margin: .2rem 0 0; color: var(--muted); font-size: .93rem; font-weight: 400; }

/* Common mistakes */
.mistakes { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mistakes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mistake { display: grid; gap: .55rem; padding: 1rem 1.1rem; border: 1px solid var(--line); }
.m-bad, .m-good { position: relative; padding-left: 1.8rem; font-size: .95rem; }
.m-bad { color: var(--muted); font-weight: 400; }
.m-good { font-weight: 500; }

/* Checklist and resources */
.checklist { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: .4rem; }
.checklist label { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--line); background: var(--surface); font-size: .96rem; font-weight: 400; cursor: pointer; transition: background-color .2s var(--ease); }
.checklist label:has(input:checked) { background: var(--info-bg); border-color: var(--info-bg); }
.checklist label:has(input:checked) span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.checklist-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.checklist-progress { font: 500 .95rem var(--font-mono); font-variant-numeric: tabular-nums; }
.ai-col { display: grid; gap: .5rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--line); }
.ai-col-title { font-weight: 700; }
.help-links { list-style: none; padding: 0 !important; }
.help-links li { padding: .7rem .9rem; border: 1px solid var(--line); }

/* Footer: the independence statements (ABDC and UNSW, D43) */
.footer { color: var(--muted); font-size: .84rem; font-weight: 400; border-top: 1px solid var(--line); }
.footer-inner { display: grid; gap: .45rem; padding-block: var(--space-6) var(--space-7); }
.footer p { max-width: 52rem; }
.footer strong { color: var(--ink); }
.footer a { color: var(--muted); }

/* ---------- Phones and tablets ---------- */
@media (max-width: 640px) {
  .topbar-inner { justify-content: center; }
  .nav { width: 100%; justify-content: space-between; }
  .nav a { flex: 1; justify-content: center; padding-inline: .5rem; }
  .levels { grid-template-columns: minmax(0, 1fr); }
  .go-buttons .button { width: 100%; }
  html { scroll-padding-top: 7.5rem; }   /* the bar is two rows tall on phones */
  .rating-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 520px) {
  .nav { gap: 0; }
  .nav a { padding-inline: .32rem; font-size: .82rem; gap: .25rem; }
  .nav-count { min-width: 1.2rem; padding: 0 .25rem; font-size: .64rem; }
}
@media (max-width: 440px) {
  /* Seven menu items: on phones the journal count stays in "Your basket" only. */
  .nav a { padding-inline: .2rem; font-size: .76rem; }
  .nav-count { display: none; }
  /* Long button labels wrap instead of making the page scroll sideways. */
  .button { white-space: normal; text-align: center; max-width: 100%; padding-block: .45rem; }
}
@media (max-width: 360px) { .nav a { padding-inline: .1rem; font-size: .72rem; } }

/* ---------- Labelled screenshots (D32) ----------
   Numbered marks drawn over a screenshot and explained in the numbered list under it. Positions are percentages of
   each picture, so the marks stay in place at every width. Marks keep the same colours in dark mode, because the
   screenshots themselves are light. Screenshots are teaching figures, so they are shown whole, never cropped. */
.shot { display: grid; gap: .55rem; margin: 0; padding: .6rem 0 0 .6rem; min-width: 0; }
.shot-frame { position: relative; }
.shot-frame img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.shot figcaption { font-size: .86rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
.shot-zoom { white-space: nowrap; }
@media (min-width: 641px) { .shot-zoom { display: none; } }
.mark { position: absolute; border: 2px solid #000; box-shadow: 0 0 0 3px #ffdc00; pointer-events: none; }
/* The number sits above the middle of its mark, or beside it (n-right, n-left), so it never hides the words. */
.mark[data-n]::before {
  content: attr(data-n); position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% - 5px));
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
  background: #ffdc00; color: #000; font: 600 .78rem/1 var(--font-mono); box-shadow: 0 0 0 2px #000;
}
.mark.n-right::before { left: 100%; top: 50%; transform: translate(6px, -50%); }
.mark.n-left::before { left: 0; top: 50%; transform: translate(calc(-100% - 6px), -50%); }
@media (max-width: 640px) {
  .mark { border-width: 1.5px; box-shadow: 0 0 0 2px #ffdc00; }
  .mark[data-n]::before { width: 1.1rem; height: 1.1rem; font-size: .64rem; box-shadow: 0 0 0 1.5px #000; }
}
/* The Google Scholar result (1842 x 260) */
.m-save { left: 1.36%; top: 76.5%; width: 6.08%; height: 14.2%; }
.m-cite { left: 8.14%; top: 76.5%; width: 5.32%; height: 14.2%; }
.m-citedby { left: 14.12%; top: 76.5%; width: 10.15%; height: 14.2%; }
.m-related { left: 24.97%; top: 76.5%; width: 10.37%; height: 14.2%; }
.m-versions { left: 35.94%; top: 76.5%; width: 9.94%; height: 14.2%; }
.m-pdf { left: 76.76%; top: 11.9%; width: 12.05%; height: 17.3%; }
/* The papers that cite it (2000 x 1113) */
.m-within { left: 17.35%; top: 23.27%; width: 16.45%; height: 3.59%; }
.m-searchbox { left: 16.6%; top: .54%; width: 54.1%; height: 7.19%; }
.m-years { left: .4%; top: 19.05%; width: 9.1%; height: 17.52%; }
.m-sort { left: .4%; top: 67.93%; width: 7.1%; height: 3.32%; }
.m-alert { left: .6%; top: 74.75%; width: 9.3%; height: 3.05%; }
/* The menu (362 x 938) and Settings (1502 x 1502) */
.m-settings { left: 6.08%; top: 83.26%; width: 45.86%; height: 4.8%; }
.m-libraries { left: .2%; top: 16.04%; width: 8.26%; height: 2.26%; }
.m-extensions { left: .2%; top: 20.71%; width: 12.92%; height: 2%; }
.m-reader { left: 20.64%; top: 11.65%; width: 70.24%; height: 37.95%; border-radius: 16px; }
.m-button { left: 20.64%; top: 51.86%; width: 70.24%; height: 37.08%; border-radius: 16px; }
/* The EndNote tab in Word, left half (1212 x 226) and right half (780 x 226) */
.m-en-insert { left: 0.33%; top: 39.38%; width: 7.76%; height: 54.42%; }
.m-en-manage { left: 8.42%; top: 57.08%; width: 24.75%; height: 16.81%; }
.m-en-library { left: 8.42%; top: 76.11%; width: 24.26%; height: 16.81%; }
.m-en-style { left: 37.79%; top: 39.82%; width: 32.01%; height: 15.04%; }
.m-en-update { left: 37.38%; top: 57.08%; width: 31.77%; height: 17.26%; }
.m-en-instant { left: 72.69%; top: 69.91%; width: 25.91%; height: 18.58%; }
.m-en-tab { left: 44.62%; top: 10.62%; width: 24.62%; height: 23.89%; }
.m-en-tools { left: 2.05%; top: 37.61%; width: 16.54%; height: 18.58%; }
.m-en-preflight { left: 50.13%; top: 57.52%; width: 45.38%; height: 17.7%; }
/* EndNote's Find & Insert window (1200 x 1195) */
.m-en-find { left: 3.33%; top: 5.36%; width: 51.25%; height: 4.52%; }
.m-en-list { left: 3.67%; top: 10.38%; width: 77.08%; height: 27.53%; }
.m-en-insertbtn { left: 70.08%; top: 79%; width: 10.75%; height: 4.18%; }
.m-en-menu { left: 71.08%; top: 83.35%; width: 27.25%; height: 15.4%; }
/* EndNote's Style menu (556 x 626) and Tools menu (546 x 254) */
.m-en-another { left: 31.65%; top: 0.96%; width: 65.65%; height: 8.47%; }
.m-en-apa { left: 33.45%; top: 16.61%; width: 23.38%; height: 6.07%; }
.m-en-harvard { left: 37.05%; top: 38.34%; width: 57.19%; height: 20.45%; }
.m-en-plain { left: 5.49%; top: 39.76%; width: 91.39%; height: 21.65%; }
/* Crossref's Simple Text Query (1400 x 591) */
.m-cr-box { left: 4.07%; top: 44.5%; width: 89%; height: 41.46%; }
.m-cr-all { left: 74.57%; top: 87.14%; width: 18.36%; height: 4.74%; }
.m-cr-submit { left: 45.57%; top: 93.4%; width: 6%; height: 5.92%; }
/* Preflight's page for EndNote users (1400 x 690) */
.m-pf-upload { left: 3.57%; top: 62.03%; width: 23.43%; height: 15.22%; }
.m-pf-report { left: 52.29%; top: 20.29%; width: 40.21%; height: 33.48%; }
/* AI tools guide: Claude's Connectors (1400 x 873) and ChatGPT's Plugins (1400 x 754), D39 */
.m-cl-connectors { left: 0.07%; top: 90.15%; width: 13%; height: 4.35%; }
.m-cl-search { left: 59.29%; top: 5.73%; width: 20.93%; height: 4.93%; }
.m-cl-list { left: 22.79%; top: 31.73%; width: 68.5%; height: 45.13%; }
.m-gp-plugins { left: 44.07%; top: 0.53%; width: 6.57%; height: 5.97%; }
.m-gp-search { left: 16.29%; top: 20.16%; width: 67.57%; height: 7.03%; }
.m-gp-add { left: 45.71%; top: 80.77%; width: 3.07%; height: 6.23%; }
/* A wide screenshot shown in two halves at the same scale (the right half is 780 / 1212 of the left's width), with room
   on the right for numbers placed beside a mark at the picture's edge. */
.shot-roomy { padding-right: .6rem; }
.shot-frame + .shot-frame { margin-top: .5rem; }
.shot-part { width: 64.36%; }
.shot-medium { max-width: 24rem; }
/* On phones the halves keep a readable size and the picture scrolls sideways inside its frame (the page does not). */
.shot-swipe { display: none; }
@media (max-width: 640px) {
  .shot-scroll { overflow-x: auto; padding: 1.5rem 1.5rem .3rem 1.4rem; margin-top: -1rem; }
  .shot-scroll .shot-frame { width: 36rem; }
  .shot-scroll .shot-part { width: 23.17rem; }
  .shot-swipe { display: inline; }
}
.shot-key { list-style: none; counter-reset: key; margin: 0; padding: 0; display: grid; gap: .75rem; }
.shot-key > li { counter-increment: key; position: relative; padding-left: 2.2rem; }
.shot-key > li::before {
  content: counter(key); position: absolute; left: .15rem; top: .12rem;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
  background: var(--yellow); color: var(--black); font: 600 .78rem/1 var(--font-mono); box-shadow: 0 0 0 2px var(--black);
}
.shot-pair { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.shot-narrow { max-width: 10rem; }
.shot-text { display: grid; gap: .8rem; }
@media (min-width: 760px) {
  .shot-pair { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
  .shot-pair-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* ---------- EndNote videos (Citing and AI tools pages, D36, D42) ----------
   A Play button in a 16:9 frame; the YouTube player (youtube-nocookie.com) replaces it only when pressed (lib/dom.js). */
.video-pair { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .video-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.video { display: grid; gap: .55rem; margin: 0; min-width: 0; }
.video figcaption { font-size: .86rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
.video-play, .video iframe { display: block; width: 100%; min-width: 0; aspect-ratio: 16 / 9; border: 0; }
.video-play {
  display: grid; place-items: center; align-content: center; gap: .8rem; padding: 1rem; cursor: pointer;
  font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.video-play:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.video-play:active { transform: translateY(1px); }
.video-icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; background: var(--yellow); }
.video-icon svg { width: 1.5rem; height: 1.5rem; fill: var(--black); margin-left: .15rem; }
.video-name { font-size: .95rem; line-height: 1.4; text-align: center; max-width: 18rem; }
.video iframe { background: #000; }

/* ---------- Respect people's settings ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--ink); --muted: var(--ink); }
}