/* ============================================================
     common.css — shared across every page (header, footer, base
     typography/reset, buttons, chips, cookie consent banner).
     Generated from the identical rules verified present, byte-for-
     byte, across all 5 page templates.
     ============================================================ */

:root{
    --bg:#F5F8F7;
    --panel:#FFFFFF;
    --surface:#FFFFFF;
    --surface-hover:#F0F5F3;
    --border:#DEE5E2;
    --border-soft:#E8EDEB;
    --text:#141917;
    --text-dim:#5B655F;
    --text-faint:#8A948E;
    --mint:#0E9DA0;
    --mint-bright:#12C6C9;
    --mint-soft:rgba(18,198,201,0.09);
    --mint-soft-strong:rgba(18,198,201,0.16);
    --on-mint:#FFFFFF;
    --rose:#C6555C;
    --rose-soft:rgba(198,85,92,0.10);
    --rose-soft-strong:rgba(198,85,92,0.18);
    --radius-panel:22px;
    --radius-card:14px;
    --radius-chip:999px;
    --radius-btn:10px;
    --font-ui: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }
:root[data-theme="dark"]{
    --bg:#0F1412;
    --panel:#161C1A;
    --surface:#1A211F;
    --surface-hover:#212A27;
    --border:#2B342F;
    --border-soft:#232B28;
    --text:#E9F2EE;
    --text-dim:#94A49C;
    --text-faint:#65756D;
    --mint:#12C6C9;
    --mint-bright:#12C6C9;
    --mint-soft:rgba(18,198,201,0.13);
    --mint-soft-strong:rgba(18,198,201,0.22);
    --on-mint:#062120;
    --rose:#E0838A;
    --rose-soft:rgba(224,131,138,0.13);
    --rose-soft-strong:rgba(224,131,138,0.22);
  }

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-ui);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background 0.15s ease, color 0.15s ease;
  }

a{ color:inherit; }

button, select{ font-family:inherit; }

:focus-visible{
    outline:2px solid var(--mint);
    outline-offset:2px;
    border-radius:4px;
  }

.wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
  }

.header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:18px;
    padding-bottom:18px;
    gap:16px;
    flex-wrap:wrap;
  }

.nav-links a{
    text-decoration:none;
    font-size:14px;
    color:var(--text-dim);
    padding-bottom:2px;
    border-bottom:2px solid transparent;
  }

.theme-toggle:hover{ color:var(--mint); border-color:var(--mint); }

.theme-toggle svg{ width:16px; height:16px; }

details.howcalc summary::-webkit-details-marker{ display:none; }

details.howcalc summary::before{ content:"+ "; color:var(--mint); }

details.howcalc[open] summary::before{ content:"– "; }

.chip-group{ display:flex; gap:8px; flex-wrap:wrap; }

.results-meta h2{ font-size:15px; font-weight:600; margin:0; }

.results-count{ font-size:12.5px; color:var(--text-faint); font-family:var(--font-mono); }

.type-badge.fixed{ color:var(--text-dim); border-color:var(--border); background:var(--bg); }

.type-badge.dynamic{ color:var(--mint); border-color:var(--mint-soft-strong); background:var(--mint-soft); }

.footer-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border-soft);
  }

.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }

.footer-links a{ color:var(--text-faint); text-decoration:none; }

.footer-links a:hover{ color:var(--mint); text-decoration:underline; text-underline-offset:2px; }

/* ---------- cookie consent banner ---------- */
  .cookie-banner{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--panel);
    border-top:1px solid var(--border);
    box-shadow:0 -12px 32px -16px rgba(15,20,18,0.25);
  }
  .cookie-banner.is-open{ display:block; }
  .cookie-banner-inner{ padding-top:18px; padding-bottom:18px; display:flex; flex-direction:column; gap:14px; }
  .cookie-text{ font-size:12.5px; color:var(--text-dim); line-height:1.6; max-width:900px; }
  .cookie-text strong{ color:var(--text); }
  .cookie-text a{ color:var(--mint); text-decoration:none; border-bottom:1px solid var(--mint-soft-strong); }
  .cookie-text a:hover{ border-color:var(--mint); }
  .cookie-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .cookie-options{ display:flex; gap:20px; flex-wrap:wrap; }
  .cookie-option{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-dim); cursor:pointer; user-select:none; }
  .cookie-option input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--mint); cursor:pointer; flex:none; }
  .cookie-option input[disabled]{ cursor:not-allowed; opacity:0.65; }
  .cookie-actions{ display:flex; gap:10px; flex:none; }
  .cookie-btn-primary{
    background:var(--mint); color:var(--on-mint); border:none;
    padding:10px 18px; border-radius:var(--radius-btn);
    font-size:13px; font-weight:600; font-family:var(--font-ui); cursor:pointer; white-space:nowrap;
  }
  .cookie-btn-primary:hover{ background:var(--mint-bright); }
  .cookie-btn-secondary{
    background:transparent; color:var(--text-dim); border:1px solid var(--border);
    padding:10px 18px; border-radius:var(--radius-btn);
    font-size:13px; font-family:var(--font-ui); cursor:pointer; white-space:nowrap;
  }
  .cookie-btn-secondary:hover{ border-color:var(--mint); color:var(--mint); }
  .footer-links button.cookie-settings-link{
    background:none; border:none; padding:0; margin:0;
    color:var(--text-faint); font-size:12.5px; font-family:var(--font-ui);
    text-decoration:none; cursor:pointer;
  }
  .footer-links button.cookie-settings-link:hover{ color:var(--mint); text-decoration:underline; text-underline-offset:2px; }

  @media (max-width:760px){
    .cookie-row{ flex-direction:column; align-items:stretch; }
    .cookie-actions{ flex-direction:column-reverse; }
    .cookie-actions button{ width:100%; }
  }

  .spacer-30{
    display:block;clear:both;height:30px;
  }
  .advert-info{
    padding-top: 5px;
    color: #919191;
    font-size: 12px;
    text-align: center;
  }