/* pages-home: Sign-in, Home, Access tokens, Data status */

/* sign-in */
.home-signin { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 3rem 1rem; }
.home-signin-card { width: min(24rem, 100%); }
.home-signin-card > header { text-align: center; }
.home-signin-card > header > .home-brand { display: grid; margin-bottom: 1rem; color: var(--foreground); }
.home-brand small { color: var(--muted-foreground); font-size: var(--text-sm); }
.home-signin-form { display: grid; gap: 1rem; margin-top: 1rem; }
#si-msg:empty { display: none; }
.home-signin-submit { width: 100%; }
.home-signin-card > footer { justify-content: center; text-align: center; color: var(--muted-foreground); font-size: var(--text-label); }
.home-signin-note { width: min(24rem, 100%); }
.home-signin-users { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }

/* home */
/* The runs, with what each found, across the page; favourites and the data date in a row under them. */
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-section) var(--space-block); align-items: start; }
.home-runs { grid-column: 1 / -1; }
.home-side { display: contents; }
@container main (width < 36rem) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
.home-runs-table :is(td, th).wrap { min-width: 8rem; }
.home-runs-table td { vertical-align: middle; }
.home-runs-table tbody :is(td, th[scope="row"]) { padding-block: 0.75rem; }
.home-result-cell { width: 1%; }
.home-result { display: grid; grid-template-columns: 8.5rem auto; align-items: center; column-gap: 1rem; row-gap: 0.125rem; min-width: 14rem; }
.home-result > .home-result-date { grid-column: 1 / -1; color: var(--muted-foreground); font-size: var(--text-label); }
.home-result[data-state] { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; }
.home-result[data-state] > .progress { width: 6rem; }
/* A narrow main column: the tiny chart goes under the figure, and the start time may wrap, so the five columns fit. */
@container main (width < 56rem) {
  .home-result:not([data-state]) { grid-template-columns: auto; min-width: 8.5rem; row-gap: 0.375rem; }
  .home-runs-table :is(td, th).wrap { min-width: 6.5rem; }
  .home-runs-table td:last-child { white-space: normal; min-width: 5.5rem; }
}
.home-favs .item { padding-inline: 0; }
.home-favs .item > figure { align-self: flex-start; color: var(--warning); }
.home-favs .item > figure .lucide { fill: currentColor; }
.home-favs .item h3 { flex-wrap: wrap; gap: 0.25rem 0.375rem; }
.home-favs .item h3 a { white-space: nowrap; }
.home-favs .item p { display: block; }
/* Favourites side by side where the card is wide enough. */
.home-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0 1.5rem; }
.home-data-date { font-size: var(--text-figure-sm); font-weight: 600; letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }

/* access tokens */
.home-token-form, .home-token-shown { display: grid; gap: 0.75rem; }
.home-token-value { display: flex; gap: 0.5rem; align-items: center; }
.home-token-value code { flex: 1; min-width: 0; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.625rem; word-break: break-all; user-select: all; }

/* data status */
.home-ds-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.home-ds-note > span { flex: 1 1 20rem; }
.home-ds-note .btn { margin-inline-start: auto; flex: none; }
.home-ds > .alert { margin-bottom: 1rem; }
.home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
@container main (width < 36rem) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-section { margin-top: 1.5rem; }
.home-section > header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.home-section > header > p { margin-inline-start: auto; color: var(--muted-foreground); font-size: var(--text-label); }
.home-wide { min-width: 14rem; }