/* LoopCheck shared styles — field-utility design tokens.
   High contrast for control rooms and sunlight, system fonts for zero
   webfont bytes, tap targets sized for gloved hands. One primary accent
   (safety orange), spent only on the main action. Severity has its own
   fixed color language (A red / B amber / C grey) used everywhere. */

:root {
  --ink:    #14161a;   /* near-black text */
  --paper:  #ffffff;
  --steel:  #5b6470;   /* secondary text */
  --line:   #d8dce1;   /* hairlines */
  --wash:   #f4f6f8;   /* panel fill */
  --safety: #ff5a1f;   /* the one action accent */
  --go:     #1b8a4b;   /* confirmation / pass */

  /* Severity — a fixed, load-bearing color language. */
  --sev-a:  #c0281f;   /* A: blocks startup */
  --sev-b:  #b8760a;   /* B: blocks substantial completion */
  --sev-c:  #5b6470;   /* C: cosmetic, does not block */
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 56px;
}

a { color: inherit; }

/* Stamped-plate header, like an equipment nameplate. */
header.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 10px; margin-bottom: 20px;
}
.mark {
  font-weight: 800; letter-spacing: .04em; font-size: 14px;
  text-transform: uppercase;
}
.mark a { text-decoration: none; }
.tag {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 700; font-size: 20px;
  border: 2px solid var(--ink); padding: 1px 8px;
}

h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
h2.section {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
  margin: 26px 0 10px;
}
.meta { color: var(--steel); font-size: 14px; margin-top: 2px; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

/* Breadcrumb / back link */
.crumb {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: var(--steel); text-decoration: none; margin-bottom: 12px;
}
.crumb:hover { color: var(--ink); }

/* Data plate — the stenciled answer to a "what/where" question. */
.plate {
  margin-top: 8px; border: 3px solid var(--ink); padding: 16px;
}
.plate .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
.plate .big {
  font-size: 30px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.1; margin-top: 4px;
}

/* Rows / list cards */
.card {
  display: block; text-decoration: none;
  border: 2px solid var(--ink); padding: 14px; margin-bottom: 10px;
}
.card:hover { background: var(--wash); }
.card .title { font-size: 18px; font-weight: 700; }
.card .sub { color: var(--steel); font-size: 14px; margin-top: 2px; }

/* Severity chips + count badges */
.chip {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; padding: 2px 8px; border: 2px solid currentColor;
  border-radius: 0; line-height: 1.5;
}
.sev-A { color: var(--sev-a); }
.sev-B { color: var(--sev-b); }
.sev-C { color: var(--sev-c); }
.counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.count {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px; font-weight: 800;
  padding: 2px 8px; border: 2px solid currentColor;
}
.count.zero { color: var(--line); }

/* Punch item row */
.punch {
  border: 2px solid var(--line); border-left-width: 6px;
  padding: 12px; margin-bottom: 10px;
}
.punch.sev-A { border-left-color: var(--sev-a); }
.punch.sev-B { border-left-color: var(--sev-b); }
.punch.sev-C { border-left-color: var(--sev-c); }
.punch.closed { opacity: .55; }
.punch .desc { font-size: 16px; font-weight: 600; }
.punch .line { color: var(--steel); font-size: 13px; margin-top: 4px; }
.punch img.thumb { max-width: 100%; margin-top: 8px; border: 1px solid var(--line); }

/* Forms */
label.fl {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--steel); margin: 12px 0 4px;
}
input[type=text], input[type=number], textarea, select {
  width: 100%; min-height: 52px;
  font: inherit; font-size: 17px; padding: 12px;
  border: 2px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
textarea { min-height: 88px; resize: vertical; }
input[type=file] { width: 100%; font: inherit; padding: 8px 0; }

/* Severity radio group — big, color-coded */
.sevpick { display: flex; gap: 8px; }
.sevpick label {
  flex: 1; text-align: center; cursor: pointer;
  border: 2px solid var(--line); padding: 12px 6px;
  font-weight: 800; font-size: 14px;
}
.sevpick input { position: absolute; opacity: 0; }
.sevpick label.a.on { border-color: var(--sev-a); color: var(--sev-a); background: #fbe9e7; }
.sevpick label.b.on { border-color: var(--sev-b); color: var(--sev-b); background: #fdf1de; }
.sevpick label.c.on { border-color: var(--sev-c); color: var(--sev-c); background: var(--wash); }
.sevpick small { display: block; font-weight: 600; font-size: 11px; color: var(--steel); margin-top: 3px; }

button.go {
  width: 100%; min-height: 60px; margin-top: 16px;
  font: inherit; font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--safety); color: #fff; border: none; cursor: pointer;
}
button.go.secondary { background: var(--ink); }
button.go:disabled { background: var(--line); color: var(--steel); cursor: default; }
button.go:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--safety); outline-offset: 2px;
}
button.link {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--steel); text-decoration: underline;
}

/* Disabled stub button with a "coming soon" note */
.stub { margin-top: 12px; }
.stub .note { font-size: 13px; color: var(--steel); margin-top: 6px; }

.flash { margin-top: 14px; padding: 14px; font-weight: 700; color: #fff; background: var(--go); }
.error { margin-top: 14px; padding: 14px; background: #fdecea; color: #a1160a; font-weight: 600; }
.loading { color: var(--steel); padding: 40px 0; text-align: center; }
.empty { color: var(--steel); padding: 20px 0; }