/* Propane Media brand tokens, aligned with propanemedia.ai/assets/css/brand.css. */
:root, [data-theme="light"] {
  --bg:        #f4f4f5;
  --bg-1:      #ffffff;
  --bg-2:      #ffffff;
  --bg-3:      #efeff1;
  --line:      #e7e7ea;
  --line-2:    #d7d7dc;
  --ink:       #18181b;
  --ink-2:     #52525b;
  --ink-3:     #67676f;   /* muted/label text; AA on every light surface */
  --ink-4:     #7c7c84;   /* tertiary caption/placeholder text */

  --accent:      #ef4444;   /* brand red; fills, borders, icons */
  --accent-ink:  #ffffff;   /* on an accent fill */
  --accent-strong:#b91c1c;  /* small RED TEXT on a light wash (AA) */
  --accent-weak: #fdeded;
  --accent-line: #f6bcbc;

  --solid:     #18181b;
  --solid-ink: #ffffff;
  --raised:    #ffffff;

  --nav-bg:    rgba(255,255,255,.72);

  --good:#16a34a; --good-weak:#dcfce7; --good-ink:#0a3d1f;
  --warn:#b45309; --warn-weak:#fef3c7;
  --bad:#dc2626;  --bad-weak:#fee2e2;  --bad-ink:#7f1d1d;  --bad-solid:#dc2626;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --pad: clamp(16px, 4vw, 28px);
  --maxw: 1180px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .16s; --t: .28s; --t-slow: .6s;

  --shadow:    0 1px 2px rgba(24,24,27,.05), 0 18px 40px -28px rgba(24,24,27,.28);
  --shadow-sm: 0 1px 2px rgba(24,24,27,.10), 0 2px 8px -3px rgba(24,24,27,.12);
}


[data-theme="dark"] {
  --bg:        #0a0a0b;
  --bg-1:      #111113;
  --bg-2:      #161618;
  --bg-3:      #1e1e21;
  --line:      #2a2a2d;
  --line-2:    #3a3a40;
  --ink:       #fafafa;
  --ink-2:     #b6b6bd;
  --ink-3:     #76767e;
  --ink-4:     #6c6c74;   /* lifted so tertiary text stays legible on dark */

  --accent:      #f4504f;
  --accent-ink:  #ffffff;
  --accent-strong:#f4504f;  /* already reads on dark; same as --accent */
  --accent-weak: #2a1416;
  --accent-line: #5a2528;

  --solid:     #fafafa;
  --solid-ink: #0a0a0b;
  --raised:    #2a2a2e;

  --nav-bg:    rgba(10,10,11,.62);

  --good:#5fe39b; --good-weak:#d6f7e0; --good-ink:#0a3d1f;
  --warn:#f2d08a; --warn-weak:#f7e9c8;
  --bad:#f48b8f;  --bad-weak:#f6cdce;  --bad-ink:#7f1d1d;  --bad-solid:#b42318;

  --shadow:    0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.9);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
}


:root{font-family:var(--font);color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button,select{cursor:pointer}
a{color:inherit}
header{max-width:1320px;margin:auto;padding:28px 44px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;font-family:var(--font);font-size:27px;font-weight:800;letter-spacing:-1.4px;display:flex;align-items:center;gap:9px}
.brand-mark{display:grid;place-items:center;width:33px;height:33px;background:var(--accent);color:var(--accent-ink);border-radius:11px;line-height:1}
.powered{font-size:10px;letter-spacing:1.7px;color:var(--ink-3)}
.powered span{display:block;letter-spacing:0;text-align:right;font-size:12px;margin-top:4px}
main{max-width:1320px;margin:auto;padding:0 44px}
.intro{padding:58px 0 34px;display:flex;justify-content:space-between;align-items:flex-end}

h1{font:760 76px/1.02 var(--font);letter-spacing:-3px;margin:0}
.lede{color:var(--ink-3);font-size:14px;margin:18px 0 0}



.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:12px 0 49px}
.metric{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:24px}
.metric>span{font-size:12px;color:var(--ink-2)}
.metric strong{display:block;font:500 36px/1.3 var(--mono);letter-spacing:-1.5px;margin:16px 0 7px;font-variant-numeric:tabular-nums}
.metric small{font-size:10px;color:var(--ink-3)}
.metric.primary{background:var(--solid);border-color:var(--solid);color:var(--accent)}
.metric.primary>span{color:var(--solid-ink)}
.metric.primary small{color:var(--ink-4)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:23px}

