/* launch-home.css: Go mode launch styles (2026-10-09), loaded after styles.css. Home's hero (account.html #hm-hero,
   account-page.js heroPaint): who, the lead agent's tree, what the agents can borrow, their record, one main button
   and the quieter doors; then one strip of figures, Home's empty states, the leaf for each repayment
   (account-leaf.js), and the Launchpad (account-launchpad.js #hm-launch). Both themes through the tokens; motion only
   with prefers-reduced-motion: no-preference. */

/* ---- the head: who on the left, the quieter doors on the right ---- */
.acct .ac-sum .hm-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "me quiet" "add add" "hero hero"; column-gap: 24px; align-items: center; }
.acct .ac-sum .hm-me { grid-area: me; display: block; padding: 18px 0 0; border-bottom: 0; }
.acct .ac-sum .hm-me .eyebrow { margin: 0 0 4px; font-size: 14px; }
.acct .ac-sum .hm-me h2 { font-size: clamp(28px, 3vw, 36px); }
.acct .ac-sum .hm-me .ac-addr { margin-top: 8px; }
.acct .ac-sum .ac-add { grid-area: add; }
.hm-quiet { grid-area: quiet; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 18px; }
.hm-q { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 0; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); font: 500 14px/1 var(--sans); white-space: nowrap; text-decoration: none; }
.hm-q:hover { color: var(--ink); border-color: var(--ink); background: var(--hover); }
.hm-q:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hm-q-i { display: inline-grid; color: var(--green); }
.hm-q-i:empty { display: none; }

