/* On Point Finances — agent-use-only forms.
   Skins the imo-forms intake engine (assets/agent-engine.js, copied verbatim from
   website/imo-forms) in the opfinances world. Loaded AFTER world.css and leans on
   its tokens; every rule here either styles an engine class or un-does a world.css
   default that fights the form layout (notably section{min-height:100svh}). */

/* ---- shared chrome ---- */
.agent-tag{
  font:600 .68rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--panel-line); border-radius:2px;
  padding:.55rem .7rem; white-space:nowrap;
}
.topbar .wm{
  font:600 .78rem/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); margin-left:auto; margin-right:1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.topbar .wm + .agent-tag{margin-left:0}
.agent-page .agent-wrap{width:100%; max-width:46rem; margin-inline:auto}

/* ---- the hub (/agents) ---- */
.agent-cards{display:grid; gap:1rem; grid-template-columns:1fr; margin:1.9rem 0 0}
@media(min-width:720px){ .agent-cards{grid-template-columns:1fr 1fr; gap:1.15rem} }
.agent-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--panel-line); border-top:2px solid var(--accent);
  border-radius:3px; padding:1.35rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .15s ease, transform .15s ease;
}
.agent-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.agent-card .meta{
  display:block; font:600 .68rem/1 var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.55rem;
}
.agent-card h2{font-size:1.25rem; margin:0 0 .4rem}
.agent-card p{font-size:.92rem; margin:0; color:var(--ink-dim)}
.agent-gate{
  background:var(--panel); border:1px solid var(--accent); border-radius:3px;
  padding:.9rem 1.05rem; margin-top:1.9rem;
  font:600 .78rem/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}
.agent-foot{font-size:.85rem; color:var(--ink-faint); margin-top:1.4rem; max-width:none}

/* ---- the form shell (/agent-form) ---- */
.bar{position:fixed; top:64px; left:0; right:0; z-index:5; height:3px;
  background:rgba(127,150,170,.14)}
.barfill{display:block; height:100%; width:0; background:var(--accent); transition:width .35s ease}
body.agentform main{position:relative; z-index:2; padding:7rem var(--pad) 9rem}
.agent-formwrap{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:3px;
  padding:clamp(1.4rem,3.5vw,2.4rem); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}

/* Engine steps render as <section class="step">; world.css makes every section a
   100svh flex chapter, which would explode the form. Reset hard. */
body.agentform section.step{min-height:0; display:none; padding:0; align-items:stretch}
body.agentform section.step.on{display:block}
body.agentform .step h1{font-size:clamp(1.55rem,3.4vw,2.2rem); margin:0 0 .6rem}
body.agentform .step .sub{font-size:.98rem; color:var(--ink-dim); margin:0 0 1.4rem; max-width:none}
body.agentform .step.done{text-align:left}

.q{margin:0 0 1.15rem}
.qlabel{display:block; font:600 .76rem/1.4 var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.45rem}
.qlabel .opt{color:var(--ink-faint); opacity:.7; font-weight:400; letter-spacing:.06em;
  text-transform:none; margin-left:.5rem}
.hint{display:block; font-size:.84rem; color:var(--ink-faint); margin:-.2rem 0 .5rem}

/* Choice chips: the input drives state, the span is the visible control. */
.chips{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; inset:0; width:100%; height:100%; min-height:0;
  opacity:0; margin:0; cursor:pointer}
.chip span{
  display:inline-flex; align-items:center; min-height:48px; padding:.55rem 1rem;
  font-size:.95rem; color:var(--ink); background:rgba(127,150,170,.08);
  border:1px solid var(--panel-line); border-radius:6px;
}
.chip input:checked + span{border-color:var(--accent); background:rgba(217,102,63,.16); color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}

/* Money inputs: a $ prefix inside the field. */
.ifield{position:relative}
.ifield .pre{position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:1rem; pointer-events:none}
.ifield input.money{padding-left:1.9rem}

/* Repeating groups. */
.group{margin:0 0 1.4rem}
.grow{border:1px solid var(--panel-line); border-left:2px solid var(--accent);
  border-radius:3px; padding:1rem 1rem .35rem; margin:0 0 .9rem;
  background:rgba(127,150,170,.05)}
.ghead{display:flex; justify-content:space-between; align-items:center; margin:0 0 .9rem;
  font:600 .72rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent)}
.grm{background:transparent; color:var(--ink-faint); border:0; padding:.4rem .2rem;
  min-height:0; font:500 .74rem/1 var(--font-body); letter-spacing:.02em; text-transform:none;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.grm:hover{color:var(--accent); filter:none}
.gadd{background:transparent; color:var(--accent); border:1px dashed var(--panel-line);
  border-radius:3px; width:100%; min-height:48px; padding:.7rem 1rem;
  font:600 .82rem/1 var(--font-body); letter-spacing:.02em; text-transform:none}
.gadd:hover{border-color:var(--accent); filter:none}
.gsum{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:.2rem 0 .8rem;
  font:500 .8rem/1.6 var(--font-mono)}
.gsum .ok{color:var(--ink-dim)}
.gsum .bad{color:var(--accent)}

.err{min-height:1.4rem; font-size:.92rem; color:var(--accent); margin:.9rem 0 0}

/* ---- bottom navigation ---- */
#nav{position:fixed; left:0; right:0; bottom:0; z-index:6;
  background:var(--panel); border-top:1px solid var(--panel-line);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
#nav .nrow{display:flex; align-items:center; gap:1rem; max-width:46rem;
  margin-inline:auto; padding:.8rem var(--pad)}
#nav .count{font:500 .74rem/1.5 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-right:auto}
#nav .saved{font-size:.78rem; color:var(--ink-faint)}
#back{background:transparent; color:var(--ink-dim); border:1px solid var(--panel-line);
  min-height:48px; padding:.8rem 1.1rem}
#back:hover{color:var(--ink); filter:none}
#next{min-height:48px}

@media(max-width:560px){
  .topbar .wm{display:none}
  #nav .saved{display:none}
  .agent-formwrap{padding:1.15rem}
}