/* ISV Agent Forge — companion site (AWS Workshop Studio look & feel) */
:root{
  --ink:#232f3e; --orange:#ec7211; --orange-2:#ff9900;
  --bg:#ffffff; --side:#fafafa; --side-active:#fff3e8; --line:#e4e7ea;
  --tx:#16191f; --tx-2:#414d5c; --tx-3:#6a7581; --link:#0972d3; --code-bg:#f4f4f6; --ok:#037f0c;
  --top-h:52px; --side-w:264px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6;}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.ws-top{position:fixed; top:0; left:0; right:0; height:var(--top-h); background:var(--ink);
  display:flex; align-items:center; gap:12px; padding:0 18px; z-index:100; color:#fff;
  border-bottom:3px solid var(--orange);}
.ws-top .brand{font-weight:700; font-size:15px; letter-spacing:-0.01em}
.ws-top .brand b{color:var(--orange-2)}
.ws-top .tag{color:#c8ccd1; font-size:13px; margin-left:auto}

/* left sidebar nav */
.ws-side{position:fixed; top:var(--top-h); left:0; bottom:0; width:var(--side-w); overflow-y:auto;
  background:var(--side); border-right:1px solid var(--line); padding:14px 0;}
.ws-side .grp{padding:6px 20px; color:var(--tx-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:10px}
.ws-side a{display:block; padding:8px 20px; color:var(--tx-2); border-left:3px solid transparent; font-size:14px}
.ws-side a:hover{background:#f0f1f3; text-decoration:none}
.ws-side a.active{background:var(--side-active); border-left-color:var(--orange); color:var(--ink); font-weight:600}
.ws-side a.sub{padding-left:34px; font-size:13px; color:var(--tx-3)}

/* main content */
.main{margin-left:var(--side-w); margin-top:var(--top-h); padding:30px 44px 80px; max-width:900px}
h1{font-size:28px; margin:6px 0 4px; color:var(--ink); letter-spacing:-0.02em}
h2{font-size:20px; margin:34px 0 10px; color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--line)}
h3{font-size:15px; margin:20px 0 6px; color:var(--ink)}
.eyebrow{color:var(--orange); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.sub{color:var(--tx-2); font-size:16px}
p{color:var(--tx-2)} li{color:var(--tx-2); margin:4px 0}
ol{color:var(--tx-2)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:18px 0}
.card{display:block; background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; transition:.12s}
.card:hover{border-color:var(--orange); box-shadow:0 2px 10px rgba(0,0,0,.06); text-decoration:none; transform:translateY(-1px)}
.card .t{font-weight:700; color:var(--ink); font-size:15px}
.card .d{color:var(--tx-3); font-size:13px; margin-top:4px}

/* code + copy */
.cmd{position:relative; background:var(--code-bg); border:1px solid var(--line); border-radius:8px; margin:10px 0; padding:12px 84px 12px 14px; overflow-x:auto}
.cmd code{font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:13px; color:#1a2532; white-space:pre; display:block}
button.copy{position:absolute; top:8px; right:8px; background:#fff; color:var(--tx-2); border:1px solid var(--line); border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; font-family:inherit}
button.copy:hover{border-color:var(--orange); color:var(--ink)}
button.copy.copied{background:var(--ok); color:#fff; border-color:var(--ok)}

/* two-column compare */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.col{background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px}
.col h3{margin-top:0}
@media(max-width:760px){.cols{grid-template-columns:1fr}}

/* tables */
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:#f7f7f8; color:var(--tx-3); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em}
td{color:var(--tx-2)}
.time{color:var(--orange); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}

.callout{background:#fff8f0; border:1px solid #f2d3ae; border-left:4px solid var(--orange); border-radius:6px; padding:14px 16px; margin:16px 0; font-size:14px; color:var(--tx-2)}
.callout strong{color:var(--ink)}
.pill{display:inline-block; background:#eef6ff; color:var(--link); border-radius:20px; padding:2px 10px; font-size:12px; font-weight:700; margin-right:6px}

/* prev / next pager */
.pager{display:flex; justify-content:space-between; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; font-weight:600}
.pager a{padding:10px 16px; border:1px solid var(--line); border-radius:8px}
.pager a:hover{border-color:var(--orange); text-decoration:none}
.pager .spacer{visibility:hidden}

footer{margin-top:40px; color:var(--tx-3); font-size:13px}

/* responsive: sidebar collapses to a top strip */
@media(max-width:900px){
  .ws-side{position:static; width:auto; top:0; bottom:auto; border-right:none; border-bottom:1px solid var(--line); padding:8px 0}
  .main{margin-left:0; padding:22px 18px 60px}
  .ws-side a{display:inline-block; border-left:none; border-bottom:2px solid transparent}
  .ws-side a.active{border-left:none; border-bottom-color:var(--orange)}
  .ws-side .grp, .ws-side a.sub{display:none}
}