/* ================================================================
   APP SHELL styles -- see assets/app-shell.js for how pages opt in.
   Uses the brand tokens from site.css (brass, ivory, slate, teal,
   IBM Plex). Layout borrowed from the inspiration app: top bar,
   grouped sidebar with a brass "pill" for the active page.
   ================================================================ */
.as-body {
  --as-top-h: 64px;
  --as-side-w: 240px;
  --as-side-w-collapsed: 72px;
  --as-panel: var(--ink-900, #191d24);
  --as-panel-2: var(--ink-850, #1f242c);
  margin: 0;
  background: var(--ink-950, #12151a);
}
.as-body.as-collapsed { --as-side-w: var(--as-side-w-collapsed); }

.as-icon { width: 20px; height: 20px; flex: none; }

/* ---------- Top bar ---------- */
.as-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--as-top-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  background: rgba(18, 21, 26, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line, #313742);
}
.as-brand { display: flex; align-items: center; }
.as-brand img { height: 34px; width: auto; display: block; }
.as-eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate, #BAC0CB);
  padding-left: 18px; border-left: 1px solid var(--line, #313742);
}
.as-top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.as-burger {
  display: none; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line, #313742); background: var(--as-panel);
  color: var(--ivory, #E8E4D9); align-items: center; justify-content: center; cursor: pointer;
}

.as-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--teal-dim, #2E5B54); color: var(--ivory, #E8E4D9);
  font: 600 15px var(--sans);
}
.is-signed-in .as-avatar { background: var(--teal, #4B9187); }

/* ---------- Sidebar ---------- */
.as-sidebar {
  position: fixed; top: var(--as-top-h); bottom: 0; left: 0; z-index: 30;
  width: var(--as-side-w);
  display: flex; flex-direction: column;
  padding: 14px 14px 12px;
  background: var(--as-panel);
  border-right: 1px solid var(--line, #313742);
  overflow-y: auto; overflow-x: hidden;
  transition: width .2s ease;
}
.as-collapse {
  align-self: flex-end; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--slate, #BAC0CB); cursor: pointer;
  display: grid; place-items: center; margin-bottom: 6px;
}
.as-collapse:hover { color: var(--ivory, #E8E4D9); background: var(--as-panel-2); }
.as-collapse .as-icon { width: 16px; height: 16px; transition: transform .2s; }
.as-collapsed .as-collapse .as-icon { transform: rotate(180deg); }

.as-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.as-nav-group {
  margin: 20px 12px 8px; font: 500 13px var(--mono);   /* brand eyebrow in IBM Plex Mono, sentence case */
  letter-spacing: .04em; color: var(--slate-dim, #A3A9B6);
}
.as-nav-item {
  display: flex; align-items: center; gap: 14px;
  min-height: 42px; padding: 0 12px; border-radius: 10px;
  color: var(--slate, #BAC0CB); text-decoration: none;
  font: 500 15px var(--sans); white-space: nowrap;
  border: 1px solid transparent;
}
a.as-nav-item:hover { background: var(--as-panel-2); color: var(--ivory, #E8E4D9); }
a.as-nav-item:hover .as-icon { color: var(--ivory, #E8E4D9); }
.as-nav-item .as-icon { color: var(--slate, #BAC0CB); }
.as-nav-item.is-active {
  background: rgba(201, 162, 75, .14);
  border-color: rgba(201, 162, 75, .35);
  color: var(--brass-bright, #E3C878); font-weight: 600;
}
.as-nav-item.is-active .as-icon { color: var(--brass, #C9A24B); }
.as-nav-item.is-accent { color: var(--brass-bright, #E3C878); }
.as-nav-item.is-soon { color: var(--slate-dim, #A3A9B6); cursor: default; }
.as-tag {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate, #BAC0CB); border: 1px solid var(--line, #313742);
}

.as-side-foot { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
.as-streak {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  color: var(--slate, #BAC0CB); font: 500 15px var(--sans); white-space: nowrap;
  border-top: 1px solid var(--line-soft, #262b34);
}
.as-streak b { color: var(--ivory, #E8E4D9); }
.as-streak.is-live .as-icon { color: var(--brass, #C9A24B); }
.as-user {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--line, #313742); background: var(--as-panel-2);
  color: var(--ivory, #E8E4D9); text-decoration: none; font: 600 15.5px var(--sans); white-space: nowrap;
}
.as-user:hover { border-color: var(--brass-dim, #8A7038); }
.as-user.is-active { border-color: rgba(201, 162, 75, .5); background: rgba(201, 162, 75, .14); color: var(--brass-bright, #E3C878); }
.as-trust { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; color: var(--teal-bright, #5ec4b6); font: 500 12.5px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.as-trust .as-icon { width: 16px; height: 16px; flex: none; }
.as-collapsed .as-sidebar .as-trust span { display: none; }
.as-collapsed .as-sidebar .as-trust { justify-content: center; padding: 0; }
.as-feedback { padding: 0 12px; color: var(--slate-dim, #A3A9B6); font: 13px var(--mono); letter-spacing: .02em; text-decoration: none; }
.as-feedback:hover { color: var(--ivory, #E8E4D9); }

/* Collapsed: icons only */
.as-collapsed .as-sidebar .as-nav-label,
.as-collapsed .as-sidebar .as-tag,
.as-collapsed .as-sidebar .as-nav-group,
.as-collapsed .as-sidebar .as-user-name,
.as-collapsed .as-sidebar .as-streak span,
.as-collapsed .as-sidebar .as-feedback { display: none; }
.as-collapsed .as-sidebar .as-nav-item,
.as-collapsed .as-sidebar .as-user,
.as-collapsed .as-sidebar .as-streak { justify-content: center; padding: 0; }
.as-collapsed .as-sidebar .as-user { padding: 8px 0; }
.as-collapsed .as-sidebar .as-nav-list + .as-nav-list { margin-top: 14px; }

/* ---------- Main area ---------- */
.as-main {
  display: block;
  margin-left: var(--as-side-w);
  padding: calc(var(--as-top-h) + 32px) 40px 48px;
  min-height: 100svh; box-sizing: border-box;
  transition: margin-left .2s ease;
}

/* ---------- Mobile drawer (popover + scroll snap) ---------- */
.as-drawer {
  --as-drawer-w: min(20em, 82dvw);
  --as-backdrop: 0;
  width: auto; height: auto; padding: 0; margin: 0; inset: 0;
  background: transparent; border: 0; overflow: visible;
}
.as-drawer:not([popover]) { display: none; position: fixed; z-index: 100; }
.as-drawer.is-shown { display: block; }
.as-drawer::backdrop { background: #000; opacity: calc(var(--as-backdrop) * .6); }
.as-drawer:not([popover]).is-shown::before {
  content: ''; position: fixed; inset: 0; background: #000; opacity: calc(var(--as-backdrop) * .6);
}
.as-drawer-scroller {
  position: relative; height: 100%;
  display: grid; grid-template-columns: var(--as-drawer-w) 100%;
  overflow-x: scroll; overscroll-behavior: none; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.as-drawer-scroller::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .as-drawer-scroller { scroll-behavior: smooth; } }
.as-drawer-scroller::after { content: ''; scroll-snap-align: end; scroll-initial-target: nearest; }
.as-drawer-sheet {
  height: 100svh; overflow-y: auto; scrollbar-width: none;
  scroll-snap-align: start; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 18px 14px 16px;
  background: var(--as-panel); border-right: 1px solid var(--line, #313742);
  outline: none;
}
.as-drawer-brand { margin: 0 8px 12px; }
@supports (animation-timeline: scroll()) {
  .as-drawer { timeline-scope: --as-drawer-fade; animation: as-fade-backdrop linear both; animation-timeline: --as-drawer-fade; }
  .as-drawer-scroller { scroll-timeline: --as-drawer-fade x; }
  @property --as-backdrop { syntax: '<number>'; inherits: true; initial-value: 0; }
  @keyframes as-fade-backdrop { 0% { --as-backdrop: 1 } 100% { --as-backdrop: 0 } }
}

@media (max-width: 899px) {
  .as-body { --as-top-h: 58px; }
  .as-sidebar { display: none; }
  .as-burger { display: inline-flex; }
  .as-topbar { gap: 12px; padding: 0 16px; }
  .as-eyebrow { display: none; }
  .as-main { margin-left: 0; padding: calc(var(--as-top-h) + 20px) 16px 40px; }
}
@media (min-width: 900px) {
  .as-drawer { display: none !important; }
}

/* ---------- Public pages inside the shell (home, guides, blog, about...) ---------- */
.as-body .landing-nav { display: none; }            /* kept in the HTML for search engines */
.as-main.as-public { padding: var(--as-top-h) 0 0; transition: margin-left .2s ease; }
.as-main.as-public > .guide-breadcrumb:first-child { margin-top: 24px; }
.as-top-cta.landing-nav-cta { margin-left: auto; white-space: nowrap; }
@media (max-width: 899px) {
  .as-main.as-public { padding: var(--as-top-h) 0 0; }
  .as-top-cta.landing-nav-cta { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 480px) { .as-top-cta.landing-nav-cta { display: none; } }

/* ---------- Top right: [page button] [Log in / your name] [Daily Quest] ---------- */
.as-top-actions { margin-left: auto; }
.as-top-user {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--line, #313742); background: transparent;
  color: var(--ivory, #E8E4D9); font: 600 15px var(--sans); text-decoration: none; white-space: nowrap;
}
.as-top-user:hover, .as-top-user:focus-visible { border-color: var(--brass-dim, #8A7038); color: var(--brass-bright, #E3C878); }
.as-top-user .as-avatar { display: none; }
/* Signed in: avatar + username, links to the profile */
.as-top-user.is-signed-in { padding: 0 14px 0 5px; border-radius: 20px; background: var(--as-panel-2); }
.as-top-user.is-signed-in .as-avatar { display: grid; }
.as-top-user-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.as-top-user.is-active { border-color: rgba(201, 162, 75, .5); color: var(--brass-bright, #E3C878); }
@media (max-width: 480px) {
  .as-topbar { gap: 10px; padding: 0 12px; }
  .as-top-actions { gap: 8px; }
  .as-top-user { padding: 0 12px; font-size: 14px; }
  .as-top-user.is-signed-in { padding: 0 3px; }
  .as-top-user.is-signed-in .as-top-user-name { display: none; }   /* just the avatar on phones */
}

/* ---------- No footers any more: give public pages room at the bottom ---------- */
.as-main.as-public { padding-bottom: 64px; }

/* ================================================================
   v36: chess.com-style side menu, our branding
   Desktop: no top bar. Logo at the top of the menu (goes home), More
   opens on click, your name / Log in at the bottom, Daily Quest floats
   bottom right. Phones keep the slim top bar + drawer.
   ================================================================ */
@media (min-width: 900px) {
  .as-body { --as-top-h: 0px; }
  .as-topbar { display: none; }
  .as-sidebar { top: 0; padding-top: 18px; }
}
/* Logo */
.as-side-brand { display: flex; align-items: center; min-height: 44px; margin: 0 6px 18px; padding: 4px 6px; border-radius: 10px; }
.as-side-brand:hover, .as-side-brand:focus-visible { background: var(--as-panel-2); }
.as-side-brand .as-logo-full { height: 36px; width: auto; display: block; }
.as-side-brand .as-logo-mark { display: none; width: 36px; height: 36px; }
.as-collapsed .as-sidebar .as-side-brand { justify-content: center; margin: 0 0 18px; padding: 4px 0; }
.as-collapsed .as-sidebar .as-logo-full { display: none; }
.as-collapsed .as-sidebar .as-logo-mark { display: block; }
/* More (click to open) */
.as-more-btn { width: 100%; margin-top: 14px; background: none; font: inherit; font: 500 15px var(--sans); cursor: pointer; text-align: left; }
.as-more-btn:hover { background: var(--as-panel-2); color: var(--ivory, #E8E4D9); }
.as-more-btn:hover .as-icon { color: var(--ivory, #E8E4D9); }
.as-more-btn .as-more-caret { margin-left: auto; display: inline-flex; }
.as-more-btn .as-more-caret .as-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.as-more-btn[aria-expanded="true"] .as-more-caret .as-icon { transform: rotate(180deg); }
.as-more-btn.has-active[aria-expanded="false"] { color: var(--brass-bright, #E3C878); }   /* you're on a page inside More */
.as-more-btn:focus-visible { outline: 2px solid var(--teal, #4B9187); outline-offset: 2px; }
.as-more-list { margin-top: 2px; }
.as-more-list[hidden] { display: none; }
.as-sidebar .as-more-list .as-nav-item, .as-drawer .as-more-list .as-nav-item { padding-left: 22px; }
.as-collapsed .as-sidebar .as-more-caret { display: none; }
.as-collapsed .as-sidebar .as-more-btn { justify-content: center; padding: 0; }
.as-collapsed .as-sidebar .as-more-list .as-nav-item { padding-left: 0; }
.as-collapsed .as-sidebar .as-more-list { padding: 4px 0; border-radius: 12px; background: rgba(255,255,255,.03); }
/* Bottom of the menu: your name (signed in) or a Log in button (signed out) */
.as-sidebar .as-user .as-avatar, .as-drawer .as-user .as-avatar { display: none; }
.as-sidebar .as-user.is-signed-in .as-avatar, .as-drawer .as-user.is-signed-in .as-avatar { display: grid; }
.as-sidebar .as-user:not(.is-signed-in), .as-drawer .as-user:not(.is-signed-in) {
  justify-content: center; background: var(--brass, #C9A24B); border-color: var(--brass, #C9A24B); color: #1b1508; font-weight: 700;
}
.as-sidebar .as-user:not(.is-signed-in):hover, .as-drawer .as-user:not(.is-signed-in):hover { background: var(--brass-bright, #E3C878); border-color: var(--brass-bright, #E3C878); }
.as-user-name { overflow: hidden; text-overflow: ellipsis; }
.as-collapsed .as-sidebar .as-user:not(.is-signed-in) .as-user-name { display: inline; font-size: 12.5px; }
.as-collapsed .as-sidebar .as-user:not(.is-signed-in) { padding: 8px 0; }
/* Feedback link + minimise button share the last row */
.as-foot-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.as-foot-row .as-collapse { margin: 0; }
.as-collapsed .as-sidebar .as-foot-row { justify-content: center; }
/* Phones: the top bar keeps Log in when signed out; signed in, your name is in the menu */
@media (max-width: 899px) { .as-top-user.is-signed-in { display: none; } }
/* The foot never gets wider than the menu (the Stockfish line was pushing it out) */
.as-side-foot { grid-template-columns: minmax(0, 1fr); }
.as-trust { padding: 0 8px; letter-spacing: .02em; }
.as-trust span { overflow: hidden; text-overflow: ellipsis; }
[data-admin-only][hidden] { display: none !important; }