/* ── nav.css — finding your way round the bank (nav.js): the plain name beside each code on the bar,
   ALL FUNCTIONS at the head of the row, the department and Back in each pane head, and the directory
   of every function. ─────────────────────────────────────────────────────────────────────────── */

/* the bar: CODE and its name */
#fn-bar .fn.fn-named{ display:inline-flex; align-items:baseline; gap:var(--sp-1h); }
#fn-bar .fn-nm{ font:500 var(--fs-2) var(--sans); letter-spacing:0; text-transform:none; color:var(--sky-dim); }
#fn-bar .fn.on .fn-nm, #fn-bar .fn:hover .fn-nm{ color:var(--sky-text); }
#fn-bar .fn.locked .fn-nm{ color:var(--sky-dim); opacity:.7; }

/* ALL FUNCTIONS */
#fn-bar .fn-all{ display:inline-flex; align-items:center; gap:var(--sp-1h); margin-right:var(--sp-2); padding:var(--sp-1) var(--sp-2h); font:600 var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--sky-amber-hi); background:var(--sky-amber-wash); border:1px solid var(--sky-amber-line); border-radius:var(--sp-1); cursor:pointer; white-space:nowrap; }
#fn-bar .fn-all:hover, #fn-bar .fn-all:focus-visible{ background:var(--sky-amber-glow-3); color:var(--sky-text); }
#fn-bar .fn-row:has(.fn-all)::before{ display:none; }
/* with the names on, the row's shortcut digits give way (Ctrl+Shift+n stays in each title and on the ? sheet) */
#fn-bar .fn-row .fn.fn-named[data-gc-n]::before{ display:none; }

/* the pane head: the department it belongs to, and Back */
.pane-head .ph-dept{ background:none; border:0; padding:0 var(--sp-1) 0 0; margin-right:var(--sp-1); font:var(--fs-1) var(--mono); letter-spacing:.12em; color:var(--sky-dim); cursor:pointer; border-right:1px solid var(--sky-line); }
.pane-head .ph-dept:hover, .pane-head .ph-dept:focus-visible{ color:var(--sky-amber-hi); }
.pane-head .ph-back{ display:inline-flex; align-items:center; gap:var(--sp-0); margin-right:var(--sp-2); padding:var(--sp-0) var(--sp-1h) var(--sp-0) var(--sp-1); font:600 var(--fs-1) var(--mono); letter-spacing:.08em;
  color:var(--sky-text); background:var(--sky-tile-2); border:1px solid var(--sky-line-2); border-radius:var(--sp-1); cursor:pointer; }
.pane-head .ph-back:hover, .pane-head .ph-back:focus-visible{ border-color:var(--sky-amber-line); color:var(--sky-amber-hi); }

/* the directory */
.gc-dir [hidden]{ display:none !important; }
.gc-dir-ov{ position:fixed; inset:0; z-index:520; display:flex; align-items:flex-start; justify-content:center; padding:var(--sp-6) var(--sp-4); background:var(--scrim); overflow:auto; }
.gc-dir{ width:min(1180px, 100%); box-sizing:border-box; padding:var(--sp-4) var(--sp-5) var(--sp-3); background:var(--sky-glass-float); backdrop-filter:var(--sky-blur); -webkit-backdrop-filter:var(--sky-blur);
  border:1px solid var(--sky-line-2); border-radius:var(--sp-2); box-shadow:var(--shadow-float); color:var(--sky-text); animation:gd-in .18s ease-out; }
@keyframes gd-in{ from{ opacity:0; translate:0 var(--sp-2); } to{ opacity:1; translate:0 0; } }
.gd-top{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.gd-top h2{ margin:0; font:600 var(--fs-6) var(--sans); white-space:nowrap; }
.gd-search{ flex:1; display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-3); min-height:var(--h-cmd); background:var(--sky-term); border:1px solid var(--sky-line-2); border-radius:var(--sp-1h); color:var(--sky-dim); }
.gd-search:focus-within{ border-color:var(--sky-amber-line); box-shadow:0 0 0 3px var(--sky-amber-glow); }
.gd-search input{ flex:1; min-width:0; background:none; border:0; outline:0; padding:var(--sp-2) 0; font:var(--fs-4) var(--sans); color:var(--sky-text); }
.gd-search input::placeholder{ color:var(--sky-dim); }
.gd-x{ display:inline-flex; align-items:center; justify-content:center; width:var(--h-cmd); height:var(--h-cmd); background:none; border:1px solid var(--sky-line); border-radius:var(--sp-1h); color:var(--sky-muted); cursor:pointer; }
.gd-x:hover, .gd-x:focus-visible{ color:var(--sky-text); border-color:var(--sky-amber-line); }

.gd-rec{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-1h); margin-bottom:var(--sp-3); }
.gd-rec-k{ font:var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sky-dim); margin-right:var(--sp-1); }
.gd-chip{ padding:var(--sp-1) var(--sp-2h); font:var(--fs-3) var(--sans); color:var(--sky-text); background:var(--sky-tile); border:1px solid var(--sky-line); border-radius:999px; cursor:pointer; }
.gd-chip b{ font:600 var(--fs-1) var(--mono); letter-spacing:.08em; color:var(--sky-amber-hi); margin-right:var(--sp-0); }
.gd-chip:hover, .gd-chip:focus-visible{ border-color:var(--sky-amber-line); }

