/* ========================================================================
   The ABG computer. A quiet desk, a floating rail of utilities on the left,
   and one window at a time: the front page and every utility fill the desk,
   and the rail switches between them.
   Tokens mirror the homepage: paper, ink, hairline, a thread of gold.
   ======================================================================== */

:root {
  --rail-w: 68px;
  --rail-paper: #f4eee4;
  --rail-paper-2: #fbf7ef;
  --rail-ink: #15120e;
  --rail-muted: rgba(21, 18, 14, .58);
  --rail-faint: rgba(21, 18, 14, .28);
  --rail-line: rgba(21, 18, 14, .16);
  --rail-gold: #d49a16;
  --rail-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rail-ease: cubic-bezier(.2, .8, .2, 1);
  --desk: #e6e0d4;
  --desk-gap: 12px;
  --win-radius: 18px;
  --win-bar: 36px;
  --win-shadow: 0 24px 60px -32px rgba(21, 18, 14, .45), 0 1px 0 rgba(255, 255, 255, .5) inset;
}

/* ------------------------------------------------------------ the desk -- */
html { background: var(--desk) !important; height: 100%; }
body {
  height: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--desk) !important;
}
/* The front page's <main> is parked in body until the shell moves it into
   its window (and again whenever that window is closed). */
body > .home-shell,
body > main { display: none; }
/* Everything the page draws lives inside a window; the desk holds them. */
.abg-desk {
  position: fixed;
  top: var(--desk-gap);
  right: var(--desk-gap);
  bottom: var(--desk-gap);
  left: calc(var(--rail-w) + var(--desk-gap) * 2);
  z-index: 200;
  --col: 50%;
  --row: 50%;
  --g: var(--desk-gap);
}
@media (hover: none) {
  .abg-desk { left: var(--desk-gap); }
}
.abg-desk:empty::after,
.abg-desk[data-empty="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--win-radius);
  border: 1px dashed var(--rail-line);
}

/* ------------------------------------------------------------- windows -- */
.abg-win {
  position: absolute;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--rail-paper);
  border: 1px solid var(--rail-line);
  border-radius: var(--win-radius);
  box-shadow: var(--win-shadow);
  overflow: clip;
  transition: left .32s var(--rail-ease), top .32s var(--rail-ease), width .32s var(--rail-ease), height .32s var(--rail-ease), box-shadow .2s ease;
}
.abg-win.is-focused { box-shadow: 0 32px 80px -34px rgba(21, 18, 14, .6), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.abg-win.is-dragging { transition: box-shadow .2s ease; z-index: 900 !important; opacity: .92; cursor: grabbing; }

/* zones: halves and quarters of the desk, split at --col / --row */
.abg-win[data-zone="full"] { left: 0; top: 0; width: 100%; height: 100%; }
.abg-win[data-zone="left"] { left: 0; top: 0; width: calc(var(--col) - var(--g) / 2); height: 100%; }
.abg-win[data-zone="right"] { left: calc(var(--col) + var(--g) / 2); top: 0; width: calc(100% - var(--col) - var(--g) / 2); height: 100%; }
.abg-win[data-zone="top"] { left: 0; top: 0; width: 100%; height: calc(var(--row) - var(--g) / 2); }
.abg-win[data-zone="bottom"] { left: 0; top: calc(var(--row) + var(--g) / 2); width: 100%; height: calc(100% - var(--row) - var(--g) / 2); }
.abg-win[data-zone="tl"] { left: 0; top: 0; width: calc(var(--col) - var(--g) / 2); height: calc(var(--row) - var(--g) / 2); }
.abg-win[data-zone="tr"] { left: calc(var(--col) + var(--g) / 2); top: 0; width: calc(100% - var(--col) - var(--g) / 2); height: calc(var(--row) - var(--g) / 2); }
.abg-win[data-zone="bl"] { left: 0; top: calc(var(--row) + var(--g) / 2); width: calc(var(--col) - var(--g) / 2); height: calc(100% - var(--row) - var(--g) / 2); }
.abg-win[data-zone="br"] { left: calc(var(--col) + var(--g) / 2); top: calc(var(--row) + var(--g) / 2); width: calc(100% - var(--col) - var(--g) / 2); height: calc(100% - var(--row) - var(--g) / 2); }
@media (hover: none) {
  .abg-win[data-zone] { left: 0; top: 0; width: 100%; height: 100%; }
}

/* the bar is only a perch for the loading ring now — no controls, no drag;
   the rail is the one way to switch what fills the desk */
.abg-win-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  pointer-events: none;
  user-select: none;
}
.abg-win-title { display: none; }
/* loading ring: a thin arc that turns while a window is still fetching */
.abg-win-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--rail-line);
  border-top-color: var(--rail-ink);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease;
  animation: abg-spin .8s linear infinite;
}
.abg-win.is-loading .abg-win-spinner { opacity: 1; }
@keyframes abg-spin { to { transform: rotate(360deg); } }

