/* Reusable archive header and Agent spectrum rail. Loaded after the archive CSS. */

.topbar {
  min-height: var(--topbar-height);
  isolation: isolate;
  background: color-mix(in oklch, var(--color-bg) 96%, var(--color-surface));
  border-block-end: .0625rem solid var(--color-border-subtle);
  box-shadow: none;
  transition: box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.topbar.scrolled { box-shadow: var(--shadow-quiet); }
.topbar::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: .125rem; pointer-events: none; }
body.mode-home .topbar::after { background: linear-gradient(90deg,#2f766d,#c15f3c,#5367d9,#6553b8,#2f78bc,#d34f3a,#c58a2a,#8a4f9e,#4d7c4d,#9a4d79,#8b6f32,#356aa0); opacity: .62; }
body.mode-reader .topbar { background: linear-gradient(105deg,color-mix(in oklch,var(--agent-color) 10%,var(--color-bg)) 0%,color-mix(in oklch,var(--color-bg) 96%,var(--color-surface)) 38%,color-mix(in oklch,var(--agent-color) 5%,var(--color-surface)) 100%); border-block-end-color: color-mix(in oklch,var(--agent-color) 28%,var(--color-border-subtle)); }
body.mode-reader .topbar::after { background: linear-gradient(90deg,var(--agent-color),color-mix(in oklch,var(--agent-color) 12%,transparent) 40%,transparent 74%); opacity: .82; }
body.mode-reader .top-tools { background: color-mix(in oklch,var(--agent-color) 4%,var(--color-surface)); border-color: color-mix(in oklch,var(--agent-color) 24%,var(--color-border-subtle)); }

.topbar-inner {
  max-width: none;
  min-height: var(--topbar-height);
  padding: .42rem clamp(.85rem, 2vw, 2rem);
  flex-wrap: nowrap;
  gap: .75rem;
}

.brand-home {
  appearance: none;
  position: relative;
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding: .2rem .5rem .2rem 1rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-fg);
  cursor: pointer;
  text-align: start;
}

.brand-home::before {
  content: "";
  position: absolute;
  inset-block: .55rem;
  inset-inline-start: .15rem;
  width: .125rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transform: scaleY(.68);
  transition: transform var(--duration-fast) var(--ease-out);
}

.brand-copy { display: grid; gap: .08rem; }
.brand-title { font-size: 1.15rem; line-height: 1; letter-spacing: -.01em; }
.brand small { font-size: .49rem; line-height: 1.2; letter-spacing: .16em; }
.brand small b { color: var(--color-accent); font-weight: 600; }
.brand-home:hover::before { transform: scaleY(1); }
.brand-home:hover .brand-title { color: var(--color-accent); }

.top-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: .16rem;
  border: .0625rem solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--color-surface) 76%, var(--color-bg));
  box-shadow: var(--shadow-quiet);
}

.top-action,
.src-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .42rem .72rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-muted);
  box-shadow: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.top-tools > * + * { border-inline-start: .0625rem solid var(--color-border-subtle); border-start-start-radius: 0; border-end-start-radius: 0; }
.top-tools > *:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
body.mode-home .top-tools > .src-link { border-inline-start: 0; border-radius: var(--radius-lg); }
.top-action:hover,
.src-link:hover { color: var(--color-accent); background: var(--color-bg-subtle); }
.top-action:active,
.src-link:active { transform: scale(.98); }
.top-action:disabled,
.src-link[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.action-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: .76rem;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out);
}
.top-action:hover .action-icon { transform: translateY(-.08rem); }

.searchbox {
  min-width: clamp(16rem, 23vw, 23rem);
  min-height: 2.75rem;
  padding: .35rem .55rem .35rem .7rem;
  border-block: 0;
  border-inline-end: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.searchbox:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .125rem var(--color-bg), 0 0 0 .3125rem var(--color-focus-ring);
  background: var(--color-surface);
  transform: translateY(-.04rem);
  z-index: 2;
}

.search-icon {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
}

.search-icon::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border: .09375rem solid currentColor;
  border-radius: var(--radius-full);
  transform: translate(-.08rem, -.08rem);
}

.search-icon::after {
  content: "";
  position: absolute;
  width: .32rem;
  height: .09375rem;
  background: currentColor;
  transform: translate(.27rem, .27rem) rotate(45deg);
  transform-origin: center;
}

.searchbox input { font-size: .64rem; }
.searchbox .search-count { padding-inline: .25rem; white-space: nowrap; }

.src-link {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: .45rem;
  padding: .34rem .72rem;
  text-decoration: none;
  line-height: 1;
}

