/* fpack docs: header search, language switch, localization and small content tweaks. */
.header-items { display: flex; align-items: center; gap: .75rem; }
.lang-switch {
  font-size: .85rem; font-weight: 600; text-decoration: none; padding: .25rem .55rem;
  border-radius: .4rem; border: 1px solid rgba(127,127,127,.35); color: inherit; white-space: nowrap;
}
.lang-switch:hover { border-color: currentColor; }
.search { position: relative; }
#search-input {
  width: 15rem; max-width: 40vw; padding: .4rem .7rem; font: inherit; font-size: .875rem;
  border-radius: .5rem; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit;
}
#search-input:focus { outline: 2px solid rgba(14,165,233,.6); outline-offset: 1px; }
.search-results {
  display: none; position: absolute; right: 0; top: calc(100% + .4rem); width: min(32rem, 90vw);
  max-height: 70vh; overflow-y: auto; z-index: 50; border-radius: .6rem; padding: .35rem;
  background: var(--content-background, #fff); border: 1px solid rgba(127,127,127,.3);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.search-results.open { display: block; }
.search-results a { display: block; padding: .5rem .65rem; border-radius: .45rem; text-decoration: none; color: inherit; }
.search-results a:hover, .search-results a.active { background: rgba(14,165,233,.12); }
.search-results .r-title { font-weight: 600; font-size: .9rem; }
.search-results .r-section { opacity: .65; font-size: .8rem; }
.search-results .r-snippet { opacity: .8; font-size: .8rem; margin-top: .15rem; line-height: 1.35; }
.search-results mark { background: rgba(250,204,21,.45); color: inherit; border-radius: 2px; }
.search-results .r-empty { padding: .6rem; opacity: .7; font-size: .85rem; }
@media (max-width: 767px) { #search-input { width: 9rem; } }
.content table { display: block; overflow-x: auto; }
.hero-badges p { display: flex; gap: .4rem; flex-wrap: wrap; }
.hero-badges img { margin: 0 !important; }

/* Localization: every page contains all locales; <html data-locale> picks one.
   Without JavaScript the default (English) is shown. */
html:not([data-locale="zh"]) [data-l10n="zh"],
html[data-locale="zh"] [data-l10n="en"] { display: none !important; }
.l10n-block { display: contents; }
.lang-switch { background: transparent; cursor: pointer; font-family: inherit; }
.site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(127,127,127,.25); font-size: .85rem; opacity: .8; }
.not-found { padding: 3rem 0; }

/* ---- typography and rhythm ---------------------------------------------- */
:root { --fpack-accent: #0284c7; --fpack-border: rgba(127,127,127,.28); }
[data-theme="dark"] { --fpack-accent: #38bdf8; }
.content-container { font-size: 1rem; line-height: 1.75; }
.content-container h1 { margin-bottom: .25rem; }
.content-header > p { font-size: 1.1rem; opacity: .8; margin-top: .25rem; }
.content-container h2 { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--fpack-border); line-height: 1.3; }
.content-container h2:first-of-type { border-top: 0; }
.content-container h3 { margin-top: 2rem; line-height: 1.35; }
.content-container h2, .content-container h3, .content-container h4 { scroll-margin-top: 5.5rem; }
.content-container p, .content-container li { max-width: 46rem; }
.content-container li + li { margin-top: .25rem; }
.content-container :not(pre) > code {
  font-size: .86em; padding: .12em .38em; border-radius: .3rem; background: rgba(127,127,127,.15);
  word-break: break-word;
}
.content-container pre code { font-size: .85rem; line-height: 1.6; }
.content-container a { text-underline-offset: 2px; }
.content-container table { font-size: .92rem; line-height: 1.55; border-collapse: collapse; }
.content-container th, .content-container td { padding: .5rem .75rem; border: 1px solid var(--fpack-border); vertical-align: top; }
.content-container th { text-align: left; background: rgba(127,127,127,.1); }
.content-container hr { border: 0; border-top: 1px solid var(--fpack-border); margin: 2rem 0; }
.content-container img { max-width: 100%; }
.content-container kbd { padding: .1em .4em; border: 1px solid var(--fpack-border); border-bottom-width: 2px; border-radius: .3rem; font-size: .85em; }

/* ---- sidebar and table of contents ---------------------------------------- */
.sidebar-group h3 { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem !important; opacity: .6; }
aside.toc { font-size: .85rem; line-height: 1.4; }
aside.toc h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: .75rem; }
aside.toc ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--fpack-border); }
aside.toc li { margin: 0; }
aside.toc li a { display: block; padding: .3rem .75rem; text-decoration: none; opacity: .75; margin-left: -1px; border-left: 2px solid transparent; }
aside.toc li a:hover { opacity: 1; }
aside.toc li a.active { opacity: 1; color: var(--fpack-accent); border-left-color: var(--fpack-accent); font-weight: 600; }

