/* The site header, the Learn Lean menu and breadcrumbs. Self-contained, so older pages that do not
   load main.css get exactly the same header. The markup is written by scripts/site-build.js. */
.hd{--nv-bg:rgba(20,23,27,.94);--nv-line:#2D343B;--nv-text:#ECE9E1;--nv-muted:#9BA2A9;--nv-y:#F2C200;--nv-surface:#1D2227;--nv-surface2:#252B31;
  position:sticky;top:0;z-index:40;background:var(--nv-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--nv-line);
  font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.4;color:var(--nv-text);text-align:left;margin:0;padding:0}
.hd *,.hd *::before,.hd *::after{box-sizing:border-box}
.hd [hidden]{display:none!important}
.hd .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.hd .row{display:flex;align-items:center;justify-content:space-between;gap:8px 28px;flex-wrap:wrap;padding-top:14px;padding-bottom:10px}
.hd .name{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-weight:700;font-size:24px;line-height:1.1;letter-spacing:.02em;text-decoration:none;color:var(--nv-text)}
.hd nav{display:flex;align-items:center;flex:1 1 auto;gap:6px 22px;flex-wrap:wrap;font-size:14.5px;margin:0;padding:0}
.hd nav a,.hd nav summary{color:var(--nv-muted);text-decoration:none;padding:4px 0;cursor:pointer;font:inherit;background:none;border:0;display:inline-block}
.hd nav a:hover,.hd nav summary:hover{color:var(--nv-text)}
.hd nav a[aria-current],.hd nav summary[data-current]{color:var(--nv-text);box-shadow:inset 0 -2px 0 var(--nv-y)}
.hd nav :focus-visible{outline:3px solid var(--nv-y);outline-offset:3px}
.hd .pn-right{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;margin-left:auto}
.hd .acct{color:var(--nv-y)!important;font:500 12.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace!important;letter-spacing:.04em;border:1px solid var(--nv-y);padding:3px 9px!important}
.hd .pn-acct,.hd .pn-acct>span{display:inline-flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.hd nav button.linklike{background:none;border:0;padding:4px 0;color:var(--nv-muted);font:inherit;cursor:pointer;text-decoration:none}
.hd nav button.linklike:hover{color:var(--nv-text)}
.hd details.drop{position:relative}
.hd details.drop summary{list-style:none;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--nv-text)}
.hd details.drop summary::-webkit-details-marker{display:none}
.hd details.drop summary::after{content:"";width:6px;height:6px;border-right:2px solid var(--nv-y);border-bottom:2px solid var(--nv-y);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.hd details.drop[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.hd .menu{position:absolute;top:calc(100% + 8px);left:-14px;min-width:290px;background:var(--nv-surface);border:1px solid var(--nv-line);box-shadow:0 14px 34px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;z-index:60}
.hd .menu a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 12px;color:var(--nv-text);box-shadow:none!important}
.hd .menu a:hover{background:var(--nv-surface2)}
.hd .menu a[aria-current]{box-shadow:inset 3px 0 0 var(--nv-y)!important}
.hd .menu small{font:500 10.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--nv-y)}
@media(max-width:700px){
  .hd .row{flex-direction:column;align-items:flex-start}
  .hd nav{width:100%}
  .hd .pn-right{margin-left:0;width:100%}
  .hd .menu{position:static;box-shadow:none;margin:6px 0 4px;min-width:0;width:100%}
}
.crumbs{font:500 12px/1.4 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.02em;color:#9BA2A9;background:transparent}
.crumbs .wrap{max-width:1200px;margin:0 auto;padding:14px clamp(20px,5vw,64px) 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.crumbs a{color:#9BA2A9;text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:#ECE9E1;border-bottom-color:#F2C200}
.crumbs i{font-style:normal;color:#5C636A}
.crumbs [aria-current]{color:#ECE9E1}

/* Course navigation (written by scripts/site-build.js, behaviour in js/cnav.js): on a wide screen the lesson list sits
   down the left and stays in view; on a phone it folds under a Lessons bar. Back and Next are always at the top. */
main.has-cnav{display:block}
.cnav{font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;font-size:14.5px;line-height:1.35;color:#ECE9E1;text-align:left}
.cnav *,.cnav *::before,.cnav *::after{box-sizing:border-box}
.cnav .cnav-in{max-width:1200px;margin:0 auto;padding:16px clamp(20px,5vw,64px) 4px}
.cnav a{color:inherit;text-decoration:none}
.cnav :focus-visible{outline:3px solid #F2C200;outline-offset:2px}
.cnav-up{margin:0}
.cnav-up a{font:500 11.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#9BA2A9}
.cnav-up a:hover{color:#ECE9E1}
.cnav-title{margin:6px 0 2px;font:700 26px/1.1 'Barlow Condensed','Arial Narrow',Impact,sans-serif;letter-spacing:.01em}
.cnav-title a:hover{color:#F2C200}
.cnav-progress{margin:2px 0 0;font:500 12px 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#F2C200}
.cnav-progress[hidden]{display:none}
.cnav-steps{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.cnav-steps a{border:1px solid #2D343B;padding:8px 12px;font:600 13.5px 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;background:#1D2227}
.cnav-steps a:hover{border-color:#F2C200}
.cnav-steps .cnav-next{background:#F2C200;border-color:#F2C200;color:#14171B}
.cnav-steps .cnav-next:hover{background:#ffd633}
.cnav-d{border-top:1px solid #2D343B;border-bottom:1px solid #2D343B}
.cnav-d>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:11px 2px;font:600 13.5px 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif}
.cnav-d>summary::-webkit-details-marker{display:none}
.cnav-d>summary em{font:500 11.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;font-style:normal;color:#F2C200}
.cnav-d>summary::after{content:"";width:7px;height:7px;border-right:2px solid #F2C200;border-bottom:2px solid #F2C200;transform:rotate(45deg) translateY(-2px);margin-left:2px;flex:none}
.cnav-d[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.cnav-list{list-style:none;margin:0;padding:0 0 8px}
.cnav-list a{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;align-items:start;padding:9px 8px 9px 6px;border-left:3px solid transparent;color:#C9C6BE}
.cnav-list a:hover{background:#1D2227;color:#ECE9E1}
.cnav-list a[aria-current]{background:#1D2227;border-left-color:#F2C200;color:#ECE9E1}
.cnav-list b{font:600 12px 'IBM Plex Mono',ui-monospace,Menlo,monospace;color:#F2C200;text-align:center;padding-top:2px}
.cnav-list li[data-cn-state="passed"] b::after,.cnav-list li.cnav-extra[data-cn-state="done"] b::after{content:" ✓";color:#62B37A}
.cnav-list small{grid-column:2;font:500 10.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#9BA2A9;margin-top:2px}
.cnav-list li.cnav-week>a small{color:#F2C200}
/* the guides, sheets and scorecards that belong to a lesson: folded under it, open on the lesson and on each of their own pages */
.cnav-sub{margin:0 0 6px 34px;border-left:1px solid #2D343B}
.cnav-sub>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:5px 8px;font:500 12.5px 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;color:#9BA2A9}
.cnav-sub>summary::-webkit-details-marker{display:none}
.cnav-sub>summary::before{content:"+";font:600 13px 'IBM Plex Mono',ui-monospace,Menlo,monospace;color:#F2C200;width:10px;text-align:center}
.cnav-sub[open]>summary::before{content:"\2013"}
.cnav-sub>summary:hover{color:#ECE9E1}
.cnav-sub ul{list-style:none;margin:0;padding:0 0 4px}
.cnav-list .cnav-sub a{display:block;padding:6px 8px 6px 10px;font-size:13.5px}
.cnav-list .cnav-sub small{display:block;margin-top:1px}
.cnav-extra{border-top:1px solid #2D343B}
.cnav-extra:first-of-type{margin-top:6px}
.cnav-extra[data-cn-extra="verify"] a{color:#9BA2A9;font-size:13px}
@media(min-width:901px){
  main.has-cnav{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;max-width:1200px;margin:0 auto}
  .cnav{grid-column:1;position:sticky;top:112px;max-height:calc(100vh - 124px);overflow-y:auto;scrollbar-width:thin;padding:8px 0 24px}
  .cnav .cnav-in{max-width:none;padding:16px 12px 4px clamp(20px,5vw,64px)}
  .cnav-d>summary{display:none}
  .cnav-d{border-top:0}
  .cnav-steps{display:grid;grid-template-columns:1fr;gap:6px}
  .cnav-steps .cnav-next{order:-1}
  .cnav-steps a{text-align:center}
  main.has-cnav>.wrap{grid-column:2;grid-row:1;margin:0;max-width:none;width:100%;padding-left:28px;padding-right:clamp(20px,5vw,64px)}
}
@media print{.cnav{display:none}main.has-cnav{display:block}}