/* The fallback values below are also served per account before first paint. */
html:root{--theme-bg:#F6F7F9;--theme-panel:#FFFFFF;--theme-panel2:#EFF0F3;--theme-line:#D9DCE2;--theme-fg:#25282F;--theme-muted:#5E6571;--theme-primary:#2458E8;--theme-secondary:#008B78;--theme-on:#FFFFFF;--theme-hover:#f3f3f4;--theme-edge:#bcbfc5;--theme-primaryHover:#2150d3;--theme-onHover:#FFFFFF;--theme-accent:#2458e8;--theme-selected:#e9eefd;--theme-secondaryTint:#e8f5f3;--theme-secondaryText:#037b6b;--theme-good:#147D3E;--theme-warn:#945D00;--theme-bad:#C62C40;--theme-info:#1962D1;--theme-purple:#7938C5;--theme-orange:#AC510A;--theme-goodTint:#eff6f1;--theme-warnTint:#f8f4ed;--theme-badTint:#fbf0f2;--theme-infoTint:#eff4fc;--theme-purpleTint:#f6f1fb;--theme-graphBg:#F6F7F9;--theme-graphEdge:#9BA8BA;--theme-graphMuted:#626D7C;--theme-scrim:#17203366;--theme-shadow:#17203318;--bg:#F6F7F9;--canvas:#F6F7F9;--panel:#FFFFFF;--paper:#FFFFFF;--panel2:#EFF0F3;--line:#D9DCE2;--fg:#25282F;--ink:#25282F;--muted:#5E6571;--accent:#2458e8;--accent2:#2458E8;--soft:#e8f5f3;--ok:#147D3E;--warn:#945D00;--bad:#C62C40;--danger:#C62C40;--purple:#7938C5;--surface-selected:#e9eefd;--border-selected:#2458e8;--scroll-thumb:#bcbfc5;--scroll-thumb-hover:#5E6571;--find:#945D00;--find-wash:#f8f4ed;--find-ring:#945D00;color-scheme:light}
@media(prefers-color-scheme:dark){html:root{--theme-bg:#0E1117;--theme-panel:#191E27;--theme-panel2:#121720;--theme-line:#343D4C;--theme-fg:#E9EAED;--theme-muted:#ADB1BA;--theme-primary:#477DFF;--theme-secondary:#00D6AE;--theme-on:#17191D;--theme-hover:#242932;--theme-edge:#515966;--theme-primaryHover:#5889ff;--theme-onHover:#17191D;--theme-accent:#5d8dff;--theme-selected:#212f4e;--theme-secondaryTint:#153b3d;--theme-secondaryText:#00d6ae;--theme-good:#3DDC84;--theme-warn:#FFC533;--theme-bad:#FF6266;--theme-info:#4C9FFF;--theme-purple:#B17CFF;--theme-orange:#FF9E42;--theme-goodTint:#1e3934;--theme-warnTint:#393529;--theme-badTint:#392830;--theme-infoTint:#203045;--theme-purpleTint:#2e2b45;--theme-graphBg:#0E1117;--theme-graphEdge:#46546A;--theme-graphMuted:#8996A8;--theme-scrim:#00000099;--theme-shadow:#00000055;--bg:#0E1117;--canvas:#0E1117;--panel:#191E27;--paper:#191E27;--panel2:#121720;--line:#343D4C;--fg:#E9EAED;--ink:#E9EAED;--muted:#ADB1BA;--accent:#5d8dff;--accent2:#477DFF;--soft:#153b3d;--ok:#3DDC84;--warn:#FFC533;--bad:#FF6266;--danger:#FF6266;--purple:#B17CFF;--surface-selected:#212f4e;--border-selected:#5d8dff;--scroll-thumb:#515966;--scroll-thumb-hover:#ADB1BA;--find:#FFC533;--find-wash:#393529;--find-ring:#FFC533;color-scheme:dark}}

html:root { accent-color:var(--theme-primary); }
body { background:var(--bg);color:var(--fg); }
.brand,.brand:hover { color:var(--fg); }
button.primary,.button.primary,.primary { background:var(--theme-primary);border-color:var(--theme-primary);color:var(--theme-on); }
button.primary:hover,.button.primary:hover,.primary:hover { background:var(--theme-primaryHover);border-color:var(--theme-primaryHover);color:var(--theme-onHover); }
:focus-visible { outline-color:var(--accent); }
.avatar { background:var(--theme-hover);color:var(--fg);border:1px solid var(--line); }
.cardItem,.mini,.node,.treeRow { background:var(--panel); }
.col { background:var(--panel2); }
.cardItem .k,.mini .k,.treeRow .k { color:var(--muted); }
.chip.agent { color:var(--theme-secondaryText);background:var(--theme-secondaryTint);border-color:transparent; }
.chip:not(.epic):not(.blocked):not(.pr):not(.agent):not(.claimed):not(.stale):not(.unblocks):not(.rework) { color:var(--muted);background:var(--theme-hover); }
.chip.blocked { background:var(--theme-badTint);color:var(--bad);border-color:var(--bad); }
.chip.pr { background:var(--theme-goodTint);color:var(--ok); }
.views button.on,.views button.on:hover { color:var(--accent);background:var(--surface-selected);border-color:var(--border-selected); }
.appearance-link { display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:6px;border:1px solid var(--line);border-radius:8px;color:var(--muted);text-decoration:none; }
.appearance-link:hover { color:var(--fg);background:var(--theme-hover); }
.appearance-link .uiIcon { width:19px;height:19px; }
.appearance-panel { grid-column:1 / -1;scroll-margin-top:24px; }
.appearance-panel>p { color:var(--muted);margin:6px 0 20px; }
.appearance-panel fieldset { padding:0;margin:0 0 22px;border:0;min-width:0; }
.appearance-panel legend { font-weight:600;font-size:14px;margin-bottom:10px; }
.appearance-modes { display:flex;gap:8px;flex-wrap:wrap; }
.appearance-modes button[aria-pressed=true],.appearance-presets button[aria-pressed=true] { border-color:var(--accent);background:var(--surface-selected);box-shadow:0 0 0 1px var(--accent); }
.appearance-presets { display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px; }
.appearance-presets button { justify-content:flex-start;text-align:left;gap:12px;min-height:65px; }
.appearance-presets small { display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:3px; }
.appearance-swatches { display:flex;gap:3px;flex:none; }
.appearance-swatches i { width:12px;height:28px;display:block;border:1px solid var(--line);border-radius:4px; }
.appearance-colors { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:12px; }
.appearance-colors label { display:grid;gap:6px;min-width:0; }
.appearance-color>span { display:flex;gap:8px; }
.appearance-color input[type=color] { width:44px;min-width:44px;padding:4px;cursor:pointer; }
.appearance-color input[type=text] { width:100%;font-family:ui-monospace,monospace;min-width:0; }
.appearance-advanced { margin-top:12px; }
.appearance-low-contrast { color:var(--bad); }
.appearance-actions { flex-wrap:wrap; }
.appearance-panel [data-theme-status] { min-height:1.5em; }
@media(max-width:700px) { .appearance-presets { grid-template-columns:1fr; }.appearance-actions .spacer {display:none}.appearance-actions button{flex:1;min-width:120px}.appearance-link{min-height:44px;min-width:44px} }

.count,.node .nWho {background:var(--theme-hover);color:var(--muted)}
.clearF:hover,body.zen .zenBtn {color:var(--theme-on)}
.cardItem .pick:checked::after {border-color:var(--theme-on)}
.boardTabs button.on {background:var(--surface-selected);color:var(--accent);border-color:var(--border-selected)}
@media(max-width:700px),(max-height:500px) and (pointer:coarse){#top .appearance-link{display:none}}

html:root {--surface-header:var(--theme-panel);--surface-overlay:var(--theme-panel);--surface-recessed:var(--theme-panel2);--surface-brand:var(--theme-panel);--surface-brand-hover:var(--theme-hover)}
.brand .praxis-logo {display:block;width:36px;height:36px;flex-shrink:0}
::selection {background:var(--theme-primary);color:var(--theme-on)}


/* Administration views use a themed popover, including the open options. */
button.adminMode,.app-header button.adminMode {
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  width:auto;min-height:36px;max-width:100%;padding:7px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--fg);
  font:500 12px/1.4 var(--font-ui);white-space:nowrap;box-shadow:0 1px 2px var(--theme-shadow);
}
.app-header button.adminMode {min-height:44px}
button.adminMode:hover,button.adminMode[aria-expanded=true] {background:var(--theme-hover);border-color:var(--theme-edge);color:var(--fg)}
button.adminMode:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.adminModeIcon {width:16px;height:16px;flex:none;color:var(--muted)}
.adminModeChevron {width:14px;height:14px;flex:none;margin-left:auto;color:var(--muted)}
[aria-expanded=true]>.adminModeChevron {transform:rotate(180deg)}
.adminModeMenu {
  position:fixed;inset:auto;margin:0;padding:6px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--fg);
  box-shadow:0 12px 36px var(--theme-shadow),0 2px 8px var(--theme-shadow);overflow:auto;
  font:400 13px/1.5 var(--font-ui);text-align:left;
}
.adminModeHeading {margin:0;padding:8px 10px 10px;color:var(--muted);font:500 11px/1.4 var(--font-ui)}
.adminModeMenu button.adminModeOption {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:66px;padding:11px 10px;margin:0;border:1px solid transparent;border-radius:8px;
  background:var(--panel);color:var(--fg);text-align:left;white-space:normal;box-shadow:none;
  font:400 13px/1.45 var(--font-ui);cursor:pointer;
}
.adminModeCopy {display:grid;gap:4px}
.adminModeCopy strong {font:600 13px/1.4 var(--font-ui);color:var(--fg)}
.adminModeCopy small {font:400 11px/1.5 var(--font-ui);color:var(--muted)}
.adminModeMenu button.adminModeOption[aria-checked=true] {background:var(--theme-hover)}
.adminModeMenu button.adminModeOption:hover {background:var(--theme-hover);border-color:var(--theme-edge)}
.adminModeMenu button.adminModeOption:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;background:var(--theme-hover)}
.adminModeCheck {width:18px;height:18px;flex:none;color:var(--accent);visibility:hidden}
[aria-checked=true]>.adminModeCheck {visibility:visible}
@media(max-width:700px) {
  .app-header .header-account button.adminMode {width:104px;gap:4px;padding:8px 7px;font-size:11px}
  .app-header .adminModeIcon {display:none}
  .mobileMenu button.adminMode {width:100%;min-height:44px;font-size:13px}
}
/* Native role fields elsewhere also need explicit popup colors on Windows. */
select option,select optgroup {background:var(--panel);color:var(--fg)}


/* Keep the meter prominent while freeing space for tickets. */
.meter .bar {height:33px}
.meter .seg {min-height:33px}
#top #mobileMenuBtn {display:inline-flex!important;align-items:center;justify-content:center}
#mobileMenuBtn::before {content:none!important}
#mobileMenu .mobileAppearance {gap:12px}
#mobileMenu #settingsBtn,#mobileMenu #logout {justify-content:flex-start;gap:12px}
@media(min-width:1101px) {
  #mobileMenu .mobileAccount,#mobileMenu .mobileOrganization,#mobileMenu .adminModeMount,
  #mobileFind,#mobileRefresh {display:none}
  #mobileMenu {inset:64px 14px auto auto;width:270px;max-height:calc(100dvh - 80px);overflow:auto}
}
.personal-settings {display:grid;gap:24px;min-width:0}
.personal-tabs {display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:0}
.personal-tabs [role=tab] {min-height:44px;padding:10px 18px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;background:transparent;color:var(--muted);font-size:14px}
.personal-tabs [role=tab]:hover {background:var(--theme-hover);color:var(--fg)}
.personal-tabs [role=tab][aria-selected=true] {border-bottom-color:var(--accent);background:var(--surface-selected);color:var(--fg);font-weight:700}
.personal-panel {min-width:0}
.personal-panel[hidden] {display:none!important}
.personal-panel>.panel {margin:0}
@media(max-width:700px) {
  .personal-settings {gap:18px}
  .personal-tabs {gap:2px}
  .personal-tabs [role=tab] {flex:1;padding:10px 8px;font-size:13px}
}

/* Semantic colors stay consistent across palettes; accents identify actions. */
.chip.epic,.chip.rework {color:var(--purple);background:var(--theme-purpleTint);border-color:color-mix(in srgb,var(--purple) 45%,transparent)}
.chip.unblocks,.chip.pr {color:var(--ok);background:var(--theme-goodTint);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.chip.blocked {border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.icon-epic,.icon-rework {color:var(--purple)}
.icon-story,.icon-unlock {color:var(--ok)}
.icon-bug,.icon-blocked {color:var(--bad)}
.icon-chore,.icon-clock {color:var(--warn)}
.mapView,.depsCanvas {background-color:var(--theme-graphBg)}
.depsCanvas {background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--theme-graphEdge) 24%,transparent) 1px,transparent 0)}
.mapTip,.mapPanel {background:var(--panel)}
.wires .wire {stroke:var(--theme-graphEdge);stroke-width:1.8}
.wires .wire.bad {stroke:var(--bad)}
.wires marker path {fill:var(--bad)}
.wires .flow {stroke:var(--theme-info);opacity:.9}
.wires .flow.bad {stroke:var(--bad)}
.wires .wire.hot {stroke:var(--accent);stroke-width:2.5}
.wires .flow.hot {stroke:var(--fg);opacity:1}
.node[data-readiness=ready] {border-left-color:var(--ok)}
.node[data-readiness=active] {border-left-color:var(--warn)}
.node[data-readiness=blocked] {border-left-color:var(--bad)}
.node[data-readiness=done],.node[data-readiness=other] {border-left-color:var(--theme-graphMuted)}

