/* Hub — shared styles
   Palette: ink #101613 base, moss #7FB069 accent (growth/activity),
   water #6FA8B5 (health/pond), bone #E8E6DD text, amber #D9A441 alerts */

:root {
  --ink: #101613;
  --surface: #18211c;
  --surface-2: #1f2b24;
  --line: #2c3a31;
  --bone: #e8e6dd;
  --bone-dim: #9aa398;
  --moss: #7fb069;
  --water: #6fa8b5;
  --amber: #d9a441;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
}

/* ---------- layout ---------- */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px 96px; }

header.site {
  display: flex; align-items: baseline; gap: 12px;
  padding: 20px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
header.site h1 {
  font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; margin: 0;
}
header.site h1 a { color: var(--bone); text-decoration: none; }
header.site .page { color: var(--moss); font-family: var(--mono); font-size: 0.85rem; }

nav.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 24px;
}
nav.tabs a {
  color: var(--bone-dim); text-decoration: none;
  font-family: var(--mono); font-size: 0.8rem;
  padding: 6px 10px; border: 1px solid transparent; border-radius: 6px;
}
nav.tabs a:hover { color: var(--bone); border-color: var(--line); }
nav.tabs a[aria-current="page"] {
  color: var(--moss); border-color: var(--moss);
}

/* ---------- cards & forms ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}
.card h2 {
  margin: 0 0 12px; font-size: 0.8rem; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-dim);
}

form .row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--bone-dim); flex: 1 1 140px; }
input, select, textarea {
  background: var(--surface-2); color: var(--bone);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 10px; font-family: var(--mono); font-size: 0.9rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--moss); outline-offset: 2px;
}
textarea { min-height: 64px; font-family: var(--sans); }

button {
  background: var(--moss); color: var(--ink);
  border: 0; border-radius: 6px; padding: 10px 18px;
  font-family: var(--mono); font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--moss); border: 1px solid var(--moss); }
button:disabled { opacity: 0.5; cursor: wait; }

.status { font-family: var(--mono); font-size: 0.8rem; min-height: 1.2em; margin-top: 8px; }
.status.ok { color: var(--moss); }
.status.err { color: var(--amber); }

/* ---------- data display ---------- */
table.log {
  width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8rem;
}
table.log th, table.log td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
table.log th { color: var(--bone-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
table.log td.num { color: var(--water); }

.empty { color: var(--bone-dim); font-family: var(--mono); font-size: 0.85rem; padding: 12px 0; }

/* ---------- quick-log strip (signature element) ---------- */
.quicklog {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--surface) 92%, black);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  backdrop-filter: blur(6px);
}
.quicklog button {
  background: var(--surface-2); color: var(--bone);
  border: 1px solid var(--line); font-size: 0.78rem; padding: 8px 12px;
}
.quicklog button:hover { border-color: var(--moss); color: var(--moss); }

/* ---------- login ---------- */
.login {
  max-width: 320px; margin: 18vh auto 0; text-align: center;
}
.login h1 { font-family: var(--mono); letter-spacing: 0.2em; font-size: 1rem; text-transform: uppercase; }
.login form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color 0.2s ease; }
  .card:hover { border-color: #3a4c40; }
}