/* layout & header */
*{ box-sizing:border-box; }
html{
  /* Proportional UI scaling. The whole app is sized in rem off this root, so
     setting the root font-size fluidly scales every surface uniformly. Reference
     is 1600px = 16px (the single tunable knob below); it scales up above that and
     never below the baseline, so screens <=1600 render exactly as before. Mobile
     reflow is unaffected (breakpoints stay px). Exception to no-clamp in DESIGN.md. */
  font-size: clamp(16px, calc(16px + (100vw - 1600px) / 90), 26px); /* @fluid-root */
  scrollbar-gutter:stable;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  text-size-adjust:100%;
}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--type-body);
  min-height:100vh;
  background: var(--bg);
  line-height:var(--leading-body);
  letter-spacing:0;
  font-kerning:normal;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}
body.app-shell{
  background:var(--app-shell-bg, var(--bg));
}
h1,h2,h3,h4,h5,h6,
.brand-core{
  font-family:var(--font-display);
  letter-spacing:0;
}
/* default link styling */
a{ color:var(--link); }
a:hover{ color:var(--link-hover); }

/* keyboard focus ring */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:0.125rem solid var(--focus-ring);
  outline-offset:0.125rem;
  box-shadow:none;
}
.wrap{
  --command-deck-top:1.125rem;
  --command-deck-min-height:4.25rem;
  --command-deck-height:4.25rem;
  --command-deck-gap:1.25rem;
  --command-deck-offset:calc(var(--command-deck-top) + var(--command-deck-height) + var(--command-deck-gap));
  --command-deck-motion-duration:.34s;
  --command-deck-motion-ease:cubic-bezier(.22, 1, .36, 1);
  width:100%;
  max-width:100vw;
  margin:0;
  padding:1.125rem 1.5rem 5rem;
  position:relative;
}

