/* 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; }
/* The sloth (Site::logoMark): the branch and the sloth are two images in one box, so the sloth swings from the branch
   (pivot at the claws) while the branch gives a little at the leaves. Without a pointer over it, a small sway every so
   often; on hover, a full pendulum swing. */
.logo-mark { position: relative; display: block; flex: none; width: 62px; aspect-ratio: 280 / 192; }
.logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-sloth { transform-origin: 39% 32%; }
.logo-branch { transform-origin: 92% 20%; }
/* The name beside the sloth: "Passive Action" (assets/brand/logo-name.png, the original letters without ".org") over the tagline. */
.logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 1px; }
.logo-word { width: 172px; }
.logo-tag { padding-left: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--sf-muted); white-space: nowrap; }
.logo:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .logo-sloth { animation: sf-idle 9s ease-in-out 2s infinite; }   /* 2026-10-25 LT: "move the logo a bit, it's sober": every 9 s, not 16 */
  .logo:hover .logo-sloth, .logo:focus-visible .logo-sloth, .foot-logo:hover .logo-sloth { animation: sf-swing 2.4s ease-in-out infinite; }
  .logo:hover .logo-branch, .logo:focus-visible .logo-branch, .foot-logo:hover .logo-branch { animation: sf-branch 2.4s ease-in-out infinite; }
}
@keyframes sf-idle { 0%, 74%, 100% { transform: rotate(0); } 80% { transform: rotate(-3.4deg); } 87% { transform: rotate(2.6deg); } 93% { transform: rotate(-1deg); } }
@keyframes sf-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(0); } 75% { transform: rotate(7deg); } }
@keyframes sf-branch { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(.9deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-.7deg); } }
.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; }
.nav-ico .nav-sloth { display: none; }   /* the sloth face: only on the phone bar (below) */
.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; } }

/* The country switch (src/views/header.php, 2026-10-26): one chip per edition (Site::EDITIONS), the flag and the country
   code, the current one lit a little. Quiet on purpose: the Donate button stays the one solid thing in the row. */
.editions { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.edition { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 7px; border-radius: 9px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--sf-muted); text-decoration: none; transition: background-color .15s, color .15s; }
.edition .flag { display: block; width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); opacity: .75; transition: opacity .15s; }
.edition:hover { color: var(--sf-ink); background: rgba(255, 255, 255, .07); }
.edition:hover .flag, .edition.is-on .flag { opacity: 1; }
.edition.is-on { color: var(--sf-ink); background: rgba(255, 255, 255, .11); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.edition:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* Donate: the one solid button in the header. Off-white on the navy, navy text and a red heart: the brightest thing in the
   row, so it stands out with no glow and no animation. 2026-10-25 LT: the green gradient with the sweeping light and the
   beating heart had to go, "stand out but still look professional". Same 12px corners as the main links and the hero's
   Search button, so it reads as part of the system, only filled. Hover lifts it a touch and brightens it to pure white. */
.donate-btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 14px; border-radius: 12px;
              font-size: 15.5px; font-weight: 800; letter-spacing: .01em; line-height: 1; color: #0b1726; text-decoration: none; white-space: nowrap;
              background: #f2f6fb;
              box-shadow: inset 0 -1px 0 rgba(10, 23, 38, .16), 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -12px rgba(0, 0, 0, .7);
              transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, background-color .18s; }
.donate-heart { display: grid; place-items: center; width: 20px; height: 20px; }
.donate-heart svg { width: 19px; height: 19px; color: #e0343f; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.donate-btn:hover { background: #fff; transform: translateY(-1px);
                    box-shadow: inset 0 -1px 0 rgba(10, 23, 38, .16), 0 2px 4px rgba(0, 0, 0, .35), 0 14px 28px -12px rgba(0, 0, 0, .75); }
.donate-btn:hover .donate-heart svg { transform: scale(1.12); }
.donate-btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 1px 2px rgba(10, 23, 38, .2), 0 1px 2px rgba(0, 0, 0, .3); }
.donate-btn:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 3px; }

/* 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 (src/views/footer.php): the brand column (logo, promise, alerts line, social profiles, data freshness), three
   link columns in their section tints, the fine print as three iconed blocks, then the base line. ---- */
.site-footer { position: relative; margin-top: 40px; border-top: 1px solid var(--sf-line); color: var(--sf-muted); font-size: 13.5px; line-height: 1.6;
               background: linear-gradient(180deg, var(--sf-bg) 0%, #0b131d 100%); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; opacity: .6;
                       background: linear-gradient(90deg, transparent 0%, var(--sf-accent) 30%, var(--sf-leaf) 70%, transparent 100%); }
.site-footer-in { max-width: none; margin: 0 auto; padding: 46px var(--gutter, 20px) 26px; display: grid; gap: 34px; }
.site-footer h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-ink); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--sf-muted); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: var(--sf-ink); }
.linklike { color: var(--sf-muted); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover { color: var(--sf-ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.foot-brand { max-width: 460px; }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; border-radius: 12px; }
.foot-logo img { display: block; height: auto; }
.foot-logo .logo-mark { width: 58px; }
.foot-logo .logo-word { width: 164px; }
.foot-tag { font-size: 15px; line-height: 1.55; color: var(--sf-ink); }
.foot-tag strong { color: var(--sf-accent); }
.foot-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; }
.foot-note:empty { display: none; }
.foot-note .ico { color: var(--sf-accent); margin-top: 3px; }
.foot-note b { color: var(--sf-ink); }
.site-footer .foot-note a { color: var(--sf-accent); font-weight: 700; }
.site-footer .foot-note a:hover { text-decoration: underline; text-underline-offset: 2px; }
.foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.site-footer .foot-social a { --c: var(--sf-accent); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--sf-ink);
                              background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
                              transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .15s, color .15s, box-shadow .15s; }
