/* Shared styles for every page.
   Fonts and token structure match the PHEM Logger and Kit Checker sites,
   so the parent site and the product pages feel like one family. */

/* ---------- THEME TOKENS ---------- */
/* Dark is the default; light applies via system preference or the toggle. */
:root{
  --bg:            #11161a;
  --panel:         #182026;
  --panel-raised:  #1d262d;
  --line:          #29333a;
  --line-soft:     #212a31;
  --text:          #edf1f3;
  --text-dim:      #9aa5ad;
  --text-faint:    #6f7a81;
  --accent:        #3fbfae;
  --accent-hover:  #5ad0c0;
  --accent-dim:    #1f5c54;
  --accent-ink:    #06201c;
  --accent-wash:   rgba(63,191,174,0.10);
  --red:           #ef5a4c;
  --amber:         #f2b33d;
  --blue:          #4c8dff;
  --brand:         #3fbfae;   /* parent logo colour: never changes per product */
  --brand-ink:     #06201c;
  --header-bg:     rgba(17,22,26,0.86);
  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', monospace;
  --max: 1080px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f5f6f7; --panel:#ffffff; --panel-raised:#fbfbfc; --line:#d9dee2; --line-soft:#e6e9ec;
    --text:#13181c; --text-dim:#4a555c; --text-faint:#6b767d;
    --accent:#0d7a6c; --accent-hover:#0a6559; --accent-dim:#a8dcd4; --accent-ink:#ffffff;
    --accent-wash:rgba(13,122,108,0.07); --red:#c9372b; --amber:#a86d12; --blue:#2563eb; --brand:#0d7a6c; --brand-ink:#ffffff;
    --header-bg:rgba(245,246,247,0.86); color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f5f6f7; --panel:#ffffff; --panel-raised:#fbfbfc; --line:#d9dee2; --line-soft:#e6e9ec;
  --text:#13181c; --text-dim:#4a555c; --text-faint:#6b767d;
  --accent:#0d7a6c; --accent-hover:#0a6559; --accent-dim:#a8dcd4; --accent-ink:#ffffff;
  --accent-wash:rgba(13,122,108,0.07); --red:#c9372b; --amber:#a86d12; --blue:#2563eb; --brand:#0d7a6c; --brand-ink:#ffffff;
  --header-bg:rgba(245,246,247,0.86); color-scheme:light;
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:12px; z-index:100; background:var(--panel); padding:8px 12px; }

/* ---------- HEADER ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  color:var(--text); letter-spacing:-0.01em; white-space:nowrap;
}
.brand:hover{ color:var(--text); }
.brand-mark{
  width:26px; height:26px; border-radius:7px;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center;
  font-size:14px; font-weight:700;
}
nav.main{ display:flex; align-items:center; gap:4px; }
nav.main a{
  color:var(--text-dim); font-size:14.5px; font-weight:500;
  padding:8px 12px; border-radius:8px;
}
nav.main a:hover{ color:var(--text); background:var(--panel); }
nav.main a[aria-current="page"], .menu.is-active > .menu-top{ color:var(--text); }

/* Products dropdown: opens on hover, keyboard focus, or the chevron button. */
.menu{ position:relative; display:flex; align-items:center; }
.menu > .menu-top{ padding-right:4px; }
.menu-caret{
  width:26px; height:32px; border:0; background:transparent; border-radius:6px;
  color:var(--text-dim); cursor:pointer; display:grid; place-items:center; padding:0;
}
.menu-caret:hover{ color:var(--text); background:var(--panel); }
.menu-caret svg{ width:14px; height:14px; transition:transform .15s; }
.menu.open .menu-caret svg{ transform:rotate(180deg); }
.submenu{
  position:absolute; top:100%; left:0;
  padding-top:8px;              /* bridges the gap so hover isn't lost */
  min-width:290px;
  display:none; z-index:60;
}
.menu:hover .submenu, .menu:focus-within .submenu, .menu.open .submenu{ display:block; }
.menu.closed .submenu{ display:none; }
.submenu-inner{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:6px; box-shadow:0 18px 40px -18px rgba(0,0,0,0.45);
}
.submenu a{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:8px; color:var(--text);
}
nav.main .submenu a:hover{ background:var(--panel-raised); }
.submenu img, .submenu .mini{ width:32px; height:32px; border-radius:8px; flex:none; }
.submenu .mini{
  display:grid; place-items:center; background:var(--panel-raised); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--text);
}
.submenu .t{ display:flex; flex-direction:column; line-height:1.3; }
.submenu .t b{ font-weight:600; font-size:14.5px; }
.submenu .t small{ color:var(--text-faint); font-size:12.5px; font-weight:400; }
.submenu .all{
  border-top:1px solid var(--line-soft); margin-top:4px; border-radius:0 0 8px 8px;
  font-size:13.5px; color:var(--text-dim); justify-content:space-between;
}
.submenu a[aria-current="page"]{ background:var(--accent-wash); }

