/*
 * Command 2.0 — the delta over finance-command.css.
 *
 * ⛔ THIS IS NOT A FIFTH LAYOUT AND NOT A FORK. A browser on this look carries
 * BOTH `finance-command` and `finance-command2` on <body>, so the whole of
 * finance-command.css applies underneath and this file only says what the
 * 2026-09-13 design sweep changed. Anything that is true of Command is still
 * true here; do not restate it.
 *
 * ⛔ EVERY RULE IN HERE IS SCOPED TO body.finance-command2. A rule that is not
 * changes Classic and Command too, which is the one thing this look exists to
 * avoid — the whole point is that the three can be compared from the picker.
 *
 * Behaviour changes do NOT live here. They sit behind isUI2() in index.html.
 * This file is for what a stylesheet can do on its own.
 */

/* ── Nothing on screen that the agent cannot act on ────────────────────────
   The build stamp names a feature toggle and was two months stale on the day
   it was measured; the console line one statement above it is where a build
   number belongs. Command already hides this element — 2.0 keeps that and adds
   the raw lender payload, which is on the never-show list. */
body.finance-command2 .command-build-stamp,
body.finance-command2 details.lc-raw {
  display: none !important;
}

/* ── The unsaved contract figure ──────────────────────────────────────────
   The only mark separating a typed figure from a saved one was a 1px #f59e0b
   outline: 2.15:1 against the white box it surrounds, and invisible on a
   washed-out laptop panel at the end of a shift. #b45309 is already a token on
   the page and is 5.02:1, so the ring alone now clears the 3:1 a control's
   boundary needs. The word "Not saved" arrives separately, from isUI2(). */
body.finance-command2 .wiz-edit-box.is-edited {
  border-color: #b45309 !important;
  border-width: 2px !important;
}

/* The stale figures beside an open draft. While a value is being typed, the
   monthly it belongs to is no longer true — it must stop looking like every
   confirmed number on the card. The class is put on by isUI2() code. */
