/* ナニモツ？ home page only (templates/home.html). Colors come from the tokens in style.css. */

/* without JavaScript #app would only say "loading" and the lobby row would stay an empty band in the sticky header:
   hide both; the <noscript> note points at the static table */
@media (scripting:none){#app,#lobbies{display:none}}

/* the page's heading, in the first paint: two lines on a phone, so that it, not a card home.js draws later, is the
   largest text on screen (the Largest Contentful Paint). A pick's reason is two lines of about 210px; a one-line 13px
   heading was smaller, and the LCP then waited for the cards and the fonts they need. Breaks between phrases
   (auto-phrase, Chrome), no short last line (pretty) */
.home-h1{font-size:15px;word-break:auto-phrase;text-wrap:pretty}

/* Splatfest: three lobbies (Pro / Open / Tricolor) instead of four */
.lobbies.n3{grid-template-columns:repeat(3,1fr)}
.lobbies.n2{grid-template-columns:repeat(2,1fr)}
.fest-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;border-radius:999px;font:800 11px/1.2 var(--body);
  background:var(--pop2-soft);color:var(--ink);white-space:nowrap}
.fest-note{margin:0;font-size:12.5px;color:var(--muted)}
.fest-soon{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:var(--pop2-soft);font-size:12.5px;font-weight:800}

/* what sits under #app (min-height 100vh, so never on screen at first): the browser lays it out, and fetches the
   fonts its text needs, only once it comes near the screen, so the picks home.js draws don't wait behind it. The
   sizes hold the place until then: the heights on a 412px phone (auto: then the real ones, once drawn). Without
   JavaScript #app is hidden and the static table is on screen, so it is drawn at once. */
#share-home{content-visibility:auto;contain-intrinsic-size:auto 104px}
.follow{content-visibility:auto;contain-intrinsic-size:auto 74px}
.today{content-visibility:auto;contain-intrinsic-size:auto 3300px}
.foot{content-visibility:auto;contain-intrinsic-size:auto 180px}

/* static part: today's rotations and top picks (site_home.py). Below the fold under #app; real content. */
.today{margin-top:34px;padding-top:6px;border-top:1px solid var(--line)}
.today [id]{scroll-margin-top:150px}         /* anchors land below the sticky header */
.today h3{font:400 15px/1.3 var(--display);margin:18px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px}
.today h3 small{font:800 11.5px/1.2 var(--body);color:var(--muted)}
.today-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px;line-height:1.45;background:var(--surface);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.today-t th,.today-t td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.today-t tbody tr:last-child td{border-bottom:0}
.today-t thead th{font-size:11px;font-weight:800;color:var(--muted);word-break:keep-all}   /* 「ルール・」「ステージ」, not a lone 「ジ」 */
/* the time column keeps each date whole ("12/28(日)", never "12/28(日" + ")"); at 28% the widest one fits at 320px
   (about 62px of M PLUS Rounded 1c 800 in a 64.6px box; tools/test_home.py checks the arithmetic) */
.today-t th:first-child{width:28%}
.today-t th:nth-child(2){width:33%}
.today-t td.t{font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:normal;word-break:keep-all}
.today-t td b{display:block}
.today-t .st{display:block;font-size:11.5px;color:var(--muted)}
.today-t ol{margin:0;padding-left:1.25em}
.today-t li a{display:block;padding:3px 0;text-decoration-color:var(--line);text-underline-offset:2px}   /* 24px tap targets */
.today-t tr[aria-current="time"] td{background:var(--pop1-soft)}
.today-t tr[aria-current="time"] .st{color:var(--ink)}           /* muted text is too faint on the pink */
.today-t tr.done td,.today-t tr.done .st{color:var(--muted)}
.today-tiers{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.today-tiers .chip{font-size:12px;padding:6px 12px;background:var(--surface);box-shadow:var(--shadow)}

/* the jump from under the picks to the share row (home.js render(); #share-home sits below #app): a soft pill, and
   the row lands clear of the sticky header, as the static table's anchors do */
.share-jump{margin:6px 0 0}
.share-jump a{display:inline-flex;align-items:center;min-height:32px;padding:6px 14px;border-radius:999px;background:var(--pop1-soft);
  color:var(--ink);font-size:12.5px;font-weight:800;text-decoration:none}
#share-home{scroll-margin-top:150px}