.theme-toggle{
  margin-left:6px;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--text-dim);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--text-faint); }
.theme-toggle svg{ width:17px; height:17px; }
/* Sun in dark mode (click for light), moon in light mode (click for dark). */
.theme-toggle .i-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .i-sun{ display:none; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon{ display:block; }
}
@media (max-width:820px){
  .nav-long{ display:none; }
}
@media (max-width:680px){
  .brand-text{ display:none; }
}
@media (max-width:560px){
  nav.main a{ padding:8px 8px; font-size:14px; }
  .theme-toggle{ margin-left:2px; }
  .submenu{ position:fixed; top:64px; left:16px; right:16px; min-width:0; padding-top:4px; }
}

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
  margin:0 0 12px;
}
h1, h2, h3{ font-family:var(--font-display); letter-spacing:-0.01em; }
h1{
  font-weight:700; font-size:clamp(36px, 5.4vw, 60px);
  line-height:1.04; margin:0 0 22px;
}
h1 em{ font-style:normal; color:var(--accent); }
h2{ font-weight:600; font-size:clamp(26px, 3.4vw, 34px); line-height:1.15; margin:0 0 14px; }
h3{ font-weight:600; font-size:20px; line-height:1.25; margin:0 0 8px; }
.lede{ font-size:18px; color:var(--text-dim); max-width:52ch; margin:0 0 32px; }
.muted{ color:var(--text-dim); }

/* ---------- LAYOUT ---------- */
.page-head{ padding:72px 0 48px; border-bottom:1px solid var(--line-soft); }
section{ padding:32px 0 64px; border-bottom:1px solid var(--line-soft); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width:62ch; margin-bottom:36px; }
.section-head p{ color:var(--text-dim); margin:0; }
.section-head p.eyebrow, .download p.eyebrow{ color:var(--accent); font-size:11px; margin:0 0 10px; }
@media (max-width:600px){
  .page-head{ padding:48px 0 36px; }
  section{ padding:24px 0 48px; }
}

/* ---------- BUTTONS ---------- */
.btn svg{ width:16px; height:16px; flex:none; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; border-radius:9px;
  font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-hover); color:var(--accent-ink); }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-faint); color:var(--text); }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- STATUS TAGS ---------- */
.status{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px;
  border:1px solid var(--line); color:var(--text-dim);
  white-space:nowrap;
}
.status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.live{ color:var(--accent); border-color:var(--accent-dim); }
.status.dev{ color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent); }
.status.org{ color:var(--text-dim); }

/* ---------- PRODUCT CARDS (home) ---------- */
.cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:24px;
  color:var(--text);
  transition:border-color .15s, transform .15s;
}
a.card:hover{ border-color:var(--text-faint); color:var(--text); transform:translateY(-2px); }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:12px; }
.card p{ color:var(--text-dim); font-size:15px; margin:0 0 20px; flex:1; }
.card .more{ font-size:14px; font-weight:600; color:var(--accent); }

.app-icon{ width:56px; height:56px; border-radius:13px; flex:none; }
.app-icon.text{
  display:grid; place-items:center;
  background:var(--panel-raised); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text);
}