/* ---- callouts ----------------------------------------------------------- */
.admonition { margin: 1.25rem 0; padding: .85rem 1.1rem .85rem 1.1rem; border-radius: .6rem; border: 1px solid var(--adm, #0ea5e9); border-left-width: 4px;
  background: color-mix(in srgb, var(--adm, #0ea5e9) 8%, transparent); }
.admonition > :last-child { margin-bottom: 0; }
.admonition p, .admonition li { max-width: none; }
.admonition-title { margin: 0 0 .35rem; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--adm, #0ea5e9); }
.admonition-tip { --adm: #16a34a; }
.admonition-note { --adm: #0284c7; }
.admonition-warning { --adm: #d97706; }
.admonition-danger { --adm: #dc2626; }

/* ---- tabs (OS / variant) -------------------------------------------------- */
.tabs-group { margin: 1.25rem 0; border: 1px solid var(--fpack-border); border-radius: .6rem; overflow: hidden; }
.tabs-group > .tab-bar { display: flex; gap: .15rem; padding: .4rem .5rem 0; background: rgba(127,127,127,.1); border-bottom: 1px solid var(--fpack-border); overflow-x: auto; }
.tab-bar button { font: inherit; font-size: .88rem; font-weight: 600; padding: .45rem .9rem; border: 0; border-radius: .4rem .4rem 0 0; background: transparent; color: inherit; opacity: .65; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.tab-bar button:hover { opacity: 1; }
.tab-bar button[aria-selected="true"] { opacity: 1; color: var(--fpack-accent); border-bottom-color: var(--fpack-accent); background: var(--content-background, transparent); }
.tab-panel { padding: .25rem 1rem .5rem; }
.tab-panel[hidden] { display: none; }
.tab-panel > :first-child { margin-top: .75rem; }
.tab-panel .code-block, .tab-panel pre { margin-bottom: .75rem; }
.tab-label { margin: .75rem 0 0 !important; font-weight: 700; color: var(--fpack-accent); }
.tabs-group.js .tab-label { display: none; }

/* ---- cards (overview) ----------------------------------------------------- */
.cards ul { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .85rem; }
.cards li { margin: 0 !important; max-width: none; border: 1px solid var(--fpack-border); border-radius: .7rem; padding: .85rem 1rem; line-height: 1.5; transition: border-color .15s, transform .15s; font-size: .92rem; }
.cards li:hover { border-color: var(--fpack-accent); transform: translateY(-1px); }
.cards li a { display: block; font-size: 1rem; margin-bottom: .2rem; }

/* ---- previous / next -------------------------------------------------------- */
.page-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; }
.page-nav a { flex: 1 1 0; max-width: 50%; display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--fpack-border); border-radius: .65rem; text-decoration: none; color: inherit; line-height: 1.35; }
.page-nav a:hover { border-color: var(--fpack-accent); }
.page-nav a span { font-size: .78rem; opacity: .65; }
.page-nav a strong { color: var(--fpack-accent); }
.page-nav .page-nav-next { text-align: right; margin-left: auto; }
.l10n-block > .page-nav { margin-top: 3rem; }

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 767px) {
  .content-container { font-size: .98rem; }
  .content-container h2 { margin-top: 2rem; }
  .page-nav { flex-direction: column; }
  .page-nav a { max-width: none; }
  .tab-panel { padding: .25rem .65rem .5rem; }
  .header-items { gap: .4rem; }
  .header-items .github-button, .header-items a[href*="github.com"] { display: none; }
  .content-container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content-container td code { white-space: nowrap; }
}
@media (max-width: 480px) {
  #search-input { width: 6.5rem; }
  .header-title, .header a.logo span, .header .header-title span { font-size: 1rem; }
}