/*
 * The staking calculators (Calculator.js, and Returns, Kelly Stake, Hedge and
 * Dutching on it) — four pages over the SureTOOLS tab, one stylesheet.
 *
 * The shell and the keypad are the Odds Converter's, restated under `calc-`
 * for the reason odds-converter.css gives: those rules are named for that
 * page. Four more copies of them would have been the `.tool-page` problem
 * four times over, so the four calculators share this one — it is the fold
 * that stylesheet asks for, for this family at least.
 *
 * What is new is what several inputs need that one did not: field rows that
 * take the caret, the readout as the pinned card rather than the entry, list
 * rows that can be added and removed, and a breakdown whose rows can carry a
 * share bar. Separation stays tonal — white cards on the off-white page, the
 * sunken grey inside them, nothing casts a shadow but the two floating
 * buttons in the top row, as on every tool page.
 *
 * Colour says one thing only: money won or lost. A price, a stake or a
 * chance is ink; the P/L rows go green or red, and a readout whose answer is
 * a locked-in loss says so in red under its figure rather than in its figure.
 */

/* --- Shell -------------------------------------------------------------------- */

.calc {
  --enter-y: calc(12px * var(--scale));
  /* The keypad's own metrics, the Odds Converter's. */
  --calc-key-height: calc(52px * var(--scale));
  --calc-pad-gutter: var(--space-2);

  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.calc[hidden] {
  display: none;
}

.calc [hidden] {
  display: none !important;
}

.calc[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.calc__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

/* The page's own scroller, so the tab pane under it keeps its place. */
.calc__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.calc-content {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-6);
}

/* --- Top row and title ----------------------------------------------------------- */

.calc-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) 0;
}

.calc-top__gap {
  flex: 1;
}

/* The odds format: the icon button's pill, carrying a word. */
.calc-format {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-md);
  padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.calc-format[data-pressed="true"] {
  background: var(--surface-sunken);
}

.calc-format__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.calc-title {
  margin: var(--space-3) var(--space-4) 0;
  color: var(--text);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Hedge's mode, where the Odds Converter keeps its format segments. */
.calc-mode {
  margin: var(--space-4) var(--space-4) 0;
}

/* --- The readout ------------------------------------------------------------------- */

/*
 * The readout rides at the top of the scroller, as the Odds Converter's entry
 * does, and for the same reason turned around: there the thing you type must
 * not leave the screen; here the thing your typing changes must not. The
 * wrapper carries the page's ground so what scrolls passes behind it.
 */
.calc-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: var(--space-1);
  background: var(--bg);
}

