/* ── The standard's app shell ──────────────────────────────────────────────
   The same frame as the LiveJudge and WeDoYourEvents help centers: a solid L
   (header across the top, nav down the left) with one white plane tucked into
   the corner, its top left corner rounded and a gold seam drawn along the two
   edges that meet the L. The page reads as a single surface cut by the nav and
   header rather than cards floating on a tinted field.

   Two deliberate departures from the help centers. Their L is charcoal; this one
   is council navy, because the contrast pairs are not interchangeable between
   brands. And there is no tiles landing: a standard is one document read in
   order, so the first thing it opens on is its front matter.

   Loaded after package.css and only by the screen pages. Content-block styling
   still comes from package.css; this file owns the frame, the header, the nav and
   the plane. print.html does not load it and prints from print.css as before. */

:root {
  /* 228, not 300: the nav was eating horizontal space the standard needed. The brand
     is the lockup alone, narrow enough that it still clears this column. */
  --nav-w: 228px;
  --head-h: 76px;
  --curve: 26px;
  --seam: #C49D2A;
  --seam-w: 5px;
  --navy: #022545;
  --navy-soft: #0A3358;
  --faint: #9AA0A8;
  --line-soft: #F1EEE8;
}

body.shell-body { background: var(--navy); margin: 0; }
.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--head-h) minmax(0, 1fr);
  min-height: 100vh;
}

/* ── header ── */
.hd {
  grid-column: 1 / -1; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr);
  align-items: center; background: var(--navy); position: sticky; top: 0; z-index: 30;
}
.hd__brand { display: flex; align-items: center; padding: 0 20px; text-decoration: none; min-width: 0; }
.hd__logo { height: 30px; width: auto; display: block; }
.hd__bar { display: flex; align-items: center; gap: 12px; padding: 0 28px 0 22px; min-width: 0; }
.hd__pkg {
  font-size: 15px; font-weight: 600; color: rgba(244, 242, 237, .92); white-space: nowrap;
  padding-right: 4px;
}
.hd__spacer { flex: 1 1 auto; }

.hsearch { position: relative; flex: 1 1 auto; max-width: 340px; min-width: 0; }
.hsearch input {
  width: 100%; font: inherit; font-size: 14px; color: #fff; padding: 9px 14px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 9px; outline: none;
}
.hsearch input::placeholder { color: rgba(255, 255, 255, .52); }
.hsearch input:focus { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .12); }

/* every header control on one metric, so they measure identically */
.hbtn, .hbtn--gold {
  font-family: inherit; font-size: 13px; line-height: 1.35; padding: 8px 15px; border-radius: 9px;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.hbtn { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .9); font-weight: 500; background: none; }
