/* poshta: one stylesheet, dark only. CSP forbids inline styles, so all looks live here. */
:root {
  --bg: #111018;
  --panel: #18161f;
  --fg: #eee9da;
  --dim: #a9a3b8;
  --border: #77718c;
  --shadow: #2a2638;
  --lime: #d6ff4b;
  --magenta: #ff70cf;
  --amber: #ffb454;
  --red: #ff5f5f;
  --green: #7ee787;
  --cyan: #79c0ff;
  --ink: #3b3850; /* dim text on lime */
  --side: 42ch;
  --status-h: 1.9rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-color: var(--border) var(--bg); scroll-padding-bottom: calc(var(--status-h) + .5rem); }
body {
  margin: 0;
  padding-bottom: var(--status-h);
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}
button, input, select, textarea { font: inherit; color: inherit; }
pre, code, kbd { font: inherit; }
pre { margin: 0; }
::selection { background: var(--magenta); color: var(--bg); }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

h1 { font-size: 1.15rem; margin: 0 0 1rem; color: var(--lime); }
h2 { font-size: 1rem; margin: 1.75rem 0 .6rem; color: var(--magenta); }
h2::before { content: "## "; color: var(--dim); }
h2.cmd::before { content: none; }
h3 { font-size: 1rem; margin: 0; color: var(--magenta); }
.dim { color: var(--dim); font-weight: 400; }
.small { font-size: 12px; }
.r { text-align: right !important; }
.wrap { overflow-wrap: anywhere; white-space: normal !important; }
.scroll { overflow-x: auto; padding: 0 6px 6px 0; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: .5rem; z-index: 20; background: var(--lime); color: var(--bg); padding: .2rem 1ch; }
.skip:focus { left: .5rem; }

/* panels: 1px border + hard offset shadow */
.panel, .msg-head, table.index, table.grid, table.mailq, .term, pre.mail-text, iframe.mail-html, pre.source, pre.trace,
ol.transcript, .console, form.compose, .zone pre, .error, .live-log, pre.empty {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 6px 6px 0 var(--shadow);
}

/* buttons */
.btn {
  display: inline-block;
  padding: .05rem .8ch;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { color: var(--lime); border-color: var(--lime); text-decoration: none; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.btn.primary { background: var(--lime); color: var(--bg); border-color: var(--lime); font-weight: 700; }
.btn.primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.danger:hover { color: var(--red); border-color: var(--red); }
.btn[aria-current="page"] { color: var(--bg); background: var(--lime); border-color: var(--lime); }
.btn[aria-pressed="true"] { color: var(--bg); background: var(--amber); border-color: var(--amber); }
.btn kbd { border: 0; padding: 0; color: var(--dim); }
.linkish { background: none; border: 0; padding: 0; color: var(--cyan); cursor: pointer; }
form.inline { display: inline-flex; gap: .5ch; align-items: center; margin: 0; }
kbd { display: inline-block; padding: 0 .5ch; border: 1px solid var(--border); border-bottom-width: 2px; color: var(--lime); font-size: 12px; line-height: 1.4; }

/* form fields */
input[type="text"], input[type="search"], input[type="password"], select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: .15rem .6ch;
}
input:focus, select:focus, textarea:focus { border-color: var(--lime); }
::placeholder { color: var(--dim); opacity: 1; }
::file-selector-button {
  font: inherit;
  margin-right: 1ch;
  padding: .05rem .8ch;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer;
}
.fields p { margin: .4rem 0; }
.fields label { display: inline-block; min-width: 14ch; color: var(--magenta); }
.fields input[type="text"] { width: min(40ch, 100%); }

/* layout: sidebar | main, status line pinned to the bottom */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - var(--status-h)); }
.shell.bare { grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; padding: 1.25rem 2ch 2.5rem; }
.side {
  position: sticky;
  top: 0;
  height: calc(100vh - var(--status-h));
  overflow-y: auto;
  padding: 1rem 2ch;
  background: var(--panel);
  border-right: 1px solid var(--border);
}
.side > summary { display: none; cursor: pointer; list-style: none; color: var(--lime); }
.side > summary::-webkit-details-marker { display: none; }
.side > summary::before { content: "▸ "; }
.side[open] > summary::before { content: "▾ "; }
.brand { display: block; color: var(--lime); }
.brand:hover { text-decoration: none; }
.logo { color: var(--lime); font-size: 12px; line-height: 1.15; margin: 0; overflow: hidden; }
.ver { margin: .4rem 0 1.25rem; }
.fs, .fs ul { list-style: none; margin: 0; padding: 0; }
.fs > li { margin: .1rem 0; }
.fs > li.mb { margin: 0 0 .9rem; }
.fs .dir { display: block; color: var(--dim); overflow-wrap: anywhere; }
.fs .mb.current .dir { color: var(--fg); }
.fs .folders { display: flex; flex-wrap: wrap; gap: 0 1.5ch; padding-left: 4ch; }
.fs a { color: var(--fg); padding: 0 .3ch; }
.fs a.unread { color: var(--magenta); font-weight: 700; }
.fs a[aria-current="page"] { color: var(--bg); background: var(--lime); font-weight: 700; text-decoration: none; }
.fs .n { color: var(--amber); }
.btn.compose { margin-top: 1.25rem; }

