/* Tab bar (§16.9) + per-tab dashboard (§16.3). */
.tab-strip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 var(--s-4);
}
@media (max-width: 900px) {
  .tab-strip { order: 4; flex-basis: 100%; margin: 0; padding-bottom: var(--s-2); }
}
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  font-size: 13px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tab-pill.active {
  background: var(--bg-elev-1);
  color: var(--text-primary);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.tab-pill:hover:not(.active) { background: var(--bg-elev-2); }
.tab-dot { width: 8px; height: 8px; border-radius: 50%; }
.tab-dot-gray  { background: var(--text-tertiary); }
.tab-dot-amber { background: var(--warn); animation: dot-pulse 1.2s ease-in-out infinite; }
.tab-dot-green { background: var(--ok); }
.tab-dot-red   { background: var(--danger); }
.tab-close { opacity: 0; padding: 0 2px; transition: opacity var(--dur-instant) var(--ease-out); }
.tab-pill:hover .tab-close { opacity: 0.7; }
.tab-close:hover { opacity: 1; }
.tab-add {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 17px;
  padding: 0;
}
.tab-add:hover { background: var(--bg-elev-2); }
.tab-pill.dragging {
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  opacity: 0.92;
  cursor: grabbing;
}
.tab-pill.flip { transition: transform 260ms var(--ease-spring); }
@media (prefers-reduced-motion: reduce) {
  .tab-pill.flip { transition: none; }
  .tab-pill.dragging { transform: none; }
}

/* dashboard layout: asymmetric two-column >1100px (§16.3) */
.dash {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-8) var(--s-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 1100px) {
  .dash { grid-template-columns: 420px 1fr; }
}
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-6);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.card h2 {
  font: var(--weight-semibold) 19px/1.3 var(--font-display);
  margin: 0 0 var(--s-4);
}
.field { margin-bottom: var(--s-4); }
.field > label {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-2);
}
.field textarea, .field select, .field input[type="number"] {
  width: 100%;
  font: var(--weight-regular) 14px/1.4 var(--font-text);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.field textarea { resize: vertical; min-height: 64px; }

/* agent slider (§16.6) */
.agents-row { display: flex; align-items: center; gap: var(--s-3); }
.agents-row input[type="range"] { flex: 1; accent-color: var(--accent); height: 6px; }
.agents-row input[type="number"] {
  width: 80px;
  text-align: right;
  font-family: var(--font-mono);
}
.cap-hint { font-size: 11px; color: var(--text-tertiary); margin-top: var(--s-1); }

/* cost meter (§16.5) */
.cost-meter { font-family: var(--font-mono); font-size: 14px; margin: var(--s-2) 0; }
.cost-detail { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.cost-bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-2);
  overflow: hidden;
  margin: var(--s-1) 0 var(--s-2);
}
.cost-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ok), var(--warn) 50%, var(--danger) 100%);
  background-size: var(--bar-track, 100px) 100%; /* gradient spans the full track, fill clips it */
  transition: width var(--dur-base) var(--ease-out);
}
.cost-bar-fill.pulse-80 { animation: bar-pulse 2s ease-in-out infinite; }
@keyframes bar-pulse { 50% { opacity: 0.55; } }
/* §16.5 odometer digits */
.odo { display: inline-flex; }
.odo-digit { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; }
.odo-digit > span { display: block; transition: transform 220ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .odo-digit > span { transition: none; } }

.aspect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-2); }
.aspect-item {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  font-weight: var(--weight-regular);
}

.run-row { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); }
#run-status { font-size: 13px; color: var(--text-secondary); }

