/* German Eiland -- server-owner rail (2026-07-26).
 *
 * ONE component, three presentations, one source of truth:
 *   .ge-owner-rail    a 34px chrome band fixed directly under the 60px topbar,
 *                     on EVERY tab (landing + all 11 standalone pages)
 *   .ge-owner-drawer  the same identity as a tappable block at the top of the
 *                     mobile nav drawer, where the rail's chips are icon-only
 *   .ge-owner-card    the expressive version in the landing footer
 *
 * Markup comes from assets/topbar.js (standalone pages, rendered in the same
 * pass as the bar so there is no second paint) and from index.html (landing).
 *
 * GEOMETRY CONTRACT -- the rail is fixed, so every surface that offsets the
 * fixed chrome has to count it. --ge-ownerbar-h is that single number; the
 * consumers all spell it `var(--ge-ownerbar-h, 34px)` so a stylesheet that
 * loads before this one still lands on the same 34px and nothing jumps:
 *   assets/topbar.css   body padding-top, .nav-drawer top
 *   assets/css/landing.css   .mframe inset (the pooled module shell)
 *   map/map-inline.css  --topbar-h (the map's 100vh height math)
 *
 * Consumes --sw-* tokens (assets/sweet_theme.css) with dark fallbacks, exactly
 * like topbar.css, so the rail is theme-aware where the tokens are loaded and
 * safely dark where they are not.
 */

:root { --ge-ownerbar-h: 34px; }

/* Brand hues, used ONLY as hover/focus accents on their own link. */
:root {
  --ge-discord: #7d87f7;
  --ge-twitch: #b07bff;
}
:root[data-theme="light"] {
  --ge-discord: #4752c4;
  --ge-twitch: #772ce8;
}

