*, *::before, *::after { font-family: 'Poppins', sans-serif; }
/* RAD Pattern Documentation — pattern-doc.css
   Shared styles for pattern overview, category, and detail pages.
   Always loaded alongside rad-system.css.
*/

/* ── Breadcrumb ── */
.pat-breadcrumb { display:flex; align-items:center; gap:8px; font-family:var(--doc-mono); font-size:11px; letter-spacing:0.08em; color:var(--doc-grey); padding:20px 0 0; }
.pat-breadcrumb a { color:var(--doc-grey); text-decoration:none; transition:color 0.15s; }
.pat-breadcrumb a:hover { color:var(--doc-teal); }
.pat-breadcrumb a::after { display:none!important; }
.pat-breadcrumb-sep { opacity:0.4; }
.pat-breadcrumb-current { color:var(--doc-charcoal); }

/* ── Pattern Overview: category card grid ── */
.pat-overview-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pat-category-card { background:var(--doc-white); border:1px solid var(--doc-border); border-radius:12px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:border-color 0.15s, box-shadow 0.15s; }
.pat-category-card:hover { border-color:var(--doc-teal-border); box-shadow:0 4px 20px rgba(24,35,51,0.08); }
.pat-category-card::after { display:none!important; }
.pat-card-visual { height:180px; background:#F9FDFD; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.pat-card-visual svg { max-height:100%; max-width:100%; }
.pat-card-body { padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pat-card-eyebrow { font-family:var(--doc-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--doc-teal); }
.pat-card-title { font-family:var(--doc-heading); font-size:18px; font-weight:700; color:var(--doc-charcoal); letter-spacing:-0.01em; line-height:1.2; }
.pat-card-desc { font-size:13px; color:var(--doc-grey); line-height:1.6; flex:1; }
.pat-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--doc-border); margin-top:4px; }
.pat-card-count { font-family:var(--doc-mono); font-size:11px; color:var(--doc-grey); }
.pat-card-cta { font-size:12px; font-weight:600; color:var(--doc-teal); }

/* ── Category Page: hero diagram area ── */
.pat-diagram-strip { width:100%; background:var(--doc-paper); border-top:1px solid var(--doc-border); border-bottom:1px solid var(--doc-border); padding:40px 32px; overflow-x:auto; display:flex; justify-content:center; }
.pat-diagram-strip svg { max-width:900px; width:100%; height:auto; display:block; flex-shrink:0; }

/* ── Sub-pattern sections ── */
.pat-subpatterns { display:flex; flex-direction:column; }
.pat-subpattern { padding:40px 0; border-bottom:1px solid var(--doc-border); }
.pat-subpattern:last-child { border-bottom:none; }
.pat-sp-header { display:flex; align-items:flex-start; gap:20px; margin-bottom:16px; }
.pat-sp-num { font-family:var(--doc-mono); font-size:11px; color:var(--doc-teal); padding-top:3px; flex-shrink:0; width:36px; }
.pat-sp-titles { display:flex; flex-direction:column; gap:4px; }
.pat-sp-title { font-family:var(--doc-heading); font-size:20px; font-weight:700; color:var(--doc-charcoal); letter-spacing:-0.01em; line-height:1.2; }
.pat-sp-when { font-family:var(--doc-mono); font-size:10px; color:var(--doc-grey); text-transform:uppercase; letter-spacing:0.12em; }
.pat-sp-body { font-size:15px; color:var(--doc-grey); line-height:1.75; max-width:700px; margin-bottom:20px; padding-left:56px; }
.pat-sp-comps-label { font-family:var(--doc-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--doc-charcoal); margin-bottom:10px; padding-left:56px; opacity:0.7; }
.pat-sp-tags { display:flex; flex-wrap:wrap; gap:8px; padding-left:56px; }
.pat-comp-tag { font-family:var(--doc-mono); font-size:11px; color:var(--doc-charcoal); background:var(--doc-paper); border:1px solid var(--doc-border-md); border-radius:4px; padding:4px 10px; text-decoration:none; transition:color 0.15s, border-color 0.15s, background 0.15s; white-space:nowrap; }
.pat-comp-tag:hover { color:var(--doc-teal); border-color:var(--doc-teal-border); background:var(--doc-teal-ghost); }
.pat-comp-tag::after { display:none!important; }

/* ── Prev/Next navigation ── */
.pat-nav-row { display:flex; justify-content:space-between; align-items:stretch; gap:16px; padding-top:40px; border-top:1px solid var(--doc-border); margin-top:64px; }
.pat-nav-btn { display:flex; flex-direction:column; gap:4px; text-decoration:none; padding:16px 20px; border:1px solid var(--doc-border); border-radius:8px; background:var(--doc-white); flex:1; max-width:300px; transition:border-color 0.15s, box-shadow 0.15s; }
.pat-nav-btn:hover { border-color:var(--doc-teal-border); box-shadow:0 2px 8px rgba(24,35,51,0.06); }
.pat-nav-btn::after { display:none!important; }
.pat-nav-btn--next { margin-left:auto; text-align:right; }
.pat-nav-dir { font-family:var(--doc-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--doc-grey); }
.pat-nav-title { font-family:var(--doc-heading); font-size:14px; font-weight:700; color:var(--doc-charcoal); }
.pat-nav-cat { font-size:12px; color:var(--doc-teal); }

/* ── Detail page: problem/when/governance boxes ── */
.pat-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
.pat-detail-box { background:var(--doc-white); border:1px solid var(--doc-border); border-radius:8px; padding:20px 24px; }
.pat-detail-box-label { font-family:var(--doc-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.15em; color:var(--doc-grey); margin-bottom:10px; }
.pat-detail-box-text { font-size:14px; color:var(--doc-charcoal); line-height:1.65; }
.pat-detail-box--full { grid-column:1/-1; }
.pat-detail-box--teal { border-color:var(--doc-teal-border); background:var(--doc-teal-ghost); }
.pat-detail-box--aubergine { border-color:rgba(106,65,119,0.2); background:rgba(106,65,119,0.04); }

/* ── Flow steps ── */
.pat-flow { display:flex; flex-direction:column; gap:0; margin:24px 0; }
.pat-flow-step { display:grid; grid-template-columns:32px 1fr; gap:16px; position:relative; padding-bottom:24px; }
.pat-flow-step:last-child { padding-bottom:0; }
.pat-flow-step::before { content:''; position:absolute; left:15px; top:28px; bottom:0; width:2px; background:var(--doc-border-md); }
.pat-flow-step:last-child::before { display:none; }
.pat-flow-num { width:32px; height:32px; border-radius:50%; background:var(--doc-teal); color:#fff; font-family:var(--doc-mono); font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.pat-flow-content { padding-top:6px; }
.pat-flow-title { font-family:var(--doc-heading); font-size:14px; font-weight:700; color:var(--doc-charcoal); margin-bottom:4px; }
.pat-flow-desc { font-size:13px; color:var(--doc-grey); line-height:1.6; }

/* ── Responsive ── */
@media (max-width:900px) { .pat-overview-grid { grid-template-columns:1fr; } .pat-detail-grid { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .pat-sp-body, .pat-sp-comps-label, .pat-sp-tags { padding-left:0; }
  .pat-nav-row { flex-direction:column; }
  .pat-nav-btn { max-width:100%; }
  .pat-diagram-strip { padding:24px; }
}