/*
 * Reset, typography and the application layout (graphite sidebar, top bar, content,
 * mobile drawer and bottom navigation). Values come from tokens.css only.
 */

/* -- Reset ------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--color-text);
  background:var(--color-bg);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--line-body);
  font-weight:var(--weight-regular);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;font-size:var(--text-control);line-height:var(--line-control)}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
[hidden]{display:none !important}
[x-cloak]{display:none !important}

/* -- Typography -------------------------------------------------------------- */

h1,h2,h3,h4{margin:0;color:var(--color-text)}
h1{font-size:var(--heading-xl);line-height:var(--line-tight);letter-spacing:var(--tracking-heading-xl);font-weight:var(--weight-bold)}
h2{font-size:var(--heading-lg);line-height:1.3;letter-spacing:var(--tracking-heading-lg);font-weight:var(--weight-semibold)}
h3{font-size:var(--heading-md);line-height:var(--line-snug);font-weight:var(--weight-semibold)}
h4{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
p{margin:0}
small{font-size:var(--text-xs);line-height:1.5}
.muted{color:var(--color-text-muted)}
.sub{font-size:var(--text-control);line-height:1.65;color:var(--color-text-muted);margin:0}
.eyebrow{font-size:var(--text-xs);line-height:1.5;letter-spacing:var(--tracking-eyebrow);color:var(--color-text-muted);font-weight:var(--weight-medium);text-transform:uppercase;margin-bottom:var(--space-2)}
.tabular{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* -- Shell ------------------------------------------------------------------- */

.shell{display:flex;min-height:100vh}
.main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-width:0}
.content{padding:var(--content-pad-y) var(--content-pad-x) 60px;max-width:var(--content-max);margin:auto}
.stack{display:grid;gap:var(--space-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

.titleline{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.titleline h1{margin-bottom:var(--space-2)}
.titleline>div{min-width:0}

/* -- Graphite sidebar -------------------------------------------------------- */

.sidebar{
  position:fixed;inset:0 auto 0 0;z-index:var(--z-sidebar);
  width:var(--sidebar-width);
  display:flex;flex-direction:column;
  padding:var(--space-7) var(--space-4) var(--space-4);
  background:var(--nav-bg);color:#f5f6f7;border-right:1px solid var(--nav-border);
  overflow-y:auto;scrollbar-width:thin;
}
.sidebar .logo{width:166px;color:var(--nav-text-active)}
.brand-link{display:block;line-height:0;text-decoration:none}
.nav{display:grid;gap:3px;margin-top:27px}
.nav__group{font-size:var(--text-xs);line-height:1.5;text-transform:uppercase;letter-spacing:.9px;color:var(--nav-group);padding:19px 14px 5px;font-weight:var(--weight-medium)}
.nav__group:first-child{padding-top:0}
.nav__link{
  display:flex;align-items:center;gap:13px;min-height:42px;
  padding:var(--space-2-5) 15px;border-radius:var(--radius-md);
  color:var(--nav-text);text-decoration:none;
  font-size:var(--text-control);line-height:var(--line-snug);font-weight:var(--weight-medium);
  transition:background var(--duration-fast),color var(--duration-fast);
}
.nav__link:hover{background:var(--nav-hover);color:var(--nav-text-active)}
.nav__link[aria-current="page"]{background:var(--nav-active);color:var(--nav-text-active);font-weight:var(--weight-semibold)}
.nav__link .icon{width:19px;height:19px;flex-shrink:0}
.nav__more{margin-top:18px;border-top:1px solid #3a3f46;padding-top:var(--space-3)}
.nav__more summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-size:var(--text-xs);color:#c7ccd3;padding:var(--space-2-5) 15px;border-radius:var(--radius-md)}
.nav__more summary::-webkit-details-marker{display:none}
.nav__more summary::after{content:"+"}
.nav__more[open] summary{margin-bottom:5px}
.nav__more[open] summary::after{content:"−"}
.nav__more summary:hover{color:var(--nav-text-active)}
.nav__count{margin-left:auto;background:var(--nav-count);color:var(--nav-text-active);padding:1px 7px;border-radius:var(--radius-xs);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.sidebar__bottom{margin-top:auto;padding-top:var(--space-4)}
.sidebar__demo{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1px;color:#787f8a;margin:var(--space-5) var(--space-3)}
.company{display:flex;gap:var(--space-2-5);align-items:center;border-top:1px solid var(--nav-divider);padding-top:var(--space-4);font-size:var(--text-sm);line-height:1.55;color:#e8eaee;min-width:0}
.company__name{min-width:0;overflow-wrap:anywhere}
.company__role{font-size:var(--text-xs);color:var(--nav-muted)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#eceef1;font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.sidebar .avatar{background:var(--nav-avatar);color:#e8eaee}
.drawer-close,.drawer-backdrop,.mobile-header,.bottom-nav{display:none}

/* -- Top bar ----------------------------------------------------------------- */

.topbar{height:var(--topbar-height);border-bottom:1px solid var(--color-line);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 var(--content-pad-x)}
.crumb{font-size:var(--text-xs);color:var(--color-text-subtle);min-width:0}
.crumb b{font-weight:var(--weight-medium);color:#292c31}
.crumb__sep{margin:0 var(--space-2)}
.topbar__actions{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);margin-left:auto}
.topbar__meta{color:var(--color-text-muted)}

/* -- Compact desktop --------------------------------------------------------- */

@media (max-width:1150px){
  .topbar__meta{display:none}
}

/* -- Mobile: drawer + bottom navigation -------------------------------------- */

@media (max-width:900px){
  .main{margin-left:0;width:100%}
  .topbar{height:calc(var(--topbar-height) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 15px 0;gap:9px}
  .crumb,.topbar__meta,.topbar .topbar__desktop-only{display:none}
  .mobile-header{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex-shrink:0}
  .mobile-header .logo{width:119px;color:var(--color-ink)}
  .menu-toggle{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);padding:7px;border:0;border-radius:7px;background:transparent}
  .menu-toggle .icon{width:22px;height:22px}
  .topbar__actions{gap:5px}

  .content{
    padding:var(--content-pad-y) max(var(--content-pad-x),env(safe-area-inset-right)) calc(var(--mobile-nav-height) + 76px + env(safe-area-inset-bottom)) max(var(--content-pad-x),env(safe-area-inset-left));
  }
  .titleline{flex-wrap:wrap;align-items:flex-start;margin-bottom:22px}

  .sidebar{
    width:min(310px,86vw);height:100dvh;z-index:var(--z-drawer);
    padding:calc(30px + env(safe-area-inset-top)) 21px max(22px,env(safe-area-inset-bottom));
    transform:translateX(-101%);visibility:hidden;
    transition:transform var(--duration-drawer) ease,visibility var(--duration-drawer);
    box-shadow:var(--shadow-drawer);
  }
  .sidebar.is-open{transform:translateX(0);visibility:visible}
  .sidebar .nav{margin-top:25px}
  .sidebar .nav__link{min-height:var(--touch-target)}
  .sidebar .nav__link .icon{width:20px;height:20px}
  .drawer-close{display:grid;place-items:center;position:absolute;right:16px;top:calc(25px + env(safe-area-inset-top));width:var(--touch-target);height:var(--touch-target);padding:0;border:0;border-radius:var(--radius-md);background:#2b2e33;color:#dce0e6}
  .drawer-backdrop{display:block;position:fixed;inset:0;width:100%;height:100dvh;border:0;border-radius:0;padding:0;background:#0a0d1480;backdrop-filter:blur(3px);z-index:var(--z-drawer-backdrop);cursor:default}
  .drawer-backdrop[hidden]{display:none}

  .bottom-nav{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;inset:auto 0 0;z-index:var(--z-bottom-nav);
    height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
    background:#fffffffa;border-top:1px solid #e3e5e8;box-shadow:var(--shadow-bottom-nav);backdrop-filter:blur(16px);
  }
  .bottom-nav__link{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
    min-width:0;min-height:54px;padding:4px 1px;border:0;border-radius:var(--space-2-5);background:none;
    color:#777d86;font-size:var(--text-2xs);line-height:1.3;font-weight:var(--weight-medium);white-space:nowrap;text-decoration:none;
  }
  .bottom-nav__link[aria-current="page"]{color:var(--color-ink);background:var(--color-chip);font-weight:var(--weight-bold)}
  .bottom-nav__link:focus-visible{outline-offset:-3px}
  .bottom-nav__link .icon{width:22px;height:22px}
  .drawer-open .bottom-nav{visibility:hidden;pointer-events:none}
}

@media (max-width:365px){
  .content{padding-left:12px;padding-right:12px}
  .bottom-nav__link{font-size:9px}
}

/* -- Auth layout: sign-in, sign-up, codes, two-factor --------------------- */
.auth{background:var(--color-bg)}
.auth__main{min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-4)}
.auth__brand{color:var(--color-ink);display:block;width:132px}
.auth__card{width:100%;max-width:420px;display:grid;gap:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);padding:var(--space-7) var(--space-6)}
.auth__card h1{font-size:var(--heading-lg);margin:0}
.auth__footer{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;display:grid;gap:var(--space-2)}
.auth__footer a{color:var(--color-text-strong)}
.auth__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.auth__qr{width:200px;height:200px;justify-self:center;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.auth__secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-sm);word-break:break-all;background:var(--color-surface-muted);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}
.auth__codes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-sm)}
@media (max-width:899px){.auth__card{padding:var(--space-6) var(--space-5)}}
a.company{text-decoration:none}