/* journal.tenzin.com.au — the app hub.
   Palette and type follow the public site at tenzin.com.au so the three
   surfaces read as one family. The two accents are lifted from that design's
   own project colours: gold for the fitness/activity segment, sage for
   finance. */

:root {
  --bg: #100e0c;
  --ink: #e8e0d6;
  --ink-dim: #a99c8c;
  --ink-faint: #7a6e63;
  --line: #2a2320;
  --panel: #1a1410;
  --activity: #d4a94a;
  --finance: #93a67c;
  --danger: #e0705f;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* The UA stylesheet's [hidden] { display: none } is trivially outranked by any
   author rule that sets display — and #checking/#hub both do. Without this the
   gate renders all three panes at once. Keep it above everything else. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

body { min-height: 100svh; }

a { color: inherit; text-decoration: none; }
::selection { background: #d6d0c6; color: #16130f; }

.wrap {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(40px, 7vh, 72px);
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(40px, 9vh, 96px) clamp(22px, 6vw, 48px);
}

/* ── shared type ─────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #f2ebe2;
}

.sub, .gate__sub {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 46ch;
}

.sub strong { color: var(--ink); font-weight: 500; }

/* ── gate (checking + login) ──────────────────────────────────────────── */

.gate { animation: rise .4s ease both; }

#checking {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.spinner {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--activity);
  animation: pulse 1.4s ease-in-out infinite;
}

.gate__title { margin-top: 18px; }

form { display: grid; gap: 20px; margin-top: clamp(30px, 5vh, 44px); max-width: 380px; }

.field { display: grid; gap: 9px; }

.field__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

input {
  width: 100%;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px avoids the iOS zoom-on-focus */
  transition: border-color .18s ease;
}

input:focus {
  outline: none;
  border-color: var(--activity);
  box-shadow: 0 0 0 3px rgba(212, 169, 74, .18);
}

.btn {
  justify-self: start;
  padding: 13px 26px;
  background: var(--activity);
  border: 0;
  border-radius: 999px;
  color: #1a1410;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease;
}

.btn:hover:not(:disabled) { background: #e2bc63; }
.btn:disabled { opacity: .55; cursor: default; }

.error {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
}

.gate__aside {
  margin: clamp(26px, 4vh, 36px) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.gate__aside a { color: var(--ink-dim); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.gate__aside a:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ── hub cards ───────────────────────────────────────────────────────── */

#hub { animation: rise .45s ease both; display: grid; gap: clamp(40px, 7vh, 72px); }

.cards { display: grid; gap: 14px; }

.card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(22px, 3.4vw, 30px) clamp(22px, 3.4vw, 30px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.card:hover { transform: translateY(-2px); }

.card__index {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-faint);
}

.card__body { display: grid; gap: 7px; min-width: 0; }

.card__name {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.card__desc { font-size: 14px; line-height: 1.6; color: var(--ink-dim); }

.card__go { font-size: 20px; color: var(--ink-faint); transition: color .2s ease, transform .2s ease; }
.card:hover .card__go { transform: translateX(3px); }

.card--activity:hover { border-color: rgba(212, 169, 74, .55); background: #201811; }
.card--activity .card__name, .card--activity:hover .card__go { color: var(--activity); }

.card--finance:hover { border-color: rgba(147, 166, 124, .55); background: #171a14; }
.card--finance .card__name, .card--finance:hover .card__go { color: var(--finance); }

/* ── footer ──────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}

.foot a:hover { color: var(--ink-dim); }

.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-faint);
  cursor: pointer;
}

.linklike:hover { color: var(--danger); }

/* ── motion ──────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.62); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .card:hover { transform: none; }
}