/*
 * The leader-facing screens. Phone first, because that is where they are used -
 * standing in a cold store cupboard, one hand holding a tent.
 *
 * Colours all come from the custom properties set per organisation (brand.css);
 * nothing here hardcodes a hex. Targets are at least 44px, because the person using
 * this is wearing gloves half the year.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ app bar */

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--brand-fill);
  color: var(--on-brand);
}

.app-bar__brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.app-bar .scout-lockup { --lockup-height: 38px; }

.app-bar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--on-brand);
}

/* 44x44 (WCAG 2.5.5, AAA): the icon stays 22px, the hit area around it does not. */
.app-bar__actions a,
.app-bar__actions .link-button {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
}
.app-bar__actions svg { width: 22px; height: 22px; }

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0 4px;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------------------------- page */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 96px;  /* room for the tab bar */
}

.page--centred { max-width: 420px; padding-top: 32px; }

.screen-title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 8px 0 4px;
}

.screen-sub {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.screen-sub a { color: var(--brand-ink); display: inline-flex; align-items: center; min-height: 44px; }

.empty {
  color: var(--text-muted);
  text-align: center;
  padding: 32px 16px;
}

/* ------------------------------------------------------------------ actions */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  min-height: 96px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.action svg { width: 26px; height: 26px; color: var(--brand); }
.action small { display: block; font-weight: 400; color: var(--text-muted); }

.action--primary {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: var(--on-brand);
}

.action--primary svg { color: var(--on-brand); }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* The heading carries the warning rather than a stripe down the side: the rows in
   this card have no chip of their own, so the colour has to say something, and it
   says it where the words are. */
.card--warn h2 { color: var(--overdue-ink); }
.card__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--brand-ink);
}

/* -------------------------------------------------------------------- lists */

.list { list-style: none; margin: 0; padding: 0; }

.list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.list__row:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
.list__row small { display: block; color: var(--text-muted); font-size: 0.85rem; }
.list__row a { color: inherit; text-decoration: none; }
.list__meta { text-align: right; }

.list--cards .list__row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 10px;
  padding: 14px;
}

/* Urgency lives in the status chip alone - a label and a colour. There used to be a
   5px coloured stripe down each row as well; it said the same thing twice and is the
   "side-tab" pattern impeccable flags as the most recognisable tell of generated UI. */

.count { font-variant-numeric: tabular-nums; font-weight: 700; }
.count--short { color: var(--overdue-ink); }

.tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* -------------------------------------------------------------------- facts */

.facts { margin: 0; display: grid; gap: 10px; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; text-align: right; font-weight: 600; }

.note {
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--canvas);
}

/* No accent needed: the note begins with the word "Out" and names who has it. */
.note--out { font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: 0; }
.timeline p { margin: 4px 0 0; color: var(--text-muted); }
.timeline small { display: block; color: var(--text-muted); }

/* -------------------------------------------------------------------- forms */

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; }

.field input,
.field select,
.field textarea,
.search input {
  width: 100%;
  min-height: 48px;          /* a thumb, not a mouse */
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

/* One focus ring everywhere (WCAG 2.4.7): 3px of the brand colour, which is at
   least 3:1 against every light surface. On the brand-coloured app bar it is white. */
:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
}
.app-bar :focus-visible { outline-color: var(--on-brand); }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.field--check input { min-height: 24px; width: 24px; height: 24px; }
.field--check > span { order: 2; font-weight: 400; }

.field-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 16px;
  display: grid;
  gap: 14px;
  margin: 0;
}

.field-group legend {
  font-weight: 700;
  padding: 0 6px;
}

.hint { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.error, .errors { color: var(--overdue-ink); font-style: normal; }
.errors { margin: 0; padding-left: 18px; }

.search { display: flex; gap: 8px; margin-bottom: 16px; }
.search input { flex: 1; }

/* ------------------------------------------------------------------ buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--brand-ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button--primary { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.button--block { width: 100%; }
.button--small { min-height: 44px; padding: 0 14px; font-size: 0.9rem; }
.button--ghost { border-style: dashed; }
.button svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- flashes */

.flashes { list-style: none; margin: 0; padding: 8px 16px 0; max-width: 720px; margin-inline: auto; }

/* Tinted all over rather than striped down one edge. A flash has to be readable at
   a glance from arm's length, and a wash of the status colour does that across the
   whole shape instead of in 4px of it. The border is the same colour at full
   strength, which is what keeps it legible against a white card behind it. */
.flash {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
}

.flash--success {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
}

.flash--warning {
  border-color: var(--due-soon-edge);
  background: color-mix(in srgb, var(--due-soon) 22%, var(--surface));
}

.flash--error {
  border-color: var(--overdue);
  background: color-mix(in srgb, var(--overdue) 10%, var(--surface));
}

/* ----------------------------------------------------------------- tab bar */

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  min-height: 56px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.75rem;
}

.tab-bar svg { width: 24px; height: 24px; }
.tab-bar a[aria-current="page"] { color: var(--brand-ink); font-weight: 700; }

/* --------------------------------------------------------------- scanner */

.scanner { margin-bottom: 20px; display: grid; gap: 10px; justify-items: start; }
#scan-video { width: 100%; max-width: 420px; border-radius: var(--radius-card); background: #000; }

.org-switch { display: grid; gap: 8px; margin-bottom: 16px; }

.org-switch__option {
  text-align: left;
  padding: 12px;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}

.org-switch__option.is-current { border-color: var(--brand); font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .button, .action, .org-switch__option { transition: transform 0.06s ease-in-out; }
  .button:active, .action:active { transform: scale(0.985); }
}