/* Plain, readable methodology document. */

body.methodology-page .ambient-grid { display: none; }

.methodology-main.methodology-document {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 96px;
}

.methodology-document,
.methodology-document * { box-sizing: border-box; }

.methodology-document .method-hero,
.methodology-document .method-panel,
.methodology-document .method-disclaimer {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.methodology-document .method-hero {
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(111, 155, 176, .2);
}

.methodology-document .method-kicker { display: none; }

.methodology-document .method-hero h1 {
  margin: 0;
  color: #edf5f6;
  font-size: clamp(32px, 5vw, 40px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.methodology-document .method-hero__copy > p,
.methodology-document .method-note p,
.methodology-document .section-heading p,
.methodology-document .accordion-intro,
.methodology-document .methodology-accordion__content p,
.methodology-document .methodology-accordion__content li,
.methodology-document .method-disclaimer p {
  margin: 0;
  color: #c6d4d8;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  word-break: keep-all;
}

.methodology-document .method-hero__copy > p {
  max-width: 760px;
  margin-top: 20px;
}

.methodology-document .method-hero__copy > .method-model-meta {
  margin-top: 11px;
  color: #8fa3aa;
  font: 700 13px/1.65 var(--mono);
  letter-spacing: .01em;
}

.methodology-document .method-note {
  max-width: 760px;
  margin-top: 23px;
  padding-left: 15px;
  border-left: 2px solid rgba(69, 215, 216, .68);
}

.methodology-document .method-note h2 {
  margin: 0 0 7px;
  color: #45d7d8;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.4;
}

.methodology-document .method-panel {
  min-height: 0;
  padding: 30px 0;
  border-bottom: 1px solid rgba(111, 155, 176, .16);
}

.methodology-document .section-heading { margin: 0 0 18px; }

.methodology-document .section-heading h2,
.methodology-document .methodology-accordion__toggle {
  color: #45d7d8;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.4;
  letter-spacing: -.015em;
}

.methodology-document .section-heading h2 { margin: 0; }
.methodology-document .section-heading p { margin-top: 9px; }

/* Current score scale */
.methodology-document .risk-scale-wrap {
  margin: 4px 0 0;
  padding: 60px 4px 22px;
}

.methodology-document .risk-scale-labels {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  color: #91a1a8;
  font: 650 13px/1 var(--mono);
}

.methodology-document .risk-scale {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #21bf6b 0%, #3bd26e 22%, #d9d93a 42%, #f2bc45 58%, #ff8b3e 73%, #ff4f58 88%, #dc1739 100%);
}

.methodology-document .risk-marker {
  position: absolute;
  z-index: 2;
  bottom: 40px;
  left: var(--risk-position, 50%);
  display: flex;
  gap: 5px;
  align-items: baseline;
  min-width: max-content;
  transform: translateX(var(--marker-shift, -50%));
  text-align: center;
}

.methodology-document .risk-marker[hidden] { display: none; }

.methodology-document .risk-marker::before {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  width: 1px;
  height: 27px;
  background: #dce7e9;
  content: "";
}

.methodology-document .risk-marker::after {
  position: absolute;
  top: calc(100% + 27px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 2px solid #f2f6f7;
  border-radius: 50%;
  background: #f2f6f7;
  content: "";
}

.methodology-document .risk-marker__caption {
  color: #a7b8bd;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.methodology-document .risk-marker strong {
  color: #ff8b48;
  font: 700 26px/1 var(--mono);
}

.methodology-document .risk-marker > span:last-child { display: none; }

.methodology-document .risk-load-status {
  margin: 18px 0 0;
  color: #91a1a8;
  font-size: 13px;
  line-height: 1.65;
}

/* Risk stages: name and range on one line, description below. */
.methodology-document .risk-tier-grid {
  margin: 8px 0 0;
  border-top: 1px solid rgba(111, 155, 176, .16);
}

.methodology-document .risk-tier {
  --tier-color: #9cadb4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(111, 155, 176, .12);
}

.methodology-document .risk-tier--low { --tier-color: #39d49a; }
.methodology-document .risk-tier--watch { --tier-color: #e5cb50; }
.methodology-document .risk-tier--rising { --tier-color: #e8b74d; }
.methodology-document .risk-tier--high { --tier-color: #ff9a46; }
.methodology-document .risk-tier--very-high { --tier-color: #ff813e; }
.methodology-document .risk-tier--critical { --tier-color: #ff5964; }
.methodology-document .risk-tier--extreme { --tier-color: #ff3e4f; }
.methodology-document .risk-tier--global { --tier-color: #ee3045; }

.methodology-document .risk-tier h3 {
  margin: 0;
  color: var(--tier-color);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.4;
}

.methodology-document .risk-tier__range {
  grid-column: 2;
  grid-row: 1;
  color: #a8b8bd;
  font: 700 13px/1.4 var(--mono);
  white-space: nowrap;
}

.methodology-document .risk-tier p {
  grid-column: 1 / -1;
  margin: 0;
  color: #c6d4d8;
  font-size: 15px;
  line-height: 1.65;
}

.methodology-document .maximum-note {
  margin-top: 20px;
  border-top: 1px solid rgba(231, 180, 77, .25);
  border-bottom: 0;
}

.methodology-document .maximum-note .methodology-accordion__toggle { color: #dec67e; }

.methodology-document .maximum-note p,
.methodology-document .maximum-note li {
  color: #c6d4d8;
  font-size: 15px;
  line-height: 1.65;
}

.methodology-document .method-rule-note { margin-top: 12px !important; }

/* Evaluation factors */
.methodology-document .factor-grid { border-top: 1px solid rgba(111, 155, 176, .16); }

.methodology-document .factor-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 6px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(111, 155, 176, .12);
}

.methodology-document .factor-card h3 {
  margin: 0;
  color: #e0eaec;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.4;
}

.methodology-document .factor-weight {
  grid-column: 2;
  grid-row: 1;
  color: #60d3d6;
  font: 700 13px/1.4 var(--mono);
  white-space: nowrap;
}

.methodology-document .factor-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #c6d4d8;
  font-size: 15px;
  line-height: 1.65;
}

/* Accordion sections */
.methodology-document .methodology-accordion { padding: 0; }

.methodology-document .methodology-accordion__toggle {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* The shared mobile shell also styles generic buttons. Keep methodology
   accordions as full-width document rows regardless of that shared styling. */
body.methodology-page .methodology-document .methodology-accordion > .methodology-accordion__toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 52px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body.methodology-page .methodology-document .method-panel.methodology-accordion {
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(111, 155, 176, .16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.methodology-document .methodology-accordion__toggle:focus-visible {
  outline: 2px solid rgba(69, 215, 216, .75);
  outline-offset: -2px;
}

.methodology-document .methodology-accordion__arrow {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-right: 2px solid #8fa2aa;
  border-bottom: 2px solid #8fa2aa;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}

.methodology-document .methodology-accordion__toggle[aria-expanded="true"] .methodology-accordion__arrow {
  transform: rotate(225deg) translateY(-2px);
}

.methodology-document .methodology-accordion__content { padding: 0 0 25px; }
.methodology-document .accordion-intro { margin-bottom: 17px; }

.methodology-document .process-grid {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(111, 155, 176, .16);
  counter-reset: method-step;
  list-style: none;
}

.methodology-document .process-grid li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 11px;
  row-gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(111, 155, 176, .12);
  counter-increment: method-step;
}

.methodology-document .process-grid li::before {
  grid-column: 1;
  grid-row: 1;
  color: #8fa2aa;
  content: counter(method-step, decimal-leading-zero);
  font: 700 13px/1.4 var(--mono);
}

.methodology-document .process-grid h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: #e0eaec;
  font-size: 16px;
  font-weight: 720;
  line-height: 1.4;
}

.methodology-document .process-grid p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: #c6d4d8;
  font-size: 15px;
  line-height: 1.65;
}

.methodology-document .methodology-accordion__content ul {
  margin: 0;
  padding-left: 21px;
}

.methodology-document .methodology-accordion__content ul + p { margin-top: 12px; }

.methodology-document .method-operation-notes {
  margin: 18px 0 0;
  padding: 14px 0 0 21px;
  border-top: 1px solid rgba(111, 155, 176, .12);
}

.methodology-document .method-operation-notes li + li { margin-top: 9px; }

/* Bottom-only disclaimer */
.methodology-document .method-disclaimer {
  margin-top: 30px;
  padding: 0 0 0 16px;
  border-left: 2px solid rgba(69, 215, 216, .5);
}

.methodology-document .method-disclaimer h2 {
  margin: 0 0 8px;
  color: #45d7d8;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.4;
}

html[lang="zh-CN"] .methodology-document p,
html[lang="zh-CN"] .methodology-document li,
html[lang="zh-cn"] .methodology-document p,
html[lang="zh-cn"] .methodology-document li {
  word-break: break-all;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .methodology-main.methodology-document {
    width: 100%;
    padding: 29px 16px calc(96px + env(safe-area-inset-bottom));
  }

  .methodology-document .method-hero { padding-bottom: 27px; }
  .methodology-document .method-hero h1 { font-size: clamp(32px, 5vw, 40px); }

  .methodology-document .method-hero__copy > p,
  .methodology-document .method-note p,
  .methodology-document .section-heading p,
  .methodology-document .accordion-intro,
  .methodology-document .methodology-accordion__content p,
  .methodology-document .methodology-accordion__content li,
  .methodology-document .method-disclaimer p { font-size: 15px; }

  .methodology-document .method-hero__copy > .method-model-meta { font-size: 13px; }

  .methodology-document .method-note { margin-top: 21px; }
  .methodology-document .method-panel { padding: 26px 0; }
  .methodology-document .methodology-accordion { padding: 0; }
  .methodology-document .section-heading { margin-bottom: 16px; }

  .methodology-document .section-heading h2,
  .methodology-document .methodology-accordion__toggle { font-size: 17px; }

  .methodology-document .risk-scale-wrap { padding: 60px 0 21px; }
  .methodology-document .risk-marker { bottom: 40px; }
  .methodology-document .risk-marker strong { font-size: 25px; }

  .methodology-document .risk-tier { padding: 13px 0; }
  .methodology-document .risk-tier h3 { font-size: 16px; }
  .methodology-document .risk-tier p { font-size: 15px; }

  .methodology-document .factor-card { padding: 14px 0; }
  .methodology-document .factor-card h3 { font-size: 16px; }
  .methodology-document .factor-card p { font-size: 15px; }

  .methodology-document .maximum-note { margin-top: 22px; padding-top: 20px; }
  .methodology-document .maximum-note p,
  .methodology-document .maximum-note li { font-size: 15px; }

  .methodology-document .methodology-accordion__toggle { min-height: 52px; }
  body.methodology-page .methodology-document .methodology-accordion > .methodology-accordion__toggle { font-size: 17px !important; }
  .methodology-document .methodology-accordion__content { padding-bottom: 23px; }
  .methodology-document .process-grid li { padding: 14px 0; }
  .methodology-document .process-grid h3 { font-size: 16px; }
  .methodology-document .process-grid p { font-size: 15px; }

  .methodology-document .method-disclaimer { margin-top: 27px; }
}

/* The title scale of /about/: one clamp down to 620px, then a flat 31px. */
@media (max-width: 620px) {
  .methodology-document .method-hero h1 { font-size: 31px; }
}

@media (max-width: 420px) {
  .methodology-main.methodology-document { padding-right: 14px; padding-left: 14px; }
  .methodology-document .method-hero h1 { font-size: 31px; }
}

/* ------------------------------------------------------------------
   Wide screens only: the same rows, opened across the page.

   Everything above lays this document out one item per line - right
   for a phone, endless for a desktop. From 1024px the notice, the risk
   tiers, the evaluation factors, the four cards and the process steps
   sit side by side: same elements, same order, same words, separated
   by the same hairlines the stacked version already used between
   rows. Below 1024px none of this applies and the stack stays exactly
   as it was.
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* the notice rides beside the introduction instead of under it */
  .methodology-document .method-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  .methodology-document .method-note {
    max-width: none;
    margin-top: 3px;
  }

  /* lists become tables: cells that touch, so the rules join up */
  .methodology-document .risk-tier-grid,
  .methodology-document .factor-grid,
  .methodology-document .quiet-grid,
  .methodology-document .process-grid {
    display: grid;
    column-gap: 0;
    row-gap: 0;
  }

  .methodology-document .risk-tier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .methodology-document .factor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .methodology-document .quiet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methodology-document .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* vertical rule: the left edge of every column but the first.
     Each side of it carries its own 16px, so the space reads the same
     from both columns; the first column keeps 16px on its right. */
  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n+2),
  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n+3),
  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n),
  .methodology-document .factor-grid .factor-card:nth-child(3n+2),
  .methodology-document .factor-grid .factor-card:nth-child(3n),
  .methodology-document .process-grid li:nth-child(3n+2),
  .methodology-document .process-grid li:nth-child(3n) {
    padding-left: 16px;
    border-left: 1px solid rgba(111, 155, 176, .16) !important;
  }

  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n+1),
  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n+2),
  .methodology-document .risk-tier-grid .risk-tier:nth-child(4n+3),
  .methodology-document .factor-grid .factor-card:nth-child(3n+1),
  .methodology-document .factor-grid .factor-card:nth-child(3n+2),
  .methodology-document .process-grid li:nth-child(3n+1),
  .methodology-document .process-grid li:nth-child(3n+2) {
    padding-right: 16px;
  }

  /* the four quiet cards are locked to padding:0 further up, so ask for
     the inset the same way that rule did */
  body.methodology-page .methodology-document .quiet-grid .quiet-card:nth-child(2n) {
    padding-left: 16px !important;
    border-left: 1px solid rgba(111, 155, 176, .16) !important;
  }

  body.methodology-page .methodology-document .quiet-grid .quiet-card:nth-child(2n+1) {
    padding-right: 16px !important;
  }

  /* breathing room that was budgeted for one column at a time */
  .methodology-main.methodology-document { padding: 44px 0 64px; }
  .methodology-document .method-panel { padding: 24px 0; }
  .methodology-document .section-heading { margin-bottom: 14px; }
  .methodology-document .method-disclaimer { margin-top: 24px; }
}