.app-header{
  position:sticky;
  top:var(--command-deck-top);
  z-index:40;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:1rem;
  min-height:var(--command-deck-min-height);
  margin:0 0 var(--command-deck-gap);
  padding:0.5rem 0.625rem 0.5rem 0.5rem;
  border:0.0625rem solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius:1rem;
  background:var(--surface-1);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:
    transform var(--command-deck-motion-duration) var(--command-deck-motion-ease),
    opacity calc(var(--command-deck-motion-duration) - .08s) ease-out,
    min-height var(--motion-base) ease,
    padding var(--motion-base) ease,
    border-color var(--motion-base) ease,
    background var(--motion-base) ease;
}
.brand{
  font-weight:var(--weight-bold);
  letter-spacing:0;
  display:inline-flex;
  align-items:center;
  gap:0;
  min-width:0;
  max-width:100%;
}
.app-header__brand{
  justify-self:start;
  min-height:0;
  padding:0 0.25rem 0 0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.brand-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:2.625rem;
  height:2.625rem;
  border-radius:0.75rem;
  border:0.0625rem solid color-mix(in srgb, var(--brand-blue) 18%, var(--line));
  color:inherit;
  text-decoration:none;
  box-shadow:none;
  transition:transform var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.brand-home:hover{
  border-color:color-mix(in srgb, var(--brand-blue) 28%, var(--line));
  box-shadow:none;
  transform:translateY(-0.03125rem);
}
.brand-logo{
  display:block;
  width:2.625rem;
  height:2.625rem;
  flex:0 0 2.625rem;
  border-radius:0.75rem;
  object-fit:contain;
}
.brand-core{
  display:inline-flex;
  align-items:center;
}
.topbar{ display:flex; align-items:center; gap:0.75rem; }

.actions{ display:flex; align-items:center; gap:0.625rem; }
.link{ color:var(--text); text-decoration:none; font-weight:600; padding:0.5rem 0.625rem; border-radius:0.625rem; border:0.0625rem solid var(--line); background:var(--surface-1); cursor:pointer; transition: background var(--motion-fast) ease, transform var(--motion-fast) ease; }
.link:hover{ background:var(--surface-2); }
.link-compact{ padding:0.375rem 0.625rem; }

/* Navbar/profile avatar */
.avatar{
  width:2rem;
  height:2rem;
  border-radius:var(--radius-pill);
  object-fit:cover;
  border:0.0625rem solid var(--line);
  display:block;
}
.avatar-slot{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
  isolation:isolate;
  contain:paint;
  border-radius:var(--radius-pill);
  object-fit:initial;
  padding:0;
  background:
    radial-gradient(circle at 34% 24%, color-mix(in srgb, #fff 22%, transparent), transparent 32%),
    color-mix(in srgb, var(--chip-active) 88%, var(--surface-2));
}
.avatar-media{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  object-position:center;
  user-select:none;
}
.avatar-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:
    radial-gradient(circle at 34% 24%, color-mix(in srgb, #fff 20%, transparent), transparent 32%),
    color-mix(in srgb, var(--chip-active) 88%, var(--surface-2));
  color:#fff;
  font-size:var(--type-caption);
  font-weight:var(--weight-bold);
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.avatar-media[hidden],
.avatar-fallback[hidden]{
  display:none !important;
}

.brand-sep{
  width:0.0625rem;
  height:1.125rem;
  margin:0 0.875rem;
  color:transparent;
  background:color-mix(in srgb, var(--line) 82%, transparent);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.brand-page{
  color:color-mix(in srgb, var(--text) 72%, var(--muted));
  font-family:var(--font-display);
  font-size:.9375rem;
  font-weight:var(--weight-semibold);
  letter-spacing:0;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.app-shell.nav-hidden .app-header{
  transform:translateY(calc(-100% - 0.625rem));
  opacity:0;
  pointer-events:none;
}

.hub-nav-reveal{
  position:fixed;
  right:1.375rem;
  bottom:1.375rem;
  z-index:46;
  min-height:2.5rem;
  padding:0.5rem 0.75rem;
  border-radius:0.75rem;
  border:0.0625rem solid color-mix(in srgb, var(--line) 82%, transparent);
  background:color-mix(in srgb, var(--surface-1) 96%, transparent);
  color:var(--text);
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:var(--type-control);
  font-weight:var(--weight-bold);
  cursor:pointer;
  opacity:0;
  transform:translateY(0.5rem);
  pointer-events:none;
  transition:opacity var(--motion-fast) ease, transform var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.hub-nav-reveal__icon{
  font-size:var(--type-meta);
  line-height:1;
}

body.app-shell.hub-nav-reveal-visible .hub-nav-reveal{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.hub-nav-reveal:hover{
  border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
  background:color-mix(in srgb, var(--surface-2) 95%, transparent);
}

@media (max-width:980px){
  .app-header{
    position:sticky;
    top:0.75rem;
    grid-template-columns:1fr;
    padding:0.5rem 0.5rem;
    min-height:3.75rem;
    gap:0.5rem;
    border-radius:0.875rem;
  }

  body.app-shell.is-dashboard-page .app-header,
  body.app-shell.is-hub-page .app-header{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:0.5rem;
    row-gap:0;
    min-height:3.5rem;
    padding:0.375rem 0.5rem;
    margin-bottom:0.875rem;
  }

  body.app-shell.is-dashboard-page .app-header .app-header__brand,
  body.app-shell.is-hub-page .app-header .app-header__brand{
    grid-column:1;
    padding:0;
  }

  body.app-shell.is-dashboard-page .app-header .top-nav,
  body.app-shell.is-hub-page .app-header .top-nav{
    grid-column:2;
    justify-self:end;
    position:relative;
  }

  body.app-shell.is-dashboard-page .brand-sep,
  body.app-shell.is-hub-page .brand-sep{
    margin:0 0.5rem;
  }

  .brand-home,
  .brand-logo{
    width:2.25rem;
    height:2.25rem;
    flex-basis:2.25rem;
    border-radius:0.625rem;
  }

  body.app-shell.nav-hidden .app-header{
    transform:none;
    opacity:1;
    pointer-events:auto;
  }

  .hub-nav-reveal{
    display:none !important;
  }
}

/* page header helpers */
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }

/* tables (global) */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:0.5rem 0.375rem; border-bottom:0.0625rem solid var(--line); font-size:var(--type-meta); }
th{ font-size:var(--type-caption); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

/* toast */
.toast{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--toast-bg); color:var(--toast-text); padding:0.625rem 0.875rem; border-radius:0.75rem;
  border:0.0625rem solid color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow:none; display:none; z-index:20; font-weight:var(--weight-bold); }
.toast:not([hidden]){ display:block; }
.toast--earned{
  background:color-mix(in srgb, var(--brand-earned-soft) 72%, var(--panel));
  color:color-mix(in srgb, var(--brand-earned) 72%, var(--text));
  border-color:color-mix(in srgb, var(--brand-earned) 34%, var(--line));
}

.sr-only{
  position:absolute;
  width:0.0625rem;
  height:0.0625rem;
  padding:0;
  margin:-0.0625rem;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}