/* night.ms web — small, single-stylesheet. Matches the TUI palette so the
   bridge from terminal to browser doesn't feel jarring. */
:root {
  --bg: #0e0b16;
  --surface: #1a1426;
  --surface-alt: #241d33;
  --text: #e6e0f2;
  --muted: #6e6a7f;
  --dim: #3f3f46;
  --accent: #ff7db0;
  --accent-dim: #9c8aa5;
  --yellow: #ffd166;
  --red: #ff6b7a;
  --green: #5ee39c;
}
* { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  margin: 0;
  padding: 0;
  min-height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--surface);
  border: 1px solid var(--dim);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}
.site-header {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em 2em;
  border-bottom: 1px solid var(--dim);
  background: var(--surface);
}
.brand {
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--accent);
}
.identity { margin-left: auto; color: var(--accent-dim); }
.badge {
  display: inline-block;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  padding: 0 0.4em;
  font-size: 0.75em;
  font-weight: bold;
  border-radius: 2px;
  margin-left: 0.3em;
}
.logout button {
  background: transparent;
  color: var(--accent-dim);
  border: 1px solid var(--dim);
  padding: 0.3em 0.7em;
  cursor: pointer;
  font-family: inherit;
}
.logout button:hover { color: var(--accent); border-color: var(--accent); }
main { flex: 1; padding: 2em; max-width: 720px; margin: 0 auto; width: 100%; }
footer { padding: 1em 2em; border-top: 1px solid var(--dim); color: var(--muted); font-size: 0.85em; }
.hero h1 { color: var(--accent); margin: 0 0 0.4em; }
.lead { color: var(--accent-dim); margin: 0 0 1.2em; }
.muted { color: var(--muted); }
.error {
  background: rgba(255, 107, 122, 0.1);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 0.6em 1em;
  border-radius: 3px;
}
.auth h1 { color: var(--accent); }
.auth form { display: flex; flex-direction: column; gap: 1em; max-width: 320px; }
.auth label { display: flex; flex-direction: column; gap: 0.3em; color: var(--accent-dim); }
.auth input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  padding: 0.6em 0.8em;
  font-family: inherit;
  font-size: 1em;
}
.auth input:focus { outline: none; border-color: var(--accent); }
.auth button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.7em 1em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}
.auth button:hover { background: var(--yellow); }

/* Terminal page. The xterm host needs an explicit size; we let it fill the
   available column inside .main, with a 24-row default if the FitAddon
   hasn't measured yet. The 720px page cap is fine for prose pages but
   crowds the monospace grid here — widen via :has() so only this page
   gets the larger canvas. */
body:has(.terminal-wrap) main { max-width: min(95vw, 1400px); }
.terminal-wrap h1 { color: var(--accent); margin-bottom: 0.2em; }
.terminal-wrap .muted { margin-top: 0; margin-bottom: 1em; }
.terminal {
  background: var(--bg);
  border: 1px solid var(--dim);
  padding: 0.4em;
  min-height: 24em;
  min-width: 320px;
  height: 70vh;
  width: 100%;
  max-width: 100%;
  resize: both;
  overflow: hidden;
}
.terminal-wrap .status {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: 0.8em;
  color: var(--muted);
  background: var(--surface-alt);
  border-radius: 3px;
  margin-bottom: 0.4em;
}
.terminal-wrap .status.ok { color: var(--green); border: 1px solid var(--green); }
.terminal-wrap .status.err { color: var(--red); border: 1px solid var(--red); }

