/* Data Arcade shared chrome (nav + welcome ribbon + footer) for the Data Circuit pages.
   Data Circuit pages are .NET-only (they need /api/data-circuit/*), so unlike the self-contained
   marketplace pages they may link shared assets. This keeps the Data Circuit header/footer
   identical to the rest of Data Arcade without inlining the chrome four times.
   Loaded AFTER each page's own <style>, so these rules win for nav.topnav/footer.
   Deliberately does NOT redefine .btn/.btn-primary/.btn-secondary — each page keeps its own.
   Design tokens (2026-10-31 visual audit): type scale --fs-12 … --fs-42 and radii --r-ctl (10 px, every control) /
   --r-card (14 px, every card); pages use them for their own content too. */
:root{ --grad:linear-gradient(90deg,#1e40af 0%,#06b6d4 100%); --blue:#1e40af;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-21:21px; --fs-27:27px; --fs-34:34px; --fs-42:42px;
  --r-ctl:10px; --r-card:14px; }
/* Focus ring (2026-10-31): every interactive control shows the same ring when reached by keyboard. :where() keeps it
   at zero specificity, so a component's own ring still wins. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--blue-mid,#1d4ed8);outline-offset:2px}
footer :where(a,button):focus-visible,.acct-strip :where(a,button):focus-visible{outline-color:#22d3ee}
/* Admin-only links (AI Workflow Library, held for a later release): data-circuit-chrome.js
   removes `hidden` for Administrators; `footer a{display:block}` would otherwise override it. */
.dc-admin-only[hidden]{display:none!important}

/* NAV */
nav.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px var(--gutter);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.topnav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
nav.topnav .logo svg{width:40px;height:37px}
nav.topnav .logo .wordmark{font-weight:800;font-size:1.22rem;line-height:1.1}
/* The "Close the loop" tagline is no longer in the header (2026-10-31 — too small to read); the footer keeps it. */
nav.topnav .logo .wordmark small{display:none}
nav.topnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
nav.topnav ul a{color:var(--slate);text-decoration:none;font-size:var(--fs-16);font-weight:500;margin:0;display:inline-flex;align-items:center;min-height:24px;padding:4px 0}
/* Assess is the main action: styled as a secondary button (2026-10-31) */
nav.topnav>ul>li>a[href$="data-circuit-assess.html"]{color:var(--blue-mid);background:#fff;border:1px solid var(--blue-mid);border-radius:var(--r-ctl);padding:4px 14px;font-weight:600}
nav.topnav>ul>li>a[href$="data-circuit-assess.html"]:hover{background:#eff6ff}
nav.topnav ul a:hover,nav.topnav ul a.active{color:var(--blue-mid)}
nav.topnav ul li{position:relative}
nav.topnav ul ul.subnav{display:none;position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 18px 44px rgba(15,23,42,.14);padding:8px;min-width:230px;z-index:70;flex-direction:column;gap:0}
nav.topnav ul li:hover>ul.subnav{display:flex}
nav.topnav ul ul.subnav li{margin:0}
nav.topnav ul ul.subnav a{display:block;padding:9px 12px;border-radius:var(--r-ctl);font-size:var(--fs-16)}
nav.topnav ul ul.subnav a:hover{background:var(--bg-soft);color:var(--blue-mid)}
/* Resources dropdown (2026-11-08): a button, made keyboard-operable by js/nav-menus.js */
nav.topnav ul .nav-sub-btn{font:inherit;font-size:var(--fs-16);font-weight:500;color:var(--slate);background:none;border:0;padding:4px 0;min-height:24px;cursor:pointer}
nav.topnav ul .nav-sub-btn:hover,nav.topnav ul li.open>.nav-sub-btn{color:var(--blue-mid)}
nav.topnav ul li.has-sub.open>ul.subnav{display:flex}
/* Company mega menu (2026-11-08): Company, Resources and Applications in one panel, centred under the header */
nav.topnav ul li.nav-mega{position:static}
nav.topnav ul div.mega-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 18px 44px rgba(15,23,42,.14);padding:16px;z-index:70;grid-template-columns:repeat(3,minmax(210px,1fr));gap:4px 20px;width:max-content;max-width:min(860px,calc(100vw - 32px))}
nav.topnav ul div.mega-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
nav.topnav ul li.has-sub:hover>div.mega-panel,nav.topnav ul li.has-sub.open>div.mega-panel{display:grid}
nav.topnav ul .mega-panel .mega-h{margin:0 12px 6px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:var(--fs-14);font-weight:700;color:var(--slate)}
nav.topnav ul .mega-panel ul.mega-list{display:flex;flex-direction:column;gap:0;position:static;padding:0;margin:0;border:0;background:none;box-shadow:none;list-style:none}
nav.topnav ul .mega-panel ul.mega-list a{display:block;padding:8px 12px;border-radius:var(--r-ctl)}
nav.topnav ul .mega-panel ul.mega-list a:hover,nav.topnav ul .mega-panel ul.mega-list a:focus-visible{background:var(--bg-soft)}
nav.topnav ul .mega-panel a b{display:block;color:var(--ink);font-weight:700;font-size:var(--fs-16)}
nav.topnav ul .mega-panel a b i{font-style:normal;font-weight:400;color:var(--slate);margin-left:4px}
nav.topnav ul .mega-panel a span{display:block;color:var(--slate);font-size:var(--fs-14);font-weight:400;margin-top:2px}
nav.topnav ul .mega-panel .mega-ext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:960px){nav.topnav.open ul div.mega-panel{display:block;position:static;transform:none;border:none;box-shadow:none;padding:0 0 0 16px;width:auto;max-width:none}nav.topnav.open ul div.mega-panel::before{display:none}nav.topnav.open ul .mega-panel .mega-h{border:0;margin:8px 0 2px;padding:0}nav.topnav.open ul .mega-panel a span{display:none}nav.topnav.open ul .mega-panel ul.mega-list a{padding:6px 0}}
.nav-cta{display:flex;gap:10px;position:relative}
.nav-cta .btn{padding:8px 18px;font-size:var(--fs-16)}
.hamburger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}
.cart-badge{display:none;place-items:center;background:var(--grad);color:#fff;border-radius:999px;font-size:.68rem;font-weight:700;min-width:18px;height:18px;padding:0 5px;margin-left:6px;vertical-align:middle}
.cart-link{display:none}
.nav-login{color:var(--ink);font-weight:600;font-size:var(--fs-16);text-decoration:none;padding:9px 8px;align-self:center}
.nav-login:hover{color:var(--blue-mid)}
.btn-pill{background:#0b1631;color:#fff;border-radius:999px}
.btn-pill:hover{background:#16265c}

/* WELCOME RIBBON */
.acct-strip{background:#0b1631;color:#fff;display:flex;align-items:center;gap:20px;padding:2px var(--gutter);font-size:14px;line-height:20px;min-height:28px}
.acct-strip svg{width:15px;height:15px;flex:none}
.acct-strip .who{font-weight:700;white-space:nowrap}
.acct-strip .upd{color:#9db4e8;display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.acct-strip .updtxt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.acct-strip .links{display:flex;gap:24px;margin-left:auto}
.acct-strip .links a{color:#fff;text-decoration:none;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;margin:0}
.acct-strip .links a:hover{color:#22d3ee}
/* Welcome bar dismiss + compact header (2026-10-31): header and bar together stay within 72 px */
.acct-strip .strip-x{background:none;border:0;color:#cdd9f5;font-size:18px;line-height:1;width:24px;height:24px;border-radius:10px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0}
.acct-strip .strip-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.acct-strip .strip-x:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
body.has-strip nav.topnav{padding-top:3px;padding-bottom:3px}
body.has-strip nav.topnav .logo svg{width:34px;height:32px}
body.has-strip .nav-cta .btn{padding-top:4px;padding-bottom:4px;line-height:1.5}
/* Skip link (2026-10-31): first focusable element, shown on focus */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#1d4ed8;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
@media(max-width:820px){.acct-strip .upd{display:none}}
.acct-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(15,23,42,.16);min-width:230px;padding:10px;z-index:60;text-align:left}
.acct-menu.open{display:block}
.acct-menu .am-sep{height:1px;background:var(--line);margin:6px 0}
.acct-menu .am-name{font-weight:800;font-size:var(--fs-18);padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:6px;color:var(--ink)}
.acct-menu a{display:block;padding:10px 12px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none;font-weight:600;font-size:var(--fs-16);margin:0}
.acct-menu a:hover{background:var(--bg-soft)}
.acct-menu .am-out{color:#dc2626}

/* FOOTER (dark, matches the rest of Data Arcade) */
footer{background:#0b1631;color:#9db4e8;padding:56px var(--gutter) 28px;font-size:var(--fs-14);display:block;border:0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px}
footer h5{color:#fff;font-size:var(--fs-16);margin-bottom:13px}
footer .f-h{color:#fff;font-size:var(--fs-16);line-height:1.3;margin:0 0 13px}   /* footer column headings are h2s (2026-10-31): no skipped heading levels */
footer a{color:#9db4e8;text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:#fff}
footer .logo{color:#fff;display:flex;align-items:center;gap:10px}
footer .logo svg{width:40px;height:37px}
footer .logo .wordmark{font-weight:800;font-size:1.22rem;line-height:1.1}
footer .logo .wordmark small{display:block;font-size:var(--fs-14);font-weight:500;color:#9db4e8;letter-spacing:.02em}
.certs{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.cert{font-size:var(--fs-14);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:999px;color:#cdd9f5}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-ctl);border:1px solid rgba(255,255,255,.2);color:#cdd9f5;transition:.2s;margin:0}
.socials a:hover{background:var(--grad);border-color:transparent;color:#fff}
.socials svg{width:17px;height:17px;fill:currentColor}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--fs-14)}
.f-bottom a{display:inline;margin:0}

@media(max-width:960px){
  nav.topnav ul,.nav-cta{display:none}
  .hamburger{display:block}
  nav.topnav.open ul{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:18px 5%;border-bottom:1px solid var(--line);gap:14px}
  nav.topnav.open ul ul.subnav{display:flex;position:static;border:none;box-shadow:none;padding:0 0 0 16px;min-width:0}
  .f-grid{grid-template-columns:1fr 1fr}
}