/*
 * scorecard.css — round 39 (owned by the underwriting + calculators agent).
 * The Location Scorecard, the Underwriting Report and the five money
 * calculators (One-Machine, Commission Split, Sales Tax, Capital Stack, Route
 * Valuation). Loaded after app.css / game.css / hud.css, so rules here
 * override them. Every class is prefixed uw- so nothing leaks into other tools.
 * Palette: the deep navy glass and electric blue of the campus; green is
 * money in, red is money out, and nothing else uses them.
 */

/* ---------- shared calculator kit ---------- */
.uw-calc .tool-form__head,
.uw .tool-form__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-3); }
.uw-out { display: grid; gap: var(--s-3); align-content: start; }
.uw-out > .readout { margin-bottom: 0; }
@media (min-width: 761px) { .uw-calc > .uw-out, .uw-side { position: sticky; top: var(--s-4); } }

.uw-explain { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-dim); max-width: 62ch; }
.uw-src { color: var(--fg-faint); font-size: var(--t-2xs); line-height: 1.5; }
.uw-notes { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--t-sm); color: var(--fg-dim); }
.uw-link { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--t-xs); color: var(--scan); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.uw-link:hover { color: var(--fg); }
.uw-link:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; border-radius: 2px; }

/* A sub-heading inside a form: a label and a quiet hint. */
.uw-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.uw-sub__hint { font-size: var(--t-xs); color: var(--fg-faint); }
.uw-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 420px) { .uw-pair { grid-template-columns: 1fr; } }

/* Hand-offs: the row of "carry it forward" buttons. */
.uw-handoff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.uw-handoff > .label { flex-basis: 100%; }
.uw-pin.is-on { border-color: var(--scan); color: var(--fg); box-shadow: 0 0 0 1px rgba(var(--scan-rgb), 0.4), 0 0 14px rgba(var(--scan-rgb), 0.25); }

/* Plain-words facts strip (One-Machine). */
.uw-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.uw-fact { display: grid; gap: 2px; align-content: start; padding: var(--s-3); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); min-width: 0; }
.uw-fact b { font-family: var(--font-mono); font-size: var(--t-md); color: var(--fg); overflow-wrap: anywhere; }
.uw-fact > span:last-child { font-size: var(--t-xs); color: var(--fg-dim); line-height: 1.4; }
@media (max-width: 520px) { .uw-facts { grid-template-columns: 1fr; } .uw-fact { grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: baseline; } .uw-fact > span:last-child { grid-column: 1 / -1; } }

