/* post.css — blog styles for mystman.com
   Loaded after style.css. Adds prose, figure and code styles for long-form
   posts. Everything is scoped to .post so the homepage is untouched.

   Figure palette — four roles, used consistently across every diagram:
     --level  runtime state / the current value      emerald #50C878
     --key    declared state / the identity or key   gold    #ffd700  (yours)
     --edge   the archive / what is discarded        rust    #D14A10
     --ink-2  structure: boxes and arrows            azure   #007FFF
   Token names match the source diagrams so the SVGs paste in unedited. */

.post {
  /* structure */
  --ink:      var(--text-primary);
  --ink-2:    #007FFF;              /* azure — structural boxes and arrows */
  --ink-3:    var(--text-secondary);
  --panel:    var(--card-bg);
  --panel-2:  #0e1c38;
  --rule:     rgba(178, 151, 88, .22);
  --rule-2:   rgba(178, 151, 88, .12);
  --mono:     var(--font-mono);
  --warn:     #ff7a7a;

  /* semantic figure hues */
  --level:      #50C878;            /* emerald — runtime state */
  --level-soft: rgba(80, 200, 120, .13);
  --key:        var(--accent-gold); /* gold — declared state */
  --key-soft:   rgba(255, 215, 0, .13);
  --struct:      #007FFF;           /* azure — method and provenance */
  --struct-soft: rgba(0, 127, 255, .12);
  --edge:       #D14A10;            /* rust — the archive / discarded */
  --edge-soft:  rgba(209, 74, 16, .15);

  /* semantic aliases used by the checkpoint post */
  --runtime: var(--level);  --runtime-soft: var(--level-soft);
  --declared: var(--key);   --declared-soft: var(--key-soft);
  --archive: var(--edge);   --archive-soft: var(--edge-soft);
}

/* The figure palette is deliberately the same in both skins: the pixel-blade
   ground is darker, so every hue gains contrast rather than losing it.
   Only the surfaces and rules change. */
html[data-theme="pixel-blade"] .post {
  --panel-2:  #100c16;
  --rule:     rgba(255, 157, 77, .26);
  --rule-2:   rgba(255, 157, 77, .14);
}

/* ---- layout ---- */
.post { max-width: 760px; margin: 0 auto; padding: 0 var(--spacing-md) var(--spacing-lg); }
.post-header { padding: var(--spacing-lg) 0 var(--spacing-md); border-bottom: 1px solid var(--rule); margin-bottom: var(--spacing-md); }
.post-meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1rem; }
.post-meta b { color: var(--level); font-weight: 400; }
.post h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.post .standfirst { font-size: 1.15rem; line-height: 1.6; color: var(--text-secondary); }
.post .standfirst strong { color: var(--text-primary); font-weight: 700; }

.post h2 { font-size: 1.6rem; margin: var(--spacing-lg) 0 1rem; }
.post h3 { font-size: 1.1rem; margin: var(--spacing-md) 0 .5rem; }
.post p { margin-bottom: 1.1rem; }
.post ul, .post ol { margin: 0 0 1.1rem 1.2rem; }
.post li { margin-bottom: .5rem; }
.post a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.post a:hover { color: var(--text-primary); }
.post strong { color: var(--text-primary); }

/* ---- code ---- */
.post code { font-family: var(--mono); font-size: .875em; background: var(--panel-2); padding: 1px 5px; border-radius: 3px; color: var(--text-primary); }
.post pre { font-family: var(--mono); font-size: .82rem; line-height: 1.6; background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 4px; padding: 1rem; overflow-x: auto; margin: 0 0 1.4rem; color: var(--text-primary); }
.post pre code { background: none; padding: 0; }
.post pre b { color: var(--level); font-weight: 700; }
.post pre i { color: var(--edge); font-style: normal; }

/* ---- measured-output blocks ---- */
.measured { border: 1px solid var(--rule); border-radius: 4px; margin: 0 0 1.4rem; overflow: hidden; }
.measured-head { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); background: var(--panel-2); padding: .5rem .9rem; border-bottom: 1px solid var(--rule-2); display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.measured-head .tag { color: var(--level); }
.measured pre { border: 0; border-radius: 0; margin: 0; background: var(--card-bg); }

/* ---- figures ---- */
.post figure { margin: 1.6rem 0; }
.post figure svg { display: block; width: 100%; height: auto; color: var(--ink-2); }
.fig-box { border: 1px solid var(--rule); border-radius: 4px; background: var(--card-bg); padding: 1.1rem .9rem .6rem; overflow-x: auto; }
.post figcaption { font-size: .85rem; line-height: 1.55; color: var(--text-secondary); margin-top: .7rem; }
.post figcaption b { color: var(--text-primary); }

/* ---- callout ---- */
.callout { border-left: 3px solid var(--level); background: var(--level-soft); padding: .9rem 1.1rem; margin: 0 0 1.4rem; border-radius: 0 4px 4px 0; }
.callout p:last-child { margin-bottom: 0; }
.callout .lab { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--level); margin-bottom: .4rem; }

/* provenance / how-it-was-run note — sibling of .callout, azure instead of emerald */
.runnote { border-left: 3px solid var(--struct); background: var(--struct-soft); padding: .9rem 1.1rem; margin: 0 0 1.4rem; border-radius: 0 4px 4px 0; }
.runnote p:last-child { margin-bottom: 0; }
.runnote .lab { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--struct); margin-bottom: .4rem; }

/* ---- tables ---- */
.post .tbl { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid var(--rule); border-radius: 4px; }
.post table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 460px; }
.post th, .post td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.post th { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); background: var(--panel-2); white-space: nowrap; }
.post td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.post tr:last-child td { border-bottom: 0; }

/* ---- footer of a post ---- */
.post-footer { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--rule); font-size: .9rem; }
.post-footer h3 { margin-top: 0; }

/* ---- blog index ---- */
.post-list { max-width: 760px; margin: 0 auto; padding: 0 var(--spacing-md) var(--spacing-lg); }
.post-list-item { display: block; padding: 1.3rem 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; }
.post-list-item:last-of-type { border-bottom: 0; }
.post-list-item .date { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.post-list-item h2 { font-size: 1.4rem; margin: .35rem 0 .5rem; color: var(--text-primary); }
.post-list-item:hover h2 { color: var(--accent-gold); }
.post-list-item p { color: var(--text-secondary); margin: 0; font-size: .95rem; }

@media (max-width: 700px) {
  .post h1 { font-size: 1.9rem; }
  .post h2 { font-size: 1.3rem; }
  .post .standfirst { font-size: 1.02rem; }
}