/* GU Team App shell.
   Chrome, type and layout follow the ScoutRoom product track (DESIGN-STANDARDS.md):
   charcoal base, off-white text, dividers instead of cards, radius 2px, tabular
   figures on every number. The tenant accent is injected at boot from the theme
   rows in index.html, never hardcoded here. Lime is the ScoutRoom product mark
   and appears once, in the footer, so each screen carries one dominant accent. */

:root {
  --charcoal:  #14181F;
  --raise:     #1A1F27;
  --offwhite:  #F5F7FA;
  --muted:     #9AA3AD;
  --rule:      #2A313B;
  --lime:      #36D94B;

  /* Overwritten per tenant at boot. The fallback is the ScoutRoom accent, so an
     unknown slug degrades to product chrome rather than to nothing. */
  --accent:    #36D94B;
  --deep:      #14181F;
  --soft:      #ACDFFA;

  --head: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --body: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--offwhite);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.num, table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Page furniture: running header and footer, thin rules, strong left alignment. */
.rail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}
footer.rail { border-bottom: 0; border-top: 1px solid var(--rule); margin-top: 40px; }

.rail .mark { font-weight: 700; color: var(--offwhite); }
.rail .sep { width: 1px; height: 12px; background: var(--rule); }
.rail .label { color: var(--muted); font-weight: 600; }
.rail .today { margin-left: auto; color: var(--muted); font-weight: 600; }
.rail .powered { color: var(--lime); font-weight: 600; font-size: 12px; }

main { padding: 28px 20px 0; max-width: 760px; }

h1 {
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 4px;
}

/* An asymmetric accent rule under the heading, not a boxed card. */
h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 10px;
  background: var(--accent);
}

label {
  display: block;
  margin: 22px 0 6px;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Explicit color on every input. A bare input renders black-on-dark. */
input {
  display: block;
  width: 100%;
  max-width: 340px;
  padding: 11px 12px;
  background: var(--raise);
  color: var(--offwhite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 16px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
#code { max-width: 170px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

button {
  margin-top: 18px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
button.primary { background: var(--accent); color: var(--deep); }
button.primary:disabled { opacity: 0.5; cursor: default; }
button.quiet {
  display: block;
  background: transparent;
  color: var(--muted);
  border-color: var(--rule);
}

.sent, .version, .who { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.version { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.06em; }

.msg { margin: 16px 0 0; font-size: 14px; min-height: 1.2em; }
.msg.err { color: #CF8B81; }
.msg.ok  { color: #7FCE9D; }

.prose { margin: 16px 0 0; border-top: 1px solid var(--rule); padding-top: 16px; }
.prose p { margin: 0 0 12px; max-width: 62ch; }

table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
th {
  text-align: left;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--rule);
}
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
td.role { color: var(--muted); text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
td.mail { color: var(--muted); font-size: 13px; word-break: break-all; }
td.invited { color: var(--soft); }