/* ─────────  IC300 v1 · Mobile responsive layer + Theme layer ─────────
   Loaded after each page's inline <style>. Provides:
     · light-mode token overrides (via [data-theme="light"])
     · theme-toggle button styling
     · ≤900px responsive overrides
   ────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   LIGHT THEME · token overrides
   ════════════════════════════════════════════════════════════ */
body{
  background:var(--bg-0);color:var(--txt-0);
  transition:background .25s ease, color .25s ease;
}

body[data-theme="light"]{
  --bg-0:#f4f6f8;
  --bg-1:#ffffff;
  --bg-2:#eef1f5;
  --bg-3:#e1e6ec;
  --line-0:#e3e8ed;
  --line-1:#d2d8df;
  --line-2:#b6bec7;
  --txt-0:#0a0e13;
  --txt-1:#3f4751;
  --txt-2:#6b7480;
  --txt-3:#a2aab4;
  --acc:#0aa05a;
  --acc-dim:#a8e3c1;
  --acc-glow:rgba(10,160,90,.14);
  --amber:#d97706;
  --red:#dc2626;
  --blue:#0284c7;
  --grad-pcb:radial-gradient(1200px 600px at 70% 0%, rgba(10,160,90,.06), transparent 60%);
}

/* Topbar + sheet have hardcoded rgba in inline styles — override here. */
body[data-theme="light"] .topbar{
  background:rgba(255,255,255,.78)!important;
}
.topbar{background:rgba(7,9,12,.72)} /* dark default — already set inline, kept for specificity */

body[data-theme="light"] .mobile-sheet{
  background:rgba(244,246,248,.92)!important;
}

/* Soften the heavy dark shadows in light mode */
body[data-theme="light"] .terminal{
  box-shadow:
    0 30px 60px -30px rgba(15,30,60,.18),
    0 0 0 1px rgba(10,160,90,.08),
    inset 0 1px 0 rgba(255,255,255,.6)!important;
}
body[data-theme="light"] .search{
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px -8px rgba(15,30,60,.12)!important;
}

/* Primary button text stays dark on green in both modes — but slightly
   darken in light mode for contrast against the new lighter green. */
body[data-theme="light"] .btn-primary{color:#04321f}

/* Active nav underline glow is too intense on white. */
body[data-theme="light"] nav.primary a.active::after{
  box-shadow:none;
}
body[data-theme="light"] .pill .live,
body[data-theme="light"] .term-head .live{
  box-shadow:0 0 4px var(--acc)!important;
}
body[data-theme="light"] .term-stk .dot,
body[data-theme="light"] .parts-stk .dot{
  box-shadow:0 0 4px var(--acc)!important;
}

/* logo mark glow */
body[data-theme="light"] .logo-mark{
  background:radial-gradient(circle at 30% 30%, rgba(10,160,90,.18), transparent 60%);
}

/* news-img grid lines are mask-driven on dark — invert tone on light */
body[data-theme="light"] .news-img{background:var(--bg-2)}
body[data-theme="light"] .news-img::before{opacity:.7}

/* hero-bg grid */
body[data-theme="light"] .hero::before{opacity:.85}

/* ════════════════════════════════════════════════════════════
   THEME-TOGGLE BUTTON  (injected by _nav.js)
   ════════════════════════════════════════════════════════════ */
.theme-tog{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-1);border-radius:999px;
  color:var(--txt-1);cursor:pointer;
  transition:.15s ease;
  flex:0 0 auto;
}
.theme-tog:hover{
  color:var(--acc);border-color:var(--acc-dim);
}
.theme-tog .theme-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.theme-tog svg{display:block}

/* Theme row inside mobile sheet */
.mobile-sheet .theme-row{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--font-mono);font-size:12px;color:var(--txt-2);
  letter-spacing:.08em;text-transform:uppercase;
  margin-top:-4px;
}
.mobile-sheet .theme-row .theme-row-label::before{
  content:attr(data-zh);
}
body[data-lang="en"] .mobile-sheet .theme-row .theme-row-label::before{
  content:attr(data-en);
}
.mobile-sheet .theme-row .theme-tog{width:38px;height:38px}

