/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 1rem);
  /* the theme draws its own hover/pressed states, so the UA tap flash only
     smears the rounded controls and links; it inherits into the whole page */
  -webkit-tap-highlight-color: transparent;
}
html.dark { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--deep-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  /* `clip` where supported: a hidden overflow makes the body a scroll container,
     and mobile Safari then scrolls fixed children (the progress bar) away with
     the page; `hidden` stays as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: var(--selection-bg); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

hr { border: none; border-top: 1px solid var(--line-divider); }

.icon { display: block; flex: 0 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -4rem; left: 1rem; z-index: 200;
  background: var(--card-bg); color: var(--deep-text);
  padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--content-meta); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- progress bar ---------- */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--primary); z-index: 100; opacity: 0;
  transition: width 120ms linear, opacity 200ms ease;
}
#progress-bar.active { opacity: 1; }

/* ---------- buttons ---------- */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: none; border-radius: var(--radius-sm);
  background: transparent; color: inherit;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-icon:hover { background: var(--btn-plain-bg-hover); }
.btn-icon:active { background: var(--btn-plain-bg-active); transform: scale(0.92); }

/* round floating controls (back-to-top, floating TOC) */
.fab {
  width: 2.9rem; height: 2.9rem; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-navbar);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab:hover { background: var(--btn-regular-bg); }
.fab:active { transform: scale(0.94); }

.btn-regular {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--btn-regular-bg); color: var(--btn-content);
  font-weight: 600; font-size: 0.9rem;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-regular:hover { background: var(--btn-regular-bg-hover); }
.btn-regular:active { background: var(--btn-regular-bg-active); transform: scale(0.96); }

/* ---------- card ---------- */
.widget-card,
.post-card,
.post-article,
.listing-head {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
:root:not(.dark) .widget-card,
:root:not(.dark) .post-card,
:root:not(.dark) .post-article,
:root:not(.dark) .listing-head {
  box-shadow: 0 2px 12px -8px rgb(0 0 0 / 0.25);
}