/* Team server pages: the local app's look (Pico + tokens.css), with the same header, left rail and theme switch.
   Shell rules mirror harness/app/static/app.css ("Workspace navigation"); keep the two in step. */
:root {
  --pico-font-size: 95%;
  --ui-surface: color-mix(in srgb, var(--pico-card-background-color) 92%, var(--pico-background-color));
  --ui-border: var(--pico-muted-border-color);
  --ui-accent: #2754b8;
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 11%, var(--pico-background-color));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-accent: #8ca8ff; } }
:root[data-theme="dark"] { --ui-accent: #8ca8ff; }
:root[data-theme="light"] { --ui-accent: #2754b8; }
html { scroll-behavior: smooth; }
body { min-width: 320px; }

/* header */
.app-header {
  position: sticky; top: 0; z-index: 20; height: 4.25rem; display: flex; align-items: center; gap: 1rem;
  padding: 0 2rem; border-bottom: 1px solid var(--ui-border); background: var(--pico-background-color);
}
.app-header .brand { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.035em; text-decoration: none; color: var(--pico-color); white-space: nowrap; }
.brand-dot { color: var(--ui-accent); }
.brand-sub { margin-left: 0.45rem; padding: 0.05rem 0.45rem; border: 1px solid var(--ui-border); border-radius: 0.35rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0; color: var(--pico-muted-color); vertical-align: 0.2em; }
.header-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pico-muted-color); font-size: 0.88rem; }
.header-divider { margin-right: 0.8rem; color: var(--ui-border); }
.header-actions { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.header-actions a { color: var(--pico-muted-color); text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.header-actions a:hover { color: var(--pico-color); }
.header-user { color: var(--pico-muted-color); font-size: 0.82rem; }
.header-actions form { margin: 0; }
.header-actions button { width: auto; margin: 0; padding: 0.3rem 0.75rem; font-size: 0.8rem; }
.theme-control { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--pico-muted-color); font-size: 0.78rem; font-weight: 600; }
.theme-control select { width: auto; height: 2rem; margin: 0; padding: 0.15rem 1.7rem 0.15rem 0.5rem; font-size: 0.78rem; }
.mobile-theme { margin-top: 1rem; }
.mobile-signout { margin: 1rem 0 0; }
.mobile-signout button { width: 100%; margin: 0; font-size: 0.85rem; }
.mobile-menu { display: none; }

/* shell and left rail */
.app-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: calc(100vh - 4.25rem); }
.app-sidebar { position: sticky; top: 4.25rem; align-self: start; height: calc(100vh - 4.25rem); overflow-y: auto; display: flex; flex-direction: column;
  padding: 1.65rem 0.85rem 1rem; border-right: 1px solid var(--ui-border); background: var(--ui-surface); }
.sidebar-project { display: flex; flex-direction: column; padding: 0.15rem 0.8rem 1.3rem; border-bottom: 1px solid var(--ui-border); margin-bottom: 1.3rem; }
.sidebar-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.04rem; }
.sidebar-eyebrow, .sidebar-group-label, .eyebrow { color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; font-weight: 750; }
.sidebar-eyebrow { margin-bottom: 0.25rem; }
.switch-project { font-size: 0.76rem; margin: 0.25rem 0 0; }
details.switch-project > summary { color: var(--pico-primary); cursor: pointer; }
details.switch-project > summary::after { float: none; display: inline-block; margin-inline-start: 0.3rem; vertical-align: middle; }
details.switch-project ul { list-style: none; padding: 0.35rem 0 0; margin: 0; }
details.switch-project li { list-style: none; margin: 0; padding: 0.15rem 0; }
.sidebar-group-label { padding: 0 0.8rem; margin-bottom: 0.5rem; }
.sidebar-group-spaced { margin-top: 1.4rem; }
.sidebar-link { display: flex; align-items: center; gap: 0.72rem; min-height: 2.45rem; padding: 0.42rem 0.72rem;
  border-radius: 0.55rem; color: var(--pico-muted-color); text-decoration: none; font-size: 0.87rem; font-weight: 570; }
.sidebar-link:hover, .sidebar-link:focus-visible { background: var(--ui-accent-soft); color: var(--pico-color); text-decoration: none; }
.sidebar-link.is-active { background: var(--ui-accent-soft); color: var(--pico-color); font-weight: 740; }
.sidebar-link.is-active .nav-symbol { color: var(--ui-accent); }
.sidebar-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-symbol, .nav-step-index { width: 1.25rem; flex: none; text-align: center; font-size: 1.05rem; line-height: 1; }
.nav-step-index { border: 1px solid var(--ui-border); border-radius: 0.35rem; padding: 0.14rem 0; font-size: 0.73rem; }
.nav-count { margin-left: auto; min-width: 1.5rem; padding: 0.05rem 0.4rem; border-radius: 1rem; text-align: center;
  font-size: 0.7rem; font-weight: 700; color: var(--pico-muted-color); border: 1px solid var(--ui-border); }
.nav-count.hot { color: #fff; background: var(--st-attention); border-color: var(--st-attention); }
.sidebar-bottom { margin-top: auto; padding: 1.5rem 0.8rem 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.72rem; color: var(--pico-muted-color); }
.app-main { min-width: 0; width: 100%; max-width: 90rem; margin: 0 auto; padding: 2rem clamp(1.2rem, 3vw, 3.5rem) 4rem; }

/* page heading */
.page-breadcrumb ul { margin-bottom: 1.3rem; font-size: 0.78rem; }
.page-breadcrumb li { color: var(--pico-muted-color); }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
.page-heading .eyebrow { margin: 0 0 0.35rem; }
.page-heading h1 { margin: 0; font-size: clamp(1.6rem, 2vw, 2.2rem); letter-spacing: -0.035em; }
.page-heading h1 .status { font-size: 0.42em; letter-spacing: 0; vertical-align: 0.25em; margin-left: 0.3rem; }
.page-heading h1 .count { font-size: 0.5em; letter-spacing: 0; vertical-align: 0.2em; margin-left: 0.2rem; }
.page-lede { color: var(--pico-muted-color); max-width: 58rem; font-size: 0.95rem; margin: 0.35rem 0 0; }
main h2 { font-size: 1.15rem; margin: var(--space-4) 0 var(--space-2); }
.section-title { margin-top: 2rem; }
.sub { color: var(--pico-muted-color); margin-bottom: var(--space-4); }
.muted { color: var(--pico-muted-color); font-size: var(--text-sm); }
.count { font-size: var(--text-sm); color: var(--pico-muted-color); font-weight: 600; }

/* surfaces */
.panel { margin: 1.5rem 0; padding: 1.25rem 1.4rem; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.8rem; }
.panel > h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-help { font-size: 0.82rem; color: var(--pico-muted-color); margin: 0 0 1rem; }
.panel pre { margin-bottom: 0.8rem; }
.side-panel { min-width: 0; padding: 1.25rem; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.8rem; align-self: start; }
.side-panel h2 { margin-top: 0; }
.table-panel { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0.8rem; background: var(--ui-surface); margin-bottom: 1rem; }
.table-panel table { margin: 0; --pico-background-color: transparent; }
.table-panel th { font-size: 0.75rem; font-weight: 700; color: var(--pico-muted-color); }
.table-panel th, .table-panel td { padding: 0.75rem 1rem; background: transparent; }
.table-panel tbody tr:last-child td { border-bottom: 0; }
.table-panel tbody tr:hover td { background: var(--ui-accent-soft); }
.role-chip { display: inline-block; padding: 0.05rem 0.55rem; border: 1px solid var(--ui-border); border-radius: 1rem; font-size: 0.78rem; color: var(--pico-muted-color); }
.flash { border-left: 3px solid var(--st-done); padding: 0.7rem 1rem; background: color-mix(in srgb, var(--st-done) 10%, transparent);
         margin-bottom: 1.2rem; border-radius: 0.5rem; font-size: 0.9rem; }
.empty { border: 1px dashed var(--ui-border); border-radius: 0.65rem; padding: 0.9rem 1.1rem; color: var(--pico-muted-color); font-size: 0.9rem; }
.empty-lead p { margin: 0; }
.empty-lead p + p { margin-top: 0.25rem; }
.empty-lead strong:first-child { color: var(--pico-color); }
.secret { border: 1px solid var(--st-attention); border-radius: 0.65rem; padding: 1rem 1.2rem; margin-bottom: 1.5rem;
          background: color-mix(in srgb, var(--st-attention) 8%, transparent); }
.secret code { display: block; word-break: break-all; margin-top: var(--space-2); }
details.disclosure { margin: 0 0 1rem; padding: 0.7rem 1rem; border: 1px solid var(--ui-border); border-radius: 0.6rem; background: var(--ui-surface); font-size: 0.9rem; }
details.disclosure[open] > summary { margin-bottom: 0.8rem; }
.confirm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; margin-bottom: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border)); border-radius: 0.65rem; background: var(--ui-accent-soft); }
.confirm-bar p { margin: 0; }
.confirm-bar button { width: auto; margin: 0 0 0 auto; padding: 0.4rem 1rem; }

