/* ===== The Meeting Tax =====
   BRIEF-109. Dark page matching wdywb skin. Two-column layout on desktop
   (≥ 760px), single-column on mobile. Cormorant Garamond for the cost
   number. Everything visible without scrolling on 390px mobile and
   900px+ desktop. Seniority steppers use a 2-column grid on mobile to
   halve their vertical footprint. Result section may scroll — acceptable. */

html, body {
  background:          var(--slate);
  overscroll-behavior: none;
}

.thing-shell {
  background:     var(--slate);
  color:          var(--off-white);
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
}

.thing-shell .thing-stage {
  flex:           1 1 auto;
  display:        flex;
  flex-direction: column;
}

/* ── Outer wrap ──────────────────────────────────────────────────── */

.mt-wrap {
  flex:           1 1 auto;
  display:        flex;
  flex-direction: column;
  width:          100%;
  max-width:      900px;
  margin:         0 auto;
  padding:        20px 24px 28px;
}

.mt-header {
  margin-bottom: 14px;
  flex-shrink:   0;
}

.mt-title {
  font-family:    var(--serif);
  font-size:      26px;
  font-weight:    700;
  color:          var(--off-white);
  letter-spacing: -0.02em;
  margin:         0;
  line-height:    1.1;
}

/* ── Two-column layout ───────────────────────────────────────────── */

.mt-layout {
  display:     flex;
  gap:         40px;
  flex-shrink: 0;
}

.mt-inputs {
  flex:           0 0 296px;
  display:        flex;
  flex-direction: column;
  gap:            9px;
}

.mt-display {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding-top:    2px;
  min-width:      0;
}

/* ── Location selector ───────────────────────────────────────────── */

.mt-location {
  display: flex;
  gap:     5px;
}

.mt-loc-btn {
  flex:           1;
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    500;
  padding:        7px 0;
  background:     rgba(255, 255, 255, 0.05);
  border:         0.5px solid rgba(255, 255, 255, 0.18);
  border-radius:  4px;
  color:          rgba(255, 255, 255, 0.6);
  cursor:         pointer;
  transition:     background 0.12s, border-color 0.12s, color 0.12s;
  letter-spacing: 0.02em;
}

.mt-loc-btn:hover:not(.is-active) {
  color:        rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
}

.mt-loc-btn.is-active {
  background:   var(--sage);
  border-color: var(--sage);
  color:        var(--white);
}

/* ── Headcount summary ───────────────────────────────────────────── */

.mt-headcount-label {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  margin:         0;
  line-height:    1;
}

.mt-headcount-total {
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.7);
}

/* ── Seniority steppers ──────────────────────────────────────────── */

.mt-steppers {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.mt-stepper-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         4px 0;
}

.mt-stepper-label {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.65);
  min-width:   60px;
  flex-shrink: 0;
}

.mt-stepper-ctrl {
  display:     flex;
  align-items: stretch;
}

.mt-step-btn {
  width:           30px;
  height:          28px;
  background:      rgba(255, 255, 255, 0.06);
  border:          0.5px solid rgba(255, 255, 255, 0.18);
  color:           var(--off-white);
  font-size:       16px;
  line-height:     1;
  cursor:          pointer;
  transition:      background 0.1s;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
}

.mt-step-btn:first-child  { border-radius: 3px 0 0 3px; }
.mt-step-btn:last-child   { border-radius: 0 3px 3px 0; }
.mt-step-btn:hover        { background: rgba(255, 255, 255, 0.12); }
.mt-step-btn:active       { background: rgba(255, 255, 255, 0.2); }

.mt-step-val {
  width:                30px;
  text-align:           center;
  font-family:          var(--sans);
  font-size:            13px;
  font-weight:          400;
  color:                var(--off-white);
  border-top:           0.5px solid rgba(255, 255, 255, 0.18);
  border-bottom:        0.5px solid rgba(255, 255, 255, 0.18);
  line-height:          28px;
  font-variant-numeric: tabular-nums;
  user-select:          none;
}

/* ── Meeting type chips ──────────────────────────────────────────── */

