/* ============================================================
   App shell: floating glass sidebar · glass top bar · content
   (+ widget slots) · mobile bottom bar + drawer.
   Everything here is translucent: the ambient blend (ambience.css)
   glows through the frame.
   ============================================================ */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app.boot { display: block; }

/* ---------- sidebar: a glass column down the left, top to bottom, as in the original ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 2px; padding: 0 12px 12px;
  background: var(--sheen), var(--bg-sidebar);
  border-right: 1px solid var(--border);
  -webkit-backdrop-filter: blur(24px) saturate(1.35); backdrop-filter: blur(24px) saturate(1.35);
  overflow-y: auto; overflow-x: hidden; z-index: var(--z-nav); scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; flex-shrink: 0; }
/* (the logo is on the top bar's line: its row is the top bar's height, and the top bar's hairline runs on under it) */
.sidebar .brand { align-self: stretch; height: var(--topbar-h); margin: 0 -12px 10px; padding: 0 20px; border-bottom: 1px solid var(--border); }
.brand-mark { display: block; flex-shrink: 0; width: auto; height: 28px; }   /* (the logo, logo() in ui/icons.js) */
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--fs-scale)); letter-spacing: .045em; color: var(--text); white-space: nowrap; }
.brand-name span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { padding: 16px 11px 6px; font-size: calc(10px * var(--fs-scale)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 11px; border-radius: var(--r);
  color: var(--text-2); font-weight: 600; font-size: calc(13px * var(--fs-scale)); white-space: nowrap;
  transition: background-color var(--t), color var(--t), box-shadow var(--t);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; transition: color var(--t), transform var(--t) var(--ease-out); }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item:hover svg { transform: translateX(1px); }
.nav-item.on { color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-2) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 20px -14px var(--accent-glow); }
.nav-item.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--accent-grad); box-shadow: 0 0 12px var(--accent-glow); }
.nav-item.on svg { color: var(--accent-hi); }
.nav-item .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-sm); background: var(--accent-grad); color: var(--on-accent); font-size: calc(10px * var(--fs-scale)); font-weight: 800; display: grid; place-items: center; }
.nav-item .nav-pill { margin-left: auto; font-size: calc(9px * var(--fs-scale)); font-weight: 800; letter-spacing: .06em; padding: 3px 5px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); }

/* (the invite card sits a little under the last link, not down at the column's foot) */
.sidebar-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.promo { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; text-align: left; border-radius: var(--r-md);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: var(--highlight); }
.promo:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.promo-ico { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--on-accent); background: var(--accent-grad); }
.promo-ico svg { width: 16px; height: 16px; }
.promo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.promo-txt b { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.promo-txt span { font-size: var(--fs-xs); color: var(--text-2); }
/* (a short window: the links tighten from 840px down, then the section names become thin lines (see "responsive" below),
   so every link stays in view. The invite card shows only where it fits too: above 880px, and again once the links have
   tightened, down to 770px; staff have one more link, so 920px and 800px) */
@media (840px < height <= 880px), (max-height: 770px) { .sidebar .sidebar-foot { display: none; } }
@media (840px < height <= 920px), (max-height: 800px) { .sidebar:has(.nav-item[data-nav="admin"]) .sidebar-foot { display: none; } }

/* ---------- main column ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter);
  background: linear-gradient(180deg, color-mix(in srgb, var(--amb-base, var(--bg)) 72%, transparent), color-mix(in srgb, var(--amb-base, var(--bg)) 40%, transparent));
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  border-bottom: 1px solid var(--border);
}
.topbar .mobile-only { display: none; }
.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search .gs-box { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border-radius: var(--r); background: var(--input); border: 1px solid var(--border-strong); box-shadow: var(--highlight); color: var(--text-3); transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
.global-search .gs-box:hover { border-color: var(--border-hover); }
.global-search .gs-box:focus-within { border-color: var(--focus); box-shadow: var(--ring), 0 12px 30px -16px var(--accent-glow); background: color-mix(in srgb, var(--surface-solid) 70%, transparent); }
.global-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.global-search input { flex: 1; min-width: 0; height: 100%; color: var(--text); font-size: calc(13px * var(--fs-scale)); }
.global-search input::placeholder { color: var(--text-3); }
.global-search .kbd { flex-shrink: 0; }
.search-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--z-drop); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  background: var(--sheen), var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); animation: pop-in var(--t) var(--ease-out); }
.search-drop .sd-label { padding: 9px 9px 5px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.search-drop .sd-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r); cursor: pointer; font-size: calc(13px * var(--fs-scale)); }
.search-drop .sd-row.active, .search-drop .sd-row:hover { background: var(--hover-2); }
.search-drop .sd-row .sd-icon { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; background: var(--hover-2); color: var(--text-2); flex-shrink: 0; }
.search-drop .sd-row .sd-icon svg { width: 15px; height: 15px; }
.search-drop .sd-foot { display: flex; align-items: center; gap: 8px; padding: 9px; margin-top: 4px; border-top: 1px solid var(--border); color: var(--accent-text); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; border-radius: 0 0 var(--r) var(--r); }
.search-drop .sd-foot:hover, .search-drop .sd-foot.active { background: var(--hover); }
/* (what it shows: all of it, or one kind: light-edged chips, every one in sight, that stay at the top while the list scrolls) */
.search-drop .sd-kinds { position: sticky; top: -6px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: -6px -6px 4px; padding: 10px 12px;
  background: var(--surface-solid); border-bottom: 1px solid var(--border); }
.search-drop .sd-kind { flex-shrink: 0; height: 26px; padding: 0 10px; border: 1px solid var(--border); background: none; color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; cursor: pointer; }
.search-drop .sd-kind:hover { border-color: var(--border-hover); color: var(--text); }
.search-drop .sd-kind[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-softer); color: var(--text); }
/* (each result's picture in one column, so the names line up: a game's art whole, in its header shape) */
.search-drop .sd-pic { flex: 0 0 64px; display: flex; align-items: center; }
.search-drop .sd-art { width: 64px; aspect-ratio: 460 / 215; overflow: hidden; border: 1px solid var(--border); }
.search-drop .sd-art .cover { width: 100%; height: 100%; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-actions .icon-btn { width: 38px; height: 38px; border-radius: var(--r); }
.userchip { display: flex; align-items: center; gap: 9px; padding: 3px 11px 3px 3px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--border); background: var(--hover); box-shadow: var(--highlight); transition: background-color var(--t), border-color var(--t); }
.userchip:hover { background: var(--hover-2); border-color: var(--border-strong); }
.userchip .uc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.userchip .uc-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip .uc-level { display: flex; align-items: center; gap: 6px; font-size: calc(10px * var(--fs-scale)); font-weight: 800; color: var(--text-2); line-height: 1; }
.userchip .uc-level .progress { width: 50px; }
.userchip > svg { width: 15px; height: 15px; color: var(--text-3); }

