/* ---------------------------------------------------------------------------
   agency floor

   One stylesheet, responsive from a phone to a 4K wall.

   The layout scales by container width rather than by device, because the same
   page has to work on a laptop at a desk and on a screen across the room. Type
   sizes use clamp() against viewport width so a 4K display gets genuinely
   bigger text rather than the same text with more whitespace.

   Colour carries meaning and nothing else:
     cyan    the swarm is working
     amber   waiting on someone inside the agency
     violet  waiting on the client or an outside party
     red     irreversible, someone is about to spend money or ship
   --------------------------------------------------------------------------- */

:root {
  --bg: #0a1014;
  --surface: #111a20;
  --surface-2: #16222a;
  --line: #22333d;
  --text: #e6f1f4;
  --muted: #7f9aa6;
  --cyan: #00d4de;
  --amber: #f0a830;
  --violet: #a98bff;
  --red: #ff5d5d;
  --green: #35d29a;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(14px, 0.62vw + 10px, 22px);
  line-height: 1.45;
}

code, .mono, .tid {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

/* --- top bar --------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem clamp(0.75rem, 1.5vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d151a, #0a1014);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.wordmark { font-weight: 600; letter-spacing: 0.01em; }
.sep { color: var(--muted); }
.pagename { color: var(--muted); }

.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a { color: var(--muted); font-size: 0.9em; }
.topbar nav a:hover { color: var(--cyan); }

.live { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.85em; }
.pulse {
  width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--green);
  animation: breathe 2s ease-in-out infinite;
}
.pulse.stale { background: var(--red); animation: none; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

main { padding: clamp(0.75rem, 1.2vw, 1.75rem); }

/* --- stat strip ------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(0.5rem, 0.8vw, 1rem);
  margin-bottom: clamp(0.75rem, 1.2vw, 1.5rem);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(0.6rem, 0.9vw, 1.1rem);
}
.stat .n { font-size: clamp(1.8rem, 2.6vw, 3.4rem); font-weight: 600; line-height: 1; }
.stat .k { color: var(--muted); font-size: 0.8em; text-transform: lowercase; margin-top: 0.35em; }
.stat.accent .n { color: var(--cyan); }
.stat.warn .n { color: var(--amber); }

/* --- wall grid ------------------------------------------------------------- */

.wallgrid {
  display: grid;
  gap: clamp(0.6rem, 1vw, 1.25rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .wallgrid { grid-template-columns: 1.15fr 1fr; }
  .panel.feed { grid-column: 1 / -1; }
}

@media (min-width: 1600px) {
  .wallgrid { grid-template-columns: 1.2fr 1fr 0.85fr; }
  .panel.feed { grid-column: auto; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(0.7rem, 1vw, 1.25rem);
  min-height: 0;
}

.panel h2 {
  margin: 0 0 0.75rem 0;
  font-size: clamp(0.95rem, 0.9vw, 1.4rem);
  font-weight: 600;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.hint { color: var(--muted); font-size: 0.72em; font-weight: 400; }

/* --- jobs ------------------------------------------------------------------ */

.joblist { display: flex; flex-direction: column; gap: 0.6rem; }

.job {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}
.job.blocked { border-left-color: var(--amber); }
.job.done { border-left-color: var(--green); opacity: 0.55; }

.job .row1 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.job .ref { font-weight: 600; color: var(--cyan); }
.job.done .ref { color: var(--green); }
.job .client { font-weight: 500; }
.job .meta { margin-left: auto; color: var(--muted); font-size: 0.8em; }

.job .places { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.chip {
  background: #0e181e;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  font-size: 0.78em;
  color: var(--muted);
}
.chip .ph { color: var(--cyan); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; }

.job .track { display: flex; gap: 2px; margin-top: 0.55rem; }
.job .track i {
  flex: 1; height: 4px; border-radius: 2px; background: #14212a;
}
.job .track i.on { background: var(--cyan); }
.job .track i.here { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* --- gates ----------------------------------------------------------------- */

.gatelist { display: flex; flex-direction: column; gap: 0.55rem; }

.gate {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
}
.gate.external { border-left-color: var(--violet); }
.gate.irreversible { border-left-color: var(--red); }

.gate .row1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.gate .act { font-weight: 500; }
.gate .who { color: var(--muted); font-size: 0.8em; }
.gate .wait { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--amber); font-size: 0.85em; }
.gate.external .wait { color: var(--violet); }

.tag {
  font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1em 0.5em; border-radius: 4px; border: 1px solid var(--line);
  color: var(--muted);
}
.tag.ext { color: var(--violet); border-color: var(--violet); }
.tag.int { color: var(--amber); border-color: var(--amber); }
.tag.rev { color: var(--red); border-color: var(--red); }
.tag.auto { color: var(--cyan); border-color: var(--cyan); }

.gate .stop {
  margin-top: 0.45rem; font-size: 0.78em; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: 0.6rem;
}

.gate form { margin-top: 0.5rem; }
button.release {
  background: transparent; border: 1px solid var(--cyan); color: var(--cyan);
  border-radius: 6px; padding: 0.3em 0.9em; font-size: 0.82em; cursor: pointer;
  font-family: inherit;
}
button.release:hover { background: var(--cyan); color: #06222a; }

/* --- feed ------------------------------------------------------------------ */

.feedlist { display: flex; flex-direction: column; gap: 0.3rem; max-height: 60vh; overflow-y: auto; }

.ev {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.3rem 0.4rem; border-radius: 5px; font-size: 0.85em;
}
.ev:nth-child(odd) { background: #0e171d; }
.ev .t { color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.ev .ag { color: var(--cyan); min-width: 9em; }
.ev .ac { flex: 1; }
.ev .jr { color: var(--muted); font-size: 0.85em; }
.ev.new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(0,212,222,0.22); } to { background: transparent; } }

/* --- generic pages --------------------------------------------------------- */

.page { max-width: 1100px; margin: 0 auto; }
.page h1 { font-size: clamp(1.3rem, 1.6vw, 2.2rem); margin: 0 0 0.3rem; }
.page .sub { color: var(--muted); margin-bottom: 1.5rem; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem;
}

table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 0.85em; text-transform: lowercase; }
tr:last-child td { border-bottom: none; }

.form label { display: block; margin-bottom: 0.9rem; }
.form span { display: block; color: var(--muted); font-size: 0.85em; margin-bottom: 0.3rem; }
.form input, .form select, .form textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 6px; padding: 0.55em 0.7em;
  font-family: inherit; font-size: 1em;
}
.form textarea { min-height: 6em; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form button {
  background: var(--cyan); color: #06222a; border: none; border-radius: 6px;
  padding: 0.6em 1.6em; font-size: 1em; font-weight: 600; cursor: pointer;
  font-family: inherit;
}

.errors { border-left: 3px solid var(--red); padding-left: 0.9rem; margin-bottom: 1.2rem; }
.errors li { color: var(--red); }

.timeline { display: flex; flex-direction: column; gap: 0.2rem; }
.tl { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.35rem 0.5rem; border-radius: 5px; }
.tl:nth-child(odd) { background: #0e171d; }
.tl .n { color: var(--muted); min-width: 2.5em; font-variant-numeric: tabular-nums; }
.tl .ag { color: var(--cyan); min-width: 10em; }

.rules dt { color: var(--muted); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.6rem; }
.rules dd { margin: 0.15rem 0 0 0; }

.empty { color: var(--muted); font-style: italic; padding: 1rem 0; }

/* Sign out sits in the nav and has to read as a link, not a button, but it
   must be a real POST form: Django rejects GET logout, correctly. */
.linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 0.9em;
}
.linkbtn:hover { color: var(--cyan); text-decoration: underline; }