:root{
  --color-background:#F7F5F0;
  --color-surface:#FFFEFB;
  --color-surface-soft:#F3EFE7;
  --color-surface-raised:#FFFFFF;
  --color-text:#292823;
  --color-muted:#6D675E;
  --color-border:#DED7CB;
  --color-border-strong:#BEB3A3;
  --color-action:#3154B8;
  --color-action-hover:#263F8C;
  --color-action-soft:#E7EDFC;
  --color-action-text:#FFFFFF;
  --color-error:#B9382D;
  --color-error-hover:#922D26;
  --color-error-soft:#FCE9E5;
  --color-success:#28734D;
  --color-success-soft:#E4F3E9;
  --color-warning:#94500D;
  --color-warning-soft:#FFF0D8;
  --color-info:#2E6982;
  --color-info-soft:#E7F3F6;
  --color-overlay:rgb(41 40 35 / 42%);
  --color-neutral-soft:#EEEAE2;
  --color-shadow:rgb(58 46 31 / 12%);
  --color-code-chart-code:#3154b8;
  --color-code-chart-tests:#28734d;
  --color-code-chart-docs:#94500d;
  --color-code-chart-code-fill:rgb(49 84 184 / 20%);
  --color-code-chart-tests-fill:rgb(40 115 77 / 24%);
  --color-code-chart-docs-fill:rgb(148 80 13 / 22%);
  --color-code-chart-point:transparent;
  --background:var(--color-background);
  --surface:var(--color-surface);
  --surface-soft:var(--color-surface-soft);
  --text:var(--color-text);
  --muted:var(--color-muted);
  --border:var(--color-border);
  --accent:var(--color-action);
  --red:var(--color-error);
  --green:var(--color-success);
  --orange:var(--color-warning);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-size-xs:11px;
  --font-size-sm:12px;
  --font-size-sm-plus:13px;
  --font-size-body:14px;
  --font-size-section:15px;
  --font-size-lg:16px;
  --font-size-xl:18px;
  --font-size-xl-plus:20px;
  --font-size-title:24px;
  --font-size-display:28px;
  --font-size-code:.9em;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --line-height-tight:1.25;
  --line-height-normal:1.5;
  --line-height-relaxed:1.7;
  --line-height-code:1.6;
  --letter-spacing-wide:.06em;
  --space-0-5:2px;
  --space-0-75:3px;
  --space-1:4px;
  --space-1-25:5px;
  --space-1-5:6px;
  --space-2:8px;
  --space-2-25:9px;
  --space-2-5:10px;
  --space-3:12px;
  --space-3-5:14px;
  --space-4:16px;
  --space-4-5:18px;
  --space-5:20px;
  --space-5-5:22px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-login-offset:10vh;
  --radius-sm:6px;
  --radius-xs:2px;
  --radius-dot:1px;
  --radius-round:50%;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;
  --shadow-soft:0 1px 2px var(--color-shadow);
  --shadow-none:none;
  --shadow-card:0 8px 24px -16px var(--color-shadow);
  --shadow-raised:0 12px 28px -14px var(--color-shadow);
  --shadow-focus:0 0 0 3px var(--color-action-soft);
  --border-width:1px;
  --border-width-strong:2px;
  --border-width-wide:3px;
  --border-width-accent:4px;
  --focus-offset:3px;
  --dependency-column-gap:calc(var(--space-10) + var(--space-8));
  --sidebar-width:250px;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--background)
}

