/* Guide Engineering brand layer for the Machine Library.
   Navy + cyan come from guideeng.com; Archivo's wide cut echoes the GUIDE ENGINEERING wordmark.
   Every page loads this; page CSS keeps using the same variable names (--bg, --card, --line, ...). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&display=swap");

:root{
  --navy:#121a2c;        /* Guide navy: header, ink on headlines */
  --cyan:#00b0f0;        /* Guide cyan: focus, the one active state, internal marker */
  --cyan-ink:#0077a8;    /* cyan dark enough for text on white */
  --paper:#eef1f4;       /* the field the machines sit on */
  --white:#ffffff;
  --steel:#5b6676;       /* secondary text */
  --rule:#d5dbe2;

  /* names the existing pages already use */
  --bg:var(--paper); --card:var(--white); --card-hi:#f7f9fb; --panel:var(--white); --line:var(--rule);
  --text:#18202e; --muted:var(--steel); --accent:var(--cyan-ink);
  --radius:4px;
  --wide:"Archivo",system-ui,sans-serif;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--text);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-variation-settings:"wdth" 100;
  font-feature-settings:"tnum" 1,"lnum" 1}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- top bar ---------- */
.gx-top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--navy);transition:border-color .2s}
body.named .gx-top{border-bottom-color:var(--cyan)}
.gx-in{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:18px}
.gx-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-width:0}
.gx-mark{width:30px;height:30px;flex:none}
.gx-word{font-family:var(--wide);font-variation-settings:"wdth" 125;font-weight:700;font-size:16px;letter-spacing:.07em;white-space:nowrap}
.gx-sub{font-variation-settings:"wdth" 100;font-weight:400;font-size:14px;color:#aeb8c8;padding-left:12px;border-left:1px solid #34405a;white-space:nowrap}
.gx-sub b{color:#fff;font-weight:600}
.gx-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* client / internal switch */
.gx-mode{display:flex;border:1px solid #34405a;border-radius:999px;padding:2px;background:#0c1220}
.gx-mode button{font:inherit;font-size:13px;font-weight:600;border:0;background:transparent;color:#aeb8c8;padding:5px 14px;border-radius:999px;cursor:pointer}
.gx-mode button[aria-pressed="true"]{background:#fff;color:var(--navy)}
body.named .gx-mode button[aria-pressed="true"]{background:var(--cyan);color:var(--navy)}

/* the three dots */
.gx-more{position:relative}
.gx-dots{width:38px;height:34px;border-radius:6px;border:1px solid #34405a;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.gx-dots:hover,.gx-dots[aria-expanded="true"]{background:#1d2740}
.gx-dots svg{width:18px;height:18px}
.gx-menu{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:#fff;color:var(--text);border-radius:8px;
  box-shadow:0 18px 40px -14px rgba(18,26,44,.45),0 0 0 1px rgba(18,26,44,.08);padding:8px;display:none;z-index:60}
.gx-menu.open{display:block}
.gx-menu h6{margin:8px 10px 4px;font-size:12px;font-weight:600;color:var(--steel)}
.gx-menu a,.gx-menu button.gx-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:14px;color:var(--text);text-decoration:none;background:none;border:0;padding:8px 10px;border-radius:5px;cursor:pointer}
.gx-menu a:hover,.gx-menu button.gx-item:hover{background:var(--paper)}
.gx-menu small{color:var(--steel);font-size:12px;white-space:nowrap}
.gx-menu .soon{color:#97a1af;cursor:default}
.gx-menu .soon:hover{background:none}
.gx-menu hr{border:0;border-top:1px solid var(--rule);margin:6px 4px}
.gx-menu .gx-note{font-size:12.5px;color:var(--steel);padding:6px 10px 8px;line-height:1.45}

@media (max-width:720px){
  .gx-in{padding:0 14px;gap:10px;height:56px}
  .gx-sub{display:none}
  .gx-word{font-size:13px;letter-spacing:.05em}
  .gx-mode button{padding:5px 10px;font-size:12px}
}
@media (max-width:420px){ .gx-word{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }