/* Site + app chrome: one nav, one app top bar, one footer.
   Previously re-declared inline in every canvas. */

/* ---- Marketing nav (dark bar, lime hover) ---- */
.nav{background:var(--ink);display:flex;align-items:center;gap:22px;
  padding:12px clamp(16px,3vw,26px);position:sticky;top:0;z-index:40}
.nav a{color:var(--ink-inv);text-decoration:none}
.nav a:hover{color:var(--lime);background:transparent}
.nav__brand{font-family:var(--serif);font-size:24px;line-height:1;
  color:var(--lime)!important;white-space:nowrap}
.nav__links{display:flex;gap:20px;font-size:var(--t-ui);font-weight:600}
.nav__cta{font-size:var(--t-ui);font-weight:700;background:var(--lime);
  color:var(--ink)!important;border:1px solid var(--lime);padding:10px 16px;
  white-space:nowrap;flex:none}
.nav__cta:hover{background:var(--lime-deep);color:var(--ink)!important}
.nav__toggle{display:none;background:none;border:1px solid var(--ink-3);
  color:var(--ink-inv);padding:8px 12px;font-size:var(--t-small);cursor:pointer}
@media (max-width:860px){
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--ink);padding:8px 20px 18px;gap:14px}
  .nav__links[data-open=true]{display:flex}
  .nav__toggle{display:block}
}

/* ---- App top bar ---- */
.topbar{background:var(--ink);display:flex;align-items:center;gap:22px;
  padding:12px clamp(16px,3vw,26px)}
.topbar a{color:var(--ink-inv);text-decoration:none}
.topbar a:hover{color:var(--lime);background:transparent}
.topbar__brand{font-family:var(--serif);font-size:24px;line-height:1;
  color:var(--lime)!important;white-space:nowrap}
.topbar__where{font-size:var(--t-small);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-inv);white-space:nowrap}
.topbar__links{display:flex;gap:18px;font-size:var(--t-ui);font-weight:600}
.topbar__links a[aria-current=page]{color:var(--lime)!important}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--lime);
  color:var(--ink)!important;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.04em;flex:none}
.avatar:hover{background:var(--lime-deep);color:var(--ink)!important}
@media (max-width:700px){.topbar__links{display:none}}

/* ---- Footer ---- */
.footer{background:var(--ink);color:var(--ink-inv);padding:var(--gap) var(--pad-frame)}
.footer a{color:var(--ink-inv)}
.footer a:hover{color:var(--lime);background:transparent}
.footer__grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.footer__brand{font-family:var(--serif);font-size:28px;line-height:1;color:var(--lime)}
.footer__tag{font-size:var(--t-body);color:var(--ink-inv);margin:8px 0 16px}
.footer__fine{font-size:var(--t-small);line-height:1.55;color:var(--ink-4);max-width:46ch}
.footer__h{font-size:var(--t-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 12px}
.footer__nav{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:var(--t-ui)}
.sources p{font-size:var(--t-small);line-height:1.6;color:var(--ink-4);margin:0 0 12px}
.sources .ref{color:var(--lime);font-weight:700;margin-right:5px}

/* ---- Prototype/state switcher (was "Prototype controls" in 9 canvases) ---- */
.protobar{background:var(--alt);border-bottom:1px solid var(--border);
  padding:10px clamp(16px,3vw,26px);display:flex;flex-wrap:wrap;
  gap:10px 18px;align-items:center;font-size:var(--t-small)}
.protobar__k{font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-size:var(--t-micro)}
.protobar select{width:auto;padding:6px 8px;font-size:var(--t-small)}
.protobar label{display:inline-flex;align-items:center;gap:6px;margin:0;
  font-size:var(--t-small);font-weight:600}