/* Cards retain a useful width even when there is only one workspace. */
.grid:has(>.project-card),.workspace-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));align-items:stretch}
.project-card {display:flex;flex-direction:column;min-width:0}
.project-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.project-card .project-actions > * {min-height:38px;padding:8px 12px;font-size:13px;white-space:nowrap}
.project-actions .primary {gap:10px;margin-right:auto}
.project-actions > button {background:transparent}
.project-actions > button:hover {background:var(--theme-hover)}
.workspace-card > .button {align-self:flex-start;margin-top:auto;gap:10px;min-height:40px}
.workspace-card > p {margin-bottom:12px}
.workspace-card .avatar {width:40px;height:40px;background:var(--theme-secondaryTint);color:var(--theme-secondaryText);border-color:transparent;font-weight:700}
@media(max-width:700px) {
 .project-card .project-actions > * {min-height:44px}
 .workspace-card > .button {min-height:44px}
}
@media(max-width:380px) {
 .project-actions {display:grid;grid-template-columns:1fr 1fr}
 .project-actions .primary {grid-column:1/-1;margin-right:0}
}

.edgeKey .ek.tree {background:var(--theme-graphEdge)}

/* Equal columns share spare space; wider presets scroll within the board. */
.board {--board-column-width:var(--board-column-fit,220px)}
.board[data-column-width=comfortable] {--board-column-width:max(var(--board-column-comfortable,315px),18.75%)}
.board[data-column-width=wide] {--board-column-width:max(var(--board-column-wide,378px),22.5%)}
#boardWidth {display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#boardWidth b {font-weight:600;color:var(--accent)}
@media(max-width:700px),(max-height:500px) and (pointer:coarse) {#boardWidth {display:none}}

/* Finder chrome follows the palette; board search matches keep their highlight. */
.finder {border-color:var(--theme-edge);box-shadow:0 20px 64px var(--theme-scrim),0 2px 8px var(--theme-shadow)}
.finderInput > span {display:inline-flex;color:var(--accent)}
.finderInput > span .uiIcon {width:20px;height:20px}
.finderInput input {background:var(--panel2);border-color:var(--line)}
.finderInput input:focus {border-color:transparent;outline:2px solid var(--accent);outline-offset:-2px}
.findResult:hover {background:var(--theme-hover);border-color:transparent}
.findResult.active {background:var(--surface-selected);border-color:transparent;outline:1px solid var(--border-selected);outline-offset:-1px}
.findPinned {background:var(--panel2)}
.findPinned b {color:var(--accent)}
.findPinned button {background:var(--panel);border-color:var(--line)}
.findPinned button:hover {background:var(--theme-hover);border-color:var(--theme-edge)}
#findBtn.locating {color:var(--accent);border-color:var(--border-selected);background:var(--surface-selected)}
@media(min-width:701px) {.finder {border-radius:14px}}