/* Venue Numbers: the "See a model" drawer (DOCS). Class prefix ex-. Uses the tokens of app.css.
   Phone first: nothing needs a horizontal page scroll at 320 px; the wide tables stack on a phone and scroll inside their own box on a laptop. */
.ex{display:block;font-size:15.5px;line-height:1.5}
.ex-banner{display:inline-block;margin:0 0 8px;padding:4px 12px;border:2px solid var(--red);border-radius:3px;background:var(--red-wash);color:#fff;font-family:var(--label);letter-spacing:.14em;font-size:17px;text-transform:uppercase}
.ex-p{margin:0 0 10px;color:var(--ink)}
.ex-p.ex-says{padding:8px 12px;border-left:3px solid var(--blue);background:var(--panel-2);font-style:italic}
.ex-big{margin:0 0 10px;font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:.01em;text-transform:none}
.ex-note{padding:8px 12px;border:1px dashed var(--warn);border-radius:4px;color:var(--ink);background:rgba(242,179,61,.08)}
.ex-hint{margin-left:8px;color:var(--muted);font-size:13.5px}
.ex-tag{margin:6px 0 12px;color:var(--muted)}
.ex-tag b{color:var(--ink);font-weight:600}

/* picker: three buttons side by side (on a phone only the name shows; the line under them says the rest) */
.ex-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 6px}
@media (max-width:639px){.ex-tab span{display:none}.ex-tab{padding:8px;justify-content:center}.ex-tab b{font-size:14px;line-height:1.25}}
.ex-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:8px 12px;text-align:left;background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;cursor:pointer}
.ex-tab b{font-weight:600;font-size:15.5px;overflow-wrap:normal;word-break:normal}
.ex-tab span{color:var(--muted);font-size:13.5px}
.ex-tab:hover{background:var(--panel-3)}
.ex-tab[aria-pressed=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-wash)}
.ex-tab[aria-pressed=true] span{color:var(--ink)}

.ex-h{margin:14px 0 6px;font-family:var(--label);letter-spacing:.12em;font-size:17px;color:var(--muted);text-transform:uppercase;font-weight:400}
.ex-answer,.ex-why{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.ex-why{border-left:3px solid var(--ok)}
.ex-why .ex-h{margin-top:2px}
.ex-dl{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 6px}
.ex-dl dt{margin:8px 0 0;color:var(--muted);font-size:13.5px}
.ex-dl dd{margin:0;color:var(--ink)}
@media (min-width:640px){.ex-dl{grid-template-columns:minmax(150px,26%) 1fr;column-gap:14px}.ex-dl dt{margin:0;padding:6px 0;border-bottom:1px solid var(--line)}.ex-dl dd{padding:6px 0;border-bottom:1px solid var(--line)}}
.ex-ul{margin:0 0 8px;padding-left:20px}
.ex-ul li{margin:3px 0}
.ex-det{margin:8px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.ex-det>summary{cursor:pointer;min-height:44px;padding:10px 12px;display:flex;align-items:center;font-weight:600}
.ex-det[open]>summary{border-bottom:1px solid var(--line)}
.ex-det>*:not(summary){margin-left:12px;margin-right:12px}
.ex-det>*:last-child{margin-bottom:12px}
.ex-det>.ex-h:first-of-type{margin-top:10px}

/* tables: numbers sit on the right and never break */
.ex-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 10px;max-width:100%}
.ex-tbl{width:100%;border-collapse:collapse;font-size:14.5px;overflow-wrap:break-word}
.ex-tbl th{font-family:var(--label);letter-spacing:.08em;font-weight:400;font-size:15px;text-align:left;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.ex-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ex-tbl .ex-num,.ex-tbl td.ex-num{text-align:right;white-space:nowrap;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}
.ex-tbl th.ex-num{text-align:right}
.ex-tbl tr.ex-total td{font-weight:700;border-top:2px solid var(--line-2)}
.ex-wide{min-width:560px}
@media (max-width:639px){
  .ex-tbl:not(.ex-wide):not(.ex-compact) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ex-tbl:not(.ex-wide):not(.ex-compact),.ex-tbl:not(.ex-wide):not(.ex-compact) tbody,.ex-tbl:not(.ex-wide):not(.ex-compact) tr,.ex-tbl:not(.ex-wide):not(.ex-compact) td{display:block;width:100%}
  .ex-tbl:not(.ex-wide):not(.ex-compact) tr{border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:0 0 10px;background:var(--panel-2)}
  .ex-tbl:not(.ex-wide):not(.ex-compact) td{border:0;padding:4px 0}
  .ex-tbl:not(.ex-wide):not(.ex-compact) .ex-num{text-align:left}
  .ex-tbl:not(.ex-wide):not(.ex-compact) td::before{content:attr(data-label);display:block;color:var(--muted);font-size:12.5px;letter-spacing:.04em}
}

/* the model's big numbers (capacity, nut, debt) */
.ex-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 10px}
@media (min-width:640px){.ex-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ex-tile{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--panel-2);min-width:0}
.ex-tile__l{display:block;color:var(--muted);font-size:13px}
.ex-tile__v{display:block;font-family:var(--display);font-size:22px;line-height:1.15;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.ex-tile__v--text{white-space:normal;font-size:19px;line-height:1.2}
@media (max-width:359px){.ex-tile__v{font-size:19px}.ex-tile__v--text{font-size:17px}.ex-tile{padding:8px}}
/* an amount in a sentence never splits: the minus sign stays with its dollars (body breaks anywhere, which let "-$80,787" part at 320 px) */
.ex-nb{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.ex-tile__s{display:block;color:var(--muted);font-size:12.5px}

.ex-dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.ex-dl-row b{flex:1 1 100%}