/* Startup DocBot — the Project Budget page (budget/budgetui.js). Loaded after theme.css and styles.css (the forecast's
   wizard, help pop-ups, month picker, running-total strip, tables, and chart frames), so this file adds only what the
   budget's own screens need: people cards, tool lines, the Everything else list, and the review page. */

/* the panel: a little wider than the forecast's questions, for the people cards and tool lines */
body.budget main.panel[data-view="wizard"] { max-width: 860px; }
body.budget:has(main.panel[data-view="wizard"]) .top, body.budget:has(main.panel[data-view="wizard"]) .sitefoot { max-width: 900px; }
body.budget .screen { max-width: 740px; }
.region { display: contents; }
.screen .intro + .intro { margin-top: -8px; }

/* the progress bar's steps can be buttons once the review has been seen */
.progress .pstep { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 9px; border-radius: 4px; }
.progress .pstep.done { color: var(--ink); }
.progress .pstep:hover { background: var(--card-under); color: var(--ink); }
@media (max-width: 420px) { .progress .pstep { padding: 3px 6px; letter-spacing: .02em; } }

/* nav: Back on the left; Skip, Back to the review, and Next on the right */
.nav .navr { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .nav { flex-wrap: wrap; } .nav .navr { flex: 1 1 100%; order: -1; } .nav .navr .btn { flex: 1 1 auto; } .nav > .btn.ghost { flex: 1 1 100%; } }
.btn.small { padding: 7px 12px; font-size: 13px; box-shadow: 2px 2px 0 var(--ink); }

/* "Words you'll see", as on the document generators */
details.words { margin: -6px 0 22px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--card); padding: 8px 14px; }
details.words summary { cursor: pointer; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
details.words dl { margin: 10px 0 4px; }
details.words dt { font-weight: 500; margin-top: 8px; }
details.words dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }

/* the "?" pop-up: paragraphs, links, and a Source line set apart below a rule, 3 points smaller (Clark, Nov 1) */
.bpop p { margin: 0 0 6px; }
.bpop p:last-child { margin-bottom: 0; }
.bpop a { color: var(--cream); text-decoration: underline; }
.bpop p.src { font-size: 12px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(243, 227, 195, .45); color: var(--cream-2); }