/* ---------- content area ---------- */
/* content starts beside the sidebar (no centred column with empty sides) */
.content { flex: 1; display: grid; grid-template-columns: minmax(0, var(--feed-w)) var(--rail-w); gap: var(--gutter); justify-content: start; padding: 24px var(--gutter) 64px; align-items: start; width: 100%; max-width: calc(var(--feed-w) + var(--rail-w) + var(--gutter) * 3); margin: 0; }
.content[data-layout="wide"] { grid-template-columns: minmax(0, 1fr); max-width: 1480px; }
/* stage: a wide main column (your canvas scene, the Timeline) next to your widget slots */
.content[data-layout="stage"] { grid-template-columns: minmax(0, 1fr) var(--rail-w); max-width: 1880px; }
.content[data-layout="full"] { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; }
.content[data-layout="narrow"] { grid-template-columns: minmax(0, 760px); }
.content[data-layout="wide"] .rail, .content[data-layout="full"] .rail, .content[data-layout="narrow"] .rail { display: none; }
#view { min-width: 0; }
.view-host { display: contents; }
#view:focus { outline: none; }
/* (it sticks under the top bar; taller than the window, it scrolls with the page until its foot is in view and sticks
   there, so the last widget is never cut off: --sticky-h is its height, from stickyFit() in core/dom.js) */
.rail { position: sticky; top: min(calc(var(--topbar-h) + 24px), calc(100vh - var(--sticky-h, 0px) - 16px)); display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-bottom: 8px; }
.rail-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0 6px; font-size: var(--fs-xs); color: var(--text-3); }
.rail-foot a:hover { color: var(--text-2); }

/* ---------- mobile bottom nav ---------- */
.bottom-nav { display: none; }

/* ---------- drawer (mobile full nav) ---------- */
.drawer-root { position: fixed; inset: 0; z-index: var(--z-modal); }
.drawer-root .modal-backdrop { animation: fade-in var(--t) ease both; }
.drawer { position: absolute; top: 10px; bottom: 10px; left: 10px; width: min(84vw, 290px); padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  background: var(--sheen), var(--surface-solid);
  border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: drawer-in var(--t-slow) var(--ease-out) both; }
@keyframes drawer-in { from { transform: translateX(-110%); } to { transform: none; } }
/* (each part keeps its own height and the menu scrolls: on a short phone, flex squeezed the last items, Notifications
   and Sign out, to 20px and pushed the legal links out of reach) */