/* status */
.status { display: inline-block; padding: 0.05em 0.55em; border-radius: 0.3em; font-size: 0.8em;
          color: #fff; white-space: nowrap; background: var(--st-pending); }
.status.planning, .status.running { background: var(--st-running); }
.status.ready, .status.merging { background: var(--st-attention); }
.status.queued, .status.pending { background: var(--st-pending); }
.status.pr_open, .status.needs_attention, .status.interrupted { background: var(--st-attention); }
.status.merged, .status.skipped { background: var(--st-done); }
.status.failed { background: var(--st-failed); }

/* forms */
main form > button[type=submit] { width: auto; }
form.row, .row.fields { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
form.row { margin: 0; }
form.row > label, .row.fields > label { margin: 0; flex: 1 1 11rem; font-size: 0.85rem; font-weight: 600; }
form.row > label > input, form.row > label > select, .row.fields > label > input { margin: 0.35rem 0 0; font-weight: 400; }
form.row > input:not([type=hidden]) { margin: 0; flex: 1 1 11rem; }
form.row button { flex: 0 0 auto; width: auto; margin: 0; height: var(--pico-form-element-height, 3rem); padding-inline: 1.2rem; }
.row.fields { margin-bottom: 1rem; }
fieldset.scopes { display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
fieldset.scopes legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
fieldset.scopes label { font-size: 0.88rem; }
td.actions { text-align: right; }
td.actions form { margin: 0; }
td.actions button { margin: 0; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); width: auto; }
table td, table th { vertical-align: top; }

@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack tr { display: block; border-bottom: 1px solid var(--ui-border); padding: var(--space-2) 0; }
  table.stack td { display: block; border: 0; padding: var(--space-1) 1rem; }
  td.actions { text-align: left; }
}

/* working pages */
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--space-2); top: var(--space-2); background: var(--pico-background-color); padding: var(--space-2); z-index: 30; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
.needs section { margin-bottom: 1.6rem; }
.needs h2 { display: flex; gap: var(--space-2); align-items: baseline; margin-top: 0; }
.needs section + section h2 { margin-top: 0.5rem; }
.item { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between;
        padding: 0.8rem 1rem; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.7rem; margin-bottom: 0.5rem; }
.item > span { flex: 1 1 20rem; min-width: 0; font-size: 0.92rem; }
.item form { margin: 0; }
.item button, .item a[role=button] { margin: 0; width: auto; padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.lane { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.8rem; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.lane header { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.lane header h3 { font-size: 1.05rem; }
.lane header form, .lane .row form { margin: 0; }
.lane button, .lane select { margin: 0; width: auto; padding: 0.3rem 0.75rem; font-size: var(--text-sm); height: auto; }
.lane .row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.lane .row form { display: flex; gap: var(--space-2); align-items: center; }
.task { border-top: 1px solid var(--ui-border); padding: 0.65rem 0; }
.task:last-child { padding-bottom: 0.1rem; }
.task .line { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; font-size: 0.92rem; }
.task form { margin: 0.4rem 0 0; }
button.small { width: auto; margin: 0; padding: 0.2rem 0.7rem; font-size: 0.85em; }
.stepper { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0.35rem; border: 1px solid var(--ui-border);
  border-radius: 0.7rem; background: var(--ui-surface); }
.stepper a { padding: 0.4rem 0.85rem; border-radius: 0.5rem; text-decoration: none; color: var(--pico-muted-color); font-size: 0.85rem; font-weight: 600; }
.stepper a:hover { background: var(--ui-accent-soft); color: var(--pico-color); }
.stepper a[aria-current="step"] { background: var(--ui-accent-soft); color: var(--pico-color); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 45%, transparent); }
.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.35rem; }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } }
.cols h2:first-child, .cols section > h2:first-child { margin-top: 0; }
.q { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.7rem; padding: 1rem 1.15rem; margin-bottom: 0.65rem; box-shadow: none; }
.q:target { border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 20%, transparent); }
.q > header { margin: 0 0 0.5rem; padding: 0; background: none; border: 0; font-weight: 650; font-size: 0.93rem; line-height: 1.45; }
.q > header code { font-size: 0.72rem; font-weight: 400; }
.q .rec { border-radius: 0.55rem; padding: 0.75rem 0.9rem; margin: 0.6rem 0; background: var(--ui-accent-soft); }
.q .rec .label-small { color: var(--ui-accent); font-weight: 760; }
.q .props { border-left: 3px solid var(--st-running); padding-left: 0.8rem; margin: 0.6rem 0; }
.q .decided { padding: 0.75rem 0.9rem; border-radius: 0.55rem; background: color-mix(in srgb, var(--st-done) 10%, transparent); margin: 0.6rem 0 0; }
.q fieldset label { font-weight: 400; }
.q textarea { margin-bottom: var(--space-2); }
.q form button { width: auto; margin: 0; }
.label-small { font-size: 0.75rem; color: var(--pico-muted-color); display: block; font-weight: 650; }
.q-group { font-size: 0.66rem; font-weight: 650; padding: 0.05rem 0.5rem; border-radius: 2rem; border: 1px solid var(--ui-border); color: var(--pico-muted-color); cursor: help; }
.chat { max-height: 34rem; overflow: auto; }
.chat .msg { padding: var(--space-2) 0; border-bottom: 1px solid var(--ui-border); }
.chat .who { font-size: var(--text-sm); color: var(--pico-muted-color); }
.chat .body { white-space: pre-wrap; }
.mockup-frame { width: 100%; height: 26rem; border: 1px solid var(--ui-border); border-radius: 0.55rem; background: #fff; }
.doc-body { min-width: 0; }
.doc-body article { margin: 0; border: 1px solid var(--ui-border); border-radius: 0.8rem; box-shadow: none; }
.doc-body pre { white-space: pre-wrap; }
.comment { border-bottom: 1px solid var(--ui-border); padding: 0.6rem 0; font-size: 0.9rem; }
.comment.resolved { opacity: 0.65; }
.comment form { margin: var(--space-1) 0 0; }
.side-panel form button, .comment button { width: auto; margin: 0; padding: var(--space-1) 0.8rem; font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
iframe:focus, iframe:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; }
figure:focus-within .mockup-frame { outline: 3px solid var(--ui-accent); outline-offset: 2px; }

@media (max-width: 800px) {
  .app-header { height: 3.75rem; padding: 0 1rem; }
  .header-actions, .app-sidebar { display: none; }
  .header-context { display: none; }
  .mobile-menu { display: block; margin: 0 0 0 auto; position: relative; }
  .mobile-menu summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; }
  .mobile-menu nav { position: absolute; top: 2.2rem; right: 0; width: min(19rem, calc(100vw - 1rem)); max-height: calc(100vh - 5rem); overflow-y: auto;
    padding: 1rem; border: 1px solid var(--ui-border); border-radius: 0.65rem; background: var(--pico-background-color); box-shadow: 0 1rem 2rem #0003; }
  .mobile-menu nav { display: block; }
  .mobile-menu nav nav { position: static; width: auto; max-height: none; padding: 0; border: 0; box-shadow: none; background: none; }
  .app-shell { display: block; }
  .app-main { padding: 1.3rem 1rem 3rem; }
  .page-heading { display: block; }
  .panel { padding: 1rem; }
}

.signin-page { padding: 0 1rem; }

/* sign-in: the lifecycle on the left is the page's one bold element; the form stays plain */
.signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5);
          align-items: start; max-width: 60rem; margin: var(--space-5) auto; }
