/* Home's own Calma rules: the team home's header on the sky, and its
   grid of apps. The bar, the menus and the door are estilo's (chrome.css),
   the rest estilo's theme (theme.css) and rastrillo's tokens.css. */

/* tokens.css reserves the scrollbar's gutter on every page, so short and
   long pages are the same width. Under the sky that reserved strip is a
   visible pale band down the trailing edge, so Home takes the documented
   opt-out; its pages have no layout that a scrollbar's arrival could jolt. */
:root {
  --rst-scrollbar-gutter: auto;
}

/* The door (sign-in, id.*'s account pages, signed out) is estilo's:
   chrome.css draws the card on the sky under the bar. */

/* Your home: the team home's header on the sky, then a grid of every
   app, each one tile. An app you can open is a link across its whole
   tile; one you cannot yet is shown quieter, with its status saying why.

   The header spans the page under the bar, as the door does, so the sky
   is never boxed in; its padding puts the words back on the page's
   column. The sky fades in and out inside the band (sky.css's mask), so
   neither edge cuts it. */
:root:has([home-hub-head]) { overflow-x: clip; }
[home-hub-head] {
  box-sizing: border-box;
  margin: calc(-1 * var(--rst-sp-5)) calc(50% - 50vw) var(--rst-sp-5);
  padding: 64px calc(50vw - 50%) 48px;
  min-block-size: 240px;
  /* A sky's layers overhang its box by 12% above and below and fade out
     from 58% to 92% (sky.css): 260px placed 50px up has faded out by
     about 220px, inside the band's 240. */
  --estilo-sky-top: -50px;
  --estilo-sky-height: 260px;
}
[home-hub-head] h1 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.03em;
}
[home-hub-lede] {
  margin: 0;
  color: var(--rst-text-muted);
}
[home-apps] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
[home-app] {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px 18px;
  border-radius: 18px;
  background: var(--rst-surface);
  box-shadow: 0 0 0 1px var(--rst-line);
  color: var(--rst-text);
  text-align: center;
  text-decoration: none;
}
a[home-app]:hover { box-shadow: 0 0 0 1px var(--rst-line), var(--rst-shadow-lift); }
[home-app] img { margin-bottom: 4px; filter: drop-shadow(0 5px 9px rgba(20, 24, 33, 0.16)); }
[home-app] b { font-weight: 620; }
[home-app] small { color: var(--rst-text-faint); font-size: 0.8rem; }
div[home-app] img { filter: saturate(0.6); opacity: 0.8; }

/* In dark, the sky runs brighter (estilo's gain) and muted text on its
   brightest band falls under 4.5:1 (review, discussion 75). So the team
   home's sky is quieter here, and text that sits on it is full-strength.
   The door's text sits on its card, so the door keeps estilo's sky. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [home-hub-head] { --estilo-sky-strength: 0.32; }
  :root:not([data-theme="light"]) [home-hub-lede] { color: var(--rst-text); }
}
:root[data-theme="dark"] [home-hub-head] { --estilo-sky-strength: 0.32; }
:root[data-theme="dark"] [home-hub-lede] { color: var(--rst-text); }

/* The team chooser: one button per team, stacked. */
[home-teams] { display: grid; justify-items: start; gap: var(--rst-sp-2); }