/* =========================================================================
   app.css — Campus Lease Studio layout & component styles.
   Builds on stratosfyre.css tokens.
   ========================================================================= */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: hsl(var(--c-background));
  color: hsl(var(--c-foreground));
  font-family: var(--font-sans);
  overflow: hidden;
}

/* Keep sign-in content reachable when the card is taller than the viewport. */
.signin-card {
  width: min(420px, 100%);
  padding: 32px 36px;
  margin-block: auto;
  flex-shrink: 0;
}
.signin-shell input:not([type="checkbox"]) {
  transition: box-shadow 160ms ease;
}
.signin-shell input:not([type="checkbox"]):focus-visible {
  box-shadow: 0 0 0 4px hsl(var(--c-ring) / 0.12);
}
.signin-shell :is(button, a) {
  transition: box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .signin-shell :is(button:not(:disabled), a):hover {
    box-shadow: 0 0 0 1px hsl(var(--c-primary) / 0.5);
  }
}
.signin-shell button:not(:disabled):active {
  box-shadow: inset 0 0 0 2px hsl(var(--c-foreground) / 0.2);
}

/* touch-friendly tap targets */
.nav-item,
.btn,
.input,
.select,
.theme-toggle button {
  min-height: 44px;
  min-width: 44px;
}
.nav-item {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* layout shell */
.shell {
  display: grid;
  grid-template-columns: 17rem 1fr;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  background: hsl(var(--c-background));
}

.sidebar {
  grid-row: 1 / span 2;
  background: hsl(var(--c-surface-deep));
  border-right: 1px solid hsl(var(--c-border-subtle));
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.sidebar::before {
  display: none;
}
.sidebar > * {
  position: relative;
  z-index: 1;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid hsl(var(--c-border-subtle));
}
.brand-mark {
  height: 32px;
  display: flex;
  align-items: center;
  color: hsl(var(--c-primary));
}
.brand-mark img {
  height: 32px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
.brand-mark:hover img {
  transform: scale(1.02);
}
.brand-meta {
  line-height: 1.15;
}
.brand-sub {
  font-size: 11px;
  color: hsl(var(--c-foreground-muted));
  margin-top: 2px;
}

.nav {
  padding: var(--space-3) var(--space-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.nav-group + .nav-group {
  margin-top: var(--space-5);
}
.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--c-foreground-muted));
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: hsl(var(--c-foreground-muted));
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  white-space: nowrap;
  position: relative;
}
.nav-item:hover {
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-muted) / 0.4);
}
.nav-item.active {
  background: hsl(var(--c-muted) / 0.7);
  border-color: hsl(var(--c-border));
  color: hsl(var(--c-foreground));
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: hsl(var(--c-primary));
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease;
}
.nav-item.active .nav-icon {
  color: hsl(var(--c-primary));
}
.nav-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.sidebar-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid hsl(var(--c-border-subtle));
  font-size: 11px;
  color: hsl(var(--c-foreground-muted));
  white-space: nowrap;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.key-risk-row {
  align-items: flex-start;
}
.key-risk-dot {
  margin-top: 5px;
  flex-shrink: 0;
}
.key-risk-name {
  font: 500 13px/1.4 var(--font-sans);
}
.key-risk-detail {
  font: 500 12px/1.45 var(--font-sans);
  color: hsl(var(--c-foreground-muted));
  margin-top: 2px;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* min-width: 0 lets this grid item shrink below its content's min-content width —
     without it the non-wrapping actions row sets a ~1377px floor on the whole content
     column, putting a horizontal scrollbar on every route below ~1650px viewports. */
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid hsl(var(--c-border-subtle));
  background: hsl(var(--c-background) / 0.85);
  backdrop-filter: blur(16px);
}
.header > div:first-of-type {
  min-width: 0;
}
@media (min-width: 769px) {
  .header > div:first-of-type {
    flex: 0 1 240px;
    min-width: 10rem;
  }
}
@media (max-width: 768px) {
  .header > div:first-of-type {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Compact header: Workspace tools popup (native details) */
.header {
  position: relative;
  z-index: 30;
}
.header-tools {
  position: static;
}
.header-tools > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--c-border));
  background: hsl(var(--c-card));
  font: 500 13px/1 var(--font-sans);
  color: hsl(var(--c-foreground-muted));
  white-space: nowrap;
}
.header-tools > summary::-webkit-details-marker {
  display: none;
}
.header-tools > summary:hover {
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-muted) / 0.5);
}
.header-tools[open] > summary {
  color: hsl(var(--c-foreground));
}
.header-tools-popup {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: var(--space-3);
  z-index: 60;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.header-tools-popup .theme-toggle-menu {
  display: inline-flex;
}
.header-tools-popup .btn.ghost {
  min-height: 36px;
}
@media (max-width: 480px) {
  .header-actions .theme-toggle-menu {
    display: inline-flex;
  }
}
.header h1 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--c-foreground-muted));
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Wrap the chrome onto extra rows instead of forcing the column wider. */
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: var(--space-2);
}
.header-context {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-3);
  margin-right: var(--space-1);
  border-right: 1px solid hsl(var(--c-border-subtle));
}

