/* ==========================================================================
   ROSTER

   The palette is the Activity page's, token for token, because Roster is that
   page expanded rather than a second app — and because those values are
   measured. Do not "tidy" one of them without re-measuring: white check on the
   accent is 8.05 / 7.90, the grey ring 4.83 / 4.84, every type dot ≥ 6.4.

   🔴 THE TOKENS LIVE ON :root, NOT ON A WRAPPER. The Activity page learned this
   the hard way on 2026-08-19: html and body sit outside any wrapper, so with
   the tokens scoped to one the browser's own canvas showed through as an 8px
   WHITE band around the whole app, in dark mode. color-scheme has to be on the
   root element for the canvas to take its colour from the page.
   ========================================================================== */

:root {
  --ground: #fbfaf7;
  --card: #ffffff;
  --ink: #14201e;
  --muted: #5a6763;
  --hair: #e4e0d8;
  --hair-strong: #d3cdc1;
  --accent: #075a57;
  --accent-ink: #ffffff;
  --accent-wash: #e7f0ef;
  --quote-bg: #f5f4f0;
  --danger: #82550f;
  --field: #ffffff;
  --chip: #21302d;
  --chip-ink: #f4f7f6;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #101614;
    --card: #172120;
    --ink: #e8efed;
    --muted: #9fb0ab;
    --hair: #26332f;
    --hair-strong: #35443f;
    --accent: #4fc3bb;
    --accent-ink: #10201e;
    --accent-wash: #1b2c2a;
    --quote-bg: #1c2725;
    --danger: #e2b93b;
    --field: #101614;
    --chip: #e6edeb;
    --chip-ink: #131c1a;
  }
}

:root[data-theme='dark'] {
  --ground: #101614;
  --card: #172120;
  --ink: #e8efed;
  --muted: #9fb0ab;
  --hair: #26332f;
  --hair-strong: #35443f;
  --accent: #4fc3bb;
  --accent-ink: #10201e;
  --accent-wash: #1b2c2a;
  --quote-bg: #1c2725;
  --danger: #e2b93b;
  --field: #101614;
  --chip: #e6edeb;
  --chip-ink: #131c1a;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ground);
}

body {
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 17px is not a default. It is the measured difference against Basecamp's
     feed, reported after a day of real use and signed off 2026-08-18. */
  -webkit-font-smoothing: antialiased;
  /* The notch, and the home indicator. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 14px 56px;
}

/* ---- the bar ----------------------------------------------------------- */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}
.bar h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}
.bar .today {
  color: var(--muted);
  font-size: 14px;
}

/* ---- the greeting ------------------------------------------------------
   Tab's block, same measurements, so the two apps read as one. */
.greeting {
  margin: 18px 0 16px;
}
.pagehead {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
  line-height: 1.2;
}
.greeting-date {
  margin: 0;
  font-size: 0.88rem;
}
@media (max-width: 620px) {
  .pagehead {
    font-size: 1.35rem;
  }
}

/* ---- cards ------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  margin: 0 0 12px;
  overflow: hidden;
}
.card > h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: 12px 14px 8px;
}

/* A header row, so a column can be named over the column it names. */
.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 14px;
}
.card-head > h2 {
  flex: 1;
}
.col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-head + #people .person:first-child {
  border-top: 0;
}

/* ---- a person ---------------------------------------------------------- */
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: 0;
  border-top: 1px solid var(--hair);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card > h2 + .person,
.person:first-child {
  border-top: 0;
}
.person:active {
  background: var(--accent-wash);
}

.face {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  /* ⚠️ inset rather than an outer border: a 1px outline would push every row
     1px wider and the ring is there to separate a PALE disc from a pale card,
     which an inset does just as well without moving anything. */
  box-shadow: inset 0 0 0 1px var(--face-ring, transparent);
  background: var(--face-bg, var(--quote-bg));
  color: var(--face-ink, var(--muted));
}
.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ⚠️ display:block on all four, and it is not decoration. A flex CHILD is
   blockified automatically, but its own children are not: left inline, .name
   and .sub lay out side by side on one line and text-overflow does nothing at
   all — the name, the email and the clock all landed on top of each other. */
.who {
  flex: 1;
  min-width: 0;
  display: block;
}
.who .name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who .sub {
  display: block;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.when {
  flex: 0 0 auto;
  display: block;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.when .clock {
  display: block;
  font-weight: 600;
}
.when .day {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted);
}

/* "Out" is the only state that gets a colour. In is the default and needs no
   decoration; a badge on every row would make the exception invisible. */
.tag {
  display: inline-block;
  vertical-align: baseline;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--quote-bg);
  color: var(--muted);
}
.tag.out {
  background: var(--accent-wash);
  color: var(--accent);
}

/* ---- announcements ----------------------------------------------------- */
.ann {
  padding: 12px 14px;
  border-top: 1px solid var(--hair);
  white-space: pre-wrap;
}
.ann:first-of-type {
  border-top: 0;
}
.ann .preset {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
}

/* ---- a row that goes somewhere ----------------------------------------- */
.go {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.go:first-child {
  border-top: 0;
}
.go:active {
  background: var(--accent-wash);
}
.go .label {
  flex: 1;
  font-weight: 600;
}
.go .value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.go .chev {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

/* ---- forms + buttons --------------------------------------------------- */
label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 5px;
}
input[type='email'],
input[type='password'],
input[type='date'],
input[type='text'],
textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 11px 12px;
  margin: 0 0 14px;
}
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea {
  min-height: 5rem;
  resize: vertical;
}

.btn {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.btn.quiet {
  background: none;
  color: var(--accent);
  border: 1px solid var(--hair-strong);
}
.btn.danger {
  background: none;
  color: var(--danger);
  border: 1px solid var(--hair-strong);
}

.pad {
  padding: 14px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 14px;
}
.note {
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px 14px;
}
.err {
  color: var(--danger);
  font-size: 14px;
  padding: 0 0 12px;
}

/* ---- the sheet --------------------------------------------------------- */
dialog {
  border: 0;
  padding: 0;
  background: var(--card);
  color: var(--ink);
  width: min(34rem, 100vw);
  max-height: 88vh;
  border-radius: 16px 16px 0 0;
  margin: auto auto 0;
}
dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--hair);
}
.sheet-head h2 {
  flex: 1;
  font-size: 19px;
  margin: 0;
}
.x {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .person,
  .go {
    transition: background 90ms ease-out;
  }
}