/* Site v2 header and footer for the older pages in ../site.
   serve.py adds this file and site.js (data-chrome="legacy") to every page it serves from there.
   Every rule is scoped to .v2c so the older page's own styles are left alone.
   The old shell header (#hd), its closing CTA band and its footer are hidden, not removed,
   so shell.js keeps working. */
#hd, .hd, body > .cta-sec[data-tail], body > .ft[data-tail] { display: none !important; }

.v2c {
  --v-bg: #04070D; --v-bg-2: #080D18; --v-tx: #F5F7FA; --v-tx-2: #B4BFD2; --v-tx-3: #7D8AA3;
  --v-line: rgba(245, 247, 250, 0.09); --v-line-2: rgba(245, 247, 250, 0.16); --v-blue: #0079FA;
  --v-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font: 400 17px/1.6 Inter, -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--v-tx); -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
.v2c *, .v2c *::before, .v2c *::after { box-sizing: border-box; }
.v2c a { color: inherit; text-decoration: none; }
.v2c img { display: block; max-width: 100%; }
.v2c button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.v2c .wrap { width: min(1200px, 100% - 48px); max-width: none; padding-inline: 0; margin-inline: auto; }

.skip.v2c { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--v-blue); padding: 10px 16px; border-radius: 8px; }
.skip.v2c:focus { top: 12px; }

/* Sticky, not fixed: the older pages were laid out under a 72px bar that took space. */
.hdr.v2c { position: sticky; top: 0; z-index: 100; background: rgba(4, 7, 13, .94); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--v-line); }
.v2c .hdr-in { height: 72px; display: flex; align-items: center; gap: 28px; }
.v2c .logo img { height: 38px; width: auto; }
.v2c .nav { display: flex; gap: 4px; margin-left: auto; align-items: center; position: static; background: none; border: 0; padding: 0; }
.v2c .nav a { padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--v-tx-2); transition: color .2s, background .2s; }
.v2c .nav a:hover { color: var(--v-tx); background: rgba(255, 255, 255, .06); }
.v2c .nav .login { margin-left: 10px; border: 1px solid var(--v-line-2); color: var(--v-tx); }
.v2c .burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--v-line-2); align-items: center; justify-content: center; }
.v2c .burger svg { width: 20px; height: 20px; }
.mnav.v2c { display: none; }
@media (max-width: 980px) {
  .v2c .nav { display: none; }
  .v2c .burger { display: inline-flex; }
  /* Slimmer bar on phones and tablets (2026-10-07), same 58px as the v2 pages. */
  .v2c .hdr-in { height: 58px; gap: 16px; }
  .v2c .logo img { height: 30px; }
  .v2c .burger { width: 40px; height: 40px; border-radius: 10px; }
  .mnav.v2c { position: fixed; inset: 58px 0 0; z-index: 99; background: rgba(4, 7, 13, .97); backdrop-filter: blur(16px); padding: 24px; flex-direction: column; gap: 4px; }
  .mnav.v2c.open { display: flex; }
  .mnav.v2c a { padding: 16px 8px; font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--v-line); }
}

