/* ATDT Sysop Console + installer look (SPEC §11):
   plain, readable, dark-on-light, one accent color. No retro cosplay. */

:root {
  --accent: #0e7490;
  --ink: #1c2126;
  --muted: #667085;
  --line: #d9dee3;
  --bg: #f5f6f7;
  --card: #ffffff;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 760px;
  margin: 40px auto 16px;
  padding: 28px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
}

footer {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 8px 4px;
  color: var(--muted);
  font-size: 12px;
}

h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
.step { color: var(--muted); font-size: 13px; font-weight: normal; margin-left: 8px; }

a { color: var(--accent); }
code, pre { font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
pre.cronline {
  background: #10181d; color: #d7e2e9; padding: 12px 14px;
  border-radius: 4px; overflow-x: auto;
}
pre.sample {
  /* The import preview: a caller's-eye look at a stored message. The
     dark ground needs its own light ink; the page's dark-on-light ink
     vanished into it. */
  background: #10181d; color: #d7e2e9; padding: 10px 13px;
  border-radius: 6px; overflow-x: auto; max-width: 82ch;
}

.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
ul.bad { padding-left: 20px; }
.hint { color: var(--muted); font-size: 13px; }

table.checks, table.kv { border-collapse: collapse; width: 100%; margin: 12px 0 20px; }
table.checks td, table.kv td, table.kv th {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
table.checks td:first-child { width: 30px; }
table.kv th { width: 160px; color: var(--muted); font-weight: 500; }

form label { display: block; margin: 12px 0; }
form label.radio { margin: 8px 0; }
input[type="text"], input[type="password"], input:not([type]), select {
  display: block; width: 100%; max-width: 420px; margin-top: 4px;
  padding: 7px 9px; font: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
input[size="6"] { width: 110px; }
fieldset {
  border: 1px solid var(--line); border-radius: 4px;
  margin: 14px 0; padding: 4px 16px 12px;
}
legend { color: var(--muted); font-size: 13px; padding: 0 6px; }

.btn {
  display: inline-block; margin-top: 10px; padding: 8px 18px;
  background: var(--accent); color: #fff; border: 0; border-radius: 4px;
  font: inherit; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }

/* ----- Sysop console chrome (§11) ----------------------------------------- */

body.console { background: var(--bg); }

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #10181d; color: #d7e2e9;
  padding: 10px 18px; border-bottom: 3px solid var(--accent);
}
.topbar .brand { white-space: nowrap; }
.topbar .brand .muted { color: #7d92a0; font-size: 13px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.topbar nav a {
  color: #b7c6d1; text-decoration: none; padding: 5px 12px; border-radius: 4px;
  font-size: 14px; white-space: nowrap;
}
.topbar nav a:hover { background: #1c2933; color: #fff; }
.topbar nav a.active { background: var(--accent); color: #fff; }
.topbar .who { color: #7d92a0; font-size: 13px; white-space: nowrap; }
.topbar .who a { color: #b7c6d1; }

main.console { max-width: 1080px; margin: 24px auto; padding: 0 18px; background: none; border: 0; }
main.console h1 { margin: 0 0 16px; }
main.console h2 { margin: 22px 0 8px; }
body.console footer { max-width: 1080px; }

.badge {
  display: inline-block; min-width: 18px; text-align: center;
  background: #d97706; color: #fff; border-radius: 9px;
  font-size: 11px; padding: 1px 5px; vertical-align: 2px;
}
.badge.page { background: var(--bad); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; margin: 10px 0;
}
.cards { display: flex; gap: 12px; flex-wrap: wrap; }
.card.stat { flex: 1; min-width: 130px; text-align: center; padding: 14px 8px; }
.card.stat .num { font-size: 30px; font-weight: 600; line-height: 1.1; }
.card.stat .label { color: var(--muted); font-size: 13px; }
.card.stat .label a { color: inherit; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.alert {
  background: #fef3c7; border: 1px solid #d97706; border-radius: 6px;
  padding: 12px 16px; margin: 0 0 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.flash { border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; }
.flash.ok { background: #dcfce7; border: 1px solid var(--ok); }
.flash.bad { background: #fee2e2; border: 1px solid var(--bad); }

table.list { border-collapse: collapse; width: 100%; }
table.list th, table.list td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: 14px;
}
table.list th { color: var(--muted); font-weight: 500; font-size: 13px; }
table.list tr:last-child td { border-bottom: 0; }
td.nowrap, th.nowrap { white-space: nowrap; }
tr.pending { background: #fef9c3; }

.chip {
  display: inline-block; font-size: 11px; border-radius: 3px; padding: 1px 6px;
  background: #e2e8f0; color: #334155;
}
.chip.security { background: #fee2e2; color: var(--bad); }
.chip.error { background: #fee2e2; color: var(--bad); }
.chip.admin { background: #cffafe; color: #155e75; }
.chip.info { background: #e2e8f0; }

.chatpane #chatlog {
  height: 260px; overflow-y: auto; background: #10181d; color: #d7e2e9;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 10px 12px; border-radius: 4px; margin-bottom: 10px;
}
.chatline.page { color: #fca5a5; }
.chatline.sysop { color: #fcd34d; }
.chatline.broadcast { color: #a5f3fc; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row input[type="text"] { flex: 1; min-width: 140px; margin-top: 0; }
.row select { margin-top: 0; width: auto; display: inline-block; }
form.inline { display: inline; }
.btn.small { padding: 5px 12px; margin-top: 0; font-size: 13px; }
.btn.danger { background: var(--bad); }

main.login { max-width: 420px; margin: 80px auto; padding: 28px 32px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; }

.drawer { border-left: 3px solid var(--accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
.flags { display: grid; grid-template-columns: repeat(6, auto); gap: 2px 10px; }
.flags label { margin: 2px 0; font-size: 13px; white-space: nowrap; }
aside.cheat {
  background: #f8fafc; border: 1px dashed var(--line); border-radius: 6px;
  padding: 12px 16px; font-size: 13px; color: var(--muted);
  margin-top: 18px;
}
aside.cheat code { font-size: 12px; }
aside.cheat table { border-collapse: collapse; width: 100%; margin-top: 6px; }
aside.cheat td { padding: 4px 8px 4px 0; vertical-align: top; border-bottom: 1px dotted var(--line); }
aside.cheat td:first-child { white-space: nowrap; }
aside.cheat tr:last-child td { border-bottom: 0; }

.thumbgrid { display: flex; flex-wrap: wrap; gap: 14px; }
.thumbgrid figure { margin: 0; text-align: center; }
.thumbgrid canvas { border: 1px solid var(--line); border-radius: 3px; background: #000; image-rendering: pixelated; }
.thumbgrid figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }

iframe.preview {
  width: 100%; aspect-ratio: 8 / 5; border: 1px solid var(--line);
  border-radius: 4px; background: #000;
}

.menucols { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (max-width: 800px) { .menucols { grid-template-columns: 1fr; } }
.menucols iframe.preview { max-width: 680px; display: block; }
.menurow { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.menurow:last-of-type { border-bottom: 0; }
.menurow.active a { font-weight: 600; }

.thumbgrid canvas { width: 320px; height: auto; }
.stringsedit details { border: 1px solid var(--line); border-radius: 4px; margin: 6px 0; padding: 2px 10px; }
.stringsedit summary { cursor: pointer; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 4px 0; }
.stringrow { display: grid; grid-template-columns: 150px 1fr; gap: 2px 10px; align-items: center; margin: 8px 0; }
.stringrow code { font-size: 12px; color: var(--muted); word-break: break-all; }
.stringrow input { max-width: none; width: 100%; margin-top: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.stringrow .pipeview {
  grid-column: 2; display: block; background: #10181d; border-radius: 3px;
  padding: 3px 8px; min-height: 22px;
  font: 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap;
}

.menucols .card { overflow-x: auto; }

.privline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #7f1d1d; color: #fff; border-radius: 4px;
  padding: 8px 12px; margin: 10px 0 8px; font-weight: 600; font-size: 14px;
}
.privline.off { display: none; }
.privline .btn.secondary { background: #fff; color: #7f1d1d; }

/* --- ANSI editor (M7) --- */
.edtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edtop .spacer { flex: 1; }
.edtop label { display: flex; align-items: center; gap: 6px; margin: 0; }
.edtop select, .edtop input[type="text"] { margin-top: 0; }
.filelbl { cursor: pointer; }
.edmain { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (max-width: 900px) { .edmain { grid-template-columns: 1fr; } }
.edrail strong { display: block; margin-top: 12px; }
.edrail strong:first-child { margin-top: 0; }
.edtools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.edtools button, .edselops button {
  padding: 4px 9px; font-size: 13px; border: 1px solid var(--line);
  background: #fff; border-radius: 4px; cursor: pointer;
}
.edtools button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.edselops { display: flex; gap: 4px; margin-top: 6px; }
.edpal { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; margin-top: 6px; }
.edpal .sw { width: 22px; height: 18px; border: 1px solid #666; border-radius: 2px; cursor: pointer; padding: 0; }
.edpal .sw.cur { outline: 2px solid var(--accent); outline-offset: 1px; }
.edpal .sw.dim { opacity: 0.3; }
.edglyphrow { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.edglyphrow .gl, #edpicker .gl {
  width: 26px; height: 26px; font-family: "Courier New", monospace; font-size: 15px;
  border: 1px solid var(--line); background: #111; color: #ddd; border-radius: 3px; cursor: pointer;
  padding: 0; line-height: 1;
}
.edglyphrow .gl.cur { outline: 2px solid var(--accent); }
#edpicker { display: grid; grid-template-columns: repeat(24, 26px); gap: 3px; }
@media (max-width: 900px) { #edpicker { grid-template-columns: repeat(12, 26px); } }
.edcanvasbox { overflow: auto; background: #000; padding: 8px; max-height: 78vh; }
.edcanvasbox canvas { image-rendering: pixelated; display: block; cursor: crosshair; }
.edstatus { font-family: ui-monospace, monospace; font-size: 13px; color: var(--muted); }
