/* ============================================================= hub palette
   The base colours every hub page draws on, light and dark. Was defined
   separately in control_panel.html, lab.html and map.html -- the first two had
   already drifted apart on --up/--down, and the map was hard-coded to a dark
   blue-slate that ignored the reader's theme entirely.

   Page-SPECIFIC colour (per-model identities, the map's diagram encodings,
   the rolling-strip bands) stays on the page that means it. What lives here is
   only what "a page in this hub" looks like. */
:root{
  --surface:#fcfcfb; --page:#f9f9f7; --panel2:#f2f2ee;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#c07a1e; --s3:#7a5fd0;
  --up:#006300; --down:#d03b3b; --warn:#a86a00;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --surface:#1a1a19; --page:#0d0d0d; --panel2:#232321;
  --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d99a3e; --s3:#9884e6;
  --up:#0ca30c; --down:#d03b3b; --warn:#d9a441;
}}

/* ============================================================ hub banner
   ONE definition of the top banner, linked by every page in the hub
   (control_panel, map, weave, lab). It used to be copy-pasted four times and
   had drifted in all four: the image ran 70/96/132/180px, the nav carried a
   different set of links on each page in a different order, and /lab was
   called "Admin Lab" on two pages and "Book Lab" on the other two.

   Pair with /hub.js, which builds the nav itself -- the link SET, its order,
   the admin gate and the auth item are behaviour, not markup, and having each
   page hand-write its own <a> tags is how they drifted apart. */
.hero{background:radial-gradient(ellipse at center,#141b1b 0%,#080a0a 100%);
  border:1px solid rgba(74,138,143,.35);border-radius:14px;
  padding:18px 28px;margin-bottom:16px;
  display:flex;align-items:center;gap:26px}
.hero-img{width:96px;height:96px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 2px #16302e,0 0 34px rgba(109,179,186,.4)}
.hero-text{text-align:left;flex:1 1 auto;min-width:0}
.hero-title{font-family:"Cinzel Decorative",Cambria,Georgia,"Times New Roman",serif;
  font-weight:700;font-size:26px;letter-spacing:1.2px;color:#6db3ba;
  text-shadow:0 0 18px rgba(109,179,186,.35);line-height:1.15}
/* the page's own name, under the hub's -- so every page says WHERE YOU ARE in
   the same place, rather than one using a subtitle and the next a suffix */
.hero-title small{display:block;font-family:inherit;font-size:13px;
  letter-spacing:.06em;color:#7a9a9c;text-shadow:none;margin-top:3px}
.hero-sub{color:#7a9a9c;font-size:12px;margin-top:6px}

.hero-nav{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;
  align-self:flex-start;justify-content:flex-end}
.hero-nav a,.hero-nav .cur{color:#8fb9be;text-decoration:none;font-size:12.5px;
  padding:5px 11px;border:1px solid rgba(109,179,186,.28);border-radius:999px;
  white-space:nowrap;transition:background .12s,color .12s}
.hero-nav a:hover{background:rgba(109,179,186,.14);color:#bfe0e4}
/* The page you are ON keeps its pill instead of vanishing, so the nav is the
   same shape and width everywhere and nothing shifts as you move between
   pages. It is not a link, and it does not pretend to be one. */
.hero-nav .cur{background:rgba(109,179,186,.16);color:#cfe9ec;
  border-color:rgba(109,179,186,.5);cursor:default}
@media(max-width:760px){
  .hero{flex-wrap:wrap;justify-content:center;text-align:center}
  .hero-text{text-align:center;flex-basis:100%}
  .hero-nav{width:100%;justify-content:center}}

/* ------------------------------------------------------------- page shell
   The same frame under every page: one background, one gutter, one measure.
   The pages had drifted to 1600px / 1400px / full-bleed with different
   paddings, so moving between them shifted the whole layout sideways. */
body.hub-page{background:var(--page);color:var(--ink);
  padding:20px;max-width:1500px;margin:0 auto}
@media(max-width:760px){body.hub-page{padding:14px}}