/* =============================================================================
   File:        src/VLR.Web/wwwroot/css/app.css
   Project:     Veterans Landing Rides  (EWO-0062)
   Author:      Mark Kiessling
   Created:     2026-07-28
   Purpose:     Components, built entirely on tokens.css. No colour, size or
                spacing is hardcoded here - if a value is needed, it becomes a
                token first.

   Accessibility is structural, not a pass at the end:
     - nothing is conveyed by colour alone
     - every interactive thing has a visible focus ring
     - no action requires hover
     - layout holds at 200% and 300% zoom without clipping
     - one clear primary action per page
   ============================================================================= */

@import url("tokens.css");

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

html { font-size: var(--vlr-size-base); }

body {
  margin: 0;
  background: var(--vlr-paper);
  color: var(--vlr-text);
  font-family: var(--vlr-font);
  font-size: 1rem;
  line-height: var(--vlr-line-height);
  -webkit-text-size-adjust: 100%;
}

/* Everything sizes in rem so a browser zoom or an OS text-size setting scales
   the whole interface, rather than only some of it. */

h1, h2, h3 { color: var(--vlr-navy); line-height: 1.25; margin: 0 0 var(--vlr-space-4); }
h1 { font-size: var(--vlr-size-h1); }
h2 { font-size: var(--vlr-size-h2); margin-top: var(--vlr-space-6); }
h3 { font-size: var(--vlr-size-h3); margin-top: var(--vlr-space-5); }

p { margin: 0 0 var(--vlr-space-4); max-width: 68ch; }  /* long lines are hard to track */

a { color: var(--vlr-navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--vlr-navy-soft); }

/* ---- FOCUS. One rule, everything, no exceptions. -------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--vlr-focus-width) solid var(--vlr-focus-on-light);
  outline-offset: var(--vlr-focus-offset);
  border-radius: var(--vlr-radius);
}
.vlr-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--vlr-focus-color);
}

/* Skip link - the first thing a keyboard user meets. */
.vlr-skip {
  position: absolute; left: -9999px;
  background: var(--vlr-navy); color: var(--vlr-text-invert);
  padding: var(--vlr-space-3) var(--vlr-space-4);
  border-radius: 0 0 var(--vlr-radius) 0; z-index: 100;
}
.vlr-skip:focus { left: 0; top: 0; }

/* ---- layout --------------------------------------------------------------- */
.vlr-shell { max-width: 900px; margin: 0 auto; padding: var(--vlr-space-5) var(--vlr-space-4) var(--vlr-space-7); }
.vlr-shell--narrow { max-width: 560px; }

.vlr-header {
  background: var(--vlr-white);
  border-bottom: 3px solid var(--vlr-navy);
  padding: var(--vlr-space-4);
}
.vlr-header__inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--vlr-space-4); flex-wrap: wrap;
}
/* The FULL logo - wings, wordmark and ribbons. Never the cropped mark here. */
.vlr-logo { height: 76px; width: auto; }

/* ---- cards ---------------------------------------------------------------- */
.vlr-card {
  background: var(--vlr-panel);
  border: 1px solid var(--vlr-line);
  border-radius: var(--vlr-radius-lg);
  padding: var(--vlr-space-5);
  margin-bottom: var(--vlr-space-5);
  box-shadow: var(--vlr-shadow);
}
.vlr-card__title { margin-top: 0; }

/* ---- forms ---------------------------------------------------------------- */
.vlr-field { margin-bottom: var(--vlr-space-5); }

.vlr-label {
  display: block;
  font-weight: var(--vlr-weight-medium);
  margin-bottom: var(--vlr-space-2);
  color: var(--vlr-text);
}
/* Required is marked in WORDS as well as the asterisk. A red star alone is
   colour-and-symbol only, and a screen reader user gets nothing useful. */
.vlr-label__required { color: var(--vlr-red); font-weight: var(--vlr-weight-bold); }
.vlr-label__required::after { content: " (required)"; font-weight: var(--vlr-weight-normal); color: var(--vlr-text-muted); }

.vlr-hint { display: block; color: var(--vlr-text-muted); font-size: var(--vlr-size-sm); margin-bottom: var(--vlr-space-2); }

.vlr-input, .vlr-select, .vlr-textarea {
  width: 100%;
  min-height: var(--vlr-control-height);
  padding: var(--vlr-space-3) var(--vlr-space-4);
  font-family: inherit;
  font-size: 1rem;
  color: var(--vlr-text);
  background: var(--vlr-white);
  border: 2px solid var(--vlr-line-strong);
  border-radius: var(--vlr-radius);
}
.vlr-textarea { min-height: 8rem; resize: vertical; }
.vlr-input:hover, .vlr-select:hover, .vlr-textarea:hover { border-color: var(--vlr-navy-soft); }

/* An error is a colour, a thicker border, an icon AND words. Never colour alone. */
.vlr-input--error, .vlr-select--error, .vlr-textarea--error { border-color: var(--vlr-error); border-width: 3px; }
.vlr-error {
  display: flex; gap: var(--vlr-space-2); align-items: flex-start;
  color: var(--vlr-error); font-weight: var(--vlr-weight-medium);
  margin-top: var(--vlr-space-2);
}
.vlr-error::before { content: "!"; flex: 0 0 1.4em; height: 1.4em; line-height: 1.4em;
  text-align: center; border-radius: 50%; background: var(--vlr-error);
  color: var(--vlr-white); font-weight: var(--vlr-weight-bold); }

