/* knapp.gripe — one stylesheet, no build step.
   Palette carried over from the fleet placeholder pages so this does not look
   like a different estate: deep navy ground, cyan structure, green for live. */

:root {
  color-scheme: dark;
  --bg:      #071019;
  --bg-2:    #0b1824;
  --bg-3:    #0e1f2e;
  --line:    rgba(120, 220, 255, .16);
  --line-2:  rgba(120, 220, 255, .28);
  --ink:     #cfe6f2;
  --ink-2:   #7f9aab;
  --ink-3:   #577283;
  --bright:  #eaf9ff;
  --cyan:    #5ee7ff;
  --green:   #62ffb0;
  --amber:   #ffcf5e;
  --red:     #ff7b7b;
  --radius:  10px;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.plain { display: grid; place-items: center; min-height: 100vh; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--bright); letter-spacing: -.01em; font-weight: 650; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }
h3 { font-size: .9rem; margin: 0 0 .5rem; }

code, .mono { font-family: var(--mono); font-size: .85em; }

/* ── header ──────────────────────────────────────────────────────────── */

.top {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.25rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  flex-wrap: wrap;
}
.brand { font-weight: 700; color: var(--bright); letter-spacing: -.02em; }
.brand span { color: var(--ink-3); font-weight: 400; }
.brand:hover { text-decoration: none; }

.top nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.top nav a {
  padding: .35rem .7rem; border-radius: 7px; color: var(--ink-2);
  font-size: .875rem;
}
.top nav a:hover { background: rgba(94, 231, 255, .07); color: var(--ink); text-decoration: none; }
.top nav a.on { background: rgba(94, 231, 255, .12); color: var(--bright); }

.who { display: flex; align-items: center; gap: .85rem; font-size: .8rem; }
.who .user { color: var(--ink-2); font-family: var(--mono); }
.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); font: inherit; text-decoration: underline;
}
.linky:hover { color: var(--ink); }
form.inline { display: inline; margin: 0; }

