/* The organizing-and-learning view.

   Three rules shape everything below, and all three are about the same
   hazard: this page mixes other people's published accounts with one thing
   we made up, and the format is what will mislead a reader, not any single
   sentence.

   1. OURS LOOKS DIFFERENT FROM THEIRS, AT A GLANCE AND FROM A DISTANCE.
      A badge is not enough. A reader scrolling at speed reads ground, rule
      and colour before they read a label, so the proposal gets its own band,
      its own dashed rule and its own hue (--mark-idea, the "thinking" family
      in theme.css), and every card in it carries the dashed treatment too.
      Nothing else on the page is allowed to use that treatment.

   2. A BASIS IS PART OF THE RECORD, NOT AN ANNOTATION ON IT.
      Every card shows how its claim is held up — a published description, a
      reported event, a reported intention, a question somebody raised — in
      the same position, in mono, before the reader gets to the prose. The
      distinction that matters most here is the cheapest one to lose:
      "somebody announced a gathering" and "a gathering happened" are one
      word apart in English and are rendered as different bases here.

   3. EVERY CLAIM CARRIES ITS SOURCE WHERE THE CLAIM IS.
      Not in a bibliography at the foot that nobody scrolls to. The card
      names the page it was read from, as a link, in its last line; the full
      strip — dates, URL, the source's own scope note — is one click away
      under the step's "Sources for this step" disclosure, not a scroll away.

   And one rule about the page as a whole, added September 11: THE NARRATIVE
   COMES BEFORE THE DATA. The page was ~13,800px tall on a phone with every
   strip, role and relation inline. Now what is always visible is the title,
   the lede, and five steps of question + figure + two or three compact
   cards; the rest is inside <details>, styled below as .odetails to match
   the home page's "Where your question goes" and "more sources". A hedge
   never moves into a disclosure away from the claim it hedges. */

.ohead { padding-block: var(--s7) var(--s5); }
.ohead h1 { max-width: 20ch; margin-bottom: var(--s4); }
.ohead .lede { max-width: 62ch; }

/* ── the stance banner ───────────────────────────────────────────────────
   Sits above the path index, so it is met before the first card rather than
   after the last one. Same border weight as the exchange page's provenance
   banner: this is the same kind of statement, about a different thing. */

.ostance {
  margin: var(--s5) 0 0; padding: var(--s4);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--surface); max-width: 70ch;
  font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2);
}
.ostance strong { color: var(--ink); }

/* ── the path index ─────────────────────────────────────────────────────
   Five steps on one scrollable page. The index is here because step 4 is the
   one that gets pointed at in conversation, and scrolling to find it while
   somebody watches is worse than a list of five links. */

.opath {
  list-style: none; counter-reset: opath;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  margin: var(--s5) 0 0; padding: 0;
}
.opath li { counter-increment: opath; }
.opath a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px var(--s3); border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); text-decoration: none;
  font: var(--wt-medium) var(--fs-fine)/1.3 var(--font-ui);
}
.opath a::before {
  content: counter(opath);
  font: var(--wt-regular) var(--fs-micro)/1 var(--font-mono); color: var(--ink-3);
}
.opath a:hover { border-color: var(--ink-3); color: var(--ink); }
/* The step that is ours is flagged in the index too, so the shape of the page
   is legible before any of it has been read. Keyed on a class rather than
   :nth-child, so reordering the five steps cannot silently move the marker
   onto somebody else's account. */
.opath__ours a { border-color: var(--mark-idea); color: var(--mark-idea); }

/* ── step scaffolding ────────────────────────────────────────────────── */

.ostep__n {
  font: var(--wt-medium) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s3);
}
.ostep__n--ours { color: var(--mark-idea); }
.ostep h2 { margin-bottom: var(--s3); max-width: 26ch; }
.ostep__q {
  font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink-2);
  max-width: 60ch;
}
.ostep__note { font-size: var(--fs-ui); color: var(--ink-3); max-width: 66ch; }
.ostep__limit { margin-top: var(--s5); }
.osub { margin: var(--s7) 0 var(--s3); }
/* A sub-heading inside a disclosure: the disclosure's own top margin has
   already separated it from the step, so the heading needs less. */
.osub--in { margin-top: var(--s5); }

/* ── disclosures ────────────────────────────────────────────────────────
   Same treatment as .ask__where and .sources__more on the home page: fine
   size, third-tone ink, the summary one shade darker and a pointer. A thin
   top rule so a run of three closed disclosures reads as three things. The
   summary says what is inside; a reader who never opens one has still been
   told it exists. */
.odetails {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font: var(--wt-regular) var(--fs-fine)/1.45 var(--font-ui); color: var(--ink-3);
}
.odetails + .odetails { margin-top: var(--s3); }
.odetails summary { cursor: pointer; color: var(--ink-2); padding: var(--s1) 0; }
.odetails summary:hover { color: var(--ink); }
.odetails[open] summary { margin-bottom: var(--s2); }
.odetails > p { max-width: 66ch; }
/* Inside the proposal band the rule is dashed too — rule 1 — so the
   disclosure cannot read as one of the sourced ones above it. */
.odetails--ours { border-top-style: dashed; border-top-color: var(--mark-idea); }
/* The three at the foot carry the whole bibliography, the legend and the
   limits; they get the body size so the source list is readable. */
.odetails--major { font-size: var(--fs-ui); margin-top: var(--s3); }
.odetails--major summary { font-weight: var(--wt-medium); }
.odetails--major:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* ── the network figure ─────────────────────────────────────────────────
   Deterministic columns, not a force layout: a diagram somebody is pointing
   at must be in the same place on the second load as on the first. Column
   assignment is derived in organizing.js from the relations themselves, so
   adding a record cannot silently leave it off the picture.

   The figure is small on purpose. Five nodes and three lines is the whole of
   what these five pages establish about who is connected to whom, and a
   larger drawing would imply there is more of it. */

.net-figure {
  margin-top: var(--s5); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
}
.onet { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
/* The narrow layout is drawn at the box's width with explicit width/height
   attributes, so it is 1:1 and its labels are their nominal size. The scroll
   box is a floor under the arithmetic in netSvg(): a box narrower than the
   drawing scrolls the figure sideways rather than the page. */
.net-figure__scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.onet--narrow { width: auto; max-width: none; margin: 0; }
.onet .n-shape { transition: stroke-width var(--dur-ui) var(--ease-out); }
.onet .n-label { font: var(--wt-medium) 11.5px/1 var(--font-ui); fill: var(--ink); text-anchor: middle; }
.onet .n-sub   { font: var(--wt-regular) 9px/1 var(--font-mono); fill: var(--ink-3); text-anchor: middle; }
.onet .e { fill: none; stroke: var(--edge); stroke-width: 1.4; stroke-linecap: round; }
.onet .e-label { font: var(--wt-regular) 8.5px/1 var(--font-mono); fill: var(--ink-3); }

.onet-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--rule); margin-top: var(--s3);
  font: var(--wt-regular) var(--fs-micro)/1.4 var(--font-mono); color: var(--ink-3);
}
.onet-legend span { display: inline-flex; align-items: center; gap: 6px; }
.net-figure__note {
  margin: var(--s3) 0 0; font-size: var(--fs-micro); color: var(--ink-3);
  max-width: 70ch; line-height: 1.5;
}

/* ── record cards ────────────────────────────────────────────────────── */

.ocards { display: grid; gap: var(--s4); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.ocard {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule-strong);
  min-width: 0;
}
.ocard__top { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ocard__type {
  font: var(--wt-regular) var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
/* Margin zeroed: the card's flex gap is the spacing, and the browser's
   default h4 margins were opening a blank band between the name and its
   summary in the compact card. */
.ocard__name {
  margin: 0;
  font-family: var(--font-display); font-size: var(--fs-title);
  font-weight: var(--wt-semi); line-height: var(--lh-title);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
  overflow-wrap: break-word;
}
.ocard__date { font: var(--wt-regular) var(--fs-micro)/1 var(--font-mono); color: var(--ink-3); }
.ocard__body { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }

/* The compact card. Smaller name, fine body, less padding, and instead of the
   source strips a last line naming the page it was read from and — where the
   Atlas holds the same record — a link into it. The caution keeps its full
   treatment: it is the hedge on the summary beside it. */
.ocards--compact { gap: var(--s3); margin-top: var(--s4); }
.ocards--compact .ocard { padding: var(--s4); gap: 6px; }
.ocards--compact .ocard__name { font-size: var(--fs-lede); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 20; }
.ocards--compact .ocard__body { font-size: var(--fs-fine); }
.ocard__foot {
  display: flex; gap: var(--s3); align-items: baseline;
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule);
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3);
}
/* One line. Two of the five source titles are a sentence long, and three
   lines of mono under every card was a third of the page's height on a
   phone. The link still carries the whole title (and its full strip is under
   "Sources for this step"); what is clipped is the display, not the source. */
.ocard__from { flex: 1 1 0; min-width: 0; }
.ocard__from a { color: var(--ink-accent); }
.ocard__from--none { color: var(--mark-idea); }
.ocard__atlas { flex: none; white-space: nowrap; color: var(--ink-accent); }

/* The basis badge. Mono, because it is a property of the record rather than
   a sentence somebody wrote — the same type rule the rest of the site uses. */
.basis {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong); background: var(--surface-sunk);
  font: var(--wt-medium) var(--fs-micro)/1.4 var(--font-mono); color: var(--ink-2);
}
/* Intentions and questions are the two bases most easily read as their
   stronger neighbours — "they will" for "they said they would", "the answer
   is" for "somebody asked". Both get the loss colour that the coverage line
   uses for a declared gap. */
