/* Shared by every page: header and main links, footer, cookie banner, page titles, pager, status colours, autocomplete, motion.
   The colour tokens come from app.css (--page, --surface, --brand, ...); the --sf-* names below are the same colours under the
   names this file has always used. */
:root {
  --sf-bg: #111c2a; --sf-ink: var(--ink, #e9f1f8); --sf-muted: var(--muted, #a3b6c8); --sf-line: var(--line, #263a4f);
  --sf-accent: var(--brand, #8ecdf4); --sf-accent-ink: var(--brand-ink, #06121c); --sf-accent-soft: #142a3e; --sf-shadow: 0 -4px 28px rgba(0, 0, 0, .55);
  --sf-money: var(--money, #4fd1a1); --sf-money-soft: var(--money-soft, #12382c); --sf-warn: var(--warn, #f2c86b);
  /* The section tints: each main link, page title and footer link carries the colour of its part of the site. */
  --sf-blue: #8ecdf4; --sf-teal: #5fd4d0; --sf-gold: #ffd84d; --sf-violet: #c3a6ff; --sf-amber: #f2c86b; --sf-leaf: #78c842; --sf-leaf-hi: #a2e264; --sf-leaf-lo: #4c9a22; --sf-leaf-ink: #0a1a03;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  color-scheme: dark;
}
.tint-blue { --c: var(--sf-blue); } .tint-teal { --c: var(--sf-teal); } .tint-gold { --c: var(--sf-gold); } .tint-violet { --c: var(--sf-violet); }
.tint-amber { --c: var(--sf-amber); } .tint-leaf { --c: var(--sf-leaf-hi); } .tint-green { --c: var(--sf-money); } .tint-red { --c: #ff6b6b; }
.ico { flex: none; display: inline-block; vertical-align: -3px; }

/* ---- Header: logo, the main links (icon chips with labels), then the "data updated" pill and the Donate button ----
   Wide screens: one row. Tablets: logo and the right-hand group on the first row, the links on a row of their own under them.
   Phones: the links leave the header for a tab bar fixed to the bottom of the screen (the "Phones" block near the end).
   ui.js publishes the header's real height as --sf-topbar-h for things pinned under it. */
.topbar { background: var(--sf-bg); border-bottom: 1px solid var(--sf-line); transition: box-shadow .25s; }
.topbar::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-accent) 35%, var(--sf-leaf) 100%); }
.topbar-in { max-width: none; margin: 0 auto; padding: 8px var(--gutter, 20px); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.logo { order: 0; margin-right: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 12px; }
.logo img { display: block; height: auto; }
.logo-mark { width: 62px; transform-origin: 40% 12%; }
.logo-word { width: 156px; margin-top: 4px; }
.logo:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .logo:hover .logo-mark { animation: sf-sway 1.8s ease-in-out infinite; }
}
@keyframes sf-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(3.5deg); } }

.topnav { order: 2; flex: 1 1 100%; display: flex; gap: 2px; }
.topnav a { --c: var(--sf-blue); flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 14px 6px 7px; border-radius: 12px;
            font-size: 15.5px; font-weight: 650; color: #c6d4e2; text-decoration: none; white-space: nowrap;
            transition: color .15s, background-color .15s, box-shadow .15s, transform .15s; }
.nav-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--c);
           background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
           transition: background-color .15s, color .15s, box-shadow .15s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.nav-ico svg { width: 18px; height: 18px; display: block; }
