/* Seraph, from ORB: a data dashboard in black and white. Pure white or pure black,
   ink in grey steps (opacity of the one ink colour), 1px hairlines, square corners,
   no glow or shadow. Colour only in small marks: signal orange for "this one" (the
   value that matters, what's selected), green for running, amber for attention,
   red for stopped or late. Monospace capitals for labels and numbers, system text
   for reading. The floor's canvas takes its colours from these tokens. */

:root {
  --page: #000;
  --ink: #fff;
  --ink-rgb: 255, 255, 255;
  --ink-dim: #b3b3b3;
  --ink-faint: #707070;
  --hair: rgba(255, 255, 255, 0.14);
  --hair-strong: rgba(255, 255, 255, 0.4);
  --wash: rgba(255, 255, 255, 0.05);
  --sig: #ff5f1a;
  --sig-rgb: 255, 95, 26;
  --ok: #1fd184;
  --ok-rgb: 31, 209, 132;
  --amber: #ffb020;
  --amber-rgb: 255, 176, 32;
  --ember: #ff4552;
  --ember-rgb: 255, 69, 82;
  --display: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --bar: 44px;
  color-scheme: dark;
}
:root[data-scheme='light'] {
  --page: #fff;
  --ink: #000;
  --ink-rgb: 0, 0, 0;
  --ink-dim: #4d4d4d;
  --ink-faint: #8f8f8f;
  --hair: rgba(0, 0, 0, 0.12);
  --hair-strong: rgba(0, 0, 0, 0.36);
  --wash: rgba(0, 0, 0, 0.035);
  --sig: #ff4f00;
  --sig-rgb: 255, 79, 0;
  --ok: #009e5a;
  --ok-rgb: 0, 158, 90;
  --amber: #e08a00;
  --amber-rgb: 224, 138, 0;
  --ember: #e5202e;
  --ember-rgb: 229, 32, 46;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-scheme='auto'] {
    --page: #fff;
    --ink: #000;
    --ink-rgb: 0, 0, 0;
    --ink-dim: #4d4d4d;
    --ink-faint: #8f8f8f;
    --hair: rgba(0, 0, 0, 0.12);
    --hair-strong: rgba(0, 0, 0, 0.36);
    --wash: rgba(0, 0, 0, 0.035);
    --sig: #ff4f00;
    --sig-rgb: 255, 79, 0;
    --ok: #009e5a;
    --ok-rgb: 0, 158, 90;
    --amber: #e08a00;
    --amber-rgb: 224, 138, 0;
    --ember: #e5202e;
    --ember-rgb: 229, 32, 46;
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 var(--display);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}

/* labels and numbers: monospace capitals */
.k,
.mono,
label,
th,
.btn,
.chip,
.tab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.dim {
  color: var(--ink-dim);
}
.faint {
  color: var(--ink-faint);
}
.sig {
  color: var(--sig);
}
.ok {
  color: var(--ok);
}
.warn {
  color: var(--amber);
}
.bad {
  color: var(--ember);
}

/* controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  background: var(--wash);
}
.btn:active {
  background: var(--hair);
}
.btn.sig {
  border-color: var(--sig);
  color: var(--sig);
}
.btn.solid {
  background: var(--ink);
  color: var(--page);
  border-color: var(--ink);
}
.btn.solid:hover {
  opacity: 0.85;
}
.btn.ghost {
  border-color: transparent;
}
.btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.btn svg,
.ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
input[type='text'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='email'],
input[type='tel'],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sig);
}
select option {
  background: var(--page);
  color: var(--ink);
}
input[type='number'] {
  font-family: var(--mono);
}
label {
  display: block;
  color: var(--ink-dim);
  margin: 0 0 4px;
}
.field {
  margin-bottom: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--hair-strong);
  white-space: nowrap;
}
.chip.sig {
  border-color: var(--sig);
  color: var(--sig);
}
.chip.ok {
  border-color: var(--ok);
}
.chip.warn {
  border-color: var(--amber);
}
.chip.bad {
  border-color: var(--ember);
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
}

/* tables */
table.tbl {
  width: 100%;
  border-collapse: collapse;
}
.tbl th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-faint);
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair-strong);
}
.tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}
.tbl td.num,
.tbl th.num {
  text-align: right;
}
.tbl tr.low td {
  color: var(--amber);
}

/* a progress hairline */
.meter {
  position: relative;
  height: 3px;
  background: var(--hair);
}
.meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink);
}
.meter.sig > i {
  background: var(--sig);
}
.meter.ok > i {
  background: var(--ok);
}

/* section headings */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--hair-strong);
  margin-bottom: 10px;
}
.head h2 {
  margin: 0;
  font: 500 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.head h2 b {
  color: var(--sig);
  font-weight: 500;
  margin-right: 8px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: var(--page);
  border: 1px solid var(--sig);
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 100;
}

/* Phones: fields at 16px, or iOS zooms into them on focus and the page slides sideways.
   And nothing may make the page itself wider than the screen. */
@media (max-width: 760px), (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fields never wider than where they're put. iOS Safari gives a date field and a select a
   width of their own (the longest option, the date picker's chrome) and ignores width: 100%
   unless the native look is dropped; here it is, with Seraph's own square arrow on selects. */
input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}
input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  text-align: left;
  min-height: 34px;
}
input[type='date']::-webkit-date-and-time-value {
  text-align: left;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 6px;
}

/* No double-tap zoom (pinch still zooms): on a phone, tapping a card twice zoomed Safari in,
   and Safari keeps that zoom for the page, so everything after looked too wide. */
html {
  touch-action: manipulation;
}