/* Calculator panel (static/calculator.js). Uses the tokens from style.css: flat surfaces, hairline rules, serif display, sans UI. */
.calc-toggle { position: fixed; right: var(--space-2); bottom: var(--space-2); z-index: 20; padding: .6rem 1.1rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 .95rem var(--sans); cursor: pointer; }
.calc { position: fixed; right: var(--space-2); bottom: 4.5rem; z-index: 20; width: min(22rem, 100vw - 2rem); max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; box-sizing: border-box; padding: var(--space-2); background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius-lg); font-family: var(--sans); }
.calc[hidden] { display: none; }
.calc button { font: 500 1rem var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: .5rem .25rem; cursor: pointer; min-height: 2.5rem; }
.calc button:hover { border-color: var(--accent); }
.calc button:active { background: var(--surface); }
.calc-top { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); }
.calc-title { margin: 0; font: 400 1.4rem/1 var(--serif); letter-spacing: -.01em; flex: 1; }
.calc .calc-mode { padding: .25rem .75rem; font-size: .9rem; border-radius: 999px; }
.calc .calc-close { min-width: 2.5rem; font-size: 1.25rem; line-height: 1; }

/* the tape: oldest at the top, newest at the bottom, results on the right */
.calc-tape { max-height: 7.5rem; overflow-y: auto; margin-bottom: var(--space-1); border-bottom: 1px solid var(--rule); }
.calc-history { list-style: none; margin: 0; padding: 0; }
.calc-history li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.calc .calc-history button { min-height: 2rem; padding: .15rem .35rem; border-color: transparent; background: transparent; font: .9rem ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.calc .calc-history .calc-hist-expr { flex: 1; text-align: left; color: var(--muted); }
.calc .calc-history .calc-hist-result { flex: none; max-width: 55%; text-align: right; font-weight: 600; }
.calc .calc-history button:hover { border-color: var(--accent); }
.calc .calc-clear-history { width: 100%; margin-top: var(--space-1); min-height: 2rem; font-size: .85rem; color: var(--muted); border-style: dashed; }

.calc-input, .calc-field { width: 100%; padding: .6rem; font: 1.05rem ui-monospace, Consolas, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); }
.calc-input[hidden], .calc-field[hidden] { display: none; }
.calc-field { padding: .15rem .4rem; }
.calc-field:focus-within, .calc-input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.calc-field math-field { display: block; width: 100%; font-size: 1.25rem; background: transparent; color: var(--text); border: 0; outline: none; --hue: 260; --caret-color: var(--accent); --selection-background-color: var(--surface); --text-font-family: var(--sans); }
.calc-field math-field::part(virtual-keyboard-toggle) { display: none; }
.calc-field math-field::part(menu-toggle) { display: none; }
.calc-output { display: block; min-height: 2.25rem; padding: .35rem .1rem; font: 600 1.4rem ui-monospace, Consolas, monospace; text-align: right; overflow-wrap: anywhere; }
.calc-output.is-error { font: 500 .95rem var(--sans); text-align: left; color: var(--muted); }

.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.calc-keys button[data-insert="sin("], .calc-keys button[data-insert="cos("], .calc-keys button[data-insert="tan("], .calc-keys button[data-insert="sqrt("], .calc-keys button[data-insert="^"], .calc-keys button[data-insert="pi"], .calc-keys button[data-insert="ans"] { background: var(--surface); color: var(--muted); border-color: var(--rule); }
.calc-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .3rem; margin: .3rem 0; }
.calc .calc-equals, .calc .calc-send { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.calc .calc-equals:hover, .calc .calc-send:hover { background: var(--accent); filter: brightness(1.08); }
.calc .calc-send { width: 100%; margin-top: .3rem; }
.calc-notice { min-height: 1.25rem; margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }

.calc-more, .calc-constants { margin-top: var(--space-1); font-size: .9rem; }
.calc summary { cursor: pointer; color: var(--muted); }
.calc-more-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: .4rem; }
.calc .calc-more-keys button { font-size: .9rem; }
.calc-hint { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.calc-constants ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.calc-constants li { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .3rem; color: var(--muted); }
.calc-constants li button { min-width: 2.75rem; flex: none; }
.calc-convert { margin-top: var(--space-1); font-size: .9rem; }
.calc-convert-row { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.calc-convert-row input { flex: 1 1 4rem; min-width: 0; padding: .4rem; font: .95rem ui-monospace, Consolas, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); }
.calc-convert-row span { color: var(--muted); }
.calc .calc-convert-go { flex: none; padding-inline: .75rem; }
@media print { .calc, .calc-toggle { display: none !important; } }