/* The Mudbath look, shared by every page: font, colours, buttons, form fields, avatars, badges and
   pop-up menus. Layouts live in auth.css (logged-out pages) and app.css (everything else).
   Change a colour here and it changes everywhere. */

@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/geist-latin-400-normal.61cc095d4fd4.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/geist-latin-600-normal.942998b91f1c.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/geist-latin-700-normal.b16e7527e9a3.woff2") format("woff2"); }

:root {
  --ink: #021816;      /* page */
  --line: #1B3B37;     /* dividers */
  --edge: #3A5C57;     /* input and outline-button borders */
  --text: #EAF6F4;
  --muted: #87A5A0;
  --mint: #7EE4D9;     /* links, accents */
  --banner: #0B2B28;   /* profile banner strip */
  --deep: #2E5B55;     /* one of the avatar colours */
  --danger: #FFB4A9;
  --hover: rgba(234, 246, 244, 0.06);
  --mint-tint: rgba(126, 228, 217, 0.08);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; }
a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { display: block; flex: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; border: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { font-size: 16px; color: var(--ink); background: var(--text); }
.btn-primary:hover:not(:disabled) { background: #D3E6E3; }
.btn-mint { font-size: 16px; color: var(--ink); background: var(--mint); }
.btn-mint:hover:not(:disabled) { background: #6CD3C8; }
.btn-outline { font-size: 15px; color: var(--mint); background: transparent; border: 1px solid var(--edge); }
.btn-outline:hover { background: var(--mint-tint); }
.btn-light { font-size: 15px; color: var(--ink); background: var(--text); }
.btn-light:hover { background: #D3E6E3; }
.btn-sm { height: 32px; padding: 0 16px; font-size: 14px; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 17px; color: var(--text); background: transparent;
  border: 1px solid var(--edge); border-radius: 6px; padding: 0 12px; height: 52px; width: 100%;
}
.field textarea { height: auto; min-height: 96px; padding: 12px; resize: vertical; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.field .help { font-size: 12px; line-height: 1.4; }
.field .help ul { margin: 2px 0 0; padding-left: 18px; }
.field .error { font-size: 13px; color: var(--danger); }
.errors { border: 1px solid #6B3A35; background: rgba(255, 120, 100, 0.08); color: var(--danger); border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* spam trap */

/* Avatars: initials in a circle; the colour pair follows the member id (see ui.avatar) */
.avatar {
  --size: 40px; width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 700; font-size: calc(var(--size) * 0.38); line-height: 1; letter-spacing: -0.02em; user-select: none;
}
.avatar-p1 { color: var(--ink); background: var(--mint); }
.avatar-p2 { color: var(--mint); background: var(--line); }
.avatar-p3 { color: var(--text); background: var(--deep); }
.avatar-p0 { color: var(--ink); background: var(--text); }

/* Unread count bubble; empty means nothing unread */
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1;
}
.badge:empty { display: none; }

/* Pop-up menus: <details class="menu"><summary>…</summary><div class="menu-panel">…</div></details> */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; z-index: 30; min-width: 220px; padding: 6px 0; background: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 0 15px rgba(234, 246, 244, 0.12), 0 0 3px rgba(234, 246, 244, 0.1);
}
.menu-panel > a, .menu-panel > form > button:not(.btn), .menu-panel > button:not(.btn) {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent;
  color: var(--text); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; text-decoration: none;
}
.menu-panel > a:hover, .menu-panel > form > button:not(.btn):hover, .menu-panel > button:not(.btn):hover { background: var(--hover); }
.menu-panel .danger { color: var(--danger); }