/* Deploy + My agents: the same panels as the rest of the app.
   Same surface, hairline border and radius as the feeds and the burn race, small
   uppercase labels, neutral greys only, white for what's selected, green for what's
   done or live. Loaded after city.css, so these win. */

#deploy .sheet, #mine .sheet { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
#deploy .sheet { width: min(820px, 100%); }
#mine .sheet { width: min(720px, 100%); }
#deploy .sheet > header, #mine .sheet > header { padding: 12px 12px 12px 16px; background: var(--white); }
#deploy .sheet > header b, #mine .sheet > header b { display: flex; align-items: center; gap: 8px; font: 700 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: var(--slate-900); }
#deploy .sheet > header b::before, #mine .sheet > header b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
#mine .sheet > header b .pill { text-transform: none; letter-spacing: 0; }
#deploy .sheet .body, #mine .sheet .body { padding: 16px; }
#deploy .x, #mine .x { width: 28px; height: 28px; font-size: 16px; }

/* steps: a slim progress row, not four slabs */
#deploy .stepper { gap: 4px; margin: 0 0 18px; }
#deploy .stepper li { flex: 1; gap: 7px; padding: 0 2px 9px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: none; color: var(--slate-500); font: 600 12px Inter, sans-serif; }
#deploy .stepper li:hover { color: var(--slate-900); border-color: #3a3a3a; }
#deploy .stepper li i { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); color: var(--slate-500); font-size: 10px; box-shadow: inset 0 0 0 1px var(--line); }
#deploy .stepper li.done { color: var(--slate-700); border-color: var(--green); }
#deploy .stepper li.done i { background: var(--green); color: #04140a; box-shadow: none; }
#deploy .stepper li.on { color: var(--slate-900); border-color: var(--slate-900); background: none; }
#deploy .stepper li.on i { background: var(--slate-900); color: var(--on-accent); box-shadow: none; }

/* labels read like the rest of the UI */
#deploy .lead { font-size: 14px; color: var(--slate-700); margin: 0 0 12px; }
#deploy .field > label, #deploy .sub2 { font: 700 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin-bottom: 7px; }
#deploy .field > label .dim { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--slate-400); }
#deploy .input { width: 100%; background: #0e0e0e; border-color: var(--line); color: var(--slate-900); }
#deploy .input:focus { border-color: #4a4a4a; background: #0e0e0e; }
#deploy .ident { background: none; padding: 0; gap: 14px; }
#deploy .xpic { background-color: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
#deploy input[type=range] { accent-color: #f5f5f5; }

/* side: two matching cards, portrait and title, then the points, then the button */
#deploy .roles { gap: 12px; }
#deploy .role.r2 { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 0; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #151515; box-shadow: none; transform: none; }
#deploy .role.r2:hover { border-color: #3a3a3a; background: #181818; transform: none; box-shadow: none; }
#deploy .rpic { grid-row: 1; grid-column: 1; }
#deploy .rpic img.av { width: 76px; height: 76px; border-radius: 12px; }
#deploy .rtext { display: contents; }
#deploy .rtext b { grid-row: 1; grid-column: 2; align-self: start; margin-top: 12px; font: 700 17px Inter, sans-serif; letter-spacing: -0.02em; }
#deploy .rtext > span { grid-row: 1; grid-column: 2; align-self: start; margin-top: 36px; font-size: 13px; line-height: 1.4; color: var(--slate-700); }
#deploy .rtext ul { grid-row: 2; grid-column: 1 / -1; margin: 12px 0 14px; padding: 12px 0 0 16px; border-top: 1px solid var(--line); color: var(--slate-500); font-size: 12.5px; line-height: 1.55; }
#deploy .rtext ul li + li { margin-top: 4px; }
#deploy .rgo, #deploy .role.investor .rgo { grid-row: 3; grid-column: 1 / -1; align-self: end; justify-self: stretch; margin: 0; text-align: center; padding: 9px 13px; border-radius: 10px; background: #f5f5f5; color: #0a0a0a; box-shadow: none; font: 700 13px Inter, sans-serif; }
#deploy .role.r2:hover .rgo { background: #fff; }
#deploy .role.r2.locked .rgo { background: #1a1a1a; color: #fbbf24; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3); }

