/* TrueFlow Hub: a plant control room, not a customer portal.
   Concrete wall, enamel panels, annunciator windows, a tank gauge per station. */
:root {
  --concrete: #d6dcde;
  --enamel: #f4f6f5;
  --ink: #12202b;
  --ink-2: #3c4d5a;
  --rule: #a9b5bb;
  --water: #0f6fa8;
  --ok: #1e8a5a;
  --warn: #d99a00;
  --alarm: #c23a2e;
  --silent: #6a7882;
  --font: "Barlow", system-ui, sans-serif;
  --font-c: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--concrete); }
body {
  margin: 0; min-height: 100vh;
  font: 400 1rem/1.5 var(--font); color: var(--ink); background: var(--concrete);
}
a { color: var(--water); }
:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }

/* masthead */
.mast {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding: .75rem max(1rem, 4vw); background: var(--ink); color: #fff;
}
.mark { font: 700 1.35rem/1 var(--font-c); color: #fff; text-decoration: none; letter-spacing: .01em; }
.mark span { font-weight: 500; color: #8fb8d4; }
.mast nav { display: flex; gap: 1.25rem; margin-right: auto; }
.mast nav a { color: #c7d3db; text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.mast nav a:hover { color: #fff; }
.mast nav a[aria-current] { color: #fff; border-bottom-color: #8fb8d4; }
.out button { background: none; border: 1px solid #4b5f6e; color: #c7d3db; font: inherit; padding: .3rem .8rem; border-radius: 3px; cursor: pointer; }
.out button:hover { color: #fff; border-color: #8fb8d4; }

main { padding: 1.5rem max(1rem, 4vw) 4rem; max-width: 80rem; margin: 0 auto; }
h1 { font: 700 2rem/1.1 var(--font-c); margin: .5rem 0 .5rem; }
h2 { font: 600 1.25rem/1.2 var(--font-c); margin: 0; }
.lede { max-width: 38rem; color: var(--ink-2); margin: 0 0 1.5rem; }
.small { color: var(--ink-2); font-size: .9rem; }
code { font: 500 .95em ui-monospace, Menlo, Consolas, monospace; background: #e3e8ea; padding: .1em .35em; border-radius: 3px; }

.notice { background: var(--enamel); border-left: 4px solid var(--water); padding: .6rem 1rem; margin-bottom: 1.25rem; border-radius: 0 3px 3px 0; }
.notice p { margin: .15rem 0; }

/* annunciator strip: four lit windows */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--ink); padding: 2px; border-radius: 4px; margin-bottom: 1.5rem; }
.win { background: #223341; color: #8da1af; padding: .7rem 1rem; display: flex; align-items: baseline; gap: .6rem; }
.win b { font: 700 2rem/1 var(--font-c); font-variant-numeric: tabular-nums; }
.win span { font-size: .95rem; }
.win.lit-ok { background: var(--ok); color: #fff; }
.win.lit-alarm { background: var(--alarm); color: #fff; }
.win.lit-silent { background: var(--silent); color: #fff; }

/* stations */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.25rem; }
.station { background: var(--enamel); border: 1px solid var(--rule); border-top: 6px solid var(--silent); border-radius: 3px; padding: 1rem 1.1rem 1.1rem; }
.station.s-ok { border-top-color: var(--ok); }
.station.s-alarm { border-top-color: var(--alarm); }
.station.s-silent { border-top-color: var(--silent); }
.station.s-new { border-top-color: var(--rule); }
.station header { display: flex; align-items: center; gap: .75rem; }
.lamp { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--silent); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rule); }
.s-ok .lamp { background: var(--ok); }
.s-alarm .lamp { background: var(--alarm); }
.s-new .lamp { background: #fff; }
.host { font-size: .9rem; color: var(--ink-2); text-decoration: none; word-break: break-all; }
.host:hover { text-decoration: underline; }
.why { margin: .75rem 0 0; padding: .35rem .6rem; background: #f6dcd8; color: #7c1f16; border-radius: 3px; font-weight: 500; }
.s-silent .why { background: #e1e6e9; color: #2c3a44; }

.body { display: flex; gap: 1.1rem; margin-top: 1rem; align-items: stretch; }

/* the tank: disk, filled like water, with the limit marked */
.tank { position: relative; width: 4.2rem; min-height: 9rem; flex: none; background: #fff; border: 2px solid var(--ink); border-radius: 6px 6px 10px 10px; overflow: hidden; }
.water { position: absolute; left: 0; right: 0; bottom: 0; background: var(--water); transition: height .8s ease; }
.s-alarm .water { background: var(--alarm); }
.s-silent .water { background: #8a98a2; }
.limit { position: absolute; left: 0; right: 0; height: 0; }
.limit i { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); }
.pct { position: absolute; left: 0; right: 0; top: .35rem; text-align: center; font: 700 1.15rem/1 var(--font-c); color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; align-content: start; font-size: .95rem; min-width: 0; }
dt { color: var(--ink-2); }
dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; }
.dim { color: var(--ink-2); font-size: .85rem; }
.bar { display: block; position: relative; height: 6px; margin-top: 4px; background: #d9e0e3; border-radius: 3px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); }
.s-alarm .bar i { background: var(--warn); }
.bar u { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink); }

.empty { background: var(--enamel); padding: 2rem; border: 1px solid var(--rule); border-radius: 3px; max-width: 34rem; }
.empty p { color: var(--ink-2); }

/* forms and tables */
.panel { background: var(--enamel); border: 1px solid var(--rule); border-radius: 3px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.panel h2 { margin-bottom: .75rem; }
label { display: block; font-weight: 500; }
input { display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; font: inherit; border: 1px solid #7e8d96; border-radius: 3px; background: #fff; color: var(--ink); }
.stack { display: grid; gap: 1rem; max-width: 24rem; }
.row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 1rem; align-items: end; }
.btn { display: inline-block; font: 600 1rem var(--font); padding: .6rem 1.2rem; background: var(--ink); color: #fff; border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; }
.btn:hover { background: #1e3342; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; color: var(--ink-2); }
.acts { display: flex; gap: 1rem; justify-content: flex-end; }
.acts form { margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--water); cursor: pointer; text-decoration: underline; }
button.link.danger { color: var(--alarm); }

/* sign-in and one-time screens */
.gate { max-width: 26rem; margin: 3rem auto; background: var(--enamel); padding: 2rem; border: 1px solid var(--rule); border-top: 6px solid var(--ink); border-radius: 3px; }
.gate.wide { max-width: 40rem; }
.qr { display: block; margin: 0 0 1rem; border: 1px solid var(--rule); padding: 6px; background: #fff; }
.codes { columns: 2; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.codes li { margin: .25rem 0; }
.cmd { background: var(--ink); color: #dfeaf1; padding: 1rem; border-radius: 3px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font: 500 .9rem/1.5 ui-monospace, Menlo, Consolas, monospace; user-select: all; }

@media (max-width: 40rem) {
  .strip { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 1fr; }
  .mast { gap: 1rem; }
  .grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .water { transition: none; } }