/* Analyze a deal (design step 4, F-analyze-screen). Colors are the app's tokens
   (app.css) plus the target card's own, set for light and dark here. On a phone
   the result comes first, then the boxes, then the buttons; from 992px the
   boxes sit on the left and the result card stays in view on the right. */
:root,
[data-bs-theme=light] {
  --nw-deal-target-bg: #fff8e6;
  --nw-deal-target-line: #f0d99a;
  --nw-deal-target-ink: #5c3d00;
  --nw-deal-stage-bg: #e8f1fc;
  --nw-deal-stage-ink: #0050ad;
}
[data-bs-theme=dark] {
  --nw-deal-target-bg: #2e2510;
  --nw-deal-target-line: #5c4a1c;
  --nw-deal-target-ink: #ffe3a3;
  --nw-deal-stage-bg: #10243d;
  --nw-deal-stage-ink: #8cc1ff;
}

.nw-deal-crumb { font-size: 0.8125rem; color: var(--nw-ink-2); margin-bottom: 0.25rem; }
.nw-deal-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.nw-deal-head > :first-child { flex: 1 1 auto; }
.nw-deal-stage { background: var(--nw-deal-stage-bg); color: var(--nw-deal-stage-ink); font-weight: 700; font-size: 0.875rem; padding: 0.375rem 0.875rem; border-radius: 999px; }

.nw-deal-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.nw-deal-modes-ask { font-size: 0.875rem; color: var(--nw-ink-2); margin-right: 0.25rem; }
.nw-deal-mode { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--nw-line); background: var(--nw-card); color: var(--nw-ink); font-size: 0.875rem; text-decoration: none; }
.nw-deal-mode:hover { color: var(--nw-ink); border-color: var(--nw-link); }
.nw-deal-mode.active { background: var(--nw-btn); border-color: var(--nw-btn); color: var(--nw-on-btn); font-weight: 700; }

.nw-deal-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "result" "inputs" "next"; }
.nw-deal-inputs { grid-area: inputs; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nw-deal-result { grid-area: result; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.nw-deal-next { grid-area: next; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
@media (min-width: 992px) {
  .nw-deal-layout { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "inputs result" "inputs next"; grid-template-rows: auto 1fr; align-items: start; column-gap: 1.5rem; }
  .nw-deal-result { position: sticky; top: 1rem; z-index: 1; }
}

.nw-deal-group { background: var(--nw-card); border: 1px solid var(--nw-line); border-radius: 16px; padding: 1rem 1.25rem; }
.nw-deal-group-title { display: block; font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.25rem; }
.nw-deal-hint { font-size: 0.8125rem; color: var(--nw-ink-2); margin-bottom: 0.25rem; }
.nw-deal-history { font-size: 0.8125rem; color: var(--nw-ink-2); margin: 0.25rem 0 0; padding-left: 0.5rem; border-left: 2px solid var(--nw-line); }
.nw-deal-history-add { font-size: inherit; }

/* A deal box: the label on the left, the box on the right. */
.nw-deal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--nw-pill); }
.nw-deal-row > label { flex: 1 1 10rem; margin: 0; }
.nw-deal-row > .invalid-feedback { flex-basis: 100%; }
.nw-deal-amount { flex: 0 0 9rem; width: 9rem; text-align: right; font-weight: 600; }
.nw-deal-of { flex: 0 1 12rem; width: auto; }
.nw-deal-date { flex: 0 0 11rem; width: 11rem; }

/* An owner's line: name, amount, "of" and period on one row where they fit. */
.nw-deal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--nw-pill); }
.nw-deal-line[hidden] { display: none; }
.nw-deal-line-name { flex: 1 1 10rem; min-width: 0; }
.nw-deal-line-name .form-control { border-color: transparent; background: transparent; padding-left: 0; }
.nw-deal-line-name .form-control:focus, .nw-deal-line-name .form-control.is-invalid { border-color: var(--nw-line); padding-left: 0.75rem; }
.nw-deal-line .nw-deal-amount { flex: 0 0 7.5rem; width: 7.5rem; }
.nw-deal-kind, .nw-deal-per { flex: 0 1 9rem; width: auto; }
.nw-deal-remove { margin: 0; min-height: 0; }
.nw-deal-line-error { flex-basis: 100%; }
.nw-deal-add { padding: 0.5rem 0 0; font-weight: 600; text-decoration: none; }

.nw-deal-card { border-radius: 16px; }
.nw-deal-lead { font-size: 0.875rem; color: var(--nw-ink-2); margin: 0; }
.nw-deal-big { font-size: 2.5rem; font-weight: 800; line-height: 1.1; color: var(--nw-gain); margin: 0.125rem 0; letter-spacing: -0.02em; }
.nw-deal-big.nw-deal-loss { color: var(--nw-loss); }
.nw-deal-facts { margin: 0.75rem 0 0; border-top: 1px solid var(--nw-pill); }
.nw-deal-facts > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--nw-pill); }
.nw-deal-facts dt { font-weight: 400; }
.nw-deal-facts dd { margin: 0; font-weight: 700; text-align: right; }
.nw-deal-breakdown { margin-top: 0.75rem; }
.nw-deal-breakdown > summary { min-height: 44px; display: flex; align-items: center; color: var(--nw-link); font-weight: 600; cursor: pointer; }

.nw-deal-target { background: var(--nw-deal-target-bg); border: 1px solid var(--nw-deal-target-line); color: var(--nw-deal-target-ink); border-radius: 16px; padding: 1rem 1.25rem; }
.nw-deal-target .nw-deal-row { border-bottom-color: var(--nw-deal-target-line); padding-top: 0; }
.nw-deal-target .nw-deal-row > label { font-weight: 700; }
.nw-deal-target #nw-deal-target-says { margin-top: 0.5rem; font-size: 0.9375rem; }
.nw-deal-target-note { font-size: 0.8125rem; color: inherit; opacity: 0.85; margin: 0.5rem 0 0; }
.nw-deal-next .nw-deal-target-note { color: var(--nw-ink-2); opacity: 1; }

.nw-deal-buttons { display: flex; flex-direction: column; gap: 0.625rem; }
.nw-deal-buttons > .btn { min-height: 44px; }
.nw-deal-buttons > .btn-primary { font-weight: 700; }
.nw-deal-versions { font-size: 0.8125rem; color: var(--nw-ink-2); text-align: center; }
@media (max-width: 575.98px) {
  /* Phone: the name on its own line, then the amount and its choices side by side. */
  .nw-deal-line-name { flex-basis: 100%; }
  .nw-deal-line .nw-deal-amount { flex: 0 0 6.5rem; width: 6.5rem; }
  .nw-deal-line .form-select { flex: 1 1 0; min-width: 0; }
  .nw-deal-line:has(.nw-deal-kind) .nw-deal-line-name { flex-basis: 45%; }
  .nw-deal-line .nw-deal-kind { flex: 1 1 45%; }
  .nw-deal-remove { flex-basis: 100%; }
  .nw-deal-amount { flex-basis: 7.5rem; width: 7.5rem; }
}

/* The print page of a saved analysis (F-deal-print): the result beside how it
   adds up on a wide screen, one under the other on a phone and on paper. */
.nw-deal-print-cols { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
  .nw-deal-print-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}