/* setup: picked choices are outlined; chips go white like the feed tabs */
#deploy .opt { background: #151515; border-color: var(--line); color: var(--slate-900); }
#deploy .opt:hover { border-color: #3a3a3a; }
#deploy .opt.on { background: #1c1c1c; border-color: #f5f5f5; color: var(--slate-900); box-shadow: inset 0 0 0 1px #f5f5f5; }
#deploy .opt.on span { color: var(--slate-500); }
#deploy .chip { background: #151515; border-color: var(--line); }
#deploy .chip.on { background: #f5f5f5; border-color: #f5f5f5; color: #0a0a0a; }
#deploy .tok { background: #151515; }
#deploy .tok.on { border-color: #f5f5f5; box-shadow: inset 0 0 0 1px #f5f5f5; }

/* look */
#deploy .stage { border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 20%, #1c1c1c, #0b0b0b); }
#deploy .seg { background: #0e0e0e; border: 1px solid var(--line); border-radius: 10px; }
#deploy .seg button { color: var(--slate-500); font-size: 12.5px; padding: 6px 13px; border-radius: 7px; }
#deploy .seg button.on { background: #f5f5f5; color: #0a0a0a; box-shadow: none; }
#deploy .sw button { border-color: var(--white); }
#deploy .sw button.on { box-shadow: 0 0 0 2px #f5f5f5; }
#deploy .idea { border-color: var(--line); border-radius: 12px; }
#deploy .idea:hover { border-color: #4a4a4a; }

/* review: the summary as a tidy table */
#deploy .review dl { padding: 2px 14px; border: 1px solid var(--line); border-radius: 12px; background: #151515; gap: 0 14px; }
#deploy .review dt, #deploy .review dd { padding: 9px 0; border-top: 1px solid var(--line); }
#deploy .review dt:first-of-type, #deploy .review dd:first-of-type { border-top: 0; }
#deploy .review dt { font: 700 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; }
#deploy .dstep p:not(.lead) { color: var(--slate-500); font-size: 12.5px; line-height: 1.55; }

/* footer: white primary, like "Deploy agent" in the bar */
#deploy .dfoot { background: var(--white); border-top-color: var(--line); margin-top: 16px; padding-top: 14px; }
#deploy .btn.big { padding: 10px 18px; font-size: 13.5px; border-radius: 10px; }
#deploy .btn.go { background: #f5f5f5; border-color: #f5f5f5; color: #0a0a0a; }
#deploy .btn.go:hover { background: #fff; }
#deploy .btn.ghost, #mine .btn.ghost { background: #151515; box-shadow: inset 0 0 0 1px var(--line); color: var(--slate-900); }
#deploy .btn.ghost:hover, #mine .btn.ghost:hover { background: #1c1c1c; box-shadow: inset 0 0 0 1px #3a3a3a; }

/* my agents: summary tiles like the top bar, agent cards like the feed rows */
#mine .mine-sum { gap: 6px; margin-bottom: 16px; }
#mine .mine-sum > div { background: #151515; color: var(--slate-900); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
#mine .mine-sum small { color: var(--slate-500); font: 700 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
#mine .mine-sum b { font: 600 15px 'JetBrains Mono', monospace; color: var(--slate-900); }
#mine .mine-sum .good b { color: var(--green-ink); }
#mine .mine-sum .bad b { color: var(--red-ink); }
#mine .sub2 { font: 700 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin: 4px 0 8px; }
#mine .ag { background: #151515; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: none; }
#mine .ag.affiliate, #mine .ag.investor { border-left: 1px solid var(--line); }
#mine .ag-h img.av { width: 52px; height: 52px; border-radius: 12px; }
#mine .ag-id > b { font-size: 16px; letter-spacing: -0.02em; }
#mine .ag .st.s-on i { background: var(--green); }
#mine .ag .st.s-live i { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
#mine .ag .mine-stats { margin-top: 12px; gap: 6px; }
#mine .ag .mine-stats .stat { background: #0e0e0e; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
#mine .ag .mine-stats .stat small { font: 700 10px Inter, sans-serif; letter-spacing: 0.06em; }
#mine .ag .mine-stats .stat.good { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.25); }
#mine .ag-row { gap: 22px; margin-top: 12px; padding-top: 12px; }
#mine .ag-sec > small { font: 700 10px Inter, sans-serif; letter-spacing: 0.06em; }
#mine .ag .hint { color: var(--slate-500); font-size: 12px; font-weight: 400; line-height: 1.5; }
#mine .ag .hint b { color: var(--slate-700); }
#mine .ag .hint b.warn { color: var(--red-ink); }
#mine .ag-mem summary { color: var(--slate-500); font-size: 12px; }
#mine .ag-new { border: 1px dashed #333; border-radius: 12px; padding: 13px 16px; }
#mine .ag-new:hover { border-color: #555; background: #151515; }
#mine .ag-new b { font-size: 14px; }
#mine .proj { background: #151515; border-radius: 12px; }

