/* Layout: dark project bar on top, project header with Epics/Tickets switch, then kanban + detail panel (stacks on phones). */
:root {
  --bg: #F3F4F1; --surface: #FFFFFF; --sunk: #E9EBE6; --chip: #EEF0EB; --line: #DDE0DA; --line2: #C9CDC4;
  --ink: #16181A; --ink2: #41464C; --muted: #5B6168;
  --accent: #2A44B0; --accent-bg: #E3E8FB;
  --review: #8F4405; --review-bg: #FCE6CF; --review-line: #F2A65A;
  --ok: #245C43; --ok-bg: #DCEEE3; --bad: #A61E1E; --bad-bg: #F8E0E0;
  --bar: #16181A; --bar-ink: #F3F4F1; --bar-muted: #A9AFA6; --live: #6FCF97;
  --btn: #16181A; --btn-ink: #FFFFFF;
  --sans: 'Geist', 'Segoe UI', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121416; --surface: #1B1E21; --sunk: #23272B; --chip: #262A2E; --line: #2F3439; --line2: #40464C;
  --ink: #ECEEEA; --ink2: #C4C8C2; --muted: #9AA09A;
  --accent: #9CB0F7; --accent-bg: #222C52;
  --review: #F5B57A; --review-bg: #3A2614; --review-line: #B86A22;
  --ok: #8ED1AE; --ok-bg: #17352A; --bad: #F09A9A; --bad-bg: #3D1B1B;
  --bar: #0B0C0D; --bar-ink: #ECEEEA; --bar-muted: #8A9089; --live: #6FCF97;
  --btn: #ECEEEA; --btn-ink: #121416; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #121416; --surface: #1B1E21; --sunk: #23272B; --chip: #262A2E; --line: #2F3439; --line2: #40464C;
  --ink: #ECEEEA; --ink2: #C4C8C2; --muted: #9AA09A;
  --accent: #9CB0F7; --accent-bg: #222C52;
  --review: #F5B57A; --review-bg: #3A2614; --review-line: #B86A22;
  --ok: #8ED1AE; --ok-bg: #17352A; --bad: #F09A9A; --bad-bg: #3D1B1B;
  --bar: #0B0C0D; --bar-ink: #ECEEEA; --bar-muted: #8A9089; --live: #6FCF97;
  --btn: #ECEEEA; --btn-ink: #121416; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gutter { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

.bar { background: var(--bar); color: var(--bar-ink); padding-block: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand b { font-size: 17px; letter-spacing: -0.01em; }
.brand span { font-size: 12px; color: var(--bar-muted); }
.ptabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 360px; }
.ptab { border: 0; background: transparent; color: var(--bar-muted); padding: 8px 14px; border-radius: 6px; min-height: 36px; display: flex; align-items: center; gap: 8px; }
.ptab[aria-current="true"] { background: var(--bg); color: var(--ink); font-weight: 600; }
.badge { font-family: var(--mono); font-size: 11px; background: var(--review-line); color: #16181A; border-radius: 999px; padding: 1px 7px; }
.live { font-size: 12px; color: var(--bar-muted); display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--live); }

.phead { padding-block: 24px 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.phead h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.repo { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.seg { display: flex; gap: 2px; background: var(--sunk); padding: 3px; border-radius: 8px; }
.seg button { border: 0; background: transparent; color: var(--ink2); padding: 8px 16px; border-radius: 6px; min-height: 36px; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.seg .n { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 4px; }

.work { padding-block: 20px 32px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cols { flex: 999 1 640px; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.col { flex: 1 1 200px; min-width: 0; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--sunk); }
.col.review { background: var(--review-bg); box-shadow: inset 0 0 0 2px var(--review-line); }
.col.merged { opacity: 0.85; }
.colhead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; }
.colhead .lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.colhead .cnt { font-size: 12px; color: var(--muted); }
.owner { margin-left: auto; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.owner.agent { background: var(--accent-bg); color: var(--accent); }
.owner.you { background: var(--btn); color: var(--btn-ink); }
.owner.done { background: var(--ok-bg); color: var(--ok); }
.c-queued .lbl { color: var(--ink2); } .c-working .lbl { color: var(--accent); } .c-review .lbl { color: var(--review); } .c-merged .lbl { color: var(--ok); }
.card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.card[aria-pressed="true"] { border: 2px solid var(--accent); padding: 11px; }
.card .key { font-size: 12px; color: var(--muted); }
.card .ttl { font-size: 14px; line-height: 1.35; font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { font-size: 11px; color: var(--ink2); background: var(--chip); border: 1px solid var(--line); padding: 1px 7px; border-radius: 4px; }
.tag.blocked { color: var(--bad); background: var(--bad-bg); border-color: transparent; font-weight: 600; }
.tag.pr { font-family: var(--mono); color: var(--accent); background: transparent; border: 0; padding: 0; }
.none { font-size: 12px; color: var(--muted); padding: 8px 4px; }

.detail { flex: 1 1 340px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.detail h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.pill { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; }
.p-queued { background: var(--sunk); color: var(--ink2); } .p-working { background: var(--accent-bg); color: var(--accent); }
.p-review { background: var(--review-bg); color: var(--review); } .p-merged { background: var(--ok-bg); color: var(--ok); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub { font-size: 13px; color: var(--ink2); }
.desc { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.check svg { flex: none; margin-top: 1px; }
.check.done span { color: var(--ink2); }
.notes { background: var(--bg); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.notes .meta { font-size: 12px; color: var(--ink2); overflow-wrap: anywhere; }
.ask { background: var(--bad-bg); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.ask .label { color: var(--bad); }
textarea { width: 100%; padding: 10px; border: 1px solid var(--line2); border-radius: 8px; resize: vertical; background: var(--surface); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.primary { border: 0; background: var(--btn); color: var(--btn-ink); font-weight: 500; padding: 10px 16px; border-radius: 8px; min-height: 44px; }
.secondary { border: 1px solid var(--line2); background: var(--surface); font-weight: 500; padding: 10px 16px; border-radius: 8px; min-height: 44px; }
button:disabled { opacity: 0.5; cursor: default; }

.epics { padding-block: 20px 32px; display: flex; flex-direction: column; gap: 12px; max-width: 1100px; }
.epic { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.epic .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.epic .name { font-size: 17px; font-weight: 600; flex: 1 1 240px; min-width: 0; }
.track { height: 6px; background: var(--sunk); border-radius: 999px; overflow: hidden; }
.fill { height: 6px; background: var(--accent); border-radius: 999px; }
.goal { color: var(--ink2); line-height: 1.45; }
.elist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.erow { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-align: left; }
.erow .k { font-size: 12px; color: var(--muted); width: 72px; }
.erow .t { flex: 1 1 260px; min-width: 0; }

.empty { margin-block: 24px; padding: 48px 24px; border: 1px dashed var(--line2); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.empty b { font-size: 16px; }
.empty span { color: var(--muted); max-width: 60ch; line-height: 1.45; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--btn); color: var(--btn-ink); padding: 10px 16px; border-radius: 8px; font-size: 13px; max-width: calc(100% - 32px); }
.login { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.login input { padding: 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.foot { padding-block: 8px 24px; font-size: 12px; color: var(--muted); }

body { margin: 0; }
[hidden] { display: none !important; }