/* ForgeCore Scroll System v5
   One clear scrollbar per scroll region, modern dark rails, accessible contrast,
   stable gutters, edge shadows, and a compact page-progress control. */

:root{
  --scroll-track:#07101e;
  --scroll-track-soft:#0b1627;
  --scroll-thumb-a:#3ce1ea;
  --scroll-thumb-b:#5f7cff;
  --scroll-thumb-c:#a86bff;
  --scroll-outline:rgba(155,232,255,.22);
  color-scheme:dark;
}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#5e83ff #07101e;
}

/* Main document scrollbar: replaces the thick grey browser rail in Chromium. */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:12px;
  height:12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg,rgba(4,9,18,.98),rgba(8,17,31,.98));
  border-left:1px solid rgba(148,163,184,.10);
  box-shadow:inset 2px 0 8px rgba(0,0,0,.32);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:72px;
  border:3px solid transparent;
  border-radius:999px;
  background:
    linear-gradient(180deg,var(--scroll-thumb-a),var(--scroll-thumb-b) 54%,var(--scroll-thumb-c)) padding-box;
  box-shadow:
    0 0 0 1px var(--scroll-outline),
    0 0 18px rgba(72,196,245,.34);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  border-width:2px;
  background:
    linear-gradient(180deg,#8af7fb,#90a0ff 50%,#d0a5ff) padding-box;
  box-shadow:
    0 0 0 1px rgba(206,247,255,.38),
    0 0 24px rgba(80,205,255,.48);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,#e0fdff,#a8b4ff 48%,#dfc2ff) padding-box;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#07101e;
}

/* Remove the second decorative meter from v4: the native styled thumb is now the
   single, clear source of scroll position. */
.panel-scroll-meter{display:none!important}

.category-list,
.formula-list,
.science-calculator output,
.history-list{
  scrollbar-width:auto;
  scrollbar-color:#43dbe7 #081321;
  scrollbar-gutter:stable;
}

.category-list,
.formula-list{
  margin-right:2px;
  padding-right:12px;
  outline:none;
}

.category-list:focus-visible,
.formula-list:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(60,225,234,.32);
  border-radius:12px;
}

.category-list::-webkit-scrollbar,
.formula-list::-webkit-scrollbar,
.science-calculator output::-webkit-scrollbar,
.history-list::-webkit-scrollbar{
  width:11px;
  height:11px;
}

.category-list::-webkit-scrollbar-track,
.formula-list::-webkit-scrollbar-track,
.science-calculator output::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track{
  margin:7px 0 18px;
  border:1px solid rgba(148,163,184,.09);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(4,10,19,.82),rgba(12,25,43,.86));
  box-shadow:inset 0 0 8px rgba(0,0,0,.42);
}

.category-list::-webkit-scrollbar-thumb,
.formula-list::-webkit-scrollbar-thumb,
.science-calculator output::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb{
  min-height:76px;
  border:2px solid transparent;
  border-radius:999px;
  background:
    linear-gradient(180deg,var(--scroll-thumb-a),var(--scroll-thumb-b) 55%,var(--scroll-thumb-c)) padding-box;
  box-shadow:
    0 0 0 1px rgba(121,226,255,.20),
    0 0 15px rgba(52,214,232,.30);
}

.category-list::-webkit-scrollbar-thumb:hover,
.formula-list::-webkit-scrollbar-thumb:hover,
.science-calculator output::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover{
  border-width:1px;
  background:
    linear-gradient(180deg,#9afaff,#91a1ff 52%,#d2adff) padding-box;
  box-shadow:
    0 0 0 1px rgba(222,250,255,.34),
    0 0 22px rgba(52,214,232,.48);
}

.category-list::-webkit-scrollbar-button,
.formula-list::-webkit-scrollbar-button,
.science-calculator output::-webkit-scrollbar-button,
.history-list::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

/* A single subtle scroll hint remains at the bottom instead of a duplicate rail. */
.panel-scroll-label{
  right:24px;
  bottom:13px;
  padding:6px 10px 6px 24px;
  border-color:rgba(60,225,234,.22);
  background:rgba(5,12,23,.90);
  color:#9ab0c8;
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
}

.panel-scroll-label::before{
  content:"↓";
  position:absolute;
  left:9px;
  top:50%;
  transform:translateY(-52%);
  color:var(--scroll-thumb-a);
  font-size:11px;
  animation:fc-scroll-bob 1.25s ease-in-out infinite;
}

.category-panel.at-end .panel-scroll-label,
.formula-panel.at-end .panel-scroll-label{
  opacity:0!important;
  transform:translateY(5px)!important;
}

/* Stronger top/bottom edge depth, without hiding list content. */
.category-panel::after,
.formula-panel::after{
  inset:auto 10px 0;
  height:58px;
  background:
    linear-gradient(180deg,transparent 0,rgba(7,13,25,.78) 58%,rgba(7,13,25,.98) 100%);
}

/* Compact page progress / back-to-top control. */
.fc-page-scroll-control{
  --page-progress:0deg;
  position:fixed;
  z-index:190;
  right:22px;
  bottom:max(22px,env(safe-area-inset-bottom));
  width:54px;
  height:54px;
  border:0;
  border-radius:18px;
  padding:2px;
  display:grid;
  place-items:center;
  background:conic-gradient(from -90deg,var(--scroll-thumb-a) 0,var(--scroll-thumb-b) var(--page-progress),rgba(88,111,145,.18) var(--page-progress),rgba(88,111,145,.18) 360deg);
  box-shadow:0 16px 42px rgba(0,0,0,.34),0 0 26px rgba(63,203,241,.16);
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
  cursor:pointer;
}

.fc-page-scroll-control::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(148,190,230,.18);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(10,20,35,.98),rgba(5,11,21,.98));
}

.fc-page-scroll-control.visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.fc-page-scroll-control:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 48px rgba(0,0,0,.40),0 0 30px rgba(63,203,241,.28);
}

.fc-page-scroll-control .arrow,
.fc-page-scroll-control .percent{
  position:relative;
  z-index:1;
}

.fc-page-scroll-control .arrow{
  margin-top:-5px;
  color:#eafaff;
  font-size:18px;
  line-height:1;
}

.fc-page-scroll-control .percent{
  margin-top:-8px;
  color:#8fa7c1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
}

body.fc-is-scrolling .fc-page-scroll-control.visible{
  box-shadow:0 20px 48px rgba(0,0,0,.42),0 0 34px rgba(60,225,234,.30);
}

@keyframes fc-scroll-bob{
  0%,100%{transform:translateY(-62%)}
  50%{transform:translateY(-34%)}
}

@media(max-width:760px){
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:8px;height:8px}
  .category-list::-webkit-scrollbar,.formula-list::-webkit-scrollbar{width:9px;height:9px}
  .fc-page-scroll-control{right:13px;bottom:max(13px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:16px}
  .fc-page-scroll-control::before{border-radius:13px}
  .panel-scroll-label{display:none!important}
}

@media(pointer:coarse){
  .category-list,.formula-list{scrollbar-width:auto}
  .category-list::-webkit-scrollbar,.formula-list::-webkit-scrollbar{width:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .panel-scroll-label::before{animation:none}
  .fc-page-scroll-control{transition:none}
}

@media(forced-colors:active){
  html,.category-list,.formula-list,.science-calculator output,.history-list{
    scrollbar-color:auto;
  }
  .fc-page-scroll-control{display:none}
}

@media print{
  .fc-page-scroll-control{display:none!important}
}