/* Next in Marketing — redesign skin for the learning boards.
   The boards keep their authored mind maps and every feature in canvas.js / explore.js / extras.js /
   notes.js / search.js. This file only changes how that chrome looks and where it sits, to match
   redesign/BOARD_DESIGN_SYSTEM.md: warm paper, white cards, indigo for structure, coral for emphasis.
   Loaded after extras.css. The pastel sticky colours are left alone because the boards' highlight keys
   depend on them. */
:root{
  --indigo:#6554C0; --coral:#E9785B; --lavender:#F0EDFA; --line:#DFDDD8; --note:#F9E89B;
  --ground:#F5F5EF; --dot:#D5D3C8; --ink:#252A28; --ink-2:#656C62; --ink-3:#656C62;
  --card:#FFFEFA; --card-edge:#DFDDD8; --border:#DFDDD8;
  --font-heading:"Manrope",sans-serif; --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"DM Sans",-apple-system,sans-serif;
  --mark:#E9785B; --select:#6554C0; --ui-shadow:0 12px 40px rgba(48,38,78,.12);
}
body{font-family:var(--font-body)}

/* central thesis panel and other ink surfaces */
#core .box,.videocard .vc-screen,.chapter-item .ch-badge{background:var(--ink)}
.skip-link{background:var(--indigo)}

/* ── header: markup from header.js, look from header.css; the old one stays hidden until it is swapped ── */
:root{--header-h:78px}
.site-header:not(.nim-hdr) > *{visibility:hidden}

/* ── light panels: notifications, progress, tips, tour, menus, notes ── */
#nimStack #nimProgress,#nimStack #nimNavTip,#nimStack #hint,#nimStack .nim-toast,#nimTourBar,.chapter-menu-box,
#nimPropBar,#nimCreateMenu,#nimPhoneBar,.nim-admin-bar,#nimNotesPanel{
  background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--line)!important;
  border-radius:12px;box-shadow:var(--ui-shadow)!important}
#nimStack #nimProgress *,#nimStack #nimNavTip *,#nimStack #hint *,#nimStack .nim-toast *,#nimTourBar *,
.chapter-menu-box *,#nimPropBar *,#nimCreateMenu *,#nimPhoneBar *,.nim-admin-bar *{color:var(--ink)!important}
#nimStack .nim-prog-subtitle,#nimStack .nt-text span,#nimStack .nav-tip-body,#nimPhoneBar .pb-txt{color:var(--ink-2)!important}
#nimStack .nim-prog-action-btn,#nimStack .nav-tip-dismiss-btn,#nimStack .nt-act,#nimStack #hint .hint-row button,
#nimTourBar button.primary,.admin-btn-accent,#nimPhoneBar.ready .pb-dl{
  background:var(--indigo)!important;color:#fff!important;border:1px solid var(--indigo)!important;border-radius:7px!important}
#nimStack #nimProgress .nim-prog-action-btn,#nimStack #nimProgress .nim-prog-action-btn *,
#nimStack #nimNavTip .nav-tip-dismiss-btn,#nimStack #nimNavTip .nav-tip-dismiss-btn *,
#nimStack #nimToasts .nt-act,#nimStack #nimToasts .nt-act *,#nimStack .nim-toast .nt-act,#nimStack .nim-toast .nt-act *,
#nimStack #hint .hint-row button,#nimStack #hint .hint-row button *{color:#fff!important}
#nimProgress .bar,#nimPhoneBar .bar{background:var(--lavender)!important}
#nimProgress .bar i,#nimPhoneBar .bar i{background:linear-gradient(90deg,var(--indigo),var(--coral))!important}
#nimStack #nimProgress.full{border-color:var(--coral)!important}
#nimPhoneBar .pb-dl{background:var(--lavender);color:var(--ink-2)}
.chapter-close-btn:hover,.prop-font-btn:hover,.prop-size-btn:hover,.prop-act-btn:hover,.prop-size-btn.active,
.prop-shape-btn:hover,.prop-border-btn:hover{background:var(--lavender)!important}
.admin-pulse{background:var(--coral)}
#nimMini{background:var(--card);border:1px solid var(--line);border-radius:12px}
#nimNotesBtn{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:7px;font-family:var(--font-body)}

