:root {
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b5f72;
  --text: #1b0e1f;
  --accent: #c2185b;
  --good: #2e7d32;
  --warn: #b26a00;
  --bad: #c62828;
  --radius: 16px;
  --border: #e6dfea;
  --input-bg: #fff;
  --input-border: #d8cfe0;
  --chip-bg: #f4ecf8;
  --chip-border: #e3d7ec;
  --panel-bg: #f7f1fa;
  --bar-bg: #efe6f4;
  --legend-dot-artist: #c2185b;
  --legend-dot-venue: #333;
  --inside: #f2c94c;
  --legend-dot-inside: #f2c94c;
}
* {
  box-sizing: border-box;
}
body,
input,
button,
select,
label {
  font-family: Georgia, "Times New Roman", serif;
}
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  text-align: left;
}
.wrap {
  max-width: 640px;
  margin: 36px auto;
  padding: 0 16px;
}
.subtle {
  font-size: 14px;
  color: var(--muted);
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(18, 9, 20, 0.08);
  padding: 20px;
  border: 1px solid var(--border);
}

.card {
  background: white;
  border: 15px solid #555; /* base border */
  border-top-color: #aaa; /* lighter top */
  border-left-color: #aaa; /* lighter left */
  border-right-color: #555; /* darker right */
  border-bottom-color: #555; /* darker bottom */
  border-radius: 0; /* hard corners */
  box-shadow: none; /* no modern shadow */
  padding: 20px;
}
.note-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  background: #fff9d8;
}
.note-card.field {
  display: flex; /* override .field column layout so close button stays up top */
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  background: #fff9d8;
}
.note-card .note-copy {
  margin: 0;
  font-size: 14px;
  color: #3d3201;
  flex: 1;
  min-width: 0;
}
.note-card a {
  color: #b05700;
  font-weight: 700;
}
.note-card .note-close {
  position: static;
  margin-left: auto;
  margin-top: 0;
  color: #3d3201;
  flex-shrink: 0;
  align-self: flex-start;
}

.stack > .note-card + * {
  margin-top: 0;
}
.stack > * + * {
  margin-top: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 12px;
}
.field label {
  min-height: 34px; /* keeps space for 2-line labels */
}
label {
  font-size: 13px;
  color: var(--muted);
}
input[type="number"],
input[type="text"] {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}
input[type="range"] {
  width: 100%;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.subtle {
  color: var(--muted);
  font-size: 13px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
}
.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.kpi .box {
  background: var(--panel-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 78px;
}
.kpi .label {
  font-size: 12px;
  color: var(--muted);
  min-height: 32px;
}
.kpi .value {
  font-size: 20px;
  margin-top: 6px;
}
.kpi .value.negative {
  color: var(--bad);
}
.kpi .value.positive {
  color: var(--good);
}

.scenario-row .scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  grid-auto-rows: minmax(110px, auto);
  margin-bottom: 24px;
}

.scenarios .box {
  background: var(--panel-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 90px;
  height: 100%;
  max-height: none;
}
.scenarios .label {
  font-size: 10px;
  color: var(--muted);
  min-height: 20px;
  text-align: center;
}
.scenarios .value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-top: 6px;
}

.scenarios .value {
  position: relative; /* lets us position the NICE behind */
}

.scenarios .value .pct {
  position: relative;
  z-index: 2; /* % stays on top */
}

.scenarios .value .nice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  font-size: 42px; /* faint + bigger so it sits behind nicely */
  font-weight: 700;
  pointer-events: none;
  display: none;
  z-index: 1; /* behind the % */
  white-space: nowrap;
}
.scenarios .value .emoji {
  font-size: 20px;
  opacity: 0.8;
}
.scenarios .sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

/* replace the combined rule with these */
.scenarios .sub {
  line-height: 1.2;
  margin: 0;
}

.scenarios .value {
  margin: 10px 0 15px 0; /* more space above/below */
  line-height: 1.35; /* a bit taller for emoji */
}

