/* The Argument Clinic (2026-11-05): the landing page, and what the three guides' pages share. Loaded after
   style.css and workshop.css (the Workshop's parchment, lapis, terracotta and gold), and on the Skeptic's page after
   style.css and skeptic.css (its own infomercial look), where only the menu and masthead come from here. */

/* One palette, a colour for each guide (Angela, 2026-11-05: distinct but matching, as the Workshop's two): the Mapper's
   lapis, the Builder's dark green (Angela, 2026-11-05: in place of the fox orange), the Skeptic's red (his toga, sampled from his picture; Angela, 2026-11-05: not green), all on parchment with the gold
   of the meander. Home, About and FAQ are in a neutral deep brown. Each page says whose it is (body class). */
:root {
  --terra: #33552f; --terra-dark: #233c20; --terra-soft: #e4ecdb;
  --sextus: #ac4429; --sextus-dark: #7f2f1b; --sextus-soft: #f7e1d8;
  --home: #4a3a2c; --home-dark: #34281e; --home-soft: #efe5d3;
  --accent: var(--home); --accent-dark: var(--home-dark); --accent-soft: var(--home-soft);
}
.with-mapper { --accent: var(--lapis); --accent-dark: var(--lapis-dark); --accent-soft: var(--lapis-soft); }
.with-builder { --accent: var(--terra); --accent-dark: var(--terra-dark); --accent-soft: var(--terra-soft); }
.with-skeptic { --accent: var(--sextus); --accent-dark: var(--sextus-dark); --accent-soft: var(--sextus-soft); --win: var(--sextus); }
/* The page's colour where the Workshop has lapis throughout */
.site-nav, footer { background: var(--accent-dark); }
/* The footer at the foot of the window on a short page, and its colour past the end of every page (Angela, 2026-11-10:
   "footer should go to the bottom of the page"; "scrolling past end of the page should keep the brown footer on all
   pages too"): the page at least as tall as the window, the footer after whatever space is left; the page's own colour
   behind everything (the window's, seen past either end, is the nav's and the footer's: the guide's). */
html { background: var(--accent-dark); }
html:has(> body.with-mapper) { --accent-dark: var(--lapis-dark); }
html:has(> body.with-builder) { --accent-dark: var(--terra-dark); }
html:has(> body.with-skeptic) { --accent-dark: var(--sextus-dark); }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
body > main { flex-grow: 1; width: 100%; box-sizing: border-box; }   /* (the space left goes to the page's content, so the footer keeps its own margin; full width up to its max-width, as before) */
body > main > :last-child { margin-bottom: 0; }   /* (as before, when its margin merged with the footer's) */
@media print { html { background: none; } body { display: block; min-height: 0; } }   /* (printed as before: a long printout splits across pages. The code review, 2026-11-10) */
.masthead h1, .band-title, .about h2, .faq h2 { color: var(--accent-dark); }
.ws-form h3 { color: var(--accent); }
.ws-form .go, .about a.button { background: var(--accent); border-color: var(--accent); }
.ws-form .go:hover { background: var(--accent-dark); }
.ws-form .whose button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.about a:not(.button), .other-guides a { color: var(--accent); }
/* (The FAQ's headings all in the Clinic's own brown, not their guides' colours: Angela, 2026-11-05) */

/* The Clinic's name in the masthead, linked home from the guides' pages */
.masthead .clinic-name { margin: 0; font: 600 0.85rem var(--serif); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.masthead .clinic-name a { color: inherit; text-decoration: none; }
.masthead .clinic-name a:hover { color: var(--accent); }

/* ---------- Landing ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.door {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.door:hover, .door:focus-visible { transform: translateY(-2px); }
.door .pic { height: 260px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 8px; }
.door .pic img { max-height: 100%; max-width: 100%; width: auto; height: auto; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, 0.15)); }
.door .d-role { font: 600 0.8rem var(--serif); text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }
.door .d-name { font: 700 1.7rem/1.1 var(--display); margin: 0; }
.door .d-blurb { margin: 4px 0 0; font-size: 1rem; flex: 1; }
.door .d-go { margin-top: 14px; align-self: flex-start; padding: 8px 16px; border-radius: 6px; color: #fff; font: 600 1rem var(--serif); }
.door.mapper .d-role, .door.mapper .d-name { color: var(--lapis); }
.door.builder .d-role, .door.builder .d-name { color: var(--terra); }
.door.skeptic .d-role, .door.skeptic .d-name { color: var(--sextus); }
.door.mapper .d-go { background: var(--lapis); }
.door.builder .d-go { background: var(--terra); }
.door.skeptic .d-go { background: var(--sextus); }
.door.mapper:hover, .door.mapper:focus-visible { border-color: var(--lapis); box-shadow: 5px 5px 0 var(--lapis-soft); }
.door.builder:hover, .door.builder:focus-visible { border-color: var(--terra); box-shadow: 5px 5px 0 var(--terra-soft); }
.door.skeptic:hover, .door.skeptic:focus-visible { border-color: var(--sextus); box-shadow: 5px 5px 0 var(--sextus-soft); }

@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .door { display: grid; grid-template-columns: 150px 1fr; gap: 4px 16px; align-items: start; }
  .door .pic { grid-row: span 5; height: 170px; margin: 0; }
  .door .d-go { margin-top: 10px; }
}
@media (max-width: 680px) {
  .door { display: flex; align-items: stretch; text-align: center; }
  .door .pic { height: 200px; margin-bottom: 6px; }
  .door .d-go { align-self: center; }
}

/* ---------- A guide's page ---------- */
/* The guide beside what happens in a session, above the form */
.other-guides { text-align: center; margin: 0; font-size: 1rem; }
.other-guides a { color: var(--accent); }

/* The landing page's opening: what the Clinic is, in a line or two, beside snapshots of the guides at work */
.clinic-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: center; }
.hero-text h2 { font: 700 2.3rem/1.1 var(--display); margin: 0 0 12px; color: var(--accent-dark); }
.hero-text p { font-size: 1.12rem; margin: 0 0 12px; }
.hero-text .button { display: inline-block; margin-top: 6px; padding: 10px 24px; border-radius: 6px; background: var(--accent); color: #fff; text-decoration: none; font: 600 1.05rem var(--serif); }
.hero-text .button:hover { background: var(--accent-dark); }

.snaps { min-width: 0; text-align: left; }
.snap-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; }
.snap-track::-webkit-scrollbar { display: none; }
.snap {
  flex: 0 0 100%; scroll-snap-align: start; margin: 0; box-sizing: border-box; min-height: 340px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; align-items: center; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 12px;
}
.snap figcaption { grid-column: 1 / -1; text-align: center; font: italic 1rem var(--serif); color: var(--accent-dark); }
.snap-map { min-width: 0; font-size: 0.9rem; }
/* The Mapper's and Builder's maps are wide (a pair of long premises; two levels): they get more of the slide */
.snap.with-mapper, .snap.with-builder:not(.snap-end) { grid-template-columns: 1.45fr 0.75fr; }
.snap-chat { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
/* Chat bubbles with tails: the visitor's on the right, the guide's on the left, in the guide's colour */
.snap-chat .msg { position: relative; max-width: 92%; padding: 8px 12px; border: 0; border-radius: 14px; }
.snap-chat .msg::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 14px; }
.snap-chat .msg.visitor { align-self: flex-end; background: var(--visitor); border-bottom-right-radius: 3px; }
.snap-chat .msg.visitor::after { right: -9px; background: var(--visitor); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.snap-chat .msg.skeptic { align-self: flex-start; background: var(--accent-soft); border-bottom-left-radius: 3px; }
.snap-chat .msg.skeptic::after { left: -9px; background: var(--accent-soft); clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.snap-chat .msg .who { color: var(--accent-dark); font-weight: 600; }
.snap-chat .avatar { width: 28px; height: 28px; }
.snap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.snap-chips span { padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px; font-size: 0.82rem; color: var(--accent-dark); background: var(--accent-soft); }
.snap-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.snap-controls button { background: none; border: 0; color: var(--ink); padding: 4px 8px; margin: 0; font-size: 1.5rem; line-height: 1; box-shadow: none; }
.snap-dots { display: flex; gap: 8px; }
.snap-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--line); font-size: 0; }
.snap-dots button[aria-current="true"] { background: var(--gold); }
/* Narrower than a laptop, the hero stacks, and so does each slide: the map, then the chat beneath it */
@media (max-width: 900px) {
  .clinic-hero { grid-template-columns: 1fr; text-align: center; }
  .hero-text { max-width: 36em; margin: 0 auto; }
  /* (content centred top to bottom in each slide: Angela, 2026-11-08) */
  .snap, .snap.with-mapper, .snap.with-builder:not(.snap-end), .snap-end { grid-template-columns: 1fr; min-height: 0; align-content: center; }
  .snap-map { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) { .hero-text h2 { font-size: 1.9rem; } }

/* ---------- About and FAQ: one page each, in sections for the Clinic, mapping and building, and the Skeptic ---------- */
.about { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.about h2, .faq h2 { font: 700 1.8rem var(--display); margin: 36px 0 10px; scroll-margin-top: 12px; }
.about h2 + p, .faq h2 + details { margin-top: 0; }
.about h3 { font: 700 1.35rem var(--display); margin: 22px 0 6px; color: var(--ink); }
.about p { margin: 0 0 12px; }
.about ul { padding-left: 22px; margin: 0 0 12px; }
.about li { margin: 6px 0; }
.about .faq-nav { margin: 8px 0 0; }
.about .refs { padding-left: 0; }
.about .refs li { margin: 8px 0; padding-left: 1.6em; text-indent: -1.6em; list-style: none; }

/* The Skeptic's page, in the Mapper's and Builder's layout: Sextus with his caption */
.spokesman-small { margin: 0; text-align: center; }
.spokesman-small figcaption { margin-top: 6px; font: italic 0.95rem var(--serif); color: var(--muted); }
.spokesman-small figcaption span { display: block; font-style: normal; font-size: 0.85rem; }

/* The carousel's last slide: a page of the downloaded PDF, beside the button that makes it */
.snap-end { grid-template-columns: 1.2fr 0.8fr; }
.snap-sheet { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 10px; box-shadow: 4px 5px 0 var(--gold-soft), 0 2px 10px rgba(60, 40, 20, 0.12); transform: rotate(-1.2deg); }
.sheet-title { margin: 2px 0 6px; font: 700 0.95rem/1.2 var(--display); color: var(--ink); text-align: center; }
.snap-sheet .snap-map { font-size: 0.75rem; }
.snap-done { text-align: center; }
.snap-done .done-title { font: 700 1.5rem var(--display); color: var(--accent-dark); margin: 0 0 6px; }
.snap-done p { margin: 0 0 12px; font-size: 0.95rem; }
.done-button { display: inline-block; padding: 9px 16px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 0.95rem var(--serif); }
@media (max-width: 600px) { .snap-end { grid-template-columns: 1fr; } }

/* The band under the menu and above the footer (Angela, 2026-11-05: in place of the Workshop's meander): one long
   argument in gold, in the version with fuller boxes ("K, fuller boxes"). Two reasons, one atop the other, support a box in the middle, which supports the top box of the next
   pair, and so on. (The options are in archive/bands*.html.) */
.meander { height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.7' height='26' viewBox='0 0 60.7 26'%3E%3Cg fill='none' stroke='%23d9a43a' stroke-width='1.5'%3E%3Cpath d='M0 0.75H60.7M0 25.25H60.7'/%3E%3Crect x='4.1' y='3.0' width='20' height='8.5' rx='1.2'/%3E%3Crect x='4.1' y='14.5' width='20' height='8.5' rx='1.2'/%3E%3Cpath d='M24.1 7.25C27.700000000000003 7.25 27.700000000000003 13.0 30.1 13.0M24.1 18.75C27.700000000000003 18.75 27.700000000000003 13.0 30.1 13.0'/%3E%3Crect x='33.7' y='8.75' width='20' height='8.5' rx='1.2'/%3E%3Cpath d='M53.7 13.0C57.900000000000006 13.0 56.5 7.25 60.7 7.25'/%3E%3C/g%3E%3Cpath d='M30.1 10.6L33.7 13.0L30.1 15.4Z' fill='%23d9a43a'/%3E%3Cpath d='M0.49999999999999956 4.85L4.1 7.25L0.49999999999999956 9.65Z' fill='%23d9a43a'/%3E%3C/svg%3E") repeat-x center; }
/* (The footer's is the same band as the top one, on the page's beige just above the dark footer, not inside it: Angela,
   2026-11-10. On the home page, the beige of the testimonials band above it.) */
footer .meander { margin: -22px -16px 18px; background-color: var(--bg); }
main:has(.quote-carousel) + footer .meander { background-color: #f3ead6; }

/* "conversational argument mapper" picked out in the headline (Angela, 2026-11-05): the meander's gold, darkened to read */
.hero-text h2 .hl { color: #9a6c12; }

/* Every slide's caption sits at the bottom, at the same height on every slide (Angela, 2026-11-05) */
.snap { grid-template-rows: 1fr auto; }
.snap > figcaption { align-self: end; }
/* On narrow screens (one column), the slide's content is centred top to bottom in the room above its caption, which
   stays at the bottom (Angela, 2026-11-08: "center vertically for all guides"): a column with an empty stretch above the
   content and another below it, before the caption. */
@media (max-width: 900px) {
  .snap, .snap.with-mapper, .snap.with-builder:not(.snap-end), .snap-end { display: flex; flex-direction: column; }
  .snap::before, .snap::after { content: ""; flex: 1 1 0; margin: -7px 0; }   /* (the stretches; the margins undo their gaps) */
  .snap::before { order: -2; }
  .snap::after { order: 1; }
  .snap > figcaption { order: 2; align-self: stretch; }
}

/* The Home page's testimonials: one at a time, fading, in the colour of the guide it's about */
.quote-carousel { max-width: 640px; margin: 0 auto; text-align: center; }
.quote-track { display: grid; }
.quote-track blockquote { grid-area: 1 / 1; margin: 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 8px; font: italic 1.25rem/1.4 var(--display); opacity: 0; visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s; align-self: center; }
.quote-track blockquote.on { opacity: 1; visibility: visible; }
.quote-track cite { display: block; margin-top: 8px; font: normal 0.9rem var(--serif); color: var(--muted); }
.quote-track .q-guide { color: var(--accent-dark); }
.quote-dots { display: flex; justify-content: center; gap: 8px; }
.quote-controls { margin-top: 12px; }
.quote-dots button { width: 9px; height: 9px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--line); }
.quote-dots button[aria-current="true"] { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .quote-track blockquote { transition: none; } }

/* Sextus the same height as the other guides (Angela, 2026-11-05) */
.spokesman-small img { height: 360px; width: auto; max-width: 100%; }
@media (max-width: 700px) { .spokesman-small img { height: 260px; } }

/* The Skeptic's last slide: his certificate, filling the slide */
.snap.snap-cert { grid-template-columns: 1fr; }
.snap-cert-img { display: block; width: auto; max-width: 100%; max-height: 300px; margin: 0 auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.18); }

/* The guides' pages' top band, like Home's (Angela, 2026-11-05): the guide, the heading and the description in one column,
   the carousel of snapshots in a wider one beside it (on the left for the Builder and the Skeptic, who stand on the right) */
.guide-hero { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 32px; align-items: center; }
.guide-side { text-align: center; }
.guide-side > img, .guide-side .spokesman-small img { height: 280px; width: auto; max-width: 100%; display: block; margin: 0 auto 12px; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, 0.15)); }
.guide-side h2 { font: 700 1.9rem/1.15 var(--display); margin: 0 0 10px; color: var(--accent-dark); }
.guide-side p { font-size: 1.05rem; margin: 0 0 10px; }
.guide-hero .snaps { min-width: 0; }
@media (max-width: 900px) {
  .guide-hero { grid-template-columns: 1fr; }
  .guide-side > img, .guide-side .spokesman-small img { height: 240px; }
}

/* The bands alternate, tinted and plain, whatever sections a page has (Angela, 2026-11-05) */
.ws-start > .band:nth-of-type(odd) { background: #f3ead6; }
.ws-start > .band:nth-of-type(even) { background: var(--bg); }
/* The Mapper's last slide: the handover card, in the Builder's colour, small enough for the slide */
.snap-handover { --accent: var(--terra); --accent-dark: var(--terra-dark); margin: 4px 0 0; padding: 10px 12px; gap: 10px; font-size: 0.85rem; background: var(--terra-soft); border-color: var(--terra); }
.snap-handover .handover-pic { width: 44px; }
.snap-handover p { margin: 0 0 6px; }
.snap-handover .handover-title { font-size: 1rem; color: var(--terra-dark); }
.snap-handover .done-button { background: var(--terra); padding: 6px 12px; font-size: 0.85rem; }
/* (Angela, 2026-11-05: the card across the slide, as on the real site's end screen: the fox, the words, the button) */
.snap-handover.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 16px; }
.snap-handover.wide .ho-text { flex: 1; text-align: left; }
.snap-handover.wide p { margin: 0; }
.snap-handover.wide .handover-title { font-weight: 700; margin-bottom: 2px; }
.snap-handover.wide .done-button { white-space: nowrap; flex: none; }
.snap-handover.wide .handover-pic { width: 40px; }
.snap-handover.wide .ho-text p { text-wrap: pretty; }   /* (no word left alone on a line: Angela, 2026-11-05) */
/* The Skeptic's last slide: his map and his certificate, two printouts, one over the other */
.prints { position: relative; height: 300px; max-width: 460px; width: 100%; margin: 8px auto 0; }
.prints .print-map { position: absolute; left: 2%; top: 4px; width: 62%; transform: rotate(-3deg); z-index: 1; }
.prints .print-map .snap-map { font-size: 0.7rem; }
.prints .print-cert { position: absolute; right: 2%; bottom: 6px; width: 50%; height: auto; max-height: none; margin: 0; transform: rotate(3deg); z-index: 2;
  box-shadow: 4px 5px 0 var(--gold-soft), 0 3px 12px rgba(60, 40, 20, 0.22); }

/* The guides' carousels all about the same height (Angela, 2026-11-05); not on narrow screens, where the chat and the map
   stack and 400px left blank space (2026-11-06) */
@media (min-width: 901px) { .guide-hero .snap { min-height: 400px; } }

/* The FAQ's example argument maps */
.faq-map { margin: 10px 0 14px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.faq-map .ladder { font-size: 0.85rem; max-width: 480px; margin: 0 auto; }
.faq-map figcaption { margin-top: 6px; text-align: center; font: italic 0.92rem var(--serif); color: var(--muted); }
.faq-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .faq-maps { grid-template-columns: 1fr; } }

/* The live forms (2026-11-05): Cloudflare's human check takes no room until it wants a click, so the start button sits
   where the mockup had it */
.ws-form #turnstile-box { margin-top: 0; }

/* The Mapper's four steps in a row, stacked on phones like the other guides' three (Angela, 2026-11-06) */
.how.how-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .how.how-4 { grid-template-columns: 1fr; } }