h2{font:760 25px/1.1 var(--font);letter-spacing:-.7px;margin:0}
select{padding:11px 30px 11px 13px;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--ink-2)}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:24px 23px 14px;min-width:0}
.chart-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
h3{font-size:13px;font-weight:600;margin:0}
.legend{font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.legend:before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font);fill:var(--ink-3);font-size:10px}
.chart .chart-zero{fill:var(--ink-3);font-size:12px}
.chart line{stroke:var(--line);stroke-width:1}
.data-note{font-size:10px;color:var(--ink-3);line-height:1.6;max-width:940px;margin:16px 0 44px}
.filters{display:flex;gap:10px;margin-bottom:22px}
.search{display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--line);border-radius:7px;padding:0 14px;flex:1;color:var(--ink-3)}
.search input{width:100%;border:0;outline:none;background:transparent;font-size:12px;padding:13px 0;color:var(--ink)}
#result-count{font-size:13px;letter-spacing:0;color:var(--ink-3);font-weight:400;margin-left:7px}
.empty{background:var(--bg-1);border:1px dashed var(--line-2);border-radius:12px;text-align:center;padding:51px 20px 56px}
.empty-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 17px;color:var(--accent);background:var(--accent-weak);border-radius:13px;font-size:24px}
.empty h3{font:600 18px var(--font);color:var(--ink)}
.empty p{font-size:12px;color:var(--ink-3);max-width:400px;margin:12px auto 0;line-height:1.7}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.post-art{aspect-ratio:16/9;background:linear-gradient(145deg,var(--bg-3),var(--bg-1));display:grid;place-items:center;text-decoration:none;position:relative}
.post-art img{width:100%;height:100%;object-fit:cover;position:absolute}
.play{z-index:1;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--solid);color:var(--solid-ink);font-size:16px}
.post-body{padding:18px}
.post-top{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);margin-bottom:10px}
.post-title{line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.post-caption{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:8px 0 16px}
.post-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.post-bottom strong{font:700 20px var(--font);letter-spacing:-.6px}
.post-bottom small{font-size:10px;font-weight:400;color:var(--ink-3);margin-left:4px}
.post-bottom a{font-size:11px;color:var(--ink-2);text-decoration:none}
#more{display:block;margin:24px auto 0;padding:11px 30px;border:1px solid var(--line-2);background:var(--solid);border-radius:7px;color:var(--solid-ink)}
#more[hidden]{display:none}
footer{border-top:1px solid var(--line);margin-top:65px;padding:25px 0 35px;display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3)}
footer>span:first-child{font-weight:600;font-size:13px}
#error{padding:16px;background:var(--accent-weak);border:1px solid var(--accent-line);border-radius:8px;margin-bottom:20px;font-size:13px;color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
button:focus-visible,select:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:950px){header{padding:22px 25px}
main{padding:0 25px}
.metrics{grid-template-columns:repeat(2,1fr)}
.post-grid{grid-template-columns:repeat(2,1fr)}
h1{font-size:50px}

}
@media(max-width:640px){header{padding:20px}
main{padding:0 20px}
.intro{display:block;padding-top:35px}

h1{font-size:46px;letter-spacing:-2px}
.metrics{gap:10px;margin-bottom:35px}
.metric{padding:19px 15px}
.metric strong{font-size:31px}
.metric small{font-size:9px}
.charts{grid-template-columns:1fr}
.chart-card{padding:20px 16px 12px}
h2{font-size:19px}
.section-head{gap:10px}

.filters{flex-wrap:wrap}
.search{flex-basis:100%}
.filters select{flex:1;min-width:0}
.post-grid{grid-template-columns:1fr}
.powered{font-size:9px}
.data-note{margin-bottom:35px}
}


.brand{font-family:var(--font);font-weight:800;letter-spacing:-.04em;font-size:22px}
.brand-mark{border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:20px;box-shadow:0 2px 10px -2px color-mix(in srgb,var(--accent) 60%,transparent)}
.powered,.metric>span,.metric small,.legend,.data-note,.post-top,footer{font-family:var(--mono)}
.intro h1{letter-spacing:-.055em;text-transform:lowercase}
.intro h1 span{color:var(--ink-3)}
.powered{display:flex;align-items:center;gap:20px}
.powered span{display:inline;font-size:10px}
.theme-toggle{border:1px solid var(--line-2);background:var(--bg-2);border-radius:999px;color:var(--ink-2);padding:8px 12px;font:11px var(--mono)}
.metric.primary{background:var(--solid);border-color:var(--solid)}
.metric.primary strong{color:var(--accent)}
.metric.primary small{color:var(--solid-ink);opacity:.65}
.chart svg{--chart:var(--accent)}
.chart .chart-line{stroke:var(--accent)}
.chart .chart-dot,.chart .chart-bar{fill:var(--accent)}
.chart .chart-correction{fill:var(--ink-3)}
.chart stop{stop-color:var(--accent)}
.chart .chart-zero{fill:var(--ink-3)}
.post-art{background:linear-gradient(145deg,var(--bg-3),var(--bg-1))}
.metric strong{overflow-wrap:anywhere}

@media(max-width:640px){.powered{gap:10px}
.intro h1{font-size:56px}
.metric strong{font-size:28px}
.intro{padding-top:40px}
.section-head{align-items:flex-end}
.powered>span{display:none}
}

#status:empty{display:none}