/* color states */
.box.good {
  background-color: #eaf7ec;
  border-color: #cfead4;
}
.box.warn {
  background-color: #fff4e5;
  border-color: #ffd9a8;
}
.box.bad {
  background-color: #ffeaea;
  border-color: #ffcccc;
}
.box.warn {
  margin-top: 0;
  color: inherit;
  font-size: inherit;
}
.warn {
  margin-top: 8px;
  color: var(--warn);
  font-size: 13px;
}
.chart {
  background: var(--panel-bg);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 14px;
}
.bar {
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bar-bg);
  border: 1px solid var(--chip-border);
  display: flex;
}
.bar .artist {
  background: linear-gradient(90deg, #f7a1bd, #ff6fa3);
}
.bar .venue {
  background: linear-gradient(90deg, #717070, #333);
}
.bar .inside {
  /* add */
  background: linear-gradient(90deg, #f8df86, #f2c94c);
}
.legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.artist-dot {
  background: var(--legend-dot-artist);
}
.venue-dot {
  background: var(--legend-dot-venue);
}
.inside-dot {
  /* add */
  background: var(--legend-dot-inside);
}
.inputs,
.terms,
.sold,
.results {
  display: block;
  margin-bottom: 0;
}
.row.three {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.row.three > * {
  flex: 1 1 0;
  margin-bottom: 0;
  min-width: 0;
}
.inputs .row.three {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

/* tiny, square info button */
.info-dot {
  width: 18px;
  height: 18px;
  font-size: 10px;
  line-height: 14px;
  padding: 0;
  text-align: center;
  border-radius: 0; /* square */
  background: #e0e0e0;
  border: 2px solid #dfdfdf; /* Win98-ish bevel */
  border-top-color: #e6e6e6;
  border-left-color: #e6e6e6;
  border-right-color: #808080;
  border-bottom-color: #808080;
  cursor: pointer;
}

/* pressed look */
.info-dot:active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #e6e6e6;
  border-bottom-color: #e6e6e6;
  background: #d9d9d9;
}

/* keep the label aligned at the top like your others */
.label-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 34px;
}

.inputs .row.three > .field {
  height: 100%;
}
.terms .row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: nowrap;
}
.stack-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prefix-wrap {
  position: relative;
}
.prefix-wrap .prefix {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
}
.prefix-wrap input {
  padding-left: 26px;
}

/* Switch */
.switch {
  --w: 76px;
  --h: 36px;
  position: relative;
  width: var(--w);
  height: var(--h);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  user-select: none;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.switch input {
  display: none;
}
.switch .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--w) / 2 - 6px);
  height: calc(var(--h) - 6px);
  background: var(--card);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  transition: left 0.18s ease;
}
.switch input:checked + .thumb {
  left: calc(var(--w) / 2 + 3px);
}
.switch .label-left,
.switch .label-right {
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  transition: color 0.2s ease;
}
.switch input:not(:checked) ~ .label-left {
  color: var(--accent);
}
.switch input:checked ~ .label-right {
  color: var(--accent);
}

.or-note-wrap {
  height: auto;
}

.or-note {
  position: static; /* was absolute */
  left: auto;
  top: auto;
  transform: none;
  font-size: 10px;
  color: var(--muted);
  opacity: 0; /* keep the fade-in/out behavior */
  transition: opacity 0.15s ease;
  white-space: nowrap;
  margin-bottom: 4px; /* space above the buttons */
  text-align: center;
}
.or-note.visible {
  opacity: 1;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.terms-pair {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  align-items: stretch;
}
.switch-box > div {
  gap: 0 !important;
  margin: 0;
}

.terms-pair > .terms {
  align-self: stretch;
  height: 100%;
  margin-bottom: 0; /* override the global .terms margin */
}

.terms-pair > .terms > .stack {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.terms-pair > .terms > .stack > .field {
  flex: 1;
}

.venue-terms {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
}

.venue-terms label,
.terms-pair .field > label {
  min-height: auto;
  margin-bottom: 2px;
}

.footer {
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* === Unified beveled look: inputs, venue fields, and scenario boxes (no squish) === */

/* Field blocks (top 4 + venue terms/details) */
.field {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
}

/* Text inputs, number inputs, and selects inside fields */
.field input[type="text"],
.field input[type="number"],
.field select {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  padding: 4px 7px;
  font: inherit;
  color: #000;
}

/* Focus = flipped bevel */
.field input[type="text"]:focus,
.field input[type="number"]:focus,
.field select:focus {
  outline: none;
  border-top-color: #aaa;
  border-left-color: #aaa;
  border-right-color: #555;
  border-bottom-color: #555;
}

/* Prefix inputs (like $ ones) */
.prefix-wrap input {
  padding-left: 28px !important;
}
.prefix-wrap .prefix {
  left: 12px;
}

/* Switch */
.switch {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  height: 36px;
}
.switch .thumb {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #aaa;
  border-left-color: #aaa;
  border-right-color: #555;
  border-bottom-color: #555;
  border-radius: 0;
}

/* Scenario boxes (Dog/Diva % cards) */
.scenarios .box {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  box-shadow: none;
  padding: 14px;
}

/* Active state — no transform */
.scenarios .box:active {
  border-top-color: #aaa;
  border-left-color: #aaa;
  border-right-color: #555;
  border-bottom-color: #555;
}

/* Scenario color states with beveled edges */
.box.good {
  background-color: #eaf7ec; /* greeny inside */
}

.box.warn {
  background-color: #fff4e5; /* orangey inside */
}

.box.bad {
  background-color: #ffeaea; /* redy inside */
}

.box.neutral {
  background-color: #fff;
}

/* === Windows 98 default button style === */
button,
.pill-btn,
input[type="button"],
input[type="submit"] {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  background: #e0e0e0;
  color: #000;
  border: 2px solid #dfdfdf;
  border-top-color: #e6e6e6;
  border-left-color: #e6e6e6;
  border-right-color: #808080;
  border-bottom-color: #808080;
  border-radius: 0;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
}

/* Hover = slightly lighter */
button:hover,
.pill-btn:hover {
  background: #f2f2f2;
}

/* Active (pressed) = inverted bevel */
button:active,
.pill-btn:active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #e6e6e6;
  border-bottom-color: #e6e6e6;
  background: #d9d9d9;
}

/* Disabled look, if ever used */
button:disabled,
.pill-btn:disabled {
  color: #999;
  background: #ccc;
  border-color: #aaa;
  cursor: default;
}

/* Optional: space them out a little in their row */
.row button,
.row .pill-btn {
  margin: 0 4px;
}

.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}

.kpi .box {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
  height: 100%;
}

/* Bar chart with beveled Windows 98 style */
.chart {
  background: #fff;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  box-shadow: none;
  padding: 14px;
  margin-top: 0;
}

/* Bar background bevel */
.bar {
  height: 32px;
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  border-radius: 0;
  background: #e0e0e0;
  display: flex;
  overflow: hidden;
}

/* Remove margin before chart’s legend */
.legend {
  margin-top: 8px;
}

/* Optional: tighten space between chart and footer */
.results .chart + .legend {
  margin-top: 8px;
}

.sold .field label {
  min-height: auto;
  margin-bottom: 4px;
}

.mode-active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #e6e6e6;
  border-bottom-color: #e6e6e6;
  background: #d9d9d9;
  font-weight: 700;
  color: #ff229a; /* your vibrant pink */
}

