/* Page layout, hero card, drawers and modals */
/* ===== full-page layout ===== */
.wrap { max-width: 1440px; padding-block: 20px var(--space-xl); padding-left: max(var(--space-lg), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-lg), env(safe-area-inset-right, 0px)); gap: 20px; }
@media (max-width: 600px) { .wrap { padding-left: max(var(--space-sm), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-sm), env(safe-area-inset-right, 0px)); } }
.view { display: grid; gap: 20px; }
/* until the account's data is in, the views wait and one quiet line says so */
.app-loading { display: none; margin: 0; padding: var(--space-2xl) 0; text-align: center; color: var(--muted); }
.app-wait .app-loading { display: block; }
noscript .app-loading { display: block; }
.app-wait [role="tabpanel"] { display: none !important; }
.view > *, .record-pair > * { min-width: 0; } /* wide tables scroll inside their panel instead of widening the page */
/* one row: brand, tabs, toolbar; below 1200px the tabs take a second row */
header.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md) var(--space-lg); }
header.top .tabs { justify-self: center; gap: var(--space-3xs); }
@media (max-width: 1199px) { header.top { grid-template-columns: minmax(0, 1fr) auto; } header.top .tabs { justify-self: start; grid-column: 1 / -1; grid-row: 2; } }
header.top .tab { padding: var(--space-xs) var(--space-sm); }
.toolbar { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1000px) {
  .toolbar { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; }
}
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-btn { appearance: none; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--radius-control); cursor: pointer; background: var(--panel); color: var(--fg); border: 1px solid var(--field-edge); transition: border-color var(--dur-micro) ease, transform var(--dur-micro) ease, background-color var(--dur-micro) ease; }
.icon-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); }
.btn .ic { width: 18px; height: 18px; }
.btn.icon-only { width: 32px; padding: 0; justify-content: center; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
@media (max-width: 480px) { .toolbar .btn.primary span { display: none; } .toolbar .btn.primary { width: 40px; padding: 0; justify-content: center; } }

/* hero: balance card across the page, stats inside it */
.hero { padding: 28px var(--space-lg) 20px; }
@media (min-width: 900px) { .hero { padding-right: 240px; } }
.detective { position: absolute; right: 18px; bottom: 0; width: 190px; height: 250px; pointer-events: none; }
@media (max-width: 899px) { .detective, .bubble { display: none; } }
.bubble { position: absolute; right: 22px; top: 18px; width: 210px; background: var(--sheet); color: var(--fg); border-radius: var(--radius-panel); padding: var(--space-sm); font: italic 400 var(--text-sm)/1.45 var(--font-body); box-shadow: var(--shadow-raise); }
.hero .bubble { --fg: var(--ink); background: var(--on-dark); }
.bubble::after { content: ""; position: absolute; left: 46px; bottom: -8px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); }
.bubble [data-quote] { transition: opacity .5s ease; } .js .bubble .fade { opacity: 0; }
@media (min-width: 900px) { .hero:has(.bubble) .detective { bottom: 0; height: 230px; } }
/* ===== the lead: the balance panel beside the phase plan, the figures in one strip below ===== */
.lead-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(300px, 2fr); gap: var(--space-md); align-items: stretch; }
.lead-grid.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .lead-grid { grid-template-columns: minmax(0, 1fr); } }
.lead-side { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.lead-grid:not(.single) .goal { text-align: start; } /* the goal sits under the balance here, so it lines up on the left */
.lead-grid:not(.single) .hero-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
/* the figures: one strip of readings split by hairlines, not seven boxes */
.lead-grid > .stats { grid-column: 1 / -1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.lead-grid.single > .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lead-grid > .stats .stat { border: 0; border-radius: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
@media (max-width: 1100px) { .lead-grid > .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lead-grid.single > .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lead-grid > .stats, .lead-grid.single > .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* $100 -> $100M: a narrower corner for the professor, so the bar and the readings get the width */
@media (min-width: 900px) {
  .lead-grid:not(.single) .hero { padding-right: 216px; }
  .lead-grid:not(.single) .hero .bubble { width: 176px; right: 20px; }
}
/* the three readings on one row, each label over its figure */
@media (min-width: 1200px) { .lead-grid .hero-next { grid-template-columns: repeat(3, max-content); column-gap: var(--space-xl); } }
/* the side panel: the phases at the top, the case file level with the balance panel's legend */
.lead-side { align-content: space-between; }
.lead-side .cb-tokens { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* phone: a lone last figure takes the whole row */
@media (max-width: 480px) { .lead-grid > .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Prop firm: a shorter balance panel, so a smaller professor that fits inside it */
@media (min-width: 900px) {
  .lead-grid.single .hero .detective.prof { width: 124px; height: 176px; }
  .lead-grid.single .hero .bubble { bottom: 182px; }
  .lead-grid.single .hero .bubble::after { right: 70px; }
  .lead-grid.single .hero { min-height: 290px; }
}
.grid2.wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid2.wide { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1300px) { .day { min-height: 104px; } }
footer { text-align: center; }

/* ===== drawers & modals ===== */
.backdrop { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity .25s ease; }
.backdrop.on { opacity: 1; }
/* an open window holds the page still (the page scrolls on html, see 01-base) */
html:has(> body.locked) { overflow-y: hidden; }
.sheet { position: fixed; z-index: 45; display: flex; flex-direction: column; visibility: hidden; background: var(--panel); color: var(--fg); border: 0; box-shadow: var(--shadow-float); transition: transform .3s var(--ease-out), opacity .25s ease, visibility 0s .3s; }
.sheet.idle { content-visibility: hidden; } /* closed: its content is not laid out or painted */
.sheet.open { visibility: visible; transition: transform .3s var(--ease-out), opacity .25s ease, visibility 0s; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-sm) 20px; border-bottom: 1px solid var(--line); border-top: 3px solid var(--accent); }
.sheet-head h2 { margin: 0; flex: 1; min-width: 0; }
.sheet-sub { font-size: var(--text-sm); }
.sheet-body { overflow-y: auto; padding: 20px 20px var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.sheet .panel { box-shadow: none; }
.drawer { top: 0; right: 0; bottom: 0; width: min(580px, 100%); transform: translateX(104%); border-radius: 0; padding-right: env(safe-area-inset-right, 0px); padding-top: env(safe-area-inset-top, 0px); }
.drawer.open { transform: none; }
.modal { left: 50%; top: 50%; width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 40px); border-radius: var(--radius-panel); opacity: 0; transform: translate(-50%, -46%) scale(.97); }
.modal.open { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 600px) {
  .modal { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 88dvh; border-radius: var(--radius-panel) var(--radius-panel) 0 0; opacity: 1; transform: translateY(104%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal.open { transform: none; }
}