/* ==========================================================================
   Article layout: sticky TOC (desktop) + reading column
   ========================================================================== */
.doc { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: var(--s5) 0 var(--s7); display: grid; gap: var(--s4); }
.doc__body { min-width: 0; }
.doc__body > .sec { padding: 0; }
.doc__body > .sec + .sec { margin-top: var(--s6); }
.doc__body .sec > :where(p, .list, .ticks, .steps, .sources, .faq, .acc, .checklist, .qa, .callout, .print-hint, h3) { max-width: var(--prose); }
.doc__body h2 { font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.35rem); max-width: 26ch; scroll-margin-top: 96px; }
.doc__body h3 { scroll-margin-top: 96px; }

.toc__side { display: none; }
.toc__m { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.toc__m > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--s3); cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 500; }
.toc__m > summary::-webkit-details-marker { display: none; }
.toc__m > summary .ic { transition: transform .3s var(--ease); }
.toc__m[open] > summary .ic { transform: rotate(180deg); }
.toc__m nav { padding: 0 var(--s3) var(--s3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .875rem; line-height: 1.45; }
.toc a { display: block; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--cobalt-deep); background: var(--panel-tint); }
.toc__h { font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin: 0 0 var(--s2) 10px; }

@media (min-width: 1100px) {
  .doc { grid-template-columns: 236px minmax(0, 1fr); gap: var(--s6); padding-top: var(--s6); }
  .doc--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
  .toc__m { display: none; }
  .toc__side { display: block; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: var(--s2); border-right: 1px solid var(--rule-strong); }
}

/* ==========================================================================
   Glossary
   ========================================================================== */
.az { position: sticky; top: 0; z-index: 5; margin: 0 0 var(--s5); padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 1100px) { .az { top: 64px; } }
.az ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.az a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: var(--r-sm); text-decoration: none; font: 500 .9375rem var(--f-display); color: var(--text); background: var(--panel); border: 1px solid var(--rule); }
.az a:hover { border-color: var(--cobalt); color: var(--cobalt-deep); }
.page--glossary .sec--terms h2 { font-size: 2.6rem; color: var(--cobalt); margin: var(--s5) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule-strong); }
.page--glossary .sec--terms h3 { margin-top: var(--s4); font-size: 1.125rem; scroll-margin-top: 140px; }
.page--glossary .sec--terms h3:target { color: var(--cobalt-deep); }

/* ==========================================================================
   Contact / submit
   ========================================================================== */
.mailto-panel { display: grid; gap: var(--s3); justify-items: start; margin: var(--s4) 0; }
.mailto-panel .template { width: 100%; max-width: var(--prose); }

/* ==========================================================================
   Guide infographics (figures generated from the page data)
   ========================================================================== */