/* ── download step (lead.js) ── */
#leadCard{background:var(--card);border:1px solid var(--line);border-radius:12px}
.lead-kicker{color:var(--indigo)}
.lead-primary{background:var(--indigo);border-radius:7px}
.lead-primary:hover{background:#5646ad}
#leadCard .lead-check input{accent-color:var(--indigo)}
.lead-check a,.lead-link{color:var(--indigo)}

/* ── footer: light, and one slim row on the canvas ── */
.site-footer{background:var(--card);color:var(--ink);border-top:1px solid var(--line)}
.site-footer h4,.site-footer p,.site-footer .bottom,.site-footer .bottom a,.site-footer .nl-msg,.site-footer .nl-msg a,
.site-footer .badge-item span{color:var(--ink-2)}
.site-footer .bottom{border-top-color:var(--line)}
.site-footer .bottom a:hover,.site-footer .nl-fix{color:var(--indigo)}
.site-footer .badge-item{background:var(--lavender);border-color:#D7D0EE}
.site-footer .badge-item b{color:var(--indigo)}
.site-footer .nl-form input{background:#fff;border-color:var(--line);color:var(--ink)}
.site-footer .nl-form input:focus{outline-color:var(--indigo)}
.site-footer .nl-form button{background:var(--indigo);color:#fff}
.site-footer .nl-msg.err{color:#A8432B}
.site-footer .nl-msg.ok{color:var(--ink)}
.nim-foot-more{display:none}

/* ── section navigator (built by board-skin.js) ── */
.nim-map-nav{display:none}

@media (min-width:761px){
  /* every tool the board offers, in one bar under the map */
  .side-toolbar{left:50%;top:auto;bottom:calc(var(--footer-h,0px) + 14px);transform:translateX(-50%);z-index:40;
    flex-direction:row;gap:4px;padding:6px 8px;max-width:calc(100vw - 24px);box-sizing:border-box;
    background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--ui-shadow)}
  html.nim-reading .side-toolbar{display:flex!important}
  .side-toolbar .tool-modes{flex-direction:row;gap:4px;padding:0 8px 0 0;margin:0 4px 0 0;border-bottom:0;border-right:1px solid var(--line)}
  .side-toolbar button{width:auto;min-width:40px;height:40px;padding:0 10px;gap:6px;border:0;border-radius:7px;box-shadow:none;
    background:transparent;font:500 14px var(--font-body);white-space:nowrap}
  .side-toolbar button:hover{background:var(--lavender);color:var(--ink)}
  .side-toolbar button:not(.active):hover svg{stroke:var(--ink)!important}
  .side-toolbar button:focus-visible{outline:3px solid var(--indigo)}
  .side-toolbar button.active{background:var(--indigo)!important;border-color:var(--indigo)!important;box-shadow:none!important}
  .side-toolbar button[aria-pressed="true"]{background:var(--lavender);color:var(--indigo)}
  .side-toolbar button#nimTour,.side-toolbar button#nimTour:hover{background:transparent!important;border:0!important;color:var(--ink)!important}
  .side-toolbar button#nimTour:hover{background:var(--lavender)!important}
  .side-toolbar button#dl:not(.dl-gradient-cta){color:var(--indigo);font-weight:700}
  .side-toolbar button[data-tip]::after{left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%);
    background:var(--ink);font:600 12px var(--font-body);letter-spacing:0}
  .side-toolbar .sep{width:1px;height:24px;background:var(--line);margin:0 4px;flex:none}
  #zoomval{min-width:38px;font:500 13px var(--font-body);color:var(--ink)}
  #nimNotesBtn{display:none!important}            /* the bar's Notes button opens the same panel */
  #nimMini{bottom:calc(var(--footer-h,0px) + 78px)}   /* sits above the tool bar */
  #nimNotesPanel{bottom:calc(var(--footer-h,0px) + 76px)!important}

  .nim-map-nav{display:block;position:fixed;left:16px;top:calc(var(--header-h,0px) + 16px);z-index:30;width:220px;
    max-height:calc(100vh - var(--header-h,0px) - var(--footer-h,0px) - 110px);overflow:auto;box-sizing:border-box;
    padding:16px 12px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--ui-shadow)}
  .nim-map-nav .map-toggle{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px;padding:0 8px 8px;
    font:700 11.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:#565C54}
  .nim-map-nav .map-toggle:hover{background:none;color:var(--indigo)}
  .nim-map-nav .map-toggle i{font-style:normal;font-size:14px;transition:transform .15s}
  .nim-map-nav.collapsed{padding-bottom:8px}
  .nim-map-nav.collapsed .map-toggle{padding-bottom:0}
  .nim-map-nav.collapsed .map-toggle i{transform:rotate(-90deg)}
  .nim-map-nav.collapsed > :not(.map-toggle):not(#nimTourBar){display:none}
  .nim-map-nav.collapsed{width:auto;padding:6px 8px}
  .nim-map-nav.collapsed .map-toggle{min-height:32px;padding:0 6px}
  .nim-map-nav.collapsed .map-toggle span{display:none}
  .nim-map-nav.collapsed .map-toggle::before{content:"☰  Sections"}
  .nim-map-nav button{display:flex;gap:10px;width:100%;min-height:40px;padding:8px;border:0;border-radius:7px;background:none;
    color:var(--ink);font:500 14px/1.35 var(--font-body);text-align:left;cursor:pointer}
  .nim-map-nav button:hover,.nim-map-nav button[aria-current="true"]{background:var(--lavender)}
  .nim-map-nav button:focus-visible{outline:3px solid var(--indigo);outline-offset:-2px}
  .nim-map-nav button b{flex:none;min-width:18px;color:var(--indigo);font-weight:700}
  .nim-map-nav p{margin:10px 8px 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--ink-2)}

  /* footer: links stay in view; the agency notes and newsletter open from "About & newsletter" */
  .site-footer{padding:6px 24px;overflow:visible}
  .site-footer .bottom{margin-top:0;padding-top:0;border-top:0;max-width:none}
  .site-footer .grid{display:none;position:absolute;left:16px;right:16px;bottom:calc(100% + 70px);z-index:45;max-width:1340px;margin:0 auto;
    padding:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--ui-shadow)}
  .site-footer.open .grid{display:grid}
  .nim-foot-more{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:7px;
    background:var(--card);color:var(--indigo);font:600 12.5px var(--font-body);cursor:pointer}
  .nim-foot-more:hover{background:var(--lavender)}

  /* reading view: the phone layout, in a readable column */
  html.nim-reading #viewport{max-width:760px;margin:0 auto;padding-bottom:120px}
  html.nim-reading .site-header{position:sticky;top:0;z-index:50}
  html.nim-reading .site-footer{position:static;padding-bottom:84px}
  html.nim-reading .site-footer .grid{display:grid;position:static;box-shadow:none;border:0;padding:16px 0}
  html.nim-reading .nim-foot-more,html.nim-reading #nimPhoneBar,html.nim-reading .nim-map-nav,html.nim-reading #nimMini{display:none!important}
  html.nim-reading .side-toolbar :is(.tool-modes,#addBtn,#zoomOut,#zoomval,#zoomIn,#fit,#wheelMode,#nimTour,.sep-view){display:none}
  html.nim-reading .side-toolbar{position:fixed;bottom:14px}
}
/* narrow laptops and tablets: icons only, so the bar still fits on one row */
@media (min-width:761px) and (max-width:1180px){
  .side-toolbar .lbl{display:none}
  .side-toolbar button{padding:0 8px}
  .nim-map-nav{width:190px}
}
@media print{.nim-map-nav,.nim-foot-more{display:none!important}}

/* controls inside the light panels: the engine draws them dark-on-dark */
#nimTourBar button{background:var(--lavender)!important}
#nimTourBar button:hover{background:#E3DCF5!important}
#nimTourBar .tour-chapter-toggle{background:transparent!important}
.chapter-menu-box .chapter-item,.chapter-menu-box .chapter-close-btn{background:transparent!important;border-color:var(--line)!important}
.chapter-menu-box .chapter-item:hover,.chapter-menu-box .chapter-item.active{background:var(--lavender)!important}
.chapter-menu-box .ch-badge{background:var(--indigo)!important;color:#fff!important}
#nimNotesPanel .primary{background:var(--indigo)!important;border-color:var(--indigo)!important;color:#fff!important}
#nimCreateMenu button,#nimPropBar button{background-color:transparent}
#nimCreateMenu button:hover,#nimPropBar button:hover{background-color:var(--lavender)!important}
@media (min-width:761px){
  /* the add menu opened beside the old side rail; the tools now sit at the bottom, so it opens upward */
  #nimCreateMenu{top:auto!important;bottom:calc(var(--footer-h,0px) + 76px)!important;
    max-height:calc(100vh - var(--header-h,0px) - var(--footer-h,0px) - 100px);overflow:auto}
}
@media (max-width:760px){
  .site-header.nim-hdr{position:relative}   /* the phone header stacks its nav inside itself */
  html body #nimNotesBtn{background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
}

/* ── guided tour controls, inside the section navigator ── */
@media (min-width:761px){
  .nim-map-nav #nimTourBar{position:static!important;transform:none;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:10px!important;
    border-radius:10px!important;box-shadow:none!important;background:var(--lavender)!important;border-color:#D7D0EE!important;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .nim-map-nav #nimTourBar[hidden]{display:none!important}
  .nim-map-nav #nimTourBar::before{content:"Guided tour";order:-2;flex:1 0 100%;font:600 10.5px var(--font-body);letter-spacing:.12em;
    text-transform:uppercase;color:var(--indigo)}
  .nim-map-nav #nimTourBar .t{order:-1;flex:1 0 100%;width:auto;padding:0;white-space:normal;overflow:visible}
  .nim-map-nav #nimTourBar .tour-chapter-toggle{display:block;width:100%;height:auto;min-height:0;padding:2px 0 4px;border-radius:0;
    text-align:left;white-space:normal;font:600 14px/1.35 var(--font-body)}
  .nim-map-nav #nimTourBar .tour-chapter-toggle b{display:block;margin:0 0 2px;font:700 12px var(--font-body);color:var(--indigo)!important}
  .nim-map-nav #nimTourBar > button{display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-radius:7px;
    background:var(--card)!important;font-size:18px}
  .nim-map-nav #nimTourBar > button:hover{background:#E3DCF5!important}
  .nim-map-nav #nimTourBar > button:last-child{margin-left:auto}
  body.touring #nimStack{top:calc(var(--header-h,0px) + 14px)}   /* the bar no longer sits above the notifications */
}
@media (max-width:900px){:root{--header-h:70px}}

/* chrome text that poster boards recolour for their own theme must stay readable on the light bar */
.side-toolbar #zoomval{color:#252A28!important}
/* laptop-width windows: the progress box and the overview sat over the right-hand cards */
@media (min-width:761px) and (max-width:1200px){
  #nimStack{width:270px}
  #nimMini{transform:scale(.72);transform-origin:bottom right}
}