/* chrome.css: the nav, the phone menu, the day/night switch and the footer.
   Loaded last on every page (the static pages and the app), so the frame
   around each page is drawn by one set of rules and cannot drift between
   pages. Values are written out rather than taken from page variables,
   because the app pages do not load air.css. */

/* Keep room for the scrollbar on every page, as the app does, so the bar
   never shifts sideways between a short page and a long one. */
html{ scrollbar-gutter:stable; }
/* The same thin, quiet scrollbar as the app (globals.css). */
html, html *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.14) transparent; }
html[data-sky="day"], html[data-sky="day"] *{ scrollbar-color:rgba(10,33,55,0.14) transparent; }

html body .nav, html body .nav-drawer, html body .foot{
  font-size:16px; line-height:1.5; letter-spacing:normal; color:#fff; -webkit-font-smoothing:antialiased; box-sizing:border-box;
}
/* One font stack for every piece of the frame (the app's base styles set a
   different stack, size and tracking, which would otherwise leak in). */
html body .nav, html body .nav *, html body .nav-drawer, html body .nav-drawer *, html body .foot, html body .foot *{
  font-family:'Inter','Noto Sans Devanagari',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  letter-spacing:normal;
}
html body .nav *, html body .nav-drawer *, html body .foot *{ box-sizing:border-box; }
/* The app gives buttons and links a 44px minimum height for touch; the frame
   sets its own sizes. */
html body .nav button, html body .nav a, html body .nav-drawer a, html body .foot a{ min-height:0; min-width:0; }
html body .nav a, html body .nav-drawer a, html body .foot a{ text-decoration:none; }