.basis[data-basis="reported-intention"],
.basis[data-basis="reported-question"] { color: var(--ink-loss); border-color: var(--ink-loss); }
.basis[data-basis="proposed-by-us"] {
  color: var(--mark-idea); border-color: var(--mark-idea);
  border-style: dashed; background: transparent;
}

/* The card's own caution, in the site's one visual language for a limit. */
.ocard__caution {
  border-left: 2px solid var(--ink-loss); padding-left: var(--s3);
  color: var(--ink-2); font-size: var(--fs-fine); line-height: 1.5;
  margin: var(--s2) 0 0;
}

/* The source strip. Same treatment as .prov in shell.css: sunk ground, mono
   label, so a source can never be mistaken for a sentence somebody wrote. */
.ocard__srcs {
  margin-top: auto; padding-top: var(--s3);
  display: grid; gap: var(--s2);
}
.osrcline {
  background: var(--surface-sunk); border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3);
  overflow-wrap: break-word;
}
.osrcline a { color: var(--ink-accent); }
.osrcline__scope { display: block; margin-top: 3px; color: var(--ink-3); }
/* The URL is printed in full, not hidden behind the title, because "shows its
   source" means a reader can copy the address without opening anything. A URL
   has no spaces, so it is the one string on this page with no break
   opportunity of its own: `anywhere` gives it one. Without this it measured
   347px inside a 318px card at 390px and pushed the whole document sideways. */
.osrcline__url { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.osrcline--none { color: var(--mark-idea); }

/* Grid and flex items default to min-width:auto, which means a track is never
   allowed to be narrower than its widest unbreakable child. Every container on
   this page that holds a URL is therefore floored at zero explicitly — this is
   the rule that keeps a long source address from widening the page rather than
   wrapping inside its card. */
.ocard > *, .ocard__srcs > *, .ocard__foot > *, .olink > *, .oplace > *, .role > *, .otr__card > * {
  min-width: 0;
}
.oplace, .olink, .otr__card { min-width: 0; }

/* ── ours: the proposal band ─────────────────────────────────────────────
   Rule 1 at the top of this file. A different ground, a dashed edge and the
   huckleberry hue, so that the section reads as a different KIND of thing
   before a word of it is read. */

.band--proposal {
  background: color-mix(in srgb, var(--mark-idea) 6%, var(--ground));
  border-top: 2px dashed var(--mark-idea);
}
.band--proposal + .band { border-top: 2px dashed var(--mark-idea); }
.band--proposal .ocard {
  border-style: dashed; border-color: var(--mark-idea);
  background: var(--surface);
}

.ourswarn {
  margin: var(--s5) 0 0; padding: var(--s4);
  border: 1px dashed var(--mark-idea); border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure-wide);
}
.ourswarn strong { color: var(--ink); }

/* ── the two places, and the trail between them ──────────────────────── */

/* Two columns even on a phone: two places side by side is the picture this
   step is drawing, and each holds a name and one sentence. */
.oplaces {
  display: grid; gap: var(--s3); margin-top: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oplace {
  padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule);
}
.oplace__name {
  font-family: var(--font-display); font-size: var(--fs-lede);
  font-weight: var(--wt-semi); line-height: 1.25; margin-bottom: var(--s2);
}
.oplace__body { margin: 0 0 var(--s2); color: var(--ink-2); font-size: var(--fs-fine); }
.oplace .ocard__from { display: block; font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3); }
@media (max-width: 560px) {
  .oplace { padding: var(--s3); }
  .oplace__name { font-size: var(--fs-ui); }
}

/* The trail. Ordered, with a spine, like the exchange page's event list — the
   same visual grammar for the same idea, one thing after another in time.
   Drawn on the row rather than as a pseudo-element on the container, so the
   line cannot hang past the last item. */
.otrail { margin-top: var(--s5); display: grid; gap: 0; }
.otr {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3);
  padding-bottom: var(--s4); position: relative;
}
.otr:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 1px; background: var(--rule);
}
.otr__dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--ink-3); z-index: 1;
  font: var(--wt-semi) 10px/1 var(--font-mono); color: var(--ink-2);
}
.otr[data-basis="reported-intention"] .otr__dot,
.otr[data-basis="reported-question"]  .otr__dot { border-color: var(--ink-loss); color: var(--ink-loss); }
.otr[data-basis="proposed-by-us"]     .otr__dot { border-color: var(--mark-idea); color: var(--mark-idea); border-style: dashed; }
.otr__card { min-width: 0; }
/* Inside the trail the card is flush rather than boxed — the spine is already
   carrying the grouping, and a second border around each step made three
   related moments read as three unrelated ones. */