/* AND / OR buttons: remove side margins, make thinner */
.switch-box button {
  margin: 0 !important; /* kills the .row button margin */
  padding: 2px 8px; /* thinner left/right + shorter height */
  font-size: 12px; /* a touch smaller */
  height: 26px; /* shorter button */
  line-height: 1; /* no extra vertical puff */
}

/* keep them touching—no gap between the two */
.switch-box > div {
  gap: 0 !important;
}

/* 90s grey modal */
#insideInfoDlg {
  padding: 0;
  border: none;
}
#insideInfoDlg::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

#insideInfoDlg button:focus {
  outline: none;
  box-shadow: none;
}

#coffeeDlg {
  padding: 0;
  border: none;
}
#coffeeDlg::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.win98-modal {
  width: min(350px, 88vw);
  background: #c0c0c0; /* classic system grey */
  border: 3px solid #aaa;
  border-top-color: #555;
  border-left-color: #555;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  box-shadow: none;
}

/* title bar */
.win98-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e0e0e0;
  border-bottom: 2px solid #9a9a9a;
  padding: 6px 8px;
  font-weight: 700;
  color: #000;
}

/* close button with Win98 bevel */
.win98-close {
  width: 20px;
  height: 20px;
  line-height: 18px;
  font-size: 14px;
  text-align: center;
  background: #e0e0e0;
  color: #000;
  border: 2px solid #dfdfdf;
  border-top-color: #e6e6e6;
  border-left-color: #e6e6e6;
  border-right-color: #808080;
  border-bottom-color: #808080;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}
.win98-close:active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #e6e6e6;
  border-bottom-color: #e6e6e6;
  background: #d9d9d9;
}

/* body */
.win98-body {
  background: #fff;
  padding: 12px;
  color: #000;
  line-height: 1.35;
}
.win98-body p {
  margin: 0;
}
.win98-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.mini-switch button {
  margin: 0 !important; /* touch each other */
  font-size: 10px;
  padding: 2px 6px;
  height: 22px;
  line-height: 1;
}

.mini-switch-row {
  margin-top: 4px;
}
.mini-switch button {
  margin: 0 !important;
  font-size: 10px;
  padding: 2px 6px;
  height: 22px;
  line-height: 1;
}

@media (max-width: 640px) {
  .back-btn {
    padding: 4px 6px;
    gap: 4px;
  }
  .back-btn .text {
    display: none;
  }
  .inputs .row.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .kpi {
    grid-template-columns: repeat(2, 1fr);
  }

  .scenarios .label {
    font-size: 10px;
  }

  .scenarios .value {
    font-size: 22px;
    gap: 0;
    margin: 10px 0;
    line-height: 1;
  }

  .scenarios .value .nice {
    font-size: 1.2em; /* smaller on phones */
    opacity: 0.1; /* a touch fainter */
  }

  .scenarios .value .emoji {
    font-size: 10px;
  }

  .terms-pair {
    grid-template-columns: 1fr 1fr; /* stays side-by-side on mobile */
  }
  .venue-terms {
    grid-template-columns: 1fr !important;
  }
  .switch-box {
    margin-top: 10px; /* gives the switch some air */
  }

  .or-note {
    left: 0;
    transform: none;
    top: -15px;
    font-size: 9px;
    text-align: left;
  }

  .flat-box,
  .switch-box,
  .pct-box {
    width: 100%;
  }
  .legend {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-align: center;
  }

  .legend span {
    justify-content: center;
    width: 100%;
  }

  .legend strong {
    font-size: 12px;
  }

  .legend .dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
  }
}