/* Shared responsive styles — mobile nav + common breakpoints */

html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}

/* ---------- Mobile navigation ---------- */
.nav-toggle{
  display:none;
  place-items:center;
  width:2.5rem;height:2.5rem;
  border:none;background:transparent;
  border-radius:var(--radius-field,.5rem);
  color:var(--color-base-content);
  cursor:pointer;flex-shrink:0;
}
.nav-toggle:hover{background:color-mix(in oklab,var(--color-base-content) 6%,transparent)}
.nav-toggle svg{display:block;pointer-events:none}
.nav-toggle .icon-close{display:none}
.site-header.nav-open .nav-toggle .icon-menu{display:none}
.site-header.nav-open .nav-toggle .icon-close{display:block}

.nav-backdrop{
  display:none;position:fixed;inset:0;top:64px;z-index:47;
  background:rgba(0,0,0,.32);border:none;padding:0;cursor:pointer;
}
.site-header.nav-open .nav-backdrop{display:block}

@media(max-width:820px){
  .nav-toggle{display:grid}
  .nav-actions{margin-left:auto;min-width:0}
  .nav-toggle{margin-left:6px}
  .nav{gap:6px;min-width:0}
  .brand{min-width:0;flex-shrink:1}
  .brand svg{flex:none}
  .auth-area{gap:6px;min-width:0}
  .site-header nav{
    display:none;
    position:fixed;left:0;right:0;top:64px;bottom:0;z-index:48;
    background:color-mix(in oklab,var(--color-base-100) 96%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:8px 24px 32px;overflow-y:auto;
    border-top:1px solid color-mix(in oklab,var(--color-base-content) 12%,transparent);
  }
  .site-header.nav-open nav{display:block}
  .nav-links{
    display:flex!important;flex-direction:column;gap:0;
  }
  .nav-links li{border-bottom:1px solid color-mix(in oklab,var(--color-base-content) 12%,transparent)}
  .nav-links a{display:block;padding:14px 0;font-size:16px;font-weight:500}
}

/* ---------- Common layout ---------- */
nav{display:flex;align-items:center}
.nav-links{padding:0;margin:0;align-items:center}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.auth-area{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0}
.account-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--color-base-100);border:1px solid color-mix(in oklab,var(--color-base-content) 12%,transparent);
  border-radius:9999px;padding:5px 13px 5px 6px;font-size:13px;font-weight:600;
  color:color-mix(in oklab,var(--color-base-content) 82%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 10px rgba(0,0,0,.05);
  cursor:pointer;transition:border-color .15s;text-decoration:none;
}
.account-chip:hover{border-color:color-mix(in oklab,var(--color-base-content) 22%,transparent)}
.account-chip img{width:26px;height:26px;border-radius:50%}
.account-chip .credits{color:var(--color-primary);font-variant-numeric:tabular-nums}
.nav-actions .theme-toggle,
.nav-actions .auth-area .btn-sm{
  height:2rem;min-height:2rem;
}
.nav-actions .theme-toggle{
  width:2rem;min-width:2rem;
}
.nav-actions .auth-area .btn-ghost.btn-sm{
  padding-inline:.75rem;
}
@media(max-width:820px){
  .nav-actions .theme-toggle,
  .nav-actions .auth-area a.btn.btn-primary.btn-sm,
  .nav-actions .auth-area button.btn.btn-primary.btn-sm,
  .nav-toggle{
    width:2.5rem!important;height:2.5rem!important;min-width:2.5rem!important;min-height:2.5rem!important;
  }
  .nav-actions .auth-area a.btn.btn-primary.btn-sm,
  .nav-actions .auth-area button.btn.btn-primary.btn-sm{padding-inline:0!important}
  .nav-actions .auth-area .btn-ghost.btn-sm{
    width:auto!important;min-width:0!important;
    height:2.5rem!important;min-height:2.5rem!important;
    padding-inline:.75rem!important;
  }
}

.footer-badges{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:24px;padding-top:8px;
}
.footer-badges a{display:block;line-height:0}
.footer-badges img{height:36px;width:auto;display:block}

@media(max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .nav{padding-left:16px!important;padding-right:16px!important}
  .site-footer{padding-top:48px;padding-bottom:24px}
  .footer-grid{gap:28px;margin-bottom:32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

@media(max-width:480px){
  .brand span{display:none}
  .btn .btn-label{display:none}
  .auth-area .btn-ghost.btn-sm{display:none!important}
  .nav-actions{gap:6px}
  .nav-toggle{margin-left:4px}
}

/* ---------- Scrollable tables ---------- */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:16px 0;border:1px solid color-mix(in oklab,var(--color-base-content) 12%,transparent);
  border-radius:var(--radius-box,1rem);
}
.table-scroll table{margin:0;border:none;width:100%}
.table-scroll table th:first-child,
.table-scroll table td:first-child{
  position:sticky;left:0;z-index:1;
  background:var(--color-base-100);
  box-shadow:2px 0 4px color-mix(in oklab,var(--color-base-content) 6%,transparent);
}
.table-scroll table th:first-child{background:var(--color-base-200)}

/* Safe area for notched devices */
.site-header{
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
body{padding-bottom:env(safe-area-inset-bottom,0)}