.mt-type-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.mt-type-chip {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  padding:        4px 9px;
  background:     rgba(255, 255, 255, 0.04);
  border:         0.5px solid rgba(255, 255, 255, 0.18);
  border-radius:  999px;
  color:          rgba(255, 255, 255, 0.55);
  cursor:         pointer;
  transition:     all 0.12s;
  letter-spacing: 0.01em;
  white-space:    nowrap;
}

.mt-type-chip:hover:not(.is-active) {
  color:        rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}

.mt-type-chip.is-active {
  background:   rgba(92, 138, 122, 0.22);
  border-color: var(--sage);
  color:        var(--off-white);
}

/* ── Recurring toggle row ────────────────────────────────────────── */

.mt-recurring-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.mt-recurring-label {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.6);
  user-select: none;
}

.mt-toggle {
  position:      relative;
  width:         38px;
  height:        20px;
  background:    rgba(255, 255, 255, 0.1);
  border:        0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor:        pointer;
  transition:    background 0.2s, border-color 0.2s;
  flex-shrink:   0;
  padding:       0;
}

.mt-toggle[aria-checked="true"] {
  background:   var(--sage);
  border-color: var(--sage);
}

.mt-toggle-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.55);
  transition:    transform 0.2s, background 0.2s;
  pointer-events: none;
}

.mt-toggle[aria-checked="true"] .mt-toggle-thumb {
  transform:  translateX(18px);
  background: var(--white);
}

.mt-cadence {
  display: flex;
  gap:     4px;
}