body.finance-command2 .wiz-kv-v.is-stale,
body.finance-command2 .wiz-stale {
  color: var(--muted, #5c6f7e) !important;
  opacity: .62;
}

/* ── Save and discard ─────────────────────────────────────────────────────
   22px boxes, 6px of ink, 6px apart, no border until the mouse is on them —
   and Command runs the page at zoom .9, so on screen they were under 20px,
   below the 24px minimum. One pixel of aim decided between saving a contract
   amount and deleting it, with no undo. */
body.finance-command2 .wiz-edit,
body.finance-command2 .wiz-edit-x,
body.finance-command2 .wiz-edit-ok {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--border, #cdd6de) !important;
  border-radius: 6px !important;
  background: #fff !important;
}
body.finance-command2 .wiz-edit svg,
body.finance-command2 .wiz-edit-x svg,
body.finance-command2 .wiz-edit-ok svg {
  width: 16px !important;
  height: 16px !important;
}
body.finance-command2 .wiz-edit-ok {
  border-color: #0d8ab0 !important;
}
body.finance-command2 .wiz-edit:hover,
body.finance-command2 .wiz-edit-ok:hover {
  background: #eef7fb !important;
}
body.finance-command2 .wiz-edit-x:hover {
  background: #fbeeea !important;
  border-color: #9e2f1c !important;
}
/* Six pixels put save and discard within one slip of each other. */
body.finance-command2 .wiz-contract .wiz-kv-v {
  gap: 10px !important;
}
/* The editor row reserves its own height, so opening the term or the date no
   longer reflows the card under the agent's eye. Scoped to the contract card:
   that is the only place an editor opens, and every other panel keeps its own
   spacing. */
body.finance-command2 .wiz-contract .wiz-kv-v {
  min-height: 34px;
  align-items: center;
}

/* ── A control you are being stopped at has to stay readable ──────────────
   button.primary:disabled was opacity:.5 — white text on #8ddef4, 1.51:1. The
   words were barely there, so the agent hunted for what had stopped them. */
body.finance-command2 button.primary:disabled,
body.finance-command2 button.primary[disabled] {
  opacity: 1 !important;
  background: #e8edf2 !important;
  color: #5c6f7e !important;
  border: 1px solid #cdd6de !important;
  cursor: not-allowed;
}

/* ── The help bubble must not cover what it is about ──────────────────────
   The document-type popover opened down and to the RIGHT, landing across the
   pay-stub row and the start of the drop zone — the very link the agent was
   moving towards. Hang it below its own row instead, and make the ring itself
   big enough to see (#9ca3af was 2.54:1). */
body.finance-command2 .wiz-doc-info {
  width: 20px !important;
  height: 20px !important;
  border-color: #6b7280 !important;
  color: #6b7280 !important;
}
body.finance-command2 .wiz-doc-info-pop {
  left: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 40;
}

/* ── The wall must not be readable through the Finalize card ──────────────
   At 50% the lender rows behind the card stayed perfectly legible about 150px
   below its edge — including a different monthly for the same term. The eye
   lands on the wall instead of the card and the client hears the wrong figure.
   Darker, with a slight blur, turns it into texture rather than numbers. */
body.finance-command2 #wizard-modal,
body.finance-command2 .modal-backdrop {
  background: rgba(18, 28, 38, .74) !important;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}

/* ── The stop that must not look like the script ──────────────────────────
   "Don't read these terms yet" sat in the identical grey box, identical type
   and identical position as the text the agent reads aloud all day. It needs
   its own look or the reading starts before the heading registers. */
body.finance-command2 .wiz-script-stop {
  background: #fdf6ec !important;
  border: 1px solid #e7c98a !important;
  border-left: 4px solid #b45309 !important;
}
body.finance-command2 .wiz-script-stop > div > b,
body.finance-command2 .wiz-script-stop b:first-child {
  color: #8a4a08 !important;
}

/* ── The text that is performed out loud ──────────────────────────────────
   Command runs the page at zoom .9, so a 13.5px script body reads at about
   12px and its 11px heading at under 10px — the one thing on the screen that
   is spoken was the smallest thing on it. Raise the floor rather than unwind
   the zoom; the zoom is what buys the second column. */
body.finance-command2 .wiz-script,
body.finance-command2 .wiz-script p,
body.finance-command2 .wiz-script div {
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}
body.finance-command2 .wiz-script > div > b {
  font-size: 12.5px !important;
  letter-spacing: .06em;
  color: #33454f !important;
}
/* A number the agent reads digit by digit should not be buried mid-sentence in
   the same weight as the words around it. isUI2() wraps them in this. */
body.finance-command2 .wiz-say-num {
  font-weight: 600;
  white-space: nowrap;
  background: #eef2f5;
  padding: 0 5px;
  border-radius: 3px;
}
/* The long e-sign walkthroughs were one unbroken paragraph holding about ten
   things the client must do in order. isUI2() splits them into these. */
body.finance-command2 .wiz-say-step {
  display: flex;
  gap: 9px;
  padding: 3px 0;
}
body.finance-command2 .wiz-say-step > .n {
  flex: 0 0 auto;
  min-width: 17px;
  font-weight: 600;
  color: #0d8ab0;
  font-variant-numeric: tabular-nums;
}

/* ── The footer's smallest, most-read numbers ─────────────────────────────
   "0 of 2 done" is the one line saying whether the step is finished and it was
   the smallest thing in the footer at zoom .9. The polling spinner sat hard
   against the last letter with no gap and read as a stray text cursor. */
body.finance-command2 #wizard-progress {
  font-size: 13.5px !important;
}
body.finance-command2 #wizard-progress .wiz-poll-dot,
body.finance-command2 #wizard-progress svg,
body.finance-command2 #wizard-progress .spinner {
  margin-left: 8px !important;
}

