/* Rally - brand styles. Hand-rolled to avoid a Tailwind build step in the
   POC; values lifted from static/brand/tokens.json. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Bungee&display=swap');

:root {
  --heckle-pink: #FF2E88;
  --heckle-pink-light: #FF6BAA;
  --heckle-pink-dark: #C8155F;
  --quorum-purple: #6B2EFF;
  --sulphur: #FFD400;
  --bone: #F4ECDF;
  --cream: #FAF5EC;
  --ink: #0A0A0A;
  --warm-ink: #2A241D;
  --warm-mid: #6B6258;
  --max-w: 1100px;
  --body-w: 60ch;
  --shadow-sm: 2px 2px 0 0 var(--ink);
  --shadow-md: 4px 4px 0 0 var(--ink);
  --shadow-lg: 8px 8px 0 0 var(--ink);
  --shadow-xl: 12px 12px 0 0 var(--ink);
  color-scheme: light;
}

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

/* The `hidden` attribute must win over component `display` rules below
   (e.g. .notif-prompt is display:flex, buttons are display:inline-block). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--warm-ink);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* No italics anywhere - hard rule from DESIGN.md. */
em, i, dfn, cite, address, q { font-style: normal; }

a { color: var(--heckle-pink-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--heckle-pink); }

button, .btn {
  display: inline-block;
  border: 2px solid var(--ink);
  background: var(--heckle-pink);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
button:hover, .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-md);
  background: var(--heckle-pink-light);
  color: var(--ink);
}
button:active, .btn:active { transform: translate(2px, 2px); box-shadow: none; }
button[type="submit"][formnovalidate], button.ghost { background: var(--cream); }
button.ghost:hover { background: var(--sulphur); color: var(--ink); }

/* Link-styled buttons must not inherit the a:hover pink, or text goes
   pink-on-pink and vanishes. Lock their colour to ink in every state. */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { color: var(--ink); }

input[type="text"], input[type="email"], input[type="number"], input[type="password"], select {
  font: inherit;
  border: 2px solid var(--ink);
  padding: 0.5rem 0.75rem;
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  min-width: 200px;
}

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

main p { max-width: var(--body-w); }

header.rally {
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}
header.rally .brand {
  font-family: 'Bungee', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--heckle-pink);
}
header.rally nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header.rally nav a { text-decoration: none; font-weight: 600; }
header.rally form.switcher select {
  min-width: 0;
  box-shadow: none;
  padding: 0.35rem 0.5rem;
}
header.rally .spacer { flex: 1; }

h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.75rem;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.75rem;
  letter-spacing: -0.01em;
}

.stat {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--heckle-pink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.voice {
  font-family: 'Bungee', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.01em;
  background: var(--sulphur);
  border: 2px solid var(--ink);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-md);
  display: inline-block;
  max-width: var(--body-w);
}

.card {
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.card--accent { background: var(--sulphur); }

/* Auth pages (login / signup / logout) - a narrow centred card. */
.auth-card { max-width: 26rem; margin: 1.5rem auto; }
.auth-card form p { margin: 0.75rem 0; }
.auth-card label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.auth-card input { width: 100%; }

.errorlist {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
  color: var(--heckle-pink-dark);
  font-weight: 700;
}

.dictator-badge {
  display: inline-block;
  background: var(--quorum-purple);
  color: var(--cream);
  border: 2px solid var(--ink);
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  margin-left: 0.4rem;
  box-shadow: var(--shadow-sm);
}

ul { padding-left: 1.5rem; }
li { margin: 0.25rem 0; }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 0.15rem 0.4rem;
  word-break: break-all;
}

/* Compact team strip - context (members, dictator, invite) at the top of home,
   kept small so the goal and log buttons stay above the fold on mobile. */
.team-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.team-strip__sep { color: var(--warm-mid); }
.team-strip a { font-weight: 700; }

.btn--sm { padding: 0.3rem 0.7rem; box-shadow: var(--shadow-sm); }

