/* ===========================================================================
   Friends of the Needy — Intake & Reporting

   Two contexts, one system:
     · Intake  — iPad, held or propped, a person waiting on the other side of
                 the table. Large targets, few decisions, nothing subtle.
     · Reports — MacBook, unhurried, dense figures read carefully.

   No web fonts. Every device in this deployment is Apple hardware, so SF Pro
   is already installed and already excellent — and a font request that hangs
   on parish wifi is a form that will not render.

   Colour carries meaning and nothing else. If something is coloured, it is
   telling the volunteer a fact about eligibility.
   ======================================================================== */

:root {
  --ink:          #16202e;
  --ink-soft:     #4b5a6e;
  --ink-faint:    #8b98a9;
  --rule:         #dde3ea;
  --rule-soft:    #edf1f5;
  --paper:        #f6f8fa;
  --card:         #ffffff;

  --parish:       #1f4e79;   /* the parish blue */
  --parish-dark:  #163b5c;
  --parish-wash:  #e9f0f7;

  --ready:        #1f6f4a;   /* eligible: seven days have passed */
  --ready-wash:   #e6f2ec;
  --early:        #9a5b00;   /* inside the window: a conversation is needed */
  --early-wash:   #fdf1de;
  --denied:       #9e2b1c;
  --denied-wash:  #fbeae7;

  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 1px 2px rgba(22,32,46,.06), 0 8px 24px rgba(22,32,46,.06);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

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

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

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

/* Numbers line up in columns and never jitter as they update. */
.tabular, .stat-value, .week-count, td.num, th.num { font-variant-numeric: tabular-nums; }

a { color: var(--parish); }

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

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 60px;
  background: var(--parish-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: #fff; }

.brand-mark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 3px 8px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 5px;
}

.brand-name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; opacity: .92; }

.masthead-nav { margin-left: auto; display: flex; gap: 4px; }

.masthead-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 7px;
}

.masthead-nav a:hover { background: rgba(255,255,255,.12); }
.masthead-nav a.quiet { opacity: .7; font-weight: 400; }

.masthead-date { font-size: 14px; opacity: .7; font-variant-numeric: tabular-nums; }

.shell { max-width: 940px; margin: 0 auto; padding: 28px 20px 96px; }
.shell--wide { max-width: 1180px; }

/* --- Type --------------------------------------------------------------- */

h1 { font-size: 27px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 19px; font-weight: 640; letter-spacing: -.01em; margin: 34px 0 12px; }

