/* Sean - IT management. One stylesheet, no framework, no build step.
   Colour is used only to mean something: red is "wrong number or down", amber is "cannot tell",
   green is "verified". Nothing decorative is coloured, so a coloured cell always carries meaning. */

:root {
  --bg:#f6f7f9; --card:#fff; --ink:#111827; --dim:#6b7280; --line:#e5e7eb;
  --bad:#b91c1c; --badbg:#fef2f2; --meh:#92400e; --mehbg:#fffbeb;
  --good:#166534; --goodbg:#f0fdf4; --accent:#1d4ed8;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.top { display:flex; align-items:center; gap:18px; padding:10px 20px; background:#0f172a; color:#fff; flex-wrap:wrap; }
.brand { display:flex; flex-direction:column; text-decoration:none; color:#fff; line-height:1.15; }
.brand .who { font-weight:700; font-size:1.1rem; letter-spacing:.3px; }
.brand .role { font-size:.7rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.9px; }
.nav { display:flex; gap:4px; flex-wrap:wrap; margin-left:10px; }
.nav a, .nav .soon { padding:6px 11px; border-radius:7px; text-decoration:none; color:#cbd5e1; font-size:.9rem; }
.nav a:hover { background:#1e293b; color:#fff; }
.nav a.on { background:#1d4ed8; color:#fff; }
.nav .soon { color:#64748b; cursor:not-allowed; }
.out { margin-left:auto; display:flex; align-items:center; gap:10px; }
.out .me { font-size:.85rem; color:#94a3b8; }
.out button { background:#1e293b; color:#cbd5e1; border:1px solid #334155; padding:5px 11px; border-radius:7px; cursor:pointer; font-size:.85rem; }
.out button:hover { background:#334155; color:#fff; }

main { max-width:1180px; margin:0 auto; padding:24px 20px 60px; }
h1 { font-size:1.45rem; margin:0 0 6px; }
h2 { font-size:1.05rem; margin:30px 0 10px; display:flex; align-items:center; gap:9px; }
h3 { font-size:.95rem; margin:0 0 6px; }
.lede { color:var(--dim); margin:0 0 18px; }
.dim { color:var(--dim); }
.sm { font-size:.82rem; }
.count { background:var(--line); color:var(--dim); border-radius:20px; padding:1px 9px; font-size:.75rem; font-weight:600; }

.grid { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.grid th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--dim); padding:9px 12px; background:#fafafa; border-bottom:1px solid var(--line); }
.grid td { padding:11px 12px; border-bottom:1px solid #f1f2f4; vertical-align:top; }
.grid tr:last-child td { border-bottom:0; }
.grid.quiet td, .grid.quiet th { padding:8px 12px; }
.num { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem; white-space:nowrap; }

/* Severity. r0/r1 are the cases this page exists to make impossible to miss. */
tr.r0 { background:var(--badbg); box-shadow:inset 4px 0 0 var(--bad); }
tr.r1, tr.r2 { background:var(--badbg); box-shadow:inset 4px 0 0 var(--bad); }
tr.r3, tr.r4 { background:var(--badbg); }
tr.r5 { background:var(--mehbg); }

.bad { color:var(--bad); font-weight:650; }
.meh { color:var(--meh); font-weight:600; }
.good { color:var(--good); font-weight:600; }

.tag { display:inline-block; background:var(--line); color:var(--dim); border-radius:5px;
  padding:1px 7px; font-size:.7rem; margin-left:5px; vertical-align:middle; }
.tag.ok { background:var(--goodbg); color:var(--good); }
.tag.new { background:#eef2ff; color:var(--accent); }

.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:5px 12px; border-radius:7px; font-size:.84rem; white-space:nowrap; }
.btn:hover { filter:brightness(1.1); }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid #c7d2fe; }

.warn { background:var(--badbg); border:1px solid #fecaca; color:#7f1d1d; padding:11px 14px; border-radius:9px; margin:0 0 16px; }
.info { background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; padding:11px 14px; border-radius:9px; margin:0 0 16px; }
.ok-banner { background:var(--goodbg); border:1px solid #bbf7d0; color:var(--good); padding:13px 16px; border-radius:9px; font-weight:550; }
.note { background:var(--card); border:1px solid var(--line); border-left:4px solid #f59e0b;
  padding:13px 16px; border-radius:9px; margin:22px 0 0; }
.note p { margin:5px 0 0; color:var(--dim); }

.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:13px; margin:18px 0 0; }
.tile { display:flex; flex-direction:column; gap:4px; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:16px; text-decoration:none; color:var(--ink); }
.tile:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(29,78,216,.09); }
.tile.off { opacity:.6; }
.tile .ic { font-size:1.5rem; }

.card { max-width:400px; margin:50px auto; background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:28px; box-shadow:0 6px 28px rgba(15,23,42,.07); }
.card h1 { margin:0 0 2px; }
.card label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--dim); margin:16px 0 5px; }
.card input { width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:8px; font-size:1rem; }
.card input.code { font-family:ui-monospace,monospace; letter-spacing:9px; text-align:center; font-size:1.25rem; }
.card button { width:100%; margin-top:18px; background:var(--accent); color:#fff; border:0;
  padding:11px; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; }
.card button:hover { filter:brightness(1.1); }

.stamp { margin-top:24px; font-size:.8rem; color:var(--dim); }
.foot { max-width:1180px; margin:0 auto; padding:0 20px 34px; font-size:.78rem; color:var(--dim); }

@media (max-width:720px) {
  .grid thead { display:none; }
  .grid td { display:block; border:0; padding:5px 12px; }
  .grid tr { display:block; border-bottom:1px solid var(--line); padding:9px 0; }
  .out .me { display:none; }
}

/* Who-is-told editor on the Connections page. Inline on the row on purpose: the moment you want
   to change who hears about a thing is the moment you are looking at it being broken. */
.edit { margin-top:5px; }
.edit summary { cursor:pointer; color:var(--accent); font-size:.8rem; }
.edit form { margin:7px 0 0; display:flex; flex-direction:column; gap:5px; }
.edit .row2 { display:flex; gap:5px; }
.edit input[type=text], .edit input:not([type]) { flex:1; min-width:0; padding:4px 7px; border:1px solid #cbd5e1; border-radius:6px; font-size:.82rem; }
.edit .hr { width:52px; flex:none; }
.edit label.inline { display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--dim); }
.edit button { background:var(--accent); color:#fff; border:0; padding:5px 11px; border-radius:6px; font-size:.8rem; cursor:pointer; }
.edit .ghostbtn { background:#fff; color:var(--accent); border:1px solid #c7d2fe; }
.edit form.t { margin-top:4px; }