.lamp { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-3); }
.lamp i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ink-3); box-shadow: 0 0 0 0 rgba(98, 255, 176, .5);
}
.lamp.up    i { background: var(--green); animation: pulse 2.4s infinite; }
.lamp.busy  i { background: var(--amber); animation: pulse 1s infinite; }
.lamp.down  i { background: var(--red); }
.lamp.up    { color: var(--green); }
.lamp.busy  { color: var(--amber); }
.lamp.down  { color: var(--red); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 .4rem transparent; opacity: .75; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.qbadge {
  padding: .15rem .5rem; border-radius: 999px; font-size: .7rem;
  background: rgba(255, 207, 94, .12); color: var(--amber);
  border: 1px solid rgba(255, 207, 94, .3);
}
.qbadge:hover { text-decoration: none; background: rgba(255, 207, 94, .2); }

/* ── layout ──────────────────────────────────────────────────────────── */

main { padding: 1.5rem 1.25rem 5rem; max-width: 1180px; margin: 0 auto; }
main.centred { padding: 2rem 1.25rem; max-width: 26rem; width: 100%; }

.lede { color: var(--ink-2); margin: 0 0 1.5rem; font-size: .9rem; }

.panel {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.panel + .panel { margin-top: 1rem; }

.grid { display: grid; gap: 1rem; }
.grid.tiles  { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.models { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid.shots  { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

/* ── tiles ───────────────────────────────────────────────────────────── */

.tile {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.tile .k {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: .3rem;
}
.tile .v { font-size: 1.45rem; color: var(--bright); font-weight: 600; line-height: 1.2; }
.tile .v small { font-size: .75rem; color: var(--ink-3); font-weight: 400; }
.tile .sub { font-size: .76rem; color: var(--ink-2); margin-top: .2rem; }

/* ── notices ─────────────────────────────────────────────────────────── */

.note, .warn, .bad, .good {
  padding: .7rem .9rem; border-radius: 8px; font-size: .86rem;
  margin: 0 0 1.1rem; border: 1px solid;
}
.note { background: rgba(94, 231, 255, .06);  border-color: var(--line-2);                color: var(--ink); }
.warn { background: rgba(255, 207, 94, .07);  border-color: rgba(255, 207, 94, .3);       color: #ffe3a6; }
.bad  { background: rgba(255, 123, 123, .07); border-color: rgba(255, 123, 123, .32);     color: #ffc2c2; }
.good { background: rgba(98, 255, 176, .07);  border-color: rgba(98, 255, 176, .28);      color: #a9f8cd; }
.note p:last-child, .warn p:last-child, .bad p:last-child { margin-bottom: 0; }
.note p:first-child, .warn p:first-child, .bad p:first-child { margin-top: 0; }

/* ── forms ───────────────────────────────────────────────────────────── */

label.field { display: block; margin-bottom: .9rem; }
label.field > .lab {
  display: block; font-size: .76rem; letter-spacing: .04em;
  color: var(--ink-2); margin-bottom: .3rem;
}
label.field .hint { color: var(--ink-3); font-size: .72rem; }

input[type=text], input[type=number], input[type=password], textarea, select {
  width: 100%; padding: .55rem .7rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit;
}
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(94, 231, 255, .12);
}
input.bad-field { border-color: var(--red); }

.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 8rem; }

.check { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.check input { width: auto; }
.check span { font-size: .85rem; color: var(--ink-2); }

.err { color: var(--red); font-size: .74rem; display: block; margin-top: .2rem; }

.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: rgba(94, 231, 255, .1);
  color: var(--bright); font: inherit; font-size: .875rem; cursor: pointer;
  text-align: center;
}
.btn:hover { background: rgba(94, 231, 255, .18); text-decoration: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.go { background: rgba(98, 255, 176, .12); border-color: rgba(98, 255, 176, .35); color: #c8ffe4; }
.btn.go:hover { background: rgba(98, 255, 176, .2); }
.btn.danger { background: rgba(255, 123, 123, .1); border-color: rgba(255, 123, 123, .35); color: #ffc2c2; }
.btn.danger:hover { background: rgba(255, 123, 123, .2); }
.btn.small { padding: .32rem .7rem; font-size: .78rem; }
.btn.wide { width: 100%; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── inline confirm (never a popup) ──────────────────────────────────── */

.confirm { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.confirm[hidden] { display: none; }
.confirm .q { font-size: .78rem; color: #ffc2c2; }

/* ── model cards ─────────────────────────────────────────────────────── */

.model {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.model.resident { border-color: rgba(98, 255, 176, .4); background: var(--bg-3); }
.model.broke    { border-color: rgba(255, 123, 123, .35); }
.model .head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.model .head h3 { margin: 0; flex: 1; }
.model .notes { font-size: .8rem; color: var(--ink-2); margin: 0; }
.model dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: .15rem .7rem; font-size: .78rem;
}
.model dt { color: var(--ink-3); }
.model dd { margin: 0; color: var(--ink); font-family: var(--mono); font-size: .95em; }

.tag {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .12rem .45rem; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.tag.image { color: var(--cyan);  border-color: rgba(94, 231, 255, .35);  background: rgba(94, 231, 255, .08); }
.tag.audio { color: #d7a6ff;      border-color: rgba(215, 166, 255, .35); background: rgba(215, 166, 255, .08); }
.tag.video { color: var(--amber); border-color: rgba(255, 207, 94, .35);  background: rgba(255, 207, 94, .08); }
.tag.free       { color: var(--green); border-color: rgba(98, 255, 176, .35);  background: rgba(98, 255, 176, .08); }
.tag.restricted { color: var(--amber); border-color: rgba(255, 207, 94, .35);  background: rgba(255, 207, 94, .08); }
.tag.no         { color: var(--red);   border-color: rgba(255, 123, 123, .35); background: rgba(255, 123, 123, .08); }
.tag.unknown    { color: var(--ink-3); border-color: var(--line); }
.tag.on         { color: var(--green); border-color: rgba(98, 255, 176, .4);   background: rgba(98, 255, 176, .1); }
.tag.off        { color: var(--ink-3); border-color: var(--line); }

/* ── tables ──────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th {
  text-align: left; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); font-weight: 500;
  padding: .4rem .6rem; border-bottom: 1px solid var(--line);
}
td { padding: .5rem .6rem; border-bottom: 1px solid rgba(120, 220, 255, .07); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.flash td { background: rgba(94, 231, 255, .08); }
td.num { font-family: var(--mono); color: var(--ink-2); }

.state { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.state.queued    { color: var(--ink-3); }
.state.running   { color: var(--amber); }
.state.done      { color: var(--green); }
.state.failed    { color: var(--red); }
.state.cancelled { color: var(--ink-3); }

.bar {
  height: 5px; border-radius: 999px; background: rgba(120, 220, 255, .12);
  overflow: hidden; min-width: 70px;
}
.bar i { display: block; height: 100%; background: var(--cyan); border-radius: 999px; transition: width .4s; }
.bar.green i { background: var(--green); }

/* ── gallery ─────────────────────────────────────────────────────────── */

.shot {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg); }
.shot .meta { padding: .5rem .6rem; font-size: .7rem; color: var(--ink-3); }
.shot .meta b { color: var(--ink-2); font-weight: 500; display: block; }
.shot audio, .shot video { width: 100%; display: block; }
.shot-actions {
  display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem;
  padding-top: .45rem; border-top: 1px solid rgba(120, 220, 255, .1);
}
.shot-actions .btn.small { padding: .2rem .5rem; font-size: .7rem; }

.empty {
  padding: 2.5rem 1rem; text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--radius); font-size: .88rem;
}

.filters { display: flex; gap: .35rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filters a {
  padding: .25rem .65rem; border-radius: 999px; font-size: .78rem;
  border: 1px solid var(--line); color: var(--ink-2);
}
.filters a.on { background: rgba(94, 231, 255, .12); color: var(--bright); border-color: var(--line-2); }
.filters a:hover { text-decoration: none; border-color: var(--line-2); }

/* ── login ───────────────────────────────────────────────────────────── */

.login { text-align: center; }
.login h1 { margin-bottom: 1.25rem; }
.login .or { margin: 1.1rem 0 .7rem; color: var(--ink-3); font-size: .8rem; }
.login .foot { margin-top: 1.5rem; font-size: .76rem; color: var(--ink-3); line-height: 1.7; }

/* ── misc ────────────────────────────────────────────────────────────── */

.meta-line { font-size: .78rem; color: var(--ink-3); }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.dim { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
details.params summary { cursor: pointer; font-size: .78rem; color: var(--ink-3); }
details.params pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .7rem; overflow-x: auto; font-size: .74rem; color: var(--ink-2);
}