/* results (§16.11) */
#results-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--s-3); }
.finding-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.finding-row:hover { background: var(--bg-elev-2); }
.sev-pill {
  font-size: 11px;
  font-weight: var(--weight-medium);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.sev-high   { background: rgba(215,0,21,0.12); color: var(--danger); }
.sev-medium { background: rgba(178,80,0,0.12); color: var(--warn); }
.sev-low    { background: var(--bg-elev-2); color: var(--text-secondary); }
.hit-count { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hit-bar { width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--bg-elev-2); overflow: hidden; flex: none; }
.hit-bar > i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.finding-sig { flex: 1; font-weight: var(--weight-medium); }
.aspect-chip {
  font-size: 11px;
  color: var(--accent);
  background: rgba(0,113,227,0.08);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.finding-detail { padding: var(--s-2) var(--s-4) var(--s-4); font-size: 13px; color: var(--text-secondary); }
.finding-detail .mono { font-family: var(--font-mono); font-size: 12px; }

#live-log {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg-elev-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-top: var(--s-4);
}
#cost-live { font-family: var(--font-mono); font-size: 13px; margin-top: var(--s-3); }

.empty-results {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--s-16) var(--s-4);
}
.empty-results h2 {
  font: var(--weight-semibold) 34px/1.12 var(--font-display);  /* --type-display-l */
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--s-2);
}
.empty-illo { color: var(--text-tertiary); margin-bottom: var(--s-4); }
#live-log:empty, #cost-live:empty { display: none; } /* no stray skeleton bars */

/* handoff panel (§17.5) */
.handoff-panel {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  background: var(--bg-elev-2);
  position: relative;
}
.handoff-panel h3 { font: var(--weight-semibold) 15px/1.3 var(--font-display); margin: 0 0 var(--s-3); }
.handoff-preview {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  max-height: 220px;
  overflow: hidden;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3);
  white-space: pre-wrap;
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
}
.handoff-fix { width: 100%; margin: var(--s-3) 0; }
.handoff-row { display: flex; gap: var(--s-3); }
.handoff-row button { flex: 1; padding: 8px; font-size: 13px; }
.handoff-stats { font-size: 11px; color: var(--text-tertiary); margin-top: var(--s-2); }
.handoff-toast {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  background: var(--ok);
  color: #fff;
  font-size: 12px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
}

/* GitHub PAT connect + repo/branch pickers (§17.7/§17.9) */
.gh-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-2); }
.gh-row input[type="password"] {
  flex: 1;
  font: var(--weight-regular) 13px/1.4 var(--font-mono);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.gh-row select { flex: 1; min-width: 0; font-size: 13px; padding: 8px 10px; }
.gh-row .btn-secondary { padding: 8px 12px; font-size: 13px; }
.gh-status-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.gh-link {
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 11px; font-weight: var(--weight-medium); cursor: pointer;
}
.btn-icon { padding: 8px; display: inline-flex; align-items: center; }
#in-branch { font-size: 12px; }

/* ---- §3.2 Advanced (collapsed) ---- */
.adv { margin-bottom: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.adv summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.adv[open] summary { margin-bottom: var(--s-3); }
.adv .field input[type="text"] { font-size: 13px; padding: 8px 10px; }
.adv-check { margin: var(--s-2) 0; }

/* ---- §10 #14 stoppedReason chips ---- */
.reason-chip {
  display: inline-block;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: var(--bg-elev-2);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-left: var(--s-2);
}

/* ---- §16.15 skeleton rows ---- */
.skeleton-row { display: flex; align-items: center; gap: var(--s-3); padding: 12px; border-bottom: 1px solid var(--line); }
.sk-bar {
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--bg-elev-2) 25%, var(--line) 50%, var(--bg-elev-2) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
.sk-pill { width: 48px; }
.sk-wide { flex: 1; }
.sk-tag  { width: 72px; }
@keyframes sk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; background: var(--bg-elev-2); } }

/* ---- §16.6 slider value bubble + cap ring ---- */
.agents-row { position: relative; }
.agent-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-elev-1);
  font: var(--weight-semibold) 13px/1 var(--font-mono);
  border-radius: var(--r-pill);
  padding: 5px 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.agent-bubble.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .agent-bubble { transition: none; } }
.agents-row input[type="number"].cap-max {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(215,0,21,0.18);
}

/* ---- finding actions (§10 #4/#5) ---- */
.finding-actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.finding-actions button { padding: 6px 10px; font-size: 12px; }

/* ---- §16.11 screenshots strip ---- */
.shots { margin-top: var(--s-3); }
.shots > button { padding: 8px 12px; font-size: 13px; }
.shots-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.shots-grid img {
  width: 96px; height: 64px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  cursor: zoom-in;
}

/* ---- §17.9.4 stale-branch notes ---- */
.handoff-note { font-size: 12px; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.handoff-note.warn { background: rgba(178,80,0,0.12); color: var(--warn); border: 1px solid var(--warn); }
.handoff-note.danger { background: rgba(215,0,21,0.10); color: var(--danger); border: 1px solid var(--danger); }
.handoff-note button { margin-left: var(--s-2); padding: 4px 8px; font-size: 11px; }

/* ---- §16.9 active-pill underline indicator ---- */
.tab-strip { position: relative; }
.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  pointer-events: none;
  transition: transform 260ms var(--ease-spring), width 260ms var(--ease-spring);
}
@media (prefers-reduced-motion: reduce) { .tab-indicator { transition: none; } }

/* ---- §17.9.5 branch chip on tab pills ---- */
.tab-branch {
  font: var(--weight-regular) 10px/1 var(--font-mono);
  color: var(--text-tertiary);
  background: var(--bg-elev-2);
  border-radius: var(--r-pill);
  padding: 2px 6px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- §3.1 tab "⋯" menu + URL-list modal ---- */
.tab-menu {
  position: fixed;
  z-index: 200;
  min-width: 210px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-1);
  display: flex;
  flex-direction: column;
}
.tab-menu button {
  background: none;
  border: none;
  text-align: left;
  font: var(--weight-regular) 13px/1.4 var(--font-text);
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.tab-menu button:hover { background: var(--bg-elev-2); }
.gqa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gqa-modal {
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-popup);
  padding: var(--s-6);
}
.gqa-modal h3 { font: var(--weight-semibold) 17px/1.3 var(--font-display); margin: 0 0 var(--s-2); }
.gqa-modal p { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--s-3); }
.gqa-modal textarea {
  width: 100%;
  font: var(--weight-regular) 13px/1.5 var(--font-mono);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  resize: vertical;
}
.gqa-modal-row { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-4); }
.gqa-modal-row button { padding: 10px 14px; font-size: 14px; }

/* ---- §18.7 usage popover ---- */
.app-header .user-area { position: relative; }
.usage-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 150;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-4);
  font-size: 13px;
}
.usage-totals { display: flex; gap: var(--s-4); margin-bottom: var(--s-3); }
.usage-totals > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.usage-totals span { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.usage-totals strong { font: var(--weight-semibold) 19px/1.2 var(--font-display); }
.usage-totals em { font-style: normal; font-size: 11px; color: var(--text-secondary); }
.usage-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-3); font-family: var(--font-mono); font-size: 12px; }
.usage-table td { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text-secondary); }
.usage-table td:last-child { text-align: right; color: var(--text-primary); }
.usage-head { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); margin: var(--s-2) 0; }
.usage-run {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 8px;
}
.usage-run:hover { background: var(--bg-elev-2); }
.usage-run-main { display: block; font: var(--weight-medium) 13px/1.3 var(--font-text); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-run-meta { display: block; font: var(--weight-regular) 11px/1.4 var(--font-mono); color: var(--text-tertiary); }

/* ---- §3.5/§16.10 EC2 widget flyout ---- */
#ec2-widget { position: relative; cursor: pointer; }
#ec2-flyout {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 150;
  min-width: 220px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  cursor: default;
}
.ec2-fly-row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 12px; padding: 3px 0; }
.ec2-fly-row span:first-child { color: var(--text-tertiary); }
.ec2-fly-row span:last-child { font-family: var(--font-mono); color: var(--text-primary); }