.main {
  grid-column: 2;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.page {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  animation: pageEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page.dense {
  padding: var(--space-6) var(--space-6);
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Directional page transitions */
main.page-enter-right .page {
  animation: pageEnterRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
main.page-enter-left .page {
  animation: pageEnterLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageEnterRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pageEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Staggered card reveals inside page */
.page .card {
  animation: cardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page .card:nth-child(1) {
  animation-delay: 0.04s;
}
.page .card:nth-child(2) {
  animation-delay: 0.08s;
}
.page .card:nth-child(3) {
  animation-delay: 0.12s;
}
.page .card:nth-child(4) {
  animation-delay: 0.16s;
}
.page .card:nth-child(5) {
  animation-delay: 0.16s;
}
.page .card:nth-child(6) {
  animation-delay: 0.16s;
}
.page .card:nth-child(7) {
  animation-delay: 0.16s;
}
.page .card:nth-child(8) {
  animation-delay: 0.16s;
}
.page .card:nth-child(9) {
  animation-delay: 0.16s;
}
.page .card:nth-child(10) {
  animation-delay: 0.16s;
}
.page .card:nth-child(11) {
  animation-delay: 0.16s;
}
.page .card:nth-child(12) {
  animation-delay: 0.16s;
}
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* segmented / select / button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-border));
  color: hsl(var(--c-foreground));
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px hsl(var(--c-shadow) / 0.12);
  border-color: hsl(var(--c-border));
  background: hsl(var(--c-card-elevated));
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn.primary {
  background: hsl(var(--c-primary));
  color: hsl(var(--c-primary-fg));
  border-color: hsl(var(--c-primary));
  box-shadow: none;
}
.btn.primary:hover {
  background: hsl(var(--c-primary-glow));
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: hsl(var(--c-foreground-muted));
}
.btn.ghost:hover {
  background: hsl(var(--c-muted) / 0.5);
  color: hsl(var(--c-foreground));
}
.btn.ghost.danger {
  color: hsl(var(--c-destructive));
}
.btn.ghost.danger:hover {
  background: hsl(var(--c-destructive) / 0.12);
  color: hsl(var(--c-destructive));
}

.select {
  background: hsl(var(--c-card));
  color: hsl(var(--c-foreground));
  border: 1px solid hsl(var(--c-border));
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 12px;
  font: 500 13px/1 var(--font-sans);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a9b0c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,4.5 6,7.5 9,4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.select:focus {
  outline: 2px solid hsl(var(--c-ring) / 0.4);
  outline-offset: 1px;
}

.input {
  background: hsl(var(--c-card));
  color: hsl(var(--c-foreground));
  border: 1px solid hsl(var(--c-border));
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font: 500 13px/1.2 var(--font-mono);
  width: 100%;
}
.input:focus {
  outline: 2px solid hsl(var(--c-ring) / 0.4);
  outline-offset: 1px;
  border-color: hsl(var(--c-primary));
}

/* card */
.card {
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-border-subtle));
  border-radius: var(--radius-lg);
  position: relative;
}
.card-pad {
  padding: var(--space-5);
}
.card-pad-lg {
  padding: var(--space-6);
}

.card.elevated {
  background: hsl(var(--c-card));
  border-color: hsl(var(--c-border-subtle));
  box-shadow: var(--shadow-md);
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.card.elevated:hover {
  box-shadow: 0 4px 20px hsl(var(--c-shadow) / 0.15);
  border-color: hsl(var(--c-border));
}

.card.glow {
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-primary) / 0.55);
  box-shadow:
    0 0 0 1px hsl(var(--c-primary) / 0.12),
    var(--shadow-md);
  overflow: hidden;
}
.card.glow::after {
  display: none;
}
.dark .card.elevated,
.dark .card.glow {
  background: hsl(var(--c-card));
}
.card-btn {
  background: transparent;
}

/* clickable card wrapper (replaces all:unset so focus outline is preserved) */
.card-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card-btn:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.card-btn > .card {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-btn:hover > .card {
    border-color: hsl(var(--c-primary) / 0.65);
    box-shadow: 0 0 0 1px hsl(var(--c-primary) / 0.12);
  }
}
.card-btn:active > .card {
  box-shadow: inset 0 0 0 1px hsl(var(--c-primary) / 0.4);
}
.source-link {
  color: hsl(var(--c-info));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.source-link:hover {
  text-decoration-thickness: 2px;
}

/* well / callout — token-backed summary boxes */
.well {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: hsl(var(--c-card-elevated));
  border: 1px solid hsl(var(--c-border-subtle));
}

/* labels */
.eyebrow {
  font: 500 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--c-foreground-muted));
  white-space: nowrap;
}
.card .eyebrow {
  min-width: 0;
  white-space: normal;
  line-height: 1.4;
}
.label {
  font: 500 11px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--c-foreground-muted));
}

.stat-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" on,
    "lnum" on;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* divider */
.hr {
  height: 1px;
  background: hsl(var(--c-border-subtle));
  border: none;
  margin: 0;
}

/* pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11px/1 var(--font-sans);
  padding: 4px 9px;
  border-radius: 999px;
  background: hsl(var(--c-muted) / 0.6);
  color: hsl(var(--c-foreground-muted));
  border: 1px solid hsl(var(--c-border-subtle));
  white-space: nowrap;
  font-weight: 500;
}
.pill.success {
  background: hsl(var(--c-success) / 0.12);
  color: hsl(var(--c-success));
  border-color: hsl(var(--c-success) / 0.3);
}
.pill.warn {
  background: hsl(var(--c-warning) / 0.12);
  color: hsl(var(--c-warning));
  border-color: hsl(var(--c-warning) / 0.3);
}
.pill.danger {
  background: hsl(var(--c-destructive) / 0.12);
  color: hsl(var(--c-destructive));
  border-color: hsl(var(--c-destructive) / 0.3);
}
.pill.info {
  background: hsl(var(--c-info) / 0.12);
  color: hsl(var(--c-info));
  border-color: hsl(var(--c-info) / 0.3);
}
.pill.brand {
  background: hsl(var(--c-primary) / 0.12);
  color: hsl(var(--c-primary));
  border-color: hsl(var(--c-primary) / 0.3);
}

/* Light mode: darken pill text so it passes WCAG AA on the tinted background. */
@media (prefers-color-scheme: light) {
  html:not(.dark) .pill.success,
  .light .pill.success {
    color: hsl(var(--c-success));
  }
  html:not(.dark) .pill.warn,
  .light .pill.warn {
    color: hsl(var(--c-warning));
  }
  html:not(.dark) .pill.danger,
  .light .pill.danger {
    color: hsl(var(--c-destructive));
  }
  html:not(.dark) .pill.info,
  .light .pill.info {
    color: hsl(var(--c-info));
  }
  html:not(.dark) .pill.brand,
  .light .pill.brand {
    color: hsl(var(--c-primary));
  }
}

/* Dark mode: lighten pill text where semantic colors need AA contrast on tinted backgrounds. */
.dark .pill.danger {
  color: hsl(var(--c-destructive));
}
.dark .pill.info {
  color: hsl(var(--c-info));
}
.dark .pill.brand {
  color: hsl(var(--c-primary));
}

/* table */
.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th,
.table td {
  text-align: right;
  padding: 10px 12px;
}
.table th:first-child,
.table td:first-child {
  text-align: left;
}
.table thead th {
  font: 500 11px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--c-foreground-muted));
  border-bottom: 1px solid hsl(var(--c-border));
  padding: 12px;
}
.table tbody tr {
  border-bottom: 1px solid hsl(var(--c-border-subtle));
}
.table tbody tr:hover {
  background: hsl(var(--c-muted) / 0.25);
}
.table tbody tr:last-child {
  border-bottom: none;
}
.table td {
  font-variant-numeric: tabular-nums;
  color: hsl(var(--c-foreground));
}
.table td.muted {
  color: hsl(var(--c-foreground-muted));
}
.table .row-label {
  font-weight: 500;
  color: hsl(var(--c-foreground));
}
.table .row-emph {
  font-weight: 600;
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-muted) / 0.15);
}
.table-scroll {
  overflow: auto;
}

/* cashflow table — sticky thead + first col, column-group separators, mini bars */
.table-scroll.has-sticky {
  max-height: 520px;
  overflow: auto;
}
.table-cashflow {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.table-cashflow--compact {
  table-layout: fixed;
  font-size: 11px;
}
.table-cashflow--compact th,
.table-cashflow--compact td {
  padding-left: 7px;
  padding-right: 7px;
  overflow-wrap: anywhere;
}
.table-cashflow--compact .col-ebitda,
.table-cashflow--compact thead th.col-ebitda,
.table-cashflow--compact .col-ebitda .ebitda-cell {
  min-width: 0;
}
.table-cashflow tbody tr {
  transition: background 0.12s ease;
}
.table-cashflow thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  isolation: isolate;
  background: hsl(var(--c-card));
  background-image: linear-gradient(
    180deg,
    hsl(var(--c-card)) 0%,
    hsl(var(--c-card)) 88%,
    hsl(var(--c-border) / 0.55) 100%
  );
  border-bottom: 1px solid hsl(var(--c-border));
  /* full-strength foreground — the muted .table default reads too faint on a
     dense numeric grid, especially in light mode */
  color: hsl(var(--c-foreground));
  font-weight: 600;
}
.table-cashflow tbody td:first-child,
.table-cashflow thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: hsl(var(--c-card));
}
.table-cashflow thead th:first-child {
  z-index: 11;
}
.table-cashflow .row-opening:hover td,
.table-cashflow .row-footer:hover td {
  background: hsl(var(--c-card-elevated) / 0.7) !important;
}
.table-cashflow .row-opening:hover td.row-label,
.table-cashflow .row-footer:hover td:first-child {
  background: hsl(var(--c-card-elevated)) !important;
}
.table-cashflow tbody tr:hover td:first-child {
  background: hsl(var(--c-muted) / 0.45);
}
.table-cashflow tbody tr.row-opening td:first-child,
.table-cashflow tbody tr.row-footer td:first-child {
  background: hsl(var(--c-card-elevated));
}
/* Subtle row striping for scannability across 25 rows */
.table-cashflow
  tbody
  tr:nth-child(even):not(.row-opening):not(.row-footer):not(:hover)
  td {
  background: hsl(var(--c-card) / 0.4);
}
.table-cashflow
  tbody
  tr:nth-child(even):not(.row-opening):not(.row-footer):not(:hover)
  td:first-child {
  background: hsl(var(--c-card));
}
.table-cashflow th,
.table-cashflow td {
  padding: 9px 11px;
  vertical-align: middle;
}
.table-cashflow td.row-label {
  letter-spacing: 0.02em;
}
.table-cashflow .col-group-end {
  box-shadow: inset -1px 0 0 hsl(var(--c-border-subtle) / 0.7);
}
.table-cashflow .row-opening td {
  background: hsl(var(--c-card-elevated) / 0.55);
  color: hsl(var(--c-foreground-muted));
}
.table-cashflow .row-opening td.row-label,
.table-cashflow .row-opening td.row-emph {
  font-style: normal;
}
.table-cashflow tbody tr:first-child td {
  border-bottom: 1px solid hsl(var(--c-border) / 0.7);
}
.table-cashflow .row-footer {
  border-top: 1px solid hsl(var(--c-border));
}
.table-cashflow .row-footer td {
  background: hsl(var(--c-card-elevated) / 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: hsl(var(--c-foreground-muted));
  padding-top: 14px;
  padding-bottom: 14px;
}
.table-cashflow .row-footer td.mono-val {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: hsl(var(--c-foreground));
}
.table-cashflow .ebitda-cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6px;
  min-height: 100%;
  z-index: 0;
}
.table-cashflow .ebitda-cell .ebitda-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: hsl(var(--c-border-subtle) / 0.6);
  overflow: hidden;
}
.table-cashflow .ebitda-cell .ebitda-bar i {
  display: block;
  height: 100%;
  border-radius: 1px;
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.table-cashflow tr.is-steady td:first-child::after {
  content: "Steady";
  display: inline-block;
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: hsl(142 76% 46% / 0.18);
  color: hsl(142 76% 65%);
  border: 1px solid hsl(142 76% 46% / 0.35);
  vertical-align: middle;
}
.table-cashflow .col-ebitda {
  min-width: 96px;
  white-space: normal;
}
.table-cashflow thead th.col-ebitda {
  min-width: 104px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  background-color: hsl(var(--c-card));
  background-clip: padding-box;
}
.table-cashflow .col-ebitda .ebitda-cell {
  min-width: 84px;
}

/* Explicit paint boundaries for the developer drawdown sparkline. The SVG
   uses full-width endpoint dots, so both its frame and card must clip. */
.drawdown-profile-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  contain: paint;
}
.drawdown-scurve-frame {
  width: 100%;
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  overflow: hidden;
}
.drawdown-scurve-frame > div,
.drawdown-scurve-frame svg.spark {
  display: block;
  width: 100%;
  height: 280px;
  max-width: 100%;
  overflow: hidden;
}

