/*
 * 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; font-variant-numeric: tabular-nums; }   /* fixed width digits: the count-up (ui.js) never repaints larger */
.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; max-width: 100%; min-width: 0; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-due > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "Feb 10 · 109 days left" trims rather than pushing Claim out of the card */
.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" (index.php): one strip of links under the deadline sections for what they leave out: closing later,
   no deadline listed, recently closed (red), not open for claims yet (lavender) and FTC payouts already sent (amber). Each
   is a pill with its icon and count; the explanation is in the tooltip and on its own page. ---- */
.more-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.more-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.more-label svg { width: 14px; height: 14px; }
.more-item { --c: var(--muted); display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; border-radius: 12px; min-height: 42px;
             border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 650; text-decoration: none;
             transition: border-color .15s, transform .15s, box-shadow .15s; }
@media (hover: hover) { .more-item:hover { border-color: var(--c); transform: translateY(-1px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c) 70%, transparent); } }
.more-item:active { transform: scale(.98); }
.more-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.more-ico svg { width: 16px; height: 16px; }
.more-n { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-variant-numeric: tabular-nums; }
.more-arrow { width: 14px; height: 14px; color: var(--muted); transition: transform .15s, color .15s; }
.more-item:hover .more-arrow { transform: translateX(3px); color: var(--c); }
.more-later { --c: var(--money); } .more-none { --c: var(--muted); } .more-closed { --c: var(--past); } .more-soon { --c: var(--soon); } .more-sent { --c: var(--ftc-sent); }
@media (max-width: 520px) { .more-item { font-size: 13px; padding: 5px 10px 5px 6px; min-height: 38px; } .more-label { flex: 1 1 100%; } }

/* ---- From the court record (src/views/court-box.php): the research panel beside "New in court" (the 10 newest class action
   lawsuits) under it. 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(0, 1fr); gap: 14px; margin: 26px 0 0; }
.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(200px, 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; } }
/* On the cards and list views the research panel is one band across the page: the icon and the two lines, the three
   figures, then the button and the case-index link stacked at the right. Narrower pages keep the stacked panel. */
@container board (min-width: 1100px) {
  .research-box:not(.mapx-panel) { flex-direction: row; align-items: center; gap: 22px 28px; padding: 16px 22px; }
  .research-box:not(.mapx-panel) .research-in { flex: 1 1 300px; align-items: center; }
  .research-box:not(.mapx-panel) .research-text h2 { margin: 0; font-size: 17px; }
  .research-box:not(.mapx-panel) .research-text p:last-child { display: none; }   /* the title and the figures carry the band; the page has the rest */
  .research-box:not(.mapx-panel) .research-figs { flex: none; grid-template-columns: repeat(3, minmax(120px, auto)); }
  .research-box:not(.mapx-panel) .research-figs li { padding: 8px 12px; }
  .research-box:not(.mapx-panel) .research-figs b { font-size: 18px; }
  .research-box:not(.mapx-panel) .research-actions { flex: none; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
}

/* 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); } }