/* ============================================================
   guideline.css — collapsible guideline section + (?) help button
   ------------------------------------------------------------
   Pairs with vercel/js/guideline-section.js + help-button.js +
   i18n-state.js. The single body class .app-help-visible flips
   every (?) button on/off without per-chart edits.
   ============================================================ */

/* ---- Collapsible guideline section ------------------------ */
.guideline-section {
  margin: var(--space-3) 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast, 150ms ease);
}

.guideline-section--expanded {
  border-color: var(--border-strong);
}

/* Header row holds the expand/collapse toggle button AND, when expanded,
   an EN/VI language toggle scoped to the guideline content. */
.guideline-section__header {
  display: flex;
  align-items: stretch;
  background: transparent;
  transition: background var(--transition-fast, 150ms ease);
}
.guideline-section__header:hover { background: var(--bg-hover); }

.guideline-section__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* EN | VI toggle inside the guideline panel header — controls the
   bilingual swap only for the guideline content. Visible only when the
   panel is expanded (lang is meaningless when collapsed). */
.guideline-section__lang {
  display: inline-flex;
  align-self: center;
  margin-right: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: 600;
  background: var(--bg-surface);
}
.guideline-section__lang button {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  transition: background var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}
.guideline-section__lang button + button {
  border-left: 1px solid var(--border-default);
}
.guideline-section__lang button.is-active {
  background: var(--color-action-muted);
  color: var(--color-action);
}
.guideline-section__lang button:not(.is-active):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.guideline-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.guideline-section__title {
  flex: 1;
  color: var(--text-primary);
}

.guideline-section__hint {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.guideline-section__body {
  padding: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* JSON content path — section blocks rendered directly via Vue.
   Each block is heading + prose (markdown-lite). Tokens-only so
   light + dark themes inherit automatically. */
.guideline-section__block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.guideline-section__block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.guideline-section__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.guideline-section__heading-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--color-action);
}
.guideline-section__heading-ico svg { display: block; }
.guideline-section__prose { color: var(--text-secondary); font-size: var(--font-body, 14px); line-height: 1.6; }
.guideline-section__prose p { margin: 0 0 var(--space-2); }
.guideline-section__prose p:last-child { margin-bottom: 0; }
.guideline-section__prose strong { color: var(--text-primary); font-weight: 700; }
.guideline-section__prose em { color: var(--text-primary); font-style: italic; }
.guideline-section__prose ul { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); }
.guideline-section__prose li { margin-bottom: 4px; }
.guideline-section__prose li::marker { color: var(--color-action); }
/* Markdown pipe tables (metric definitions, day-type maps, etc.) — portal-styled */
.guideline-section__prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--font-small, 13px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.guideline-section__prose thead th {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-small, 12px);
  color: var(--text-tertiary);
  background: var(--bg-hover);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-default);
}
.guideline-section__prose tbody td {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  vertical-align: top;
}
.guideline-section__prose tbody tr:last-child td { border-bottom: 0; }
.guideline-section__prose tbody td:first-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }

.guideline-section__state {
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-small);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.guideline-section__state--error { color: var(--color-brand); }

/* Circle spinner — shown while the guideline content is being fetched.
   Reuses --color-action for the spinning segment and --border-default for
   the static track so both themes pick up automatically. */
.guideline-section__spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-top-color: var(--color-action);
  border-radius: 50%;
  animation: guideline-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes guideline-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .guideline-section__spinner { animation: none; }
}

/* Style the fetched bilingual HTML (which uses the source files'
   own classes: .card, .guideline-title, .section-block, etc.)
   into the portal's design system without re-doing the layout. */
.guideline-section__html { color: var(--text-primary); font-size: var(--font-body); line-height: 1.55; }
.guideline-section__html .card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.guideline-section__html .guideline-title {
  font-size: var(--font-h2);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.guideline-section__html .section-block { margin-bottom: var(--space-4); }
.guideline-section__html .section-heading {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.guideline-section__html .body-text { color: var(--text-secondary); }
.guideline-section__html .table-wrap { overflow-x: auto; }
.guideline-section__html table.metric-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--font-data, 0.8125rem);
}
.guideline-section__html table.metric-table th,
.guideline-section__html table.metric-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.guideline-section__html table.metric-table th {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  background: var(--bg-hover);
}
.guideline-section__html table.metric-table td.col-metric-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.guideline-section__html .def-block { display: block; color: var(--text-secondary); }
.guideline-section__html .platform-tag {
  display: inline-block;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-action);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 6px;
}

/* ---- (?) help button -------------------------------------- */
/* Visible by default (small + subtle) on any card that wires a
   <help-button>. Per-card opt-in: only cards with an actual help
   entry get the icon, so no global toggle needed. */
.help-btn {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  position: relative;
  opacity: 0.7;
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease),
              opacity var(--transition-fast, 150ms ease);
}

.help-btn:hover {
  background: var(--color-action-muted);
  border-color: var(--color-action);
  color: var(--color-action);
  opacity: 1;
}

/* External top-right placement for cards: anchor the button
   slightly OUTSIDE the card's top-right corner per the user's
   "outside top-right" spec. The parent .card needs position:
   relative for this to anchor correctly — almost all .card
   instances already have relative or static layout; if a card
   needs it, add .card--has-help to opt into the anchor. */
.card { position: relative; }
.help-btn--corner {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  background: var(--bg-surface);
}

/* Help popover — opens on click; mirrors the existing
   .chart-tooltip white-card visual language for consistency. */
.help-btn__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 340px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-small);
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  white-space: normal;
  pointer-events: auto;
  cursor: default;
}
.help-btn__popover-title {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}
.help-btn__popover-body { color: var(--text-secondary); }

/* ---- Header toggle controls (EN/VI + ? show/hide) --------- */
/* Rendered by bs-shared-header.js alongside the existing
   currency/format toggles. */
.bs-hdr__lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: 600;
}
.bs-hdr__lang-toggle button {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  transition: background var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}
.bs-hdr__lang-toggle button + button {
  border-left: 1px solid var(--border-default);
}
.bs-hdr__lang-toggle button.is-active {
  background: var(--color-action-muted);
  color: var(--color-action);
}
.bs-hdr__lang-toggle button:not(.is-active):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.bs-hdr__help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}
.bs-hdr__help-toggle.is-active {
  background: var(--color-action-muted);
  border-color: var(--color-action);
  color: var(--color-action);
}
.bs-hdr__help-toggle:not(.is-active):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}