.executive-cashflow {
  min-width: 0;
}
.executive-cashflow .card,
.executive-cashflow .chart-cashflow {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.executive-cashflow-metrics {
  margin-top: var(--space-4);
}

/* Assumptions page — TOC chip rail + group numbering */
.assumption-toc {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  margin: 0 calc(-1 * var(--space-5)) 8px;
  background: hsl(var(--c-card) / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--c-border-subtle));
}
.assumption-toc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  font: 500 12px/1.2 var(--font-sans);
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-card-elevated));
  border: 1px solid hsl(var(--c-border-subtle));
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}
.assumption-toc-chip:hover {
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-muted) / 0.4);
  border-color: hsl(var(--c-border));
}
.assumption-toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: hsl(var(--c-foreground));
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-border-subtle));
  border-radius: 999px;
}
.assumption-toc-chip:hover .assumption-toc-num {
  color: hsl(var(--c-foreground));
}
.assumption-group {
  scroll-margin-top: 80px;
}
.assumption-group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: hsl(var(--c-foreground-muted));
  background: hsl(var(--c-card-elevated));
  border: 1px solid hsl(var(--c-border-subtle));
  border-radius: 8px;
  margin-top: 2px;
}
.table-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--c-border));
  border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* hero summary */
.summary-hero {
  padding: 40px 40px 32px;
  margin-bottom: 28px;
}
.hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 60% 80% at 50% 0%,
      hsl(var(--c-card-elevated)),
      transparent 70%
    ),
    linear-gradient(180deg, hsl(var(--c-card)), hsl(var(--c-surface-deep)));
  border: 1px solid hsl(var(--c-border));
}
.hero-stars {
  display: none;
}

.star-twinkle {
  opacity: var(--star-o);
  animation: star-twinkle var(--star-dur) ease-in-out infinite;
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: var(--star-o);
  }
  50% {
    opacity: calc(var(--star-o) * 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .star-twinkle {
    animation: none;
    opacity: var(--star-o);
  }
}

/* progress bar */
.bar {
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--c-muted) / 0.7);
  position: relative;
  overflow: hidden;
}
.bar > i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, hsl(24 95% 55%), hsl(35 90% 55%));
  border-radius: 999px;
}

/* sparkline container */
.spark {
  display: block;
  width: 100%;
  height: 36px;
}

