/* BonusPick — calm, factual consumer-guide styling (concept §4). Colour encodes verdicts only, always with icon + text. */
:root {
  --ink: #1b2430;
  --ink-soft: #4a5565;
  --line: #d9dee5;
  --bg: #ffffff;
  --bg-soft: #f4f6f8;
  --brand: #0b5c8a;
  --brand-ink: #ffffff;
  --link: #0a5a87;
  --worth: #12643a;      /* 7.1:1 on white */
  --worth-bg: #e7f4ec;
  --cond: #7a4a00;       /* 7.0:1 on white */
  --cond-bg: #fdf2dc;
  --skip: #9b1c1c;       /* 7.4:1 on white */
  --skip-bg: #fbe9e9;
  --focus: #b4530a;
  --radius: 10px;
  --wrap: 72rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 1.2em 0 .5em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-top: .6em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p, ul, ol { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: .95rem; }
th, td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--bg-soft); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; min-height: 3.5rem; padding-top: .4rem; padding-bottom: .4rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.main-nav ul, .footer-nav ul, .lang-switch { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; }
.main-nav a, .lang-switch a { display: inline-block; padding: .55rem .2rem; min-height: 44px; text-decoration: none; color: var(--ink); }
.main-nav a:hover, .lang-switch a:hover { text-decoration: underline; }
.lang-switch { margin-left: auto; }
.lang-switch a[aria-current] { font-weight: 700; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem 0 0; margin: 0; font-size: .9rem; color: var(--ink-soft); }
.breadcrumb li + li::before { content: "›"; margin-right: .3rem; color: var(--ink-soft); }
.breadcrumb a { display: inline-block; padding: .35rem 0; min-height: 44px; }
.demo-band { background: #fff5d6; border-bottom: 1px solid #e9cf7a; padding: .6rem 1rem; text-align: center; font-size: .95rem; }

main { padding-bottom: 2.5rem; min-height: 50vh; }
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 46rem; }
.prose { max-width: 46rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--radius); border: 2px solid var(--brand); background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn-secondary { background: transparent; color: var(--brand); }
.btn-small { min-height: 44px; padding: .3rem .8rem; font-size: .95rem; }

/* cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); margin: 1rem 0 2rem; padding: 0; list-style: none; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--bg); }
.card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.card-op { font-weight: 700; }
.card-op a { color: var(--ink); }
.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); white-space: nowrap; }
.badge a { color: inherit; }
.card-title { font-size: 1.05rem; margin: 0; }
.card-title a { color: var(--ink); }
.value { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.value-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
.value-label { font-size: .85rem; color: var(--ink-soft); }
.verdict { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; }
.verdict svg { width: 1.05em; height: 1.05em; flex: none; }
.verdict-worth_it { color: var(--worth); background: var(--worth-bg); }
.verdict-conditional { color: var(--cond); background: var(--cond-bg); }
.verdict-skip { color: var(--skip); background: var(--skip-bg); }
.reason { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.terms-line, .card-meta { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.card details { font-size: .92rem; }
.card details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: auto; }
.disclosure { font-size: .85rem; color: var(--ink-soft); }
.stale { color: var(--cond); font-weight: 600; }
.compare-check { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .9rem; }
.compare-check input { width: 1.2rem; height: 1.2rem; }

/* compact list */
.compact { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.compact li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }

