/* E-50 - the out-of-service board. Office and owner views.

   tokens rule 1: NO PER-SCREEN COLOUR. Every colour below is a var() out of
   web/tokens.css, which this lane imports and does not edit.
   tokens rule 2: colour never carries meaning alone. NOT SAFE is the inverse
   alert block (ground + words + border, 21:1), never a red tint.

   Read standing up on a phone: one column, no sideways scroll, the unit
   number big, everything else at --fs-label or --fs-min. The only control
   is the way back, and it navigates - it changes no record. */

* { box-sizing: border-box; }

body {
  padding: var(--sp-2);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}

h1, h2 {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: 0;
}

p { margin: var(--sp-1) 0; }

.bar {
  display: flex;
  align-items: center;
  gap: var(--tap-gap);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-rule) solid var(--c-rule);
  margin-bottom: var(--sp-2);
}

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-decoration: none;
}

:focus-visible {
  outline: var(--bw-focus) solid var(--c-accent);
  outline-offset: 2px;
}

.oos-count {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  margin: var(--sp-2) 0 var(--sp-1);
}

.oos-source {
  color: var(--c-text-2);
  font-size: var(--fs-min);
}

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

.oos-list > * + * { margin-top: var(--sp-2); }

.oos-row {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-wrap: anywhere;
}

.oos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
}

.oos-unit {
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  line-height: var(--lh-tight);
}

.oos-class, .oos-line, .oos-since {
  color: var(--c-text-2);
  font-size: var(--fs-min);
  font-weight: var(--fw-label);
}

.oos-status {
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
}

/* NOT SAFE: the inverse alert block, the same one the other screens use */
.alert {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-alert-text);
  border-radius: var(--radius);
  padding: 12px;
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-caps);
}

.oos-defects {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: var(--bw-rule) solid var(--c-rule);
}

.oos-defect + .oos-defect {
  margin-top: var(--sp-2);
}

.oos-item {
  font-size: var(--fs-label);
  font-weight: var(--fw-head);
}

.oos-note {
  font-size: var(--fs-label);
}

/* the hidden attribute outranks every display rule on this sheet */
[hidden] { display: none !important; }