*{
  box-sizing:border-box
}
body{
  margin:0
}
main{
  margin-left:var(--sidebar-width);
  padding:var(--space-7) var(--space-8);
  max-width:1600px
}
h1{
  font-size:var(--font-size-display);
  line-height:var(--line-height-tight);
  margin:0 0 var(--space-1-5);
  font-weight:var(--font-weight-semibold)
}
h2{
  font-size:var(--font-size-xl);
  margin:0 0 var(--space-4-5)
}
h3{
  font-size:var(--font-size-lg)
}
p{
  line-height:var(--line-height-normal)
}
a{
  color:var(--accent)
}
code,.mono,.repository{
  font-family:var(--font-mono);
  overflow-wrap:anywhere;
  font-size:var(--font-size-code)
}
.repository{
  color:var(--muted);
  text-decoration:none
}
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  margin-bottom:var(--space-7);
  padding-bottom:var(--space-6);
  border-bottom:var(--border-width) solid var(--border)
}
.header-actions{
  display:flex;
  align-items:center;
  gap:var(--space-4)
}
.breadcrumbs{margin:0 0 var(--space-4);color:var(--muted);font-size:var(--font-size-sm);min-width:0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:var(--space-2);min-width:0;max-width:100%;overflow-wrap:anywhere}
.breadcrumbs li+li::before{content:"→";color:var(--muted);flex:none}
.breadcrumbs li>a,.breadcrumbs li>[aria-current=page]{min-width:0;overflow-wrap:anywhere}
.breadcrumbs [aria-current=page]{color:var(--text);font-weight:var(--font-weight-medium)}
.live{
  font-size:var(--font-size-sm);
  color:var(--muted)
}
section{
  margin:var(--space-5) 0;
  padding:var(--space-5);
  background:var(--surface);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg)
}
article{
  padding:var(--space-4) 0;
  border-bottom:var(--border-width) solid var(--border)
}
article:last-child{
  border:0
}
label{
  display:block;
  margin:var(--space-4) 0;
  font-weight:var(--font-weight-medium)
}
input,textarea,select{
  display:block;
  width:100%;
  font:inherit;
  padding:var(--space-2-5) var(--space-3);
  margin-top:var(--space-1-5);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  background:var(--surface)
}
textarea{
  resize:vertical
}
button,.button{
  display:inline-block;
  font:inherit;
  font-weight:var(--font-weight-medium);
  background:var(--accent);
  color:var(--color-action-text);
  border:var(--border-width) solid var(--accent);
  border-radius:var(--radius-md);
  padding:var(--space-2-5) var(--space-3-5);
  cursor:pointer;
  text-decoration:none;
  box-shadow:var(--shadow-soft);
  font-weight:var(--font-weight-semibold)
}
.button:not([aria-disabled="true"]):is(:hover,.demo-hover),button:not(:disabled):not([aria-disabled="true"]):is(:hover,.demo-hover){background:var(--color-action-hover);border-color:var(--color-action-hover);text-decoration:none}
.secondary{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border)
}
.secondary:not(:disabled):not([aria-disabled="true"]):is(:hover,.demo-hover){background:var(--color-action-soft);border-color:var(--color-border-strong)}
:focus-visible,.demo-focus{
  outline:var(--border-width-strong) solid var(--accent);
  outline-offset:var(--focus-offset);
  box-shadow:var(--shadow-focus)
}
.error,[role=alert]{
  color:var(--red)
}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-width);
  padding:var(--space-6) var(--space-4);
  overflow-y:auto;
  border-right:var(--border-width) solid var(--border);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:var(--background)
}
.sidebar .project-switcher{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--background)
}
.sidebar .project-switcher>.filter{margin:0}
.sidebar .project-switcher>.filter input{padding:var(--space-2-5) var(--space-3);margin-top:var(--space-1-5)}
.sidebar .project-switcher>summary{display:none}
.sidebar .project-switcher:not([open])>:not(summary){display:block}
@media(min-width:801px){.sidebar .project-switcher:not([open])::details-content{content-visibility:visible}}
.wordmark{
  color:var(--text);
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-xl-plus);
  text-decoration:none
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:calc(var(--space-1) * -1);
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.command-palette-trigger{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  width:100%;
  padding:var(--space-2-5) var(--space-3);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--muted);
  text-align:left;
  cursor:pointer
}
.command-palette-trigger kbd{margin-left:auto}
.command-palette{
  position:fixed;
  top:12vh;
  left:50%;
  width:min(640px,calc(100vw - 2rem));
  max-height:80vh;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  overflow:hidden;
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-raised)
}
.command-palette::backdrop{background:var(--color-overlay)}
.palette-heading{padding:var(--space-4);border-bottom:var(--border-width) solid var(--border)}
.palette-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.palette-title-row h2{margin:0;font-size:var(--font-size-section)}
.palette-close{padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);background:var(--surface-soft);color:var(--muted);cursor:pointer}
.palette-heading input{width:100%;padding:var(--space-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit}
.palette-results{max-height:55vh;overflow-y:auto;padding:var(--space-2)}
.palette-group{padding:var(--space-2) var(--space-2)}
.palette-group+.palette-group{border-top:var(--border-width) solid var(--border)}
.palette-group h3{margin:0 0 var(--space-2);padding:0 var(--space-2);color:var(--muted);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}
.palette-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2-5) var(--space-2);border-radius:var(--radius-sm);color:var(--text);text-decoration:none}
.palette-option:hover,.palette-option[aria-selected="true"]{background:var(--color-action-soft);color:var(--color-action);text-decoration:none}
.palette-option small{color:var(--muted);font-size:var(--font-size-xs);text-align:right}
.palette-empty{margin:0;padding:var(--space-4);color:var(--muted);font-size:var(--font-size-sm)}
.palette-shortcuts{display:flex;justify-content:flex-end;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid var(--border);color:var(--muted);font-size:var(--font-size-xs)}
.sidebar-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--space-5-5)
}
.sidebar-heading h2{
  font-size:var(--font-size-sm);
  text-transform:uppercase;
  letter-spacing:var(--letter-spacing-wide);
  color:var(--muted);
  margin:0
}
.add-project{
  padding:var(--space-1) var(--space-2-5);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-size:var(--font-size-xl-plus)
}
.filter{
  font-size:var(--font-size-sm);
  color:var(--muted);
  margin:0
}
.project-link{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2-5) var(--space-1-5);
  margin:var(--space-1) 0;
  text-decoration:none;
  color:var(--text);
  border:var(--border-width) solid var(--background);
  border-radius:var(--radius-md)
}
.project-link[hidden]{
  display:none
}
.project-link.selected,.project-link:hover{
  background:var(--surface);
  border-color:var(--border)
}
.avatar{
  display:grid;
  place-items:center;
  flex-shrink:0;
  min-width:30px;
  height:30px;
  padding:var(--space-1);
  background:var(--accent);
  color:var(--surface);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:var(--font-size-xs)
}
.project-name{
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-medium)
}
.project-name small{
  display:block;
  font-size:var(--font-size-xs);
  color:var(--muted);
  font-weight:var(--font-weight-regular)
}
.waiting-count{
  color:var(--red);
  font-size:var(--font-size-xs);
  white-space:nowrap
}
.working-count{
  color:var(--green);
  font-size:var(--font-size-xs);
  white-space:nowrap
}
details{
  background:var(--surface-soft);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-2-5)
}
summary{
  cursor:pointer;
  font-weight:var(--font-weight-medium)
}
details:target{
  outline:var(--border-width-strong) solid var(--accent)
}
.sidebar footer{
  margin-top:auto;
  padding-top:var(--space-7);
  font-size:var(--font-size-sm-plus)
}
.badge{
  display:inline-block;
  border-radius:var(--radius-lg);
  padding:var(--space-0-75) var(--space-2-25);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  background:var(--color-neutral-soft);
  border:var(--border-width) solid var(--color-border)
}
.badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:var(--space-1-5);
  background:var(--muted);
  border-radius:var(--radius-round)
}
.badge.ready::before,.badge.backlog::before{
  background:var(--surface);
  border:var(--border-width-strong) solid var(--muted)
}
.badge.ready::before{border-color:var(--accent)}
.badge.blocked::before{
  border-radius:var(--radius-xs);
  background:var(--red)
}
.badge.done::before{
  border-radius:var(--radius-dot);
  transform:rotate(45deg)
}
.badge.backlog{background:var(--color-neutral-soft);border-color:var(--color-border)}
.badge.ready,.badge.review{background:var(--color-action-soft);border-color:var(--color-action-soft)}
.badge.working{background:var(--color-warning-soft);border-color:var(--color-warning-soft)}
.badge.blocked{background:var(--color-error-soft);border-color:var(--color-error-soft)}
.badge.done{background:var(--color-success-soft);border-color:var(--color-success-soft)}
.badge.review::before{background:var(--accent)}
.badge.working::before{background:var(--orange)}
.badge.done::before{background:var(--green)}
.backlog{
  color:var(--muted)
}
.ready{
  color:var(--accent)
}
.done{
  color:var(--green)
}
.working{
  color:var(--orange)
}
.review{
  color:var(--accent)
}
.blocked{
  color:var(--red)
}
.login main{
  margin:var(--space-login-offset) auto;
  max-width:440px;
  padding:var(--space-7);
  background:var(--surface);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg)
}
.login h1{
  margin-top:var(--space-6)
}

@media(max-width:800px){
  .sidebar{
  position:static;
  width:auto;
  border-right:0;
  border-bottom:var(--border-width) solid var(--border)
}
main{
  margin-left:0;
  padding:var(--space-5)
}
.page-header,.header-actions{
  flex-wrap:wrap
}
.sidebar footer{
  padding-top:0
}
.sidebar .project-switcher{
  padding:var(--space-2-5);
  border:var(--border-width) solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface-soft)
}
.sidebar .project-switcher>summary{display:flex;align-items:center;gap:var(--space-2)}
.sidebar .project-switcher>summary>span:last-of-type{min-width:0;overflow-wrap:anywhere}
.sidebar .project-switcher:not([open])>:not(summary){display:none}
.login main{
  margin:var(--space-6) var(--space-4)
}

}

/* Project typography: title 28px, section 15px, body 14px, metadata 12px. */
body{font-size:var(--font-size-body)}
h1{margin-bottom:var(--space-2)}
h2{font-size:var(--font-size-section);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4)}
a{text-decoration:none}
a:hover,a:focus-visible,a.demo-hover,a.demo-focus{text-decoration:underline}
.meta{font-size:var(--font-size-sm);color:var(--muted);font-weight:var(--font-weight-regular)}
small.meta{display:block;margin-top:var(--space-1)}
.cloud-budget.is-warning{color:var(--color-warning);background:var(--color-warning-soft);font-weight:var(--font-weight-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.wordmark{display:flex;align-items:center;gap:var(--space-3)}
.wordmark::before{content:"";width:20px;height:20px;flex-shrink:0;background:linear-gradient(var(--text),var(--text)) 0 0/8px 8px no-repeat,linear-gradient(var(--accent),var(--accent)) 12px 0/8px 8px no-repeat,linear-gradient(var(--muted),var(--muted)) 0 12px/8px 8px no-repeat,linear-gradient(var(--text),var(--text)) 12px 12px/8px 8px no-repeat}
.sidebar details label{font-size:var(--font-size-sm);margin:var(--space-2) 0}
.sidebar details input,.sidebar details select{padding:var(--space-2);margin-top:var(--space-1)}
.sidebar details button{font-size:var(--font-size-sm);padding:var(--space-2)}
.sidebar details:target::details-content{content-visibility:visible}
.page-header{border:0;margin-bottom:var(--space-3)}
.tabs{display:flex;gap:var(--space-1);border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--space-5)}
.tabs a{padding:var(--space-3) var(--space-4);color:var(--muted);border-bottom:var(--border-width-strong) solid var(--background);font-weight:var(--font-weight-medium)}
.tabs a:is(:hover,.demo-hover){background:var(--color-action-soft);color:var(--color-action)}
.tabs a.active{color:var(--text);border-bottom-color:var(--accent)}
.pill{padding:var(--space-0-5) var(--space-1-5);margin-left:var(--space-1);border-radius:var(--radius-lg);background:var(--border);font-size:var(--font-size-sm)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.metric,.table-card{background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg)}
.metric{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);color:var(--text)}
.metric strong{font-size:var(--font-size-display);font-weight:var(--font-weight-semibold)}
.token-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.token-metrics h2{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--muted)}
.usage-summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.usage-cost{display:grid;gap:var(--space-0-5);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}
.usage-cost .meta,.model-cost .meta{font-size:var(--font-size-xs)}
.estimated-cost-breakdown{margin-top:var(--space-3)}
.estimated-cost-breakdown div{grid-column:1/-1}
.estimated-cost-breakdown dd{white-space:nowrap}
.model-cost{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}
.usage-days{margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--border-width) solid var(--border)}
.usage-days h3{margin:0;font-size:var(--font-size-sm-plus)}
.usage-days>p{margin:var(--space-1) 0 var(--space-2)}
.usage-days-list{display:grid;gap:var(--space-1);margin:0;font-size:var(--font-size-sm)}
.usage-days-list div{display:flex;justify-content:space-between;gap:var(--space-2)}
.usage-days-list dt{color:var(--muted)}
.usage-days-list dd{margin:0;font-variant-numeric:tabular-nums}
.cache-quote{display:inline-flex;align-items:baseline;gap:var(--space-1-5);font-size:var(--font-size-sm);white-space:nowrap}
.cache-quote-good{color:var(--green);font-weight:var(--font-weight-semibold)}
.cache-quote-low{padding:var(--space-0-5) var(--space-1-5);border:var(--border-width) solid var(--red);border-radius:var(--radius-sm);background:var(--surface-soft);color:var(--red);font-weight:var(--font-weight-bold)}
.model-usage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--border-width) solid var(--border);font-size:var(--font-size-sm-plus)}
.model-usage>.mono{overflow-wrap:anywhere}
.token-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-4);margin:0;font-size:var(--font-size-sm)}
.model-usage .token-breakdown{grid-column:1/-1}
.token-breakdown div{display:flex;justify-content:space-between;gap:var(--space-2)}
.token-breakdown dt{color:var(--muted)}
.token-breakdown .cache-quote-low dt{color:var(--red)}
.token-breakdown dd{margin:0;font-variant-numeric:tabular-nums}
@media(max-width:600px){.token-metrics,.token-breakdown{grid-template-columns:1fr}}
.overview-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
.overview-card{padding:0;overflow:hidden}
.overview-card h2{display:flex;justify-content:space-between;padding:var(--space-4);margin:0;border-bottom:var(--border-width) solid var(--border)}
.overview-card article{padding:var(--space-4)}
.attention-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4)}
.attention-summary{min-width:0;flex:1}
.attention-action{flex:none}
.attention-action form{margin:0}
.attention-row p{margin:var(--space-2) 0 0}
.completed-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.completed-row time{margin-left:auto}
.home-board{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-5);align-items:start;margin-top:var(--space-5);min-width:0}
.home-primary,.home-secondary{display:grid;gap:var(--space-5);min-width:0}
.home-board section{margin:0;min-width:0}
.home-board .overview-card h2{align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.attention-group{padding:var(--space-3) var(--space-4)}
.attention-group h3{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--muted)}
.home-board .attention-row{align-items:flex-start}
.attention-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}
.home-board .attention-summary p{margin:0}
.home-board .attention-action{align-self:center}
.run-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}
.run-row .run-copy{min-width:0;overflow-wrap:anywhere}
.run-row p{margin:var(--space-1) 0 0}
.home-board .completed-row>a:not(.mono){flex:1 1 14rem;min-width:0;overflow-wrap:anywhere}
.history-range{display:flex;gap:var(--space-1);padding:var(--space-3) var(--space-4) 0}
.history-range .chip{font-size:var(--font-size-sm)}
.completion-chart-scroll{max-width:100%;margin:var(--space-3) var(--space-4) 0;overflow-x:auto;overscroll-behavior-x:contain}
.completion-chart{display:block;max-width:none}
.completion-chart-baseline{stroke:var(--border);stroke-width:1}
.completion-bar{fill:var(--accent)}
.completion-bar-zero{fill:var(--border)}
.completion-chart-label{fill:var(--muted);font:10px var(--font-sans);font-variant-numeric:tabular-nums}
.completion-chart-note{margin:var(--space-2) var(--space-4) var(--space-4)}
.code-chart-baseline{stroke:var(--border);stroke-width:1}
.code-chart-area-code{fill:var(--color-code-chart-code-fill)}
.code-chart-area-tests{fill:var(--color-code-chart-tests-fill)}
.code-chart-area-docs{fill:var(--color-code-chart-docs-fill)}
.code-chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.code-chart-line-code{stroke:var(--color-code-chart-code)}
.code-chart-line-tests{stroke:var(--color-code-chart-tests)}
.code-chart-line-docs{stroke:var(--color-code-chart-docs)}
.code-chart-point{fill:var(--color-code-chart-point);stroke:none;pointer-events:all}
.code-chart-point:hover{fill:var(--surface);stroke:var(--text);stroke-width:1}
.code-chart-title{margin:0 var(--space-4) var(--space-2)}
.code-chart-legend{display:flex;gap:var(--space-4);margin:0 var(--space-4) var(--space-4);color:var(--muted);font-size:var(--font-size-sm)}
.code-chart-legend span:before{display:inline-block;width:9px;height:9px;margin-right:var(--space-1-5);border-radius:var(--radius-xs);content:""}
.code-chart-legend-code:before{background:var(--color-code-chart-code)}
.code-chart-legend-tests:before{background:var(--color-code-chart-tests)}
.code-chart-legend-docs:before{background:var(--color-code-chart-docs)}
.empty{color:var(--muted);padding:var(--space-4)}
.issue-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin:var(--space-5) 0;flex-wrap:wrap}
.chips{display:flex;gap:var(--space-1);flex-wrap:wrap}
.chip{border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:var(--space-2) var(--space-3);color:var(--text);font-size:var(--font-size-sm)}
.chip span{margin-left:var(--space-1);opacity:.8}
.chip.active{background:var(--text);border-color:var(--text);color:var(--surface)}
.project-board{min-width:0;padding:var(--space-4);overflow:hidden}
.project-board-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.project-board-heading h2{margin:0 0 var(--space-1)}
.project-board-heading p{margin:0}
.project-view-switch{display:flex;align-items:center;gap:var(--space-1);flex:none;padding:var(--space-1);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft)}
.project-view-switch a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}
.project-view-switch a.active{background:var(--surface);box-shadow:var(--shadow-soft);font-weight:var(--font-weight-semibold)}
.issue-board-scroll{max-width:100%;overflow-x:auto;padding:2px 2px var(--space-3);overscroll-behavior-x:contain}
.issue-board-grid{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:var(--space-3);min-width:1410px;align-items:stretch}
.issue-board-column{display:grid;align-content:start;gap:var(--space-2);min-width:0;min-height:360px;margin:0;padding:var(--space-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);background:var(--surface-soft)}
.issue-board-column-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 var(--space-1) var(--space-2);border-bottom:var(--border-width) solid var(--border)}
.issue-board-column-heading h3{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-semibold)}
.issue-board-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 var(--space-2);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.issue-board-card{display:grid;gap:var(--space-2-5);min-width:0;margin:0;padding:var(--space-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-soft);overflow-wrap:anywhere}
.issue-board-card:last-child{border-bottom:var(--border-width) solid var(--border)}
.issue-board-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.issue-board-card-top .badge{font-size:var(--font-size-xs)}
.issue-board-card h4{margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}
.issue-board-card h4 a{color:var(--text)}
.issue-board-next,.issue-board-external{margin:0;color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}
.issue-board-next strong{color:var(--text)}
.issue-board-links{display:grid;justify-items:start;gap:var(--space-1)}
.issue-board-links a{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
.issue-board-blocker{color:var(--red)}
.issue-board-dependent{color:var(--orange)}
.issue-board-empty{align-self:center;margin:0;padding:var(--space-3) var(--space-1);color:var(--muted);font-size:var(--font-size-sm)}
.table-card{overflow:auto}
.issue-table{width:100%;border-collapse:collapse;text-align:left}
.issue-table th{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--muted);text-transform:uppercase;background:var(--surface-soft);padding:var(--space-3) var(--space-4)}
.issue-table td{padding:var(--space-4);border-top:var(--border-width) solid var(--border)}
.issue-table tr:is(:hover,:focus-within,.is-hovered,.is-focused),.run-table tr:is(:hover,:focus-within,.is-hovered,.is-focused){background:var(--surface-soft)}
.issue-table tr.selected,.run-table tr.selected{background:var(--color-action-soft)}
.issue-table td a{color:var(--text)}
.issue-table tr{position:relative}
.issue-title a::after{content:"";position:absolute;inset:0}
/* Keep cell links and their native tooltips above the stretched row link. */
.issue-table td:not(.issue-title) a,.issue-table td a:focus-visible{position:relative;z-index:1}
.phase{display:block;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-footer{padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid var(--border);font-size:var(--font-size-sm);color:var(--muted);background:var(--surface-soft)}
.dependency-panel{padding:var(--space-5);background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.dependency-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.dependency-heading h2{margin:0 0 var(--space-2);font-size:var(--font-size-section)}
.dependency-heading p{margin:0;max-width:680px}
.dependency-graph-scroll{overflow:auto;max-width:100%;padding-bottom:var(--space-2)}
.dependency-graph{position:relative;max-width:none}
.dependency-arrows{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.dependency-arrows marker path{fill:var(--muted)}
.dependency-edge{fill:none;stroke:var(--color-border);stroke-width:2}
.dependency-edge.is-highlighted{stroke:var(--accent);stroke-width:3}
.dependency-columns{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--dependency-column-gap);padding:var(--space-5)}
.dependency-column{flex:0 0 236px;width:236px;margin:0;padding:0;border:0;border-radius:0;box-shadow:var(--shadow-none)}
.dependency-column h3{height:24px;margin:0 0 var(--space-3);color:var(--muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.dependency-node-list{display:grid;gap:var(--space-3-5)}
.dependency-node{height:112px;min-width:0;padding:var(--space-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-soft);transition:opacity .12s ease,border-color .12s ease,background-color .12s ease}
.dependency-node header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.dependency-select{border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--accent);font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);padding:var(--space-1) var(--space-2);cursor:pointer;box-shadow:var(--shadow-none);text-decoration:none}
.dependency-select[aria-pressed="true"]{border-color:var(--accent);background:var(--color-action-soft)}
.dependency-select:focus-visible{outline:var(--border-width-strong) solid var(--accent);outline-offset:var(--focus-offset)}
.dependency-node .badge{max-width:144px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-xs);padding:var(--space-0-5) var(--space-1-5)}
.dependency-node h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight)}
.dependency-node h4 a{color:var(--text)}
.dependency-node.is-selected{border-color:var(--accent);background:var(--color-action-soft);box-shadow:var(--shadow-focus)}
.dependency-node.is-related{border-color:var(--accent)}
.dependency-node.is-dimmed{opacity:.35}
.dependency-edge.is-highlighted{filter:drop-shadow(0 0 2px var(--color-action-soft))}
[hidden]{display:none!important}
@media(max-width:1100px){.overview-grid{grid-template-columns:1fr}.running{margin-top:0}}
@media(max-width:600px){.attention-row{align-items:start;flex-direction:column}.phase{max-width:220px}}
@media(max-width:600px){.project-board{padding:var(--space-3)}.project-board-heading{align-items:flex-start;flex-direction:column}.project-view-switch{align-self:flex-start}}
@media(max-width:1000px){.home-board{grid-template-columns:1fr}}
@media(max-width:600px){.home-board .attention-row{align-items:flex-start}.home-board .attention-action{align-self:flex-start}.run-row{grid-template-columns:auto minmax(0,1fr)}.run-row>.badge{grid-column:2}}
.repository{font-size:var(--font-size-sm)}
.sidebar summary::after{content:"+";float:right;font-size:var(--font-size-lg);color:var(--muted)}
.sidebar .project-switcher>summary::after{float:none;margin-left:auto}
.sidebar details[open] summary::after{content:"−"}

.issue-page{max-width:1100px}
.issue-detail{margin-top:var(--space-5);background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.issue-heading{padding:var(--space-6) var(--space-7) var(--space-4)}
.issue-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.issue-heading h1{margin:var(--space-4) 0 0;font-size:var(--font-size-title)}
.issue-status{display:flex;align-items:center;gap:var(--space-2);flex:none}
.issue-heading p{margin:var(--space-2) 0}
.issue-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.issue-tag{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2-5);border:var(--border-width) solid var(--border);border-radius:var(--radius-pill);background:var(--surface-soft);font-size:var(--font-size-sm)}
.issue-tag strong{font-weight:var(--font-weight-semibold)}
.issue-tag code{overflow-wrap:anywhere}
.issue-detail .tabs{padding:0 var(--space-4);margin:0}
.issue-detail section{border:0;border-radius:0;margin:0;padding:var(--space-6) var(--space-7)}
.issue-result-feedback h2,.issue-human-checks h2{margin:0 0 var(--space-3);font-size:var(--font-size-lg)}
.issue-result-feedback.is-blocked{background:var(--color-error-soft)}
.issue-result-feedback.is-complete{background:var(--color-success-soft)}
.issue-result-feedback.has-findings{background:var(--color-warning-soft)}
.issue-result-feedback .result-outcome{margin:0 0 var(--space-2)}
.result-blocker{margin-top:var(--space-4)}
.result-blocker h3{margin:0 0 var(--space-2);font-size:var(--font-size-body)}
.result-blocker>p{margin:var(--space-2) 0}
.issue-human-checks{background:var(--color-info-soft)}
.issue-human-checks ul{margin:0;padding-left:var(--space-5)}
.issue-human-checks li+li{margin-top:var(--space-2)}
.issue-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-7);margin:0 0 var(--space-7)}
.issue-fields dt{font-size:var(--font-size-sm);color:var(--muted);margin-bottom:var(--space-1-5)}
.issue-fields dd{margin:0;overflow-wrap:anywhere}
.requirement-text{white-space:pre-wrap;overflow-wrap:anywhere}
.history-finding{margin:var(--space-3) 0}
.history-finding>summary{cursor:pointer;white-space:pre-wrap;overflow-wrap:anywhere}
.history-finding-full{padding-top:var(--space-2)}
.ci-log{min-width:0;margin-top:var(--space-3)}
.ci-log-excerpt{box-sizing:border-box;max-width:100%;max-height:40vh;margin:var(--space-2) 0;padding:var(--space-3);overflow-x:auto;overflow-y:auto;border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);background:var(--surface-soft);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--line-height-code);white-space:pre;overflow-wrap:normal}
.criteria{padding-left:var(--space-5-5);line-height:var(--line-height-relaxed)}
.issue-overview h2{margin-top:var(--space-6);margin-bottom:var(--space-2-5);font-size:var(--font-size-lg)}
.issue-actions{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-3);padding:var(--space-5) var(--space-7);border-top:var(--border-width) solid var(--border)}
.issue-actions form{margin:0}
.issue-actions label{margin:0 0 var(--space-3);font-size:var(--font-size-sm)}
.external-done{max-width:28rem}
.external-done form{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.field-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-2)}
.field-checkbox input{width:auto;margin:var(--space-1) 0 0}
.danger{background:var(--color-error);color:var(--color-action-text);border-color:var(--color-error)}
.danger:not(:disabled):not([aria-disabled="true"]):is(:hover,.demo-hover){background:var(--color-error-hover);border-color:var(--color-error-hover)}
button:disabled,button[aria-disabled="true"],.button[aria-disabled="true"]{cursor:not-allowed;background:var(--color-neutral-soft);border-color:var(--color-neutral-soft);color:var(--muted);box-shadow:var(--shadow-none)}
.timeline article{position:relative;padding-left:var(--space-6);border-left:var(--border-width-strong) solid var(--border);margin-left:var(--space-1-5)}
.timeline article::before{content:"";position:absolute;left:-6px;top:22px;width:10px;height:10px;border-radius:var(--radius-round);background:var(--accent)}
.timeline .publication::before{background:var(--green)}
.log-selection{margin-bottom:var(--space-4-5)}
.log-selection h3{margin:var(--space-3) 0 var(--space-2)}
.log-selection .chip{overflow-wrap:anywhere}
.agent-log{background:var(--text);color:var(--surface-soft);font-family:var(--font-mono);font-size:var(--font-size-sm-plus);line-height:var(--line-height-code);padding:var(--space-5);border-radius:var(--radius-md);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;max-height:65vh;min-height:220px}
.log-views{margin:var(--space-3) 0}
.run-log-view{min-width:0}
.codex-event-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3);max-height:65vh;overflow:auto}
.codex-event{min-width:0;padding:var(--space-3-5) var(--space-4);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);overflow-wrap:anywhere}
.codex-event-heading{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
.codex-event-heading strong{font-size:var(--font-size-sm-plus)}
.codex-event-state,.codex-event-meta{font-size:var(--font-size-xs);color:var(--muted)}
.codex-event.is-error{border-left:var(--border-width-accent) solid var(--color-error);background:var(--color-error-soft)}
.codex-event.is-raw{border-left:var(--border-width-accent) solid var(--color-warning)}
.codex-command,.codex-event-text{display:block;margin:var(--space-2) 0;white-space:pre-wrap;overflow-wrap:anywhere}
.codex-file-changes{list-style:none;padding:0;margin:var(--space-2) 0;display:grid;gap:var(--space-2)}
.codex-file-changes li{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline}
.codex-file-changes span{font-size:var(--font-size-xs);color:var(--muted)}
.codex-token-values{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:var(--space-2) 0}
.codex-token-values div{display:flex;gap:var(--space-1-5);font-size:var(--font-size-xs)}
.codex-token-values dt{color:var(--muted)}
.codex-token-values dd{margin:0;font-variant-numeric:tabular-nums}
.codex-command-output{margin-top:var(--space-2)}
.codex-command-output summary{cursor:pointer;font-size:var(--font-size-sm)}
.codex-command-output pre,.codex-raw-line{margin:var(--space-2) 0 0;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--surface);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--line-height-code);white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:auto}
.codex-event-empty{margin:0;padding:var(--space-4);border:var(--border-width) dashed var(--border);border-radius:var(--radius-md);color:var(--muted)}
@media(max-width:600px){.issue-heading,.issue-detail section,.issue-actions{padding:var(--space-5) var(--space-4)}.issue-title-row{align-items:flex-start}.issue-fields{grid-template-columns:1fr}}

.runs-filters{margin:var(--space-5-5) 0}
.runs-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);gap:var(--space-5);align-items:start}
.run-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm-plus)}
.run-table th{background:var(--surface-soft);text-align:left;font-size:var(--font-size-xs);text-transform:uppercase;color:var(--muted);padding:var(--space-3-5) var(--space-4)}
.run-table td{padding:var(--space-4);border-top:var(--border-width) solid var(--border);vertical-align:middle}
.run-table .selected{background:var(--surface-soft)}
.run-agent{display:flex;align-items:center;gap:var(--space-3)}
.run-agent small{display:block;margin-top:var(--space-1-25)}
.role-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface-soft);color:var(--text);font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
.run-detail{background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);min-width:0}
.run-detail header,.run-detail section{padding:var(--space-5);border-bottom:var(--border-width) solid var(--border)}
.run-detail header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.run-detail header form{flex-basis:100%}
.run-detail h2{font-size:var(--font-size-section);margin:0 0 var(--space-1-25)}
.run-detail h3{font-size:var(--font-size-sm);text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-3-5)}
.run-detail h3 a{float:right;text-transform:none}
.run-fields{margin:0;font-size:var(--font-size-sm-plus)}
.run-fields dt{color:var(--muted);margin-top:var(--space-3)}
.run-fields dd{margin:var(--space-1) 0 0;overflow-wrap:anywhere}
.run-detail .agent-log{margin:0;min-height:200px;max-height:360px;font-size:var(--font-size-sm)}
.earlier-run{padding:var(--space-3) 0;border-top:var(--border-width) solid var(--border)}
@media(max-width:1200px){.runs-grid{grid-template-columns:1fr}.run-table{min-width:700px}.runs-grid .table-card{overflow:auto}}
.runs-grid .table-card{overflow:auto}
.run-table .run-agent strong{overflow-wrap:anywhere}
.run-table .selected{background:var(--color-action-soft)}
.run-detail .role-avatar{background:var(--text);color:var(--surface)}