.gd-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-3); align-items:start; }
.gd-card{ padding:var(--sp-2) var(--sp-2) var(--sp-1h); background:var(--sky-tile); border:1px solid var(--sky-line); border-radius:var(--sp-1h); }
.gd-card.is-cur{ border-color:var(--sky-amber-line); }
.gd-h{ display:flex; align-items:center; gap:var(--sp-1h); flex-wrap:wrap; margin:0 0 var(--sp-1h); padding:0 var(--sp-1); font:600 var(--fs-2) var(--mono); letter-spacing:.14em; color:var(--sky-amber-hi); }
.gd-h small{ flex-basis:100%; font:var(--fs-2) var(--sans); letter-spacing:0; color:var(--sky-dim); }
.gd-fn{ display:grid; grid-template-columns:calc(52 * var(--u)) minmax(0, 1fr); column-gap:var(--sp-2); width:100%; text-align:left; padding:var(--sp-1h) var(--sp-1); background:none; border:0; border-radius:var(--sp-1); color:var(--sky-text); cursor:pointer; }
.gd-fn:hover, .gd-fn:focus-visible{ background:var(--sky-amber-wash); outline:0; }
.gd-fn:focus-visible{ box-shadow:inset 0 0 0 1px var(--sky-amber-line); }
.gd-c{ grid-row:1 / span 3; font:600 var(--fs-2) var(--mono); letter-spacing:.08em; color:var(--sky-amber-hi); padding-top:var(--sp-0); }
.gd-n{ font:600 var(--fs-4) var(--sans); }
.gd-d{ font:var(--fs-2) var(--sans); color:var(--sky-muted); }
.gd-st{ justify-self:start; margin-top:var(--sp-0); font:var(--fs-1) var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.gd-st.on{ color:var(--sky-teal); }
.gd-st.gate{ color:var(--sky-info); }
.gd-st.shut{ color:var(--sky-dim); }
.gd-fn.is-shut{ cursor:default; }
.gd-fn.is-shut .gd-c, .gd-fn.is-shut .gd-n{ color:var(--sky-dim); }
.gd-fn.is-shut:hover{ background:none; }
.gd-nudge{ animation:gd-nudge .4s ease; }
@keyframes gd-nudge{ 25%{ translate:-3px 0; } 75%{ translate:3px 0; } }
.gd-none{ margin:var(--sp-4) 0; color:var(--sky-muted); font:var(--fs-4) var(--sans); text-align:center; }
.gd-foot{ margin:var(--sp-3) 0 0; font:var(--fs-2) var(--sans); color:var(--sky-dim); }
.gd-foot b{ font:600 var(--fs-1) var(--mono); color:var(--sky-muted); }

/* a phone: the row's cells stack the code over the name; the directory fills the screen */
@media (max-width:900px){
  #fn-bar .fn-row .fn.fn-named{ flex-direction:column; align-items:center; justify-content:center; gap:0; line-height:1.15; }
  #fn-bar .fn-row .fn-nm{ font-size:var(--fs-1); }
  #fn-bar .fn-row .fn-all{ flex:0 0 auto; margin:0; height:var(--h-touch); border:0; border-right:1px solid var(--sky-line); border-radius:0; padding:0 var(--sp-3); flex-direction:column; justify-content:center; gap:var(--sp-0); font-size:var(--fs-1); }
  #fn-bar .fn-row .fn-all .fn-all-t{ font-size:var(--fs-1); letter-spacing:.06em; }
  .pane-head .ph-dept{ display:none; }
  .pane-head .ph-back{ min-height:var(--h-touch); min-width:var(--h-touch); justify-content:center; margin-right:var(--sp-1); }
  .gc-dir-ov{ padding:0; }
  .gc-dir{ min-height:100%; border-radius:0; border:0; padding:calc(var(--gc-sat) + var(--sp-3)) calc(var(--gc-sar) + var(--sp-3)) calc(var(--gc-sab) + var(--sp-4)) calc(var(--gc-sal) + var(--sp-3)); }
  .gd-top{ flex-wrap:wrap; }
  .gd-top h2{ flex:1; }
  .gd-search{ order:3; flex-basis:100%; min-height:var(--h-touch); }
  .gd-search input{ font-size:var(--fs-5); min-height:var(--h-touch); padding:0; }
  .gd-x{ width:var(--h-touch); height:var(--h-touch); }
  .gd-chip{ min-height:var(--h-touch); }
  .gd-grid{ grid-template-columns:minmax(0, 1fr); }
  .gd-fn{ min-height:var(--h-touch); padding:var(--sp-2) var(--sp-1); }
}
@media (prefers-reduced-motion: reduce){ .gc-dir, .gd-nudge{ animation:none; } }
@media print{ .gc-dir-ov, .fn-all, .ph-back, .ph-dept{ display:none !important; } }