/* Log buttons sit first in the goal card; the polled total + feed follow it. */
.total-block { margin-top: 1rem; }
.total-line { margin: 0; }

/* Today's activity feed - lives inside the polled #total fragment. */
.activity { margin-top: 1.25rem; }
.activity h2 { margin-top: 0; }
.activity-feed { list-style: none; padding-left: 0; margin: 0.5rem 0 0; }
.activity-feed li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 2px dotted var(--ink);
}
.activity-feed li:last-child { border-bottom: 0; }
.activity-who { font-weight: 700; }
.activity-amount {
  font-weight: 700;
  color: var(--heckle-pink-dark);
  font-variant-numeric: tabular-nums;
}
.activity-time { margin-left: auto; color: var(--warm-mid); font-variant-numeric: tabular-nums; }
.activity-empty { color: var(--warm-mid); font-weight: 600; border-bottom: 0; }

/* Invite card - copy / share button row. */
.invite-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }

/* Notification bell - sits in the header nav, carries an unread badge. */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
}
.notif-bell__icon { font-size: 1.25rem; line-height: 1; color: var(--quorum-purple); }
.notif-bell__badge {
  position: absolute;
  top: -0.5rem;
  right: -0.65rem;
  min-width: 1.1rem;
  padding: 0 0.25rem;
  background: var(--heckle-pink);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* Soft permission prompt - a full-width banner between header and content. */
.notif-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  background: var(--sulphur);
  border-bottom: 3px solid var(--ink);
  padding: 0.6rem 1.25rem;
}
.notif-prompt__text { font-weight: 700; }
.notif-prompt__actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* Notification feed - one tappable row per notification. */
.notif-list { list-style: none; padding-left: 0; margin: 1rem 0 0; }
.notif {
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.75rem;
}
.notif--unread { border-left: 8px solid var(--heckle-pink); }
.notif__open {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.75rem 1rem;
  font-weight: 400;
}
.notif__open:hover {
  transform: none;
  box-shadow: none;
  background: var(--bone);
  color: var(--ink);
}
.notif__open:active { transform: none; box-shadow: none; }
.notif__title { display: block; font-weight: 800; }
.notif__body { display: block; }
.notif__time { display: block; color: var(--warm-mid); font-size: 0.85rem; margin-top: 0.15rem; }

/* Notification settings - the per-kind checklist + the per-device push card. */
.notif-prefs__list { list-style: none; padding-left: 0; margin: 0.5rem 0 1.25rem; }
.notif-prefs__list li { margin: 0.4rem 0; }
.notif-prefs__list label { font-weight: 600; cursor: pointer; }
.notif-prefs__list input { margin-right: 0.5rem; }
.notif-push__status { font-weight: 700; margin: 0.25rem 0 0.75rem; }
.notif-push__denied { color: var(--heckle-pink-dark); font-weight: 600; }

/* Mobile: same content and order as desktop, just tighter spacing and type
   so the goal and log buttons dominate a small screen. */
@media (max-width: 480px) {
  main { padding: 1rem; }
  header.rally { padding: 0.5rem 1rem; gap: 0.5rem; }
  header.rally nav { width: 100%; order: 2; }
  header.rally .spacer { display: none; }

  body { font-size: 15px; }
  h1 { font-size: 2rem; margin-bottom: 0.5rem; }
  h2 { font-size: 1.1rem; margin-top: 1.25rem; }
  .card { padding: 0.9rem 1rem; margin-bottom: 1rem; }
  .stat { font-size: 2.75rem; }

  .team-strip { font-size: 0.85rem; gap: 0.35rem 0.5rem; padding: 0.4rem 0.6rem; }
  .activity { margin-top: 1rem; }
  .activity-feed li { gap: 0.4rem; padding: 0.3rem 0; }
  .voice { font-size: 0.9rem; padding: 0.6rem 0.8rem; }

  .notif-prompt { padding: 0.5rem 1rem; }
  .notif-prompt__actions { margin-left: 0; }
}