/* ── Copy buttons ─────────────────────────────────────────────────────────
   Roughly sixty of them on a six-lender case at about 21x13px, under the 24px
   minimum, and three of the four looks stripped the focus ring outright — so a
   keyboard agent tabbing a lender row got no visible mark at all. */
body.finance-command2 .copy-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 4px 6px !important;
  border-radius: 4px;
}
body.finance-command2 .copy-btn:focus-visible,
body.finance-command2 button:focus-visible,
body.finance-command2 a:focus-visible,
body.finance-command2 [tabindex]:focus-visible {
  outline: 2px solid #0d8ab0 !important;
  outline-offset: 1px !important;
}
body.finance-command2 input:focus-visible,
body.finance-command2 select:focus-visible,
body.finance-command2 textarea:focus-visible {
  outline: 2px solid #0d8ab0 !important;
  outline-offset: 1px !important;
}

/* ── The amber flag on a disputed figure ──────────────────────────────────
   White on #f59e0b is 2.15:1, so the mark inside the dot was nearly invisible.
   The reason is already stated in words in the panel below it. */
body.finance-command2 .wiz-flag {
  background: #b45309 !important;
}

/* ── Marks that mean "not yet" ────────────────────────────────────────────
   One vocabulary across the review panel. The row content comes from isUI2();
   these only carry the colour so a waiting row never reads as a failed one. */
