/* =========================================================================
   Bloomforge Devlog · shared stylesheet
   Used by both /devlog/index.html and /devlog/post.html
   Matches the landing page CRT aesthetic.
   ========================================================================= */

:root{
  --bg: #050505;
  --bg-2: #0a0e0a;
  --green: #33ff33;
  --green-dim: #1a8a1a;
  --green-deep: #0f4a0f;
  --amber: #ffb627;
  --red: #ff4d4d;
  --cyan: #4dd2ff;
  --text: #c8ffc8;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background: var(--bg); color: var(--text); }
body{
  font-family: "VT323", "Space Mono", ui-monospace, monospace;
  font-size: 20px;
  line-height: 1.5;
  text-shadow: 0 0 4px rgba(51,255,51,0.35);
  overflow-x: hidden;
  min-height: 100vh;
}

/* CRT layers */
.scanlines, .vignette{
  position: fixed; inset: 0; pointer-events: none;
}
.scanlines{
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%);
  background-size: 100% 4px;
  z-index: 80;
}
.vignette{
  background: radial-gradient(circle at 50% 50%, rgba(5,5,5,0) 55%, rgba(5,5,5,0.92) 100%);
  z-index: 79;
}

/* Top status bar */
.statusbar{
  position: fixed; left: 0; right: 0; top: 0; z-index: 90;
  display: flex; gap: 24px; padding: 6px 16px;
  background: rgba(5,8,5,0.85);
  backdrop-filter: blur(2px);
  border-bottom: 1px solid var(--green-dim);
  font-family: "Space Mono", monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); text-shadow: 0 0 6px rgba(51,255,51,0.5);
}
.statusbar .dot{ width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--green); margin-right: 6px; animation: blink 1.4s steps(2) infinite; }
.statusbar .spacer{ flex: 1; }
.statusbar a{ color: var(--green); text-decoration: none; }
.statusbar a:hover{ text-shadow: 0 0 6px var(--green); }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0.2} }

/* Layout */
main{
  max-width: 980px; margin: 0 auto;
  padding: 64px 28px 96px;
  position: relative; z-index: 10;
}
@media (max-width: 760px){ main{ padding: 56px 16px 64px; } }

/* Typography */
h1, h2, h3, h4{ font-family: "VT323", monospace; font-weight: 400; margin: 0; line-height: 1.05; color: var(--green); text-shadow: 0 0 10px rgba(51,255,51,0.7), 0 0 24px rgba(51,255,51,0.3); }
h1{ font-size: clamp(40px, 6vw, 80px); text-transform: uppercase; letter-spacing: 0.04em; }
h2{ font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; letter-spacing: 0.04em; }
h3{ font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; }
h4{ font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em; }
p{ margin: 0 0 14px; color: var(--text); }

