/* The calculator: a pocket slate in a pine frame. The display is chalk on slate, the keys are chalk
   lying on the ledge. Every color comes from the tokens in styles.css, with the same values as
   fallbacks so the panel also stands on a bare page. */

.calc {
  --c-slate: var(--slate, #2a3538);
  --c-slate-deep: var(--slate-deep, #1f282a);
  --c-grid: var(--grid, rgba(222, 234, 229, 0.085));
  --c-chalk: var(--chalk, #f1eee6);
  --c-chalk-dim: var(--chalk-dim, rgba(241, 238, 230, 0.7));
  --c-yellow: var(--chalk-yellow, #f2c94c);
  --c-coral: var(--chalk-coral, #ef8a74);
  --c-pine: var(--pine, #c28b55);
  --c-pine-light: var(--pine-light, #cd9860);
  --c-pine-deep: var(--pine-deep, #93602f);
  --c-burn: var(--burn, #3f250f);
  --c-ui: var(--font-ui, "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif);
  --c-hand: var(--font-hand, "Andika", "Atkinson Hyperlegible Next", system-ui, sans-serif);
  --c-mono: var(--font-mono, "Atkinson Hyperlegible Mono", ui-monospace, monospace);

  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 20px));
  z-index: 60;
  width: 344px;
  padding: 8px 12px 14px;
  border-radius: 26px;
  color: var(--c-burn);
  font-family: var(--c-ui);
  /* The same quiet pine grain as the page, a little lighter so the frame reads as a separate piece. */
  background-color: var(--c-pine);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, rgba(90, 50, 15, 0.05) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--c-pine-light), var(--c-pine) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.45),
    inset 0 -2px 0 rgba(63, 37, 15, 0.18),
    0 2px 0 rgba(63, 37, 15, 0.35),
    0 18px 40px -12px rgba(31, 20, 8, 0.55);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  animation: calc-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.calc[hidden] { display: none; }
.calc:focus { outline: none; }
.calc:focus-visible { outline: 3px solid var(--c-chalk); outline-offset: 3px; }
.calc *, .calc *::before, .calc *::after { box-sizing: border-box; }

@keyframes calc-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.calc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- head ---------- */

.calc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-left: 6px;
}
.calc-title {
  margin: 0;
  font: 700 19px/1 var(--c-hand);
  letter-spacing: 0.01em;
  color: var(--c-burn);
}
.calc-close {
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-burn);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.calc-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---------- the slate ---------- */

.calc-screen {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
  min-height: 132px;
  padding: 10px 14px 12px;
  border-radius: 14px;
  color: var(--c-chalk);
  background-color: var(--c-slate);
  /* The board's grid, faint, and a soft chalk haze where old sums were wiped. */
  background-image:
    radial-gradient(120% 90% at 18% 110%, rgba(241, 238, 230, 0.06), transparent 60%),
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
  background-position: 0 0, -1px -1px, -1px -1px;
  /* A slate set into the frame: a dark rim below the wood's lip. */
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 236, 205, 0.4);
}

.calc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

/* Degrees or radians: a small groove in the slate with the choice in hand lifted in chalk. */
.calc-angle {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  min-height: 34px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(241, 238, 230, 0.08);
  font: 600 13px/1 var(--c-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-chalk-dim);
  cursor: pointer;
}
.calc-angle span {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease;
}
.calc-angle[data-on="deg"] span[data-a="deg"],
.calc-angle[data-on="rad"] span[data-a="rad"] {
  background: var(--c-chalk);
  color: var(--c-slate-deep);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.calc-angle:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 2px; }

.calc-history {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 14px/1.2 var(--c-mono);
  color: var(--c-chalk-dim);
  text-align: right;
}

/* The typed line, in the chalk hand. Long lines scroll so the newest key stays in view. */
.calc-line {
  margin: 4px 0 0;
  min-height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: right;
  font: 400 27px/1.35 var(--c-hand);
  color: var(--c-chalk);
  text-shadow: 0 0 1px rgba(241, 238, 230, 0.45);
  scrollbar-width: none;
}
.calc-line::-webkit-scrollbar { display: none; }
.calc-typed.is-empty { color: rgba(241, 238, 230, 0.4); }
/* Brackets still to close, ghosted in: the calculator closes them on "=". */
.calc-ghost { color: rgba(241, 238, 230, 0.34); text-shadow: none; }

.calc-result {
  min-height: 46px;
  margin: 0;
  overflow-x: auto;
  white-space: nowrap;
  text-align: right;
  font: 700 34px/1.3 var(--c-hand);
  color: var(--c-yellow);
  text-shadow: 0 0 1px rgba(242, 201, 76, 0.5);
  scrollbar-width: none;
}
.calc-result::-webkit-scrollbar { display: none; }
.calc-result.is-error { color: var(--c-coral); font-size: 26px; line-height: 1.75; text-shadow: none; }
.calc-result.is-new .calc-answer { display: inline-block; animation: calc-write 220ms ease-out; }

@keyframes calc-write {
  from { opacity: 0; clip-path: inset(0 0 0 100%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------- the keys ---------- */

.calc-pad {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* The function rows first, then the number pad, a little taller. */
  grid-template-rows: repeat(3, 44px) repeat(4, 50px);
  gap: 7px;
  margin-top: 12px;
}

.calc-key {
  appearance: none;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  font: 700 16px/1 var(--c-ui);
  color: #262422;
  background: var(--c-chalk);
  box-shadow: 0 2px 0 rgba(63, 37, 15, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease, background-color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .calc-key:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(63, 37, 15, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.07); }
  .calc-key.is-fn:hover, .calc-key.is-quiet:hover { background: rgba(255, 244, 228, 0.5); }
  .calc-close:hover { background: rgba(255, 244, 228, 0.28); }
}
.calc-key:active,
.calc-key.is-down { transform: translateY(1px); box-shadow: 0 1px 0 rgba(63, 37, 15, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.07); }
.calc-key:focus-visible { outline: 3px solid var(--c-slate-deep); outline-offset: 2px; }

.calc-key.is-digit { font: 700 23px/1 var(--c-hand); }
.calc-key.is-op { font: 700 23px/1 var(--c-hand); background: var(--c-yellow); }
.calc-key.is-fn {
  font-size: 15px;
  color: var(--c-burn);
  background: rgba(255, 244, 228, 0.34);
  box-shadow: inset 0 -2px 0 rgba(63, 37, 15, 0.12), 0 1px 0 rgba(63, 37, 15, 0.22);
}
.calc-key.is-quiet {
  font: 700 22px/1 var(--c-hand);
  color: var(--c-burn);
  background: rgba(255, 244, 228, 0.34);
  box-shadow: inset 0 -2px 0 rgba(63, 37, 15, 0.12), 0 1px 0 rgba(63, 37, 15, 0.22);
}
.calc-key.is-quiet svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc-key.is-clear { background: var(--c-coral); color: #2b1208; font: 700 20px/1 var(--c-hand); }
.calc-key.is-equals {
  grid-row: span 2;
  font: 700 30px/1 var(--c-hand);
  color: var(--c-chalk);
  background: var(--c-burn);
  box-shadow: 0 2px 0 rgba(31, 18, 6, 0.6), inset 0 1px 0 rgba(255, 236, 205, 0.18);
}
.calc-key.is-equals:focus-visible { outline-color: var(--c-slate-deep); }
.calc-key[data-key="0"] { grid-column: span 2; }
.calc-key[aria-pressed="true"],
.calc-key[aria-pressed="true"]:hover { background: var(--c-burn); color: var(--c-chalk); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35); }

/* ---------- a phone ---------- */

@media (max-width: 520px) {
  .calc {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-width: 420px;
    margin-inline: auto;
    padding: 6px 10px 12px;
    border-radius: 24px;
  }
  .calc-pad { gap: 7px 6px; }
}

@media (max-height: 640px) {
  .calc { bottom: max(8px, env(safe-area-inset-bottom)); }
  .calc-screen { min-height: 112px; }
  .calc-pad { grid-template-rows: repeat(3, 44px) repeat(4, 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .calc, .calc-result.is-new .calc-answer { animation: none; }
  .calc-key, .calc-key:hover, .calc-key:active, .calc-key.is-down { transition: none; transform: none; }
}

@media (forced-colors: active) {
  .calc-key, .calc-angle span, .calc-close { border: 1px solid ButtonText; }
  .calc-angle[data-on="deg"] span[data-a="deg"],
  .calc-angle[data-on="rad"] span[data-a="rad"] { outline: 2px solid Highlight; }
}