/* af-extra.css — v10.0 additions. Loaded after af.css; inherits its variables. */

.shot{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(240,194,74,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.45);margin:1.1rem 0 .5rem;background:rgba(255,255,255,.02)}
.shotcap{color:var(--dim);font-size:.86rem;margin:.1rem 0 1.6rem;text-align:center}

.codeblock{background:rgba(8,4,20,.72);border:1px solid rgba(240,194,74,.20);border-radius:12px;
  padding:.95rem 1.1rem;overflow-x:auto;margin:1rem 0;line-height:1.55}
.codeblock code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;color:#c6ffe4;white-space:pre}

.kv{border:1px solid rgba(240,194,74,.18);border-radius:12px;overflow:hidden;margin:1.1rem 0}
.kvrow{display:grid;grid-template-columns:minmax(11rem,18rem) 1fr;gap:0;
  border-bottom:1px solid rgba(240,194,74,.12)}
.kvrow:last-child{border-bottom:0}
.kvrow .k{padding:.7rem 1rem;background:rgba(240,194,74,.055);color:var(--gold);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;
  word-break:break-word}
.kvrow .v{padding:.7rem 1rem;color:var(--mut);font-size:.93rem}
@media(max-width:640px){.kvrow{grid-template-columns:1fr}.kvrow .k{padding-bottom:.2rem}}

.note,.warn{border-radius:12px;padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.94rem;
  border:1px solid rgba(240,194,74,.22);background:rgba(240,194,74,.06);color:var(--mut)}
.warn{border-color:rgba(255,138,138,.32);background:rgba(255,110,110,.08)}
.note b,.warn b{color:var(--gold)}

.steps{list-style:none;padding:0;margin:1.2rem 0;counter-reset:s}
.step{position:relative;padding:0 0 1.35rem 3.1rem;border-left:1px solid rgba(240,194,74,.22);
  margin-left:1rem}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.stepn{position:absolute;left:-1rem;top:-.15rem;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(240,194,74,.14);
  border:1px solid rgba(240,194,74,.4);color:var(--gold);font-size:.85rem;font-weight:700}
.step h3{margin:.05rem 0 .35rem;font-size:1.06rem}
.step p{margin:0;color:var(--mut)}

.faq{border-top:1px solid rgba(240,194,74,.14);padding:1.05rem 0}
.faqq{font-weight:700;margin:0 0 .35rem;color:#fff}
.faqa{margin:0;color:var(--mut)}

.pill{display:inline-block;padding:.16rem .6rem;border-radius:999px;font-size:.76rem;
  border:1px solid rgba(240,194,74,.35);color:var(--gold);margin:0 .3rem .3rem 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.tbl{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:.62rem .8rem;border-bottom:1px solid rgba(240,194,74,.14);
  vertical-align:top}
.tbl th{color:var(--gold);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tbl td{color:var(--mut)}
.tbl code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;color:#c6ffe4}

.lead-sm{color:var(--mut);max-width:70ch;margin:0 auto 1.2rem;text-align:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ---- Field Notes: article column and post index (added for the blog) ---- */
.post{max-width:74ch;margin:0 auto}
.post p{color:var(--mut);margin:0 0 1.05rem}
.post p.stand{color:var(--ink);font-size:1.06rem}
.post h2{font-size:clamp(1.35rem,2.8vw,1.85rem);margin:2.4rem 0 .7rem;font-weight:800;letter-spacing:-.01em}
.post h3{font-size:1.08rem;margin:1.6rem 0 .45rem}
.post ul{margin:0 0 1.05rem;padding-left:1.1rem;color:var(--mut)}
.post li{margin:.3rem 0}
.post .kv,.post .tbl,.post .codeblock,.post .note,.post .warn{margin-left:0;margin-right:0}
.post blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid rgba(240,194,74,.45);
  color:var(--ink);font-style:italic}
.postmeta{color:var(--dim);font-size:.86rem;margin:.4rem 0 0;letter-spacing:.02em}
.postlist{display:grid;gap:1rem;max-width:74ch;margin:0 auto}
.postcard{padding:1.3rem 1.4rem;display:block}
.postcard:hover{text-decoration:none;border-color:rgba(240,194,74,.45)}
.postcard h3{margin:.25rem 0 .4rem;font-size:1.2rem;color:var(--ink)}
.postcard p{margin:0;color:var(--mut);font-size:.95rem}
.srcs{list-style:none;padding:0;margin:.6rem 0 0}
.srcs li{padding:.3rem 0;border-bottom:1px solid rgba(240,194,74,.12);font-size:.9rem}
.srcs li:last-child{border-bottom:0}