.sectlabel{
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.18em;
  color: var(--green-dim); text-transform: uppercase; text-shadow: none;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.sectlabel .line{ flex: 1; height: 1px; background: var(--green-deep); }

a{ color: var(--green); }
a:hover{ text-shadow: 0 0 6px var(--green); }

.crumbs{
  font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 0.12em;
  color: var(--green-dim); text-transform: uppercase; text-shadow: none;
  margin-bottom: 28px;
}
.crumbs a{ color: var(--green-dim); text-decoration: none; }
.crumbs a:hover{ color: var(--green); }

/* CATEGORY CHIPS */
.cat{
  display: inline-block; padding: 2px 8px;
  font-family: "Space Mono", monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; text-shadow: none;
  border: 1px solid currentColor;
}
.cat.feature{ color: var(--green); }
.cat.patch{ color: var(--amber); }
.cat.deep-dive{ color: var(--cyan); }
.cat.incident{ color: var(--red); }
.cat.postmortem{ color: var(--green-dim); }

/* POST ITEM (used on index) */
.entry{
  display: grid;
  grid-template-columns: 130px 1fr 180px;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--green-deep);
  align-items: start;
  transition: background 120ms;
}
.entry:hover{ background: rgba(51,255,51,0.025); }
.entry .stamp{
  font-family: "Space Mono", monospace;
  color: var(--green-dim); text-shadow: none;
  font-size: 12px; letter-spacing: 0.06em;
}
.entry .stamp .date{ display: block; color: var(--green); text-shadow: 0 0 6px rgba(51,255,51,0.4); font-size: 14px; }
.entry .stamp .num{ display: block; margin-top: 4px; }
.entry .body h3{ margin-bottom: 8px; }
.entry .body h3 a{
  color: var(--green); text-decoration: none;
  text-shadow: 0 0 10px rgba(51,255,51,0.55);
}
.entry .body h3 a:hover{ text-decoration: underline; text-decoration-color: var(--green); }
.entry .body .summary{ color: var(--text); font-size: 17px; margin: 0; max-width: 60ch; }
.entry .body .read{
  display: inline-block; margin-top: 12px;
  font-family: "Space Mono", monospace; font-size: 11px;
  letter-spacing: 0.18em; color: var(--green);
  text-decoration: none; text-shadow: 0 0 4px rgba(51,255,51,0.4);
}
.entry .body .read:hover{ text-shadow: 0 0 8px var(--green); }
.entry .body .tags{
  margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
  font-family: "Space Mono", monospace; font-size: 10px;
  letter-spacing: 0.12em; color: var(--green-dim); text-shadow: none;
  text-transform: uppercase;
}
.entry .body .tags span::before{ content: "#"; }
.entry .thumb{
  width: 100%; aspect-ratio: 4/3;
  border: 1px solid var(--green-deep);
  background: repeating-linear-gradient(45deg, rgba(51,255,51,0.04) 0 8px, transparent 8px 16px);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-deep); font-family: "Space Mono", monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: none;
  overflow: hidden;
}
.entry .thumb img{ width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

@media (max-width: 760px){
  .entry{ grid-template-columns: 1fr; gap: 12px; }
  .entry .thumb{ aspect-ratio: 16/9; max-width: 100%; }
  .entry .stamp{ display: flex; align-items: center; gap: 12px; }
  .entry .stamp .num{ margin-top: 0; }
}

/* INDEX HEADER */
.indexhead{
  border: 1px solid var(--green-dim);
  background: linear-gradient(180deg, rgba(51,255,51,0.04), rgba(51,255,51,0));
  padding: 22px 24px;
  margin-bottom: 28px;
  display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: end;
}
.indexhead .lede{ color: var(--text); font-size: 18px; margin-top: 12px; max-width: 60ch; }
.indexhead .meta{
  font-family: "Space Mono", monospace; font-size: 11px;
  letter-spacing: 0.1em; color: var(--green-dim); text-shadow: none;
  border-left: 1px solid var(--green-deep); padding-left: 16px;
}
.indexhead .meta .row{ display: flex; justify-content: space-between; padding: 2px 0; }
.indexhead .meta .row .v{ color: var(--green); text-shadow: 0 0 4px rgba(51,255,51,0.4); }
.indexhead .meta a{ color: var(--amber); text-decoration: none; text-shadow: 0 0 4px rgba(255,182,39,0.3); }
@media (max-width: 760px){ .indexhead{ grid-template-columns: 1fr; } .indexhead .meta{ border-left: 0; padding-left: 0; border-top: 1px solid var(--green-deep); padding-top: 12px; } }

/* CATEGORY FILTER BAR */
.filters{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.filters button{
  background: transparent; border: 1px solid var(--green-deep);
  color: var(--green-dim); text-shadow: none;
  font-family: "Space Mono", monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; cursor: pointer;
  transition: all 100ms;
}
.filters button:hover{ color: var(--green); border-color: var(--green-dim); }
.filters button.active{ color: var(--green); border-color: var(--green); background: rgba(51,255,51,0.06); text-shadow: 0 0 6px var(--green); }

/* POST PAGE */
.post-head{ margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--green-deep); }
.post-head .post-date{ font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.12em; color: var(--green-dim); text-shadow: none; text-transform: uppercase; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.post-head h1{ font-size: clamp(36px, 5vw, 64px); margin-bottom: 14px; line-height: 1.05; }
.post-head .post-sub{ color: var(--text); font-size: 19px; max-width: 60ch; }
.post-head .post-tags{ margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--green-dim); text-shadow: none; text-transform: uppercase; }
.post-head .post-tags span::before{ content: "#"; }

.post-body{
  font-family: "VT323", monospace;
  font-size: 21px; line-height: 1.55;
  color: var(--text);
  max-width: 70ch;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4{ margin: 36px 0 14px; }
.post-body h2{ font-size: 36px; }
.post-body h3{ font-size: 26px; }
.post-body p{ margin: 0 0 18px; }
.post-body a{ color: var(--green); text-decoration: underline; text-decoration-color: var(--green-dim); text-underline-offset: 3px; }
.post-body a:hover{ text-decoration-color: var(--green); text-shadow: 0 0 6px var(--green); }
.post-body strong{ color: var(--green); font-weight: 400; text-shadow: 0 0 6px rgba(51,255,51,0.5); }
.post-body em{ color: var(--amber); font-style: normal; text-shadow: 0 0 6px rgba(255,182,39,0.4); }
.post-body code{
  font-family: "Space Mono", monospace; font-size: 14px;
  background: rgba(51,255,51,0.06); border: 1px solid var(--green-deep);
  padding: 1px 6px; color: var(--green); text-shadow: 0 0 4px rgba(51,255,51,0.4);
}
.post-body pre{
  font-family: "Space Mono", monospace; font-size: 13px; line-height: 1.6;
  background: #000; border: 1px solid var(--green-dim);
  padding: 14px 16px; margin: 22px 0;
  overflow-x: auto; color: var(--green); text-shadow: 0 0 4px rgba(51,255,51,0.35);
  box-shadow: inset 0 0 30px rgba(51,255,51,0.06);
}
.post-body pre code{ background: none; border: 0; padding: 0; font-size: inherit; }
.post-body blockquote{
  border-left: 3px solid var(--green); padding: 4px 0 4px 18px;
  margin: 22px 0; color: var(--green); font-style: normal;
  text-shadow: 0 0 6px rgba(51,255,51,0.4);
}
.post-body ul, .post-body ol{ margin: 0 0 18px; padding-left: 24px; }
.post-body li{ margin-bottom: 6px; }
.post-body li::marker{ color: var(--green-dim); }
.post-body img{
  display: block; max-width: 100%;
  margin: 22px auto; border: 1px solid var(--green-dim);
  image-rendering: pixelated;
}
.post-body hr{
  border: 0; height: 1px; background: var(--green-deep);
  margin: 32px 0;
}
.post-body table{
  width: 100%; border-collapse: collapse; margin: 22px 0;
  font-family: "Space Mono", monospace; font-size: 13px;
}
.post-body th, .post-body td{
  border-bottom: 1px solid var(--green-deep);
  padding: 6px 10px; text-align: left;
}
.post-body th{ color: var(--green-dim); text-transform: uppercase; letter-spacing: 0.1em; text-shadow: none; }

/* PREV / NEXT */
.postnav{
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--green-deep);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.1em;
}
.postnav a{
  display: block; padding: 12px 14px;
  border: 1px solid var(--green-deep);
  text-decoration: none; color: var(--green-dim); text-shadow: none;
}
.postnav a:hover{ border-color: var(--green); color: var(--green); }
.postnav .next{ text-align: right; }
.postnav small{ display: block; color: var(--green-deep); margin-bottom: 6px; }
.postnav .title{ color: var(--green); font-family: "VT323", monospace; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
@media (max-width: 760px){ .postnav{ grid-template-columns: 1fr; } .postnav .next{ text-align: left; } }

/* FOOTER */
.foot{
  margin-top: 64px; padding-top: 28px;
  border-top: 1px solid var(--green-deep);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: "Space Mono", monospace; font-size: 11px;
  color: var(--green-dim); text-shadow: none; letter-spacing: 0.06em;
}
.foot a{ color: var(--green-dim); text-decoration: none; }
.foot a:hover{ color: var(--green); }
.foot .spacer{ flex: 1; }

/* Empty state */
.empty{
  padding: 48px 24px; border: 1px dashed var(--green-deep);
  text-align: center; color: var(--green-dim); text-shadow: none;
  font-family: "Space Mono", monospace; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Loading state */
.loading{
  padding: 32px 0; color: var(--green-dim); text-shadow: none;
  font-family: "Space Mono", monospace; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.loading::after{
  content: "▌"; display: inline-block; margin-left: 6px;
  animation: blink 0.9s steps(2) infinite;
}