/* Phone first: one column from 320px. Arrgate's colours: amber #F5A524 and navy #101828. No web fonts. */
:root { --bg: #f6f7f9; --card: #fff; --ink: #101828; --muted: #5b6475; --line: #d5d9e0; --amber: #F5A524; --navy: #101828; --bad: #b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b101b; --card: #101828; --ink: #f2f4f7; --muted: #a3acbd; --line: #2a3447; --bad: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: 12px; }
h1, h2 { margin: 8px 0; font-size: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 12px 0; }
.meta, .hint { color: var(--muted); font-size: .875rem; }
.post { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.count.over, .error { color: var(--bad); font-weight: 600; }
.info { color: inherit; }
.note { margin: 8px 0; }
button, input, textarea { font: inherit; color: inherit; }
button { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.post-btn { background: var(--amber); color: var(--navy); border-color: var(--amber); font-weight: 700; }
button.armed { border-color: var(--bad); color: var(--bad); }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.row > button { flex: 1 1 5rem; }
input, textarea { width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
textarea { min-height: 8rem; }
label { display: block; margin: 8px 0 2px; font-weight: 600; }
details { margin: 8px 0; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.source { border-left: 3px solid var(--line); padding-left: 8px; margin: 8px 0; overflow-wrap: anywhere; }
a { color: inherit; }
button.card { display: block; width: 100%; text-align: left; }