/* Mac's Little Life — one palette, light only, on purpose.
   There is deliberately NO prefers-color-scheme block and NO [data-theme]
   override. logo.svg is loaded via <img>, which makes it an isolated document:
   it evaluates prefers-color-scheme on its own and a cached copy can render a
   stale palette, so a themed logo and a themed page drift apart — the wordmark
   showed up dark-on-dark (unreadable) or near-white (reading as pink).
   Committing to one palette removes the two sources that could disagree.
   Reinstating a dark theme means INLINING the logo SVG into the HTML first so it
   inherits these variables instead of resolving its own. */

/* Mac's Little Life — shared styles.
   Palette lives here only; pages never hardcode colors. */

:root {
  /* Tells the browser this page is light. Without it, iOS Safari renders form
     controls and the viewport with dark UA styling when the device is in dark
     mode, no matter what our own colours say. */
  color-scheme: light;
  --ml-bg:        #fffafb;
  --ml-surface:   #ffffff;
  --ml-ink:       #2e2228;
  --ml-ink-soft:  #7a6870;
  --ml-line:      #f3e4e9;
  /* accent = button fill (soft), accent-line = strokes and focus (deeper, so it
     stays visible on a near-white ground), accent-ink = text on the fill. */
  --ml-accent:    #f2a8c0;
  --ml-accent-ink:#4a1f31;
  --ml-accent-line:#c25a83;
  --ml-radius:    10px;
  --ml-font:      ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Inter, system-ui, sans-serif;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ml-bg);
  color: var(--ml-ink);
  font-family: var(--ml-font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Front gate: logo + login prompt, nothing else ---------- */

.gate {
  display: grid;
  place-items: center;
  padding: 6vh 1.5rem;
}

.gate__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.gate__logo {
  width: min(248px, 66vw);
  height: auto;
  display: block;
}

.gate__form {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}

.gate__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ml-ink-soft);
}

.gate__input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  background: var(--ml-surface);
  color: var(--ml-ink);
  font: inherit;
  font-size: 1rem;
  /* 16px minimum stops iOS Safari zooming on focus. */
}

.gate__input:focus {
  outline: none;
  border-color: var(--ml-accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-accent-line) 26%, transparent);
}

.gate__note {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ml-ink-soft);
  min-height: 1.2em;
}

/* Once the link is on its way, the form itself is just noise. */
.gate__form.is-sent .gate__label,
.gate__form.is-sent .gate__input,
.gate__form.is-sent .gate__button { display: none; }

.gate__form.is-sent .gate__note {
  text-align: center;
  color: var(--ml-ink);
}

.gate__button {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.9rem 1.25rem;
  border: 0;
  border-radius: var(--ml-radius);
  background: var(--ml-accent);
  color: var(--ml-accent-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.gate__button:hover { filter: brightness(1.07); }
.gate__button:active { transform: translateY(1px); }
.gate__button:focus-visible {
  outline: 2px solid var(--ml-accent-line);
  outline-offset: 3px;
}

/* ---------- Project index (behind Access) ---------- */

.app {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 1.5rem 4rem;
}

.app__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ml-line);
}

.app__mark { width: 40px; height: 40px; flex: none; }
.app__title { margin: 0; font-size: 1.15rem; font-weight: 650; }
.app__who {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ml-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app__out { margin: 0; flex: none; }

.linkish {
  border: 0;
  padding: 0;
  background: none;
  color: var(--ml-ink-soft);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.linkish:hover { color: var(--ml-ink); }
.linkish:focus-visible { outline: 2px solid var(--ml-accent-line); outline-offset: 2px; }

.app__hint {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-ink-soft);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card {
  display: block;
  padding: 1.1rem 1.2rem;
  background: var(--ml-surface);
  border: 1px solid var(--ml-line);
  border-radius: var(--ml-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.card:hover { border-color: var(--ml-accent-line); transform: translateY(-1px); }
.card:focus-visible { outline: 2px solid var(--ml-accent-line); outline-offset: 2px; }

.card__name { display: block; font-weight: 620; margin-bottom: 0.3rem; }
.card__desc { display: block; font-size: 0.88rem; color: var(--ml-ink-soft); line-height: 1.45; }

.empty {
  padding: 2rem 1.25rem;
  border: 1px dashed var(--ml-line);
  border-radius: var(--ml-radius);
  color: var(--ml-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}