/* The levers, ranked. */
.uw-levers { display: grid; gap: var(--s-2); }
.uw-levers ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: lever; }
.uw-levers li { counter-increment: lever; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: baseline; padding: 6px var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); background: rgba(255, 255, 255, 0.025); }
.uw-levers li::before { content: counter(lever); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.uw-levers li .num { font-family: var(--font-mono); color: var(--money); white-space: nowrap; }
.uw-levers li.is-top { background: rgba(var(--money-rgb), 0.08); box-shadow: inset 2px 0 0 var(--money); }

/* A vs B. */
.uw-ab { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid rgba(var(--scan-rgb), 0.35); background: rgba(var(--scan-rgb), 0.05); }
.uw-ab__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
.uw-ab__what { font-size: var(--t-xs); color: var(--fg-dim); }
.uw-ab__grid { display: grid; font-size: var(--t-sm); }
.uw-ab__row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.uw-ab__row:last-child { border-bottom: 0; }
.uw-ab__row > .num { font-family: var(--font-mono); text-align: right; overflow-wrap: anywhere; }
.uw-ab__row--head { font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.uw-ab__row--head > span:not(:first-child) { text-align: right; }
.uw-ab__d { color: var(--fg-dim); }
.uw-ab__d.is-good { color: var(--money); }
.uw-ab__d.is-bad { color: var(--red); }

/* Commission table: the "you keep" bar under the number. */
.uw-table table { width: 100%; }
.uw-table th[scope="row"] { font-weight: 500; text-align: left; }
.uw-table tr.is-standard th, .uw-table tr.is-standard td { background: rgba(var(--scan-rgb), 0.07); }
.uw-table td.num { position: relative; white-space: nowrap; }
.uw-bar { display: block; height: 3px; width: var(--w); max-width: 100%; margin: 0 0 4px auto; border-radius: 2px; background: var(--money); opacity: 0.8; }
.uw-bar.is-out { background: var(--red); }
.uw-use { padding-inline: 0.7rem; }

/* ---------- the Scorecard desk ---------- */
.uw { display: grid; gap: var(--s-4); }

.uw-side { display: grid; gap: var(--s-4); align-content: start; }

/* A trait: the meter, then the one-line reason under it. */
.uw-trait { display: grid; gap: 4px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.uw-trait .meter { border-bottom: 0; }
.uw-reason { width: 100%; min-height: 34px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--bg-0); color: var(--fg); font: inherit; font-size: var(--t-xs); }
.uw-reason::placeholder { color: var(--fg-faint); }
.uw-reason:focus { outline: none; border-color: var(--scan); box-shadow: 0 0 0 3px rgba(var(--scan-rgb), 0.18); }
.uw-existing { min-height: 0; }
.uw-existing .field { margin: 0; }
.uw-existing .segmented { margin-top: 4px; }
.uw-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* The rating: a dial, the verdict word, the reasons. */
.uw-rating { display: grid; gap: var(--s-3); --tone: var(--fg); }
.uw-rating[data-tone="money"] { --tone: var(--money); --tone-rgb: var(--money-rgb); }
.uw-rating[data-tone="red"] { --tone: var(--red); --tone-rgb: var(--red-rgb); }
.uw-rating[data-tone="white"] { --tone: var(--fg); --tone-rgb: 255, 255, 255; }
.uw-rating__top { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.uw-dial { --size: 112px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; gap: 2px;
  background: radial-gradient(closest-side, var(--bg-1) 78%, transparent 80% 100%), conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
  box-shadow: 0 0 28px rgba(var(--tone-rgb, 255, 255, 255), 0.18); transition: background var(--dur-med) var(--ease); }
.uw-dial__num { font-family: var(--font-mono); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--tone); }
.uw-dial__of { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-faint); }
.uw-rating__words { display: grid; gap: 4px; min-width: 0; }
.uw-verdict { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--tone); }
.uw-rating__words p { margin: 0; font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.45; }
.uw-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.uw-why li { position: relative; padding-left: 18px; font-size: var(--t-sm); line-height: 1.45; color: var(--fg); }
.uw-why li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); }
.uw-why li.is-money::before { background: var(--money); box-shadow: 0 0 8px rgba(var(--money-rgb), 0.6); }
.uw-why li.is-red::before { background: var(--red); box-shadow: 0 0 8px rgba(var(--red-rgb), 0.6); }
.uw-next { margin: 0; display: grid; gap: 4px; padding: var(--s-3); border-radius: var(--r-sm); background: rgba(var(--scan-rgb), 0.06); border: 1px solid rgba(var(--scan-rgb), 0.25); font-size: var(--t-sm); line-height: 1.45; }
@media (max-width: 420px) { .uw-dial { --size: 92px; } .uw-dial__num { font-size: 2.2rem; } .uw-rating__top { gap: var(--s-3); } }

