:root {
  color-scheme:only light;
  --ink:#292825; --muted:#686761; --green:#176286; --green-light:#ecf4f7;
  --line:#dfded8; --paper:#fbfaf7; --surface:#fff; --white:var(--surface); --navy:#fff;
  --panel:#f7f7f3; --sidebar:#fff; --hover:#f0f0eb; --selection:#e9f1f4;
  --workflow-row:#efefe9; --workflow-row-hover:#e5e6df;
  --border-strong:#858d92; --accent-border:#a8c6d6; --on-accent:#fff; --accent-hover:#124d6d;
  --success:#216344; --success-bg:#ebf4ec; --warning:#795215; --warning-bg:#fff5df;
  --danger:#a33232; --danger-bg:#fff0ed; --danger-border:#dfb5ad;
  --info-bg:#edf4f7; --info-border:#c1d6df; --info-text:#365966;
  --overlay:#13222c73; --shadow:#192d3530; --caption:#737c78;
  --radius-small:6px; --radius-control:8px; --radius-item:12px; --radius-panel:18px; --radius-dialog:20px;
  --sidebar-width:232px; --header-height:76px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
:root[data-theme="dark"] {
  color-scheme:only dark;
  --ink:#ecebe7; --muted:#b4b2ac; --green:#8fc9e8; --green-light:#223740;
  --line:#3b3c3f; --paper:#17191c; --surface:#202226; --navy:#141618;
  --panel:#25282b; --sidebar:#141618; --hover:#2c3034; --selection:#263a43;
  --workflow-row:#2d3034; --workflow-row-hover:#363a3f;
  --border-strong:#747b81; --accent-border:#466573; --on-accent:#102d3d; --accent-hover:#a7d8f1;
  --success:#a0d5af; --success-bg:#22392c; --warning:#efd09a; --warning-bg:#3a3222;
  --danger:#ffa79f; --danger-bg:#432929; --danger-border:#79504c;
  --info-bg:#25353e; --info-border:#455963; --info-text:#bad7e3;
  --overlay:#080a0db3; --shadow:#00000060; --caption:#9aa3aa;
}

* {
  box-sizing:border-box
}

/* Keep the workbench shell quiet; color belongs to selection and test state. */
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.ui-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.topbar {
  position:sticky;
  top:0;
  z-index:30;
  min-height:var(--header-height);
  padding:9px 20px;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--navy);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink);
  font-size:17px; font-weight:650; letter-spacing:-.2px; flex-shrink:0;
}
.brand-logo { display:block; width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.document-heading { display:flex; align-items:center; gap:12px; min-width:0; margin-right:auto; padding-left:18px; border-left:1px solid var(--line); }
.topbar-title { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.workspace-name { font-size:12px; color:var(--muted); }
.topbar .small-pill { background:var(--panel); border-color:var(--line); color:var(--muted); }
.topbar-actions { display:flex; align-items:center; gap:10px; min-width:0; margin-left:auto; }
.topbar-actions label { font-size:12px; color:var(--muted); white-space:nowrap; }
.topbar-actions select {
  min-height:44px; border:1px solid var(--border-strong); border-radius:var(--radius-control); background:var(--surface);
  color:var(--ink); padding:8px 28px 8px 10px; min-width:120px; max-width:190px;
}
.connection { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.connection:before { content:""; height:7px; width:7px; background:var(--caption); border-radius:50%; flex-shrink:0; }
.connection.online:before { background:var(--success); }
.connection.offline:before { background:var(--warning); }
.sidebar {
  width:var(--sidebar-width); position:fixed; inset:var(--header-height) auto 0 0;
  background:var(--sidebar); border-right:1px solid var(--line); padding:22px 12px 18px;
  display:flex; flex-direction:column; z-index:10; overflow:auto;
}
.navigator-heading { display:flex; align-items:center; padding:0 10px 16px; }
.navigator-heading h2 { font-size:12px; font-weight:500; color:var(--muted); margin:0; letter-spacing:0; }
.nav-button {
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px 0;
  border:1px solid transparent; background:transparent; border-radius:var(--radius-control);
  color:var(--muted); width:100%; text-align:left; font-size:14px; font-weight:500; min-height:44px;
}
.nav-button:hover { background:var(--hover); }
.nav-button.active { background:var(--selection); color:var(--green); border-left:3px solid var(--green); padding-left:10px; font-weight:600; }
.nav-count { margin-left:auto; background:var(--hover); border-radius:var(--radius-small); min-width:22px; text-align:center; font-size:11px; padding:1px 5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sidebar-note { margin-top:auto; border-top:1px solid var(--line); padding:18px 10px 0; }
.sidebar-note .eyebrow { font-size:10px; margin-bottom:7px; }
.sidebar-note p { font-size:12px; margin:0 0 12px; color:var(--muted); line-height:1.6; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--success); display:inline-block; flex-shrink:0; }
.workspace { margin-left:var(--sidebar-width); min-height:calc(100vh - var(--header-height)); display:flex; flex-direction:column; min-width:0; }
.workspace-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:4px 28px; min-height:54px; background:var(--surface); border-bottom:1px solid var(--line); }
.workspace-toolbar .button.secondary { border-color:transparent; background:transparent; }
.workspace-toolbar .button.secondary:hover { background:var(--panel); border-color:var(--line); }
.workspace-toolbar .button.active { background:var(--selection); color:var(--green); border-color:var(--accent-border); }
.toolbar-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:100%; min-width:0; }
.toolbar-group:last-child { margin-left:auto; }
.toolbar-context { font-size:12px; color:var(--muted); margin-left:auto; }
main { padding:32px 36px; width:100%; max-width:1700px; margin:0 auto; flex:1; min-width:0; }
#main,#browse-title,#assignment-title,#selected-task-title,.workflow-card { scroll-margin-top:80px; }
.workspace-statusbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 28px; background:var(--paper); border-top:1px solid var(--line); color:var(--muted); font-size:11px; flex-wrap:wrap; }

/* The catalogue and selected workflow are distinct from the active report form. */
.workflow-section { min-width:0; align-self:start; align-content:start; grid-auto-rows:min-content; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:22px; }
.assignment-section { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); }
.assignment-section>.section-heading,.inspector-heading { padding:14px 20px; margin:0; background:transparent; border-bottom:1px solid var(--line); }
.assignment-section.has-active-task .reporting-heading { background:var(--surface); }
.assignment-section .active-task { border:0; border-radius:0 0 var(--radius-panel) var(--radius-panel); }
.assignment-section>.task-inspector:first-child { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
.task-inspector[hidden]+.reporting-heading { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
.task-inspector { border-bottom:1px solid var(--line); background:var(--panel); overflow-wrap:anywhere; }
.task-inspector .inspector-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.task-inspector .inspector-heading h2 { font-size:14px; margin:0; }
.inspector-body { padding:20px; }
.inspector-return { margin:8px 0 0; width:100%; }
.inspector-body h4 { margin:18px 0 8px; font-size:13px; }
.task-inspector h3 { font-size:17px; margin:10px 0 7px; }
.task-inspector p { font-size:13px; }
.task-inspector dl { grid-template-columns:100px minmax(0,1fr); font-size:12px; }
.task-inspector .button { width:100%; }
.inspector-empty { padding:20px; color:var(--muted); }
.inspector-empty h3 { margin:0 0 6px; color:var(--ink); font-size:15px; }
.inspector-empty p { margin:0; line-height:1.7; }
.catalogue-display-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
#catalog-layout { display:inline-flex; }
#catalog-layout .button { border-radius:0; padding:8px 12px; }
#catalog-layout .button:first-child { border-radius:var(--radius-control) 0 0 var(--radius-control); }
#catalog-layout .button:last-child { border-radius:0 var(--radius-control) var(--radius-control) 0; margin-left:-1px; }
#catalog-layout [aria-pressed="true"] { background:var(--selection); border-color:var(--accent-border); color:var(--green); }
#toggle-inspector { margin-left:auto; }
.row-selector { display:inline; background:transparent; border:0; border-radius:var(--radius-control); color:var(--green); padding:4px 0; text-align:left; font:inherit; min-height:44px; overflow-wrap:anywhere; }
.row-selector:hover { color:var(--green); text-decoration:underline; }
.workflow-card.selected { border-color:var(--accent-border); background:var(--selection); box-shadow:inset 3px 0 var(--green); }
.workflow-list[data-layout="list"] .workflow-card { display:grid; grid-template-columns:minmax(0,1fr) 148px; column-gap:16px; row-gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-item); }
.workflow-list[data-layout="list"] .workflow-card h3 { grid-column:1; grid-row:1; margin:0; }
.workflow-list[data-layout="list"] .workflow-top { grid-column:2; grid-row:1; margin:0; justify-content:flex-end; }
.workflow-list[data-layout="list"] .task-icon { display:none; }
.workflow-list[data-layout="list"] .workflow-description { grid-column:1; grid-row:2; margin:0 0 5px; font-size:13px; }
.workflow-list[data-layout="list"] .workflow-type { grid-column:1; grid-row:3; margin:0 0 7px; font-size:11px; }
.workflow-list[data-layout="list"] .task-meta { grid-column:1; grid-row:4; border:0; padding:0; font-size:12px; }
.workflow-list[data-layout="list"] .workflow-bottom { grid-column:2; grid-row:2 / span 3; flex-direction:column; align-items:flex-end; justify-content:flex-end; padding:0; gap:8px; }
.workflow-list[data-layout="list"] .places { font-size:11px; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.workflow-list[data-layout="grid"] { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.workflow-list[data-layout="list"] { gap:8px; }
.workflow-list[data-layout="list"] .workflow-card { background:var(--workflow-row); }
.workflow-list[data-layout="list"] .workflow-card:hover { background:var(--workflow-row-hover); }
.workflow-list[data-layout="list"] .workflow-card.selected { background:var(--selection); }
.workflow-list[data-layout="list"] .workflow-bottom .button { border-color:transparent; color:var(--green); background:transparent; }
.workflow-list[data-layout="list"] .workflow-bottom .button:hover { text-decoration:underline; }
.meta-label { font-size:11px; font-weight:600; color:var(--muted); }
.pill.task-status { padding:0; border-radius:0; background:transparent; font-size:12px; font-weight:500; }
.pill.task-status.success,.pill.task-status.active,.pill.task-status.failure { background:transparent; }


body {
  margin:0;
  font-size:15px;
  line-height:1.55
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none
}

button:disabled {
  cursor:not-allowed;
  opacity:.5
}

a {
  color:var(--green)
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-size:38px;
  line-height:1.16;
  letter-spacing:-.7px;
  font-weight:500;
  margin-bottom:6px
}

h2 {
  font-size:18px;
  line-height:1.35;
  letter-spacing:-.35px
}

h3 {
  font-size:17px;
  line-height:1.4
}

p {
  margin-bottom:16px
}

[hidden] {
  display:none!important
}

:focus-visible {
  outline:3px solid var(--green);
  outline-offset:4px
}

button:focus-visible {
  outline-offset:3px
}

.topbar :focus-visible {
  outline-color:var(--green)
}

html {
  scroll-padding-top:80px;
  scroll-padding-bottom:24px
}

.skip-link {
  position:fixed;
  z-index:100;
  top:-70px;
  left:16px;
  background:var(--surface);
  padding:12px
}

.skip-link:focus {
  top:12px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.2px;
  color:var(--muted);
  font-weight:500;
  margin-bottom:8px;
  display:block
}

.page-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:24px
}

.intro {
  color:var(--muted);
  font-size:14px;
  margin-bottom:0;
  max-width:650px
}

.button {
  -webkit-appearance:none;
  appearance:none;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  padding:10px 15px;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  min-height:44px;
  white-space:normal
}

.button.primary {
  background:var(--green);
  color:var(--on-accent)
}

.button.primary:hover:not(:disabled) {
  background:var(--accent-hover)
}

.button.secondary {
  background:var(--surface);
  border-color:var(--border-strong);
  color:var(--ink)
}

.button.secondary:hover:not(:disabled) {
  background:var(--hover)
}

.button.danger {
  color:var(--danger);
  border-color:var(--danger-border);
  background:var(--surface)
}

.button.small {
  padding:7px 12px;
  min-height:44px
}

.small-pill {
  display:inline-block;
  border:1px solid var(--line);
  border-radius:var(--radius-small);
  background:var(--panel);
  padding:2px 7px;
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap
}

.number-pill {
  background:var(--hover);
  color:var(--muted);
  font-size:11px;
  padding:3px 7px;
  border-radius:var(--radius-small);
  vertical-align:middle;
  margin-left:7px
}

.pill {
  display:inline-block;
  font-size:12px;
  padding:4px 8px;
  border-radius:var(--radius-small);
  background:var(--hover);
  color:var(--muted);
  font-weight:600
}

.pill.success {
  color:var(--success);
  background:var(--success-bg)
}

.pill.active {
  background:var(--warning-bg);
  color:var(--warning)
}

.pill.released {
  color:var(--muted);
  background:var(--hover)
}

.welcome-card {
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  margin-bottom:24px
}

.welcome-card h2 {
  font-size:14px;
  letter-spacing:0;
  margin-bottom:4px
}

.welcome-card p {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
  max-width:630px
}

.welcome-card .button {
  flex-shrink:0
}

.welcome-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
  justify-content:flex-end
}

.catalog-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  align-content:start;
  grid-auto-rows:min-content;
  gap:10px;
  padding:0;
  border:0;
  border-radius:var(--radius-control);
  background:transparent
}

.catalog-search {
  grid-column:1 / -1
}

.catalog-filter-options { grid-column:1 / -1; min-width:0; }
.catalog-filter-options summary { display:none; min-height:44px; padding:10px 0; color:var(--green); font-size:13px; font-weight:600; cursor:pointer; }
.catalog-filter-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:10px; align-items:end; }
.catalog-filter-fields>.button { justify-self:start; }

.catalog-controls .field {
  margin:0
}

.catalog-controls>.button {
  justify-self:start
}

.catalog-pages {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0;
  font-size:12px;
  color:var(--muted)
}

.workflow-context {
  font-size:12px;
  margin:16px 0;
  overflow-wrap:anywhere
}

.work-grid {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  align-items:start;
  gap:24px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px
}

.section-heading h2 {
  font-size:16px;
  margin:0
}

.muted {
  color:var(--muted);
  font-size:10px
}

.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-panel)
}

.workflow-list {
  display:grid;
  gap:12px
}

.next-tests {
  margin-bottom:32px;
  padding:20px;
  border:1px solid var(--info-border);
  border-radius:var(--radius-panel);
  background:var(--info-bg)
}

.next-tests .section-heading {
  flex-wrap:wrap
}

.suggestion-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:16px;
  margin-bottom:14px
}

.workflow-card .suggestion-reason {
  color:var(--green);
  font-weight:600
}

.suggestion-list .task-meta {
  margin-bottom:16px
}

.next-tests>.scope-note:last-child {
  margin-bottom:0
}

.management-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:24px;
  align-items:start
}

.task-editor,.managed-task {
  padding:24px
}

.managed-task h3 {
  margin-top:12px
}

