/* Playbook section styles — extends the design system from the site's index.html */
:root{
  --ink:#1a1a1a; --muted:#6b6b6b; --line:#e6e6e6; --accent:#1f3a5f;
  --bg:#ffffff; --soft:#f7f8fa; --code-bg:#f4f6f8; --code-ink:#24292f;
  --maxw:860px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* Nav */
nav{position:sticky; top:0; background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--line); z-index:10}
nav .wrap{display:flex; gap:18px; align-items:center; height:52px; font-size:14px}
nav .brand{font-weight:700; letter-spacing:.04em}
nav a{color:var(--muted)}
nav a:hover{color:var(--ink); text-decoration:none}
/* Breadcrumb trail */
nav .bc{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:14px}
nav .bc .sep{color:#c9ced6}
nav .bc a{color:var(--muted)}
nav .bc .cur{color:var(--ink); font-weight:600}
@media(max-width:560px){ nav .bc .hide-sm{display:none} }

/* Page header */
header.page{padding:40px 0 6px}
header.page .kicker{font-size:13px; text-transform:uppercase; letter-spacing:.12em;
    color:var(--accent); font-weight:700; margin:0 0 10px}
header.page h1{font-size:34px; line-height:1.15; margin:0 0 6px; letter-spacing:-.01em}
header.page .lede{color:var(--muted); margin:0}

/* Content */
main{padding:14px 0 10px}
.content h2{font-size:24px; margin:34px 0 12px; letter-spacing:-.01em;
    padding-bottom:6px; border-bottom:1px solid var(--line)}
.content h3{font-size:19px; margin:26px 0 8px}
.content h4{font-size:16px; margin:20px 0 6px}
.content h5{font-size:14px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); margin:16px 0 6px}
.content p{margin:0 0 14px}
.content ul,.content ol{margin:0 0 14px; padding-left:22px}
.content li{margin-bottom:7px}
.content li>ul,.content li>ol{margin:7px 0 0}
.content strong{font-weight:700}
.content hr{border:0; border-top:1px solid var(--line); margin:30px 0}

/* Anchor links on headings */
.content h2,.content h3,.content h4{scroll-margin-top:64px; position:relative}
.content .anchor{opacity:0; color:var(--muted); margin-left:8px; font-weight:400;
    text-decoration:none; font-size:.8em}
.content h2:hover .anchor,.content h3:hover .anchor,.content h4:hover .anchor{opacity:1}

/* Inline code */
.content code{background:var(--code-bg); color:var(--code-ink);
    font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.86em; padding:2px 6px; border-radius:5px}

/* Code blocks */
.content pre{background:var(--code-bg); border:1px solid var(--line);
    border-radius:10px; padding:16px 18px; overflow-x:auto; margin:0 0 16px;
    line-height:1.5}
.content pre code{background:none; padding:0; font-size:13.5px; color:var(--code-ink)}
.content pre .lang-tag{display:block; font-size:11px; text-transform:uppercase;
    letter-spacing:.08em; color:var(--muted); margin:-4px 0 8px; user-select:none}

/* Blockquotes / callouts */
.content blockquote{margin:0 0 16px; padding:12px 16px; background:var(--soft);
    border-left:3px solid var(--accent); border-radius:6px; color:#333}
.content blockquote p{margin:0 0 6px}
.content blockquote p:last-child{margin:0}

/* Tables */
.table-scroll{overflow-x:auto; margin:0 0 18px;
    border:1px solid var(--line); border-radius:10px}
.content table{border-collapse:collapse; width:100%; font-size:14.5px}
.content th,.content td{text-align:left; padding:9px 13px;
    border-bottom:1px solid var(--line); vertical-align:top}
.content th{background:var(--soft); font-weight:700; white-space:nowrap}
.content tr:last-child td{border-bottom:0}
.content td code{font-size:.82em}
/* Wide tables (6+ columns, e.g. the choice matrix) break out past the text
   column on large screens so they fit without horizontal scrolling. */
@media(min-width:1080px){
  .table-scroll.wide{width:94vw; max-width:1200px;
      margin-left:50%; transform:translateX(-50%)}
}

/* Wikilinks that resolve within the section */
.content a.wikilink{border-bottom:1px dotted var(--accent); }
.content a.wikilink.dead{color:var(--muted); border-bottom-style:dotted; cursor:help}

/* Auto-linked framework references (deep links to the frameworks page) */
.content a.fwref{border-bottom:1px dotted #9aa7b8}
.content a.fwref:hover{border-bottom-color:var(--accent); text-decoration:none}

/* Framework index (top of the frameworks page) — NOT sticky */
.fw-index{position:static; border:1px solid var(--line); border-radius:12px;
    background:var(--soft); padding:18px 20px; margin:6px 0 30px}
.fw-index h2{border:0; margin:0 0 12px; font-size:13px; text-transform:uppercase;
    letter-spacing:.1em; color:var(--accent); font-weight:700}
.fw-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
@media(min-width:760px){ .fw-grid{grid-template-columns:repeat(4,1fr)} }
.fw-axis-label{display:block; font-weight:700; font-size:12px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
.fw-index ul{list-style:none; margin:0; padding:0}
.fw-index li{margin:0 0 4px; font-size:14px; line-height:1.35}
.fw-index li b{color:var(--accent); font-variant-numeric:tabular-nums}
.fw-index li a{color:var(--ink)}
.fw-index li a:hover{color:var(--accent); text-decoration:none}

/* Hub cards */
.cards{display:grid; grid-template-columns:1fr; gap:14px; margin:8px 0 20px}
@media(min-width:640px){ .cards{grid-template-columns:1fr 1fr} }
.card{border:1px solid var(--line); border-radius:12px; padding:18px 20px;
    background:#fff; transition:box-shadow .15s, border-color .15s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07); border-color:#d9dde3}
.card h3{margin:0 0 6px; font-size:18px}
.card h3 a{color:var(--ink)}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .tag{display:inline-block; margin-top:10px; font-size:12px;
    color:var(--accent); background:var(--soft); border:1px solid var(--line);
    border-radius:999px; padding:3px 10px}

/* Mermaid — render at natural size, scroll instead of shrinking to column */
.content pre.mermaid{background:#fff; text-align:center; overflow-x:auto;
    padding:22px; border:1px solid var(--line); border-radius:10px}
.content pre.mermaid svg{max-width:none !important; height:auto}
/* let the diagram use more than the text column on wide screens */
@media(min-width:1080px){
  .content pre.mermaid{width:96vw; max-width:1160px;
      margin-left:50%; transform:translateX(-50%)}
}

footer{padding:30px 0 48px; color:var(--muted); font-size:13.5px;
    text-align:center; border-top:1px solid var(--line); margin-top:30px}