/* ── Nav bar ── */
html body .nav{
  position:sticky; top:16px; z-index:50; width:calc(100% - 36px); max-width:1150px; height:60px;
  margin:16px auto 0; padding:0; display:flex; align-items:center;
  background:#102b47 !important; border:1px solid rgba(255,255,255,0.12) !important; border-radius:18px;
  box-shadow:none !important; backdrop-filter:none; isolation:isolate;
  transition:background .3s ease, border-color .3s ease;
}
html body .nav::before, html body .nav::after{ content:none; }
html body .nav .wrap{ position:relative; z-index:1; width:100%; max-width:1150px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:flex-start; gap:24px; height:auto; }
html body .nav .brand{
  font-family:'Playfair Display',Georgia,serif !important; font-style:italic !important; font-weight:700 !important;
  font-size:21px !important; line-height:1.5; letter-spacing:0 !important; display:inline-flex; align-items:baseline; gap:1px;
  color:#fff !important; -webkit-text-fill-color:#fff; background:none; animation:none;
}
html body .nav .brand .dot{ color:#26dcf0 !important; -webkit-text-fill-color:#26dcf0 !important; }
html body .nav-links{ display:flex; align-items:center; gap:19px; margin:0 0 0 6px; padding:0; }
html body .nav-links a{
  position:relative; white-space:nowrap; flex-shrink:0; padding:5px 1px; margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important; font-size:15px !important; font-weight:500 !important;
  font-style:normal; line-height:1.5 !important; letter-spacing:0.01em !important; text-transform:none !important;
  color:#d0e2f4 !important; transform:none !important; transition:color .18s ease;
}
html body .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; border-radius:2px;
  background:#26dcf0; opacity:1; transition:right .3s ease; }
html body .nav-links a:hover, html body .nav-links a[aria-current="page"]{ color:#fff !important; }
html body .nav-links a:hover::after{ right:0; }
html body .nav-links a[aria-current="page"]::after{ right:0; opacity:.9; }
html body .nav-right{ display:flex; align-items:center; gap:9px; margin-left:auto; }
html body .nav-right .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:34px; padding:0 16px; margin:0;
  border-radius:10px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif !important; font-size:13px !important;
  font-weight:500 !important; line-height:1 !important; letter-spacing:0 !important; white-space:nowrap; cursor:pointer;
  position:static; top:auto; box-shadow:none !important; transform:none;
}
html body .nav-right .btn-haze{ background:#d6e3f2 !important; border:1px solid #d6e3f2 !important; color:#0a2137 !important; -webkit-text-fill-color:#0a2137; }
html body .nav-right .btn-haze:hover{ background:#e6eef8 !important; border-color:#e6eef8 !important; }

/* ── Day/night switch ── */
html body .daynight{ display:inline-flex; align-items:center; gap:0; margin:0 2px; padding:0; background:transparent; border:none;
  height:auto; font-size:12.5px; font-weight:500; line-height:normal;
  cursor:pointer; -webkit-tap-highlight-color:transparent; color:#a9c4e0; }
html body .daynight .dn-track{ position:relative; flex-shrink:0; width:44px; height:24px; border-radius:999px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22); box-shadow:inset 0 1px 3px rgba(0,0,0,0.32);
  transition:background .35s ease, border-color .35s ease; }
html body .daynight .dn-thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#dae4f0); box-shadow:0 1px 3px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(0,0,0,0.06);
  transition:transform .42s cubic-bezier(0.34,1.8,0.64,1); }
html[data-sky="night"] body .daynight .dn-track{ background:#3d6a99; border-color:transparent; box-shadow:inset 0 1px 3px rgba(4,20,40,0.25); }
html[data-sky="night"] body .daynight .dn-thumb{ transform:translateX(20px); }
html body .daynight:focus-visible .dn-track{ outline:2px solid #26dcf0; outline-offset:2px; }

/* ── Phone menu ── */
html body .nav-toggle{ display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0;
  background:none !important; border:1px solid rgba(255,255,255,0.3) !important; border-radius:8px; color:#fff !important;
  font-size:16px; line-height:1; cursor:pointer; }
html body .nav-drawer{ display:none; }
html body .nav-drawer.open{ display:block; position:fixed; inset:82px 12px auto; z-index:45; max-height:calc(100vh - 100px); overflow:auto;
  padding:14px 20px 20px; border-radius:16px; background:#0c2340 !important; border:1px solid rgba(255,255,255,0.12) !important; }
html body .nav-drawer > a{ display:block; padding:15px 4px; font-size:19px; font-weight:500; line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,0.09); color:#fff !important; }
html body .nav-drawer > a[aria-current="page"]{ color:#26dcf0 !important; }
html body .nav-drawer .drawer-cta{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.09); display:flex; flex-direction:column; gap:12px; }
html body .nav-drawer .drawer-cta .btn{ display:flex; width:100%; height:52px; align-items:center; justify-content:center; border-radius:12px;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:16px; font-weight:500; line-height:1;
  background:#d6e3f2 !important; border:1px solid #d6e3f2 !important; color:#0a2137 !important; -webkit-text-fill-color:#0a2137; }
@media (max-width:1150px){
  html body .nav-links{ display:none; }
  html body .nav-toggle{ display:inline-flex; }
}

/* ── Footer ── */
html body .foot{ margin:0; padding:56px 0 40px; border-top:1px solid rgba(255,255,255,0.09); background:transparent; color:#a9c4e0; }
html body .foot .wrap{ width:100%; max-width:1150px; margin:0 auto; padding:0 24px; }
html body .foot .cols{ display:flex; flex-wrap:wrap; gap:36px 48px; align-items:flex-start; }
html body .foot .fbrandcol{ flex:2 1 280px; }
html body .foot .cols > div:not(.fbrandcol){ flex:1 1 150px; }
html body .foot .fbrand{ font-family:'Playfair Display',Georgia,serif !important; font-style:italic !important; font-weight:700 !important;
  font-size:26px !important; line-height:1.5; letter-spacing:0 !important; display:inline-flex; align-items:baseline; gap:1px;
  color:#fff !important; -webkit-text-fill-color:#fff; background:none; animation:none; }
html body .foot .fbrand .dot{ color:#26dcf0 !important; -webkit-text-fill-color:#26dcf0 !important; }
html body .foot .ftag{ margin:12px 0 0; max-width:34ch; font-size:15px; line-height:1.55; color:#a9c4e0; }
html body .foot .fh, html body .foot h5{ margin:0 0 16px; font-size:14px !important; font-weight:600; line-height:1.5;
  letter-spacing:0 !important; text-transform:none !important; color:#a9c4e0 !important; }
html body .foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
html body .foot ul a{ font-size:14.5px; line-height:1.5; color:#d0e2f4 !important; -webkit-text-fill-color:currentColor; }
html body .foot ul a:hover{ color:#fff !important; }
html body .foot .fbot{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.09);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; line-height:1.5; color:#a9c4e0; }
@media (max-width:860px){ html body .foot .fbrandcol{ flex-basis:100%; } }
@media (max-width:600px){
  html body .foot .cols{ display:grid; grid-template-columns:1fr 1fr; gap:30px 20px; }
  html body .foot .fbrandcol{ grid-column:1 / -1; }
}

/* ── Day ── */
html[data-sky="day"] body .nav{ background:#cadef7 !important; border-color:rgba(10,33,55,0.12) !important; }
html[data-sky="day"] body .nav .brand{ color:#0a2137 !important; -webkit-text-fill-color:#0a2137; }
html[data-sky="day"] body .nav .brand .dot, html[data-sky="day"] body .foot .fbrand .dot{ color:#0f5fb0 !important; -webkit-text-fill-color:#0f5fb0 !important; }
html[data-sky="day"] body .nav-links a{ color:#33506e !important; }
html[data-sky="day"] body .nav-links a:hover, html[data-sky="day"] body .nav-links a[aria-current="page"]{ color:#0a2137 !important; }
html[data-sky="day"] body .nav-links a::after{ background:#0f5fb0; }
html[data-sky="day"] body .nav-right .btn-haze, html[data-sky="day"] body .nav-drawer .drawer-cta .btn{
  background:#0a2137 !important; border-color:#0a2137 !important; color:#fff !important; -webkit-text-fill-color:#fff; }
html[data-sky="day"] body .nav-right .btn-haze:hover{ background:#132f4d !important; border-color:#132f4d !important; }
html[data-sky="day"] body .nav-toggle{ color:#0a2137 !important; border-color:rgba(10,33,55,0.30) !important; }
html[data-sky="day"] body .nav-drawer.open{ background:#cadef7 !important; border-color:rgba(10,33,55,0.12) !important; }
html[data-sky="day"] body .nav-drawer > a{ color:#33506e !important; border-bottom-color:rgba(10,33,55,0.10); }
html[data-sky="day"] body .nav-drawer > a[aria-current="page"]{ color:#0a2137 !important; }
html[data-sky="day"] body .nav-drawer .drawer-cta{ border-top-color:rgba(10,33,55,0.10); }
html[data-sky="day"] body .foot{ border-top-color:rgba(10,33,55,0.12); color:#33506e; }
html[data-sky="day"] body .foot .fbrand{ color:#0a2137 !important; -webkit-text-fill-color:#0a2137; }
html[data-sky="day"] body .foot .ftag{ color:#1e3a5c; }
html[data-sky="day"] body .foot .fbot{ color:#33506e; }
html[data-sky="day"] body .daynight{ color:#1e3a5c; }
html[data-sky="day"] body .foot .fh, html[data-sky="day"] body .foot h5{ color:#33506e !important; }
html[data-sky="day"] body .foot ul a{ color:#33506e !important; }
html[data-sky="day"] body .foot ul a:hover{ color:#0a2137 !important; }
html[data-sky="day"] body .foot .fbot{ border-top-color:rgba(10,33,55,0.12); }

@media print{ html body .nav, html body .nav-drawer, html body .foot{ display:none !important; } }
/* The Sign in button stays in the bar at every width, as on the homepage. */
html body .nav-right .btn{ display:inline-flex !important; }
html body .nav, html body .nav *, html body .nav-drawer, html body .nav-drawer *, html body .foot, html body .foot *{ font-feature-settings:normal; }
/* The wordmark's dot is upright Inter on every page (the app loads Inter's
   italic and the static pages do not, which drew it a pixel differently). */
html body .nav .brand .dot, html body .foot .fbrand .dot{ font-style:normal; }

/* Page colours for the app screens that draw their own content (diagnostic,
   classroom dashboard, station): the static pages' colours, night and day. */
html[data-sky="night"], html:not([data-sky]){ --pg-bg:#060f1f; --pg-text:#ffffff; --pg-muted:#b8ccea; --pg-border:rgba(255,255,255,0.12);
  --pg-border-strong:rgba(255,255,255,0.4); --pg-card:rgba(255,255,255,0.045); --pg-accent:#8fd0ff; --pg-good:#00e6a8; --pg-warn:#ffb340;
  --pg-pick:rgba(143,208,255,0.12); --pg-btn:#d6e3f2; --pg-btn-ink:#0a2137; }
html[data-sky="day"]{ --pg-bg:#a9c8ee; --pg-text:#0a2137; --pg-muted:#33506e; --pg-border:rgba(10,33,55,0.14);
  --pg-border-strong:rgba(10,33,55,0.32); --pg-card:#ffffff; --pg-accent:#0f5fb0; --pg-good:#115e59; --pg-warn:#6b3f00;
  --pg-pick:rgba(15,95,176,0.10); --pg-btn:#0a2137; --pg-btn-ink:#ffffff; }
/* Narrow phones: a little less padding and spacing in the bar, so the
   wordmark never runs into the switch (the bar must fit "Your home" too). */
@media (max-width:420px){
  html body .nav .wrap{ padding:0 16px; gap:12px; }
  html body .nav-right{ gap:6px; }
  html body .nav-right .btn{ padding:0 12px; }
}