/* Shared chrome — LinkedIn Cobalt with a light-blue accessible dark-surface accent.
   Ink #191919 · Paper #FFFFFF · Mute #666666 · Accent #0A66C2 · Soft #F3F2EF
   Accent is for links/CTAs on light surfaces. Dark chrome uses #8FC7FF for
   readable secondary text. Light surfaces keep Mute. Primary dark text is Paper.
   Aliases below are remaps, not extra hues.
   Elegance (DESIGN-ELEGANT-001): generous whitespace, restrained type,
   hairline borders, no chips/shadows/hover-lift. Critique not landed at ship;
   apply the same polish if it arrives later.
   Future inference (Method / Python): randomize cobalt | google-blue | trust-navy,
   log data-palette with visitor events, pick winner at n≥20+CI. Default NOW = cobalt.
   Do not ship the randomizer until that handoff. */
:root, html[data-palette="cobalt"]{
  --ink:#191919;
  --paper:#FFFFFF;
  --mute:#666666;
  --accent:#0A66C2;
  --soft:#F3F2EF;
  --raised:#FFFFFF;
  --body:#666666;
  --rule:color-mix(in srgb, var(--ink) 14%, var(--paper));
  --signal:var(--mute);
  --signal-soft:var(--soft);
  --live:var(--mute);
  --warn:var(--mute);
  --navy:var(--ink);
  --navy-ink:var(--paper);
  --navy-soft:var(--accent);
  --navy-rule:var(--mute);
  --panel:var(--ink);
  --panel-ink:var(--paper);
  --panel-soft:var(--accent);
  --on-dark:#8FC7FF;
  --panel-rule:color-mix(in srgb, var(--paper) 18%, var(--ink));
  --ground:var(--soft);
  --surface:var(--paper);
  --line:var(--rule);
  --text:var(--ink);
  --muted:var(--mute);
  --faint:var(--mute);
  --acc:var(--ink);
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --ui:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a{color:var(--accent)}
a:hover{color:var(--ink)}
.chrome-bar,.masthead.chrome-bar,.bar.chrome-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 16px;position:sticky;top:0;z-index:30;
  background:var(--ink);color:var(--paper)}
.chrome-mark,a.mark.chrome-mark,header .mark,.masthead .mark,.bar .mark{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;font-weight:700;color:var(--paper);text-decoration:none;letter-spacing:-.01em;flex:none;
  display:inline-flex;align-items:center;min-height:44px}
.chrome-mark span,a.mark.chrome-mark span,header .mark span,.masthead .mark span,.bar .mark span{color:var(--paper)}
.chrome-mark .chrome-clock,a.mark .chrome-clock{font:700 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-left:.35em}
.where,.chrome-bar .where,header .where,.bar .where,.masthead .where{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.10em;
  text-transform:uppercase;color:var(--on-dark);padding:0;border:0;background:transparent;border-radius:0}
.where:empty,.where[hidden]{display:none!important}
.chrome-date,.bardate,[data-chrome-date],[data-live-date],[data-chrome-tagline]{display:none!important}
.header-calendar{color:var(--on-dark);font:500 12px/1.5 var(--ui);white-space:nowrap}
header.chrome-bar > .top{margin:0;padding:0;flex:none}
@media(max-width:600px){
  .chrome-bar,.masthead.chrome-bar,.bar.chrome-bar{gap:8px 12px;padding:8px 16px}
}
/* Wide screens: line the header up with the 1080 column the pages already use. */
@media (min-width:1120px){
  body:not(.xp-app) > header.chrome-bar,
  body:not(.xp-app) > header.masthead{
    padding-left:max(24px, calc((100% - var(--page-max, 1080px)) / 2 + 24px));
    padding-right:max(24px, calc((100% - var(--page-max, 1080px)) / 2 + 24px));
  }
}

.chrome-shell{max-width:1080px;margin:0 auto;padding:28px 32px 0}
.chrome-sum{display:none!important}

.chrome-ask{display:flex;align-items:center;gap:8px;width:min(580px,100%);margin:0 auto;
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:8px 8px 8px 22px}
.chrome-ask input{flex:1 1 auto;min-width:0;border:0;background:transparent;
  font:16px/1.5 "Public Sans",-apple-system,sans-serif;color:var(--ink);padding:10px 0}
.chrome-ask input:focus{outline:none}
.chrome-ask input::placeholder{color:var(--mute)}
.chrome-mic{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--soft);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.chrome-mic svg{width:19px;height:19px;fill:currentColor}
.chrome-mic[aria-pressed="true"]{background:var(--accent);color:var(--paper)}
.chrome-mic[hidden]{display:none!important}

.chrome-tabs{display:none!important}

#chrome-flow,.chrome-flow,.chrome-flow-chart,.sf-feedback-label{display:none!important}

.liveflow.idle .sf-block,.liveflow.idle .sf-sum{opacity:.34}
.sf-block.done,.sf-block.on{border-color:var(--accent)}
.sf-block.now{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(10,102,194,.45)}

.chrome-foot,footer.chrome-foot{
  box-sizing:border-box;width:100%;
  margin:24px auto 0;padding:16px 16px 24px;border-top:1px solid var(--rule);
  display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;font-size:16px;color:var(--mute);
  max-width:920px}
.chrome-foot a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.chrome-foot a:hover{color:var(--ink)}
.chrome-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.chrome-foot nav{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;width:100%;min-width:0}
.chrome-foot-main,.chrome-foot-contact{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-width:0}
.chrome-foot-contact{margin-left:auto;justify-content:flex-end}
.chrome-foot .chrome-linkedin{width:44px;justify-content:center;flex:none}
.chrome-linkedin svg{display:block;width:22px;height:22px;fill:currentColor}
.chrome-disclaimer{flex:1 0 100%;margin:8px 0 0;max-width:72ch;font-size:16px;line-height:1.45;color:var(--mute)}
@media(max-width:600px){
  .chrome-foot,footer.chrome-foot{padding:12px 16px 20px}
  .chrome-foot-main,.chrome-foot-contact{gap:12px}
}

/* Kill legacy noise site-wide */
.cli,#statuscli,#cliout,.liveflow-motto,.liveflow-replay,[data-chrome-date],
.wordmark,#today,.strip.more,.by.motto,.bardate,.chrome-date,[data-chrome-tagline]{display:none!important}

body.sitefoot{display:flex;flex-direction:column;min-height:100vh;
  margin:0;background:var(--soft);color:var(--body);
  font-family:var(--ui);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body.xp-app.sitefoot{font-size:inherit;line-height:inherit}
body.sitefoot > header.chrome-bar,
body.sitefoot > header.masthead,
body.sitefoot > header.bar{flex:0 0 auto}
body.sitefoot > #chrome-ask-shell{flex:0 0 auto;width:100%}
/* Full-width blocks with side padding must include it in their width, or
   every page without its own border-box rule scrolls sideways on a phone
   (agents and stats did, by 64px; method, history and stream patched it
   locally). */
body.sitefoot > #chrome-ask-shell,body.sitefoot > .wrap,.chrome-shell,.chrome-ask{box-sizing:border-box}
body.sitefoot > .wrap,
body.sitefoot > main{flex:1 0 auto;width:100%}
body.sitefoot > .wrap{max-width:1080px;margin:0 auto;padding:0 24px 24px}
@media(max-width:480px){
  body.sitefoot:not(.xp-app) > .wrap{padding:0 16px 24px}
}
body.sitefoot > footer,body.sitefoot > .chrome-foot,
body.sitefoot > .wrap > footer{margin-top:auto}
body.sitefoot:not(.xp-app) .wrap > h1,
body.sitefoot:not(.xp-app) main.legal > h1{
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:24px;line-height:1.2;letter-spacing:-.02em;
  margin:12px 0 8px;text-wrap:balance}
nav.chromenav,nav.barnav{display:none!important}

/* Cabinet leftovers stay footer-driven; no mid-page tab row */
.cabinet-tabs{display:none!important}
.cabinet-panel[hidden],.cabinet-panel:not(.is-on){display:none!important}
.cabinet-panel.is-on{display:block;margin:8px 0 14px;padding:12px 14px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);
  max-height:min(42vh,420px);overflow:auto}