body.finance-command2 .wiz-mark-wait { color: #8a5a0c; }
body.finance-command2 .wiz-mark-unread { color: #b45309; }
body.finance-command2 .wiz-mark-no { color: #9e2f1c; }
body.finance-command2 .wiz-mark-done { color: #15803d; }

/* A step this lender does not need is not a step that was finished. Command
   painted every dimmed tab in the pass colour, so an untouched step read as
   done; 2.0 gives "not needed" its own quiet treatment. */
body.finance-command2 #wizard-steps-nav button.is-skip {
  color: var(--muted, #5c6f7e) !important;
  background: transparent !important;
  font-style: italic;
}
body.finance-command2 #wizard-steps-nav button.is-done {
  color: #15803d !important;
}

/* ── The short chip ───────────────────────────────────────────────────────
   Four of six lenders came in under the amount the client asked for and no
   card said how much short. */
body.finance-command2 .lc-short {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #fbeeea;
  color: #9e2f1c;
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}

/* ── A finalization that is already open ──────────────────────────────────
   Every card read APPROVED with an identical Finalize button whether the flow
   had been started two days ago or never. */
body.finance-command2 .lc-resumed {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #eef7fb;
  color: #0a5f7d;
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}

/* ── Review: the figures being committed ──────────────────────────────────
   The last screen before Finalize showed the lender colour but not the amount,
   the payment or the term. Two thirds of the card was empty. */
body.finance-command2 .wiz-review-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px 18px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--border, #e3e8ef);
  border-radius: 10px;
  background: #f8fafc;
}
body.finance-command2 .wiz-review-terms .k {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #5c6f7e);
  display: block;
  margin-bottom: 2px;
}
body.finance-command2 .wiz-review-terms .v {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A Finalize with work still outstanding stays clickable — finalizing ahead of
   the signature is legitimate — but it must not be the brightest thing on a
   not-ready screen. */
body.finance-command2 button.primary.is-early {
  background: #fff !important;
  color: #0a5f7d !important;
  border: 1px solid #0d8ab0 !important;
}

/* A row on the review list that can be jumped to should look like it. */
body.finance-command2 .wiz-checklist .wiz-jump {
  cursor: pointer;
  border-radius: 6px;
  padding-left: 6px;
  margin-left: -6px;
}
body.finance-command2 .wiz-checklist .wiz-jump:hover {
  background: #eef2f5;
}

/* ══ The 2026-09-17 header round (John) ════════════════════════════════════
   Four asks, all of them about the top of the page:
     * the Results count is a number people hunt for, so it is always green -
       it used to be grey until you were standing on the tab it belonged to,
       which is the one moment you no longer need it;
     * "Switch case" becomes a search box, because looking up the next case is
       the thing that happens all day, not an exception;
     * the shell is on screen before any case is loaded, blank, so the first
       view is the tool rather than one box on a white page;
     * the header carries when the last application went out.
   ⛔ All of it scoped to body.finance-command2. Command 1.0 is the look this
   one is compared against and must not move. */

/* ── The Results count: green, always ─────────────────────────────────────
   Not "green when active". The whole job of this chip is to be findable from
   the OTHER tabs. */
body.finance-command2 .command-tab-count,
body.finance-command2 .command-tab.active .command-tab-count {
  color: #fff;
  background: var(--pass, #16a34a);
}

/* ── When each lender was last submitted ──────────────────────────────────
   One banner per lender, above the application. This used to be a second
   line under the Applications count; John took that out on 2026-09-17
   because one date for the whole case answered the wrong question.
   Tabular figures so a column of times lines up. */
body.finance-command2 .prior-run-banner {
  font-variant-numeric: tabular-nums;
}
body.finance-command2 .command-case-search {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.finance-command2 .command-case-search input {
  width: 150px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--command-line);
  border-radius: 6px;
  background: #fff;
  color: var(--command-ink);
  font-family: inherit;
  font-size: 13px;
}
body.finance-command2 .command-case-search input:focus {
  outline: 2px solid var(--command-cyan);
  outline-offset: -1px;
  border-color: var(--command-cyan);
}
body.finance-command2 .command-case-search button {
  height: 34px;
  padding: 0 14px !important;
  white-space: nowrap;
}

/* ── The blank shell, before any case is loaded ───────────────────────────
   The header and the tabs are always up so the page has a shape; the fields
   inside them are empty because there is no case to describe yet. */
body.finance-command2 .command-context,
body.finance-command2 .command-tabs {
  display: flex;
}
/* A stat whose value is blank keeps its column (the row must not reflow the
   moment a case lands) but drops its label - a lone uppercase "REQUESTED"
   over nothing reads as a value that failed to load. */
body.finance-command2.command2-blank .command-case-stat span,
body.finance-command2.command2-blank .command-case-status {
  visibility: hidden;
}
body.finance-command2.command2-blank .command-identity::after {
  content: "No case loaded";
  display: block;
  color: var(--command-muted);
  font-size: 13px;
  font-weight: 600;
}
/* The old centred lookup card is what the search box replaced. */
body.finance-command2.command2-blank .container > .card:first-child,
body.finance-command2.command-switching-case .container > .card:first-child {
  display: none;
}
/* The application widgets stay on screen, empty and out of reach, so the
   layout a person lands on is the layout they will work in.
   ⛔ Inert, not merely faded: with no case loaded every control in here would
   act on nothing, and Submit would post an empty application. */
body.finance-command2.command2-blank #submit-card.hidden {
  display: block;
}
body.finance-command2.command2-blank #submit-card {
  opacity: 0.55;
  pointer-events: none;
}
body.finance-command2.command2-blank #submit-card input,
body.finance-command2.command2-blank #submit-card select,
body.finance-command2.command2-blank #submit-card button {
  pointer-events: none;
}
/* Nothing to say about results or history before a case exists. */
body.finance-command2.command2-blank .command-empty {
  display: none;
}

/* The blank widgets: a picture of Credit info and Credit disclosure so the
   empty page has the shape of the working one. Only ever on screen while
   there is no case; the real panels take their place. */
body.finance-command2 #command2-blank-widgets {
  display: none;
}
body.finance-command2.command2-blank #command2-blank-widgets {
  display: contents;
}
body.finance-command2 .command2-blank-panel {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--command-line-soft);
  border-radius: 10px;
  background: #fbfdfe;
}
body.finance-command2 .command2-blank-line {
  height: 9px;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--command-line-soft);
}
body.finance-command2 .command2-blank-line.short {
  width: 55%;
}
/* The disclosure shell inside the amount panel: same treatment as the real
   card that lands there - a rule above it, not a second box. */
