/*
 * Home page (index.php) only: the full-width layout, the compact title block, the Map / Cards / List switch, the
 * settlement card (one design, used by the cards view and the map view), the deadline sections and chips, the list,
 * the star and share icons, the share panel and the toast. The map's own layout and pins are in map.css.
 * Nothing scrolls on its own: the page scrolls as one.
 */
main.board-page { max-width: none; padding: 18px 24px 56px; }
/* Full width of its track: app.css centres <main> with auto margins, which would shrink a grid item to its content.
   It is also the container the layout below measures, because the ad rails take a different share of the window
   at different sizes. */
main.board-page { container-type: inline-size; container-name: board; width: 100%; margin-left: 0; margin-right: 0; }
/* Icons drawn once in index.php's sprite and referenced with <use>. Each place that shows one sets its size. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.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; }
:root { --fav: #ffd84d; --fav-soft: rgba(255, 216, 77, .16); --fav-line: rgba(255, 216, 77, .5); }

/* ---- Hero (src/views/home-head.php): the welcome, the search box and quick searches on the left; the three stats
   (links) and the "data updated" pill on the right. One column in the map's panel and on narrow pages; two columns
   once the board is wide enough. The Cards / Map / List switch sits in the board bar under the hero (cards and list)
   or beside the pill (map view, where there is no bar). ---- */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-bottom: 18px; }
.welcome-main, .welcome-side { min-width: 0; }
.welcome h1 { margin: 0 0 10px; font-size: clamp(26px, 3cqw + 12px, 46px); line-height: 1.06; letter-spacing: -.025em; }
.welcome-sub { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
.welcome-search { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 5px 5px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
                  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .28); transition: border-color .15s, box-shadow .15s; }
.welcome-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), 0 12px 32px rgba(0, 0, 0, .28); }
.welcome-search > svg { flex: none; width: 20px; height: 20px; color: var(--brand); }
.welcome-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; padding: 10px 6px; outline: none; }
.welcome-search input::placeholder { color: var(--muted); opacity: 1; }
.welcome-search .btn { flex: none; padding: 11px 20px; border-radius: 10px; font-size: 15px; }
.welcome-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.welcome-quick a { padding: 3px 11px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none;
                   transition: color .15s, border-color .15s, transform .15s; }
.welcome-quick a:hover { color: var(--brand); border-color: rgba(142, 205, 244, .45); transform: translateY(-1px); }
.welcome-side { display: flex; flex-direction: column; gap: 10px; }
.welcome .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.welcome .stat { display: block; min-width: 0; padding: 10px 14px 9px; border-radius: 12px; color: inherit; text-decoration: none;
                 transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .2s; }
@media (hover: hover) { .welcome .stat:hover { transform: translateY(-2px); border-color: rgba(142, 205, 244, .45); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } }
.welcome .stat b { font-size: 26px; }
.welcome .stat span { display: block; font-size: 12px; line-height: 1.3; }
.welcome-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
@container board (min-width: 900px) {
  .welcome { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
  .welcome-side { padding-top: 6px; }
}
@container board (max-width: 440px) {
  .welcome .stats { gap: 6px; }
  .welcome .stat { padding: 8px 10px 7px; }
  .welcome .stat b { font-size: 22px; }
  .welcome .stat span { font-size: 11px; }
  .welcome-search .btn { padding: 10px 14px; font-size: 14px; }
  .welcome-row { justify-content: flex-start; }
}

/* ---- The board bar: the deadline chips (cards view) or the list's one-line hint, with the Cards / Map / List switch at the
   right. One row between two hairlines, so the page reads hero, bar, content. ---- */
.board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 24px; padding: 10px 0;
             border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.board-bar .due-chips { margin: 0; flex: 1 1 auto; }
.board-bar .views { flex: none; margin-left: auto; }
.view-hint { flex: 1 1 320px; margin: 0; font-size: 14px; color: var(--muted); max-width: 120ch; }
.view-hint a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.view-hint a:hover { text-decoration: underline; }

/* ---- Map / Cards / List ---- */
.views { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.views a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 14px;
           text-decoration: none; transition: background-color .15s, color .15s, transform .15s, box-shadow .15s; }
.views a svg { width: 16px; height: 16px; }
.views a:hover { color: var(--ink); background: var(--soft); }
.views a:active { transform: scale(.97); }
.views a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 14px rgba(142, 205, 244, .28); }
/* ---- Deadline colours, shared by the chips, the section headings and the map's headings ---- */
.c-fav, .sec-fav, .chip-fav { --c: var(--fav); }
.sec-hot, .chip-hot { --c: var(--hot); }
.sec-warm, .chip-warm { --c: var(--warn); }
.sec-soon, .chip-soon { --c: var(--brand); }
.sec-later, .chip-later { --c: var(--money); }
.sec-none, .chip-none { --c: var(--muted); }
.sec-sent, .chip-sent { --c: var(--ftc-sent); }

