/* The signed-in app: one nav on every page, one primary action per screen. */
.appnav{display:flex;gap:4px;margin:-14px 0 22px;padding:0;list-style:none;border-bottom:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch}
.appnav li{margin:0;padding:0;border:0;display:block;flex:0 0 auto}
.appnav li:last-child{margin-left:auto}
.appnav a{display:block;font:500 14px var(--sans);color:var(--ink-soft);text-decoration:none;padding:10px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.appnav a.on{color:var(--ink);border-bottom-color:var(--green)}
.appnav a.signout{color:var(--muted)}
.who{font-size:13px;color:var(--muted);margin:0 0 6px}
.crumbs{display:flex;align-items:center;gap:8px;font:400 13px var(--sans);color:var(--muted);margin:-12px 0 18px}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.crumbs b{font-weight:500;color:var(--ink-soft)}
.crumbs span{color:var(--rule)}
@media (pointer:coarse){ .crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0} }

/* Desktop: the nav sits in the header row, pages use the width. */
@media (min-width:1024px){
  main.app{max-width:1180px}
  main.app header.top{margin-bottom:28px}
  main.app .appnav{margin:-8px 0 26px;border-bottom:1px solid var(--rule)}
  .cols{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px;align-items:start}
  .cols>*{min-width:0}
  .cols .side{position:sticky;top:24px}
  .cols.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cols.threes{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}