/*
 * Greenhouse wears the phone's own clothes, like Allspice: iOS greys, the
 * system font, grouped lists. Its one colour is the green of the glasshouse,
 * so the apps' own icons are what stands out.
 */
:root {
  color-scheme: light dark;
  --canvas: light-dark(#f2f2f7, #000000);
  --surface: light-dark(#ffffff, #1c1c1e);
  --sunk: light-dark(rgba(118, 118, 128, 0.12), rgba(118, 118, 128, 0.24));
  --line: light-dark(rgba(60, 60, 67, 0.16), rgba(84, 84, 88, 0.55));
  --ink: light-dark(#000000, #ffffff);
  --muted: light-dark(rgba(60, 60, 67, 0.72), rgba(235, 235, 245, 0.7));
  --subtle: light-dark(rgba(60, 60, 67, 0.5), rgba(235, 235, 245, 0.45));
  --accent: light-dark(#2f7d32, #30d158);
  --accent-ink: light-dark(#ffffff, #002a0c);
  --danger: light-dark(#d70015, #ff453a);
  /* Sage from the greenhouse icon's own ground, as light coming off the glass. */
  --glow: light-dark(rgba(150, 205, 115, 0.34), rgba(48, 209, 88, 0.12));
  /* Half the pressed grey, for a pointer resting on a row. */
  --hover: light-dark(rgba(118, 118, 128, 0.06), rgba(118, 118, 128, 0.12));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /*
   * A soft glow behind the greenhouse, so the front door feels like a place
   * and not a settings screen. Centred on the picture: 3.25rem in from the
   * column's left edge (the column is 34rem wide, centred), 3.75rem down.
   */
  background:
    radial-gradient(26rem 16rem at max(3.25rem, 50% - 13.75rem) 3.75rem, var(--glow), transparent 70%) no-repeat,
    var(--canvas);
  color: var(--ink);
  font: 100%/1.4 -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

p {
  text-wrap: pretty;
}

/* A ring for the keyboard only, in the one colour the page has. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

/* Type, sized and tracked the way iOS sets it. */
.t-large {
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.t-title3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.t-headline {
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.t-subhead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.t-footnote {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.t-section {
  margin: 1.75rem 1rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}
.subtle {
  color: var(--subtle);
}
.danger {
  color: var(--danger);
}

.head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0.5rem 0.25rem 0.75rem;
}
.mark {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.card {
  margin-top: 1.25rem;
  padding: 1.25rem 1rem 1rem;
  background: var(--surface);
  border-radius: 22px;
}
.signin form {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0.875rem;
}
.field {
  display: grid;
  gap: 0.375rem;
}
.field span {
  color: var(--muted);
  padding-left: 0.25rem;
}
.field input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 12px;
  background: var(--sunk);
  color: var(--ink);
  font: inherit;
  /* At 16px or more, iOS does not zoom in on focus. */
  font-size: 1.0625rem;
  outline: none;
  transition: box-shadow 150ms ease;
}
.field input:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  text-decoration: none;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 150ms ease, filter 150ms ease;
}
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.button:active {
  transform: scale(0.97);
}
.button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The apps: a grouped list, one row each, the icon doing the talking. */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
}
.apps li + li .app::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* Where the text starts: the row's padding, the icon and the gap. */
  left: calc(1rem + 3.25rem + 0.875rem);
  border-top: 0.5px solid var(--line);
}
.app {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.5rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
}
/* Hover before press, so a pressed row under a pointer still darkens. */
@media (hover: hover) {
  .app:hover {
    background: var(--hover);
  }
  .button.primary:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .link:hover {
    opacity: 0.75;
  }
}
.app:active {
  background: var(--sunk);
  transition-duration: 0ms;
}
.app:focus-visible {
  outline-offset: -2px;
}
/* The end rows follow the list's corners, so a focus ring is not cut off there. */
.apps li:first-child .app {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.apps li:last-child .app {
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
.app img {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 22.5%;
  object-fit: cover;
  background: var(--sunk);
  /* The thin rim iOS draws round an icon, so a pale one does not melt into the card. */
  outline: 0.5px solid var(--line);
  outline-offset: -0.5px;
}
.app-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.app-text > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chevron {
  flex: none;
  color: var(--subtle);
  font-size: 1.5rem;
  line-height: 1;
}

/*
 * A row that joins a list already on screen slides in, so the change is
 * seen. The list itself just appears: this page is opened every day, and a
 * fade on every visit would only slow it down.
 */
.group.arriving,
.apps li.arriving {
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(4px);
  }
}

.foot {
  margin-top: 2rem;
  text-align: center;
}
.link {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .group.arriving,
  .apps li.arriving {
    transition: opacity 200ms ease;
    @starting-style {
      opacity: 0;
      transform: none;
    }
  }
  .button:active {
    transform: none;
  }
}

/* Asked for more contrast: a flat page, with nothing behind the text. */
@media (prefers-contrast: more) {
  body {
    background: var(--canvas);
  }
}

/* The page for an address no app has (404.html). */
.lost .button {
  margin-top: 1.25rem;
}