/* This service's own styling, on every page, layered over tokens.css (the
   shared design system, copied in verbatim and never edited here). */

/* Ink and periwinkle -- this service's colour scheme, matching its logo
   (logo.svg) and the family the apps behind it belong to: each is a deep
   ink with one accent of its own, and this is the hub's. Overrides
   tokens.css's neutral greys and indigo --primary in the same three blocks
   that file uses, so the theme toggle and the OS setting both still work.

   The periwinkle is too pale to read as text on a light page, so the two
   themes use it differently: in dark, --primary is the periwinkle itself;
   in light, --primary is a deeper indigo for links and active states, and
   the periwinkle appears as the lettering on the ink primary button. That
   split is why the primary button has tokens of its own (--btn-primary-*)
   rather than tokens.css's "--primary fill, white text". */
:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --border: #dcdfea;
  --text: #171a2e;
  --text-dim: #666b85;
  --primary: #4338ca;
  --primary-hover: #3730a3;
  --btn-primary-bg: #171a2e;
  --btn-primary-bg-hover: #2a2e4d;
  --btn-primary-fg: #a5b4fc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111326;
    --surface: #191c33;
    --border: #2e3252;
    --text: #e8eaf6;
    --text-dim: #9aa0bf;
    --primary: #a5b4fc;
    --primary-hover: #c7d2fe;
    --btn-primary-bg: #a5b4fc;
    --btn-primary-bg-hover: #c7d2fe;
    --btn-primary-fg: #171a2e;
  }
}

:root[data-theme='dark'] {
  --bg: #111326;
  --surface: #191c33;
  --border: #2e3252;
  --text: #e8eaf6;
  --text-dim: #9aa0bf;
  --primary: #a5b4fc;
  --primary-hover: #c7d2fe;
  --btn-primary-bg: #a5b4fc;
  --btn-primary-bg-hover: #c7d2fe;
  --btn-primary-fg: #171a2e;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}

/* The page's own name and mark. */
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-brand img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

/* The header of a signed-in page: the brand, which leads back to the apps,
   and on the right what belongs to the visitor. */
.site-header {
  align-items: center;
}

.site-header h1 {
  margin: 0;
  font-size: var(--text-lg);
}

a.site-brand {
  color: inherit;
  text-decoration: none;
}

/* The page the visitor is on, among the header's links. */
.site-header .btn[aria-current='page'] {
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
  color: var(--primary);
}

.inline-form {
  margin: 0;
}

/* ---------- Phones ----------
   Everything below reshapes the pages for a narrow screen held in one
   hand: less chrome, more of the content above the fold, and targets big
   enough for a thumb. One breakpoint, the same 640px tokens.css's own
   header rule uses. */
@media (max-width: 640px) {
  /* The full width, with a gutter that also clears a notch or a rounded
     corner (viewport-fit=cover lets the page run under them). */
  .page {
    width: 100%;
    padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
      max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  }

  /* One row, not tokens.css's stacked header: the brand on the left, the
     visitor's own controls on the right. The username goes, since the
     profile is one tap away. */
  .site-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
  }
  .site-header .page-header-actions {
    flex-wrap: nowrap;
    gap: var(--space-1);
  }
  .site-header .btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .wide-only {
    display: none;
  }

  /* iOS zooms the whole page when a field's text is under 16px. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}