.signin-story { --ink: #17223b; --rail: #3a4d78; background: var(--ink); color: #e6ebf5;
                border-radius: 0.6rem; padding: var(--space-5) var(--space-5) var(--space-4); }
.signin-story .wordmark { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
                          color: #fff; margin-bottom: var(--space-3); }
.signin-story .wordmark span { display: block; font-size: var(--text-base); font-weight: 500; letter-spacing: 0;
                               color: #a9b6d3; margin-top: var(--space-2); }
.signin-story .lede { color: #c9d2e6; max-width: 34ch; margin-bottom: var(--space-4); }
.rail { list-style: none; counter-reset: phase; padding: 0; margin: 0; position: relative; }
.rail li { counter-increment: phase; position: relative; list-style: none; padding: 0 0 var(--space-3) 3rem; margin: 0; }
.rail li:last-child { padding-bottom: 0; }
.rail li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.95rem - 1px); top: 1.9rem; bottom: 0;
                                   width: 2px; background: var(--rail); transform-origin: top;
                                   animation: rail-draw 0.25s ease-out both; }
.rail li:nth-child(2)::after { animation-delay: 0.25s; }
.rail li:nth-child(3)::after { animation-delay: 0.5s; }
.rail li:nth-child(4)::after { animation-delay: 0.75s; }
.rail li::before { content: counter(phase); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem;
                   border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); font-weight: 700;
                   background: var(--ink); border: 2px solid var(--rail); color: #c9d2e6; }
.rail li:last-child::before { background: var(--st-running); border-color: var(--st-running); color: #fff; }
.rail strong { display: block; color: #fff; line-height: 1.9rem; }
.rail span { display: block; color: #a9b6d3; font-size: var(--text-sm); }
@keyframes rail-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.signin-form { padding-top: var(--space-4); max-width: 26rem; }
.signin-form h1 { font-size: 1.6rem; }
.signin-form code { overflow-wrap: anywhere; }
.signin .gh-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%;
                     background: #1f2328; border-color: #1f2328; color: #fff; font-weight: 600; }
.signin .gh-button:hover { background: #32383f; border-color: #32383f; }
.trial { margin-top: var(--space-5); border: 1px dashed var(--st-attention); border-radius: 0.5rem; padding: var(--space-3); }
.trial h2 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.accounts { --account-fg: var(--pico-color); list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.accounts li { list-style: none; margin: 0; }
.accounts form { margin: 0; }
.signin .account { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: 0; text-align: left;
                   padding: var(--space-2) var(--space-3); background: transparent; color: var(--account-fg);
                   border: 1px solid var(--pico-muted-border-color); }
.signin .account:hover { border-color: var(--st-attention); background: color-mix(in srgb, var(--st-attention) 7%, transparent); }
.account .initial { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
                    background: var(--st-attention); color: #fff; font-weight: 700; }
.account .who { font-weight: 600; }
.account .who small { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--pico-muted-color); }
.trial details.other { margin: 0; }
.trial details.other summary { font-size: var(--text-sm); }
.trial details.other form { margin-top: var(--space-2); }

@media (max-width: 880px) {
  .signin { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
  .signin-story { padding: var(--space-3); }
  .signin-story .wordmark { font-size: 1.8rem; margin: 0; }
  .signin-story .lede, .rail { display: none; }
  .signin-form { padding-top: 0; max-width: none; }
}