/* ============================================================
   Compact header + Start menu.

   When the menubar can't fit its items (phones, small tablets),
   nav.js adds .vw-compact to the window: the menubar hides, the
   title bar gets a Start-orb "Menu" button, and the pages open
   in a Vista Start menu instead of a sideways scroller nobody
   knows is there. Self-contained so the older pages can load it.
   ============================================================ */

/* ---------- the Start button (only in compact mode) ---------- */
.vw-start {
  display: none; position: relative; z-index: 2; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 4px; margin-right: 2px; border-radius: 999px; cursor: pointer;
  font: 600 15px 'Segoe UI', 'Source Sans 3', system-ui, sans-serif; color: #04324e;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(214,238,250,0.92) 50%, rgba(178,222,244,0.92) 51%, rgba(208,236,250,0.95));
  border: 1px solid rgba(10,110,156,0.35);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(10,60,100,0.18);
}
.vw-start .orb {
  width: 28px; height: 28px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: radial-gradient(ellipse 130% 120% at 50% 135%, #eaf7ff 0%, #b3e5ff 22%, #4ec0e0 55%, #1d8fb8 88%, #0a6e9c 105%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -2px 3px rgba(4,60,100,0.35), 0 0 0 1.5px rgba(255,255,255,0.9), 0 0 10px rgba(78,192,224,0.6);
}
.vw-start .orb::before { content: ""; position: absolute; top: 2px; left: 18%; right: 18%; height: 45%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15)); }
/* three bars, drawn, so it reads as "menu" without borrowing anyone's logo */
.vw-start .orb::after { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 4px 0 #fff, 0 8px 0 #fff; filter: drop-shadow(0 1px 0 rgba(4,50,80,0.5)); }
.vw-start[aria-expanded="true"] { background: linear-gradient(180deg, rgba(78,192,224,0.5), rgba(29,143,184,0.35)); border-color: rgba(10,110,156,0.55); }
.vw-start[aria-expanded="true"] .orb::after { top: 13px; height: 2px; box-shadow: none; transform: rotate(45deg); }
.vw-start[aria-expanded="true"] .orb .x { position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(-45deg); }

/* ---------- compact window ---------- */
.vw-window.vw-compact .vw-menubar,
.vw-window.vw-compact .vw-scroll-hint,
.vw-window.vw-compact .vw-controls { display: none !important; }
.vw-window.vw-compact .vw-start { display: inline-flex; }
.vw-window.vw-compact .vw-titlebar { height: 48px !important; padding: 0 6px 0 14px; }
.vw-window.vw-compact .vw-title { font-size: 14.5px !important; overflow: hidden; text-overflow: ellipsis; }
.vw-window.vw-compact .vw-titleblock { min-width: 0; flex: 1; min-height: 48px; }

/* ---------- the Start menu ---------- */
.vw-startmenu {
  position: fixed; z-index: 980; left: 12px; right: 12px; top: 70px;
  max-width: 560px; margin: 0 auto; max-height: calc(100dvh - 86px); overflow: auto; overscroll-behavior: contain;
  display: none; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.85);
  background: rgba(10, 40, 62, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 60px rgba(4, 20, 35, 0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  font-family: 'Segoe UI', 'Source Sans 3', system-ui, sans-serif;
  transform-origin: 100% 0;
}
.vw-startmenu.open { display: grid; animation: vw-sm-in .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes vw-sm-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.vw-sm-pages { list-style: none; margin: 8px 0 8px 8px; padding: 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10,60,100,0.15); }
.vw-sm-pages a {
  display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; align-items: center; min-height: 52px; padding: 6px 10px;
  border-radius: 4px; border: 1px solid transparent; text-decoration: none; color: #0b2538;
}
.vw-sm-pages a:hover, .vw-sm-pages a:focus-visible { background: linear-gradient(180deg, #e8f5fd, #cfe9f8); border-color: #9fd0ec; outline: none; }
.vw-sm-pages a.current { background: linear-gradient(180deg, rgba(78,192,224,0.3), rgba(29,143,184,0.22)); border-color: rgba(10,110,156,0.4); }
.vw-sm-pages .ic { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; }
.vw-sm-pages .ic img { width: 32px; height: 32px; image-rendering: auto; box-shadow: none; border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
.vw-sm-pages .ic span.mi { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.25); }
.vw-sm-pages b { font-weight: 600; font-size: 15.5px; line-height: 1.15; }
.vw-sm-pages small { font-size: 13px; color: #4f6b7e; line-height: 1.25; }
.vw-sm-side { padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.vw-sm-side .who { font-weight: 700; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.vw-sm-side .role { font-size: 13.5px; opacity: .85; margin-bottom: 10px; }
.vw-sm-side a, .vw-sm-side button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px; cursor: pointer;
  font: 600 15px 'Segoe UI', 'Source Sans 3', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); border: 1px solid transparent;
}
.vw-sm-side a:hover, .vw-sm-side button:hover, .vw-sm-side a:focus-visible, .vw-sm-side button:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)); border-color: rgba(255,255,255,0.35);
}
.vw-sm-side hr { border: 0; border-top: 1px solid rgba(255,255,255,0.18); margin: 6px 0; }
.vw-sm-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px 10px; font-size: 12.5px; color: rgba(255,255,255,0.75); }
.vw-sm-scrim { position: fixed; inset: 0; z-index: 979; background: rgba(4, 20, 35, 0.25); display: none; }
.vw-sm-scrim.open { display: block; }
@media (max-width: 460px) {
  .vw-startmenu { grid-template-columns: 1fr; }
  .vw-sm-pages { margin: 8px 8px 0; }
  .vw-sm-side { padding: 10px 8px 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .vw-sm-side .who, .vw-sm-side .role, .vw-sm-side hr { grid-column: 1 / -1; }
  .vw-sm-side .role { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .vw-startmenu.open { animation: none; } }
@media print { .vw-startmenu, .vw-sm-scrim { display: none !important; } }