/* ============================================================
   GlobleMatch — legacy.css
   Token-based restyle of legacy markup hooks that page <script>s
   depend on (kept byte-identical). Old palette discarded; all
   values come from tokens.css. Nothing here may use inline styles.
   ============================================================ */

/* ---- layout chrome (not in components.css) ---- */
.breadcrumb { max-width: var(--container); margin: 0 auto; padding: var(--s-4) var(--s-5) 0;
  font-size: var(--t-14); color: var(--muted); }
.breadcrumb a { color: var(--accent-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-6);
  align-items: start; padding: var(--s-6) 0 var(--s-9); }
.sidebar { display: flex; flex-direction: column; gap: var(--s-4); }
.scard { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.scard-hd { padding: var(--s-3) var(--s-4); background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-size: var(--t-14); font-weight: 700; color: var(--ink); }
.scard-bd { padding: var(--s-2) var(--s-4); }
.related-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-14); color: var(--ink-soft); text-decoration: none; }
.related-link:last-child { border-bottom: none; }
.related-link:hover { color: var(--accent-deep); }
.related-icon { font-size: var(--t-16); flex: none; }

/* ---- hero variants ---- */
.hero--left { text-align: left; } /* article heroes: left-aligned like the original */
.hero h1 span { color: var(--accent-deep); }
.hero-badge strong { color: var(--ink); font-size: var(--t-16); }

/* ---- article / content typography ---- */
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.blog-card { display: flex; flex-direction: column; } /* filterCat sets display:flex */
.article-body h2 { margin: var(--s-7) 0 var(--s-3); }
.article-body h3 { margin: var(--s-6) 0 var(--s-2); }
.article-body p, .article-body li { font-size: var(--t-16); line-height: 1.75; }
.article-body ul, .article-body ol { margin: 0 0 var(--s-4) var(--s-5); padding: 0; }
.article-body li { margin-bottom: var(--s-2); }
.article-body strong { color: var(--ink); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.byline { font-size: var(--t-14); color: var(--muted); max-width: var(--container);
  margin: 0 auto; padding: var(--s-2) var(--s-5) 0; }
.byline a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.tag { font-size: var(--t-12); font-weight: 600; color: var(--muted); background: var(--bg-soft);
  padding: var(--s-1) var(--s-3); border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); }
a.tag:hover { color: var(--accent-deep); border-color: var(--accent); }
.gcard-tag { display: inline-block; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft);
  padding: var(--s-1) var(--s-3); border-radius: 999px; margin-bottom: var(--s-3); }

/* ---- section heads (index) ---- */
.section-head { text-align: center; margin-bottom: var(--s-7); }
.section-head .lede { margin-left: auto; margin-right: auto; }

/* ---- tool shell (JS hooks) ---- */
.tool-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: var(--s-5); }
.tool-card-hd { padding: var(--s-4) var(--s-6); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.tool-card-title { font-family: var(--font-display); font-size: var(--t-18); font-weight: 600; color: var(--ink); }
.tool-card-bd { padding: var(--s-6); }
.field { margin-bottom: var(--s-5); }
.flabel { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-12);
  font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: var(--s-2); }
.fcount { font-family: ui-monospace, monospace; font-size: var(--t-12); color: var(--faint);
  font-weight: 400; text-transform: none; }
.ftextarea, .finput, .fselect { width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s-3); font: inherit; font-size: var(--t-16); color: var(--ink); }
.ftextarea:focus, .finput:focus, .fselect:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ftextarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-5); }
.field-row .field { flex: 1; min-width: 160px; margin-bottom: 0; }
.opt-check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-16);
  color: var(--ink-soft); cursor: pointer; padding: var(--s-1) 0; }
.opt-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.run-btn { width: 100%; min-height: 52px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: var(--t-16); font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  transition: transform 0.12s var(--ease), background 0.2s var(--ease); }
.run-btn:hover { background: var(--accent-deep); }
.run-btn:active { transform: scale(0.98); }
.spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.65s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.run-btn.busy .spin { display: block; }
.run-btn.busy .btn-label { display: none; }
.result-box { display: none; margin-top: var(--s-5); }
.result-box.show { display: block; }
.result-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3); flex-wrap: wrap; gap: var(--s-2); }
.result-stat { font-size: var(--t-14); color: var(--muted); }
.result-stat strong { color: var(--ink); }
.copy-btn { font-size: var(--t-14); font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid var(--line); padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; }
.gen-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s-4); margin-bottom: var(--s-3); font-size: var(--t-16); line-height: 1.6;
  color: var(--ink); position: relative; cursor: pointer; transition: border-color 0.2s var(--ease); }
.gen-card:hover { border-color: var(--accent); }
.gen-card .mini-copy { position: absolute; top: var(--s-3); right: var(--s-4); font-size: var(--t-12);
  color: var(--accent-deep); font-weight: 600; opacity: 0; transition: opacity 0.15s; }
