/* VIP Calculator (CIT Tools redesign, 3 Nov 2026).
   Only the layout and the parts this tool has on its own. Colours, fonts, sizes, borders and corners
   come from the design's tokens and components in /CITtools/assets/ui/ui.css. */

/* Hidden means hidden, even on parts a component shows as flex or grid. */
[hidden] { display: none !important; }

/* ---- The calculator card: Your donation on the left, What you get on the right, Sell it in F7 under both. */
.console {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.console > section { min-width: 0; margin: 0; }
.input-panel { border-inline-end: var(--bw) solid var(--line); }
.output-panel { display: flex; flex-direction: column; }
.sell-panel { grid-column: 1 / -1; border-top: var(--bw) solid var(--line-strong); }
.console .panel__head { margin: 0; }

.console .field {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
}
.console .field:last-child { border-bottom: 0; }
.console .field .hint { max-width: var(--maxw-text); }

/* The amount: six common amounts, then the minus, the box and the plus. */
.console .presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 30rem; margin: 0 0 var(--sp-3); }
.console .preset { min-width: 0; }
.console .stepper {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: stretch;
}
.console .stepper__btn { min-width: var(--tap); min-height: var(--tap); }

/* £ and $ signs sit inside the start of their box. */
.amount-wrap, .previous-wrap, .price-input { position: relative; min-width: 0; }
.amount-wrap .currency, .previous-wrap .currency, .price-input i {
  position: absolute;
  inset-inline-start: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
}
.console .amount {
  width: 100%;
  height: 100%;
  min-height: var(--tap);
  padding-inline-start: 2em;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
}
.console .previous-wrap .input,
.console .price-input .input { width: 100%; padding-inline-start: 1.9em; }
.console .confirmed-levels { width: 100%; max-width: 16rem; }
.console input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.console input[type="number"]::-webkit-outer-spin-button,
.console input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- What you get: the three answers, then four lines. */
.summary { padding: var(--sp-4) var(--sp-5) 0; }
.summary-facts { padding: 0 var(--sp-5) var(--sp-5); }
.summary-lead { margin: 0 0 var(--sp-3); color: var(--text-2); font-weight: 700; }
.console .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}
.console .tile { min-width: 0; }
.console .tile .stat__value, .console .tile .stat__note { overflow-wrap: anywhere; }
/* No level yet, or no tag color yet: the number is shown, but quietly. */
.console .stat__value.quiet { color: var(--text-2); }

.facts { margin: var(--sp-4) 0 0; padding-inline-start: 1.25em; display: grid; gap: var(--sp-2); }
.facts li { color: var(--text-2); overflow-wrap: anywhere; }
.facts li::marker { color: var(--line-strong); }
.facts b { color: var(--text); }
.facts li.worth b { color: var(--money); }
/* Payments that add up need a forum PM: that line stands out. */
.facts li.warn { color: var(--text); }
.facts li.warn::marker { color: var(--warn); }

