/* ==========================================================================
   GateXAIML :: Recommended Books — v2 (light / Amazon-style, left sidebar)
   Palette : sidebar navy #131921 / sidebar hover #232F3E / accent orange #FF9900
             buy-button yellow #FFD814 / page bg #FFFFFF / card border #E3E6E6
             text #0F1111 / muted #565959 / link #007185 / badge green #067D62
   Type    : Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
   ========================================================================== */

:root{
  --navy:#131921;
  --navy-hover:#232F3E;
  --orange:#FF9900;
  --buy:#FFD814;
  --buy-hover:#F7CA00;
  --bg:#FFFFFF;
  --panel:#F7F8F8;
  --border:#E3E6E6;
  --text:#0F1111;
  --muted:#565959;
  --link:#007185;
  --green:#067D62;
  --sidebar-w:280px;
  --radius:8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk', 'IBM Plex Sans', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
}

.mono{ font-family:'IBM Plex Mono', monospace; }

a{ color:var(--link); text-decoration:none; }
a:hover{ color:#014D5E; text-decoration:underline; }

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Page shell: sidebar (left) + main (right) ---------- */
.gx-shell{ display:flex; min-height:100vh; }

.gx-sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--navy);
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding-bottom:2rem;
}
.gx-sidebar-logo{
  display:flex; align-items:center; gap:.6rem;
  padding:1.1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.gx-sidebar-logo img{ height:32px; width:auto; }
.gx-sidebar-logo-text{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:#fff; }
.gx-sidebar-logo-text span{ color:var(--orange); }

.gx-sidebar nav{ padding:.75rem .6rem; }
.gx-sidebar .cat-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#9DA7B3;
  padding:.9rem .6rem .35rem;
}
.gx-sidebar a.subject-link{
  display:block;
  color:#E7EAED;
  padding:.5rem .6rem;
  border-radius:6px;
  font-size:.93rem;
  text-decoration:none;
}
.gx-sidebar a.subject-link:hover{ background:var(--navy-hover); color:#fff; }
.gx-sidebar a.subject-link.active{ background:var(--orange); color:var(--navy); font-weight:600; }
.gx-sidebar a.top-link{ font-weight:600; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; margin-bottom:.4rem; padding-bottom:.7rem; }
.gx-sidebar a.top-link:last-of-type{ margin-bottom:.3rem; }

.gx-sidebar-toggle{
  display:none;
  position:fixed; top:14px; left:14px; z-index:60;
  background:var(--navy); color:#fff; border:none; border-radius:6px;
  width:42px; height:42px; font-size:1.3rem;
}

@media (max-width: 900px){
  .gx-sidebar{
    position:fixed; left:0; top:0; z-index:55;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:2px 0 12px rgba(0,0,0,.3);
  }
  body.gx-sidebar-open .gx-sidebar{ transform:translateX(0); }
  .gx-sidebar-toggle{ display:block; }
  .gx-main{ padding-top:64px !important; }
}

.gx-main{ flex:1; min-width:0; }

/* ---------- Hero (homepage) ---------- */
.gx-hero{
  padding:3rem 0 2rem;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.gx-hero h1{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:20ch; }
.gx-hero .lead{ color:var(--muted); max-width:62ch; font-size:1.05rem; }
.gx-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  color:var(--green);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:.75rem;
}
.gx-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--orange); display:inline-block; }

.gx-hiring-panel{
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
}
.gx-hiring-panel-label{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.9rem;
}
.gx-role-list{ list-style:none; padding:0; margin:0 0 1rem; }
.gx-role-list li{
  padding:.4rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.95rem;
}
.gx-role-list li:last-child{ border-bottom:none; }
.gx-hiring-panel-footer{ color:#B7C0CB; font-size:.85rem; line-height:1.5; }

.gx-side-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  position:sticky;
  top:1.5rem;
}
.gx-side-list{ list-style:none; padding:0; margin:0; }
.gx-side-list li{ font-size:.88rem; color:#333; margin-bottom:.8rem; }
.gx-side-list .gx-type-badge{ display:block; width:fit-content; margin-bottom:.3rem; }

/* ---------- Article ---------- */
.gx-article{ max-width:75ch; }
.gx-article h2{ font-size:1.3rem; margin-top:1.75rem; }
.gx-article p, .gx-article ul{ color:#333; }

/* ---------- Subject grid (homepage) ---------- */
.gx-subject-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  height:100%;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.gx-subject-card:hover{ border-color:#c8cccc; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.gx-subject-card a{ color:var(--text); font-weight:600; text-decoration:none; }
.gx-subject-card a:hover{ color:var(--link); }
.gx-subject-card .cat{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.gx-weight-badge{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  color:#fff;
  background:var(--green);
  border-radius:20px;
  padding:.15rem .6rem;
  margin-top:.5rem;
}

/* ---------- Subject page header ---------- */
.gx-subject-hero{
  padding:2.25rem 0 1.75rem;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.gx-subject-hero h1{ font-size:clamp(1.6rem,2.8vw,2.2rem); }
.gx-why-box{
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--orange);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  margin-top:1.1rem;
  color:#333;
}

/* ---------- Book rows ---------- */
.gx-book-row{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  padding:1.4rem;
  margin-bottom:1.25rem;
}
.gx-book-desc h3{ font-size:1.1rem; margin-bottom:.3rem; }
.gx-type-badge{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy);
  background:#EAF6F2;
  border:1px solid #BFE6D8;
  border-radius:20px;
  padding:.15rem .55rem;
  margin-bottom:.5rem;
}
.gx-book-desc .author{ color:var(--muted); font-size:.88rem; margin-bottom:.65rem; }
.gx-book-desc p{ color:#333; font-size:.95rem; margin-bottom:0; }

.gx-buy-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.6rem;
}
.gx-buy-box img{
  max-width:100%;
  max-height:190px;
  border-radius:4px;
  background:#fff;
}
.gx-buy-box .price-note{ color:var(--muted); font-size:.78rem; }
.btn-gx-buy{
  background:var(--buy);
  color:var(--text);
  border:1px solid #FCD200;
  font-weight:700;
  border-radius:20px;
  padding:.55rem 1.1rem;
  width:100%;
  font-size:.93rem;
}
.btn-gx-buy:hover{ background:var(--buy-hover); color:var(--text); text-decoration:none; }
.gx-amazon-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted); }

.gx-empty-state{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:2.25rem 1.5rem;
  text-align:center;
  color:var(--muted);
  background:var(--panel);
}

/* ---------- Footer ---------- */
.gx-footer{
  border-top:1px solid var(--border);
  padding:2rem 0;
  color:var(--muted);
  font-size:.87rem;
}
.gx-footer a{ color:var(--muted); }

/* ---------- Dashboard ---------- */
.gx-stat-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; }
.gx-stat-num{ font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:700; color:var(--link); }
.gx-bar-track{ background:var(--panel); border-radius:6px; height:8px; overflow:hidden; border:1px solid var(--border); }
.gx-bar-fill{ background:var(--orange); height:100%; }