.task-editor textarea {
  min-height:100px
}

#workflow-steps {
  min-height:140px
}

@media(max-width:1100px) {
  .management-grid {
    grid-template-columns:minmax(0,1fr)
  }
}

.workflow-card {
  padding:16px;
  position:relative;
  overflow:hidden
}

.workflow-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}

.task-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid var(--info-border);
  border-radius:var(--radius-control);
  color:var(--green);
  font-size:19px;
  background:var(--info-bg)
}

.workflow-card h3 {
  font-size:17px;
  font-weight:600;
  letter-spacing:0;
  margin-bottom:8px
}

.workflow-card>p {
  color:var(--muted);
  font-size:12px;
  margin-bottom:19px
}

.task-meta {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px
}

.task-meta span {
  display:flex;
  gap:5px;
  align-items:center
}

.workflow-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px
}

.places {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:var(--muted)
}

.scope-note {
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin:15px 2px 0
}

.empty-state {
  text-align:left;
  padding:24px 20px
}

.empty-state h3 {
  font-size:15px;
  margin-bottom:9px
}

.empty-state p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  max-width:48ch;
  margin:0
}

.active-content {
  padding:18px
}

.active-content h3 {
  font-size:20px;
  letter-spacing:-.5px;
  margin:12px 0 10px
}

.deadline {
  font-size:11px;
  color:var(--muted);
  background:var(--panel);
  border-radius:var(--radius-item);
  padding:10px 12px;
  margin-bottom:19px
}

.steps {
  padding-left:21px;
  font-size:12px;
  color:var(--ink);
  line-height:1.8
}

.steps li {
  padding-left:4px;
  margin-bottom:7px
}

.expected {
  font-size:12px;
  color:var(--muted);
  line-height:1.7
}

.form-divider {
  height:1px;
  background:var(--line);
  margin:24px 0
}

.result-form h3 {
  font-size:16px;
  margin-bottom:8px
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.environment-fields {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}

.field {
  margin-bottom:14px
}

.field label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px
}

.field input,.field select,.field textarea {
  display:block;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-control);
  width:100%;
  padding:9px 10px;
  background:var(--surface);
  color:var(--ink);
  font-size:16px;
  min-height:44px
}

.field textarea {
  resize:vertical;
  min-height:76px
}

.result-form>.button {
  width:100%
}

.release {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:15px
}

.release summary {
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  padding:5px 0
}

.release p {
  font-size:11px;
  color:var(--muted);
  margin:10px 0
}

.loading {
  color:var(--muted);
  padding:25px;
  font-size:12px
}

.info-note {
  padding:15px 18px;
  background:var(--info-bg);
  border:1px solid var(--info-border);
  border-radius:var(--radius-item);
  font-size:12px;
  color:var(--info-text);
  margin-bottom:20px
}

.activity-list {
  display:grid;
  gap:14px
}

.activity-item {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px
}

.activity-item .activity-description {
  flex:1
}

.activity-item h2 {
  font-size:17px;
  margin-bottom:5px
}

.activity-item p {
  color:var(--muted);
  font-size:11px;
  margin-bottom:0
}

.activity-item .pill {
  margin-bottom:8px
}

.activity-item .button {
  flex-shrink:0
}

.activity-empty {
  padding:60px 30px;
  text-align:center
}

.activity-empty h2 {
  margin-bottom:8px
}

.activity-empty p {
  color:var(--muted);
  font-size:13px
}

.milestone-list {
  display:grid;
  gap:16px
}

.milestone {
  display:flex;
  gap:18px;
  padding:20px 22px;
  align-items:flex-start
}

.milestone-number {
  font-size:34px;
  line-height:1;
  color:var(--caption);
  font-weight:550;
  letter-spacing:-1px;
  min-width:49px;
  margin-top:4px
}

.milestone h2 {
  font-size:21px;
  margin:12px 0 9px
}

.milestone p {
  color:var(--muted);
  font-size:13px;
  max-width:780px;
  margin:0;
  line-height:1.8
}

.progress-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:22px
}

.progress-panel {
  padding:25px
}

.progress-panel h2 {
  font-size:22px
}

.progress-panel p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}

.connection-path {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:11px;
  margin:22px 0;
  color:var(--muted)
}

.connection-path span:nth-child(odd) {
  padding:8px 11px;
  background:var(--hover);
  border-radius:var(--radius-control);
  color:var(--green)
}

.demo-guide {
  padding:28px 0 8px
}

.demo-guide h2 {
  font-size:18px
}

.demo-guide ol {
  font-size:13px;
  color:var(--muted);
  padding-left:20px;
  line-height:2
}

.page-footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:40px;
  padding-top:12px;
  font-size:10px;
  color:var(--muted)
}

.error-banner {
  background:var(--danger-bg);
  color:var(--danger);
  border:1px solid var(--danger-border);
  padding:14px 17px;
  border-radius:var(--radius-item);
  margin-bottom:20px;
  font-size:12px
}

.toast {
  position:fixed;
  bottom:68px;
  right:24px;
  max-width:min(440px,calc(100vw - 32px));
  padding:15px 20px;
  border-radius:var(--radius-item);
  background:var(--green);
  color:var(--on-accent);
  font-size:13px;
  box-shadow:0 6px 24px var(--shadow);
  z-index:50
}

