/* ux-pass.css: layout and flow for the homepage and /blues (ux-pass, 2026-10-15).
   Loaded after style.css. No colours of its own: everything reads the theme
   variables, so Midnight, Ocean and every theme.js preset keep working.
   Hand-sync rule: billing/site only (community/site has no homepage or /blues). */

/* ---------- Homepage (.page--home) ---------- */
.hero-cta { margin-top: 0.25rem; }
.text-link-accent { color: var(--accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.text-link-accent::after { content: " →"; }
.text-link-accent:hover { text-decoration: underline; }

.apps-card .app-tile { display: flex; flex-direction: column; gap: 0.5rem; }
.apps-card .app-tile h3 { margin: 0; }
.app-open { margin-top: auto; padding-top: 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; }

@media (min-width: 60rem) {
  .page--home > .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 2rem;
    text-align: left;
  }
  .page--home > .hero > :not(.hero-cta) { grid-column: 1; }
  .page--home > .hero .hero-title { justify-content: flex-start; font-size: 2.25rem; }
  .page--home > .hero > p:last-of-type { margin-bottom: 0; max-width: 44ch; }
  .page--home > .hero > .hero-cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; }

  .page--home > .apps-card { text-align: left; padding: 2rem 2.5rem 2.25rem; }
  /* Five apps since 2026-10-15 (Learn and Scales joined); the export was
     drawn for four, and repeat(4) left Tuner alone on a second row. */
  .page--home > .apps-card .app-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Fundraiser beside the encyclopedia instead of two full-width rows. */
  .page--home > .blues-feature { grid-column: span 2; text-align: left; }
  .page--home > .encyclopedia-card { grid-column: auto; text-align: left; padding: 1.75rem; }

  .page--home > .initiatives-card,
  .page--home > .support-card,
  .page--home > .m3c-card { text-align: left; padding: 1.75rem; }
  /* The amount buttons centred their figures by inheriting the card's
     text-align; keep them centred now the card reads left. */
  .page--home > .support-card .amount span { text-align: center; }
}

/* The encyclopedia's three tiles as a link list (all widths). The tile
   markup and its stretched-link a11y stay; only the drawing changes. */
.encyclopedia-card .app-list { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; }
.encyclopedia-card .app-tile { padding: 0.65rem 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; }
.encyclopedia-card .app-tile h3 { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 500; margin: 0; }
.encyclopedia-card .app-tile h3::after { content: "→"; color: var(--muted); }
.encyclopedia-card .app-tile p { display: none; }
.encyclopedia-card > .text-link { display: none; }

/* Phone: 2×2 app tiles with the description trimmed to two lines. */
@media (max-width: 40rem) {
  body { padding: 1rem; }
  .card { padding: 1.25rem; }
  .page { padding: 1rem 0; gap: 1rem; }
  .apps-card { text-align: left; }
  .apps-card .app-list { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  /* An odd last tile (five apps) takes the whole row, not half of it. */
  .apps-card .app-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .apps-card .app-tile { padding: 0.9rem; }
  .apps-card .app-tile p {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .app-open { display: none; }
  .hero-cta { display: block; width: 100%; text-align: center; }
}

/* ---------- /blues (.blues-page) ---------- */
@media (min-width: 60rem) {
  .page.blues-page {
    max-width: 68rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-auto-flow: row dense;
    align-items: start;
    column-gap: 2rem;
  }
  .blues-page > .blues-hero {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: center;
    text-align: left;
  }
  .blues-page > .blues-hero > .floyd { grid-row: 1 / span 4; width: 12rem; margin: 0; }
  .blues-page > .blues-hero > :not(.floyd) { grid-column: 2; }
  .blues-page > .blues-hero h1 { font-size: 2.6rem; }
  .blues-page > .blues-card { grid-column: 1; }
  /* The give column: the fund card in column 2, sticky, so it stays in
     reach the whole way down the story.

     The export also put the encyclopedia card in column 2, under #fund.
     Rendered (2026-10-15, 1280px) that card could only start below the
     rows #fund spans, so it sat alone at the bottom right after a
     viewport-high gap beside the last story card: a grid row is shared
     by both columns, and the sticky card needs a tall area to stick in.
     So on wide screens it closes the story column instead (order moves
     it after the story cards; source order, and so phone order and
     reading order, stay hero, give, encyclopedia, story). The span
     covers the five story cards plus that one. */
  .blues-page > #fund { grid-column: 2; grid-row: 2 / span 6; position: sticky; top: 4rem; padding: 1.5rem; }
  /* A sticky card taller than the viewport hides its own bottom (the Give
     button and the disclosure) until the story ends. The card measured
     ~760px locally without the live meter, which adds a row, so on short
     windows it scrolls inside itself instead. */
  .blues-page > #fund { max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
  .blues-page > .enc-card-link { grid-column: 1; order: 1; }
  .blues-page > .footnote { grid-column: 1 / -1; order: 2; }
  .blues-page #fund .fund-goal { font-size: 2.25rem; }
  .blues-page #fund .milestones { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .blues-hero {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    text-align: left;
  }
  .blues-hero > .floyd { grid-row: 1 / span 2; width: 5.5rem; margin: 0; border-radius: 0.6rem; }
  .blues-hero > .badge-row { grid-column: 2; margin: 0; }
  .blues-hero > h1 { grid-column: 2; font-size: 1.55rem !important; line-height: 1.15; margin: 0; }
  .blues-hero > p { grid-column: 1 / -1; margin: 1rem 0 0; }
  .blues-hero > p + p { margin-top: 0.75rem; }
  .amount span { padding: 0.8rem 0; }
}