/* ============================================================
   STARS / Simplify Planet Labs — Blog shared styles
   Chrome (tokens, nav, footer) mirrors the main site; plus
   article + listing typography. Loaded by every blog page.
   ============================================================ */

/* ---------- tokens (match site) ---------- */
:root{
  --navy:#0a1330; --navy-2:#0e1c4a;
  --teal:#0d9aad; --teal-2:#14b8cc; --mint:#46e6c3;
  --ink:#0d1730; --muted:#5a6b86; --line:#e4e9f2;
  --bg:#ffffff; --bg-soft:#f5f8fc; --card:#ffffff;
  --shadow:0 1px 2px rgba(12,25,60,.06), 0 16px 40px rgba(12,25,60,.09);
  --radius:18px; --maxw:1140px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9eefb; --muted:#93a3c2; --line:#1b2748; --bg:#070c1c;
    --bg-soft:#0a1124; --card:#0c1430; --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 44px rgba(0,0,0,.5);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--teal);}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  border-radius:999px; padding:12px 22px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-grad{ color:#04121a; background:linear-gradient(92deg,var(--mint),var(--teal-2)); box-shadow:0 10px 26px rgba(20,184,204,.4); }
.btn-grad:hover{ box-shadow:0 14px 32px rgba(70,230,195,.5); color:#04121a;}
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

/* ---------- nav (mirrors site) ---------- */
header.nav{ position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 86%, transparent); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; gap:22px; height:68px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.01em; font-size:16px; color:var(--ink); }
.brand .mark{ width:34px; height:auto; display:block; }
.brand .mark-drk{ display:none; }
@media (prefers-color-scheme:dark){ .brand .mark-lite{ display:none; } .brand .mark-drk{ display:block; } }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.nav-links a:not(.btn){ white-space:nowrap; }
.nav-links a{ color:var(--muted); font-weight:600; font-size:14.5px; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.signin{ font-size:13px !important; color:var(--muted); border-left:1px solid var(--line); padding-left:26px; }
.navtoggle{ display:none; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--ink); cursor:pointer; padding:0; }
.navtoggle svg{ width:22px; height:22px; }
@media (max-width:820px){
  .navtoggle{ display:inline-flex; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; margin:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:8px 24px 16px; display:none; }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; font-size:16px; padding:13px 2px; border-bottom:1px solid var(--line); white-space:normal; }
  .nav-links a.signin{ border-bottom:none; border-left:none; padding-left:2px; font-size:15px !important; }
  .nav-links .btn{ margin-top:12px; justify-content:center; padding:12px 22px; font-size:15px; }
}
@media (max-width:380px){
  .wrap{ padding:0 16px; }
  .nav-in .brand{ font-size:15px; }
  .nav-in .brand .mark{ width:30px; }
}