.drawer > * { flex-shrink: 0; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1279px) {
  :root { --sidebar-w: 88px; --rail-w: 300px; }
  .sidebar { padding: 0 12px 12px; align-items: center; }
  .sidebar .brand { justify-content: center; padding: 0; }
  .sidebar .brand-name, .sidebar .nav-label, .sidebar .promo, .sidebar .nav-pill { display: none; }
  /* (the links' words stay for screen readers and voice control: only the look is the icon) */
  .sidebar .nav-item span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sidebar .nav { width: 100%; align-items: center; }
  .sidebar .nav-item { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: var(--r-md); }
  .sidebar .nav-item.on::before { display: none; }
  .sidebar .nav-item .nav-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; font-size: calc(9.5px * var(--fs-scale)); margin: 0; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface-solid); }
  .sidebar .nav-sep { width: 28px; height: 1px; background: var(--border); margin: 8px 0; }
  .sidebar-foot { align-items: center; }
}
@media (min-width: 1280px) { .sidebar .nav-sep { display: none; } }
/* a short window: the sidebar's links tighten so they all fit (after the icon sidebar's rules, so they win there too) */
@media (max-height: 840px) {
  .sidebar .brand { margin-bottom: 6px; }
  .sidebar .nav-label { padding: 10px 11px 4px; }
  .sidebar .nav-item { height: 32px; }
  .sidebar .nav-sep { margin: 4px 0; }
}
@media (min-width: 1280px) and (max-height: 700px) {
  .sidebar .nav-label { display: none; }
  .sidebar .nav-sep { display: block; height: 1px; margin: 4px 11px; background: var(--border); }
}
@media (max-height: 640px) {
  .sidebar { padding-bottom: 6px; }
  .sidebar .brand { margin-bottom: 2px; }
  .sidebar .nav-item { height: 30px; }
  .sidebar .nav-sep { margin-block: 3px; }
}
/* (shorter still, they can't all fit: the sidebar shows that it scrolls) */
@media (max-height: 580px) { .sidebar { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } }
@media (max-width: 1100px) {
  .content { grid-template-columns: minmax(0, var(--feed-w)); max-width: calc(var(--feed-w) + var(--gutter) * 2); }
  .content .rail { display: none; }
  .content[data-layout="wide"] { max-width: 100%; }
  .content[data-layout="stage"] { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
@media (max-width: 767px) {
  :root { --gutter: 14px; --topbar-h: 58px; --bottom-nav-h: 60px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar { gap: 10px; }
  .topbar .mobile-only { display: inline-grid; }
  .topbar .mobile-brand { display: flex; padding: 0; }
  /* (the wordmark is the logo: on a phone's top bar it doesn't grow with Text size, or it pushes the account button off a 320px screen) */
  .topbar .mobile-brand .brand-name { font-size: calc(16px * min(var(--fs-scale), 1)); }
  .topbar .mobile-brand .brand-mark { height: 26px; }
  .topbar-actions .icon-btn { width: 36px; height: 36px; border-radius: var(--r); }
  .global-search { display: none; }
  .global-search.mobile-open { display: block; position: absolute; inset: 8px 10px; max-width: none; z-index: 2; }
  .userchip { padding: 3px; }
  .userchip .uc-text, .userchip > svg { display: none; }
  .content { padding: 16px var(--gutter) calc(var(--bottom-nav-h) + 34px); }
  .content[data-layout="full"] { padding-bottom: var(--bottom-nav-h); }
  .bottom-nav {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-nav);
    height: var(--bottom-nav-h); padding: 0 4px; border-radius: var(--r-lg);
    background: var(--sheen), color-mix(in srgb, var(--surface-solid) 94%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid var(--border-strong); box-shadow: var(--highlight), 0 18px 40px -16px rgba(0, 0, 0, .7);
  }
  .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: calc(10px * var(--fs-scale)); font-weight: 700; position: relative; }
  .bottom-nav svg { width: 20px; height: 20px; }
  .bottom-nav .on { color: var(--text); }
  .bottom-nav .on svg { color: var(--accent-hi); filter: drop-shadow(0 0 8px var(--accent-glow)); }
  .bottom-nav .bn-create { color: var(--on-accent); }
  .bottom-nav .bn-create span.bn-plus { width: 44px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--shadow-accent); }
  .bottom-nav .count-badge { top: 4px; right: calc(50% - 22px); }
  .page-head h1 { font-size: calc(20px * var(--fs-scale)); }
  .modal-root { padding: 0; place-items: end center; }
  .modal { max-width: none !important; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; animation: sheet-in var(--t-slow) var(--ease-out) both; }
  .modal.full { height: 100vh; max-height: 100vh; border-radius: 0; }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
}
@media (min-width: 768px) { .topbar .mobile-brand { display: none; } }
/* small phones: Search lives in the bottom bar; Messages stays top right */
@media (max-width: 520px) {
  .topbar-actions { gap: 6px; }
  .topbar-actions [data-act="mobile-search"] { display: none; }
}
/* (narrow phones: the logo, its name and the buttons a little closer, so the account button stays on the screen) */
@media (max-width: 360px) {
  .topbar, .topbar .mobile-brand { gap: 8px; }
  .topbar .mobile-brand .brand-mark { height: 24px; }
}
@media (max-width: 339px) {
  .topbar, .topbar .mobile-brand { gap: 6px; }
  .topbar .mobile-brand .brand-mark { height: 22px; }
  .topbar .mobile-brand .brand-name { font-size: calc(13.5px * min(var(--fs-scale), 1)); }
}