/* Competition Package — screen styles.
   Structure follows the HeliStorm rulebook vocabulary (cover, letter, toc rail,
   section head, rule cards, rubric cards, catalog, criteria) on LiveJudge tokens.
   The two programs differ only in the accent block below. */

:root {
  --ink: #17181A;
  --ink-soft: #5C5E63;
  --muted: #6B6B70;
  --page-bg: #FAF9F6;
  --card-bg: #FFFFFF;
  --card-border: #EBE7DE;
  --chip-bg: #F1EFE9;
  --panel: #26282B;

  --pill-blue: #CFE6FB;  --pill-blue-ink: #1D5E90;
  --pill-red: #FBD9D2;   --pill-red-ink: #A93A22;
  --pill-amber: #FBEDCB; --pill-amber-ink: #8A5A0E;
  --pill-pink: #FBD6E2;  --pill-pink-ink: #A83060;
  --pill-green: #D6F0D2; --pill-green-ink: #2C7A31;

  --maxw: 860px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

/* Serif display type, matching the council site: this is a document of record, not a landing page. */
.cover__title, .section-title, .ref-card__title, .toc__head, .table-head,
.rubric-card__name, .criterion__title, .rule-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.005em;
}

/* One brand for both standards, taken from the council logo. The toggle changes the
   content, not the chrome: a standards body does not change color mid-document. */
:root {
  --accent: #C49D2A;          /* brand gold */
  --accent-solid: #022545;    /* brand navy */
  --accent-soft: rgba(196, 157, 42, .16);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page-bg); color: var(--ink);
  font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased;
}