.source-kicker { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: .44rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-fg-muted); opacity: .72; }
.source-name { grid-column: 1; grid-row: 2; font-family: var(--mono); font-size: .62rem; color: var(--color-fg); }
.source-arrow { grid-column: 2; grid-row: 1 / -1; align-self: center; font-size: .72rem; transition: transform var(--duration-fast) var(--ease-out); }
.src-link:hover .source-arrow { transform: translate(.12rem, -.12rem); }
.reader-home { white-space: nowrap; }

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

.agent-wheel {
  position: fixed;
  inset-block-start: calc(var(--topbar-height) + 1rem);
  inset-inline-start: 0;
  z-index: 55;
  width: 7rem;
  height: 19rem;
  border: .0625rem solid color-mix(in oklch, var(--color-border-subtle) 82%, transparent);
  border-inline-start: 0;
  border-radius: 0 2rem 2rem 0;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-bg) 94%, var(--color-surface-raised)), color-mix(in oklch, var(--color-bg) 76%, transparent));
  box-shadow: .75rem 1rem 2.5rem -2rem rgb(23 32 39 / .5);
  backdrop-filter: blur(1rem) saturate(1.08);
  isolation: isolate;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.agent-wheel.dragging { cursor: grabbing; }

.agent-wheel::before {
  content: attr(data-index);
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .75rem;
  z-index: 2;
  color: color-mix(in oklch, var(--color-accent) 72%, var(--color-fg-muted));
  font-family: var(--mono);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .11em;
  pointer-events: none;
}

.agent-wheel::after {
  content: "";
  position: absolute;
  inset-block-start: 2.1rem;
  inset-inline-start: -.625rem;
  z-index: 0;
  width: 5.25rem;
  height: 15.15rem;
  border: .0625rem solid transparent;
  border-inline-end-color: color-mix(in oklch, var(--color-accent) 44%, var(--color-border));
  border-radius: 50%;
  opacity: .62;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.agent-wheel:hover::after,
.agent-wheel.dragging::after,
.agent-wheel.is-rotating::after { opacity: .9; }

.agentnav { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 0; display: block; margin: 0; padding: 0; overflow: visible; cursor: inherit; }

.navbtn {
  --wheel-x: 3.05rem;
  --wheel-y: 8.05rem;
  --wheel-scale: .8;
  --wheel-hover-scale: .88;
  position: absolute;
  inset: 0 auto auto 0;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: .0625rem solid color-mix(in oklch, var(--node-color, var(--color-border)) 52%, var(--color-border-subtle));
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--node-color, var(--color-surface)) 9%, var(--color-surface-raised));
  box-shadow: 0 .55rem 1.25rem -.9rem color-mix(in oklch, var(--node-color, var(--color-fg)) 55%, transparent);
  opacity: .7;
  transform: translate(var(--wheel-x), var(--wheel-y)) scale(var(--wheel-scale));
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  will-change: transform;
}

