/* The Code, canon by canon.

   THIS FILE CARRIES NO COLOUR OF ITS OWN. The site names each reading page's
   section colour in one place — `BROWSER_SECTION_COLOURS` in `tools/public-alpha`
   — and every value below is derived from `--section-accent`, which that naming
   sets. A palette copied in here is a palette that has to be re-copied every
   time the site is retuned, and the copy is the one that goes stale.

   The one derived value this page needs is a weaker ink, for everything that is
   a weaker claim: a station with no act behind it, a canon whose words are not
   here, a note about what the record does not hold. It is mixed from the
   section's own accent rather than picked.

   This page and the history page draw the same record panel, and drew it
   twice. The panel, its title and note, the term-and-value list, the act card
   and its kind-pill, the basis, the marker, the fold, the held unit and the
   link-button are all in `shared/browser-core.css` now. What is below is the
   canon — which only this page shows — and this page's departures. */

.law-page {
  --weak-accent: color-mix(in srgb, var(--section-accent) 55%, var(--surface, #fbfaf7));
}

.field-wide { flex: 3 1 18rem; }
.field-action { display: flex; align-items: flex-end; }

.submit {
  padding: 0.42rem 1rem;
  border: 1px solid var(--section-accent);
  border-radius: 4px;
  background: var(--section-row);
  color: var(--section-ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.submit:hover,
.submit:focus {
  background: var(--section-pale);
}

/* --- The canon: the page's primary view -------------------------------- */

.canon {
  max-width: var(--measure);
  margin: 0 0 2rem;
}

.canon:focus { outline: none; }
.canon[aria-busy="true"] { opacity: 0.55; }

.canon-head {
  border-bottom: 2px solid var(--section-accent);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.canon-citation {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.15;
}

.canon-name {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.canon-line {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Where a canon sits, outermost first. It wraps rather than scrolling, because
   a Book › Part › Title › Chapter path is long and is prose, not a table. */
.canon-place {
  margin: 0.45rem 0 0;
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--ink-soft);
}

.canon-place-kind {
  margin-right: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.canon-place-sep { color: var(--ink-faint); }

.canon-place-none,
.choice-gone {
  font-style: italic;
  color: var(--ink-faint);
}

.canon-state {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}

/* --- One side of a canon, in its three states -------------------------- */

.canon-side { margin: 0.3rem 0 0; }

.canon-paragraph {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.2rem 0.6rem;
  margin: 0.35rem 0;
  align-items: baseline;
}

.canon-number {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.canon-text {
  margin: 0;
  font-family: var(--serif);
  white-space: pre-wrap;
}

/* Words that exist and may not be printed here. Deliberately NOT faint: a
   withholding is a statement the reader is meant to read, not a greyed-out
   absence to skim past, and a canon whose words are withheld is neither
   unchanged nor unimportant. */
.canon-withheld {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--section-accent);
  background: var(--section-wash);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink);
}

.canon-withheld strong { font-weight: 700; }

/* The same statement made about a responsum rather than about a canon, and
   drawn the same way for the same reason: a reader must not read a rights
   position as an absence. */
.interpretation-withheld {
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.55rem;
  border-left: 3px solid var(--section-accent);
  background: var(--section-wash);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink);
}

/* Words nobody here has read. A different claim from the one above, and drawn
   differently so the two can never be mistaken for each other. */
.canon-unread {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
}

.canon-edition { margin: 0 0 0.7rem; }

.canon-edition-name {
  margin: 0 0 0.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.canon-language {
  margin-left: 0.4rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Panels -------------------------------------------------------------
   The panel and its heads are shared. One block inside it is this page's only
   departure: the history page calls the same thing `.detail-section` and sets
   1.4rem, and the two names are one component that wants a rename in the
   markup before it can be one class. */

.panel-block { margin-top: 1.5rem; }

.block-subtitle {
  margin: 1rem 0 0.4rem;
  font-family: var(--serif);
  font-size: 1rem;
}

.weak {
  margin: 0.8rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--weak-accent);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- One act's touch on one canon, through time ------------------------
   The card, its head and its kind-pill are shared with the history page's
   change card. What is this page's is which kinds of touch it can report. */

.stop-gone { border-left-color: #9d3a2f; }
.stop-entered { border-left-color: #3f6b46; }
.stop-changed { border-left-color: var(--section-accent); }

.stop-meta {
  margin: 0 0 0.55rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.stop-fields {
  margin: 0.5rem 0 0;
  font-family: var(--mono, monospace);
  font-size: 0.74rem;
  color: var(--ink-faint);
}

/* Before and after side by side where there is room, and stacked where there
   is not — never truncated, because the point of the pair is that both sides
   are readable. */
.stop-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 0.5rem 0 0;
}

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

.stop-was { border-left: 2px solid var(--section-line); padding-left: 0.6rem; }
.stop-now { border-left: 2px solid var(--section-accent); padding-left: 0.6rem; }

/* --- A correspondence claim, with its source --------------------------- */

.claim {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--section-line);
  border-radius: 5px;
}

.claim-head {
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1rem;
}

.claim-note { margin: 0 0 0.3rem; font-size: 0.9rem; }

.claim-source {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* --- Looking up --------------------------------------------------------- */

.lookup-invite-lede {
  margin: 0;
  font-size: 1rem;
}

.lookup-choices .choice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--section-line);
}

.choice-line {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.choice-place {
  font-size: 0.83rem;
  color: var(--ink-soft);
}

/* --- The structure of the Code ------------------------------------------ */

.structure-line { margin-top: 1rem; }

.division {
  margin: 0.25rem 0 0.25rem 0.2rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--section-line);
}

.division-summary {
  cursor: pointer;
  padding: 0.18rem 0;
  font-family: var(--sans);
  font-size: 0.88rem;
}

.division-kind {
  margin-right: 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.division-count {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.division-canons {
  margin: 0.3rem 0 0.5rem;
  padding-left: 1.1rem;
}

.division-canons li {
  margin: 0.12rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

/* --- The acts ----------------------------------------------------------- */

.acts-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.act {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--section-line);
  border-left: 4px solid var(--section-accent);
  border-radius: 5px;
}

/* A station with no act behind it is drawn as the weaker claim it is: the same
   card, in the weaker ink, with a dashed edge. Never a smaller card — the
   difference is about evidence, not about importance. */
.act-printed,
.act-unstated {
  border-left-style: dashed;
  border-left-color: var(--weak-accent);
}

.act-selected {
  background: var(--section-row);
  border-left-width: 7px;
}

.act-open {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--section-ink);
  font-family: var(--serif);
  font-size: 1.03rem;
  text-align: left;
  cursor: pointer;
}

.act-open:hover,
.act-open:focus { text-decoration: underline; text-underline-offset: 3px; }

.act-meta {
  margin: 0.15rem 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* The extent of an act, at a glance, in words rather than in a bar: "1 canon
   altered" and "412 canons altered" are already comparable, and a bar would
   invite a reader to compare two acts by area when what differs between them is
   what they did. */
.act-extent {
  margin: 0.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* --- What one act reached ----------------------------------------------- */

.touched-group { margin-top: 0.8rem; }

.touched {
  margin: 0.25rem 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--section-line);
  border-radius: 4px;
}

.touched-summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.touched-citation {
  font-family: var(--serif);
  font-size: 1rem;
}

.touched-division { margin: 0 0 0.6rem; }

/* --- The law as it stood ------------------------------------------------
   The fold and the held unit are shared; the division they hang under is this
   page's, because only the Code is divided into books and titles. */

.held-division { margin: 0 0 1.4rem; }

/* A unit is named by its citation, which runs longer than the missal's slot
   names, so it takes the larger of the two sizes. The rest of the head is the
   shared rule. */
.held-name { font-size: 0.85rem; }

/* The unit's own name beside its citation: words of the Code, so the serif. */
.held-slot {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* --- The bodies of law -------------------------------------------------- */

.body-of-law {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--section-line);
  border-radius: 6px;
}

.body-note {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* --- What the record claims of itself ----------------------------------- */

.extent {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* The link-button is shared. In a list it is one row among many rather than an
   action after a paragraph, so it gives up the space above it. */
.division-canons .link-button,
.lookup-choices .link-button { margin-top: 0; }

@media (max-width: 40rem) {
  .stop-pair { grid-template-columns: 1fr; }
  .canon-paragraph { grid-template-columns: 1fr; }
  .canon-citation { font-size: 1.4rem; }
}