.toast.error {
  background:var(--danger)
}

dialog {
  border:1px solid var(--line);
  border-radius:var(--radius-dialog);
  width:min(600px,calc(100vw - 32px));
  max-height:88vh;
  padding:26px;
  color:var(--ink);
  box-shadow:0 20px 70px var(--shadow)
}

dialog::backdrop {
  background:var(--overlay);
}

.dialog-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px
}

.dialog-header .eyebrow {
  margin:0
}

.icon-button {
  flex-shrink:0;
  height:44px;
  width:44px;
  font-size:25px;
  line-height:1;
  background:var(--hover);
  border:0;
  border-radius:var(--radius-control);
  color:var(--muted)
}

dialog h2 {
  font-size:26px;
  margin-bottom:12px
}

dialog p {
  font-size:13px;
  color:var(--muted)
}

dialog .steps {
  font-size:13px
}

dialog .button {
  margin-top:10px;
  width:100%
}

.detail-heading {
  font-size:12px;
  font-weight:650;
  margin:24px 0 12px
}

dl {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:11px;
  font-size:13px;
  margin:24px 0
}

dt {
  color:var(--muted)
}

dd {
  margin:0;
  overflow-wrap:anywhere
}

.result-explanation {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--panel);
  border-radius:var(--radius-item);
  padding:14px
}

.modal-message {
  font-size:12px;
  margin:15px 0 0
}

.pill.failure {
  background: var(--danger-bg);
  color: var(--danger);
}
.file-status {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 10px 0;
}
.screenshot-preview {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius:var(--radius-item);
  margin: 12px auto;
}
.saved-evidence {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius:var(--radius-item);
  background: var(--panel);
}
.saved-evidence figcaption {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.report-history {
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.correction-history {
  list-style: none;
  padding: 0;
  font-size: 12px;
}
.correction-history li {
  border: 1px solid var(--line);
  border-radius:var(--radius-item);
  padding: 14px;
  margin-bottom: 12px;
}
.correction-history li p {
  font-size: 11px;
  margin: 8px 0;
}
.correction summary, .correction-history summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--green);
  padding: 8px 0;
}
.correction {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 12px;
}
.notification-message {
  overflow-wrap: anywhere;
}
.notification-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.review-filters {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px;
}
.review-state {
  margin-left:6px;
  background:var(--hover);
  color:var(--info-text);
}
.review-panel {
  padding:16px;
  margin:24px 0;
  border:1px solid var(--line);
  border-radius:var(--radius-item);
  background:var(--panel);
}
.report-conversation {
  padding:0;
  list-style:none;
}
.report-conversation li {
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-item);
  margin:12px 0;
  background:var(--surface);
}
.message-heading {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
}
.message-heading span {
  font-size:10px;
  color:var(--muted);
}
.report-instructions summary {
  cursor:pointer;
  color:var(--green);
  font-size:12px;
}
@media(prefers-reduced-motion:no-preference) {
  .button,.nav-button {
    transition:background .12s
  }
  .view {
    animation:appear .12s ease
  }
  @keyframes appear {
    from {
      opacity:.5;
      transform:translateY(3px)
    }
    to {
      opacity:1;
      transform:none
    }
  }
}

.active-shortcut {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
  padding:10px 16px;
  border:1px solid var(--accent-border);
  border-radius:var(--radius-item);
  background:var(--info-bg);
}
.active-shortcut p {
  margin:4px 0 0;
  font-size:14px;
  overflow-wrap:anywhere;
}
.active-shortcut>div,.workflow-bottom>*,.task-meta>* {
  min-width:0;
}
.workflow-card h3,.workflow-card p,.task-meta,.managed-task h3,.activity-description h2 {
  overflow-wrap:anywhere;
}
#dialog-content h2,#dialog-content p,.active-content h3 {
  overflow-wrap:anywhere;
}
.saved-feedback {
  background:var(--info-bg);
  border-color:var(--accent-border);
  color:var(--green);
}
.scope-note,.task-meta,.steps,.deadline,.expected,.file-status,.modal-message {
  font-size:13px;
}
.workflow-card>p {
  font-size:14px;
}
@media(max-width:780px) {
  .active-shortcut {
    align-items:flex-start;
    flex-wrap:wrap;
    padding:16px;
  }
  .workflow-bottom {
    flex-wrap:wrap;
    gap:12px;
  }
  .welcome-actions {
    width:100%;
  }
}