/* ---------- FOOTER ---------- */
footer.site{ border-top:1px solid var(--line-soft); padding:32px 0 40px; color:var(--text-faint); font-size:14px; }
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; }
footer.site nav{ display:flex; gap:20px; flex-wrap:wrap; }
footer.site a{ color:var(--text-dim); }
footer.site a:hover{ color:var(--text); }


/* ---------- PRODUCT ACCENTS ---------- */
/* A product page sets class="theme-<product>" on <body>; its accent replaces the
   site teal everywhere except the logo square (which uses --brand). */
.theme-phem{ --accent:#ef5a4c; --accent-hover:#f46f62; --accent-dim:#7a2c25; --accent-ink:#1a0c0a; --accent-wash:rgba(239,90,76,0.10); }
.theme-kit{  --accent:#35b3ab; --accent-hover:#3ec1b8; --accent-dim:#1f6f6a; --accent-ink:#0c1517; --accent-wash:rgba(53,179,171,0.10); }
.theme-rqc{  --accent:#8b9cff; --accent-hover:#a3b0ff; --accent-dim:#39418a; --accent-ink:#0d1030; --accent-wash:rgba(139,156,255,0.10); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-phem{ --accent:#c9372b; --accent-hover:#b02e23; --accent-dim:#efb3ad; --accent-ink:#ffffff; --accent-wash:rgba(201,55,43,0.07); }
  :root:not([data-theme="dark"]) .theme-kit{  --accent:#0f7a73; --accent-hover:#0b625c; --accent-dim:#a6dbd7; --accent-ink:#ffffff; --accent-wash:rgba(15,122,115,0.07); }
  :root:not([data-theme="dark"]) .theme-rqc{  --accent:#4352c4; --accent-hover:#3642a6; --accent-dim:#c3c9f3; --accent-ink:#ffffff; --accent-wash:rgba(67,82,196,0.07); }
}
:root[data-theme="light"] .theme-phem{ --accent:#c9372b; --accent-hover:#b02e23; --accent-dim:#efb3ad; --accent-ink:#ffffff; --accent-wash:rgba(201,55,43,0.07); }
:root[data-theme="light"] .theme-kit{  --accent:#0f7a73; --accent-hover:#0b625c; --accent-dim:#a6dbd7; --accent-ink:#ffffff; --accent-wash:rgba(15,122,115,0.07); }
:root[data-theme="light"] .theme-rqc{  --accent:#4352c4; --accent-hover:#3642a6; --accent-dim:#c3c9f3; --accent-ink:#ffffff; --accent-wash:rgba(67,82,196,0.07); }

/* ---------- PRODUCT BAR (sits under the site header on product pages) ---------- */
.product-bar{
  position:sticky; top:64px; z-index:45;
  background:var(--header-bg);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.product-bar .wrap{ display:flex; align-items:center; gap:22px; height:50px; }
.product-bar .pname{
  display:flex; align-items:center; gap:9px; flex:none;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--text);
}
.product-bar .pname img, .product-bar .pname .mini{ width:24px; height:24px; border-radius:6px; }
.product-bar .pname .mini{
  display:grid; place-items:center; background:var(--panel-raised); border:1px solid var(--line);
  font-size:10px; font-weight:700;
}
.product-bar nav{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  margin-left:auto; min-width:0;
  mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.product-bar nav::-webkit-scrollbar{ display:none; }
.product-bar nav a{
  color:var(--text-dim); font-size:13.5px; white-space:nowrap;
  padding:6px 10px; border-radius:7px;
}
.product-bar nav a:last-child{ margin-right:18px; }
.product-bar nav a:hover{ color:var(--text); background:var(--panel); }
.product-bar nav a[aria-current="page"]{ color:var(--accent); }
.has-product-bar section, .has-product-bar [id]{ scroll-margin-top:130px; }
@media (max-width:600px){
  .product-bar .wrap{ gap:10px; }
  .product-bar nav{ margin-left:0; }
}