/* Profile + key management */
.profile h1, .keys h1 { color: var(--accent); }
.profile-head { display: flex; align-items: center; gap: 1.5em; margin-bottom: 1em; }
.profile-head h1 { margin: 0; }
.avatar {
  background: var(--surface-alt);
  border: 1px solid var(--dim);
  border-radius: 4px;
  display: block;
  image-rendering: pixelated;
}
.avatar-lg { border-radius: 6px; }
.public-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
}
.public-profile h1 { color: var(--accent); margin: 0.3em 0 0; }
.profile-fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 1.2em; margin: 1em 0; }
.profile-fields dt { color: var(--accent-dim); }
.profile-fields dd { margin: 0; color: var(--text); }
.profile-links { display: flex; gap: 1em; margin-top: 1.5em; }
.profile-links a.action {
  background: var(--surface);
  border: 1px solid var(--dim);
  color: var(--accent);
  padding: 0.5em 1em;
  text-decoration: none;
}
.profile-links a.action:hover { border-color: var(--accent); }
.notice { padding: 0.6em 1em; border-radius: 3px; }
.notice-ok { background: rgba(94, 227, 156, 0.1); border: 1px solid var(--green); color: var(--green); }
.notice-err { background: rgba(255, 107, 122, 0.1); border: 1px solid var(--red); color: var(--red); }
.keys-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.keys-table th, .keys-table td {
  text-align: left;
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--dim);
}
.keys-table th { color: var(--accent-dim); font-weight: normal; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.keys-table code { font-size: 0.85em; padding: 0 0.3em; }
.sessions { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; }
.sessions th, .sessions td { text-align: left; padding: 0.4em 0.6em; border-bottom: 1px solid var(--dim); }
.sessions th { color: var(--accent-dim); font-weight: normal; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.sessions tr.sessions-current td { background: rgba(94, 227, 156, 0.05); }
.sessions form { margin: 0; }
.link-button {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}
.link-button:hover { color: var(--yellow); }
.key-form textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.5em;
  width: 100%;
  resize: vertical;
}
.key-form textarea:focus { outline: none; border-color: var(--accent); }
.key-form { display: flex; flex-direction: column; gap: 1em; max-width: 540px; }
.key-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.6em 1em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  align-self: flex-start;
}
.key-form button:hover { background: var(--yellow); }

/* Profile picture page */
.picture h1, .picture h2 { color: var(--accent); }
.picture-preview { display: flex; gap: 1.5em; align-items: center; margin: 1em 0; }
.picture-form { display: flex; flex-direction: column; gap: 1em; max-width: 420px; }
.picture-form input[type="file"] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  padding: 0.6em 0.8em;
  font-family: inherit;
}
.picture-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.6em 1em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  align-self: flex-start;
}
.picture-form button:hover { background: var(--yellow); }

/* Header nav */
.site-nav { display: flex; gap: 1em; }
.site-nav a { color: var(--accent-dim); }
.site-nav a:hover { color: var(--accent); }

/* Boards — forum list, topic list, thread view */
.boards h1 { color: var(--accent); }
.boards .crumbs { margin: 0 0 0.6em; font-size: 0.9em; }
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.board-head h1 { margin: 0 0 0.2em; }
a.button, .form-actions a {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.5em 1em;
  font-weight: bold;
  white-space: nowrap;
}
a.button:hover { background: var(--yellow); text-decoration: none; }
.badge.unread { border-color: var(--green); color: var(--green); }

.forum-list { list-style: none; padding: 0; margin: 1.2em 0; }
.forum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: 0.8em 0;
  border-bottom: 1px solid var(--dim);
}
.forum-name { font-size: 1.1em; font-weight: bold; }
.forum-desc { margin: 0.3em 0 0; font-size: 0.9em; }
.forum-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; font-size: 0.8em; white-space: nowrap; }

.topic-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.topic-table th, .topic-table td { text-align: left; padding: 0.5em 0.6em; border-bottom: 1px solid var(--dim); }
.topic-table th { color: var(--accent-dim); font-weight: normal; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.topic-table td:nth-child(3), .topic-table th:nth-child(3) { text-align: right; }

.pager { display: flex; align-items: center; gap: 1.2em; margin: 1.4em 0; font-size: 0.95em; }
.pager .disabled { color: var(--dim); }

.thread h1 { margin: 0.2em 0 1em; }
.post {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin: 0.8em 0;
}
.post-head { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; font-size: 0.9em; }
.post-author { color: var(--accent); font-weight: bold; }
.post-time { margin-left: auto; font-size: 0.85em; }
.chip {
  display: inline-block;
  border: 1px solid var(--dim);
  color: var(--accent-dim);
  padding: 0 0.4em;
  font-size: 0.7em;
  font-weight: bold;
  border-radius: 2px;
  text-transform: uppercase;
}
.chip.op { border-color: var(--accent); color: var(--accent); }
.chip.sysop { border-color: var(--yellow); color: var(--yellow); }
.post-body { white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; }

/* Compose forms — new topic + reply */
.topic-form, .reply-form { display: flex; flex-direction: column; gap: 1em; max-width: 640px; margin: 1.4em 0; }
.reply-form h2, .topic-form h2 { color: var(--accent); margin: 0; }
.topic-form label { display: flex; flex-direction: column; gap: 0.3em; color: var(--accent-dim); }
.topic-form input, .topic-form textarea, .reply-form textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  padding: 0.6em 0.8em;
  font-family: inherit;
  font-size: 1em;
  width: 100%;
  resize: vertical;
}
.topic-form input:focus, .topic-form textarea:focus, .reply-form textarea:focus { outline: none; border-color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: 1em; }
.topic-form button, .reply-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.6em 1em;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  align-self: flex-start;
}
.topic-form button:hover, .reply-form button:hover { background: var(--yellow); }
.form-actions a { background: var(--surface); border: 1px solid var(--dim); color: var(--accent-dim); }
.form-actions a:hover { border-color: var(--accent); color: var(--accent); }

/* Weather — current conditions, hourly strip, 7-day table, NWS alerts */
.weather h1 { color: var(--accent); }
.weather h2 { color: var(--accent-dim); font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.6em 0 0.6em; }
.weather-empty, .weather-error {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin: 1.2em 0;
}
.weather-error { border-color: var(--red); color: var(--red); }

.weather-now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 0.8em;
  margin: 1.2em 0;
}
.weather-now .now-temp { font-size: 2.6em; font-weight: bold; color: var(--accent); line-height: 1; }
.weather-now .now-glyph { font-size: 1.8em; }
.weather-now .now-cond { font-size: 1.2em; color: var(--text); }
.weather-now .now-meta { width: 100%; font-size: 0.9em; }

.hourly-strip { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.6em 0; }
.hour-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  min-width: 3.4em;
  padding: 0.5em 0.4em;
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 4px;
}
.hour-cell .hour-clock { font-size: 0.75em; }
.hour-cell .hour-glyph { font-size: 1.3em; }
.hour-cell .hour-temp { font-weight: bold; color: var(--accent); }

.forecast-table .day-glyph { font-size: 1.2em; }
.forecast-table .day-hi { color: var(--yellow); font-weight: bold; }
.forecast-table .day-lo { color: var(--accent-dim); }

.weather-alerts { margin: 1.2em 0; }
.alert-card {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-left: 3px solid var(--dim);
  border-radius: 4px;
  padding: 0.7em 1em;
  margin: 0.6em 0;
}
.alert-head { display: flex; align-items: center; gap: 0.6em; }
.alert-sev {
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 0.4em;
}
.alert-event { font-weight: bold; }
.alert-headline { margin: 0.4em 0; }
.alert-desc { white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; margin-top: 0.4em; }
.alert-meta { font-size: 0.85em; margin: 0.4em 0 0; }
.alert-card.sev-extreme { border-left-color: var(--red); }
.alert-card.sev-extreme .alert-sev { color: var(--red); }
.alert-card.sev-severe { border-left-color: var(--yellow); }
.alert-card.sev-severe .alert-sev { color: var(--yellow); }
.alert-card.sev-moderate { border-left-color: var(--accent); }
.alert-card.sev-moderate .alert-sev { color: var(--accent); }
.alert-card.sev-minor .alert-sev { color: var(--accent-dim); }

/* Chat — channel list + live channel view. Mirrors the boards/forum look. */
.chat h1 { color: var(--accent); margin: 0.2em 0; }
.chat h2 { color: var(--accent-dim); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.6em 0 0.4em; }
.channel-list { list-style: none; padding: 0; margin: 0.4em 0; }
.channel-row {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--dim);
}
.channel-name { font-size: 1.05em; }
.chat-action {
  display: flex;
  gap: 0.6em;
  margin: 0.8em 0 0;
  max-width: 480px;
}
.chat-action input {
  flex: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  padding: 0.5em 0.7em;
  font-family: inherit;
}
.chat-action input:focus { outline: none; border-color: var(--accent); }
.chat-action button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
}
.chat-action button:hover { background: var(--yellow); }

.channel-head { margin-bottom: 0.8em; }
.channel-topic { margin: 0.2em 0 0; font-size: 0.9em; }
.chat-log {
  list-style: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.chat-msg {
  padding: 0.35em 0.6em;
  border-left: 2px solid var(--dim);
  line-height: 1.5;
}
.chat-author { color: var(--accent); font-weight: bold; }
.chat-time { font-size: 0.8em; margin-left: 0.2em; }
.chat-body { white-space: pre-wrap; word-wrap: break-word; }

.chat-send {
  display: flex;
  gap: 0.6em;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 0.8em 0;
}
.chat-send input {
  flex: 1;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--dim);
  padding: 0.6em 0.8em;
  font-family: inherit;
}
.chat-send input:focus { outline: none; border-color: var(--accent); }
.chat-send button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.6em 1.2em;
  cursor: pointer;
}
.chat-send button:hover { background: var(--yellow); }

/* Chat v2 — markup, reactions, pins, replies, edit/delete. */
.chat-body strong { color: #ffffff; font-weight: bold; }
.chat-body em { font-style: italic; }
.chat-body code {
  background: var(--surface-alt);
  color: #9fe59f;
  padding: 0 0.3em;
  border-radius: 2px;
}
.chat-body .mention { color: #6cc0ff; font-weight: bold; }
.chat-body .mention-self { color: #ffd700; font-weight: bold; }
.chat-body.action { font-style: italic; color: var(--accent-dim); }
.chat-msg.deleted .chat-body { font-style: italic; }
.pin-mark { color: var(--yellow); }
.edited { font-size: 0.8em; }

/* Reaction chips */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 0.3em; margin: 0.25em 0 0; }
.react-chip {
  background: var(--surface-alt);
  border: 1px solid var(--dim);
  color: var(--text);
  border-radius: 10px;
  padding: 0 0.5em;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}
.react-chip:hover { border-color: var(--accent); }
.react-chip.reacted { border-color: var(--accent); background: rgba(255, 125, 176, 0.15); }
.react-chip .rc-count { color: var(--accent-dim); }

/* Per-message toolbar — dim until hovered so it stays out of the way. */
.msg-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.2em 0 0;
  opacity: 0.25;
  transition: opacity 0.1s;
  font-size: 0.8em;
}
.chat-msg:hover .msg-toolbar, .msg-toolbar:focus-within { opacity: 1; }
.react-palette { display: inline-flex; gap: 0.15em; }
.msg-toolbar button {
  background: none;
  border: 1px solid transparent;
  color: var(--accent-dim);
  cursor: pointer;
  font: inherit;
  font-size: 1em;
  padding: 0 0.3em;
  border-radius: 3px;
}
.msg-toolbar button:hover { color: var(--accent); border-color: var(--dim); }
.react-add { font-size: 1.1em; }

.reply-marker { display: block; font-size: 0.8em; }
.reply-badge { display: inline-block; margin: 0.2em 0 0; font-size: 0.8em; }

.edit-input {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 0.3em 0.5em;
  font: inherit;
}

/* Pinned block */
.pinned-block {
  background: var(--surface);
  border: 1px solid var(--dim);
  border-radius: 4px;
  padding: 0.4em 0.8em;
  margin: 0.8em 0;
}
.pinned-block summary { cursor: pointer; color: var(--accent-dim); }
.pinned-block ul { list-style: none; padding: 0; margin: 0.4em 0 0; }
.pinned-block li { padding: 0.2em 0; font-size: 0.9em; }

/* Reply-to banner above the send input */
.chat-send { flex-wrap: wrap; }
.reply-banner {
  flex-basis: 100%;
  font-size: 0.85em;
  color: var(--accent-dim);
}
.reply-cancel {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
}