/* cooo console palette: neutral graphite surfaces; orange is reserved for emphasis. */
:root {
  color-scheme:dark;
  --bg:#111111;
  --panel:#191919;
  --raised:#232323;
  --surface-inset:#141414;
  --surface-hover:#252525;
  --sidebar:#151515;
  --line:#353535;
  --line-strong:#494949;
  --control-border:#666661;
  --text:#eeeee9;
  --text-secondary:#c4c4be;
  --muted:#a5a59f;
  --dim:#92928c;
  --accent:#f49b75;
  --brand:#f36b35;
  --action:#ed8757;
  --action-hover:#f69a6e;
  --on-accent:#1b130e;
  --accent-surface:#2b211c;
  --accent-border:#644332;
  --good:#a5c9ae;
  --good-surface:#1d2921;
  --good-border:#405748;
  --warn:#d9bd86;
  --warn-surface:#29251d;
  --warn-border:#5b5038;
  --bad:#eaa1a1;
  --bad-surface:#2d2020;
  --bad-border:#704848;
  --backdrop:#000000b8;
  --shadow:#00000033;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 'Segoe UI',system-ui,sans-serif}
a {
  color:inherit;
  text-decoration:none}
button,input,textarea,select {
  font:inherit}
button,a,input,select,textarea,summary {
  outline-offset:4px}
:focus-visible {
  outline:2px solid var(--accent)}
button {
  cursor:pointer;
  border:1px solid transparent;
  border-radius:5px;
  padding:9px 14px;
  font-weight:600;
  transition:background .15s}
button:disabled {
  opacity:.5;
  cursor:not-allowed}
.primary {
  background:var(--action);
  color:var(--on-accent)}
.primary:hover:not(:disabled) {
  background:var(--action-hover)}
.secondary {
  background:var(--raised);
  color:var(--text);
  border-color:var(--line)}
.quiet {
  background:transparent;
  color:var(--muted);
  border-color:var(--line)}
.danger {
  background:var(--bad-surface);
  color:var(--bad);
  border-color:var(--bad-border)}
.sidebar {
  width:224px;
  background:var(--sidebar);
  border-right:1px solid var(--line);
  position:fixed;
  inset:0 auto 0 0;
  padding:30px 18px;
  display:flex;
  flex-direction:column;
  z-index:5}
.brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:0 4px;
  width:100%;
  max-width:189px;
  font-size:23px;
  font-weight:650;
  letter-spacing:-.6px}
.brand img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:723.8 / 232}
.brand small {
  display:block;
  font:8px/2 var(--mono);
  letter-spacing:1.1px;
  color:var(--muted)}
.workspace-label {
  display:flex;
  gap:10px;
  align-items:center;
  margin:34px 0 27px;
  border:1px solid var(--line);
  padding:12px 10px;
  font-size:12px;
  border-radius:5px}
.workspace-label small {
  display:block;
  color:var(--muted);
  font-size:10px;
  overflow-wrap:anywhere}
.square {
  width:26px;
  height:28px;
  text-align:center;
  padding-top:3px;
  background:var(--raised);
  color:var(--accent);
  font-family:var(--mono)}
.nav-label {
  font:10px var(--mono);
  letter-spacing:1.5px;
  color:var(--dim);
  margin:22px 10px 12px}
nav a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin:4px 0;
  color:var(--muted);
  border-radius:4px;
  border:1px solid transparent}
nav a>span:first-child {
  width:18px;
  font-size:18px;
  line-height:1}
nav a:hover {
  background:var(--raised);
  color:var(--text)}
nav a[aria-current=page] {
  background:var(--accent-surface);
  border-color:var(--accent-border);
  color:var(--text)}
.nav-count {
  margin-left:auto;
  font:11px var(--mono)}
.sidebar-bottom {
  margin-top:auto;
  padding:30px 10px 0}
.sidebar-bottom p {
  font-size:12px;
  color:var(--muted)}
.sidebar-bottom small {
  font:9px var(--mono);
  color:var(--muted)}
.environment {
  font:9px var(--mono);
  letter-spacing:1px;
  color:var(--warn);
  border:1px solid var(--warn-border);
  border-radius:3px;
  padding:5px 7px}
.shell {
  margin-left:224px;
  min-width:0}