/* bands, notes */
.band { border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--line); background: var(--bg-soft); }
.band-warn { background: var(--cond-bg); border-color: #ecc98a; }
.band-skip { background: var(--skip-bg); border-color: #f0b8b8; }

/* forms */
form .field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; max-width: 28rem; }
label { font-weight: 600; }
input[type=text], input[type=email], input[type=number], input[type=password], select, textarea { font: inherit; padding: .55rem .7rem; border: 1px solid #9aa4b2; border-radius: 8px; min-height: 44px; background: #fff; color: var(--ink); }
textarea { min-height: 7rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { border: 2px solid var(--brand); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; max-width: 32rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: 1rem 0; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; }
.pagination a, .pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.pagination [aria-current] { background: var(--brand); color: #fff; border-color: var(--brand); }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 1.5rem 0 2rem; font-size: .95rem; }
.rg-title { font-size: 1rem; margin: 0 0 .5rem; }
.footer-nav { margin: 1rem 0; }
.footer-nav a { display: inline-block; padding: .55rem 0; min-height: 44px; }
.legal { color: var(--ink-soft); font-size: .88rem; margin: 0; }

/* age gate */
.age-gate { border: none; border-radius: var(--radius); padding: 1.5rem; max-width: 26rem; width: calc(100% - 2rem); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.age-gate::backdrop { background: rgba(10, 20, 30, .65); }
.age-form { display: flex; flex-direction: column; gap: .8rem; }
.age-form h2 { margin: 0; }
.noscript-age { background: var(--bg-soft); padding: .8rem 1rem; }

.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; border-left: 3px solid var(--line); }
.timeline li { padding: .2rem 0 .9rem 1rem; }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.kv dt { font-weight: 600; }
.kv dd { margin: 0; }
@media (max-width: 40rem) { .kv { grid-template-columns: 1fr; } .lang-switch { margin-left: 0; } }
@media print { .site-header, .site-footer, .age-gate { display: none; } }

/* catalog pages (market, offer, operator, type, compare, report) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }
.updated { margin-top: -.3rem; }
.intro { margin-bottom: 1rem; }
.tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; padding: 0; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .9rem; text-decoration: none; color: var(--ink); border-bottom: 3px solid transparent; }
.tabs a[aria-current] { border-bottom-color: var(--brand); font-weight: 700; }
.link-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.link-list li { padding: .1rem 0; }
.link-list a { display: inline-block; padding: .55rem 0; min-height: 44px; }
.filters .check { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 400; }
.filters .check input { width: 1.2rem; height: 1.2rem; }
.filters .field { margin: 0; }
.empty { color: var(--ink-soft); }
.compare-form { margin: 0; }
.compare-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.unranked-h, .compact-h { font-size: 1rem; color: var(--ink-soft); }
.card-verdict { display: flex; flex-direction: column; gap: .25rem; }
.card-verdict .verdict { align-self: flex-start; margin: 0; }
.cashout { margin: 0; font-size: .92rem; }
.value-recalc { font-weight: 700; color: var(--ink-soft); }
.badge-sig { border-color: #ecc98a; background: var(--cond-bg); color: var(--cond); font-weight: 600; }
.badge-norisk { border-color: #9fd0b2; background: var(--worth-bg); color: var(--worth); font-weight: 600; }
.licence-badge.licence-ok { border-color: #9fd0b2; }
.licence-badge.licence-bad { border-color: #f0b8b8; background: var(--skip-bg); color: var(--skip); }
.licence-badge a { display: inline-block; padding: .55rem 0; margin: -.55rem 0; }
.card-meta a, .card-foot a { display: inline-block; padding: .5rem 0; margin: -.5rem 0; }
.card-foot { font-size: .85rem; color: var(--ink-soft); margin: 0; border-top: 1px solid var(--line); padding-top: .5rem; }
.card-stale { border-color: #ecc98a; }
.stale .icon { margin-right: .2rem; }
.offer-card { max-width: 40rem; margin: 1rem 0 1.5rem; }
.offer-card .card { border-width: 2px; }
.compact-item { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; }
.compact-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.compact-title { font-weight: 600; display: inline-block; padding: .3rem 0; }
.compact-op { font-size: .88rem; color: var(--ink-soft); }
.compact-side { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.compact-value { font-weight: 700; }
.band-info { background: #e8f1f7; border-color: #b5d0e2; }
.band-title { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; margin: 0 0 .4rem; }
.band-sub { font-size: 1rem; margin: .8rem 0 .3rem; }
.band-tag-ended, .band-tag-licence, .band-tag-unverified, .band-tag-inactive { background: var(--skip-bg); border-color: #f0b8b8; color: var(--skip); }
.band-tag-recalculating { background: #e8f1f7; border-color: #b5d0e2; }
.banded li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; }
.target-note { display: none; }
.target-note:target { display: block; }
.licence-block { border: 1px solid var(--line); border-left-width: 6px; border-radius: var(--radius); padding: .4rem 1rem .2rem; margin: 1rem 0 1.5rem; }
.licence-block.licence-ok { border-left-color: var(--worth); }
.licence-block.licence-bad { border-left-color: var(--skip); }
.licence-block h2 { margin-top: .6rem; font-size: 1.15rem; }
.licence-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.licence-ok .licence-status .icon { color: var(--worth); }
.licence-bad .licence-status .icon { color: var(--skip); }
.timeline .tl-head { font-weight: 600; margin: 0 0 .2rem; }
.timeline .tl-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .3rem; }
.timeline .tl-unfavourable, .timeline .tl-mixed { border-left: 3px solid var(--skip); margin-left: -3px; }
.timeline .tl-favourable { border-left: 3px solid var(--worth); margin-left: -3px; }
.dir-unfavourable, .dir-mixed { background: var(--skip-bg); border-color: #f0b8b8; color: var(--skip); }
.dir-favourable { background: var(--worth-bg); border-color: #9fd0b2; color: var(--worth); }
.compare-table th[scope=col] { min-width: 12rem; }
.compare-table th[scope=row] { white-space: nowrap; }
.report-form textarea { width: 100%; max-width: 40rem; }
.report-link a { display: inline-block; padding: .55rem 0; min-height: 44px; }

/* hub, language home, licence, changes and calculator pages */
.notice, .note { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--bg-soft); padding: .7rem 1rem; margin: 0 0 1rem; }
.note { border-left-color: var(--ink-soft); font-size: .95rem; }
[data-flash][hidden] { display: none; }
[data-flash]:target { display: block; }
.form, .calc-form, .refine-form, .licence-search { display: grid; gap: .8rem; max-width: 40rem; margin: 0 0 1.5rem; }
.form label, .calc-form label { display: grid; gap: .25rem; font-weight: 600; }
.form input, .form textarea, .form select, .calc-form input, .calc-form select, .licence-search input { font: inherit; min-height: 44px; padding: .45rem .6rem; border: 1px solid #8a94a3; border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; }
.form textarea { min-height: 8rem; }
.form-error { color: var(--skip); background: var(--skip-bg); border-radius: 6px; padding: .4rem .7rem; margin: 0 0 .8rem; }
.licence-search { grid-template-columns: 1fr auto; align-items: end; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .6rem; font-size: .85rem; background: var(--bg-soft); }
.tag-favourable { background: var(--worth-bg); border-color: #9fd0b2; color: var(--worth); }
.tag-unfavourable, .tag-mixed { background: var(--skip-bg); border-color: #f0b8b8; color: var(--skip); }
.tag-neutral { color: var(--ink-soft); }
.change-list, .selector-list, .licence-list, .helpline-list, .author-list, .calc-list, .weeks, .market-links { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.change-list > li, .change, .licence-list > li, .helpline-list > li, .author-list > li, .calc-list > li, .weeks > li { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.selector-list > li { margin: 0 0 1rem; }
.selector-markets, .market-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.selector-markets a, .market-links a, .licence-list a, .author-list a, .calc-list a, .weeks a, .week-nav a { display: inline-block; padding: .4rem 0; min-height: 44px; }
.market-block { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1rem .6rem; margin: 0 0 1.2rem; }
.verdict-no { color: var(--ink-soft); font-style: italic; }
.week-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.params { font-variant-numeric: tabular-nums; }
@media (min-width: 40em) { .params td:last-child { white-space: nowrap; } }
.method-people { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
.method-people dt { font-weight: 600; }
.method-people dd { margin: 0; }
.calc-result { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem 1rem .8rem; margin: 0 0 1.5rem; background: var(--bg-soft); }
.calc-value { font-size: 1.5rem; font-weight: 700; margin: .3rem 0 .6rem; }
.calc-parts { padding-left: 1.2rem; }
.brand-line { font-size: 1.15rem; color: var(--ink-soft); }
.promises { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; }
.promises > li { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.company address { font-style: normal; line-height: 1.6; }