/*
Theme Name: Sieon Labs
Theme URI: https://sieonlabs.tech
Author: Sieon Lee
Description: Custom block theme for Sieon Labs. Premium deep-blue system, typography-first, engineering-focused. Dark by default with an equal-quality light theme.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sieonlabs
*/

/* ── design tokens ─────────────────────────────────────────────
   Source of truth: design spec §10 (Rev B, premium blue).
   Dark is the default experience; [data-theme="light"] is the
   toggle-selected companion, same design language, not secondary. */

:root {
  --sl-bg: #081B33;
  --sl-surface: #102A43;
  --sl-card: #16324F;
  --sl-border: #274C77;
  --sl-border-strong: #3A6396;
  --sl-text: #F8FAFC;
  --sl-text-2: #CBD5E1;
  --sl-accent: #3B82F6;
  --sl-accent-hover: #60A5FA;
  --sl-accent-soft: rgba(59, 130, 246, 0.16);
  --sl-code-bg: #061224;
  --sl-code-text: #D3DEEC;
  --sl-shadow: 0 1px 2px rgba(2, 8, 20, 0.45), 0 8px 24px rgba(2, 8, 20, 0.35);
  --sl-glow: radial-gradient(58% 44% at 50% 0%, rgba(59, 130, 246, 0.11), transparent 70%);
  --sl-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  --sl-bg: #F7FAFD;
  --sl-surface: #FFFFFF;
  --sl-card: #EDF3FA;
  --sl-border: #D9E2EC;
  --sl-border-strong: #B3C5D9;
  --sl-text: #0A2540;
  --sl-text-2: #486581;
  --sl-accent: #2563EB;
  --sl-accent-hover: #3B82F6;
  --sl-accent-soft: rgba(37, 99, 235, 0.12);
  --sl-code-bg: #071426;
  --sl-code-text: #D3DEEC;
  --sl-shadow: 0 1px 2px rgba(10, 37, 64, 0.05), 0 4px 16px rgba(10, 37, 64, 0.07);
  --sl-glow: radial-gradient(58% 44% at 50% 0%, rgba(59, 130, 246, 0.06), transparent 70%);
}

/* ── base ────────────────────────────────────────────────────── */

body {
  background-color: var(--sl-bg);
  background-image: var(--sl-glow);
  background-repeat: no-repeat;
  color: var(--sl-text);
  font-family: var(--sl-sans);
  transition: background-color 200ms ease, color 200ms ease;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sl-accent-soft); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sl-border-strong);
  text-underline-offset: 3px;
  transition: color 120ms ease-out, text-decoration-color 120ms ease-out;
}
a:hover { color: var(--sl-accent-hover); text-decoration-color: var(--sl-accent-hover); }

:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; border-radius: 2px; }

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

h1, h2, h3, h4 { letter-spacing: -0.02em; text-wrap: balance; }

code, kbd, samp { font-family: var(--sl-mono); font-size: 0.875em; }
:not(pre) > code {
  background: var(--sl-card);
  border: 1px solid var(--sl-border);
  border-radius: 4px;
  padding: 1px 5px;
}
pre {
  background: var(--sl-code-bg);
  color: var(--sl-code-text);
  border-radius: 10px;
  padding: 16px 20px;
  overflow-x: auto;
  box-shadow: var(--sl-shadow);
  line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; }

/* ── skeleton chrome (P1; refined in P2/P3) ──────────────────── */

.sl-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--sl-border);
}
.sl-wordmark {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}
.sl-nav nav { display: flex; gap: 22px; flex-wrap: wrap; }
.sl-nav nav a {
  font-size: 0.9rem;
  color: var(--sl-text-2);
  text-decoration: none;
  padding: 4px 0;
}
.sl-nav nav a:hover { color: var(--sl-accent-hover); }
.sl-nav nav a[aria-current="page"] {
  color: var(--sl-text);
  box-shadow: inset 0 -2px 0 var(--sl-accent);
}
[data-theme-toggle] {
  background: transparent;
  border: 1px solid var(--sl-border);
  color: var(--sl-text-2);
  border-radius: 7px;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 150ms ease-out, color 150ms ease-out;
}
[data-theme-toggle]:hover { background: var(--sl-card); color: var(--sl-text); }