.topbar {
  height:67px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 34px;
  font-size:12px;
  gap:16px}
.slash {
  margin:0 14px;
  color:var(--dim)}
.topbar-right {
  display:flex;
  gap:18px;
  align-items:center}
.connection {
  font:10px var(--mono);
  color:var(--muted)}
.connection.live {
  color:var(--good)}
.connection.live:before {
  content:'●';
  margin-right:7px;
  font-size:7px}
#identity {
  border-left:1px solid var(--line);
  padding-left:16px}
.muted {
  color:var(--muted)}
main {
  padding:34px;
  max-width:1680px;
  margin:auto}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:4px 0 28px}
.eyebrow {
  font:10px/1.6 var(--mono);
  letter-spacing:1.7px;
  color:var(--accent);
  margin:0 0 12px}
h1 {
  font-size:32px;
  line-height:1.22;
  letter-spacing:-1.1px;
  font-weight:600;
  margin:0 0 10px}
h2 {
  font-size:15px;
  font-weight:600;
  margin:0}
h3 {
  font-size:13px;
  font-weight:600}
p {
  margin:8px 0}
.heading-actions {
  display:flex;
  gap:9px;
  flex-shrink:0}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:22px;
  background:var(--panel)}
.metric {
  padding:20px 23px;
  border-right:1px solid var(--line)}
.metric:last-child {
  border:0}
.metric-label {
  font-size:12px;
  color:var(--muted)}
.metric strong {
  display:block;
  font:30px/1.6 var(--mono);
  letter-spacing:-1px}
.metric small {
  font-size:11px;
  color:var(--muted)}
.overview-grid {
  display:grid;
  grid-template-columns:2.3fr 1fr;
  gap:20px;
  margin-bottom:26px}
.panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px;
  min-width:0}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px}
.section-head p {
  font-size:12px;
  margin-bottom:0}
.micro {
  font:9px/1.6 var(--mono);
  letter-spacing:1px;
  color:var(--muted)}
.stages {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:25px}
.stages>div {
  border-top:1px solid var(--line-strong);
  padding-top:15px}
.stages b {
  font:11px var(--mono);
  color:var(--accent)}
.stages h3 {
  margin:10px 0 4px}
.stages p {
  font-size:11px;
  color:var(--muted);
  max-width:145px}
.context-panel {
  background:var(--surface-inset)}
.context-panel p:not(.eyebrow) {
  font-size:12px}
.text-link {
  font-size:12px;
  color:var(--accent);
  display:inline-block;
  margin-top:10px}
.filters {
  display:flex;
  gap:10px;
  margin-bottom:18px}
.search-label {
  flex:1;
  max-width:370px}
.filters label {
  margin:0}
.filters input,.filters select {
  margin:0;
  height:38px;
  font-size:12px}
.task {
  border-top:1px solid var(--line)}
.task summary {
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) 1fr 1fr 22px;
  gap:16px;
  align-items:center;
  padding:19px 2px}
.task summary::-webkit-details-marker {
  display:none}
.task summary:hover {
  background:var(--surface-hover)}
.task summary strong {
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere}
.task summary small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px}
.task summary .chevron {
  color:var(--muted);
  text-align:center}
.task[open] summary .chevron {
  transform:rotate(90deg)}
.badge {
  display:inline-flex;
  border:1px solid var(--line-strong);
  background:var(--raised);
  padding:3px 8px;
  border-radius:4px;
  font:10px/1.5 var(--mono);
  color:var(--text-secondary);
  width:fit-content}
.badge.good {
  color:var(--good);
  background:var(--good-surface);
  border-color:var(--good-border)}
.badge.warn {
  color:var(--warn);
  background:var(--warn-surface);
  border-color:var(--warn-border)}
.badge.bad {
  color:var(--bad);
  background:var(--bad-surface);
  border-color:var(--bad-border)}
.task-content {
  padding:2px 0 24px}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:18px 0}
.detail-box {
  border:1px solid var(--line);
  padding:16px;
  border-radius:4px;
  min-width:0}
.detail-box h3 {
  margin:0 0 12px;
  color:var(--text-secondary);
  font:10px var(--mono);
  letter-spacing:1px}