.topnav a:hover { color: var(--sf-ink); background: rgba(255, 255, 255, .045); }
.topnav a:hover .nav-ico { transform: translateY(-1px) scale(1.06); background: color-mix(in srgb, var(--c) 24%, transparent); }
.topnav a:active { transform: scale(.97); }
.topnav a:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 1px; }
.topnav a[aria-current="page"] { color: var(--sf-ink); background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.topnav a[aria-current="page"] .nav-ico { color: #06121c; background: var(--c); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--c) 75%, transparent); }
.nav-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; padding: 4px 7px; border-radius: 999px; color: var(--sf-accent); background: rgba(142, 205, 244, .14); }
.nav-tag.is-member { color: var(--sf-money); background: var(--sf-money-soft); }
.nav-tag.is-soon { color: var(--sf-violet); background: rgba(195, 166, 255, .14); }   /* membership coming soon: lavender, like not-open-yet settlements */

/* The right-hand group: the "data updated" pill (only where the row has room for it) and Donate. */
.topbar-side { order: 1; display: flex; align-items: center; gap: 12px; }
.topbar-side .updated { display: none; }
@media (min-width: 1520px) { .topbar-side .updated { display: inline-flex; } }

/* Donate: the one filled, glowing button in the header, in the logo's green. A light sweeps across it now and then. */
.donate-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
              height: 46px; padding: 0 20px 0 8px; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: .01em;
              color: var(--sf-leaf-ink); text-decoration: none; white-space: nowrap;
              background: linear-gradient(135deg, var(--sf-leaf-hi) 0%, var(--sf-leaf) 50%, var(--sf-leaf-lo) 100%);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(162, 226, 100, .4), 0 8px 26px -6px rgba(120, 200, 66, .65);
              transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, filter .2s; }
.donate-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-130%);
                      background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); }
.donate-heart { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.donate-heart svg { width: 17px; height: 17px; color: #c22d4a; transform-origin: 50% 55%; }
.donate-btn:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.05);
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(162, 226, 100, .6), 0 12px 32px -6px rgba(120, 200, 66, .85); }
.donate-btn:active { transform: translateY(0) scale(.97); }
.donate-btn:focus-visible { outline: 3px solid var(--sf-leaf-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .donate-btn::before { animation: sf-shine 6s ease-in-out 1.5s infinite; }
  .donate-heart svg { animation: sf-heartbeat 3.2s ease-in-out infinite; }
  .donate-btn:hover .donate-heart svg { animation-duration: 1.1s; }
}
@keyframes sf-shine { 0% { transform: translateX(-130%); } 18%, 100% { transform: translateX(130%); } }
@keyframes sf-heartbeat { 0%, 24%, 100% { transform: scale(1); } 7% { transform: scale(1.22); } 14% { transform: scale(1); } 19% { transform: scale(1.14); } }

/* One row once everything fits: the links sit between the logo and the right-hand group (five links, six with the membership
   on). Below these widths the links take a full row of their own under the logo. */
@media (min-width: 1150px) {
  .topbar-in:not(.has-members) .topnav { order: 1; flex: 0 1 auto; }
  .topbar-in:not(.has-members) .topnav a { flex: 0 0 auto; }
  .topbar-in:not(.has-members) .topbar-side { order: 2; }
}
@media (min-width: 1320px) {
  .topbar-in .topnav { order: 1; flex: 0 1 auto; }
  .topbar-in .topnav a { flex: 0 0 auto; }
  .topbar-in .topbar-side { order: 2; }
}
@media (min-width: 1320px) and (max-width: 1379px) { .topbar-in.has-members .nav-tag { display: none; } }

/* Sticky, frosted header on anything bigger than a phone; a shadow once the page has scrolled (ui.js adds is-scrolled to <html>). */
@media (min-width: 700px) {
  .topbar { position: sticky; top: 0; z-index: 60; background: rgba(17, 28, 42, .84); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); }
  html.is-scrolled .topbar { box-shadow: 0 10px 30px rgba(0, 0, 0, .38); }
}

/* The pill: a pulsing green dot and "Data updated 3 hours ago", amber once the data is over two days old. The full
   date and the "always confirm" reminder are in the tooltip and read out by screen readers. ui.js keeps it counting. */
.updated { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 9px; border-radius: 999px; cursor: default;
           background: rgba(10, 17, 27, .55); border: 1px solid var(--sf-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
           font-size: 12.5px; line-height: 1.3; color: var(--sf-muted); white-space: nowrap; }
.updated strong { color: var(--sf-ink); font-weight: 700; }
.updated-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.updated-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-money); box-shadow: 0 0 0 3px rgba(79, 209, 161, .18); }
.updated.fresh .updated-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sf-money); animation: sf-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes sf-ping { 70%, 100% { transform: scale(2.1); opacity: 0; } }
.updated.stale { border-color: rgba(242, 200, 107, .45); }
.updated.stale .updated-dot { background: var(--sf-warn); box-shadow: 0 0 0 3px rgba(242, 200, 107, .18); }
.updated.stale strong { color: var(--sf-warn); }
@media (prefers-reduced-motion: reduce) { .updated-dot::after { animation: none; display: none; } }

