/* Additions for the server-rendered site (site.css is the prototype's stylesheet, unchanged). */
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none; }
.skip:focus{ top:12px; }
.foot-h{ color:#fff; font-size:15px; margin:0 0 10px; font-family:var(--body); }
.side-h{ font-size:15px; margin:0 0 14px; color:var(--ink-3); font-weight:600; font-family:var(--body); }
.official .side-h{ color:var(--paper); opacity:.75; }
.h3{ font-family:var(--display); font-size:22px; letter-spacing:-.02em; margin:0 0 8px; }
.empty .h3{ font-size:26px; }
.quote-col .h3{ margin:0; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
footer .linkish{ color:#fff; background:none; border:0; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }
.linkish{ background:none; border:0; padding:0; font:inherit; color:var(--blue-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Links styled as buttons/chips (pages work without JavaScript) */
a.qchip{ color:var(--ink); text-decoration:none; }
a.qchip[aria-pressed="true"]{ color:var(--paper); }
a.qchip.qnear{ color:var(--blue-ink); } a.qchip.qnear[aria-pressed="true"]{ color:#fff; }
.seg a, .seg .seg-off{ display:inline-block; padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; color:var(--ink-2); text-decoration:none; }
.seg a[aria-pressed="true"]{ background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(21,25,59,.15); }
.seg .seg-off{ opacity:.45; cursor:not-allowed; }
.more-btn{ display:block; }
.fbar .more-btn{ grid-column:1/-1; justify-self:start; }
.fbar .more-panel{ grid-column:1/-1; margin:0; }
.more-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; grid-column:1/-1; }
.people-tools .btn{ flex:none; }

/* Pagination */
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:28px 0 8px; }
.pager-nums{ display:flex; gap:4px; }
.pager-nums a, .pager-nums span{ min-width:40px; height:40px; display:grid; place-items:center; border-radius:999px; font-weight:700; text-decoration:none; color:var(--ink); border:1.5px solid var(--line); }
.pager-nums a:hover{ border-color:var(--ink); }
.pager-nums span[aria-current]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Match quiz */
.m-step{ border:0; padding:0; margin:0; min-width:0; }
.m-step[hidden]{ display:none; }
.m-q{ display:block; padding:0; margin:0 0 8px; }
.m-opt{ display:flex; gap:12px; align-items:center; }
.m-opt input{ flex:none; }
.m-opt:has(input:checked){ border-color:var(--blue); background:var(--blue-soft); }
.m-opt:has(input:focus-visible){ outline:3px solid var(--blue); outline-offset:3px; }

/* Compare */
.cmp-x{ text-decoration:none; color:var(--ink-3); font-size:13px; margin-left:4px; }

/* Lazy map placeholders */
.lazy-map{ background:var(--mist); border-radius:var(--r-md); }
.lazy-map:has(svg), .stmap.lazy-map{ background:transparent; }
.stmap.lazy-map{ background:var(--mist); }
.rmap .zmap-slot{ min-width:0; }

/* Accessibility: visible focus on custom controls */
.ac-btn:focus-visible, .ac-heart:focus-visible, .qchip:focus-visible, .seg a:focus-visible, .chip:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

@media print{
  .skip, .pager, .qchips, .fbar, .rtools, .lang-btn, .foot-lang, .consent, .helpbox, .tray{ display:none !important; }
}

/* Contrast: secondary text darkened slightly to meet WCAG AA (4.5:1) on white and tinted backgrounds */
:root{ --ink-3:#5E6585; --good:#0E6E4D; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink-3:#A3AAD0; } }
:root[data-theme="dark"]{ --ink-3:#A3AAD0; }
/* Firm-colored text on cards: darker shade of the firm color so every color passes contrast */
.ac-firm, .ac-exp, .ac-btn:hover{ color:color-mix(in srgb, var(--hc) 62%, #10132e); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ac-firm, :root:not([data-theme="light"]) .ac-exp{ color:color-mix(in srgb, var(--hc) 55%, #fff); } }
:root[data-theme="dark"] .ac-firm, :root[data-theme="dark"] .ac-exp{ color:color-mix(in srgb, var(--hc) 55%, #fff); }

/* Checkboxes in filter bars stay next to their labels (the bar stretches text boxes, not checkboxes) */
.people-tools .pick input, .more-panel .pick input{ flex:none; min-width:0; width:18px; height:18px; padding:0; }