/* Light palette (default). */
:root {
  --page:#F6F7F9; --surface:#FFFFFF; --ink:#1B1E23; --ink2:#5A616E; --ink3:#8B92A0;
  --line:#E5E8EC; --accent:#2D68C4;
  --ok-bg:#E6F4EC; --ok-fg:#15764E;
  --warn-bg:#FBF0D9; --warn-fg:#8C5E07;
  --bad-bg:#FBE9E9; --bad-fg:#B23636;
  --info-bg:#E7EEFA; --info-fg:#2D68C4;
  --neutral-bg:#EEF1F5; --neutral-fg:#4B5563;
  --flag-bg:#F1EEFB; --flag-fg:#5B44B0; --flag-line:#8B6FE0;
  --grouphead:#FBFCFD; --track:#CBD2DB;
}

/* Dark palette when the system asks for it and no manual choice overrides. */
@media (prefers-color-scheme: dark) {
  :root {
    --page:#0F1216; --surface:#171B21; --ink:#E6E9EE; --ink2:#A5AEBC; --ink3:#6E7889;
    --line:#262C35; --accent:#5C93E6;
    --ok-bg:#12271D; --ok-fg:#5FD39B;
    --warn-bg:#2E2413; --warn-fg:#E3B25C;
    --bad-bg:#2E1717; --bad-fg:#EE8A8A;
    --info-bg:#152438; --info-fg:#79ABF0;
    --neutral-bg:#232936; --neutral-fg:#AEB6C4;
    --flag-bg:#1E1A33; --flag-fg:#B7A3F2; --flag-line:#7A5FD0;
    --grouphead:#1B2027; --track:#3A424F;
  }
}

/* Manual overrides win over the system default in both directions. */
:root[data-theme="light"] {
  --page:#F6F7F9; --surface:#FFFFFF; --ink:#1B1E23; --ink2:#5A616E; --ink3:#8B92A0;
  --line:#E5E8EC; --accent:#2D68C4;
  --ok-bg:#E6F4EC; --ok-fg:#15764E;
  --warn-bg:#FBF0D9; --warn-fg:#8C5E07;
  --bad-bg:#FBE9E9; --bad-fg:#B23636;
  --info-bg:#E7EEFA; --info-fg:#2D68C4;
  --neutral-bg:#EEF1F5; --neutral-fg:#4B5563;
  --flag-bg:#F1EEFB; --flag-fg:#5B44B0; --flag-line:#8B6FE0;
  --grouphead:#FBFCFD; --track:#CBD2DB;
}
:root[data-theme="dark"] {
  --page:#0F1216; --surface:#171B21; --ink:#E6E9EE; --ink2:#A5AEBC; --ink3:#6E7889;
  --line:#262C35; --accent:#5C93E6;
  --ok-bg:#12271D; --ok-fg:#5FD39B;
  --warn-bg:#2E2413; --warn-fg:#E3B25C;
  --bad-bg:#2E1717; --bad-fg:#EE8A8A;
  --info-bg:#152438; --info-fg:#79ABF0;
  --neutral-bg:#232936; --neutral-fg:#AEB6C4;
  --flag-bg:#1E1A33; --flag-fg:#B7A3F2; --flag-line:#7A5FD0;
  --grouphead:#1B2027; --track:#3A424F;
}

html { color-scheme: light dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

.cb-page { padding: 28px 24px 48px; min-height: 100vh; }
.wrap { max-width: 1120px; margin: 0 auto; }

header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.cycle-link { color: inherit; text-decoration: none; }
.cycle-link:hover { text-decoration: underline; }
.sub { font-size: 13px; color: var(--ink2); margin-top: 3px; }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); cursor: pointer; user-select: none; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slider { position: absolute; inset: 0; background: var(--track); border-radius: 999px; transition: background .15s ease; }
.slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(14px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.ghost-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }
.ghost-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button {
  border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink2);
  font-size: 13px; font-weight: 500; padding: 6px 12px; cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--accent); }
.seg button.active { background: var(--accent); color: #fff; }
.meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.updated { display: inline-block; min-width: 150px; text-align: right; font-variant-numeric: tabular-nums; }


.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--info-bg); color: var(--info-fg);
  border: 1px solid #C7DAF6; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
  font-size: 13px;
}
.banner-ok {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 7px; cursor: pointer;
}
.banner-ok:hover { filter: brightness(1.05); }

/* Sign-in controls (header) and flash messages. */
.meta form.button_to { display: inline; margin: 0; }
.meta .ghost-btn { padding: 4px 10px; }
a.ghost-btn { text-decoration: none; display: inline-block; }
.banner .signin { display: inline-flex; gap: 8px; }
.banner.flash-notice { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-fg); }
.banner.flash-alert { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-fg); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat .k { font-size: 12px; color: var(--ink2); margin-bottom: 4px; }
.stat .v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.v.ok { color: var(--ok-fg); } .v.warn { color: var(--warn-fg); } .v.bad { color: var(--bad-fg); }

.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.colhead th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink3); padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface);
  white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }

.grouphead td {
  background: var(--grouphead); cursor: pointer; user-select: none; padding: 9px 14px;
  border-top: 1px solid var(--line);
}
tbody:first-of-type .grouphead td { border-top: none; }
.grouphead .gt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
.grouphead .gc { font-size: 12px; color: var(--ink3); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }
.chev { display: inline-block; width: 20px; font-size: 20px; line-height: 1; color: var(--ink3); transition: transform .12s ease; margin-right: 6px; }
tbody.collapsed .chev { transform: rotate(-90deg); }
tbody.collapsed tr:not(.grouphead) { display: none; }
.empty td { color: var(--ink3); font-style: italic; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.task { font-weight: 600; font-size: 13.5px; line-height: 1.35; display: block; }
.prlink { font-size: 13px; font-weight: 500; margin-top: 3px; display: inline-block; font-variant-numeric: tabular-nums; }
.author { color: var(--ink2); font-variant-numeric: tabular-nums; }
.author.none { color: var(--ink3); font-style: italic; }
.author-name { font-weight: 700; }
.assignees { font-size: 12px; font-weight: 400; color: var(--ink2); margin-top: 3px; line-height: 1.35; }
.assign-row { margin-top: 4px; }
.pr-author { font-size: 12px; color: var(--ink2); margin-left: 4px; }
.me-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }
.age { color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.updated-at { color: var(--ink2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.draft-tag { margin-left: 6px; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; }
.attn { color: var(--ink2); font-size: 12.5px; line-height: 1.4; }
.attn.hot { color: var(--bad-fg); }

.assign { font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; }
.assign:hover { text-decoration: underline; }
.attn .assign { display: inline-block; margin-left: 6px; }

.assignee:not(:first-child)::before { content: ", "; }
.unassign {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; border-radius: 50%;
  color: var(--ink3); font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.unassign:hover { background: var(--bad-bg); color: var(--bad-fg); text-decoration: none; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.info { background: var(--info-bg); color: var(--info-fg); }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
a.pill:hover { text-decoration: none; filter: brightness(.97); }

/* Rows missing a link between a PR and its Asana task (or a QA task with no PR
   at all) get a distinct indigo treatment, separate from the semantic colors. */
.row-flagged td { background: var(--flag-bg); }
.row-flagged td:first-child { box-shadow: inset 3px 0 0 var(--flag-line); }
.flag-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
  color: var(--flag-fg); border: 1px solid var(--flag-line); border-radius: 6px; padding: 1px 6px;
}