/* ===========================================================================
   The app's own chrome: the home screen, and the header every inner page
   wears.
   ===========================================================================

   Companion to js/app-home.js. Everything here is gated the same way that
   file's own rules in styles.css are - `body.has-tabbar` (set only by
   tabbar.js, which is native-only) plus signed-in and not in a game - so the
   website matches none of it.

   It lives in its own file rather than in styles.css because the app home is
   under active work in more than one place at once, and a separate sheet
   cannot collide with an edit to that one.
   ======================================================================== */

/* The home screen's own gate, spelled once. Every rule below rides on it:
   the tab bar exists (so this is the app), a player is signed in (the
   signed-out home is the pitch, which has its own shape), and neither a game
   nor the analyzer is on screen. */

/* =======================================================================
   1. Room for the docked Play now button
   =======================================================================
   The dock is position:fixed, so the panel it floats over reserves nothing
   for it and the panel's last section simply disappeared underneath. At
   390x844 that was the Tournaments row clipped by 36px and the whole "Recent
   games" section - the one part of this screen that shows the game being
   PLAYED by anyone - hidden completely.

   --apph-dock-h is measured and published by app-home.js (publishDockHeight);
   the tab bar's own height and the safe-area inset are already accounted for
   by the dock's `bottom`, so this only has to clear the dock itself. */
body.has-tabbar.signed-in:not(.in-game):not(.review-mode) .home-panel {
  padding-bottom: calc(var(--apph-dock-h, 82px) + 14px);
}

/* =======================================================================
   2. The daily puzzle strip
   =======================================================================
   Sits directly under the board, which is now showing the daily's position.
   It is the board's caption, so it is quiet: the board is the picture, this
   says what you are looking at and how to get into it. One row, one tap. */
body.has-tabbar.signed-in:not(.in-game):not(.review-mode) .apph-daily {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease;
}
.apph-daily:active { transform: scale(.99); background: var(--color-surface-raised); }

/* The state badge. Open is the gold star the puzzles UI already uses for a
   daily; played is a tick or a cross, because which one you got is the fact
   worth carrying back to this screen. */
.apph-daily-mark {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 15px; font-weight: 800; line-height: 1;
}
.apph-daily-mark.is-open { background: rgba(240, 198, 116, .16); color: #f0c674; }
.apph-daily-mark.is-won  { background: color-mix(in srgb, var(--p1) 20%, transparent); color: var(--p1); }
.apph-daily-mark.is-lost { background: rgba(214, 90, 74, .16); color: #d65a4a; }

.apph-daily-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.apph-daily-title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.apph-daily-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The numbers inside the subtitle carry the weight, not the words around
   them: a rating and a streak are what a returning player is scanning for. */
.apph-daily-sub b { color: var(--color-text-primary); font-weight: 800; }

.apph-daily-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 13px; font-weight: 800;
  color: var(--p1);
}

/* Very narrow phones: the subtitle is the first thing that can go - the badge
   and the title still say what this is, and the row must not wrap to two. */
@media (max-width: 340px) {
  .apph-daily-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .apph-daily:active { transform: none; }
}

/* =======================================================================
   3. The inner-page header
   =======================================================================
   Applied by js/app-header.js, which strips the redundant corner links and
   swaps the placeholder glyph for the real mark. All that is left to do here
   is centre what remains and give the mark the same treatment it gets on the
   home screen.

   Keyed on `.apph-topbar`, a class that file adds and only ever adds inside
   the app, so the website's header - where those links are the ONLY way off
   the page - is untouched. */
.apph-topbar {
  justify-content: center;
  /* The row was carrying two buttons; on its own the wordmark needs less
     space beneath it than they did. */
  margin-bottom: 16px;
}
.apph-topbar .auth-brand {
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}
/* The mark, lit the way the home screen's is: it carries no tile of its own,
   so the shadow falls from the pawns and keeps them off the flat background. */
.apph-topbar .auth-brand .apph-mark {
  display: inline-flex;
  align-items: center;
  /* The glyph it replaces was tinted by .auth-brand .brand-mark; the SVG
     brings its own colours and must not inherit that. */
  color: inherit;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

/* =======================================================================
   4. The leaderboard's standing explanations
   =======================================================================
   Both boards open with a line telling you what the board is: "Top players by
   ELO...", "Top players by puzzle rating...". On a desktop that sits in the
   margin of a wide page and costs nothing. On a phone it is two wrapped lines
   between the tabs and the first row, pushing the actual standings down - and
   it explains something the tab you just pressed, the column headed ELO, and
   the page titled Leaderboard have all already said.

   Hidden rather than deleted: leaderboard-page.js toggles #lb-sub's `hidden`
   class for its own reasons, and this must not turn into a fight over the
   same element. */
body.has-tabbar #lb-sub,
body.has-tabbar #lb-pz-sub { display: none !important; }