/* benchmarks */
.benchmark-row {
  align-items: center;
}
.benchmark-metric {
  font: 500 13px/1.35 var(--font-sans);
  color: hsl(var(--c-foreground));
}
.benchmark-source {
  font: 500 11px/1.4 var(--font-sans);
  color: hsl(var(--c-foreground-muted));
  margin-top: 4px;
}
.benchmark-actions {
  justify-content: flex-end;
  gap: 6px;
}
.benchmark-delete {
  padding: 2px 6px;
  font-size: 15px;
  line-height: 1;
  min-height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* model checks accordion */
.model-check-area-header {
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: hsl(var(--c-foreground));
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.model-check-area-header:hover {
  background: hsl(var(--c-muted) / 0.25);
}
.model-check-chevron {
  font-size: 12px;
  color: hsl(var(--c-foreground-muted));
  transition: transform 0.15s ease;
}
.model-check-table {
  font-size: 13px;
}
.model-check-table td {
  vertical-align: top;
}
.model-check-fail-summary .status-dot {
  margin-top: 5px;
  flex-shrink: 0;
}
.model-check-area-header .pill {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* page header strip */
.page-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-strip > * {
  min-width: 0;
}
.page-strip .row {
  flex-wrap: wrap;
}
.hero .row {
  flex-wrap: wrap;
}
.card .row {
  flex-wrap: wrap;
} /* chart legends / control rows wrap instead of overflowing */
.page-strip .lede {
  color: hsl(var(--c-foreground-muted));
  font-size: 13px;
  max-width: 56ch;
}
.lede-sm {
  color: hsl(var(--c-foreground-muted));
  font-size: 12px;
  line-height: 1.5;
  max-width: 72ch;
}

/* grids */
.grid {
  display: grid;
  gap: var(--space-4);
}
.g-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.g-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Phase 12 board-cost panel: keep audit columns available without causing
   page-level overflow, and let long evidence copy wrap inside its own cells. */
.board-cost-schedule {
  min-width: 640px;
  table-layout: fixed;
}
.board-cost-schedule-card {
  contain: inline-size;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.board-cost-schedule-card .table-scroll {
  width: 100%;
  max-width: 100%;
}
.board-cost-schedule th,
.board-cost-schedule td {
  overflow-wrap: anywhere;
  vertical-align: top;
}
.board-cost-schedule th:first-child {
  width: 22%;
}
.board-cost-schedule th:nth-child(2) {
  width: 11%;
}
.board-cost-schedule th:nth-child(3) {
  width: 13%;
}
.board-cost-schedule th:nth-child(4) {
  width: 17%;
}
.board-cost-schedule th:nth-child(5) {
  width: 12%;
}
.board-cost-schedule th:nth-child(6) {
  width: 25%;
}
.board-cost-schedule .pill {
  white-space: nowrap;
}
.board-yield-bridge-values {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Side-by-side panels (chart + sidebar card); collapse to one column on small screens. */
.g-2-1 {
  grid-template-columns: 2fr 1fr;
}
.g-1-2 {
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 1200px) {
  .g-4,
  .g-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* KPI-card strip: responsive n-up that adapts to card count (used where the count
   varies by data, unlike the fixed .g-4 strips). */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* kbd */
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid hsl(var(--c-border));
  border-radius: 4px;
  color: hsl(var(--c-foreground-muted));
  background: hsl(var(--c-muted) / 0.4);
}

/* scenario chip in header */
.scenario-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--c-border));
  background: hsl(var(--c-card));
  font-size: 12px;
}
.scenario-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--c-primary));
  box-shadow: 0 0 8px hsl(var(--c-primary));
}

/* Delight: Live indicator pulse */
@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 6px hsl(var(--c-success));
    opacity: 1;
  }
  50% {
    box-shadow:
      0 0 14px hsl(var(--c-success)),
      0 0 22px hsl(var(--c-success) / 0.35);
    opacity: 0.85;
  }
}
.status-dot-live {
  animation: none;
}

