/* Element resets and global primitives. Layout/component classes live in app.css. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sun-soft); }

/* Visible keyboard focus (roadmap F11). A browser's default ring doesn't read well against
   this app's custom pill/circle-shaped controls - switches, chips, offer cards, and the
   plain divs/spans/labels standing in for a control via [data-action] + tabindex (see
   js/main.js's keydown bridge) - so one consistent ring covers all of them plus every native
   button/link/select. :focus-visible (not :focus) so a mouse click never shows it, only real
   keyboard navigation. A handful of text inputs (`.input`, `.tip`, name fields) already have
   their own focus treatment (a border/background colour change) and explicitly suppress
   `outline` - same-specificity cascade order means their own rule wins there, which is fine:
   a colour change is itself a valid focus indicator, this ring just isn't layered on top. */
:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

input, button, select, textarea { font-family: inherit; }
input:disabled { opacity: .55; cursor: not-allowed; }

/* Range slider (heating / power price) */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: var(--line-2);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sun);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--sun);
  cursor: pointer;
}

/* Custom scrollbar for the scrolling main area */
.scrl::-webkit-scrollbar { width: 10px; height: 10px; }
.scrl::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid var(--paper);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }