/* Shared site navigation for the Modular × Prevvi client portal (all Worker pages).
   Brand tokens only: #007ABD header blue, #0E4D75 deep blue, #E3F1F9 soft, #E5E7EB line, #54595F dark, #7A7A7A body. */
:root { --sn-h: 56px; }
.sn-skip { position: absolute; left: 8px; top: -48px; z-index: 1001; background: #0E4D75; color: #fff; padding: 10px 14px; border-radius: 8px; font: 600 13px/1 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif; text-decoration: none; }
.sn-skip:focus { top: 8px; outline: 3px solid #6EC1E4; outline-offset: 2px; }

.sn { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #E5E7EB; box-shadow: 0 1px 4px rgba(14,77,117,.06); font-family: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif; }
.sn-inner { max-width: 1240px; margin: 0 auto; height: var(--sn-h); padding: 0 24px; display: flex; align-items: center; gap: 16px; }
.sn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #0E4D75; flex-shrink: 0; min-height: 44px; border-radius: 8px; }
.sn-brand img { display: block; width: auto; }
.sn-brand .sn-lm { height: 30px; }
.sn-brand .sn-lp { height: 26px; }
.sn-brand .sn-x { color: #7A7A7A; font-weight: 600; font-size: 14px; }
.sn-brand .sn-lbl { font-size: 11.5px; font-weight: 600; color: #7A7A7A; white-space: nowrap; margin-left: 4px; }
.sn-brand:focus-visible { outline: 3px solid #6EC1E4; outline-offset: 2px; }

.sn-tabs { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.sn-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #54595F; text-decoration: none; white-space: nowrap; position: relative; }
.sn-tabs a:hover { background: #F5F8FA; color: #007ABD; }
.sn-tabs a:focus-visible { outline: 3px solid #6EC1E4; outline-offset: 1px; }
.sn-tabs a[aria-current="page"] { background: #E3F1F9; color: #0E4D75; }
.sn-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: #007ABD; }
.sn-tabs a.sn-new::before { content: "NEW"; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #007ABD; border-radius: 4px; padding: 2px 5px; margin-right: 7px; line-height: 1; }

.sn-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid #E5E7EB; background: #fff; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; color: #0E4D75; padding: 0; }
.sn-burger:hover { background: #F5F8FA; }
.sn-burger:focus-visible { outline: 3px solid #6EC1E4; outline-offset: 2px; }
.sn-burger svg { width: 22px; height: 22px; display: block; }
.sn-burger .sn-ic-x { display: none; }
.sn-burger[aria-expanded="true"] .sn-ic-menu { display: none; }
.sn-burger[aria-expanded="true"] .sn-ic-x { display: block; }

/* drawer */
.sn-backdrop { position: fixed; inset: 0; background: rgba(14,77,117,.38); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
.sn-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #fff; z-index: 1101; box-shadow: -8px 0 28px rgba(14,77,117,.18); transform: translateX(104%); transition: transform .22s ease-out; display: flex; flex-direction: column; font-family: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif; padding-bottom: env(safe-area-inset-bottom); }
.sn-open .sn-backdrop { opacity: 1; pointer-events: auto; }
.sn-open .sn-drawer { transform: none; }
.sn-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; border-bottom: 1px solid #E5E7EB; min-height: var(--sn-h); }
.sn-drawer-head .sn-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7A7A7A; }
.sn-close { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: #0E4D75; display: flex; align-items: center; justify-content: center; }
.sn-close:hover { background: #F5F8FA; }
.sn-close:focus-visible { outline: 3px solid #6EC1E4; outline-offset: 2px; }
.sn-close svg { width: 22px; height: 22px; }
.sn-drawer nav { overflow-y: auto; padding: 8px 0 16px; }
.sn-drawer .sn-grp { padding: 14px 20px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #7A7A7A; }
.sn-drawer a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 17px; border-left: 3px solid transparent; font-size: 15px; font-weight: 600; color: #54595F; text-decoration: none; }
.sn-drawer a:hover { background: #F5F8FA; color: #007ABD; }
.sn-drawer a:focus-visible { outline: 3px solid #6EC1E4; outline-offset: -3px; }
.sn-drawer a[aria-current="page"] { border-left-color: #007ABD; background: #E3F1F9; color: #0E4D75; }
.sn-drawer a.sn-sub { font-size: 14px; font-weight: 500; min-height: 44px; color: #54595F; }
.sn-drawer a.sn-new::after { content: "NEW"; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #007ABD; border-radius: 4px; padding: 3px 6px; line-height: 1; }
.sn-drawer .sn-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid #E5E7EB; font-size: 11.5px; color: #7A7A7A; }

body.sn-locked { overflow: hidden; }

@media (max-width: 1100px) {
  .sn-tabs { display: none; }
  .sn-burger { display: inline-flex; }
}
@media (max-width: 700px) {
  :root { --sn-h: 52px; }
  .sn-inner { padding: 0 14px; gap: 10px; }
  .sn-brand .sn-lm { height: 26px; }
  .sn-brand .sn-lp { height: 22px; }
  .sn-brand .sn-lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-backdrop, .sn-drawer { transition: none; }
}
@media print { .sn, .sn-drawer, .sn-backdrop, .sn-skip { display: none !important; } }