/* MakerwellOS: black and white, thin black boxes, square corners, one sans-serif.
   Type runs from 12px to 24px and no further (Aaron: smallest 1x, biggest 2x).
   Colour only says something: a box turns a colour when its state needs attention. */

:root {
  --bg: #f3f2ee;
  --ink: #111111;
  --muted: #6b6a64;
  --hover: #e6e5df;
  --ok: #1f7a4a;
  --warn: #e3a400;
  --err: #c8312b;
  --none: #c4c3bd;
  --s1: 12px;
  --s2: 14px;
  --s3: 18px;
  --s4: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 var(--s2)/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

/* labels: small, uppercase, spaced, like Anduril's section tags */
.label { font-size: var(--s1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* top bar */
.bar {
  display: flex; align-items: center; gap: 32px; height: 48px; padding: 0 24px;
  border-bottom: 1px solid var(--ink);
  font-size: var(--s1); text-transform: uppercase; letter-spacing: 0.06em;
}
.bar .mark { font-weight: 700; letter-spacing: 0.08em; }
.bar nav { display: flex; gap: 24px; flex: 1; }
.bar nav a { color: var(--muted); }
.bar nav a[aria-current] { color: var(--ink); }
.bar .who { display: flex; align-items: center; gap: 16px; color: var(--muted); }
.bar .who button { background: none; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }

.page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }

/* page head */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.head h1 { font-size: var(--s4); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-top: 8px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

/* sections */
section { margin-top: 40px; }
section > header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 8px; }
section > header h2 { font-size: var(--s3); font-weight: 400; letter-spacing: -0.01em; }
.sub-head { margin: 24px 0 8px; }

/* grids of boxes: every box has its own 1px border, overlapped so neighbours share one line
   and an empty cell stays blank */
.grid { display: grid; padding: 0 1px 1px 0; }
.grid > * { border: 1px solid var(--ink); margin: 0 -1px -1px 0; }
.grid + .grid { margin-top: -1px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.box { background: var(--bg); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.box .value { font-size: var(--s4); letter-spacing: -0.02em; line-height: 1.1; }
.box .note { color: var(--muted); }
a.box:hover { background: var(--hover); }
a.box:hover .label, a.box:hover .note { color: var(--ink); }

/* a box that needs attention takes the colour of its state */
.box.is-warning, .box.is-warning:hover { background: var(--warn); }
.box.is-error, .box.is-overdue, .box.is-error:hover, .box.is-overdue:hover { background: var(--err); color: #fff; }
.box.is-warning .label, .box.is-warning .note { color: var(--ink); }
.box.is-error .label, .box.is-error .note, .box.is-overdue .label, .box.is-overdue .note { color: #fff; }

/* state marker: a small filled square */
.mark-sq { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--none); vertical-align: 0; }
.mark-sq.is-ok { background: var(--ok); }
.mark-sq.is-warning { background: var(--warn); }
.mark-sq.is-error, .mark-sq.is-overdue { background: var(--err); }
.mark-sq.is-running { background: var(--ink); }
.mark-sq.is-skipped { background: transparent; outline: 1px solid var(--ink); outline-offset: -1px; }

/* a marker on a box that already shows its colour would vanish */
.box[class*="is-"] .mark-sq, tr.is-failed .mark-sq { display: none; }

/* the last 14 nights */
.nights { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.night { background: var(--bg); height: 56px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-size: var(--s1); min-width: 0; }
.night .d { font-size: var(--s2); }
.night.is-ok { background: var(--ok); color: #fff; }
.night.is-warning { background: var(--warn); }
.night.is-error, .night.is-none, .night.is-overdue { background: var(--err); color: #fff; }
.night.is-running { background: var(--ink); color: #fff; }
.night.is-before { color: var(--none); }
.night.is-due { color: var(--muted); }
a.night:hover { outline: 2px solid var(--ink); outline-offset: -3px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: var(--s1); color: var(--muted); }

/* attention list */
.alerts .box { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }

/* tables */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 10px 16px; border-bottom: 1px solid var(--ink); }
th { font-weight: 400; font-size: var(--s1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
td.num { white-space: nowrap; }
tr.is-failed td { background: var(--warn); }

/* step logs */
details { border: 1px solid var(--ink); border-top: 0; }
details:first-of-type { border-top: 1px solid var(--ink); }
summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 140px 80px 120px 24px; gap: 16px; padding: 12px 16px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary:hover { background: var(--hover); }
summary .toggle::before { content: "+"; }
details[open] summary .toggle::before { content: "\2212"; }
details.is-error summary { background: var(--err); color: #fff; }
pre { font: var(--s1)/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: pre-wrap; word-break: break-word; padding: 16px; border-top: 1px solid var(--ink); max-height: 480px; overflow: auto; }
.step-note { padding: 0 16px 12px; color: var(--muted); }

/* buttons and forms */
.btn { display: inline-block; border: 1px solid var(--ink); background: none; padding: 8px 16px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--s1); }
.btn:hover { background: var(--ink); color: var(--bg); }
.login { max-width: 360px; margin: 96px auto; }
.login form { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--ink); padding: 24px; }
.login input { width: 100%; border: 1px solid var(--ink); background: var(--bg); padding: 10px 12px; }
.login input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.login .error { color: var(--err); }

@media (max-width: 720px) {
  .bar { gap: 16px; padding: 0 16px; }
  .page { padding: 24px 16px 48px; }
  .head { flex-direction: column; align-items: flex-start; }
  .bar .who span { display: none; }
  .stats, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nights { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .alerts .box { flex-direction: column; gap: 4px; }
  summary { grid-template-columns: 1fr 80px 24px; }
  summary .at, summary .took-col { display: none; }
}