.gen-card:hover .mini-copy { opacity: 1; }
.result-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-4); }
.rcard { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--s-4); text-align: center; }
.rcard-val { font-family: var(--font-display); font-size: var(--t-24); font-weight: 700; color: var(--accent-deep); }
.rcard-label { font-size: var(--t-12); color: var(--muted); margin-top: var(--s-1); }
.score-ring-wrap { display: flex; align-items: center; gap: var(--s-4); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.score-ring { position: relative; width: 84px; height: 84px; flex: none; }
.score-ring svg { transform: rotate(-90deg); display: block; }
.score-ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.score-ring-bar { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.score-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.score-ring-num { font-family: var(--font-display); font-size: var(--t-24); font-weight: 700; line-height: 1; color: var(--ink); }
.score-meta-title { font-family: var(--font-display); font-size: var(--t-18); font-weight: 600; margin-bottom: var(--s-1); color: var(--ink); }
.score-meta-sub { font-size: var(--t-14); color: var(--muted); }
.signal-item { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-14); line-height: 1.55; }
.signal-item:last-child { border-bottom: none; }
.signal-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--t-12); font-weight: 700; flex: none; margin-top: 2px; }
.dot-good { background: #dcf2e5; color: #15803d; }
.dot-warn { background: #fdf0dc; color: #a16207; }
.dot-bad { background: #fbe3e0; color: #b91c1c; }
.demo-note { background: #fdf6e8; border: 1px solid #f0dfae; border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4); font-size: var(--t-14); color: #7a5a1e; line-height: 1.55;
  margin-top: var(--s-4); display: flex; gap: var(--s-2); }

/* ---- account page (JS hooks) ---- */
#fav-list { margin: var(--s-4) 0; }
.fav-empty { font-size: var(--t-14); color: var(--muted); background: var(--bg-soft);
  border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--s-4); text-align: center; }
.fav-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-16); }
.fav-item a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.fav-rm { font-size: var(--t-14); font-weight: 600; color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px; padding: var(--s-1) var(--s-3); cursor: pointer; }
.fav-rm:hover { color: var(--accent-deep); border-color: var(--accent); }
#save-status { font-size: var(--t-14); color: var(--muted); }

/* ---- FAQ (JS toggles .open on .faq-item) ---- */
.faq-item { border-bottom: 1px solid var(--line); cursor: pointer; }
.faq-q { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) 0; gap: var(--s-4); }
.faq-qt { font-size: var(--t-18); font-weight: 600; color: var(--ink); line-height: 1.4; }
.faq-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: var(--t-18); flex: none; }
.faq-item.open .faq-ic { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 480px; }
.faq-ai { padding-bottom: var(--s-4); font-size: var(--t-16); color: var(--muted); line-height: 1.7; }

/* ---- toast (JS hook) ---- */
.toast { position: fixed; bottom: 22px; right: 22px; z-index: 999; background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--radius-sm); font-size: var(--t-14); font-weight: 500;
  box-shadow: var(--shadow-pop); opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; max-width: 330px; }
.toast.on { opacity: 1; transform: none; }

/* ---- CTA banner / disclosures / picks ---- */
.disclaimer-card { margin: var(--s-6) 0; }
.disclaimer-card .fineprint { margin: 0; max-width: none; }
.cta-banner { background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  border-radius: var(--radius); padding: var(--s-7) var(--s-6); text-align: center; margin-top: var(--s-6); }
.cta-banner h2, .cta-banner h3 { color: #fff; margin-bottom: var(--s-2); }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: var(--t-16); margin-bottom: var(--s-4); }
.cta-banner a { display: inline-block; background: #fff; color: var(--accent-deep); font-size: var(--t-16);
  font-weight: 700; padding: var(--s-3) var(--s-6); border-radius: 999px; text-decoration: none; }
.cta-banner a:active { transform: scale(0.98); }
.disclosure, .affiliate-disclosure { font-size: var(--t-14); color: var(--muted); line-height: 1.6;
  max-width: 68ch; margin: 0 auto var(--s-4); }
.pick-badge { display: inline-block; font-size: var(--t-12); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--accent); padding: var(--s-1) var(--s-3);
  border-radius: 999px; margin-bottom: var(--s-3); }
.pick-note { font-size: var(--t-14); color: var(--muted); margin-top: var(--s-3); }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-4) 0; }
.pros h4, .cons h4 { font-family: var(--font-body); font-size: var(--t-14); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--s-2); }
.pros h4 { color: #15803d; }
.cons h4 { color: #b91c1c; }
.pros ul, .cons ul { margin: 0; padding-left: var(--s-4); }
.pros li, .cons li { font-size: var(--t-14); color: var(--ink-soft); margin-bottom: var(--s-2); line-height: 1.55; }
.card .btn { margin-top: var(--s-3); }

/* ---- blog filter (JS hooks) ---- */
.filter-bar { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }
.fbtn { font: inherit; font-size: var(--t-14); font-weight: 600; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s-2) var(--s-4); cursor: pointer; }
.fbtn:hover { border-color: var(--accent); color: var(--accent-deep); }
.fbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- responsive: sidebar stacks under content ---- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; flex-wrap: wrap; }
  .scard { flex: 1 1 240px; }
  .proscons { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tool-card-bd { padding: var(--s-5); }
  .sidebar { flex-direction: column; }
}