/* ----------------------------------------------------------------- guide
   说明 switch + per-item ⓘ (guide.js). Full mode: guidance shows exactly as
   written and the ⓘ buttons are hidden. Compact mode: guidance folds into ⓘ;
   an opened note reads as a help bubble right where it was.                 */

/* top-bar switch — matches the language switch (main) / sits on the navy bar (portal pages) */
.guide-toggle { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 1px solid var(--border, #ccd6df); border-radius: 17px; background: var(--surface, #fff); color: var(--text-secondary, #3d4f66); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: none; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.guide-toggle svg { width: 16px; height: 16px; }
.guide-toggle:hover { border-color: var(--forest-700, #344c6c); color: var(--text-primary, #17202b); }
.guide-toggle[aria-pressed='true'] { background: var(--forest-850, #1e3a5f); border-color: var(--forest-850, #1e3a5f); color: #fff; }
.guide-toggle:focus-visible, .guide-btn:focus-visible { outline: 2px solid #2f6be0; outline-offset: 2px; }
.accounting-top .guide-toggle { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; }
.accounting-top .guide-toggle[aria-pressed='true'] { background: #fff; border-color: #fff; color: var(--forest-850, #1e3a5f); }

/* per-item ⓘ: hidden while all guidance is shown */
.guide-btn { display: none; }
.guide-compact .guide-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 0 0 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5b7290; cursor: pointer; vertical-align: middle; font: inherit; transition: background 150ms ease, color 150ms ease; }
.guide-btn svg { width: 16px; height: 16px; }
.guide-compact .guide-btn:hover, .guide-compact .guide-btn[aria-expanded='true'] { background: #e9eff7; color: #1e40af; }
/* a note with no title nearby gets a small labelled chip instead of a paragraph */
.guide-compact .guide-chip { display: inline-flex; align-items: center; gap: 4px; width: auto; height: 26px; margin: 0 0 8px; padding: 0 10px 0 7px; border-radius: 13px; background: #f3f6fa; font-size: 12px; font-weight: 600; }
.guide-compact .guide-chip + [data-guide].guide-open { margin-top: 0; }

/* compact: guidance folded until its ⓘ is opened */
.guide-compact [data-guide='']:not(.guide-open) { display: none !important; }
.guide-compact [data-guide=''].guide-open { display: block; margin: 6px 0 10px; padding: 9px 12px; border: 1px solid #d1ddeb; border-radius: 8px; background: #f3f6fa; color: #274668; font-size: 13px; font-weight: 400; line-height: 1.7; }
.guide-compact .wr-metrics [data-guide=''].guide-open { margin: 8px 0 0; padding: 6px 9px; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .guide-compact [data-guide=''].guide-open { animation: guide-in 160ms ease-out; }
  @keyframes guide-in { from { opacity: 0; transform: translateY(-2px); } }
}
@media (max-width: 640px) { .guide-toggle span { display: none; } .guide-toggle { width: 34px; padding: 0; justify-content: center; } }