/* The "Search any symbol" widget — shared between every calculator page
   and the home page, see symbol-switcher.js. Uses the theme's own color
   tokens (--surface, --border, etc.) so it matches whichever light/dark
   page it's dropped into without its own separate theming. */
.calc-switcher{ position:relative; max-width:420px; margin:0 0 20px; }
.calc-switcher-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px; }
.calc-switcher-box{ position:relative; }
.calc-switcher-box input{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); font-size:14px; }
.calc-switcher-results{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-2); z-index:15; max-height:260px; overflow-y:auto; }
/* one shared style for every row — an <a> when the page already exists,
   a <button> when it doesn't yet, visually identical either way. */
.calc-switcher-result{ display:block; width:100%; box-sizing:border-box; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); padding:9px 12px; font:inherit; font-size:13.5px; color:var(--ink); text-decoration:none; cursor:pointer; }
.calc-switcher-result:last-child{ border-bottom:none; }
.calc-switcher-result:hover{ background:var(--surface-2); }
.calc-switcher-result .sym{ font-family:var(--font-mono); font-weight:600; margin-right:7px; color:var(--accent-strong); }
.calc-switcher-msg{ margin-top:6px; font-size:12.5px; color:var(--ink-muted); }
.calc-switcher-msg.error{ color:#B3261E; }