/* Calculator: the four tools. Sizes come from the kit's variables so Big and easy scales them. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Percentage: four sentence calculators, two by two on a wide screen. */
.pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--hx-gap); }
.pc-q { border: 1px solid var(--hx-line); border-radius: 16px; padding: 12px 14px; background: #fdfdfc; min-width: 0; }
.pc-h { margin: 0 0 6px; font-size: var(--hx-small); font-weight: 700; color: var(--hx-muted); }
.pc-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; }
.pc-n { width: 6.2em; flex: 0 1 6.2em; }
.pc-s { width: 4.6em; flex: 0 1 4.6em; }
.pc-q .hx-out { margin: 8px 0 2px; }
.pc-q .hx-formula { margin: 0; }

/* Tip and split: inputs and rounding on the left, the answer on the right; a phone shows the answer second. */
.tp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "in out" "rnd out"; gap: 14px 24px; align-items: start; }
.tp-in { grid-area: in; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
.tp-out { grid-area: out; }
.tp-rnd { grid-area: rnd; }
.tp-tip { grid-column: 1 / -1; }
.tp-step { display: flex; gap: 6px; }
.tp-step .hx-in { width: 3.6em; text-align: center; }
.tp-step .hx-btn { padding: 0; font-size: calc(var(--hx-fs) * 1.2); }
.tp-tiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-tiprow .hx-in { width: 4.6em; flex: none; }
.tp-tiprow .hx-btn { min-width: calc(var(--hx-tap) + 8px); }
.tp-rnd .hx-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-rnd .hx-btn { font-size: var(--hx-small); padding: 0 6px; }
.tp-out { border: 1px solid var(--hx-line); border-radius: 16px; padding: 14px 16px; background: var(--hx-soft); }
.tp-main { margin: 0 0 6px; }
.tp-main .hx-lab { margin: 0; }
.tp-main .hx-out { display: block; font-size: calc(var(--hx-out) * 1.25); }
.tp-dl { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tp-dl div { display: flex; gap: 6px; align-items: baseline; }
.tp-dl dt { color: var(--hx-muted); font-size: var(--hx-small); }
.tp-dl dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-out .hx-formula { margin: 0; }
.tp-out .hx-err { margin: 6px 0 0; }
@media (max-width: 760px) {
  .tp { grid-template-columns: 1fr; grid-template-areas: "in" "out" "rnd"; gap: 12px; }
  .tp-out { padding: 10px 14px; }
  .tp-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .tp-main .hx-out { display: inline; }
}

/* Fraction */
.fr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.fr-in { display: grid; gap: 10px; }
.fr-n { font-size: calc(var(--hx-fs) * 1.15); }
.fr-out { border: 1px solid var(--hx-line); border-radius: 16px; padding: 14px 16px; background: var(--hx-soft); min-width: 0; }
.fr-ans { margin: 0 0 4px; }
.fr-ans .hx-lab { margin: 0; }
.fr-ans .hx-out { display: block; font-size: calc(var(--hx-out) * 1.3); }
.fr-vis { display: inline-flex; align-items: center; gap: .18em; }
.fr-f { display: inline-flex; flex-direction: column; align-items: center; font-size: .62em; line-height: 1.05; }
.fr-f span:first-child { border-bottom: .09em solid currentColor; padding: 0 .12em; }
.fr-out .hx-formula { margin: 0 0 6px; font-size: var(--hx-fs); color: var(--hx-ink); font-weight: 600; }
.fr-steps { margin: 6px 0 0; padding-left: 1.3em; font-size: var(--hx-small); color: var(--hx-ink); line-height: 1.5; }
.fr-tip { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .fr { grid-template-columns: 1fr; gap: 12px; }
  .fr-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .fr-ops { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 10px; }
  .fr-ops .hx-lab { margin: 0; }
  .fr-out { padding: 10px 14px; }
}

/* Scientific: display, a big keypad, history beside it on a wide screen. */
.sc { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.sc-main { min-width: 0; }
.sc-disp { border: 2px solid var(--hx-edge); border-radius: 16px; padding: 8px 12px 10px; background: #fff; }
.sc-disp:focus-within { border-color: var(--hx-accent); }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.sc-prev { color: var(--hx-muted); font-size: var(--hx-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sc-unit { display: flex; border: 1px solid var(--hx-edge); border-radius: 10px; overflow: hidden; flex: none; }
.sc-u { min-height: max(44px, calc(var(--hx-tap) - 4px)); min-width: 56px; border: 0; background: #fff; color: var(--hx-ink); font: 700 var(--hx-small)/1 var(--hx-sans); cursor: pointer; }
.sc-u[aria-checked="true"] { background: var(--hx-accent); color: #fff; }
.sc-expr { display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 4px 0; text-align: right;
  font: 600 calc(var(--hx-fs) * 1.3)/1.25 var(--hx-sans); color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.sc-expr { min-height: var(--hx-tap); }
.sc-expr:focus { outline: 3px solid rgba(46, 102, 209, .4); outline-offset: 2px; border-radius: 8px; }
.sc-res { display: block; text-align: right; min-height: 1.15em; font-size: calc(var(--hx-out) * 1.05); }
.sc-res.hx-err { font-size: var(--hx-fs); padding-top: .4em; }
.sc-keys { margin-top: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(var(--hx-tap), auto); gap: 8px; }
.sk { min-height: var(--hx-tap); border: 1px solid #d3d8df; border-radius: 12px; background: #fff; color: var(--hx-ink); font: 700 var(--hx-fs)/1 var(--hx-sans);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; padding: 0; }
.sk:hover { border-color: var(--hx-ink); }
.sk:active { background: var(--hx-soft); }
.sk-d { font-size: calc(var(--hx-fs) * 1.2); background: #f6f7f9; }
.sk-f { font-size: var(--hx-small); color: var(--hx-accent-ink); }
.sk-o { font-size: calc(var(--hx-fs) * 1.15); color: var(--hx-accent-ink); }
.sk-c { background: #fdf1ee; color: var(--hx-bad); border-color: #efd2cb; }
.sk-eq { grid-column: 5; grid-row: 6 / span 2; background: var(--hx-accent); border-color: var(--hx-accent); color: #fff; font-size: calc(var(--hx-fs) * 1.4); }
.sk-eq:active { background: var(--hx-accent-ink); }
.sk-z { grid-column: span 2; }
.sc-hist { border: 1px solid var(--hx-line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.sc-hh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-ht { margin: 0; font-size: var(--hx-fs); font-weight: 800; }
.sc-clear { min-height: var(--hx-tap); font-size: var(--hx-small); }
.sc-clear[hidden] { display: none; }
.sc-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.sc-h { width: 100%; min-height: var(--hx-tap); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--hx-line);
  background: none; color: var(--hx-ink); font: 500 var(--hx-small)/1.3 var(--hx-sans); cursor: pointer; text-align: right; }
.sc-h span { color: var(--hx-muted); overflow-wrap: anywhere; }
.sc-h b { font-size: var(--hx-fs); overflow-wrap: anywhere; }
.sc-h:hover { background: #f6f7f9; }
.sc-empty, .sc-kb { margin: 8px 0 0; }
@media (max-width: 860px) {
  .sc { grid-template-columns: 1fr; gap: 14px; }
  .sk { order: 1; }
  .sk-sci { order: 2; }                                /* a phone shows the digits first, the functions under them */
  .sk-eq { grid-row: 4 / span 2; }
  .sc-keys { gap: 6px; grid-auto-rows: minmax(46px, auto); }
  .sk { min-height: 46px; }
  .sc-kb { display: none; }
}
html.hx-big .sc-keys { grid-auto-rows: minmax(var(--hx-tap), auto); }
html.hx-big .sk { min-height: var(--hx-tap); }
.tp-adv { margin: 6px 0 0; }
@media (max-width: 480px) {
  .pc-q { padding: 10px 12px; }
  .pc-n { width: 4.4em; flex-basis: 4.4em; }
  .pc-s { width: 3.8em; flex-basis: 3.8em; }
  .pc-q .hx-out { margin-top: 6px; }
}
html.hx-big .sc-u { min-height: var(--hx-tap); }