.mt-cadence-btn {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  padding:        4px 9px;
  background:     rgba(255, 255, 255, 0.04);
  border:         0.5px solid rgba(255, 255, 255, 0.18);
  border-radius:  3px;
  color:          rgba(255, 255, 255, 0.55);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-cadence-btn.is-active {
  background:   var(--sage);
  border-color: var(--sage);
  color:        var(--white);
}

/* ── Display panel ───────────────────────────────────────────────── */

.mt-display-top {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.mt-mode-pill {
  display:       flex;
  background:    rgba(255, 255, 255, 0.06);
  border:        0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  overflow:      hidden;
}

.mt-mode-btn {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.07em;
  padding:        6px 13px;
  background:     transparent;
  border:         none;
  color:          rgba(255, 255, 255, 0.45);
  cursor:         pointer;
  transition:     background 0.12s, color 0.12s;
}

.mt-mode-btn.is-active {
  background: var(--sage);
  color:      var(--white);
}

.mt-fullscreen-btn {
  background:    transparent;
  border:        0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color:         rgba(255, 255, 255, 0.5);
  width:         28px;
  height:        28px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    color 0.12s, border-color 0.12s;
  padding:       0;
  flex-shrink:   0;
}

.mt-fullscreen-btn:hover {
  color:        rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Duration selector (PLANNED) ────────────────────────────────── */

.mt-duration {
  display:         flex;
  gap:             5px;
  flex-wrap:       wrap;
  justify-content: center;
}

.mt-dur-btn {
  font-family:          var(--sans);
  font-size:            13px;
  font-weight:          400;
  padding:              6px 14px;
  background:           rgba(255, 255, 255, 0.05);
  border:               0.5px solid rgba(255, 255, 255, 0.18);
  border-radius:        4px;
  color:                rgba(255, 255, 255, 0.6);
  cursor:               pointer;
  transition:           all 0.12s;
  font-variant-numeric: tabular-nums;
}

.mt-dur-btn:hover:not(.is-active) {
  color:        rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
}

.mt-dur-btn.is-active {
  background:   var(--sage);
  border-color: var(--sage);
  color:        var(--white);
}

/* ── Cost number ─────────────────────────────────────────────────── */

.mt-cost-number {
  font-family:          var(--serif);
  font-size:            96px;
  font-weight:          700;
  color:                var(--white);
  letter-spacing:       -0.03em;
  line-height:          1;
  text-align:           center;
  font-variant-numeric: tabular-nums;
  width:                100%;
}

.mt-per-person {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.5);
  text-align:     center;
  margin:         0;
  letter-spacing: 0.02em;
}

.mt-annual {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.38);
  text-align:     center;
  margin:         0;
  letter-spacing: 0.02em;
}

/* ── Start / Stop ────────────────────────────────────────────────── */

.mt-start-btn {
  width:          100%;
  max-width:      260px;
  font-family:    var(--sans);
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        13px 0;
  background:     var(--sage);
  border:         none;
  border-radius:  4px;
  color:          var(--white);
  cursor:         pointer;
  transition:     opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.mt-start-btn:hover { opacity: 0.85; }

.mt-start-btn.is-running {
  background:   transparent;
  border:       0.5px solid rgba(255, 255, 255, 0.3);
  color:        var(--off-white);
  opacity:      1;
}

.mt-start-btn.is-running:hover { opacity: 0.75; }

/* ── Elapsed timer ───────────────────────────────────────────────── */

.mt-elapsed {
  font-family:          var(--sans);
  font-size:            15px;
  font-weight:          300;
  color:                rgba(255, 255, 255, 0.38);
  font-variant-numeric: tabular-nums;
  letter-spacing:       0.06em;
  text-align:           center;
}

/* ── Pause button ────────────────────────────────────────────────── */

.mt-pause-btn {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        5px 12px;
  background:     transparent;
  border:         0.5px solid rgba(255, 255, 255, 0.22);
  border-radius:  3px;
  color:          rgba(255, 255, 255, 0.5);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-pause-btn:hover:not(.is-paused) {
  color:        rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

.mt-pause-btn.is-paused {
  border-color: rgba(255, 190, 80, 0.55);
  color:        rgba(255, 190, 80, 0.8);
  animation:    mt-pause-pulse 2s ease-in-out infinite;
}

@keyframes mt-pause-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Error ───────────────────────────────────────────────────────── */

.mt-error {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       var(--rose);
  font-style:  italic;
  text-align:  center;
  margin:      0;
}

/* ── Result section ──────────────────────────────────────────────── */

.mt-result {
  margin-top:     28px;
  padding-top:    24px;
  border-top:     0.5px solid rgba(255, 255, 255, 0.14);
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.mt-result-summary {
  font-family:    var(--serif);
  font-size:      22px;
  font-weight:    700;
  color:          var(--off-white);
  letter-spacing: -0.01em;
  line-height:    1.3;
  margin:         0;
}

.mt-result-silence {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.55);
  margin:      0;
  line-height: 1.5;
}

/* ── Outcome selector ────────────────────────────────────────────── */

.mt-outcomes {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.mt-outcome-btn {
  font-family:    var(--sans);
  font-size:      13px;
  font-weight:    400;
  padding:        8px 16px;
  background:     rgba(255, 255, 255, 0.05);
  border:         0.5px solid rgba(255, 255, 255, 0.2);
  border-radius:  4px;
  color:          rgba(255, 255, 255, 0.65);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-outcome-btn:hover:not(.is-active) {
  color:        var(--off-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.mt-outcome-btn.is-active {
  background:   rgba(92, 138, 122, 0.18);
  border-color: var(--sage);
  color:        var(--off-white);
}

/* ── Verdict loading ─────────────────────────────────────────────── */

.mt-verdict-loading {
  display:         flex;
  justify-content: center;
  padding:         12px 0;
}

.mt-loading-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--sage);
  animation:     mt-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes mt-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

/* ── Verdict ─────────────────────────────────────────────────────── */

.mt-verdict {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.mt-verdict-text {
  font-family:    var(--serif);
  font-size:      19px;
  font-weight:    400;
  color:          var(--off-white);
  line-height:    1.55;
  margin:         0;
  letter-spacing: -0.005em;
}

.mt-bought-text {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.5);
  margin:      0;
  line-height: 1.55;
  font-style:  italic;
}

.mt-annual-text {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.65);
  margin:      0;
  line-height: 1.55;
  font-style:  italic;
}

/* ── Assumptions ─────────────────────────────────────────────────── */

.mt-assumptions-toggle {
  font-family:           var(--sans);
  font-size:             12px;
  font-weight:           300;
  color:                 rgba(255, 255, 255, 0.45);
  background:            none;
  border:                none;
  padding:               0;
  cursor:                pointer;
  transition:            color 0.15s;
  letter-spacing:        0.02em;
}

.mt-assumptions-toggle:hover { color: rgba(255, 255, 255, 0.72); }

.mt-assumptions-panel {
  margin-top:    10px;
  padding:       12px 14px;
  background:    rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  border:        0.5px solid rgba(255, 255, 255, 0.1);
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   300;
  color:         rgba(255, 255, 255, 0.5);
  line-height:   1.7;
  white-space:   pre-line;
}

/* ── Guidebook toggle ────────────────────────────────────────────── */

.mt-guide-toggle {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.38);
  background:     none;
  border:         none;
  padding:        0;
  cursor:         pointer;
  transition:     color 0.15s;
  letter-spacing: 0.02em;
}

.mt-guide-toggle:hover { color: rgba(255, 255, 255, 0.62); }

/* ── Guidebook modal ─────────────────────────────────────────────── */

.mt-guide-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.65);
  z-index:         600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px;
}

.mt-guide-modal-inner {
  position:       relative;
  background:     #1e2330;
  border:         0.5px solid rgba(255, 255, 255, 0.14);
  border-radius:  8px;
  padding:        28px 28px 24px;
  max-width:      440px;
  width:          100%;
  max-height:     80vh;
  overflow-y:     auto;
}

.mt-guide-modal-close {
  position:   absolute;
  top:        14px;
  right:      14px;
  background: transparent;
  border:     0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color:      rgba(255, 255, 255, 0.5);
  width:      30px;
  height:     30px;
  font-size:  14px;
  cursor:     pointer;
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    0;
  transition: color 0.12s, border-color 0.12s;
}

.mt-guide-modal-close:hover {
  color:        var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.mt-guide-modal-title {
  font-family:    var(--serif);
  font-size:      20px;
  font-weight:    700;
  color:          var(--off-white);
  letter-spacing: -0.01em;
  margin:         0 0 18px;
  padding-right:  36px;
}

.mt-guide-dl {
  margin:  0;
  padding: 0;
}

.mt-guide-dl dt {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  color:          rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top:     14px;
}

.mt-guide-dl dt:first-child { margin-top: 0; }

.mt-guide-dl dd {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin:      3px 0 0;
}

/* ── Outcomes label ──────────────────────────────────────────────── */

.mt-outcomes-label {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  color:          rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin:         0;
}

/* ── Share area ──────────────────────────────────────────────────── */

.mt-share-area {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.mt-share-actions {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.mt-share-copy {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    400;
  letter-spacing: 0.04em;
  padding:        6px 14px;
  background:     rgba(255, 255, 255, 0.06);
  border:         0.5px solid rgba(255, 255, 255, 0.22);
  border-radius:  3px;
  color:          rgba(255, 255, 255, 0.65);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-share-copy:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color:        var(--off-white);
}

.mt-share-email {
  font-family:     var(--sans);
  font-size:       12px;
  font-weight:     300;
  color:           rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition:      color 0.12s;
}

.mt-share-email:hover { color: rgba(255, 255, 255, 0.7); }

/* ── Send line ───────────────────────────────────────────────────── */

.mt-send-line {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    300;
  color:          rgba(255, 255, 255, 0.38);
  margin:         0;
  font-style:     italic;
  letter-spacing: 0.01em;
}

/* ── Full-screen overlay ─────────────────────────────────────────── */

.mt-fs-overlay {
  position:        fixed;
  inset:           0;
  background:      var(--slate);
  z-index:         500;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
}

.mt-fs-cost {
  font-family:          var(--serif);
  font-size:            clamp(72px, 18vw, 200px);
  font-weight:          700;
  color:                var(--white);
  letter-spacing:       -0.03em;
  line-height:          1;
  text-align:           center;
  font-variant-numeric: tabular-nums;
  padding:              0 32px;
}

.mt-fs-elapsed {
  font-family:          var(--sans);
  font-size:            clamp(16px, 2.2vw, 26px);
  font-weight:          300;
  color:                rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
  letter-spacing:       0.06em;
  text-align:           center;
}

.mt-fs-controls {
  position:    absolute;
  bottom:      32px;
  right:       32px;
  display:     flex;
  gap:         10px;
  align-items: center;
}

.mt-fs-pause-btn {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        8px 18px;
  background:     transparent;
  border:         0.5px solid rgba(255, 190, 80, 0.4);
  border-radius:  4px;
  color:          rgba(255, 190, 80, 0.75);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-fs-pause-btn:hover,
.mt-fs-pause-btn.is-paused {
  background:   rgba(255, 190, 80, 0.1);
  border-color: rgba(255, 190, 80, 0.7);
  color:        rgba(255, 190, 80, 1);
}

.mt-fs-stop-btn {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        8px 18px;
  background:     transparent;
  border:         0.5px solid rgba(210, 70, 70, 0.4);
  border-radius:  4px;
  color:          rgba(210, 70, 70, 0.75);
  cursor:         pointer;
  transition:     all 0.12s;
}

.mt-fs-stop-btn:hover {
  background:   rgba(210, 70, 70, 0.1);
  border-color: rgba(210, 70, 70, 0.7);
  color:        rgba(210, 70, 70, 1);
}

.mt-fs-exit {
  position:        absolute;
  top:             20px;
  right:           20px;
  background:      transparent;
  border:          0.5px solid rgba(255, 255, 255, 0.2);
  border-radius:   4px;
  color:           rgba(255, 255, 255, 0.35);
  width:           36px;
  height:          36px;
  font-size:       16px;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      color 0.12s, border-color 0.12s;
  padding:         0;
}

.mt-fs-exit:hover {
  color:        var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ── Mobile (< 760px) ────────────────────────────────────────────── */

@media (max-width: 759px) {
  .mt-wrap {
    padding: 12px 18px 20px;
  }

  .mt-header {
    margin-bottom: 10px;
  }

  .mt-title {
    font-size: 21px;
  }

  .mt-layout {
    flex-direction: column;
    gap:            14px;
  }

  .mt-inputs {
    flex: none;
    gap:  7px;
  }

  /* Two-column seniority grid: 3 rows instead of 6 */
  .mt-steppers {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2px 10px;
  }

  .mt-stepper-row {
    padding: 3px 0;
  }

  .mt-stepper-label {
    font-size: 11px;
    min-width: 52px;
  }

  .mt-step-btn {
    width:  26px;
    height: 26px;
    font-size: 14px;
  }

  .mt-step-val {
    width:       26px;
    font-size:   12px;
    line-height: 26px;
  }

  .mt-display {
    gap: 8px;
  }

  .mt-cost-number {
    font-size: 72px;
  }

  .mt-start-btn {
    max-width: 100%;
    padding:   12px 0;
  }
}

/* ── Feedback widget dark overrides ─────────────────────────────── */

.mt-wrap .tool-feedback-host {
  border-top-color: rgba(255, 255, 255, 0.1);
  margin-top:       0;
  padding-top:      20px;
  padding-bottom:   4px;
}

.mt-wrap .tf-circle {
  border-color: rgba(255, 255, 255, 0.2);
  color:        rgba(255, 255, 255, 0.4);
}

.mt-wrap .tf-circle:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.55);
  background:   rgba(255, 255, 255, 0.08);
  color:        rgba(255, 255, 255, 0.85);
}

/* ── Desktop (≥ 760px) ───────────────────────────────────────────── */

@media (min-width: 760px) {
  .mt-wrap {
    padding: 24px 32px 32px;
  }

  .mt-title {
    font-size: 28px;
  }

  .mt-layout {
    align-items: center;
    flex:        1;
  }

  .mt-inputs {
    flex:            0 0 280px;
    align-self:      flex-start;
  }

  .mt-display {
    padding-top: 0;
  }
}

/* ----- Footer / Boss Mode Easter egg ----- */

.mt-footer {
  text-align: center;
  padding:    32px 24px 48px;
}

.mt-footer .site-footer-link {
  display:         block;
  color:           var(--slate-mid);
  text-decoration: none;
  border-bottom:   0.5px solid rgba(46, 61, 58, 0.25);
  transition:      border-color 0.15s;
  font-size:       13px;
}

.mt-footer .site-footer-link:hover { border-bottom-color: var(--sage); }

.mt-footer #boss-toggle {
  display:        block;
  margin-top:     8px;
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--slate-muted);
  opacity:        0.18;
  cursor:         pointer;
  transition:     opacity 0.2s;
  user-select:    none;
}

.mt-footer #boss-toggle:hover { opacity: 0.45; }