/* The page is the door intercom of the house: one aluminium plate on a
   plaster wall, one bell per app. The bell ring lights up on hover and
   keyboard focus; the focus outline stays a separate high-contrast cue
   because the amber light does not reach 3:1 on the light plate. */

:root {
  color-scheme: light dark;

  --wall: #d8deda;
  --plate: #f3f4f3;
  --plate-hover: #fafbfa;
  --edge: #b7bfbb;
  --edge-highlight: #ffffff;
  --separator: #d6dbd8;
  --ink: #1d2321;
  --ink-soft: #4b5551;
  --engraving-shadow: rgba(255, 255, 255, 0.9);
  --speaker-hole: #9aa39f;
  --bell-top: #fbfcfb;
  --bell-bottom: #d9dedb;
  --bell-bezel: #c4cbc7;
  --light: #e8960f;
  --light-glow: rgba(232, 150, 15, 0.45);
  --focus: #1f4fcf;
  --plate-shadow: rgba(40, 55, 48, 0.28);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu,
    Cantarell, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wall: #18201d;
    --plate: #262d2a;
    --plate-hover: #2d3531;
    --edge: #3b4440;
    --edge-highlight: #36403b;
    --separator: #353e3a;
    --ink: #eceeed;
    --ink-soft: #aab4af;
    --engraving-shadow: rgba(255, 255, 255, 0.08);
    --speaker-hole: #121715;
    --bell-top: #3a433f;
    --bell-bottom: #222926;
    --bell-bezel: #4a5550;
    --light: #ffb547;
    --light-glow: rgba(255, 181, 71, 0.5);
    --focus: #9dbbff;
    --plate-shadow: rgba(0, 0, 0, 0.55);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* The extra bottom padding lifts the plate to the optical centre. */
  padding: 1rem 1rem calc(1rem + 6vh);
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.45;
}

.plate {
  width: min(100%, 34rem);
  background: var(--plate);
  border: 1px solid var(--edge);
  border-radius: 1.25rem;
  box-shadow:
    inset 0 1px 0 var(--edge-highlight),
    0 1px 0 var(--edge),
    0 1.5rem 2.5rem -1.5rem var(--plate-shadow);
}

.plate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--separator);
}

.wordmark {
  margin: 0;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 var(--engraving-shadow);
}

.tagline {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
}

.speaker {
  flex: none;
  width: 3.75rem;
  height: 2.5rem;
  background-image: radial-gradient(circle, var(--speaker-hole) 0 1.6px, transparent 2.2px);
  background-size: 0.5rem 0.5rem;
  background-position: center;
}

.apps {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
}

.apps li + li {
  border-top: 1px solid var(--separator);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.app {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.875rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.app:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
}

.app-icon {
  display: block;
  align-self: start;
  width: 3rem;
  height: 3rem;
  border-radius: 22%;
}

.app-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.app-name {
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.25;
}

.app-description {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.bell {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--bell-top), var(--bell-bottom) 75%);
  box-shadow:
    0 0 0 3px var(--bell-bezel),
    0 2px 0 3px var(--edge);
  transition: box-shadow 150ms ease, transform 80ms ease;
}

@media (hover: hover) {
  .app:hover {
    background: var(--plate-hover);
  }

  .app:hover .bell {
    box-shadow:
      0 0 0 3px var(--light),
      0 2px 0 3px var(--edge),
      0 0 0.875rem 0.25rem var(--light-glow);
  }
}

.app:focus-visible .bell {
  box-shadow:
    0 0 0 3px var(--light),
    0 2px 0 3px var(--edge),
    0 0 0.875rem 0.25rem var(--light-glow);
}

.app:active .bell {
  transform: translateY(2px);
  box-shadow:
    0 0 0 3px var(--light),
    0 0 0 3px var(--edge),
    0 0 0.875rem 0.25rem var(--light-glow);
}

@media (max-width: 26rem) {
  .plate-header {
    padding: 1.25rem 1.25rem 1rem;
  }

  .speaker {
    width: 2.75rem;
  }

  .apps {
    padding: 0.375rem;
  }

  .app {
    gap: 0.875rem;
    padding: 0.875rem;
  }

  .app-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .bell {
    width: 2.125rem;
    height: 2.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app,
  .bell {
    transition: none;
  }

  .app:active .bell {
    transform: none;
  }
}

@media (forced-colors: active) {
  .bell {
    border: 2px solid CanvasText;
  }
}