/* One Time Automation — article layer.
   Palette PA-068, identical to /buckets/, /skills101/, /tools/.
   18px base + 1.7 line-height per HARD RULE AG. */

:root {
  --bg:#0d1417; --panel:#152128; --panel2:#1b2c35; --fg:#f4f4f5;
  --accent:#e8823c; --accent-hi:#f4a468; --accent-soft:rgba(232,130,60,0.15);
  --teal:#255c8e; --steel:#4d7491; --muted:#8ea6b2;
  --line:#26333b; --ok:#3ecf8e;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:18px; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(232,130,60,0.10), transparent 70%),
    radial-gradient(70% 60% at 50% 120%, rgba(37,92,142,0.16), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--fg); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* topbar */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 32px; border-bottom:3px solid var(--accent); background:rgba(21,33,40,0.72);
}
.topbar .brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:1rem; letter-spacing:.02em; color:var(--fg); text-decoration:none; }
.topbar .brand img { width:34px; height:34px; display:block; border-radius:7px; }
.topbar .brand span { color:var(--accent); }
.topbar .slot { font-size:0.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.topbar .slot:hover { color:var(--accent-hi); }

.wrap { max-width:820px; margin:0 auto; padding:2.75rem 1.5rem 4rem; }

/* article head */
.eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.eyebrow .lane { color:var(--accent-hi); }
h1 { font-size:clamp(2rem,5.4vw,3rem); letter-spacing:-0.022em; line-height:1.09; font-weight:800; margin:0.85rem 0 0; }
.dek { color:var(--muted); font-size:1.12rem; margin-top:1rem; }
.byline { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:0.82rem; color:var(--steel); letter-spacing:.02em; }
.byline b { color:var(--muted); font-weight:600; }

/* body */
article { margin-top:2.4rem; }
article p { color:#d7d7de; margin:1.05rem 0; }
article p.lead { font-size:1.14rem; color:#e7e7ec; }
article h2 {
  font-size:1.42rem; font-weight:800; letter-spacing:-0.012em; line-height:1.28;
  margin:2.9rem 0 0.2rem; padding-top:1.4rem; border-top:2px solid var(--line); position:relative;
}
article h2::before { content:""; position:absolute; top:-2px; left:0; width:56px; height:2px; background:var(--accent); }
article h3 { font-size:1.06rem; font-weight:800; margin:2rem 0 0.1rem; color:var(--accent-hi); }
article ul, article ol { margin:1.05rem 0 1.05rem 1.35rem; color:#d7d7de; }
article li { margin:0.4rem 0; }
article strong { color:var(--fg); }
article a { color:var(--accent-hi); }
article blockquote {
  margin:1.6rem 0; padding:0.2rem 0 0.2rem 1.2rem; border-left:3px solid var(--accent);
  font-size:1.2rem; line-height:1.5; color:var(--fg); font-weight:600; letter-spacing:-0.01em;
}

/* prompt block — same component as the asset pages */
.prompt-box { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:1.5rem 0; }
.prompt-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.85rem 1.1rem; background:var(--panel2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.prompt-bar .label { font-size:0.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
button.copy {
  background:var(--accent); color:#fff; border:0; border-radius:9px;
  padding:0.5rem 1rem; font-size:0.88rem; font-weight:600; cursor:pointer;
  font-family:inherit; transition:transform .12s ease, background .12s ease;
}
button.copy:hover { transform:translateY(-1px); background:var(--accent-hi); }
button.copy.done { background:var(--ok); }
pre {
  margin:0; padding:1.1rem 1.2rem; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:0.82rem; line-height:1.62; color:#e6e6ea; white-space:pre; tab-size:2;
}
pre::-webkit-scrollbar { height:9px; }
pre::-webkit-scrollbar-thumb { background:var(--line); border-radius:9px; }

/* callout + requirements */
.callout { background:var(--accent-soft); border:1px solid rgba(232,130,60,0.32); border-radius:14px; padding:1.05rem 1.3rem; margin:1.7rem 0; }
.callout p { color:#f0dccb; margin:0; }
.callout strong { color:var(--accent-hi); }
.reqs { border:1px solid var(--line); border-left:3px solid var(--steel); background:var(--panel); border-radius:12px; padding:0.9rem 1.15rem; margin:1.7rem 0; }
.reqs p { color:var(--muted); font-size:0.92rem; margin:0; line-height:1.6; }
.reqs strong { color:var(--fg); }

/* figure */
figure { margin:1.9rem 0; }
figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; }
figcaption { font-size:0.84rem; color:var(--steel); margin-top:0.6rem; text-align:center; }

/* follow-through block */
.followthrough {
  margin:3rem 0 0; background:linear-gradient(180deg, rgba(232,130,60,0.16), rgba(232,130,60,0.07));
  border:1px solid rgba(232,130,60,0.42); border-radius:16px; padding:1.5rem 1.6rem;
}
.followthrough .lab { display:inline-block; font-size:0.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-hi); background:var(--accent-soft); border-radius:6px; padding:4px 9px; line-height:1.4; }
.followthrough h4 { font-size:1.2rem; font-weight:800; letter-spacing:-0.012em; margin:0.75rem 0 0.35rem; }
.followthrough p { color:var(--muted); font-size:0.95rem; margin:0 0 1.1rem; }
.followthrough a.go {
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-size:0.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:13px 24px; border-radius:9px; transition:all .12s ease;
}
.followthrough a.go:hover { background:var(--accent-hi); transform:translateY(-1px); }

/* footer */
.foot {
  background:var(--panel); border-top:1px solid var(--line); color:var(--muted);
  padding:34px 32px 42px; margin-top:3.5rem; font-size:0.88rem;
}
.foot .inner { max-width:820px; margin:0 auto; }
.foot b { color:var(--fg); }
.foot .rule { width:64px; height:3px; border-radius:3px; margin-bottom:18px;
  background:linear-gradient(90deg, var(--accent), var(--accent-hi)); }
.foot a { color:var(--accent-hi); }

@media (max-width:640px) {
  html { font-size:17px; }
  .topbar { padding-left:20px; padding-right:20px; }
  .wrap { padding:2rem 1.15rem 3rem; }
  .foot { padding-left:20px; padding-right:20px; }
  pre { font-size:0.78rem; padding:0.9rem 1rem; }
  .prompt-bar { padding:0.7rem 0.9rem; }
}