/* The frame of every page: the top bar and its search, the home glow with
   the paste box and status line, the black frame with its stat tiles, the
   live popover, page heads and the footer. mobile.css reworks it at 640. */

.main > .page-head, .main > .feed-card, .main > .card, .main > .how-grid {
  width: min(var(--page-max), 100% - var(--gutter));
  margin-inline: auto;
}

/* Top bar */
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 20px; height: 64px;
  padding-inline: max(24px, calc((100% - var(--page-max)) / 2));
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
}
.topbar.is-over-glow { background: transparent; border-bottom-color: transparent; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 28px; height: 28px; }
.brand-name { font-size: 17px; line-height: 22px; font-weight: var(--w-title); letter-spacing: -0.25px; }
/* The Comet mark plays once on load: the streak grows out of the open
   corner, the dot rides it in to the center and one ping rings out, all
   done by 1.62s. With reduced motion it is the still mark. */
.brand-mark .mark-streak, .brand-mark .mark-dot, .brand-mark .mark-ping { transform-box: view-box; }
.brand-mark .mark-streak { transform-origin: 11px 53px; }
.brand-mark .mark-dot, .brand-mark .mark-ping { transform-origin: 32px 32px; }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark .mark-streak { animation: mark-streak 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
  .brand-mark .mark-dot { animation: mark-dot 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
  .brand-mark .mark-ping { animation: mark-ping 0.96s ease-out 0.66s forwards; }
}
@keyframes mark-streak { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-dot { from { transform: translate(-21px, 21px) scale(0.55); } to { transform: none; } }
@keyframes mark-ping { 0% { transform: scale(1); opacity: 0; } 7% { opacity: 0.8; } 100% { transform: scale(2.7); opacity: 0; } }
form.search {
  position: relative; display: flex; align-items: center; flex: 0 1 380px; min-width: 0;
  height: 40px; padding: 0 10px 0 38px; margin-left: 12px;
  background: var(--tile); border-radius: var(--r-input); box-shadow: inset 0 0 0 1px var(--hairline-soft);
  transition: box-shadow var(--quick) var(--ease);
}
.is-over-glow form.search { background: rgba(21, 21, 21, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
form.search:focus-within { box-shadow: inset 0 0 0 1px rgba(111, 159, 255, 0.7); }
.search-ico { position: absolute; left: 13px; top: 12px; display: flex; color: var(--ink-muted); }
.search-input, .paste-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink); font-size: 14px;
}
.search-input::placeholder, .paste-input::placeholder { color: var(--ink-muted); opacity: 1; }
.kbd {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 5px; background: var(--ghost-fill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--ink-muted); font-size: 12px; line-height: 1;
}
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--r-input); color: var(--ink-muted); font-size: 14px; font-weight: var(--w-heading);
  transition: color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); background: var(--ghost-fill); }

/* Home glow: full width behind the top bar, --glow-h tall. The hero is at
   least tall enough to put the frame's top edge at 43% of the glow (less
   64 for the top bar and 36 for the frame's margin), so the text sits on
   the dark blue and the bright band behind the frame. */
.hero-glow {
  position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: var(--glow-h);
  background: var(--glow); pointer-events: none;
  -webkit-mask-image: var(--glow-mask); mask-image: var(--glow-mask);
}
.hero {
  width: min(var(--page-max), 100% - var(--gutter)); margin: 0 auto;
  min-height: calc(0.43 * var(--glow-h) - 100px); padding: 52px 12px 0;
}
.hero-h, .paste, .status-line, .hero .notice { position: relative; z-index: 1; }
.hero-h {
  max-width: 1240px; font-size: 56px; line-height: 56px; letter-spacing: -1.23px;
  font-weight: var(--w-heading); text-wrap: balance;
}
.hero-sub { color: var(--ink-muted); }
.paste {
  display: flex; align-items: center; gap: 8px; max-width: 640px; height: 56px;
  margin-top: 28px; padding: 0 10px 0 22px; border-radius: var(--r-pill);
  background: rgba(8, 9, 10, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: box-shadow var(--quick) var(--ease);
}
.paste:focus-within { box-shadow: inset 0 0 0 1px rgba(111, 159, 255, 0.75); }
.paste-input { font-size: 16px; }
.status-line {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  font-size: 14px; line-height: 20px; color: var(--ink-2);
}
.live-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-ring); }

/* The frame: the stat tiles across the top, then the feed in its black
   box and the rail beside it on the page, each panel its own card */
.frame {
  position: relative; z-index: 1;
  width: min(var(--page-max), 100% - var(--gutter)); margin: 36px auto 0;
}
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px;
  background: var(--tile); border-radius: var(--r-tile); box-shadow: var(--ring-tile);
}
.stat-k, .stat-sub { font-size: 14px; line-height: 20px; overflow-wrap: break-word; }
.stat-k { color: var(--ink-muted); }
.stat-v { font-size: 16px; line-height: 22px; font-weight: var(--w-title); }
.frame-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 16px; align-items: start; }
.frame-grid > .feed-card { padding: 12px; background: var(--canvas); border-radius: var(--r-frame); box-shadow: var(--ring-frame); }

/* Live popover: what each source answered, while a fetch runs */
.live {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: min(380px, 100vw - 24px); max-height: min(60vh, 520px, var(--room, 520px)); overflow: auto; padding: 16px;
  background: var(--raised); border-radius: var(--r-panel); box-shadow: var(--ring-pop);
  animation: rise var(--fade-in) var(--ease);
}
.live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.live-h { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: var(--w-title); }
.live-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-ring); }
.live-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.live-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--divider); font-size: 14px; line-height: 20px;
  animation: fade var(--fade-in) var(--ease);
}
.live-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-label, .live-ms { color: var(--ink-muted); }
.live-row.is-fetched .live-label { color: var(--up); }
.live-row.is-unavailable .live-label { color: var(--tier-medium); }
.live-note { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* At 1101 px and up live.js moves the panel into the rail's Fetching now card */
.live.is-docked {
  position: static; width: auto; max-height: none; overflow: visible; padding: 0 8px 6px;
  background: none; border-radius: 0; box-shadow: none; animation: none;
}
.live.is-docked .live-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-ring); }
.live.is-docked .live-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A fetch that stopped short says so: a red dot, and the heading shows even docked */
.live.is-failed .live-h::before { background: var(--down); box-shadow: 0 0 0 3px var(--down-ring); }
.live.is-failed.is-docked .live-head::before { content: none; }
.live.is-failed.is-docked .live-h { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* Page heads on the other pages */
.page-head { padding: 52px 12px 28px; }
.page-h { max-width: 1100px; font-size: 56px; line-height: 56px; letter-spacing: -1.23px; font-weight: var(--w-heading); text-wrap: balance; }
.page-h code { font-size: 32px; line-height: 40px; letter-spacing: -0.5px; word-break: break-all; }
.page-head .eyebrow { margin-bottom: 12px; }
.page-sub { color: var(--ink-muted); }
.count-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; color: var(--ink-muted); }

/* Footer, and the phone tab bar (shown by mobile.css) */
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  width: min(var(--page-max), 100% - var(--gutter)); margin: 48px auto 0; padding: 20px 8px 40px;
  border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 14px; line-height: 20px;
}
.tabbar { display: none; }