@media(min-width:781px) {
  .workflow-section { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; }
  .workflow-section>* { grid-column:1 / -1; }
  .catalogue-heading { grid-column:1; grid-row:1; flex-wrap:wrap; align-content:center; gap:3px 8px; margin-bottom:12px; }
  .catalogue-display-controls { grid-column:2; grid-row:1; justify-content:flex-end; }
  .catalogue-display-controls .button { padding:8px 10px; font-size:12px; }
  .workflow-list[data-layout="list"] .workflow-card { grid-template-columns:minmax(0,1fr) 106px 130px; gap:2px 12px; padding:14px 12px; }
  .workflow-list[data-layout="list"] .workflow-description { display:block; grid-column:1 / span 2; grid-row:2; margin:0 0 6px; font-size:13px; }
  .workflow-list[data-layout="list"] .workflow-type { display:none; }
  .workflow-list[data-layout="list"] .workflow-card h3 { grid-column:1; grid-row:1; font-size:15px; }
  .workflow-list[data-layout="list"] .workflow-top { grid-column:2; grid-row:1; }
  .workflow-list[data-layout="list"] .task-meta { grid-column:1 / span 2; grid-row:3; gap:8px; }
  .workflow-list[data-layout="list"] .workflow-bottom { grid-column:3; grid-row:1 / span 3; gap:6px; align-self:center; }
  .workflow-list[data-layout="list"] .places { font-size:12px; }
}
@media(max-width:1180px) {
  .document-heading { display:none; }
  .work-grid { grid-template-columns:minmax(0,1fr); }
  .management-grid { grid-template-columns:minmax(0,1fr); }
  .welcome-card { flex-wrap:wrap; }
  .welcome-actions { margin-left:0; justify-content:flex-start; }
}
@media(max-width:780px) {
  .topbar { position:relative; flex-wrap:wrap; padding:10px 14px; gap:10px; }
  .brand { font-size:16px; }
  .topbar-actions { flex-wrap:wrap; width:100%; gap:8px; }
  .connection { margin-right:auto; }
  .topbar-actions select { font-size:16px; max-width:170px; }
  .topbar-actions label { font-size:11px; }
  .sidebar { position:static; width:100%; padding:6px 8px; border-right:0; border-bottom:1px solid var(--line); }
  .navigator-heading,.sidebar-note { display:none; }
  .sidebar nav { display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; }
  .nav-button { width:auto; min-width:max-content; margin:0; padding:9px 12px; font-size:12px; gap:7px; }
  .nav-button.active { padding-left:12px; border-left:1px solid var(--accent-border); border-bottom:3px solid var(--green); }
  .nav-button>.ui-icon { width:17px; height:17px; }
  .nav-count { margin-left:3px; }
  .workspace { margin-left:0; min-height:calc(100vh - 170px); }
  .workspace-toolbar { padding:0 12px; gap:7px; min-height:44px; }
  .toolbar-group { padding-right:8px; }
  .toolbar-context { width:100%; margin-left:0; }
  main { padding:18px 16px 20px; }
  html { scroll-padding-top:20px; scroll-padding-bottom:20px; }
  #main,#browse-title,#assignment-title,#selected-task-title,.workflow-card { scroll-margin-top:20px; }
  h1 { font-size:30px; }
  .page-heading { align-items:flex-start; gap:10px; margin-bottom:16px; }
  .page-heading .button { flex-shrink:0; padding:9px 11px; font-size:12px; }
  .intro { font-size:13px; }
  .welcome-card { padding:14px; gap:12px; margin-bottom:20px; }
  .welcome-actions { width:100%; }
  .welcome-actions .button { flex:1; }
  .active-shortcut { align-items:flex-start; flex-wrap:wrap; padding:14px; }
  .workflow-section { padding:16px; }
  .catalog-controls { padding:0; gap:0; }
  .catalog-filter-options summary { display:list-item; margin-left:16px; }
  .catalog-filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:6px 0 12px; }
  .catalog-search { grid-column:1 / -1; }
  .catalog-filter-fields>.button { align-self:end; justify-self:stretch; }
  .workflow-card { padding:14px; }
  .workflow-list[data-layout="list"] .workflow-card { display:block; padding:14px; }
  .workflow-list[data-layout="list"] .workflow-top { margin-bottom:6px; }
  .workflow-list[data-layout="list"] .workflow-bottom { flex-direction:row; justify-content:space-between; padding-top:12px; align-items:center; }
  .workflow-list[data-layout="list"] .places { justify-content:flex-start; }
  .workflow-bottom { flex-wrap:wrap; gap:10px; }
  .work-grid { gap:16px; }
  .section-heading { flex-wrap:wrap; }
  .section-heading .muted { font-size:11px; }
  .active-content { padding:16px; }
  .empty-state { padding:20px; }
  .field-row { grid-template-columns:minmax(0,1fr); }
  .page-footer { flex-direction:column; gap:4px; margin-top:22px; }
  .workspace-statusbar { padding:7px 16px; font-size:11px; }
  .milestone { padding:16px; gap:14px; }
  .milestone-number { font-size:24px; min-width:32px; }
  .milestone h2 { font-size:18px; }
  .progress-grid { grid-template-columns:minmax(0,1fr); }
  .progress-panel,.task-editor,.managed-task { padding:16px; }
  .activity-item { padding:16px; align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .activity-item .task-icon { display:none; }
  .activity-item .button { margin-left:auto; }
  .toast { right:16px; bottom:16px; }
  dialog { padding:18px; }
  dialog h2 { font-size:21px; }
  dl { grid-template-columns:100px minmax(0,1fr); font-size:13px; }
  .connection-path { font-size:11px; gap:5px; }
  .connection-path span:nth-child(odd) { padding:8px; }
}
@media(max-width:420px) {
  .topbar-actions select { min-width:0; width:128px; }
  .connection { width:auto; }
  .review-filters { grid-template-columns:minmax(0,1fr); }
  .welcome-actions { flex-direction:column; }
  .welcome-actions .button { width:100%; }
  .catalog-pages { flex-wrap:wrap; }
  .catalog-pages span { text-align:center; flex:1; }
  .inspector-heading .small-pill { white-space:normal; }
}
@media print {
  .topbar,.sidebar,.workspace-toolbar,.workspace-statusbar,.toast { display:none; }
  .workspace { margin:0; }
  main { padding:0; }
  .work-grid { display:block; }
  .assignment-section { margin-top:16px; }
}