/* the body: its own scroll container; fixed chrome inside stays inside */
.abg-win-body {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  contain: paint;
  container-type: size;
  background: var(--rail-paper);
}
.abg-win-body > iframe { display: block; width: 100%; height: 100%; border: 0; }

/* scrollbars: a 4px grey thread that appears while scrolling and is gone
   a moment later — nothing else, no track, no arrows. Chromium drops
   ::-webkit-scrollbar styling if scrollbar-width/color are set, so those
   go to Firefox alone. */
@supports not selector(::-webkit-scrollbar) {
  .abg-win-body { scrollbar-width: thin; scrollbar-color: rgba(110, 106, 98, .5) transparent; }
}
.abg-win ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.abg-win ::-webkit-scrollbar-track,
.abg-win ::-webkit-scrollbar-track-piece,
.abg-win ::-webkit-scrollbar-corner { background: transparent; }
.abg-win ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.abg-win ::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
  min-height: 36px;
}
.abg-win.is-scrolling ::-webkit-scrollbar-thumb,
.abg-win ::-webkit-scrollbar-thumb:hover { background-color: rgba(110, 106, 98, .55); }
.abg-win ::-webkit-scrollbar-thumb:active { background-color: rgba(110, 106, 98, .8); }

/* the front page as a window: its fixed masthead sits under the bar,
   and its full-height chapters fill the window, not the screen */
.abg-win .home-shell { min-height: 100cqh; }
.abg-win .v2-topbar { top: 0; left: 0; right: 0; border-radius: 0; }
.abg-win .v2-skip { top: 12px; left: 12px; }
.abg-win .v2-hero,
.abg-win .abg-chapter { min-height: 100cqh; }

/* open: swipe in from the right; close: slip out the same way */
.abg-win.is-opening { animation: abg-win-in .38s var(--rail-ease) both; }
.abg-win.is-closing { animation: abg-win-out .22s ease both; pointer-events: none; }
@keyframes abg-win-in {
  from { transform: translateX(calc(100% + var(--desk-gap) * 2)); opacity: .6; }
  to { transform: none; opacity: 1; }
}
@keyframes abg-win-out {
  from { transform: none; opacity: 1; }
  to { transform: translateX(40px) scale(.985); opacity: 0; }
}

/* ----------------------------------------------------- snap preview ---- */
/* While a window is dragged to a border, one grey box shows where it will
   land, and morphs between the half and the quarter as the pointer moves. */
.abg-snap {
  position: absolute;
  z-index: 940;
  pointer-events: none;
  background: rgba(120, 116, 108, .18);
  border: 1px solid rgba(21, 18, 14, .3);
  border-radius: var(--win-radius);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: scale(.985);
  transition: left .18s var(--rail-ease), top .18s var(--rail-ease), width .18s var(--rail-ease), height .18s var(--rail-ease), opacity .15s ease, transform .15s ease;
}
.abg-snap.is-showing { opacity: 1; transform: none; }

/* ----------------------------------------------------------- dividers -- */
.abg-split {
  position: absolute;
  z-index: 800;
  display: none;
  touch-action: none;
}
.abg-split::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 2px;
  background: var(--rail-line);
  transition: background-color .15s ease;
}
.abg-split:hover::before, .abg-split.is-dragging::before { background: var(--rail-ink); }
.abg-split-v { top: 0; bottom: 0; left: calc(var(--col) - var(--g) / 2); width: var(--g); cursor: col-resize; }
.abg-split-v::before { width: 3px; height: 44px; }
.abg-split-h { left: 0; right: 0; top: calc(var(--row) - var(--g) / 2); height: var(--g); cursor: row-resize; }
.abg-split-h::before { height: 3px; width: 44px; }
.abg-desk[data-cols="true"] .abg-split-v,
.abg-desk[data-rows="true"] .abg-split-h { display: block; }
@media (hover: none) { .abg-split { display: none !important; } }