/* ── top nav ── */
.topnav {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px;
  padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; z-index: 10;
}
.topnav__brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.topnav__mark {
  height: 28px; padding: 0 8px; border-radius: 8px; background: var(--accent-solid); color: #fff;
  font-weight: 850; font-size: 11.5px; letter-spacing: .02em; display: grid; place-items: center;
}
.topnav__logo { height: 34px; width: auto; display: block; }
.topnav__glyph { height: 26px; width: auto; display: none; }
.topnav__wordmark { font-weight: 850; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.topnav__wordmark span { color: var(--accent-solid); }
.topnav__pkg { font-weight: 700; color: var(--muted); white-space: nowrap; font-size: 14px; }

.topnav__switch {
  margin-left: auto; display: inline-flex; gap: 3px; padding: 3px;
  background: var(--chip-bg); border-radius: 999px; border: 1px solid var(--card-border);
}
.swatch-btn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.swatch-btn:hover { color: var(--ink); }
.swatch-btn.is-on { background: #fff; color: var(--accent-solid); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.topnav__links { order: 3; width: 100%; display: flex; align-items: center; gap: 18px; padding-top: 8px; border-top: 1px solid var(--card-border); }
.topnav__links a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.topnav__links a:hover { color: var(--accent-solid); }
.topnav__links a.is-here { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.topnav__up { padding-right: 18px; border-right: 1px solid var(--card-border); }
.topnav__up::before { content: "\2039\00a0"; font-weight: 800; }
.topnav__print, .topnav__links a.topnav__print {
  margin-left: auto; background: var(--accent-solid); color: #fff; font-weight: 700;
  padding: 8px 14px; border-radius: 5px; font-size: 13px; box-shadow: none;
}
.topnav__links a.topnav__print:hover { color: #fff; opacity: .9; }
/* Only ever rendered for a signed-in editor, so it reads as a tool, not a reader control. */
.topnav__edit, .topnav__links a.topnav__edit {
  padding: 6px 12px; border-radius: 5px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--accent); color: var(--accent-solid); background: #fff;
}
.topnav__links a.topnav__edit:hover { background: var(--accent); color: #fff; }

@media (max-width: 720px) {
  .topnav { padding: 10px 16px; }
  .topnav__pkg { display: none; }
  .topnav__switch { margin-left: auto; }
  .swatch-btn { font-size: 12px; padding: 6px 11px; }
  .topnav__links { gap: 12px; padding-top: 10px; }
  .topnav__links a { font-size: 13px; }
}
/* the full lockup is wide: below this the mark carries the brand on its own */
@media (max-width: 720px) {
  .topnav__logo { display: none; }
  .topnav__glyph { display: block; }
}
/* At phone widths the link row is 35px too wide for a 390pt screen: tighten the gaps,
   drop the divider on the back link, and shorten the print label. */
@media (max-width: 560px) {
  .topnav__links { gap: 8px; }
  .topnav__up { padding-right: 0; border-right: 0; }
  .topnav__print-long { display: none; }
  .topnav__print, .topnav__links a.topnav__print { padding: 7px 11px; }
}
/* smallest phones still in the wild */
@media (max-width: 380px) {
  .topnav__links { gap: 6px; }
  .topnav__links a { font-size: 12.5px; }
}
/* the switch needs a row of its own before the brand starts squeezing it */
@media (max-width: 520px) {
  .topnav__switch { order: 2; width: 100%; margin-left: 0; justify-content: center; }
  .swatch-btn { flex: 1; text-align: center; }
}

.page { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 80px; }

/* ── document masthead: the standard now opens like the council site publishes it ── */
.docmast {
  position: relative; overflow: hidden; color: #F4F2ED; padding: 52px 0 56px; margin-bottom: 4px;
  background: linear-gradient(178deg, #032A50 0%, #022545 60%, #011C36 100%);
}
.docmast::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(115deg, rgba(244,242,237,.05) 0 1px, transparent 1px 26px);
}
.docmast__in { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.docmast--wide .docmast__in { max-width: 1120px; }
.docmast__kicker { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #C49D2A; }
.docmast h1 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.docmast__sub { margin: 0 0 18px; font-size: 17px; font-weight: 600; color: rgba(244,242,237,.8); }
.docmast__lede { margin: 0; font-size: 15.5px; color: rgba(244,242,237,.7); max-width: 66ch; }
.docmast__status {
  display: inline-flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 11px 18px;
  border: 1px solid rgba(244,242,237,.18); border-radius: 6px; background: rgba(244,242,237,.05);
  font-size: 12px; color: rgba(244,242,237,.7);
}
.docmast__status b { color: #F4F2ED; font-weight: 700; }
.docmast__status .is-live { color: #C49D2A; }
@media (max-width: 640px) { .docmast { padding: 38px 0 42px; } }

/* ── cover ── */
.cover { text-align: center; padding: 72px 0 36px; }
.cover__kicker { color: var(--accent-solid); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: 13px; margin: 0; }
.cover__title { font-size: clamp(34px, 8vw, 50px); font-weight: 850; margin: 10px 0 4px; letter-spacing: -.025em; line-height: 1.03; }
.cover__sub { margin: 0 0 8px; font-size: clamp(16px, 3.5vw, 20px); font-weight: 700; color: var(--ink-soft); }
.cover__version { color: var(--muted); margin: 0; font-size: 14px; }
.cover__status {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 0;
  padding: 10px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: #fff;
  font-size: 12px; color: var(--muted);
}
.cover__status b { color: var(--ink); font-weight: 700; }
.cover__status .is-live { color: #1F7A3D; }

/* ── home: letter left, contents rail right ── */
.page:has(.home-grid) { max-width: 1120px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; column-gap: 30px; align-items: start; }
.home-grid .cover { grid-column: 1 / -1; }
.home-grid .letter { grid-column: 1; margin: 0; }
.toc--side { grid-column: 2; position: sticky; top: 128px; }
@media (max-width: 940px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-grid .cover, .home-grid .letter, .toc--side { grid-column: 1; }
  .toc--side { position: static; margin-top: 24px; }
}

.toc { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 24px 26px; }
.toc__head { margin: 0 0 16px; font-size: 18px; }
.toc__bars { display: flex; flex-direction: column; gap: 10px; }
.toc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--chip-bg); border-radius: 6px; padding: 15px 18px;
  text-decoration: none; color: var(--ink); font-weight: 700;
  transition: background .15s ease, transform .05s ease;
}
.toc-bar:hover { background: #E7E3DA; }
.toc-bar:active { transform: scale(.995); }
.toc-bar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toc-bar__kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toc-bar__title { font-size: 14px; }
.toc-bar__arrow { flex: 0 0 auto; color: var(--muted); }
.toc-bar:hover .toc-bar__arrow { color: var(--accent-solid); }
.toc__swap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--card-border); font-size: 12.5px; color: var(--muted); }
.toc__swap strong { color: var(--ink); }

/* ── intro letter ── */
.letter { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 32px 36px; margin: 12px 0 32px; }
.letter__eyebrow { color: var(--accent-solid); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px; }
.letter p { margin: 0 0 16px; }
.letter__salutation { font-weight: 700; }
.letter__signoff { margin-top: 22px; }
.letter__name { font-weight: 700; margin-top: 4px; }
.letter__name .letter__org { font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .letter { padding: 24px 20px; } }

/* ── section header ── */
.section-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--card-border); margin: 36px 0 24px; }
.section-badge {
  flex: 0 0 auto; width: 74px; height: 56px; border-radius: 6px; background: var(--accent-solid);
  color: #fff; font-weight: 850; font-size: 24px; display: grid; place-items: center; letter-spacing: -.02em;
}
.section-eyebrow { margin: 2px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.section-title { margin: 0 0 6px; font-size: 29px; font-weight: 850; letter-spacing: -.02em; line-height: 1.12; }
.section-subtitle { margin: 0; color: var(--muted); max-width: 62ch; font-size: 14.5px; }

/* ── rules accordion ── */
.accordion-hint { color: var(--muted); font-size: 14px; margin: 8px 0 20px; }
.rule-accordion { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; margin: 12px 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); overflow: hidden; }
.rule-accordion > summary.section-head { margin: 0; padding: 18px 20px; border-bottom: 0; align-items: center; cursor: pointer; list-style: none; }
.rule-accordion > summary.section-head::-webkit-details-marker { display: none; }
.rule-accordion > summary.section-head:hover { background: #FBFAF7; }
.section-head--toggle .section-head__text { flex: 1; min-width: 0; }
.section-chevron { flex: 0 0 auto; color: var(--muted); transition: transform .2s ease; }
.rule-accordion[open] > summary .section-chevron { transform: rotate(180deg); }
.rule-accordion[open] > summary .section-title { color: var(--accent-solid); }
.accordion-body { padding: 22px 20px; border-top: 1px solid var(--card-border); background: var(--page-bg); }
@media (max-width: 600px) {
  .rule-accordion > summary.section-head { padding: 14px; gap: 12px; }
  .section-badge { width: 58px; height: 46px; font-size: 19px; }
  .section-title { font-size: 22px; }
  .accordion-body { padding: 16px 14px; }
}

/* ── rule cards ── */
.rule-list { display: flex; flex-direction: column; gap: 14px; }
.rule-card { display: flex; gap: 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; padding: 18px 20px; }
.rule-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 4px; background: var(--chip-bg); color: #4a4a4d; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.rule-body { min-width: 0; }
.rule-title { margin: 2px 0 6px; font-size: 17px; font-weight: 800; }
.rule-text { margin: 0; color: #2C2C2E; font-size: 15px; }

.pill { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.pill--blue { background: var(--pill-blue); color: var(--pill-blue-ink); }
.pill--red { background: var(--pill-red); color: var(--pill-red-ink); }
.pill--amber { background: var(--pill-amber); color: var(--pill-amber-ink); }
.pill--pink { background: var(--pill-pink); color: var(--pill-pink-ink); }
.pill--green { background: var(--pill-green); color: var(--pill-green-ink); }

/* ── 4.1 rubric ── */
.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.legend .factor__type { margin-left: 6px; }
.legend .factor__type:first-child { margin-left: 0; }
.rubric-class { margin: 22px 0 10px; }
.rubric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rubric-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 20px; }
.rubric-card__name { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.rubric-card__desc { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.rubric-card__label { margin: 16px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.rubric-protocol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rubric-protocol div { border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rubric-protocol span { font-size: 10px; color: var(--muted); }
.rubric-protocol strong { font-size: 12.5px; }
.factor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.factor { display: flex; align-items: center; gap: 10px; border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; }
.factor__type { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.factor__type--m { background: #2E7D3C; }
.factor__type--f { background: #3A86C8; }
.factor__name { flex: 1; font-size: 13px; font-weight: 600; min-width: 0; }
.factor__weight { flex: 0 0 auto; color: var(--muted); font-weight: 700; font-size: 13px; }

/* ── 4.3 criteria ── */
.criteria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.criterion { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; }
.criterion__title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.criterion__body { margin: 0 0 16px; font-size: 13px; color: #2C2C2E; }
.criterion__scope { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) { .criteria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .rubric-grid, .criteria-grid { grid-template-columns: 1fr; } }

/* By-Division compact charts */
.dv-wrap { display: flex; flex-direction: column; gap: 22px; }
.dv-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 20px 22px; }
.dv-name { margin: 0 0 4px; font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--accent-solid); }
.dv-blurb { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.dv-added { margin: 0 0 12px; font-size: 13px; }
.dv-sub { margin: 16px 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dv-note { font-weight: 500; text-transform: none; letter-spacing: 0; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dv-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--card-border); padding: 4px 8px; }
.dv-table td { border-bottom: 1px solid var(--card-border); padding: 7px 8px; vertical-align: top; }
.dv-el { font-weight: 700; }
.dv-wt { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; width: 44px; white-space: nowrap; }
.dv-mats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.dv-mats li { display: flex; align-items: baseline; gap: 8px; }
.dv-mats .pill { margin-top: 0; font-size: 10px; padding: 3px 9px; flex: 0 0 auto; }
.dv-note-line { margin: 12px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
@media (max-width: 680px) { .dv-el { white-space: normal; } }

/* ── Section 5: device frames with markup screens ── */
.lj-grid { display: grid; gap: 24px; margin-top: 8px; }
.lj-grid--phone { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.lj-grid--desktop { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
/* Frames stretch to the tallest screen in their row, so a long label never clips the CTA. */
.lj-shot { margin: 0; display: flex; flex-direction: column; }
.lj-shot .frame { flex: 1 1 auto; display: flex; }
.lj-shot figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }

.frame--phone { background: #111; border-radius: 26px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.frame--phone img { width: 100%; height: auto; display: block; border-radius: 18px; }
.frame--sheet { background: #fff; border: 1px solid var(--card-border); border-radius: 6px; padding: 10px; box-shadow: 0 6px 20px -8px rgba(2,37,69,.3); }
.frame--sheet img { width: 100%; height: auto; display: block; }
.lj-grid--sheet { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.frame--desktop { position: relative; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; background: #fff; padding-top: 30px; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.frame--desktop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #F3F3F5; border-bottom: 1px solid var(--card-border); }
.frame--desktop::after { content: ""; position: absolute; top: 11px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; box-shadow: 14px 0 #FEBC2E, 28px 0 #28C840; }
.frame--desktop { flex-direction: column; }
.frame--desktop img { width: 100%; height: auto; display: block; }

/* jump index, so a judge can reach a criterion without scrolling 20 cards */
/* The jump corral sticks below the header so, after jumping to a criterion, the reader
   can pick another without scrolling back up. Kept to one compact scrollable row so it
   floats without covering the page. */
.jump {
  position: sticky; top: var(--head-h); z-index: 20;
  margin: 0 0 22px; padding: 11px 16px; background: #fff;
  border: 1px solid var(--card-border); border-radius: 8px;
  box-shadow: 0 3px 10px rgba(2, 37, 69, .07);
}
.jump__label { margin: 0 0 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jump__list { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.jump__list a {
  font-size: 12.5px; font-weight: 650; text-decoration: none; color: var(--ink);
  padding: 5px 10px; border: 1px solid var(--card-border); border-radius: 4px; background: var(--page-bg);
  flex: 0 0 auto; white-space: nowrap;
}
.jump__list a:hover { border-color: var(--accent-solid); color: var(--accent-solid); }
.ref-card { scroll-margin-top: calc(var(--head-h) + 88px); }

/* ── Appendix A: anchored criterion cards ── */
.scale-note { background: #fff; border: 1px solid var(--card-border); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 14px 16px; color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }
.ref-grid { display: flex; flex-direction: column; gap: 18px; }
.ref-card { background: #fff; border: 1px solid var(--card-border); border-radius: 8px; padding: 22px; }
/* The head was a two-column row with the title left and the figures right. Once the
   figures became four labelled facts, that right-hand column squeezed them into a narrow
   stack down the side of the card. They belong under the title, across the full width. */
.ref-card__head { display: block; }
/* A bounded strip across the top of the card. As a column down the right it ate about
   250px of card height for four short facts; as a bar it costs one row. */
.ref-card__head .ref-facts {
  margin-top: 12px; padding: 10px 14px;
  background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 8px;
}
.ref-card__title { margin: 0; font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.ref-card__dim { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ref-card__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: stretch; }
.ref-card__panel { background: var(--panel); border-radius: 8px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; }
.ref-card__panel-label { margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ref-card__panel ul { margin: 0 0 auto; padding-left: 18px; }
.ref-card__panel li { margin-bottom: 10px; line-height: 1.45; font-size: 13.5px; }
.k-badge { align-self: flex-start; margin-top: 16px; background: var(--accent); color: #211703; font-weight: 850; font-size: 12px; padding: 7px 13px; border-radius: 9px; }
.anchors { display: flex; flex-direction: column; gap: 10px; }
.anchor { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; background: var(--page-bg); }
.anchor__n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-solid); font-weight: 850; font-size: 14px; display: grid; place-items: center; }
.anchor__text { margin: 0; font-size: 13.5px; color: #2C2C2E; }
@media (max-width: 760px) { .ref-card__body { grid-template-columns: 1fr; } }

/* criterion index table */
.table-head { margin: 40px 0 10px; font-size: 18px; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ref-table th, .ref-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--card-border); }
.ref-table th { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }

/* A column of numbers is never left-justified. Only a column holding text is, so the
   element and criterion names stay left and every figure column is centered, heading and
   values together, so each reads as one stack.

   Written as `.ref-table th.ref-table__n` and not the bare class: the rule above it sets
   text-align on `.ref-table th, .ref-table td`, which is two classes of specificity, and a
   single-class rule loses to it however late it is declared.

   This lives in package.css rather than shell.css because print.html loads only this file:
   in shell.css the screen table would center and the printed one would not. */
.ref-table th.ref-table__n,
.ref-table td.ref-table__n { text-align: center; font-variant-numeric: tabular-nums; }

/* ── criterion card header ──
   "Financials · 3.75 of 100" read as a rounding error. The three facts that make the
   share meaningful now sit on the line: what the element carries of 100, how many
   criteria share it, and what this one is worth of that weight. Separated by rules
   rather than dots, because four dot-joined fragments read as one run-on label.

   In package.css, not shell.css, for the same reason as the rule above: print.html loads
   only this file, and without these the printed header ran together as
   "BUSINESS FUNDAMENTALS15 OF 100ONE OF 3 CRITERIA5 OF THAT 15". */
.ref-card__dim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.ref-card__el { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ref-card__w { position: relative; padding-left: 11px; font-weight: 600; white-space: nowrap; }
.ref-card__w::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 11px;
  transform: translateY(-50%); background: var(--card-border);
}
.ref-card__w--own { color: #8A6D14; font-weight: 800; }
@media (max-width: 640px) {
  .ref-card__dim { gap: 2px 8px; }
  .ref-card__w { padding-left: 0; }
  .ref-card__w::before { display: none; }
}

.man-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--chip-bg); font-weight: 800; font-size: 12px; }
.man-title { font-weight: 650; }
.man-k { color: var(--accent-solid); }
.man-dim { color: var(--muted); }

/* footer */
.pagefoot { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 40px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.pagefoot__brand { font-weight: 800; color: var(--ink); }
.pagefoot__brand a { color: inherit; text-decoration: none; }
.brand-hl { color: var(--accent-solid); }

/* ════════════════════════════════════════════════════════════════════
   DOCS LAYOUT: left nav + body. Neutral, no radius, no splash.
   ════════════════════════════════════════════════════════════════════ */
.docs { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; max-width: 1180px; margin: 0 auto; }
.docnav {
  position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto;
  padding: 26px 26px 40px 24px; border-right: 1px solid var(--card-border);
}
.docnav__search { position: relative; margin-bottom: 20px; }
.docnav__search input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px; color: var(--ink);
  background: #fff; border: 1px solid var(--card-border); border-radius: 0;
}
.docnav__search input:focus { outline: none; border-color: var(--accent-solid); }
.docnav__group { margin: 0 0 18px; }
.docnav__label {
  margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.docnav a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding: 7px 10px 7px 0; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.35;
  border-left: 2px solid transparent; padding-left: 10px;
}
.docnav a:hover { color: var(--accent-solid); }
.docnav a.is-on { border-left-color: var(--accent-solid); color: var(--accent-solid); font-weight: 700; background: #fff; }
.docnav a b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.docnav a.is-on b { color: var(--accent-solid); }
.docnav__empty { font-size: 13px; color: var(--muted); padding: 6px 0 0 10px; }

.docbody { padding: 30px 34px 90px; min-width: 0; }
.docbody > .rule-section:first-child .section-head,
.docbody > .section-head:first-child { margin-top: 0; }

/* sub-sections separated by rules rather than boxes */
.subsec { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--card-border); }
.subsec:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.docfoot { display: flex; justify-content: space-between; gap: 18px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--card-border); }
.docfoot a { font-size: 13.5px; font-weight: 650; color: var(--accent-solid); text-decoration: none; }
.docfoot a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; }
  .docnav { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--card-border); padding: 18px 20px 22px; }
  .docbody { padding: 24px 20px 70px; }
}

/* inside the docs body the letter is prose, not a card */
.docbody .letter { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }

/* ── 4.1 judged factors ── */
.protocol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.protocol div { border: 1px solid var(--card-border); border-radius: 6px; padding: 10px 12px; background: #fff; }
.protocol span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.protocol strong { display: block; margin-top: 4px; font-size: 13.5px; }
@media (max-width: 700px) { .protocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.factors { display: flex; flex-direction: column; gap: 8px; }
.factor-item { background: #fff; border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; }
.factor-sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 62px 20px; gap: 14px; align-items: center;
  padding: 15px 16px; cursor: pointer; list-style: none;
}
.factor-sum::-webkit-details-marker { display: none; }
.factor-sum:hover { background: var(--page-bg); }
.factor-sum__name { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.factor-sum__meta { font-size: 12px; color: var(--muted); }
.factor-sum__w { font-weight: 800; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.factor-sum__chev { color: var(--muted); transition: transform .18s ease; }
.factor-item[open] .factor-sum { border-bottom: 1px solid var(--card-border); }
.factor-item[open] .factor-sum__chev { transform: rotate(180deg); }
.factor-item[open] .factor-sum__name { color: var(--accent-solid); }
.factor-body { padding: 4px 16px 16px; background: var(--page-bg); }
.crit { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--card-border); }
.crit:first-child { padding-top: 12px; margin-top: 0; border-top: 0; }
.crit__name { margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.crit__factor { margin: 0 0 12px; font-size: 17px; }
.crit__factor span { color: var(--muted); font-weight: 700; }
.crit__bands { display: flex; flex-direction: column; gap: 5px; }
.band { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline;
        background: #fff; border: 1px solid var(--card-border); border-radius: 4px; padding: 8px 11px; }
.band__r { font-size: 11.5px; font-weight: 800; color: var(--accent-solid); font-variant-numeric: tabular-nums; }
.band__t { font-size: 13px; color: #2C2C2E; }
@media (max-width: 600px) {
  .factor-sum { grid-template-columns: minmax(0, 1fr) 54px 18px; }
  .factor-sum__meta { display: none; }
  .band { grid-template-columns: 1fr; gap: 3px; }
}

/* ── criterion facts: a labelled stack, not a run of figures ──
   Four numbers joined by dots read as one unbroken string, and an element with no weight
   yet printed "0 of 100one of 2 criteria0 of that 0". Labels make each figure mean
   something on its own, and the stack degrades to a single column on a phone. */
.ref-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.ref-facts div { min-width: 0; }
.ref-facts dt {
  margin: 0 0 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ref-facts dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.ref-facts dd b { font-weight: 800; color: #8A6D14; }
.ref-facts__warn { color: #9C3A22 !important; font-weight: 800; }
@media (max-width: 640px) {
  .ref-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
}

/* The cover mark is for the printed document only; on screen the header carries it.
   Scoped to @media screen, because a bare `display:none` here also hid it from the
   printed cover: print.html loads this file too. */
@media screen {
  .cover__logo { display: none; }
}

/* ── Conformance ── */
.conf__lead p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 74ch; margin: 0 0 14px; }
.conf__labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.conf__label {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px 18px;
  border-top: 3px solid var(--accent);
}
.conf__label h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 16px; font-weight: 700; }
.conf__label p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.conf__note {
  margin: 22px 0 0; padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 10px; max-width: 78ch;
}
@media (max-width: 720px) { .conf__labels { grid-template-columns: 1fr; } }

/* The deviation statement is meant to be copied verbatim, so it is set as preformatted text
   rather than prose: the alignment is what makes it obvious which fields need filling. */
.conf__lead-p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.conf__tmpl {
  margin: 0; padding: 18px 20px; overflow-x: auto; border-radius: 10px;
  background: var(--panel); color: #F2F1EE; border: 1px solid #1B1D20;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.65;
  white-space: pre; -webkit-font-smoothing: auto;
}
.conf__short { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); max-width: 78ch; }
.conf__short b { color: var(--ink); }

/* The conformance table is a comparison, not a figure table: its columns are words, so they
   read left-aligned even though the shared table rule centers data columns. */
.conf__table th.ref-table__n, .conf__table td.ref-table__n { text-align: left; }
.conf__table td.ref-table__n:first-of-type { font-weight: 700; color: var(--ink); }
.conf__table tbody tr:last-child td { border-bottom: 0; }

/* ── published legal documents (Charter, Bylaws) ──
   Rendered from markdown by mdToHtml(). Prose measure, clear section headings, and the
   author's rationale blockquotes set apart as notes. */
.legaldoc { max-width: 80ch; }
.legaldoc p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 13px; }
.legaldoc .legal-h { font-family: var(--serif); color: var(--ink); letter-spacing: -.01em; }
.legaldoc .legal-h2 { font-size: 17px; font-weight: 700; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.legaldoc .legal-h2:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }
/* Auto-numbered section headings: the number is a CSS counter, not stored text, so a
   removed or reordered section renumbers the rest with no gap. A removed heading (edit mode
   flags it [data-removed]) neither shows a number nor advances the count. */
.legaldoc--charter, .legaldoc--coi { counter-reset: sec; }
.legaldoc--charter .legal-sec:not([data-removed]):not(.pcsc-out)::before { counter-increment: sec; content: counter(sec) ". "; }
.legaldoc--coi .legal-sec:not([data-removed]):not(.pcsc-out)::before { counter-increment: sec; content: "ARTICLE " counter(sec, upper-roman) " - "; }
.legaldoc .legal-h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.legaldoc .legal-h4 { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; margin: 16px 0 6px; }
.legaldoc .legal-list { margin: 0 0 13px; padding-left: 22px; }
.legaldoc .legal-list li { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 6px; }
.legaldoc .legal-alist { list-style: none; padding-left: 14px; }
.legaldoc .legal-al { font-weight: 700; color: var(--ink); margin-right: 4px; }
.legaldoc .legal-note {
  margin: 14px 0; padding: 12px 16px; font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--page-bg); border: 1px solid var(--card-border); border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.legaldoc .legal-note strong { color: var(--ink-soft); }
.legaldoc .legal-hr { border: 0; border-top: 1px solid var(--card-border); margin: 22px 0; }
@media print {
  .legaldoc .legal-note { break-inside: avoid; }
  .legaldoc p, .legaldoc .legal-list li { font-size: 9pt; line-height: 1.4; }
  .legaldoc .legal-h2 { font-size: 12pt; }
}