.navbtn::before { content: ""; position: absolute; inset: -.27rem; border: .0625rem solid var(--node-color, var(--color-border)); border-radius: var(--radius-full); opacity: .28; transform: scale(.94); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); pointer-events: none; }
.navbtn::after { content: attr(data-agent-label); position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% + .65rem); padding: .28rem .48rem; border-radius: var(--radius-md); background: var(--color-fg); color: var(--color-bg); font-family: var(--mono); font-size: .54rem; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translate(-.2rem,-50%); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); pointer-events: none; }
.navbtn[data-slot="-2"] { --wheel-x: .45rem; --wheel-y: 2.15rem; --wheel-scale: .78; --wheel-hover-scale: .86; }
.navbtn[data-slot="-1"] { --wheel-x: 2.05rem; --wheel-y: 4.95rem; --wheel-scale: .86; --wheel-hover-scale: .94; }
.navbtn[data-slot="0"] { --wheel-x: 3.05rem; --wheel-y: 8.05rem; --wheel-scale: 1.12; --wheel-hover-scale: 1.17; opacity: 1; }
.navbtn[data-slot="1"] { --wheel-x: 2.05rem; --wheel-y: 11.25rem; --wheel-scale: .86; --wheel-hover-scale: .94; }
.navbtn[data-slot="2"] { --wheel-x: .45rem; --wheel-y: 14.15rem; --wheel-scale: .78; --wheel-hover-scale: .86; }
.navbtn.wheel-hidden { visibility: hidden; opacity: 0; pointer-events: none; transform: translate(3.05rem, 8.05rem) scale(.42); }
.navbtn:hover,.navbtn:focus-visible { z-index: 4; opacity: 1; border-color: var(--node-color, var(--color-border)); background: var(--color-surface-raised); box-shadow: 0 .75rem 1.5rem -1rem color-mix(in oklch, var(--node-color, var(--color-fg)) 65%, transparent); transform: translate(var(--wheel-x), var(--wheel-y)) scale(var(--wheel-hover-scale)); }
.navbtn:hover::before,.navbtn:focus-visible::before { opacity: .72; transform: scale(1); }
.navbtn:hover::after,.navbtn:focus-visible::after { opacity: 1; transform: translate(0,-50%); }
.agent-wheel:has(.navbtn:focus-visible) .navbtn:hover:not(:focus-visible)::after { opacity: 0; transform: translate(-.2rem,-50%); }
.navbtn.active { z-index: 3; border-color: var(--node-color, var(--color-border-strong)); background: var(--color-surface-raised); box-shadow: 0 .9rem 2rem -1.15rem color-mix(in oklch, var(--node-color, var(--color-fg)) 75%, transparent); }
.navbtn.active::before { border-color: var(--node-color, var(--color-accent)); opacity: 1; transform: scale(1); box-shadow: 0 0 0 .16rem var(--color-bg),0 0 0 .24rem color-mix(in oklch,var(--node-color, var(--color-accent)) 22%,transparent); }
.navbtn:disabled { opacity: .5; pointer-events: none; }
.nav-logo { position: static; inset: auto; width: 2rem; height: 2rem; object-fit: contain; border-radius: var(--radius-lg); background: var(--color-surface-raised); transform: none; transition: transform var(--duration-fast) var(--ease-out); -webkit-user-drag: none; }
.navbtn.active .nav-logo { transform: scale(1.04); }
.nb-name,
.nb-sub,
.nb-badge { display: none; }

@media (max-width: 79.9375rem) {
  .agent-wheel { inset-block-start: auto; inset-block-end: calc(.65rem + env(safe-area-inset-bottom)); inset-inline-start: 50%; width: 13rem; height: 4.75rem; padding: 0; border: .0625rem solid var(--color-border-subtle); border-radius: var(--radius-full); background: color-mix(in oklch, var(--color-bg) 86%, var(--color-surface-raised)); box-shadow: var(--shadow-float); backdrop-filter: blur(1rem) saturate(1.1); transform: translateX(-50%); }
  .agent-wheel::before,
  .agent-wheel::after { display: none; }
  .agentnav { height: 100%; overflow: hidden; }
  .navbtn { inset-block-start: 50%; inset-inline-start: 50%; display: none; }
  .navbtn[data-slot="-1"] { --wheel-x: calc(-50% - 4rem); --wheel-y: -50%; display: grid; }
  .navbtn[data-slot="0"] { --wheel-x: -50%; --wheel-y: -50%; display: grid; }
  .navbtn[data-slot="1"] { --wheel-x: calc(-50% + 4rem); --wheel-y: -50%; display: grid; }
  .navbtn::after { display: none; }
}

@media (max-width: 47.5rem) {
  .topbar-inner { display: flex; grid-template-columns: none; padding-inline: .65rem; gap: .4rem; }
  .brand-home { min-width: 0; flex: 1; padding-inline: .75rem .2rem; overflow: hidden; }
  .brand { min-width: 0; font-size: .92rem; white-space: nowrap; }
  .brand small { display: none; }
  .brand-title { font-size: .98rem; }
  .top-spacer { display: none; }
  .top-tools { flex: 0 0 auto; }
  .reader-home { padding-inline: .55rem; font-size: .6rem; }
  .reader-home .action-label { display: none; }
  .reader-action.searchbox,
  .reader-action#copyLink { display: none; }
  .src-link { min-height: 2.625rem; margin-inline-start: 0; padding: .32rem .58rem; white-space: nowrap; }
  .source-kicker { display: none; }
  .source-name { grid-row: 1 / -1; align-self: center; font-size: .57rem; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .brand-title,
  .brand-home::before,
  .top-action,
  .action-icon,
  .src-link,
  .searchbox,
  .source-arrow,
  .agent-wheel::after,
  .navbtn,
  .navbtn::before,
  .navbtn::after,
  .nav-logo { transition-duration: .01ms; }
}

@media (forced-colors: active) {
  .topbar button,
  .topbar a,
  .agent-wheel button { border: .0625rem solid ButtonText; }
  .topbar :where(button, a, input):focus-visible,
  .agent-wheel button:focus-visible { outline: .1875rem solid Highlight; outline-offset: .125rem; box-shadow: none; }
}