/* Page-level layout from the design system's example pages (HomePage, HomeMobile, BookmakerPage, ComparePage). Tokens only. */
.br-skip { position: absolute; left: -9999px; top: 0; }
.br-skip:focus { left: var(--space-4); top: var(--space-2); z-index: 10; background: var(--paper-raised); color: var(--ink); padding: var(--space-2) var(--space-3); box-shadow: var(--focus-ring); }
a { color: var(--link); }
.home-tablehead { display: grid; gap: 12px; margin-bottom: 16px; }
.m-gap { margin-bottom: 16px; }
.m-legend { margin-top: 12px; }
.m-legend summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--link); }
.m-legend summary::-webkit-details-marker { display: none; }
.m-legend .br-legend { padding: 4px 0 8px; }
.bk-aside { display: grid; gap: 12px; position: sticky; top: 24px; }
.bk-hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; width: 100%; }
.cmp-pick { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.br-crumbs { padding: 24px 0 8px; }
.br-head-stack { padding: 32px 0 24px; gap: 16px; }
/* Home h1 is display-xl at 960px+, display on phones */
@media (max-width: 959px) { .display-xl { font-size: 32px; line-height: 38px; letter-spacing: -0.005em; } }
/* Search results */
.br-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: var(--space-1); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.br-search-results a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: var(--size-tap); padding: 0 var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.br-search-results a:hover, .br-search-results a.is-active { background: var(--accent-soft); }
.br-search-results .stamp { color: var(--ink-muted); }
.br-search-results .none { padding: var(--space-3); color: var(--ink-muted); }
/* Mobile menu (native details) */
.br-menu { position: relative; display: none; }
.br-menu > summary { list-style: none; }
.br-menu > summary::-webkit-details-marker { display: none; }
.br-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; display: grid; padding: var(--space-2); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.br-menu-panel a { display: flex; align-items: center; min-height: var(--size-tap); padding: 0 var(--space-3); color: var(--ink); text-decoration: none; border-radius: var(--radius-md); }
.br-menu-panel a:hover { background: var(--accent-soft); }
@media (max-width: 759px) { .br-menu { display: block; } }
/* Compare: rows we couldn't confirm always show, even with "Only show differences" */
.br-compare-wrap:has(.br-only-diff:checked) .br-compare tbody tr.is-unconf { display: table-row; }
@media (max-width: 759px) { .br-compare-wrap:has(.br-only-diff:checked) .br-compare tbody tr.is-unconf { display: grid; } }
.br-error[hidden], [hidden] { display: none !important; }
/* Prose pages */
.br-prose { max-width: var(--size-prose); padding: var(--space-6) 0 0; }
.br-prose h1 { font-family: var(--font-serif); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: var(--space-4); }
.br-prose h2 { font-family: var(--font-serif); font-size: 24px; line-height: 30px; font-weight: 600; margin: var(--space-6) 0 var(--space-2); }
.br-prose p, .br-prose ul { margin: 0 0 var(--space-4); }
.br-prose li { margin-bottom: var(--space-2); }
.br-prose a { color: var(--link); text-underline-offset: 3px; }
.br-prose small, .br-prose .stamp { font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); }
/* Index cards */
.br-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.br-cards a { display: grid; gap: var(--space-1); align-content: start; height: 100%; padding: var(--space-4); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.br-cards a:hover { border-color: var(--ink); }
.br-cards .stamp { color: var(--ink-muted); }
.br-allpairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.br-allpairs a { display: flex; align-items: center; min-height: var(--size-tap); }
@media (max-width: 959px) { .br-cards, .br-allpairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .br-cards, .br-allpairs { grid-template-columns: 1fr; } }
.br-qlinks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.br-qlinks a { display: inline-block; min-height: 44px; padding: 10px 0; }
.br-answer { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.br-answer-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.br-others { width: 100%; border-collapse: collapse; }
.br-others th, .br-others td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.br-others td.value { font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .br-others .br-hide-phone { display: none; } }
.br-answer .br-value { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 30px; }
/* r5: newsletter placeholder, licence block, topic tables */
.br-news--soon { grid-template-columns: 1fr; padding: var(--space-5) var(--space-6); }
.bk-licence { display: grid; gap: 4px; }
.br-topic-table { width: 100%; border-collapse: collapse; }
.br-topic-table th, .br-topic-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.br-topic-table thead th { padding-top: 0; }
.br-topic-wrap { overflow-x: auto; }
.br-topic-table td .small { display: block; margin-top: 4px; }
.br-list { padding-left: 20px; display: grid; gap: 6px; }
.br-list li { list-style: disc; }
.br-topic-table tbody th { font-weight: 600; min-width: 110px; }
.br-topic-unk { color: var(--muted, #666); }