.ftr.v2c { border-top: 1px solid var(--v-line); padding-block: 72px 40px; background: var(--v-bg-2); }
.v2c .ftr-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.v2c .ftr-brand img { height: 40px; width: auto; }
.v2c .ftr-brand p { margin: 18px 0 0; color: var(--v-tx-2); font-size: 15px; max-width: 30ch; }
.v2c .link { color: #4D9FFF; }
.v2c h4 { font: 500 12px/1 var(--v-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--v-tx-3); margin: 0 0 18px; }
.v2c ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.v2c ul a { color: var(--v-tx-2); font-size: 15px; transition: color .2s; }
.v2c ul a:hover { color: var(--v-tx); }
.v2c .ftr-base { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--v-line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: var(--v-tx-3); font-size: 13.5px; }
@media (max-width: 980px) { .v2c .ftr-top { grid-template-columns: 1fr 1fr; } .v2c .ftr-brand { grid-column: 1 / -1; } }

/* The Observatory is a full-screen app: its controls start under the bar, its own logo
   gives way to the site logo, and the site footer is left off (there is no page to end). */
body > .hudlayer { top: 72px; }
body > .hudlayer .topbar .brand { display: none; }
body:has(> .hudlayer) > .ftr.v2c { display: none; }

/* breach-data.html and self-check.html pad the body 73px to clear the old fixed bar.
   The v2 bar is sticky and takes its own space, so that padding became a gap above it. */
body[data-page="breach-data"]:has(> .hdr.v2c),
body[data-shell="header"]:has(> .hdr.v2c) { padding-top: 0 !important; }

/* The calculator and partner desks have their own bar (.pc-top) with the old logo. Once a
   check runs, self-check.html hides the site bar and lets its own take over, which put the
   old logo and menu back on screen. Under v2 the site bar stays, the old logo goes, and the
   tool's own bar (Run A Check, The Rule Set, My List) sits under it as a sub-bar. */
body:has(> .hdr.v2c) .pc-top { top: 73px !important; }
body:has(> .hdr.v2c) .pc-top .pc-lock { display: none !important; }
html:has(body > .hdr.v2c .hdr-in):has(.pc-top) { scroll-padding-top: 138px !important; }
@media (max-width: 980px) {
  body:has(> .hdr.v2c) .pc-top { top: 59px !important; }
  html:has(body > .hdr.v2c .hdr-in):has(.pc-top) { scroll-padding-top: 124px !important; }
}

/* My List in the v2 style. Scoped to this page so the calculator and partner desks, which
   share the .pc- classes, are not changed. Tokens are swapped to v2 values first; the rules
   after that bring type, cards and buttons in line with site-v2/assets/site.css.
   The old footer (.pc-foot) keeps only its Master Admin link on screen (user, 2026-10-07).
   The rest is hidden, not removed: publicview-check.py still reads it, and the v2 footer
   carries the same legal links. */
body[data-variant="list"]:has(> .hdr.v2c) {
  --bg0: #04070D; --bg1: #0C1322; --bg2: #111A2D; --well: #080D18;
  --tx2: #B4BFD2; --tx3: #7D8AA3; --line2: rgba(245, 247, 250, 0.16);
  --acc: #0079FA; --acc2: #2E8FFF; --acc-wash: rgba(0, 121, 250, 0.14);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(900px 420px at 18% -80px, rgba(0, 121, 250, .16), transparent 70%) no-repeat, #04070D;
}
body[data-variant="list"]:has(> .hdr.v2c) .pc-foot { margin-top: 0; padding: 14px 24px; border-top: 0; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-foot-in { max-width: 1248px; justify-content: flex-end; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-foot-in > :not(.ft-admin-slot) { display: none; }
body[data-variant="list"]:has(> .hdr.v2c) .ft-admin { color: #7D8AA3; font-size: 13px; }
body[data-variant="list"]:has(> .hdr.v2c) .ft-admin:hover { color: #F5F7FA; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-main { max-width: 1248px; padding: 0 24px 120px; }
body[data-variant="list"]:has(> .hdr.v2c) #ml-root > div:first-child { margin: 72px 0 40px !important; }
body[data-variant="list"]:has(> .hdr.v2c) #ml-root h1 { font-size: clamp(44px, 5.4vw, 72px) !important; line-height: 1.02; letter-spacing: -0.035em !important; font-weight: 600; margin-top: 18px !important; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .16em; color: #4D9FFF; }
body[data-variant="list"]:has(> .hdr.v2c) #ml-root > div:first-child .pc-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-card { border-radius: 16px; padding: 30px 32px; transition: border-color .3s; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-card:hover { border-color: rgba(245, 247, 250, 0.16); }
body[data-variant="list"]:has(> .hdr.v2c) .ml-hero .pc-card { padding: 24px 26px; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-hd h2, body[data-variant="list"]:has(> .hdr.v2c) .pc-hd h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-sub, body[data-variant="list"]:has(> .hdr.v2c) .pc-note { font-size: 16px; line-height: 1.6; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-note { border-left-color: #0079FA; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-btn { border-radius: 999px; padding: 14px 26px; font-size: 15px; font-weight: 600; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-btn.sm { padding: 8px 15px; font-size: 13px; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-btn.alt { border-color: rgba(245, 247, 250, 0.16); }
body[data-variant="list"]:has(> .hdr.v2c) .pc-i { border-radius: 50%; font-family: "Instrument Serif", Georgia, serif; font-style: italic; }
body[data-variant="list"]:has(> .hdr.v2c) .pc-tb { font-size: 14px; }

/* Phones: the tool bar's three tabs wrapped into a column behind the v2 header (seen at 375px,
   2026-10-07). They now sit on one row of their own under the account chip and scroll sideways. */
@media (max-width: 860px) {
  body:has(> .hdr.v2c) .pc-top-in { flex-wrap: wrap; row-gap: 8px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  body:has(> .hdr.v2c) .pc-top .pc-top-tag { display: none; }
  body:has(> .hdr.v2c) .sc-topnav.is-resume { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
  body:has(> .hdr.v2c) .sc-topnav.is-resume .sc-topnav-a { flex: none; white-space: nowrap; }
}