/* ---- Page titles: an icon chip in the section's tint beside the eyebrow, heading and one-line summary (every page but the home
   page and a settlement's own page). The chip is the same symbol as the page's main link. ---- */
.page-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 26px; }
.page-ico { --c: var(--sf-accent); flex: none; display: grid; place-items: center; width: 54px; height: 54px; margin-top: 2px; border-radius: 16px; color: var(--c);
            background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--c) 60%, transparent); }
.page-ico svg { width: 27px; height: 27px; display: block; }
.page-head > div { flex: 1 1 auto; min-width: 0; }
.page-head .eyebrow { margin-bottom: 6px; }
.page-head h1 { margin-bottom: 10px; }
.page-head .sub { margin-bottom: 0; }
.page-head .soon-tag { vertical-align: 1px; }
@media (max-width: 600px) {
  .page-head { gap: 12px; margin-bottom: 20px; }
  .page-ico { width: 42px; height: 42px; border-radius: 12px; margin-top: 0; }
  .page-ico svg { width: 21px; height: 21px; }
}

/* ---- AdSense sidebars: only on wide screens, and only when a rail has something in it ---- */
.ad-rail { display: none; }
@media (min-width: 1200px) {
  .page-rails:has(> .ad-rail:not(.is-empty)) {
    display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 24px; align-items: start;
    max-width: none; margin: 0 auto; padding: 0 16px;
  }
  .page-rails:has(> .ad-rail:not(.is-empty)) > .ad-rail { display: block; }
  .ad-rail-in { position: sticky; top: calc(var(--sf-topbar-h, 72px) + 4px); padding-top: 24px; }
}
@media (min-width: 1680px) {
  .page-rails:has(> .ad-rail:not(.is-empty)) { grid-template-columns: 300px minmax(0, 1fr) 300px; }
}
.ad-label { display: block; text-align: center; font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em;
            text-transform: uppercase; color: var(--sf-muted); margin-bottom: 6px; }
.ad-preview { min-height: 600px; border: 2px dashed var(--sf-line); border-radius: 10px; display: grid; place-content: center; gap: 4px;
              text-align: center; color: var(--sf-muted); font: 600 14px/1.4 ui-sans-serif, system-ui, sans-serif; }
.ad-preview small { display: block; font-weight: 400; }

/* ---- Footer: brand, Explore and Your privacy columns, the two legal texts, the license row ---- */
.site-footer { margin-top: 24px; border-top: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-muted); font-size: 13.5px; line-height: 1.6; }
.site-footer-in { max-width: none; margin: 0 auto; padding: 36px var(--gutter, 20px) 30px; display: grid; gap: 28px; }
.site-footer h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--sf-ink); }
.site-footer h2 .ico { color: var(--sf-accent); }
.site-footer p { margin: 0; max-width: 90ch; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
.foot-brand { max-width: 520px; }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; text-decoration: none; border-radius: 12px; }
.foot-logo img { display: block; height: auto; }
.foot-logo img:first-child { width: 54px; }
.foot-logo img:last-child { width: 136px; margin-top: 3px; }
.foot-tag { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--sf-ink); }
.foot-tag .ico { color: var(--sf-accent); margin-top: 3px; }
.foot-tag strong { color: var(--sf-accent); }
.foot-note { margin-top: 8px; padding-left: 26px; }
.foot-note b { color: var(--sf-ink); }
.foot-refreshed { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding-left: 1px; font-size: 13px; }
.foot-refreshed .ico { color: var(--sf-money); }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foot-links h2 { margin-bottom: 8px; }
.site-footer .foot-links a, .site-footer .foot-links .linklike { display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 6px; margin-left: -6px; border-radius: 8px; text-decoration: none;
                                       color: var(--sf-muted); font: inherit; background: none; border: 0; cursor: pointer; text-align: left; transition: color .15s, background-color .15s; }