/* Delight: Scenario chip pop on switch */
@keyframes chip-pop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
.scenario-chip-pop {
  animation: chip-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Delight: KPI copy-hover affordance */
.stat-display-copyable {
  cursor: pointer;
}
.stat-display-copyable:hover {
  opacity: 0.88;
}

/* prose */
.prose p {
  font-size: 14px;
  line-height: 1.65;
  color: hsl(var(--c-foreground-muted));
}
.prose p strong {
  color: hsl(var(--c-foreground));
  font-weight: 600;
}

/* utilities */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.between {
  justify-content: space-between;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-6 {
  gap: 24px;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.fg-muted {
  color: hsl(var(--c-foreground-muted));
}
.fg-success {
  color: hsl(var(--c-success));
}
.fg-warning {
  color: hsl(var(--c-warning));
}
.fg-danger {
  color: hsl(var(--c-destructive));
}
.fg-primary {
  color: hsl(var(--c-primary));
}
.fg-info {
  color: hsl(var(--c-info));
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.fade-in {
  animation: fadeIn 400ms var(--ease-out) both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* The brand film and public entrance keep their full motion sequence. */
  *:not(
    :where(
      .tenure-loading,
      .tenure-loading *,
      .tenure-landing,
      .tenure-landing *,
      .tenure-intro,
      .tenure-intro *
    )
  ),
  *:not(
      :where(
        .tenure-loading,
        .tenure-loading *,
        .tenure-landing,
        .tenure-landing *,
        .tenure-intro,
        .tenure-intro *
      )
    )::before,
  *:not(
      :where(
        .tenure-loading,
        .tenure-loading *,
        .tenure-landing,
        .tenure-landing *,
        .tenure-intro,
        .tenure-intro *
      )
    )::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* charts */
.chart-wrap {
  position: relative;
}
.chart-axis text {
  fill: hsl(var(--c-foreground-muted));
  font: 500 11px var(--font-sans);
}
.chart-grid line {
  stroke: hsl(var(--c-border-subtle));
  stroke-dasharray: 2 4;
}

/* density */
.density-compact .card-pad {
  padding: var(--space-4);
}
.density-compact .card-pad-lg {
  padding: var(--space-5);
}
.density-compact .table th,
.density-compact .table td {
  padding: 7px 10px;
}
.density-compact .page {
  padding: var(--space-5) var(--space-5);
}
.density-compact h1 {
  font-size: 16px;
}

/* accent color swap (Tweaks) */
.accent-azure {
  --c-primary: var(--c-secondary);
  --c-primary-fg: var(--c-secondary-fg);
  --c-ring: var(--c-secondary);
}
.accent-emerald {
  --c-primary: var(--c-success);
  --c-primary-fg: var(--c-secondary-fg);
  --c-ring: var(--c-success);
}
.accent-violet {
  --c-primary: var(--c-chart-5);
  --c-primary-fg: var(--c-secondary-fg);
  --c-ring: var(--c-chart-5);
}

/* focus states for keyboard navigation */
:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid hsl(var(--c-primary));
  outline-offset: 2px;
}

/* =========================================================================
   MOBILE RESPONSIVE — hamburger drawer, touch targets, scroll fixes
   ========================================================================= */

/* hamburger button (hidden on desktop) */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: hsl(var(--c-card));
  border: 1px solid hsl(var(--c-border));
  color: hsl(var(--c-foreground));
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn:hover {
  background: hsl(var(--c-card-elevated));
}

/* mobile nav toggle checkbox (hidden) */
.mobile-nav-toggle {
  display: none;
}

/* sidebar drawer overlay */
.sidebar-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}

/* responsive breakpoints */
@media (max-width: 1024px) {
  .shell {
    grid-template-columns: 14rem 1fr;
  }
  .sidebar {
    width: 14rem;
  }
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 16rem;
    height: 100dvh;
    z-index: 40;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 250ms var(--ease-out);
    border-right: 1px solid hsl(var(--c-border-subtle));
    border-bottom: none;
  }
  .sidebar-drawer-overlay {
    display: block;
  }

  /* checked = drawer open */
  .mobile-nav-toggle:checked ~ .sidebar,
  .mobile-nav-toggle:checked ~ .shell .sidebar {
    transform: translateX(0);
    visibility: visible;
  }
  .mobile-nav-toggle:checked ~ .sidebar-drawer-overlay,
  .mobile-nav-toggle:checked ~ .shell .sidebar-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .header {
    grid-column: 1;
    position: relative;
    z-index: 30;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .header h1 {
    font-size: 16px;
  }
  .header-eyebrow {
    display: none;
  }
  .header-actions {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .header-context {
    display: flex;
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .header-context .scenario-chip {
    flex: 1 1 0;
    min-width: 0;
  }
  .header-context .scenario-chip .select {
    width: 100%;
    min-width: 0;
  }
  .header-actions .btn.ghost span {
    display: none;
  }
  .header-actions .theme-toggle button {
    font-size: 11px;
    padding: 6px 8px;
  }
  .scenario-chip {
    padding: 4px 4px 4px 8px;
    font-size: 11px;
  }

  .main {
    grid-column: 1;
    overflow: visible;
    padding: var(--space-4);
  }
  .page {
    padding: var(--space-5) var(--space-4);
  }
  .grid.g-5,
  .grid.g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ensure tables and wide cards scroll horizontally */
  .table-wrap,
  .table-scroll,
  .card:has(> .table),
  .card:has(.table) {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table {
    min-width: 640px;
  }
  .board-yield-bridge-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .signin-card {
    padding: 24px 22px;
  }
  .summary-hero {
    padding: 28px 20px 24px;
  }
  .summary-hero .p-lead {
    font-size: 17px;
    line-height: 1.55;
  }
  .summary-hero .h2 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.15;
  }
  .grid.g-5,
  .grid.g-4,
  .grid.g-3,
  .grid.g-2,
  .grid.g-2-1,
  .grid.g-1-2 {
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's implicit minimum is
       its content's min-content width, which does NOT shrink below that even
       in a single column, so a long unbreakable card kept forcing this column
       (and the page) wider than the viewport. See D2. */
    grid-template-columns: minmax(0, 1fr);
  }
  .page-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* D1: the "BOARD DECISION REQUIRED · STRESSED"-style verdict pill on the
     Executive Summary deal-assessment card is long enough to overflow its
     card at narrow widths. The base .pill is intentionally nowrap (short
     badges everywhere rely on that), so relax just this one, scoped to its
     card, to wrap and stay centered instead of clipping. */
  .deal-assessment-card .pill {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  /* D2 (residual): .eyebrow labels are nowrap everywhere by default, which is
     fine at full card width but overflows once a card is nested two levels
     deep (e.g. Report's board-funding-grid → "Adopted source cost" card →
     KVCard's own "Loaded construction basis" title), where the available
     width shrinks well below the label's one-line min-content width. Let
     eyebrows wrap instead of clipping/overflowing at narrow viewports. */
  .eyebrow {
    white-space: normal;
    overflow-wrap: break-word;
  }
  .header {
    padding: var(--space-3);
  }
  .header-actions .theme-toggle {
    display: none;
  }
  .header-actions .btn.ghost {
    padding: 6px;
  }
  .board-funding-grid,
  .board-yield-bridge-values {
    grid-template-columns: 1fr;
  }
  .management-form > [data-management-field] {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: 0;
  }
  .management-form > .btn {
    justify-content: center;
    width: 100%;
  }
  .site-management-row {
    align-items: stretch !important;
    flex-direction: column;
  }
  .site-management-row > .btn {
    justify-content: center;
    width: 100%;
  }
}

/* Type scale: tighten letter-spacing, lighter weight for display */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* Gradient text → solid */
.text-gradient-hero,
.text-gradient-horizon {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: hsl(var(--c-foreground));
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: hsl(var(--c-muted) / 0.5);
  border: 1px solid hsl(var(--c-border));
  border-radius: var(--radius-full);
  padding: 2px;
  font-size: 13px;
}
.theme-toggle button {
  all: unset;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: hsl(var(--c-foreground-muted));
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  transition:
    background 0.15s,
    color 0.15s;
}
.theme-toggle button:hover {
  color: hsl(var(--c-foreground));
}
.theme-toggle button.active {
  background: hsl(var(--c-card-elevated));
  color: hsl(var(--c-foreground));
  box-shadow: var(--shadow-sm);
}

/* Pulse animation for model-checks re-run */
@keyframes pulse-flash {
  0% {
    box-shadow: 0 0 0 0 hsl(142 76% 55% / 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px hsl(142 76% 55% / 0);
  }
  100% {
    box-shadow: 0 0 0 0 hsl(142 76% 55% / 0);
  }
}
.pulse-flash {
  animation: pulse-flash 0.6s ease-out;
}

/* Spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Auth shake */
@keyframes authShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    hsl(var(--c-border)) 25%,
    hsl(var(--c-border-subtle)) 50%,
    hsl(var(--c-border)) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}
@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: hsl(var(--c-border-subtle));
  }
  .spinner {
    animation: none !important;
  }
}

/* Light theme overrides for app-specific elements */
.light .hero {
  background: var(--grad-card);
  border: 1px solid hsl(var(--c-border));
}
.light .card.glow {
  background: var(--grad-card);
  border: 1px solid hsl(var(--c-border));
}
.light .sidebar {
  background: hsl(var(--c-surface-deep));
  border-right: 1px solid hsl(var(--c-border-subtle));
}

/* Light theme — :root already supplies the CFO-friendly light palette, so only
   app-specific element overrides remain below. */

/* Scenario chip in header — give the select room so labels aren't truncated */
.scenario-chip .select {
  min-width: 7rem;
}

/* print */
@media print {
  @page {
    size: A4;
    margin: 18mm 16mm;
  }
  .sidebar,
  .header,
  .no-print,
  .twk-root,
  .tweaks-panel {
    display: none !important;
  }
  .shell {
    display: block;
    height: auto;
  }
  .main {
    overflow: visible;
    padding: 0;
  }
  body {
    background: white;
    color: black;
    overflow: visible;
  }

  /* Prevent awkward page breaks inside cards and sections */
  .card,
  .page-strip,
  .grid.g-2,
  .grid.g-3,
  .grid.g-4,
  .grid.g-5 {
    page-break-inside: avoid;
  }
  .page-section {
    page-break-inside: avoid;
    margin-bottom: 12mm;
  }
  table,
  thead,
  tbody,
  tr {
    page-break-inside: avoid;
  }

  /* Force page breaks before major report sections */
  .report-section {
    page-break-before: always;
  }
  .report-section:first-of-type {
    page-break-before: auto;
  }

  /* Ensure text is readable in print */
  .card {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
  .card.glow {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  .eyebrow {
    color: #555 !important;
  }
  .fg-success {
    color: #2a7a2a !important;
  }
  .fg-warning {
    color: #8a6a1a !important;
  }
  .fg-danger,
  .fg-bad,
  .fg-error {
    color: #a03030 !important;
  }
  .pill.success {
    background: #e8f5e9 !important;
    color: #2a7a2a !important;
    border: 1px solid #c8e6c9 !important;
  }
  .pill.warn {
    background: #fff8e1 !important;
    color: #8a6a1a !important;
    border: 1px solid #ffecb3 !important;
  }
  .pill.danger,
  .pill.bad {
    background: #ffebee !important;
    color: #a03030 !important;
    border: 1px solid #ffcdd2 !important;
  }

  /* Charts: flatten for print */
  .chart-wrap {
    max-height: 220px;
  }
  .chart-wrap path[fill-opacity],
  .chart-wrap path[opacity] {
    opacity: 1 !important;
  }

  /* Table styling for print */
  .table {
    border-collapse: collapse;
  }
  .table th,
  .table td {
    border-bottom: 1px solid #ddd;
    padding: 8px 10px;
  }
  .table thead th {
    border-bottom: 2px solid #333;
    background: #f5f5f5;
  }
  .row-emph {
    background: #f0f0f0 !important;
  }

  /* Hero: strip gradient to a clean white band */
  .hero {
    background: white !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    padding: 16px 20px !important;
  }

  /* CFO verdict card: keep it visible and bordered */
  .cfo-verdict-card {
    border: 2px solid #333 !important;
    background: white !important;
    box-shadow: none !important;
  }

  /* Section headers: don't break right before them */
  section {
    break-inside: avoid;
  }
  section h2 {
    break-after: avoid;
  }

  /* Stat display: ensure color prints legibly */
  .stat-display {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide animations and interactive affordances */
  .status-dot-live {
    animation: none !important;
  }
  .scenario-chip-pop {
    animation: none !important;
  }
  [title="Click to copy"] {
    cursor: default !important;
  }

  /* The print-preview toggle is a screen-only control — hide in real print */
  .print-preview-toggle {
    display: none !important;
  }
}

/* ───────────────────────────────────────────────────────────
   On-screen animations (these were previously nested inside
   @media print by mistake, so they never applied on screen).
   ─────────────────────────────────────────────────────────── */

/* ZopaBand SVG transitions — animate rect position/width/color changes smoothly */
.zopa-band rect {
  transition:
    x 0.4s ease,
    width 0.4s ease,
    fill 0.4s ease;
  will-change: x, width;
}

/* Rent Gap KPI card pulse — fires when the gap crosses zero */
@keyframes kpi-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}
.kpi-pulse {
  animation: kpi-pulse 0.8s ease-out;
}

/* Model Checks resolution badge pulse — fires when a check transitions to pass */
@keyframes check-resolved {
  0% {
    transform: scale(1);
    background: hsl(var(--c-success) / 0.12);
  }
  50% {
    transform: scale(1.06);
    background: hsl(var(--c-success) / 0.25);
  }
  100% {
    transform: scale(1);
  }
}
.check-resolved {
  animation: check-resolved 0.6s ease;
}

/* ───────────────────────────────────────────────────────────
   B2.5 — Print layout preview (on-screen mode).
   Mirrors the @media print rules above so the user can preview
   the printed board pack without opening the browser print
   dialog. Triggered by toggling the `print-preview` class on
   <body> (see PrintPreviewToggle in components.tsx).
   ─────────────────────────────────────────────────────────── */

/* Header control in normal mode. It portals to <body> only while previewing. */
.print-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.print-preview {
  background: hsl(var(--c-muted));
  overflow: auto;
}
body.print-preview .shell {
  display: block;
  height: auto;
  max-width: 210mm; /* A4 width */
  margin: 0 auto;
  background: white;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  min-height: 100vh;
}
body.print-preview .sidebar,
body.print-preview .header,
body.print-preview .no-print,
body.print-preview .twk-root,
body.print-preview .tweaks-panel {
  display: none !important;
}
body.print-preview .main {
  overflow: visible;
  padding: 16mm 16mm 18mm;
  background: white;
  color: hsl(0 0% 0%);
}
/* Page-break visual cues between report sections in preview */
body.print-preview .report-section {
  position: relative;
  margin-bottom: 14mm;
  padding-top: 14mm;
  border-top: 1px dashed hsl(0 0% 80%);
}
body.print-preview .report-section::before {
  content: "— page break —";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: hsl(0 0% 65%);
  background: white;
  padding: 0 8px;
}
body.print-preview .report-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
body.print-preview .report-section:first-of-type::before {
  display: none;
}
/* Flatten chrome for a clean paper look */
body.print-preview .card {
  background: white !important;
  border: 1px solid hsl(0 0% 85%) !important;
  box-shadow: none !important;
}
body.print-preview .card.glow {
  box-shadow: none !important;
  border: 1px solid hsl(0 0% 80%) !important;
}
body.print-preview .hero {
  background: white !important;
  border: 1px solid hsl(0 0% 85%) !important;
  box-shadow: none !important;
}
/* Keep the exit-toggle visible over the preview */
body.print-preview .print-preview-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: inline-flex !important;
  box-shadow: var(--shadow-md);
}

/* ---- start guide ---- */
/* Start-here guide (/#/start, src/screens-start.tsx). Every other class the
   page uses (.hero, .card.elevated, .pill, .grid.g-2, .eyebrow, .p-small,
   .p-micro, Section's own rules) is already defined above — these are the
   only new selectors the guide needs: the lifecycle stepper and the
   five-steps list. */
.start-guide-callout {
  border-left: 3px solid hsl(var(--c-info) / 0.55);
}

.start-guide-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  overflow: visible;
}
.start-guide-stage {
  min-width: 0;
  max-width: 236px;
  display: flex;
  flex-direction: column;
}
.start-guide-stage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: hsl(var(--c-primary) / 0.16);
  color: hsl(var(--c-primary));
  font: 700 12px/1 var(--font-mono);
  flex-shrink: 0;
}
.start-guide-stage-link {
  margin-top: auto;
  align-self: flex-start;
  padding-left: 0;
  padding-right: 0;
}

.start-guide-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.start-guide-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.start-guide-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--c-secondary) / 0.16);
  color: hsl(var(--c-secondary));
  font: 700 13px/1 var(--font-mono);
}
.start-guide-step .btn {
  flex-shrink: 0;
  align-self: center;
}

.start-guide-not {
  max-width: 90ch;
  padding-top: var(--space-4);
  border-top: 1px solid hsl(var(--c-border-subtle));
}

@media (max-width: 900px) {
  .start-guide-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .start-guide-stage {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .start-guide-step {
    flex-direction: column;
    gap: var(--space-2);
  }
  .start-guide-step .btn {
    align-self: flex-start;
  }
}
@media (max-width: 480px) {
  .start-guide-stepper {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .header-tools-popup .theme-toggle.theme-toggle-menu {
    display: inline-flex;
  }
  .header-tools-popup .theme-toggle-menu button {
    min-height: 44px;
    font-size: 13px;
  }
  .header-tools-popup .btn.ghost {
    min-height: 44px;
  }
}