/* AI Bubble Watch — newspaper-print styles
   FT Weekend / Economist aesthetic.
   Tokens, multi-lingual font stacks, 3px double borders, responsive. */

:root {
  --bg:     #FBF7F0;
  --bg-alt: #F3EDE0;
  --ink:    #1A1815;
  --warm:   #3A3530;
  --muted:  #666;
  --rule:   #1A1815;
  --red:    #7C1D1D;
  --yellow: #A8761A;
  --green:  #1F4D2C;
  --orange: #C25E2A;

  --serif-en: "Playfair Display", "Noto Serif SC", "Songti SC", Georgia, serif;
  --serif-zh: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "Playfair Display", serif;
  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Playfair Display", serif;
  --serif-kr: "Noto Serif KR", "Apple SD Gothic Neo", "Playfair Display", serif;
  --mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Language-specific body font selection */
:lang(zh-CN), :lang(zh-TW) { font-family: var(--serif-zh); }
:lang(ja)                  { font-family: var(--serif-jp); }
:lang(ko)                  { font-family: var(--serif-kr); }
:lang(en), :lang(es), :lang(pt), :lang(fr), :lang(de) { font-family: var(--serif-en); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
}

body {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(124,29,29,0.025) 0, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(31,77,44,0.02) 0, transparent 40%);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px);
}

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Common typographic helpers */
.mono { font-family: var(--mono); letter-spacing: 0.05em; }
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.kicker.muted { color: var(--muted); }
.kicker.ink   { color: var(--ink); }
.section-title-en {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.label-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

hr.double {
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 3px;
  margin: 18px 0 22px;
}

/* ───── M1 MASTHEAD ───── */
.masthead {
  padding-top: 8px;
}
.masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}
.masthead-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.masthead-left .kicker { margin-bottom: 8px; }
.masthead-title-en {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.masthead-title-zh {
  font-family: var(--serif-zh);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.1;
  margin: 4px 0 0;
}
.masthead-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.issue-no {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.issue-date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--warm);
}
.issue-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.lang-picker {
  margin-bottom: 10px;
}
.lang-picker label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-right: 6px;
}
.lang-picker select {
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 4px 8px;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.04em;
}

.byline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 14px;
}

/* ───── M2 HEADLINE ───── */
.headline {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border: 1px solid var(--ink);
  background: var(--bg-alt);
  margin: 26px 0 28px;
}
.headline-left {
  padding: clamp(20px, 3vw, 36px);
  background: var(--ink);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.headline-left .label-meta { color: rgba(251,247,240,0.65); }

.red-pct {
  font-family: var(--serif-en);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-size: clamp(80px, 14vw, 160px);
}
.red-pct.tier-top    { color: var(--red); }
.red-pct.tier-alert  { color: var(--orange); }
.red-pct.tier-caution{ color: var(--yellow); }
.red-pct.tier-observation { color: #E0CC95; }

.breakdown {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.breakdown .bw-red    { color: #F08C8C; }
.breakdown .bw-yellow { color: #E8BB6E; }
.breakdown .bw-green  { color: #7CAE8E; }
.threshold-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(251,247,240,0.55);
  margin-top: 8px;
}
.headline-foot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(251,247,240,0.7);
  border-top: 1px solid rgba(251,247,240,0.18);
  padding-top: 12px;
}

.headline-right {
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.verdict-label {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
:lang(zh-CN) .verdict-label, :lang(zh-TW) .verdict-label { font-family: var(--serif-zh); }
:lang(ja) .verdict-label { font-family: var(--serif-jp); }
:lang(ko) .verdict-label { font-family: var(--serif-kr); }

.verdict-label.tier-top    { color: var(--red); }
.verdict-label.tier-alert  { color: var(--orange); }
.verdict-label.tier-caution{ color: var(--yellow); }
.verdict-label.tier-observation { color: var(--green); }

.verdict-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--warm);
}
.verdict-foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(26,24,21,0.15);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ───── M3 THRESHOLD SCALE ───── */
.threshold-section {
  margin: 36px 0 28px;
}
.threshold-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 14px;
  flex-wrap: wrap;
}
.threshold-header h2 {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0;
  letter-spacing: -0.01em;
}
.threshold-bar {
  display: flex;
  position: relative;
  height: 48px;
  border: 1px solid var(--ink);
  overflow: visible;
  margin-top: 28px;
  margin-bottom: 40px;
}
.zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  padding: 0 8px;
  text-align: center;
}
.zone.zone-observation { background: var(--green);  flex: 25; }
.zone.zone-caution     { background: var(--yellow); flex: 15; }
.zone.zone-alert       { background: var(--orange); flex: 20; }
.zone.zone-top         { background: var(--red);    flex: 40; }
.zone-pct {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.marker {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.marker .marker-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--bg);
  padding: 2px 6px;
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
}
.marker .marker-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--ink);
}
.override-marker {
  position: absolute;
  bottom: -22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.override-marker .marker-arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--orange);
  margin-bottom: 2px;
}
.override-marker .marker-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  background: var(--orange);
  color: white;
  padding: 2px 6px;
  white-space: nowrap;
}