.sl-footer {
  border-top: 1px solid var(--sl-border);
  margin-top: 72px;
  padding: 26px 0 56px;
  font-family: var(--sl-mono);
  font-size: 0.75rem;
  color: var(--sl-text-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.sl-footer a { text-decoration: none; }

/* ── writing list row (index skeleton) ───────────────────────── */

.sl-post-row { border-bottom: 1px solid var(--sl-border); padding: 18px 0; }
.sl-post-row .wp-block-post-title { font-size: 1.15rem; margin: 0; }
.sl-post-row .wp-block-post-title a { text-decoration: none; }
.sl-post-row .wp-block-post-date {
  font-family: var(--sl-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-text-2);
}

/* ── article reading experience (P2) ─────────────────────────── */

.wp-block-post-content {
  position: relative; /* anchor for the TOC rail */
  font-size: 1.125rem;
  line-height: 1.75;
}
.wp-block-post-content > p { margin: 0 0 1.2em; }
.wp-block-post-content h2 { margin: 2.2em 0 0.6em; font-size: 1.5rem; }
.wp-block-post-content h3 { margin: 1.8em 0 0.5em; font-size: 1.25rem; }
.wp-block-post-content ul,
.wp-block-post-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.wp-block-post-content li { margin: 0.3em 0; }
.wp-block-post-content hr {
  border: 0; border-top: 1px solid var(--sl-border); margin: 2.5em 0;
}
.wp-block-post-content blockquote {
  margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em;
  border-left: 2px solid var(--sl-accent);
  color: var(--sl-text-2);
}
.wp-block-post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.wp-block-post-content figcaption {
  font-family: var(--sl-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sl-text-2); margin-top: 8px;
}
.wp-block-post-content .tablewrap,
.wp-block-post-content table { font-variant-numeric: tabular-nums; }
.wp-block-post-content table {
  border-collapse: collapse; width: 100%; font-size: 0.95rem;
  display: block; overflow-x: auto; /* wide tables scroll, page never does */
}
.wp-block-post-content th {
  text-align: left; font-family: var(--sl-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
  color: var(--sl-text-2); padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--sl-border-strong);
}
.wp-block-post-content td {
  padding: 9px 14px 9px 0; border-bottom: 1px solid var(--sl-border);
  vertical-align: top;
}
.wp-block-post-content details:not(.sl-toc) {
  border: 1px solid var(--sl-border); border-radius: 8px;
  padding: 12px 16px; margin: 0 0 12px; background: var(--sl-surface);
}
.wp-block-post-content details:not(.sl-toc) summary {
  cursor: pointer; font-weight: 500;
}

/* meta row */
.sl-meta {
  font-family: var(--sl-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sl-text-2);
  margin: 0 0 2em; padding-bottom: 1.4em;
  border-bottom: 1px solid var(--sl-border);
}

/* code blocks: deep navy in both themes, copy affordance */
.wp-block-post-content pre { position: relative; margin: 1.6em 0; font-size: 0.85rem; }
.sl-copy {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--sl-mono); font-size: 0.68rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(59, 130, 246, 0.12); color: #9DBFEA;
  border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 5px;
  padding: 3px 9px; cursor: pointer; opacity: 0;
  transition: opacity 150ms ease-out;
}
.wp-block-post-content pre:hover .sl-copy,
.sl-copy:focus-visible { opacity: 1; }

/* table of contents: collapsed box on small screens, sticky rail wide */
.sl-toc {
  border: 1px solid var(--sl-border); border-radius: 8px;
  padding: 12px 16px; margin: 0 0 2em;
  background: var(--sl-surface);
  font-size: 0.85rem;
}
.sl-toc summary {
  cursor: pointer; list-style-position: outside;
  font-family: var(--sl-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sl-text-2);
}
.sl-toc ol { list-style: none; margin: 10px 0 0; padding: 0; }
.sl-toc li { padding: 3px 0; }
.sl-toc li.lvl3 { padding-left: 14px; }
.sl-toc a { text-decoration: none; color: var(--sl-text-2); }
.sl-toc a:hover, .sl-toc a.current { color: var(--sl-accent-hover); }

@media (min-width: 1240px) {
  .sl-toc-wrap {
    position: absolute; top: 0; bottom: 0;
    right: -258px; width: 210px;
  }
  .sl-toc {
    position: sticky; top: 24px;
    border: 0; border-left: 1px solid var(--sl-border);
    border-radius: 0; background: transparent;
    padding: 2px 0 2px 16px; margin: 0;
  }
  .sl-toc summary { pointer-events: none; }
  .sl-toc summary::marker, .sl-toc summary::-webkit-details-marker { content: ""; display: none; }
}

/* author identity block: ends every article */
.sl-author {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--sl-border); border-radius: 10px;
  background: var(--sl-surface); box-shadow: var(--sl-shadow);
  padding: 18px 20px; margin-top: 3em;
  font-size: 0.925rem;
}
.sl-author-mark {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sl-accent-soft); color: var(--sl-accent-hover);
  font-family: var(--sl-mono); font-weight: 600; font-size: 0.8rem;
}
.sl-author-body { flex: 1; }
.sl-author-body p { margin: 2px 0 0; color: var(--sl-text-2); }
.sl-author-link {
  flex: none; font-size: 0.875rem; text-decoration: none;
  border: 1px solid var(--sl-border-strong); border-radius: 7px;
  padding: 7px 14px;
}
.sl-author-link:hover { background: var(--sl-card); }

/* next / prev */
.sl-postnav { margin-top: 2em; font-size: 0.95rem; }
.sl-postnav a { text-decoration: none; }

/* references (rendered by the Forge publisher from canonical sources) */
.sl-references { font-size: 0.875rem; color: var(--sl-text-2); }
.sl-references li { margin: 0.35em 0; }

/* ── homepage (P3) ───────────────────────────────────────────── */

.sl-eyebrow {
  font-family: var(--sl-mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sl-text-2);
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
}
.sl-eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--sl-accent); flex: none;
}

