/* Venue Numbers Part II panels (PANELS-II): p2- classes only. Uses the shared tokens and classes of app.css (.btn .seg .chip .chips .card .tbl .kv .two .pill .hint .muted .num .money);
   it never restyles an unprefixed class. Phone first (320 px works): one column, 44 px targets, nothing wider than the page; 520 and 640 px add two- and three-column forms; 960 px is the
   same layout beside the step list. A number never breaks inside itself (.num does not wrap inside a figure), and a word is never cut: wide tables sit in their own scroll box. */

.p2-sec{overflow-wrap:anywhere}
.p2-h{font-family:var(--label);letter-spacing:.14em;font-size:21px;margin:0 0 8px;font-weight:400}
.p2-h2{font-family:var(--label);letter-spacing:.12em;font-size:17px;margin:16px 0 8px;font-weight:400;color:var(--muted)}
.p2-lead{margin:0 0 12px;color:#dcd8d1}
.p2-callout{margin:12px 0;padding:10px 12px;background:var(--panel-2);border-left:4px solid var(--red);border-radius:0 4px 4px 0;font-size:15px}
.p2-callout:empty{display:none}
.p2-more{margin:10px 0 0}
.p2-more > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted);font-size:14px}
.p2-why{margin:2px 0 8px}
.p2-f{display:block;min-width:0}
.p2-f__l{display:block;font-size:14px;color:var(--ink)}
.p2-f__l small{font-size:12.5px}
.p2-nw{white-space:nowrap}
.p2-chips{margin:8px 0 0}
.p2-chips:empty{display:none}
.p2-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 6px}
.p2-chiprow__l{font-size:14px;color:var(--muted);min-width:0;flex:1 1 180px}
.p2-list{margin:8px 0 0;padding-left:22px}
.p2-list li{margin:0 0 8px}
.p2-list:empty{display:none}
.p2-kv{margin:10px 0 4px;grid-template-columns:minmax(0,1fr) auto}
.p2-kv dd{text-align:right;white-space:nowrap}
.p2-pair{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:520px){.p2-pair{grid-template-columns:1fr 1fr}}
.p2-res{margin:8px 0 0;font-size:15px}
.p2-res:empty{display:none}

/* the big output: a number or a phrase, large, never cut mid-word */
.p2-total{margin:10px 0 6px}
.p2-total__l{font-family:var(--label);letter-spacing:.12em;font-size:19px}
.p2-total__v{font-family:var(--display);font-size:clamp(34px,10vw,56px);line-height:1.1}
.p2-bev{font-size:clamp(26px,7.5vw,44px);line-height:1.15}

/* utilization */
.p2-util{display:grid;grid-template-columns:1fr;gap:0 18px}
@media (min-width:640px){.p2-util{grid-template-columns:minmax(0,1fr) 150px;align-items:end}.p2-util__slide{grid-column:1}.p2-ticks{grid-column:1}.p2-util__box{grid-column:2;grid-row:1}}
input.p2-slider{padding:0;border:0;background:transparent;min-height:44px;accent-color:var(--red);cursor:pointer}
.p2-ticks{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0 2px 4px;font-size:12.5px;color:var(--muted)}
.p2-ticks span:first-child{flex:0 0 auto;white-space:nowrap}
.p2-ticks span:last-child{text-align:right}