.hbtn:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }
.hbtn--gold { background: var(--seam); color: var(--navy); font-weight: 650; }
.hbtn--gold:hover { background: #B08D22; color: var(--navy); }
.hbtn--topics { display: none; }

/* the two programs: a segmented switch, not a row of pills */
.hswitch { display: flex; background: rgba(255, 255, 255, .09); border-radius: 9px; padding: 2px; }
.hswitch button {
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3; cursor: pointer;
  border: 0; background: none; color: rgba(255, 255, 255, .7); padding: 6px 12px; border-radius: 7px;
  white-space: nowrap;
}
.hswitch button:hover { color: #fff; }
.hswitch button.is-on { background: #fff; color: var(--navy); }

/* ── nav: collapsed groups, one open at a time, color is the only signal ── */
/* 10px side padding, so a nav label's text starts on the same 20px as the lockup. */
.snav {
  background: var(--navy); padding: 14px 10px 40px; overflow-y: auto;
  position: sticky; top: var(--head-h); height: calc(100vh - var(--head-h));
}
/* Back to the council: a way out of the standard, above the section list. */
.snav__back {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .74); text-decoration: none;
}
.snav__back:hover { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06); }
.snav__back-i { flex: 0 0 auto; }
.grp { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.grp:last-child { border-bottom: 0; }
.grp__hd {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 54px; text-align: left;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, .9); background: none; border: 0; padding: 0 10px; line-height: 1.3;
  border-radius: 8px;
}
.grp__hd:hover { color: #fff; }
.grp__t { flex: 1 1 auto; min-width: 0; }
.grp__chev { flex: 0 0 auto; width: 16px; height: 16px; color: rgba(255, 255, 255, .45); transition: transform .16s ease; }
.grp.is-open .grp__chev { transform: rotate(180deg); }
/* an animatable 0fr -> 1fr row: slides to the real height, with no max-height guess */
.grp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.grp.is-open .grp__body { grid-template-rows: 1fr; }
.grp__inner { overflow: hidden; min-height: 0; }
.grp.is-open .grp__inner { padding-bottom: 8px; }

.snav__sec {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left;
  cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 400;
  color: rgba(255, 255, 255, .66); background: none; border: 0; border-radius: 8px;
  padding: 6px 10px 6px 20px; line-height: 1.35; text-decoration: none;
}
.snav__sec:hover { color: #fff; }
.snav__n { flex: 0 0 auto; width: 30px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .42); }
.snav__t { flex: 1 1 auto; min-width: 0; }
/* current = color only. No wash, no bar. */
.snav__sec.is-on { color: var(--seam); }
.snav__sec.is-on .snav__n { color: var(--seam); }
.snav__empty { color: rgba(255, 255, 255, .5); font-size: 13px; padding: 10px; margin: 0; }

/* ── the white plane ── */
.plane {
  background: #fff; border-top-left-radius: var(--curve);
  min-height: calc(100vh - var(--head-h)); padding: 34px 40px 30px;
  display: flex; flex-direction: column;
  border-top: var(--seam-w) solid var(--seam); border-left: var(--seam-w) solid var(--seam);
}
/* One measure for everything on the plane, so the masthead, the panels and the wide
   tables all share a right edge. Wide enough for a five column table, and the prose
   inside the masthead is capped separately at a readable line length. */
.plane__body { flex: 1 1 auto; min-width: 0; max-width: 1060px; }

/* ── the document masthead, now inside the plane ──
   It used to be a navy band above the content. On a navy shell that band would
   read as a second header, so it becomes type on the white surface. */
.pmast h1, .pmast__sub, .pmast__lede { max-width: 78ch; }
.pmast__kicker {
  margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #8A6D14;
}
.pmast h1 {
  margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.01em; color: var(--ink);
}
.pmast__sub { margin: 10px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.pmast__lede { margin: 10px 0 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
.pmast__status {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 20px 0 0; padding: 14px 18px;
  background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 10px;
  font-size: 12px; color: var(--muted);
}
.pmast__status span { display: flex; gap: 6px; }
.pmast__status b { color: var(--ink); font-weight: 700; }
.pmast__status .is-live { color: #2C7A31; }
.plane__doc { margin-top: 26px; }

/* prev / next along the foot of the document */
.docfoot { border-top: 1px solid var(--line-soft); }

/* ── footer: part of the white surface ── */
.pfoot {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pfoot__c { font-size: 12.5px; color: var(--faint); }
.pfoot__spacer { flex: 1 1 auto; }
.pfoot a { font-size: 12.5px; color: var(--muted); font-weight: 500; text-decoration: none; }
.pfoot a:hover { color: var(--ink); }

/* ── the old chrome, retired ──
   package.css still carries it for print.html, so it is switched off here rather
   than deleted. Leaving it live puts a second nav on the page. */
.shell-body .topnav,
.shell-body .docnav,
.shell-body .docmast { display: none; }
.shell-body .docs { display: block; max-width: none; margin: 0; }
.shell-body .docbody { padding: 0; }

/* ── mobile: stack it, nav becomes a drawer ──
   Every track is minmax(0,..) because a bare 1fr will not shrink below its content
   and pushes the whole page sideways. */
@media (max-width: 900px) {
  :root { --nav-w: 0px; --curve: 0px; --seam-w: 4px; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .hd { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; height: auto; padding: 12px 16px; }
  .hd__brand { padding: 0; }
  .hd__bar { padding: 0; width: 100%; gap: 8px; flex-wrap: wrap; }
  .hd__spacer { display: none; }
  .hsearch { max-width: none; flex: 1 1 100%; order: -1; }
  .hbtn--topics { display: inline-block; }
  .snav { display: none; position: static; height: auto; padding: 8px 12px 20px; }
  body.nav-open .snav { display: block; }
  .plane { border-left: 0; padding: 22px 16px 26px; min-height: 0; }
  .pfoot__spacer { flex-basis: 100%; }
}

/* ── section 4.2: the scoring arithmetic ──
   The five steps are the rule itself, so they are set as a numbered list with the
   claim in each step carrying the weight, and the worked example is boxed off as an
   illustration rather than another rule. */
.mathsteps ol { margin: 0; padding: 0 0 0 22px; counter-reset: none; }
.mathsteps li { margin: 0 0 11px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 88ch; }
.mathsteps li b { color: var(--ink); font-weight: 700; }
.mathsteps li::marker { color: #8A6D14; font-weight: 700; }
.worked {
  margin: 22px 0 0; padding: 16px 20px; background: var(--page-bg);
  border: 1px solid var(--card-border); border-left: 3px solid var(--seam); border-radius: 8px;
  max-width: 88ch;
}
.worked__label {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.worked p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.worked p b { color: var(--ink); font-weight: 700; }

.ref-table__tot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.ref-table__tot .man-dim { color: var(--ink-soft); }

/* A wide table scrolls inside its own box. Without this it will not shrink below its
   content, so it widens the document and pushes every other element off a phone
   screen: the symptom looks like the whole page is broken, not the table. */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 4px; }
.tablescroll .ref-table { min-width: 560px; }

/* Printing from the reading view must not inherit the scroll box: an overflow
   container in paged media clips whatever sits outside its first screenful, which
   would silently cut columns off the printed table. */
@media print {
  .tablescroll { overflow: visible; }
  .tablescroll .ref-table { min-width: 0; }
}
.tablenote { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; max-width: 88ch; }

  .ref-card__w { padding-left: 0; }
  .ref-card__w::before { display: none; }

/* ── print.html: the whole document on one page, so it has no section nav ──
   Without this the plane sits in the nav's column and leaves a navy band down the left.
   The page still needs the current chrome: closing the print dialog used to land on the
   old design, which read as a different site. */
.shell--flat { grid-template-columns: minmax(0, 1fr); }
.shell--flat .hd { grid-template-columns: auto minmax(0, 1fr); }
.shell--flat .plane { border-left: 0; border-top-left-radius: 0; }
.shell--flat .plane__body { max-width: none; margin: 0 auto; }