.sl-hero { padding: clamp(48px, 9vw, 104px) 0 24px; }
.sl-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.06; letter-spacing: -0.03em; font-weight: 650;
  margin: 0 0 22px; max-width: 18ch;
}
.sl-hero-sub {
  font-size: 1.125rem; line-height: 1.7; color: var(--sl-text-2);
  max-width: 54ch; margin: 0 0 30px;
}
.sl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.sl-btn {
  display: inline-flex; align-items: center;
  font-size: 0.95rem; font-weight: 500;
  border-radius: 8px; padding: 11px 22px;
  text-decoration: none;
  transition: filter 150ms ease-out, background 150ms ease-out;
  min-height: 44px;
}
.sl-btn-pri {
  background: linear-gradient(180deg, var(--sl-accent-hover), var(--sl-accent));
  color: #F8FAFC;
}
.sl-btn-pri:hover { color: #F8FAFC; filter: brightness(1.07); }
.sl-btn-ghost { border: 1px solid var(--sl-border-strong); color: var(--sl-text); }
.sl-btn-ghost:hover { background: var(--sl-card); color: var(--sl-text); }

.sl-now {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--sl-border); border-radius: 10px;
  background: var(--sl-surface); box-shadow: var(--sl-shadow);
  padding: 14px 18px; margin: 36px 0 0;
  font-size: 0.925rem;
}
.sl-now-label {
  font-family: var(--sl-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sl-accent-hover); flex: none;
}
.sl-now-text { color: var(--sl-text-2); flex: 1; min-width: 240px; }

.sl-chip {
  font-family: var(--sl-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  border: 1px solid var(--sl-border-strong); color: var(--sl-text-2);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.sl-chip-acc { border-color: var(--sl-accent); color: var(--sl-accent-hover); }

.sl-home-section { margin-top: 72px; }

.sl-workgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.sl-workcard {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--sl-border); border-radius: 12px;
  background: var(--sl-surface); box-shadow: var(--sl-shadow);
  padding: 24px 26px; text-decoration: none;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.sl-workcard:hover { border-color: var(--sl-border-strong); background: var(--sl-card); color: inherit; }
.sl-workcard h2 { margin: 0; font-size: 1.3rem; }
.sl-workcard p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--sl-text-2); }
.sl-workcard-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.sl-morelink { margin: 20px 0 0; font-size: 0.95rem; }
.sl-morelink a { text-decoration: none; color: var(--sl-text-2); }
.sl-morelink a:hover { color: var(--sl-accent-hover); }

/* ── living lab diorama (/lab-preview) ───────────────────────── */

.sl-lab-hero {
  display: grid;
  /* co-equal hero (48/52): headline leads by type weight, the system map
     leads by area; neither may clip the other */
  grid-template-columns: minmax(0, 12fr) minmax(0, 13fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
/* min-width:0 kills the grid min-content blowout that clips long lines */
.sl-lab-hero > * { min-width: 0; }
.sl-lab-hero h1 {
  /* cap chosen so the longest balanced line fits the 48% column at the
     1080px container max; below that, 2.3vw tracks the viewport */
  font-size: clamp(1.9rem, 1.05rem + 2.3vw, 2.6rem);
  max-width: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* the scene is always navy, in both themes: same material as code blocks */
.sl-scene-panel {
  background: #081B33;
  border: 1px solid var(--sl-border);
  border-radius: 14px;
  box-shadow: var(--sl-shadow);
  padding: 8px 8px 2px;
}
#sl-scene { width: 100%; height: auto; display: block; }
#sl-scene a { cursor: pointer; }
#sl-scene .sl-station { transition: transform 180ms ease-out; }
#sl-scene a:hover .sl-station,
#sl-scene a:focus-visible .sl-station { transform: translateY(-4px); }
#sl-scene a:hover .sl-lbl-box,
#sl-scene a:focus-visible .sl-lbl-box { stroke: #60A5FA; }
#sl-scene a:hover .sl-lbl-txt,
#sl-scene a:focus-visible .sl-lbl-txt { fill: #F8FAFC; }
.sl-led-live { animation: sl-ledpulse 3.2s ease-in-out infinite; }
@keyframes sl-ledpulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.sl-scene-caption {
  font-family: var(--sl-mono); font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #7E96B5; text-align: center; margin: 8px 0 6px;
}

/* mobile fallback: system-node cards replace the scene under 640px */
.sl-station-cards {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 24px 0 0;
}
.sl-scard {
  border: 1px solid var(--sl-border); border-radius: 10px;
  background: var(--sl-surface); box-shadow: var(--sl-shadow);
  padding: 14px 16px; text-decoration: none;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 84px;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.sl-scard:hover, .sl-scard:active { border-color: var(--sl-border-strong); background: var(--sl-card); color: inherit; }
.sl-scard-role {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sl-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--sl-text-2);
}
.sl-scard b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.sl-scard-desc { font-size: 0.8rem; color: var(--sl-text-2); line-height: 1.45; }
.sl-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sl-accent-hover); flex: none;
}

@media (max-width: 760px) {
  .sl-lab-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sl-scene-panel { display: none; }
  .sl-station-cards { display: grid; }
}