/* <mk-navbar>: the bar along the top of every page. The site's icon and name, its menus (each a button and a panel, as
   the dashboard's apps menu: navbar.js opens them), the apps, and the one thing to do; on a phone, one Menu with all of
   it. At the top of a page it has no glass, the page's own; once the page moves under it, dark glass by default, for a
   page that opens dark; `is-light` (variant="light", or a page's script as the page turns light under it) makes it
   light, its panels with it. Each site sets its look with the --mk-* custom properties (--mk-menu-* for the panels);
   none of them is needed. */

.mk-nav, .mk-nav *{box-sizing:border-box}
.mk-nav{
  position:var(--mk-nav-position, sticky); top:0; left:0; right:0; z-index:50;
  height:var(--mk-nav-h, 48px);
  color:var(--mk-nav-fg, #f5f5f7);
  background:var(--mk-nav-bg, rgba(8,8,11,.66));
  -webkit-backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  border-bottom:1px solid var(--mk-nav-line, rgba(255,255,255,.08));
  font-family:var(--mk-font, inherit);
  transition:background .4s var(--mk-ease, ease), border-color .4s var(--mk-ease, ease), color .4s var(--mk-ease, ease);
}
.mk-nav.is-light{
  color:var(--mk-nav-light-fg, #1d1d1f);
  background:var(--mk-nav-light-bg, rgba(250,250,252,.74));
  border-bottom-color:var(--mk-nav-light-line, rgba(0,0,0,.08));
}
/* At the top of the page the bar is the page's own, no glass and no line (the owner, 1 November 2026: "the pages don't
   need the specific navigation shape when they are on top of scroll they can just blend into the page"); its glass once
   the page moves under it (navbar.js, is-scrolled). A filter that blurs nothing keeps the bar its panels' containing
   block. */
.mk-nav:not(.is-scrolled){
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:saturate(100%) blur(0px); backdrop-filter:saturate(100%) blur(0px);
}
.mk-nav-inner{
  max-width:var(--mk-maxw, 1120px); height:100%; margin:0 auto;
  padding:0 var(--mk-pad, max(22px, env(safe-area-inset-left)));
  display:flex; align-items:center; gap:var(--mk-nav-gap, 20px);
  font-size:13px; letter-spacing:var(--mk-nav-tracking, -.005em);
}

/* Two classes deep, so a page's own `a` rules (a policy's underlined links)
   never reach in. */
.mk-nav .mk-nav-brand{
  display:flex; align-items:center; gap:8px; margin-right:auto; flex:none;
  color:inherit; text-decoration:none;
  font-weight:650; font-size:15px; letter-spacing:-.01em;
}
.mk-nav .mk-nav-mark{width:22px; height:22px; display:block; border-radius:var(--mk-nav-mark-r, 0)}

.mk-nav .mk-nav-links{display:flex; gap:26px; opacity:.82}
.mk-nav.is-light .mk-nav-links{opacity:.9}
.mk-nav .mk-nav-links a{color:inherit; text-decoration:none; transition:opacity .2s}
.mk-nav .mk-nav-links a:hover{opacity:.6}
.mk-nav .mk-nav-links a[aria-current="page"]{opacity:1; font-weight:650}

/* The one thing to do, in the site's colour. With --mk-lip it is the apps'
   toy button, a lip under it that it sinks onto; without, a flat pill. */
.mk-nav .mk-nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--mk-cta-pad, 7px 15px); border-radius:999px;
  font-size:13px; font-weight:var(--mk-cta-weight, 600); letter-spacing:var(--mk-cta-tracking, -.01em);
  color:var(--mk-cta-fg, #fff); text-decoration:none;
  background:var(--mk-accent, #2f5fe0);
  box-shadow:0 var(--mk-lip, 0px) 0 var(--mk-accent-deep, #2049c2);
  transition:transform .14s var(--mk-ease, ease), box-shadow .14s var(--mk-ease, ease), background .25s var(--mk-ease, ease);
}
.mk-nav .mk-nav-cta:hover{
  background:var(--mk-cta-hover, var(--mk-accent-deep, #2049c2));
  transform:translateY(calc(var(--mk-lip, 0px) / 2));
  box-shadow:0 calc(var(--mk-lip, 0px) / 2) 0 var(--mk-accent-deep, #2049c2);
}
.mk-nav .mk-nav-cta:active{
  transform:translateY(var(--mk-lip, 0px)) scale(var(--mk-cta-press, .97));
  box-shadow:0 0 0 var(--mk-accent-deep, #2049c2);
}

/* MARK: The menus' buttons, and the round ones (the apps, Menu) */

.mk-nav .mk-nav-menus{display:flex; align-items:center; gap:2px}
.mk-nav .mk-nav-menu{position:static}
.mk-nav .mk-nav-trigger, .mk-nav .mk-nav-icon{
  appearance:none; border:0; margin:0; background:transparent; color:inherit; font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent;
  transition:background .18s var(--mk-ease, ease), opacity .18s var(--mk-ease, ease);
}
.mk-nav .mk-nav-trigger{gap:4px; height:32px; padding:0 9px 0 12px; border-radius:999px; font-size:13px; font-weight:560; opacity:.86}
.mk-nav .mk-nav-trigger[data-current]{opacity:1; font-weight:680}
.mk-nav .mk-nav-icon{justify-content:center; width:34px; height:34px; border-radius:50%; opacity:.86}
.mk-nav .mk-nav-trigger:hover, .mk-nav .mk-nav-icon:hover,
.mk-nav [aria-expanded="true"]{opacity:1; background:var(--mk-nav-press, rgba(255,255,255,.12))}
.mk-nav.is-light .mk-nav-trigger:hover, .mk-nav.is-light .mk-nav-icon:hover,
.mk-nav.is-light [aria-expanded="true"]{background:var(--mk-nav-light-press, rgba(0,0,0,.06))}
.mk-nav .mk-nav-trigger:focus-visible, .mk-nav .mk-nav-icon:focus-visible, .mk-nav .mk-nav-brand:focus-visible,
.mk-nav .mk-nav-cta:focus-visible{outline:2px solid var(--mk-accent, #2f5fe0); outline-offset:2px}
.mk-nav .mk-ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.mk-nav .mk-nav-chev{width:13px; height:13px; opacity:.7; transition:transform .2s var(--mk-ease, ease)}
.mk-nav [aria-expanded="true"] .mk-nav-chev{transform:rotate(180deg)}
.mk-nav .mk-nav-burger{display:none}
.mk-nav .mk-nav-burger .mk-burger-shut, .mk-nav .mk-nav-burger[aria-expanded="true"] .mk-burger-open{display:none}
.mk-nav .mk-nav-burger[aria-expanded="true"] .mk-burger-shut{display:block}

/* MARK: A panel: the dashboard's apps menu, in the site's colours. Dark glass under a dark bar, light under a light one. */

.mk-nav{
  --mk-menu-bg-d:var(--mk-menu-bg, #18181c);
  --mk-menu-fg-d:var(--mk-menu-fg, #f5f5f7);
  --mk-menu-muted-d:var(--mk-menu-muted, rgba(245,245,247,.6));
  --mk-menu-line-d:var(--mk-menu-line, rgba(255,255,255,.1));
  --mk-menu-hover-d:var(--mk-menu-hover, rgba(255,255,255,.08));
}
.mk-nav.is-light{
  --mk-menu-bg-d:var(--mk-menu-light-bg, #fff);
  --mk-menu-fg-d:var(--mk-menu-light-fg, #1d1d1f);
  --mk-menu-muted-d:var(--mk-menu-light-muted, #6e6e73);
  --mk-menu-line-d:var(--mk-menu-light-line, rgba(0,0,0,.08));
  --mk-menu-hover-d:var(--mk-menu-light-hover, rgba(0,0,0,.05));
}
.mk-nav .mk-menu{
  position:fixed; z-index:60; top:calc(var(--mk-nav-h, 48px) + 6px); left:8px;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 280px); gap:8px;
  max-width:calc(100vw - 16px); max-height:calc(100vh - var(--mk-nav-h, 48px) - 20px); overflow:auto; padding:8px;
  border-radius:var(--mk-menu-r, 16px); background:var(--mk-menu-bg-d); color:var(--mk-menu-fg-d);
  box-shadow:0 0 0 1px var(--mk-menu-line-d), 0 18px 48px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  font-size:14px; letter-spacing:normal; text-align:left;
  animation:mk-menu-in .16s var(--mk-ease, ease) both;
}
.mk-nav .mk-menu[hidden]{display:none}
@keyframes mk-menu-in{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.mk-nav .mk-menu-col{display:flex; flex-direction:column; gap:2px; min-width:0}
.mk-nav .mk-menu-col + .mk-menu-col{padding-left:8px; border-left:1px solid var(--mk-menu-line-d)}
.mk-nav .mk-menu-head{margin:6px 10px 6px; font-size:12px; font-weight:500; color:var(--mk-menu-muted-d)}
.mk-nav .mk-menu-item{
  display:flex; align-items:center; gap:12px; padding:7px 10px; border-radius:10px;
  color:inherit; text-decoration:none; outline:none;
}
.mk-nav .mk-menu-item:hover, .mk-nav .mk-menu-item:focus-visible, .mk-nav .mk-menu-item[aria-current]{background:var(--mk-menu-hover-d)}
.mk-nav .mk-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--mk-accent, #2f5fe0)}
.mk-nav .mk-menu-icon{
  flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  color:var(--c, var(--mk-accent, #2f5fe0)); background:color-mix(in srgb, var(--c, var(--mk-accent, #2f5fe0)) 18%, transparent);
}
.mk-nav .mk-menu-icon .mk-ic{width:18px; height:18px}
/* a badge in its colour, as the sign on the bus; an item without a mark is its words alone */
.mk-nav .mk-menu-badge{background:var(--c, var(--mk-accent, #2f5fe0)); color:#fff; font-size:12px; font-weight:800; letter-spacing:-.01em}
.mk-nav .mk-menu-item.is-plain{padding:8px 10px}
.mk-nav .mk-menu-app{flex:none; width:32px; height:32px; border-radius:22.5%; box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.mk-nav .mk-menu-text{display:flex; flex-direction:column; min-width:0}
.mk-nav .mk-menu-text b{font-size:14px; font-weight:650; line-height:1.25}
.mk-nav .mk-menu-text span{font-size:12px; line-height:1.3; color:var(--mk-menu-muted-d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mk-nav .mk-menu-out{width:12px; height:12px; margin-left:auto; opacity:.55}
.mk-nav .mk-menu-apps{grid-auto-columns:minmax(260px, 300px)}

/* MARK: A phone: the menus and the apps in one sheet, under the bar */

.mk-nav .mk-menu-sheet{left:8px; right:8px; display:block; max-height:calc(100dvh - var(--mk-nav-h, 48px) - 16px); padding:6px 8px 10px}
.mk-nav .mk-menu-sheet[hidden]{display:none}
.mk-nav .mk-sheet-group + .mk-sheet-group{margin-top:6px; padding-top:6px; border-top:1px solid var(--mk-menu-line-d)}
.mk-nav .mk-sheet-title{margin:8px 10px 2px; font-size:13px; font-weight:700; color:var(--mk-menu-fg-d)}
.mk-nav .mk-sheet-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 8px}
.mk-nav .mk-sheet-cols .mk-menu-col + .mk-menu-col{padding-left:0; border-left:0}

@media (max-width:900px){
  .mk-nav .mk-nav-links, .mk-nav .mk-nav-menus, .mk-nav .mk-nav-apps{display:none}
  .mk-nav .mk-nav-burger{display:inline-flex}
  .mk-nav .mk-nav-inner{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .mk-nav, .mk-nav .mk-nav-cta, .mk-nav .mk-nav-trigger, .mk-nav .mk-nav-icon, .mk-nav .mk-nav-chev{transition:none}
  .mk-nav .mk-menu{animation:none}
}