/* Shared shell for Tempo's written pages. Same tokens as the landing page,
   tuned for long-form reading: narrower measure, quieter headings. */
:root{
  --bg:#0F1413; --panel:#151B1A; --chrome:#1B2321; --line:#243029;
  --ink:#D6E0DB; --dim:#69796F; --faint:#41504A;
  --steady:#5FB39E; --amber:#D3A554; --red:#D3766A;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{background:var(--bg); color:var(--ink); margin:0;
  font-family:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  line-height:1.72; font-size:16.5px; -webkit-font-smoothing:antialiased;}
code,kbd{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.88em;}
a{color:var(--steady);}
.wrap{max-width:52rem; margin:0 auto; padding:0 1.2rem;}
.skip{position:absolute; left:-9999px; top:0; background:var(--steady); color:#0F1413;
  padding:.6rem 1rem; border-radius:0 0 6px 0; font-family:"IBM Plex Mono",monospace;
  font-size:.85rem; z-index:10;}
.skip:focus{left:0;}

/* nav — matches the landing page exactly */
nav{display:flex; align-items:center; gap:1.6rem; padding:1.3rem 0;}
.brand{font-family:"IBM Plex Mono",monospace; color:var(--ink); text-decoration:none;}
.brand b{color:var(--steady); font-weight:400;}
nav .links{margin-left:auto; display:flex; gap:1.4rem; font-size:.9rem;}
nav .links a{color:var(--dim); text-decoration:none;}
nav .links a:hover{color:var(--ink);}

/* breadcrumb */
.crumb{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--faint);
  margin:1.6rem 0 .9rem; display:flex; gap:.5rem; flex-wrap:wrap;}
.crumb a{color:var(--dim); text-decoration:none;}
.crumb a:hover{color:var(--ink);}

.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steady); display:block; margin-bottom:.6rem;}
.meta{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--faint);
  margin:.9rem 0 0; display:flex; gap:1.1rem; flex-wrap:wrap;}

/* long-form article */
article{max-width:40rem; padding-bottom:1rem;}
article h1{font-size:clamp(1.75rem,4.6vw,2.4rem); font-weight:600; letter-spacing:-.02em;
  margin:0 0 .9rem; text-wrap:balance; line-height:1.2;}
article .lede{color:var(--dim); font-size:1.08rem; margin:0 0 2rem;}
article h2{font-size:1.28rem; font-weight:600; letter-spacing:-.01em;
  margin:2.9rem 0 .2rem; text-wrap:balance;}
article h3{font-size:1.02rem; font-weight:600; margin:2rem 0 .1rem;}
article p{margin:1rem 0;}
article ul,article ol{padding-left:1.3rem; margin:1rem 0;}
article li{margin:.5rem 0;}
article ol.steps{padding-left:1.25rem; display:flex; flex-direction:column; gap:.9rem;}
article ol.steps li::marker{font-family:"IBM Plex Mono",monospace; color:var(--steady);}
article strong{font-weight:600; color:var(--ink);}
article hr{border:none; border-top:1px solid var(--line); margin:3rem 0;}
.dim,.muted{color:var(--dim);}

pre{background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1rem 1.1rem; overflow-x:auto; font-size:.8rem; line-height:1.65; margin:1.2rem 0;}
pre code{font-size:inherit;}

/* callout — same left-rule language as the reset card in the product */
.callout{background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--steady);
  border-radius:0 8px 8px 0; padding:.95rem 1.15rem; margin:1.6rem 0; color:var(--dim); font-size:.94rem;}
.callout b,.callout strong{color:var(--ink);}
.callout.warn{border-left-color:var(--amber);}
.callout.hot{border-left-color:var(--red);}
.callout p{margin:.45rem 0;}
.callout p:first-child{margin-top:0;} .callout p:last-child{margin-bottom:0;}

blockquote{margin:1.6rem 0; padding-left:1.1rem; border-left:2px solid var(--line);
  color:var(--dim); font-size:1.02rem;}

/* signal table */
.tbl{width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.9rem;}
.tbl th,.tbl td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line);
  vertical-align:top;}
.tbl th{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); font-weight:400;}
.tbl td:first-child{color:var(--ink); white-space:nowrap;}
.tbl td{color:var(--dim);}
@media(max-width:34rem){ .tbl td:first-child{white-space:normal;} }

/* buttons + copy row, lifted from the landing page so CTAs feel identical */
.btn{font-family:"IBM Plex Mono",monospace; font-size:.88rem; cursor:pointer; text-decoration:none;
  background:var(--steady); color:#0F1413; border:none; border-radius:6px;
  padding:.7rem 1.3rem; font-weight:500; display:inline-block;}
.btn.ghost{background:transparent; color:var(--dim); border:1px solid var(--line);}
.btn.ghost:hover{color:var(--ink);}
.btn:focus-visible{outline:2px solid var(--steady); outline-offset:2px;}
.cta-row{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem;}
.copyrow{display:flex; align-items:stretch; margin:1rem 0; max-width:100%;}
.copyrow code{flex:1; background:var(--bg); border:1px solid var(--line); border-right:none;
  border-radius:8px 0 0 8px; padding:.7rem .9rem; font-size:.78rem; overflow-x:auto;
  white-space:nowrap; display:block; line-height:1.5;}
.copybtn{font-family:"IBM Plex Mono",monospace; font-size:.8rem; cursor:pointer; white-space:nowrap;
  background:var(--steady); color:#0F1413; border:none; border-radius:0 8px 8px 0;
  padding:.7rem 1rem; font-weight:500;}
.copybtn:focus-visible{outline:2px solid var(--steady); outline-offset:2px;}

/* end-of-article product block */
.endcap{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:1.5rem 1.6rem; margin:3rem 0 0; max-width:40rem;}
.endcap h2{margin:0 0 .5rem; font-size:1.12rem;}
.endcap p{margin:.5rem 0; color:var(--dim); font-size:.94rem;}
.endcap .req{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--faint);
  margin:1rem 0 0; display:flex; gap:1.1rem; flex-wrap:wrap;}

/* related / index cards */
.cards{display:grid; gap:1rem; margin:1.4rem 0 0;}
.card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1.1rem 1.2rem; text-decoration:none; color:inherit;}
.card:hover{border-color:var(--steady);}
.card .k{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steady); display:block; margin-bottom:.4rem;}
.card h3{font-size:1.04rem; margin:0 0 .35rem; font-weight:600; color:var(--ink); text-wrap:balance;}
.card p{margin:0; color:var(--dim); font-size:.92rem;}
.related{margin:3rem 0 0;}
.related h2{font-size:1.1rem; margin:0;}

footer{border-top:1px solid var(--line); margin-top:3.5rem; padding:1.6rem 0 2.6rem;
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--dim);
  display:flex; gap:1.5rem; flex-wrap:wrap;}
footer a{color:var(--dim);}
footer a:hover{color:var(--ink);}