/* today.myflmhs.com — Marie's worklist.
 *
 * A dispatch board, not a report. She opens this many times a day, usually on
 * a phone between calls, and the only question she has is "how many left, and
 * what's next". So the count-to-zero owns the top of the screen and everything
 * below is a queue of cards sized for thumbs.
 *
 * Palette stays in the FLMHS flag family (navy / red) that the ERTS, CMA and
 * LPR documents already use, so this reads as part of the same toolkit — but
 * flattened and cooled into something you can stare at for eight hours.
 * Red is reserved strictly for "this is waiting on you"; it never decorates.
 *
 * Data — phone numbers, times, counts — is set in monospace. That's not a
 * style flourish: those are the characters she scans and taps, and tabular
 * figures make them line up and stay legible at a glance.
 */

:root {
  --ink:      #0B1929;
  --ink-soft: #4A5A6D;
  --ink-faint:#8296AB;
  --field:    #EFF3F8;
  --card:     #FFFFFF;
  --navy:     #002868;
  --royal:    #0039A6;
  --signal:   #B22234;
  --signal-bg:#FDF1F2;
  --warn:     #B45309;
  --warn-bg:  #FEF6E7;
  --go:       #0F7B5F;
  --go-bg:    #EAF6F1;
  --rule:     #D6DFE9;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad: 16px;
  --radius: 10px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is enforced by the UA stylesheet as `display: none`,
 * which ANY author-level display rule outranks. `.gate` (grid), `.undo` (flex)
 * and `.gate__google` (flex) each silently defeated it — the sign-in panel
 * stayed stacked above the board after a successful Google login, and the undo
 * bar never went away. Anything toggled with `hidden` needs this. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Login ---------- */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: var(--navy);
}

.gate__card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  box-shadow: 0 18px 50px rgba(0, 15, 40, .35);
}

.gate__brand {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.gate__title {
  margin: 6px 0 2px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}

.gate__sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 14px; }

.gate__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.gate__input, .gate__select {
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 18px;
  font-size: 16px;              /* 16px stops iOS zooming the field on focus */
  font-family: var(--sans);
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
}

.gate__input:focus, .gate__select:focus { border-color: var(--royal); outline: none; }

.gate__go {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 8px;
}

.gate__go:hover { background: var(--royal); }

.gate__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--signal);
  background: var(--signal-bg);
  border-radius: 6px;
}

/* ---------- Header + the count ---------- */

.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy);
  color: #fff;
  padding: max(10px, env(safe-area-inset-top)) var(--pad) 18px;
  box-shadow: 0 2px 14px rgba(0, 15, 40, .18);
}

.head__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 10px;
}

.head__brand { font-weight: 800; }
.head__date { font-family: var(--mono); letter-spacing: .04em; }

.tally { display: flex; align-items: center; gap: 20px; }

.tally__figure { display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; }

.tally__count {
  font-family: var(--mono);
  font-size: 58px;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.tally__unit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  max-width: 58px;
}

.tally__side { flex: 1; min-width: 0; }

.rail {
  height: 5px;
  background: rgba(255, 255, 255, .18);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 7px;
}

.rail__fill {
  height: 100%;
  width: 0;
  background: #4ADE9E;
  border-radius: 3px;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.tally__cleared {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}

.tally__cleared span { font-family: var(--mono); font-weight: 700; color: #fff; }

.tally__actions { display: flex; gap: 8px; align-items: center; }

.tally__stamp {
  margin: 7px 0 0;
  font-size: 10.5px;
  font-family: var(--mono);
  color: rgba(255, 255, 255, .45);
}

/* Zero flips the whole header green — the one moment the page celebrates. */
.head.is-clear { background: var(--go); }
.head.is-clear .rail__fill { background: #fff; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 7px;
  border: 1.5px solid transparent;
  background: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}

.btn--ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .13); }
.btn--plain { color: rgba(255, 255, 255, .58); padding-left: 6px; padding-right: 6px; }
.btn--plain:hover { color: #fff; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn__spin { display: none; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.btn.is-busy .btn__spin { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Undo ---------- */

.undo {
  position: sticky;
  top: 132px;
  z-index: 15;
  margin: 10px var(--pad) 0;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(0, 15, 40, .25);
}

.undo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo__btn { flex-shrink: 0; background: none; border: 0; color: #6FB3FF; font-weight: 800; padding: 2px 4px; }

/* ---------- Sections + cards ---------- */

.list { padding: 20px var(--pad) 8px; max-width: 780px; margin: 0 auto; }

.group { margin-bottom: 26px; }

.group__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--rule);
}