/* hamburger button (hidden on desktop) */
.hamburger{display:none;width:40px;height:40px;border:1px solid var(--line-1);border-radius:8px;align-items:center;justify-content:center;color:var(--txt-1)}
.hamburger:hover{color:var(--txt-0);border-color:var(--line-2)}
.hamburger svg{display:block}

/* Mobile sheet nav (off-canvas) — hidden until .nav-open */
.mobile-sheet{
  position:fixed;inset:0;z-index:90;background:rgba(7,9,12,.85);
  backdrop-filter:blur(20px);
  display:none;flex-direction:column;
  padding:80px 24px 32px;
  opacity:0;transition:opacity .25s;
}
.mobile-sheet.open{display:flex;opacity:1}
.mobile-sheet a{
  font-family:var(--font-sans);font-size:24px;font-weight:400;
  color:var(--txt-0);padding:18px 0;
  border-bottom:1px solid var(--line-0);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-sheet a small{font-family:var(--font-mono);font-size:11px;color:var(--txt-2);letter-spacing:.1em;text-transform:uppercase}
.mobile-sheet a:hover{color:var(--acc)}
.mobile-sheet .close{
  position:absolute;top:18px;right:24px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;color:var(--txt-1);
  border:1px solid var(--line-1);border-radius:8px;
}
.mobile-sheet .sheet-foot{
  margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:14px;
}
.mobile-sheet .sheet-foot .btn{justify-content:center}
.mobile-sheet .sheet-foot .lang-row{
  display:flex;gap:0;border:1px solid var(--line-1);border-radius:999px;width:fit-content;margin:0 auto;
  font-family:var(--font-mono);font-size:13px;overflow:hidden;
}
.mobile-sheet .sheet-foot .lang-row button{padding:8px 18px;color:var(--txt-2);border:0;background:none;cursor:pointer}
.mobile-sheet .sheet-foot .lang-row button.on{background:var(--bg-3);color:var(--txt-0)}

/* Lock body scroll when sheet is open */
body.nav-open{overflow:hidden}

@media (max-width:900px){
  /* layout helpers */
  .wrap{padding:0 20px}

  /* ── Topbar ── */
  .topbar-inner{height:60px;gap:12px}
  .logo-text{font-size:14px}
  nav.primary{display:none}
  .topbar-right .lang-tog,
  .topbar-right .btn-primary,
  .topbar-right .btn-ghost{display:none}
  .topbar-right{margin-left:auto;gap:8px}
  .hamburger{display:flex}

  /* ── Type ── */
  .h-display{font-size:clamp(34px,9vw,52px)}
  .h-section{font-size:clamp(24px,6vw,34px)}
  .lede{font-size:15px}

  /* ── Hero (index) ── */
  .hero{padding:48px 0 32px !important}
  .hero-inner{grid-template-columns:1fr !important;gap:32px;min-height:0}
  .hero-eyebrow-row{flex-wrap:wrap;gap:10px;margin-bottom:18px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .search input{font-size:14px;padding:10px 14px}
  .search .btn-primary{padding:10px 14px;font-size:13px}
  .search-suggest{font-size:11px}
  .hero-meta{grid-template-columns:repeat(2,1fr) !important;gap:18px;margin-top:28px;width:100%}
  .hero-meta .num{font-size:24px}
  .terminal{font-size:11px}
  .term-row{grid-template-columns:1.4fr .8fr 1fr !important;padding:10px 12px}
  .term-row .term-pkg{display:none}
  .term-head{padding:10px 12px;font-size:11px}
  .term-foot{padding:8px 12px;font-size:10px}

  /* ── Ticker ── */
  .ticker-track{gap:24px}
  .ticker-item{font-size:11px;gap:6px}

  /* ── Sections ── */
  section{padding:56px 0 !important}
  .sec-head{grid-template-columns:1fr !important;gap:14px;margin-bottom:28px}
  .sec-head .lede{margin:8px 0 0;font-size:14px}

  /* ── Categories ── */
  .cat-grid{grid-template-columns:1fr 1fr !important}
  .cat{padding:20px 16px;gap:10px;min-height:140px}
  .cat-icon{width:36px;height:36px}
  .cat-name{font-size:15px}
  .cat-en{font-size:9px;margin-top:-6px}
  .cat-arrow{top:18px;right:18px;transform:scale(.85)}
  .cat-meta{font-size:10px}
  .cat-meta b{font-size:11px}

  /* ── Capabilities ── */
  .cap-grid{grid-template-columns:1fr !important;gap:14px}
  .cap{padding:24px 22px}

  /* ── Process ── */
  .proc{grid-template-columns:1fr !important}
  .step{border-right:0;border-bottom:1px solid var(--line-0);padding:24px 22px}
  .step:last-child{border-bottom:0}
  .step-no{font-size:36px}

  /* ── Brand wall ── */
  .brand-row{grid-template-columns:repeat(3,1fr) !important}
  .brand-cell{padding:16px 8px;font-size:12px}

  /* ── Parts featured ── */
  .parts{font-size:11px}
  .parts-head{display:none !important}
  .parts-row{grid-template-columns:1fr !important;gap:6px;padding:16px 18px;align-items:start}
  .parts-row .parts-brand::before{content:"BRAND · ";color:var(--txt-3);letter-spacing:.08em;font-size:10px}
  .parts-row .parts-pkg::before{content:"PKG · ";color:var(--txt-3);letter-spacing:.08em;font-size:10px}
  .parts-row .parts-lead::before{content:"LEAD · ";color:var(--txt-3);letter-spacing:.08em;font-size:10px}
  .parts-row .parts-stk::before{content:"STOCK";color:var(--txt-3);letter-spacing:.08em;font-size:10px;margin-right:auto}
  .parts-cta{justify-content:center}

  /* ── Stats ── */
  .stats{grid-template-columns:1fr 1fr !important}
  .stats > *{padding:24px 18px !important}

  /* ── CTA ── */
  .cta{padding:48px 24px !important}
  .cta-actions{flex-direction:column;gap:10px}
  .cta-actions .btn{width:100%;justify-content:center}

  /* ── Footer ── */
  footer{padding:40px 0 24px}
  .foot-grid{grid-template-columns:1fr 1fr !important;gap:24px !important}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center}

  /* ─── Categories page ─── */
  .catalog{grid-template-columns:1fr !important;gap:24px}
  .side{position:static !important;border:1px solid var(--line-0);border-radius:12px;padding:18px}
  .side-block{padding-bottom:14px;margin-bottom:14px}
  .toolbar{flex-wrap:wrap;gap:10px}
  .toolbar .lbl{flex:1 1 100%}
  .result-grid{grid-template-columns:1fr !important}
  .result-card{padding:18px}
  .result-row{grid-template-columns:1fr !important;gap:6px}
  .page-head .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .page-h{font-size:clamp(30px,8vw,46px)}

  /* ─── Blog page ─── */
  .blog-layout{grid-template-columns:1fr !important;gap:32px}
  .feature-card{grid-template-columns:1fr !important}
  .feature-img{min-height:200px}
  .feature-body{padding:28px 24px;gap:14px}
  .feature-t{font-size:24px}
  .filter-bar{padding:16px 0;gap:6px}
  .filter-bar .lbl{flex:1 1 100%}
  .filter-right{margin-left:0;flex:1 1 100%}
  .post{grid-template-columns:1fr !important;gap:14px;padding:20px 0}
  .post:hover{padding:20px 14px;margin:0 -14px}
  .post-thumb{aspect-ratio:16/9}
  .post-t{font-size:18px}
  .post-d{font-size:13px}
  .pager{padding:24px 0 56px}

  /* ─── Generic page-head used across pages ─── */
  .page-head{padding:40px 0 24px}
}

/* very small phones */
@media (max-width:420px){
  .wrap{padding:0 16px}
  .cat-grid{grid-template-columns:1fr !important}
  .brand-row{grid-template-columns:repeat(2,1fr) !important}
  .stats{grid-template-columns:1fr !important}
  .foot-grid{grid-template-columns:1fr !important}
}