:root {
  --bg: #f4f6f9; --card: #ffffff; --fg: #1b2330; --muted: #6a7686; --line: #dde3ea;
  --accent: #1f5f99; --accent-fg: #ffffff; --chip: #e8eef5;
  --new: #2e7d32; --incoming: #1565c0; --updated: #8a6d00; --outgoing: #757575; --watched: #6a1b9a;
  --warn-bg: #fff3cd; --warn-fg: #6b4e00; --info-bg: #e3f0fb; --info-fg: #0d3f6b; --err: #b3261e;
  --unread: #eef5ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --card: #1b2129; --fg: #e4e9ef; --muted: #8d99a8; --line: #2c3540;
    --accent: #5aa2e6; --accent-fg: #0b1622; --chip: #25303c;
    --new: #66bb6a; --incoming: #64b5f6; --updated: #e0b84a; --outgoing: #9e9e9e; --watched: #ce93d8;
    --warn-bg: #3d3114; --warn-fg: #f2d38a; --info-bg: #15304a; --info-fg: #bcdcf7; --err: #f2867e;
    --unread: #1a2a3c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.25rem; margin: .25rem 0 .75rem; }
h2 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
main { max-width: 760px; margin: 0 auto; padding: 12px 16px; }
.muted { color: var(--muted); font-weight: normal; }
.small { font-size: .85rem; }
.grow { flex: 1; min-width: 0; }
.empty { text-align: center; padding: 2rem 0; color: var(--muted); }

/* header */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; gap: 10px; align-items: center;
  padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--accent); color: var(--accent-fg);
}
.top .brand { color: var(--accent-fg); font-weight: 700; letter-spacing: .5px; }
.top .search { flex: 1; }
.top .search input { width: 100%; border: 0; border-radius: 8px; padding: 7px 10px; font-size: 15px; background: rgba(255,255,255,.92); color: #111; }
.health { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.health.ok { background: #7ee787; } .health.down { background: #ff6b6b; }

.banner { padding: 10px 16px; font-size: .95rem; }
.banner.warn { background: var(--warn-bg); color: var(--warn-fg); }
.banner.info { background: var(--info-bg); color: var(--info-fg); }
p.banner { border-radius: 8px; margin: 0 0 12px; }

/* bottom nav */
nav.bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex;
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
nav.bottom a { flex: 1; text-align: center; padding: 6px 0 8px; font-size: .72rem; color: var(--muted); position: relative; }
nav.bottom a.on { color: var(--accent); font-weight: 600; }
nav.bottom .ico { display: block; font-size: 1.25rem; line-height: 1.5; }
.badge { position: absolute; top: 2px; left: 52%; background: var(--err); color: #fff; border-radius: 9px; font-size: .68rem; padding: 0 6px; }

/* controls */
button, .button {
  font: inherit; font-size: .95rem; border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; display: inline-block; min-height: 40px;
}
button.primary, .button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.ghost, .button.ghost { background: transparent; }
button.small { min-height: 30px; padding: 3px 9px; font-size: .85rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg); min-height: 42px;
}
textarea { resize: vertical; }
label { display: block; margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
label > input, label > select, label > textarea, label > .cf-choice { margin-top: 4px; color: var(--fg); }
label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); margin: 0 12px 8px 0; }
label.check input { width: auto; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[disabled] { opacity: .45; }
form.inline { display: inline; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.cf-choice { display: flex; gap: 6px; }
.req { color: var(--err); margin-left: 2px; }
.hint { font-size: .85rem; color: var(--muted); background: var(--chip); padding: 8px 10px; border-radius: 8px; }
.error { color: var(--err); }
ul.error { padding-left: 20px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.actions.sticky { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); background: var(--card); padding: 10px 0; margin-bottom: 0; justify-content: flex-end; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.card.narrow { max-width: 380px; margin: 3rem auto; }
.card > summary, details > summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
details > summary + * { margin-top: 8px; }
.checks { display: flex; flex-wrap: wrap; }

/* toolbar / chips */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.chip { background: var(--chip); color: var(--fg); padding: 5px 12px; border-radius: 16px; font-size: .9rem; }
.chip.on { background: var(--accent); color: var(--accent-fg); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters select { width: auto; flex: 1 1 140px; min-height: 36px; padding: 5px 8px; font-size: .9rem; }

/* inbox & lists */
h2.day { font-size: .85rem; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; }
ul.events, ul.issues, ul.nav-list, ul.plain { list-style: none; margin: 0; padding: 0; }
.event, .issues li, .nav-list li {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.event > a, .issues li > a, .nav-list li > a { display: block; padding: 10px 12px; color: var(--fg); }
.event { border-left: 4px solid var(--updated); }
.event.unread { background: var(--unread); }
.event.k-new { border-left-color: var(--new); } .event.k-incoming { border-left-color: var(--incoming); }
.event.k-outgoing { border-left-color: var(--outgoing); } .event.k-watched { border-left-color: var(--watched); }
.event .kind { font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.k-new .kind { color: var(--new); } .k-incoming .kind { color: var(--incoming); } .k-updated .kind { color: var(--updated); }
.k-outgoing .kind { color: var(--outgoing); } .k-watched .kind { color: var(--watched); }
.row1 { display: flex; gap: 8px; align-items: baseline; font-size: .85rem; }
.row1 .target { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row1 .time { color: var(--muted); margin-left: auto; white-space: nowrap; }
.subject { margin: 2px 0; }
.meta { font-size: .82rem; color: var(--muted); }
.summary { font-size: .88rem; margin-top: 4px; overflow-wrap: anywhere; }
.status { background: var(--chip); border-radius: 6px; padding: 0 6px; font-size: .82rem; }
.status.closed { text-decoration: line-through; }

/* issue */
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: .92rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
.comment textarea { margin-bottom: 8px; }
.comment .row { justify-content: space-between; }
ol.timeline { list-style: none; padding: 0; margin: 0; }
ol.timeline > li { border-left: 2px solid var(--line); padding: 0 0 14px 12px; margin-left: 4px; }
.timeline .who { font-size: .9rem; }
.timeline .change { font-size: .85rem; color: var(--muted); }
.timeline .change b { color: var(--fg); font-weight: 600; }
.timeline .note { margin-top: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.principals li { border-bottom: 1px solid var(--line); padding: 4px 0; }
.principals .row { flex-wrap: nowrap; }
.principals label.check { margin: 0; font-size: .85rem; }

.htmx-request #dyn, #dyn.htmx-request { opacity: .5; }

/* page-load progress bar */
body.loading::before {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 40%; z-index: 100;
  background: #ffb300; animation: loadbar 1.1s ease-in-out infinite;
}
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* "press Back again to exit" hint */
.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(30, 30, 30, .92); color: #fff; padding: 9px 16px; border-radius: 20px; font-size: .9rem;
  z-index: 200; white-space: nowrap;
}