/* The comparison is scoped so it can share the standard guide navigation. */
.comparison-guide { max-width:1240px; }
.comparison-guide .guide-intro { max-width:850px; }
.comparison-guide .guide-lead strong { color:var(--label-primary); font-weight:600; }
.comparison-guide .comparison-toc { display:flex; flex-wrap:wrap; gap:10px 26px; margin-block:26px 32px; font-size:14px; }
.comparison-guide .comparison-toc a { text-decoration:none; }
.comparison-guide .guide-article { padding-block-end:64px; }
.comparison-guide .guide-article > section:not(:first-child) { max-width:820px; }
.comparison-guide .guide-article > section:first-child > h2 { font-size:22px; }
#auth-comparison {
  --paper:var(--bg-primary); --ink:var(--label-primary); --muted:#596579; --line:#e4e9f0;
  --blue:#075bc8; --blue-soft:#edf5ff; --blue-head:#0864dc; --on-blue:#fff;
  --good:#176642; --good-bg:#eaf6ee; --trade:#8b5c0c; --trade-bg:#fff5df;
  --negative:#b42318; --negative-bg:#feeceb; --neutral-bg:#f0f2f5;
  color:var(--ink); font-size:15px; line-height:1.5;
}
#auth-comparison .chart-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
#auth-comparison .hint { color:var(--muted); font-size:12px; margin:0; }
#auth-comparison .legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted); }
#auth-comparison .legend > span { display:inline-flex; align-items:center; gap:6px; }
#auth-comparison .mark { width:22px; height:22px; border-radius:50%; display:inline-flex; justify-content:center; align-items:center; font-size:13px; font-weight:650; flex-shrink:0; }
#auth-comparison .good .mark, #auth-comparison .mark.good { color:var(--good); background:var(--good-bg); }
#auth-comparison .trade .mark, #auth-comparison .mark.trade { color:var(--trade); background:var(--trade-bg); }
#auth-comparison .neutral .mark, #auth-comparison .mark.neutral { color:var(--negative); background:var(--negative-bg); }
#auth-comparison .table-wrap { overflow-x:auto; border-bottom:1px solid var(--line); padding:0 0 2px; }
#auth-comparison table { border-collapse:separate; border-spacing:0; width:100%; min-width:965px; table-layout:fixed; font-size:13px; margin:0; }
#auth-comparison col.metric-col { width:155px; }
#auth-comparison th { font-weight:600; }
#auth-comparison thead { background:transparent; }
#auth-comparison thead th { height:106px; padding:14px 7px; vertical-align:middle; text-align:center; border-bottom:1px solid var(--line); overflow-wrap:normal; }
#auth-comparison thead th:first-child { text-align:left; vertical-align:bottom; color:var(--muted); font-size:12px; padding-left:0; }
#auth-comparison .method-name { display:block; font-size:14px; }
#auth-comparison .method-sub { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; }
#auth-comparison .focus-label { display:block; width:fit-content; margin:0 auto 8px; padding:2px 7px; background:rgba(255,255,255,.17); border-radius:4px; font-size:11px; white-space:nowrap; }
#auth-comparison thead th.totp { background:var(--blue-head); color:var(--on-blue); border-radius:12px 12px 0 0; border-color:var(--blue-head); }
#auth-comparison thead th.totp .method-sub { color:var(--on-blue); opacity:.85; }
#auth-comparison tbody th { width:auto; text-align:left; padding:14px 10px 14px 0; border-bottom:1px solid var(--line); background:var(--paper); vertical-align:middle; overflow-wrap:normal; }
#auth-comparison tbody td { padding:4px; border-bottom:1px solid var(--line); text-align:center; overflow-wrap:normal; vertical-align:middle; }
#auth-comparison tbody td.totp { background:var(--blue-soft); }
#auth-comparison tbody tr:last-child th, #auth-comparison tbody tr:last-child td { border-bottom:0; }
#auth-comparison button.cell { appearance:none; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; width:100%; min-height:66px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; padding:8px 3px; transition:background .15s,border-color .15s; }
#auth-comparison button.cell.neutral { color:var(--negative); }
#auth-comparison button.cell:disabled { cursor:default; }
#auth-comparison button.cell:hover:enabled { background:var(--neutral-bg); }
#auth-comparison button.cell[aria-pressed="true"] { border-color:var(--blue); background:var(--paper); }
#auth-comparison button:focus-visible, #auth-comparison .table-wrap:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
#auth-comparison .detail { display:grid; grid-template-columns:200px 1fr; column-gap:30px; padding:24px 0 22px; margin:0; border-bottom:1px solid var(--line); min-height:168px; }
#auth-comparison .detail-label { margin:0 0 7px; font-size:12px; color:var(--blue); font-weight:600; }
#auth-comparison .detail h3 { font-size:20px; line-height:1.25; letter-spacing:-.025em; margin:0; }
#auth-comparison .detail-copy { margin:0; max-width:840px; }
#auth-comparison .detail-extras { display:flex; flex-wrap:wrap; gap:8px 26px; margin:12px 0 0; font-size:12px; color:var(--muted); }
#auth-comparison .detail-extras span { flex:1 1 250px; }
#auth-comparison .detail-extras strong { font-weight:600; color:var(--ink); }
@media (max-width:700px) {
  #auth-comparison .chart-meta { gap:12px; }
  #auth-comparison .hint { flex-basis:100%; }
  #auth-comparison table { min-width:900px; }
  #auth-comparison col.metric-col { width:130px; }
  #auth-comparison thead th:first-child, #auth-comparison tbody th { position:sticky; left:0; z-index:1; background:var(--paper); box-shadow:1px 0 var(--line); }
  #auth-comparison tbody th { padding-right:14px; }
  #auth-comparison .detail { grid-template-columns:1fr; gap:12px; min-height:0; padding:22px 0; }
  #auth-comparison .detail h3 { font-size:19px; }
  #auth-comparison .detail-extras { gap:8px; }
}
@media (prefers-reduced-motion:reduce) { #auth-comparison button.cell { transition:none; } }
@media print {
  @page { size:landscape; margin:12mm; }
  .comparison-guide .comparison-toc, #auth-comparison .hint { display:none; }
  #auth-comparison .table-wrap { overflow:visible; }
  #auth-comparison table { min-width:0; }
  #auth-comparison .detail, #auth-comparison table { break-inside:avoid; }
  #auth-comparison * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}