/* ───── M4 TREND ───── */
.trend-section { margin: 56px 0 36px; }
.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.trend-header h2 {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0;
}
.trend-legend {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--warm);
}
.trend-legend .swatch {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 2px solid var(--red);
  vertical-align: middle;
  margin-right: 6px;
}
.trend-legend .swatch.dashed {
  border-top: 2px dashed var(--yellow);
}
.trend-wrap {
  position: relative;
  height: 220px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 12px 0;
}
.trend-wrap canvas { width: 100%; height: 100%; }

/* ───── M5 CATEGORIES + CARDS ───── */
.cat-section { margin: 56px 0 32px; }
.cat-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.cat-title {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em;
  margin: 0;
}
:lang(zh-CN) .cat-title, :lang(zh-TW) .cat-title { font-family: var(--serif-zh); }
:lang(ja) .cat-title { font-family: var(--serif-jp); }
:lang(ko) .cat-title { font-family: var(--serif-kr); }
.cat-title-en {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 12px;
  font-weight: 400;
}
.cat-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.cat-meta .ct-red    { color: var(--red);    font-weight: 600; }
.cat-meta .ct-yellow { color: var(--yellow); font-weight: 600; }
.cat-meta .ct-green  { color: var(--green); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 18px;
}
.card {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 22px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.card.status-red::before    { background: var(--red);    }
.card.status-yellow::before { background: var(--yellow); }
.card.status-green::before  { background: var(--green);  }

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.card-name-en {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  white-space: nowrap;
  border: 1px solid;
}
.card.status-red    .card-badge { color: var(--red);    border-color: var(--red);    background: rgba(124,29,29,0.06); }
.card.status-yellow .card-badge { color: var(--yellow); border-color: var(--yellow); background: rgba(168,118,26,0.06); }
.card.status-green  .card-badge { color: var(--green);  border-color: var(--green);  background: rgba(31,77,44,0.06); }
.card-name-zh {
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.card-value {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.card.status-red    .card-value { color: var(--red); }
.card.status-yellow .card-value { color: var(--yellow); }
.card.status-green  .card-value { color: var(--green); }
.card-note {
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--warm);
}
.card-foot {
  border-top: 1px dashed rgba(26,24,21,0.45);
  padding-top: 10px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.card-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.card.stale { opacity: 0.55; filter: grayscale(0.4); }
.stale-tag {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 2px 6px;
  background: rgba(0,0,0,0.04);
}

/* ───── M6 WoW CHANGES ───── */
.wow-section {
  margin: 56px 0 36px;
  background: var(--ink);
  color: var(--bg);
  padding: clamp(20px, 3vw, 32px);
}
.wow-section h2 {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 6px;
}
.wow-section .label-meta { color: rgba(251,247,240,0.6); }
.wow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.wow-item {
  border-left: 3px solid;
  padding: 4px 0 4px 14px;
  font-size: 14px;
  line-height: 1.55;
}
.wow-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 4px;
}
.wow-item.up    { border-color: #F08C8C; }
.wow-item.up    .wow-tag { color: #F08C8C; }
.wow-item.down  { border-color: #7CAE8E; }
.wow-item.down  .wow-tag { color: #7CAE8E; }
.wow-item.flat  { border-color: rgba(251,247,240,0.45); }
.wow-item.flat  .wow-tag { color: rgba(251,247,240,0.6); }

/* ───── M7 WATCHLIST ───── */
.watch-section { margin: 56px 0 36px; }
.watch-section h2 {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 4px;
}
.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.watch-item {
  border-left: 3px solid var(--red);
  padding: 8px 0 8px 16px;
}
.watch-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--red);
  display: block;
  margin-bottom: 2px;
}
.watch-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}
.watch-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--warm);
}

/* ───── M8 FOOTER METHODOLOGY ───── */
.method-section {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-style: double;
  border-left: none;
  border-right: none;
  border-width: 3px 0 3px 0;
  padding: 28px 0 8px;
  margin-top: 56px;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--warm);
}
.method-grid h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.method-grid p { margin: 0 0 8px; }
.method-grid ul { margin: 0; padding-left: 18px; }

.footer-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-align: center;
  padding: 24px 0;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 900px) {
  .method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .headline { grid-template-columns: 1fr; }
  .masthead-grid { grid-template-columns: 1fr; }
  .masthead-right { text-align: left; align-items: flex-start; }
}
@media (max-width: 600px) {
  .zone { font-size: 9px; letter-spacing: 0.08em; padding: 0 4px; }
  .zone-pct { font-size: 9px; }
  .marker .marker-label { font-size: 10px; padding: 1px 4px; }
}

/* ───── LOADING / ERROR ───── */
.loading,
.errorbox {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 80px 20px;
}
.errorbox { color: var(--red); }

/* utility for hiding while still readable by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}