/* small live lines under an answer */
.live { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.live[hidden] { display: none; }
.live.result { background: var(--card); border: 1.5px solid var(--ink); border-left: 6px solid var(--teal-ink); border-radius: 6px; padding: 10px 14px; margin: 6px 0 4px; }
.live.result p { margin: 0 0 4px; } .live.result p:last-child { margin: 0; }
.asterisk { font-size: 13.5px; color: var(--ink-3); margin: 26px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.note.grpnote { margin: 18px 0 -4px; }

/* Screen 1 */
.studio { background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 10px 14px; display: grid; gap: 4px; font-size: 16px; }
.studio .linkbtn { justify-self: start; }
.msline { display: grid; grid-template-columns: 1.3fr 1fr 36px; gap: 10px; align-items: center; }
.linkbtn.x { min-width: 36px; min-height: 36px; padding: 4px; font-size: 20px; color: var(--ink-2); text-decoration: none; }
.linkbtn:disabled { color: var(--ink-3); opacity: .5; cursor: not-allowed; text-decoration: none; }
@media (max-width: 520px) { .msline { grid-template-columns: 1fr 36px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .msline select { grid-column: 1; } .msline .linkbtn.x { grid-row: 1 / span 2; grid-column: 2; } }

/* number boxes: a narrow one for a percentage or a count */
.numbox { min-width: 0; }
.numbox.narrow { max-width: 220px; }
.numbox.tiny { display: inline-block; width: 74px; vertical-align: middle; }
.numbox.tiny input { padding: 5px 7px; font-size: 16px; }
.numbox.hours { max-width: 230px; }
.inputwrap .unit + input.suffix { border-radius: 0; }
.numbox .err[hidden] { display: none; }

/* Screen 2: one card per row of people */
.people { display: grid; gap: 14px; margin-bottom: 8px; }
.prow { background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; padding: 12px 14px 14px; box-shadow: 2px 2px 0 var(--card-under); }
.prow-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.prow-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--tile); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; }
.prow-h .live.prow-t { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-ctl { display: flex; gap: 2px 10px; flex-wrap: wrap; justify-content: flex-end; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.pgrid > .wide, .pgrid > .fld.wide { grid-column: 1 / -1; }
.fld { min-width: 0; }
.fld .flabel { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; margin-bottom: 6px; }
.fld input[type=text], .fld input[type=number], .fld select { font-size: 16.5px; padding: 9px 11px; }
.fld .inputwrap .unit { padding: 9px 10px; font-size: 14.5px; }
.fld .choices.row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.fld .choice { padding: 9px 11px; }
.inline { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.inline .choices { flex: 1 1 260px; }
.choices.three { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.choices.two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sublist { margin-top: 10px; display: grid; gap: 8px; }
.payline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 10px; align-items: start; }
.change { border: 1.5px dashed var(--tan); border-radius: 6px; padding: 10px 12px; margin: 6px 0 10px; background: var(--panel); }
.change-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.outside { margin-top: 22px; }
.outlist { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; }
.outlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.outlist li:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .prow { padding: 10px 10px 12px; }
  .prow-h { flex-wrap: wrap; } .prow-ctl { flex: 1 1 100%; justify-content: flex-start; }
}

/* Screen 3 */
ul.shown { margin: 0; padding: 10px 14px 10px 32px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; font-size: 15.5px; }
ul.shown li { margin: 3px 0; }
p.shown { margin: 0; font-size: 16.5px; }
.field > label.sublabel { display: grid; gap: 6px; margin: 10px 0 0; font-size: 15.5px; font-weight: 500; }
.years { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.yearcell { display: grid; gap: 4px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* Screen 4: the work list */
.wlist { display: grid; gap: 8px; }
.wrow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr) 36px; gap: 8px; align-items: center; }
.whead { font-size: 14.5px; font-weight: 500; color: var(--ink); align-items: end; }
.whead > span { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.whead .q { width: 22px; height: 22px; font-size: 12px; }
.wcell { min-width: 0; display: block; }
.wcell .wl { display: none; }
.wrow input, .wrow select { padding: 8px 9px; font-size: 16px; }
@media (max-width: 600px) {
  .whead { display: none; }
  .wrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; align-items: end; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 10px; }
  .wcell.what { grid-column: 1 / 3; }
  .wrow > .wcell:nth-child(4) { grid-column: 1 / 3; }
  .wrow > .linkbtn.x { grid-column: 3; grid-row: 1; }
  .wcell .wl { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
}

/* Screen 5: the catalog and each tool's line */
.tgroup { margin: 4px 0 14px; }
.tgroup-h { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 6px; }
.tgroup .choices.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 480px) { .tgroup .choices.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .tgroup .choice { padding: 8px 9px; gap: 8px; font-size: 15px; } }
.tools-lines { display: grid; gap: 6px; }
.tools-lines > .label { margin-bottom: 0; }
.tblock { display: grid; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tlitem { background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; }
.tline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 8px 12px; font-size: 15.5px; }
.tline > .live { margin: 0; font-size: 15.5px; color: var(--ink); }
.tline .tname { font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.tline .sep { color: var(--ink-3); white-space: pre; }
.tline .seats { display: inline-flex; align-items: center; gap: 6px; }
.tline .seats .q { width: 22px; height: 22px; font-size: 12px; }
.tlitem.open { box-shadow: 3px 3px 0 var(--card-under); }
.tpanel { border-top: 1px solid var(--rule); padding: 10px 12px 12px; display: grid; gap: 10px; }
.tpanel .note { margin: 0; }
.swrow { background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 10px 12px; margin: 0 0 8px; }
.swrow > .linkbtn { margin-top: 6px; }
.pgrid.sw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .pgrid.sw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Screen 6: Everything else */
.band.ee-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.band.ee-h .btn { text-transform: uppercase; }
.item { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.item-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.item-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16.5px; }
.tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-ink); border: 1.2px solid var(--teal-ink); border-radius: 4px; padding: 1px 6px; }
.choices.ans { display: flex; gap: 6px; }
.choices.ans .choice { padding: 6px 10px; font-size: 15px; gap: 7px; }
.choices.ans .choice .dot { width: 14px; height: 14px; }
.item-f { margin: 10px 0 2px; padding: 10px 12px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.item.added .item-f > .fld:first-child { grid-column: 1 / -1; }
.item.added .item-h { grid-template-columns: minmax(0, 1fr) auto; }
.linkbtn.add { display: inline-block; }
@media (max-width: 560px) { .item-h { grid-template-columns: minmax(0, 1fr); } .choices.ans { justify-content: stretch; } .choices.ans .choice { flex: 1 1 0; justify-content: center; } }

/* where an open item's link lands */
.flash { animation: flash 2.2s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 4px var(--arrow); border-radius: 6px; } 100% { box-shadow: 0 0 0 4px rgba(187, 74, 47, 0); } }

/* the running total */
.strip .kp .none { font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--cream); }

/* the review page (spec 4.2) */
.review .answer { font-size: 19px; line-height: 1.55; background: var(--card); border: 1.5px solid var(--ink); border-left: 6px solid var(--tile); border-radius: 6px; padding: 12px 16px; margin: 4px 0 10px; }
.review .answer b { font-size: 22px; font-weight: 500; white-space: nowrap; }
.review .answer.ahead { border-left-color: var(--tan); font-size: 17px; }
.review .answer.ahead b { font-size: 19px; }
table.fin.groups { min-width: 420px; }
table.fin.groups tr.grand td { font-weight: 700; border-bottom: 0; }
table.fin.groups tbody.below tr.rule td { border-top: 2px solid var(--ink); }
table.fin.groups tbody.below td { color: var(--ink-2); }
table.fin th.l, table.fin td.l { text-align: left; }
table.fin.ms { min-width: 560px; }
details.about { margin: 10px 0 6px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 14px; max-width: 72ch; }
details.about summary { cursor: pointer; font-family: var(--mono); font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
details.about p { font-size: 15.5px; color: var(--ink-2); margin: 8px 0; }
details.about p.src { font-size: 12.5px; border-top: 1px solid var(--rule); padding-top: 6px; color: var(--ink-3); }
.review .note { max-width: 80ch; }
.review .chart { padding: 12px 14px 8px; }
.review .chart svg { width: 100%; height: auto; }
ul.open { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; }
ul.open a { color: var(--act); }
.next .dlrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 12px; }
.next .status { font-size: 14.5px; color: var(--ink-2); }
.nextlist { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px; max-width: 86ch; }
.review > p { max-width: 86ch; }
@media (max-width: 480px) { .review .answer { font-size: 17px; padding: 10px 12px; } .review .answer b { font-size: 19px; } }

/* fixes after the first screenshots */
.inputwrap .unit { white-space: nowrap; }
.fld .flabel { min-height: 26px; }
.linkbtn.add, .sublist > .linkbtn.add { justify-self: start; }
.choices + .numbox, .choices + .region, .choices + .live, .choices + .sublabel { margin-top: 8px; }
.field > .numbox, .fld.wide > .numbox { max-width: 360px; }
.scrollhint.phone { display: none; }
@media (max-width: 480px) {
  .fld .choices.type { grid-template-columns: minmax(0, 1fr); }
  .payline { grid-template-columns: minmax(0, 1fr) 36px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
  .payline > .numbox { grid-column: 1; } .payline > select { grid-column: 1; } .payline > .linkbtn.x, .payline > span { grid-column: 2; grid-row: 1 / span 2; }
  .review table.fin.groups { min-width: 0; font-size: 13px; }
  .review table.fin.groups th, .review table.fin.groups td { padding: 6px 3px; }
  .review table.fin.groups td:first-child, .review table.fin.groups th:first-child { padding-left: 7px; }
  .review table.fin.groups td:last-child, .review table.fin.groups th:last-child { padding-right: 7px; }
  .review table.fin.groups th { font-size: 11.5px; letter-spacing: .02em; white-space: normal; }
  .review .scroll table.fin.groups td:first-child, .review .scroll table.fin.groups th:first-child { min-width: 0; position: static; box-shadow: none; }
  .scrollhint.phone { display: block; }
}

/* review fixes, Nov 7 (founder and CFO reviewers) */
/* Everything else on a phone: Amount, How often, First month, and Last month each at full width, so a month shows its year */
/* a row's boxes wrap as flex items (a grid's auto-fit kept a column for each 128 px once the note below spanned the row, so the
   boxes went narrow); the note under them takes a line of its own */
.pgrid.item-f { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.item-f > .fld { flex: 1 1 128px; min-width: 0; }
.item.added .item-f > .fld:first-child { flex-basis: 100%; }
.item-f > .live.nomonth { flex: 1 1 100%; margin: 0; color: var(--act); font-weight: 500; }
@media (max-width: 520px) { .item-f > .fld { flex-basis: 100%; } }
/* what a disabled Next or Review waits for */
.nav .navwhy { margin: 0; align-self: center; font-size: 14.5px; color: var(--ink-2); max-width: 36ch; text-align: right; }
.nav .navwhy[hidden] { display: none; }
@media (max-width: 520px) { .nav .navwhy { flex: 1 1 100%; max-width: none; text-align: left; order: 2; } }
/* the running total: the fees DocBot fills in */
.strip .feenote { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13.5px; color: var(--cream-2); }
.strip .feenote a { color: var(--cream); text-decoration: underline; }
/* the review page */
.next .dlnote { margin: -4px 0 12px; font-size: 14.5px; }
/* the milestones table as 1 card per milestone on a phone */
@media (max-width: 520px) {
  .review .scroll.mswrap { overflow: visible; border: 0; border-radius: 0; }
  .review table.fin.ms { min-width: 0; width: 100%; background: none; }
  .review table.fin.ms thead { display: none; }
  .review table.fin.ms, .review table.fin.ms tbody, .review table.fin.ms tr, .review table.fin.ms td { display: block; }
  .review table.fin.ms tr { background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 6px 12px; margin: 0 0 8px; }
  .review table.fin.ms td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: nowrap; }
  .review table.fin.ms td::before { content: attr(data-l); text-align: left; color: var(--ink-2); white-space: normal; }
  .review .scroll.mswrap table.fin.ms td:first-child { position: static; min-width: 0; box-shadow: none; background: none; font-weight: 500; padding: 2px 0 4px; border-bottom: 1px solid var(--rule); margin-bottom: 2px; }
  .review table.fin.ms td:first-child::before { content: none; }
}
/* the phone's strip: the fee note close under the 2 totals */
@media (max-width: 640px) { .strip .in { row-gap: 2px; } .strip .feenote { margin: 0; } }