@media print {
  .nw-deal-print-bar { display: none !important; }
  .nw-deal-print { background: #fff; }
  .nw-deal-print-cols { display: block; }
  .nw-deal-print .card,
  .nw-deal-print .nw-deal-group,
  .nw-deal-print .nw-deal-target { break-inside: avoid; box-shadow: none; margin-bottom: 1rem; }
}

/* The quick calculator (F-quick-deal): the tab radios pick which panel shows,
   and the BRRRR button shows the refinance. Without :has() both panels show. */
.btn-check:checked + .nw-deal-mode { background: var(--nw-card); border-color: var(--nw-ink); box-shadow: inset 0 0 0 1px var(--nw-ink); color: var(--nw-ink); font-weight: 700; }  /* not the blue of the next step (review 3 UX6) */
.btn-check:focus-visible + .nw-deal-mode { outline: 2px solid var(--nw-link); outline-offset: 2px; }
.nw-quick:has(#nw-quick-tab-flip:checked) [data-quick-tab="rental"],
.nw-quick:has(#nw-quick-tab-rental:checked) [data-quick-tab="flip"],
.nw-quick:not(:has(#nw-quick-brrrr:checked)) .nw-quick-refi { display: none; }
.nw-quick-box { display: flex; align-items: center; gap: 0.375rem; flex: 0 1 auto; min-width: 0; }
.nw-quick-box .nw-deal-amount { flex: 0 0 8rem; width: 8rem; }
.nw-quick-unit { flex: 0 1 11.5rem; width: auto; min-width: 0; }
.nw-quick-unit-words { font-size: 0.875rem; color: var(--nw-ink-2); white-space: nowrap; }
.nw-quick-hint { flex-basis: 100%; margin: 0; }
.nw-quick-details > summary,
.nw-quick-more > summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; color: var(--nw-link); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.nw-quick-details > summary::before,
.nw-quick-more > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.nw-quick-details[open] > summary::before,
.nw-quick-more[open] > summary::before { transform: rotate(90deg); }
.nw-quick-sum { color: var(--nw-ink-2); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.nw-quick-lines { padding: 0 0 0.5rem 0.75rem; border-left: 3px solid var(--nw-pill); }
.nw-quick-more { margin-top: 0.5rem; }
.nw-quick-more > summary { font-size: 1rem; }
.nw-quick-brrrr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1rem; }
.nw-quick-brrrr .btn { min-height: 44px; font-weight: 700; }
.nw-quick-brrrr .nw-deal-hint { flex: 1 1 12rem; margin: 0; }
.nw-quick-refi { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--nw-line); }
.nw-quick-compare th, .nw-quick-compare td { font-size: 0.8125rem; vertical-align: top; }
.nw-quick-compare thead th { color: var(--nw-ink-2); font-weight: 600; }
@media (max-width: 575.98px) {
  .nw-quick-box { flex: 1 1 100%; }
  .nw-quick-box .nw-deal-amount { flex: 1 1 0; width: auto; min-width: 0; }
  .nw-quick-unit { flex: 1 1 0; }
}

/* The baseline switch on each version (F-deal-baseline): grey is off, green is
   the baseline. A real button (a form post), so it works without JavaScript. */
.nw-deal-version { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-top: 1px solid var(--nw-line); }
.nw-deal-version:first-child { border-top: 0; }
.nw-deal-version-name { min-width: 0; overflow-wrap: anywhere; }
/* "Change" and "Take it off" keep their width; the words beside them wrap. */
.nw-deal-version-acts { flex: none; }
.nw-baseline-says { font-size: 0.875rem; color: var(--nw-ink-2); }
.nw-baseline-form { margin: 0; flex: 0 0 auto; }
.nw-baseline-switch { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--nw-ink-2); font-size: 0.8125rem; cursor: pointer; }
.nw-baseline-knob { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--nw-pill); border: 1px solid var(--nw-line); flex: 0 0 auto; }
.nw-baseline-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.nw-baseline-switch.on { color: var(--nw-gain); font-weight: 700; }
.nw-baseline-switch.on .nw-baseline-knob { background: var(--nw-gain); border-color: var(--nw-gain); }
.nw-baseline-switch.on .nw-baseline-knob::after { left: calc(100% - 1.5rem + 4px); }
.nw-baseline-switch:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .nw-baseline-knob::after { transition: none; } }