/* Material 3 conventions in plain CSS: tonal color roles, layered surfaces, pill buttons, state layers. */
:root {
  color-scheme: dark;
  --surface: #10121e;
  --card: #1a1d2e;
  --container: #1f2336;
  --high: #282c42;
  --ink: #e3e4f4;
  --muted: #b3b6cd;
  --outline: #8c8fa8;
  --line: #3b3f58;
  --primary: #b6c1ff;
  --on-primary: #0e1d78;
  --primary-container: #2b3a9a;
  --on-primary-container: #dde1ff;
  --tertiary: #dfb7ff;
  --tertiary-container: #582f93;
  --on-tertiary-container: #f1dbff;
  --teal: #6fd9da;
  --teal-container: #00504f;
  --on-teal-container: #98f1f2;
  --amber: #ffb95a;
  --amber-container: #4d3100;
  --on-amber-container: #ffddb0;
  --error: #ffb4ab;
  --error-container: #5f1a1a;
  --on-error-container: #ffdad6;
  --green: #8bd9a0;
  --green-container: #124a2a;
  --on-green-container: #a8f2bb;
  --bar: #323650;
  --backdrop: rgb(4 6 16 / 70%);
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 25%);
  --shadow-high: 0 8px 28px rgb(0 0 0 / 55%);
  --hover: color-mix(in srgb, var(--primary) 9%, transparent);
  --press: color-mix(in srgb, var(--primary) 16%, transparent);
  font-family: Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface: #f6f7fd;
  --card: #ffffff;
  --container: #eceefa;
  --high: #e2e5f5;
  --ink: #1b1d2d;
  --muted: #4b4e66;
  --outline: #767993;
  --line: #cdd0e3;
  --primary: #3948c9;
  --on-primary: #ffffff;
  --primary-container: #dfe2ff;
  --on-primary-container: #08146e;
  --tertiary: #7439c2;
  --tertiary-container: #efdcff;
  --on-tertiary-container: #2b0b5c;
  --teal: #00696a;
  --teal-container: #a2f0f1;
  --on-teal-container: #00201f;
  --amber: #885200;
  --amber-container: #ffddb2;
  --on-amber-container: #2c1700;
  --error: #b3261e;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --green: #1c6b3a;
  --green-container: #b8f0c6;
  --on-green-container: #00210d;
  --bar: #dadef0;
  --backdrop: rgb(20 22 45 / 45%);
  --shadow: 0 1px 2px rgb(40 45 90 / 14%), 0 2px 8px rgb(40 45 90 / 10%);
  --shadow-high: 0 8px 28px rgb(40 45 90 / 28%);
  --hover: color-mix(in srgb, var(--primary) 8%, transparent);
  --press: color-mix(in srgb, var(--primary) 14%, transparent);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
