/* CTEKS LeadGen Hub v12 Enterprise Experience: design tokens and skin. Loaded after styles.css. Brand colors from the approved CTEKS logo (#003B5E, #00BFFF). */
:root {
  --navy-950: #00263D; --navy-900: #003048; --navy-800: #003B5E; --navy-700: #0F4F75; --navy-100: #E3EDF4;
  --cyan: #00BFFF; --cyan-soft: #D9F3FF;
  --brand: #0B6BAA; --brand-600: #095C93; --brand-50: #EAF3FA;
  --ink: #1E2F40; --ink-2: #425466; --muted: #566678; --line: #DCE3EB; --line-2: #EAEFF4;
  --bg: #F3F6FA; --card: #FFFFFF;
  --ok: #1B7A52; --ok-bg: #E3F4EC; --warn: #8A5200; --warn-bg: #FFF1D6; --bad: #B3283A; --bad-bg: #FCE6E9; --info: #3A4F66; --info-bg: #E8EEF5; --review: #4B3AA8; --review-bg: #ECE9FB;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sh-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 1px rgba(16, 42, 67, .04); --sh-2: 0 6px 20px rgba(16, 42, 67, .10);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --nav-w: 252px; --nav-w-mini: 72px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; color: var(--ink); background: var(--bg);
}
body { background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.01em; color: var(--navy-800); }

/* governance banner: one quiet, unmistakable line */
.banner { background: #FFF6DC; border-bottom: 1px solid #EBCB7A; color: #5C4200; font-size: 12.5px; font-weight: 500; padding: 6px 16px; text-align: center; }
.banner strong { font-weight: 700; }

/* shell */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: calc(100vh - 30px); }
body.navmini .shell { grid-template-columns: var(--nav-w-mini) minmax(0, 1fr); }
.col { min-width: 0; display: flex; flex-direction: column; }