.calc-readout {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.calc-readout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.calc-readout__eyebrow {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.calc-readout__copy {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  margin: calc(-4px * var(--scale)) calc(-6px * var(--scale)) calc(-4px * var(--scale)) 0;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  transition:
    opacity var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.calc-readout__copy:disabled {
  opacity: 0.35;
}

.calc-readout__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-05);
  min-height: var(--tap-floor);
}

.calc-readout__text {
  color: var(--text);
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

/* Nothing to show yet: the grey 0 of a calculator's display. */
.calc-readout[data-state="empty"] .calc-readout__text,
.calc-readout[data-state="error"] .calc-readout__text {
  color: var(--text-disabled);
}

.calc-readout__unit {
  color: var(--text-muted);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.calc-readout__note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* A field that cannot be read: amber, the Odds Converter's tone for a
   half-written price, which is not a failure. */
.calc-readout[data-state="error"] .calc-readout__note {
  color: var(--warning-strong);
}

/* A locked-in loss is one, and the sentence that says so is red. */
.calc-readout[data-tone="loss"] .calc-readout__note {
  color: var(--error-strong);
}

/* --- Kelly's meter --------------------------------------------------------------------- */

.calc-meter {
  margin-top: var(--space-3);
}

.calc-meter__track {
  position: relative;
  height: calc(8px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
}

.calc-meter__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0 round var(--radius-full));
  transition:
    clip-path var(--sd-spring) var(--se-out),
    background-color var(--sd-fade) var(--se-out);
}

/* Short of the mark is no edge: the fill goes quiet rather than red — the
   gap is the message, as the Odds Converter's meter has it. */
.calc-meter[data-state="none"] .calc-meter__fill {
  background: var(--text-disabled);
}

/* Where the price breaks even: a tick through the bar, in ink. */
.calc-meter__mark {
  position: absolute;
  top: calc(-4px * var(--scale));
  bottom: calc(-4px * var(--scale));
  left: var(--mark, 0%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
  transition: left var(--sd-spring) var(--se-out);
}

.calc-meter__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: calc(16px * var(--scale));
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.calc-meter[data-state="edge"] .calc-meter__legend-item[data-item="yours"] {
  color: var(--accent);
}

/* --- Section labels ------------------------------------------------------------------- */

.calc-label {
  margin: var(--space-5) var(--space-4) var(--space-2);
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* --- Cards ------------------------------------------------------------------------------ */

.calc-card {
  margin: 0 var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

.calc-card + .calc-card {
  margin-top: var(--space-2);
}

/* --- Fields ------------------------------------------------------------------------------ */

/*
 * A row you type into: the conversion row's shape, with the value at a size
 * up and a caret. The active row is tinted the way a chosen segment is — the
 * one place on the page the keypad is going to write.
 */
.calc-field {
  display: flex;
  align-items: center;
  transition: background-color var(--sd-fade) var(--se-out);
}

.calc-field + .calc-field {
  border-top: 1px solid var(--border);
}

.calc-field[data-active="true"] {
  background: var(--accent-tint);
}

.calc-field__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: calc(56px * var(--scale));
  padding: 0 var(--space-4);
  text-align: left;
}

/* Focus and the caret travel together (Calculator.js), so the active row's
   tint and caret are the focus ring - a second one, clipped by the card,
   would only draw a stray line across it. */
.calc-field__main:focus-visible {
  outline: none;
}

.calc-field__label {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--sd-fade) var(--se-out);
}

.calc-field[data-active="true"] .calc-field__label {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.calc-field__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-05);
  min-width: 0;
}

.calc-field__text {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The format's own example, greyed, until something is typed — the Odds
   Converter's placeholder that teaches the shape of the answer. */
.calc-field[data-ghost="true"] .calc-field__text,
.calc-field[data-ghost="true"] .calc-field__unit {
  color: var(--text-disabled);
}

.calc-field[data-state="error"] .calc-field__text {
  color: var(--warning-strong);
}

.calc-field__unit {
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.calc-field__unit:empty {
  display: none;
}

/* The caret: only on the active row, since that is the only row a key reaches. */
.calc-field__caret {
  display: none;
  align-self: stretch;
  width: 2px;
  margin: var(--space-05) 0 var(--space-05) var(--space-05);
  border-radius: 1px;
  background: var(--accent);
  animation: calc-caret 1.1s steps(1, end) infinite;
}

.calc-field[data-active="true"] .calc-field__caret {
  display: block;
}

@keyframes calc-caret {
  0%,
  45% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}

.calc-field__remove {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  margin-right: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.calc-field__remove[data-pressed="true"] {
  background: var(--surface-pressed);
}

/* --- Add a row -------------------------------------------------------------------------------- */

/* The Slip Merger's add row: the outline of a card that is not there yet. */
.calc-add {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - var(--space-4) * 2);
  min-height: var(--control-xl);
  margin: var(--space-2) var(--space-4) 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: left;
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.calc-add[data-pressed="true"] {
  background: var(--surface);
}

.calc-add__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
}

/* --- Breakdown rows ------------------------------------------------------------------------------ */

.calc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(52px * var(--scale));
  padding: var(--space-2) var(--space-4);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.calc-row + .calc-row {
  border-top: 1px solid var(--border);
}

.calc-row[data-pressed="true"] {
  box-shadow: inset 0 0 0 calc(999px * var(--scale)) rgb(var(--text-rgb) / 0.04);
}

/* Nothing to show yet: the Odds Converter's dimmed row. A row with a value
   that is not worth pasting - a share, a zero - keeps its ink and loses only
   its copy icon. */
.calc-row[data-empty="true"] {
  opacity: 0.45;
}

.calc-row:disabled .calc-row__copy {
  visibility: hidden;
}

.calc-row__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.calc-row__label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.calc-row__sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* Dutching's share of the stake: the Odds Converter's meter, at a hairline's weight. */
.calc-row__share {
  position: relative;
  display: block;
  height: calc(4px * var(--scale));
  margin-top: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}

.calc-row__share-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
  transition: clip-path var(--sd-spring) var(--se-out);
}

.calc-row__value {
  flex: none;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
}

.calc-row[data-empty="true"] .calc-row__value {
  color: var(--text-disabled);
}

.calc-row[data-tone="gain"] .calc-row__value {
  color: var(--success-strong);
}

.calc-row[data-tone="loss"] .calc-row__value {
  color: var(--error-strong);
}

.calc-row__copy {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  opacity: 0.65;
}

/* --- The pad --------------------------------------------------------------------------------------- */

/* Pinned under the scroller, edge to edge: the keys are furniture, not a card. */
.calc-pad {
  position: relative;
  flex: none;
  padding: var(--space-2) var(--calc-pad-gutter)
    calc(var(--space-2) + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* The toasts rise from the pad's top edge rather than from a nav they cannot see. */
.calc .slip-toasts {
  position: absolute;
  bottom: 100%;
  padding-bottom: var(--space-3);
}

.calc-common {
  margin: 0 calc(var(--calc-pad-gutter) * -1) var(--space-2);
}

.calc-common__track {
  display: flex;
  gap: var(--space-2);
  min-height: var(--control-xs);
  padding: 0 var(--space-3);
}

.calc-chip {
  --press-scale: 0.96;

  flex: none;
  height: var(--control-xs);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: transform var(--spring-duration) var(--spring);
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
}

.calc-key {
  display: grid;
  place-items: center;
  height: var(--calc-key-height);
  border-radius: var(--radius-md);
  color: var(--text);
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.calc-key[data-pressed="true"] {
  background: var(--surface-sunken);
}

.calc-key__glyph {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
}

.calc-key[data-key="pad"],
.calc-key[data-key="delete"] {
  color: var(--text-secondary);
}

/* A full stop sits on the baseline, a quarter of an em below the middle of a
   centred line box, so it is lifted back to it; "+/-" is three characters
   wide at a digit's size, so it steps down. */
.calc-key__glyph[data-pad="dot"] {
  font-size: var(--text-3xl);
  transform: translateY(-0.22em);
}

.calc-key__glyph[data-pad="sign"] {
  font-size: var(--text-base);
}

.calc-key[data-key="delete"][data-empty="true"] {
  color: var(--text-disabled);
}

/* --- Sheets ----------------------------------------------------------------------------------------- */

/* The Slip Builder's sheet at this page's size — the Odds Converter's three overrides. */
.calc .slip-sheet__panel {
  max-height: min(84dvh, calc(760px * var(--scale)));
}

.calc .slip-sheet__title {
  padding: var(--space-1) var(--space-4) var(--space-3);
  font-size: var(--text-lg);
}

.calc .slip-sheet__body {
  padding: 0 var(--space-4) var(--space-4);
}

.calc-options {
  display: flex;
  flex-direction: column;
}

.calc-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(56px * var(--scale));
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.calc-option + .calc-option {
  border-top: 1px solid var(--border);
}

.calc-option__text {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.calc-option__name {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.calc-option__example {
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.calc-option__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.calc-option[aria-pressed="true"] .calc-option__name {
  color: var(--accent);
}

.calc-option[aria-pressed="true"] .calc-option__tick {
  opacity: 1;
}

.calc-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.calc-about__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.calc-about__name {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.calc-about__text {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.calc-about__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* --- Short screens ------------------------------------------------------------------------------------ */

/*
 * Under about 700pt the display title, the readout and the keypad together
 * cost more than the inputs between them are worth. Everything keeps its role
 * and gives up a few points, as on the Odds Converter; nothing is taken away.
 */
@media (max-height: 700px) {
  .calc-title {
    font-size: var(--text-xl);
  }

  .calc-readout__value {
    min-height: var(--control-md);
  }

  .calc-readout__text {
    font-size: var(--text-4xl);
  }

  .calc-field__main {
    min-height: calc(48px * var(--scale));
  }

  .calc {
    --calc-key-height: calc(46px * var(--scale));
  }
}

/* --- Motion ------------------------------------------------------------------------------------------- */

/* A value that changed without a key being pressed on it rises through its
   fade — the Odds Converter's swap, on every figure the typing moves. */
.calc-readout__text[data-anim="swap"],
.calc-row__value[data-anim="swap"],
.calc-field__text[data-anim="swap"] {
  animation: calc-swap var(--sd-pop) var(--se-out);
}

@keyframes calc-swap {
  0% {
    transform: translateY(calc(4px * var(--scale)));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Reduced motion ------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .calc {
    --sd-fade: 100ms;
    --sd-pop: 0ms;
    --sd-spring: 0ms;
    --se-spring: ease-out;
  }

  .calc__sheet {
    transform: none;
  }

  .calc [data-anim] {
    animation: none !important;
  }

  /* The one motion that never stops, held still and on. */
  .calc-field__caret {
    animation: none;
    opacity: 1;
  }
}