/* Upside calculator — page-specific styles using framework tokens */

/* ---- Controls -------------------------------------------------------- */
.upside-wrap { max-width: 1100px; }

.controls {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-m) var(--space-l);
  margin-bottom: var(--space-l);
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.35fr auto;
  gap: var(--space-m) var(--space-l);
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; position: relative; }
.mm-hint { position: absolute; top: 100%; left: 2px; margin-top: var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .02em; color: var(--color-accent); white-space: nowrap; }
.mm-hint[hidden] { display: none; }
.field > label { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-soft); }
.field .val { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-secondary); }

/* Adjust assumptions animation */
.adv[open] > div { animation: adv-open .3s var(--ease) both; }
@keyframes adv-open { from { opacity: 0; transform: translateY(-8px); } }
.field select, .field input[type="text"] {
  font: inherit; padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink); width: 100%; height: 40px; line-height: var(--line-snug);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='%235a6b78'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.field select:focus, .field input[type="text"]:focus { outline: 2px solid var(--color-accent); border-color: transparent; }


.btn-share {
  font: inherit; font-weight: var(--weight-bold); font-size: var(--text-md); cursor: pointer;
  border: 0; border-radius: var(--radius-lg); padding: var(--space-xs) var(--space-m);
  background: var(--grad-deep); color: #fff; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn-share:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-share.copied { background: var(--color-success); }
.btn-share svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Autocomplete ---------------------------------------------------- */
.ac-box { position: relative; }
.ac-box input[type="text"] { padding-right: 34px; }
.ac-list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow: auto; padding: var(--space-3xs);
}
.ac-list[hidden] { display: none; }
.ac-item { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md); cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-xs); }
.ac-item:hover, .ac-item.active { background: var(--brand-50); }
.ac-item .st { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-accent); }
.ac-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--color-ink-soft); font-size: 1.2rem; line-height: 0; padding: 4px; z-index: 2; }
.ac-clear:hover { color: var(--color-secondary); }
.ac-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--color-ink-soft); pointer-events: none; }
.ac-box:focus-within .ac-caret { fill: var(--color-accent); }
.ac-box input:not(:placeholder-shown) ~ .ac-caret { display: none; }

/* ---- Panels ---------------------------------------------------------- */
.panels { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-l); align-items: start; }
.panel { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-l); }
.panel h2 { margin: 0; font-size: var(--text-lg); color: var(--color-secondary); letter-spacing: -.3px; }
.panel .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-3xs); }

/* revenue hero */
.hero-fig { margin: var(--space-m) 0 var(--space-2xs); }
.hero-fig .big { font-size: var(--step-5); font-weight: var(--weight-extrabold); letter-spacing: -1.5px; color: var(--color-secondary); line-height: var(--line-none); }
.hero-fig .big .cents { font-size: .5em; color: var(--color-ink-soft); font-weight: var(--weight-semibold); }
.hero-fig .cap { font-size: var(--text-md); color: var(--color-ink-soft); margin-top: var(--space-2xs); }
.hero-fig .cap b { color: var(--color-primary); }

.rev-bars { margin: var(--space-m) 0 var(--space-3xs); display: flex; flex-direction: column; gap: var(--space-xs); }
.rev-bar .rb-top { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: var(--space-3xs); }
.rev-bar .rb-top .lbl { color: var(--color-ink-soft); font-weight: var(--weight-semibold); }
.rev-bar .rb-top .amt { font-weight: var(--weight-bold); color: var(--color-secondary); }
.rev-bar .track { background: var(--brand-50); border-radius: var(--radius-md); height: 16px; overflow: hidden; }
.rev-bar .fill { height: 100%; border-radius: var(--radius-md); transition: width .5s var(--ease); }
.rev-bar.total .fill { background: var(--grad-deep); }
.rev-bar.practice .fill { background: linear-gradient(135deg, var(--color-success), oklch(from var(--color-success) calc(l + 0.1) c h)); }
.rev-bar.gp .fill { background: linear-gradient(160deg, var(--color-accent), var(--brand-300)); }

.breakdown { margin-top: var(--space-m); border-top: 1px solid var(--color-border-soft); padding-top: var(--space-s); font-size: var(--text-sm); color: var(--color-ink-soft); }
.breakdown .row { display: flex; justify-content: space-between; padding: var(--space-3xs) 0; }
.breakdown .row b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.note { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: var(--space-s); }
.flag { display: inline-block; background: #fff4e2; color: #9a6a17; border: 1px solid #f0d9a8; border-radius: var(--radius-sm); padding: 1px 7px; font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* adjust assumptions */
.adv summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-accent); }

/* health bars */
.profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-3xs); }
.profile-sub { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-soft); }
.bars { margin-top: var(--space-m); display: flex; flex-direction: column; gap: var(--space-xs); }
.hbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-xs); align-items: center; }
.hbar .name { font-size: var(--text-sm); text-align: right; color: var(--color-ink); }
.hbar .track { background: var(--brand-50); border-radius: var(--radius-md); height: 26px; position: relative; }
.hbar .fill { height: 100%; border-radius: var(--radius-md); background: var(--grad-deep); min-width: 3px; position: relative; transition: width .55s var(--ease); }
.hbar .pct { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-weight: var(--weight-bold); font-size: var(--text-sm); white-space: nowrap; }
.hbar .pct:not(.out) { right: 0; padding-right: var(--space-xs); color: #fff; }
.hbar .pct.out { left: 100%; padding-left: var(--space-2xs); color: var(--color-secondary); }
.hbar.low .fill { background: linear-gradient(160deg, var(--color-accent), var(--brand-300)); }

.national-list .hbar .fill { background: linear-gradient(135deg, var(--color-accent), var(--brand-300)); }
.national-list .hbar .pct:not(.out) { color: #fff; left: 0; right: auto; padding-left: var(--space-xs); padding-right: 0; }

.profile-empty { padding: var(--space-m) 0; color: var(--color-ink-soft); font-size: var(--text-md); }

.narrative { font-size: var(--text-md); line-height: var(--line-relaxed); color: var(--color-ink); margin: var(--space-s) 0 var(--space-m); }
.narrative b { color: var(--color-secondary); font-weight: var(--weight-bold); }


.source { font-size: var(--text-xs); color: var(--color-ink-soft); margin-top: var(--space-m); border-top: 1px solid var(--color-border-soft); padding-top: var(--space-xs); }


/* toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--color-surface-dark); color: #fff; padding: var(--space-xs) var(--space-m); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; font-size: var(--text-md); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 920px) {
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .field.area { grid-column: 1 / -1; }
  .controls .field.share-wrap { grid-column: 1 / -1; }
  .btn-share { width: 100%; justify-content: center; }
  .panels { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .controls { grid-template-columns: 1fr; }
  .hbar { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .hbar .name { text-align: left; }
}