/*
 SITE STYLESHEET / Not A Software Factory default
 -----------------------------------------
 This is the COMPLETE stylesheet, not an override fragment. Edit the sections
 below or append overrides at the end. Later matching rules win in the cascade.
 The compact shell (section 11) intentionally refines the earlier sketch-style
 primitives used by the workflow diagram. Its :root block overrides core colours.

 Quick start: change --ink, --muted, --paper and --line in section 11, plus the
 semantic fills in section 01. Use .masthead/.brand for the header, .login-card
 for login, .sidebar/#navigation for navigation, .node.actor-agent/.actor-human
 for workflow actors, .terminal for command colours, and .breakdown-* for goals.
 Preserve [hidden], focus-visible, min-width:0, overflow and reduced-motion rules.
 Each section describes the visible surface it controls. Geometry is shared with
 JavaScript for diagrams; keep their positioning selectors intact.

 Admin edits save automatically after a pause. Restore default style returns to
 the bundled stylesheet. Recovery URL: /?default-style=1#page/settings
 External URLs remain subject to the server's content security policy.
 Maximum stored stylesheet: 256 KiB UTF-8. Empty custom CSS uses this default.
*/
/* 01 · DESIGN TOKENS — ink/muted text, paper surface, line borders; blue/green/yellow/red/purple semantic fills; hand/body/mono font families. */
:root {
  --ink: #233443;
  --muted: #596975;
  --paper: #fcfbf7;
  --line: #cfd4d2;
  --blue: #dcecf8;
  --green: #e0f0e2;
  --order-accent: #358963;
  --yellow: #fff0c9;
  --red: #fce1db;
  --purple: #eee7fa;
  --hand: "Chalkboard SE", "Comic Sans MS", cursive;
  --body: "Avenir Next", "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
  --font-scale: 1;
  --space-scale: .85;
}
/* 02 · BASE ELEMENTS — sizing, body, buttons, links, focus rings, hidden state, headings, inputs and code. */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: calc(14px * var(--font-scale));
  background: var(--paper);
  background-image: radial-gradient(#a7b8bc55 0.65px, transparent 0.65px);
  background-size: 20px 20px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 1.5px solid var(--ink);
  border-radius: 5px 8px 4px 7px;
  background: var(--paper);
  padding: 8px 12px;
  color: var(--ink);
}
button:hover {
  background: var(--blue);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
button[aria-busy="true"] {
  cursor: wait;
}
a {
  color: #205875;
  text-underline-offset: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #31759b;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--hand);
  font-weight: 600;
}
h1 {
  font-size: calc(44px * var(--font-scale));
  line-height: 1.2;
  letter-spacing: -1px;
}
h2 {
  font-size: calc(25px * var(--font-scale));
  margin-bottom: 12px;
}
h3 {
  font-size: calc(20px * var(--font-scale));
  margin-bottom: 8px;
}
p {
  line-height: 1.65;
}
small {
  color: var(--muted);
}
code,
pre {
  font-family: var(--mono);
  font-size: calc(12px * var(--font-scale));
}
code {
  overflow-wrap: anywhere;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
label {
  display: block;
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  margin: 18px 0 7px;
}
input,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #87979e;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
}
/* 03 · BRAND HEADER — product wordmark, monogram, connection state and top-bar actions. */
.masthead {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 34px;
  border-bottom: 1.5px solid var(--ink);
  background: #fcfbf7ed;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--hand);
  font-size: calc(28px * var(--font-scale));
  font-weight: bold;
}
.mark {
  border: 2px solid var(--ink);
  border-radius: 12% 22% 16% 20%;
  background: var(--blue);
  width: 49px;
  height: 49px;
  text-align: center;
  transform: rotate(-5deg);
  font-size: calc(32px * var(--font-scale));
}
.connection {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
}
.connection button {
  font-size: calc(11px * var(--font-scale));
  padding: 6px 9px;
}
.eyebrow {
  font: calc(10px * var(--font-scale)) var(--mono);
  letter-spacing: 1.6px;
  margin-bottom: 12px;
  color: var(--muted);
}
.sketch {
  border: 2px solid var(--ink);
  border-radius: 10px 17px 12px 9px;
  box-shadow: 2px 3px 0 #23344320;
}
.blue {
  background: var(--blue);
}
.green {
  background: var(--green);
}
.yellow {
  background: var(--yellow);
}
.purple {
  background: var(--purple);
}
.red {
  background: var(--red);
}
/* 04 · LOGIN — centred username/password card, primary action and authentication errors. */
.login-view {
  min-height: calc(100vh - 145px);
  max-width: 1200px;
  margin: auto;
  padding: 70px 35px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 90px;
  align-items: center;
}
.login-card {
  padding: 32px;
  background: #fffefa;
}
.primary {
  background: var(--ink);
  color: #fff;
  width: 100%;
  margin-top: 22px;
  padding: 12px;
}
.primary:hover {
  background: #375b70;
}
.primary span {
  float: right;
}
.login-card [role="alert"] {
  color: #9d2e24;
  font-size: calc(12px * var(--font-scale));
  margin-top: 14px;
}
/* 05 · GOAL NAVIGATION — application grid, project picker, sidebar goal entries and archive filter. */
.app {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  min-height: calc(100vh - 141px);
}
.sidebar {
  border-right: 1px solid var(--line);
  background: #f8f8f2df;
  display: flex;
  flex-direction: column;
}
.sidebar-head {
  padding: 27px 22px 14px;
}
.sidebar h2 {
  font-size: calc(23px * var(--font-scale));
}
.checkline {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 400;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
}
.checkline input {
  width: auto;
}
.goals {
  padding: 0 12px;
}
.goal {
  display: block;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  padding: 14px 10px;
  margin: 5px 0;
}
.goal.active {
  border-color: var(--ink);
  background: var(--blue);
  box-shadow: 2px 2px 0 #23344320;
}
.goal strong {
  display: block;
  line-height: 1.4;
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
}
.goal small {
  display: block;
  margin-top: 7px;
  font: calc(10px * var(--font-scale)) var(--mono);
}
.sidebar-foot {
  padding: 22px;
  margin-top: auto;
  font-size: calc(10px * var(--font-scale));
  color: var(--muted);
  border-top: 1px solid var(--line);
  line-height: 1.6;
}
.sidebar-foot code {
  display: block;
  margin-top: 8px;
}
.dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: #3c7856;
  border-radius: 50%;
  margin-right: 5px;
}
/* 06 · WORKSPACE — content padding, breadcrumbs, linked records, goal title and run selector. */
.workspace {
  padding: 30px 34px;
  min-width: 0;
}
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
  margin-bottom: 22px;
}
.link {
  border: 0;
  background: none;
  padding: 0;
  color: #205875;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 2px;
  text-align: left;
  overflow-wrap: anywhere;
}
.link:hover {
  background: var(--blue);
}
.title-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
.title-row h1 {
  font-size: calc(34px * var(--font-scale));
  margin-bottom: 8px;
}
.title-row p {
  color: var(--muted);
  max-width: 680px;
  font-size: calc(13px * var(--font-scale));
}
.run-choice {
  min-width: 180px;
  max-width: 260px;
}
.run-choice label {
  margin-top: 0;
}
/* 07 · STATUS & TABS — semantic status colours, summary strip, Journey/Evidence/History/Context tabs. */
.badge {
  display: inline-flex;
  font: calc(10px * var(--font-scale)) var(--mono);
  border: 1px solid #566973;
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
  gap: 4px;
  color: var(--ink);
}
.badge.running,
.badge.accepted,
.badge.succeeded,
.badge.passed,
.badge.enabled {
  background: var(--green);
}
.badge.pending,
.badge.suspended,
.badge.waiting,
.badge.waitlist {
  background: var(--yellow);
}
.badge.failed,
.badge.rejected,
.badge.cancelled,
.badge.expired,
.badge.disabled {
  background: var(--red);
}
.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 20px 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.summary-strip > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.summary-strip small {
  font-size: calc(10px * var(--font-scale));
}
.summary-strip strong {
  font-size: calc(12px * var(--font-scale));
}
.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
}
.tabs button {
  border: 0;
  border-radius: 0;
  padding: 8px 1px 11px;
  background: none;
  font-size: calc(12px * var(--font-scale));
}
.tabs button[aria-pressed="true"] {
  border-bottom: 3px solid var(--ink);
  font-weight: bold;
}
/* 08 · WORKFLOW MAP — phase headings, actor legend, SVG connectors, rounded operation cards and decision edges. */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 12px;
  gap: 15px;
}
.section-title h2 {
  font-size: calc(23px * var(--font-scale));
  margin: 0;
}
.legend {
  font: calc(10px * var(--font-scale)) var(--mono);
  display: flex;
  gap: 13px;
  color: var(--muted);
}
.legend span:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  margin-right: 5px;
}
.legend .human:before {
  background: var(--yellow);
}
.legend .agent:before {
  background: var(--green);
}
.legend .system:before {
  background: var(--blue);
}
.map-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  background: #ffffff6e;
  border-radius: 9px;
}
.workflow-map {
  position: relative;
  min-height: 230px;
}
.workflow-map svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.workflow-map path {
  fill: none;
  stroke: #596c7b;
  stroke-width: 1.7;
}
.workflow-map path.failure {
  stroke: #b27e72;
  stroke-dasharray: 4 5;
}
.node {
  position: absolute;
  width: 140px;
  min-height: 102px;
  text-align: left;
  border-width: 1.7px;
  padding: 14px 13px;
  background: var(--blue);
  z-index: 1;
  box-shadow: 2px 3px 0 #23344312;
  transform: rotate(-0.7deg);
}
.node.actor-agent {
  background: var(--green);
  transform: rotate(0.7deg);
}
.node.actor-human {
  background: var(--yellow);
}
.node.current {
  outline: 3px solid #417389;
  outline-offset: 4px;
}
.node strong {
  display: block;
  font: calc(20px * var(--font-scale)) var(--hand);
  margin: 6px 0;
}
.node small {
  display: block;
  font: calc(10px * var(--font-scale)) var(--mono);
  color: #344e60;
}
.node .node-state {
  font-size: calc(9px * var(--font-scale));
  margin-top: 8px;
}
.edge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  font-size: calc(11px * var(--font-scale));
}
.edge-list button {
  border: 1px dashed #acb6b6;
  background: #fffef9;
  padding: 7px 10px;
}
/* 09 · RUN DETAIL — next-action panels, lineage links, role cards, empty states and notices. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
.panel {
  padding: 19px 20px;
  background: #fffefae8;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.panel p {
  font-size: calc(12px * var(--font-scale));
  color: var(--muted);
  margin-bottom: 10px;
}
.attention {
  background: var(--yellow);
  border-color: #c6ad6d;
}
.attention h3 {
  font-size: calc(21px * var(--font-scale));
}
.lineage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: calc(12px * var(--font-scale));
}
.lineage .lineage-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 6px 10px 5px 7px;
  background: var(--purple);
}
.lineage small {
  font: calc(9px * var(--font-scale)) var(--mono);
}
.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}
.role-card {
  padding: 14px;
  border: 1px solid #a0b5aa;
  border-radius: 7px;
  background: var(--green);
  min-width: 0;
}
.role-card strong {
  display: block;
  font: calc(17px * var(--font-scale)) var(--hand);
}
.role-card small {
  display: block;
  font-size: calc(11px * var(--font-scale));
  margin-top: 6px;
  line-height: 1.5;
}
.role-card.human {
  background: var(--yellow);
}
.role-card.system {
  background: var(--blue);
}
.empty {
  padding: 60px 20px;
  text-align: center;
  max-width: 650px;
  margin: 30px auto;
  color: var(--muted);
}
.empty h2 {
  font-size: calc(34px * var(--font-scale));
  color: var(--ink);
}
.empty code {
  display: block;
  background: #fffefa;
  border: 1px dashed var(--line);
  padding: 15px;
  color: var(--ink);
  margin-top: 20px;
}
.notice {
  padding: 10px 14px;
  background: var(--yellow);
  border: 1px solid #c6ad6d;
  margin-bottom: 15px;
  font-size: calc(12px * var(--font-scale));
}
/* 10 · EVIDENCE & HISTORY — record rows, events, structured context values and record inspector. */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.record-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  background: #fffefa;
  padding: 14px;
  border-radius: 7px;
  font-size: calc(12px * var(--font-scale));
}
.record-row h3 {
  font: calc(14px * var(--font-scale)) var(--body);
  margin: 0 0 6px;
}
.record-row p {
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
  margin-bottom: 6px;
}
.record-row time {
  font: calc(10px * var(--font-scale)) var(--mono);
  color: var(--muted);
}
.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid #4f6471;
  border-radius: 50%;
  background: var(--blue);
}
.subtle {
  border: 0;
  background: transparent;
  font-size: calc(11px * var(--font-scale));
  padding: 12px;
  text-decoration: underline;
}
.inspector {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(500px, 100vw);
  background: #fffef9;
  z-index: 3;
  border-left: 2px solid var(--ink);
  box-shadow: -10px 0 40px #23344317;
  overflow: auto;
  padding: 24px;
}
.inspector-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.inspector-head h2 {
  font-size: calc(23px * var(--font-scale));
  overflow-wrap: anywhere;
}
.inspector-head button {
  height: 34px;
  font-size: calc(22px * var(--font-scale));
  line-height: 16px;
}
.record-fields {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
  gap: 8px 16px;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.record-fields dt {
  color: var(--muted);
}
.record-fields dd {
  margin: 0;
  white-space: pre-wrap;
}
.prompt-layer {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.prompt-layer h5 {
  margin: 0 0 8px;
}
.harness-prompt {
  max-height: 32rem;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.field {
  margin: 8px 0;
}
.field-label {
  display: block;
  font: calc(10px * var(--font-scale)) var(--mono);
  color: var(--muted);
  margin-bottom: 3px;
}
.raw-data {
  margin-top: 24px;
}
.skip {
  position: fixed;
  top: -100px;
  left: 10px;
  z-index: 10;
  padding: 12px;
  background: white;
}
.skip:focus {
  top: 10px;
}
.muted {
  color: var(--muted);
}
.no-margin {
  margin: 0;
}
.check-results {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.check-results code {
  background: #eef2f1;
  padding: 8px;
  display: block;
  margin: 8px 0;
}
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.record-actions button {
  font-size: calc(11px * var(--font-scale));
}
.history-note {
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
  margin: 12px 0;
}
.spinner {
  padding: 50px;
  font: calc(22px * var(--font-scale)) var(--hand);
  color: var(--muted);
}
/* 13 · RESPONSIVE WORKSPACE — desktop spacing and mobile horizontal navigation; prevent document-level scrolling. */
@media (min-width: 1550px) {
  .workspace {
    padding: 36px 55px;
  }
  .app {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}
@media (max-width: 950px) {
  .masthead {
    padding: 16px 20px;
  }
  .brand {
    font-size: calc(23px * var(--font-scale));
  }
  .workspace {
    padding: 25px 20px;
  }
  .app {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .title-row {
    display: block;
  }
  .run-choice {
    max-width: none;
    margin: 16px 0;
  }
  .login-view {
    gap: 35px;
  }
  .section-title {
    align-items: start;
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  .masthead {
    align-items: start;
    flex-wrap: wrap;
  }
  .connection {
    width: 100%;
    justify-content: flex-end;
  }
  .app {
    display: block;
  }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-head {
    padding: 20px;
  }
  .goals {
    display: flex;
    overflow: auto;
    gap: 8px;
    padding: 0 20px 14px;
  }
  .goal {
    min-width: 180px;
    max-width: 240px;
  }
  .sidebar-foot {
    display: none;
  }
  .workspace {
    padding: 22px 16px;
  }
  .title-row h1 {
    font-size: calc(29px * var(--font-scale));
  }
  .tabs {
    gap: 18px;
  }
  .login-view {
    display: block;
    padding: 30px 22px;
  }
  .login-card {
    padding: 25px;
  }
  .summary-strip {
    gap: 14px;
  }
  .inspector {
    width: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .login-card {
    animation: arrive 0.35s ease-out;
  }
  @keyframes arrive {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* 11 · APPLICATION SHELL OVERRIDES — final compact layout and typography. These later rules override the base/diagram primitives above; preserve viewport sizing and independent scrolling.
*/
/* Fixed application shell: only the navigation, workspace and terminal scroll. */
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #faf9f6;
  background-image: none;
}
:root {
  --ink: #292c2e;
  --muted: #6d7276;
  --line: #e1e2df;
  --paper: #faf9f6;
  --body: "Avenir Next", "Segoe UI", sans-serif;
}
.masthead {
  flex: 0 0 64px;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #faf9f6;
}
.brand {
  gap: 10px;
  font-family: var(--body);
  font-size: calc(16px * var(--font-scale));
  font-weight: 600;
  letter-spacing: -0.4px;
}
.mark {
  width: 30px;
  height: 32px;
  font-family: var(--hand);
  font-size: calc(21px * var(--font-scale));
  border-width: 1.5px;
  background: #e6eee9;
}
.connection {
  font-size: calc(12px * var(--font-scale));
  gap: 14px;
}
.connection button {
  font-size: calc(12px * var(--font-scale));
  border-color: transparent;
  background: transparent;
}
.connection button:hover {
  background: #eeede8;
}
button {
  border: 1px solid #d5d8d5;
  border-radius: 7px;
  box-shadow: none;
}
button:hover {
  background: #eaece7;
}
input,
select {
  border-color: #d0d4cf;
  border-radius: 7px;
}
h1,
h2,
h3 {
  font-family: var(--body);
}
h1 {
  font-size: calc(32px * var(--font-scale));
  letter-spacing: -1.1px;
  font-weight: 600;
}
h2 {
  font-size: calc(21px * var(--font-scale));
  letter-spacing: -0.45px;
}
h3 {
  font-size: calc(17px * var(--font-scale));
}
.login-view {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.login-card {
  width: 320px;
  max-width: 100%;
  padding: 12px 0 36px;
  border: 0;
  background: none;
  box-shadow: none;
}
.login-card label {
  font-size: calc(13px * var(--font-scale));
  font-weight: 500;
}
.login-card input {
  padding: 12px;
  background: #fff;
}
.login-card .primary {
  border-color: var(--ink);
  border-radius: 8px;
  margin-top: 26px;
}
.login-card a {
  display: block;
  text-align: center;
  font-size: calc(13px * var(--font-scale));
  color: var(--muted);
}
.public-landing { width:min(640px,100%); padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--surface,var(--paper)); box-shadow:0 16px 45px #20312916; }
.public-landing[hidden], .login-card[hidden], .login-editorial[hidden], .registration-consent[hidden], .sso-options[hidden] { display:none; }
.public-landing h1 { max-width:12ch; font-size:clamp(35px,5vw,64px); line-height:1.05; text-wrap:balance; }
.public-landing > p:not(.login-editorial-kicker) { max-width:48ch; line-height:1.55; }
#waitlist-notice .primary { width:auto; margin:0; color:#fff; }
.login-card .public-legal-links { display:flex; justify-content:center; gap:18px; margin:20px 0 0; font-size:calc(12px * var(--font-scale)); }
.login-card .public-legal-links a { display:inline; font-size:inherit; }
.login-view[data-public-view="waitlist"] { grid-template-columns:1fr; }
.login-view[data-public-view="waitlist"] #waitlist-notice { margin:auto; }
.user-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.user-filters button { min-width:80px; padding:8px 14px; border-radius:999px; }
.user-filters button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.user-origin { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:650; vertical-align:middle; }
.user-origin svg, .user-origin img { display:block; width:18px; height:18px; flex:none; object-fit:contain; }
.user-origin[data-origin="github"] img { width:22px; height:22px; margin:-2px; }
.user-origin[data-origin="apple"] img { width:28px; height:28px; margin:-5px; }
.registration-consent { display:grid; gap:8px; margin:18px 0 0; padding:12px; border:1px solid var(--line); border-radius:8px; }
.registration-consent legend { padding:0 5px; font-weight:700; font-size:calc(12px * var(--font-scale)); }
.login-card .registration-consent label { display:block; line-height:1.35; font-size:calc(12px * var(--font-scale)); }
.registration-consent input { width:auto; margin-right:6px; vertical-align:middle; }
.login-card .registration-consent a { display:inline; text-align:inherit; text-decoration:underline; color:var(--ink); font-size:inherit; }
.sso-options { display:grid; gap:7px; margin-top:18px; }
.sso-options::before { content:"OR CONTINUE WITH"; display:block; margin:3px 0 4px; color:var(--muted); font-size:calc(10px * var(--font-scale)); font-weight:800; letter-spacing:.12em; text-align:center; }
@font-face { font-family:"SSO Google Sans"; src:url("/assets/sso-google-sans.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"SSO Mona Sans"; src:url("/assets/sso-mona.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
.sso-options .sso-button { display:grid; grid-template-columns:32px 1fr 32px; align-items:center; min-height:44px; padding:4px 12px; border:1px solid #747775; border-radius:8px; background:#fff; color:#1f1f1f; font-size:calc(14px * var(--font-scale)); font-weight:500; line-height:20px; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.sso-options .sso-button img { display:block; width:24px; height:24px; object-fit:contain; }
.sso-options .sso-button span { text-align:center; }
.sso-options .sso-button-google { font-family:"SSO Google Sans", Arial, sans-serif; }
.sso-options .sso-button-github { font-family:"SSO Mona Sans", sans-serif; }
.sso-options .sso-button-apple { background:#000; border-color:#000; color:#fff; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.sso-options .sso-button-apple img { width:44px; height:44px; max-width:none; margin:-4px 0 -4px -10px; }
.sso-options .sso-button:hover { border-color:#1f1f1f; background:#f4f5f4; box-shadow:0 1px 3px #00000020; }
.sso-options .sso-button-apple:hover { background:#222; border-color:#222; }
.sso-options .sso-button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
.sso-options .sso-button:disabled { cursor:wait; opacity:.65; }
.legal-studio { margin-top:18px; }
.legal-studio form { display:grid; gap:10px; }
.legal-studio textarea { width:100%; min-height:180px; resize:vertical; font:calc(12px * var(--font-scale))/1.5 ui-monospace,SFMono-Regular,monospace; }
.legal-identity { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.legal-identity input { width:100%; }
#legal-version-history { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
#legal-version-history a { color:var(--ink); }
#legal-version-history span { color:var(--muted); font-size:calc(11px * var(--font-scale)); }
#waitlist-notice .primary { display:inline-flex; min-height:42px; align-items:center; padding:9px 18px; border-radius:8px; text-decoration:none; }
.app {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: 164px minmax(0, 1fr);
}
.sidebar {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f0f0eb;
  padding-top: 8px;
}
#navigation {
  padding: 0 12px 12px;
}
.sidebar .nav-label {
  margin: 20px 10px 8px;
  font: calc(11px * var(--font-scale)) var(--body);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.project-description {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefix-confirm-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #17262bc2;
  animation: finder-appear 140ms ease-out;
}
.prefix-confirm {
  width: min(440px, 100%);
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 14px 19px 13px 17px;
  background: var(--paper);
  box-shadow: 5px 6px 0 #17262b30;
}
.prefix-confirm h2 { margin: 0 0 12px; }
.prefix-confirm p { line-height: 1.6; }
.prefix-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}
.subscription-card { margin: 22px 0; padding: 17px 19px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.subscription-card h3 { margin: 0 0 8px; }
.subscription-card p { margin: 7px 0; }
#profile-username input { width: min(100%, 360px); font: inherit; }
#profile-username small { display: block; font-size: .72em; font-weight: 400; color: var(--muted); }
#profile-username input[aria-invalid="true"] { border-color: #ba5045; outline-color: #ba5045; }
#profile-username input[aria-invalid="true"] + small { color: #ba5045; }
#navigation a {
  color: #525859;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  font-size: calc(13px * var(--font-scale));
  border-radius: 7px;
  margin: 2px 0;
}
#navigation a:hover {
  background: #e5e6e0;
}
#navigation a[aria-current] {
  color: #203c32;
  background: #dfe7df;
  font-weight: 600;
}
.sidebar-head {
  padding: 0 20px 8px;
  border-top: 1px solid var(--line);
}
.sidebar-foot {
  padding: 18px 22px;
  border: 0;
}
.goals {
  padding: 0 10px;
}
.goal {
  padding: 10px;
  border-radius: 7px;
}
.goal.active {
  border-color: transparent;
  background: #e0e8df;
  box-shadow: none;
}
.goal small {
  font-family: var(--body);
  margin-top: 4px;
}
.workarea {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.workspace {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 32px 40px;
  scroll-padding: 24px;
}
.title-row h1 {
  font-size: calc(32px * var(--font-scale));
}
.title-row > div > p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
}
.eyebrow {
  font-family: var(--body);
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1.1px;
  font-weight: 600;
}
.tabs {
  gap: 26px;
}
.tabs button {
  font-family: var(--body);
  font-size: calc(13px * var(--font-scale));
}
.panel {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}
.empty {
  background: transparent;
  border: 0;
  padding: 60px 24px;
}
.empty h2 {
  font-size: calc(26px * var(--font-scale));
  font-weight: 500;
}
.empty p {
  max-width: 520px;
  margin: 0 auto 18px;
  color: var(--muted);
}
.page-heading {
  margin-bottom: 26px;
}
.page-heading h1 {
  margin-bottom: 20px;
}
.page-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: calc(12px * var(--font-scale));
}
.record-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf9;
}
.list-order-cell {
  width: 48px;
  padding: 6px 10px;
  text-align: right;
}
.list-order-handle {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: calc(17px * var(--font-scale));
  line-height: 1;
  padding: 8px;
  cursor: grab;
  touch-action: none;
}
.list-order-handle:hover, .list-order-handle:focus-visible { color: var(--ink); }
.list-order-handle:active { cursor: grabbing; }
.list-order-active, .list-order-active * { cursor: grabbing !important; user-select: none !important; }
.list-order-placeholder { opacity: .3; outline: 2px dashed var(--order-accent); outline-offset: -2px; background: var(--green); }
.list-order-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid var(--order-accent);
  border-radius: 10px;
  background: var(--surface-raised, var(--paper));
  box-shadow: 0 20px 42px #172b3438, 0 4px 10px #172b3426;
  transform-origin: 90% center;
}
.list-order-ghost td { border-top: 0; background: var(--surface-raised, var(--paper)); }
html[data-theme="dark"] .list-order-ghost {
  box-shadow: 0 24px 54px #000b, 0 0 0 2px var(--order-accent);
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: calc(12px * var(--font-scale));
}
th {
  color: var(--muted);
  font-weight: 500;
  background: #f4f4ef;
  padding: 12px 16px;
  white-space: nowrap;
}
th[tabindex="0"] { cursor: pointer; }
th[tabindex="0"]:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
td {
  border-top: 1px solid var(--line);
  padding: 17px 16px;
  line-height: 1.6;
}
td small {
  display: block;
}
td:first-child .link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-align: left;
}
tbody tr:hover {
  background: #f5f6ef;
}
.settings-panel {
  padding: 28px;
  max-width: 660px;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.settings-panel h2 {
  font-size: calc(18px * var(--font-scale));
}
.settings-panel p {
  font-size: calc(13px * var(--font-scale));
  color: var(--muted);
}
.settings-panel .checkline {
  font-size: calc(14px * var(--font-scale));
  margin: 26px 0;
  color: var(--ink);
}
.inspector {
  top: 64px;
  height: auto;
  border-color: var(--line);
  background: #fffefb;
  box-shadow: -16px 0 50px #24302810;
}
/* 12 · TERMINAL — full-screen command overlay, transcript and prompt. */
.terminal {
  position: fixed;
  z-index: 11000;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #202624;
  color: #e1e9e2;
  border-top: 1px solid #3b4640;
}
.terminal-head {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-bottom: 1px solid #39413d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(12px * var(--font-scale));
}
.terminal-head strong {
  font-weight: 500;
}
.terminal-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.terminal button {
  color: #c0ccc3;
  background: transparent;
  border: 0;
  padding: 4px 7px;
  font-size: calc(11px * var(--font-scale));
  cursor: pointer;
}
.terminal button:hover {
  background: #39433d;
  color: #fff;
}
.terminal-output {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 20px;
  font: calc(12px * var(--font-scale)) var(--mono);
  overscroll-behavior: contain;
}
.terminal-output pre {
  margin: 0 0 12px;
  font-size: calc(12px * var(--font-scale));
  line-height: 1.6;
}
.terminal .muted {
  color: #96a89a;
  font-size: calc(12px * var(--font-scale));
}
.terminal-command {
  color: #a2caaa;
}
.terminal-error {
  color: #ffada2;
}
.terminal-output a {
  color: #b5d2e4;
  display: block;
  margin-bottom: 12px;
}
.terminal-prompt {
  padding: 8px 18px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.terminal-prompt label {
  margin: 0;
  color: #a2caaa;
  font: calc(18px * var(--font-scale)) var(--mono);
}
.terminal-prompt input {
  padding: 7px;
  background: transparent;
  color: #e1e9e2;
  border: 0;
  box-shadow: none;
  font: calc(12px * var(--font-scale)) var(--mono);
  min-width: 0;
}
.terminal-prompt input::placeholder {
  color: #99a59c;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1550px) {
  .workspace {
    padding: 36px 60px;
  }
}
@media (max-width: 950px) {
  .app {
    grid-template-columns: 195px minmax(0, 1fr);
  }
  .workspace {
    padding: 24px;
  }
}
@media (max-width: 650px) {
  .masthead {
    padding: 10px 14px;
    flex: 0 0 auto;
    min-height: 64px;
    gap: 8px;
    align-items: center;
  }
  .brand {
    font-size: calc(14px * var(--font-scale));
  }
  .connection {
    width: auto;
    margin-left: auto;
    gap: 4px;
  }
  #connection {
    display: none;
  }
  .connection button {
    padding: 6px;
    font-size: calc(11px * var(--font-scale));
  }
  .app {
    display: flex;
    flex-direction: column;
  }
  .sidebar {
    flex: 0 0 auto;
    max-height: 160px;
    overflow-y: auto;
    padding-top: 0;
  }
  #navigation {
    display: flex;
    overflow-x: auto;
    padding: 7px 10px;
    gap: 4px;
    flex-shrink: 0;
  }
  #navigation a {
    flex-shrink: 0;
    padding: 6px 10px;
  }
  .sidebar .nav-label {
    display: none;
  }
  .sidebar-head {
    padding: 0 12px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sidebar-head label {
    margin: 0;
    white-space: nowrap;
  }
  .sidebar-head select {
    padding: 6px;
    width: auto;
    min-width: 0;
    flex: 1;
  }
  .sidebar-head .checkline {
    display: none;
  }
  .goals {
    padding: 0 10px 5px;
  }
  .goal {
    min-width: 150px;
    padding: 8px;
    margin: 0;
  }
  .goal small {
    display: none;
  }
  .workarea {
    flex: 1;
  }
  .workspace {
    padding: 22px 16px;
  }
  .title-row h1 {
    font-size: calc(26px * var(--font-scale));
  }
  .empty {
    padding: 32px 8px;
  }
  .page-tools {
    align-items: start;
  }
  .page-tools button {
    font-size: calc(11px * var(--font-scale));
  }
  .terminal-head {
    padding: 7px 10px;
  }
  .terminal-output {
    padding: 10px 14px;
  }
}
@media (max-height: 500px) {
  .login-view {
    align-items: flex-start;
  }
}

/* 14 · TERMINAL OVERLAY — covers the viewport without changing workspace geometry. */
.terminal {
  opacity: 0;
  transform: translateY(-16px);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms ease-out;
  box-shadow: 0 12px 40px #192a2240;
}
.terminal[data-open="true"] {
  opacity: 1;
  transform: none;
}
.terminal-head {
  min-height: 48px;
  padding: 6px 18px;
}
.terminal-head button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: calc(20px * var(--font-scale));
}
@media (prefers-reduced-motion: reduce) {
  .terminal { transition: none; }
}

/* A first sign-in edition appears once per account and keeps the next action clear. */
.first-welcome {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 16px;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(5px);
}
.first-welcome-sheet {
  width: min(780px, 100%);
  padding: clamp(18px, 2.5vw, 30px);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--ink) 24%, transparent);
}
.first-welcome-rule {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid currentColor;
  font: 700 calc(10px * var(--font-scale)) var(--mono);
  letter-spacing: .12em;
}
.first-welcome-kicker {
  margin: 20px 0 8px;
  color: #7f5631;
  font: 700 calc(11px * var(--font-scale)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.first-welcome h1 {
  max-width: 680px;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.first-welcome-sheet > p:not(.first-welcome-kicker) {
  max-width: 580px;
  line-height: 1.6;
}
.first-welcome-username { max-width:440px; margin:14px 0 0; padding:11px 14px; border:1px solid var(--line); background:var(--surface, var(--paper)); }
.first-welcome-username label { display:block; margin-bottom:7px; font:700 calc(11px * var(--font-scale)) var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.first-welcome-username select { display:block; width:100%; min-height:42px; }
.first-welcome-username p { margin:8px 0 0; color:var(--muted); font-size:calc(11px * var(--font-scale)); line-height:1.4; }
.first-welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  font-size: calc(12px * var(--font-scale));
}
.first-welcome-steps span { display: flex; align-items: center; gap: 10px; }
.first-welcome-steps b { color: #9b6135; font: 700 calc(13px * var(--font-scale)) var(--mono); }
.first-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.first-welcome-actions button:first-child { background: var(--ink); color: var(--paper); }
.first-welcome-actions button:first-child:hover { filter: brightness(1.18); }
.first-welcome-hint { margin-top: 16px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.first-welcome-hint kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); }
.first-welcome-error { color: #a23527; }
@media (max-width: 620px) {
  .first-welcome { padding: 18px; }
  .first-welcome-rule { flex-direction: column; gap: 4px; }
  .first-welcome-steps { grid-template-columns: 1fr; gap: 12px; }
}
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d0d4cf;
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font: calc(12px * var(--font-scale)) var(--mono);
  line-height: 1.6;
  resize: vertical;
}
textarea:focus-visible {
  outline: 3px solid #31759b;
  outline-offset: 3px;
}
.form-note {
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  margin-top: 18px;
}
#create-error {
  color: #9d2e24;
  font-size: calc(13px * var(--font-scale));
  margin-top: 18px;
}
.new-resource {
  background: #e2ebe2;
  border-color: #c6d5c8;
  white-space: nowrap;
}
.new-goal {
  margin: 0 12px 12px;
  font-size: calc(12px * var(--font-scale));
  background: #e2ebe2;
}
#setup-results {
  margin-top: 24px;
}
#setup-form > button {
  background: var(--ink);
  color: white;
}
.setup-danger {
  max-width: 740px;
  margin-top: 32px;
  padding: 20px 24px 22px;
  border: 2px solid #a8463b;
  border-radius: 12px 15px 11px 14px;
  background: var(--red);
}
.setup-danger .eyebrow {
  color: #8b332c;
  margin: 0 0 7px;
}
.setup-danger h2 {
  margin: 0 0 8px;
}
.setup-danger p {
  max-width: 65ch;
  line-height: 1.5;
}
.setup-danger-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.setup-danger-actions label {
  flex-basis: 100%;
  font-weight: 600;
}
.setup-danger-actions input {
  width: min(260px, 100%);
}
.setup-danger-actions button {
  border-color: #842f28;
  background: #842f28;
  color: white;
}
.setup-danger-actions button:not(:disabled):hover {
  background: #69251f;
}
#reset-status {
  min-height: 1.5em;
  margin-bottom: 0;
}
@media (max-width: 650px) {
  .new-goal {
    margin: 0 12px 8px;
    align-self: start;
  }
}

/* BRANDING STUDIO — Admin Settings name/registration cards, full-source CSS
   editor, autosave status and sandboxed login/workspace preview. The dark editor
   is deliberately distinct from the page it edits. Recovery mode uses this
   bundled stylesheet even if a custom stylesheet hides admin controls. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px;
}
.settings-grid .settings-panel {
  margin: 0;
  max-width: none;
}
.sso-setup {
  max-width: 1200px;
  margin-top: 20px;
  padding: clamp(18px, 2vw, 30px);
  background: var(--surface, #fffdfa);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sso-setup[hidden] { display: none; }
.sso-setup-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sso-setup-intro h2 { margin: 2px 0 8px; }
.sso-setup-intro p { max-width: 650px; }
.sso-origin-status {
  max-width: 390px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.sso-origin-status small { display: block; margin-top: 3px; font-size: calc(11px * var(--font-scale)); }
.sso-origin-status.ready, .sso-readiness.ready { color: #216246; background: #e7f3e9; }
.sso-origin-status.pending, .sso-readiness.pending { color: #865719; background: #fff1d5; }
.sso-setup-common {
  margin: 16px 0 22px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--paper, #fffdfa) 82%, var(--line));
  border-radius: 7px;
}
.sso-setup-common h3 { margin: 0 0 8px; }
.sso-setup-common ol { margin: 0 0 12px; padding-left: 22px; }
.sso-setup-common li { margin: 5px 0; }
.sso-setup-common p { margin: 0; }
.sso-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sso-provider {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper, #fffdfa);
}
.sso-provider-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sso-provider-heading h3 { margin: 0; }
.sso-readiness { padding: 4px 8px; border-radius: 999px; font-size: calc(11px * var(--font-scale)); font-weight: 700; }
.sso-provider > p { margin: 10px 0; font-size: calc(13px * var(--font-scale)); line-height: 1.5; }
.sso-provider dl { margin: 16px 0; }
.sso-field { padding: 9px 0; border-top: 1px solid var(--line); }
.sso-field dt { margin-bottom: 5px; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.sso-field dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.sso-field code { overflow-wrap: anywhere; font-size: calc(12px * var(--font-scale)); }
.sso-field button { margin: 0; padding: 3px 7px; font-size: calc(11px * var(--font-scale)); }
.sso-field small { width: 100%; color: var(--muted); }
.sso-missing code { display: inline-block; margin: 2px; overflow-wrap: anywhere; }
@media (max-width: 1050px) { .sso-provider-grid { grid-template-columns: 1fr; } }
.branding-studio {
  margin-top: 28px;
  max-width: 1200px;
}
.studio-heading,
.preview-heading,
.editor-caption,
.editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.studio-heading {
  margin-bottom: 18px;
}
.studio-heading h2 {
  margin-bottom: 8px;
}
.studio-heading p {
  margin-bottom: 0;
}
.style-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}
.css-editor {
  border: 1px solid #293e39;
  border-radius: 12px;
  overflow: hidden;
  background: #182622;
  box-shadow: 0 8px 24px #19372c12;
}
.editor-caption,
.editor-footer {
  padding: 12px 16px;
  color: #b3c6bb;
  background: #20332c;
  font: calc(11px * var(--font-scale)) var(--mono);
}
.editor-caption {
  border-bottom: 1px solid #34473f;
}
#site-css {
  display: block;
  width: 100%;
  min-height: 520px;
  resize: vertical;
  padding: 18px;
  border: 0;
  border-radius: 0;
  outline-offset: -3px;
  margin: 0;
  background: #182622;
  color: #dce9df;
  font: calc(12px * var(--font-scale))/1.75 var(--mono);
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.editor-footer {
  align-items: flex-start;
}
#css-result {
  max-width: 75%;
  line-height: 1.6;
}
.style-preview {
  min-width: 0;
}
.preview-heading {
  margin-bottom: 10px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
}
.preview-heading select {
  width: auto;
  font-size: calc(12px * var(--font-scale));
}
#style-preview {
  display: block;
  width: 100%;
  height: 430px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.style-preview p,
.style-preview a {
  font-size: calc(12px * var(--font-scale));
  line-height: 1.65;
}
.style-preview p {
  margin: 12px 0 8px;
  color: var(--muted);
}
#product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand {
  min-width: 0;
}
.mark {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .style-workbench,
  .settings-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  .studio-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  #site-css {
    min-height: 360px;
  }
}

/* 15. Goal breakdown: nested cards, dependency paths, workflow responsibility.
   Human = amber, agent = green, system = blue; text also names every actor.
   The diagram scrolls inside the panel; the browser page remains fixed. */
.breakdown-panel {
  margin: 20px 0;
  padding: 20px;
}
.breakdown-panel h2 {
  margin: 0;
  font-size: calc(18px * var(--font-scale));
}
.breakdown-legend {
  display: flex;
  gap: 8px;
  font-size: calc(11px * var(--font-scale));
}
.breakdown-legend span {
  padding: 5px 10px;
  border-radius: 12px;
}
.breakdown-scroll {
  max-height: 610px;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.breakdown-canvas {
  position: relative;
}
.breakdown-canvas > svg {
  position: absolute;
  inset: 0;
  color: #64837d;
}
.breakdown-canvas > svg > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.breakdown-canvas .dependency {
  stroke-dasharray: 5 5;
  opacity: 0.65;
}
.breakdown-card {
  position: absolute;
  width: 780px;
  height: 158px;
  background: var(--panel, #fffefb);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: 0 2px 4px #1a302809;
}
.breakdown-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breakdown-heading > div:first-child {
  min-width: 0;
  flex: 1;
}
.breakdown-heading small {
  display: block;
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
}
.breakdown-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(15px * var(--font-scale));
  font-weight: 650;
  color: var(--ink);
}
.breakdown-steps {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: auto;
  margin: 9px 0 6px;
}
.breakdown-step {
  display: block;
  flex-shrink: 0;
  border-radius: 9px;
  padding: 5px 9px;
  border: 1px solid transparent;
}
.breakdown-step strong {
  font-size: calc(11px * var(--font-scale));
  display: block;
}
.breakdown-step small {
  font-size: calc(9px * var(--font-scale));
  display: block;
}
.actor-agent {
  background: #e5f0e8;
  color: #264e38;
}
.actor-human {
  background: #fff0cd;
  color: #775016;
}
.actor-system {
  background: #e7eff9;
  color: #314f74;
}
.breakdown-step.active {
  border-color: currentColor;
}
.step-link {
  font-size: calc(12px * var(--font-scale));
  color: var(--muted);
}
.breakdown-meta,
.breakdown-people {
  font-size: calc(10px * var(--font-scale));
  white-space: nowrap;
  overflow: auto;
}
.breakdown-people {
  margin-top: 3px;
}
.breakdown-card.archived {
  opacity: 0.65;
}

/* 16. Context-map assembly: inventory palette, draggable resource cards,
   responsibility links and keyboard equivalents. Layout is project/org context. */
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}
#map-status {
  font-size: calc(12px * var(--font-scale));
  color: var(--muted);
}
.map-studio {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 16px;
}
.map-inventory {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  max-height: 600px;
  overflow: auto;
}
.map-inventory h2 {
  font-size: calc(16px * var(--font-scale));
  margin: 0;
}
.map-inventory p {
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
  line-height: 1.5;
}
.inventory-item {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  margin-top: 8px;
  cursor: grab;
  background: white;
}
.inventory-item strong {
  font-size: calc(12px * var(--font-scale));
  display: block;
}
.inventory-item small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
}
#map-scroll {
  overflow: auto;
  height: 600px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-image: radial-gradient(#9eb1a744 0.8px, transparent 0.8px);
  background-size: 18px 18px;
}
#map-scroll.drag-over {
  outline: 2px solid #749b83;
  outline-offset: -3px;
}
.map-canvas {
  position: relative;
}
.map-canvas svg {
  position: absolute;
  inset: 0;
}
.map-canvas svg path {
  fill: none;
  stroke: #89a194;
  stroke-width: 2px;
}
.map-card {
  position: absolute;
  width: 250px;
  height: 132px;
  border: 1px solid #b4c6bc;
  border-radius: 16px;
  padding: 12px 14px;
  background: #edf3ee;
  box-shadow: 0 3px 7px #2334430a;
  cursor: grab;
}
.map-team {
  background: #fff2d9;
  border-color: #d8c59f;
}
.map-human,
.map-agent {
  background: #e9effa;
  border-color: #bdcbe2;
}
.map-process {
  background: #eee9f7;
  border-color: #cdbfde;
}
.map-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map-card-heading small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
}
.map-card-heading button {
  border: 0;
  background: transparent;
  padding: 0 3px;
}
.map-card > strong {
  display: block;
  font-size: calc(13px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-card p {
  font-size: calc(11px * var(--font-scale));
  line-height: 1.4;
  height: 30px;
  overflow: auto;
  margin: 7px 0;
}
.map-card .link {
  font-size: calc(10px * var(--font-scale));
}
.map-links {
  margin-top: 18px;
}
#map-link-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
#map-link-form select {
  width: 200px;
}
.map-links p {
  font-size: calc(12px * var(--font-scale));
}
@media (max-width: 900px) {
  .map-studio {
    grid-template-columns: 1fr;
  }
  .map-inventory {
    max-height: 220px;
  }
}
.breakdown-step .boundary-label {
  margin-top: 3px;
  padding: 2px 4px;
  border-radius: 4px;
}

/* 17. Hierarchical record details: children, mission, editable structured context,
   provenance cards and targeted policy/template bindings. */
.detail-heading h2 {
  margin: 8px 0 14px;
}
.detail-section {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.detail-section h3 {
  font-size: calc(15px * var(--font-scale));
}
.detail-children {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.detail-children button {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  padding: 12px;
  text-align: left;
  border-radius: 10px;
  background: white;
}
.detail-children small,
.context-source small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
}
.detail-children strong {
  font-size: calc(12px * var(--font-scale));
}
.detail-section textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font: calc(12px * var(--font-scale))/1.5 var(--body);
  background: white;
  color: var(--ink);
}
#detail-structured {
  font-family: var(--mono);
}
.detail-section label {
  display: block;
  margin: 12px 0 5px;
  font-size: calc(12px * var(--font-scale));
}
.context-source {
  border-left: 3px solid #bdd1c3;
  padding: 10px 12px;
  margin: 10px 0;
  background: #edf3ee55;
  border-radius: 0 8px 8px 0;
}
.context-source p {
  font-size: calc(12px * var(--font-scale));
  margin: 8px 0;
  white-space: pre-wrap;
}
#detail-binding button[type="submit"] {
  margin-top: 14px;
}
#detail-status {
  font-size: calc(12px * var(--font-scale));
  color: var(--muted);
}
.detail-raw {
  margin-top: 20px;
}
#inspector[data-hierarchy="true"] {
  width: min(680px, 100vw);
}
.inspector-head {
  position: sticky;
  top: -24px;
  padding-top: 20px;
  z-index: 2;
  background: #fffefb;
}