/* ---- Deadline chips (cards view): All, Favorites, This week, ... Each opens that window on its own page. ---- */
.due-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.due-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
               color: var(--muted); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
.due-chips a[hidden] { display: none; }
.due-chips a i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.due-chips a svg { width: 14px; height: 14px; color: var(--fav); fill: currentColor; }
.due-chips a span { min-width: 24px; text-align: center; font-size: 12px; color: var(--ink); background: var(--soft); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.due-chips a:hover { color: var(--ink); border-color: rgba(142, 205, 244, .45); }
.due-chips a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.due-chips a[aria-current="page"] span { background: rgba(6, 18, 28, .18); color: inherit; }

/* ---- Sections: a heading and a short grid on the overview; a section's own page shows all of it, 48 a page ---- */
.sec { margin: 0 0 34px; scroll-margin-top: calc(var(--sf-topbar-h, 72px) + 12px); } /* clear of the sticky header when scrolled to */
.sec[hidden] { display: none; }
.sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sec-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.sec-head h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.sec-hot .sec-head h2 i { animation: due-pulse 1.6s ease-in-out infinite; }
.sec-head h2 svg { width: 18px; height: 18px; color: var(--fav); fill: currentColor; }
.sec-fav .sec-head h2 { color: var(--fav); }
.sec-count { font-size: 12.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-variant-numeric: tabular-nums; }
.sec-all { margin-left: auto; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sec-all:hover { text-decoration: underline; }
.sec-empty { margin: 0; padding: 26px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }

/* The grid. A section's own page, the favorites and the map's results fill as many columns as fit. */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
/* The overview's sections: a fixed number of columns, and two rows at most (fewer cards on narrow screens). */
/* The overview's sections: one row each, the urgent "Closing this week" two, so the page stays short however many settlements
   come in (fewer columns on narrow screens; "See all" opens the rest). */
.sec:not(.is-all) .sec-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sec:not(.is-all):not(.sec-hot) .sec-grid > .sc:nth-child(n+7) { display: none; }
.sec:not(.is-all).sec-hot .sec-grid > .sc:nth-child(n+13) { display: none; }
@container board (max-width: 1600px) {
  .sec:not(.is-all) .sec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sec:not(.is-all):not(.sec-hot) .sec-grid > .sc:nth-child(n+5) { display: none; }
  .sec:not(.is-all).sec-hot .sec-grid > .sc:nth-child(n+9) { display: none; }
}
@container board (max-width: 1200px) {
  .sec:not(.is-all) .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec:not(.is-all):not(.sec-hot) .sec-grid > .sc:nth-child(n+4) { display: none; }
  .sec:not(.is-all).sec-hot .sec-grid > .sc:nth-child(n+7) { display: none; }
}
@container board (max-width: 880px) {
  .sec:not(.is-all) .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec:not(.is-all):not(.sec-hot) .sec-grid > .sc:nth-child(n+3) { display: none; }
  .sec:not(.is-all).sec-hot .sec-grid > .sc:nth-child(n+5) { display: none; }
}
@container board (max-width: 540px) {
  .sec:not(.is-all) .sec-grid, .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sec:not(.is-all):not(.sec-hot) .sec-grid > .sc:nth-child(n+3) { display: none; }
  .sec:not(.is-all).sec-hot .sec-grid > .sc:nth-child(n+4) { display: none; }
}

/* ---- The card: label and star/share, title, then deadline, amount and Claim. The title link covers the card. ---- */
.sc { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px 12px 16px; background: var(--surface);
      border: 1px solid var(--line); border-radius: 12px;
      transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .sc:hover { transform: translateY(-2px); border-color: rgba(142, 205, 244, .45); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
  .sc:hover h3 a { color: var(--brand); }
}
.sc:has(a.is-clicked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); transform: scale(.985); }
.sc-top { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.sc-tools { position: relative; z-index: 2; display: flex; margin: -6px -8px -6px auto; }
@media (hover: hover) {
  .sc-tools .icon-btn { opacity: .5; }
  .sc:hover .sc-tools .icon-btn, .sc-tools .icon-btn:focus-visible, .sc-tools .icon-btn[aria-pressed="true"], .sc-tools .icon-btn[aria-expanded="true"] { opacity: 1; }
}
.sc h3 { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; letter-spacing: 0;
         display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc h3 a { color: var(--ink); text-decoration: none; transition: color .15s; }
.sc h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; } /* the whole card opens the settlement */
.sc-place { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: -2px 0 0; padding: 0;
            border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.sc-place svg { flex: none; width: 13px; height: 13px; }
.sc-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-place b { color: var(--brand); font-weight: 700; }
.sc-place:hover { color: var(--ink); }
.sc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; min-width: 0; }
.sc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-due { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-due svg { width: 14px; height: 14px; }
.sc-due.hot { color: var(--hot); font-weight: 700; }
.sc-due.warm { color: var(--warn); font-weight: 700; }
.sc-due.sent { color: var(--ftc-sent); }
.sc-amt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--money); font-weight: 700; padding-left: 19px; }
.ftc-sent .sc-amt { color: var(--muted); font-weight: 600; }
.sc-claim { position: relative; z-index: 2; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 12px; border-radius: 999px;
            background: var(--money-soft); color: var(--money); border: 1px solid rgba(79, 209, 161, .35); font-size: 12.5px; font-weight: 800; text-decoration: none;
            transition: background-color .15s, color .15s; }
.sc-claim svg { width: 12px; height: 12px; }
.sc-claim:hover { background: var(--money); color: var(--money-ink); }
.sc.ftc-sent { background: linear-gradient(180deg, var(--surface) 55%, var(--ftc-sent-soft)); }
.sc.ftc-open { background: linear-gradient(180deg, var(--surface) 55%, var(--ftc-open-soft)); }
.sc.is-fav { border-color: var(--fav-line); }
.sc.is-moved { animation: fav-moved .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes fav-moved { 0% { opacity: .2; transform: translateY(-8px) scale(.97); box-shadow: 0 0 0 4px var(--fav-line); } 100% { opacity: 1; transform: none; } }

/* Labels: one per card, at most. */
.labels { display: flex; flex-wrap: wrap; gap: 4px; }
.label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: 4px;
         background: var(--soft); color: var(--muted); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.label .ico { width: 12px; height: 12px; vertical-align: 0; }
.label.easy { background: var(--money-soft); color: var(--money); }
.label.cat { background: var(--brand-soft); color: var(--brand); }
.label.ftc-open { background: var(--ftc-open-soft); color: var(--ftc-open); }
.label.ftc-sent { background: var(--ftc-sent-soft); color: var(--ftc-sent); }

/* ---- The list ---- */
.list-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
table.list { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.list th, .list td { text-align: left; padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.list th { border-top: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: #0f1826; }
.list th.c, .list td.c { text-align: right; }
.list td.t { min-width: 260px; padding-left: 16px; }
.list td.t > a { color: var(--ink); font-weight: 700; text-decoration: none; }
.list td.t > a:hover { color: var(--brand); text-decoration: underline; }
.list td.t .labels { margin: 5px 0 0; }
.list td.t small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; max-width: 76ch; }
.list td.t details.more { margin-top: 6px; }
.list td.t .desc { max-width: 76ch; }
.list td.a { white-space: nowrap; font-weight: 700; color: var(--money); }
.list td.a.quiet { color: var(--muted); font-weight: 600; }
.list td.d { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.list td.d small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.list tr.hot td.d, .list tr.hot td.d small { color: var(--hot); }
.list tr.hot td.d small::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); margin-right: 6px; vertical-align: 1px; animation: due-pulse 1.6s ease-in-out infinite; }
.list tr.warm td.d, .list tr.warm td.d small { color: var(--warn); }
.list td.c { white-space: nowrap; }
.list td.c .btn { display: inline-block; padding: 7px 12px; font-size: 12.5px; border-radius: 7px; }
.list td.c .btn.btn-ftc-sent { padding: 5px 10px; }
.list td.c .btn-ai { display: block; margin-top: 6px; margin-left: auto; font-size: 11.5px; padding: 6px 10px; max-width: 150px; white-space: normal; text-align: center; }
.list td.c .btn-ai .ai-admin-tag { font-size: 9.5px; padding: 0 6px; margin-left: 6px; }
@media (hover: hover) { .list tbody tr:hover > td { background: rgba(142, 205, 244, .05); } }
.list tr.ftc-sent > td { background: var(--ftc-sent-soft); }
.list tr.ftc-sent > td:first-child { box-shadow: inset 4px 0 0 var(--ftc-sent); }
.list tr.ftc-open > td { background: var(--ftc-open-soft); }
.list tr.ftc-open > td:first-child { box-shadow: inset 4px 0 0 var(--ftc-open); }
.list th.x, .list td.x { width: 1%; padding-left: 4px; padding-right: 10px; }
.row-tools { display: flex; gap: 2px; justify-content: flex-end; }
.list tr.is-fav > td:first-child { box-shadow: inset 4px 0 0 var(--fav); }
.list tr.is-moved > td { animation: fav-row .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes fav-row { 0% { background-color: rgba(255, 216, 77, .22); } 100% { background-color: transparent; } }
/* Phones: each row restacks, the title block first with the star and share top right, then amount, deadline and claim. */
@container board (max-width: 640px) {
  table.list { display: block; min-width: 0; }
  .list thead { display: none; }
  .list tbody { display: block; }
  .list td.d { white-space: normal; min-width: 0; }
  .list td.c .btn-ai { max-width: 130px; }
  .list tr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t t t" "a d c";
             align-items: start; padding: 4px 0 8px; border-top: 1px solid var(--line); }
  .list tr:first-child { border-top: 0; }
  .list td { border-top: 0; padding: 6px 12px; }
  .list td.t { grid-area: t; min-width: 0; padding: 10px 76px 4px 14px; }
  .list td.a { grid-area: a; padding-left: 14px; }
  .list td.d { grid-area: d; }
  .list td.c { grid-area: c; }
  .list td.x { position: absolute; top: 4px; right: 4px; width: auto; padding: 0; }
  .list tr.is-fav > td:first-child, .list tr.ftc-sent > td:first-child, .list tr.ftc-open > td:first-child { box-shadow: none; }
  .list tr.is-fav { box-shadow: inset 4px 0 0 var(--fav); }
  .list tr.ftc-sent { background: var(--ftc-sent-soft); box-shadow: inset 4px 0 0 var(--ftc-sent); }
  .list tr.ftc-open { background: var(--ftc-open-soft); box-shadow: inset 4px 0 0 var(--ftc-open); }
}

/* ---- Star and share icons ---- */
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent;
            color: var(--muted); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, transform .15s, opacity .15s; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--ink); background: var(--soft); border-color: var(--line); }
.icon-btn:active { transform: scale(.9); }
.icon-btn.fav:hover { color: var(--fav); }
.icon-btn.fav[aria-pressed="true"] { color: var(--fav); }
.icon-btn.fav[aria-pressed="true"] svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(255, 216, 77, .45)); }
.icon-btn.share[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); border-color: rgba(142, 205, 244, .4); }
.icon-btn.is-pop svg { animation: fav-pop .5s cubic-bezier(.2, .7, .2, 1.4); }
@keyframes fav-pop { 0% { transform: scale(.55) rotate(-18deg); } 60% { transform: scale(1.3) rotate(6deg); } 100% { transform: none; } }