/* The catalogue is a secondary rail. The active test owns the working width. */
.workflow-heading-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.catalogue-collapsed>.page-heading,.catalogue-collapsed .work-grid { max-width:1160px; margin-inline:auto; }
.work-grid[data-catalogue-open="false"] { grid-template-columns:minmax(0,1fr); }
#view-workflows[data-working="true"]>.page-heading .intro { display:none; }
#view-workflows h1 { font-size:28px; }
#workflow-drawer { display:block; position:sticky; top:96px; max-height:calc(100dvh - 128px); overflow-y:auto; padding:16px; scrollbar-gutter:stable; }
#workflow-drawer .catalogue-heading { align-items:center; gap:8px; margin-bottom:12px; }
#workflow-drawer .catalogue-heading h2 { flex:1; font-size:15px; }
#workflow-drawer .catalogue-heading>.muted { width:100%; font-size:12px; }
#workflow-drawer .catalogue-heading>.button { padding:6px 8px; font-size:12px; }
#workflow-drawer .catalogue-display-controls { justify-content:flex-start; }
#workflow-drawer .catalog-controls { display:block; padding:0; }
#workflow-drawer .catalog-filter-options summary { display:list-item; margin-left:16px; }
#workflow-drawer .catalog-filter-fields { grid-template-columns:minmax(0,1fr); gap:10px; }
#workflow-drawer .workflow-card { display:block; padding:12px; }
#workflow-drawer .workflow-card .workflow-top { margin-bottom:4px; }
#workflow-drawer .workflow-card h3 { font-size:14px; }
#workflow-drawer .workflow-description { display:none; }
#workflow-drawer .workflow-card .task-meta { font-size:12px; gap:8px; }
#workflow-drawer .workflow-card .workflow-bottom { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; }
#workflow-drawer .workflow-card .places { text-align:left; justify-content:flex-start; font-size:12px; }
#workflow-drawer .workflow-bottom .button { font-size:12px; padding:4px 8px; }
#workflow-drawer .task-inspector { margin-top:20px; border-top:1px solid var(--line); border-bottom:0; background:var(--surface); }
#workflow-drawer .inspector-body,#workflow-drawer .inspector-heading { padding:14px 0; }
.active-task-actions { display:flex; align-items:center; }
.assignment-section { overflow-wrap:anywhere; }
.assignment-section .reporting-heading { flex-wrap:wrap; gap:8px; border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
.current-task-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:start; gap:12px; margin-bottom:24px; }
.current-task-heading h3 { font-size:22px; margin:8px 0 0; }
.task-due { color:var(--muted); font-size:12px; margin:4px 0 0; }
.task-workspace { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; align-items:start; }
.task-instruction-column,.task-workspace>.result-form { min-width:0; }
.task-workspace .result-form>h3 { margin:0 0 8px; font-size:17px; letter-spacing:0; }
.task-workspace .result-form>.scope-note { margin-top:0; }
.task-instructions { border:1px solid var(--line); border-radius:var(--radius-item); background:var(--panel); }
.task-instructions>summary { padding:14px 16px; min-height:44px; cursor:pointer; font-size:14px; font-weight:600; }
.task-instructions>summary span { display:block; font-weight:400; color:var(--muted); font-size:12px; padding-top:3px; }
.instruction-body { padding:0 16px 16px; }
.instruction-body .workflow-context { margin-top:0; grid-template-columns:112px minmax(0,1fr); }
.task-timing { border-top:1px solid var(--line); padding-top:12px; font-size:12px; color:var(--muted); }
.task-timing>summary { cursor:pointer; min-height:44px; padding:10px 0; }
.task-timing .deadline { margin:0; padding:0; }
.active-content>.release { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
@media(max-width:1180px) {
  #workflow-drawer { position:static; max-height:none; }
  #view-workflows[data-working="true"] .assignment-section { grid-column:1; grid-row:1; }
  #view-workflows[data-working="true"] #workflow-drawer { grid-column:1; grid-row:2; }
}
@media(max-width:780px) {
  .workflow-heading-actions { align-items:flex-end; flex-direction:column; gap:8px; }
  .workflow-heading-actions .small-pill { display:none; }
  #view-workflows h1 { font-size:24px; }
  .task-workspace { gap:16px; }
  .current-task-heading { margin-bottom:16px; gap:8px; }
  .current-task-heading h3 { font-size:20px; }
  .instruction-body .workflow-context { grid-template-columns:100px minmax(0,1fr); }
}
/* Account workspace uses the same panels and form controls as test reporting. */
.testing-session { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:16px 20px; margin:0 0 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-item); }
.testing-session>div:first-child { flex:1 1 260px; min-width:0; }
.testing-session h2 { font-size:15px; margin:0 0 4px; }
.testing-session p { margin:0; overflow-wrap:anywhere; }
.session-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.debug-session-dialog { width:min(720px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; padding:0; scroll-padding-block:100px 90px; }
.debug-session-dialog>.dialog-header { position:sticky; top:0; z-index:2; padding:20px 24px; margin:0; background:var(--surface); border-bottom:1px solid var(--line); }
.debug-session-dialog>p { margin:12px 24px; }
.debug-session-dialog>form { padding:0 24px; }
.debug-session-dialog .session-actions { position:sticky; bottom:0; z-index:1; padding:12px 24px; margin-inline:-24px; background:var(--surface); border-top:1px solid var(--line); }
.debug-session-dialog .session-actions>button { width:auto; flex:1 1 auto; }
.debug-session-dialog .dialog-header h2 { margin:0; font-size:22px; }
.debug-session-dialog .info-note p { margin:0 0 8px; overflow-wrap:anywhere; }
.session-confirm { display:flex; gap:10px; align-items:center; min-height:44px; }
.session-confirm input { width:18px; height:18px; flex:none; }
.session-version-block { white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; padding:16px; background:var(--panel); font-size:13px; }
.sign-in-panel { max-width: 480px; margin: 64px auto 24px; padding: 32px; }
.sign-in-panel>img { width:40px; height:40px; margin-bottom:20px; }
.sign-in-panel h1 { font-size:24px; }
.sign-in-panel p { line-height: 1.6; }
.signed-out .sidebar, .signed-out .workspace { display: none; }
.account-item { padding: 16px; margin: 12px 0; overflow-wrap: anywhere; }
.account-item h3 { margin: 0 0 6px; }
.manage-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
#invitation-form { padding: 20px; }
.account-item p { margin: 8px 0; }
.account-item summary { cursor: pointer; color: var(--blue, var(--green)); }
#invitation-link { margin-top: 16px; padding: 20px; overflow-wrap: anywhere; }
.admin-guide { padding:20px; margin-bottom:20px; }
.admin-guide h2 { margin-top:0; }
.admin-role-list { grid-template-columns:110px minmax(0,1fr); margin-bottom:0; }
.admin-panel-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width: 640px) { .sign-in-panel { margin: 90px 16px 16px; } #signed-in-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1100px) { .manage-layout { grid-template-columns: minmax(0, 1fr); } }

/* Disclosure controls are part of the reporting and account tasks, not small links. */
.release summary,.correction summary,.correction-history summary,.report-instructions summary,.account-item summary {
  min-height:44px;
  padding:10px 0;
}

/* Account details use the same restrained hierarchy as the testing workspace. */
.topbar-actions .appearance-toggle { color:var(--muted); background:transparent; border-color:transparent; padding:8px; }
.topbar-actions .appearance-toggle:hover { background:var(--hover); color:var(--ink); }
.profile-button { display:inline-flex; align-items:center; gap:10px; border:0; border-left:1px solid var(--line); border-radius:var(--radius-control); background:transparent; color:var(--ink); min-height:44px; padding:3px 8px 3px 16px; text-align:left; }
.profile-button:hover { background:var(--hover); }
.profile-button-copy { display:flex; flex-direction:column; font-size:13px; font-weight:600; max-width:160px; min-width:0; }
.profile-button-copy>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--green-light); color:var(--green); font-weight:600; font-size:13px; overflow:hidden; border:1px solid var(--accent-border); }
dialog { background:var(--surface); color:var(--ink); }
.profile-dialog { width:540px; max-width:calc(100% - 32px); padding:28px; border-radius:var(--radius-dialog); }
.profile-dialog h2 { font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:500; font-size:30px; letter-spacing:-.4px; margin-bottom:6px; }
.profile-dialog .dialog-header { margin-bottom:12px; }
.profile-dialog .button { width:auto; margin-top:0; }
.profile-identity { color:var(--muted); margin-bottom:28px; overflow-wrap:anywhere; }
.appearance-options { padding:20px 0 0; margin:28px 0 0; border:0; border-top:1px solid var(--line); }
.appearance-options legend { font-weight:600; font-size:15px; padding:0 12px 0 0; }
.appearance-options .scope-note { margin:0 0 14px; }
.appearance-choices { display:flex; flex-wrap:wrap; gap:8px; }
.appearance-choices label { display:flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--border-strong); border-radius:var(--radius-control); padding:10px 12px; font-size:13px; cursor:pointer; }
.appearance-choices label:has(input:checked) { border-color:var(--green); background:var(--green-light); }
.appearance-choices input { accent-color:var(--green); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:780px) {
  .profile-button { margin-left:auto; padding-left:10px; }
  .profile-button-copy { max-width:110px; }
  .appearance-toggle #theme-label { display:none; }
  .profile-dialog { padding:20px; }
}