/* sidebar */
.nav { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-950) 100%); color: #D6E4EE; width: auto; border: 0; padding: 0; position: sticky; top: 0; align-self: start; height: 100vh; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
.brandblock { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; text-decoration: none; color: #fff; }
.brandblock .logo-full { height: 30px; width: auto; }
.brandblock .logo-icon { display: none; height: 34px; width: 34px; }
.brandblock .product { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); font-weight: 700; margin-left: auto; white-space: nowrap; }
.navsec { border: 0; padding: 6px 0 2px; }
.nav button.navhead { text-transform: uppercase; font-size: 10.5px; letter-spacing: .12em; color: #8FB2CA; font-weight: 700; padding: 10px 20px 6px; background: none; border: 0; border-radius: 0; width: 100%; display: flex; justify-content: space-between; text-align: left; }
.nav button.navhead::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #8FB2CA; border-bottom: 1.5px solid #8FB2CA; transform: rotate(45deg); margin-right: 2px; }
.nav button.navhead[aria-expanded="false"]::after { transform: rotate(-45deg); }
.nav .navitem { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 1px 8px; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: none; color: #D6E4EE; font-size: 14px; font-weight: 500; text-align: left; position: relative; }
.nav .navitem:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav .navitem[aria-current="page"] { background: rgba(0, 191, 255, .16); color: #fff; font-weight: 600; border: 0; }
.nav .navitem[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.nav .ico { width: 20px; height: 20px; flex: none; display: inline-flex; }
.nav .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.navfuture { display: flex; align-items: center; gap: 12px; padding: 9px 20px; color: #7F9DB2; cursor: not-allowed; font-size: 14px; }
.navfuture small { margin-left: auto; font-size: 10px; background: rgba(255, 255, 255, .08); color: #A9C3D5; border-radius: 8px; padding: 1px 7px; }
.navfoot { margin-top: auto; padding: 12px 14px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.nav button.collapse { width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); color: #BCD2E1; border: 0; border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; }
.nav button.collapse:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav button.collapse svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.navmini .brandblock { justify-content: center; padding: 18px 0 12px; }
body.navmini .brandblock .logo-full, body.navmini .brandblock .product { display: none; }
body.navmini .brandblock .logo-icon { display: block; }
body.navmini .nav .navitem { justify-content: center; padding: 10px 0; width: calc(100% - 16px); }
body.navmini .nav .lbl, body.navmini .nav button.navhead, body.navmini .nav .navfuture, body.navmini .nav .collapse .lbl { display: none; }
body.navmini .nav .navsec { border-top: 1px solid rgba(255, 255, 255, .08); }
body.navmini .nav .navlist[hidden] { display: block; }
body.navmini .nav button.collapse { justify-content: center; }
body.navmini .nav button.collapse svg { transform: rotate(180deg); }
.nav :focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); padding: 10px 24px; gap: 14px; flex-wrap: nowrap; align-items: center; box-shadow: var(--sh-1); }
.mobilelogo { display: none; }
.menu { display: none; background: none; border: 1px solid var(--line); color: var(--ink); padding: 0; width: 40px; height: 40px; border-radius: var(--r-sm); }
.menu .bars, .menu .bars::before, .menu .bars::after { display: block; width: 18px; height: 2px; background: var(--navy-800); border-radius: 2px; content: ""; position: relative; margin: 0 auto; }
.menu .bars::before { position: absolute; top: -6px; left: 0; } .menu .bars::after { position: absolute; top: 6px; left: 0; }
.env { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); border: 1px solid #EBCB7A; white-space: nowrap; letter-spacing: .02em; }
.env.local { background: var(--ok-bg); color: var(--ok); border-color: #9BD3B8; } .env.production { background: var(--bad-bg); color: var(--bad); border-color: #E8A5AE; }
.gsearch { flex: 1 1 320px; max-width: 520px; }
.gsearch input { width: 100%; height: 38px; padding: 0 14px 0 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566678' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px 50%; }
.gsearch input:focus { background-color: #fff; border-color: var(--brand); outline: 3px solid var(--cyan-soft); }
.topactions button, .top button.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 500; }
.topactions button:hover { background: var(--bg); }
#qbtn { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.badge { background: var(--bad); color: #fff; }
.who { display: flex; align-items: center; gap: 10px; }
.who .name { font-size: 13px; line-height: 1.2; text-align: right; }
.who .name small { display: block; color: var(--muted); font-size: 11.5px; }
.who .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-800); color: #fff; font-weight: 700; font-size: 12.5px; display: grid; place-items: center; flex: none; }
.who button { background: none; color: var(--brand); border: 1px solid var(--line); }
.main { padding: 22px 28px 48px; max-width: 1480px; width: 100%; }

/* standard page header */
.pagehead { margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pagehead .crumbs { grid-column: 1 / -1; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.pagehead .crumbs span.sep { opacity: .6; }
.pagehead h1 { font-size: 26px; font-weight: 700; margin: 0; line-height: 1.15; }
.pagehead .sub { grid-column: 1; margin: 2px 0 0; color: var(--ink-2); max-width: 78ch; }
.pagehead .headactions { grid-column: 2; grid-row: 2 / span 2; display: flex; gap: 8px; align-items: center; }

/* buttons and forms */
button { border-radius: var(--r-sm); font-weight: 600; background: var(--brand); border-color: var(--brand); transition: background .12s, border-color .12s; }
button:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); }
button.secondary { background: #fff; color: var(--brand); border-color: #A9C6DC; font-weight: 600; }
button.secondary:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand); }
button.danger { background: #fff; color: var(--bad); border-color: #E2A3AB; } button.danger:hover:not(:disabled) { background: var(--bad-bg); }
button:disabled { opacity: 1; background: #E9EDF2; color: #7B8794; border-color: #DCE3EB; cursor: not-allowed; }
input, select, textarea { border-color: #B6C3D1; border-radius: var(--r-sm); min-height: 36px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--cyan-soft); border-color: var(--brand); }
label { color: var(--ink-2); font-weight: 500; }
:focus-visible { outline: 3px solid #1A73E8; outline-offset: 2px; }

/* cards, panels, KPIs */
.panel, .card, .chartbox, .kcard { border-color: var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.panel { padding: 18px 20px; }
.panel > h2:first-child, .panel h2.tight { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.metrics { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
button.card.metric { padding: 16px 18px 14px; border-top: 3px solid var(--navy-700); position: relative; }
button.card.metric .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
button.card.metric .v { font-size: 32px; font-weight: 700; color: var(--navy-800); line-height: 1.1; margin: 4px 0 2px; }
button.card.metric:hover:not(:disabled) { background: #fff; border-color: var(--brand); box-shadow: var(--sh-2); border-top-color: var(--cyan); }
button.card.metric.attn { border-top-color: #D08A1E; } button.card.metric.risk { border-top-color: var(--bad); } button.card.metric.good { border-top-color: var(--ok); }
button.card.metric:disabled { background: #F5F7FA; color: #6B7684; box-shadow: none; }
.cards .card .v.sm { font-size: 18px; color: var(--navy-800); }
.cmd { gap: 16px; }

/* tables */
table { border-radius: var(--r-md); overflow: hidden; }
th { background: #EEF3F8; color: var(--ink-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
tbody tr:nth-child(even) { background: #FAFCFE; } tr.click:hover { background: var(--brand-50); }
.pill { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; background: var(--info-bg); color: var(--info); }
.pill.good { background: var(--ok-bg); color: var(--ok); } .pill.warn, .pill.Hold { background: var(--warn-bg); color: var(--warn); } .pill.bad, .pill.Excluded { background: var(--bad-bg); color: var(--bad); } .pill.ok, .pill.Review { background: var(--review-bg); color: var(--review); } .pill.info { background: var(--info-bg); color: var(--info); }
.pill.good::before, .pill.bad::before, .pill.warn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
button.tab { border-radius: 999px; background: #fff; color: var(--ink); border-color: var(--line); font-weight: 500; }
button.tab.on, button.tab[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 600; }
.chart .bar { fill: var(--navy-700); } .chart .bar.good { fill: var(--ok); } .chart .bar.warn { fill: #C27A12; } .chart .bar.bad { fill: var(--bad); } .chart .bar.info { fill: var(--brand); }
.gate { padding: 8px 0; border-bottom: 1px solid var(--line-2); align-items: center; }

/* record pages */
.record .rechead { margin-bottom: 16px; align-items: center; }
.rechead .avatar { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--navy-800); color: #fff; font-size: 20px; font-weight: 700; display: grid; place-items: center; flex: none; }
.rechead .recid { display: flex; gap: 16px; align-items: center; min-width: 0; }
.rechead h1 { font-size: 26px; }
.recgrid { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 16px; }
.recleft h2, .recright h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tabs { border-bottom: 1px solid var(--line); gap: 2px; margin-bottom: 14px; }
.tabs button.tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--ink-2); padding: 8px 14px; }
.tabs button.tab.on { background: none; color: var(--navy-800); border-bottom-color: var(--cyan); }

/* Prospect Discovery */
.dstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dstat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sh-1); }
.dstat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.dstat .v { font-size: 26px; font-weight: 700; color: var(--navy-800); }
.dnote { background: linear-gradient(90deg, var(--navy-800), var(--navy-700)); color: #fff; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; }
.dnote strong { color: var(--cyan); }

/* sign in */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; }
.signin .hero { background: radial-gradient(1200px 500px at 20% 0%, #0F5C8A 0%, transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.signin .hero img { height: 44px; width: auto; align-self: flex-start; }
.signin .hero h2 { color: #fff; font-size: 34px; line-height: 1.15; margin: 0 0 12px; max-width: 16ch; }
.signin .hero p { color: #C5D9E8; max-width: 44ch; font-size: 15px; }
.signin .hero ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: #E3EEF6; }
.signin .hero li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 10px; }
.signin .formside { display: grid; place-items: center; padding: 32px; background: var(--bg); }
.signin .card { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 32px; }
.signin .card img.mini { display: none; }
.signin .card h1 { font-size: 24px; margin: 0 0 4px; } .signin .card .sub { color: var(--ink-2); margin: 0 0 18px; }
.signin .msbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; background: #fff; color: #1B2733; border: 1.5px solid #8C99A6; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.signin .msbtn:hover { background: var(--bg); border-color: var(--navy-800); }
.signin .msbtn i { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .signin .msbtn i b { display: block; } .signin .msbtn i b:nth-child(1) { background: #F25022; } .signin .msbtn i b:nth-child(2) { background: #7FBA00; } .signin .msbtn i b:nth-child(3) { background: #00A4EF; } .signin .msbtn i b:nth-child(4) { background: #FFB900; }
.signin .secnote { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.signin form.grid { grid-template-columns: 1fr; }

/* states */
.empty, td.empty { color: var(--ink-2); }
.errstate { background: #fff; border: 1px solid #E2A3AB; border-left: 5px solid var(--bad); box-shadow: var(--sh-1); }
.skeleton .sk { background: linear-gradient(90deg, #E5ECF3, #F3F7FA, #E5ECF3); background-size: 200% 100%; }
.toast { background: var(--navy-800); }

/* tablet and phone */
@media (max-width: 1100px) { .shell, body.navmini .shell { grid-template-columns: var(--nav-w-mini) minmax(0, 1fr); } .brandblock .logo-full, .brandblock .product { display: none; } .brandblock .logo-icon { display: block; } .brandblock { justify-content: center; padding: 18px 0 12px; } .nav .lbl, .nav button.navhead, .nav .navfuture, .nav .collapse { display: none; } .nav .navitem { justify-content: center; padding: 10px 0; } .nav .navlist[hidden] { display: block; } .recgrid { grid-template-columns: 240px minmax(0, 1fr); } .recright { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .shell, body.navmini .shell { display: block; }
  .nav { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: 100vh; z-index: 50; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--sh-2); display: flex; }
  body.navopen .nav { transform: none; display: flex; }
  .nav .lbl, .nav button.navhead, .nav .navfuture, .nav .collapse { display: revert; } .nav button.navhead { display: flex; } .nav .navfuture { display: flex; }
  .nav .collapse { display: none; } .nav .navitem { justify-content: flex-start; padding: 10px 12px; } .nav .navlist[hidden] { display: none; }
  .brandblock .logo-full { display: block; } .brandblock .product { display: block; } .brandblock .logo-icon { display: none; } .brandblock { justify-content: flex-start; padding: 18px; }
  .navscrim:not([hidden]) { position: fixed; inset: 0; background: rgba(0, 20, 35, .5); z-index: 40; }
  body.navopen .navscrim { display: block; }
  .menu { display: inline-grid; place-items: center; } .mobilelogo { display: block; }
  .top { padding: 8px 12px; flex-wrap: wrap; gap: 8px; } .gsearch { order: 9; flex: 1 1 100%; max-width: none; }
  .topactions { margin-left: auto; } .who .name { display: none; }
  .main { padding: 16px 14px 40px; }
  .pagehead { grid-template-columns: 1fr; } .pagehead .headactions { grid-column: 1; grid-row: auto; } .pagehead h1 { font-size: 22px; }
  .signin { grid-template-columns: 1fr; } .signin .hero { display: none; } .signin .card img.mini { display: block; height: 34px; margin-bottom: 18px; }
  .recgrid { grid-template-columns: 1fr; } .rechead .avatar { width: 44px; height: 44px; font-size: 16px; }
}
@media (max-width: 700px) { .banner { font-size: 11.5px; text-align: left; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } button.card.metric .v { font-size: 26px; } .topactions button { padding: 6px 9px; } }
@media (pointer: coarse) { .nav .navitem { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
body.signedout .nav, body.signedout .navscrim, body.signedout .top { display: none; }
body.signedout .shell { display: block; }
body.signedout .main { padding: 0; max-width: none; }
.heroFoot { color: #9FBBD0; }

.panel .chartbox { box-shadow: none; border-color: var(--line-2); }
.chart .ct { font-size: 13px; fill: var(--ink-2); } .chart .cv { font-size: 13px; fill: var(--ink); }
/* chips for discovery criteria */
fieldset.checks { border: 1px solid var(--line); border-radius: var(--r-md); background: #FBFCFE; padding: 10px 12px 12px; gap: 8px; }
fieldset.checks legend { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
fieldset.checks label.check { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 3px 12px 3px 8px; min-height: 32px; cursor: pointer; color: var(--ink); font-weight: 500; gap: 4px; }
fieldset.checks label.check:hover { border-color: var(--brand); }
fieldset.checks label.check:has(input:checked) { background: var(--brand-50); border-color: var(--brand); color: var(--navy-800); font-weight: 600; }
fieldset.checks input[type=checkbox], form.grid label.check input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0 6px 0 0; accent-color: var(--brand); }
.msg { border-radius: var(--r-sm); } .msg.info { background: var(--brand-50); color: var(--navy-800); border-left: 4px solid var(--cyan); }
.msg.err { border-left: 4px solid var(--bad); } .msg.ok { border-left: 4px solid var(--ok); }
.panel .panel { box-shadow: none; background: #FBFCFE; border-color: var(--line-2); }
.tabs button.tab { padding: 8px 10px; font-size: 13.5px; }
@media (pointer: coarse) { fieldset.checks input[type=checkbox] { width: 22px; height: 22px; } fieldset.checks label.check { min-height: 44px; } }

.navsignout { display: none; width: 100%; margin-bottom: 8px; background: rgba(255,255,255,.1); border: 0; color: #fff; }
.bico { display: inline-flex; margin-right: 6px; vertical-align: -3px; }
@media (max-width: 900px) {
  .navsignout { display: block; }
  .top { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 8px 10px; }
  .top .gsearch { grid-column: 1 / -1; order: 0; }
  .top .who { order: 0; } .top .who button { display: none; }
  .topactions { margin-left: 0; justify-self: end; } .topactions .popwrap:not(:first-child) { display: none; } .topactions .popwrap:first-child { display: none; }
  .topactions #bell .bt { display: none; } .topactions #bell { padding: 6px 10px; } .topactions #bell .bico { margin: 0; }
  #envbadge { justify-self: start; }
}
@media (max-width: 900px) { .top .gsearch { grid-row: 2; grid-column: 1 / -1; } .top .topactions { grid-row: 1; grid-column: 4; } .top .who { grid-row: 1; grid-column: 5; } }


/* ===== Appearance: theme, colors, header style (stored per browser) ===== */
:root { --head: var(--navy-800); --surface-2: #EEF3F8; --btn2: #fff; --acc: var(--cyan); --nav-bg: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-950) 100%); --nav-ink: #D6E4EE; --nav-head: #8FB2CA; --nav-hover: rgba(255,255,255,.08); --nav-on: rgba(0,191,255,.16); --nav-line: rgba(255,255,255,.08);
  --hd-bg: var(--card); --hd-ink: var(--ink); --hd-line: var(--line); --hd-input: var(--bg); --hd-pad: 10px; }
:root[data-theme="dark"] {
  --bg:#0E1A24; --card:#16242F; --ink:#E4ECF3; --ink-2:#B5C5D3; --muted:#9BB0C2; --line:#2B3F4F; --line-2:#22343F;
  --brand:#5AB4EC; --brand-600:#7CC3F1; --brand-50:#17364A; --navy-100:#1D3445; --cyan-soft:#12425A;
  --ok:#5BCB97; --ok-bg:#12372A; --warn:#F0B454; --warn-bg:#3B2D10; --bad:#F2828F; --bad-bg:#40191F; --info:#B5C5D3; --info-bg:#1F3140; --review:#B3A8F5; --review-bg:#2A2557;
  --head:#E4ECF3; --surface-2:#1B2C39; --btn2:#1B2C39; --btn-ink:#05202F; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
  --bg:#0E1A24; --card:#16242F; --ink:#E4ECF3; --ink-2:#B5C5D3; --muted:#9BB0C2; --line:#2B3F4F; --line-2:#22343F;
  --brand:#5AB4EC; --brand-600:#7CC3F1; --brand-50:#17364A; --navy-100:#1D3445; --cyan-soft:#12425A;
  --ok:#5BCB97; --ok-bg:#12372A; --warn:#F0B454; --warn-bg:#3B2D10; --bad:#F2828F; --bad-bg:#40191F; --info:#B5C5D3; --info-bg:#1F3140; --review:#B3A8F5; --review-bg:#2A2557;
  --head:#E4ECF3; --surface-2:#1B2C39; --btn2:#1B2C39; --btn-ink:#05202F; color-scheme: dark;
  }
}

:root[data-theme="dark"] body, :root[data-theme="dark"] .main { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .banner { background: #3B2D10; border-color: #6B5320; color: #F5D98C; }
:root[data-theme="dark"] th { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] tbody tr:nth-child(even) { background: #132430; }
:root[data-theme="dark"] tr.click:hover { background: var(--brand-50); }
:root[data-theme="dark"] button.secondary, :root[data-theme="dark"] button.tab, :root[data-theme="dark"] button.danger, :root[data-theme="dark"] .signin .msbtn { background: var(--btn2); color: var(--brand); border-color: var(--line); }
:root[data-theme="dark"] button.danger { color: var(--bad); }
:root[data-theme="dark"] button.tab { color: var(--ink); }
:root[data-theme="dark"] button.tab.on, :root[data-theme="dark"] button.tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #05202F; }
:root[data-theme="dark"] .tabs button.tab.on { background: none; color: var(--brand); border-bottom-color: var(--cyan); }
:root[data-theme="dark"] button:disabled { background: #1B2A35; color: #6F8497; border-color: var(--line); }
:root[data-theme="dark"] button.card.metric:hover:not(:disabled), :root[data-theme="dark"] .errstate { background: var(--card); }
:root[data-theme="dark"] button.card.metric:disabled { background: #132430; color: var(--muted); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #0F1E29; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .gsearch input:focus { background-color: #0F1E29; }
:root[data-theme="dark"] fieldset.checks, :root[data-theme="dark"] .panel .panel, :root[data-theme="dark"] pre { background: #12222D; border-color: var(--line); }
:root[data-theme="dark"] fieldset.checks label.check { background: var(--card); }
:root[data-theme="dark"] .menu .bars, :root[data-theme="dark"] .menu .bars::before, :root[data-theme="dark"] .menu .bars::after { background: var(--ink); }
:root[data-theme="dark"] .who .avatar, :root[data-theme="dark"] .rechead .avatar { background: var(--brand); color: #05202F; }
:root[data-theme="dark"] .who button, :root[data-theme="dark"] .iconbtn { color: var(--brand); border-color: var(--line); background: none; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] button.card.metric .v, :root[data-theme="dark"] .cards .card .v.sm, :root[data-theme="dark"] .dstat .v, :root[data-theme="dark"] fieldset.checks label.check:has(input:checked), :root[data-theme="dark"] .msg.info { color: var(--head); }
:root[data-theme="dark"] .chart .bar { fill: var(--brand); }
:root[data-theme="dark"] .pill { background: var(--info-bg); color: var(--ink-2); }
:root[data-theme="dark"] .pill.Review, :root[data-theme="dark"] .pill.ok { background: var(--review-bg); color: var(--review); }
:root[data-theme="dark"] .pill.Hold, :root[data-theme="dark"] .pill.warn { background: var(--warn-bg); color: var(--warn); }
:root[data-theme="dark"] .pill.Excluded, :root[data-theme="dark"] .pill.bad { background: var(--bad-bg); color: var(--bad); }
:root[data-theme="dark"] .pill.good { background: var(--ok-bg); color: var(--ok); }
:root[data-theme="dark"] .pill.info { background: var(--info-bg); color: var(--ink-2); }
:root[data-theme="dark"] .msg.err { background: var(--bad-bg); } :root[data-theme="dark"] .msg.ok { background: var(--ok-bg); }
:root[data-theme="dark"] .toast { background: #0B141B; border: 1px solid var(--line); }
:root[data-theme="dark"] dialog.modal { background: var(--card); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] dialog.modal::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .results button:hover, :root[data-theme="dark"] .popmenu button:hover { background: var(--brand-50); }
:root[data-theme="dark"] .results, :root[data-theme="dark"] .popmenu { background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] .signin, :root[data-theme="dark"] .signin .card { background: var(--card); }

@media (prefers-color-scheme: dark) {

:root[data-theme="auto"] body, :root[data-theme="auto"] .main { background: var(--bg); color: var(--ink); }
:root[data-theme="auto"] .banner { background: #3B2D10; border-color: #6B5320; color: #F5D98C; }
:root[data-theme="auto"] th { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="auto"] tbody tr:nth-child(even) { background: #132430; }
:root[data-theme="auto"] tr.click:hover { background: var(--brand-50); }
:root[data-theme="auto"] button.secondary, :root[data-theme="auto"] button.tab, :root[data-theme="auto"] button.danger, :root[data-theme="auto"] .signin .msbtn { background: var(--btn2); color: var(--brand); border-color: var(--line); }
:root[data-theme="auto"] button.danger { color: var(--bad); }
:root[data-theme="auto"] button.tab { color: var(--ink); }
:root[data-theme="auto"] button.tab.on, :root[data-theme="auto"] button.tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #05202F; }
:root[data-theme="auto"] .tabs button.tab.on { background: none; color: var(--brand); border-bottom-color: var(--cyan); }
:root[data-theme="auto"] button:disabled { background: #1B2A35; color: #6F8497; border-color: var(--line); }
:root[data-theme="auto"] button.card.metric:hover:not(:disabled), :root[data-theme="auto"] .errstate { background: var(--card); }
:root[data-theme="auto"] button.card.metric:disabled { background: #132430; color: var(--muted); }
:root[data-theme="auto"] input, :root[data-theme="auto"] select, :root[data-theme="auto"] textarea { background: #0F1E29; color: var(--ink); border-color: var(--line); }
:root[data-theme="auto"] .gsearch input:focus { background-color: #0F1E29; }
:root[data-theme="auto"] fieldset.checks, :root[data-theme="auto"] .panel .panel, :root[data-theme="auto"] pre { background: #12222D; border-color: var(--line); }
:root[data-theme="auto"] fieldset.checks label.check { background: var(--card); }
:root[data-theme="auto"] .menu .bars, :root[data-theme="auto"] .menu .bars::before, :root[data-theme="auto"] .menu .bars::after { background: var(--ink); }
:root[data-theme="auto"] .who .avatar, :root[data-theme="auto"] .rechead .avatar { background: var(--brand); color: #05202F; }
:root[data-theme="auto"] .who button, :root[data-theme="auto"] .iconbtn { color: var(--brand); border-color: var(--line); background: none; }
:root[data-theme="auto"] h1, :root[data-theme="auto"] h2, :root[data-theme="auto"] h3, :root[data-theme="auto"] button.card.metric .v, :root[data-theme="auto"] .cards .card .v.sm, :root[data-theme="auto"] .dstat .v, :root[data-theme="auto"] fieldset.checks label.check:has(input:checked), :root[data-theme="auto"] .msg.info { color: var(--head); }
:root[data-theme="auto"] .chart .bar { fill: var(--brand); }
:root[data-theme="auto"] .pill { background: var(--info-bg); color: var(--ink-2); }
:root[data-theme="auto"] .pill.Review, :root[data-theme="auto"] .pill.ok { background: var(--review-bg); color: var(--review); }
:root[data-theme="auto"] .pill.Hold, :root[data-theme="auto"] .pill.warn { background: var(--warn-bg); color: var(--warn); }
:root[data-theme="auto"] .pill.Excluded, :root[data-theme="auto"] .pill.bad { background: var(--bad-bg); color: var(--bad); }
:root[data-theme="auto"] .pill.good { background: var(--ok-bg); color: var(--ok); }
:root[data-theme="auto"] .pill.info { background: var(--info-bg); color: var(--ink-2); }
:root[data-theme="auto"] .msg.err { background: var(--bad-bg); } :root[data-theme="auto"] .msg.ok { background: var(--ok-bg); }
:root[data-theme="auto"] .toast { background: #0B141B; border: 1px solid var(--line); }
:root[data-theme="auto"] dialog.modal { background: var(--card); color: var(--ink); border-color: var(--line); }
:root[data-theme="auto"] dialog.modal::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="auto"] .results button:hover, :root[data-theme="auto"] .popmenu button:hover { background: var(--brand-50); }
:root[data-theme="auto"] .results, :root[data-theme="auto"] .popmenu { background: var(--card); border-color: var(--line); }
:root[data-theme="auto"] .signin, :root[data-theme="auto"] .signin .card { background: var(--card); }

}

/* sidebar uses variables so the looks can restyle it */
.nav { background: var(--nav-bg); color: var(--nav-ink); border-right: 1px solid var(--nav-line); }
.nav .navitem { color: var(--nav-ink); }
.nav button.navhead { color: var(--nav-head); }
.nav button.navhead::after { border-color: var(--nav-head); }
.nav .navitem:hover { background: var(--nav-hover); }
.nav .navitem[aria-current="page"] { background: var(--nav-on); }
.nav .navitem[aria-current="page"]::before { background: var(--acc); }
.nav .navsec { border-color: var(--nav-line); }

/* Colors: Full color */
:root[data-look="vivid"] { --nav-bg: linear-gradient(170deg, #004A74 0%, #003B5E 45%, #0A6C9E 100%); --acc: #3DD2FF; --nav-on: rgba(255,255,255,.2); --nav-head: #A8D8F0; }
:root[data-look="vivid"] .main { background: linear-gradient(180deg, rgba(0,191,255,.07), transparent 220px); }
:root[data-look="vivid"] button.card.metric { border-top-width: 4px; border-top-color: var(--cyan); }
:root[data-look="vivid"] .pagehead h1 { background: linear-gradient(90deg, var(--head), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Colors: Color-coded */
:root[data-look="color"] button.card.metric { border-top-width: 4px; }
:root[data-look="color"] button.card.metric.attn { border-top-color: #E39A1B; }
:root[data-look="color"] button.card.metric.risk { border-top-color: var(--bad); }
:root[data-look="color"] button.card.metric.good { border-top-color: var(--ok); }
:root[data-look="color"] button.card.metric:not(.attn):not(.risk):not(.good) { border-top-color: var(--brand); }
:root[data-look="color"] .nav .navitem:nth-of-type(5n+1) .ico { color: #62D2FF; }
:root[data-look="color"] .nav .navitem:nth-of-type(5n+2) .ico { color: #7CE0B1; }
:root[data-look="color"] .nav .navitem:nth-of-type(5n+3) .ico { color: #FFC766; }
:root[data-look="color"] .nav .navitem:nth-of-type(5n+4) .ico { color: #C3B7FF; }
:root[data-look="color"] .nav .navitem:nth-of-type(5n+5) .ico { color: #FF9DAA; }
:root[data-look="color"] th { border-bottom: 2px solid var(--brand); }
/* Colors: Classic (light sidebar) */
:root[data-look="classic"] { --nav-bg: var(--card); --nav-ink: var(--ink-2); --nav-head: var(--muted); --nav-hover: var(--brand-50); --nav-on: var(--brand-50); --nav-line: var(--line); --acc: var(--brand); }
:root[data-look="classic"] .nav .navitem[aria-current="page"] { color: var(--brand); }
:root[data-look="classic"] .nav .navitem:hover { color: var(--ink); }
:root[data-look="classic"] .brandblock, :root[data-look="classic"] .nav button.collapse, :root[data-look="classic"] .nav button.collapse:hover { color: var(--head); }
:root[data-look="classic"] .nav button.collapse { background: var(--surface-2); }
:root[data-look="classic"] .nav .logo-full { content: url("/brand/logo-full.svg"); }

/* Header style */
.top { background: var(--hd-bg); color: var(--hd-ink); border-bottom-color: var(--hd-line); padding-block: var(--hd-pad); }
.top .gsearch input { background-color: var(--hd-input); }
:root[data-hd="cmd"] { --hd-bg: #003B5E; --hd-ink: #fff; --hd-line: #002E49; --hd-input: rgba(255,255,255,.14); }
:root[data-hd="brand"] { --hd-bg: linear-gradient(90deg, #003B5E 0%, #0B6BAA 62%, #12A8E0 100%); --hd-ink: #fff; --hd-line: transparent; --hd-input: rgba(255,255,255,.18); }
:root[data-hd="slim"] { --hd-pad: 4px; }
:root[data-hd="slim"] .top { box-shadow: none; }
:root[data-hd="slim"] .top .who .name small { display: none; }
:root[data-hd="cmd"] .top, :root[data-hd="brand"] .top { box-shadow: 0 2px 8px rgba(0, 37, 60, .25); }
:root[data-hd="cmd"] .top .gsearch input, :root[data-hd="brand"] .top .gsearch input { color: #fff; border-color: rgba(255,255,255,.25); }
:root[data-hd="cmd"] .top .gsearch input::placeholder, :root[data-hd="brand"] .top .gsearch input::placeholder { color: rgba(255,255,255,.78); }
:root[data-hd="cmd"] .top .gsearch input:focus, :root[data-hd="brand"] .top .gsearch input:focus { background-color: #fff; color: var(--ink); }
:root[data-hd="cmd"] .top .menu .bars, :root[data-hd="cmd"] .top .menu .bars::before, :root[data-hd="cmd"] .top .menu .bars::after,
:root[data-hd="brand"] .top .menu .bars, :root[data-hd="brand"] .top .menu .bars::before, :root[data-hd="brand"] .top .menu .bars::after { background: #fff; }
:root[data-hd="cmd"] .top .who, :root[data-hd="brand"] .top .who, :root[data-hd="cmd"] .top .who .name small, :root[data-hd="brand"] .top .who .name small { color: #fff; }
:root[data-hd="cmd"] .top .who button, :root[data-hd="brand"] .top .who button, :root[data-hd="cmd"] .top .topactions button:not(#qbtn), :root[data-hd="brand"] .top .topactions button:not(#qbtn) { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
:root[data-hd="cmd"] .top #qbtn, :root[data-hd="brand"] .top #qbtn { background: var(--cyan); border-color: var(--cyan); color: #00263D; }
:root[data-hd="cmd"] .top .who .avatar, :root[data-hd="brand"] .top .who .avatar { background: #fff; color: #003B5E; }

.iconbtn { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
.iconbtn .ico { width: 20px; height: 20px; display: inline-flex; }
.iconbtn .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Appearance dialog */
dialog.appearance { width: min(620px, calc(100vw - 32px)); max-width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.apgroup { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.apgroup legend { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 6px; }
.apopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.apopt { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--btn2); color: var(--ink); border: 1px solid var(--line); padding: 8px 10px; font-weight: 500; }
.apopt:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand); color: var(--ink); }
.apopt[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: var(--brand-50); }
.apopt .aptxt { display: flex; flex-direction: column; min-width: 0; } .apopt b { font-size: 13.5px; } .apopt small { color: var(--muted); font-size: 12px; font-weight: 400; }
.apsw { width: 44px; height: 30px; border-radius: 6px; border: 1px solid var(--line); flex: none; background: var(--bg); }
.sw-theme-light .apsw { background: linear-gradient(90deg, #F3F6FA 50%, #fff 50%); }
.sw-theme-dark .apsw { background: linear-gradient(90deg, #0E1A24 50%, #16242F 50%); }
.sw-theme-auto .apsw { background: linear-gradient(90deg, #F3F6FA 50%, #0E1A24 50%); }
.sw-look-navy .apsw { background: linear-gradient(90deg, #003B5E 30%, #F3F6FA 30%); }
.sw-look-vivid .apsw { background: linear-gradient(90deg, #0A6C9E 30%, #D9F3FF 30%); }
.sw-look-color .apsw { background: linear-gradient(90deg, #003B5E 30%, #E39A1B 30% 55%, #1B7A52 55% 78%, #B3283A 78%); }
.sw-look-classic .apsw { background: linear-gradient(90deg, #fff 30%, #EAF3FA 30%); }
.sw-hd-light .apsw { background: linear-gradient(180deg, #fff 35%, #F3F6FA 35%); }
.sw-hd-cmd .apsw { background: linear-gradient(180deg, #003B5E 35%, #F3F6FA 35%); }
.sw-hd-brand .apsw { background: linear-gradient(180deg, #0B6BAA 35%, #F3F6FA 35%); border-image: none; }
.sw-hd-slim .apsw { background: linear-gradient(180deg, #fff 15%, #F3F6FA 15%); }
:root[data-theme="dark"][data-look="classic"] .nav .logo-full { content: url("/brand/logo-full-light.svg"); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"][data-look="classic"] .nav .logo-full { content: url("/brand/logo-full-light.svg"); } }
.bico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-look="classic"] .brandblock .product { color: var(--ink-2); }
:root[data-theme="dark"] #qbtn { color: #05202F; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] #qbtn { color: #05202F; } }
:root[data-theme="dark"][data-hd="cmd"] .top #qbtn, :root[data-theme="dark"][data-hd="brand"] .top #qbtn { color: #00263D; }
@media (max-width: 900px) { .top .who button#apbtn { display: inline-grid; width: 34px; height: 34px; } }

/* v13.1 D5: Sign out stays reachable and readable in the collapsed rail (icon only, centered, with a name and tooltip). */
.navsignout { align-items: center; justify-content: center; gap: 10px; }
.navsignout svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.navmini .nav .navsignout, .nav-rail-signout { display: flex; }
body.navmini .nav .navsignout .lbl { display: none; }
@media (max-width: 1100px) and (min-width: 901px) { .nav .navsignout { display: flex; } .nav .navsignout .lbl { display: none; } }
@media (max-width: 900px) { .navsignout { display: flex; } .navsignout .lbl { display: inline; } }

/* v14 engagement */
.pill.na { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.enlegend { margin: 8px 0 12px; } .enlegend summary { cursor: pointer; font-weight: 600; }
.entimeline li { padding: 6px 0; }