.fig { margin: var(--s5) 0; padding: var(--s4); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.fig__cap { margin-top: var(--s3); font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.fig__cap a { color: var(--cobalt-deep); }

/* I8 matrix */
.mx__grid { display: grid; gap: 0; font-size: .875rem; overflow-x: auto; }
.mx__row { display: grid; grid-template-columns: minmax(120px, 1.5fr) repeat(3, minmax(64px, 1fr)); align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); }
.mx__row:last-child { border-bottom: 0; }
.mx__row--head { min-height: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); font: 500 .8125rem/1.3 var(--f-display); color: var(--muted); align-items: end; }
.mx__fw { font-weight: 600; color: var(--text); padding-right: var(--s2); }
.mx__row--head .mx__fw { font-weight: 500; color: var(--muted); }
.mx__col, .mx__cell { text-align: center; padding: 0 4px; }
.mx__cell { align-self: stretch; display: grid; place-items: center; }
.mx__cell.mx__col--1 { background: rgba(44, 75, 246, .07); }
.mx__cell.mx__col--2 { background: rgba(44, 75, 246, .035); }
.mx__mark { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 5px rgba(44, 75, 246, .16); }
.mx__col--2 .mx__mark { background: var(--cobalt-line); }
.mx__col--3 .mx__mark { background: #fff; border: 2px solid var(--cobalt-line); box-shadow: none; }

/* I4 flow */
.flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
.flow__step { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: start; }
.flow__n { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt); color: #fff; font: 500 1rem var(--f-display); }
.flow__ic { display: none; }
.flow__step p { margin: 8px 0 0; font-size: .9375rem; line-height: 1.55; }
@media (min-width: 768px) {
  .flow__list { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .flow__step { display: block; }
  .flow__step::after { content: ""; position: absolute; top: 20px; left: 52px; right: calc(-1 * var(--s4) + 6px); height: 1px; background: repeating-linear-gradient(90deg, var(--cobalt-line) 0 4px, transparent 4px 8px); }
  .flow__step:last-child::after { display: none; }
  .flow__ic { display: block; color: var(--cobalt); margin: var(--s3) 0 var(--s2); }
}

/* Layered regulators */
.layers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.layers__item { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px var(--s3); border-radius: var(--r-sm); background: #eef3ff; color: var(--text); }
.layers__item:nth-child(1) { background: var(--cobalt-deep); color: #fff; }
.layers__item:nth-child(2) { background: var(--cobalt); color: #fff; }
.layers__item:nth-child(3) { background: var(--mist); }
.layers__item:nth-child(4) { background: #d6e4ff; }
.layers__item:nth-child(5) { background: #e3ecff; }
.layers__tag { font: 500 .75rem/1.3 var(--f-display); }
.layers__body { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
@media (min-width: 768px) {
  .layers__item { grid-template-columns: 120px 1fr; align-items: center; margin-left: calc(var(--k) * 18px); }
}

/* I7 boxes */
.bx__svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.bx path { stroke-linejoin: round; }
.bx--black .bx__t { fill: #2a2d3a; } .bx--black .bx__l { fill: #0b0c12; } .bx--black .bx__r { fill: #161824; }
.bx--black path { stroke: #0b0c12; }
.bx--grey .bx__t { fill: rgba(110, 139, 255, .28); } .bx--grey .bx__l { fill: rgba(44, 75, 246, .22); } .bx--grey .bx__r { fill: rgba(44, 75, 246, .12); }
.bx--grey path { stroke: var(--cobalt-line); stroke-width: 1.5; }
.bx--white .bx__t, .bx--white .bx__l, .bx--white .bx__r { fill: rgba(255, 255, 255, .25); stroke: var(--cobalt); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bx__in { fill: #fff; stroke: var(--cobalt) !important; stroke-width: 1.25; }
.bx--grey .bx__in { fill: rgba(255, 255, 255, .6); stroke-dasharray: 3 3; }
.bx__legend { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.bx__legend strong { display: block; font: 500 1rem var(--f-display); }
.bx__legend span { font-size: .875rem; color: var(--muted); line-height: 1.5; }
@media (min-width: 768px) { .bx__legend { grid-template-columns: repeat(3, 1fr); text-align: center; } }

/* I9 task map */
.aimap { padding: var(--s3); }
.aimap .table-wrap { margin: 0; box-shadow: none; border: 0; }
.table-wrap--map thead th:nth-child(2) { color: var(--cobalt-deep); }
.table-wrap--map tbody td:nth-child(2) { background: rgba(44, 75, 246, .05); border-left: 2px solid var(--cobalt-line); }
.table-wrap--map tbody td:nth-child(3) { border-left: 2px solid var(--text); }

/* I-cost bar */
.cost__bar { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cost__seg { padding: 12px 14px; border-radius: var(--r-sm); background: var(--panel-tint); border: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 2px; }
.cost__seg--main { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.cost__name { font: 500 .9375rem/1.3 var(--f-display); }
.cost__sub { font-size: .8125rem; opacity: .85; }
@media (min-width: 768px) {
  .cost__bar { display: flex; gap: 4px; }
  .cost__seg { flex: 1 1 0; min-height: 92px; justify-content: flex-end; }
  .cost__seg--main { flex-grow: 2.6; }
}

/* G5 factor grid */
.fgrid { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-strong); }
.fgrid li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-strong); }
.fgrid .ic { color: var(--cobalt); }
.fgrid strong { display: block; font: 500 1rem var(--f-display); margin-bottom: 2px; }
.fgrid span { font-size: .9375rem; color: var(--muted); line-height: 1.55; }
@media (min-width: 768px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s5); }
}

/* H7 report mock */
.rm__svg { display: block; width: 100%; height: auto; }
.rm__page { fill: #fff; stroke: var(--rule-strong); }
.rm__title { fill: var(--text); }
.rm__ln { fill: #d9dceb; }
.rm__box { fill: var(--key-tint); }
.rm__row { fill: var(--panel-2); }
.rm__sev--c { fill: #8f1d1a; } .rm__sev--h { fill: var(--warn); } .rm__sev--m { fill: #c98a1b; } .rm__sev--l { fill: var(--cobalt-line); }
.rm__code { fill: #0b0c12; } .rm__codeln { fill: #4b5fd6; }
.rm__st--ok { fill: var(--ok); } .rm__st--part { fill: #c98a1b; } .rm__st--open { fill: var(--warn); }
.rm__pin circle { fill: var(--cobalt); stroke: #fff; stroke-width: 3; }
.rm__pin text { fill: #fff; font: 600 13px var(--f-display); }
.anno-n { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--cobalt); color: #fff; font: 600 .75rem var(--f-display); vertical-align: 1px; }

/* I2 strip on the methodology page */
.points--strip { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule-strong); }
.points--strip li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule-strong); }
.points--strip .ic { color: var(--cobalt); }
.points--strip strong { font: 500 .9375rem/1.35 var(--f-display); }
@media (min-width: 768px) {
  .points--strip { grid-template-columns: repeat(3, 1fr); }
  .points--strip li { padding-left: var(--s3); border-left: 1px solid var(--rule-strong); }
  .points--strip li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .fig { padding: var(--s3); margin-left: calc(-1 * var(--s2)); margin-right: calc(-1 * var(--s2)); }
  .mx__row { grid-template-columns: minmax(96px, 1.3fr) repeat(3, minmax(54px, 1fr)); }
  .mx__row--head { font-size: .6875rem; }
  .mx__col { overflow-wrap: anywhere; }
}