/* Methodology page layout only */
:root{--method-max:1180px}

html{scroll-behavior:smooth}

body > header.site,
body > main.methodology-main{
  width:100%;
  max-width:var(--method-max);
  padding-right:clamp(20px,4vw,36px);
  padding-left:clamp(20px,4vw,36px);
}

header.site .methodology-intro{
  max-width:76ch;
  margin-top:18px;
  margin-bottom:0;
  font-size:16px;
  line-height:1.7;
}

.page-nav{
  margin-top:28px;
  padding:20px 22px;
  border:1px solid rgba(143,169,186,.26);
  border-radius:14px;
  background:rgba(15,34,51,.48);
}

.page-nav h2{
  margin:0 0 12px;
  color:#EEF4F6;
  font-family:'Archivo',sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}

.page-nav__links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 26px;
}

header.site .page-nav a{
  position:relative;
  padding-left:14px;
  color:#B9CBD6;
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
}

.page-nav a::before{
  content:"";
  position:absolute;
  top:.65em;
  left:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#2FB8A6;
}

header.site .page-nav a:hover,
header.site .page-nav a:focus-visible{
  color:#8FE8DC;
  text-decoration:underline;
  text-underline-offset:3px;
}

.methodology-main{
  margin-top:46px;
}

.methodology-main > section{
  margin:0 0 34px;
  padding:40px;
}

.methodology-main > section > *{
  width:100%;
  box-sizing:border-box;
  margin-right:0;
  margin-left:0;
}

.methodology-main > section[id]{
  scroll-margin-top:110px;
}

.methodology-main h2{
  margin:0 0 22px;
  color:#16242C;
  font-family:'Fraunces',serif;
  font-size:clamp(24px,2.4vw,30px);
  font-weight:640;
  line-height:1.2;
}

.methodology-main h3{
  margin:0 0 10px;
  color:#16242C;
  font-family:'Archivo',sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
}

.methodology-main p{
  max-width:76ch;
  margin:0 0 16px;
  color:#263943;
  font-size:16px;
  line-height:1.68;
}

.methodology-main > section > p{
  max-width:none;
  margin-right:0;
  margin-left:0;
}

.methodology-main p:last-child{margin-bottom:0}

.methodology-main a{
  color:#0E7A6E;
  text-underline-offset:3px;
}

.methodology-main a:hover,
.methodology-main a:focus-visible{
  color:#075E55;
  text-decoration-thickness:2px;
}

.table-scroll{
  width:100%;
  box-sizing:border-box;
  margin:26px 0 22px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  border:1px solid #D4DEDD;
  border-radius:10px;
  background:rgba(255,255,255,.4);
  -webkit-overflow-scrolling:touch;
}

.table-scroll:focus-visible{
  outline:3px solid rgba(14,122,110,.32);
  outline-offset:3px;
}

.methodology-main table{
  width:100%;
  min-width:720px;
  margin:0;
  border-collapse:collapse;
  table-layout:auto;
  font-size:15px;
  line-height:1.55;
}

.methodology-main th{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.28);
  background:#004e69;
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.055em;
  line-height:1.4;
  text-align:left;
  text-transform:uppercase;
  vertical-align:bottom;
}

.methodology-main th *,
.methodology-main th a,
.methodology-main th abbr,
.methodology-main th span{
  color:inherit;
}

.methodology-main thead th:first-child{border-top-left-radius:9px}
.methodology-main thead th:last-child{border-top-right-radius:9px}

.methodology-main td{
  padding:15px 16px;
  border-bottom:1px solid #DDE5E4;
  color:#263943;
  vertical-align:top;
}

.methodology-main tbody tr:last-child td{border-bottom:0}
.methodology-main th:first-child,
.methodology-main td:first-child{width:23%;min-width:170px}

.methodology-main caption{
  padding:12px 16px 14px;
  border-top:1px solid #DDE5E4;
  background:#F4F7F6;
  color:#50646B;
  font-size:14px;
  line-height:1.55;
  text-align:left;
  caption-side:bottom;
}