.detail-box p {
  font-size:12px;
  overflow-wrap:anywhere}
.detail-box code,.digest {
  font:10px/1.7 var(--mono);
  overflow-wrap:anywhere;
  color:var(--muted)}
.states {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.state {
  font:10px var(--mono);
  color:var(--muted);
  border:1px solid var(--line);
  padding:5px 8px}
.actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px}
.actions button {
  font-size:12px}
.notice {
  border-left:2px solid var(--warn);
  background:var(--warn-surface);
  padding:12px 15px;
  color:var(--warn);
  font-size:12px;
  margin:16px 0}
.operations {
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:12px}
.operations summary {
  display:block;
  padding:8px 0;
  color:var(--muted);
  font-size:12px}
.operation {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:8px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font:11px var(--mono);
  overflow-wrap:anywhere}
.operation small {
  grid-column:1/-1;
  color:var(--muted);
  font:10px var(--mono);
  overflow-wrap:anywhere}
.empty {
  padding:42px 20px;
  text-align:center}
.empty h3 {
  font-size:16px;
  font-weight:500}
.empty p {
  color:var(--muted);
  font-size:12px}
.empty-symbol {
  font:26px var(--mono);
  color:var(--accent)}
.participant-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.participant-grid .panel p {
  font-size:12px;
  overflow-wrap:anywhere}
.participant-grid code {
  font-size:10px;
  overflow-wrap:anywhere;
  color:var(--muted)}
label {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:14px}
input,textarea,select {
  width:100%;
  margin-top:7px;
  border:1px solid var(--control-border);
  background:var(--surface-inset);
  color:var(--text);
  padding:10px 12px;
  border-radius:4px;
  min-width:0}
input::placeholder,textarea::placeholder {
  color:var(--dim)}
textarea {
  min-height:100px;
  resize:vertical}
input[readonly] {
  color:var(--muted);
  background:var(--panel)}
.login-layout {
  min-height:calc(100vh - 210px);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  align-items:center}
.login-story h1 {
  font-size:clamp(30px,3.1vw,48px);
  line-height:1.2;
  letter-spacing:-1.5px;
  margin:22px 0}
.login-story h1 span {
  color:var(--text-secondary)}
.lede {
  font-size:15px;
  line-height:1.9;
  color:var(--muted)}
.protocol-strip {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  padding:24px 0;
  margin-top:25px;
  border-top:1px solid var(--line);
  font:9px var(--mono);
  color:var(--muted)}
.login-note {
  font-size:12px;
  max-width:400px;
  color:var(--muted)}
.login-card {
  padding:30px;
  max-width:410px;
  width:100%;
  justify-self:end}
.login-card h2 {
  font-size:22px}
.login-card .muted {
  font-size:12px}
.full {
  width:100%;
  margin-top:24px;
  display:flex;
  justify-content:space-between}
.footnote {
  font-size:11px;
  color:var(--muted);
  margin-top:15px}
.login-card .footnote {
  padding-top:16px;
  margin-top:22px;
  border-top:1px solid var(--line)}
#message {
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:var(--raised);
  padding:12px 16px;
  margin-bottom:20px;
  font-size:12px;
  overflow-wrap:anywhere}
#message.error {
  border-color:var(--bad-border);
  background:var(--bad-surface);
  color:var(--bad)}
footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  padding:23px 0 4px;
  margin-top:32px;
  font-size:11px;
  color:var(--muted)}
dialog {
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:8px;
  width:min(720px,calc(100% - 24px));
  max-height:90vh;
  padding:26px}
dialog::backdrop {
  background:var(--backdrop);
  backdrop-filter:blur(3px)}
dialog>.muted {
  font-size:12px}
fieldset {
  border:0;
  border-top:1px solid var(--line);
  margin:24px 0 0;
  padding:12px 0 0}
legend {
  font:10px var(--mono);
  color:var(--accent);
  padding-right:14px;
  letter-spacing:1px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px}
.deadline-field input {
  font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.deadline-field small {
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.5;
  color:var(--muted)}
[aria-invalid="true"] {
  border-color:var(--bad)}
.dialog-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:20px}
#form-message {
  color:var(--bad);
  font-size:12px}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)}
