/* Motion shared by every page. Paired with js/motion.js.

   The easing below is a spring (frequency 1.9 Hz, damping 0.78, 0.6 s)
   sampled into linear(). It overshoots by two percent and settles, which is
   the same feel as the pill, so a page change and a filter change move
   alike. Browsers without linear() fall back to the cubic-bezier. */
:root {
  --skb-ease: cubic-bezier(.2, .9, .25, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --skb-ease: linear(0, 0.0095, 0.0353, 0.0737, 0.1213, 0.1756, 0.2341, 0.295, 0.3566, 0.4177, 0.4772, 0.5345, 0.5888, 0.6398, 0.6871, 0.7308, 0.7706, 0.8067, 0.8391, 0.868, 0.8935, 0.9158, 0.9352, 0.952, 0.9662, 0.9782, 0.9883, 0.9965, 1.0031, 1.0084, 1.0124, 1.0154, 1.0176, 1.0189, 1.0197, 1.0199, 1.0198, 1.0192, 1.0185, 1.0176, 1.0165, 1.0153, 1.0141, 1.0129, 1.0117, 1.0105, 1.0093, 1.0082, 1.0072, 1.0063, 1);
  }
}

/* ---- the pill ---- */
.skb-liq {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}

.nav-links { position: relative; }
.nav-links a { position: relative; z-index: 1; }
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links .skb-liq { background: rgba(255, 255, 255, .1); }

:root[data-theme="light"] .nav-links a[aria-current="page"] { color: #23221f; }
:root[data-theme="light"] .nav-links .skb-liq { background: rgba(35, 34, 31, .08); }

/* ---- page transitions ----
   Same-origin navigations crossfade: the old page blurs out quickly and the
   new one settles in from twelve pixels down. The nav is lifted out of the
   crossfade so it does not flicker, and the pill travels to its new link.
   js/motion.js sets those two names only while a transition runs. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: skb-page-out 140ms ease-in both;
}
::view-transition-new(root) {
  animation: skb-page-in 500ms cubic-bezier(.2, .9, .25, 1) both;
}
::view-transition-group(nav-pill) {
  animation-duration: 500ms;
  animation-timing-function: var(--skb-ease);
}

@keyframes skb-page-out {
  to { opacity: 0; filter: blur(6px); }
}
@keyframes skb-page-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px); }
}

/* ---- phones and tablets ----
   iOS reads a double tap as zoom, and the page then drags sideways. clip,
   not hidden: hidden turns the root into a scroll container, which is what
   once left the home page stuck on the hero (see CLAUDE.md). Pinch zoom
   with two fingers still works. */
@media (max-width: 991.98px) {
  html, body { overflow-x: clip; overscroll-behavior-x: none; }
  html { touch-action: manipulation; }
}

/* ---- search: the button in the top bar and the palette it opens ----
   Kept in this file because every page already loads it, and the palette is
   motion as much as it is search. The script is js/search.js. */
.nav-search {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 9px;
  margin-left: 4px;
  background: none;
  border: 1px solid #222;
  border-radius: 9px;
  color: #888;
  font-family: inherit;
  cursor: pointer;
  -webkit-transition: color .2s ease, border-color .2s ease;
  transition: color .2s ease, border-color .2s ease;
}
.nav-search svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.nav-search kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: #666;
}
@media (hover: hover) {
  .nav-search:hover { color: #fff; border-color: #333; }
}
/* The shortcut means nothing without a keyboard. */
@media (hover: none), (max-width: 767px) {
  .nav-search kbd { display: none; }
  .nav-search { padding: 0 7px; }
}

/* On a phone the bar holds the brand, three links, the search button and,
   on the blog, the theme toggle. At 24px apart they run into the brand. */
@media (max-width: 480px) {
  .nav-links { gap: 14px; }
  .nav-search { margin-left: 0; }
}
@media (max-width: 360px) {
  .nav-links { gap: 10px; }
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  .nav-search { padding: 0 6px; }
}

.pal-dim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .6);
}
.pal {
  position: fixed;
  z-index: 51;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  width: min(600px, calc(100vw - 32px));
  margin-left: calc(min(600px, calc(100vw - 32px)) / -2);
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 16px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
  overflow: hidden;
  transform-origin: 0 0;
}
.pal-in {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #1a1a1a;
  color: #666;
}
.pal-in svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
/* 17px, not smaller: iOS zooms the page into any input under 16px. */
.pal-in input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 300;
  -webkit-appearance: none;
  appearance: none;
}
.pal-in input::-webkit-search-cancel-button { display: none; }
.pal-in input::placeholder { color: #666; }
.pal-in kbd {
  font-family: inherit;
  font-size: 11px;
  color: #666;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 3px 6px;
}
.pal-list {
  position: relative;
  padding: 6px;
  max-height: min(380px, calc(100vh - 220px));
  overflow: auto;
  overscroll-behavior: contain;
}
.pal-list .skb-liq {
  background: #1a1a1a;
  border-radius: 10px;
}
.pal-item {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #bbb;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}
.pal-item:hover { opacity: 1; }
.pal-item.is-active { color: #fff; }
.pal-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pal-where {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  font-size: 12.5px;
}
/* On a phone the source goes under the title, or both get cut to a word. */
@media (max-width: 480px) {
  .pal-item {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 2px;
  }
  .pal-where { max-width: none; }
}
.pal-none {
  margin: 0;
  padding: 18px 12px;
  color: #777;
  font-size: 14px;
  font-weight: 300;
}

:root[data-theme="light"] .nav-search { border-color: #e2dfd6; color: #5c5952; }
:root[data-theme="light"] .nav-search kbd { color: #8a867c; }
@media (hover: hover) {
  :root[data-theme="light"] .nav-search:hover { color: #23221f; border-color: #bdb9ad; }
}
:root[data-theme="light"] .pal-dim { background: rgba(35, 34, 31, .28); }
:root[data-theme="light"] .pal { background: #faf9f7; border-color: #e2dfd6; box-shadow: 0 30px 70px -20px rgba(35, 34, 31, .35); }
:root[data-theme="light"] .pal-in { border-bottom-color: #eae7e0; color: #8a867c; }
:root[data-theme="light"] .pal-in input { color: #1e1d1a; }
:root[data-theme="light"] .pal-in input::placeholder { color: #8a867c; }
:root[data-theme="light"] .pal-in kbd { border-color: #e2dfd6; color: #8a867c; }
:root[data-theme="light"] .pal-list .skb-liq { background: #efece5; }
:root[data-theme="light"] .pal-item { color: #5c5952; }
:root[data-theme="light"] .pal-item.is-active { color: #1e1d1a; }
:root[data-theme="light"] .pal-where { color: #8a867c; }