/* Narrower than a laptop, each slide's chat goes above its map (Angela, 2026-11-06) */
@media (max-width: 900px) { .snap .snap-chat { order: -1; } }
/* Home's "Choose your guide" glides down to the guides rather than jumping (Angela, 2026-11-06); not for those who
   prefer less motion */
@media (prefers-reduced-motion: no-preference) { html:has(.clinic-hero) { scroll-behavior: smooth; } }

/* ---------- The repository (repository.html, and the save form on the guides' end screens: repository.js) ---------- */
.repo-form { display: grid; gap: 10px; text-align: left; margin-top: 10px; }
.repo-form label { display: grid; gap: 4px; font-weight: 600; }
.repo-form input { width: 100%; box-sizing: border-box; }
.repo-conclusion { margin: 0; }
.repo-conclusion span { font-style: italic; }
.repo-papers { display: grid; gap: 6px; }
.repo-papers-q { margin: 6px 0 0; font-weight: 600; }
.repo-link-row { display: flex; gap: 6px; }
.repo-link-row input { flex: 1; min-width: 0; }
.repo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.repo-chips:empty { display: none; }
.repo-chip { display: grid; text-align: left; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: none; font: inherit; font-size: 0.92rem; max-width: 100%; }
.repo-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.repo-chip[aria-pressed="true"] .repo-chip-title::before { content: "✓ "; }
.repo-chip-meta { font-size: 0.82rem; color: var(--muted); }
/* Hovering a chip: a light tint and an accent border, the writing kept dark (the site's button hover made it dark blue
   with black writing: Angela, 2026-11-08). */
@media (hover: hover) {
  .repo-chip:hover, .repo-chip:focus-visible { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
}
.repo-chip:disabled { opacity: 0.6; }
/* Suggested papers: one per line (Angela, 2026-11-08). */
.repo-chips.repo-chips-stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.repo { max-width: 900px; margin: 0 auto; padding: 0 16px 40px; }
.repo-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.repo-controls input { flex: 1 1 100%; box-sizing: border-box; }
.repo-controls select { flex: 1 1 140px; }
.repo-list { display: grid; gap: 18px; }
.repo-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px; }
.repo-card.featured { box-shadow: 0 0 0 3px var(--accent-soft); margin-bottom: 18px; }
.repo-title { font: 700 1.35rem/1.2 var(--display); margin: 0 0 4px; color: var(--accent-dark); }
.repo-meta { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }
.repo-map { font-size: 0.85rem; }
.repo-paper-list { margin: 4px 0 0; padding-left: 20px; }
.repo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.repo-stars { margin: 0; }
.repo-stars .star { font-size: 1.3rem; }
.repo-avg { color: var(--muted); font-size: 0.92rem; }