/* ---- Share panel (one for the page, placed under the button that opened it) ---- */
.share-menu { position: absolute; z-index: 1150; width: 320px; max-width: calc(100vw - 16px); padding: 14px 14px 12px; background: var(--surface);
              border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, .62), 0 0 0 1px rgba(142, 205, 244, .06);
              animation: share-in .18s cubic-bezier(.2, .7, .2, 1); }
.share-menu[hidden] { display: none; }
@keyframes share-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.share-kicker { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.share-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.share-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px 7px; border-radius: 10px; color: var(--muted); font-size: 11.5px;
                font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s, transform .15s; }
.share-grid a:hover, .share-grid a:focus-visible { background: var(--soft); color: var(--ink); }
.share-grid a:active { transform: scale(.95); }
.share-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .15s; }
.share-grid a:hover .share-ico { transform: translateY(-2px); }
.share-ico svg { width: 21px; height: 21px; }
.share-copy { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.share-copy input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.share-copy button { flex: none; font: inherit; font-size: 13px; font-weight: 700; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.share-copy button.is-done { background: var(--money); color: var(--money-ink); }
.share-native { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 700;
                color: var(--brand); background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.share-native svg { width: 16px; height: 16px; }
.share-native:hover { background: var(--soft); }

/* ---- Toast: what just happened, at the bottom of the screen ---- */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 1200; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
         padding: 11px 18px 11px 14px; border-radius: 12px; background: #0a121c; color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--fav);
         font-size: 14px; font-weight: 600; box-shadow: 0 14px 36px rgba(0, 0, 0, .55); transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
         transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.toast svg { flex: none; width: 18px; height: 18px; color: var(--fav); fill: currentColor; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-on button { pointer-events: auto; }
.toast button { flex: none; margin-left: 4px; font: inherit; font-size: 13px; font-weight: 800; color: var(--fav); background: var(--fav-soft); border: 1px solid var(--fav-line);
                border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.toast button:hover { background: rgba(255, 216, 77, .26); }

@media (max-width: 700px) { main.board-page { padding: 16px 14px 48px; } .welcome h1 { font-size: clamp(24px, 7.2vw, 30px); } }
@media (prefers-reduced-motion: reduce) {
  .sec-hot .sec-head h2 i, .list tr.hot td.d small::before { animation: none; }
  .icon-btn.is-pop svg, .sc.is-moved, .list tr.is-moved > td, .share-menu { animation: none; }
  .toast { transition: none; }
}


/* ---- "Also on file": three tiles under the deadline sections for what isn't an open claim (index.php). Recently closed
   (red, with the last few deadlines), not open for claims yet (lavender) and FTC payouts already sent (amber). Each
   tile is one link into the full list; the closed tile also lists its cases. ---- */
.more-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 8px 0 0; }
.tile { --c: var(--muted); position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px 14px; border-radius: 14px;
        background: linear-gradient(180deg, var(--surface) 60%, color-mix(in srgb, var(--c) 10%, var(--surface)) 100%); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
        transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .2s; }
.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 14px 14px;
               background: linear-gradient(90deg, transparent, var(--c) 30%, var(--c) 70%, transparent); opacity: .7; }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); } }