.cabinet-panel .cab-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.cabinet-panel .cab-head h2{margin:0;font:700 15px/1.2 system-ui,sans-serif;color:var(--ink);letter-spacing:.02em}
.cabinet-panel .cab-head .cab-sum{margin:0;font:500 13px/1.35 system-ui,sans-serif;color:var(--mute);max-width:48ch}
.cabinet-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 8px}
.cabinet-card{background:var(--soft);border:1px solid var(--rule);border-radius:4px;padding:10px 12px}
.cabinet-card h3{margin:0 0 4px;font:700 11px/1.2 system-ui,sans-serif;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.cabinet-card p{margin:0;font-size:12.5px;line-height:1.35;color:var(--mute);max-width:28ch}
.cabinet-card .num{font:700 22px/1.1 ui-monospace,Menlo,monospace;color:var(--ink);margin:6px 0 2px}
.cabinet-ill{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px}
.cabinet-ill .step{border:1px solid var(--rule);border-radius:4px;padding:8px;background:var(--soft);min-width:0}
.cabinet-ill .step b{display:block;font:700 11px/1.2 system-ui,sans-serif;color:var(--ink);margin-bottom:3px}
.cabinet-ill .step span{font:500 12px/1.3 system-ui,sans-serif;color:var(--mute)}
.cabinet-table{width:100%;border-collapse:collapse;font:500 13px/1.35 system-ui,sans-serif}
.cabinet-table th,.cabinet-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--rule);color:var(--mute)}
.cabinet-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.cabinet-panel details.cab-more{margin-top:8px;font:500 12.5px/1.4 system-ui,sans-serif;color:var(--mute)}
.cabinet-panel details.cab-more summary{cursor:pointer;color:var(--accent);font-weight:600}
.cabinet-spark{display:block;width:100%;height:56px;margin:4px 0 8px}
.cabinet-board[hidden]{display:none!important}
@media (max-width:640px){
  .cabinet-ill{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cabinet-panel.is-on{max-height:min(48vh,480px)}
}
.skip{
  position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus,.skip:focus-visible{
  left:12px;top:12px;z-index:80;width:auto;height:auto;clip-path:none;overflow:visible;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:3px;min-height:44px;
  font:600 16px/1.2 var(--ui,system-ui,sans-serif);
  display:inline-flex;align-items:center}
.crumb{font-size:16px;margin:0 0 .75rem;color:var(--mute,#5a6a7a)}
.crumb a{color:inherit}
.crumb [aria-current="page"]{font-weight:700;color:var(--ink,#1a2744);text-decoration:none}

/* Phone menu. Same destinations as the footer. Hidden on a wide header so the
   release rail keeps the row it already measured. */
.chrome-menu{display:none}
.chrome-menu summary{
  list-style:none;cursor:pointer;min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;color:var(--paper);font:600 16px/1 var(--ui,system-ui,sans-serif);
  border-radius:4px}
.chrome-menu summary::-webkit-details-marker{display:none}
.chrome-menu summary:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
.chrome-menu nav{
  position:absolute;right:0;top:calc(100% + 4px);z-index:40;
  background:var(--ink);display:flex;flex-direction:column;min-width:220px;
  padding:6px 0;border:1px solid var(--panel-rule)}
.chrome-menu nav a{
  color:var(--paper);text-decoration:none;min-height:44px;
  display:flex;align-items:center;padding:0 16px;font-size:16px}
.chrome-menu nav a:hover,.chrome-menu nav a:focus-visible{color:var(--on-dark)}
@media (max-width:720px){
  .chrome-menu{display:block;position:relative;margin-left:auto;flex:none}
  /* The date is not a control. A 44px row of its own pushed the hero down
     once the clock, the date and the release rail arrived. Hold the final
     phone height from first paint so that arrival does not shift the page.
     /experience/ is a one-screen layout and is left alone. */
  body:not(.xp-app) > header.chrome-bar,
  body:not(.xp-app) > header.masthead{
    align-items:flex-start;
    min-height:112px;
  }
  body:not(.sitefoot):not(.xp-app) > header.masthead{min-height:164px}
  .header-calendar{font-size:16px;min-height:0;display:inline-flex;align-items:center}
  .where,.chrome-bar .where,header .where,.bar .where,.masthead .where{font-size:16px;letter-spacing:.04em}
  /* /experience/ is a one-screen layout. A second header row or a taller
     footer makes the page scroll, which that screen is not allowed to do. */
  body.xp-app .chrome-menu{display:none}
  body.xp-app .header-calendar{font-size:12px;min-height:0}
  body.xp-app .where{font-size:11px;letter-spacing:.1em}
  body.xp-app .chrome-mark{min-height:0}
}

/* Tap size on a phone. min-height wins over a shorter height. Font size is
   raised in chrome.js so type that is already larger stays larger. */
@media (max-width:480px){
  button, summary, input, select, textarea, .chrome-mic, .seekmic{
    min-height:44px}
  button, summary, .chrome-mic, .seekmic{min-width:44px}
  /* The studio sheet is measured to the phone. Growing its choices makes the
     sheet scroll, which the studio phone tests forbid. */
  #studio-app button, #studio-app input, #studio-app select, #studio-app textarea, #studio-app summary{
    min-height:0;min-width:0}
  .chrome-foot a, .chrome-menu nav a, .cta a, .links a, .legal a, p > a, li > a{
    min-height:44px;display:inline-flex;align-items:center}
  #nextDeploy{min-height:44px;display:flex;align-items:center}
  .caveat, .updated, .hero-sub, .lede, .legal p, .legal li{font-size:16px}
}