/* agent portraits: a neutral backdrop, no blue tint */
img.av { background: radial-gradient(120% 100% at 50% 15%, #262626, #121212); }

@media (max-width: 760px) {
  #deploy .roles, #deploy .review { grid-template-columns: 1fr; }
  #deploy .stepper li { font-size: 0; gap: 0; justify-content: center; }
}

#tab-hype .burns li { align-items: center; }
#tab-hype .hy { min-width: 0; display: flex; flex-direction: column; }
#tab-hype .hy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-hype .hy small { font: 500 10.5px Inter, sans-serif; color: var(--slate-500); }
#tab-hype .hs { margin-left: auto; font: 600 12px "JetBrains Mono", monospace; color: var(--slate-900); }
#tab-hype .hb { font-style: normal; color: var(--green-ink); }

/* ---- My agents: trade / deal history ---- */
#mine .ac-hist { margin-top: 4px; }
#mine .hs-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
#mine .hs-sum span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: #151515; border: 1px solid var(--line); font: 500 11.5px Inter, sans-serif; color: var(--slate-500); }
#mine .hs-sum b { font: 600 11.5px 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 2px; color: var(--slate-900); }
#mine .hr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#mine .hr { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: #121212; }
#mine .hr-tok { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
#mine .hr-tok i { display: block; width: 30px; height: 30px; border-radius: 9px; background: #222 center / cover; }
#mine .hr-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#mine .hr-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#mine .hr-t b { font: 700 13px Inter, sans-serif; color: var(--slate-900); }
#mine .hr-t em { font: 700 9.5px Inter, sans-serif; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; }
#mine em.up { background: rgba(34,197,94,0.15); color: var(--green-ink); }
#mine em.down { background: rgba(239,68,68,0.12); color: var(--red-ink); }
#mine em.mid, #mine em.open { background: #262626; color: var(--slate-700); }
#mine .hr-m small { font: 500 11px 'JetBrains Mono', monospace; color: var(--slate-500); }
#mine .hr-l { display: flex; flex-wrap: wrap; gap: 10px; }
#mine .hr-l a, #mine .hr-drops a { font: 600 11px Inter, sans-serif; color: var(--slate-700); text-decoration: none; }
#mine .hr-l a:hover, #mine .hr-drops a:hover { color: var(--slate-900); text-decoration: underline; }
#mine .hr-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
#mine .hr-v span { font: 500 11px 'JetBrains Mono', monospace; color: var(--slate-500); display: inline-flex; align-items: center; gap: 2px; }
#mine .hr-v b { font: 700 13px 'JetBrains Mono', monospace; display: inline-flex; align-items: center; gap: 2px; }
#mine .hr-v small { font: 600 10.5px 'JetBrains Mono', monospace; color: var(--slate-500); }
#mine .up { color: var(--green-ink); }
#mine .down { color: var(--red-ink); }
#mine em.up, #mine em.down { }
#mine .hr-more { margin-top: 8px; width: 100%; }
#mine .hr-drops { margin-top: 8px; }
#mine .hr-drops summary { cursor: pointer; font: 600 12px Inter, sans-serif; color: var(--slate-700); display: flex; align-items: center; gap: 4px; }
#mine .hr-drops ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#mine .hr-drops li { display: flex; align-items: center; gap: 10px; font: 500 11.5px 'JetBrains Mono', monospace; color: var(--slate-500); }
#mine .hr-drops li b { color: var(--green-ink); display: inline-flex; align-items: center; gap: 2px; }
#mine .hr-drops li a { margin-left: auto; }
/* the whole sheet scrolls, however tall the cards grow */
#mine .sheet { display: flex; flex-direction: column; overflow: hidden; }
#mine .sheet > .body { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: none; }
#mine .sheet > .body::-webkit-scrollbar { display: none; }