.tile-closed { --c: var(--past); } .tile-soon { --c: var(--soon); } .tile-ftc { --c: var(--ftc-sent); }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.tile-ico svg { width: 18px; height: 18px; }
.tile-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.tile-head h2 a { color: var(--ink); text-decoration: none; }
.tile-head h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }   /* the whole tile opens the list */
.tile-n { margin-left: auto; font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-variant-numeric: tabular-nums; }
.tile > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.tile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tile-list li { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.4; min-width: 0; }
.tile-list a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tile-list a:hover { color: var(--c); text-decoration: underline; }
.tile-list small { flex: none; margin-left: auto; color: var(--c); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-more { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--c); }
.tile-more svg { width: 15px; height: 15px; transition: transform .15s; }
.tile:hover .tile-more svg { transform: translateX(3px); }

/* ---- From the court record (src/views/court-box.php): the research panel beside "New in court" (the 10 newest class action
   lawsuits). Neutral colours on purpose: these are lawsuits, not settlements, and nothing in them can be claimed. On the
   map view both are panels in the column (.mapx-panel), one above the other. ---- */
.record { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 12px; margin: 28px 0 0; }
@container board (max-width: 1000px) { .record { grid-template-columns: minmax(0, 1fr); } }
.court-box { margin: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.court-box.mapx-panel { margin: 0 0 12px; }
.court-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.court-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.court-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.court-ico svg { width: 18px; height: 18px; }
.court-tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
             color: var(--muted); background: var(--soft); border: 1px solid var(--line); }
