/* How the Missal changed. The map is wide by nature, so it scrolls inside its
   own box and the page body never does.

   Everything this page shares with the law page — the station panel, the
   term-and-value list, the change card, the basis, the marker, the fold, the
   held text, the link-button — is in `shared/browser-core.css` now. What is
   below is the map, which only this page draws, and this page's departures.

   THE COLOUR BELOW IS NOT THE SECTION'S, AND THAT IS NOT A FALLBACK. Every
   other page's palette arrives from the site's layout; this block overrides
   `--section-accent` unconditionally, so published, the map and the panel
   rules are brown while the headings and links stay the green the site gives
   the history section. It has shipped that way and it is left alone here,
   because this is a refactor: choosing between the brown and the green is a
   design decision and it wants a maintainer, not a stylesheet cleanup. When it
   is made, the answer is one line — either delete this block or add
   `--section-ink` and its siblings beside it. */
.history-page {
  --section-accent: #7a5230;
  --section-line: #d9c9b6;
  --weak-accent: #a98d6f;
}

.map {
  margin: 0 0 0.6rem;
}

.map-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.map-scroll svg {
  display: block;
  max-width: none;
}

.track {
  stroke: var(--section-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* The track into a station whose act nobody has located is drawn lighter and
   thinner. It is a weaker claim about the descent and must read as one. */
.track-to-printed,
.track-to-unstated {
  stroke: var(--weak-accent);
  stroke-width: 4;
}

/* A descent through an edition this record does not carry is drawn broken.
   A solid line there would claim a continuity the record does not hold. */
.track-gap {
  stroke-dasharray: 10 9;
  opacity: 0.75;
}

.station {
  cursor: pointer;
}

/* Filled for `promulgated`, hollow for `printed`: the transit idiom, used for
   the one thing it fits, which is that the second is a weaker claim about
   evidence. It is not a minor stop. */
.station-mark {
  fill: var(--section-accent);
  stroke: var(--section-accent);
  stroke-width: 5;
}

.kind-printed .station-mark,
.kind-unstated .station-mark {
  fill: var(--panel, #fff);
  stroke: var(--weak-accent);
  stroke-dasharray: 5 4;
}

.station:hover .station-mark,
.station:focus .station-mark,
.station-selected .station-mark {
  stroke-width: 8;
}

.station-selected .station-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.station:focus {
  outline: none;
}

.station:focus .station-name {
  text-decoration: underline;
}

.station-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ink, #1b1b1b);
}

.kind-printed .station-name,
.kind-unstated .station-name {
  font-weight: 400;
  font-style: italic;
}

.station-year {
  font-family: var(--sans);
  font-size: 13px;
  text-anchor: middle;
  fill: var(--ink-soft, #5a5a5a);
}

.station-count {
  font-family: var(--sans);
  font-size: 11px;
  text-anchor: middle;
  fill: var(--ink-faint, #86786a);
}

/* The second line is drawn in the same ink but dashed, so a reader can see it
   is a different line without being told one matters more. */
.line-exempt-uses .station-mark {
  stroke-dasharray: 4 3;
}

/* --- The legend -------------------------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.legend-mark {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 3px solid var(--section-accent);
  background: var(--section-accent);
  flex: none;
}

.legend-printed .legend-mark,
.legend-unstated .legend-mark {
  background: var(--panel, #fff);
  border-color: var(--weak-accent);
  border-style: dashed;
}

.legend-gap .legend-mark {
  width: 1.6rem;
  height: 0;
  border-radius: 0;
  border: 0;
  border-top: 4px dashed var(--section-accent);
}

/* --- The station panel -------------------------------------------------
   The panel, its title, its note and the term-and-value list are shared. Only
   this page puts a select in the control line. */

.panel-controls select {
  margin-left: 0.5rem;
  max-width: min(100%, 34rem);
}

.detail-departures,
.detail-gap,
.detail-weak {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* A gap in the descent, and a claim the record makes weakly. Both are drawn
   with the weak rule rather than with a colour alone, so the distinction
   survives being printed in black and white. */
.detail-gap,
.detail-weak {
  border-left: 3px solid var(--weak-accent);
  padding-left: 0.7rem;
}

/* One block inside the panel. The law page calls the same thing
   `.panel-block`; its heading is shared under both names. */
.detail-section {
  margin-top: 1.4rem;
}

/* --- One change ---------------------------------------------------------
   The card, its head and its kind-pill are shared. What is this page's is
   which kinds of change it can report, and the colour of each. */

.change-gone { border-left-color: #9d3a2f; }
.change-entered { border-left-color: #3f6b46; }
.change-changed { border-left-color: #7a5230; }
.change-unestablished { border-left-color: #6a6a6a; }

.change-where {
  margin: 0 0 0.55rem;
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  color: var(--ink-faint);
  word-break: break-word;
}

/* ONE NAME, TWO COMPONENTS. `.field` in `shared/browser-core.css` is a control
   in the bar above a reading page: a label over a select, sized for a thumb.
   `.field` here is a line of one change — a name, an old value, an arrow and a
   new value — and this page has no control bar at all. The two have nothing in
   common but the word, and this file re-declares `display` and `gap` over the
   shared rule, so what renders is this one and the leftovers
   (`flex-direction`, `flex`, `min-width`) are inert on a grid that is not a
   flex item.
   It renders correctly by luck rather than by construction, and the fix is a
   rename — `.change-field` — which is a change to `history.js` and so is not
   made here. Said out loud rather than left for the next reader to rediscover:
   `.field-name`, `.field-pair`, `.field-arrow` and `.field-before` below all
   belong to THIS component and none of them to the control bar. */
.field {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.3rem 0.7rem;
  margin: 0.35rem 0;
  align-items: baseline;
}

.field-name {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.field-pair-long {
  grid-template-columns: 1fr;
}

.field-pair-long .field-arrow {
  text-align: left;
}

.field-arrow {
  color: var(--ink-faint);
}

.field-before .value {
  text-decoration: line-through;
  text-decoration-color: rgba(157, 58, 47, 0.55);
}

/* A value the record does not carry is never rendered as blank. A blank there
   would say the missal held nothing; this says nobody read it. */
.value-absent {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-faint);
  text-decoration: none !important;
}

.standing {
  margin: 0.2rem 0 0;
}

.standing-incipit,
.held-incipit {
  margin: 0;
  font-family: var(--serif);
}

.standing-text,
.held-text {
  margin: 0.3rem 0 0;
  font-family: var(--serif);
  white-space: pre-wrap;
}

/* --- The state as it stood ---------------------------------------------
   The fold and the held text are shared; the Mass they are held under is this
   page's, because only the missal has Masses. */

.mass {
  margin: 0 0 1.4rem;
}

.mass-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.mass-meta {
  margin: 0.1rem 0 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* A prayer's name is a slot name and runs short, so it is set a shade smaller
   than the law page's citation. The rest of the head is the shared rule. */
.held-name { font-size: 0.82rem; }

/* Which slot of the Mass held it, in the mono face: this is the record's own
   key, not a word of the prayer. */
.held-slot {
  font-family: var(--mono, monospace);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* --- Where the lines part ----------------------------------------------- */

.junction {
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--section-line);
  border-radius: 6px;
}

.junction-head {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: 1.05rem;
}

.junction-base {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
}

.junction-side {
  margin: 0.7rem 0 0;
}

.junction-side-title {
  margin: 0 0 0.25rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.junction-list {
  margin: 0;
  padding-left: 1.1rem;
}

.junction-list li {
  margin: 0.15rem 0;
}

.junction-count {
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* A change is a before and an after side by side. Under about 40rem there is
   no room for two columns, so the pair stacks and the arrow that pointed
   across the gap points down the page instead. */
@media (max-width: 40rem) {
  .field {
    grid-template-columns: 1fr;
  }
  .field-pair {
    grid-template-columns: 1fr;
  }
  .field-arrow {
    text-align: left;
  }
}