.status {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  height: var(--status-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  padding: 0 1ch;
  background: var(--lime);
  color: var(--bg);
  white-space: nowrap;
  overflow: hidden;
}
.status a, .status .linkish { color: var(--bg); }
.status .dim { color: var(--ink); }
.status :focus-visible { outline-color: var(--bg); }
.tabs { flex: none; display: flex; gap: 1ch; }
.tabs .sess { font-weight: 700; }
.tabs a { padding: 0 .4ch; }
.tabs a[aria-current="page"] { background: var(--bg); color: var(--lime); }
.status .info { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.status .info > * { padding: 0 1ch; }
.status .info > :not([hidden]) ~ * { border-left: 1px solid var(--ink); }
.status form { margin: 0; }
.live.on { font-weight: 700; }

.flash { margin: 0 0 1rem; padding: .3rem 1ch; color: var(--green); background: var(--panel); border: 1px solid var(--green); }
.flash.err { color: var(--red); border-color: var(--red); }
.err { color: var(--red); }
.warn { color: var(--amber); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.hint { color: var(--amber); }
.note { color: var(--dim); }
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2ch; margin: 0 0 1rem; }
.bar h1 { margin: 0; overflow-wrap: anywhere; }
.bar h1 b { color: var(--fg); }
.bar form { margin: 0; }
.crumbs { margin: 0 0 .3rem; }

/* index: mutt */
.search { display: flex; align-items: center; gap: .5ch; }
.search .prompt { color: var(--lime); font-weight: 700; }
.search input { width: 30ch; max-width: 60vw; }
table { border-collapse: collapse; }
.index { width: 100%; }
.index th { text-align: left; font-weight: 400; color: var(--dim); padding: .25rem .8ch; border-bottom: 1px solid var(--border); white-space: nowrap; }
.index td { padding: .15rem .8ch; white-space: nowrap; vertical-align: top; }
.index .num, .index .size, .index .date { color: var(--dim); }
.index .num, .index .size { text-align: right; }
.index td.flags { color: var(--magenta); }
.index .from span { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.index .subj { width: 100%; white-space: normal; overflow-wrap: anywhere; }
.index .subj a { color: var(--fg); }
.index tr.unread .from, .index tr.unread .subj a { font-weight: 700; }
.index tr.unread .subj a { color: var(--lime); }
.index tbody tr { cursor: pointer; }
.index tbody tr:hover { background: var(--shadow); }
.index tbody tr.sel, .index tbody tr.sel :is(td, a, .badge) { background: var(--lime); color: var(--bg); }
.mutt { display: flex; flex-wrap: wrap; gap: .25rem 2ch; margin: 1rem 0 0; padding: .1rem 1ch; background: var(--shadow); }
.mutt a { color: var(--lime); }
pre.empty { padding: 1.25rem 2ch; color: var(--fg); white-space: pre-wrap; }
pre.empty::first-line { color: var(--lime); }
pre.empty::after { content: "\A$ █"; color: var(--lime); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.badges { white-space: nowrap; margin-left: .5ch; }
.badge { font-size: 12px; }
.badge.pass { color: var(--green); }
.badge.fail { color: var(--red); text-decoration: line-through; }
.badge.warn { color: var(--amber); text-decoration: underline dotted; }
.badge.none { color: var(--dim); }

/* message */
.msg-head { padding: .75rem 2ch 1rem; }
.subject { color: var(--fg); overflow-wrap: anywhere; margin: 0 0 .5rem; }
.hdrs, .meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .05rem 1.5ch; margin: 0; }
.hdrs > div, .meta > div { display: contents; }
.hdrs dt, .meta dt { color: var(--magenta); }
.hdrs dd, .meta dd { margin: 0; overflow-wrap: anywhere; }
.meta { margin-bottom: 1.25rem; }
.auth { margin: .5rem 0 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1ch; margin-top: 1rem; }
.tabbar { display: flex; flex-wrap: wrap; margin: 1.5rem 0 .9rem; border-bottom: 1px solid var(--border); }
.tabbar a { padding: .15rem 1.5ch; margin-bottom: -1px; color: var(--dim); border: 1px solid transparent; border-bottom: 0; }
.tabbar a[aria-current="page"] { color: var(--lime); background: var(--panel); border-color: var(--border); }
.bodybar { margin: 0 0 .6rem; }
pre.mail-text, pre.source, pre.trace { padding: .75rem 2ch; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.source { max-height: 75vh; overflow: auto; }
iframe.mail-html { display: block; width: 100%; height: 72vh; background: #fff; }
.parts .cmd { color: var(--lime); }
.ls td { padding: 0 1.5ch 0 0; white-space: nowrap; }
.ls td:first-child { color: var(--dim); white-space: pre; }
.thread ol { list-style: none; margin: 0; padding: 0; }
.thread li { display: flex; flex-wrap: wrap; gap: 0 1.5ch; padding: .1rem 1ch; }
.thread .from { color: var(--dim); }
.thread .cur { background: var(--shadow); }
.thread .cur::before { content: "→"; color: var(--lime); }
.live-log { list-style: none; margin: 1rem 0 0; padding: .5rem 1ch; max-height: 14rem; overflow: auto; border-color: var(--lime); }

/* tables */
.grid { width: 100%; }
.grid th, .grid td, .kv th, .kv td { text-align: left; vertical-align: top; padding: .2rem 1ch; }
.grid th { font-weight: 400; color: var(--dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid td { border-bottom: 1px solid var(--shadow); }
.kv { width: 100%; }
.kv th { font-weight: 400; color: var(--dim); white-space: nowrap; width: 1%; }
.kv td { overflow-wrap: anywhere; }
.kv tr { border-bottom: 1px solid var(--shadow); }
.kv tr.pass td { color: var(--green); }
.kv tr.fail td { color: var(--red); }
.kv tr.warn td { color: var(--amber); }
.tag { padding: 0 .6ch; border: 1px solid currentColor; white-space: nowrap; }
.tag.pass { color: var(--green); }
.tag.warn { color: var(--amber); }
.tag.fail { color: var(--red); }
.tag.none { color: var(--dim); }
.o-accepted, .o-delivered, .o-relayed, .o-ok { color: var(--green); }
.o-rejected, .o-bounced, .o-failed, .o-error { color: var(--red); }
.o-aborted, .o-deferred { color: var(--amber); }

/* wire, transcripts */
.term { background: #0c0b11; }
.term-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2ch; padding: .35rem 1ch; background: var(--panel); border-bottom: 1px solid var(--border); }
.term-bar h1 { margin: 0; font-size: 1rem; }
.term-tools { display: flex; gap: 1ch; align-items: center; }
.term-tools input { width: 22ch; }
ol.wire, ol.transcript, .live-log { list-style: none; }
ol.wire { height: 62vh; overflow: auto; margin: 0; padding: .5rem 1ch; }
ol.transcript { margin: 0; padding: .6rem 1ch; }
:is(.wire, .transcript, .live-log) > li { padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; overflow-wrap: anywhere; }
:is(.wire, .transcript, .live-log) :is(time, .ts, .k, .ref, .dir) { color: var(--dim); }
:is(.wire, .transcript, .live-log) > .c { color: var(--cyan); }
:is(.wire, .transcript, .live-log) > .s { color: var(--amber); }
:is(.wire, .transcript, .live-log) > .note { color: var(--dim); }
:is(.wire, .transcript, .live-log) > .warn { color: var(--amber); }
:is(.wire, .transcript, .live-log) > .err { color: var(--red); }
:is(.wire, .transcript, .live-log) > .sep { color: var(--magenta); border-top: 1px dashed var(--shadow); margin-top: .3rem; padding-top: .3rem; }
.wire .placeholder { font-style: italic; }

/* dash: htop */
.htop { padding: .6rem 2ch; }
.htop p { margin: .1rem 0; white-space: pre; overflow-x: auto; }
.htop .lbl { display: inline-block; width: 5ch; color: var(--cyan); }
.htop .meter { color: var(--green); }
.spark { color: var(--magenta); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(36ch, 100%), 1fr)); gap: 0 3ch; }
.bar-in { color: var(--cyan); }
.bar-out { color: var(--magenta); }

/* dns: dig + systemd boot log */
.checks { list-style: none; margin: 0; padding: 0; }
.check { display: grid; grid-template-columns: 6ch 14ch minmax(0, 1fr); gap: .1rem 1.5ch; padding: .45rem 0; border-bottom: 1px dashed var(--shadow); }
.check .st { font-weight: 700; white-space: pre; }
.check.is-ok .st { color: var(--green); }
.check.is-warn .st { color: var(--amber); }
.check.is-fail .st { color: var(--red); }
.check.is-info .st { color: var(--cyan); }
.check .q { color: var(--lime); overflow-wrap: anywhere; }
.check .res { grid-column: 3; overflow-wrap: anywhere; }
.zone-bar { display: flex; justify-content: space-between; align-items: center; gap: 2ch; margin: 1.25rem 0 .5rem; }
.zone pre { padding: .75rem 2ch; overflow-x: auto; }

/* compose: header fields */
form.compose { max-width: 100ch; padding: .75rem 2ch 1rem; }
.compose .hdr { display: grid; grid-template-columns: 9ch minmax(0, 1fr); align-items: center; gap: 0 1ch; padding: .15rem 0; border-bottom: 1px dashed var(--shadow); }
.compose .hdr label { color: var(--magenta); }
.compose .hdr input[type="text"], .compose .hdr select { width: 100%; background: transparent; border: 0; padding: .2rem 0; }
.compose .hdr select option { background: var(--panel); }
.compose textarea { display: block; width: 100%; min-height: 18rem; margin: .75rem 0; padding: .5rem 1ch; resize: vertical; caret-color: var(--lime); }
.compose .note { margin: .5rem 0 0; color: var(--amber); }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2ch; margin: 1rem 0 0; }

/* queue: mailq */
.mailq th { text-align: left; font-weight: 400; color: var(--dim); padding: .3rem 1ch; white-space: nowrap; }
.mailq td { padding: 0 1ch; white-space: nowrap; vertical-align: top; }
.mailq tbody.entry { border-top: 1px dashed var(--shadow); }
.mailq tbody.entry tr:first-child td { padding-top: .5rem; }
.mailq tbody.entry tr:last-child td { padding-bottom: .5rem; }
.mailq .reason td { color: var(--amber); white-space: normal; overflow-wrap: anywhere; }
.mailq .act { text-align: right; }
.mailq time { white-space: pre; }

/* login console, error page */
.console { width: min(68ch, 100%); margin: 9vh auto 2rem; padding: 1.5rem 3ch; }
.console .logo { font-size: 14px; }
.issue { font-size: 14px; font-weight: 400; color: var(--dim); margin: 0 0 1.25rem; }
.login p { margin: .15rem 0; }
.login input[type="password"] { width: 26ch; background: transparent; border: 0; border-bottom: 1px solid var(--border); caret-color: var(--lime); }
.login .btn { margin-top: .75rem; }
.motd { margin-top: 1.5rem; padding-top: .75rem; border-top: 1px dashed var(--shadow); color: var(--dim); }
.motd p { margin: .1rem 0; }
.error { width: min(76ch, 100%); margin: 10vh auto 2rem; padding: 2rem 3ch; }
.error h1 { color: var(--fg); font-weight: 400; font-size: 1rem; overflow-wrap: anywhere; }
.error .code { display: block; margin-bottom: .6rem; font-size: 2.6rem; line-height: 1.1; font-weight: 700; color: var(--red); }

/* help dialog, toasts */
dialog { max-width: min(68ch, 92vw); padding: 1rem 3ch; color: var(--fg); background: var(--panel); border: 1px solid var(--lime); box-shadow: 6px 6px 0 var(--shadow); }
dialog::backdrop { background: rgb(17 16 24 / 75%); }
dialog h2 { margin-top: 0; }
.keys th { text-align: left; font-weight: 400; padding: .15rem 3ch .15rem 0; white-space: nowrap; }
dialog form { margin: 1rem 0 0; text-align: right; }
.toasts { position: fixed; right: 1rem; bottom: calc(var(--status-h) + 1rem); z-index: 6; display: flex; flex-direction: column; gap: .6rem; width: min(52ch, calc(100vw - 2rem)); }
.toast { display: block; padding: .4rem 1ch; color: var(--fg); background: var(--panel); border: 1px solid var(--lime); box-shadow: 6px 6px 0 var(--shadow); overflow-wrap: anywhere; }
.toast.warn { border-color: var(--amber); }
.toast.error { border-color: var(--red); }
a.toast:hover { text-decoration: none; border-color: var(--magenta); }

@media (max-width: 1400px) {
  .opt { display: none; }
}
@media (max-width: 1000px) {
  .wide { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { position: static; height: auto; padding: .4rem 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .side > summary { display: block; }
  .side[open] > nav { padding: .75rem 0 .5rem; }
  .logo { display: none; }
  main { padding: 1rem 16px 2.5rem; }
  .index .flags, .index .size { display: none; }
  .index .from span { max-width: 14ch; }
  .status { font-size: 12px; gap: 1ch; }
  .tabs a:not([aria-current="page"]) { display: none; }
  .check { grid-template-columns: 6ch minmax(0, 1fr); }
  .check .q, .check .res { grid-column: 1 / -1; }
  .search input { width: 100%; max-width: none; }
  .search { flex: 1 1 100%; }
  .console, .error { margin-top: 2rem; padding: 1rem 2ch; }
  .console .logo { display: block; font-size: 11px; }
  .error .code { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}