/* ---------- / - home launcher for the mini-apps ----------
   Layers on top of style.css (which owns the theme variables, .modal-overlay,
   .conn-status and the shared button styling) rather than restating any of
   it, so the launcher inherits every theme change the rest of the site gets.
*/

.home-body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
/* style.css's bare `header` rule stacks its children in a column (the board
   needs a second row underneath for its presence pills). The launcher has no
   second row, so it overrides back to a single left/right bar - flex-direction
   included, or the wordmark and the buttons end up stacked and centred. */
header.home-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.home-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-header-right { display: flex; align-items: center; gap: 8px; }
.home-wordmark { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

/* "Patrick ▾" - both a reminder of who the board will attribute edits to and
   the way back to the sign-in card to change it. */
.name-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-chip:hover { background: var(--surface-hover); }

/* ---------- greeting ---------- */
.home-main {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 38px 20px 48px;
  box-sizing: border-box;
}
.home-greeting {
  margin: 0 0 6px;
  font-size: clamp(24px, 5.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.home-greeting-sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- app tiles ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}
/* v6.0.1: these are app launchers, so they should feel like something you
   press rather than a link with a border. The lift is small and quick, the
   press is real (it goes *down*, past resting), and the icon leads the
   movement slightly so the tile reads as one object rather than a box with a
   picture in it. */
.app-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--raised);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(16, 18, 28, .05);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1),
              border-color .16s ease,
              box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.app-tile:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 10px 24px -6px rgba(76, 29, 149, .28), 0 2px 6px rgba(16, 18, 28, .06);
}
/* Pressed goes below resting, which is what makes it feel like a button and
   not a card that happens to move. */
.app-tile:active {
  transform: translateY(1px) scale(.988);
  box-shadow: 0 1px 2px rgba(16, 18, 28, .06);
  transition-duration: .07s;
}
.app-tile:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.app-tile-icon { flex: 0 0 auto; line-height: 0; }
.app-tile-icon svg,
.app-tile-icon img {
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 13px;
  box-shadow: 0 2px 5px rgba(55, 48, 163, .25);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s ease;
}
.app-tile:hover .app-tile-icon svg,
.app-tile:hover .app-tile-icon img {
  transform: scale(1.055) rotate(-1.2deg);
  box-shadow: 0 5px 12px rgba(55, 48, 163, .32);
}
.app-tile:active .app-tile-icon svg,
.app-tile:active .app-tile-icon img { transform: scale(1); }

/* Tiles arrive in a short stagger on first paint so the launcher assembles
   itself rather than snapping in - once. Nothing re-animates on a repaint,
   and the resting state is fully visible, so a screenshot or a
   reduced-motion viewer sees the finished page either way. */
@keyframes tileIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.app-grid .app-tile { animation: tileIn .32s cubic-bezier(.2, .7, .3, 1) backwards; }
.app-grid .app-tile:nth-child(1) { animation-delay: .02s; }
.app-grid .app-tile:nth-child(2) { animation-delay: .07s; }
.app-grid .app-tile:nth-child(3) { animation-delay: .12s; }
/* v6.4.9: added when the Team Board tile became the 3rd tile in the grid,
   pushing the (usually-hidden) Admin tile to a 4th slot that never had its
   own stagger delay before - it just snapped in with no delay whenever it
   was visible. */
.app-grid .app-tile:nth-child(4) { animation-delay: .17s; }

.app-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-tile-name { font-size: 15.5px; font-weight: 650; }
/* v6.0.1: the ellipsis clip moved off this element and onto the text inside
   it. `overflow: hidden` here was cropping the live dot's pulse ring flat
   against the gap beside the icon - the ring expands 5px outward, which is
   exactly the kind of thing an overflow clip eats. */
.app-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  min-width: 0;
}
.meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The waiting count is the one piece of moving data on this page. The dot is
   what separates it from the fixed subtitle on the tile beside it - an empty
   queue and a tile with no number at all otherwise look identical, and the
   empty queue is exactly the reading you most need to trust. */
.app-tile-meta.live { color: var(--blue); font-weight: 650; }
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
}
.app-tile-meta.is-live .live-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  70%  { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- sign-in card ---------- */
.signin-card input { display: block; width: 100%; box-sizing: border-box; }
.signin-card #signInPw { margin-top: 10px; }
.signin-error {
  color: var(--red);
  font-size: 13px;
  margin: 10px 0 0;
  min-height: 1em;
}

/* Until a name exists there is nothing on this page anyone can act on, so the
   launcher itself is hidden rather than sitting greyed-out behind the card. */
.home-body.awaiting-name .home-main,
.home-body.awaiting-name .home-header-right .name-chip { visibility: hidden; }

.hidden { display: none !important; }

@media (max-width: 520px) {
  .home-main { padding: 26px 16px 40px; }
  .app-grid { grid-template-columns: 1fr; }
  /* v6.0.1: the Waitlist tile is an <img>, not an inline svg, so it sailed
     past this rule and rendered 52px next to two 46px siblings. */
  .app-tile-icon svg,
  .app-tile-icon img { width: 46px; height: 46px; }
}


/* Nothing here is load-bearing - every animation above is decoration on top of
   a state that is already correct and visible without it. */
@media (prefers-reduced-motion: reduce) {
  .app-grid .app-tile { animation: none; }
  .app-tile,
  .app-tile-icon svg,
  .app-tile-icon img { transition: none; }
  .app-tile:hover { transform: none; }
  .app-tile:hover .app-tile-icon svg,
  .app-tile:hover .app-tile-icon img { transform: none; }
  .app-tile-meta.is-live .live-dot { animation: none; }
}


/* ---------- v6.0.1: theme toggle ----------
   This borrowed `.pricing-theme-toggle`, a class that only exists in
   pricing.css - which the launcher never loads. It was rendering as a raw
   browser button: 33x21, square corners, a 2px outset bevel. It now has its
   own square, properly-sized definition here. */
.theme-toggle {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-hover); }

/* Both header controls are small targets that navigate or change state, so
   they get a comfortable hit area and no tap delay. */
.name-chip, .theme-toggle { touch-action: manipulation; min-height: 38px; }

/* v6.0.1: same reliable-tap treatment the rest of the site gained - the
   launcher's own controls aren't styled by style.css's .icon-btn rules. */
@media (pointer: coarse) {
  .theme-toggle, .name-chip { min-width: 44px; min-height: 44px; }
  .signin-card input { font-size: 16px; }
}