/* ---------- footer (mirrors site) ---------- */
footer{ border-top:1px solid var(--line); padding:48px 0 62px; margin-top:72px; }
.foot{ display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.foot .muted{ color:var(--muted); }
.foot .cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot h5{ margin:0 0 12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.foot a{ display:block; color:var(--ink); font-weight:600; font-size:14.5px; margin-bottom:8px; }
.foot a:hover{ color:var(--teal); }
.legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- blog listing ---------- */
.blog-hero{ background:
    radial-gradient(90% 80% at 85% 0%, rgba(70,230,195,.10) 0%, rgba(70,230,195,0) 55%),
    var(--bg-soft);
  border-bottom:1px solid var(--line); }
.blog-hero-in{ max-width:760px; padding:62px 0 52px; }
.blog-hero h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.08; letter-spacing:-.02em; font-weight:850; margin:14px 0 0; }
.blog-hero p{ color:var(--muted); font-size:18px; margin:16px 0 0; }
.post-list{ display:grid; gap:22px; padding:46px 0; max-width:820px; }
.post-card{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:26px 28px; transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--teal); box-shadow:0 14px 34px rgba(12,25,60,.12); }
.post-card .tag{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.post-card h2{ margin:10px 0 0; font-size:22px; line-height:1.22; letter-spacing:-.01em; color:var(--ink); }
.post-card .meta{ color:var(--muted); font-size:13.5px; margin:9px 0 0; }
.post-card .excerpt{ color:var(--muted); font-size:15.5px; margin:12px 0 0; }
.post-card .more{ display:inline-block; margin:14px 0 0; font-weight:700; font-size:14.5px; color:var(--teal); }

/* ---------- article ---------- */
.post{ max-width:720px; margin:0 auto; padding:0 24px; }
.post-top{ padding:34px 0 0; }
.back{ font-size:14px; font-weight:600; color:var(--muted); }
.back:hover{ color:var(--teal); }
.post-head{ padding:20px 0 20px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.post-head .series{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.post-head h1{ font-size:clamp(28px,4.4vw,42px); line-height:1.12; letter-spacing:-.02em; font-weight:850; margin:12px 0 0; }
.post-head .lede{ font-size:18px; color:var(--muted); margin:14px 0 0; font-weight:600; }
.post-head .meta{ color:var(--muted); font-size:13.5px; margin:14px 0 0; }
.post-body{ font-size:17px; }
.post-body > p{ margin:0 0 18px; }
.post-body h2{ font-size:clamp(21px,2.8vw,26px); letter-spacing:-.01em; line-height:1.2; margin:40px 0 14px; }
.post-body h3{ font-size:19px; margin:28px 0 10px; }
.post-body ul, .post-body ol{ margin:0 0 18px; padding-left:22px; }
.post-body li{ margin:0 0 8px; }
.post-body strong{ color:var(--ink); font-weight:750; }
.post-body a{ color:var(--teal); border-bottom:1px solid rgba(13,154,173,.35); }
.post-body a:hover{ color:var(--teal-2); border-color:var(--teal-2); }

/* "Today's action" callout */
.post-body .action{ background:var(--bg-soft); border-left:4px solid var(--teal-2); border-radius:0 12px 12px 0; padding:14px 18px; margin:0 0 22px; font-size:16px; }
.post-body .action strong{ color:var(--teal); }

/* highlighted ask / committee question */
.post-body .ask{ background:linear-gradient(92deg, rgba(70,230,195,.12), rgba(20,184,204,.08)); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:0 0 22px; font-size:18px; font-weight:700; color:var(--ink); }

/* illustrative figure note */
.post-body .note{ border:1px dashed var(--line); border-radius:12px; padding:14px 18px; margin:0 0 22px; color:var(--muted); font-size:15.5px; }
.post-body .note strong{ color:var(--ink); }

/* table (horizontally scrollable on narrow screens) */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 22px; border:1px solid var(--line); border-radius:12px; }
.post-body table{ border-collapse:collapse; width:100%; min-width:560px; font-size:14.5px; }
.post-body th, .post-body td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.post-body th{ background:var(--bg-soft); font-weight:750; color:var(--ink); white-space:nowrap; }
.post-body tr:last-child td{ border-bottom:none; }

/* WhatsApp share */
/* WhatsApp share — official WhatsApp green with white text + white icon (readable + recognizable).
   The compound selector beats `.post-body a` (which would otherwise force teal text + underline). */
.wa-share, .post-body a.wa-share{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  color:#fff; background:#25D366; border:none; border-radius:999px; padding:11px 20px; cursor:pointer;
  box-shadow:0 8px 20px rgba(37,211,102,.35); transition:transform .08s ease, box-shadow .2s ease; }
.wa-share:hover, .post-body a.wa-share:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(37,211,102,.45); color:#fff; }
.wa-share svg{ width:19px; height:19px; fill:currentColor; }
.wa-row{ margin:22px 0; }

/* closing brand / explore STARS */
.post-cta{ margin:42px 0 0; padding:30px 28px; border-radius:var(--radius);
  color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(80% 120% at 100% 0%, rgba(70,230,195,.25),rgba(70,230,195,0) 55%),
             linear-gradient(150deg,#0a1330,#0e1c4a 70%,#123a6b); }
.post-cta .eyebrow{ color:var(--mint); }
.post-cta h2{ color:#fff; font-size:clamp(22px,3vw,28px); letter-spacing:-.01em; margin:10px 0 0; line-height:1.18; }
.post-cta p{ color:rgba(233,238,251,.86); font-size:16px; margin:12px 0 0; }
.post-cta .btn{ margin-top:20px; }
.coming-next{ color:var(--muted); font-size:15px; font-style:italic; margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line); }

.post-hr{ border:none; border-top:1px solid var(--line); margin:34px 0; }

/* reader feedback — "Was this helpful?" (counts engaged readers in GA4; no public tally) */
.blog-feedback{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin:34px 0 0; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft); }
.blog-feedback .bf-q{ font-weight:700; color:var(--ink); font-size:16px; }
.blog-feedback .bf-btns{ display:flex; gap:10px; }
.blog-feedback .bf-btns[hidden]{ display:none !important; }   /* flex would otherwise override the hidden attribute */
.blog-feedback .bf-btn{ font:inherit; font-size:15px; font-weight:700; cursor:pointer; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); transition:border-color .18s ease, color .18s ease, transform .08s ease; }
.blog-feedback .bf-btn:hover{ border-color:var(--teal); color:var(--teal); }
.blog-feedback .bf-btn:active{ transform:translateY(1px); }
.blog-feedback .bf-thanks{ font-weight:700; color:var(--teal); font-size:16px; }

/* visible video attribution / reader-guidance box (shown before the first video) */
.video-guidance{ border:1px solid var(--line); border-left:4px solid var(--teal-2); border-radius:0 12px 12px 0; background:var(--bg-soft); padding:16px 20px; margin:6px 0 22px; font-size:14px; line-height:1.6; color:var(--muted); }
.video-guidance h3{ font-size:16px; margin:0 0 10px; color:var(--ink); }
.video-guidance p{ margin:0 0 10px; }
.video-guidance p:last-child{ margin-bottom:0; }
.video-guidance strong{ color:var(--ink); }
.video-guidance a{ color:var(--teal); border-bottom:1px solid rgba(13,154,173,.35); }

/* YouTube facade — click-to-play, lazy, privacy-friendly (youtube-nocookie); nothing loads until clicked */
.yt-card{ margin:0 0 8px; }
.yt-facade{ position:relative; display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; padding:0; color:#fff; text-align:left;
  background:linear-gradient(150deg,#0a1330,#0e1c4a 70%,#123a6b); }
.yt-facade .yt-badge{ position:absolute; top:12px; left:14px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.yt-facade .yt-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:rgba(255,0,0,.92); border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .12s ease, background .2s ease; }
.yt-facade:hover .yt-play{ transform:scale(1.06); background:#ff0000; }
.yt-facade .yt-play svg{ width:26px; height:26px; fill:#fff; margin-left:3px; }
.yt-facade .yt-label{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px; font-weight:700; font-size:15px; line-height:1.3; background:linear-gradient(transparent, rgba(4,8,20,.88)); }
.yt-card iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:14px; display:block; }
.yt-cap{ font-size:13px; color:var(--muted); margin:9px 0 0; line-height:1.5; }
.yt-cap a{ color:var(--teal); border-bottom:1px solid rgba(13,154,173,.35); white-space:nowrap; }

@media (max-width:480px){
  .post-body{ font-size:16.5px; }
  .post-cta{ padding:26px 20px; }
}