/* 18 · ACCOUNT — the header avatar, keyboard-accessible account menu and own profile. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.account {
  position: relative;
  flex: 0 0 auto;
}
.profile-circle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d4d9d2;
  background: #e8ede4;
  color: #394739;
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  box-shadow: none;
}
.profile-circle:hover,
.profile-circle[aria-expanded="true"] {
  background: #dce5d6;
  border-color: #a7b4a0;
}
.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100;
  min-width: 172px;
  padding: 5px;
  border: 1px solid #dddcd6;
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 8px 28px #252a211a;
}
.account-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.account-menu button:hover,
.account-menu button:focus-visible {
  background: #eeeee7;
}
.account-menu button#account-preferences {
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 12px;
}
.preferences-panel { padding:4px 2px 18px; }
.preferences-panel > .eyebrow { margin-bottom:6px; }
.preferences-panel h3 { margin:0 0 6px; font-size:calc(21px * var(--font-scale)); }
.preferences-panel > p:not(.eyebrow) { color:var(--muted); font-size:calc(13px * var(--font-scale)); }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 12px; }
.theme-choice {
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  gap:3px 12px;
  min-height:76px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  text-align:left;
}
.theme-choice:hover { background:var(--blue); }
.theme-choice[aria-pressed="true"] { border-color:#62836d; box-shadow:0 0 0 2px #62836d35; }
.theme-swatch { grid-row:1 / 3; display:grid; place-items:center; width:42px; height:42px; border-radius:9px; font-size:calc(22px * var(--font-scale)); }
.theme-swatch-light { color:#506c50; background:#f2f0e7; border:1px solid #deddd1; }
.theme-swatch-dark { color:#e5d5a9; background:#202925; border:1px solid #3c4942; }
.theme-choice strong { font-size:calc(13px * var(--font-scale)); }
.theme-choice small { color:var(--muted); font-size:calc(11px * var(--font-scale)); }
.theme-preference-status { margin:14px 0 0; font-size:calc(11px * var(--font-scale)); }
.appearance-control { padding:14px 0 9px; border-top:1px solid var(--line); }
.appearance-control-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.appearance-control-heading label { margin:0; font-size:calc(14px * var(--font-scale)); }
.appearance-control-heading output { color:var(--muted); font-size:calc(12px * var(--font-scale)); font-variant-numeric:tabular-nums; }
.appearance-control p { margin:5px 0 12px; color:var(--muted); font-size:calc(12px * var(--font-scale)); }
.appearance-control input[type="range"] { display:block; width:100%; padding:0; accent-color:#62836d; cursor:pointer; }
.appearance-control-limits { display:flex; justify-content:space-between; margin-top:7px; color:var(--muted); font-size:calc(11px * var(--font-scale)); }
.profile-details dt {
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  margin-top: 18px;
}
.profile-details dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

/* 19 · PROJECT CONTEXT — the persistent header selector and pagination control. */
.header-project {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.header-project select {
  width: clamp(150px, 23vw, 290px);
  max-width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fffefa;
  color: var(--ink);
  font: 500 calc(13px * var(--font-scale)) var(--body);
  cursor: pointer;
  text-overflow: ellipsis;
}
.header-project select:hover {
  border-color: #a7b4a0;
}
.header-project select:disabled {
  cursor: default;
  color: var(--muted);
}
@media (max-width: 600px) {
  .masthead {
    gap: 10px;
    padding-inline: 12px;
  }
  .header-project select {
    width: clamp(100px, 36vw, 190px);
  }
  .header-project #more-projects {
    width: 60px;
    padding: 3px;
    font-size: calc(10px * var(--font-scale));
  }
  .brand #product-name {
    max-width: 24vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 20 · PICKERS — CSS surfaces for every dropdown. Selects retain form values only.
   The shared fixed popup escapes scrolling inspectors. Organisation branches form
   the project tree; search, focus, selected rows and motion use these classes. */
select.select-model {
  display: none;
}
.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  text-align: left;
  font: 500 calc(13px * var(--font-scale)) var(--body);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin: -3px 2px 0 0;
}
.picker-trigger:hover,
.picker-trigger[aria-expanded="true"] {
  border-color: #a7b4a0;
  background: #f4f5ef;
}
.picker-popup {
  position: fixed;
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: 7px;
  border: 1px solid #dddcd6;
  border-radius: 13px;
  background: #fffefa;
  box-shadow:
    0 4px 12px #252a210d,
    0 16px 40px #252a211c;
  animation: picker-enter 120ms ease-out;
}
.picker-search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 38px;
  margin: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.picker-choices {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.picker-option,
button.picker-group {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  box-shadow: none;
  font: calc(13px * var(--font-scale)) var(--body);
  overflow-wrap: anywhere;
}
.picker-option:hover,
.picker-option:focus-visible,
button.picker-group:hover {
  background: #eeeee7;
}
.picker-option[aria-selected="true"] {
  background: #e3ebe0;
  color: #284932;
  font-weight: 600;
}
.picker-group {
  padding: 10px 12px 5px;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
}
button.picker-group {
  font-weight: 600;
  color: var(--ink);
}
button.picker-group::before {
  content: "⌄";
  display: inline-block;
  margin-right: 9px;
}
button.picker-group[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}
.picker-group-items {
  margin-left: 17px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
}
.picker-empty {
  padding: 16px 10px;
  color: var(--muted);
  margin: 0;
  font-size: calc(13px * var(--font-scale));
}
.header-project {
  margin-left: 4px;
}
.header-project .picker-trigger {
  width: clamp(150px, 23vw, 290px);
}
.account {
  margin-left: auto;
}
@keyframes picker-enter {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .picker-popup {
    animation: none;
  }
}
@media (max-width: 600px) {
  .header-project .picker-trigger {
    width: clamp(100px, 36vw, 190px);
  }
}

/* 21 · BACKLOG — live board, recorded playback and local workflow demonstrations.
   Columns scroll within the workspace. Actor colours identify who owns the work;
   cards animate between their previous and current positions, respecting reduced motion. */
.backlog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.backlog-controls {
  padding: 18px;
  margin-bottom: 20px;
}
.backlog-modes {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #efefe9;
  margin-bottom: 16px;
}
.backlog-modes button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
.backlog-modes button[aria-pressed="true"] {
  background: #fffefa;
  box-shadow: 0 1px 4px #252a2115;
}
.backlog-filters,
.backlog-simulation,
.backlog-playback {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.backlog-filters label {
  flex: 1;
  min-width: 160px;
  max-width: 380px;
  font-size: calc(12px * var(--font-scale));
  color: var(--muted);
}
.backlog-filters input,
.backlog-filters .picker-trigger {
  margin-top: 5px;
}
.backlog-playback label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12px * var(--font-scale));
}
.backlog-playback .picker-trigger {
  width: 90px;
}
.backlog-playback input[type="range"] {
  flex: 1;
  min-width: 180px;
  height: 6px;
  appearance: none;
  background: #d7ded2;
  padding: 0;
  border: 0;
  border-radius: 4px;
}
.backlog-playback input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #4f6950;
  border: 2px solid #fffefa;
  box-shadow: 0 0 0 1px #a7b4a0;
  cursor: pointer;
}
.backlog-playback input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4f6950;
  border: 2px solid #fffefa;
  cursor: pointer;
}
.backlog-simulation {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.backlog-simulation input[type="number"] {
  width: 70px;
  margin-left: 7px;
}
.backlog-simulation .muted {
  font-size: calc(12px * var(--font-scale));
}
.backlog-status {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: calc(12px * var(--font-scale));
  font-variant-numeric: tabular-nums;
  margin-bottom: 9px;
}
#backlog-history-note {
  margin: 0;
  font-size: calc(11px * var(--font-scale));
}
.backlog-board {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 3px 2px 24px;
  min-height: 280px;
  align-items: flex-start;
}
.backlog-lane {
  flex: 0 0 250px;
  background: #efefe9;
  border-radius: 12px;
  padding: 12px;
  min-height: 210px;
}
.backlog-lane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.backlog-lane-heading h2 {
  font: 600 calc(13px * var(--font-scale)) var(--body);
  margin: 0;
  text-transform: capitalize;
}
.backlog-lane-heading span {
  font: calc(11px * var(--font-scale)) var(--mono);
  color: var(--muted);
}
.backlog-lane-role {
  font-size: calc(10px * var(--font-scale));
  color: var(--muted);
  margin: 7px 0 12px;
}
.backlog-lane-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}
.backlog-card {
  --backlog-strip-width: 3px;
  margin-inline-start: calc(var(--backlog-depth, 0) * var(--backlog-strip-width));
  position: relative;
  background: #fffefa;
  border: 1px solid #e0e1db;
  border-left: var(--backlog-strip-width) solid #9ab4c9;
  border-radius: 9px;
  padding: 12px;
  box-shadow: 0 2px 5px #252a2109;
}
.backlog-card.actor-human {
  border-left-color: #d5ad61;
}
.backlog-card.actor-agent {
  border-left-color: #80ad91;
}
.backlog-card > small {
  font-size: calc(10px * var(--font-scale));
  display: block;
  margin-bottom: 8px;
}
.backlog-card-title {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 600;
  font-size: calc(13px * var(--font-scale));
  text-align: left;
}
.backlog-card-title:hover {
  text-decoration: underline;
  background: transparent;
}
.backlog-card-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-size: calc(11px * var(--font-scale));
}
.backlog-card-owner small {
  display: block;
  font-size: calc(10px * var(--font-scale));
  margin-top: 2px;
}
.backlog-owner-mark {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e4ebe0;
  color: #3d583b;
  flex-shrink: 0;
}
.actor-human .backlog-owner-mark {
  background: #f5e9cd;
  color: #7b5a24;
}
.backlog-card-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px;
  font-size: calc(10px * var(--font-scale));
  color: var(--muted);
}
.backlog-card > .ref {
  font-size: calc(10px * var(--font-scale));
}
.backlog-lane-empty {
  color: #979a94;
  font-size: calc(11px * var(--font-scale));
  text-align: center;
  padding: 15px 0;
}
.backlog-changed {
  animation: backlog-highlight 700ms ease-out;
}
.backlog-activity {
  margin-top: 4px;
  padding: 20px;
}
.backlog-activity h2 {
  font: 600 calc(15px * var(--font-scale)) var(--body);
}
.backlog-activity ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.backlog-activity li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: calc(12px * var(--font-scale));
}
.backlog-activity time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.backlog-activity small {
  flex-basis: 100%;
}
.backlog-error {
  color: #a24437;
}
@keyframes backlog-highlight {
  from {
    box-shadow: 0 0 0 2px #9eb79b;
  }
  to {
    box-shadow: 0 2px 5px #252a2109;
  }
}
@media (prefers-reduced-motion: reduce) {
  .backlog-changed {
    animation: none;
  }
}