.otr .ocard { border: 0; background: transparent; padding: 0; gap: 6px; }
.otr .ocard__name { font-size: var(--fs-lede); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 20; }
.otr .ocard__body { font-size: var(--fs-fine); }
.otr__edge {
  margin: var(--s2) 0 0; font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono);
  color: var(--ink-3);
}

/* ── per-step sources ────────────────────────────────────────────────────
   The strips that used to sit on every card, once per source per step. */
.osrcs { display: grid; gap: var(--s2); }

/* ── public roles ────────────────────────────────────────────────────── */

.roles { display: grid; gap: var(--s3); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.role {
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--rule); background: var(--surface); min-width: 0;
}
.role__name { font-weight: var(--wt-semi); }
.role__role { color: var(--ink-2); font-size: var(--fs-fine); }
.role__src {
  margin-top: var(--s2); font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono);
  color: var(--ink-3); overflow-wrap: break-word;
}
.role__src .osrcline__url { color: var(--ink-3); }

/* ── lines not drawn ─────────────────────────────────────────────────── */

.notdrawn { display: grid; gap: var(--s4); margin-top: var(--s4); }
.nd { border-left: 2px solid var(--ink-loss); padding-left: var(--s4); }
.nd__edge {
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-loss);
  overflow-wrap: break-word;
}
.nd__edge s { text-decoration-thickness: 1px; }
.nd__why { margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--fs-ui); }

/* ── our reasoning lines ─────────────────────────────────────────────── */

.olinks { display: grid; gap: var(--s3); margin-top: var(--s4); }
.olink {
  display: grid; gap: 4px; padding: var(--s3) var(--s4);
  border: 1px dashed var(--mark-idea); border-radius: var(--r-md);
  background: var(--surface); min-width: 0;
}
.olink__from { font-weight: var(--wt-medium); overflow-wrap: break-word; }
.olink__pred {
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--mark-idea);
}
.olink__to { color: var(--ink-2); font-size: var(--fs-fine); overflow-wrap: break-word; }

/* The same component used for a SOURCED relation rather than one of ours:
   solid rule, neutral predicate. The dashed-and-huckleberry treatment is
   reserved for the proposal, here as everywhere else on the page — a sourced
   relation borrowing it would be the whole point of rule 1 lost in a reused
   class name. */
.olink--sourced { border-style: solid; border-color: var(--rule); }
.olink--sourced .olink__pred { color: var(--ink-3); }

/* ── sources ─────────────────────────────────────────────────────────── */

.srcs { display: grid; gap: var(--s4); margin-top: var(--s5); }
.osrc {
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--rule); min-width: 0;
}
.osrc__title { font-weight: var(--wt-semi); margin-bottom: var(--s2); overflow-wrap: break-word; }
.osrc__url {
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono);
  word-break: break-all; margin-bottom: var(--s2);
}
.osrc__dates { font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3); }
/* Short, attributed, and visibly a quotation. The excerpt is the one place on
   this page where somebody else's exact words appear. */
.osrc__quote {
  margin: var(--s3) 0 0; padding-left: var(--s4);
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5;
}
.osrc__kind { display: block; margin-top: 4px; font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3); }
.osrc__scope {
  margin: var(--s3) 0 0; font-size: var(--fs-fine); color: var(--ink-3); line-height: 1.5;
}

/* ── basis legend ────────────────────────────────────────────────────── */

.bases { display: grid; gap: var(--s3); margin-top: var(--s4); }
.base { display: grid; gap: 4px; }
.base__means { color: var(--ink-2); font-size: var(--fs-fine); line-height: 1.5; max-width: 70ch; }

/* ── limits ──────────────────────────────────────────────────────────── */

.limits { display: grid; gap: var(--s4); }
.limits .limit p { margin: 0; }

/* ── phone ───────────────────────────────────────────────────────────────
   Checked at 390px. The two things that overflow at that width if left alone
   are the raw source URLs (unbroken strings longer than the viewport) and
   the auto-fit card grids, which is why every grid's minmax floor is
   min(100%, …) rather than a bare pixel value. */

@media (max-width: 560px) {
  .ohead { padding-block: var(--s5); }
  .ocard { padding: var(--s4); }
  .opath { gap: var(--s2); }
  /* The figure's own padding comes down so the narrow drawing gets the
     width the label arithmetic in netSvg() was done for (~342px at 390). */
  .net-figure { padding: var(--s3) var(--s2); }
  .ostance { padding: var(--s3); }
  /* Tighter still on a phone: the cards are the page's mass (nine of them,
     each with its caution), so their padding and the trail's gaps come
     down before anything in them does. */
  .ocards--compact .ocard { padding: var(--s3); }
  .ocard__caution { margin-top: var(--s1); }
  .otr { padding-bottom: var(--s3); }
  .ostep__q { margin-bottom: var(--s3); }
}