.site-footer .foot-social a:hover { transform: translateY(-2px); color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.site-footer .foot-social a:active { transform: scale(.95); }
.foot-social svg { width: 18px; height: 18px; display: block; }
.foot-refreshed { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13px; cursor: default; }
.foot-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-money); box-shadow: 0 0 0 3px rgba(79, 209, 161, .18); }
.foot-refreshed.stale .foot-dot { background: var(--sf-warn); box-shadow: 0 0 0 3px rgba(242, 200, 107, .18); }
.foot-refreshed time { color: var(--sf-ink); font-weight: 600; }
.foot-col { --c: var(--sf-accent); display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.foot-col h2 { margin-bottom: 10px; }
.foot-col h2 .ico { color: var(--c); }
.site-footer .foot-col a, .site-footer .foot-col .linklike { display: inline-flex; align-items: center; gap: 9px; padding: 5px 9px 5px 7px; margin-left: -7px; border-radius: 8px;
                                                            line-height: 1.4; text-align: left; text-decoration: none; transition: color .15s, background-color .15s; }
.site-footer .foot-col a .ico, .site-footer .foot-col .linklike .ico { color: var(--c); opacity: .72; transition: opacity .15s, transform .15s; }
.site-footer .foot-col a:hover, .site-footer .foot-col .linklike:hover { color: var(--sf-ink); background: rgba(255, 255, 255, .05); }
.site-footer .foot-col a:hover .ico, .site-footer .foot-col .linklike:hover .ico { opacity: 1; transform: translateX(1px); }
.foot-fine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.foot-fine-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .028); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.foot-fine-ico { --c: var(--sf-accent); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--c);
                 background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.foot-fine-ico svg { width: 18px; height: 18px; }
.foot-fine-item > div { min-width: 0; }
.foot-fine-item h2 { margin-bottom: 5px; font-size: 12.5px; letter-spacing: .06em; }
.foot-fine-item p { font-size: 13px; line-height: 1.55; }
.site-footer .foot-fine-item a, .site-footer .foot-base a { text-decoration: underline; text-underline-offset: 2px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--sf-line); font-size: 12.5px; }
.foot-base .sep { margin: 0 7px; opacity: .45; }
@media (max-width: 1180px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; max-width: 560px; }
  .foot-fine { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer-in { padding-top: 32px; gap: 26px; }
  .foot-fine-item { padding: 14px 16px; }
}
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---- 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: .02; } }   /* not 0: Chrome ignores paints made at opacity 0 for FCP/LCP and would only count later repaints (PageSpeed, 2026-10-25) */
@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: 140px; }
  .logo-text { gap: 4px; }
  .logo-tag { font-size: 8px; letter-spacing: .16em; }
  .topbar-side { gap: 8px; }
  .editions { padding: 2px; }
  .edition { height: 30px; padding: 0 6px; gap: 0; }
  .edition-code { display: none; }   /* flags only on a phone */
  .donate-btn { height: 38px; padding: 0 14px 0 11px; font-size: 14.5px; gap: 7px; border-radius: 10px; }
  .donate-heart { width: 18px; height: 18px; }
  .donate-heart svg { width: 17px; height: 17px; }
  .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-ico .ico-settlements { display: none; }
  .nav-ico .nav-sloth { display: block; width: 19px; height: 19px; }
  .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: 112px; }
  .logo-tag { display: none; }
  .donate-btn { padding: 0 11px 0 9px; }
  .topnav a { font-size: 10px; }
}

/* ---- Skip to content (header.php, ui.js): the first thing the Tab key reaches on every page; off screen until it has focus ---- */
.skip-link { position: absolute; left: 12px; top: -200px; z-index: 1300; padding: 10px 16px; border-radius: 10px; background: var(--sf-accent); color: var(--sf-accent-ink);
             font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: top .15s; }
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; } /* focus lands here from the skip link and the back-to-top button; the page itself needs no ring */

/* ---- Back to top (ui.js adds the button to long pages and shows it after a screen and a half of scrolling). On phones it
   sits above the tab bar; it steps aside while the cookie banner or the membership invitation is showing. ---- */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 950; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
          background: var(--sf-bg); color: var(--sf-accent); border: 1px solid var(--sf-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); cursor: pointer;
          opacity: 0; transform: translateY(12px); pointer-events: none;
          transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1), background-color .15s, border-color .15s; }
.to-top svg { width: 20px; height: 20px; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--sf-accent-soft); border-color: var(--sf-accent); }
.to-top:active { transform: scale(.94); }
.to-top:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
body:has(.consent:not([hidden])) .to-top, body:has(.invite:not([hidden])) .to-top { opacity: 0; pointer-events: none; }
@media (max-width: 699px) { .to-top { right: 12px; bottom: calc(var(--sf-tabbar-h, 66px) + env(safe-area-inset-bottom, 0px) + 12px); width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .skip-link { transition: none; } }

/* ---- Settlement page: the Share button in the crumbs row (public/case.php). The panel it opens is the home page's
   (assets/board.js, styles in board.css); .detail outranks board.css's .icon-btn, which loads after this file. ---- */
.detail .crumbs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.detail .crumbs-row .crumbs { margin: 0; }
.detail .detail-share { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 34px; padding: 0 14px 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.detail .detail-share svg { width: 16px; height: 16px; }
.detail .detail-share:hover, .detail .detail-share[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }