/* The fleet board, inside Telegram. Every colour is one of Telegram's theme
   variables (set on <html> by its Mini App script), so the board follows the
   user's light or dark theme; the fallbacks only show outside Telegram. The
   column dots are fixed mid-tones that read on both. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --btn: var(--tg-theme-button-color, #2f7dd1);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --link: var(--tg-theme-link-color, var(--btn));
  --line: rgba(128, 128, 128, .28);
  --waiting: #e0563f;
  --running: #3c8fd6;
  --review: #9273dc;
  --queued: #8d929b;
  --done: #3ea660;
  --held: #d9822b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17191c);
    --text: var(--tg-theme-text-color, #f2f2f3);
    --card: var(--tg-theme-secondary-bg-color, #23262b);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.38 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
#app { height: var(--tg-viewport-stable-height, 100vh); display: flex; flex-direction: column; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .5; }
.boot, .empty { color: var(--hint); padding: 28px 18px; text-align: center; }
.hint { color: var(--hint); }
.err { color: var(--waiting); }

/* ---- the board's top: title, attention count, Board | List, column chips ---- */
.top { padding: 10px 14px 0; flex: none; }
.bar { display: flex; align-items: center; gap: 10px; }
.bar h1 { font-size: 20px; margin: 0; font-weight: 700; }
.need { color: var(--waiting); font-weight: 600; font-size: 14px; }
.need.none { color: var(--hint); font-weight: 400; }
.seg { margin-left: auto; display: flex; background: var(--card); border-radius: 9px; padding: 2px; }
.seg button { padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--hint); }
.seg button.on { background: var(--bg); color: var(--text); font-weight: 600; }
.status { color: var(--hint); font-size: 12px; margin: 3px 0 0; min-height: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 10px; }
.chip { flex: none; padding: 5px 11px; border-radius: 15px; background: var(--card); font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.chip b { font-weight: 600; color: var(--hint); }
.chip.on { background: var(--btn); color: var(--btn-text); }
.chip.on b { color: inherit; }
.chip.on .dot { box-shadow: 0 0 0 1.5px var(--btn-text); }
.chip.all { color: var(--link); font-weight: 600; }

/* ---- pages (Board: one column per swipe; side by side when wide) and the list ---- */
.pages { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.page { flex: none; width: 100%; scroll-snap-align: start; overflow-y: auto; padding: 0 14px 28px; }
.pg { order: 2; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  .page { width: 340px; border-right: 1px solid var(--line); }
  .pg { display: none; }
}
.scroll { flex: 1; overflow-y: auto; padding: 0 14px 28px; }
.sec { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hint); }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec:first-child { margin-top: 2px; }

.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--queued); }
.g-investigating, .g-building { background: var(--running); }
.g-reviewing { background: var(--review); }
.g-blocked { background: var(--waiting); }
.g-done { background: var(--done); }
.sec.c-blocked { color: var(--waiting); }

.card { display: block; width: 100%; text-align: left; background: var(--card); border-radius: 13px; padding: 11px 12px; margin: 0 0 8px; }
.row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.lbl { font-weight: 600; }
.meta { margin-left: auto; color: var(--hint); white-space: nowrap; }
.ttl { font-size: 15.5px; font-weight: 600; margin: 5px 0 2px; overflow-wrap: anywhere; }
.who { color: var(--hint); font-size: 12.5px; overflow-wrap: anywhere; }
.why { font-size: 13px; margin-top: 4px; color: var(--held); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.why.you { color: var(--waiting); }
.said { margin-top: 3px; color: var(--hint); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 8px; margin-right: 6px; background: rgba(128, 128, 128, .2); }
.badge.bad { background: var(--waiting); color: #fff; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.btn { padding: 7px 12px; border-radius: 9px; background: var(--bg); font-size: 13.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.short { max-width: 35%; }
.detail > .acts .btn { background: var(--card); }
.acts.rel { align-items: center; margin-top: 4px; }
.btn.main { background: var(--btn); color: var(--btn-text); }
.btn.quiet { color: var(--link); font-weight: 500; }
.rcpt { font-size: 12.5px; margin-top: 8px; color: var(--hint); overflow-wrap: anywhere; }
.rcpt.ok { color: var(--done); }
.rcpt.bad { color: var(--waiting); }

/* ---- one task ---- */
.detail { flex: 1; overflow-y: auto; padding: 12px 14px 28px; }
.back { color: var(--link); font-size: 14px; margin-bottom: 8px; }
.detail h2 { font-size: 18px; margin: 2px 0 4px; overflow-wrap: anywhere; }
.kv { color: var(--hint); font-size: 13px; overflow-wrap: anywhere; }
.stage { display: flex; align-items: center; gap: 7px; margin: 10px 0 2px; font-weight: 600; }
.stage span { font-weight: 400; color: var(--hint); font-size: 13px; }
.box { background: var(--card); border-radius: 13px; padding: 12px; margin: 8px 0; }
.reason { white-space: pre-wrap; overflow-wrap: anywhere; }
.reason.clamp { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.path { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hint); overflow-wrap: anywhere; margin: 8px 0; }
.opt { display: flex; gap: 9px; width: 100%; text-align: left; padding: 10px 11px; border-radius: 10px; background: var(--bg); margin-top: 6px; overflow-wrap: anywhere; }
.opt b { flex: none; min-width: 16px; }
.opt.rec { box-shadow: inset 0 0 0 1.5px var(--btn); }
.opt small { display: block; color: var(--hint); font-size: 12px; }
textarea { width: 100%; min-height: 76px; margin-top: 8px; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.tl { display: flex; gap: 10px; font-size: 13px; padding: 4px 0; overflow-wrap: anywhere; }
.tl time { flex: none; color: var(--hint); font-variant-numeric: tabular-nums; }

/* ---- a report, rendered on the server ---- */
.md { overflow-wrap: anywhere; }
.md h1 { font-size: 20px; } .md h2 { font-size: 17px; margin-top: 22px; } .md h3, .md h4, .md h5, .md h6 { font-size: 15px; margin-top: 16px; }
.md a { color: var(--link); }
.md code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--card); padding: 1px 4px; border-radius: 4px; }
.md pre { background: var(--card); padding: 10px; border-radius: 10px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md ul, .md ol { padding-left: 22px; } .md li { margin: 3px 0; }
.md blockquote { margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--hint); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md .tbl { overflow-x: auto; } .md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 7px; text-align: left; vertical-align: top; }