/* ==========================================================================
   Orblivion: run a trading agent (web/hosted.html), and Sign in with Orbio's redirect page (web/orbio-callback.html)
   On top of the docs' tokens and top bar (/docs/docs.css): the same colours, type and light/dark themes.
   ========================================================================== */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the brand's gradient stops, themed (this page allows no inline styles) */
#mk-ring stop:nth-child(1) { stop-color: var(--mk-ring-0); }
#mk-ring stop:nth-child(2) { stop-color: var(--mk-ring-1); }
#mk-orbit stop:nth-child(1) { stop-color: var(--mk-orbit-0); }
#mk-orbit stop:nth-child(2) { stop-color: var(--mk-orbit-1); }
#mk-orbit stop:nth-child(3) { stop-color: var(--mk-orbit-2); }
#wm-o-grad stop:nth-child(1) { stop-color: var(--wm-o-0); }
#wm-o-grad stop:nth-child(2) { stop-color: var(--wm-o-1); }
#wm-o-grad stop:nth-child(3) { stop-color: var(--wm-o-2); }

/* ==== ui: one system for the agents and league pages. This block is the same in web/hosted-page.css and
   web/league-page.css (tests/test_page_ui.py holds them equal): spacing, buttons, chips, tabs, toasts, skeletons,
   empty states and the illustrated steps. Colours are the docs' tokens (/docs/docs.css). ==== */

:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --h-sm: 34px; --h-md: 44px;          /* the trading wallet's page (web/wallet/wallet.css) keeps the same heights */
  --violet: rgb(138 92 255);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift: 0 16px 40px -26px rgb(0 0 0 / 0.75);
  --sticky-top: calc(var(--topbar-h) + 10px);     /* the tabs' top, under the top bar */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --violet: rgb(106 67 224); --lift: 0 16px 36px -26px rgb(24 32 80 / 0.4); }
}
:root[data-theme="light"] { --violet: rgb(106 67 224); --lift: 0 16px 36px -26px rgb(24 32 80 / 0.4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- buttons: primary, secondary (.btn), ghost, danger, quiet danger and link; sm and md ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; max-width: 100%; padding: 0 18px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line-strong); background-color: var(--surface-2); color: var(--text);
  font: 500 14px/1.2 var(--font); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, transform 0.08s;
}
.btn:hover { border-color: var(--accent-line); background-color: var(--accent-soft); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:disabled, .btn:disabled:hover {
  opacity: 0.5; cursor: not-allowed; transform: none; border-color: var(--line-strong); background-color: var(--surface-2);
}
.btn-sm { min-height: var(--h-sm); padding: 0 14px; font-size: 13px; }
/* the primary action: the docs' --btn-primary-* tokens, painted from the border box (tests/test_button_contrast.py) */
.btn-primary {
  border-color: transparent; background: var(--btn-primary-grad); background-origin: border-box;
  color: var(--btn-primary-ink); font-weight: 600;
}
.btn-primary, .btn-primary:hover { border-color: transparent; background-origin: border-box; }
.btn-primary:hover {
  color: var(--btn-primary-ink);
  background-image: linear-gradient(var(--btn-primary-veil), var(--btn-primary-veil)), var(--btn-primary-grad);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:disabled, .btn-primary:disabled:hover { background-image: var(--btn-primary-grad); box-shadow: none; opacity: 0.45; }
.btn-ghost { border-color: transparent; background-color: transparent; color: var(--text-2); }
.btn-ghost:hover { border-color: transparent; background-color: var(--hover); color: var(--text); }
.btn-ghost:disabled, .btn-ghost:disabled:hover { border-color: transparent; background-color: transparent; }
.btn-danger { border-color: color-mix(in srgb, var(--down) 55%, transparent); background-color: transparent; color: var(--down); }
.btn-danger:hover { border-color: var(--down); background-color: var(--down-soft); color: var(--down); }
.btn-danger:disabled, .btn-danger:disabled:hover { border-color: color-mix(in srgb, var(--down) 55%, transparent); background-color: transparent; }
/* quiet danger: a destructive action that sits with the others without shouting */
.btn-ghost.btn-danger { border-color: transparent; color: color-mix(in srgb, var(--down) 85%, var(--text)); }
.btn-ghost.btn-danger:hover { border-color: transparent; background-color: var(--down-soft); color: var(--down); }
.btn-link {
  display: inline; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent-bright); font: 500 14px var(--font); text-align: left;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* busy: a spinner before the label, the button kept legible while the others wait */
.btn[aria-busy="true"], .btn[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin 0.8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* ---------- chips (badges): one shape, five tones ---------- */

.chip, .badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: 999px;
  white-space: nowrap; font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface-3);
}
.chip-ok, .badge-up { color: var(--up); background: var(--up-soft); }
.chip-warn, .badge-warn { color: var(--amber); background: var(--amber-soft); }
.chip-down, .badge-down { color: var(--down); background: var(--down-soft); }
.chip-live, .badge-live { color: var(--live); background: var(--live-soft); }
.chip-info { color: var(--accent-bright); background: var(--accent-soft); }
.chip-off { color: var(--text-3); background: var(--surface-3); }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- the tabs: a segmented control under the page's title, its panels below ---------- */

/* stuck under the top bar on a band of the page's own colour, so what scrolls under it never shows through */
.seg-wrap {
  position: sticky; top: var(--topbar-h); z-index: 20; display: flex;
  margin: 0 calc(-1 * var(--gutter)) var(--sp-4); padding: 10px var(--gutter);
}
.seg-wrap.is-stuck { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.seg {
  position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--lift);
}
.seg::-webkit-scrollbar { display: none; }
.seg-tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text-2); font: 500 14px var(--font); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, transform 0.08s;
}
.seg-tab:hover { color: var(--text); }
.seg-tab:active { transform: scale(0.97); }
.seg-tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.seg-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.seg-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
}
.no-js .seg-wrap { display: none; }
.no-js .seg-panel[hidden] { display: block; }
.seg-panel { outline: none; scroll-margin-top: calc(var(--sticky-top) + 64px); }
.seg-panel.is-entering { animation: ui-panel-in 0.32s var(--ease) both; }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.seg-tab .short { display: none; }
@media (max-width: 480px) {
  .seg-wrap { margin-bottom: var(--sp-4); }
  .seg { width: 100%; }
  .seg-tab { flex: 1 1 auto; justify-content: center; min-height: 36px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .seg-tab .long { display: none; }
  .seg-tab .short { display: inline; }
}

/* ---------- toasts: one stack, bottom right (bottom centre on a phone), never mid-page ---------- */

.toasts {
  position: fixed; z-index: 60; right: var(--sp-5); bottom: var(--sp-5); width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); pointer-events: none;
}
.toast {
  pointer-events: auto; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  margin: 0; padding: 12px 10px 12px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--up);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); box-shadow: var(--lift);
  font-size: 14px; line-height: 1.45; transition: opacity 0.2s, transform 0.25s var(--ease);
}
.toast.is-new { opacity: 0; transform: translateY(10px); }
.toast.is-out { opacity: 0; transform: translateX(16px); }
.toast-err { border-left-color: var(--down); }
.toast-info { border-left-color: var(--accent); }
.toast-ic { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--up-soft); position: relative; }
.toast-ic::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--up); }
.toast-err .toast-ic { background: var(--down-soft); }
.toast-err .toast-ic::after { background: var(--down); }
.toast-info .toast-ic { background: var(--accent-soft); }
.toast-info .toast-ic::after { background: var(--accent); }
.toast-body { min-width: 0; overflow-wrap: anywhere; }
.toast-body strong { display: block; font-weight: 600; }
.toast-body span { color: var(--text-2); }
.toast-x {
  width: 28px; height: 28px; margin: -4px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--text-3); font: 400 18px/1 var(--font);
}
.toast-x:hover { color: var(--text); background: var(--hover); }
.toast-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 640px) {
  .toasts { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- loading skeletons and empty states ---------- */

.skel {
  display: block; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 50%, var(--surface-2) 80%);
  background-size: 220% 100%; animation: ui-skel 1.4s ease-in-out infinite;
}
@keyframes ui-skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel-card { display: grid; gap: 10px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.skel-line { height: 12px; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-big { height: 34px; width: 50%; }
.empty-state {
  display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-6); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.empty-state h3 { margin: 0; font-size: 16px; font-weight: 600; }
.empty-state p { margin: 0; color: var(--text-2); font-size: 14px; max-width: 60ch; }
.empty-state .btn-row { margin-top: var(--sp-2); }

/* ---------- the illustrated steps: cards in a row joined by connectors, one lighting up at a time ---------- */

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: how; }
.how-step {
  position: relative; display: grid; align-content: start; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.how-step:hover, .how-step.is-lit {
  border-color: var(--accent-line); transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--lift);
}
.how-art { display: grid; place-items: center; height: 92px; margin: 0; border-radius: var(--radius-sm); background:
  radial-gradient(120px 70px at 50% 60%, var(--accent-soft), transparent 70%), var(--surface-2); }
.ill { display: block; width: 120px; height: 84px; overflow: visible; }
.how-head { display: flex; align-items: center; gap: var(--sp-2); }
.how-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  font: 600 12px var(--mono); color: var(--text-2); background: var(--surface-3); transition: color 0.3s, background 0.3s;
}
.how-step.is-lit .how-n { color: var(--btn-primary-ink); background: var(--btn-primary-grad); }
.how-h { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.how-step p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.how-tag { margin-left: auto; }
/* the connector to the next step: drawn as the steps light up (static and whole without motion) */
.how-step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--live), var(--accent), var(--violet));
  transform-origin: left center; transition: transform 0.6s var(--ease);
}
/* the illustration's parts */
.ill-card { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1.5; }
.ill-soft { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.ill-line { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
/* the gradient's paint is an attribute of each part, in the markup (#ill-grad) */
.ill-acc { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ill-up { fill: none; stroke: var(--up); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ill-upf { fill: var(--up); }
.ill-dot { fill: var(--text-3); }
.ill-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.5; }
#ill-grad stop:nth-child(1) { stop-color: var(--live); }
#ill-grad stop:nth-child(2) { stop-color: var(--accent); }
#ill-grad stop:nth-child(3) { stop-color: var(--violet); }
.ill-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ill .mv { transform-box: fill-box; transform-origin: center; }
.ill .mv-l { transform-box: fill-box; transform-origin: left center; }
.ill .mv-b { transform-box: fill-box; transform-origin: center bottom; }
/* motion, only once the page's script has switched it on (.how.is-on) and while the steps are on screen (.is-vis) */
.how.is-on .how-step.is-lit .ill-draw { animation: ui-draw 1.2s var(--ease) both; }
.how.is-on .how-step.is-lit .a-pop { animation: ui-pop 0.9s var(--ease) both; }
.how.is-on .how-step.is-lit .a-slide { animation: ui-slide 1.8s var(--ease) both; }
.how.is-on .how-step.is-lit .a-slide2 { animation: ui-slide 1.8s var(--ease) 0.15s reverse both; }
.how.is-on .how-step.is-lit .a-drop { animation: ui-drop 1.4s var(--ease) both; }
.how.is-on .how-step.is-lit .a-fill { animation: ui-fill 1.6s var(--ease) both; }
.how.is-on .how-step.is-lit .a-rise { animation: ui-rise 1.1s var(--ease) both; }
.how.is-on .how-step.is-lit .a-rise2 { animation: ui-rise 1.1s var(--ease) 0.15s both; }
.how.is-on .how-step.is-lit .a-rise3 { animation: ui-rise 1.1s var(--ease) 0.3s both; }
.how.is-on .how-step.is-lit .a-flip { animation: ui-flip 0.7s var(--ease) both; }
.how.is-on .how-step.is-lit .a-ping { animation: ui-ping 1.6s ease-out infinite; }
.how.is-on .how-step.is-lit .a-spin { animation: ui-turn 1.6s var(--ease) both; }
/* the agent ticks: its hand steps round while the steps are on screen */
.how.is-on .a-tick { animation: ui-tick 6s steps(12) infinite; animation-play-state: paused; }
.how.is-on.is-vis .a-tick { animation-play-state: running; }
@keyframes ui-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ui-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes ui-slide { 0% { transform: translateX(-14px); } 55% { transform: translateX(8px); } 100% { transform: none; } }
@keyframes ui-drop { 0% { transform: translateY(-16px); opacity: 0; } 50% { opacity: 1; } 100% { transform: none; } }
@keyframes ui-fill { from { transform: scaleX(0.15); } to { transform: none; } }
@keyframes ui-rise { from { transform: scaleY(0.2); } to { transform: none; } }
@keyframes ui-flip { from { transform: translateX(-16px); } to { transform: none; } }
@keyframes ui-ping { 0% { transform: scale(0.85); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ui-turn { from { transform: rotate(-180deg); } to { transform: none; } }
@keyframes ui-tick { to { transform: rotate(360deg); } }
/* five or four across on a wide screen, joined left to right */
@media (min-width: 1000px) {
  .how-steps { grid-template-columns: repeat(var(--how-n, 5), minmax(0, 1fr)); }
  .how-step:not(:last-child)::after { top: 62px; right: calc(-1 * var(--sp-4) - 1px); width: calc(var(--sp-4) + 2px); height: 2px; }
  .how.is-on .how-step:not(.is-done):not(:last-child)::after { transform: scaleX(0); }
}
@media (min-width: 640px) and (max-width: 999px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone: one column, each picture beside its words, joined top to bottom */
@media (max-width: 639px) {
  .how-steps { gap: var(--sp-3); }
  .how-step { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
  .how-art { height: 72px; grid-row: span 2; }
  .ill { width: 80px; height: 56px; }
  .how-step:not(:last-child)::after {
    left: calc(var(--sp-3) + 41px); bottom: calc(-1 * var(--sp-3) - 1px); width: 2px; height: calc(var(--sp-3) + 2px);
    transform-origin: center top;
  }
  .how.is-on .how-step:not(.is-done):not(:last-child)::after { transform: scaleY(0); }
}

/* ---------- reduced motion: static pictures, no counting, no moving tabs or panels ---------- */

@media (prefers-reduced-motion: reduce) {
  .seg-ind, .seg-tab, .btn, .toast, .how-step, .how-step::after, .how-n { transition: none !important; }
  .seg-panel.is-entering, .skel, .btn[aria-busy="true"]::before, .ill *, .how-step::after { animation: none !important; }
  .how-step:hover, .how-step.is-lit, .btn:active, .seg-tab:active { transform: none; }
  .how.is-on .how-step:not(.is-done):not(:last-child)::after { transform: none; }
  .toast.is-new, .toast.is-out { transform: none; }
}
/* ==== end ui ==== */

/* ---------- the page ---------- */

.hp {
  max-width: 1480px; margin: 0 auto; padding: var(--sp-8) var(--gutter) 64px; outline: none;
  overflow-wrap: anywhere;
}
.hp-head { display: grid; gap: var(--sp-3) var(--sp-8); margin-bottom: var(--sp-5); align-items: end; }
@media (min-width: 1100px) {
  .hp-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.hp-eyebrow {
  margin: 0 0 var(--sp-2); font: 500 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.hp h1 {
  margin: 0 0 var(--sp-2);
  font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2;
  letter-spacing: 0.02em;
  background: var(--heading); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-lead { margin: 0; font-size: 16px; color: var(--text-2); max-width: 64ch; }
/* past the first tab the title steps back: the tab's own content gets the screen */
.hp[data-tab="watch"] .hp-lead, .hp[data-tab="setup"] .hp-lead { display: none; }
.hp[data-tab="watch"] h1, .hp[data-tab="setup"] h1 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 0; }
.hp[data-tab="watch"] .hp-head, .hp[data-tab="setup"] .hp-head { align-items: center; }
.hp-notice {
  margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; color: var(--text-2); background: var(--surface);
}
.hp-notice strong { color: var(--text); }
.hp-loading { color: var(--text-2); }
.hp-footer { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.hp-footer p { margin: 0; }
.hp-footer p + p { margin-top: var(--sp-2); }
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* the page's small marks: inline SVG (the tabs') or cloned from its template (web/hosted-page.js icon()), drawn in the
   text's colour */
.ic-svg { display: inline-block; flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ic-live { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--up); }
.ic-live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--up); opacity: 0;
  animation: hp-ping 2.4s ease-out infinite;
}
@keyframes hp-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- 1. How it works ---------- */

.how { --how-n: 5; }
.how-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.how-note { flex: 1 1 420px; margin: 0; color: var(--text-2); font-size: 14px; }
.ill-on { fill: var(--up-soft); stroke: var(--up); stroke-width: 1.5; }
.ill-knob { fill: var(--text); }
.ill-ink { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ill-dim { opacity: 0.65; }
.ill .hand { transform-box: view-box; transform-origin: 88px 43px; }

/* ---------- 2. Watch it live: the house agent, or its empty state ---------- */

.hp-watch-none { display: none; }
#house-agent[data-state] ~ .hp-watch-empty .hp-watch-wait { display: none; }
#house-agent[data-state="none"] ~ .hp-watch-empty .hp-watch-none { display: grid; }
#house-agent[data-state="shown"] ~ .hp-watch-empty { display: none; }
.hp-watch-wait { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.no-js .hp-watch-wait { display: none; }

/* ---------- 3. Set up: cards ---------- */

#hosted-root { overflow-anchor: none; }
.card {
  margin: 0 0 var(--sp-4); padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.card h2, .hp-sub h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: var(--sp-2); }
.card h2:focus, .hp-sub h2:focus { outline: none; }
.card-sub { margin: 0; font-size: 13px; color: var(--text-3); }
.card p { margin: 0 0 var(--sp-3); }
.card p:last-child { margin-bottom: 0; }
.hp-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  font: 600 11.5px var(--mono); color: var(--text-2); background: var(--surface-3);
}
/* a card inside a card: the form, a live agent's setup */
.hp-sub {
  margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--surface-2); min-width: 0; scroll-margin-top: calc(var(--sticky-top) + 70px);
}
.hp-sub p { margin: 0 0 var(--sp-3); }
.err {
  margin: var(--sp-3) 0 0; padding: 12px 16px; border: 1px solid var(--line-strong); border-left: 3px solid var(--down);
  border-radius: var(--radius-sm); background: var(--down-soft); font-size: 14px;
}
.err.warn { border-left-color: var(--amber); background: var(--amber-soft); }
.err strong { display: block; margin-bottom: 2px; }
.err code { font: 12px var(--mono); color: var(--text-2); }
.err .hint { display: block; margin-top: 4px; color: var(--text-2); }
.notice {
  margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--up); background: var(--up-soft); font-size: 14px;
}
/* a tidy inline note: why it's paused, what it needs */
.hp-callout {
  display: block; margin: 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
}
.hp-callout.warn { border-color: color-mix(in srgb, var(--amber) 35%, transparent); background: var(--amber-soft); color: var(--text); }
.hp-callout.info { border-color: var(--line); background: var(--surface-2); }
.hp-callout.ok { border-color: color-mix(in srgb, var(--up) 35%, transparent); background: var(--up-soft); color: var(--text); }
.hp-callout code { font: 11.5px var(--mono); color: var(--text-3); }
.hp-callout p { margin: 0 0 var(--sp-2); }
.hp-callout p:last-child { margin-bottom: 0; }
.addr, .tx { font: 12.5px var(--mono); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 14px; font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; min-width: 0; }
.kv code { font: 12px var(--mono); }
.row { display: flex; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp-3); }
.row:last-child { margin-bottom: 0; }

/* the wallet, and beside it (a wide screen) the Orbio account */
.hp-top { display: grid; gap: 0 var(--sp-4); align-items: start; }
.hp-top > .card { margin-bottom: var(--sp-4); }
@media (min-width: 1100px) { .hp-top.two { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); } }
.hp-w-lead { color: var(--text-2); max-width: 70ch; }
/* a wallet with agents: one bar, its state on the left, who is signed in on the right */
/* signed out: sign in, and beside it the three steps to a running agent (one column on a narrow screen) */
.hp-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.hp-start-steps { list-style: none; margin: 0; padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--line); display: grid; gap: var(--sp-4); }
.hp-start-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.hp-start-steps strong { display: block; margin-top: 4px; font-size: 14.5px; }
.hp-start-steps p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 860px) {
  .hp-start { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .hp-start-steps { padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.hp-wallet.is-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); }
.hp-wallet.is-bar .card-head { display: contents; }
.hp-wallet.is-bar .hp-status, .hp-wallet.is-bar .hp-nolive > .hp-status { padding: 0; border: 0; background: none; }
.hp-wallet.is-bar .hp-nolive { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.hp-wallet.is-bar .hp-ways { flex: 1 1 100%; }
.hp-wallet.is-bar .hp-ways:not([open]) { flex: 0 0 auto; }
.hp-w-who { justify-self: end; align-self: start; padding-top: 4px; }
@media (max-width: 640px) { .hp-wallet.is-bar { grid-template-columns: minmax(0, 1fr); } .hp-w-who { justify-self: start; } }
.hp-status {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.hp-status-ic { width: 28px; height: 28px; border-radius: 50%; position: relative; }
.hp-status.ok .hp-status-ic { background: var(--up-soft); }
.hp-status.warn .hp-status-ic { background: var(--amber-soft); }
.hp-status-ic::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; }
.hp-status.ok .hp-status-ic::after { background: var(--up); }
.hp-status.warn .hp-status-ic::after { background: var(--amber); }
.hp-status-main { min-width: 0; }
.hp-status-t { margin: 0 !important; font-weight: 600; font-size: 15px; color: var(--text); }
.hp-status-s { margin: 2px 0 0 !important; font-size: 13.5px; color: var(--text-2); }
.hp-status-s code { font: 12px var(--mono); }
.hp-status-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.hp-nolive { container-type: inline-size; display: grid; gap: var(--sp-3); }
.hp-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-options.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 640px) { .hp-options, .hp-options.three { grid-template-columns: minmax(0, 1fr); } }
.hp-opt {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-2); min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.hp-opt:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.hp-opt-top { display: flex; align-items: center; gap: var(--sp-2); }
.hp-opt-ic { display: inline-flex; color: var(--accent-bright); }
.hp-opt-ic .ic-svg { width: 20px; height: 20px; }
.hp-opt-h { margin: 0; font-size: 15px; font-weight: 600; }
.hp-opt-t { margin: 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hp-opt-t code { font: 12px var(--mono); color: var(--text); }
.hp-opt-a { padding-top: var(--sp-1); }
.hp-why, .hp-ways { font-size: 13.5px; color: var(--text-2); }
.hp-why summary, .hp-ways summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--accent-bright); font-weight: 500; }
.hp-why summary:focus-visible, .hp-ways summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.hp-why[open] summary, .hp-ways[open] > summary { margin-bottom: var(--sp-2); }
.hp-ways .hp-why { margin-top: var(--sp-3); }
.hp-why p { margin: 0 0 var(--sp-2); max-width: 90ch; }
.hp-why code { font: 11.5px var(--mono); }
.hp-orbio-card .card-head { margin-bottom: var(--sp-2); }
.hp-orbio-line { margin: 0 0 var(--sp-2) !important; font-size: 13.5px; color: var(--text-2); }

/* ---------- your agents: an even grid of cards ---------- */

.hp-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.hp-agents.one { grid-template-columns: minmax(0, 1fr); }
.hp-agent {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
  scroll-margin-top: calc(var(--sticky-top) + 70px); transition: border-color 0.2s, box-shadow 0.2s;
}
.hp-agent:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); box-shadow: var(--lift); }
.hp-agent.is-stopped { opacity: 0.8; }
.ag-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; }
.ag-ic {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-bright);
}
.ag-ic .ic-svg { width: 20px; height: 20px; }
.ag-title { min-width: 0; }
.ag-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ag-name { margin: 0 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ag-name:focus { outline: none; }
.ag-kind { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.ag-pnl { display: grid; justify-items: end; gap: 2px; text-align: right; }
.ag-pnl-v { font: 600 22px/1.1 var(--mono); letter-spacing: -0.01em; }
.ag-pnl-l { font: 500 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ag-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: var(--sp-2) var(--sp-4); margin: 0; }
.ag-fact { min-width: 0; }
.ag-fact dt { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ag-fact dd { margin: 2px 0 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.ag-fact dd .btn { margin-top: 4px; }
.ag-sid { color: var(--text-3); font-size: 12px; }
/* a narrow card (a phone): its profit and loss on its own line under the name */
@container (max-width: 420px) {
  .ag-head { grid-template-columns: 34px minmax(0, 1fr); }
  .ag-pnl { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-2); justify-items: start; text-align: left; }
}
.ag-dec { padding: var(--sp-3); border-left: 3px solid var(--accent-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.ag-dec-h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 4px; }
.ag-label { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ag-dec-t { font-size: 11.5px; color: var(--text-3); }
.ag-dec-x {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.ag-dec.is-open .ag-dec-x { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.ag-more { margin-top: 4px; font-size: 13px; }
.ag-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-1); }
.ag-end { margin-left: auto; }
.ag-foot { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.ag-id { font-size: 12px; }
.ag-copy { font-size: 12.5px; }
.hp-pause code { font: 11.5px var(--mono); }
.hp-confirm { margin: 0; padding: var(--sp-3); border: 1px solid color-mix(in srgb, var(--down) 35%, transparent); border-radius: var(--radius-sm); background: var(--down-soft); }
.hp-confirm p { margin: 0 0 var(--sp-2); font-size: 14px; }
.hp-topup-ask { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); }
.hp-logs { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.hp-log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.hp-log { display: grid; grid-template-columns: 70px 92px minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; font-size: 13px; }
.hp-log-t { color: var(--text-3); font-size: 12px; }
.hp-log code { font: 11.5px var(--mono); }

/* ---------- an agent's dashboard (web/agent-dashboard.css draws its inside): its controls in the page's buttons ---------- */

.hp-dash { padding: var(--sp-5); scroll-margin-top: calc(var(--sticky-top) + 70px); }
.hp-dash > .hp-callout { margin-bottom: var(--sp-4); }
.hp-dash-ctl { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
/* Talk to your agent: the conversation, a proposed strategy line by line, and the message box */
.hp-chat { margin-top: var(--sp-5); padding: var(--sp-4); }
.hp-chat .card-head h3 { margin: 0; font-size: 15px; }
.hp-chat-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; overflow-anchor: none; }
.hp-turn { max-width: 78ch; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.hp-turn.owner { justify-self: end; border-color: var(--accent-line); background: var(--accent-soft); }
.hp-who { display: block; margin-bottom: 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.hp-turn-t { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.hp-chat-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-3); }
.hp-proposal { margin: 0 0 var(--sp-3); padding: 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--surface); }
.hp-proposal-h { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); }
.hp-diff { list-style: none; margin: 0 0 10px; padding: 8px 0; border-radius: 6px; background: var(--surface-2); font: 12.5px/1.6 var(--mono); }
.hp-diff li { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-diff-k { color: var(--text-3); }
.hp-diff-add { background: color-mix(in srgb, var(--up) 14%, transparent); }
.hp-diff-add .hp-diff-k { color: var(--up); }
.hp-diff-del { background: color-mix(in srgb, var(--down) 14%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.hp-diff-del .hp-diff-k { color: var(--down); }
.hp-diff-same { color: var(--text-2); }
/* an unchanged line is what the owner wrote already: two lines of it for context, so the change shows without scrolling */
.hp-diff-same > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hp-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 0 0 8px; }
/* the message box: a textarea, not a one-line field: room around its words, in the page's own type */
.field.hp-chat-in { height: auto; min-height: 52px; padding: 14px 16px; border-radius: 12px; resize: vertical;
  font: 400 14.5px/1.5 var(--font); white-space: pre-wrap; }
.hp-chat-form .btn { min-height: 52px; padding: 0 22px; }
@media (max-width: 560px) { .hp-chat-form { grid-template-columns: minmax(0, 1fr); } }
.hp .db-name:focus { outline: none; }
.hp .db-back {
  min-height: var(--h-sm); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background-color: var(--surface-2);
  color: var(--text); font: 500 13px var(--font); cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
.hp .db-back:hover { border-color: var(--accent-line); background-color: var(--accent-soft); }
.hp .db-tabs { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.hp .db-tab { min-height: 28px; border-color: transparent; border-radius: 999px; transition: background-color 0.15s, color 0.15s; }
.hp .db-tab:hover { border-color: transparent; color: var(--text); }
.hp .db-tab.on { border-color: var(--accent-line); }
.hp .db-topup {
  min-height: var(--h-sm); padding: 0 14px; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  background: var(--btn-primary-grad); background-origin: border-box; color: var(--btn-primary-ink); font: 600 13px var(--font);
}
.hp .db-topup:hover { background-image: linear-gradient(var(--btn-primary-veil), var(--btn-primary-veil)), var(--btn-primary-grad); }
.hp .db-chip { min-height: 22px; display: inline-flex; align-items: center; }

/* ---------- the strategy form ---------- */

/* Equal columns, measured on the form itself: three, two, then one. Each field is a label line, the control and a
   reserved hint line; with subgrid, the three rows line up across the whole row whatever the text */
.hp-form { container-type: inline-size; }
/* the fields, and beside them (a wide form) what it will do and the button that makes it */
.hp-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
.hp-fields { container-type: inline-size; min-width: 0; }
.hp-preview { position: sticky; top: calc(var(--sticky-top) + 64px); padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); min-width: 0; }
.hp-preview-h { margin: 0 0 10px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hp-preview .hp-summary { margin: 0 0 12px !important; padding: 0; border: 0; background: none; font-size: 14.5px; line-height: 1.55; }
.hp-preview .row { margin-top: 14px; }
@container (max-width: 860px) {
  .hp-formgrid { grid-template-columns: minmax(0, 1fr); }
  .hp-preview { position: static; }
}
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; margin: 0 0 2px; }
.hp-field { display: grid; grid-template-rows: auto 44px auto; row-gap: 6px; align-content: start; min-width: 0; margin: 0 0 12px; }
@supports (grid-template-rows: subgrid) {
  .hp-field { grid-row: span 3; grid-template-rows: subgrid; }
}
.hp-label {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-hint { min-height: 1.4em; font-size: 12px; line-height: 1.4; color: var(--text-3); }
/* every input and select: one height, padding, radius, border, background, type and focus ring */
.field {
  display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background-color: var(--surface); color: var(--text);
  font: 400 14px/1.2 var(--mono); -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field::placeholder { color: var(--text-3); opacity: 1; }
.field:hover { border-color: var(--accent-line); }
.field:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-line); }
.field:disabled { opacity: 0.55; cursor: not-allowed; }
/* a select: its own chevron, drawn with two gradients in the theme's text colour (no image for the CSP to allow) */
select.field {
  padding-right: 40px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
select.field option { background-color: var(--surface-2); color: var(--text); }
select.field option:checked { background-color: var(--surface-3); }
/* where the browser lets a select's list be styled: the open list in the page's colours, not the system's */
@supports (appearance: base-select) {
  select.field, select.field::picker(select) { appearance: base-select; }
  select.field { display: flex; align-items: center; gap: 10px; padding-right: 14px; background-image: none; }
  select.field::picker-icon { color: var(--text-2); }
  select.field::picker(select) {
    margin-top: 6px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--surface-2); color: var(--text); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  }
  select.field option { padding: 9px 12px; border-radius: 7px; font: 400 14px/1.2 var(--mono); }
  select.field option:hover, select.field option:focus-visible { background-color: var(--accent-soft); outline: none; }
  select.field option:checked { background-color: var(--surface-3); font-weight: 600; }
  select.field option::checkmark { color: var(--accent-bright); }
}
/* the choices: radio cards (the base for every choice on the page) */
.hp-radios {
  margin: 0 0 16px; padding: 0; border: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px;
}
.hp-radios legend { margin: 0 0 8px; padding: 0; }
.hp-radio {
  display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 12px 14px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.hp-radio:hover { border-color: var(--accent-line); }
.hp-radio:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.hp-radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.hp-radio input { flex: none; margin: 3px 0 0; accent-color: var(--accent); }
.hp-radio small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.hp-radio.is-off, .hp-radio.is-off:hover { opacity: 0.55; cursor: not-allowed; border-color: var(--line-strong); }
@container (max-width: 600px) {
  .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 400px) {
  .hp-grid, .hp-radios { grid-template-columns: minmax(0, 1fr); }
  .hp-hint:empty { display: none; }        /* one field a row: nothing to line up with */
}
.hp-summary {
  margin: 0 0 10px !important; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 14px;
}

/* ---------- an AI agent: its strategy, its model, who pays, and the Orbio account ---------- */

.hp-radios-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 600px) {
  .hp-radios-3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
.hp-field.hp-field-wide { grid-row: auto; grid-template-rows: none; row-gap: 8px; margin-bottom: 14px; }
.hp-tpl { max-width: 380px; }
.field.hp-textarea {
  height: auto; min-height: 148px; padding: 12px 14px; resize: vertical;
  font: 400 14px/1.55 var(--font); white-space: pre-wrap;
}
.hp-pay { margin-bottom: 10px; }
.hp-inline { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
/* the tokens an agent trades: chosen ones as chips, the pinned ones a click away, any other found by name or address */
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border: 1px solid var(--accent-line);
  border-radius: 999px; background: var(--accent-soft); font-size: 13px; font-weight: 600; }
.hp-chip small { color: var(--text-3); font-weight: 500; }
.hp-chip:not(:has(.hp-chip-x)) { padding-right: 12px; }
.hp-chip-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; }
.hp-chip-x:hover { background: var(--surface-2); color: var(--text); }
.hp-chip-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.hp-tokens .hp-chips { min-height: 30px; }
.field.hp-token-q { font-family: var(--font); font-size: 14.5px; }
.field.hp-token-q::-webkit-search-cancel-button { cursor: pointer; }
.hp-token-note { margin: 0; font-size: 13px; color: var(--text-3); }
.hp-token-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-token-quick-l { font-size: 12.5px; color: var(--text-3); margin-right: 2px; }
.btn.hp-quick { min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.hp-token-hits { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.hp-token-hit { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left;
  font-size: 13.5px; cursor: pointer; overflow-wrap: anywhere; }
.hp-token-hit:hover:not(:disabled), .hp-token-hit:focus-visible { background: var(--accent-soft); outline: none; }
.hp-token-hit:disabled { opacity: 0.55; cursor: not-allowed; }
/* a token's severe risks, to accept before it trades, and Dossier Shield */
.hp-terms { margin: 0 0 6px; }
.hp-risk { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.hp-risk.is-open { border-color: var(--amber); background: var(--amber-soft); }
.hp-risk-h { margin: 0 0 6px; font-size: 13.5px; }
.hp-risk ul { margin: 0 0 8px; padding-left: 18px; }
.hp-risk code { font: 12px var(--mono); color: var(--amber); }
.hp-risk .hp-inline { margin: 0; }
.hp-inline input { flex: none; margin: 3px 0 0; accent-color: var(--accent); }
.hp-orbio {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); scroll-margin-top: calc(var(--sticky-top) + 70px);
}
.hp-orbio:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.hp-orbio.is-on { border-left: 3px solid var(--up); }
.hp-orbio-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 6px; }
.hp-orbio .hp-orbio-status { margin: 0 0 10px; color: var(--text-2); }
.hp-orbio .row { margin-bottom: 8px; }
.hp-orbio p:last-child { margin-bottom: 0; }
.hp-claim { border-color: var(--accent-line); }

/* ---------- Sign in with Orbio's redirect page (web/orbio-callback.html) ---------- */

.oc { max-width: 680px; }
.oc-brand-word { font-family: var(--display); font-size: 13px; letter-spacing: 0.2em; color: var(--text); }
.oc-title { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.oc-status { margin: 0 0 6px !important; font-size: 16px; font-weight: 600; }
.oc-ok { color: var(--up); }
.oc-bad { color: var(--down); }
.oc-ask { color: var(--amber); }
.oc-detail { color: var(--text-2); font-size: 15px; }
.oc-detail:empty { display: none; }
.oc-actions:empty { display: none; }
.oc-actions { margin-top: 14px; }
.oc-about { margin-top: 18px !important; }
.oc-back-row { margin-top: 14px !important; }

/* ---------- a live agent's setup, step by step ---------- */

.hp-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.hp-warn { padding: 10px 12px; border-left: 3px solid var(--amber); border-radius: var(--radius-sm); background: var(--amber-soft); font-size: 14px; }
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.hp-step.now { border-color: var(--accent-line); }
.hp-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 13px var(--mono); color: var(--text-2); background: var(--surface-3); }
.hp-step.done .hp-n { color: var(--up); background: var(--up-soft); }
.hp-step.now .hp-n { color: var(--btn-primary-ink); background: var(--btn-primary-grad); }
.hp-step-main { min-width: 0; }
.hp-step-h { margin: 3px 0 8px; font-size: 15px; font-weight: 600; }
.hp-step-main p { margin: 0 0 10px; }
.hp-details { margin: 0 0 12px; }
.hp-details summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
/* the form's folded defaults (More options, AI options) and the setup's one button with what the wallet asks now */
.hp-more { margin: 2px 0 12px; }
/* the AI agent's model, pace, budget and payer: always in view, grouped under one label */
.hp-ai-opts { margin: 4px 0 16px; padding: 14px 16px 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.hp-ai-opts > .hp-label { display: block; margin-bottom: 10px; }
.hp-more > summary { cursor: pointer; padding: 6px 0; color: var(--accent-bright); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.hp-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.hp-more[open] > summary { margin-bottom: 8px; }
.hp-flow-go { margin-top: var(--sp-4); }
.hp-doing { font-size: 13.5px; color: var(--text-2); }
.hp-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hp-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.hp-mark { font-weight: 700; }
.hp-check.ok .hp-mark { color: var(--up); }
.hp-check.bad .hp-mark { color: var(--down); }
.hp-check.bad { color: var(--down); }
.hp-cd { display: block; font: 11.5px var(--mono); color: var(--text-3); }

/* ---------- Season 1 ---------- */

.hp-league-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.hp-league-text { flex: 1 1 520px; min-width: 0; color: var(--text-2); }

/* ---------- narrower ---------- */

@media (max-width: 640px) {
  .hp { padding-top: var(--sp-6); }
  .hp-head { margin-bottom: var(--sp-2); }
  .hp-lead { font-size: 15px; }
  .hp-notice { font-size: 13px; padding: 8px 12px; }
  .hp[data-tab="watch"] .hp-eyebrow, .hp[data-tab="setup"] .hp-eyebrow { display: none; }
  .hp[data-tab="watch"] h1, .hp[data-tab="setup"] h1 { font-size: 20px; }
  .card { padding: var(--sp-4) 14px; }
  .hp-sub { padding: var(--sp-3); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .row > .btn { flex: 1 1 auto; white-space: normal; text-align: center; padding-block: 8px; }
  .hp-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hp-log { grid-template-columns: 64px minmax(0, 1fr); }
  .hp-log-m { grid-column: 1 / -1; }
  .hp-agent { padding: var(--sp-3); }
  .ag-head { grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--sp-2); }
  .ag-ic { width: 34px; height: 34px; }
  .ag-ic .ic-svg { width: 18px; height: 18px; }
  .ag-pnl-v { font-size: 18px; }
  .ag-actions .btn-row { width: 100%; }
  .ag-actions .btn-row > .btn { flex: 1 1 auto; }
  .ag-end { margin-left: 0; }
  .how-foot { padding: var(--sp-3) var(--sp-4); }
  .how-foot .btn-row { width: 100%; }
  .how-foot .btn-row > .btn { flex: 1 1 auto; }
  .hp-status-chips { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .topbar-home { display: none; }
  /* four links and the theme button on a phone: tighter, so nothing runs off the bar */
  .topbar { gap: 8px; }
  .topbar-right { gap: 2px; }
  .topbar-link { padding: 6px 6px; letter-spacing: 0.04em; }
  .ag-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ic-live::after { animation: none; }
  .hp-opt, .hp-agent { transition: none; }
  .hp-opt:hover { transform: none; }
}

/* ---------- the session's value guard: one checkbox card in the radios' style, its fields when ticked ---------- */

.hp-guard { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.hp-guard legend { margin: 0 0 8px; padding: 0; }
.hp-guard .hp-grid { margin: 0; }
.hp-check {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  transition: border-color .15s, background-color .15s;
}
.hp-check:hover { border-color: var(--accent-line); }
.hp-check:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.hp-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.hp-check input { flex: none; margin: 3px 0 0; accent-color: var(--accent); }
.hp-check small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.hp-check.is-off, .hp-check.is-off:hover { opacity: 0.55; cursor: not-allowed; border-color: var(--line-strong); }