/* The signed-in header: one bar with the views, Pets, Friends, notifications, Add flights and the account. Shared by the
   flights app (/app) and the pet pages (/app/pets), with app.css (.nav, .logo, .navr, .avatar, .iconbtn, .btn). The pet
   themes never reach it: it uses only the site's own tokens. */
.v2nav .wrap{gap:18px}
.v2tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.v2tabs::-webkit-scrollbar{display:none}
.v2tabs a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:8px;font-size:14px;font-weight:500;white-space:nowrap}
.v2tabs a:hover{color:var(--fg)}
.v2tabs .v2year{color:var(--fg);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.v2tabs .v2year em{font-style:normal;font-size:10px;background:linear-gradient(90deg,#FF9F0A,#FF6B3D);color:#fff;border-radius:999px;padding:1px 6px;font-weight:800}
.v2tabs a[aria-current="page"]{color:var(--fg);background:var(--fill);font-weight:600}
.v2friends{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted)}
.v2friends[aria-current="page"]{background:var(--fill);color:var(--fg)}
.v2friends svg{width:20px;height:20px}
.v2pets{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted)}.v2pets:hover{color:var(--fg);background:var(--fill)}.v2pets svg{width:18px;height:18px}
.v2pets[aria-current="page"]{background:var(--fill);color:var(--accent)}
@media (max-width:420px){.v2pets{display:none}}
.v2nav #addTop{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.v2nav #addTop svg{width:12px;height:12px}
@media (max-width:720px){
  .v2nav .wrap{flex-wrap:wrap;height:auto;row-gap:0;padding-top:6px}
  .v2nav .logo{order:1}
  .v2nav .navr{order:2;margin-left:auto;gap:6px}
  .v2tabs{order:3;flex:1 0 100%;padding:2px 0 6px}
  .v2tabs a{padding:6px 10px;font-size:13.5px}
  .v2nav #addTop{display:none}
  .v2nav #installBtn{display:none}
}
@media (max-width:380px){.v2tabs a{padding:6px 8px}}

/* the section a page belongs to, next to the logo ("Pets"), and a slim bar for that section's own links */
.navsec{font:500 14px/1.2 var(--f,Inter,sans-serif);letter-spacing:0;color:var(--muted);border-left:1px solid var(--line);padding-left:9px;margin-left:3px}
.secbar{border-bottom:1px solid var(--line-soft);background:var(--bg)}
.secbar .wrap{display:flex;align-items:center;gap:6px;min-height:44px;overflow-x:auto;scrollbar-width:none}
.secbar .wrap::-webkit-scrollbar{display:none}
.secbar .secname{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--f,Inter,sans-serif);color:var(--fg);margin-right:8px;white-space:nowrap}
.secbar .secname svg{width:16px;height:16px;color:var(--accent)}
.secbar a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;font-size:13.5px;white-space:nowrap}
.secbar a:hover{color:var(--fg)}
.secbar a[aria-current="page"]{color:var(--fg);background:var(--fill);font-weight:600}

/* account menu (the avatar), used where the app's settings panel isn't on the page */
.acct{position:relative}
.acctmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--card);color:var(--fg);border:1px solid var(--line-soft);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.16);padding:6px;z-index:60}
.acctmenu .acct-who{padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;font-size:13px;color:var(--muted);line-height:1.35}
.acctmenu .acct-who b{display:block;color:var(--fg);font-size:14px}
.acctmenu a,.acctmenu button{display:flex;width:100%;align-items:center;gap:8px;padding:9px 10px;border:0;background:none;border-radius:9px;color:var(--fg);font:500 14px var(--f,Inter,sans-serif);text-decoration:none;cursor:pointer;text-align:left;min-height:40px}
.acctmenu a:hover,.acctmenu button:hover,.acctmenu a:focus-visible,.acctmenu button:focus-visible{background:var(--fill);outline:none}