.skip {
  position:fixed;
  top:-100px;
  left:240px;
  background:var(--accent);
  color:var(--on-accent);
  padding:8px;
  z-index:20}
.skip:focus {
  top:10px}
[hidden] {
  display:none!important}
@media(min-width:1600px) {
  main {
  padding:46px 54px}
}
@media(max-width:1100px) {
  .sidebar {
  width:190px;
  padding:24px 12px}
.shell {
  margin-left:190px}
main {
  padding:24px}
.overview-grid {
  grid-template-columns:1fr}
.context-panel {
  display:none}
.login-layout {
  gap:25px;
  grid-template-columns:1fr}
.login-story {
  padding-top:20px}
.login-card {
  justify-self:start;
  max-width:100%}
.participant-grid {
  grid-template-columns:1fr 1fr}
.topbar {
  padding:0 24px}
.connection {
  display:none}
}
@media(max-width:720px) {
  .sidebar {
  position:static;
  width:auto;
  padding:18px;
  border-right:0;
  border-bottom:1px solid var(--line)}
.brand {
  font-size:20px}
.workspace-label,.sidebar-bottom,.nav-label {
  display:none}
nav {
  display:flex;
  overflow-x:auto;
  margin-top:16px;
  gap:4px}
nav a {
  white-space:nowrap;
  padding:8px;
  font-size:12px}
nav a>span:first-child {
  display:none}
.shell {
  margin-left:0}
.topbar {
  padding:12px 18px;
  height:auto;
  flex-wrap:wrap}
.topbar-right {
  gap:10px}
main {
  padding:22px 18px}
.page-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:14px}
h1 {
  font-size:28px}
.metrics {
  grid-template-columns:1fr 1fr}
.metric {
  padding:15px;
  border-bottom:1px solid var(--line)}
.metric:nth-child(2) {
  border-right:0}
.metric strong {
  font-size:26px}
.stages {
  grid-template-columns:1fr 1fr}
.micro {
  font-size:8px}
.panel {
  padding:16px}
.task summary {
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px}
.task summary .summary-meta,.chevron {
  display:none}
.detail-grid,.form-grid,.participant-grid {
  grid-template-columns:1fr}
.filters {
  flex-direction:column}
.search-label {
  max-width:none}
.login-story h1 {
  font-size:32px}
.login-layout {
  gap:25px}
.login-card {
  padding:22px}
.protocol-strip {
  gap:12px}
footer {
  flex-direction:column}
.skip {
  left:15px}
.section-head {
  align-items:flex-start}
}