/* --------------------------------------------------------------- rail -- */
.abg-rail {
  position: fixed;
  top: var(--desk-gap);
  bottom: var(--desk-gap);
  left: var(--desk-gap);
  z-index: 320;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--rail-w);
  background: var(--rail-paper);
  border: 1px solid var(--rail-line);
  border-radius: var(--win-radius);
  box-shadow: var(--win-shadow);
  color: var(--rail-ink);
  font-family: var(--rail-mono);
  overflow: clip;
}
.abg-rail-handle {
  display: none;
  position: fixed;
  left: 0;
  bottom: 24px;
  z-index: 319;
  width: 22px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rail-line);
  border-left: 0;
  background: var(--rail-paper);
  color: var(--rail-ink);
  cursor: pointer;
}
.abg-rail-handle::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
@media (hover: none) {
  .abg-rail {
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 var(--win-radius) var(--win-radius) 0;
    transform: translateX(-100%);
    transition: transform .32s var(--rail-ease);
    box-shadow: 12px 0 40px -24px rgba(21, 18, 14, .25);
  }
  .abg-rail.is-open { transform: none; }
  .abg-rail-handle { display: block; }
}

.abg-rail ul { margin: 0; padding: 0; list-style: none; }
.abg-rail-top { padding-top: 6px; }
.abg-rail-main { padding: 6px 0; border-top: 1px solid var(--rail-line); }
.abg-rail-bottom { padding-top: 6px; border-top: 1px solid var(--rail-line); }

.abg-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rail-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.abg-rail-item:hover,
.abg-rail-item:focus-visible { color: var(--rail-ink); background: var(--rail-paper-2); outline: 0; }
.abg-rail-item:focus-visible::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rail-ink); }
.abg-rail-item[aria-current="page"] { color: var(--rail-ink); }
.abg-rail-item[aria-current="page"]::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 2px; background: var(--rail-ink); }
/* an open window's tab carries a dot, like a running app */
.abg-rail-item.is-open::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rail-ink); opacity: .55; }
.abg-rail-item.is-locked { color: var(--rail-faint); cursor: not-allowed; }
.abg-rail-item.is-locked:hover { background: none; }
.abg-rail-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.abg-rail-mark { height: 64px; color: var(--rail-ink); }
.abg-rail-mark[aria-current="page"]::before { display: none; }
.abg-rail-mark img { display: block; width: 36px; height: 36px; flex: none; border: 1px solid var(--rail-line); object-fit: cover; background: #fff; }

/* Icons at rest; gliding the cursor onto the rail unfolds it and the desk
   resizes to make room — nothing gets covered. Folds back when the cursor
   leaves (clicks drop their focus in JS so :focus-within can't pin it). */
.abg-rail { transition: width .26s var(--rail-ease); }
.abg-desk { transition: left .26s var(--rail-ease); }
body:has(.abg-rail:hover), body:has(.abg-rail:focus-within) { --rail-w: 232px; }
.abg-rail-item { justify-content: flex-start; gap: 15px; padding-left: 23px; }
.abg-rail-item svg { flex: none; }
.abg-rail-mark { padding-left: 16px; gap: 12px; }
.abg-rail-item.is-open::after { left: 34px; }
.abg-rail-name { white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateX(-6px); transition: opacity .2s ease .06s, transform .2s ease .06s; }
.abg-rail:hover .abg-rail-name, .abg-rail:focus-within .abg-rail-name { opacity: 1; transform: none; }
.abg-rail:hover .abg-rail-tip, .abg-rail:focus-within .abg-rail-tip { display: none; }
@media (hover: none) { .abg-rail { width: var(--rail-w); } .abg-rail .abg-rail-name { display: none; } }

.abg-rail-tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 2;
  padding: 7px 11px;
  background: var(--rail-paper-2);
  border: 1px solid var(--rail-line);
  border-radius: 6px;
  color: var(--rail-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-6px, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s var(--rail-ease);
}
.abg-rail-tip small { display: block; margin-top: 5px; color: var(--rail-muted); font-size: 9px; font-weight: 500; letter-spacing: .14em; }
.abg-rail-item:hover .abg-rail-tip, .abg-rail-item:focus-visible .abg-rail-tip,
.abg-rail-login:hover .abg-rail-tip, .abg-rail-login:focus-visible .abg-rail-tip,
.abg-rail-account:hover .abg-rail-tip, .abg-rail-account:focus-visible .abg-rail-tip { opacity: 1; transform: translate(0, -50%); }

/* login / account: ordinary rail rows (icon at rest, name when the rail
   unfolds) with a gold hairline above, so the foot of the rail reads as one
   piece with the tabs instead of a boxed-in button. */
.abg-rail-login, .abg-rail-account { margin-top: 6px; }
.abg-rail-login::before, .abg-rail-account::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rail-gold) 50%, transparent);
}
.abg-rail-login { color: var(--rail-ink); }
.abg-rail-login[aria-disabled="true"] { color: var(--rail-faint); cursor: not-allowed; }
.abg-rail-login[aria-disabled="true"]:hover { background: none; }
.abg-rail-login[aria-disabled="true"]::before { opacity: .3; }
.abg-rail-account { color: var(--rail-ink); }
.abg-rail-account img, .abg-rail-account i {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0 -3px;
  border: 1px solid var(--rail-line); border-radius: 50%; object-fit: cover;
  background: var(--rail-paper-2); color: var(--rail-ink); font-size: 11px; font-style: normal; font-weight: 700;
}
.abg-rail-account:hover img, .abg-rail-account:focus-visible img,
.abg-rail-account:hover i, .abg-rail-account:focus-visible i { border-color: var(--rail-ink); }