/* ---- the hero: the tree on the left, the figure, the record and the main button beside it ---- */
.acct .ac-sum .hm-hero { grid-area: hero; display: grid; grid-template-columns: 176px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "pic ." "pic fig" "pic rec" "pic act" "pic ."; column-gap: 32px; margin-top: 20px; padding: 24px 0; border-top: 1px solid var(--rule-2); }
.hm-pic { grid-area: pic; display: grid; gap: 10px; justify-items: center; align-self: center; min-width: 0; }
.hm-tile { position: relative; width: 100%; aspect-ratio: 1; border-radius: 0; overflow: hidden; border: 0; background: radial-gradient(80% 80% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); /* the tree's plate: the night of a specimen case, its brass edge (as the board's) */ }
.hm-tile > .ac-tree { position: absolute; inset: 0; border: 0; border-radius: 0; background: none; }
.hm-tile #ac-tree { display: none; }
.hm-tile.px #ac-tree, html[data-hide-trees] .hm-tile #ac-tree { position: absolute; inset: 0; display: grid; place-items: center; }
.hm-tile #ac-tree .me-tree { width: 56%; height: 56%; }
.hm-tile #ac-tree .me-plate { fill: transparent; }
.hm-who { max-width: 100%; font: 500 13px/1.2 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.hm-who:hover { color: var(--ink); }
.hm-who:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
html[data-hide-trees] .hm-who { display: none; }
.acct .ac-sum .hm-fig { grid-area: fig; padding: 0; min-width: 0; }
.acct .ac-sum .hm-fig .label { margin-bottom: 8px; }
.acct .ac-sum .hm-fig b { display: block; font: 500 60px/1 var(--serif); letter-spacing: -.01em; color: var(--green); }
.acct .ac-sum .hm-hero.none .hm-fig b { color: var(--muted); }
/* the record: its items in one line, each wrapped whole, and a line never starts with a dot: each item's dot sits in
   the 18px the list is moved left by, clipped there when the item starts a line */
.hm-record { grid-area: rec; display: flex; align-items: flex-start; margin: 14px 0 0; font: 500 14.5px/1.45 var(--sans); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.hm-rec-ico { display: inline-grid; flex: none; margin: 3px 8px 0 0; color: var(--green); }
.hm-rec-w { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.hm-rec-l { display: flex; flex-wrap: wrap; row-gap: 2px; margin-left: -18px; }
.hm-rec-i { white-space: nowrap; }
.hm-rec-i::before { content: "·"; display: inline-block; width: 18px; text-align: center; color: var(--faint); }
.hm-acts { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.acct .ac-sum .hm-main { min-width: 196px; gap: .3em; padding: 15px 28px; font-size: 16px; }
.hm-main-sub { font: 400 13.5px/1.35 var(--sans); color: var(--muted); }
.hm-main-sub.r { color: var(--red); }
/* placeholders until the first read: never a figure */
.hm-sk-line { height: 14px; width: min(100%, 300px); min-width: 0; border-radius: 0; }
.hm-sk-btn { height: 48px; width: 196px; min-width: 0; border-radius: 0; border: 1px dashed var(--brass-line); }

/* ---- one strip of figures: dividers, no tiles; each (i) shows on hover or focus where there is a pointer ---- */
.acct .ac-sum .hm-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 6px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); overflow: hidden; }
.acct .ac-sum .hm-strip > div, .acct .ac-sum .hm-strip > div + div { padding: 14px 18px 15px; border: 0; border-radius: 0; background: none; gap: 6px; }
.acct .ac-sum .hm-strip > div + div { border-left: 1px solid var(--rule-2); }
@media (hover: hover) {
  .acct .ac-sum .hm-strip .hint-btn, .acct .ac-sum .hm-fig .hint-btn { opacity: 0; }
  .acct .ac-sum .hm-strip > div:hover .hint-btn, .acct .ac-sum .hm-fig:hover .hint-btn, .acct .ac-sum .hint-btn:focus-visible, .acct .ac-sum .hint-btn[aria-expanded="true"] { opacity: 1; }
}

/* Home's status lines take no room while they say nothing (kept in the page: they are live regions) */
.acct .ac-sum > .wstat:empty { padding: 0; min-height: 0; }

/* ---- Home's empty states: an icon, a title, one line ---- */
.hm-state { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 22px 16px; text-align: center; list-style: none; }
.hm-state-i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 0; background: none; border: 1px dashed var(--brass-line); color: var(--muted); }
.hm-state b { font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.hm-state-l { font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.hm-stocks.na .hm-list { flex: 1; display: grid; }

/* ---- phones: the hero first (the tree beside the figure), the main button the row's width, then the doors ---- */
@media (max-width: 700px) {
  .acct .ac-sum .hm-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "me" "hero" "quiet" "add"; }
  .acct .ac-sum .hm-me { padding-top: 14px; }
  .acct .ac-sum .hm-hero { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "pic fig" "rec rec" "act act"; column-gap: 18px; margin-top: 16px; padding: 18px 0 0; }
  .hm-pic { gap: 8px; }
  .hm-tile { border-radius: 0; }
  .hm-who { font-size: 12px; }
  .acct .ac-sum .hm-fig { align-self: center; }
  .acct .ac-sum .hm-fig b { font-size: 44px; white-space: nowrap; }
  .acct .ac-sum .hm-fig b[data-len="l"] { font-size: 36px; }
  .acct .ac-sum .hm-fig b[data-len="xl"] { font-size: 29px; }
  .hm-record { margin-top: 16px; font-size: 14px; }
  .hm-acts { margin-top: 16px; }
  .acct .ac-sum .hm-main, .hm-sk-btn { flex: 1 1 100%; width: auto; }
  .hm-main-sub { flex-basis: 100%; text-align: center; }
  .hm-quiet { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; }
  .hm-q { flex-direction: column; justify-content: center; gap: 7px; padding: 12px 6px; border-radius: 0; font-size: 13px; white-space: normal; text-align: center; line-height: 1.15; }
  .acct .ac-sum .hm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .acct .ac-sum .hm-strip > div + div { border-left: 0; }
  .acct .ac-sum .hm-strip > div:nth-child(even) { border-left: 1px solid var(--card-edge); }
  .acct .ac-sum .hm-strip > div:nth-child(n+3) { border-top: 1px solid var(--card-edge); }
  .acct .ac-sum .hm-strip > div:last-child:nth-child(odd) { border-left: 0; }
}

/* ---- the leaf for each repayment (account-leaf.js): a few pixel leaves rise from the card and fade ---- */
.lf-burst { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.lf-leaf { position: absolute; left: -8px; top: -8px; opacity: 0; }
.lf-leaf svg { display: block; filter: drop-shadow(0 1px 1px rgba(40, 30, 16, .45)); } /* seen over a green button too */
@media (prefers-reduced-motion: no-preference) {
  .acct .ac-sum .hint-btn { transition: opacity .15s var(--ease), color .15s; }
  .hm-q { transition: color .15s var(--ease), border-color .15s var(--ease); }
  .lf-leaf { animation: lf-rise 1.7s cubic-bezier(.2, .7, .3, 1) var(--d, 0ms) both; }
  @keyframes lf-rise {
    0% { opacity: 0; transform: translate(0, 8px) rotate(0deg) scale(calc(var(--s, 1) * .6)); }
    14% { opacity: 1; }
    50% { transform: translate(calc(var(--dx) * .45 + 6px), calc(var(--dy) * .55)) rotate(calc(var(--rot) * .5)) scale(var(--s, 1)); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s, 1)); }
  }
}
/* Home's Recent activity when History's read failed: the states' error look (launch-states.css .pst-error) */
.hm-state.err .hm-state-i { background: none; border: 1px solid var(--red); color: var(--red); }

/* ---- the Launchpad (account-launchpad.js #hm-launch, before Next steps): its head (the mark, the name, how many steps
   are done, Hide), a slim bar of eight, then the steps in a rail beside the current one, open on a card of its own.
   A done step keeps its name and a check; the current one is lit; the rest wait in the faint tone. On a phone the
   current step comes first, the full width, and the rail folds into two columns under it ---- */
.hm-card.lp { position: relative; margin: 14px 0 0; padding: 20px 22px 22px; gap: 16px; overflow: hidden;
  background: var(--grain), var(--card); }
.hm-card.lp[hidden] { display: none; }
.hm-card.lp > .lp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; }
.lp-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 0; background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); color: var(--case-mint); }
.lp-ttl { min-width: 0; display: grid; gap: 3px; }
.hm-card.lp > .lp-head h3 { margin: 0; font: 500 24px/1.1 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.lp-sub { margin: 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.lp-count { padding: 7px 11px; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--rule); font: 500 12.5px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-card.lp .lp-hide { font-size: 13px; white-space: nowrap; }
/* the bar: eight short segments, the done ones green and the current one half lit */
.lp-bar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; height: 5px; }
.lp-bar > i { display: block; border-radius: 0; background: var(--rule-2); }
.lp-bar > i.on { background: var(--green); }
.lp-bar > i.now { background: linear-gradient(var(--green) 0 0) 0 0 / 45% 100% no-repeat, color-mix(in srgb, var(--green) 22%, transparent); }
.lp-body { display: grid; grid-template-columns: minmax(196px, 248px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
/* the rail: a node per step on a thin line, the line green up to the current step */
.lp-rail { list-style: none; margin: 0; padding: 2px 0 0; display: grid; align-content: start; gap: 4px; }
.lp-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 34px; padding: 5px 10px 5px 6px; border-radius: 0; font: 500 14px/1.25 var(--sans); color: var(--muted); }
.lp-step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 29px; height: 14px; width: 2px; border-radius: 0; background: var(--rule-2); }
.lp-step.done:not(:last-child)::after { background: color-mix(in srgb, var(--green) 55%, var(--rule-2)); }
.lp-node { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); font: 400 11.5px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.lp-step.done { color: var(--ink-2); }
.lp-step.done .lp-node { background: var(--green); box-shadow: none; color: var(--paper); }
.lp-step.now { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), inset 2px 0 0 var(--green); color: var(--ink); font-weight: 600; }
.lp-step.now .lp-node { box-shadow: inset 0 0 0 2px var(--green); color: var(--green); }
/* a step passed over (Connect your AI or Pay for an API left unmarked once a later step is done): a dashed ring, faint */
.lp-step.skip { color: var(--faint); }
.lp-step.skip .lp-node { box-shadow: none; outline: 1px dashed var(--field-edge); outline-offset: -1px; background: transparent; }
.lp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.lp-name { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a.lp-name:hover { color: var(--green); text-decoration-color: currentColor; }
a.lp-name:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
/* a step passed over: its name a button that opens it (to mark it), looking like the record's link */
button.lp-name { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dashed; text-decoration-color: var(--rule); text-underline-offset: 3px; }
button.lp-name:hover { color: var(--green); text-decoration-color: currentColor; }
button.lp-name:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.lp-step.skip.now { color: var(--ink); }
/* the current step: its own card as tall as the rail, the step's icon at the top right, what comes next at its foot */
.lp-stage { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px 18px; border-radius: 0; background: var(--grain), var(--card); border: 1px solid var(--rule-2); box-shadow: none; }
.lp-stage > * { max-width: 100%; }
.lp-ico { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 0; background: radial-gradient(90% 60% at 50% 0%, var(--case-lamp), transparent 70%), radial-gradient(70% 70% at 50% 45%, var(--case-1), var(--case-0)); box-shadow: inset 0 0 0 1px var(--case-edge); color: var(--case-mint); }
.lp-at { margin: 0; padding-right: 60px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.lp-h { margin: 2px 0 0; padding-right: 60px; font: 500 32px/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.lp-h:focus { outline: none; }
.lp-h:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 0; }
.lp-line { margin: 4px 0 0; max-width: 40em; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.lp-acts { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.acct .lp-acts .btn.primary { min-width: 168px; }
.lp-acts .lp-tap { margin-left: auto; font-size: 13.5px; white-space: nowrap; }
.lp-acts .lp-back { font-size: 13.5px; white-space: nowrap; color: var(--muted); }
/* Repay before its loan counts as week-long: no button, the agent's card as a plain link */
.lp-acts .lp-card { font-size: 14px; }
.lp-more { margin: 10px 0 0; max-width: 46em; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.lp-url { padding: 8px 12px; border-radius: 0; background: var(--field); box-shadow: inset 0 0 0 1px var(--rule); font: 400 13px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.lp-then { align-self: stretch; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); font: 500 13px/1.3 var(--sans); color: var(--muted); }
.lp-acts:not(:last-child), .lp-more { margin-bottom: 10px; } /* room above the foot when the card is no taller than its words */
.lp-acts + .lp-more { margin-top: 2px; }
/* all done: the record's tree on the green, for this visit only */
.lp-fin .lp-ico { background: var(--green); color: var(--paper); }
.lc .lp-ico.hint-hv { cursor: help; }
.lc .lp-ico.hint-hv:hover, .lc .lp-ico.hint-hv[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 45%, transparent); }
.lp-fin { background: var(--grain), var(--card); box-shadow: inset 2px 0 0 var(--green); }

@media (max-width: 760px) {
  .hm-card.lp { padding: 16px 16px 18px; gap: 14px; }
  .hm-card.lp > .lp-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark ttl hide" "mark ttl count"; row-gap: 6px; column-gap: 12px; }
  .lp-mark { grid-area: mark; align-self: start; width: 34px; height: 34px; border-radius: 0; }
  .lp-ttl { grid-area: ttl; }
  .hm-card.lp > .lp-head h3 { font-size: 21px; }
  .lp-sub { font-size: 13px; }
  .lp-count { grid-area: count; justify-self: end; padding: 5px 9px; font-size: 12.5px; }
  .hm-card.lp .lp-hide { grid-area: hide; justify-self: end; }
  .lp-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-stage { order: -1; padding: 18px 16px 16px; border-radius: 0; }
  .lp-ico { top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 0; }
  .lp-at, .lp-h { padding-right: 52px; }
  .lp-h { font-size: 27px; }
  .lp-line { font-size: 14.5px; }
  .acct .lp-acts .btn { flex: 1 1 100%; min-width: 0; } /* each button the card's width, one under the other */
  .lp-acts .lp-tap { margin: 2px auto 0; }
  .lp-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 10px; }
  .lp-step { gap: 9px; min-height: 30px; padding: 4px 4px 4px 2px; font-size: 13px; }
  .lp-name { white-space: normal; overflow: visible; line-height: 1.2; }
  .lp-step:not(:last-child)::after { display: none; }
  .lp-step.now { box-shadow: none; background: none; }
  .lp-node { width: 22px; height: 22px; font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-bar > i { transition: background-color .45s var(--ease); }
  .lp-stage.lp-in { animation: lp-in .36s var(--ease) both; }
  @keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  a.lp-name, button.lp-name { transition: color .15s var(--ease); }
}

/* a default on the account (account-page.js paintBlocked): one plain block on Home, what happened and what still works */
.hm-blocked { display: grid; gap: 4px; margin: 14px 0 0; padding: 14px 18px; border-radius: 0; background: color-mix(in srgb, var(--red) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--red) 32%, transparent); }
.hm-blocked[hidden] { display: none; }
.hm-blocked b { font: 600 15px/1.35 var(--sans); color: var(--red); }
.hm-blocked p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- the cockpit (account-launchpad.js with the site's config `cockpit`): the Launchpad as Home's one card, five steps,
   Borrow and Repay done inside it. What it adds to the card above: the line under each step's name, the borrow form
   (the amount, the term as one segmented control, the agents to borrow for) and its review, the repay countdown and the
   loan's timeline, the week-long meter, and on a phone the dock that keeps the open step's button in reach. With it
   Home's hero has no main button (html.lp-cockpit, account-page.js). Both themes through the tokens ---- */
html.lp-cockpit .acct .ac-sum .hm-acts { display: none; }
.lp-bar.lc-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-card.lp.lc .lp-body { grid-template-columns: minmax(208px, 252px) minmax(0, 1fr); }
/* the rail: each step's name and, under it, where the account stands on it */
.lc .lp-step { align-items: start; min-height: 44px; padding: 8px 10px 8px 6px; }
.lc .lp-step:not(:last-child)::after { top: 33px; height: calc(100% - 22px); }
.lc-st { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.lc-meta { font: 400 12.5px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-step.now .lc-meta { color: var(--ink-2); }

/* the open step */
.lc-stage { gap: 8px; }
.lc-stage > form, .lc-stage > .lc-tl, .lc-stage > .lc-meter, .lc-stage > .lc-add, .lc-stage > .lc-due, .lc-stage > .lc-ai, .lc-stage > .lc-warn, .lc-stage > .wstat { align-self: stretch; }
.lc-stage .lp-at { display: flex; flex-wrap: wrap; gap: 0 2px; align-items: baseline; }
.lc-who { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.lc-agent { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.lc-agent:hover { color: var(--green); }
.lc-agent:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 0; }
.lc-stage .wstat:empty { display: none; }
.lc-stage > .wstat { margin: 4px 0 0; }
.lc-stage .lp-more { margin: 0; }
.lc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lc-stage .lc-add { margin: 6px 0 0; }
.lc-addr { padding: 8px 10px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); font: 400 13px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; user-select: all; }

/* borrow: the agents to borrow for, the amount and the term side by side, the review under them */
.lc-borrow { display: grid; gap: 14px; margin-top: 8px; }
.lc-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lc-for[hidden] { display: none; }
.lc-for .label { margin: 0 4px 0 0; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; align-items: start; }
.lc-field { display: grid; gap: 7px; min-width: 0; }
.lc-field > .label { margin: 0; }
.lc-amt { position: relative; }
.acct .lc-amt input:not([type="radio"]):not([type="checkbox"]) { width: 100%; box-sizing: border-box; padding-right: 64px; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lc-unit { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font: 600 13px/1 var(--sans); color: var(--muted); pointer-events: none; }
.lc-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 0; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); font: 500 13px/1.1 var(--sans); cursor: pointer; }
.lc-chip[hidden] { display: none; }
.lc-chip:hover { border-color: var(--ink); color: var(--ink); }
.lc-chip.on { border-color: var(--ink); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lc-chip-v { color: var(--muted); font-variant-numeric: tabular-nums; }
.lc-chip.on .lc-chip-v { color: var(--ink-2); }
.lc-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; gap: 0; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.lc-seg button { appearance: none; border: 0; margin: 0; padding: 11px 16px; border-radius: 0; background: none; font: 500 14.5px/1 var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.lc-seg button:hover { color: var(--ink); }
.lc-seg button.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.lc-seg button:focus-visible, .lc-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lc-review { display: grid; gap: 10px; }
.lc-review:empty { display: none; }
.lc-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lc-dl.lc-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc-dl > div { display: grid; align-content: start; gap: 4px; padding: 12px 14px; min-width: 0; }
.lc-dl > div + div { border-left: 1px solid var(--rule-2); }
.lc-dl dt { font: 500 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.lc-dl dd { margin: 0; display: grid; gap: 3px; }
.lc-dl .lc-v { font: 600 17px/1.15 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-dl dd .sub { font: 400 12.5px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.lc-warn, .lc-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 0; font: 500 13.5px/1.45 var(--sans); }
.lc-warn { background: var(--card); box-shadow: inset 2px 0 0 var(--brass); color: var(--brass-ink); }
.lc-warn.r { background: var(--card); box-shadow: inset 2px 0 0 var(--red); color: var(--red); }
.lc-ok { background: var(--card); box-shadow: inset 2px 0 0 var(--green); color: var(--ink-2); }
.lc-ok .px-ico { color: var(--green); }
.lc-warn .px-ico, .lc-ok .px-ico { flex: none; margin-top: 3px; }
.lc-fine { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.lc-borrow .lp-acts { margin-top: 0; }

/* repay: the countdown and what is owed, then the loan's timeline (borrowed, day 7, due, the grace after it) with now */
.lc-due { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 8px; }
.lc-count { display: grid; gap: 2px; justify-items: start; padding: 12px 18px 13px; border: 0; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), inset 2px 0 0 var(--green); color: inherit; font: inherit; text-align: left; cursor: help; }
.lc-count:hover, .lc-count[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink), inset 2px 0 0 var(--green); }
.lc-count.r:hover, .lc-count.r[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink), inset 2px 0 0 var(--red); }
.lc-count:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lc-count .label { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.lc-count b { font: 500 40px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.lc-count .sub { font: 400 13px/1.3 var(--sans); color: var(--ink-2); }
.lc-count.r { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2), inset 2px 0 0 var(--red); }
.lc-count.r .label, .lc-count.r b { color: var(--red); }
.lc-loan { flex: 1 1 280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lc-loan > div { display: grid; align-content: center; gap: 4px; padding: 12px 14px; min-width: 0; }
.lc-loan > div + div { border-left: 1px solid var(--rule-2); }
.lc-loan dt { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.lc-loan dd { margin: 0; font: 600 18px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
/* the timeline: each part a hint trigger (account-page.js's hints), a taller hit area than it looks; the part pointed at
   or focused stands out, and the labels under it are dotted like any term with a hint */
.lc-tl { position: relative; margin: 30px 6px 4px; }
.lc-tl-track { position: relative; height: 8px; border-radius: 0; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lc-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; background: color-mix(in srgb, var(--green) 45%, transparent); pointer-events: none; }
.lc-tl-seg { position: absolute; top: -10px; bottom: -10px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: help; -webkit-tap-highlight-color: transparent; }
.lc-tl-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border-radius: 0; }
.lc-tl-early::before { top: 10px; bottom: 10px; border-radius: 0; }
.lc-tl-early:hover::before, .lc-tl-early[aria-expanded="true"]::before { background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.lc-tl-win::before { box-shadow: inset 0 0 0 1.5px var(--green); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--green) 14%, transparent) 5px 9px); }
.lc-tl-win:hover::before, .lc-tl-win[aria-expanded="true"]::before { box-shadow: inset 0 0 0 2px var(--green); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--green) 26%, transparent) 5px 9px); }
.lc-tl-grace::before { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 45%, transparent); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--red) 14%, transparent) 5px 9px); }
.lc-tl-grace:hover::before, .lc-tl-grace[aria-expanded="true"]::before { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--red) 70%, transparent); background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--red) 26%, transparent) 5px 9px); }
.lc-tl-seg:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; z-index: 1; }
.lc-tl-now { position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: help; -webkit-tap-highlight-color: transparent; }
.lc-tl-now::before { content: ""; position: absolute; inset: 8px; border-radius: 0; background: var(--green); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--green); }
.lc-tl-now:hover::before, .lc-tl-now[aria-expanded="true"]::before { box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--ink); }
.lc-tl-now:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lc-tl-now span { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; padding: 3px 7px; border-radius: 0; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--mono); white-space: nowrap; }
.lc-tl-now.l span { left: 6px; translate: 0 0; }
.lc-tl-now.r span { left: auto; right: 6px; translate: 0 0; }
.lc-tl.late .lc-tl-now::before { background: var(--red); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--red); }
.lc-tl-marks { position: relative; height: 46px; }
.lc-tl-m { position: absolute; top: 8px; translate: -50% 0; display: grid; justify-items: center; gap: 1px; margin: 0; padding: 4px 4px 3px; border: 0; border-radius: 0; background: none; font: 400 12px/1.25 var(--sans); color: var(--muted); white-space: nowrap; cursor: help; -webkit-tap-highlight-color: transparent; }
.lc-tl-m.l { translate: -4px 0; justify-items: start; }
.lc-tl-m.r { translate: calc(-100% + 4px) 0; justify-items: end; }
.lc-tl-m b { font: 600 12px/1.25 var(--sans); color: var(--ink-2); text-decoration: underline dotted color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 3px; }
.lc-tl-m:hover b, .lc-tl-m[aria-expanded="true"] b { color: var(--green); text-decoration-color: var(--green); }
.lc-tl-m:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
/* a mark that would run into the one before it (account-launchpad.js lcFitMarks): a second row, at the same place */
.lc-tl-marks.two { height: 84px; }
.lc-tl-m.lo { top: 46px; }

