.btn { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); border: 1px solid transparent; transition: .16s ease; white-space: nowrap; }
.btn:hover { color: var(--text); background: var(--panel-hover); }
.btn-secondary { background: var(--panel); border-color: var(--line); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.025) inset; }
.btn-primary { background: var(--text); color: var(--bg); font-weight: 520; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-danger { color:var(--danger); }
.btn-danger:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.btn-danger.confirm-delete-project { border-color:color-mix(in srgb,var(--danger) 28%,transparent); }
.btn-icon { width: 34px; padding: 0; }
.btn-rail { position:relative; width: 40px; height: 40px; padding: 0; border-radius: 9px; color: var(--muted); }
.btn-rail:disabled { opacity:.34; cursor:default; }
.btn-rail:disabled:hover { background:transparent; color:var(--muted); }
.rail-count { position:absolute; top:3px; right:3px; min-width:15px; height:15px; padding:0 4px; display:grid; place-items:center; border-radius:99px; background:var(--warning); color:var(--bg); font-size:9px; font-weight:640; }
.btn-rail.active { background: var(--panel-strong); color: var(--text); box-shadow: 0 0 0 1px var(--line) inset; }
.sync { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.project-switcher { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 18px; color: var(--text-soft); background: transparent; border-radius: 8px; text-align: left; }
.project-switcher:hover { background: var(--panel); color: var(--text); }
.project-icon { width: 29px; height: 29px; display:grid; place-items:center; border-radius:8px; background:var(--panel-strong); color:var(--text-soft); }
.project-meta { min-width:0; flex:1; }
.project-meta strong,.project-meta span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-meta strong { font-size:13px; font-weight:490; }
.project-meta span { color:var(--muted); font-size:12px; margin-top:1px; }
.progress-wrap { padding: 0 8px 19px; border-bottom:1px solid var(--line); margin-bottom:17px; }
.progress-label { display:grid; gap:5px; font-size:12px; color:var(--muted); margin-bottom:8px; }
.progress-name { display:flex; align-items:center; gap:6px; }
.posture-value { color:var(--text-soft); font-size:12px; font-weight:550; }
.progress-wrap[data-integrity-safe="false"] .posture-value,.metric[data-integrity-safe="false"] .posture-metric { color:var(--danger); }
.integrity-counts { color:var(--muted); font-size:10px; line-height:1.4; }
.integrity-risk { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); font-size:10px; }
.integrity-risk > span { color:var(--faint); text-transform:uppercase; letter-spacing:.07em; }
.integrity-risk > strong { color:var(--text-soft); font-size:11px; font-weight:550; text-align:right; }
.structural-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 6px; color:var(--faint); font-size:10px; }
.progress-track { height:3px; border-radius:3px; background:var(--control); overflow:hidden; }
.progress-bar { display:block; width:0; height:100%; background:var(--progress); border-radius:3px; transition:width .62s cubic-bezier(.32,.72,0,1); }
.progress-detail { display:block; margin-top:7px; color:var(--faint); font-size:10px; line-height:1.4; }
.nav-heading { padding:0 8px 7px; font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.09em; }
.section-nav { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.section-link { position:relative; display:flex; align-items:center; gap:9px; width:100%; min-height:34px; padding:7px 9px; border-radius:7px; background:transparent; color:var(--muted); text-align:left; font-size:13px; }
.section-link:hover { background:var(--panel); color:var(--text-soft); }
.section-link.active { background:var(--panel-strong); color:var(--text); }
.section-link .icon { width:16px; height:16px; }
.nav-state { margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--faint); transition:background .32s ease; }
.nav-state.complete { background:var(--success); }
.nav-state.open { background:var(--warning); }
.sidebar-footer { margin-top:24px; padding:17px 8px 0; border-top:1px solid var(--line); }
.sidebar-footer button { width:100%; justify-content:flex-start; padding-left:0; color:var(--muted); }
.doc-kicker { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin-bottom:13px; }
.doc-title-row { display:flex; align-items:flex-start; gap:20px; }
.doc-title { margin:0; flex:1; color:var(--text); font-family:var(--headline); font-size:30px; line-height:1.16; letter-spacing:-.006em; font-weight:470; }
.build-package-control { gap:7px; }
.build-package-control small { padding-left:7px; border-left:1px solid currentColor; font:560 9px var(--mono); letter-spacing:.035em; opacity:.62; text-transform:uppercase; }
.build-package-control.state-changed { animation:package-state-changed 1.25s ease both; }
@keyframes package-state-changed { 30% { box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 18%,transparent); } }
.section { scroll-margin-top:86px; margin-top:38px; }
.section-header { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.section-index { color:var(--faint); font-family:var(--mono); font-size:12px; }
.section-title { margin:0; font-family:var(--headline); font-size:16px; font-weight:510; letter-spacing:.004em; }
.section-action { margin-left:auto; opacity:0; transition:opacity .18s ease; }
.section:hover .section-action,.section:focus-within .section-action { opacity:1; }
.field { border:1px solid var(--line); background:var(--bg-raised); border-radius:var(--radius-md); padding:17px 18px; transition:.16s ease; }
.field:hover { border-color:var(--line-strong); }
.field:focus-within { border-color:var(--line-strong); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 4%,transparent); }
.field-label { display:flex; align-items:center; justify-content:flex-start; gap:7px; margin-bottom:9px; color:var(--muted); font-size:12px; }
.field-label > span:last-child { margin-left:auto; }
.field-label strong { color:var(--text-soft); font-weight:590; font-size:13px; letter-spacing:.006em; }
.field textarea { width:100%; min-height:72px; padding:0; resize:none; overflow:hidden; border:0; outline:0; background:transparent; color:var(--text); line-height:1.65; }
.field-note { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--faint); font-size:12px; }
.cards { display:grid; gap:9px; }
.requirement { position:relative; border:1px solid var(--line); background:var(--bg-raised); border-radius:var(--radius-md); padding:15px 16px; transition:.16s ease; }
.requirement:hover { background:var(--surface-hover); border-color:var(--line-strong); }
.requirement { cursor:pointer; }
.req-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.req-type { color:var(--muted); font-size:12px; }
.req-menu { margin-left:auto; opacity:.35; pointer-events:none; transition:opacity .18s ease; }
.requirement:hover .req-menu { opacity:1; }
.req-title { margin:0; font-size:14px; line-height:1.48; font-weight:430; letter-spacing:.003em; }
.req-detail { margin:7px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.workflow-hint { margin:-3px 0 12px; color:var(--muted); font-size:12px; line-height:1.6; }
.workflow-cards { display:block; }
.requirement.workflow-step { min-height:0; display:block; margin-left:36px; padding:14px 42px 14px 16px; cursor:grab; transform-origin:center; }
.workflow-step > .req-top { min-width:0; justify-content:flex-start; flex-wrap:wrap; margin:0 0 7px; }
.workflow-step-body { min-width:0; }
.workflow-step::before { content:""; position:absolute; left:-23px; top:0; bottom:-1px; width:1px; background:var(--line); }
.workflow-step-marker { position:absolute; left:-36px; top:12px; width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--muted); font:10px var(--mono); }
.workflow-step[data-kind="decision"] .workflow-step-marker { border-radius:5px; border-color:color-mix(in srgb,var(--info) 35%,var(--line)); color:var(--info); }
.workflow-step .req-detail { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.workflow-step .req-title { font-weight:490; }
.workflow-drag-preview::before,.workflow-drag-preview .workflow-step-marker { display:none; }
.workflow-step:active { cursor:grabbing; }
.workflow-cards.is-dragging { user-select:none; }
.workflow-cards.is-dragging .workflow-step { transition:border-color .18s ease,background-color .18s ease,box-shadow .2s cubic-bezier(.22,.7,.2,1); will-change:transform; }
.workflow-cards.is-dragging .workflow-insert { pointer-events:none; }
.workflow-step.dragging { z-index:3; opacity:1; border-color:var(--line-strong); background:var(--bg-raised); box-shadow:0 12px 30px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.04) inset; }
.workflow-drag-preview { position:fixed; top:-1000px; left:-1000px; z-index:100; margin:0; opacity:1; cursor:grabbing; border-color:var(--line-strong); background:var(--bg-raised); box-shadow:0 18px 44px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.05) inset; transform:rotate(.25deg) scale(1.006); pointer-events:none; }
.workflow-drag-preview .req-menu { display:none; }
.workflow-step.workflow-reflow { z-index:1; }
.workflow-step.workflow-drop-settle { animation:workflow-drop-settle .32s cubic-bezier(.22,.7,.2,1) both; }
@keyframes workflow-drop-settle { from { border-color:var(--line-strong); box-shadow:0 12px 30px rgba(0,0,0,.16); } to { border-color:var(--line); box-shadow:none; } }
.workflow-step .workflow-performer { min-height:20px; display:inline-flex; align-items:center; padding:2px 7px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:var(--panel); font-family:var(--mono); font-size:9px; letter-spacing:.055em; text-transform:uppercase; }
.workflow-step .workflow-performer.ai { color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,var(--line)); }
.workflow-step .workflow-performer.human { color:var(--text-soft); }
.workflow-step .workflow-performer.rule { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 25%,var(--line)); }
.workflow-step .workflow-performer.unresolved { color:var(--faint); border-color:transparent; padding-left:0; background:transparent; }
.workflow-step .req-menu { position:absolute; top:16px; right:16px; margin:0; }
.workflow-insert { position:relative; width:100%; height:30px; display:grid; place-items:center; margin:0; padding:0; border:0; background:transparent; color:var(--faint); }
.workflow-insert::before { content:""; position:absolute; top:0; bottom:0; left:14px; width:1px; background:var(--line); transition:background-color .18s ease; }
.workflow-insert-first::before { top:50%; }
.workflow-insert-label { position:absolute; left:3px; z-index:1; width:23px; height:23px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--faint); transition:color .18s ease,border-color .18s ease; }
.workflow-insert .icon { width:11px; height:11px; }
.workflow-insert:hover .workflow-insert-label,.workflow-insert:focus-visible .workflow-insert-label { color:var(--text); border-color:var(--text-soft); }
.workflow-insert:focus-visible { outline:1px solid var(--focus); outline-offset:2px; border-radius:5px; }
.workflow-insert-first { height:22px; }
.workflow-insert-final { height:32px; }
.workflow-insert-final .workflow-insert-label { left:36px; width:auto; padding:0; border:0; background:transparent; font-size:11px; }
.workflow-insert-final > .icon { position:absolute; left:9px; background:var(--bg); }
.workflow-routes { display:grid; grid-template-rows:0fr; margin-top:0; padding-top:0; border-top:1px solid transparent; opacity:0; transition:grid-template-rows .24s cubic-bezier(.22,.7,.2,1),opacity .18s ease,margin-top .24s ease,padding-top .24s ease,border-color .2s ease; }
.workflow-route-list { min-height:0; display:grid; gap:5px; overflow:hidden; }
.workflow-step.workflow-route-source .workflow-step-body > .workflow-routes { grid-template-rows:1fr; margin-top:12px; padding-top:10px; border-color:var(--line); opacity:1; }
.workflow-step.workflow-has-routes .workflow-step-body > .workflow-routes { grid-template-rows:1fr; margin-top:12px; padding-top:10px; border-color:var(--line); opacity:1; }
.workflow-step.workflow-route-target { border-color:color-mix(in srgb,var(--text-soft) 28%,var(--line)); box-shadow:inset 2px 0 0 color-mix(in srgb,var(--info) 38%,var(--line)),0 0 0 3px color-mix(in srgb,var(--text) 2.5%,transparent); }
.workflow-route { min-width:0; display:grid; grid-template-columns:minmax(52px,auto) 12px minmax(0,1fr); align-items:baseline; gap:7px; color:var(--muted); font-size:11px; }
.workflow-route > span:first-child { overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); font-size:10px; white-space:nowrap; }
.workflow-route > span:nth-child(2) { color:var(--faint); }
.workflow-route strong { overflow:hidden; color:var(--text-soft); font-size:11px; font-weight:490; text-overflow:ellipsis; white-space:nowrap; }
.workflow-route.unresolved strong { color:var(--warning); font-weight:440; }
.workflow-position { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 9px 7px 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:11px; }
.workflow-position > div { display:flex; gap:4px; }
.workflow-position .btn { height:26px; font-size:11px; }
.workflow-position .btn:disabled { opacity:.35; cursor:default; }
.workflow-route-editor { display:grid; gap:10px; padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.workflow-route-editor[hidden],[data-ai-behavior][hidden] { display:none; }
.workflow-route-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.workflow-route-heading strong,.workflow-route-heading span { display:block; }
.workflow-route-heading strong { color:var(--text-soft); font-size:12px; font-weight:570; }
.workflow-route-heading span { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.4; }
.workflow-route-heading .btn { height:27px; padding:0 8px; border-color:var(--line); font-size:11px; }
.workflow-route-heading .icon { width:13px; height:13px; }
[data-route-list] { display:grid; gap:7px; }
.workflow-route-field { display:grid; grid-template-columns:minmax(90px,.7fr) minmax(150px,1.3fr) 28px; align-items:end; gap:7px; }
.workflow-route-field .input-group { gap:4px; }
.workflow-route-field .input-group label { font-size:10px; }
.workflow-route-field input,.workflow-route-field select { min-height:35px; padding:7px 8px; font-size:12px; }
.workflow-remove-route { width:28px; height:35px; color:var(--faint); }
.workflow-step.is-editing { cursor:default; border-color:var(--line-strong); background:var(--bg-raised); box-shadow:0 12px 34px rgba(0,0,0,.09); }
.workflow-step.is-editing > .workflow-step-body > .req-detail,.workflow-step.is-editing > .workflow-step-body > .workflow-routes { display:none; }
.workflow-inline-editor { margin:14px -42px -14px -16px; padding:14px 16px; border-top:1px solid var(--line); cursor:default; animation:workflow-inline-in .24s cubic-bezier(.22,.7,.2,1) both; }
.workflow-inline-position { margin-bottom:12px; border:0; padding:0; }
.workflow-inline-primary { display:grid; grid-template-columns:minmax(0,1fr) 104px 112px; align-items:end; gap:9px; }
.workflow-inline-editor .input-group { gap:5px; }
.workflow-inline-editor .input-group label { color:var(--muted); font-size:10px; font-weight:500; }
.workflow-inline-editor :is(input,select,textarea) { min-height:36px; border-radius:8px; font-size:12px; }
.workflow-inline-editor textarea { min-height:62px; resize:vertical; }
.workflow-inline-title input { font-size:13px; }
.workflow-inline-routes { margin-top:12px; }
.workflow-inline-more { margin-top:10px; border-top:1px solid var(--line); }
.workflow-inline-more > summary { display:flex; align-items:center; justify-content:space-between; padding:11px 1px 2px; color:var(--muted); font-size:11px; cursor:pointer; list-style:none; }
.workflow-inline-more > summary::-webkit-details-marker { display:none; }
.workflow-inline-more > summary::after { content:""; width:13px; height:13px; background:var(--faint); -webkit-mask:var(--chev) center/13px 13px no-repeat; mask:var(--chev) center/13px 13px no-repeat; transition:transform .18s ease; }
.workflow-inline-more[open] > summary::after { transform:rotate(180deg); }
.workflow-inline-more > summary span { margin-left:auto; margin-right:8px; color:var(--faint); font-size:10px; }
.workflow-inline-more-body { display:grid; gap:12px; padding-top:12px; }
.workflow-inline-delete { justify-self:start; color:var(--muted); font-size:11px; }
.workflow-inline-actions { display:flex; align-items:center; gap:8px; margin-top:13px; }
.workflow-inline-actions > span { margin-right:auto; color:var(--faint); font-size:10px; }
.workflow-inline-actions .btn { height:31px; padding:0 11px; font-size:11px; }
.workflow-inline-active .next-step { opacity:0; transform:translateY(12px); }
.workflow-inline-active .next-step-inner { pointer-events:none; }
@keyframes workflow-inline-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.workflow-quick-add { margin:5px 0 0 36px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:transparent; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.workflow-cards > .workflow-quick-add { margin-bottom:14px; }
.workflow-quick-context { display:flex; align-items:center; gap:8px; padding:3px 8px 3px 13px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.workflow-quick-context[hidden] { display:none; }
.workflow-quick-context > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workflow-quick-context .btn { flex:none; width:26px; height:26px; }
.workflow-quick-add:hover { border-color:color-mix(in srgb,var(--text-soft) 48%,var(--line)); }
.workflow-quick-add:focus-within { border-style:solid; border-color:var(--line-strong); background:color-mix(in srgb,var(--text) 1.5%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 3.5%,transparent); }
.workflow-quick-main { min-height:48px; display:grid; grid-template-columns:18px minmax(0,1fr) 34px; align-items:center; gap:7px; padding:6px 7px 6px 13px; }
.workflow-quick-plus { display:flex; color:var(--faint); transition:color .18s ease,transform .18s ease; }
.workflow-quick-plus .icon { width:14px; height:14px; }
.workflow-quick-add:focus-within .workflow-quick-plus { color:var(--text-soft); transform:rotate(90deg); }
.workflow-quick-main input { width:100%; min-width:0; height:34px; border:0; border-radius:7px; outline:0; background:transparent; color:var(--text-soft); }
.workflow-quick-main input { padding:0 4px; font-size:13px; }
.workflow-quick-main input::placeholder { color:var(--muted); }
.workflow-quick-submit { width:34px; height:34px; border:1px solid var(--line); background:var(--bg-raised); color:var(--muted); }
.workflow-quick-add:focus-within .workflow-quick-submit { border-color:var(--line-strong); color:var(--text-soft); }
.workflow-quick-submit:hover { background:var(--panel-hover); color:var(--text); }
.workflow-quick-submit .icon { width:14px; height:14px; }
.workflow-quick-foot { min-height:27px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 11px 6px 38px; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); color:var(--faint); font-size:10px; }
.workflow-step.is-quick-added { animation:workflow-step-added .48s cubic-bezier(.32,.72,0,1) both; }
@keyframes workflow-step-added { 0% { opacity:0; transform:translateY(5px); border-color:var(--line-strong); } 55% { border-color:color-mix(in srgb,var(--success) 32%,var(--line)); } 100% { opacity:1; transform:none; border-color:var(--line); } }
@media (max-width:560px) {
  .requirement.workflow-step { min-height:0; padding:13px 32px 13px 13px; }
  .workflow-step > .req-top { margin:0 0 7px; }
  .workflow-inline-editor { margin:12px -32px -13px -13px; padding:13px; }
  .workflow-step .req-menu { top:9px; right:5px; }
  .workflow-route-field { grid-template-columns:1fr 28px; }
  .workflow-route-field .input-group:nth-child(2) { grid-column:1; }
  .workflow-remove-route { grid-column:2; grid-row:1 / span 2; align-self:end; }
  .workflow-quick-main { grid-template-columns:18px minmax(0,1fr) 34px; padding:7px 7px 7px 11px; }
  .workflow-quick-submit { grid-column:3; grid-row:1; }
  .workflow-quick-foot { display:block; padding-left:34px; }
  .workflow-quick-foot span { display:block; }
  .workflow-quick-foot span + span { margin-top:2px; }
  .workflow-inline-primary { grid-template-columns:1fr 1fr; }
  .workflow-inline-title { grid-column:1/-1; }
  .workflow-inline-actions > span { display:none; }
}
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.badge { display:inline-flex; align-items:center; gap:5px; min-height:23px; padding:2px 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:11px; }
.badge.inferred { color:var(--muted); background:var(--panel); border-color:var(--line-strong); }
.badge.open { color:var(--warning); }
.badge.evidence { color:var(--info); background:color-mix(in srgb,var(--info) 7%,transparent); border-color:color-mix(in srgb,var(--info) 22%,transparent); }
.badge.autonomy { color:var(--text-soft); }
.badge.traceability { color:var(--info); }
.add-row { width:100%; min-height:43px; margin-top:9px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px dashed var(--line-strong); border-radius:var(--radius-md); background:transparent; color:var(--muted); }
.add-row:hover { color:var(--text); border-color:var(--line-strong); background:color-mix(in srgb,var(--text) 2%,transparent); }
.callout { display:flex; gap:12px; padding:15px 16px; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md); color:var(--text-soft); font-size:13px; }
.callout .icon { color:var(--muted); margin-top:1px; }
.callout strong { display:block; color:var(--text); margin-bottom:3px; font-weight:490; }
.inspector-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.inspector-title { margin:0; font-family:var(--headline); font-size:13px; font-weight:510; letter-spacing:.005em; }
.metric { padding:15px 0 18px; border-bottom:1px solid var(--line); }
.metric-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; }
.metric-label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.metric-value { font-size:23px; line-height:1; letter-spacing:-.03em; }
.metric-value.posture-metric { max-width:170px; font-size:15px; line-height:1.2; letter-spacing:0; text-align:right; }
.metric-track { height:5px; display:flex; gap:3px; }
.metric-track span { flex:1; border-radius:3px; background:var(--control); transition:background .3s ease; }
.metric-track span.on { background:var(--progress); }
.metric-note { margin:9px 0 0; color:var(--faint); font-size:11px; line-height:1.45; }
.metric-note.integrity-summary { margin-bottom:12px; color:var(--muted); }
.inspector-section { padding:19px 0; border-bottom:1px solid var(--line); }
.inspector-heading { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--text-soft); font-size:13px; font-weight:580; letter-spacing:.006em; }
.count { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:var(--panel-strong); color:var(--muted); font-size:11px; }
.inspector-add { width:24px; height:24px; margin-left:-2px; color:var(--muted); }
.inspector-add .icon { width:13px; height:13px; }
.question { padding:11px 0; border-top:1px solid var(--line); }
.question:first-of-type { border-top:0; padding-top:0; }
.question p { margin:0 0 6px; color:var(--text-soft); font-size:13px; line-height:1.45; }
.question-meta { display:flex; align-items:center; gap:7px; color:var(--faint); font-size:11px; }
.integrity-finding { width:100%; display:grid; gap:5px; padding:11px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; text-align:left; }
.integrity-finding:first-of-type { border-top:0; padding-top:0; }
.integrity-finding:hover strong { color:var(--text); }
.integrity-finding .finding-severity { width:max-content; color:var(--warning); font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }
.integrity-finding.critical .finding-severity { color:var(--danger); }
.integrity-finding strong { color:var(--text-soft); font-size:12px; line-height:1.4; font-weight:560; }
.integrity-finding p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.integrity-finding small { color:var(--faint); font-family:var(--mono); font-size:9px; }
.legend { display:grid; gap:9px; }
.legend-row { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.legend-key { display:flex; align-items:center; gap:7px; }
.legend-dot { width:7px; height:7px; border-radius:50%; background:var(--faint); }
.legend-dot.inferred { background:var(--faint); }
.legend-dot.evidence { background:var(--info); }
.next-step { position:fixed; left:calc(var(--rail) + var(--sidebar)); right:var(--inspector); bottom:0; z-index:12; padding:24px 34px 18px; background:linear-gradient(to bottom,transparent 0%,var(--bg) 38%); pointer-events:none; transition:opacity .18s ease,transform .24s cubic-bezier(.22,.7,.2,1); }
.next-step-inner { position:relative; width:min(780px,100%); margin:0 auto; padding:15px 15px 12px; border:1px solid var(--line-strong); border-radius:15px; background:var(--topbar-bg); backdrop-filter:blur(18px); box-shadow:var(--shadow-menu); pointer-events:auto; }
.next-step-main { display:grid; gap:4px; padding:0 2px 9px; }
.next-step-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.next-step-focus-label { color:var(--text-soft); font-family:var(--mono); font-size:10px; font-weight:580; letter-spacing:.055em; text-transform:uppercase; }
.next-step-separator { color:var(--faint); }
.next-step-eyebrow { color:var(--faint); font-family:var(--mono); font-size:10px; font-weight:520; letter-spacing:.055em; text-transform:uppercase; }
.next-step-position { margin-left:auto; color:var(--faint); font-family:var(--mono); font-size:10px; }
.next-step-main strong { color:var(--text-soft); font-size:14px; line-height:1.42; font-weight:450; letter-spacing:.008em; }
.next-step-main p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.next-step-main .next-step-leverage { margin-top:3px; color:var(--text-soft); font-size:12px; }
.next-step-leverage[hidden] { display:none; }
.next-step-flash { position:absolute; inset:0; display:flex; align-items:center; gap:9px; padding:15px 18px; border-radius:inherit; background:var(--bg-raised,var(--topbar-bg)); opacity:0; pointer-events:none; transition:opacity .32s ease; }
.next-step-flash[hidden] { display:none; }
.next-step-flash .icon { width:17px; height:17px; color:var(--success); flex:none; }
.next-step-flash strong { color:var(--text); font-weight:550; }
.next-step-flash span { color:var(--text-soft); font-size:13px; }
.next-step-flash.is-shown { opacity:1; }
.next-step-footer { min-width:0; padding-top:3px; display:flex; align-items:center; gap:8px; }
.guidance-lanes { flex:none; display:flex; align-items:center; gap:4px; }
.guidance-lane { height:28px; padding:0 8px; border:1px solid var(--line); border-radius:7px; display:flex; align-items:center; gap:6px; background:transparent; color:var(--muted); font-size:11px; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.guidance-lane:hover:not(:disabled) { color:var(--text-soft); }
.guidance-lane.active { border-color:var(--line-strong); background:var(--panel); color:var(--text); box-shadow:0 1px 0 rgba(255,255,255,.025) inset; }
.guidance-lane:disabled { border-color:transparent; opacity:.38; cursor:default; }
.guidance-lane small { min-width:15px; font-family:var(--mono); font-size:9px; color:inherit; text-align:center; }
.guidance-lane:focus-visible,.next-step-go:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.spec-summary { min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:3px 8px; color:var(--faint); font-size:10px; }
.spec-summary > span { white-space:nowrap; }
.spec-summary > span + span::before { content:"·"; margin-right:8px; }
@media (max-width:560px) {
  .next-step-footer .guidance-lanes { width:100%; }
  .next-step-footer .spec-summary { flex:1; order:1; }
  .next-step-footer .next-step-go { order:1; }
}
.next-step-go { flex:none; margin-left:auto; min-width:32px; height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:8px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel-strong); color:var(--text); font-size:11px; font-weight:520; }
.next-step-go .icon { width:13px; height:13px; }
.next-step-go:hover { background:var(--panel-hover); border-color:var(--focus); }
.requirement.attention,.field.attention { animation:attention 1.35s ease; }
.section.attention > .section-header { border-radius:8px; animation:section-attention 1.35s ease; }
@keyframes attention { 0%,100% { border-color:var(--line); box-shadow:none; } 35% { border-color:var(--focus); box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 4%,transparent); } }
@keyframes section-attention { 0%,100% { background:transparent; box-shadow:none; } 35% { background:color-mix(in srgb,var(--warning) 7%,transparent); box-shadow:0 0 0 5px color-mix(in srgb,var(--warning) 7%,transparent); } }
.toast { position:fixed; left:50%; bottom:24px; z-index:60; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:10px 14px; border:1px solid var(--line-strong); border-radius:9px; background:var(--menu); box-shadow:var(--shadow-menu); color:var(--text-soft); font-size:12px; transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.shell + .toast { bottom:158px; }
.is-hidden { display:none !important; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:var(--scrim); backdrop-filter:blur(5px); animation:backdrop-in .18s ease both; }
.modal { width:min(510px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid var(--line-strong); border-radius:15px; background:var(--modal); box-shadow:var(--shadow-menu); animation:modal-in .28s cubic-bezier(.32,.72,0,1) both; }
.modal-head { display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-family:var(--headline); font-size:14px; font-weight:510; letter-spacing:.005em; }
.modal-head > .btn { margin-left:auto; }
.modal-body { padding:18px; display:grid; gap:15px; }
.input-group { display:grid; gap:7px; }
.input-group label { color:var(--muted); font-size:12px; }
.input-group label span { color:var(--faint); }
.input-group input,.input-group textarea,.input-group select { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:10px 11px; outline:none; }
.input-group textarea { min-height:88px; resize:vertical; }
.input-group input:focus,.input-group textarea:focus,.input-group select:focus { border-color:var(--line-strong); }
.folder-new-input { margin-top:10px; }
.modal-foot { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--line); }
.modal-spacer { flex:1; }
.optional-fields { border-top:1px solid var(--line); }
.optional-fields summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0 0; color:var(--text-soft); font-size:12px; cursor:pointer; list-style:none; }
.optional-fields summary::-webkit-details-marker { display:none; }
.optional-fields summary::before { content:'+'; width:18px; height:18px; display:grid; place-items:center; margin-right:-7px; color:var(--muted); font-family:var(--mono); font-size:13px; }
.optional-fields[open] summary::before { content:'−'; }
.optional-fields summary span { margin-left:auto; color:var(--faint); font-size:11px; }
.optional-fields-body { display:grid; gap:15px; padding-top:15px; }
.test-links { min-width:0; margin:0; padding:0; border:0; }
.test-links legend { padding:0; color:var(--muted); font-size:12px; }
.test-links legend span { color:var(--faint); }
.test-links > p { margin:5px 0 8px; color:var(--faint); font-size:11px; line-height:1.45; }
.test-link-options { max-height:190px; overflow:auto; display:grid; gap:2px; padding:5px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.test-link-options label { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:8px; padding:7px; border-radius:6px; cursor:pointer; }
.test-link-options label:hover { background:var(--surface-hover); }
.test-link-options input { width:14px; height:14px; margin:2px 0 0; accent-color:var(--text); }
.test-link-options strong,.test-link-options small { display:block; }
.test-link-options strong { color:var(--text-soft); font-size:11px; line-height:1.35; font-weight:500; }
.test-link-options small { margin-top:2px; color:var(--faint); font-size:10px; }
.section-choices { display:grid; padding:7px; }
.section-choice { min-height:64px; display:grid; grid-template-columns:18px 30px minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 11px; border-radius:8px; cursor:pointer; }
.section-choice:hover { background:var(--surface-hover); }
.section-choice input { width:15px; height:15px; margin:0; accent-color:var(--text); }
.section-choice-icon { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.section-choice-icon .icon { width:14px; height:14px; }
.section-choice strong,.section-choice small { display:block; }
.section-choice strong { color:var(--text-soft); font-size:13px; font-weight:520; letter-spacing:.004em; }
.section-choice small { margin-top:2px; color:var(--muted); font-size:11px; line-height:1.4; }
.section-choice em { color:var(--faint); font-size:10px; font-style:normal; white-space:nowrap; }
.section-choice.locked { cursor:default; }
.section-choice.locked:hover { background:transparent; }

.review-mode .requirement:not(.needs-review) { opacity:.22; filter:saturate(.2); }
.review-mode .requirement.needs-review { border-color:var(--line-strong); }
.question { width:100%; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; border-radius:0; }
.question:hover p { color:var(--text); }
.empty-inline { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; padding:4px 0; }
.form-note { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.question-prompt { display:grid; gap:11px; }
.question-prompt .badge { width:max-content; }
.question-prompt strong { font-size:16px; line-height:1.5; font-weight:540; letter-spacing:.004em; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:4px 0; }
.setting-row + .setting-row { padding-top:15px; border-top:1px solid var(--line); }
.setting-row div { min-width:0; }
.setting-row strong,.setting-row span { display:block; }
.setting-row strong { font-size:14px; font-weight:540; letter-spacing:.004em; }
.setting-row div span { margin-top:3px; color:var(--muted); font-size:12px; }
.setting-row > .badge { display:inline-flex; flex:0 0 auto; }
.setting-actions { flex:0 0 auto; display:flex !important; align-items:center; gap:5px; }
.setting-actions .btn { height:30px; padding:0 9px; border-color:var(--line); font-size:11px; }
.action-menu { position:fixed; z-index:70; width:230px; padding:7px; border:1px solid var(--line-strong); border-radius:11px; background:var(--menu); box-shadow:var(--shadow-menu); }
.menu-project { padding:9px 10px 12px; margin-bottom:5px; border-bottom:1px solid var(--line); }
.menu-project strong,.menu-project span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.menu-project strong { font-size:13px; font-weight:570; }
.menu-project span { margin-top:2px; color:var(--muted); font-size:11px; }
.action-menu button { width:100%; height:35px; padding:0 9px; display:flex; align-items:center; gap:9px; border-radius:7px; background:transparent; color:var(--text-soft); font-size:13px; text-align:left; }
.action-menu button:hover,.action-menu button:focus-visible { background:var(--menu-hover); color:var(--text); }
.action-menu button .icon { width:15px; height:15px; }
.spec-menu { width:292px; padding-top:4px; }
.menu-label { padding:6px 10px 8px; color:var(--faint); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.menu-scroll { max-height:min(300px,44vh); overflow:auto; }
.menu-spec-group + .menu-spec-group { margin-top:5px; padding-top:5px; border-top:1px solid var(--line); }
.menu-divider { height:1px; margin:6px 4px; background:var(--line); }
.action-menu .menu-spec { height:auto; min-height:46px; padding:8px 9px; }
.menu-spec-copy { flex:1; min-width:0; }
.menu-spec-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:490; }
.menu-spec-copy small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.action-menu .menu-spec.current { background:var(--menu-hover); color:var(--text); }
.menu-spec-check { display:flex; flex:0 0 auto; color:var(--success); }
.action-menu .delete-project-action { color:var(--danger); }
.action-menu .delete-project-action:hover,.action-menu .delete-project-action:focus-visible { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--menu)); }
.confirm-copy { margin:0; color:var(--text-soft); font-size:13px; line-height:1.6; }
.search-input-wrap { height:50px; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid var(--line); color:var(--muted); }
.search-input-wrap input { width:100%; border:0; outline:0; background:transparent; font-size:15px; }
.search-results { max-height:min(430px,60vh); overflow:auto; padding:7px; }
.search-result { width:100%; min-height:58px; display:grid; grid-template-columns:32px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:transparent; color:var(--text-soft); text-align:left; }
.search-result > span:nth-child(2) { min-width:0; }
.search-result:hover,.search-result:focus-visible,.search-result.selected { background:var(--panel-strong); color:var(--text); }
.search-result.selected > .icon { color:var(--text-soft); }
.search-result-icon { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.search-result-icon .icon { width:15px; height:15px; }
.search-result strong,.search-result small { display:block; }
.search-result strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; font-weight:520; }
.search-result small { margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:11px; }
.search-result > .icon { width:14px; height:14px; color:var(--faint); }
.empty-search { padding:34px 18px; color:var(--muted); font-size:13px; text-align:center; }
.history-list { max-height:min(460px,62vh); overflow:auto; padding:7px; }
.history-item { width:100%; min-height:56px; display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:transparent; color:var(--text-soft); text-align:left; }
.history-item:not(:disabled):hover { background:var(--panel-strong); color:var(--text); }
.history-item:disabled { cursor:default; }
.history-item strong,.history-item small { display:block; }
.history-item strong { font-size:13px; font-weight:520; }
.history-item small { margin-top:2px; color:var(--muted); font-size:11px; }
.history-item > .icon { width:15px; color:var(--faint); }
.history-dot { width:6px; height:6px; border:1px solid var(--line-strong); border-radius:50%; }
.history-item:first-child .history-dot { background:var(--success); border-color:var(--success); }
.validation-plan { margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.validation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:13px; }
.validation-head h3 { margin:5px 0 3px; font-family:var(--headline); font-size:15px; font-weight:500; letter-spacing:.004em; }
.validation-title { display:flex; align-items:center; gap:7px; }
.validation-head p { margin:0; color:var(--muted); font-size:13px; }
.validation-count { min-width:48px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.validation-records { display:grid; gap:7px; }
.validation-record { width:100%; min-height:64px; display:grid; grid-template-columns:32px minmax(0,1fr) auto 18px; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); color:var(--text-soft); text-align:left; }
.validation-record:hover { border-color:var(--line-strong); background:var(--surface-hover); }
.validation-record.empty { grid-template-columns:32px minmax(0,1fr) 18px; border-style:dashed; background:transparent; }
.validation-number { color:var(--faint); font-family:var(--mono); font-size:11px; }
.validation-copy { min-width:0; }
.validation-copy strong,.validation-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.validation-copy strong { color:var(--text-soft); font-size:13px; font-weight:530; }
.validation-copy small { margin-top:3px; color:var(--muted); font-size:11px; }
.validation-meta { min-width:112px; text-align:right; }
.validation-meta small,.validation-meta span { display:block; }
.validation-meta small { color:var(--muted); font-size:11px; }
.validation-meta span { margin-top:3px; color:var(--text-soft); font-size:11px; }
.validation-record > .icon { width:14px; height:14px; color:var(--faint); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-subtitle { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.markdown-dialog { width:min(760px,calc(100vw - 34px)); }
.handoff-tabs { display:flex; gap:4px; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--panel); }
.handoff-tab { min-height:30px; padding:5px 10px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:520; }
.handoff-tab:hover { color:var(--text-soft); background:var(--surface-hover); }
.handoff-tab.active { border-color:var(--line); background:var(--bg-raised); color:var(--text); }
.markdown-preview { min-height:320px; max-height:min(590px,64vh); margin:0; padding:20px 22px; overflow:auto; background:var(--code-bg); color:var(--code-text); font-size:12px; line-height:1.7; white-space:pre-wrap; tab-size:2; }
.markdown-preview code { font:inherit; }
.handoff-actions { flex-wrap:wrap; }

.build-package-dialog { width:min(720px,calc(100vw - 34px)); }
.build-package-body { gap:16px; }
.package-summary { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.package-summary > div { min-width:0; }
.package-kicker { display:block; margin-bottom:5px; color:var(--faint); font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.package-status { display:block; color:var(--text); font-family:var(--headline); font-size:21px; font-weight:560; }
.package-status.ready { color:var(--success); }
.package-status.not-build-safe { color:var(--danger); }
.package-summary p { margin:6px 0 0; max-width:490px; color:var(--muted); font-size:12px; line-height:1.5; }
.package-count { flex:0 0 auto; padding:5px 9px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-family:var(--mono); font-size:10px; }
.package-warnings { padding:13px 15px; border:1px solid color-mix(in srgb,var(--warning) 34%,var(--line)); border-radius:var(--radius-md); background:color-mix(in srgb,var(--warning) 6%,transparent); }
.package-warnings > strong { color:var(--text-soft); font-size:12px; font-weight:570; }
.package-warnings ul { max-height:112px; margin:8px 0 0; padding-left:18px; overflow:auto; color:var(--muted); font-size:12px; line-height:1.5; }
.package-warnings li + li { margin-top:4px; }
.package-clear { padding:11px 13px; border:1px solid color-mix(in srgb,var(--success) 28%,var(--line)); border-radius:var(--radius-md); color:var(--success); font-size:12px; }
.package-artifacts { display:grid; gap:6px; }
.package-artifact { min-height:64px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.package-artifact-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); }
.package-artifact-icon .icon { width:14px; height:14px; }
.package-artifact-copy { min-width:0; }
.package-artifact-copy strong,.package-artifact-copy small,.package-artifact-copy code { display:block; }
.package-artifact-copy strong { color:var(--text-soft); font-size:13px; font-weight:550; }
.package-artifact-copy small { margin-top:2px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.package-artifact-copy code { margin-top:3px; color:var(--faint); font-size:10px; }

@media (max-width:560px) {
  .handoff-actions .modal-spacer { display:none; }
  .handoff-actions .btn { flex:1 1 calc(50% - 4px); }
  .handoff-actions #copy-markdown { flex-basis:100%; }
  .package-summary { display:block; }
  .package-count { display:inline-block; margin-top:12px; }
  .package-warnings ul { max-height:none; overflow:visible; }
  .package-artifact { grid-template-columns:24px minmax(0,1fr); }
  .package-artifact-icon { width:24px; height:24px; }
  .package-artifact > .btn { grid-column:2; width:100%; }
}

/* Contextual help stays quiet until hover, focus, or an intentional tap. */
.help-anchor { position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
.help-trigger { width:16px; height:16px; display:grid; place-items:center; padding:0; border:1px solid var(--line-strong); border-radius:50%; background:transparent; color:var(--faint); font-family:var(--sans); font-size:10px; line-height:1; transition:color .16s ease,border-color .16s ease,background .16s ease; }
.help-trigger:hover,.help-trigger:focus-visible,.help-trigger[aria-expanded="true"] { border-color:var(--muted); background:var(--panel); color:var(--text-soft); }
.help-popover { position:fixed; z-index:45; width:min(286px,calc(100vw - 24px)); display:grid; gap:7px; padding:13px 14px 11px; border:1px solid var(--line-strong); border-radius:10px; background:var(--menu); box-shadow:var(--shadow-menu); color:var(--text-soft); text-align:left; }
.help-popover[hidden] { display:none; }
.help-popover::before,.help-popover::after { content:""; position:absolute; left:0; right:0; height:9px; }
.help-popover::before { top:-9px; }
.help-popover::after { bottom:-9px; }
.help-popover strong { color:var(--text); font-size:13px; font-weight:560; letter-spacing:.004em; }
.help-popover > span { color:var(--muted); font-size:12px; line-height:1.5; }
.help-popover button { min-height:28px; display:flex; align-items:center; gap:5px; width:max-content; margin-top:2px; padding:0; background:transparent; color:var(--text-soft); font-size:12px; }
.help-popover button:hover { color:var(--text); }
.help-popover button .icon { width:12px; height:12px; transition:transform .16s ease; }
.help-popover button:hover .icon { transform:translateX(2px); }
.modal-head .help-anchor { margin-left:7px; }
.help-dialog { width:min(560px,100%); }
.help-detail { gap:20px; }
.help-detail-intro { margin:0; color:var(--text-soft); font-size:14px; line-height:1.65; }
.help-detail-section { padding-top:17px; border-top:1px solid var(--line); }
.help-detail-section h3 { margin:0 0 10px; color:var(--text); font-size:12px; font-weight:590; letter-spacing:.006em; }
.help-detail-section ul { margin:0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.55; }
.help-detail-section li + li { margin-top:6px; }
.help-example { padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:var(--bg-raised); }
.help-example span { color:var(--faint); font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.help-example p { margin:7px 0 0; color:var(--text-soft); font-size:13px; line-height:1.55; }

/* State changes the document should show, not just contain. */
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.988); } to { opacity:1; transform:none; } }
@keyframes menu-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes card-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes guidance-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }

.action-menu { animation:menu-in .16s cubic-bezier(.32,.72,0,1) both; }
.requirement.is-new { animation:card-in .4s cubic-bezier(.32,.72,0,1) both; }
.next-step-inner.guidance-changed .next-step-main strong { animation:guidance-in .44s cubic-bezier(.32,.72,0,1) both; }
.next-step-inner.guidance-changed .next-step-main p { animation:guidance-in .44s cubic-bezier(.32,.72,0,1) .04s both; }
.next-step-inner.guidance-changed .next-step-context { animation:guidance-in .44s cubic-bezier(.32,.72,0,1) .07s both; }

.btn.is-done { color:var(--success); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.requirement:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.requirement:focus-visible .req-menu { opacity:1; }
.search-hints { display:flex; gap:16px; padding:11px 18px; border-top:1px solid var(--line); color:var(--faint); font-size:11px; }
.search-hints span { display:flex; align-items:center; gap:5px; }
.search-hints kbd { min-width:17px; height:17px; padding:0 4px; display:inline-grid; place-items:center; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel); color:var(--muted); font-family:var(--mono); font-size:10px; }

/* Press feedback. The surface reacts, nothing moves. */
.btn:active { background:var(--panel-strong); }
.btn-primary:active { background:var(--text); filter:brightness(.93); }
.btn-danger:active { background:color-mix(in srgb,var(--danger) 14%,transparent); }
.btn-rail:not(:disabled):active { background:var(--panel-strong); }
.requirement:active,.project-switcher:active,.workspace-title:active,.search-result:active,.question:active,.validation-record:active,.history-item:not(:disabled):active { background:var(--panel-strong); }
.action-menu button:active { background:var(--menu-hover); filter:brightness(.96); }

/* Mobile navigation. The burger hides on wide screens; the sheet is one calm
   surface that reaches every project, section, saved article, and tool. */
.mobile-nav-btn { display:none; align-items:center; justify-content:center; flex:0 0 auto; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel); color:var(--text); cursor:pointer; }
.mobile-nav-btn:hover { background:var(--panel-hover); }
.mobile-nav-btn:active { background:var(--panel-strong); }
.mobile-nav-btn .icon { width:19px; height:19px; }

.mobile-nav-backdrop { position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end; background:var(--scrim); opacity:0; transition:opacity .2s ease; }
.mobile-nav-backdrop.is-open { opacity:1; }
.mobile-nav-backdrop.is-closing { opacity:0; }
.mobile-nav-sheet { display:flex; flex-direction:column; width:min(360px,88vw); height:100%; background:var(--menu); border-left:1px solid var(--line-strong); box-shadow:var(--shadow-menu); transform:translateX(100%); transition:transform .22s cubic-bezier(.32,.72,0,1); }
.mobile-nav-backdrop.is-open .mobile-nav-sheet { transform:none; }
.mobile-nav-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 16px 16px; border-bottom:1px solid var(--line); }
.mobile-nav-brand { color:var(--text); font:650 13px/1 var(--headline); letter-spacing:.045em; text-decoration:none; }
.mobile-nav-brand:hover { color:var(--text-soft); }
.mobile-nav-context { padding:13px 16px 10px; }
.mobile-nav-eyebrow { display:block; color:var(--faint); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.mobile-nav-here { margin-top:5px; min-width:0; }
.mobile-nav-here strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; font-weight:560; }
.mobile-nav-context-folder { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:11px; }
.mobile-nav-scroll { flex:1; overflow-y:auto; padding:8px 10px 24px; overscroll-behavior:contain; }
.mobile-nav-group { padding:10px 0; }
.mobile-nav-group + .mobile-nav-group { border-top:1px solid var(--line); }
.mobile-nav-label { padding:4px 8px 8px; color:var(--faint); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.mobile-nav-sub { padding:8px 8px 4px; color:var(--muted); font-size:11px; }
.mobile-nav-empty { padding:6px 8px 10px; color:var(--muted); font-size:12px; line-height:1.55; }
.mobile-nav-item { width:100%; min-height:44px; padding:8px 10px; display:flex; align-items:center; gap:11px; border-radius:9px; background:transparent; color:var(--text-soft); font-size:14px; text-align:left; text-decoration:none; cursor:pointer; }
.mobile-nav-item:hover,.mobile-nav-item:focus-visible { background:var(--menu-hover); color:var(--text); }
.mobile-nav-item:active { background:var(--panel-strong); }
.mobile-nav-item.strong { color:var(--text); }
.mobile-nav-item-icon { flex:0 0 auto; display:inline-flex; color:var(--muted); }
.mobile-nav-item-icon .icon { width:17px; height:17px; }
.mobile-nav-item:hover .mobile-nav-item-icon,.mobile-nav-item:focus-visible .mobile-nav-item-icon { color:var(--text-soft); }
.mobile-nav-item-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-nav-state { flex:none; padding:2px 6px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font:560 9px var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.mobile-nav-ext { flex:0 0 auto; color:var(--faint); font-size:13px; }
.mobile-nav-spec { width:100%; min-height:50px; padding:9px 10px; display:flex; align-items:center; gap:11px; border-radius:9px; background:transparent; color:var(--text-soft); text-align:left; cursor:pointer; }
.mobile-nav-spec:hover,.mobile-nav-spec:focus-visible { background:var(--menu-hover); color:var(--text); }
.mobile-nav-spec:active { background:var(--panel-strong); }
.mobile-nav-spec.current { background:var(--menu-hover); color:var(--text); }
.mobile-nav-spec-icon { flex:0 0 auto; display:inline-flex; color:var(--muted); }
.mobile-nav-spec-icon .icon { width:16px; height:16px; }
.mobile-nav-spec-copy { flex:1; min-width:0; }
.mobile-nav-spec-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:490; }
.mobile-nav-spec-copy small { display:block; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:11px; }
.mobile-nav-spec-check { flex:0 0 auto; display:inline-flex; color:var(--success); }
.mobile-nav-spec-check .icon { width:16px; height:16px; }
html.mobile-nav-locked { overflow:hidden; }
/* The sheet sits above a full scrim, so the chrome's backdrop-blur underneath is
   invisible anyway — and on some mobile browsers it composites through the sheet.
   Drop it while the menu is open so the panel stays cleanly opaque. */
html.mobile-nav-locked :is(.topbar,.flow-bar,.project-home-bar,.next-step,.next-step-inner) { backdrop-filter:none; }

@media (max-width:820px) {
  .mobile-nav-btn { display:inline-flex; }
  /* The burger owns project switching on mobile, so the wrapped select row goes.
     --topbar keeps its existing mobile values (the topbar height is unchanged: the
     breadcrumb, actions, and back button still wrap on their own). */
  .topbar .workspace-project-nav,
  .flow-bar .workspace-project-nav,
  .project-home-bar .workspace-project-nav { display:none; }
}

/* A single quiet ring when the workspace has been written to disk. */
.sync-dot { position:relative; }
.sync-dot.is-saved::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--success); animation:saved-ring .9s cubic-bezier(.32,.72,0,1) forwards; }
@keyframes saved-ring { from { opacity:.65; transform:scale(.5); } to { opacity:0; transform:scale(1.7); } }

/* A resolved question collapses out of the list instead of blinking away. */
.question { overflow:hidden; transition:height .24s cubic-bezier(.32,.72,0,1),opacity .18s ease,margin .24s ease,padding .24s ease; }
.question.is-leaving { opacity:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-color:transparent; }

/* Modals leave the way they arrived. */
.modal-backdrop.is-closing { animation:backdrop-out .16s ease both; pointer-events:none; }
.modal-backdrop.is-closing .modal { animation:modal-out .16s ease both; }
@keyframes backdrop-out { to { opacity:0; } }
@keyframes modal-out { to { opacity:0; transform:translateY(4px) scale(.99); } }