/* Shared logged-in app shell — sidebar, rail, mobile tab bar, footer.
   IDENTICAL copy lives on sitestats.dev (/assets/css/app-shell.css) and health.sitestats.dev (/assets/css/app-shell.css).
   Edit both together. Tokens only (tokens.css) — no hex values in this file. */

/* dark-theme remap (manual toggle only; SiteStats app pages set data-theme="dark") */
:root[data-theme="dark"]{--bg:var(--stage-bg);--bg-elev:var(--stage-panel);--bg-sunk:var(--stage-sunk);--line:var(--stage-line);--line-strong:var(--stage-line-strong);--ink:var(--stage-ink);--ink-2:var(--stage-ink-3);--ink-3:var(--stage-ink-2);--ink-4:var(--stage-ink-4);--indigo-soft:var(--stage-indigo-soft);--cyan-soft:var(--stage-cyan-soft);--success-soft:var(--stage-success-soft);--warn-soft:var(--stage-warn-soft);--danger-soft:var(--stage-danger-soft);--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 4px 12px rgba(0,0,0,.5)}

/* layout */
.app-layout{display:flex;align-items:stretch;min-height:100vh}
.app-content{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.app-layout>.app-main{flex:1;min-width:0}

/* sidebar */
.app-sidebar{width:248px;flex:none;box-sizing:border-box;background:var(--bg-elev);border-right:1px solid var(--line);padding:var(--s-3);display:flex;flex-direction:column;align-items:stretch;gap:var(--s-4);position:sticky;top:0;height:100vh;font-family:var(--font-body);color:var(--ink)}
.app-sidebar .wordmark{font:700 1.375rem/1 var(--font-display);color:var(--ink);text-decoration:none;letter-spacing:var(--tracking-display);display:inline-flex;align-items:baseline;padding:6px 8px}
.app-sidebar .wordmark:hover{color:var(--ink)}
.app-sidebar .wordmark-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--cyan);margin-left:.1em;transform:translateY(-.05em)}
.app-sidebar>.eyebrow{display:block;font:500 var(--fs-caption)/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0;padding:0 8px;background:none;border:0;border-radius:0}

/* nav */
.app-nav{flex:1;min-height:0;overflow-y:auto}
.app-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.app-nav .eyebrow{display:block;font:500 var(--fs-caption)/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:var(--s-2) 0 var(--s-1);padding:0 12px;background:none;border:0;border-radius:0}
.app-nav li:first-child .eyebrow{margin-top:0}
.app-nav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;font:500 var(--fs-small)/1.2 var(--font-body);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast);cursor:pointer}
.app-nav-link:hover{background:var(--bg-sunk);color:var(--ink)}
.app-nav-link.is-active{background:var(--indigo-soft);color:var(--indigo)}
.app-nav-link.is-upgrade{color:var(--indigo)}
.app-nav-link::before,.app-tabbar a::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}

/* line icons (inline SVG masks; same set on both sites) */
[data-icon=home]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z'/></svg>")}
[data-icon=globe]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>")}
[data-icon=code]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/></svg>")}
[data-icon=pulse]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h4l2-6 4 12 2-6h6'/></svg>")}
[data-icon=plus]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v8M8 12h8'/></svg>")}
[data-icon=user]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>")}
[data-icon=bolt]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4 14h7l-1 8 9-12h-7z'/></svg>")}
[data-icon=shield]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/></svg>")}
[data-icon=book]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z'/><path d='M20 4h-6a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h7z'/></svg>")}
[data-icon=out]{--ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5'/><path d='M14 8l4 4-4 4M8 12h10'/></svg>")}

/* footer: avatar initial + email + plan pill + log out */
.app-sidebar-foot{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--s-1);padding-top:var(--s-2);border-top:1px solid var(--line)}
.app-user{display:flex;align-items:center;gap:var(--s-1);font:400 var(--fs-caption)/1.3 var(--font-body);color:var(--ink-3);padding:0 12px;min-width:0}
.app-user .avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);font:600 .8125rem/1 var(--font-body);flex:none;overflow:hidden}
.app-user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-user-plan{padding:0 12px 0 52px}
.plan-pill{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:var(--bg-sunk);color:var(--ink-3);font:600 .7rem/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.05em}
.plan-pill.is-paid{background:var(--indigo-soft);color:var(--indigo)}
.app-sidebar-foot form{margin:0}
.app-sidebar-foot .app-nav-link{width:100%;border:0;background:none;text-align:left}
.app-sidebar-foot .app-nav-link:hover{background:var(--bg-sunk)}

/* mobile tab bar */
.app-tabbar{display:none}

/* 64px rail */
@media (max-width:1023px){
  .app-sidebar{width:64px;padding:var(--s-2);gap:var(--s-3)}
  .app-nav-label,.app-nav .eyebrow,.app-sidebar-foot .app-user,.app-sidebar-foot .app-user-plan,.app-sidebar .wordmark-text,.app-sidebar>.eyebrow{display:none}
  .app-sidebar .wordmark{font-size:0;justify-content:center;padding:8px 0}
  .app-sidebar .wordmark-dot{width:10px;height:10px}
  .app-nav-link{justify-content:center;padding:0}
  .app-sidebar-foot{padding-top:var(--s-1)}
}
/* bottom tab bar */
@media (max-width:767px){
  .app-sidebar{display:none}
  .app-tabbar{display:flex;align-items:stretch;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;min-height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg-elev);border-top:1px solid var(--line);z-index:40;font-family:var(--font-body)}
  .app-tabbar a{flex:1;min-height:56px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);text-decoration:none;font-size:var(--fs-caption);font-weight:500}
  .app-tabbar a::before{width:20px;height:20px}
  .app-tabbar a.is-active{color:var(--indigo)}
}