.repo-more-row { text-align: center; }
.repo-version-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.repo-versions { display: grid; gap: 12px; margin-top: 10px; }
.repo-versions:empty { display: none; }
.repo-card.version { padding: 10px 12px; }
.repo-card.version .repo-title { font-size: 1.1rem; }
.repo-choose, .repo-flag { display: grid; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.repo-choose-q { margin: 0; font-weight: 600; }
.repo-choose-pick { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--bg); }
.repo-choose-pick:hover { border-color: var(--accent); }
/* The guide choices are links, but look and hover like the paper chips: no underline, a light tint and an accent border,
   the writing kept dark (Angela, 2026-11-08). (".repo a" would otherwise underline them and turn them blue.) */
.repo a.repo-choose-pick, .repo a.repo-choose-pick:hover, .repo a.repo-choose-pick:focus-visible { text-decoration: none; color: var(--ink); }
.repo a.repo-choose-pick * { text-decoration: none; }
@media (hover: hover) { .repo a.repo-choose-pick:hover, .repo a.repo-choose-pick:focus-visible { background: var(--accent-soft); border-color: var(--accent); } }
.repo-flag label { display: block; }
.repo-flag textarea { width: 100%; box-sizing: border-box; }
/* "You're making another version of …" (start page) and "Saved as another version of …" (save form): a banner, not a
   passing line (Angela, 2026-11-08: "much more prominent"). */