/* Checkboxes and radios big enough to hit without aiming. */
.vlr-check { display: flex; align-items: flex-start; gap: var(--vlr-space-3); min-height: var(--vlr-control-height); }
.vlr-check input { width: 26px; height: 26px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--vlr-navy); }

/* ---- buttons -------------------------------------------------------------- */
.vlr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--vlr-control-height);
  padding: 0 var(--vlr-control-pad-x);
  font-family: inherit; font-size: 1rem; font-weight: var(--vlr-weight-bold);
  border-radius: var(--vlr-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.vlr-btn--primary { background: var(--vlr-navy); color: var(--vlr-text-invert); }
.vlr-btn--primary:hover { background: var(--vlr-navy-deep); color: var(--vlr-text-invert); }

.vlr-btn--secondary { background: var(--vlr-white); color: var(--vlr-navy); border-color: var(--vlr-navy); }
.vlr-btn--secondary:hover { background: var(--vlr-paper); }

/* Red is for actions that take something away - cancel, decline, disable. */
.vlr-btn--danger { background: var(--vlr-red); color: var(--vlr-text-invert); }
.vlr-btn--danger:hover { background: var(--vlr-red-deep); color: var(--vlr-text-invert); }

/* The one big action on a page - "I need a ride", "Accept this ride". */
.vlr-btn--hero { width: 100%; min-height: 76px; font-size: var(--vlr-size-lg); }

.vlr-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- status ---------------------------------------------------------------
   Every status carries a WORD. The colour is a reinforcement, never the
   message. */
.vlr-status {
  display: inline-flex; align-items: center; gap: var(--vlr-space-2);
  padding: var(--vlr-space-1) var(--vlr-space-3);
  border-radius: 999px; font-size: var(--vlr-size-sm);
  font-weight: var(--vlr-weight-medium);
  border: 2px solid currentColor;
}
.vlr-status--waiting  { color: var(--vlr-warn); }
.vlr-status--assigned { color: var(--vlr-ok); }
.vlr-status--problem  { color: var(--vlr-error); }

/* ---- the help offer, on every veteran facing page -------------------------
   Wording and telephone number come from Settings. Nothing is hardcoded. */
.vlr-help {
  background: var(--vlr-white);
  border: 2px solid var(--vlr-navy);
  border-left-width: 6px;
  border-radius: var(--vlr-radius);
  padding: var(--vlr-space-4);
  margin-top: var(--vlr-space-6);
}
.vlr-help__title { font-weight: var(--vlr-weight-bold); color: var(--vlr-navy); margin-bottom: var(--vlr-space-2); }

/* ---- emergency notice ----------------------------------------------------- */
.vlr-notice-emergency {
  background: #FDF3F3;
  border: 2px solid var(--vlr-red);
  border-radius: var(--vlr-radius);
  padding: var(--vlr-space-4);
  margin: var(--vlr-space-5) 0;
}

/* ---- tables --------------------------------------------------------------- */
.vlr-table { width: 100%; border-collapse: collapse; }
.vlr-table th, .vlr-table td { padding: var(--vlr-space-3) var(--vlr-space-4); text-align: left; border-bottom: 1px solid var(--vlr-line); }
.vlr-table th { background: var(--vlr-paper); color: var(--vlr-navy); font-weight: var(--vlr-weight-bold); }

/* On a narrow screen a wide table becomes stacked rows rather than a sideways
   scroll nobody discovers. */
@media (max-width: 640px) {
  .vlr-table, .vlr-table tbody, .vlr-table tr, .vlr-table td { display: block; width: 100%; }
  .vlr-table thead { position: absolute; left: -9999px; }
  .vlr-table tr { border: 1px solid var(--vlr-line); border-radius: var(--vlr-radius); margin-bottom: var(--vlr-space-4); padding: var(--vlr-space-2); }
  .vlr-table td { border: 0; padding: var(--vlr-space-2) var(--vlr-space-3); }
  .vlr-table td::before { content: attr(data-label) ": "; font-weight: var(--vlr-weight-bold); color: var(--vlr-navy); }
}

/* ---- footer --------------------------------------------------------------- */
.vlr-footer {
  background: var(--vlr-ink); color: var(--vlr-text-invert);
  padding: var(--vlr-space-5) var(--vlr-space-4); margin-top: var(--vlr-space-7);
}
.vlr-footer a { color: var(--vlr-gold); }

.vlr-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- ZOOM ----------------------------------------------------------------
   At 300% zoom a 1280px window behaves like a 427px one. Everything below is
   about surviving that without a horizontal scrollbar or clipped text. */
@media (max-width: 480px) {
  html { font-size: 17px; }
  .vlr-shell { padding: var(--vlr-space-4) var(--vlr-space-3) var(--vlr-space-6); }
  .vlr-card { padding: var(--vlr-space-4); }
  .vlr-logo { height: 58px; }
  .vlr-btn { width: 100%; }
}
/* Co-authored by Claude AI */