.site-footer .foot-links a .ico, .site-footer .foot-links .linklike .ico { color: var(--sf-accent); opacity: .8; }
.site-footer .foot-links a:hover, .site-footer .foot-links .linklike:hover { color: var(--sf-ink); background: rgba(255, 255, 255, .05); }
.site-footer .foot-links a:hover .ico, .site-footer .foot-links .linklike:hover .ico { opacity: 1; }
.foot-legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px 40px; padding-top: 24px; border-top: 1px solid var(--sf-line); }
.site-footer .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; border-top: 1px solid var(--sf-line); padding-top: 16px; font-size: 12.5px; }
.site-footer .license { flex: 1 1 420px; }
.site-footer a, .linklike { color: var(--sf-muted); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover, .linklike:hover { color: var(--sf-ink); }
.site-footer .operator { margin-left: auto; text-align: right; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } .site-footer-in { padding-top: 28px; gap: 22px; } }

/* ---- Cookie banner ---- */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000; max-width: 900px; margin: 0 auto;
           background: var(--sf-bg); color: var(--sf-ink); border: 1px solid var(--sf-line); border-radius: 14px;
           box-shadow: var(--sf-shadow); padding: 18px 20px; display: flex; gap: 14px 24px; align-items: center;
           flex-wrap: wrap; font: 14px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 400px; }
.consent strong { display: block; font-size: 15px; margin-bottom: 2px; }
.consent a { color: var(--sf-accent); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Both choices get identical weight: refusing must be as easy as accepting. */
.consent button { font: inherit; font-weight: 700; border-radius: 8px; padding: 10px 18px; cursor: pointer;
                  border: 2px solid var(--sf-accent); background: var(--sf-accent); color: var(--sf-accent-ink); }
.consent button:hover { filter: brightness(1.08); }
.consent button:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
@media (max-width: 520px) { .consent-actions { width: 100%; } .consent button { flex: 1; } }

/* ---- FTC refund programs: tinted, iconed notice so nobody mistakes a finished payout for a claim (Site::refundNotice) ---- */
:root { --ftc-sent: #f2c86b; --ftc-sent-soft: #2b2513; --ftc-sent-line: #6b5726; --ftc-open: #8ecdf4; --ftc-open-soft: #132a40; --ftc-open-line: #2f5d84; }
.ftc-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; }
.ftc-chip.ftc-sent { background: var(--ftc-sent-soft); color: var(--ftc-sent); border-color: var(--ftc-sent-line); }
.ftc-chip.ftc-open { background: var(--ftc-open-soft); color: var(--ftc-open); border-color: var(--ftc-open-line); }
.ftc-chip .ico { width: 13px; height: 13px; vertical-align: 0; }
.card.ftc-sent, .detail-main.ftc-sent { background: var(--ftc-sent-soft); border: 2px solid var(--ftc-sent-line); }
.card.ftc-open, .detail-main.ftc-open { background: var(--ftc-open-soft); border: 2px solid var(--ftc-open-line); }
.ftc-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
            font-size: 14px; line-height: 1.5; border-left: 4px solid; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ftc-note .ico { width: 20px; height: 20px; margin-top: 1px; }
.ftc-note b { display: block; }
.ftc-note.ftc-sent { background: rgba(242, 200, 107, .1); border-color: var(--ftc-sent); color: var(--ftc-sent); }
.ftc-note.ftc-open { background: rgba(142, 205, 244, .1); border-color: var(--ftc-open); color: var(--ftc-open); }
.ftc-note span { color: inherit; }
.ftc-note span small { display: block; color: #e9f1f8; font-size: 14px; }
/* "Read the FTC notice": deliberately quiet, so it doesn't look like a money button. */
.btn.btn-ftc-sent { background: transparent; color: var(--ftc-sent); border: 2px solid var(--ftc-sent-line); padding: 11px 22px; }
.btn.btn-ftc-sent:hover { border-color: var(--ftc-sent); }
tr.ftc-sent > td { background: var(--ftc-sent-soft); }
tr.ftc-sent > td:first-child { box-shadow: inset 4px 0 0 var(--ftc-sent); }
tr.ftc-open > td { background: var(--ftc-open-soft); }
tr.ftc-open > td:first-child { box-shadow: inset 4px 0 0 var(--ftc-open); }
td.title .ftc-chip { margin: 4px 0 2px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
a.ftc-link { color: var(--ftc-sent); font-weight: 600; font-size: 13px; white-space: nowrap; }

/* ---- Search autocomplete (assets/suggest.js, public/suggest.php): a panel under the search box with open settlements
   first, then companies from the case index, then "Search ... for" rows. Rows are links; the highlighted one is
   is-active. Lives on the home page's hero box and the case index's box. ---- */
.sugg-host { position: relative; }
.sugg { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1100; padding: 6px; text-align: left;
        background: #0f1826; border: 1px solid var(--sf-line); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .62), 0 0 0 1px rgba(142, 205, 244, .06);
        max-height: min(72vh, 620px); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: sugg-in .16s cubic-bezier(.2, .7, .2, 1); }
.sugg[hidden] { display: none; }
@keyframes sugg-in { from { opacity: 0; transform: translateY(-4px); } }
.sugg-group + .sugg-group, .sugg-group + .sugg-foot { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sf-line); }
.sugg-head { padding: 7px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-accent); }
.sugg-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px;
             color: var(--sf-ink); font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none; cursor: pointer; }