/* The projection. */
.uw-proj { display: grid; gap: var(--s-3); }
.uw-proj__src { font-size: var(--t-2xs); color: var(--fg-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.uw-proj__figure b { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; color: var(--fg); }
.uw-proj__figure span { color: var(--fg-dim); font-size: var(--t-sm); }
.uw-assume { border-radius: var(--r-sm); border: 1px solid var(--line); padding: 0 var(--s-3); }
.uw-assume > summary { cursor: pointer; list-style: none; padding: var(--s-3) 0; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.uw-assume > summary::-webkit-details-marker { display: none; }
.uw-assume > summary::before { content: "+ "; color: var(--scan); }
.uw-assume[open] > summary::before { content: "− "; }
.uw-assume > summary:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
.uw-assume[open] { display: grid; gap: var(--s-3); padding-bottom: var(--s-3); }
.uw-check { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.03); box-shadow: inset 3px 0 0 var(--fg-dim); }
.uw-check.is-strong, .uw-check.is-viable { box-shadow: inset 3px 0 0 var(--money); }
.uw-check.is-weak, .uw-check.is-loss { box-shadow: inset 3px 0 0 var(--red); }
.uw-check__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.uw-check__row > div { display: grid; gap: 2px; }
.uw-check__row b { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--fg); }
.uw-check.is-loss .uw-check__row div:first-child b { color: var(--red); }
.uw-check__row span, .uw-check > p { font-size: var(--t-xs); color: var(--fg-dim); line-height: 1.45; margin: 0; }

/* Actions and the report meter. */
.uw-act { display: grid; gap: var(--s-3); }
.uw-count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-dim); white-space: nowrap; }
.uw-count.is-done { color: var(--money); }
.uw-meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.uw-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--scan), var(--neon, var(--scan))); border-radius: inherit; transition: width var(--dur-med) var(--ease); }
.uw-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.uw-sync { font-size: var(--t-xs); color: var(--fg-faint); }
.uw-sync.is-on { color: var(--money); }
.uw-sync.is-on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--money); box-shadow: 0 0 8px rgba(var(--money-rgb), 0.7); vertical-align: 1px; }
.uw-review { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.uw-review > span { font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.45; }
.uw-review .btn { justify-self: start; }

/* ---------- the Underwriting Report: a document on the desk ---------- */
.uw-docwrap { display: grid; gap: var(--s-4); justify-items: center; }
.uw-doctools { width: min(100%, 820px); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.uw-doctools .uw-count { margin-left: auto; }
.uw-doc { width: min(100%, 820px); color: var(--paper-ink); background: var(--paper);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 120px);
  border-radius: 4px; box-shadow: var(--shadow-paper), 0 30px 60px -30px rgba(0, 0, 0, 0.7); padding: clamp(20px, 5vw, 56px) clamp(18px, 5vw, 60px) clamp(20px, 4vw, 40px); }
.uw-doc__head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: start; padding-bottom: var(--s-4); border-bottom: 2px solid currentColor; }
.uw-doc__kicker { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.uw-doc__title { margin: 6px 0 4px; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.05; letter-spacing: -0.02em; color: inherit; overflow-wrap: anywhere; }
.uw-doc__meta { margin: 0; font-size: var(--t-xs); opacity: 0.75; overflow-wrap: anywhere; }
.uw-seal { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: center; column-gap: 2px; padding: 10px 14px; border: 2px solid currentColor; border-radius: 6px; text-align: center; transform: rotate(-2deg); }
.uw-seal b { font-family: var(--font-mono); font-size: 2.2rem; line-height: 1; color: inherit; text-shadow: none; }
.uw-seal span { font-family: var(--font-mono); font-size: var(--t-xs); opacity: 0.7; }
.uw-seal i { grid-column: 1 / -1; font-style: normal; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.uw-seal.is-money { color: #0b7a43; }
.uw-seal.is-red { color: #b4232a; }
.uw-doc__lines { margin: 0; padding: 0; list-style: none; counter-reset: line; }
.uw-doc__lines > li { counter-increment: line; display: grid; grid-template-columns: 2.2em minmax(110px, 0.32fr) 1fr; gap: 4px var(--s-3); padding: 9px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: var(--t-sm); line-height: 1.45; align-items: baseline; }
.uw-doc__lines > li::before { content: counter(line, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--t-xs); opacity: 0.5; }
.uw-doc__label { font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.uw-doc__value { overflow-wrap: anywhere; }
.uw-doc__sub { margin: 0; padding-left: 1em; display: grid; gap: 2px; }
.uw-doc__todo { font-style: italic; color: #b4232a; }
.uw-doc__lines > li.is-missing .uw-doc__label { opacity: 0.65; }
.uw-doc__foot { display: grid; gap: 4px; margin-top: var(--s-4); font-size: var(--t-2xs); line-height: 1.5; opacity: 0.65; }
@media (max-width: 560px) {
  .uw-doc__lines > li { grid-template-columns: 2em 1fr; }
  .uw-doc__lines > li > :last-child { grid-column: 2; }
  .uw-seal b { font-size: 1.7rem; }
  .uw-doctools .uw-count { margin-left: 0; width: 100%; }
  .uw-doctools .btn { flex: 1 1 calc(50% - var(--s-2)); justify-content: center; }
}

/* The report's empty state. */

/* The phone strip: the live rating, pinned while the form scrolls (hidden where the rating sits beside the form). */
.uw-mini { display: none; }
@media (max-width: 760px) {
  .uw-mini { position: sticky; top: 0; z-index: 5; display: flex; align-items: baseline; gap: var(--s-3); width: 100%; padding: 10px var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line-strong, var(--line)); background: rgba(8, 16, 38, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--fg); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-md); --tone: var(--fg); }
  .uw-mini[data-tone="money"] { --tone: var(--money); }
  .uw-mini[data-tone="red"] { --tone: var(--red); }
  .uw-mini b { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--tone); }
  .uw-mini span { font-weight: 700; color: var(--tone); }
  .uw-mini i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .uw-mini em { margin-left: auto; font-style: normal; font-size: var(--t-xs); color: var(--scan); white-space: nowrap; }
  .uw-mini:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
}

/* Commission table on a phone: each structure becomes a small card, figures labelled, nothing scrolls sideways. */
@media (max-width: 560px) {
  .uw-table { overflow: visible; }
  .uw-table table, .uw-table tbody { display: block; }
  .uw-table thead { display: none; }
  /* Name and the Use button on the first line; the three figures share the second, each a full third. */
  .uw-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px var(--s-2); align-items: end; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); }
  .uw-table tr > th[scope="row"] { grid-column: 1 / 3; grid-row: 1; align-self: center; padding: 0; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); min-width: 0; }
  .uw-table tr > td { padding: 0; border: 0; text-align: left; min-width: 0; }
  .uw-table tr > td:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
  .uw-table td.num { white-space: normal; overflow-wrap: anywhere; }
  .uw-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-sans); font-size: var(--t-2xs); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); white-space: normal; }
  .uw-table .uw-bar { display: none; }
  .uw-table tr.is-standard { background: rgba(var(--scan-rgb), 0.07); border-radius: var(--r-sm); }
  .uw-table tr.is-standard th, .uw-table tr.is-standard td { background: none; }
}

/* ---- Round 40 fixer: the Commission Split table (M19) ----
 * One band per row: the row label carries no shade of its own, the standard row is tinted
 * end to end, and the headers stay on one line. The "You keep" bar sits under the figure
 * without pushing it down, so every figure in a row shares a baseline. */
@media (min-width: 641px) {
  .uw-table thead th { white-space: nowrap; }
  .uw-table tbody th[scope="row"] { background: none; box-shadow: none; }
  .uw-table tbody tr > * { vertical-align: middle; }
  .uw-table tbody tr:nth-child(even) > * { background: rgba(255, 255, 255, 0.02); }
  .uw-table tr.is-standard > * { background: rgba(var(--scan-rgb), 0.07); }
  .uw-table td.uw-keep .uw-bar { position: absolute; right: 12px; bottom: 9px; margin: 0; max-width: calc(100% - 24px); }
}
/* Before any rating the dial and the phone bar ask for one ("Rate it"), not a dash over ten (M23). */
.uw-dial__word { font: 700 var(--t-sm)/1.1 var(--font-sans); letter-spacing: 0.02em; color: var(--fg-dim); text-align: center; }
.uw-mini b.uw-mini__word { font-family: var(--font-sans); font-size: var(--t-md); white-space: nowrap; flex: none; }