/* ------------------------------------------------------------- notice -- */
.abg-rail-notice {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 960;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 9px 14px;
  background: var(--rail-paper-2);
  border: 1px solid var(--rail-line);
  border-radius: 8px;
  color: var(--rail-ink);
  font-family: var(--rail-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: abg-rail-notice 6s ease forwards;
}
@keyframes abg-rail-notice { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* --------------------------------------------------------- test tools -- */
/* Pre-launch only. Plain, so it is obviously not part of the site. */
.abg-test-tools {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 970;
  max-width: 260px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font: 12px/1.4 system-ui, sans-serif;
  overflow: clip;
}
.abg-test-tools summary { padding: 6px 10px; cursor: pointer; list-style: none; font-weight: 600; }
.abg-test-tools summary::before { content: "\25B8  "; }
.abg-test-tools[open] summary::before { content: "\25BE  "; }
.abg-test-tools div { max-height: 60vh; overflow: auto; border-top: 1px solid #000; }
.abg-test-tools a { display: block; padding: 6px 10px; border-top: 1px solid #ddd; color: #000; text-decoration: none; }
.abg-test-tools a:first-child { border-top: 0; }
.abg-test-tools a:hover { background: #f2f2f2; }
.abg-test-tools a[aria-current="true"] { background: #000; color: #fff; }
.abg-test-tools a small { display: block; color: #666; }
.abg-test-tools a[aria-current="true"] small { color: #ccc; }

@media (prefers-reduced-motion: reduce) {
  .abg-win, .abg-rail-tip, .abg-rail-item, .abg-rail-login, .abg-rail-account, .abg-rail, .abg-snap, .abg-rail-main > li { transition: none; }
  .abg-win.is-opening, .abg-win.is-closing { animation-duration: .01s; }
}

/* standing reminder: Discord not connected yet */
.abg-rail-nag {
  position: fixed;
  bottom: 22px;
  left: 50%;
  z-index: 950;
  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  background: var(--rail-ink);
  border-radius: 999px;
  color: var(--rail-paper);
  font-family: var(--rail-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px -12px rgba(21, 18, 14, .45);
}
.abg-rail-nag:hover { background: var(--rail-gold); color: var(--rail-ink); }