/* index.css — the front door: the wordmark, and the way in.
   Extracted from index.php, which carried it inline. */

:root { color-scheme: dark; }

body.splash {
  background-color: var(--bg);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;          /* mobile chrome makes 100vh taller than the screen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--ink);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* --- the wordmark, unchanged ------------------------------------------------ */
.moving-gradient {
  margin: 0;
  font-size: clamp(2.5rem, 12vw, 5rem);   /* was fixed 5rem: it overflowed a phone */
  font-weight: 900;
  letter-spacing: -2px;
  cursor: pointer;

  background: var(--wordmark);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  --speed: 5s;
  animation: shiftGradient var(--speed) linear infinite;
  transition: transform .3s ease, filter .3s ease, background .5s ease;
}

.moving-gradient:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 15px var(--wordmark-glow));
  --speed: 1.5s;
  background: var(--wordmark-hover);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes shiftGradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* The animation is decoration; honor a request to stop it. */
@media (prefers-reduced-motion: reduce) {
  .moving-gradient { animation: none; transition: none; }
  .moving-gradient:hover { transform: none; }
}

/* --- the way in -------------------------------------------------------------
   Deliberately quiet. The wordmark is the page; this is a door beside it, and a
   loud panel here would compete with the one thing worth looking at. */
.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 44px;            /* holds its place while Google's button loads */
}

.entry .lead { margin: 0; color: var(--muted); font-size: .875rem; }

.who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .8125rem;
  flex-wrap: wrap;
  justify-content: center;
}

.role {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--good-soft);
  color: var(--good);
}
.role.guest { background: var(--warn-soft); color: var(--warn); }

.links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.links a {
  border: 1px solid var(--rule-2);
  background: var(--control);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .875rem;
  text-decoration: none;
  transition: background .2s ease;
}
.links a:hover { background: var(--rule-3); }
.links a.quiet { background: none; border-color: var(--rule); color: var(--muted); }

.note { margin: 0; color: var(--muted); font-size: .78125rem; max-width: 46ch; line-height: 1.5; }

/* The way in. Google's own button is gone with its library: this is a link into the
   authorization flow, so it must look like the deliberate act it is. */
.gbtn{display:inline-block;padding:11px 22px;border-radius:999px;
  background:var(--control);border:1px solid var(--rule-2);color:var(--ink);text-decoration:none;
  font-size:.9375rem;font-weight:600;letter-spacing:.2px}
.gbtn:hover{background:var(--rule-2);border-color:var(--rule-3)}
.gbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.note.err{color:var(--bad)}

/* --- the applications -------------------------------------------------------
   The reason most people are on this page. They come first: the console sign-in
   below is for whoever administers the place, which is one person, and it used to
   be the only thing here.

   Cards rather than buttons, because the name alone does not say what either one
   does, and a visitor who has to guess picks neither. */
.apps{
  display: grid;
  /* auto-fit so the two sit side by side when there is room and stack when there
     is not, without a breakpoint deciding for them. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px;
  width: min(44rem, 100%);
}

.app-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--sunk);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.app-card:hover{ border-color: var(--accent); background: var(--sunk-2); transform: translateY(-2px); }
.app-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.app-card h2{ margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.app-card p{ margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
/* The affordance, not a second link: the whole card is the target. */
.app-card .go{ margin-top: 4px; color: var(--accent); font-size: .8125rem; font-weight: 600; }

/* The way in for an administrator, once it is no longer the only way in. */
.gbtn.quiet{ background: none; border-color: var(--rule); color: var(--muted); font-weight: 500; }
.gbtn.quiet:hover{ background: var(--sunk); border-color: var(--rule-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .app-card{ transition: none }
  .app-card:hover{ transform: none }
}