/* ============================================================================
   ChemNav — the navigation bar shared by the periodic-table screens
   (/elements, /molecules and their credits pages). See /chem/nav.js.

   On the two wall screens the bar sits in the footer strip of the 1920×1080
   stage and scales with it; on the credits pages it is a fixed strip along the
   bottom of the window (.cn-doc). Same parts, same order, same keys.
   Tokens fall back to the board palette so the credits pages, which do not
   load board.css, render it identically.
   ========================================================================== */
.cn-bar{--cn-amber:var(--amber, #ffb01f); --cn-mono:var(--mono, "Cascadia Mono", Consolas, ui-monospace, monospace);
        --cn-sans:var(--sans, "Segoe UI", system-ui, -apple-system, sans-serif);
        --cn-line:#232a34; --cn-fill:#0c0f14e6; --cn-ink:#d6d9df; --cn-dim:#8b93a1; --cn-dim2:#5c6472}
.cn-tb{display:flex; align-items:center; gap:8px; height:100%; min-width:0}
.cn-path{display:flex; align-items:center; gap:6px; min-width:0; flex:0 1 auto}
.cn-sep{flex:0 0 auto; color:#4b5260; font:600 17px/1 var(--cn-sans); padding:0 1px}

/* a step of the path: where you are, and a menu of its siblings */
.cn-seg{display:inline-flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; max-width:300px; height:40px; padding:0 11px 0 12px;
        border-radius:9px; border:1px solid var(--cn-line); background:var(--cn-fill); color:var(--cn-ink);
        font:600 13px/1 var(--cn-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
        transition:background .15s, border-color .15s, transform .15s}
.cn-seg .cn-v{min-width:0; overflow:hidden; text-overflow:ellipsis; color:#eceae3}
.cn-seg .cn-n{flex:0 0 auto; color:var(--cn-amber); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.cn-seg .cn-car{flex:0 0 auto; width:9px; height:13px; color:var(--cn-dim); margin-left:1px}
.cn-seg.cn-screen{letter-spacing:.16em; padding-left:7px}
.cn-seg.cn-screen .cn-v{color:#e9e6dc}
.cn-badge{flex:0 0 auto; width:26px; height:26px}
.cn-seg[aria-expanded="true"], .cn-seg.cn-on{border-color:var(--cn-amber); background:#151a21}
.cn-seg[aria-expanded="true"] .cn-car, .cn-seg.cn-on .cn-car{color:var(--cn-amber)}

/* transport: previous, play/pause, next */
.cn-tx{display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:10px}
.cn-btn{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; padding:0;
        border-radius:50%; border:1px solid var(--cn-line); background:var(--cn-fill); color:#c9ced6; cursor:pointer;
        font:700 17px/1 var(--cn-sans); transition:background .15s, border-color .15s, color .15s, transform .15s}
.cn-btn svg{width:16px; height:16px; display:block}
.cn-play.cn-paused{background:var(--cn-amber); border-color:var(--cn-amber); color:#0a0c10}
.cn-back{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:40px; padding:0 14px 0 10px; border-radius:9px;
         border:1px solid var(--cn-line); background:var(--cn-fill); color:var(--cn-ink); text-decoration:none;
         font:600 13px/1 var(--cn-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.cn-back svg{width:16px; height:16px}

/* what happens next, or how long the screen will wait */
/* never narrower than its short form, the countdown ("0:52"): a long path gives up the room instead */
.cn-status{flex:1 1 0; min-width:4.8em; padding:0 6px; font:600 12.5px/1.2 var(--cn-mono); letter-spacing:.1em; text-transform:uppercase;
           color:var(--cn-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cn-status b{color:#e9e6dc; font-weight:700}
.cn-status.cn-explore{color:var(--cn-amber)}
.cn-status.cn-hint{color:#e9e6dc}
.cn-status.cn-hint b{color:var(--cn-amber)}

.cn-util{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.cn-src{display:inline-flex; align-items:center; height:40px; padding:0 12px; border-radius:9px; border:1px solid transparent;
        color:var(--cn-dim); text-decoration:none; font:600 12px/1 var(--cn-mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}

@media (hover:hover){
  .cn-seg:hover, .cn-back:hover{background:#151a21; border-color:#3a4250}
  .cn-btn:hover{background:#151a21; border-color:#3a4250; color:#fff}
  .cn-play.cn-paused:hover{background:#ffc04d; color:#0a0c10}
  .cn-src:hover{color:#e9e6dc; border-color:#2a3039}
}
/* focus is drawn for keys and remotes only, big enough to read across a room */
.cn-bar :focus, .cn-pop:focus, .cn-dlg :focus{outline:none}
.cn-bar :focus-visible{outline:2px solid var(--cn-amber); outline-offset:2px; box-shadow:0 0 0 7px #ffb01f2e; transform:translateY(-2px)}

/* the key tip above a focused control: what OK and ▲ ▼ do there */
.cn-tip{position:absolute; z-index:58; padding:9px 13px; border-radius:9px; background:#12161cf2; border:1px solid #ffb01f59;
        box-shadow:0 12px 30px -10px #000; color:#d6d9df; font:600 12.5px/1 var(--mono, Consolas, monospace); letter-spacing:.1em;
        text-transform:uppercase; white-space:nowrap; pointer-events:none}
.cn-tip b{color:#ffb01f; font-weight:700}
body > .cn-tip{position:fixed}

/* ============ a step's menu: a listbox above the bar ============ */
.cn-pop{position:absolute; z-index:60; padding:8px 8px 10px; border-radius:14px; overflow:auto; max-height:820px;
        background:linear-gradient(#14181f,#0b0d11); border:1px solid #2c323c; box-shadow:0 28px 70px -14px #000, 0 0 0 1px #0009;
        color:#e3e6ea; font-family:var(--sans, "Segoe UI", system-ui, sans-serif); animation:cn-in .14s ease-out}
.cn-pop-h{display:flex; justify-content:space-between; gap:24px; padding:8px 12px 10px; border-bottom:1px solid #20262f; margin-bottom:6px;
          font:600 11.5px/1 var(--mono, Consolas, monospace); letter-spacing:.16em; text-transform:uppercase; color:#8b93a1; white-space:nowrap}
.cn-pop-h b{color:#e9e6dc; font-weight:600}
.cn-cols{display:flex; gap:10px; align-items:flex-start}
.cn-col{display:flex; flex-direction:column; gap:2px; min-width:280px}
.cn-grp{padding:12px 12px 6px; font:600 11px/1 var(--mono, Consolas, monospace); letter-spacing:.16em; text-transform:uppercase; color:#c98a12}
.cn-opt{position:relative; display:flex; align-items:center; gap:12px; min-height:40px; padding:0 12px 0 14px; border-radius:8px;
        font:500 17px/1.2 var(--sans, "Segoe UI", system-ui, sans-serif); color:#d6d9df; white-space:nowrap; cursor:pointer}
.cn-opt .cn-ol{min-width:0; overflow:hidden; text-overflow:ellipsis}
.cn-opt .cn-lead{flex:0 0 auto; min-width:28px; font:600 14px/1 var(--mono, Consolas, monospace); color:#ffb01f; font-variant-numeric:tabular-nums}
.cn-opt .cn-note{margin-left:auto; padding-left:14px; font:500 13px/1.25 var(--mono, Consolas, monospace); color:#7d8491; letter-spacing:.02em}
.cn-opt .cn-sub{display:block; margin-top:3px; font:400 13px/1.25 var(--sans, "Segoe UI", system-ui, sans-serif); color:#8b93a1; white-space:normal}
.cn-opt.cn-tall{min-height:58px; padding-top:8px; padding-bottom:8px}
.cn-opt[aria-selected="true"]{color:#fff; font-weight:600}
.cn-opt[aria-selected="true"]::before{content:""; position:absolute; left:3px; top:9px; bottom:9px; width:3px; border-radius:2px; background:#ffb01f}
.cn-opt.cn-act{background:#1d2430; box-shadow:inset 0 0 0 1px #3d4654}
@media (hover:hover){ .cn-opt:hover{background:#181d25} .cn-opt.cn-act:hover{background:#1d2430} }
/* a view's colors, so the menu shows what each choice will look like */
.cn-sw{display:flex; gap:2px; margin-left:auto; padding-left:14px}
.cn-sw i{display:block; width:9px; height:18px; border-radius:2px; box-shadow:inset 0 1px 0 #ffffff26}

/* ============ search and help: dialogs over the stage ============ */
.cn-scrim{position:absolute; top:0; right:0; bottom:0; left:0; z-index:70; background:#04050799}
.cn-dlg{position:absolute; z-index:71; left:50%; top:96px; transform:translateX(-50%); width:920px; border-radius:16px; overflow:hidden;
        background:linear-gradient(#14181f,#0b0d11); border:1px solid #2c323c; box-shadow:0 40px 100px -20px #000;
        color:#e3e6ea; font-family:var(--sans, "Segoe UI", system-ui, sans-serif); animation:cn-in .14s ease-out}
.cn-qrow{display:flex; align-items:center; gap:14px; padding:0 22px; height:72px; border-bottom:1px solid #222831}
.cn-qrow svg{width:24px; height:24px; color:#8b93a1; flex:0 0 auto}
.cn-q{flex:1 1 auto; min-width:0; height:100%; border:0; background:transparent; color:#f5f2e8; font:500 28px/1 var(--sans, "Segoe UI", system-ui, sans-serif); caret-color:#ffb01f}
.cn-q::placeholder{color:#5c6472}
.cn-q::-webkit-search-cancel-button{display:none}
.cn-res{max-height:620px; overflow:auto; padding:6px 10px 10px}
.cn-res .cn-grp{padding-top:14px}
.cn-res .cn-opt{min-height:48px; font-size:19px}
.cn-res .cn-opt .cn-note{font-size:13.5px}
.cn-empty{padding:26px 16px 18px; font:400 18px/1.5 var(--sans, "Segoe UI", system-ui, sans-serif); color:#9aa2af}
.cn-empty b{color:#e9e6dc; font-weight:600}
.cn-dlg-f{display:flex; justify-content:space-between; gap:20px; padding:12px 22px; border-top:1px solid #222831;
          font:600 12px/1.3 var(--mono, Consolas, monospace); letter-spacing:.12em; text-transform:uppercase; color:#6b7280}
.cn-dlg-f b{color:#c9ced6; font-weight:600}
.cn-help{width:1180px}
.cn-help h2{margin:0; padding:24px 28px 6px; font:700 30px/1.15 var(--sans, "Segoe UI", system-ui, sans-serif); color:#f5f2e8}
.cn-help .cn-lede{margin:0; padding:0 28px 18px; font:400 18px/1.45 var(--sans, "Segoe UI", system-ui, sans-serif); color:#aab1bd}
.cn-help-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding:0 22px 22px}
.cn-help-col{background:#0d1014; border:1px solid #1f242c; border-radius:12px; padding:16px 18px 10px}
.cn-help-col h3{margin:0 0 12px; font:600 12px/1 var(--mono, Consolas, monospace); letter-spacing:.16em; text-transform:uppercase; color:#ffb01f}
.cn-help-col dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:baseline}
.cn-help-col dt{font:700 14px/1.2 var(--mono, Consolas, monospace); color:#f2efe4; white-space:nowrap}
.cn-help-col dd{margin:0; font:400 16px/1.4 var(--sans, "Segoe UI", system-ui, sans-serif); color:#c9ced6}
kbd.cn-k{display:inline-block; min-width:22px; padding:3px 6px; border-radius:5px; border:1px solid #3a4250; background:#151a21; text-align:center; font:700 13px/1 var(--mono, Consolas, monospace); color:#f2efe4}

@keyframes cn-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.cn-dlg{animation-name:cn-dlg-in}
@keyframes cn-dlg-in{from{opacity:0; transform:translate(-50%, 8px)} to{opacity:1; transform:translate(-50%, 0)}}
body.reduce .cn-bar *, body.reduce .cn-pop, body.reduce .cn-dlg{transition:none !important; animation:none !important}
@media (prefers-reduced-motion:reduce){ .cn-bar *, .cn-pop, .cn-dlg{transition:none !important; animation:none !important} }

/* ============ Ambient: the soundscape's play/pause, a small live meter, its volume ============ */
/* one pill in the bar's own grammar: dim while it rests, the word lit and three amber bars
   breathing while it plays; the slider beside it is the volume */
.cn-amb{display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; height:40px; padding:0 2px 0 0; box-sizing:border-box;
        border-radius:9px; border:1px solid var(--cn-line); background:var(--cn-fill); transition:border-color .15s}
.cn-ambb{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 9px 0 11px; border:0; border-radius:8px;
         background:transparent; color:var(--cn-dim); font:600 12px/1 var(--cn-mono); letter-spacing:.14em; text-transform:uppercase;
         white-space:nowrap; cursor:pointer; transition:color .15s, background .15s, transform .15s}
.cn-amb-i{display:inline-flex; width:11px; height:11px}
.cn-amb-i svg{width:11px; height:11px; display:block}
.cn-eq{display:inline-flex; align-items:flex-end; gap:2px; width:13px; height:12px}
.cn-eq i{display:block; width:3px; height:3px; border-radius:1px; background:currentColor; opacity:.5}
.cn-amb-on{border-color:#3a3322}
.cn-amb-on .cn-ambb{color:#e9e6dc}
.cn-amb-on .cn-amb-i{color:var(--cn-amber)}
.cn-amb-on .cn-eq i{background:var(--cn-amber); opacity:.95; animation:cn-eq 1.7s ease-in-out infinite}
.cn-amb-on .cn-eq i:nth-child(2){animation-duration:2.3s; animation-delay:-.8s}
.cn-amb-on .cn-eq i:nth-child(3){animation-duration:1.9s; animation-delay:-1.3s}
@keyframes cn-eq{0%, 100%{height:3px} 50%{height:11px}}
.cn-vol{-webkit-appearance:none; appearance:none; width:70px; height:22px; margin:0 8px 0 0; padding:0; background:transparent; cursor:pointer; --cn-vol:60%}
.cn-vol::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:linear-gradient(90deg, var(--cn-amber) var(--cn-vol), #39404c var(--cn-vol))}
.cn-vol::-webkit-slider-thumb{-webkit-appearance:none; width:11px; height:11px; margin-top:-4px; border:0; border-radius:50%; background:#e9e6dc}
.cn-vol::-moz-range-track{height:3px; border-radius:2px; background:#39404c}
.cn-vol::-moz-range-progress{height:3px; border-radius:2px; background:var(--cn-amber)}
.cn-vol::-moz-range-thumb{width:11px; height:11px; border:0; border-radius:50%; background:#e9e6dc}
.cn-amb:not(.cn-amb-on) .cn-vol{opacity:.55}
@media (hover:hover){
  .cn-amb:hover{border-color:#3a4250}
  .cn-ambb:hover{color:#fff}
}
/* a still meter for anyone who asked for less motion */
body.reduce .cn-amb-on .cn-eq i{height:7px}
@media (prefers-reduced-motion:reduce){
  .cn-amb-on .cn-eq i{height:7px}
  .cn-amb-on .cn-eq i:nth-child(2){height:11px}
  .cn-amb-on .cn-eq i:nth-child(3){height:5px}
}

/* ============ the credits pages: a fixed strip along the window's foot ============ */
.cn-bar.cn-doc{position:fixed; left:0; right:0; bottom:0; z-index:50; height:62px; padding:0 18px; box-sizing:border-box;
               background:#0b0d11f5; border-top:1px solid #262c35; box-shadow:0 -12px 30px -18px #000}
body.cn-has-doc{padding-bottom:96px !important}
.cn-doc ~ .cn-scrim, body > .cn-scrim{position:fixed}
body > .cn-dlg{position:fixed; max-width:calc(100vw - 24px)}
body > .cn-dlg.cn-help{max-height:calc(100vh - 140px); overflow:auto}
body > .cn-pop{position:fixed}
@media (max-width:900px){
  .cn-doc .cn-status{display:none}
  .cn-doc .cn-vol{display:none}
  .cn-help-cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cn-doc .cn-src, .cn-doc .cn-back span{display:none}
  .cn-doc .cn-amb-w{display:none}
  .cn-doc .cn-seg{max-width:180px}
  .cn-doc .cn-seg.cn-screen .cn-v{display:none}
  body > .cn-dlg{top:12px}
  .cn-q{font-size:22px}
}