/* Release workspace: restrained technical hierarchy, data first. */
body { background-image:none; }
.sidebar { background:var(--bg); width:232px; padding:28px 18px; }
.shell { margin-left:232px; }
.brand { letter-spacing:-.8px; }
.workspace-symbol { flex-shrink:0; width:24px; height:24px; }
.brand small { font-size:8px; letter-spacing:1.6px; }
.workspace-label { background:var(--panel); margin:32px 0 16px; }
.topbar { background:var(--bg); height:64px; }
nav a { font-size:13px; padding:11px 12px; }
nav a[aria-current=page] { background:var(--accent-surface); border-color:var(--accent-border); box-shadow:inset 2px 0 var(--accent); }
main { padding:36px 36px 20px; }
.page-heading { margin:5px 0 30px; }
h1 { font-size:clamp(28px,2.5vw,38px); letter-spacing:-1.3px; }
#page-description { max-width:600px; font-size:13px; }
.eyebrow { font-size:10px; color:var(--muted); }
.primary { background:var(--action); color:var(--on-accent); box-shadow:none; }
.primary:hover:not(:disabled) { background:var(--action-hover); }
.metric { padding:20px 24px; position:relative; }
.metric::before { content:''; position:absolute; top:0; left:24px; width:24px; height:2px; background:var(--dim); }
.metric strong { font-size:34px; font-weight:400; color:var(--text); line-height:1.75; }
.metric small { font-size:10px; }
.overview-grid { grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:18px; margin-bottom:20px; }
.process-panel { background:var(--panel); }
.process-panel h2 { font-size:19px; font-weight:500; letter-spacing:-.3px; }
.process-panel .eyebrow { margin-bottom:7px; }
.stages { gap:0; margin:26px 0 22px; }
.stage { border-top:1px solid var(--line-strong); padding:15px 12px 0 0; position:relative; display:block; }
.stage:before { content:''; width:5px; height:5px; background:var(--text-secondary); position:absolute; top:-3px; left:0; border:2px solid var(--panel); box-sizing:content-box; }
.stage:hover h3 { color:var(--accent); }
.stage-count { display:block; font:28px/1.6 var(--mono); color:var(--text); margin-top:6px; }
.stages h3 { font-size:12px; margin:3px 0; }
.stages p { line-height:1.7; font-size:10px; margin:5px 0; }
.stages b { font-size:9px; color:var(--muted); }
.pipeline-foot { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:13px; gap:14px; align-items:center; }
.pipeline-foot>span { font-size:10px; color:var(--muted); }
.pipeline-foot .text-link { margin:0; font-size:11px; white-space:nowrap; }
.context-panel { background:var(--surface-inset); display:block; }
.context-panel .eyebrow { margin:0; }
.attention-mark { color:var(--muted); font-size:20px; }
.attention-row { display:flex; justify-content:space-between; gap:12px; padding:17px 0; border-bottom:1px solid var(--line); font-size:12px; }
.attention-row b { font:15px var(--mono); color:var(--text-secondary); }
.attention-row:hover span { color:var(--accent); }
.release-note { padding:11px 15px; background:var(--raised); border:1px solid var(--line); border-radius:5px; color:var(--muted); font:11px/1.7 var(--mono); margin:0 0 22px; }
.table-heading { display:grid; grid-template-columns:minmax(120px,1.5fr) 1fr 1fr 22px; gap:16px; font:9px var(--mono); color:var(--muted); padding:12px 2px; letter-spacing:1px; border-top:1px solid var(--line); }
.filters { flex-wrap:wrap; }
.search-label { max-width:none; min-width:180px; }
.filters select { width:auto; max-width:100%; }
.task summary { padding:18px 2px; }
.task[open] { background:var(--surface-hover); border-radius:4px; padding:0 12px; margin:0 -12px; }
.task[open]>summary { border-bottom:1px solid var(--line); margin-bottom:18px; }
.task summary strong { font-family:var(--mono); font-size:12px; }
.badge { border-radius:3px; font-size:10px; }
.detail-box { background:var(--surface-inset); }
.actions { padding-top:15px; border-top:1px solid var(--line); }
.login-story { position:relative; padding:28px 0; }
.login-story::before { content:'[ cooo / WORKSPACE ]'; font:10px var(--mono); color:var(--muted); letter-spacing:3px; display:block; margin-bottom:38px; }
.login-story h1 { font-size:clamp(36px,3.5vw,52px); }
.login-card { border-top:2px solid var(--brand); background:var(--panel); box-shadow:0 24px 70px var(--shadow); }
#connection { font-size:10px; }
footer { font-size:10px; }
@media(min-width:1600px) { main { padding:45px 52px 24px; } }
@media(max-width:1200px) { .overview-grid { grid-template-columns:1fr; } .context-panel { display:block; } #attention { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .context-panel .section-head { margin-bottom:0; } }
@media(max-width:1100px) { .sidebar { width:190px; } .shell { margin-left:190px; } main { padding:28px 24px; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric:nth-child(2) { border-right:0; } .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); } }
@media(max-width:720px) { .sidebar { width:auto; padding:16px 18px; } .shell { margin-left:0; } main { padding:24px 16px; } .brand small { font-size:7px; } .metric { padding:16px; } .metric strong { font-size:29px; } .metric small { font-size:10px; } .metric::before { left:16px; } .table-heading { display:none; } .stages { grid-template-columns:repeat(2,1fr); gap:24px 12px; } #attention { display:block; } .pipeline-foot { align-items:flex-start; flex-direction:column; gap:5px; } .filters select { width:100%; } .login-story::before { margin-bottom:22px; } .login-story h1 { font-size:35px; } .connection { display:block; font-size:9px; } .topbar-right { flex-wrap:wrap; } .topbar { height:auto; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* Interaction states share the same material and focus system. */
::selection { background:var(--brand); color:var(--on-accent); }
.secondary:hover:not(:disabled),.quiet:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--control-border); color:var(--text); }
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
input[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:var(--bad); }