/* ---- Sell it in F7: one row each for VIP hours, extra VIP Levels and tag colors. */
.sell { padding: 0 var(--sp-5); }
.sell-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.65fr) minmax(0, 1.8fr) minmax(0, 1.05fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: var(--bw) solid var(--line);
}
.sell-row:last-child, #row-tags:not(.empty) { border-bottom: 0; }
.sell-head { padding: var(--sp-3) 0 var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }
.sell-head span:last-child { text-align: end; }
.sell-item, .sell-qty, .sell-worth { min-width: 0; }
.sell-item b { display: block; }
.sell-item small { display: block; margin-top: var(--sp-1); color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sell-qty strong { display: block; font-family: var(--font-num); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sell-worth { text-align: end; }
.sell-worth strong { display: block; color: var(--money); font-family: var(--font-num); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sell-price { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sell-price .price-input { flex: 0 1 13rem; }
/* One width for the button group, so the price boxes line up whether a row has AI Trader or Min and Max. */
.sell-price .price-quick { flex: 0 0 8rem; margin: 0; }
.sell-price .quick { flex: 1 1 0; min-width: 0; }
/* The script marks a row with nothing to sell with the class "empty". In ui.css .empty is the empty-state box,
   so the row is put back to a plain sell row here. It keeps its words; only its 0 and its $0 go quiet. */
.sell-row.empty {
  place-items: normal;
  align-items: center;
  text-align: start;
  margin: 0;
  padding: var(--sp-3) 0;
  min-height: 0;
  border: 0;
  border-bottom: var(--bw) solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
}
.sell-row.empty .sell-qty strong, .sell-row.empty .sell-worth strong { color: var(--text-2); }
.sell-fold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
}
.sell-fold p { margin: 0; color: var(--text-2); }
/* Read out by screen readers on wide screens, shown as labels on phones. */
.cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.console .sell-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--bw) solid var(--line-strong);
  border-bottom: var(--bw) solid var(--line);
}
.sell-total .result__value { min-width: 0; overflow-wrap: anywhere; }
.sell-notes { padding: var(--sp-3) var(--sp-5) var(--sp-4); color: var(--text-2); }
.sell-notes p { margin: 0; max-width: var(--maxw-text); }
.sell-notes p + p { margin-top: var(--sp-2); }
.sell-notes b { color: var(--text); }

/* While the amount box holds something that cannot be donated, the answers still belong to the last good
   amount, so they go quiet. The short delay keeps them steady while a player is typing. */
.summary, .sell, .sell-total { transition: opacity .2s; }
.console.stale .summary, .console.stale .sell, .console.stale .sell-total { opacity: .35; transition-delay: .4s; }

/* ---- The official amounts. */
.amounts-panel .table-tools { display: none; padding: var(--sp-3) var(--sp-5); border-bottom: var(--bw) solid var(--line); }
#amounts-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#amounts-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
#amounts-table td:first-child { font-weight: 700; }
#amounts-table th:nth-child(n+3), #amounts-table td:nth-child(n+3) { text-align: end; }
.source-links { padding: var(--sp-3) var(--sp-5); border-top: var(--bw) solid var(--line); color: var(--text-2); font-size: var(--fs-sm); }
.source-links p { margin: 0; max-width: var(--maxw-text); }
.source-links p + p { margin-top: var(--sp-2); }

/* ---- Good to know. */
.notes ul { margin: 0; padding-inline-start: 1.25em; }
.notes li { max-width: var(--maxw-text); margin-bottom: var(--sp-3); color: var(--text-2); }
.notes li:last-child { margin-bottom: 0; }
.notes b { color: var(--text); }

/* ---- Narrow windows and phones. */
@media (max-width: 940px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  /* One column: the amount, then the three answers, then the box for an earlier donation, then the rest.
     The two panels give their parts to the card, so the parts can be put in that order. */
  .input-panel, .output-panel { display: contents; }
  .console > section > * { min-width: 0; }
  .input-panel > .panel__head { order: 1; }
  .input-panel > .field-amount { order: 2; }
  .output-panel > .panel__head { order: 3; }
  .output-panel > .summary:not(.summary-facts) { order: 4; padding-bottom: var(--sp-4); }
  .input-panel > .field-previous { order: 5; border-top: var(--bw) solid var(--line); }
  .output-panel > .summary-facts { order: 6; padding-top: var(--sp-4); border-top: var(--bw) solid var(--line); }
  .sell-panel { order: 7; }
}
@media (max-width: 720px) {
  .sell { padding: 0 var(--sp-4); }
  .sell-head { display: none; }
  .sell-row, .sell-row.empty { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) 0; }
  .sell-qty { text-align: end; }
  .sell-price { grid-column: 1 / -1; flex-wrap: wrap; }
  .sell-price .price-input { flex: 1 1 9rem; }
  .sell-price .price-quick { flex: 1 1 8rem; }
  .sell-worth { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .cell-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 700;
  }
  .sell-price .cell-label { flex-basis: 100%; margin-bottom: 0; }
  .sell-worth .cell-label { margin-bottom: 0; }
  .console .sell-total { padding: var(--sp-4); }
  /* The total keeps its digits together on a phone. */
  .console .sell-total .result__value { font-size: min(var(--fs-2xl), 9vw); }
  .sell-notes { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}
@media (max-width: 560px) {
  .console .field { padding: var(--sp-4); }
  .summary { padding: var(--sp-4) var(--sp-4) 0; }
  .summary-facts { padding: 0 var(--sp-4) var(--sp-4); }
  /* The six amounts sit in one row, so the answer starts higher on the screen. */
  .console .presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-1); }
  .console .preset { min-width: 0; padding-inline: 2px; }
  .console .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .console .tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: var(--sp-4);
    row-gap: 2px;
    align-items: center;
  }
  .console .tile .stat__value { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .console .tile .stat__label, .console .tile .stat__note { grid-column: 2; margin: 0; }
  .amounts-panel .table-tools { display: block; padding: var(--sp-3) var(--sp-4); }
  /* Four columns do not fit a phone, so the Calculation column starts folded here. The button above the table
     shows it. The calculation for your own amount is under the VIP hours answer. */
  .table-scroll:not(.show-working) th:nth-child(2), .table-scroll:not(.show-working) td:nth-child(2) { display: none; }
  .table-scroll.show-working th, .table-scroll.show-working td { padding-inline: 6px; }
  .source-links { padding: var(--sp-3) var(--sp-4); }
}
@media (max-width: 350px) {
  .console .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .summary, .sell, .sell-total { transition: none; }
}