/* Code of Ethics: generated from ../bocj/public/app.css by tools/sync.mjs (olive). Edit that file, not this one. */
:root {
  color-scheme: dark;
  --bg: #0f100d;
  --surface: #151612;
  --surface-2: #1c1e19;
  --surface-3: #262921;
  --line: #34382c;
  --line-soft: #262920;
  --text: #e2e5dd;
  --text-2: #bfc4b6;
  --muted: #8d9184;
  --maroon: #333b24;       /* the cover */
  --seal: #3f4d24;
  --seal-2: #556731;
  --crimson: #a6c763;
  --crimson-dim: rgba(166, 199, 99, .35);
  --gold: #d8b98a;         /* the cover's frame lines */
  --notice: #e9a94f;
  --rule: #6c8e29;         /* the document's heavy section rules (#990000) */
  /* Punishment types, from the original document's #1c4587 (Class-E) and #990000 (Foundation Suspension),
     lightened to stay readable on the dark page. */
  --ce: #8bb0ec;  --ce-bg: rgba(28, 69, 135, .32);  --ce-line: rgba(139, 176, 236, .45);
  --fs: #bfe378;  --fs-bg: rgba(97, 138, 15, .3);     --fs-line: rgba(191, 227, 120, .45);

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --top-h: 3.5rem;
  --side-w: 19rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: calc(var(--top-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--text);
  font: 400 1rem/1.65 var(--sans);
  background:
    radial-gradient(ellipse 70% 40% at 60% -10%, rgba(81, 102, 38, .34), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #c4e386; }
a.ext::after { content: '↗'; font-size: .75em; margin-left: .15em; vertical-align: .15em; text-decoration: none; display: inline-block; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
::selection { background: var(--seal-2); color: #ffffff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--surface-3); color: var(--text); padding: .5rem .8rem; }
.skip:focus { left: .5rem; }
.kicker { font: 500 .75rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--crimson); margin: 0 0 .6rem; }

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  background: rgba(15, 16, 13, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--text); min-width: 0; }
.brand img { flex: none; }
.brand span { font: 500 .8125rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand b { color: var(--crimson); font-weight: 500; }
.brand .short { display: none; }
.top-meta { margin-left: auto; font: 400 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.menu {
  display: inline-flex; flex: none; align-items: center; gap: .55rem;
  font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px;
  padding: .55rem .7rem; cursor: pointer;
}
.menu span, .menu span::before, .menu span::after { display: block; width: 14px; height: 1.5px; background: currentColor; position: relative; }
.menu span::before, .menu span::after { content: ''; position: absolute; left: 0; }
.menu span::before { top: -4.5px; }
.menu span::after { top: 4.5px; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.outline {
  position: sticky; top: var(--top-h);
  height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--line-soft);
  background: rgba(18, 20, 16, .6);
  padding: 1.25rem .75rem 3rem 1rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.outline-head { padding: 0 .25rem .75rem; }
.outline-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.outline-bar .kicker { margin: 0; }
.outline-close {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: -.25rem;
  font: 400 1.35rem/1 var(--sans); color: var(--muted); background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.outline-close:hover { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.menu[aria-expanded="true"] { border-color: var(--crimson-dim); background: rgba(85, 103, 49, .25); }

/* Outline hidden on a wide screen: the book takes the full width. */
.outline-closed .layout { grid-template-columns: minmax(0, 1fr); }
.outline-closed .outline { display: none; }
.outline-closed .layout::before { left: 0; }
.find input {
  width: 100%; font: 400 .875rem/1.3 var(--sans); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .55rem .7rem;
}
.find input::placeholder { color: var(--muted); }
.find input:focus { outline: none; border-color: var(--crimson); }
.find-empty { font-size: .8125rem; color: var(--muted); margin: .6rem 0 0; }
.toc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 0; font-size: .75rem; color: var(--muted); }
.toc-legend .ptag:last-of-type { margin-left: .6rem; }

.toc, .toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem .5rem; border-radius: 3px;
  color: var(--text-2); text-decoration: none;
  border-left: 2px solid transparent;
}
.toc a:hover { color: var(--text); background: var(--surface-2); }
.toc a.active { color: var(--text); background: rgba(85, 103, 49, .28); border-left-color: var(--crimson); }
.toc-num { flex: none; font: 500 .75rem/1.4 var(--mono); color: var(--crimson); min-width: 1.6em; }
.toc-title { min-width: 0; }
.toc-2 { margin-top: .5rem; }
.toc-2 > a { font: 600 .9375rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.toc-3 > a { font: 400 .875rem/1.35 var(--sans); padding-left: 1.4rem; }
.toc-4 > a { font: 400 .8125rem/1.35 var(--sans); padding-left: 2.4rem; color: var(--muted); }
.toc-4 .toc-num { color: var(--text-2); min-width: 2.2em; }
.toc-2 > ol > .toc-4 > a { padding-left: 1.4rem; }
/* Codes are folded away unless their part is being read, or you are searching. */
.toc-3 > ol { display: none; }
.toc-3.open > ol, .outline.searching .toc-3 > ol { display: block; }
.outline.searching li[hidden] { display: none; }

.book { min-width: 0; width: 100%; padding: 2rem clamp(1rem, 4vw, 3.5rem) 4rem; max-width: 60rem; margin: 0 auto; }

/* ---------- Cover screen: the document's cover, alone on screen until the reader opens the book ---------- */
.intro { display: none; }
.intro-on body { overflow: hidden; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  padding: 3vh 1rem 2.5vh;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(81, 102, 38, .45), transparent 70%),
    rgba(9, 10, 8, .985);
  cursor: pointer;
  animation: intro-in .5s ease both;
}
.intro-cover {
  display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 4px;
  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(216, 185, 138, .25), 0 0 8rem rgba(103, 130, 50, .35);
  animation: cover-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
.intro-cover img { display: block; height: min(86vh, calc((100vw - 2rem) * 1.4137)); width: auto; border-radius: 4px; }
.intro-cover:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.intro-hint { margin: 0; font: 500 .75rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); animation: hint-in 1s .9s ease both; }
.intro-hint b { font-weight: 500; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.intro-hint span { display: inline-block; margin-left: .35rem; animation: nudge 1.8s 1.8s ease-in-out infinite; }
/* Leaving: the cover lifts up and fades while the book appears underneath. */
.intro-out .intro { animation: intro-out .6s ease forwards; pointer-events: none; }
.intro-out .intro-cover { animation: cover-out .6s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes intro-in { from { opacity: 0; } }
@keyframes cover-in { from { opacity: 0; transform: translateY(2.5vh) scale(.96); } }
@keyframes hint-in { from { opacity: 0; } }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@keyframes intro-out { to { opacity: 0; } }
@keyframes cover-out { to { opacity: 0; transform: translateY(-12vh) scale(.92); } }
@media (prefers-reduced-motion: reduce) {
  .intro-on .intro, .intro-cover, .intro-hint, .intro-hint b { font-weight: 500; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.intro-hint span { animation: none; }
}
.cover-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 1.6rem 0 0 !important; }
.cover-links a, .show-cover {
  font: 500 .6875rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.cover-links a:hover, .show-cover:hover { color: var(--text); }
.book:focus { outline: none; }

/* The title page (seal, title, facts), centred like the document's second page. */
.titlepage { text-align: center; padding: 2.5rem 0 1rem; }
.titlepage .cover-text { display: flex; flex-direction: column; align-items: center; }
.cover-seal { width: 8.5rem; height: 8.5rem; opacity: .92; margin-bottom: 1.5rem; }
h1 { font: 800 clamp(2.6rem, 7vw, 4.75rem)/.92 var(--display); text-transform: uppercase; margin: 0 0 1rem; letter-spacing: .005em; }
h1 span { display: block; color: var(--crimson); }
.lead { font-size: 1.0625rem; color: var(--text-2); margin: 0 0 1.75rem; max-width: 34rem; }
.cover-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin: 0; }
.cover-facts dt { font: 400 .6875rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cover-facts dd { margin: .15rem 0 0; font: 700 1.5rem/1.1 var(--display); color: var(--text); }

/* ---------- Headings ---------- */
.anchor { margin-left: .5rem; color: var(--muted); text-decoration: none; opacity: 0; font: 400 .8em/1 var(--mono); transition: opacity .15s; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { opacity: 1; }
/* The full-width ornamental divider is kept where the document has it, under the masthead and above the footer.
   Sections open with its short centre piece, then the title, and the introduction closes with a red rule. */
.book-section { padding-top: 4.5rem; }
.ornament { display: block; width: min(20rem, 70%); height: auto; margin: 0 auto 1.75rem; opacity: .85; }
.divider { display: block; width: 100%; height: auto; margin: 0 0 2.25rem; opacity: .9; }
.divider-flip { transform: scaleY(-1); }
.book-section > h2 {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin: 0; padding: 0 1rem 1rem; text-align: center;
}
.book-section > h2 .h-num { font: 500 .75rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.book-section > h2 .h-title { font: 800 clamp(1.75rem, 4vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--crimson); }
.book-section > h2 .anchor { position: absolute; right: 0; top: 1.5rem; }
.book-section > h2 + p { color: var(--text-2); font-size: 1.03rem; margin: 0 0 2rem; padding: 0 0 1.75rem; border-bottom: 3px solid var(--rule); text-align: justify; hyphens: auto; }

h3 {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 2.5rem 0 1rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font: 700 1.375rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em;
}
h3 .h-num {
  flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  font: 500 .875rem/1 var(--mono); color: var(--crimson); border: 1px solid var(--crimson-dim); border-radius: 3px;
}
.ptype h4 { display: flex; align-items: baseline; gap: .6rem; margin: 2rem 0 .6rem; font: 600 1.15rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.ptype h4 .h-num { font: 500 .875rem/1 var(--mono); color: var(--crimson); }

/* ---------- Code cards ---------- */
.code {
  margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
}
.code:target { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson-dim); }
.code h4 {
  display: flex; align-items: center; gap: .9rem; margin: 0; padding: .7rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  font: 600 1.0625rem/1.25 var(--cond); text-transform: uppercase; letter-spacing: .03em;
}
.code-no {
  flex: none; min-width: 3.4rem; font: 800 1.5rem/1 var(--display); color: var(--crimson);
  padding-right: .9rem; border-right: 1px solid var(--line);
}
.code-body { padding: .8rem 1.1rem .4rem; }
.code-body > p:first-child { margin-top: 0; color: var(--text-2); }
.book .code-body ol { padding-left: 1.6rem; list-style-type: lower-alpha; }   /* as in the document: a. → 1. */
.book .code-body ol ol { list-style-type: decimal; }
.code-body .callout { margin: .2rem 0 .8rem; }
.code-dur { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: .65rem 1.1rem; border-top: 1px dashed var(--line); background: rgba(63, 77, 36, .14); }
.dur { display: flex; align-items: baseline; gap: .6rem; }
.dur dt { font: 500 .6875rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dur dd { margin: 0; font: 600 .9375rem/1.3 var(--cond); color: var(--text); }
.dur-max dt { color: var(--notice); }
.dur dd.p-ce { color: var(--ce); font-weight: 500; }
.dur dd.p-fs { color: var(--fs); font-weight: 600; }

/* Punishment type: tag in the card header, coloured edge, and a legend before each list of codes. */
.ptag {
  display: inline-block; flex: none; font: 600 .6875rem/1 var(--mono); letter-spacing: .1em;
  padding: .3rem .4rem; border-radius: 3px; border: 1px solid; vertical-align: .1em;
}
.ptag-ce { color: var(--ce); background: var(--ce-bg); border-color: var(--ce-line); }
.ptag-fs { color: var(--fs); background: var(--fs-bg); border-color: var(--fs-line); }
.code h4 .ptag { margin-left: auto; }
.code h4 .ptag + .anchor { margin-left: .4rem; }
.code-ce { border-left: 3px solid var(--ce); }
.code-fs { border-left: 3px solid var(--fs); }
.code-ce .code-dur { background: rgba(28, 69, 135, .14); }
.code-fs .code-dur { background: rgba(97, 138, 15, .12); }
.plegend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem !important; font-size: .8125rem; color: var(--muted); }
.plegend .ptag:last-of-type { margin-left: .9rem; }
.ptype-ce h4 .h-num, .ptype-ce h4 .h-title { color: var(--ce); }
.ptype-fs h4 .h-num, .ptype-fs h4 .h-title { color: var(--fs); }
.toc-ce .toc-num { color: var(--ce) !important; }
.toc-fs .toc-num { color: var(--fs) !important; }

/* ---------- Body text ---------- */
.book p { margin: 0 0 .9rem; }
.book strong { color: #ffffff; font-weight: 600; }
.book ul, .book ol { margin: 0 0 1rem; padding-left: 1.6rem; }
.book li { margin: .3rem 0; }
.book li > p { margin: .3rem 0; }
.book ol { list-style-type: decimal; }
.book ol ol { list-style-type: lower-alpha; }
.book ol ol ol { list-style-type: lower-roman; }
.book ol ol ol ol { list-style-type: decimal; }
.book li::marker { color: var(--crimson); font-family: var(--mono); font-size: .875em; }
.book ul > li::marker { color: var(--crimson); }
.book li:target { background: rgba(85, 103, 49, .22); border-radius: 3px; }

.callout {
  margin: .8rem 0 1rem; padding: .75rem 1rem;
  border: 1px solid var(--crimson-dim); border-left: 3px solid var(--crimson); border-radius: 4px;
  background: rgba(85, 103, 49, .16);
}
.callout p { margin: 0; }
.callout p + p { margin-top: .5rem; }
.callout > p:first-child > strong:first-child { color: var(--crimson); font: 600 .8125rem/1 var(--mono); letter-spacing: .12em; }
.callout-notice { border-color: rgba(233, 169, 79, .35); border-left-color: var(--notice); background: rgba(233, 169, 79, .08); text-align: center; }
.callout-notice > p:first-child > strong:first-child { color: var(--notice); }

.figure { margin: 1.5rem 0; }
.figure img { max-width: 100%; height: auto; display: block; }
.figure figcaption { font-size: .8125rem; color: var(--muted); margin-top: .4rem; }

#signatories ~ ul { columns: 2 16rem; column-gap: 2rem; list-style: none; padding: 0; }
#signatories ~ ul li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
#signatories ~ p em { color: var(--muted); }

/* Footer: the document's page footer. */
.foot { margin-top: 4.5rem; }
.foot .divider { margin-bottom: 1.25rem; }
.foot-marks { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; }
.foot-raisa { width: min(16rem, 100%); height: auto; opacity: .85; }
.foot-law { width: auto; height: 3.95rem; opacity: .85; justify-self: center; }   /* by height: the stamps of the sites have captions of different widths */
.foot .foot-office { margin: 0; justify-self: end; text-align: right; font: 700 .875rem/1.2 var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.foot-office span { display: block; margin-top: .35rem; font: 400 .6875rem/1.4 var(--mono); letter-spacing: .12em; color: var(--muted); }
.foot .foot-top { margin: 2rem 0 0; text-align: center; font: 400 .6875rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* Masthead: the document's page header. */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; margin: 0 0 1.25rem; }
.mast-ow { width: min(17rem, 100%); height: auto; }
.mast-scp { width: min(15rem, 100%); height: auto; justify-self: end; }
.mast-qr { display: block; line-height: 0; border-radius: 3px; overflow: hidden; }
.mast-qr img { width: 4.75rem; height: auto; }
.titlepage .divider { margin-bottom: 3rem; }

/* The SCP emblem the document prints faintly behind every page. */
.layout::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  top: calc(var(--top-h) + 6vh); bottom: 6vh; left: var(--side-w); right: 0;
  background: url(/images/frame/watermark.png) center / contain no-repeat;
  opacity: .035;
}
body { position: relative; z-index: 0; }
.scrim { display: none; }

/* Wide screens: codes laid out like the document's tables, number and name on the left, text on the right. */
@media (min-width: 1240px) {
  .code { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); }
  .code h4 {
    grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: .55rem;
    padding: 1rem 1.1rem; border-bottom: 0; border-right: 1px solid var(--line);
  }
  .code-no { border-right: 0; padding: 0 0 .5rem; min-width: 0; font-size: 2rem; border-bottom: 1px solid var(--line); width: 100%; }
  .code h4 .ptag { margin-left: 0; }
  .code h4 .anchor { position: absolute; }
  .code { position: relative; }
  .code h4 .anchor { top: .7rem; right: .8rem; }
  .code-body { grid-column: 2; padding-top: 1rem; }
  .code-dur { grid-column: 2; }
}

/* ---------- Narrow screens: the outline becomes a drawer ---------- */
@media (max-width: 960px) {
  .layout::before { left: 0; }
  .layout { display: block; }
  .outline-closed .outline { display: block; }
  .top-meta { display: none; }
  .outline {
    position: fixed; z-index: 40; left: 0; top: var(--top-h);
    width: min(22rem, 88vw);
    background: #121410; border-right: 1px solid var(--line);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  body.nav-open .outline { transform: none; visibility: visible; transition: transform .25s ease; }
  body.nav-open .scrim { display: block; position: fixed; inset: var(--top-h) 0 0; z-index: 35; background: rgba(0, 0, 0, .55); }
  .book { margin: 0 auto; }
}
@media (max-width: 640px) {
  .top { padding: 0 1rem; gap: .75rem; }
  .brand .long { display: none; }
  .brand .short { display: inline; }
  .book { padding: 1.25rem 1rem 3rem; }
  .titlepage { padding: 2.5rem 0 2rem; }
  .cover-seal { width: 6rem; height: 6rem; }
  .book-section > h2 { padding: 1.1rem .25rem .8rem; }
  .book-section > h2 + p { text-align: left; }
  .masthead { grid-template-columns: 1fr auto; gap: .9rem; }
  .mast-qr { display: none; }
  .mast-ow { width: 100%; max-width: 11rem; }
  .mast-scp { width: 100%; max-width: 10rem; }
  .foot-marks { grid-template-columns: 1fr auto; }
  .foot-law { display: none; }
  .foot-raisa { width: 100%; max-width: 11rem; }
  .layout::before { left: 0; }
  .code h4 { gap: .7rem; padding: .6rem .8rem; font-size: 1rem; }
  .code-no { min-width: 2.9rem; font-size: 1.3rem; padding-right: .7rem; }
  .code-body { padding: .7rem .85rem .3rem; }
  .code-dur { padding: .6rem .85rem; }
  .book ol, .book ul { padding-left: 1.3rem; }
  .anchor { display: none; }
}

/* ---------- Print: paper colours, no navigation ---------- */
@media print {
  :root { --text: #111111; --text-2: #222222; --muted: #555555; --line: #bbbbbb; --line-soft: #dddddd; --crimson: #60890f; --gold: #415c0a; --notice: #8a5a00; }
  body { background: #ffffff; color: #111111; font-size: 10.5pt; }
  .top, .outline, .scrim, .anchor, .foot-top, .intro-hint, .cover-links { display: none !important; }
  .layout { display: block; }
  .book { max-width: none; padding: 0; }
  .intro { display: block !important; position: static !important; background: none !important; animation: none !important; page-break-after: always; }
  .intro-cover { box-shadow: none; width: 100%; animation: none !important; }
  .intro-cover img { width: 100%; height: auto; }
  .intro-on body { overflow: visible; }
  .titlepage { border: 0; page-break-after: always; padding-top: 30vh; }
  .ptag-ce, .dur dd.p-ce { color: #1c4587; background: none; border-color: #1c4587; }
  .ptag-fs, .dur dd.p-fs { color: #618a0f; background: none; border-color: #618a0f; }
  .cover-seal { filter: invert(1); width: 8rem; height: 8rem; }
  .book strong { color: #000000; }
  .book-section { page-break-before: always; padding-top: 0; }
  .book-section > h2 { --rule: #618a0f; }
  .book-section > h2 + p { --rule: #618a0f; }
  .masthead > img, .divider, .foot-marks img { filter: brightness(0); }
  .layout::before { display: none; }
  .code, .code h4, .code-dur, .callout { background: none !important; break-inside: avoid; }
  a { color: inherit; }
  a.ext::after { content: none; }
}

/* ======================================================================================================
   Login and editing
   ====================================================================================================== */
.top-account { display: flex; align-items: center; gap: .5rem; flex: none; }
.top-account form { margin: 0; }
.top-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .55rem .7rem; cursor: pointer;
}
.top-btn:hover { color: #ffffff; border-color: var(--crimson-dim); }
.top-btn.primary { background: var(--seal); border-color: var(--seal-2); color: #ffffff; }
.top-btn.primary:hover { background: var(--seal-2); }
.top-who { font: 400 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .top-who, .top-meta { display: none; }
  .top-account { margin-left: auto; gap: .35rem; }
  .top-btn { padding: .5rem .55rem; letter-spacing: .08em; }
}
@media (max-width: 460px) {
  .top-account form { display: none; }    /* log out stays available on the history page */
  .brand span { display: none; }
}

.version-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin: 0 0 1.5rem; padding: .8rem 1rem; border: 1px solid var(--crimson-dim); border-left: 3px solid var(--gold); border-radius: 4px;
  background: rgba(63, 77, 36, .22);
}
.version-banner p { margin: 0 !important; }
.version-banner.ok { border-left-color: var(--granted, #74c27a); background: rgba(90, 175, 100, .1); }
.version-banner.err { border-left-color: var(--crimson); background: rgba(165, 205, 85, .12); }
.vb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vb-actions form { margin: 0; }

/* Plain pages (history, messages). */
.plain-main { width: 100%; max-width: 70rem; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.plain-h1 { font: 800 clamp(2.2rem, 5vw, 3.25rem)/.95 var(--display); text-transform: uppercase; margin: 0 0 1.25rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .875em; }
table.history td, table.history th { white-space: nowrap; }
table.history td:nth-child(4) { white-space: normal; min-width: 14rem; }
table.history tr.current td { background: rgba(28, 69, 135, .12); }

/* ---------- Editor ---------- */
body.editing { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ed-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line-soft); background: rgba(18, 20, 16, .85);
}
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.ed-tools button {
  font: 500 .75rem/1 var(--mono); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: .45rem .55rem; cursor: pointer; min-width: 2rem;
}
.ed-tools button:hover { color: var(--text); border-color: var(--crimson-dim); }
.ed-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 .25rem; }
.ed-help { font: 400 .75rem/1 var(--mono); color: var(--muted); margin-left: .4rem; }
.ed-save { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.ed-note input {
  width: min(22rem, 70vw); font: 400 .875rem/1.3 var(--sans); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .5rem .65rem;
}
.ed-note input:focus { outline: none; border-color: var(--crimson); }
.ed-check { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--text-2); cursor: pointer; }
.editor > .version-banner { margin: .75rem 1rem 0; }
.ed-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ed-source { display: block; min-height: 0; border-right: 1px solid var(--line-soft); }
.ed-source textarea {
  display: block; width: 100%; height: 100%; resize: none; border: 0; outline: none;
  padding: 1.25rem 1.25rem 4rem; tab-size: 4;
  font: 400 .875rem/1.65 var(--mono); color: var(--text); background: #0c0d0b;
}
.ed-preview { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.ed-status { position: sticky; top: 0; z-index: 2; }
.ed-problems { list-style: none; margin: 0; padding: 0; }
.ed-problems li { margin: 0; padding: .5rem 1rem; font-size: .8125rem; color: var(--notice); background: rgba(40, 30, 20, .95); border-bottom: 1px solid rgba(233, 169, 79, .25); }
.ed-problems li.err { color: #e3f7bb; background: rgba(45, 56, 24, .97); border-bottom-color: var(--crimson-dim); }
.book.preview { max-width: none; padding: 0 1.75rem 4rem; }
.book.preview .book-section:first-child { padding-top: 2rem; }
.ed-helpbox { display: none; }
.ed-helpbox:target {
  display: block; position: fixed; z-index: 60; inset: auto 1rem 1rem auto; width: min(46rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
  padding: 1rem 1.25rem; background: #151612; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .6);
}
.ed-helphead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.ed-helpbox h2 { font: 700 1.2rem/1 var(--display); text-transform: uppercase; margin: 0; }
.ed-helpbox h3 { font: 600 .875rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .4rem; color: var(--crimson); }
.ed-helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.ed-helpbox ul { margin: 0; padding-left: 1.1rem; font-size: .8125rem; color: var(--text-2); }
.ed-helpbox li { margin: .3rem 0; }
.ed-helpbox code { font: 400 .78rem/1.4 var(--mono); color: var(--text); background: var(--surface-2); padding: .05rem .25rem; border-radius: 2px; }
@media (max-width: 900px) {
  body.editing { height: auto; overflow: visible; display: block; }
  .ed-panes { grid-template-columns: 1fr; }
  .ed-source { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .ed-source textarea { height: 60vh; }
  .ed-preview { overflow: visible; }
  .ed-helpgrid { grid-template-columns: 1fr; }
}

/* ======================================================================================================
   Everything else Markdown can produce
   ====================================================================================================== */
.book .h-plain { display: flex; align-items: baseline; gap: .5rem; }
.book h5, .book h6 { font: 600 1rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .04em; margin: 1.5rem 0 .5rem; color: var(--text-2); }
.book h6 { font-size: .875rem; color: var(--muted); }
.book blockquote { margin: 1rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--line); color: var(--text-2); }
.book hr { border: 0; height: 1px; margin: 2rem 0; background: linear-gradient(90deg, transparent, var(--crimson-dim), transparent); }
.book del { color: var(--muted); }
.book code { font: 400 .875em/1.4 var(--mono); background: var(--surface-2); padding: .1rem .3rem; border-radius: 3px; }
.book pre { margin: 1rem 0; padding: .9rem 1rem; overflow-x: auto; background: #0c0d0b; border: 1px solid var(--line); border-radius: 4px; }
.book pre code { background: none; padding: 0; font-size: .8125rem; line-height: 1.55; }
.book li > input[type="checkbox"] { margin: 0 .5rem 0 0; accent-color: var(--crimson); vertical-align: -.1em; }
.book ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: .25rem; }
.table-wrap { margin: 1rem 0 1.25rem; overflow-x: auto; }
.book table, table.history { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.book th, .book td, table.history th, table.history td { border: 1px solid var(--line); padding: .55rem .75rem; text-align: left; vertical-align: top; }
.book th, table.history th { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); }
.book td.al-center, .book th.al-center { text-align: center; }
.book td.al-right, .book th.al-right { text-align: right; }
@media print {
  .top-account, .version-banner { display: none !important; }
  .book th, .book td { border-color: #999999; background: none; }
  .book pre { background: none; }
}

/* ---------- Footer: VANGUARD.AIC-SCPF (the same on every SCPF Administration site) ---------- */
.foot-vanguard {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.foot-vanguard p { margin: 0 !important; font: 500 .8125rem/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--text); }
.foot-vanguard p span { color: #93ab4e; }
.iris { flex: none; overflow: visible; }
.iris-orbit { opacity: .55; transform-origin: 50px 50px; animation: iris-spin 60s linear infinite; }
.iris-blades { transform-origin: 50px 50px; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.foot-vanguard:hover .iris-blades { transform: rotate(60deg); }
@keyframes iris-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iris-blades { transition: none; } .iris-orbit { animation: none; } }
@media print { .foot-vanguard p { color: #111111; } }

/* ---------- Editor: Live / Markdown ---------- */
.ed-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ed-mode button {
  font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  color: var(--muted); background: var(--surface); border: 0; padding: .55rem .75rem;
}
.ed-mode button + button { border-left: 1px solid var(--line); }
.ed-mode button[aria-pressed="true"] { color: #ffffff; background: var(--seal); }
.ed-bar { justify-content: flex-start; }
.ed-save { margin-left: auto; }
.editor > .ed-status { flex: none; }
.ed-status:empty, .ed-status .ed-problems:empty { display: none; }
.ed-panes[data-mode="live"] { grid-template-columns: minmax(0, 1fr); }
.ed-panes[data-mode="live"] .ed-source, .ed-panes[data-mode="live"] .ed-preview { display: none; }
.ed-panes[data-mode="markdown"] .ed-live { display: none; }
.ed-live { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.book.live { max-width: 60rem; margin: 0 auto; padding: .5rem clamp(1rem, 4vw, 3rem) 6rem; outline: none; caret-color: var(--gold); }
.book.live .book-section:first-child { padding-top: 2rem; }
.book.live [contenteditable="false"] { user-select: none; }
.book.live .anchor { opacity: .35; }   /* in the editor: click to change the link address */
.book.live p:hover, .book.live li:hover, .book.live h2:hover, .book.live h3:hover, .book.live h4:hover { box-shadow: -.6rem 0 0 -0.45rem var(--crimson-dim); }
.book.live :focus-within > p:focus-within { box-shadow: none; }
.book.live a { cursor: text; }
@media (max-width: 900px) {
  .ed-save { margin-left: 0; }
  .ed-live { overflow: visible; }
}

/* ---------- Code of Ethics: parts (I., II., …) and clauses (§1, §2, …) ---------- */
h3[data-kind="clause"] .h-num { width: auto; min-width: 2.25rem; padding: 0 .4rem; }

/* ---------- Text formatting: ++underline++, ==highlight==, [text]{.colour} ---------- */
.book u { text-decoration-thickness: .08em; text-underline-offset: .18em; }
.book mark, .ed-mark { color: inherit; background: var(--highlight, rgba(227, 196, 107, .26)); padding: 0 .12em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* keep-colours: the text colours stay the same on every site's theme */
.tc-red { color: #f07178; }
.tc-orange { color: #f2a65e; }
.tc-gold { color: #e3c46b; }
.tc-green { color: #8fd18f; }
.tc-olive { color: #b1ca6b; }
.tc-blue { color: #82aaff; }
.tc-purple { color: #c792ea; }
.tc-grey { color: #9aa0a6; }
/* end-keep-colours */
@media print {
  .tc-red { color: #6f9e12; } .tc-orange { color: #699511; } .tc-gold { color: #7a5c00; } .tc-green { color: #1b6e20; }
  .tc-olive { color: #4f5f1f; } .tc-blue { color: #1c4587; } .tc-purple { color: #5b2a86; } .tc-grey { color: #555555; }
  .book mark { background: #fff2a8; }
}

/* ---------- Editor: colour list, title page fields ---------- */
.ed-colour select {
  font: 500 .75rem/1 var(--mono); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: .4rem .45rem; cursor: pointer; accent-color: var(--crimson);
}
.ed-colour select:hover, .ed-colour select:focus-visible { color: var(--text); border-color: var(--crimson-dim); }
.ed-colour option { background: var(--surface-2); }
.ed-fm { margin: 1rem auto 0; max-width: 54rem; padding: 0 1.25rem; }
.ed-fm summary { cursor: pointer; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .4rem 0; }
.ed-fm summary:hover { color: var(--text-2); }
.ed-fm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .75rem; padding: .6rem 0 1rem; border-bottom: 1px solid var(--line-soft); }
.ed-fm-field { display: flex; flex-direction: column; gap: .3rem; font-size: .75rem; color: var(--muted); }
.ed-fm-field.wide { grid-column: 1 / -1; }
.ed-fm-field input {
  font: 400 .875rem/1.3 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .45rem .6rem;
}
.ed-fm-field input:focus { outline: none; border-color: var(--crimson); }
@media (max-width: 40rem) { .ed-fm-grid { grid-template-columns: minmax(0, 1fr); } }
.ptag-current { color: var(--crimson); background: var(--crimson-dim); border-color: var(--crimson-dim); }
.live a.anchor { cursor: pointer; }