.repo-version-note, .repo-version-of { margin: 0 0 8px; padding: 10px 14px; border-left: 4px solid var(--accent); border-radius: 8px;
  background: var(--accent-soft); color: var(--ink); font-style: normal; font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.repo-version-of[hidden] { display: none; }
.repo-links:empty { display: none; }
.repo-link-results { display: grid; gap: 6px; }
.repo-link-how { display: grid; gap: 6px; }
.repo-link-how label { display: block; }
.repo-linker input[type=search] { width: 100%; box-sizing: border-box; }
.repo-link-flag { font-size: 0.78rem; padding: 1px 6px; }
.repo-link-preview { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.repo-link-results > .quiet { justify-self: start; }
/* The link options and the flag's choices: each radio beside its words, the buttons their own width (Angela, 2026-11-07:
   "the options aren't displayed well") */
.repo-link-how label, .repo-flag label { display: flex; align-items: baseline; gap: 8px; text-align: left; font-weight: normal; margin: 0; cursor: pointer; }
.repo-link-how input[type=radio], .repo-flag input[type=radio] { width: auto; flex: none; margin: 0; padding: 0; box-shadow: none; }
.repo-link-how button, .repo-flag button, .repo-choose > button { justify-self: start; width: auto; }
.repo-link-how { gap: 8px; }
/* A button whose panel is open stays highlighted (Angela, 2026-11-07) */
.repo-version-row button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
/* Seven menu items (Repository added, 2026-11-07): closer together on narrower screens, so they fit in one row until the
   phone menu takes over */
@media (min-width: 641px) and (max-width: 900px) { .site-nav a { padding: 10px 12px; } }
/* Once saved (Angela, 2026-11-08: "formatting can be improved"): a white box like the form's, "Saved!" first, then the
   private link under a line, its box and Copy button the same height. */
.repo-done { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 14px; text-align: left; }
.repo-done-head { margin: 0; font-size: 1.1rem; font-weight: 600; text-align: center; }
.repo-done .repo-held { margin: 8px 0 0; text-align: center; font-size: 0.95rem; }
.repo-retract-keep { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.repo-retract-keep p { margin: 0 0 8px; font-size: 0.95rem; }
.repo-retract-keep .repo-retract-head { margin-bottom: 2px; font-weight: 600; }
.repo-retract-keep .repo-link-row { align-items: stretch; }
.repo-retract-keep input { flex: 1; min-width: 0; margin: 0; font-size: 0.85rem; padding: 6px 10px; }
.repo-retract-keep button { flex: none; margin: 0; font-size: 0.95rem; padding: 0 16px; border: 1px solid var(--accent); }
.repo-field-note { font-weight: normal; font-size: 0.85rem; }
/* The home carousel's repository slide: a map as the repository shows it */
.snap-repo-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--lapis); border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.10); transform: rotate(-1deg); }
.snap-repo-title { margin: 0 0 2px; font: 700 1rem/1.2 var(--display); color: var(--lapis-dark); }
.snap-repo-meta { margin: 0 0 6px; font-size: 0.78rem; color: var(--muted); }
.snap-repo-card .snap-map { font-size: 0.75rem; }
.snap-repo-rate { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.snap-repo-rate span { color: var(--sun); text-shadow: 0 0 1px #b8860b; letter-spacing: 1px; }   /* (five, given: Angela, 2026-11-10) */
.snap-repo-source { margin: 6px 0 0; font-size: 0.78rem; color: var(--ink); }

/* ---------- The repository's look (Angela, 2026-11-07: "search box more obvious… filters should look more like other
   websites. improve aesthetics.") ---------- */
.repo-controls { display: block; margin: 6px 0 14px; }
.repo-searchbar { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 2px solid var(--line); border-radius: 999px;
  padding: 4px 4px 4px 16px; box-shadow: 0 2px 10px rgba(60, 40, 20, 0.07); }
.repo-searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.repo-searchbar svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.repo-searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; outline: none; font-size: 1.12rem; padding: 10px 8px; margin: 0; }
.repo-search-go { border-radius: 999px; padding: 9px 20px; margin: 0; flex: none; }
.repo-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.repo-filter { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: 3px 6px 3px 13px; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.repo-filter:hover, .repo-filter:focus-within { border-color: var(--accent); }
.repo-filter select { appearance: none; -webkit-appearance: none; border: 0; box-shadow: none; margin: 0; width: auto; font: inherit; font-weight: 600; color: var(--ink);
  padding: 5px 22px 5px 2px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a7f70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center; }
.repo-sort { margin-left: auto; }
#repo-status { margin: 0 0 10px; font-size: 0.9rem; }
.repo-list { gap: 22px; }
.repo-card { padding: 18px 20px 14px; border-radius: 14px; box-shadow: 0 2px 12px rgba(60, 40, 20, 0.06); }
.repo-title { font-size: 1.4rem; margin-bottom: 4px; }
.repo-meta { font-size: 0.9rem; margin-bottom: 12px; }
.repo-meta a { color: var(--accent-dark); }
.repo-map { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.repo-texts { margin-top: 12px; }
.repo-texts .repo-papers-q { margin: 10px 0 2px; font-weight: 600; }   /* (the page's own font: Angela, 2026-11-07) */
.repo-paper-list { margin: 2px 0 0; }
.repo-paper-list li { margin: 2px 0; }
.repo-foot { margin-top: 12px; }
/* (the line above the rating only under Sources or Linked maps, not straight under the map: Angela, 2026-11-10) */
.repo-acc:not([hidden]) ~ .repo-foot { padding-top: 10px; border-top: 1px solid var(--line); }
.repo-version-row { gap: 6px; }
.repo-version-row button { font-size: 0.84rem; padding: 5px 13px; border-radius: 999px; margin: 0; }
.repo-card.version { box-shadow: none; }
@media (max-width: 600px) {
  .repo-sort { margin-left: 0; }
  .repo-card { padding: 14px 14px 12px; }
  .repo-search-go { padding: 9px 14px; }
}
.repo-filter > span { white-space: nowrap; }
.repo-actions { display: flex; gap: 8px; align-items: center; }
.repo-actions button { margin: 0; }
/* The filters' own menus (repository.js pill), in the site's style */
.repo-filter { position: relative; }
.repo-pill-btn { appearance: none; border: 0; box-shadow: none; margin: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink);
  padding: 5px 24px 5px 2px; cursor: pointer; border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a7f70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center; }
.repo-pill-btn:hover { background-color: transparent; color: var(--accent-dark); }
.repo-pill-btn[aria-expanded="true"] { color: var(--accent-dark); }
.repo-pill-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 100%; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(60, 40, 20, 0.16); }
.repo-sort .repo-pill-menu { left: auto; right: 0; }
.repo-pill-menu li { padding: 7px 12px 7px 28px; border-radius: 8px; white-space: nowrap; color: var(--ink); cursor: pointer; position: relative; font-size: 0.92rem; outline: none; }
.repo-pill-menu li:hover, .repo-pill-menu li:focus { background: var(--accent-soft); color: var(--accent-dark); }
.repo-pill-menu li[aria-selected="true"] { font-weight: 600; }
.repo-pill-menu li[aria-selected="true"]::before { content: "✓"; position: absolute; left: 10px; color: var(--accent); }
.repo-star { color: #c9971c; }
.repo-star { letter-spacing: 1px; }
/* The repository's picture: scroll storage (Angela, 2026-11-07) */
.repo-picture { display: block; width: 380px; max-width: 90%; height: auto; margin: 0 auto 14px; }   /* (the Library's new picture is wider: Angela, 2026-11-10) */
/* The repository's links in the site's colours, not the browser's blue (Angela, 2026-11-07): the card's guide colour, a
   fine underline that darkens on hover */
.repo a, .repo-save a { color: var(--accent-dark); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; transition: text-decoration-color 0.15s, color 0.15s; }
.repo a:hover, .repo a:focus-visible, .repo-save a:hover, .repo-save a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.repo-paper-list li::marker { color: var(--accent); }
/* A link's author, year and title (shown for links that aren't PhilPapers') */
.repo-text-details { display: grid; grid-template-columns: 1fr 5.5em; gap: 6px; }
.repo-text-details input { width: 100%; box-sizing: border-box; margin: 0; }
.repo-text-details input:last-child { grid-column: 1 / -1; }
.repo-flag-picks { display: grid; gap: 4px; padding-left: 22px; }
.repo-flag-picks p { margin: 0; }
.repo-flag-picks label { display: flex; align-items: baseline; gap: 6px; font-weight: normal; }
.repo-flag-picks input[type=checkbox] { width: auto; margin: 0; }
/* Pairing statements between two maps (repository.js linkPicker) */
.repo-pairing { display: grid; gap: 8px; }
.repo-pairing:empty { display: none; }
.repo-pairing > p { margin: 0; }
.repo-pair-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.repo-pair-side { min-width: 0; }
.repo-pair-title { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.repo-pair-side .repo-map { font-size: 0.75rem; padding: 8px; }
.repo-pair-list { margin: 4px 0 0; padding-left: 20px; font-size: 0.92rem; }
.repo-pair-list li { margin: 2px 0; }
.repo-pair-x { font-size: 0.8rem; padding: 0 6px; margin: 0; line-height: 1.4; }
@media (max-width: 640px) { .repo-pair-maps { grid-template-columns: 1fr; } }
/* Every panel under a map's buttons in the same type (Angela, 2026-11-07): a heading, labels, choices, notes and buttons
   the same size from one panel to the next */
.repo-choose, .repo-flag { font-size: 0.95rem; gap: 8px; padding: 12px 14px; }
.repo-choose .repo-choose-q, .repo-flag .repo-choose-q { font: 600 1rem/1.3 var(--serif); margin: 0; color: var(--ink); }
.repo-choose > label, .repo-pairing > p.repo-choose-q { font: 600 0.95rem/1.3 var(--serif); margin: 4px 0 0; }
.repo-link-how label, .repo-flag label, .repo-flag-picks label, .repo-choose-pick { font-size: 0.95rem; }
.repo-choose .muted, .repo-flag .muted { font-size: 0.88rem; margin: 0; }
.repo-choose input, .repo-choose textarea, .repo-flag textarea { font-size: 0.95rem; }
.repo-choose button, .repo-flag button { font-size: 0.9rem; padding: 6px 14px; }
.repo-choose .repo-chip { padding: 6px 10px; font-size: 0.9rem; }
/* The two link labels ("Link to a PhilPapers entry…", "Or link to a text on another website…") not bold (Angela,
   2026-11-07), in "Link to a text" and in the save form */
.repo-choose > label, .repo-form label[for="repo-link"], .repo-form label[for="repo-other"] { font-weight: normal; }

/* The "×" that takes back a link or text you just added (Angela, 2026-11-08). */
.repo-undo { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font: inherit; font-size: 0.85rem; line-height: 1; box-shadow: none; cursor: pointer; vertical-align: middle; position: relative; top: -0.12em; }
@media (hover: hover) { .repo-undo:hover, .repo-undo:focus-visible { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); } }

/* Another version: the start page's fields that come from the original, greyed out (Angela, 2026-11-08). */
input.repo-locked, textarea.repo-locked { background: var(--line); color: var(--muted); cursor: not-allowed; }
button.repo-locked { opacity: 0.55; cursor: not-allowed; }
.repo-hidden { display: none !important; }

/* The sponsors page (2026-11-08): each sponsor a box with its logo, name (both links to its site) and a line about it.
   (Plain boxes: one link wrapping it all showed an empty box in Angela's browser. Class names say "backer", not "sponsor", and the logo is matcha-logo.png: ad blockers hide elements and pictures named "sponsor…", which left the box empty again, 2026-11-09.) */
.backer-list { display: block; margin: 22px 0 8px; }
.backer { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); }
.backer-logo { flex: 0 0 auto; display: block; line-height: 0; }
.backer-logo img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; }
.backer-text { flex: 1 1 auto; min-width: 0; }
.about .backer-name { margin: 0 0 4px; font: 700 1.35rem/1.2 var(--display); }
.about .backer-name a { color: var(--accent-dark); text-decoration: none; }
@media (hover: hover) { .about .backer-name a:hover { text-decoration: underline; } }
.about .backer-what { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 480px) { .backer { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* The site menu, finished (Angela, 2026-11-08: "help the hovering highlighting etc. look more finished"; no underline;
   easy to read; rounded corners): each item highlighted as a rounded pill inside the bar, not a block to its edges. The
   current page: a gold pill with dark writing. Hover: a soft light pill, the writing white. The "About" submenu (About the
   clinic, Sponsors, FAQ; the engine's nav.js) drops down under a gold edge, its items pills too, its caret flipping when
   open. Phones: the same pills, full width in the open menu. */
.site-nav > ul > li > a, .site-nav .sub-toggle { margin: 5px 2px; padding: 5px 18px; border-radius: 999px; transition: background-color 0.15s, color 0.15s; }
@media (hover: hover) {
  .site-nav > ul > li > a:hover, .site-nav .sub-toggle:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
}
.site-nav a:focus-visible, .site-nav .sub-toggle:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; outline: 2px solid var(--sun); outline-offset: 1px; }
.site-nav > ul > li > a[aria-current="page"], .site-nav .has-sub.current > .sub-toggle { background: var(--sun); color: var(--ink); }

/* (The writing: the site's own reading face, EB Garamond, semibold, in ordinary capitals, not Oswald's spaced capitals,
   which were hard to read: Angela, 2026-11-08.) */
.site-nav a, .site-nav .sub-toggle, .site-nav .nav-toggle { font: 600 1.08rem/1.3 var(--serif); text-transform: none; letter-spacing: 0.01em; }
.site-nav .has-sub { position: relative; }
.site-nav .sub-toggle { display: block; border: 0; box-shadow: none; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.site-nav .sub-toggle::after { content: "▾"; display: inline-block; margin-left: 0.4em; font-size: 0.8em; transition: transform 0.2s ease; }
.site-nav .has-sub.open > .sub-toggle:not(:hover) { background: rgba(255, 255, 255, 0.16); }
.site-nav .has-sub.current.open > .sub-toggle { background: var(--sun); color: var(--ink); }
.site-nav .has-sub.open > .sub-toggle::after { transform: rotate(180deg); }
/* (Flush with the bar and solid, covering the meander below it: no gap or gold edge for its line to run through. Angela,
   2026-11-08.) */
.site-nav ul.sub { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 220px; max-width: none; margin: 0; padding: 6px;
  flex-direction: column; justify-content: flex-start; gap: 2px; background: var(--accent-dark); border: 0;
  border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(30, 20, 10, 0.3); }
.site-nav .has-sub.open > ul.sub, .site-nav .has-sub:has(:focus-visible) > ul.sub { display: flex; }   /* (keyboard focus only: a click toggles it) */
@media (hover: hover) { .site-nav .has-sub:hover > ul.sub { display: flex; } }
/* (A bridge over the gap under "About", so the pointer can reach the submenu without it closing.) */
.site-nav ul.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.site-nav ul.sub a { margin: 0; padding: 9px 14px; border-radius: 8px; white-space: nowrap; background: none; color: #fff; transition: background-color 0.15s, color 0.15s; }
@media (hover: hover) { .site-nav ul.sub a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } }
.site-nav ul.sub a[aria-current="page"] { background: var(--sun); color: var(--ink); }
@media (min-width: 641px) and (max-width: 900px) {
  .site-nav > ul > li > a, .site-nav .sub-toggle { padding: 5px 10px; }
}
@media (max-width: 640px) {
  .site-nav ul { padding: 0 8px 8px; }
  .site-nav > ul > li > a, .site-nav .sub-toggle { margin: 2px 0; padding: 9px 16px; border-radius: 10px; }
  .site-nav .sub-toggle { width: 100%; text-align: left; cursor: default; }
  .site-nav .sub-toggle::after { content: ""; }
  .site-nav .has-sub.open > .sub-toggle, .site-nav .has-sub.current > .sub-toggle, .site-nav .has-sub.open > .sub-toggle:not(:hover) { background: none; color: #fff; }
  .site-nav.open ul.sub { display: flex; position: static; box-shadow: none; padding: 0 0 0 20px; min-width: 0; border: 0; border-radius: 0; gap: 0; }
  .site-nav ul.sub::before { display: none; }
  .site-nav ul.sub a { margin: 2px 0; padding: 9px 16px; border-radius: 10px; }
}

/* The home page: no gap between its last band and the footer (the page's lighter background showed there: Angela,
   2026-11-08). */
main:has(.quote-carousel) + footer { margin-top: 0; }   /* (the home page: the one with the testimonials) */

/* The save form in a white box, its groups (the map; you; texts; other maps) set apart by thin lines, so it isn't a wall
   of text (Angela, 2026-11-08). */
.repo-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; gap: 12px; margin-top: 14px; }
.repo-form .repo-group-start { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
/* The save form as a regular form (Angela, 2026-11-10, layout A of tests/save-form-mockups.html): three labelled groups,
   each label beside its box (above it on a phone), required fields starred, sources and linked maps behind two buttons. */
.repo-form .repo-group { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 10px 0 2px; min-width: 0; }
.repo-form .repo-group legend { font: 400 0.7rem var(--serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 0; }
.repo-form .repo-opt { letter-spacing: 0; text-transform: none; font-weight: 400; }
/* Each row: its label in a column as wide as the form's longest label (repository.js alignLabels measures it when the
   form opens, so "Whose argument" starts at the left edge whatever the font: Angela, 2026-11-10), its box and note beside. */
.repo-form .repo-row { display: grid; grid-template-columns: minmax(var(--repo-label-w, 8.5em), max-content) minmax(0, 1fr); gap: 2px 12px; align-items: center; margin: 6px 0; }   /* (never narrower than its own label) */
.repo-form .repo-row > label { display: block; text-align: right; font-weight: 400; font-size: 0.95rem; line-height: 1.2; margin: 0; white-space: nowrap; }
.repo-form .repo-row:has(> input), .repo-form .repo-row:has(> .repo-link-row) { align-items: baseline; }   /* (the label on the line of the words in its box, in any font) */   /* (no bold: Angela, 2026-11-10) */
.repo-form .repo-row > :not(label) { grid-column: 2; }
.repo-form .repo-row[hidden] { display: none; }
.repo-form .repo-row:has(.repo-chips) { align-items: start; }
.repo-form .repo-row:has(.repo-chips) > label { padding-top: 8px; }   /* (by the first card, not halfway down the list) */
.repo-form .repo-row > .repo-field-note { margin: 0; line-height: 1.25; }   /* (close under its box: Angela, 2026-11-10) */
.repo-form .repo-req { color: var(--bad, #a33); }
.repo-form .repo-row input, .repo-form .repo-link-row input, .repo-form .repo-text-details input { padding: 6px 10px; font-size: 0.95rem; min-height: 0; }
.repo-form .repo-toggle { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent-dark);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; border-radius: 3px; padding: 1px 3px; margin-left: -3px; }
/* (Its arrow in a small box, so the heading reads as something to click: Angela, 2026-11-10, "make it more obvious".) */
.repo-form .repo-toggle::after { content: "▸"; display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: 6px; border: 1px solid var(--accent);
  border-radius: 4px; font-size: 0.95em; letter-spacing: 0; vertical-align: 0.05em; text-decoration: none; color: var(--accent-dark); background: var(--surface); }
.repo-form .repo-toggle[aria-expanded="true"]::after { content: "▾"; }   /* (no fill: Angela, 2026-11-10) */
.repo-form .repo-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.repo-form .repo-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.repo-form .repo-group legend:has(.repo-toggle) { font-size: 0.8rem; }   /* (the two that open, a little larger than the others) */
.repo-form .repo-group .repo-papers { margin: 2px 0; display: grid; gap: 4px; }
.repo-form .repo-group > .repo-chips:not(:empty) { margin: 6px 0; }
.repo-form .repo-papers .repo-papers-q { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); }
.repo-form .repo-papers .repo-chips:empty { display: none; }
.repo-form .repo-papers-q, .repo-form label { font-weight: 400; }
.repo-form .repo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.repo-form .repo-foot .repo-license { flex: 1 1 260px; margin: 0; font-size: 0.85rem; }
.repo-form .repo-req-note, .end-card .repo-form .repo-req-note { margin: 0 0 -4px; text-align: right; font-size: 0.8rem; line-height: 1.2; }   /* (above the first heading's line, at its end) */
@media (max-width: 560px) { .repo-form .repo-row { grid-template-columns: minmax(0, 1fr); } .repo-form .repo-row > label { text-align: left; } .repo-form .repo-row > :not(label) { grid-column: 1; } }
.repo-filed-note { margin: 0 0 12px; }
.repo-filed-note button { margin-left: 6px; }

/* The Library: each map's title links to its own page (Angela, 2026-11-08); that page shows just the map. */
.repo a.repo-title-link { color: inherit; text-decoration: none; }
@media (hover: hover) { .repo a.repo-title-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--line); } }
.repo-back { margin: 0 0 12px; }
.repo-single .repo-controls, .repo-single #repo-status, .repo-single #repo-list, .repo-single .repo-more-row, .repo-single .repo-picture { display: none; }
.repo-links-kind { margin: 6px 0 0; font-style: italic; }
.repo-links .repo-paper-list { margin-top: 2px; }

/* Sources and Linked maps, as accordion rows (Angela, 2026-11-08). */
/* (No lines around the rows: the arrows and headings mark them. Angela, 2026-11-08: "is it too busy?") */
.repo-acc { border-top: 0; }
.repo-acc > summary { list-style: none; cursor: pointer; padding: 2px 2px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.repo-acc > summary::-webkit-details-marker { display: none; }
.repo-acc > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--accent); transition: transform 0.15s; }
.repo-acc[open] > summary::before { transform: rotate(90deg); }
@media (hover: hover) { .repo-acc > summary:hover { color: var(--accent-dark); } }
.repo-acc > .repo-texts, .repo-acc > .repo-links { padding: 0 0 10px 1.6em; }
.repo-acc .repo-texts .repo-papers-q:first-child, .repo-acc .repo-links .repo-links-kind:first-child { margin-top: 0; }
/* Inside the accordions, the sub-headings alike (Angela, 2026-11-08): "PhilPapers:", "Other sources:" as "Agreeing:" etc.,
   alike in style and spacing, plain (no italics), under the row heading. */
.repo-acc .repo-texts .repo-papers-q, .repo-acc .repo-links .repo-links-kind { margin: 10px 0 2px; font-weight: normal; font-style: normal; font-size: 1rem; }   /* (no bold, no italics: Angela) */
.repo-acc .repo-texts .repo-papers-q:first-child, .repo-acc .repo-links .repo-links-kind:first-child { margin-top: 0; }
/* (and the same spacing for both lists: Angela, 2026-11-08) */
.repo-acc .repo-texts .repo-paper-list, .repo-acc .repo-links > .repo-paper-list { margin: 0; padding-left: 1.3em; }
.repo-acc > .repo-texts, .repo-acc > .repo-links { margin: 0; }   /* (the same gap under both row headings) */
/* (The rating's line sits as close under the accordions as the rows sit under theirs: Angela, 2026-11-08.) */
.repo-acc + .repo-foot, .repo-acc + .repo-acc + .repo-foot { margin-top: 0; }
.repo-acc > .repo-texts { padding-bottom: 0; }   /* (Sources sits close above Linked maps: Angela, 2026-11-08) */
/* (The rows evenly spaced when closed: the same gap above Sources, between the rows, and above the rating's line; an
   open row gets a clear space after it. Angela, 2026-11-08.) */
.repo-map + .repo-acc, .repo-map + .repo-acc[hidden] + .repo-acc { margin-top: 12px; }   /* (more room above and below the rows: Angela) */
.repo-acc + .repo-foot, .repo-acc + .repo-acc + .repo-foot { margin-top: 12px; }
.repo-acc > .repo-texts, .repo-acc > .repo-links { padding-bottom: 0; }
.repo-acc[open] { margin-bottom: 14px; }
.repo-acc[open]:has(+ .repo-foot), .repo-acc[open]:has(+ .repo-acc[hidden] + .repo-foot) { margin-bottom: 4px; }   /* (an open last row: the line keeps its usual gap) */
.repo-human { position: fixed; right: 12px; bottom: 12px; z-index: 100; }   /* (the Library's human check, if it ever needs a click) */
.repo-acc > summary:focus:not(:focus-visible) { outline: none; }   /* (the focus ring only for the keyboard, not after a click) */

/* The Library's "Enlarge map" (Angela, 2026-11-08): above each map, on the right, as beside the guides' maps. */
.repo-map-head { margin: -4px -4px 0; gap: 8px; }
.repo-big-close { float: right; }

/* Legible maps in the Library (Angela, 2026-11-08): a map wider than its box scrolls sideways (in the list it shrinks to
   fit, but no further than three quarters: repository.js); a map's own page is wider, and its map full size. */
.repo-list > * { min-width: 0; }   /* (a wide map scrolls in its box, never widening its card) */
.repo-map-draw { overflow-x: auto; }
/* (Angela, 2026-11-09) The map runs right to the box's edges (no inner margin where it's cut off), simply cut off there
   (no fading, at her word); the scroll bar under it always shows, also where the system hides scroll bars until used. */
.repo-map-frame { overflow: hidden; }
.repo-map-scroll { position: relative; margin: 0 -12px -12px; }
/* (A margin at each end the same in every browser: Safari leaves a scrolling box's right padding out of what scrolls, so the
   map ended flush against the edge. Here the margins are spacers beside the map, which every browser scrolls to.) */
.repo-map-scroll .repo-map-draw { display: flex; padding: 0 0 10px; }
.repo-map-scroll .repo-map-draw::before, .repo-map-scroll .repo-map-draw::after { content: ""; flex: 0 0 12px; }
.repo-map-scroll .repo-map-draw svg { flex: 0 0 auto; margin: 0 auto; }
.repo-map-draw::-webkit-scrollbar { height: 10px; }
.repo-map-draw::-webkit-scrollbar-track { background: var(--line); }
.repo-map-draw::-webkit-scrollbar-thumb { background: #b9a98d; border-radius: 5px; border: 2px solid var(--line); }
.repo-map-draw::-webkit-scrollbar-thumb:hover { background: #8f8068; }
@supports not selector(::-webkit-scrollbar) { .repo-map-draw { scrollbar-color: #b9a98d var(--line); } }

/* An enlarged map (the guides' and the Library's): the Close button stays in the box's top right corner, however far
   the map is scrolled, since only the map scrolls (Angela, 2026-11-09). */
.map-overlay-inner:has(> #close-map), .map-overlay-inner:has(> .repo-big-close) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.map-overlay-inner > #close-map, .map-overlay-inner > .repo-big-close { float: none; flex: none; align-self: flex-end; margin: 10px 12px 4px; }
/* (an "×", not "Close": more discreet, Angela 2026-11-09) */
/* (drawn, not typed, in a soft grey circle, like the close buttons of Mac and iPhone apps: Angela, "make it look like other
   native symbols more") */
.map-overlay-inner > button.map-x { width: 28px; height: 28px; padding: 0; margin: 8px 8px 0; border: 0; border-radius: 50%;
  background: rgba(42, 35, 32, 0.08); color: #6e6560; display: grid; place-items: center; }
.map-overlay-inner > button.map-x svg { display: block; }
.map-overlay-inner > button.map-x:hover { background: rgba(42, 35, 32, 0.16); color: var(--ink); }
.map-overlay-inner > button.map-x:focus { outline: none; }
.map-overlay-inner > button.map-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.map-overlay-inner > #map-big, .map-overlay-inner > .repo-big-draw { overflow: auto; min-height: 0; padding: 0 16px 16px; }
.repo-map-draw svg { display: block; margin: 0 auto; }
body.repo-single .repo { max-width: 1240px; }

/* What visitors rate, for a map made with the Mapper and the Builder (Angela, 2026-11-09) */
.repo-rate-as { display: grid; gap: 6px; }
.repo-rate-as-q { margin: 0; font-weight: 600; }
.repo-rate-as label { display: flex; align-items: baseline; gap: 8px; font-weight: normal; margin: 0; cursor: pointer; }
.repo-rate-as input[type=radio] { width: auto; flex: none; margin: 0; padding: 0; box-shadow: none; }
.repo-help { width: 20px; height: 20px; padding: 0; margin: 0 0 0 4px; border-radius: 50%; font: 600 0.8rem var(--serif); line-height: 18px;
  background: transparent; color: var(--accent); border: 1px solid var(--accent); vertical-align: 1px; }
.repo-help:hover, .repo-help[aria-expanded="true"] { background: var(--accent-soft); }
.repo-rate-as-why { margin: 0; }

/* The rating's hint, in a "?" bubble after "Rate this …:" (Angela, 2026-11-09) */
.repo-rate-qwrap { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.repo-rate-help { margin: 0 6px 0 4px; }
.repo-rate-bubble { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(320px, 80vw);
  padding: 8px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12); font: normal 0.92rem/1.35 var(--serif); white-space: normal; }
.repo-rate-bubble::before { content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; background: var(--surface);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }

/* The end screen (Angela, 2026-11-09: layout C of tests/end-mockups.html): sharing and downloading in one row under the
   certificate or map; rating and saving as two cards side by side (stacked on a phone); starting again at the bottom.
   Each card changes in place once used. The save card takes the whole width while its form is open. */
.end-keep { margin: 0; }
.end-cards { width: 100%; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin: 4px auto 0; }   /* (one above the other, each the full width: Angela, 2026-11-09) */
.end-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
/* (the save form inside its card: no second box around it) */
.end-card .repo-form { background: none; border: 0; border-radius: 0; padding: 0; }
.end-card-head { font: 600 1.15rem var(--display); margin: 0 0 8px; }
.end-card .muted { margin: 0 0 12px; line-height: 1.4; }
.end-card .rating { width: auto; margin: 0; text-align: left; }
.end-fill:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.end-card .stars { justify-content: flex-start; margin-bottom: 10px; }
.end-card .end-push { margin-top: auto; align-self: flex-start; min-width: 12em; }
.end-card #rating-msg:empty { display: none; }
.end-card #rating-msg { margin: 8px 0 0; }
.end-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; font-size: 1.05rem; }
.end-ok::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; }
.end-card .repo-done { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.end-card .repo-done-head { text-align: left; font-size: 1.05rem; }
.end-card .repo-done .repo-held { text-align: left; margin: 0 0 8px; }
.end-card .repo-retract-keep { margin-top: 12px; padding-top: 12px; }
.end-card .repo-retract-keep p { font-size: 0.9rem; line-height: 1.35; }
.end-again { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; margin-top: 4px; }
.end-textlink { background: none; border: 0; padding: 4px 2px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); font-size: 1rem; }
.end-textlink:hover, .end-textlink:focus-visible { background: none; color: var(--ink); text-decoration-color: currentColor; }
.with-skeptic .end-cards { max-width: 760px; }   /* (the Skeptic's: as wide as the certificate) */
.ws-done .handover { max-width: none; }   /* (the Mapper's "Pass it to the Builder", as wide as the cards) */
@media (max-width: 680px) { .end-cards { grid-template-columns: 1fr; } }
@media print { .end-cards, .end-again { display: none !important; } }

/* The certificate keeps its full layout at every width (Angela, 2026-11-09: "should have a minimum width ... or make it
   smaller"): always 760px wide, as on a computer, and shrunk as a whole to fit a narrower screen (the zoom is set by the
   script at the bottom of skeptic.html). So the phone rules in skeptic.css, which rearranged it, are undone here. */
.with-skeptic .certificate { width: 760px; max-width: none; box-sizing: border-box; }
@media (max-width: 800px) {
  .with-skeptic .cert-inner { padding: 36px 40px 28px; }
  .with-skeptic .cert-title { font-size: 3.6rem; }
  .with-skeptic .cert-name { font-size: 3.6rem; min-width: 60%; }
  .with-skeptic .cert-footer { grid-template-columns: 1fr auto 1fr; }
  .with-skeptic .seal { grid-column: auto; grid-row: auto; justify-self: auto; width: 160px; height: 160px; }
}
@media print { .with-skeptic .certificate { zoom: 1 !important; width: auto; } }

/* The save form's note on the licence (Angela, 2026-11-09: CC BY 4.0) */
.repo-license { margin: 4px 0 0; font-size: 0.92rem; line-height: 1.4; }

/* The end screen's cards, centred (Angela, 2026-11-09: "center text in boxes"): headings, notes, stars, buttons and the
   saved message; the save form's fields stay left-aligned, as forms read best. */
.end-card, .end-card .rating { text-align: center; }
.end-card .stars { justify-content: center; }
.end-card .end-push { align-self: center; }
.end-ok { justify-content: center; }
.end-card .repo-done-head, .end-card .repo-done .repo-held, .end-card .repo-retract-keep { text-align: center; }
.end-card .repo-form { text-align: left; }

/* The sponsor's credit, above the footer on every page (Angela, 2026-11-09: option F1, then without its rules): "With AI
   support from", the logo and name, one line about it; on a white band, in the Clinic's own type. */
.backing { margin-top: 40px; border-top: 1px solid var(--line); padding: 14px 16px 16px; background: var(--surface); text-align: center; }
.backing + footer { margin-top: 0; }
main:has(.quote-carousel) + .backing { margin-top: 0; }   /* (the home page: the testimonials band runs into it, as into the footer) */
.backing-label { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; }   /* (no rules either side: "the lines are busy", Angela) */
.backing-who { display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; line-height: 1.1; }   /* (a block of its own: no line's extra space under it) */
.backing-who img { width: 30px; height: 30px; border-radius: 7px; }
.backing-mark { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 500; color: #1f6012; letter-spacing: -0.01em; }
.backing-mark b { font-weight: 700; }
.backing-who:hover .backing-mark, .backing-who:focus-visible .backing-mark { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* (their own line, in their font and grey; its initials, M-A-T-C-H-A, in their green: Angela, 2026-11-09) */
.backing-what { margin: 5px 0 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; color: #3a2c48; line-height: 1.4; text-wrap: balance; }   /* (larger and darker: "hard to read", Angela) */
.backing-i { color: #1f6012; font-weight: 600; }
@media print { .backing { display: none; } }
@media (max-width: 600px) { .backing { padding: 12px 16px 14px; } .backing-what { font-size: 0.95rem; } }   /* (squeezed: Angela, 2026-11-09; on a phone their line wraps evenly rather than shrinking) */

/* A map's defined words in its own guide's colour (argmap.js: the Library shows maps from every guide). */
.am-guide-mapper { --am-defined: var(--lapis); }
.am-guide-builder { --am-defined: var(--terra); }
.am-guide-skeptic { --am-defined: var(--sextus); }
/* The search for maps to link to, in the save form, laid out as its fields (repository.js linkPicker inline: Angela,
   2026-11-10): no box of its own; its results, and how the two are related, under the search box, in the boxes' column. */
.repo-form .repo-linker-inline { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.repo-form .repo-linker-inline > .repo-link-results, .repo-form .repo-linker-inline > .repo-link-how { margin-left: calc(var(--repo-label-w, 8.5em) + 12px); }
@media (max-width: 560px) { .repo-form .repo-linker-inline > .repo-link-results, .repo-form .repo-linker-inline > .repo-link-how { margin-left: 0; } }