/* Backlog controls stay compact so work remains visible during playback. */
.backlog-heading {
  margin-bottom: 18px;
}
.backlog-heading h1 {
  font-size: calc(32px * var(--font-scale));
  margin-bottom: 6px;
}
.backlog-heading p:last-child {
  margin-bottom: 0;
}
.backlog-filters label {
  margin-bottom: 0;
}
.backlog-simulation > .muted {
  flex-basis: 100%;
}
.backlog-playback .checkline {
  white-space: nowrap;
}

/* 22. Workflow studio: executable steps, outcome arrows and decision inspectors. */
.wf-toolbar {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-direction: column;
}
.wf-canvas-shell { position: relative; min-width: 0; }
.wf-canvas-header {
  position: absolute;
  z-index: 100;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.wf-canvas-header [role="status"] {
  max-width: min(360px, 45vw);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, var(--paper));
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.3;
}
.wf-options { position: relative; }
.wf-options summary {
  list-style: none;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, var(--paper));
  box-shadow: 0 2px 8px #2031291a;
  cursor: pointer;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
}
.wf-options summary::-webkit-details-marker { display: none; }
.wf-options summary::after { content: " ▾"; }
.wf-options[open] summary::after { content: " ▴"; }
.wf-options .wf-toolbar {
  position: absolute;
  z-index: 1;
  top: calc(100% + 6px);
  right: 0;
  width: min(290px, calc(100vw - 32px));
  max-height: min(65vh, 490px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, var(--paper));
  box-shadow: 0 12px 28px #2031292b;
}
.wf-options:not([open]) .wf-toolbar { display: none; }
.wf-page { width:100%; max-width:none; }
.wf-workflow-list { margin:0 0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface, var(--paper)); overflow:hidden; }
.wf-workflow-list-heading { display:flex; justify-content:space-between; gap:12px; padding:7px 12px; font-size:calc(12px * var(--font-scale)); border-bottom:1px solid var(--line); }
.wf-workflow-list-heading span { color:var(--muted); }
.wf-workflow-list-scroll { max-height:144px; overflow:auto; }
.wf-workflow-list table { width:100%; border-collapse:collapse; font-size:calc(12px * var(--font-scale)); }
.wf-workflow-list th, .wf-workflow-list td { padding:5px 12px; text-align:left; border-bottom:1px solid var(--line); }
.wf-workflow-list th { position:sticky; top:0; background:var(--surface, var(--paper)); font-size:calc(10px * var(--font-scale)); text-transform:uppercase; letter-spacing:.06em; }
.wf-workflow-list tr.active { background:var(--blue); }
.wf-workflow-list .link { padding:0; font-size:inherit; }
.wf-page .page-heading {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 5px;
}
.wf-page .page-heading h1 { margin:0; font-size:calc(22px * var(--font-scale)); letter-spacing:-.5px; }
.wf-page .page-heading p { margin:0; font-size:calc(11px * var(--font-scale)); }
.wf-page .wf-inline-heading { display:flex; flex-direction:column; align-items:stretch; gap:2px; }
.wf-page .wf-inline-heading p { font-size:calc(13px * var(--font-scale)); color:var(--muted); }
.inline-text-view {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 1px 4px;
  margin: -1px -4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: pre-wrap;
}
.inline-text-view:hover, .inline-text-view:focus-visible { border-color: var(--line); background: var(--blue); }
.inline-text-input { display:block; width: min(100%, 850px); padding: 4px 7px; font: inherit; line-height: inherit; }
.inline-text-hint { display:block; margin-top:4px; color:#a24437; font-size:calc(12px * var(--font-scale)); line-height:1.35; font-weight:500; }
.inline-text-hint[hidden] { display:none; }
html[data-theme="dark"] .inline-text-hint { color:#f0a79d; }
.wf-metadata { display:grid; grid-template-columns:minmax(180px,240px) minmax(280px,1fr); gap:6px 12px; margin:0 0 6px; padding:7px 10px; }
.wf-metadata label { display:block; margin-bottom:2px; font-size:calc(10px * var(--font-scale)); font-weight:650; }
.wf-metadata input, .wf-metadata textarea { width:100%; }
.wf-metadata input, .wf-metadata textarea { padding:4px 7px; min-height:28px; }
.wf-metadata p { grid-column:1 / -1; margin:0; color:var(--muted); font-size:calc(10px * var(--font-scale)); line-height:1.2; }
.workflow-description { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; font-size:calc(11px * var(--font-scale)); margin:0 0 5px; }
.wf-toolbar button { padding:5px 8px; font-size:calc(11px * var(--font-scale)); }
.wf-toolbar .checkline { font-size:calc(10px * var(--font-scale)); }
.wf-toolbar > label:not(.checkline) { display:flex; align-items:center; gap:5px; font-size:calc(10px * var(--font-scale)); }
.wf-toolbar > label:not(.checkline) input { width:58px; padding:4px; }
.wf-hint { margin:0 0 5px; font-size:calc(10px * var(--font-scale)); line-height:1.2; }
@media (max-width: 720px) { .wf-metadata { grid-template-columns:1fr; } .wf-metadata p { grid-column:1; } }
.wf-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.wf-canvas-scroll {
  overflow: auto;
  width:100%;
  height: max(520px, calc(100vh - 235px));
  min-height: 520px;
  border: 1px solid #cbd5d0;
  border-radius: 12px;
  background: #f5f7f4;
  box-shadow: inset 0 1px 2px #2031290d, 0 5px 18px #2031290a;
  cursor: grab;
  touch-action: none;
  scrollbar-color: #98aaa2 #e8ede9;
}
.wf-canvas-frame {
  position: relative;
  background-color: #f5f7f4;
  background-image: radial-gradient(#93a69b5c 1px, transparent 1px);
  background-size: 24px 24px;
}
.wf-canvas-scroll.panning { cursor: grabbing; }
.wf-canvas-scroll.select-mode { cursor: crosshair; }
.wf-mode { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; }
.wf-mode button { border: 0; background: transparent; }
.wf-mode button[aria-pressed="true"] { background: #dcebe3; color: #174f38; }
.wf-marquee { position: absolute; z-index: 8; border: 1px solid #247356; background: #42a77833; pointer-events: none; }
.wf-canvas {
  position: absolute;
  transform-origin: top left;
  background-color: #f5f7f4;
  background-image: radial-gradient(#93a69b5c 1px, transparent 1px);
  background-size: 24px 24px;
  user-select: none;
}
.wf-canvas svg {
  position: absolute;
  inset: 0;
  color: #778b94;
  pointer-events: none;
  overflow: visible;
}
.wf-canvas svg path {
  fill: none;
  stroke: #73877d;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf-node {
  position: absolute;
  width: 100px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 22px 7px 6px;
  border: 1px solid #bdc9c1;
  border-radius: 12px;
  box-shadow: 0 2px 4px #26363d0c, 0 9px 20px #26363d12;
  white-space: normal;
  cursor: grab;
  transition: box-shadow 120ms ease, outline-color 120ms ease;
  touch-action: none;
  z-index: 1;
}
.wf-node.actor-human {
  background: #fff1d8;
  border-color: #d2aa65;
}
.wf-node.actor-agent {
  background: #e7f1fb;
  border-color: #8aaccb;
}
.wf-node.actor-system {
  background: #e9f2ec;
  border-color: #91b49b;
}
.wf-node.selected {
  outline: 2px solid #275c4c;
  outline-offset: 2px;
  z-index: 2;
}
.wf-node.moving { cursor: grabbing; box-shadow: 0 12px 30px #26363d26; z-index: 5; }
.wf-node-grip {
  position: absolute;
  inset: 3px auto auto 4px;
  padding: 0 3px;
  min-width: 20px;
  height: 16px;
  border: 0;
  color: #53675d;
  background: transparent;
  cursor: grab;
  line-height: 1;
}
.wf-port {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #f5f7f4;
  border-radius: 50%;
  background: #3c8067;
  box-shadow: 0 0 0 1px #3c8067, 0 2px 5px #26363d26;
  transform: translateY(-50%);
  cursor: crosshair;
  z-index: 3;
  touch-action: none;
}
.wf-port:hover { scale: 1.16; }
.wf-port-in { left: -7px; background: #74877d; box-shadow: 0 0 0 1px #74877d, 0 2px 5px #26363d26; }
.wf-port-out { right: -7px; }
.wf-node strong {
  font-size: calc(11px * var(--font-scale));
  overflow-wrap: anywhere;
}
.wf-node small {
  font-size: calc(8px * var(--font-scale));
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-node small:last-child { display:none; }
.wf-node span { font-size:calc(9px * var(--font-scale)); line-height:1.05; overflow-wrap:anywhere; }
.wf-properties {
  max-height: none;
  overflow: auto;
  width:100%;
  align-self: stretch;
  padding:12px 16px;
}
.wf-properties h2 { margin:0 0 8px; font-size:calc(16px * var(--font-scale)); }
.wf-properties form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-properties select,
.wf-properties textarea {
  width: 100%;
}
@media (max-width: 1000px) {
  .wf-properties {
    max-height: none;
  }
  .wf-canvas-scroll { height: max(420px, calc(100vh - 240px)); min-height:420px; }
}

.wf-canvas svg path[data-wf-edge] {
  pointer-events: stroke;
  cursor: pointer;
  stroke-width: 3;
}
.wf-canvas svg path.wf-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 24px;
  pointer-events: stroke;
  cursor: pointer;
}
.wf-canvas svg path.wf-edge-pass { stroke: #338b59; }
.wf-canvas svg path.wf-edge-fail { stroke: #b85b52; }
.wf-canvas svg path.wf-edge-query { stroke: #a77b26; }
.wf-canvas svg path.wf-edge-other { stroke: #65758c; }
.wf-canvas svg path[data-wf-edge].selected { stroke-width: 5; filter: drop-shadow(0 0 3px #204d83); }
.wf-canvas svg marker path { stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.wf-canvas svg .wf-marker-pass { stroke: #338b59; fill: none; }
.wf-canvas svg .wf-marker-fail { stroke: #b85b52; fill: none; }
.wf-canvas svg .wf-marker-query { stroke: #a77b26; fill: none; }
.wf-canvas svg .wf-marker-other { stroke: #65758c; fill: none; }
.wf-canvas svg .wf-edge-label { font-size: calc(9px * var(--font-scale)); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #f5f7f4; stroke-width: 3px; }
.wf-canvas svg .wf-label-pass { fill: #257347; }
.wf-canvas svg .wf-label-fail { fill: #9d4139; }
.wf-canvas svg .wf-label-query { fill: #866014; }
.wf-canvas svg .wf-label-other { fill: #52627a; }
.wf-canvas svg .wf-query-badge { fill: #fff4d9; stroke: #a77b26; stroke-width: 2px; }
.wf-canvas svg .wf-query-mark { font-size: calc(12px * var(--font-scale)); font-weight: 800; fill: #866014; text-anchor: middle; }
.wf-canvas svg .wf-start path, .wf-canvas svg .wf-end path { stroke: #25302c; stroke-width: 2.5px; }
.wf-canvas svg .wf-start circle, .wf-canvas svg .wf-end circle { fill: #25302c; }
.wf-canvas svg .wf-start text, .wf-canvas svg .wf-end text { fill: #fff; font-size: calc(9px * var(--font-scale)); font-weight: 800; text-anchor: middle; }
.wf-canvas svg path[data-wf-edge]:hover {
  stroke: #275c4c;
  stroke-width: 4;
}
.wf-outcome-editor {
  position: fixed;
  z-index: 1001;
  width: 210px;
  padding: 10px;
  border: 1px solid var(--line, #cbd5d0);
  border-radius: 10px;
  background: var(--paper, #fff);
  box-shadow: 0 12px 28px #26363d2b;
}
.wf-outcome-editor label, .wf-outcome-editor small { display: block; }
.wf-outcome-editor label { font-size: calc(12px * var(--font-scale)); font-weight: 700; margin-bottom: 6px; }
.wf-outcome-editor select { width: 100%; }
.wf-outcome-editor small { margin-top: 5px; color: var(--muted); }
.wf-studio > div,
.wf-properties {
  min-width: 0;
}
.wf-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  border: 1px solid #cbd5d0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px #14251f30;
}
.wf-context-menu[hidden] { display: none; }
.wf-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #21352c;
  text-align: left;
  white-space: normal;
}
.wf-context-menu button:hover,
.wf-context-menu button:focus-visible { background: #edf4ef; }
.wf-context-menu .wf-menu-heading {
  padding: 7px 10px 4px;
  color: #62746a;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  text-transform: uppercase;
}

/* 23. Work identity, containment links and inspectable phase headings. */
.work-parent {
  font-size: calc(11px * var(--font-scale));
  color: var(--muted);
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.work-parent button {
  font-size: inherit;
  text-align: left;
  white-space: normal;
}
.backlog-phase {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-weight: 700;
  font-size: inherit;
}
.backlog-phase:hover {
  text-decoration: underline;
}

/* Global finder: a quiet, keyboard-first surface above the workspace. */
.quick-search {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(20vh, 140px) 16px 24px;
  background: #26352b24;
  backdrop-filter: blur(3px);
  animation: finder-appear 140ms ease-out;
}
.quick-search-panel {
  width: min(620px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fffefa;
  border: 1px solid #d7dcd2;
  border-radius: 14px;
  box-shadow: 0 12px 36px #21342824, 0 2px 8px #21342814;
  overflow: hidden;
}
.quick-search-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.quick-search-bar svg { flex-shrink: 0; color: var(--muted); }
#quick-search-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; font: 500 calc(17px * var(--font-scale)) var(--body); }
#quick-search-input:focus-visible { outline: 0; }
#quick-search-close { border: 0; background: transparent; min-width: 40px; min-height: 40px; font-size: calc(23px * var(--font-scale)); color: var(--muted); }
.quick-search-results { overflow: auto; min-height: 0; padding: 0 8px; }
.quick-search-result { display: block; width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 4px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
.quick-search-result strong { display: block; font-weight: 600; font-size: calc(14px * var(--font-scale)); overflow-wrap: anywhere; }
.quick-search-result small { display: block; margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--font-scale)); overflow-wrap: anywhere; }
.quick-search-result[aria-selected="true"], .quick-search-result:hover { background: #e7eee3; }
.quick-search-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.quick-search-footer small { margin-left: auto; font-size: calc(11px * var(--font-scale)); }
@keyframes finder-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .quick-search { animation: none; } }

/* Whole-project containment graph: status colours fill a proportional trim. */
.backlog-view-choice { display: flex; gap: 4px; }
.backlog-view-choice button[aria-pressed="true"] { background: #e3ebe0; border-color: #afbea7; color: #284932; }
.project-tree-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.project-tree-toolbar label { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale)); }
.project-tree-toolbar .picker-trigger { width: 165px; }
.project-tree-toolbar output { min-width: 36px; font-size: calc(12px * var(--font-scale)); text-align: center; font-variant-numeric: tabular-nums; }
.project-tree-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-right: auto; font-size: calc(11px * var(--font-scale)); color: var(--muted); }
.project-tree-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #acb4a8; }
.project-tree-legend .complete::before { background: #6c9d77; }
.project-tree-legend .running::before { background: #729eb8; }
.project-tree-legend .blocked::before { background: #ccac65; }
.project-tree-legend .failed::before { background: #bd7667; }
.project-tree-viewport { height: min(64vh, 720px); min-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #f4f5ef; }
.project-tree-space, .project-tree-canvas { position: relative; }
.project-tree-canvas { transform-origin: top left; }
.project-tree-canvas > svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.project-tree-canvas path { fill: none; stroke: #b3beb0; stroke-width: 1.5; }
.project-tree-node { --remaining-colour: #bdc5b8; position: absolute; width: 240px; height: 96px; padding: 10px 14px; border: 3px solid transparent; border-radius: 14px; text-align: left; overflow: hidden; box-shadow: 0 2px 5px #283c280b; background: linear-gradient(#fffefa, #fffefa) padding-box, conic-gradient(from -90deg, #6c9d77 0 var(--completion), var(--remaining-colour) var(--completion) 100%) border-box; }
.project-tree-node.running { --remaining-colour: #729eb8; }
.project-tree-node.blocked { --remaining-colour: #ccac65; }
.project-tree-node.failed { --remaining-colour: #bd7667; box-shadow: 0 0 0 1px #bd7667; }
.project-tree-node:hover, .project-tree-node:focus-visible { background: linear-gradient(#f9faf4, #f9faf4) padding-box, conic-gradient(from -90deg, #6c9d77 0 var(--completion), var(--remaining-colour) var(--completion) 100%) border-box; box-shadow: 0 3px 12px #283c2820; }
.project-tree-node.selected { box-shadow: 0 0 0 2px #314d38, 0 3px 12px #283c2820; }
.project-tree-node.dimmed { opacity: 0.35; }
.project-tree-node small { display: block; font-size: calc(10px * var(--font-scale)); color: var(--muted); margin-bottom: 4px; }
.project-tree-node strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; font-size: calc(12px * var(--font-scale)); font-weight: 600; height: 30px; }
.project-tree-node > span { font-size: calc(10px * var(--font-scale)); color: var(--muted); font-variant-numeric: tabular-nums; }
.project-tree-node > span b { color: var(--ink); }
.project-tree-node em { float: right; font-style: normal; font-size: calc(10px * var(--font-scale)); color: var(--muted); margin-top: 2px; }
.project-node-lineage { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: calc(12px * var(--font-scale)); margin: 12px 0 20px; }
.project-node-activity { list-style: none; margin: 0; padding: 0; }
.project-node-activity li { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: calc(12px * var(--font-scale)); }
.project-node-activity time { color: var(--muted); font-size: calc(11px * var(--font-scale)); font-variant-numeric: tabular-nums; }
.project-node-activity strong { font-weight: 600; }
.project-node-activity span { color: var(--muted); }
.project-tree-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 10px; }
.project-tree-controls .backlog-modes, .project-tree-controls .backlog-filters { margin-bottom: 0; }
.project-tree-controls .backlog-filters { flex: 1; min-width: 200px; }
.project-tree-controls .backlog-filters > label:first-child, .project-tree-controls #backlog-history-note { display: none; }
.project-tree-controls .backlog-filters > label:last-child { display: flex; align-items: center; gap: 8px; max-width: none; }
.project-tree-controls .backlog-filters input { margin-top: 0; min-width: 120px; }
.project-tree-controls #backlog-simulation, .project-tree-controls #backlog-playback, .project-tree-controls .backlog-status { flex-basis: 100%; margin: 0; }
.project-tree-controls #backlog-simulation { padding-top: 10px; gap: 10px; }
.project-tree-controls #backlog-simulation > label:nth-child(-n+2) { display: none; }
.project-tree-controls #backlog-simulation > .muted { display: none; }
.project-tree-controls #backlog-playback { gap: 8px; }
.project-tree-controls #backlog-playback .checkline { display: none; }
@media (max-width: 700px) {
  .project-tree-toolbar label { flex-basis: 100%; }
  .project-tree-controls .backlog-filters { flex-basis: 100%; }
}

/* Project home and qualitative objectives. */
.project-home { max-width: 1100px; margin: 0 auto; }
.project-home-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:calc(12px * var(--font-scale)) var(--mono); }
.project-home .page-heading h1 { font-size:calc(36px * var(--font-scale)); letter-spacing:-1px; margin:18px 0; }
.project-description-full { max-width:850px; font-size:calc(17px * var(--font-scale)); line-height:1.65; white-space:pre-wrap; }
.project-information { margin:30px 0; padding:24px 0; border-top:1px solid var(--line); }
.project-codebases { margin:30px 0; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-codebases .section-title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.project-codebase-list article { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.project-codebase-list article > div:first-child { min-width:0; }
.project-codebase-url { margin-top:5px; color:var(--muted); font:calc(12px * var(--font-scale)) var(--mono); overflow-wrap:anywhere; }
.project-codebase-url a { color:inherit; }
.project-codebase-active { margin-left:10px; padding:3px 7px; border-radius:4px; background:var(--line); color:var(--ink); font-size:calc(11px * var(--font-scale)); }
.project-codebase-actions { display:flex; gap:7px; flex-shrink:0; }
.project-codebase-form { display:grid; grid-template-columns:1fr 2fr auto; align-items:end; gap:12px; margin-top:18px; }
.project-codebase-form label { display:grid; gap:5px; font-size:calc(12px * var(--font-scale)); font-weight:600; }
.project-codebase-form input { width:100%; }
.project-codebase-form button { white-space:nowrap; }
@media (max-width:700px) { .project-codebase-list article { align-items:flex-start; flex-direction:column; } .project-codebase-form { grid-template-columns:1fr; } }
.project-edit-form { max-width: 980px; margin: 28px 0; padding: clamp(20px, 4vw, 36px); }
.project-edit-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.project-edit-heading h2 { margin:6px 0 0; }
.project-edit-heading p { max-width:330px; margin:0; color:var(--muted); line-height:1.5; }
.project-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; align-items:start; }
.project-edit-grid label, .project-edit-advanced label { margin-top:8px; }
.project-prefix-note { grid-column:2; margin:-5px 0 8px; }
.project-edit-grid textarea { grid-column:1 / -1; }
.project-edit-advanced { margin:25px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-edit-advanced summary { cursor:pointer; font-weight:650; }
.project-edit-advanced label { display:block; margin-top:16px; }
.project-edit-advanced textarea { width:100%; }
@media (max-width: 680px) {
  .project-edit-heading { display:block; }
  .project-edit-heading p { margin-top:10px; }
  .project-edit-grid { grid-template-columns:1fr; }
  .project-prefix-note { grid-column:1; }
  .project-edit-grid textarea { grid-column:1; }
}
.long-form { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.project-goal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:20px; }
.project-goal-card { display:block; padding:22px; border:1px solid var(--line); border-radius:12px; background:#fffefa; text-decoration:none; color:var(--ink); }
.project-goal-card:hover { border-color:#80947a; background:#f5f7ef; }
.project-goal-card small, .project-goal-card span { font-size:calc(12px * var(--font-scale)); color:var(--muted); }
.project-goal-card h3 { margin:12px 0; font-size:calc(18px * var(--font-scale)); }
.project-goal-card p { line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.goal-maturity { display:flex; list-style:none; padding:0; gap:6px; margin:24px 0; }
.goal-maturity li { flex:1; padding:10px; border-top:3px solid var(--line); font-size:calc(12px * var(--font-scale)); color:var(--muted); }
.goal-maturity [aria-current] { color:#31523c; border-color:#658368; background:#e9efe4; }
.goal-task-list article { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.goal-task-list a { color:var(--ink); text-decoration:none; }
.goal-task-list strong { font:calc(12px * var(--font-scale)) var(--mono); margin-right:8px; }
.goal-links { border:1px solid var(--line); border-radius:8px; margin:18px 0; padding:12px; max-height:300px; overflow:auto; }
.goal-links legend { font-weight:600; font-size:calc(13px * var(--font-scale)); }
.goal-links .checkline { display:flex; align-items:flex-start; gap:8px; margin:10px 0; }
.goal-links input { width:auto; flex-shrink:0; }
@media (max-width:700px) { .project-home .page-heading h1 {font-size:calc(28px * var(--font-scale))} .goal-task-list article {flex-wrap:wrap} }

.nav-label button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.nav-label button:hover { color: var(--text); }
.nav-label button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width:650px) { .sidebar .nav-label { display: block; margin: 4px 10px; } .nav-group { flex-shrink: 0; min-width: 110px; } .nav-group > div { display: flex; flex-wrap: wrap; max-width: 260px; } }

.project-home .section-title > button { width: auto; margin-left: auto; padding: 10px 18px; }

/* Profile-selected dark palette. Semantic colors retain contrast while surfaces
   shift to slate and forest tones across the complete workspace. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink:#e3e9e4;
  --muted:#a4b0a9;
  --paper:#151b18;
  --line:#394640;
  --blue:#263943;
  --green:#263a2e;
  --yellow:#463b23;
  --red:#472b2b;
  --purple:#393147;
  --surface:#1d2521;
  --surface-raised:#242e29;
  --surface-soft:#202923;
  --accent:#9bc4a5;
  --order-accent:#9bc4a5;
}
html[data-theme="dark"] body {
  background-color:var(--paper);
  background-image:radial-gradient(#879b8d1c 0.65px, transparent 0.65px);
}
html[data-theme="dark"] .masthead,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .inspector,
html[data-theme="dark"] .account-menu,
html[data-theme="dark"] .picker-popup,
html[data-theme="dark"] .quick-search-panel,
html[data-theme="dark"] .wf-context-menu,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .record-table,
html[data-theme="dark"] .goal-links,
html[data-theme="dark"] .backlog-controls,
html[data-theme="dark"] .project-goal-card {
  background-color:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}
html[data-theme="dark"] .sidebar { background-color:#19201d; }
html[data-theme="dark"] .masthead { background-color:#1b221f; }
html[data-theme="dark"] .inspector-head { background:var(--surface); }
html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .picker-trigger,
html[data-theme="dark"] .header-project select {
  color:var(--ink);
  background-color:var(--surface-raised);
  border-color:var(--line);
}
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .picker-trigger:hover,
html[data-theme="dark"] .picker-trigger[aria-expanded="true"],
html[data-theme="dark"] .account-menu button:hover,
html[data-theme="dark"] .account-menu button:focus-visible,
html[data-theme="dark"] .picker-option:hover,
html[data-theme="dark"] .picker-option:focus-visible,
html[data-theme="dark"] .quick-search-result:hover,
html[data-theme="dark"] .quick-search-result[aria-selected="true"] {
  background-color:#303c35;
}
html[data-theme="dark"] .account-menu button,
html[data-theme="dark"] .picker-option,
html[data-theme="dark"] .quick-search-result,
html[data-theme="dark"] .wf-context-menu button { color:var(--ink); }
html[data-theme="dark"] #navigation a { color:#bdc8c1; }
html[data-theme="dark"] #navigation a[aria-current] { color:#e5efe7; background:#2a3a30; }
html[data-theme="dark"] .nav-label,
html[data-theme="dark"] .picker-group,
html[data-theme="dark"] .picker-empty { color:var(--muted); }
html[data-theme="dark"] .header-project select,
html[data-theme="dark"] .picker-popup,
html[data-theme="dark"] .account-menu,
html[data-theme="dark"] .quick-search-panel { box-shadow:0 10px 34px #0008; }
html[data-theme="dark"] th { color:var(--muted); background:#242d29; }
html[data-theme="dark"] td { border-color:var(--line); }
html[data-theme="dark"] .backlog-modes,
html[data-theme="dark"] .backlog-lane,
html[data-theme="dark"] .project-tree-viewport { background-color:#202823; }
html[data-theme="dark"] .backlog-card,
html[data-theme="dark"] .project-tree-node,
html[data-theme="dark"] .project-goal-card { background:#242d28; border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .backlog-modes button[aria-pressed="true"],
html[data-theme="dark"] .goal.active,
html[data-theme="dark"] .goal-maturity [aria-current] { background:#304036; color:#e3eee5; }
html[data-theme="dark"] .wf-canvas-scroll,
html[data-theme="dark"] .wf-canvas-frame,
html[data-theme="dark"] .wf-canvas { background-color:#1b231f; }
html[data-theme="dark"] .wf-canvas-frame,
html[data-theme="dark"] .wf-canvas { background-image:radial-gradient(#91a49840 1px, transparent 1px); }
html[data-theme="dark"] .wf-node.actor-human { background:#3a3224; border-color:#8e7445; color:#f0e4c7; }
html[data-theme="dark"] .wf-node.actor-agent { background:#243544; border-color:#587b97; color:#dceaf6; }
html[data-theme="dark"] .wf-node.actor-system { background:#26382d; border-color:#557b5e; color:#dcebdd; }
html[data-theme="dark"] .wf-node-grip { background:transparent; color:var(--muted); }
html[data-theme="dark"] .wf-mode button[aria-pressed="true"] { background:#304936; color:#d6eee0; }
html[data-theme="dark"] .wf-canvas svg .wf-edge-label { stroke:#1b231f; }
html[data-theme="dark"] .wf-canvas svg .wf-label-pass { fill:#82c99b; }
html[data-theme="dark"] .wf-canvas svg .wf-label-fail { fill:#e28b80; }
html[data-theme="dark"] .wf-canvas svg .wf-label-query { fill:#dfbc70; }
html[data-theme="dark"] .inline-text-view { background:transparent; border-color:transparent; }
html[data-theme="dark"] .inline-text-view:hover,
html[data-theme="dark"] .inline-text-view:focus-visible { background:#304036; border-color:var(--line); }
html[data-theme="dark"] .theme-choice { background:var(--surface-raised); color:var(--ink); }
html[data-theme="dark"] .theme-choice:hover,
html[data-theme="dark"] .theme-choice[aria-pressed="true"] { background:#303c35; }
html[data-theme="dark"] a { color:#9bc8df; }
html[data-theme="dark"] .primary { background:#375b49; color:#fff; }
html[data-theme="dark"] ::selection { color:#f3f6f3; background:#476b56; }

/* Failed sign-ins receive an editorial notice beside the sign-in form. */
.workspace:focus { outline:none; }
.login-view[hidden] { display:none; }
.login-view { gap:clamp(28px, 5vw, 76px); padding:clamp(24px, 5vw, 70px); }
.login-editorial,
.login-view .login-card {
  background:#f6f0df;
  color:#28231f;
  border:1px solid #3a332c;
  box-shadow:7px 7px 0 #302a24;
  font-family:Georgia, "Times New Roman", serif;
}
.login-editorial { width:min(100%, 560px); padding:clamp(24px, 4vw, 42px); transform:rotate(-0.5deg); }
.login-editorial[hidden] { display:none; }
.login-view .login-card { width:min(100%, 350px); padding:28px; transform:rotate(0.4deg); }
.login-editorial-masthead,
.login-card-masthead { display:flex; justify-content:space-between; gap:12px; padding:6px 0 10px; border-top:3px double currentColor; border-bottom:3px double currentColor; font:700 calc(10px * var(--font-scale))/1.4 var(--mono); letter-spacing:.07em; }
.login-editorial-masthead span:last-child,
.login-card-masthead span:last-child { text-align:right; }
.login-editorial-kicker,
.login-card-kicker { margin:25px 0 8px; font:700 calc(11px * var(--font-scale)) var(--mono); text-transform:uppercase; letter-spacing:.16em; }
.login-editorial h1 { max-width:480px; margin:0; font:700 clamp(calc(29px * var(--font-scale)), 4vw, calc(43px * var(--font-scale)))/1.05 Georgia, "Times New Roman", serif; letter-spacing:-.05em; }
.login-editorial-deck { max-width:44ch; margin:19px 0; font:calc(16px * var(--font-scale))/1.55 Georgia, "Times New Roman", serif; }
.login-editorial-illustration { margin:20px 0 0; padding-top:8px; border-top:1px solid currentColor; }
.login-editorial-illustration svg { display:block; width:min(100%, 340px); height:auto; margin:auto; }
.login-editorial-illustration figcaption { margin-top:8px; text-align:center; font:italic calc(12px * var(--font-scale))/1.4 Georgia, "Times New Roman", serif; }
.login-view .login-card h2 { margin:0; font:700 calc(31px * var(--font-scale))/1.1 Georgia, "Times New Roman", serif; letter-spacing:-.04em; }
.login-card-deck { margin:10px 0 25px; font:calc(14px * var(--font-scale))/1.45 Georgia, "Times New Roman", serif; }
.login-view .login-card label { display:block; margin:14px 0 6px; font:700 calc(11px * var(--font-scale)) var(--mono); text-transform:uppercase; letter-spacing:.07em; }
.login-view .login-card input { width:100%; background:#fffaf0; color:#28231f; border-color:#9c8f7c; font:calc(14px * var(--font-scale)) var(--mono); }
.login-view .login-card .primary { background:#28231f; border-color:#28231f; border-radius:0; font:700 calc(12px * var(--font-scale)) var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.login-view .login-card .primary:hover { background:#475b43; border-color:#475b43; }
.login-view .login-card a { color:#504b40; text-decoration:underline; text-underline-offset:3px; }
.login-view.has-disabled-notice { gap:clamp(32px, 6vw, 100px); }
.disabled-account-notice {
  width:min(100%, 560px);
  padding:clamp(24px, 4vw, 42px);
  background:#f6f0df;
  color:#28231f;
  border:1px solid #3a332c;
  box-shadow:7px 7px 0 #302a24;
  font-family:Georgia, "Times New Roman", serif;
  transform:rotate(-0.5deg);
}
.disabled-account-masthead { display:flex; justify-content:space-between; gap:12px; padding:6px 0 10px; border-top:3px double currentColor; border-bottom:3px double currentColor; font:700 calc(10px * var(--font-scale))/1.4 var(--mono); letter-spacing:.07em; }
.disabled-account-masthead span:last-child { text-align:right; }
.disabled-account-kicker { margin:25px 0 8px; font:700 calc(11px * var(--font-scale)) var(--mono); text-transform:uppercase; letter-spacing:.16em; }
.disabled-account-notice h1 { max-width:470px; margin:0; font:700 clamp(calc(29px * var(--font-scale)), 4vw, calc(44px * var(--font-scale)))/1.05 Georgia, "Times New Roman", serif; letter-spacing:-.05em; }
.disabled-account-reason { margin:24px 0; padding:17px 19px; border:1px solid currentColor; border-left:5px solid currentColor; background:#fffaf0; font:calc(15px * var(--font-scale))/1.55 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.disabled-account-illustration { margin:20px 0 0; padding-top:8px; border-top:1px solid currentColor; }
.disabled-account-illustration svg { display:block; width:min(100%, 340px); height:auto; margin:auto; }
.disabled-account-illustration svg[hidden] { display:none; }
.disabled-account-illustration figcaption { margin-top:8px; text-align:center; font:italic calc(12px * var(--font-scale))/1.4 Georgia, "Times New Roman", serif; }
html[data-theme="dark"] .disabled-account-notice { background:#f6f0df; color:#28231f; }
html[data-theme="dark"] .login-editorial,
html[data-theme="dark"] .login-view .login-card { background:#f6f0df; color:#28231f; border-color:#3a332c; }
html[data-theme="dark"] .login-view .login-card input { background:#fffaf0; color:#28231f; border-color:#9c8f7c; }
html[data-theme="dark"] .login-view .login-card a { color:#504b40; }
html[data-theme="dark"] .login-view .login-card .primary { background:#28231f; color:#fff; border-color:#28231f; }
@media (max-width:980px) {
  .login-view { flex-direction:column; align-items:center; justify-content:flex-start; }
  .login-editorial,
  .login-view .login-card { transform:none; }
  .login-view .login-card { width:min(100%, 560px); }
  .login-view.has-disabled-notice { flex-direction:column; align-items:center; gap:25px; }
  .login-view.has-disabled-notice .login-card { padding-bottom:0; }
  .disabled-account-notice { transform:none; box-shadow:5px 5px 0 #302a24; }
}
.disabled-message-list { display:grid; gap:12px; margin:16px 0; }
.disabled-message-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:7px 12px; align-items:start; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface, var(--paper)); }
.disabled-message-row label { grid-column:1 / -1; margin:0; font:600 calc(12px * var(--font-scale)) var(--mono); }
.disabled-message-row textarea { min-width:0; width:100%; resize:vertical; }
.disabled-message-row button { align-self:start; }

/* Font size and whitespace are independent profile preferences. Keep layout
   dimensions in CSS pixels so canvas and drag coordinates do not change. */
.workspace { padding:calc(26px * var(--space-scale)) calc(34px * var(--space-scale)); }
.page-heading { margin-bottom:calc(18px * var(--space-scale)); }
.page-heading h1 { margin-bottom:calc(12px * var(--space-scale)); }
.section-title { margin:calc(18px * var(--space-scale)) 0 calc(10px * var(--space-scale)); gap:calc(12px * var(--space-scale)); }
.panel { padding:calc(19px * var(--space-scale)) calc(20px * var(--space-scale)); }
.settings-panel { padding:calc(26px * var(--space-scale)); }
.detail-section { padding:calc(18px * var(--space-scale)) 0; }
.empty { padding:calc(48px * var(--space-scale)) calc(20px * var(--space-scale)); }
.record-table th, .record-table td { padding:calc(12px * var(--space-scale)) calc(16px * var(--space-scale)); }
.record-table td { padding-top:calc(15px * var(--space-scale)); padding-bottom:calc(15px * var(--space-scale)); }
.project-home .page-heading h1 { margin:calc(12px * var(--space-scale)) 0; }
.project-information, .project-codebases { margin:calc(20px * var(--space-scale)) 0; padding:calc(14px * var(--space-scale)) 0; }
.project-codebase-list article { gap:calc(14px * var(--space-scale)); padding:calc(10px * var(--space-scale)) 0; }
.project-codebase-form { gap:calc(10px * var(--space-scale)); margin-top:calc(14px * var(--space-scale)); }
.project-goal-grid { gap:calc(12px * var(--space-scale)); margin-top:calc(14px * var(--space-scale)); }
.project-goal-card { padding:calc(18px * var(--space-scale)); }
.project-goal-card h3 { margin:calc(8px * var(--space-scale)) 0; }
.project-edit-form { margin:calc(22px * var(--space-scale)) 0; padding:calc(26px * var(--space-scale)); }
.goal-maturity { margin:calc(18px * var(--space-scale)) 0; }
.goal-task-list article { padding:calc(12px * var(--space-scale)) 0; }
@media (min-width:951px) and (max-width:1549px) { .app { grid-template-columns:max(164px, calc(164px * var(--font-scale))) minmax(0, 1fr); } }
@media (max-width:900px) { .workspace { padding:calc(20px * var(--space-scale)); } }
@media (max-width:650px) { .workspace { padding:calc(14px * var(--space-scale)); } }

/* Workflow studio keeps the graph in view; editing and playback float above it. */
.app[data-workflow-studio="true"] .workspace { padding:0; overflow:hidden; }
.app[data-workflow-studio="true"] { transition: grid-template-columns 180ms ease; }
.app[data-workflow-studio="true"] #page-content,
.app[data-workflow-studio="true"] .wf-page,
.app[data-workflow-studio="true"] .wf-studio,
.app[data-workflow-studio="true"] .wf-canvas-shell { height:100%; min-height:0; }
.app[data-workflow-studio="true"][data-workflow-sidebar-collapsed="true"] { grid-template-columns:0 minmax(0,1fr); }
.app[data-workflow-sidebar-collapsed="true"] .sidebar { opacity:0; pointer-events:none; overflow:hidden; padding:0; }
.wf-page .wf-studio { display:block; }
.wf-page .wf-canvas-shell { position:relative; overflow:hidden; }
.wf-page .wf-canvas-scroll { position:absolute; inset:0; width:100%; height:100%; min-height:0; border:0; border-radius:0; }
.wf-canvas-heading { position:absolute; z-index:90; top:10px; left:12px; display:flex; align-items:center; gap:9px; max-width:calc(100% - 465px); padding:5px 8px 5px 5px; border:1px solid var(--line); border-radius:10px; background:var(--surface,var(--paper)); box-shadow:0 4px 18px #20312922; }
.wf-canvas-heading .wf-inline-heading { min-width:0; }
.wf-canvas-heading h1 { margin:0; font-size:calc(14px * var(--font-scale)); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-canvas-heading .workflow-description { margin:1px 0 0; font-size:calc(10px * var(--font-scale)); }
.wf-canvas-heading #wf-sidebar-toggle { flex:0 0 36px; width:36px; height:36px; padding:0; font-size:calc(19px * var(--font-scale)); }
.wf-mode-label { flex:0 0 auto; padding:3px 6px; border-radius:4px; background:#e7eee7; color:#315d45; font-size:calc(9px * var(--font-scale)); font-weight:800; letter-spacing:.08em; }
.wf-canvas-header { top:10px; right:12px; align-items:center; }
.wf-canvas-header > button { background:var(--surface,var(--paper)); box-shadow:0 2px 8px #2031291a; font-size:calc(11px * var(--font-scale)); font-weight:700; }
.wf-canvas-header #wf-fit { border-color:#9ab6a5; color:#235d40; }
.wf-canvas-header #wf-fit:hover { background:#e7f1e9; }
html[data-theme="dark"] .wf-canvas-header #wf-fit { color:#bfddc7; border-color:#547463; }
html[data-theme="dark"] .wf-canvas-header #wf-fit:hover { background:#2d4536; }
.wf-canvas-header [role="status"] { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-view-feedback { position:absolute; z-index:95; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; opacity:0; filter:blur(4px); transform:translate(-50%,calc(-50% + 8px)) scale(.92); transition:opacity 220ms ease,filter 220ms ease,transform 220ms cubic-bezier(.2,0,0,1); }
.wf-view-feedback.visible { opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1); }
.wf-view-feedback strong { display:grid; place-items:center; width:56px; height:56px; border:2px solid #7eaa8b; border-radius:50%; background:var(--surface,var(--paper)); box-shadow:0 8px 24px #20312935; color:var(--ink); font-size:calc(27px * var(--font-scale)); font-variant-numeric:tabular-nums; line-height:1; }
.wf-view-feedback small { padding:3px 7px; border-radius:5px; background:var(--surface,var(--paper)); box-shadow:0 3px 12px #2031292b; color:var(--ink); font-size:calc(10px * var(--font-scale)); font-weight:700; }
html[data-theme="dark"] .wf-view-feedback strong { border-color:#7dae8a; }
.wf-options .wf-toolbar { width:min(340px,calc(100vw - 24px)); max-height:min(75vh,650px); }
.wf-options .wf-workflow-list { margin:0 0 5px; }
.wf-options .wf-workflow-list-scroll { max-height:115px; }
.wf-options .wf-workflow-list table { font-size:calc(11px * var(--font-scale)); }
.wf-properties, .wf-playback, .wf-inventory { position:absolute; z-index:80; top:62px; right:12px; width:min(300px,calc(100% - 24px)); max-height:calc(100% - 74px); overflow:auto; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--surface,var(--paper)); box-shadow:0 13px 36px #1a312c33; }
.wf-properties[hidden], .wf-playback[hidden], .wf-inventory[hidden] { display:none; }
.wf-properties-head, .wf-playback-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.wf-properties-head h2 { margin:0; }
.wf-properties-head button, .wf-playback-head button { width:32px; height:32px; padding:0; border:0; background:transparent; font-size:calc(20px * var(--font-scale)); }
.wf-properties form { gap:5px; }
.wf-properties form label { font-size:calc(11px * var(--font-scale)); }
.wf-properties form input, .wf-properties form select, .wf-properties form textarea { padding:5px 7px; }
.wf-playback { top:82px; left:12px; right:auto; width:min(310px,calc(100% - 24px)); }
.wf-inventory { top:82px; left:12px; right:auto; width:min(250px,calc(100% - 24px)); }
.wf-inventory-list { display:flex; flex-direction:column; gap:5px; }
.wf-inventory-list button { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; }
.wf-inventory-list span { color:var(--muted); font-size:calc(11px * var(--font-scale)); }
.wf-playback-lede { margin:0 0 12px; color:var(--muted); font-size:calc(11px * var(--font-scale)); line-height:1.4; }
.wf-playback-trail { max-height:170px; overflow:auto; padding-left:20px; font-size:calc(11px * var(--font-scale)); }
.wf-playback-trail li { margin:4px 0; }
.wf-playback-trail small { display:block; color:var(--muted); line-height:1.3; }
.wf-playback-current { padding:10px; border-radius:7px; background:var(--blue); font-size:calc(12px * var(--font-scale)); }
.wf-playback-current p { margin:5px 0; line-height:1.35; }
.wf-playback-current small { display:block; margin-top:5px; color:var(--muted); }
.wf-playback-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.wf-playback-actions button { flex:1 1 auto; }
.wf-playback-visit { display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:8px; background:var(--blue); }
.wf-playback-visit small, .wf-run-choices span { color:var(--muted); }
.wf-playback-warning { color:#a24437; font-size:calc(11px * var(--font-scale)); }
.wf-run-choices { display:flex; flex-direction:column; gap:5px; max-height:40vh; overflow:auto; }
.wf-run-choices button { display:flex; flex-direction:column; gap:3px; text-align:left; }
.wf-node.wf-active { outline:3px solid #d48537; outline-offset:4px; box-shadow:0 0 0 8px #d4853722,0 10px 22px #26363d20; }
.wf-canvas svg path[data-wf-edge].wf-traversed { stroke-width:5; filter:drop-shadow(0 0 4px #d48537); }
@media (max-width:950px) {
  .app[data-workflow-sidebar-collapsed="true"] .sidebar { display:none; }
  .wf-canvas-heading { max-width:calc(100% - 245px); }
  .wf-canvas-header [role="status"] { display:none; }
}
@media (max-width:600px) {
  .wf-canvas-heading .workflow-description, .wf-mode-label { display:none; }
  .wf-canvas-heading { max-width:calc(100% - 245px); }
  .wf-playback, .wf-inventory { top:auto; bottom:10px; max-height:55%; }
  .wf-properties { top:55px; max-height:55%; }
}
html[data-theme="dark"] .wf-mode-label { background:#304936; color:#d6eee0; }
html[data-theme="dark"] .wf-playback-warning { color:#f0a79d; }
@media (prefers-reduced-motion:reduce) { .app[data-workflow-studio="true"], .wf-view-feedback { transition:none; } }
.storage-notice { position:fixed; z-index:10000; bottom:16px; left:16px; width:min(420px,calc(100vw - 32px)); display:flex; align-items:center; gap:12px; padding:17px 20px; background:var(--panel,#fff); color:var(--ink,#20252a); border:1px solid var(--line,#c8c7c1); border-radius:10px; box-shadow:0 12px 36px #0003; }
.storage-notice[hidden] { display:none; }
.storage-notice strong { display:block; font-size:calc(14px * var(--font-scale)); }
.storage-notice p { margin:5px 0 0; font-size:calc(12px * var(--font-scale)); line-height:1.5; }
.storage-notice button { flex:none; }
@media (max-width:600px) { .storage-notice { align-items:stretch; flex-direction:column; gap:10px; } body:has(.storage-notice:not([hidden])) { padding-bottom:190px; } }
.email-config, .email-history-section { max-width:1100px; }
.email-config > select, .email-config > input { max-width:520px; }
.email-config #smtp-fields { max-width:520px; }
.email-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0; }
.email-template { min-width:0; border:1px solid var(--line); border-radius:8px; padding:16px; }
.email-template legend { padding:0 6px; font-weight:700; }
.email-template input, .email-template textarea { width:100%; box-sizing:border-box; }
.email-template button { margin-top:12px; }
.email-template [role="status"] { min-height:1.2em; margin:8px 0 0; color:var(--muted); }
.test-email-dialog { width:min(460px,calc(100vw - 32px)); max-height:min(90vh,720px); padding:24px; color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:14px 19px 13px 17px; box-shadow:5px 6px 0 #17262b30; }
.test-email-dialog::backdrop { background:#17262bc2; }
.test-email-dialog h2 { margin:0 0 8px; }
.test-email-dialog label { display:block; margin:18px 0 6px; font-weight:700; }
.test-email-dialog input { display:block; width:100%; box-sizing:border-box; margin-bottom:18px; }
.test-email-dialog [role="alert"] { min-height:1.2em; }
.test-email-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.email-pages { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
@media (max-width:700px) { .email-template-grid { grid-template-columns:1fr; } }
/* Subscription catalogue: compact limits and clear default assignment. */
.subscription-heading,.subscription-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.subscription-heading h2{margin-bottom:.2rem}
.subscription-editor{margin-block:1.2rem;max-width:760px}
.subscription-editor textarea{width:100%}
.subscription-limits{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:.8rem}
.subscription-limits input{width:100%}
.subscription-default{display:inline-block;margin-left:.45rem;padding:.1rem .4rem;border:1px solid var(--order-accent);border-radius:1rem;color:var(--order-accent);font-size:.75em;font-weight:700}
#subscription-user-rows select{min-width:12rem;max-width:100%}
@media(max-width:650px){.subscription-limits{grid-template-columns:1fr}}

/* Workspace shell: organisation-first navigation and focused administration. */
body.workspace-signed-in { --workspace-surface:#fff; --workspace-sidebar:#f6f5f3; --workspace-hover:#eeedea; --workspace-border:#e6e4e0; --ink:#282724; --muted:#77746e; --line:var(--workspace-border); --paper:var(--workspace-surface); --hand:var(--body); --surface:var(--workspace-surface); --surface-raised:var(--workspace-hover); --surface-soft:var(--workspace-sidebar); background:var(--workspace-sidebar); background-image:none; }
html[data-theme="dark"] body.workspace-signed-in { --workspace-surface:#1c1b19; --workspace-sidebar:#141412; --workspace-hover:#2b2a27; --workspace-border:#302f2b; --ink:#eeede9; --muted:#a19e96; --paper:var(--workspace-surface); --line:var(--workspace-border); color:var(--ink); }
.workspace-signed-in > .masthead { display:none; }
.workspace-signed-in .app { display:grid; height:100dvh; grid-template-columns:230px minmax(0,1fr); gap:0; padding:8px 8px 8px 0; }
.workspace-signed-in .sidebar { max-height:none; height:100%; display:flex; flex-direction:column; overflow:visible; padding:12px 10px 8px; border:0; background:var(--workspace-sidebar); min-width:0; gap:10px; }
.sidebar-brand { display:flex; gap:5px; align-items:center; min-height:56px; padding:0 5px 12px; }
.sidebar-brand .brand { min-width:0; flex:1; gap:10px; color:var(--ink); }
.sidebar-brand .brand #product-name { font-size:calc(14px * var(--font-scale)); line-height:1.25; font-weight:650; letter-spacing:-.025em; white-space:normal; }
.sidebar-brand .brand .mark { font:600 18px var(--mono); border:1px solid var(--line); border-radius:8px; width:32px; height:32px; display:grid; place-items:center; flex:none; background:var(--workspace-hover); color:var(--ink); transform:none; }
.shell-collapse { display:flex; border:0; padding:5px; background:transparent; color:var(--muted); border-radius:5px; }
.organisation-control { position:relative; z-index:200; }
.organisation-toggle { width:100%; min-width:0; display:flex; align-items:center; gap:10px; padding:9px; border:1px solid transparent; border-radius:9px; text-align:left; background:var(--workspace-hover); color:var(--ink); }
.organisation-avatar { width:32px; height:32px; border:1px solid var(--line); display:grid; place-items:center; border-radius:7px; font-size:calc(13px * var(--font-scale)); flex:none; }
.organisation-label { flex:1; min-width:0; }
.organisation-label strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:calc(13px * var(--font-scale)); }
.organisation-label small { display:block; font-size:calc(11px * var(--font-scale)); margin-top:2px; }
.org-chevron { font-size:10px; line-height:.65; color:var(--muted); }
.organisation-menu { position:absolute; top:calc(100% + 5px); left:0; width:290px; max-width:calc(100vw - 28px); max-height:70vh; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--workspace-surface); box-shadow:0 14px 40px #0003; }
.organisation-menu a,.organisation-menu button { display:flex; align-items:center; width:100%; gap:10px; padding:10px 9px; border:0; background:transparent; text-decoration:none; text-align:left; color:var(--ink); font-size:calc(13px * var(--font-scale)); border-radius:6px; }
.organisation-menu a:hover,.organisation-menu button:hover { background:var(--workspace-hover); }
.organisation-menu small { display:block; font-size:11px; margin-top:3px; }
.organisation-menu p { font-size:12px; margin:10px 9px 5px; color:var(--muted); }
.menu-divider { height:1px; background:var(--line); margin:6px; }
.org-check { margin-left:auto; }
.workspace-signed-in #header-project { display:block; padding:0 4px; min-width:0; max-width:none; }
.workspace-signed-in #header-project .picker { width:100%; min-width:0; }
.workspace-signed-in #header-project .picker-trigger { width:100%; min-width:0; max-width:100%; background:transparent; font-size:calc(12px * var(--font-scale)); }
.workspace-signed-in #header-project .choice-trigger { width:100%; max-width:none; background:transparent; font-size:calc(12px * var(--font-scale)); }
.workspace-signed-in #navigation { display:block; flex:1; overflow-y:auto; padding:0 2px; min-height:0; }
.workspace-signed-in .sidebar .nav-label { margin:14px 8px 4px; font-size:calc(11px * var(--font-scale)); letter-spacing:.01em; text-transform:none; color:var(--muted); }
.workspace-signed-in .nav-label button { padding:0; text-transform:none; }
.workspace-signed-in #navigation a { justify-content:flex-start; display:flex; align-items:center; gap:10px; border:0; border-radius:6px; padding:8px 10px; margin:1px 0; color:var(--muted); font-size:calc(13px * var(--font-scale)); font-weight:500; text-decoration:none; }
.workspace-signed-in #navigation a:hover,.workspace-signed-in #navigation a[aria-current="page"] { background:var(--workspace-hover); color:var(--ink); }
.nav-icon { width:17px; height:17px; flex:none; }
.workspace-signed-in .sidebar-foot { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:10px 3px 0; margin:0; border-top:1px solid var(--line); }
.workspace-signed-in .sidebar-foot #version { display:none; }
.workspace-signed-in #account { position:relative; display:block; flex:1; min-width:0; }
.workspace-signed-in #account-toggle { display:flex; align-items:center; gap:9px; width:100%; height:auto; min-height:43px; border:0; border-radius:7px; background:transparent; padding:4px; text-align:left; }
.workspace-signed-in #account-initial { display:grid; place-items:center; border-radius:50%; width:30px; height:30px; background:var(--workspace-hover); flex:none; color:var(--ink); }
.sidebar-account-name { min-width:0; color:var(--ink); font-size:calc(12px * var(--font-scale)); }
.sidebar-account-name strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sidebar-account-name small { display:block; font-size:calc(10px * var(--font-scale)); font-weight:400; margin-top:2px; }
.sidebar-theme { border:0; background:transparent; padding:5px; font-size:20px; color:var(--muted); }
.workspace-signed-in .account-menu { top:auto; bottom:calc(100% + 8px); left:0; right:auto; min-width:190px; border:1px solid var(--line); border-radius:10px; background:var(--workspace-surface); z-index:220; }
.workspace-signed-in .workarea { border:1px solid var(--line); border-radius:15px; overflow:hidden; min-width:0; background:var(--workspace-surface); }
.workspace-signed-in .workspace { padding:calc(32px * var(--space-scale)); background:var(--workspace-surface); }
.workspace-signed-in .workspace h1 { font-size:calc(27px * var(--font-scale)); font-weight:600; letter-spacing:-.04em; }
.workspace-signed-in .workspace h2 { font-size:calc(17px * var(--font-scale)); font-weight:600; letter-spacing:-.02em; }
.workspace-signed-in .workspace h3 { font-size:calc(15px * var(--font-scale)); }
.workspace-signed-in .workspace button,.workspace-dialog button { border-radius:6px; border-width:1px; font-size:calc(12px * var(--font-scale)); }
.workspace-signed-in button.primary,.workspace-dialog button.primary { color:var(--workspace-surface); background:var(--ink); border-color:var(--ink); font-weight:600; }
.workspace-signed-in .workspace input,.workspace-signed-in .workspace textarea,.workspace-dialog input,.workspace-dialog textarea,.workspace-dialog select { border:1px solid var(--line); border-radius:6px; background:var(--workspace-surface); color:var(--ink); }
.workspace-signed-in table { border-collapse:collapse; width:100%; font-size:calc(13px * var(--font-scale)); }
.workspace-signed-in table th { font-size:calc(11px * var(--font-scale)); font-weight:500; color:var(--muted); background:transparent; text-transform:none; letter-spacing:0; padding:13px 16px; border-bottom:1px solid var(--line); }
.workspace-signed-in table td { padding:14px 16px; border-bottom:1px solid var(--line); }
.workspace-signed-in table td small { display:block; }
.workspace-signed-in table tr:last-child td { border-bottom:0; }
.workspace-signed-in .settings-panel,.workspace-signed-in .record-table { background:var(--workspace-surface); border:1px solid var(--line); border-radius:10px; box-shadow:none; }
.workspace-signed-in .settings-panel { padding:20px; }
.settings-layout { display:grid; grid-template-columns:155px minmax(0,1fr); gap:calc(36px * var(--space-scale)); max-width:1280px; margin:12px auto; }
.settings-navigation { align-self:start; position:sticky; top:0; }
.settings-navigation h2 { margin:0 0 28px; }
.settings-navigation p { margin:24px 8px 8px; color:var(--muted); font-size:calc(11px * var(--font-scale)); }
.settings-navigation a,.settings-navigation button { display:block; width:100%; border:0; padding:9px 10px; margin:2px 0; text-align:left; background:transparent; border-radius:6px; text-decoration:none; color:var(--muted); font-size:calc(13px * var(--font-scale)); }
.settings-navigation a[aria-current="page"],.settings-navigation a:hover,.settings-navigation button:hover { color:var(--ink); background:var(--workspace-hover); }
.settings-body { min-width:0; }
.workspace-page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:0 0 28px; }
.workspace-page-heading h1 { margin:0 0 8px; }
.workspace-page-heading p { color:var(--muted); font-size:calc(13px * var(--font-scale)); margin:0; max-width:640px; }
.workspace-page-heading > button { flex:none; width:auto; margin-top:5px; white-space:nowrap; }
.workspace-page-heading > div:first-child { min-width:0; flex:1; }
.workspace-dialog button.primary,.workspace-empty button.primary,.invitation-card button.primary { width:auto; margin-top:0; }
.workspace-dialog input[type="checkbox"] { width:auto; }
.workspace-panel { border:1px solid var(--line); border-radius:11px; padding:22px; margin-bottom:22px; background:var(--workspace-surface); overflow:auto; }
.workspace-panel.flush { padding:0; }
.workspace-panel h2 { margin:0 0 12px; }
.workspace-panel p { font-size:calc(13px * var(--font-scale)); }
.table-foot { padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:calc(12px * var(--font-scale)); }
.quiet-badge { display:inline-block; margin-left:4px; padding:2px 5px; border-radius:4px; background:var(--workspace-hover); color:var(--muted); font-size:10px; }
.workspace-empty { text-align:center; padding:36px 20px; color:var(--muted); }
.workspace-empty h3 { color:var(--ink); margin:10px 0 8px; font-weight:500; }
.workspace-empty p { margin:0 auto 12px; max-width:420px; font-size:calc(13px * var(--font-scale)); }
.empty-symbol { font-size:25px; color:var(--muted); }
.workspace-details { display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; font-size:calc(13px * var(--font-scale)); }
.workspace-details dt { color:var(--muted); }.workspace-details dd { margin:0; min-width:0; }
.workspace-dialog { width:min(500px,calc(100vw - 28px)); max-height:85dvh; overflow:auto; border:1px solid var(--line); border-radius:14px; padding:26px; background:var(--workspace-surface); color:var(--ink); box-shadow:0 24px 80px #0004; }
.workspace-dialog::backdrop { background:#0007; backdrop-filter:blur(2px); }
.workspace-dialog h2 { font:600 calc(21px * var(--font-scale)) var(--body); margin-bottom:12px; }
.workspace-dialog p { color:var(--muted); font-size:calc(13px * var(--font-scale)); }
.workspace-dialog label { display:block; margin:16px 0 7px; font-size:calc(12px * var(--font-scale)); }
.workspace-dialog input:not([type=checkbox]),.workspace-dialog textarea,.workspace-dialog select { width:100%; padding:10px; }
.workspace-dialog fieldset { border:1px solid var(--line); padding:5px 12px 12px; border-radius:7px; margin-top:20px; max-height:220px; overflow:auto; }
.workspace-dialog legend { color:var(--muted); font-size:12px; }
.workspace-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:25px; }
.workspace-dialog .form-error { color:#c45d4e; margin-top:12px; }
.workspace-dialog .checkline { display:flex; align-items:center; gap:8px; }
.invitation-card { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.usage-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 26px; border:1px solid var(--line); border-radius:10px; }
.usage-summary section { padding:20px; border-right:1px solid var(--line); }.usage-summary section:last-child {border:0;}
.usage-summary span,.usage-summary small { display:block; color:var(--muted); font-size:calc(12px * var(--font-scale)); }
.usage-summary strong { display:block; font-size:calc(30px * var(--font-scale)); font-weight:550; letter-spacing:-.04em; margin:8px 0; font-variant-numeric:tabular-nums; }
.usage-chart { display:flex; gap:4px; align-items:flex-end; height:190px; padding:14px 0 0; margin:15px 0; border-bottom:1px solid var(--line); }
.usage-day { flex:1; min-width:0; text-align:center; }.usage-bar { background:#84988d; border-radius:3px 3px 0 0; min-height:2px; }.usage-day small { display:block; height:20px; font-size:9px; margin-top:5px; }
.usage-filters label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }.usage-filters input {padding:8px;}
.usage-limits { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:20px 0; }.usage-limits span,.usage-limits strong { display:block; margin-bottom:7px; font-size:12px; }.usage-limits progress {width:100%;height:6px;accent-color:#84988d;}
.docs-layout { display:grid; grid-template-columns:185px minmax(0,1fr) 160px; gap:38px; max-width:1380px; margin:10px auto; }
.docs-navigation,.docs-toc {position:sticky;top:0;align-self:start;}.docs-navigation input {width:100%;padding:9px;font-size:12px;margin:8px 0 18px;}
.docs-navigation button,.docs-navigation a,.docs-toc button {display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--muted);font-size:calc(12px * var(--font-scale));padding:9px;border-radius:5px;text-decoration:none;line-height:1.45;}
.docs-navigation button:hover,.docs-navigation button[aria-current],.docs-toc button:hover {background:var(--workspace-hover);color:var(--ink);}
.docs-article {min-width:0;max-width:760px;}.docs-article section {margin:32px 0;scroll-margin-top:25px;}.docs-article section p {font-size:calc(14px * var(--font-scale));line-height:1.8;color:var(--muted);}
.docs-code {position:relative;border:1px solid var(--line);border-radius:9px;background:var(--workspace-hover);padding:20px;}.docs-code button {position:absolute;right:8px;top:8px;}.docs-code pre {padding-top:12px;margin:0;}
.docs-next {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px;}.docs-next button {text-align:left;border:1px solid var(--line);padding:16px;background:transparent;}.docs-next strong,.docs-next span {display:block;}.docs-next span {font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6;}
.workspace-signed-in.shell-collapsed .app {grid-template-columns:64px minmax(0,1fr);}
.shell-collapsed .sidebar-brand .brand,.shell-collapsed .organisation-label,.shell-collapsed .org-chevron,.shell-collapsed #header-project,.shell-collapsed #navigation a > span,.shell-collapsed .nav-label,.shell-collapsed .sidebar-account-name,.shell-collapsed .sidebar-theme,.shell-collapsed #project-switcher {display:none!important;}
.shell-collapsed .sidebar-brand {justify-content:center;padding:0 0 12px;}.shell-collapsed .organisation-toggle {padding:5px;border:0;background:transparent;}.shell-collapsed #navigation a {justify-content:center;padding:11px 0;}.shell-collapsed .nav-group {margin-bottom:12px;}
.workspace-signed-in .app[data-workflow-studio="true"] .workspace {padding:0;}
.workspace-signed-in .app[data-workflow-sidebar-collapsed="true"] {grid-template-columns:0 minmax(0,1fr);}
@media(max-width:1150px){.docs-layout {grid-template-columns:165px minmax(0,1fr);gap:26px;}.docs-toc {display:none;}.settings-layout{gap:22px;grid-template-columns:140px minmax(0,1fr);}}
@media(max-width:850px){.workspace-signed-in .app {grid-template-columns:190px minmax(0,1fr);}.settings-layout {grid-template-columns:1fr;}.settings-navigation {position:static;display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;}.settings-navigation h2,.settings-navigation p,.settings-navigation button,.settings-navigation a[href="#page/invitations"] {display:none;}.settings-navigation a{width:auto;padding:7px 9px;}.usage-summary{grid-template-columns:repeat(2,1fr);}.usage-summary section{border-bottom:1px solid var(--line);}.usage-summary section:nth-child(2){border-right:0;}.docs-layout {grid-template-columns:1fr;}.docs-navigation{position:static;}.docs-navigation #docs-links{display:flex;flex-wrap:wrap;}.docs-navigation button{width:auto;}.workspace-page-heading{flex-wrap:wrap;}}
@media(max-width:600px){.workspace-signed-in .app{grid-template-columns:64px minmax(0,1fr);padding:4px 4px 4px 0;}.workspace-signed-in .sidebar{padding:8px 6px;}.sidebar-brand .brand,.organisation-label,.org-chevron,.workspace-signed-in #header-project,.workspace-signed-in #navigation a>span,.workspace-signed-in .nav-label,.sidebar-account-name,.sidebar-theme{display:none!important;}.sidebar-brand{justify-content:center;padding:0;}.organisation-toggle{padding:5px;background:transparent;}.workspace-signed-in #navigation a{padding:11px 0;justify-content:center;}.workspace-signed-in .nav-group{display:block;margin-bottom:10px;min-width:0;}.workspace-signed-in .nav-group>div{display:block;}.workspace-signed-in .workspace{padding:16px;}.workspace-page-heading h1{font-size:23px!important;}.workspace-panel{padding:16px;}.usage-limits{grid-template-columns:1fr;gap:10px;}.workspace-details{grid-template-columns:1fr;gap:8px;}.docs-next{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:no-preference){.workspace-signed-in .app{transition:grid-template-columns .18s ease;}.organisation-menu{animation:finder-appear .12s ease-out;}}

.usage-filters { display:flex; gap:12px; flex-wrap:wrap; }
.usage-filters select { min-width:150px; }

html[data-theme="dark"] body.workspace-signed-in .sidebar { background:var(--workspace-sidebar); }
html[data-theme="dark"] body.workspace-signed-in #navigation a { color:var(--muted); }
html[data-theme="dark"] body.workspace-signed-in #navigation a[aria-current],html[data-theme="dark"] body.workspace-signed-in #navigation a:hover { background:var(--workspace-hover);color:var(--ink); }
html[data-theme="dark"] body.workspace-signed-in .nav-label button,html[data-theme="dark"] body.workspace-signed-in .settings-navigation button,html[data-theme="dark"] body.workspace-signed-in .docs-navigation button,html[data-theme="dark"] body.workspace-signed-in .docs-toc button { background:transparent;color:var(--muted); }
html[data-theme="dark"] body.workspace-signed-in .settings-navigation a { color:var(--muted); }
html[data-theme="dark"] body.workspace-signed-in .settings-navigation a[aria-current],html[data-theme="dark"] body.workspace-signed-in .docs-navigation button[aria-current] { background:var(--workspace-hover);color:var(--ink); }
.workspace-signed-in .workspace .inline-text-view { font:inherit; letter-spacing:inherit; line-height:inherit; }