/* the stack of streams */
.p2-stream{padding:12px 14px;margin:0 0 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-stream__h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.p2-stream__n{min-width:0}
.p2-stream__t{font-family:var(--display);font-size:22px;line-height:1.15;font-weight:400;margin:0 0 4px;text-transform:uppercase}
.p2-stream__m{text-align:right}
.p2-stream__m b{display:block;font-family:var(--display);font-size:22px;font-weight:400;line-height:1.15;white-space:nowrap}
.p2-stream__m small{display:block;font-size:12.5px}
.p2-stream__plain{margin:4px 0 0}
.p2-state{white-space:normal;font-size:13px}
.p2-trio{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:640px){.p2-trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.p2-fixed{margin:12px 0 0;color:var(--muted);font-size:14px;align-self:end;padding-bottom:12px}
.p2-formula{margin:8px 0 4px;padding:8px 10px;background:var(--panel);border-left:3px solid var(--line-2);border-radius:0 4px 4px 0;font-size:15px}
.p2-formula:empty{display:none}
.p2-bench{margin:6px 0 4px}
.p2-bench__more{font-size:14px}
.p2-refs{font-size:14px}
.p2-ex{margin:0 0 6px;font-size:14.5px}
.p2-sw{margin:12px 0 0}
.p2-kinds{display:grid;gap:10px;margin:8px 0 0}
.p2-kind{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-kind__b p{margin:2px 0 0}
.p2-kind__add{min-width:76px}
.p2-utiltbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p2-utiltbl th,.p2-utiltbl td,.p2-scentbl th,.p2-scentbl td,.p2-bal th,.p2-bal td{overflow-wrap:normal;word-break:normal}
/* in the phone cards the shared table puts each row's label beside its figure; a right-aligned figure must not drag the label right with it */
.p2-utiltbl td::before,.p2-scentbl td::before,.p2-bal td::before{text-align:left}
/* the first cell of a body row is that row's header (th scope=row, so a screen reader says which stream, scenario or month a figure belongs to); it keeps the look of the cell it replaced:
   the shared table styles a th as a column heading (muted, spaced capitals), so it is turned back into a body cell here */
.p2-utiltbl th[scope="row"],.p2-scentbl th[scope="row"],.p2-bal th[scope="row"]{font-family:inherit;letter-spacing:normal;color:inherit;padding:8px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:normal;word-break:normal}
.p2-scentbl tr.p2-base th[scope="row"],.p2-bemark th[scope="row"]{background:var(--red-wash)}
@media (min-width:640px){.p2-bal th[scope="row"]{padding:6px 5px;font-size:14px}}
@media (max-width:639px){
  .p2-utiltbl th[scope="row"],.p2-scentbl th[scope="row"]{display:flex;justify-content:space-between;gap:12px;width:100%;border:0;padding:4px 0}
  .p2-utiltbl th[scope="row"]::before,.p2-scentbl th[scope="row"]::before{content:attr(data-label);color:var(--muted);font-size:13px;flex:0 0 40%;text-align:left}
}

/* the P&L: a typical month, the balance table, the debt bars, the versions */
.p2-ledger{margin:8px 0 0}
.p2-led__r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.p2-led__l{min-width:0}
.p2-led__v{font-family:var(--display);font-size:18px;text-align:right;white-space:nowrap}
.p2-led__s{grid-column:1 / -1;font-size:12.5px}
.p2-led__t{border-bottom:2px solid var(--line-2)}
.p2-led__t .p2-led__l{font-weight:700}
.p2-led__gp .p2-led__v{font-size:22px}
.p2-bal{margin:10px 0 0}
.p2-datenote{margin:10px 0 0}
.p2-bal__t{display:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
.p2-bal__c{display:block}
@media (min-width:640px){.p2-bal__t{display:block}.p2-bal__c{display:none}}
.p2-mrow{padding:8px 12px;margin:0 0 8px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-mrow--be{border-color:var(--red);background:var(--red-wash)}
.p2-mrow__h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 4px}
.p2-mrow__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0}
.p2-mrow__g dt{font-size:12.5px;color:var(--muted);line-height:1.2}
.p2-mrow__g dd{margin:0;font-size:15px;font-weight:600;white-space:nowrap}
.p2-mrow__e{font-family:var(--display);font-weight:400;font-size:17px}
.p2-mrow__n{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
@media (min-width:640px){.p2-bal th,.p2-bal td{padding:6px 5px;font-size:14px}}
.p2-chart{margin:8px 0 0}
.p2-chart__r{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px;align-items:center;margin:4px 0}
.p2-chart__m{font-size:13px;color:var(--muted)}
.p2-chart__b{display:block;height:14px;background:var(--panel-3);border-radius:3px;overflow:hidden}
.p2-chart__b > i{display:block;height:100%;background:var(--red);min-width:0}
.p2-chart__v{font-weight:600;text-align:right;font-size:14px;white-space:nowrap}
.p2-ver{padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-ver__h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.p2-ver__tag,.p2-ver__stale{white-space:normal;font-size:13px}
.p2-ver__tag{border-color:var(--warn);color:var(--warn)}
.p2-ver__stale{border-color:var(--warn);color:var(--warn)}
.p2-ver__moved{margin:6px 0 4px}
.p2-ver__res{margin:4px 0 6px}

/* the three scenarios */
.p2-scentbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p2-scentbl tr.p2-base td{background:var(--red-wash)}
.p2-scen{padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-scen .p2-h2{margin:0 0 4px}

/* the ranking and the cards */
.p2-rank{padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-rank__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.p2-rank__n{font-family:var(--display);font-size:24px;color:var(--red-text);min-width:1.2em}
.p2-rank__s{margin-left:auto;font-family:var(--display);font-size:20px;white-space:nowrap}
.p2-rank__bar{height:10px;margin:6px 0;background:var(--panel-3);border-radius:5px;overflow:hidden}
.p2-rank__bar > i{display:block;height:100%;background:var(--red)}
.p2-rank__d{margin:6px 0 10px;padding-left:18px;font-size:14.5px}
.p2-rank__note{margin:0 0 10px;font-size:13.5px}
.p2-card{padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-card__h{font-family:var(--label);letter-spacing:.12em;font-size:19px;margin:0 0 4px}
.p2-card__th{margin:6px 0 0;padding:8px 10px;border-left:3px solid var(--blue);background:var(--panel);font-size:14.5px}
.p2-card__th:empty{display:none}

/* the tie-out and the exit ticket */
.p2-tie{padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-left-width:6px;border-radius:6px}
.p2-tie--match{border-left-color:var(--ok)}
.p2-tie--check{border-left-color:var(--bad)}
.p2-tie--missing{border-left-color:var(--warn)}
.p2-tie--note{border-left-color:var(--blue)}
.p2-tie__h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.p2-tie__cols{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:640px){.p2-tie__cols{grid-template-columns:1fr 1fr}}
.p2-tie__v{font-family:var(--display);font-size:20px;overflow-wrap:anywhere}
.p2-tie__s{margin:8px 0 0}
.p2-st--match{border-color:var(--ok);color:var(--ok)}
.p2-st--check{border-color:var(--bad);color:var(--bad)}
.p2-st--missing{border-color:var(--warn);color:var(--warn)}
.p2-st--note{border-color:var(--blue);color:var(--blue)}
.p2-ticketbox{border-left:6px solid var(--red)}
.p2-ticket{list-style:none;margin:0 0 10px;padding:0}
.p2-ticket__l{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.p2-ticket__k{color:var(--muted);font-size:14px}
.p2-ticket__v{font-family:var(--display);font-size:clamp(22px,6.5vw,34px);line-height:1.15;overflow-wrap:anywhere}

/* the practice case */
.p2-casecard{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px;margin:0 0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.p2-casecard__b p{margin:2px 0 0}
@media (min-width:640px){.p2-casecard{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.p2-casecard__btn{white-space:normal;text-align:center}
.p2-story p{margin:0 0 10px;color:#dcd8d1}
.p2-chain{margin:8px 0 0;padding-left:24px}
.p2-chain li{margin:0 0 8px}
.p2-chain__f{display:block;font-size:13px}
.p2-ans{padding:4px 0 8px;border-bottom:1px solid var(--line)}
.p2-ans__r{margin:4px 0 0;font-size:14.5px}
.p2-ans__r:empty{display:none}
.p2-ans[data-state="ok"] .p2-ans__r{color:var(--ok)}
.p2-ans[data-state="no"] .p2-ans__r{color:var(--warn)}