:root {
  --m: 'Fira Code', 'Fira Mono', 'Cascadia Code', 'JetBrains Mono', monospace;
  --s: 'Fira Code', 'Fira Mono', 'Cascadia Code', 'JetBrains Mono', monospace;
  --c1: #1a1814;
  --c3: #5a5549;
  --c4: #76716a;
  --red: #b5342e;
  --grn: #3a7d44;
  --gold: #c4973b;
  --blue: #3a5f8a;
  --interview: #6b8f71;
  --features: #7a6c5d;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--m);
  background: #F3F3F3;
  color: var(--c1);
}

.loader {
  width: 30vmin;
  height: 30vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sticky-header {
  transition: box-shadow 0.3s ease;
}

#sticky-header.stuck {
  box-shadow: 0 4px 16px rgba(26, 24, 20, 0.08);
}

.info-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-wrap.compressed {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.05, 0.7, 0.1, 1);
}

.info-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-wrap.open {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.05, 0.7, 0.1, 1);

}

.accordion-inner {
  overflow: hidden;
  min-height: 0;
}

.today-btn:not(.pinned):hover .today-tick-line {
  background: var(--c1) !important;
}

.today-btn.near .today-tick-line {
  background: #F70000 !important;
  opacity: 0.5;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.pan-layer { transform: translateX(var(--pan-x, 0px)); will-change: transform; }

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

::view-transition-old(root) { animation: fade-out 0.4s ease; }
::view-transition-new(root) { animation: fade-in  0.4s ease; }

/* Switcher */

.switcher {
  position: relative;
  width: 78px;
  height: 21px;
  overflow: hidden;
}

.switcher input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switcher input:disabled { cursor: default; }

.switcher .switcher-track {
  width: 78px;
  height: 21px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  transition: background 0.2s ease;
}

.switcher input:checked + .switcher-track {
  background: rgba(0, 0, 0, 0.70);
}

.switcher .switcher-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 40px;
  height: 15px;
  background: #fff;
  border-radius: 6px;
  transition: left 0.2s ease;
  pointer-events: none;
}

.switcher input:checked ~ .switcher-thumb {
  left: 35px;
}

.switcher input:disabled ~ .switcher-thumb,
.switcher input:disabled + .switcher-track {
  opacity: 0.4;
}

/* Nav slider */

.nav-slider {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-slider .nav-handle rect {
  transition: fill 0.15s ease, transform 0.15s ease;
}

.nav-slider:hover .nav-handle rect {
  fill: #1A1814;
  transform: scale(1.6, 1.4);
}

.nav-slider.dragging .nav-handle rect,
.nav-slider.active .nav-handle rect {
  fill: #1A1814;
  transform: scaleY(1.913);
}

/* Magnet */

.magnet .magnet-bar {
  transition: fill 0.15s ease, y 0.15s ease, height 0.15s ease;
}

.magnet:not(.pinned):hover .magnet-bar {
  fill: #1A1814;
  y: 11.5;
  height: 17;
}

/* Settings */

.settings-dot {
  cursor: pointer;
}

.settings-dot circle {
  transition: fill-opacity 0.15s ease;
}

.settings-dot:hover circle {
  fill-opacity: 1;
}

.settings-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(26, 24, 20, 0.12);
  padding: 4px 0;
  min-width: 120px;
  z-index: 200;
  font-family: var(--m);
  font-size: 12px;
}

.settings-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--m);
  font-size: 12px;
  color: var(--c1);
  cursor: pointer;
}

.settings-dropdown button:hover {
  background: rgba(26, 24, 20, 0.05);
}