.next-step { border-left:var(--border-width-accent) solid var(--accent); padding:var(--space-4) var(--space-6); margin:var(--space-4) 0; }
.next-step:not(:has(#next-step-text > *)):not(:has(form)){display:none}
.next-step h2 { margin-top:var(--space-2); }
mark { background: var(--color-warning-soft); color: var(--color-warning); padding:var(--space-0-5) var(--space-2); font-weight:var(--font-weight-semibold); }

/* Markdown stays inside the issue card, including wide tables and code. */
.markdown{max-width:100%;min-width:0;overflow-x:auto;line-height:var(--line-height-normal)}
.markdown table{border-collapse:collapse;margin:var(--space-4) 0;width:max-content;min-width:100%}
.markdown th,.markdown td{border:var(--border-width) solid var(--border);padding:var(--space-2) var(--space-3);text-align:left}
.markdown th{background:var(--surface-soft);color:var(--text);font-weight:var(--font-weight-semibold)}
.markdown code,.criteria code{font-family:var(--font-mono);background:var(--surface-soft);color:var(--text);border-radius:var(--radius-sm);padding:var(--space-0-5) var(--space-1)}
.markdown pre{background:var(--surface-soft);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);overflow-x:auto}
.markdown pre code{padding:0;overflow-wrap:normal}
.markdown ul,.markdown ol{padding-left:var(--space-6);color:var(--text)}
.markdown h3{font-size:var(--font-size-lg);margin:var(--space-4-5) 0 var(--space-2-5)}
.markdown h4,.markdown h5,.markdown h6{font-size:var(--font-size-body);margin:var(--space-4) 0 var(--space-2);color:var(--text)}
.markdown blockquote{border-left:var(--border-width-wide) solid var(--border);margin-left:0;padding-left:var(--space-4);color:var(--muted)}
.markdown input[type=checkbox]{display:inline;width:auto;margin-right:var(--space-1-5)}

.screenshots figure { margin:var(--space-4) 0; }
.screenshots img { display: block; max-width: 100%; max-height: 480px; height: auto; border:var(--border-width) solid var(--border); }

/* Shared components and the living pattern catalog. */
body{font-size:var(--font-size-body);line-height:var(--line-height-normal)}
section,.metric,.table-card,.run-detail,.issue-detail,.component-card{box-shadow:var(--shadow-card)}
input,textarea,select{font-size:var(--font-size-body);transition:border-color .15s ease,box-shadow .15s ease}
:where(input,textarea,select):where(:not(:disabled)):is(:hover,.demo-hover){border-color:var(--color-border-strong)}
input:focus,textarea:focus,select:focus,input.focus-preview,textarea.focus-preview,select.focus-preview{outline:0;border-color:var(--color-action);box-shadow:var(--shadow-focus)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--color-error);background:var(--color-error-soft)}
input:disabled,textarea:disabled,select:disabled{cursor:not-allowed;background:var(--color-neutral-soft);color:var(--color-muted)}
.design-link{display:block;padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-action);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.design-link:hover{background:var(--color-action-soft);text-decoration:none}
.metric,.table-card,.run-detail,.issue-detail,.component-card{border-radius:var(--radius-lg)}
.metric:hover,.metric.is-hovered{box-shadow:var(--shadow-raised)}
.empty-state{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);border:var(--border-width) dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface-soft);text-align:center}
.empty-state h3,.empty-state p{margin:0}
.empty-state p{max-width:44ch;color:var(--muted)}
.empty-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--color-action-soft);color:var(--color-action);font-size:var(--font-size-xl-plus);font-weight:var(--font-weight-medium)}
.notice{margin:0;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--color-border);border-left:var(--border-width-accent) solid var(--color-info);border-radius:var(--radius-md);background:var(--color-info-soft);color:var(--color-text)}
.notice-info{border-left-color:var(--color-info);background:var(--color-info-soft)}
.notice-success{border-left-color:var(--color-success);background:var(--color-success-soft)}
.notice-warning{border-left-color:var(--color-warning);background:var(--color-warning-soft)}
.notice-error{border-left-color:var(--color-error);background:var(--color-error-soft)}
.design-page{max-width:1400px}
.design-header{align-items:flex-end;gap:var(--space-6);margin-bottom:var(--space-6)}
.design-header h1{margin:0}
.design-lead{max-width:68ch;margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--font-size-lg)}
.eyebrow,.sample-label{display:block;margin:0 0 var(--space-1);color:var(--muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}
.design-mode{flex:none;padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-action);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.design-section{margin:var(--space-5) 0;padding:var(--space-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.design-section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-5)}
.design-section-heading h2{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.design-section-heading>p{max-width:56ch;margin:0;color:var(--muted);font-size:var(--font-size-sm)}
.swatch-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3)}
.swatch-card{display:grid;gap:var(--space-1);min-width:0}
.swatch{height:54px;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}
.swatch-card strong{font-size:var(--font-size-sm)}
.swatch-card code,.spacing-samples code{color:var(--muted);font-size:var(--font-size-xs)}
.color-background{background:var(--color-background)}
.color-surface{background:var(--color-surface)}
.color-surface-soft{background:var(--color-surface-soft)}
.color-text{background:var(--color-text)}
.color-border{background:var(--color-border)}
.color-action{background:var(--color-action)}
.color-action-soft{background:var(--color-action-soft)}
.color-success{background:var(--color-success)}
.color-warning{background:var(--color-warning)}
.color-info{background:var(--color-info)}
.color-error{background:var(--color-error)}
.type-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-6)}
.type-samples>div{display:grid;align-content:start;gap:var(--space-1)}
.type-display{font-size:var(--font-size-display);font-weight:var(--font-weight-semibold)}
.type-section{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}
.spacing-samples{display:flex;align-items:end;gap:var(--space-5);margin-top:var(--space-6);padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-border)}
.spacing-samples>div{display:grid;justify-items:start;gap:var(--space-1)}
.spacing-bar{display:block;width:var(--space-2);height:var(--space-2);border-radius:var(--radius-sm);background:var(--color-action)}
.spacing-1{width:var(--space-1);height:var(--space-1)}
.spacing-2{width:var(--space-2);height:var(--space-2)}
.spacing-3{width:var(--space-3);height:var(--space-3)}
.spacing-4{width:var(--space-4);height:var(--space-4)}
.spacing-6{width:var(--space-6);height:var(--space-6)}
.spacing-8{width:var(--space-8);height:var(--space-8)}
.shape-samples{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6);padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-border)}
.radius-samples,.shadow-samples{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.radius-samples>div{display:grid;justify-items:start;gap:var(--space-1-5)}
.radius-samples code{color:var(--muted);font-size:var(--font-size-xs)}
.radius-sample{display:block;width:48px;height:32px;border:var(--border-width) solid var(--color-border-strong);background:var(--color-action-soft)}
.radius-small{border-radius:var(--radius-sm)}
.radius-medium{border-radius:var(--radius-md)}
.radius-large{border-radius:var(--radius-lg)}
.radius-pill{border-radius:var(--radius-pill)}
.shadow-sample{padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--muted);font-size:var(--font-size-xs)}
.shadow-soft{box-shadow:var(--shadow-soft)}
.shadow-card{box-shadow:var(--shadow-card)}
.shadow-raised{box-shadow:var(--shadow-raised)}
.component-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.badge-row{gap:var(--space-2)}
.design-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.component-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:190px;margin:0;padding:var(--space-5);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.component-card h3,.component-card p{margin:0}
.component-card h3{font-size:var(--font-size-lg)}
.component-card p{color:var(--muted)}
.component-card .badge{margin-top:auto}
.component-card.selected{border-color:var(--color-action);background:var(--color-action-soft)}
.metric{border-color:var(--color-border);background:var(--color-surface);text-decoration:none}
.metric strong{color:var(--color-action)}
.attention-card{background:var(--color-warning-soft);border-color:var(--color-warning-soft)}
.form-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2) var(--space-6)}
.form-samples label{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.form-samples .error{display:block;margin-top:var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}
.design-tabs{margin:0;border-bottom-color:var(--color-border)}
.notice-stack{display:grid;gap:var(--space-3)}
@media(max-width:1000px){.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.design-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.design-header,.design-section-heading{align-items:flex-start;flex-direction:column}.design-mode{align-self:flex-start}.design-section{padding:var(--space-5)}}
@media(max-width:600px){.swatch-grid,.design-card-grid,.type-samples,.form-samples{grid-template-columns:1fr 1fr}.spacing-samples{gap:var(--space-3);flex-wrap:wrap}.design-section{padding:var(--space-4)}.design-lead{font-size:var(--font-size-body)}}
@media(max-width:600px){.shape-samples{grid-template-columns:1fr}.shadow-samples{align-items:stretch}}

.button-samples{margin-bottom:var(--space-4)}
.proposal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.proposal-grid .proposal-card{display:flex;flex-direction:column;min-width:0;border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);overflow-wrap:anywhere}
.proposal-card.recommended{border:var(--border-width-strong) solid var(--accent);padding:calc(var(--space-5) - var(--border-width))}
.proposal-card header{min-height:calc(var(--space-8) * 2)}
.proposal-card h3{margin:var(--space-3) 0 0;font-size:var(--font-size-lg)}
.proposal-card h4{font-size:var(--font-size-sm);color:var(--muted);margin:var(--space-4) 0 var(--space-1-5)}
.proposal-card p{margin:var(--space-2) 0}
.issue-form{display:grid;gap:var(--space-4)}
.issue-form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.issue-form-fields label{margin:0}
.issue-form-triage{display:grid;grid-template-columns:minmax(14rem,.8fr) minmax(0,1.2fr);align-items:end;gap:var(--space-4)}
.issue-form-triage label{margin:0}
.issue-form-note{display:grid;gap:var(--space-1);align-content:center;min-height:100%;padding:var(--space-3) var(--space-4);border-left:var(--border-width-accent) solid var(--color-info);border-radius:var(--radius-md);background:var(--color-info-soft)}
.issue-form-note code{font-weight:var(--font-weight-semibold)}
.issue-form-note p,.form-help{margin:0;color:var(--muted);font-size:var(--font-size-sm)}
.issue-blocker-options{min-width:0;margin:0;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--border);border-radius:var(--radius-md)}
.issue-blocker-options legend{padding:0 var(--space-1);font-weight:var(--font-weight-semibold)}
.issue-blocker-options>.form-help{margin:0 0 var(--space-2)}
.issue-blocker-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-2);margin:0;padding:var(--space-2) 0;border-top:var(--border-width) solid var(--border)}
.issue-blocker-option input{width:auto;margin:var(--space-1) 0 0}
.issue-blocker-option span{display:grid;gap:var(--space-1)}
.issue-blocker-option small{color:var(--muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal)}
.issue-form-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
@media(max-width:600px){.issue-form-fields,.issue-form-triage{grid-template-columns:1fr}.issue-form-note{min-height:0}}
.proposal-card details{margin-top:var(--space-4);font-size:var(--font-size-sm)}
.proposal-new{border-left:var(--border-width-strong) solid var(--accent);padding-left:var(--space-2-5)}
.proposal-actions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:auto;padding-top:var(--space-5)}
.proposal-actions form{margin:0}
.proposal-actions button,.proposal-actions .button{width:100%;font-size:var(--font-size-sm);text-align:center;box-sizing:border-box}
.proposal-card .badge{float:right;font-size:var(--font-size-xs)}
@media(max-width:1000px){.proposal-grid{grid-template-columns:1fr}.proposal-card header{min-height:0}}

.proposal-old,.proposal-added{display:block;padding:var(--space-2);border-radius:var(--radius-sm);margin-top:var(--space-2)}
.proposal-old{background:var(--surface-soft);color:var(--red);border-left:var(--border-width-strong) solid var(--red)}
.proposal-added{background:var(--surface-soft);color:var(--green);border-left:var(--border-width-strong) solid var(--green);text-decoration:none}