.sugg-item.is-active { background: var(--sf-accent-soft); color: var(--sf-ink); box-shadow: inset 0 0 0 1px rgba(142, 205, 244, .34); }
.sugg-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-t b { color: var(--sf-accent); font-weight: 800; }
.sugg-m { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--sf-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugg-due.hot { color: #ffa15c; font-weight: 700; }
.sugg-due.warm { color: var(--sf-warn); font-weight: 700; }
.sugg-amt { color: var(--sf-money); font-weight: 700; }
.sugg-all { font-weight: 700; color: var(--sf-accent); }
.sugg-all .sugg-t { white-space: normal; }
.sugg-arrow { flex: none; }
@media (max-width: 520px) {
  .sugg-item { font-size: 14px; padding: 9px 10px; }
  .sugg-m { font-size: 12px; gap: 8px; }
  .sugg-amt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sugg { animation: none; } }

/* ---- Motion (assets/ui.js): smooth scrolling, page transitions, cards sliding in. All of it stops for prefers-reduced-motion. ---- */
:root { --sf-past: #ff6b6b; --sf-past-soft: rgba(255, 90, 90, .14); --sf-past-line: rgba(255, 107, 107, .34); }
body { background-image: radial-gradient(900px 420px at 50% -140px, rgba(142, 205, 244, .14), transparent 70%); background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body { animation: sf-page-in .36s ease-out both; }
  main { animation: sf-main-in .46s cubic-bezier(.2, .7, .2, 1) both; }
  html.is-leaving body { animation: sf-page-out .2s ease-in both; }
  html.is-leaving main { animation: sf-main-out .2s ease-in both; }
  .reveal { opacity: 0; transform: translateY(18px); }
}
html.is-leaving { cursor: progress; }
@keyframes sf-page-in { from { opacity: 0; } }
@keyframes sf-main-in { from { transform: translateY(14px); } }
@keyframes sf-page-out { to { opacity: 0; } }
@keyframes sf-main-out { to { transform: translateY(-10px); } }
a.is-clicked { opacity: .75; }


/* ---- Pager: previous / next with a "show N per page" dropdown in the middle ---- */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 28px 0 0; padding: 10px 0;
         border-top: 1px solid var(--sf-line); color: var(--sf-muted); font-size: 15px; }
.pager > :first-child { justify-self: start; }
.pager > :last-child { justify-self: end; }
.pager > a { color: var(--sf-accent); text-decoration: none; font-weight: 700; padding: 10px 14px; border-radius: 8px; transition: background-color .15s, transform .15s; }
.pager > a:hover { background: var(--sf-accent-soft); }
.pager > a:active { transform: scale(.97); }
.pager-mid { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.pager-count { font-variant-numeric: tabular-nums; }
.per-page { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.per-page label { font-size: 13px; font-weight: 600; }
.per-page select { -webkit-appearance: none; appearance: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--sf-ink); cursor: pointer;
                   border: 1px solid var(--sf-line); border-radius: 8px; padding: 8px 34px 8px 12px; background-color: var(--sf-bg);
                   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ecdf4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
                   background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; transition: border-color .15s; }
.per-page select:hover { border-color: var(--sf-accent); }
.per-page button { font: inherit; font-weight: 700; color: var(--sf-accent-ink); background: var(--sf-accent); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-mid { grid-column: 1 / -1; order: -1; }
}

/* ---- Closed settlements: an X and a red fade at the bottom, so a passed deadline reads at a glance ---- */
.closed-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-past); white-space: nowrap; }
.closed-tag .ico { width: 15px; height: 15px; vertical-align: 0; }
tr.past > td { background: linear-gradient(180deg, rgba(255, 90, 90, 0) 30%, var(--sf-past-soft) 100%); }
tr.past > td:first-child { box-shadow: inset 4px 0 0 var(--sf-past); }
tr.past td.title > a { color: var(--sf-muted); }
tr.past .dl.past, tr.past .dl.past small { color: var(--sf-past); font-weight: 700; }
td.title .closed-tag { margin: 4px 0 2px; }

/* ---- No longer listed: the source dropped it while the deadline still looks open. Amber, a strong hint rather than proof. ---- */
:root { --sf-unlisted: #f2c86b; --sf-unlisted-soft: rgba(242, 200, 107, .12); }
.closed-tag.unlisted { color: var(--sf-unlisted); text-transform: none; letter-spacing: 0; font-weight: 700; }
tr.unlisted > td { background: linear-gradient(180deg, rgba(242, 200, 107, 0) 30%, var(--sf-unlisted-soft) 100%); }
tr.unlisted > td:first-child { box-shadow: inset 4px 0 0 var(--sf-unlisted); }
tr.unlisted td.title > a { color: var(--sf-muted); }
tr.unlisted .dl .unlisted-since { color: var(--sf-unlisted); font-weight: 700; }

/* ---- Not open for claims yet: approved or announced, no deadline. Lavender, so it reads as "coming", not "closed". ---- */
:root { --sf-soon: #c3a6ff; --sf-soon-soft: rgba(195, 166, 255, .12); }
.closed-tag.soon { color: var(--sf-soon); text-transform: none; letter-spacing: 0; font-weight: 700; }
tr.soon > td { background: linear-gradient(180deg, rgba(195, 166, 255, 0) 30%, var(--sf-soon-soft) 100%); }
tr.soon > td:first-child { box-shadow: inset 4px 0 0 var(--sf-soon); }
tr.soon .dl .soon-note { color: var(--sf-soon); font-weight: 700; }


/* ---- Phones: the main links become a tab bar fixed to the bottom of the screen, icon chip over label, like an app.
   The page gets room for it at the bottom; the cookie banner, the toast (board.css) and the invitation card sit above it.
   The membership tab stays off the bar while signup is "coming soon" (the footer links to it). ---- */
@media (max-width: 699px) {
  :root { --sf-tabbar-h: 66px; }
  body { padding-bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .topbar-in { padding: 9px 14px 10px; gap: 8px; }
  .logo-mark { width: 54px; }
  .logo-word { width: 132px; margin-top: 3px; }
  .topbar-side { gap: 8px; }
  .donate-btn { height: 40px; padding: 0 15px 0 6px; font-size: 15px; gap: 7px; }
  .donate-heart { width: 27px; height: 27px; }
  .donate-heart svg { width: 15px; height: 15px; }
  .topnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; order: 0; flex: none; gap: 2px;
            padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sf-line);
            background: rgba(17, 28, 42, .94); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
            box-shadow: 0 -8px 30px rgba(0, 0, 0, .4); }
  .topnav a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 4px 2px 3px; border-radius: 10px; font-size: 11px; letter-spacing: .01em; }
  .topnav a.is-soon { display: none; }
  .topnav a:hover, .topnav a[aria-current="page"] { background: none; box-shadow: none; }
  .topnav a:hover .nav-ico { transform: none; }
  .nav-ico { width: 30px; height: 30px; border-radius: 9px; }
  .nav-ico svg { width: 17px; height: 17px; }
  .nav-tag { display: none; }
  .consent { bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px); }
  body .invite { bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (max-width: 370px) {
  .topbar-in { column-gap: 6px; }
  .logo { gap: 6px; }
  .logo-mark { width: 44px; }
  .logo-word { width: 108px; }
  .donate-btn { padding: 0 12px 0 5px; }
  .topnav a { font-size: 10px; }
}