/* ── the rail ─────────────────────────────────────────────────────────── */
.ge-owner-rail {
  position: fixed;
  top: 60px; left: 0; right: 0;
  /* Under the topbar (1000) and the drawer (990 in topbar.css is BELOW this on
     purpose -- the drawer slides out from the bar and must not be cut by the
     rail), above the landing's pooled module shell (900) so the owner stays
     visible while a module is open. */
  z-index: 950;
  height: var(--ge-ownerbar-h, 34px);
  box-sizing: border-box;
  display: flex; align-items: center;
  background: var(--sw-bg-2, #0c0817);
  border-bottom: 1px solid var(--sw-hair-2, rgba(176, 142, 255, .07));
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  font-family: var(--sw-sans, 'Rajdhani', system-ui, sans-serif);
  color: var(--sw-ink-2, #aba0c4);
  transition: background .35s var(--sw-ease, ease), border-color .35s var(--sw-ease, ease);
}

/* Landing only: the brand row is transparent until landing.js adds .scrolled,
   so a solid band under a transparent header would float. Match it. */
header.gebrand:not(.scrolled) ~ .ge-owner-rail {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Landing-parity content column: same 1240px grid and same side padding as
   .topbar-in / .gebrand-in, so the rail lines up with the bar above it. */
.ge-owner-in {
  width: 100%; max-width: 1240px; margin: 0 auto; height: 100%;
  box-sizing: border-box;
  padding: 0 clamp(18px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 0;
}

/* ── identity ─────────────────────────────────────────────────────────── */
/* min-width:0 + the ellipsis on the name are what make the rail structurally
   incapable of pushing the links past the right edge at ANY width.
 *
 * ★ The anchors carry an EXTRA class + type qualifier on purpose. Every page
 * body is .ge-scope, and assets/ge-design.css paints `.ge-scope a` accent
 * violet at (0,2,0) from a sheet that loads AFTER this one -- a plain
 * `.ge-owner-link` (0,1,0) loses, which flattened the chips to accent and
 * killed the point of the per-brand hover tint. `.ge-owner a.ge-owner-link`
 * is (0,2,1) and wins on specificity, not on load order. Verified with
 * CSS.getMatchedStylesForNode, not by reading the sheets. */
.ge-owner a.ge-owner-who,
.ge-owner-who {
  display: flex; align-items: center; gap: 9px;
  /* padding:0 is load-bearing INSIDE the drawer: topbar.css gives every
     .nav-drawer a a 13px/28px hit area, which indented the owner row away
     from the buttons under it. */
  min-width: 0; flex: 0 1 auto; padding: 0; text-decoration: none;
  color: var(--sw-ink-2, #aba0c4);
}
.ge-owner-mark {
  width: 21px; height: 21px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--sw-panel-2, #171125);
  border: 1px solid rgba(var(--sw-accent-rgb, 160, 108, 255), .35);
  font-family: var(--sw-serif, 'Rajdhani', sans-serif);
  font-weight: 700; font-size: 10px; letter-spacing: .04em; line-height: 1;
  color: var(--sw-pink, #a06cff);
  transition: transform .2s var(--sw-ease, ease), border-color .2s var(--sw-ease, ease);
}
.ge-owner-who:hover .ge-owner-mark { transform: rotate(6deg); border-color: var(--sw-pink, #a06cff); }
.ge-owner-label {
  font-family: var(--sw-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sw-ink-3, #7a6e93); white-space: nowrap; flex: 0 0 auto;
}
.ge-owner-sep {
  width: 1px; height: 12px; flex: 0 0 auto;
  background: var(--sw-hair, rgba(176, 142, 255, .14));
}
.ge-owner-name {
  font-family: var(--sw-serif, 'Rajdhani', sans-serif);
  font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sw-ink, #f1ecf8); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  transition: color .2s var(--sw-ease, ease);
}
.ge-owner-who:hover .ge-owner-name { color: var(--sw-pink, #a06cff); }

/* ── link chips ───────────────────────────────────────────────────────── */
.ge-owner-links { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ge-owner a.ge-owner-link,
.ge-owner-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 11px; box-sizing: border-box;
  border-radius: 999px;
  background: var(--sw-hair-2, rgba(176, 142, 255, .07));
  border: 1px solid var(--sw-hair, rgba(176, 142, 255, .14));
  font-family: var(--sw-sans, 'Rajdhani', sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sw-ink-2, #aba0c4); text-decoration: none; white-space: nowrap;
  transition: color .2s var(--sw-ease, ease), border-color .2s var(--sw-ease, ease),
              background .2s var(--sw-ease, ease), transform .2s var(--sw-ease, ease);
}
.ge-owner-link svg { width: 12px; height: 12px; display: block; flex: 0 0 auto; fill: currentColor; }
/* assets/shared.css underlines every a:hover -- never these. */
.ge-owner a:hover, .ge-owner a:focus-visible { text-decoration: none; }
.ge-owner a.ge-owner-link:hover { transform: translateY(-1px); }
.ge-owner a.ge-owner-link.is-discord:hover,
.ge-owner a.ge-owner-link.is-discord:focus-visible {
  color: var(--ge-discord, #7d87f7);
  border-color: rgba(125, 135, 247, .55);
  background: rgba(125, 135, 247, .12);
}
.ge-owner a.ge-owner-link.is-twitch:hover,
.ge-owner a.ge-owner-link.is-twitch:focus-visible {
  color: var(--ge-twitch, #b07bff);
  border-color: rgba(176, 123, 255, .55);
  background: rgba(176, 123, 255, .12);
}
.ge-owner-rail a:focus-visible,
.ge-owner-drawer a:focus-visible,
.ge-owner-card a:focus-visible {
  outline: 2px solid var(--sw-pink, #a06cff); outline-offset: 2px;
}

/* ── rail responsive ladder ───────────────────────────────────────────── */
/* Ordered by how much each part earns its width. The chip WORDS go first (the
   marks are unmistakable on their own), then the monogram, and only on a truly
   tiny viewport the "Server Owner" label -- a bare name would not say WHY it is
   there, so it is the last thing to go, not the first. The name and both links
   survive every width; that is the whole point of the component. Measured
   worst case at 360px: 177px of identity + 56px of chips + 14px gap + 36px of
   side padding = 283px, so nothing is ever fighting for room. */
@media (max-width: 760px) {
  .ge-owner-link { padding: 0; width: 24px; height: 24px; justify-content: center; gap: 0; }
  .ge-owner-link .ge-owner-link-text { display: none; }
  .ge-owner-link svg { width: 13px; height: 13px; }
}
@media (max-width: 560px) {
  .ge-owner-label { font-size: 9px; letter-spacing: .14em; }
  .ge-owner-name { font-size: 11.5px; letter-spacing: .08em; }
  .ge-owner-who { gap: 8px; }
  .ge-owner-in { gap: 10px; }
}
@media (max-width: 460px) {
  .ge-owner-rail .ge-owner-mark { display: none; }
}
@media (max-width: 360px) {
  .ge-owner-rail .ge-owner-label,
  .ge-owner-rail .ge-owner-sep { display: none; }
}

/* Embedded in the landing's pooled module shell: the landing already paints
   this chrome around the iframe -- never draw it twice. */
html[data-embedded="true"] .ge-owner-rail,
body[data-embedded="true"] .ge-owner-rail { display: none !important; }

/* ── drawer block (mobile menu) ───────────────────────────────────────── */
.ge-owner-drawer {
  display: grid; gap: 10px;
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--sw-hair-2, rgba(176, 142, 255, .07));
  font-family: var(--sw-sans, 'Rajdhani', system-ui, sans-serif);
}
.ge-owner-drawer .ge-owner-who { gap: 11px; }
.ge-owner-drawer .ge-owner-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.ge-owner-drawer .ge-owner-stack { display: grid; gap: 3px; min-width: 0; }
.ge-owner-drawer .ge-owner-label { display: block; font-size: 9.5px; }
.ge-owner-drawer .ge-owner-name { font-size: 15px; }
.ge-owner-drawer .ge-owner-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ge-owner-drawer .ge-owner-link {
  height: 40px; width: auto; padding: 0 12px; gap: 8px;
  justify-content: center; border-radius: 10px; font-size: 11.5px;
}
.ge-owner-drawer .ge-owner-link .ge-owner-link-text { display: inline !important; }
.ge-owner-drawer .ge-owner-link svg { width: 15px; height: 15px; }

/* ── landing footer card ──────────────────────────────────────────────── */
.ge-owner-card {
  max-width: 1240px; margin: 0 auto 26px;
  padding: 0 clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}
.ge-owner-card-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: 14px;
  background:
    radial-gradient(560px 150px at 6% 0%, var(--sw-wash-pink, rgba(160, 108, 255, .10)), transparent 70%),
    var(--sw-panel, #120e1f);
  border: 1px solid var(--sw-hair, rgba(176, 142, 255, .14));
}
.ge-owner-card-id { display: grid; gap: 10px; min-width: 0; }
.ge-owner-card .ge-owner-who { gap: 14px; align-items: center; }
.ge-owner-card .ge-owner-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; }
.ge-owner-card .ge-owner-stack { display: grid; gap: 5px; min-width: 0; }
.ge-owner-card .ge-owner-label { display: block; font-size: 10px; }
.ge-owner-card .ge-owner-name { font-size: 19px; letter-spacing: .12em; }
.ge-owner-card-note {
  margin: 3px 0 0; font-size: 13px; line-height: 1.45;
  color: var(--sw-ink-2, #aba0c4); max-width: 46ch;
}
.ge-owner-card .ge-owner-links { gap: 10px; flex-wrap: wrap; }
.ge-owner-card .ge-owner-link {
  height: 40px; width: auto; padding: 0 18px; gap: 9px;
  border-radius: 999px; font-size: 11.5px;
}
.ge-owner-card .ge-owner-link .ge-owner-link-text { display: inline !important; }
.ge-owner-card .ge-owner-link svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .ge-owner-card-in { padding: 18px; gap: 16px; }
  .ge-owner-card .ge-owner-links { width: 100%; }
  .ge-owner-card .ge-owner-link { flex: 1 1 140px; justify-content: center; }
  .ge-owner-card .ge-owner-name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ge-owner-link, .ge-owner-mark, .ge-owner-name { transition: none; }
  .ge-owner-link:hover { transform: none; }
  .ge-owner-who:hover .ge-owner-mark { transform: none; }
}