/* GI Investor Passport Index (/passport-index). Uses the site tokens from styles.css. */
.gipi { --gp1: #01334A; --gp2: #B8862F; --gp3: #7A4E6B; --gp4: #4F7A94; --gp5: #A34A3A; --gp-gold: #8A5A12; }
.gp-controls { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); padding: 14px 0; display: grid; gap: 12px; }
.gp-line { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.gp-seg { display: inline-flex; border: 1px solid var(--brand); }
.gp-seg button { border: 0; background: transparent; color: var(--brand); font: 500 14px var(--sans); padding: 8px 16px; cursor: pointer; }
.gp-seg button[aria-pressed="true"] { background: var(--brand); color: var(--white); }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-chips button { border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 13px var(--sans); padding: 5px 12px; cursor: pointer; }
.gp-chips button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: var(--white); }
.gp-lbl { font-size: 13px; color: var(--muted); }
.gp-controls select { font: 14px var(--sans); padding: 6px 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.gp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.gp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.gp-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; padding: 16px 0 8px; }
.gp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gp-row { border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--white); padding: 16px 18px; display: grid; gap: 10px; }
.gp-row--open-able { cursor: pointer; }
.gp-row--open-able:hover { border-color: #C8CCD1; border-left-color: var(--brand); }
.gp-top { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.gp-rank { font: 600 32px/1 'Cormorant Garamond', var(--serif); color: var(--gp-gold); text-align: center; font-variant-numeric: lining-nums; }
.gp-tie::after { content: "="; font-size: 14px; margin-left: 1px; }
.gp-name { min-width: 0; }
.gp-name b { font: 600 19px var(--serif); color: var(--ink); margin-right: 8px; }
.gp-sub { font-size: 13px; color: var(--muted); }
.gp-code { font: 11px ui-monospace, Menlo, monospace; border: 1px solid var(--line); padding: 0 5px; margin-right: 8px; color: var(--muted); vertical-align: 2px; }
.gp-score { text-align: right; }
.gp-v { font: 600 34px/1 'Cormorant Garamond', var(--serif); color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.gp-l { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.gp-bar { height: 8px; background: var(--soft); display: flex; overflow: hidden; }
.gp-bar span { height: 100%; }
.gp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.gp-num { font-variant-numeric: tabular-nums; color: var(--ink); }
.gp-flag { font-size: 12px; padding: 1px 8px; border: 1px solid var(--gp-gold); color: var(--gp-gold); background: #FFF6E5; }
.gp-flag--c { border-color: #A3302A; color: #A3302A; background: #FBEDEC; }
.gp-detail { border-top: 1px dashed var(--line); padding-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.gp-pills { display: grid; gap: 7px; }
.gp-pill { display: grid; grid-template-columns: 110px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 13px; }
.gp-track { height: 8px; background: var(--soft); overflow: hidden; }
.gp-track span { display: block; height: 100%; }
.gp-detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13px; }
.gp-detail dt { color: var(--muted); } .gp-detail dd { margin: 0; color: var(--ink); }
.gp-muted { color: var(--muted); }
.gp-empty { padding: 32px; text-align: center; color: var(--muted); border: 1px dashed var(--line); }
.gp-method { max-width: 780px; display: grid; gap: 14px; color: var(--text); font-size: 15px; line-height: 1.8; }
.gp-method p { margin: 0; }
.gp-updated { font-size: 13px; color: var(--muted); }
.gp-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.brochure__cover--gipi { background: var(--brand-dark); }
@media (max-width: 600px) {
  .gp-top { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .gp-rank { font-size: 24px; } .gp-name b { font-size: 17px; } .gp-v { font-size: 26px; }
  .gp-controls { position: static; }
  .gp-pill { grid-template-columns: 90px minmax(0, 1fr) 30px; }
}

/* 環傲報告及指南 (reports-guides): featured index + one consistent card per report / guide */
.rgx-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; border: 1px solid var(--line); border-top: 3px solid var(--brand); padding: 36px 40px; }
.rgx-f-main { display: flex; flex-direction: column; gap: 14px; }
.rgx-stats { grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-top: 6px; }
.rgx-top { background: var(--soft); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.rgx-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rgx-top li { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rgx-r { font: 600 24px/1 'Cormorant Garamond', var(--serif); color: #8A5A12; text-align: center; }
.rgx-n { font: 600 16px var(--serif); color: var(--ink); }
.rgx-s { font: 600 22px/1 'Cormorant Garamond', var(--serif); color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.rgx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.rgx-card { border: 1px solid var(--line); padding: 28px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
.rgx-cover { background: var(--brand); color: var(--white); padding: 14px 12px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 6px 6px 0 var(--line); }
.rgx-cover small { font-size: 8px; color: #C8CCD1; letter-spacing: 1px; }
.rgx-cover strong { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.3; }
.rgx-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rgx-body h3 { font: 600 20px var(--serif); color: var(--ink); }
.rgx-body p { color: var(--text); font-size: 15px; line-height: 1.7; margin: 0; }
.rgx-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rgx-meta span { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; }
.rgx-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 6px; }
.rgx-actions .btn { min-height: 44px; padding: 0 22px; }
@media (max-width: 900px) { .rgx-feature { grid-template-columns: 1fr; padding: 24px 20px; } .rgx-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .rgx-card { grid-template-columns: 1fr; padding: 22px 20px; } .rgx-cover { width: 120px; min-height: 140px; } .rgx-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

.gp-more { display: flex; justify-content: center; margin-top: 18px; }