/* the week-long loans toward the treasury's bar, and Connect your AI under a step */
.lc-meter { display: grid; gap: 8px; margin-top: 8px; padding: 14px 16px; border-radius: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lc-meter-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
.lc-meter-t b { font: 600 15px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-meter .sub { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.lc-bar3 { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 5px; height: 6px; }
.lc-bar3 > i { display: block; border-radius: 0; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lc-bar3 > i.on { background: var(--green); }
.lc-ai { display: grid; gap: 10px; margin-top: 6px; padding: 14px 16px; border-radius: 0; background: var(--grain), var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lc-ai .sub { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); }
.lc-ai .lp-more { margin: 0; }

@media (max-width: 1100px) {
  .lc-dl, .lc-dl.lc-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-dl > div:nth-child(3) { border-left: 0; }
  .lc-dl > div:nth-child(n+3) { border-top: 1px solid var(--card-edge); }
}
@media (max-width: 760px) {
  .hm-card.lp.lc { padding: 14px 14px 16px; }
  .hm-card.lp.lc .lp-body { grid-template-columns: minmax(0, 1fr); }
  /* the open step flat inside the card (no card in a card), the rail in short columns under it */
  .lc .lc-stage { padding: 2px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .lc .lp-ico { top: 0; right: 0; width: 36px; height: 36px; border-radius: 0; }
  .lc .lp-h { font-size: 26px; }
  .lc .lp-rail { grid-template-rows: repeat(3, auto); padding-top: 12px; border-top: 1px solid var(--rule-2); }
  .lc .lp-step { min-height: 30px; padding: 4px 4px 4px 2px; align-items: center; }
  .lc-meta { display: none; }
  .lc-st { padding-top: 0; }
  .lc-fields { grid-template-columns: minmax(0, 1fr); }
  .lc-seg { display: grid; }
  .lc-seg button { padding: 11px 6px; }
  /* the review as a list: what, then its figure, the detail under it */
  .lc-dl, .lc-dl.lc-n3 { grid-template-columns: minmax(0, 1fr); }
  .lc-dl > div { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; padding: 9px 12px; }
  .lc-dl > div + div, .lc-dl > div:nth-child(3), .lc-dl > div:nth-child(n+3) { border-left: 0; border-top: 1px solid var(--card-edge); }
  .lc-dl dt { grid-column: 1; grid-row: 1; align-self: center; font-size: 13.5px; color: var(--ink-2); }
  .lc-dl dd { display: contents; }
  .lc-dl .lc-v { grid-column: 2; grid-row: 1; font-size: 15.5px; text-align: right; }
  .lc-dl dd .sub { grid-column: 1 / -1; grid-row: 2; }
  .lc-due { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lc-count b { font-size: 34px; }
  .lc-loan { flex-basis: auto; }
  .lc-tl { margin: 30px 4px 2px; }
}
/* a finger: the timeline's parts, today and the marks are 44 px targets; what is drawn stays where it was */
@media (pointer: coarse) {
  .lc-tl-seg { top: -18px; bottom: -18px; }
  .lc-tl-seg::before { top: 15px; bottom: 15px; }
  .lc-tl-early::before { top: 18px; bottom: 18px; }
  .lc-tl-now { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .lc-tl-now::before { inset: 14px; }
  .lc-tl-now span { bottom: 36px; }
  .lc-tl-now.l span { left: 14px; }
  .lc-tl-now.r span { right: 14px; }
  .lc-tl-marks { height: 56px; }
  .lc-tl-marks.two { height: 104px; }
  .lc-tl-m { top: 10px; min-height: 44px; align-content: start; }
  .lc-tl-m.lo { top: 58px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lc-seg button, .lc-chip { transition: background-color .15s, color .15s, box-shadow .15s; }
  .lc-tl-seg::before, .lc-tl-now::before, .lc .lp-ico.hint-hv, .lc-count { transition: box-shadow .15s, background-color .15s; }
}

/* ---- a phone: the open step's main button pinned above the tab bar while it is out of view (account-launchpad.js
   lcDock); a copy of the step's own button, so hidden from screen readers ---- */
.lc-dock { display: none; }
@media (max-width: 640px) {
  .lc-dock:not([hidden]) { position: fixed; left: 0; right: 0; bottom: calc(var(--ga-bar-h, 62px) + env(safe-area-inset-bottom)); z-index: 28; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--paper) 97%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid var(--card-edge); box-shadow: 0 -10px 24px -18px var(--shade); }
  .lc-dock-t { min-width: 0; font: 500 13.5px/1.3 var(--sans); color: var(--ink-2); }
  /* the step's own button's look (the dock sits outside the page's .acct) */
  .lc-dock .btn.primary { min-width: 132px; padding: 13px 20px; border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 15px/1 var(--sans); box-shadow: inset 0 -4px 0 var(--ink), inset 0 -5px 0 var(--brass); }
  :root[data-theme="dark"] .lc-dock .btn.primary { color: var(--paper); }
  .lc-dock .btn.primary:disabled { background: var(--paper); border: 1px dashed var(--field-edge); color: var(--muted); box-shadow: none; }
  html body.goapp.lc-docked > main { padding-bottom: calc(var(--ga-bar-h, 62px) + env(safe-area-inset-bottom) + 96px); }
}
body.ga-drawer .lc-dock { display: none !important; }