.court-sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; max-width: 80ch; }
.court-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.court-box.mapx-panel .court-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.court-list a { display: grid; gap: 3px; height: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--page);
                color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.court-list a:hover { border-color: var(--brand); transform: translateY(-1px); }
.court-list a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.court-co { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.court-meta { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.court-foot { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .court-list a { transition: none; } .court-list a:hover { transform: none; } }

/* The research panel: icon chip, two lines, three figures from the analysis, one button and a link to the case index. */
.research-box { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(195, 166, 255, .35);
                background: linear-gradient(160deg, rgba(195, 166, 255, .14) 0%, var(--surface) 60%); }
.research-box.mapx-panel { margin: 0 0 12px; padding: 14px 16px; gap: 10px; }
.research-box.mapx-panel .research-figs, .research-box.mapx-panel .research-text p:last-child { display: none; }   /* in the map column: title and button only */
.research-box.mapx-panel .research-ico { width: 36px; height: 36px; border-radius: 10px; }
.research-box.mapx-panel .research-ico svg { width: 19px; height: 19px; }
.research-in { display: flex; align-items: flex-start; gap: 14px; }
.research-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--soon); background: rgba(195, 166, 255, .16); box-shadow: inset 0 0 0 1px rgba(195, 166, 255, .3); }
.research-ico svg { width: 24px; height: 24px; }
.research-text { flex: 1 1 auto; min-width: 0; }
.research-eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soon); }
.research-text h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.research-text p:last-child { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch; }
.research-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.research-figs li { padding: 10px 12px; border-radius: 10px; background: rgba(13, 21, 32, .55); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.research-figs b { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--soon); font-variant-numeric: tabular-nums; }
.research-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.research-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 15px; }
.research-cta svg { width: 16px; height: 16px; }
.research-alt { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--brand); text-decoration: none; }
.research-alt svg { width: 15px; height: 15px; }
.research-alt:hover { text-decoration: underline; }
@container board (max-width: 440px) { .research-figs { grid-template-columns: 1fr 1fr; } }

/* Phones: the toast sits above the bottom tab bar (site.css). */
@media (max-width: 699px) { .toast { bottom: calc(var(--sf-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 16px); } }