body.finance-command2 #command2-blank-disclosure {
  display: none;
}
body.finance-command2.command2-blank #command2-blank-disclosure {
  display: block;
  border: 0;
  border-top: 1px solid var(--command-line-soft);
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
  margin-top: 10px;
}
/* "Pulled from the Finance tab" describes a case. There isn't one yet. */
body.finance-command2.command2-blank #amount-hint,
body.finance-command2.command2-blank .lender-grid,
body.finance-command2.command2-blank .lender-toolbar,
body.finance-command2.command2-blank .section-title {
  visibility: hidden;
}
/* The empty stat columns keep their width so the header does not jump when a
   case lands, but an empty column must not draw a rule beside nothing. */
body.finance-command2.command2-blank .command-case-stat {
  border-left-color: transparent;
}
/* The real credit panel is an EMPTY div until a lookup paints it, and an empty
   div still takes a grid cell - which pushed the blank disclosure onto a
   second row. Take it out of the grid while it has nothing in it. */
body.finance-command2.command2-blank #credit-panel {
  display: none;
}

/* ── The disclosure sits under Amount financed ────────────────────────────
   John, 2026-09-17: *"we added an override button, but I don't see it on
   Command 2.0. For the disclosure button, let's have it under the Amount
   Financed tab to save space, and then we'll move the credit info section.
   We can expand it to be bigger to reach the end of the page."*

   Command 1.0 gives the disclosure its own third column on the right. On a
   laptop that column is the first thing off the edge of the window - which
   is why the Override button read as MISSING rather than as off-screen, and
   why Credit Info stopped short of the page edge. finance-command.js moves
   the card into the amount panel for 2.0; these rules take the third column
   away so Credit Info gets the room back.
   ⛔ The .has-disclosure class is still set by the shared code. Overriding it
   here, rather than skipping it there, keeps 1.0 exactly as it was. */
body.finance-command2 .command-application-overview,
body.finance-command2 .command-application-overview.has-disclosure {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
}
/* Inside the amount panel it is a section, not a card: no second border, no
   second background, just a rule separating it from the amount above. */
body.finance-command2 .command-amount-panel .command-disclosure-panel {
  border: 0;
  border-top: 1px solid var(--command-line-soft);
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
  margin-top: 10px;
}
body.finance-command2 .command-amount-panel .command-disclosure-panel .command-panel-heading {
  margin-bottom: 6px;
}
/* ⛔⛔ A BUTTON THAT IS CUT IN HALF IS WORSE THAN ONE THAT WRAPPED.
   `flex: 1 1 0` with `min-width: 0` let the buttons shrink BELOW their own
   text, so on a joint application the row read "Send disclosu" and the
   Override button was pushed off the panel entirely - John, 2026-09-17:
   *"the send disclosure button doesn't show fully whenever there's a client
   and a cosigner. Also, I'm not seeing the overwrite button on there
   either."* The column is ~340px and a joint case adds the Client/Co-signer
   pair to the same row, which never fitted.

   So: "Send to" takes a line of its own, the two actions share the next one,
   and neither may shrink past its words. The button also says "Send" rather
   than "Send disclosure" now - it sits under a heading that already says
   CREDIT DISCLOSURE. */
body.finance-command2 .command-amount-panel .disc-row {
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
body.finance-command2 .command-amount-panel .disc-recipient {
  flex: 1 1 100%;
  margin-bottom: 2px;
}
body.finance-command2 .command-amount-panel .disc-send {
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
}
/* Credit Info now owns the rest of the row, so let it fill the height too. */
body.finance-command2 #credit-panel,
body.finance-command2 .credit-box {
  height: 100%;
}
/* While blank the row is the same two columns - the blank disclosure shell
   belongs under the amount, exactly where the real one lands. */
body.finance-command2.command2-blank .command-application-overview {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
}