svg.i { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Buttons: outlined by default, filled for the one primary action, tonal for the main row action. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--outline);
  border-radius: 20px;
  padding: 7px 16px;
  background: transparent;
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
button:hover { background: var(--hover); }
button:active { background: var(--press); }
button:disabled { opacity: .5; cursor: default; background: transparent; }
button.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
button.primary:hover { background: var(--primary); box-shadow: var(--shadow); filter: brightness(1.08); }
button.tonal { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
button.tonal:hover { filter: brightness(1.1); background: var(--primary-container); }
button.icon, button.act { width: 36px; height: 36px; padding: 0; border-color: transparent; color: var(--muted); border-radius: 50%; }
button.icon:hover, button.act:hover { color: var(--ink); }
button.icon svg { width: 20px; height: 20px; }
#help-open { border-color: var(--line); font-weight: 700; font-size: 15px; }
button.act { width: 32px; height: 32px; }
button.link { border: 0; padding: 0; background: none; color: var(--primary); text-decoration: underline; font-size: inherit; font-weight: inherit; display: inline; }
:where(button, a, input, select, textarea, summary, tr[tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input[type="checkbox"] { accent-color: var(--primary); width: 18px; height: 18px; flex: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
kbd { font-family: inherit; font-size: 12px; padding: 1px 7px; border: 1px solid var(--outline); border-bottom-width: 2px; border-radius: 5px; background: var(--container); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App bar and navigation */
header {
  min-height: 64px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 4vw;
  position: sticky;
  top: 0;
  z-index: 3;
}
.brand { font-size: 25px; letter-spacing: -0.5px; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-work { font-weight: 450; }
.brand-tray { font-weight: 800; color: var(--primary); }
nav { display: flex; gap: 4px; align-self: stretch; align-items: center; overflow-x: auto; }
nav button { border: 0; border-radius: 20px; background: none; padding: 8px 16px; color: var(--muted); font-weight: 500; }
nav button:hover { background: var(--hover); color: var(--ink); }
nav button.selected { background: var(--primary-container); color: var(--on-primary-container); font-weight: 650; }
nav span:not(:empty) { margin-left: 4px; font-size: 11px; border-radius: 10px; padding: 1px 7px; background: var(--primary); color: var(--on-primary); font-weight: 700; }
nav button[data-view="connections"] span:not(:empty) { background: var(--error); color: var(--surface); }
.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#refresh.syncing svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #refresh.syncing svg { animation: none; } * { transition: none !important; } }
#theme-toggle .moon, [data-theme="light"] #theme-toggle .sun { display: none; }
[data-theme="light"] #theme-toggle .moon { display: block; }
#theme-toggle svg, #settings-open svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
main { max-width: 1480px; padding: 22px 4vw 70px; margin: auto; }
h1 { font-size: 28px; letter-spacing: -.5px; font-weight: 600; margin: 0 0 8px; }
h2 { font-size: 20px; font-weight: 600; margin: 26px 0 12px; }
h3 { font-size: 14px; font-weight: 650; margin: 20px 0 8px; }
p { line-height: 1.6; max-width: 80ch; margin: 8px 0 18px; }
p.small { font-size: 12px; }
.view-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.view-heading p, .muted { color: var(--muted); }
input:not([type="checkbox"]), select, textarea { border: 1px solid var(--outline); border-radius: 8px; padding: 9px 12px; background: var(--card); color: var(--ink); min-width: 0; }
input:not([type="checkbox"]):focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { display: flex; flex-direction: column; gap: 6px; }
.check-filter { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
label.check-filter { flex-direction: row; }

/* Next meeting card */
.next-strip { margin: 0 0 16px; font-size: 13px; }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 18px; border-radius: 16px; background: var(--primary-container); color: var(--on-primary-container); }
.strip-row svg.i { width: 22px; height: 22px; }
.strip-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; }
.strip-row a { font-weight: 650; font-size: 16px; color: inherit; }
.strip-row .muted { color: inherit; opacity: .85; }
.strip-row .gap { background: var(--green-container); color: var(--on-green-container); padding: 3px 11px; border-radius: 12px; font-weight: 600; font-size: 12px; }
.strip-row .reason { background: var(--amber-container); color: var(--on-amber-container); padding: 3px 11px; border-radius: 12px; font-size: 12px; }
.strip-row button { margin-left: auto; background: var(--card); color: var(--ink); border-color: transparent; }
.next-strip .brief { margin: 8px 0 0; }
.next-strip > .muted { display: block; padding: 12px 18px; border-radius: 16px; background: var(--container); }
.next-strip .on-call-strip { margin-bottom: 8px; background: var(--amber-container); color: var(--on-amber-container); }
.next-strip .on-call-strip .reason { background: var(--card); color: var(--ink); }

/* Search, type menu, quick-filter chips */
.filters { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 280px; max-width: 440px; }
.search svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; pointer-events: none; }
.filters input[type="search"] { width: 100%; border: 0; border-radius: 24px; padding: 11px 16px 11px 44px; background: var(--high); }
.filters input[type="search"]:focus { outline: 2px solid var(--primary); }
.filters select { border: 0; border-radius: 24px; background: var(--high); padding: 11px 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 14px; border-radius: 10px; font-size: 13px; color: var(--ink); border-color: var(--line); height: 34px; }
.chip strong { font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 8px; background: var(--high); font-size: 12px; }
.chip-needs strong { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.chip-upnext strong { background: var(--amber-container); color: var(--on-amber-container); }
.chip-aged strong { background: var(--error-container); color: var(--on-error-container); }
.chip-done strong { background: var(--green-container); color: var(--on-green-container); }
.chip.active { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: 650; }

/* Data tables */
.table-scroll { overflow: clip; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; vertical-align: middle; padding: 10px 12px; border-top: 1px solid var(--line); line-height: 1.45; }
table.data thead th { border-top: 0; background: var(--container); font-size: 12px; letter-spacing: .04em; color: var(--muted); font-weight: 650; white-space: nowrap; padding: 10px 12px; position: sticky; top: var(--header-height, 64px); z-index: 1; }
table.data tbody tr:first-child td { border-top: 0; }
button.sort { border: 0; border-radius: 6px; background: none; padding: 2px 4px; margin: 0 -4px; color: inherit; font: inherit; text-transform: uppercase; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 4px; }
button.sort:hover { color: var(--ink); background: var(--hover); }
button.sort.reset { font-size: 14px; }
th[aria-sort="ascending"] button.sort, th[aria-sort="descending"] button.sort { color: var(--primary); }
.arrow { font-size: 9px; }
tr.row td { transition: background-color .12s; }
tr.row:hover td, tr.row:focus-within td { background: var(--hover); }
tr.row:focus-visible { outline-offset: -2px; }
tr.row td:first-child { box-shadow: inset 4px 0 0 transparent; }
tr.row[data-tone="bad"] td:first-child { box-shadow: inset 4px 0 0 var(--error); }
tr.row[data-tone="good"] td:first-child { box-shadow: inset 4px 0 0 var(--green); }
tr.row[data-tone="act"] td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
tr.row[data-tone="need"] td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
tr.row[data-tone="wait"] td:first-child { box-shadow: inset 4px 0 0 var(--outline); }
tr.row[data-tone="wait"] .item-title { color: var(--muted); font-weight: 450; }
td.star { width: 40px; padding-left: 12px; padding-right: 0; }
td.type-cell { width: 104px; white-space: nowrap; }
td.title-cell { min-width: 260px; }
td.why { width: 230px; }
td.where { width: 180px; color: var(--muted); overflow-wrap: anywhere; }
td.due-cell { width: 76px; white-space: nowrap; }
td.age-cell { width: 64px; white-space: nowrap; text-align: right; }
td.actions { width: 1px; white-space: nowrap; text-align: right; padding-right: 10px; }
th.actions-head { width: 1px; }
td.actions > * { vertical-align: middle; }
td.actions button.tonal { padding: 5px 12px 5px 10px; font-size: 12px; margin-right: 2px; }
@media (hover: hover) {
  td.actions:not(.always) > * { opacity: .45; }
  tr.row:hover td.actions > *, tr.row:focus-within td.actions > * { opacity: 1; }
}
tr.detail td { background: var(--container); padding: 12px 16px 14px 56px; }
#triage tr.detail td { padding-left: 16px; }
tr.empty-row td { padding: 30px 16px; color: var(--muted); text-align: center; }
.item-title { font-weight: 550; color: var(--ink); overflow-wrap: anywhere; }
.item-title:hover { color: var(--primary); }
.note { color: var(--muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.type { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--high); color: var(--muted); }
.type svg.i { width: 14px; height: 14px; }
.type-pr { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.type-jira { background: var(--teal-container); color: var(--on-teal-container); }
.type-agent { background: var(--green-container); color: var(--on-green-container); }
.type-meeting { background: var(--primary-container); color: var(--on-primary-container); }
.type-notes, .type-slack, .type-confluence { background: var(--amber-container); color: var(--on-amber-container); }
.reason { color: var(--primary); font-weight: 650; }
.reason.bad, .checks { color: var(--error); }
.reason.good { color: var(--green); }
.reason.act { color: var(--amber); }
.checks { display: block; font-size: 12px; }
td.why > * { margin-right: 6px; }
.due.soon { color: var(--amber); font-weight: 600; }
.due.late { color: var(--error); font-weight: 650; }
.back, .close-signal { display: block; font-size: 12px; }
.back { color: var(--primary); }
.close-signal { color: var(--amber); }
.title-cell > .reason { margin-left: 8px; font-size: 12px; }
.linked-status { display: block; font-size: 12px; color: var(--muted); }
.linked { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; }
.linked li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.linked svg.i { width: 14px; height: 14px; flex: none; }
.linked a { color: inherit; }
.suggestion { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.suggestion-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.suggestion-main .muted { font-size: 12px; }
.suggestion-actions { display: flex; gap: 6px; }
.age { font-variant-numeric: tabular-nums; color: var(--muted); }
.age.old { color: var(--amber); font-weight: 650; }
button.pin { border-color: transparent; color: var(--muted); padding: 0; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; }
button.pin.active { color: var(--amber); background: var(--amber-container); }
.more { margin: 12px 0; }
.snooze-menu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.snooze-menu button { font-size: 12px; padding: 4px 12px; }
.brief { padding: 12px 16px; border-radius: 12px; background: var(--card); font-size: 12px; box-shadow: var(--shadow); }
.brief h4 { margin: 10px 0 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.brief h4:first-child { margin-top: 0; }
.brief ul { margin: 0; padding-left: 16px; }
.brief li { margin: 3px 0; overflow-wrap: anywhere; }
.triage-section { margin-top: 36px; }
.section-heading { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.section-heading h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.section-heading h2 .group-count { margin: 0; background: var(--tertiary-container); color: var(--on-tertiary-container); padding: 2px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.section-heading p { margin: 0; flex: 1 1 260px; font-size: 13px; }
.bulk { display: flex; gap: 8px; }
.bulk button { font-size: 13px; }
.group-count { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 8px; font-variant-numeric: tabular-nums; }
.empty { padding: 28px 20px; color: var(--muted); border: 1px dashed var(--outline); border-radius: 12px; margin: 16px 0; }

/* Team and history */
.item-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--line); }
.item-main { min-width: 0; flex: 1; }
.item-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 4px; }
.scope { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px; margin: 20px 0; }
.scope summary { cursor: pointer; font-weight: 500; }
.scope summary span { color: var(--muted); font-size: 12px; margin-left: 10px; }
.scope form { display: flex; gap: 12px; align-items: flex-end; margin-top: 16px; }
.scope label { flex: 1; }
#team { border-radius: 16px; overflow: clip; box-shadow: var(--shadow); background: var(--card); }
.team-row { border-top: 1px solid var(--line); background: var(--card); }
.team-row:first-child { border-top: 0; }
.team-row > summary { list-style: none; display: grid; grid-template-columns: 220px 1fr 70px 70px 90px; gap: 20px; align-items: center; padding: 16px 18px; cursor: pointer; }
.team-row > summary:hover { background: var(--hover); }
.team-row > summary::-webkit-details-marker { display: none; }
.team-name { font-weight: 600; }
.team-name small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; }
.workbar { height: 10px; border-radius: 5px; background: var(--bar); overflow: hidden; display: flex; }
.workbar span { background: var(--teal); height: 100%; }
.workbar span.pr { background: var(--tertiary); }
.number { text-align: right; font-variant-numeric: tabular-nums; }
button.number { border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; white-space: normal; display: block; font-weight: 600; }
button.number:hover { background: var(--hover); }
button.number.active { background: var(--primary-container); }
.team-sort { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.team-sort button { font-size: 13px; padding: 5px 14px; color: var(--ink); border-color: var(--line); }
.team-sort button[aria-pressed="true"] { background: var(--primary-container); border-color: transparent; color: var(--on-primary-container); font-weight: 650; }
.team-focus { display: flex; gap: 10px; align-items: center; padding: 10px 0 0; font-size: 12px; color: var(--muted); }
.team-focus button { font-size: 12px; padding: 3px 10px; }
.number small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; font-weight: 400; }
.number.work-tickets { color: var(--teal); }
.number.work-prs { color: var(--tertiary); }
.number.work-aged { color: var(--amber); }
.team-row[open] > summary { background: var(--container); }
.team-details { padding: 2px 22px 18px; }
.team-details .item-row { padding: 10px 0; }
.team-coverage { margin-bottom: 18px; font-size: 12px; color: var(--muted); }
.team-coverage summary { cursor: pointer; }
.team-work-group { margin: 16px 0; }
.team-work-group h3 { font-size: 13px; font-weight: 650; margin: 0; padding: 9px 0; color: var(--primary); }
.team-work-group[data-team-group="progress"] h3 { color: var(--teal); }
.team-work-group[data-team-group="prs"] h3 { color: var(--tertiary); }
.team-more { margin: 8px 0; font-size: 12px; }
.team-roster-action { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.team-roster-action button { font-size: 12px; color: var(--muted); border-color: var(--line); }
.excluded-member { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.standup { margin: 0 0 16px; }
.standup pre { margin: 12px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); max-width: 80ch; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; line-height: 1.7; }
.day { margin: 24px 0 0; padding: 8px 0; font-size: 13px; font-weight: 650; color: var(--primary); border-bottom: 1px solid var(--line); }
#history .item-row { background: var(--card); }
#history .item-row:first-of-type { border-top: 0; }

/* Connections, settings, dialogs */
.source-row { display: grid; grid-template-columns: 130px 95px 1fr 105px; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.badge { font-size: 12px; border-radius: 8px; padding: 4px 10px; background: var(--high); display: inline-block; width: max-content; font-weight: 600; }
.badge.ok { background: var(--green-container); color: var(--on-green-container); }
.badge.error { background: var(--error-container); color: var(--on-error-container); }
.badge.refreshing { background: var(--primary-container); color: var(--on-primary-container); }
.source-detail { font-size: 12px; line-height: 1.5; color: var(--muted); }
.source-detail time { display: block; margin-top: 4px; }
.metrics-row { display: flex; gap: 25px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.metrics-row strong { min-width: 130px; }
.view > details { margin-top: 20px; }
.view > details summary { cursor: pointer; }
.whats-new { padding-left: 18px; max-width: 80ch; line-height: 1.6; }
.whats-new li { margin: 8px 0; }
table.compact th, table.compact td { padding: 8px 12px; }
#help-dialog { max-width: 640px; }
table.shortcuts td:first-child { width: 90px; }
#snapshot-notice { border-radius: 12px; background: var(--amber-container); color: var(--on-amber-container); padding: 12px 18px; margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
#demo-banner { border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); padding: 12px 18px; margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
#notice { border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); padding: 12px 18px; margin: 0 0 16px; overflow-wrap: anywhere; }
dialog { border: 0; border-radius: 28px; max-width: 560px; width: calc(100% - 30px); padding: 26px 28px; color: var(--ink); background: var(--container); box-shadow: var(--shadow-high); }
dialog::backdrop { background: var(--backdrop); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dialog-heading h2 { margin: 0; font-size: 22px; }
.dialog-heading button { border: 0; font-size: 22px; padding: 0; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }
dialog label { margin-top: 14px; }
dialog input:not([type="checkbox"]), dialog textarea { width: 100%; }
dialog .check-filter { margin-top: 8px; }
dialog table.data { border-radius: 12px; overflow: clip; background: var(--card); }
dialog table.data thead th { position: static; }
code { font-size: 12px; background: var(--high); padding: 1px 6px; border-radius: 5px; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .table-scroll { overflow-x: auto; }
  table.data thead th { position: static; }
  td.where, td.due-cell, th:nth-child(5), th:nth-child(6) { display: none; }
  #triage td.where, #triage th:nth-child(3) { display: table-cell; }
}
@media (max-width: 700px) {
  header { min-height: 56px; padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
  .brand { font-size: 22px; }
  nav { order: 3; flex-basis: 100%; }
  nav button { padding: 8px 12px; font-size: 12px; }
  .header-actions { gap: 6px; }
  .header-actions button span { display: none; }
  main { padding: 14px 14px 40px; }
  h1 { font-size: 22px; }
  .search { flex-basis: 100%; max-width: none; }
  td.actions:not(.always) > * { opacity: 1; }
  td.why { width: auto; }
  .team-row > summary { grid-template-columns: 1fr 44px 44px 50px; gap: 9px; padding: 14px 10px; }
  .workbar { display: none; }
  .team-name, .number { font-size: 13px; }
  .scope form { display: block; }
  .scope form button { margin-top: 10px; }
  .scope summary span { display: block; margin: 7px 0 0; font-size: 11px; overflow-wrap: anywhere; }
  .source-row { grid-template-columns: 1fr auto auto; gap: 8px; }
  .source-detail { grid-column: 1 / -1; grid-row: 2; }
  .source-row button { grid-column: 3; grid-row: 1; }
  .team-details { padding: 0 10px 12px; }
  .metrics-row { gap: 12px; font-size: 12px; }
  .metrics-row strong { min-width: 95px; }
}

/* Settings view */
#view-settings .check-filter { margin: 10px 0; }
#source-settings { display: grid; gap: 12px; }
.source-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 18px; }
.source-card.off { opacity: .75; }
.card-head { display: flex; align-items: center; gap: 14px; }
.card-title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title small { font-size: 12px; }
.source-card details { margin-top: 8px; }
.source-card summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 500; }
.source-form { display: grid; gap: 14px; margin-top: 12px; max-width: 720px; }
.source-form small { font-size: 12px; line-height: 1.5; }
.source-form small code.env { opacity: .75; }
.source-form label.inline { flex-direction: row; align-items: center; gap: 10px; }
.secret-field { display: grid; gap: 6px; }
.secret-meta { display: flex; align-items: center; gap: 10px; }
.secret-meta button { font-size: 12px; padding: 3px 12px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-result { margin: 0; font-size: 13px; min-height: 1em; }
.form-result.good { color: var(--green); }
.form-result.bad { color: var(--error); }
.source-form small .bad { color: var(--error); }
.warn { color: var(--amber); }
.badge.not_connected { background: var(--high); color: var(--muted); }
input.switch { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: var(--bar); position: relative; cursor: pointer; flex: none; transition: background-color .15s; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background-color .15s; }
input.switch:checked { background: var(--primary); }
input.switch:checked::after { transform: translateX(18px); background: var(--on-primary); }
input.switch:disabled { opacity: .5; cursor: default; }