.eyebrow {
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.lede { color: var(--ink-soft); margin: 0 0 22px; }

/* --- Search: the first and usually only thing touched ------------------- */

.search-block { position: relative; margin-bottom: 8px; }

.search-field {
  width: 100%;
  padding: 20px 22px 20px 56px;
  font-family: inherit;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  background: var(--card) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' \
fill='none' stroke='%238b98a9' stroke-width='2.2' stroke-linecap='round'>\
<circle cx='11' cy='11' r='7'/><path d='M20 20l-4.2-4.2'/></svg>") no-repeat 20px center;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  -webkit-appearance: none;
}

.search-field::placeholder { color: var(--ink-faint); font-weight: 400; }
.search-field:focus { border-color: var(--parish); outline: none; box-shadow: 0 0 0 4px var(--parish-wash); }

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 30;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: none;
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion[aria-selected="true"] { background: var(--parish-wash); }

.suggestion-body { min-width: 0; flex: 1; }
.suggestion-name { font-weight: 600; }
.suggestion-address { color: var(--ink-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suggestion-dob {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 2px 8px;
  background: var(--rule-soft);
  border-radius: 5px;
}

.suggestion-when { font-size: 13px; font-weight: 600; white-space: nowrap; }
.suggestion-when[data-state="ready"] { color: var(--ready); }
.suggestion-when[data-state="early"] { color: var(--early); }
.suggestion-when[data-state="new"]   { color: var(--ink-faint); }

.suggestion-flag {
  flex: none;
  font-size: 13px;
  font-weight: 640;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--denied-wash);
  color: var(--denied);
}

.search-hint { color: var(--ink-faint); font-size: 14px; margin: 10px 2px 26px; }

/* --- The week strip: the signature element -----------------------------
   Seven segments for the seven days of the interval, filling left to right.
   Readable at arm's length without reading a sentence.                   */

.week {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid;
  margin-bottom: 22px;
}

.week[data-state="ready"] { background: var(--ready-wash); border-color: #b9dcc9; }
.week[data-state="early"] { background: var(--early-wash); border-color: #eccb92; }
.week[data-state="new"]   { background: var(--parish-wash); border-color: #c3d7e9; }

.week-count { font-size: 40px; font-weight: 680; line-height: 1; letter-spacing: -.03em; }
.week[data-state="ready"] .week-count { color: var(--ready); }
.week[data-state="early"] .week-count { color: var(--early); }
.week[data-state="new"]   .week-count { color: var(--parish); }

.week-body { flex: 1; min-width: 0; }
.week-headline { font-weight: 640; font-size: 17px; }
.week-detail { font-size: 14px; color: var(--ink-soft); }

.week-bars { display: flex; gap: 4px; margin-top: 9px; }

.week-bar {
  height: 8px;
  width: 30px;
  border-radius: 3px;
  background: rgba(22,32,46,.11);
}

.week[data-state="ready"] .week-bar.on { background: var(--ready); }
.week[data-state="early"] .week-bar.on { background: var(--early); }

/* --- Form --------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 22px;
}

.field-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--8 { grid-column: span 8; }
.field--6 { grid-column: span 6; }
.field--5 { grid-column: span 5; }
.field--4 { grid-column: span 4; }
.field--3 { grid-column: span 3; }
.field--2 { grid-column: span 2; }
.field--12 { grid-column: span 12; }

.field-help { font-size: 12px; color: var(--ink-faint); }
.opt { font-weight: 400; font-size: 11px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* Address fields when the household is marked homeless: still visible and
   editable (a partial address, if one's known, is still useful), just no
   longer required, so they're dimmed rather than hidden. */
.addr-field.field--muted { opacity: .55; }

label { font-size: 13px; font-weight: 620; color: var(--ink-soft); letter-spacing: .01em; }

input[type="text"], input[type="date"], input[type="password"], input[type="number"], select, textarea {
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  padding: 13px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  -webkit-appearance: none;
  min-height: 48px;               /* comfortable on glass */
}

input:focus, select:focus, textarea:focus {
  border-color: var(--parish);
  outline: none;
  box-shadow: 0 0 0 4px var(--parish-wash);
}

input[aria-invalid="true"] { border-color: var(--denied); box-shadow: 0 0 0 4px var(--denied-wash); }

/* Stepper for household counts: tapping beats typing on a tablet. */
.stepper { display: flex; align-items: stretch; gap: 8px; }

.stepper input {
  flex: 1;
  text-align: center;
  font-size: 24px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper button {
  width: 52px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--parish);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.stepper button:hover { background: var(--parish-wash); }
.stepper button:active { transform: translateY(1px); }

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

.btn {
  font-family: inherit;
  font-size: 17px;
  font-weight: 620;
  padding: 15px 24px;
  min-height: 52px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule);
}

.btn:hover { background: var(--rule-soft); }

.btn--primary { background: var(--parish); border-color: var(--parish); color: #fff; width: 100%; font-size: 19px; min-height: 60px; }
.btn--primary:hover { background: var(--parish-dark); }
.btn--primary:disabled { opacity: .45; cursor: not-allowed; }

.btn--emergency { background: var(--early); border-color: var(--early); color: #fff; }
.btn--emergency:hover { filter: brightness(.93); }

.btn--denied { background: #fff; border-color: var(--denied); color: var(--denied); }
.btn--denied:hover { background: var(--denied-wash); }

.btn--ghost { font-size: 14px; padding: 7px 12px; min-height: 0; }

.form-actions { margin-top: 22px; }

/* --- Special need -------------------------------------------------------- */

.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; color: var(--ink); }
.check input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: var(--parish); }
.check strong { font-weight: 620; }
.check .field-help { display: inline; }

.need-alert {
  padding: 15px 20px;
  border-radius: var(--radius-lg);
  border: 1.5px solid #eccb92;
  background: var(--early-wash);
  color: var(--early);
  margin-bottom: 20px;
  font-size: 16px;
}

.need-alert strong { display: block; font-weight: 640; }

.red-flag-alert {
  padding: 15px 20px;
  border-radius: var(--radius-lg);
  border: 1.5px solid #eab8b0;
  background: var(--denied-wash);
  color: var(--denied);
  margin-bottom: 20px;
  font-size: 16px;
}

.red-flag-alert strong { display: block; font-weight: 700; }

textarea { resize: vertical; min-height: 62px; line-height: 1.45; }

/* --- Early-return dialog ------------------------------------------------ */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(12,20,30,.5);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 60;
}

.dialog {
  background: var(--card);
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 24px 64px rgba(12,20,30,.3);
}

.dialog h2 { margin: 0 0 6px; font-size: 22px; }
.dialog p { margin: 0 0 18px; color: var(--ink-soft); }

.dialog-choices { display: grid; gap: 10px; }
.dialog-choices .btn { width: 100%; }

.dialog-note { font-size: 13px; color: var(--ink-faint); margin-top: 16px; }

/* --- Confirmation ------------------------------------------------------- */

.receipt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1.5px solid;
  margin-bottom: 22px;
  font-weight: 560;
}

.receipt[data-outcome="SERVED_REGULAR"]   { background: var(--ready-wash);  border-color: #b9dcc9; color: var(--ready); }
.receipt[data-outcome="SERVED_EMERGENCY"] { background: var(--early-wash);  border-color: #eccb92; color: var(--early); }
.receipt[data-outcome="DENIED_EARLY"]     { background: var(--denied-wash); border-color: #eab8b0; color: var(--denied); }

/* --- Tables and statistics ---------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

.stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.stat-label { font-size: 12px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.stat-value { font-size: 38px; font-weight: 680; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
.stat-note { font-size: 13px; color: var(--ink-soft); }

.stat--early .stat-value  { color: var(--early); }
.stat--denied .stat-value { color: var(--denied); }

table { width: 100%; border-collapse: collapse; font-size: 15px; }

th {
  text-align: left;
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 12px;
  border-bottom: 1.5px solid var(--rule);
}

td { padding: 12px; border-bottom: 1px solid var(--rule-soft); }
th.num, td.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }

.table-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 640;
  padding: 3px 9px;
  border-radius: 20px;
}

.tag--served    { background: var(--ready-wash);  color: var(--ready); }
.tag--emergency { background: var(--early-wash);  color: var(--early); }
.tag--denied    { background: var(--denied-wash); color: var(--denied); }

/* Hour chart: bars only, no library, no axis furniture. */
.hours { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 4px 0; }
.hour { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.hour-bar { width: 100%; background: var(--parish); border-radius: 5px 5px 2px 2px; min-height: 3px; }
.hour-bar.empty { background: var(--rule); }
.hour-count { font-size: 14px; font-weight: 640; font-variant-numeric: tabular-nums; }
/* Weekday and date are two separate block-level lines, not one string left
   to wrap on its own — whether "Sat 8/1" happened to fit on one line or
   broke onto two used to depend on how narrow that particular bar was and
   how many characters its date happened to have, so some labels in the
   same chart wrapped and others didn't, leaving the row of labels at
   uneven heights. This way every bar's label is the same two lines,
   always, regardless of width. */
.hour-label { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: center; }
.hour-weekday, .hour-date { display: block; }

.range-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.empty-state { padding: 44px 20px; text-align: center; color: var(--ink-soft); }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }

.notice { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

.hidden { display: none !important; }

/* --- Login and password screens ----------------------------------------- */

.shell--bare { max-width: 420px; }
.gate { max-width: 400px; margin: 48px auto; }
.gate .card { padding: 28px; }
.error-text { color: var(--denied); font-size: 14px; margin-top: 10px; }

.gate-brand { text-align: center; margin-bottom: 24px; }
.gate-brand .brand-mark {
  font-size: 18px; font-weight: 700; letter-spacing: .14em;
  padding: 6px 12px; border: 1.5px solid var(--parish); border-radius: 6px; color: var(--parish);
}
.gate-brand .brand-name { margin-top: 10px; font-size: 17px; font-weight: 550; color: var(--ink); }

/* Matches .masthead-nav a.quiet ("Sign out", its actual visual neighbor),
   not the full-weight primary links — same size, same weight, same
   effective opacity. An earlier pass matched the primary links' weight
   (500) instead, which fixed the original size mismatch but left this
   looking heavier than "Sign out" right next to it. */
.masthead-who { color: rgba(255,255,255,.7); font-size: 15px; font-weight: 400; padding: 0 6px; }

/* strength meter */
.meter { height: 7px; background: var(--rule-soft); border-radius: 4px; margin: 10px 0 6px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 6%; background: var(--rule); border-radius: 4px; transition: width .18s, background .18s; }

/* admin row actions */
.row-actions { position: relative; display: inline-block; }
.row-actions summary { list-style: none; cursor: pointer; }
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions-menu {
  /* Fixed, not absolute: .table-card clips overflow to round off the
     table's square corners, and that clip applies to any rendered
     descendant regardless of what it's positioned relative to — an
     absolutely-positioned menu near the table's bottom or right edge (the
     last row, most visibly) was silently cut off by it. Fixed positioning
     is the one scheme overflow:hidden doesn't clip, so app.js computes
     top/left from the button's on-screen position each time this opens. */
  position: fixed; z-index: 60;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px; width: 260px; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.row-actions-menu form { display: flex; flex-direction: column; gap: 6px; }
.row-actions-menu input { font-size: 14px; padding: 8px 10px; min-height: 0; }
.reset-form { border-bottom: 1px solid var(--rule-soft); padding-bottom: 8px; margin-bottom: 2px; }

/* --- Motion ------------------------------------------------------------- */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.week, .receipt, .suggestions, .need-alert { animation: rise .16s ease-out; }

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

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 720px) {
  .field--8, .field--6, .field--5, .field--4, .field--3, .field--2 { grid-column: span 12; }
  .field--half { grid-column: span 6; }
  .masthead-date { display: none; }
  .shell { padding: 20px 14px 80px; }
  .week { flex-wrap: wrap; }
}

@media print {
  .masthead, .range-form, .btn { display: none; }
  body { background: #fff; }
  .card, .stat, .table-card { box-shadow: none; border-color: #ccc; }
}