.group__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
}

.group__n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink-faint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 15px;
  margin-bottom: 9px;
  transition: opacity .28s ease, transform .28s ease;
}

.card--high   { border-left-color: var(--signal); }
.card--medium { border-left-color: var(--warn); }
.card--low    { border-left-color: var(--ink-faint); }

/* Clearing an item sweeps it right and collapses the gap — the physical
   feedback that makes working the list down feel like progress. */
.card.is-going { opacity: 0; transform: translateX(28px); }

.card__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }

.card__name { font-size: 16.5px; font-weight: 700; color: var(--navy); }

.card__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--field);
  color: var(--ink-soft);
}

.card__tag--high { background: var(--signal-bg); color: var(--signal); }
.card__tag--new  { background: var(--go-bg);     color: var(--go); }

.card__when { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

.card__where { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 7px; }
.card__where strong { color: var(--ink); font-weight: 600; }

/* The action line is the largest thing in the card because it's the only part
   she has to read to know what to do. */
.card__do {
  font-size: 15px;
  line-height: 1.42;
  margin: 8px 0;
  padding-left: 11px;
  border-left: 2px solid var(--royal);
  color: var(--ink);
}

.card__quote {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--field);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
}

.card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* Contact chips are the primary action on a phone — sized for thumbs, not
   styled as links. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--mono);
  text-decoration: none;
  color: var(--royal);
  background: #EDF3FD;
  border-radius: 7px;
  min-height: 40px;
}

.chip:hover { background: #DCE8FB; }
.chip--mail { font-family: var(--sans); font-weight: 600; }

.done {
  margin-left: auto;
  padding: 9px 14px;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: none;
  border: 1.5px solid var(--rule);
  border-radius: 7px;
}

.done:hover { color: var(--go); border-color: var(--go); background: var(--go-bg); }

/* ---------- Zero state ---------- */

.zero { text-align: center; padding: 64px 24px 72px; max-width: 420px; margin: 0 auto; }
.zero__mark { color: var(--go); margin-bottom: 14px; }
.zero__title { margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--go); }
.zero__sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; }
.zero .btn--ghost { border-color: var(--rule); color: var(--ink-soft); }
.zero .btn--ghost:hover { background: #E3EAF3; }

.foot {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px var(--pad) 40px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- Wider screens ---------- */

@media (min-width: 700px) {
  .head { padding-left: 28px; padding-right: 28px; }
  .tally__count { font-size: 68px; }
  .list { padding-left: 28px; padding-right: 28px; }
  .undo { margin-left: 28px; margin-right: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Google sign-in ---------- */
/* Google's brand guidance: white surface, grey hairline, their mark at the
   left of the label. Kept visually quieter than the navy submit button it
   replaces, because it is the only control on the screen. */

.gate__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 14px;
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #1F1F1F;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.gate__google:hover { background: #F6F8FB; border-color: #B6C3D2; }

.gate__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

/* The phone chip texts; this one dials. Quieter, because opening the thread is
   the more common move — Marie usually wants to read before she talks. */
.chip--call {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--field);
}

.chip--call:hover { background: #E3EAF3; color: var(--navy); }

/* A failed action reuses the toast, in red. Nothing should ever fail silently
   and leave the card looking like it bounced back on its own. */
.undo--error { background: var(--signal); }
.undo--error .undo__btn { color: #fff; }