/* E-89 gear check (ADR 0019 §5). tokens.css rule 1: NO PER-SCREEN COLOUR -
   this file names tokens only. Rule 2: colour never carries meaning alone -
   a chosen Pass / Fail is the inverted fill AND a heavy border AND the
   words "Answered: Pass / Fail" under the pair AND aria-pressed.
   Targets: --tap (56 px) is the floor for anything tappable - gloves.
   Built for 390 px wide (iPhone 12-16 class), no horizontal scroll. */

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  padding: var(--sp-2);
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}

h1 {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2) 0;
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-rule) solid var(--c-rule);
  overflow-wrap: anywhere;
}

h2, .label {
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
  margin: var(--sp-2) 0 var(--sp-1) 0;
}

p { margin: 0 0 var(--sp-1) 0; overflow-wrap: anywhere; }
.muted { color: var(--c-text-2); }
.big { font-size: var(--fs-head); font-weight: var(--fw-label); }

.gr-nav { margin-bottom: var(--sp-1); }
.gr-nav a.home {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  color: var(--c-accent);
  font-weight: var(--fw-label);
}

button,
a.primary {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: var(--tap-gap);
  padding: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-align: center;
  text-decoration: none;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

button.primary,
a.primary {
  min-height: var(--tap-primary);
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: var(--fw-head);
}

button.chosen {
  background: var(--c-text);
  color: var(--c-bg);
  border-color: var(--c-text);
  border-width: var(--bw-press);
  font-weight: var(--fw-head);
}

.gr-tabs { display: flex; gap: var(--tap-gap); margin-bottom: var(--sp-2); }
.gr-tabs button { flex: 1 1 0; margin: 0; }

/* one item: name, then Pass | Fail side by side, each half the width and
   never under --tap tall */
.gr-item {
  padding: var(--sp-1) 0 var(--sp-2) 0;
  border-bottom: var(--bw) solid var(--c-border);
}
.gr-item-name {
  color: var(--c-text);
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  margin: var(--sp-1) 0;
}
.gr-pair { display: flex; gap: var(--tap-gap); }
.gr-pair button { flex: 1 1 0; min-width: 0; margin-bottom: var(--tap-gap); }
.gr-pair button.gr-pass,
.gr-pair button.gr-fail { min-height: var(--tap-primary); font-weight: var(--fw-head); }
.gr-state { font-weight: var(--fw-label); }

/* SG-14: the out-of-service line - heavy, inverse, never colour alone */
.gr-oos,
.alert,
.banner {
  padding: var(--sp-1);
  margin-bottom: var(--sp-1);
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  font-weight: var(--fw-head);
  border-radius: var(--radius);
}

.gr-chips { display: flex; flex-wrap: wrap; gap: var(--tap-gap); }
.gr-chips button { flex: 1 1 calc(50% - var(--tap-gap)); min-width: 0; margin: 0; }

.gr-ask { margin: var(--sp-1) 0; }

textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--tap) * 2);
  margin-bottom: var(--sp-2);
  padding: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

label {
  display: block;
  margin: var(--sp-2) 0 var(--sp-1) 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
}

.gr-confirm { margin-bottom: var(--sp-2); }

.gr-card {
  margin-bottom: var(--sp-2);
  padding: var(--sp-1);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
}
.gr-rb { margin: 0 0 4px 0; }
.gr-rb-fail { font-weight: var(--fw-head); }
.gr-list-head, .gr-phone-head { font-weight: var(--fw-head); }