.methodology-main code{
  display:inline;
  padding:2px 6px;
  border:1px solid #CEDAD8;
  border-radius:5px;
  background:#F2F6F5;
  color:#1D3B3B;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  line-height:1.65;
  overflow-wrap:anywhere;
  white-space:normal;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.definition-grid{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:16px;
  margin-right:0;
  margin-left:0;
}

.definition-block,
.method-block{
  width:100%;
  height:auto;
  box-sizing:border-box;
  padding:22px;
  border:1px solid #D8E2E0;
  border-radius:10px;
  background:rgba(255,255,255,.38);
}

.definition-block p{
  max-width:none;
  margin:0;
}

.definition-block strong{
  display:block;
  margin-bottom:7px;
  color:#16242C;
  font-size:17px;
}

.method-block{
  margin:22px 0 0;
}

.method-block p{margin-bottom:0}
.method-block--compact{margin-top:16px}

.methodology-main .secondary-note{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:22px 0 0;
  padding:18px 20px;
  border-left:3px solid #7CAEA7;
  border-radius:0 8px 8px 0;
  background:#E9EFEE;
  color:#30454D;
  font-size:14px;
  line-height:1.65;
}

#star-ratings .ratings-intro{
  width:100%;
  max-width:none;
  margin-right:0;
  margin-left:0;
  line-height:1.6;
}

#star-ratings .rating-table__rating{width:23%}
#star-ratings .rating-table__indicators{width:48%}
#star-ratings .rating-table__notes{width:29%}

#star-ratings .rating-table th,
#star-ratings .rating-table td{
  padding:17px 18px;
  vertical-align:top;
}

#star-ratings .rating-table th:first-child,
#star-ratings .rating-table td:first-child{
  width:auto;
  min-width:150px;
}

.indicator-weights{
  margin:0;
  padding:0;
  list-style:none;
}

.indicator-weights li{
  margin:0 0 6px;
  line-height:1.5;
}

.indicator-weights li:last-child{margin-bottom:0}

.methodology-main .indicator-support{
  max-width:none;
  margin:11px 0 0;
  color:#50646B;
  font-size:13.5px;
  line-height:1.55;
}

.rating-method{
  display:block;
  width:100%;
  max-width:none;
}

.rating-thresholds{
  display:grid;
  width:100%;
  box-sizing:border-box;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px 12px;
  margin-top:13px;
}

.rating-thresholds > span{
  display:block;
  padding:8px 10px;
  border:1px solid #D5DEDD;
  border-radius:6px;
  background:rgba(255,255,255,.48);
  color:#33464E;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
}

.methodology-main .transport-geography-note p{
  max-width:none;
  margin:0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

.methodology-main .transport-geography-note p + p{
  margin-top:12px;
}

.methodology-main blockquote{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
}

.methodology-main blockquote p{
  max-width:none;
  margin-right:0;
  margin-left:0;
}

.methodology-footer{
  width:100%;
  max-width:var(--method-max);
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#C6D5DE;
  margin-top:28px;
  padding:0 calc(clamp(20px,4vw,36px) + 40px) 28px;
}

.methodology-footer p{color:#C6D5DE}
.methodology-footer a{color:#EEF4F6}
.methodology-main > section:last-child{margin-bottom:0}

@media(max-width:900px){
  .methodology-main > section{padding:32px}
  .definition-grid{grid-template-columns:1fr}
  .definition-block{padding:20px}
  .rating-thresholds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .methodology-footer{
    margin-top:24px;
    padding-right:calc(clamp(20px,4vw,36px) + 32px);
    padding-left:calc(clamp(20px,4vw,36px) + 32px);
  }
}

@media(max-width:768px){
  body > header.site,
  body > main.methodology-main{
    padding-right:20px;
    padding-left:20px;
  }

  .page-nav__links{grid-template-columns:1fr}
  .methodology-main{margin-top:36px}
  .methodology-main > section{margin-bottom:26px;padding:30px}
  .methodology-main > section[id]{scroll-margin-top:86px}
  .methodology-main table{min-width:680px}
  .methodology-footer{
    margin-top:22px;
    padding-right:50px;
    padding-left:50px;
  }
}

@media(max-width:480px){
  body > header.site,
  body > main.methodology-main{
    padding-right:16px;
    padding-left:16px;
  }

  header.site .methodology-intro{font-size:15px}
  .page-nav{margin-top:22px;padding:18px}
  .methodology-main{margin-top:30px}
  .methodology-main > section{margin-bottom:22px;padding:20px}
  .methodology-main h2{margin-bottom:16px;font-size:23px}
  .methodology-main h3{font-size:16px}
  .methodology-main p{font-size:15px;line-height:1.65}
  .table-scroll{margin:18px 0 22px}
  .methodology-main th{padding:12px 14px}
  .methodology-main td{padding:14px}
  .methodology-main caption{font-size:13.5px}
  .definition-block,.method-block{padding:18px}
  .methodology-main .secondary-note{padding:16px;font-size:14px}
  .rating-thresholds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .methodology-footer{
    margin-top:18px;
    padding-right:36px;
    padding-left:36px;
  }
}


/* 窄螢幕:計算式不撐破卡片(2026-08-04) */
@media(max-width:640px){
  .methodology-main code{overflow-wrap:anywhere;word-break:normal;display:inline-block;max-width:100%}
}