/* 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(39, 39, 42, 0.3); }
#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 13px Inter, sans-serif; }
#deploy .stepper li:hover { color: var(--slate-900); border-color: #cbcbcd; }
#deploy .stepper li i { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); color: var(--slate-500); font-size: 11px; 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: #ffffff; 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: 13px; color: var(--slate-700); margin: 0 0 12px; }
#deploy .field > label, #deploy .sub2 { font: 700 11px 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: #fbfbfb; border-color: var(--line); color: var(--slate-900); }
#deploy .input:focus { border-color: #b9b9bb; background: #fbfbfb; }
#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: #27272a; }

/* 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: #f4f4f6; box-shadow: none; transform: none; }
#deploy .role.r2:hover { border-color: #cbcbcd; background: #f1f1f3; 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 16px 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: 13px; 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: #27272a; color: #ffffff; box-shadow: none; font: 700 13px Inter, sans-serif; }
#deploy .role.r2:hover .rgo { background: #27272a; }
#deploy .role.r2.locked .rgo { background: #efeff1; color: #b45309; 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: #f4f4f6; border-color: var(--line); color: var(--slate-900); }
#deploy .opt:hover { border-color: #cbcbcd; }
#deploy .opt.on { background: #ededef; border-color: #27272a; color: var(--slate-900); box-shadow: inset 0 0 0 1px #27272a; }
#deploy .opt.on span { color: var(--slate-500); }
#deploy .chip { background: #f4f4f6; border-color: var(--line); }
#deploy .chip.on { background: #27272a; border-color: #27272a; color: #ffffff; }
#deploy .tok { background: #f4f4f6; }
#deploy .tok.on { border-color: #27272a; box-shadow: inset 0 0 0 1px #27272a; }

/* look */
#deploy .stage { border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 20%, #ededef, #fefefe); }
#deploy .seg { background: #fbfbfb; border: 1px solid var(--line); border-radius: 10px; }
#deploy .seg button { color: var(--slate-500); font-size: 13px; padding: 6px 13px; border-radius: 7px; }
#deploy .seg button.on { background: #27272a; color: #ffffff; box-shadow: none; }
#deploy .sw button { border-color: var(--white); }
#deploy .sw button.on { box-shadow: 0 0 0 2px #27272a; }
#deploy .idea { border-color: var(--line); border-radius: 12px; }
#deploy .idea:hover { border-color: #b9b9bb; }

/* review: the summary as a tidy table */
#deploy .review dl { padding: 2px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f4f4f6; 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 11px 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: 13px; 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: 13px; border-radius: 10px; }
#deploy .btn.go { background: #27272a; border-color: #27272a; color: #ffffff; }
#deploy .btn.go:hover { background: #27272a; }
#deploy .btn.ghost, #mine .btn.ghost { background: #f4f4f6; box-shadow: inset 0 0 0 1px var(--line); color: var(--slate-900); }
#deploy .btn.ghost:hover, #mine .btn.ghost:hover { background: #ededef; box-shadow: inset 0 0 0 1px #cbcbcd; }

/* 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: #f4f4f6; 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 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
#mine .mine-sum b { font: 600 16px Inter, system-ui, sans-serif; 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 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin: 4px 0 8px; }
#mine .ag { background: #f4f4f6; 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: #fbfbfb; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
#mine .ag .mine-stats .stat small { font: 700 11px 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 11px Inter, sans-serif; letter-spacing: 0.06em; }
#mine .ag .hint { color: var(--slate-500); font-size: 13px; 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: 13px; }
#mine .ag-new { border: 1px dashed #d2d2d4; border-radius: 12px; padding: 13px 16px; }
#mine .ag-new:hover { border-color: #adadaf; background: #f4f4f6; }
#mine .ag-new b { font-size: 13px; }
#mine .proj { background: #f4f4f6; border-radius: 12px; }

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

@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 11px Inter, sans-serif; color: var(--slate-500); }
#tab-hype .hs { margin-left: auto; font: 600 13px Inter, system-ui, sans-serif; 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: #f4f4f6; border: 1px solid var(--line); font: 500 11px Inter, sans-serif; color: var(--slate-500); }
#mine .hs-sum b { font: 600 11px Inter, system-ui, sans-serif; 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: #f7f7f9; }
#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: #e6e6e8 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 11px 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: #e2e2e4; color: var(--slate-700); }
#mine .hr-m small { font: 500 11px Inter, system-ui, sans-serif; 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 Inter, system-ui, sans-serif; color: var(--slate-500); display: inline-flex; align-items: center; gap: 2px; }
#mine .hr-v b { font: 700 13px Inter, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 2px; }
#mine .hr-v small { font: 600 11px Inter, system-ui, sans-serif; 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 13px 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 11px Inter, system-ui, sans-serif; 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; }