/* Casebook: /academy/examples/ pages and the examples section on Academy pattern pages. */
.ewi-cb { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; color: var(--text, #e6e6e6); box-sizing: border-box; }
.ewi-cb__head h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; margin: 4px 0 8px; }
.ewi-cb__kicker { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #a8a8a8); }
.ewi-cb__kicker a, .ewi-cb a { color: var(--accent, #4da3ff); }
.ewi-cb__meta, .ewi-cb__lead, .ewi-cb__muted { color: var(--text-muted, #a8a8a8); }
.ewi-cb__muted { font-size: 13px; }
.ewi-cb__filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 24px; }
.ewi-cb__filters a { padding: 6px 12px; border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 999px; font-size: 13px; text-decoration: none; }
.ewi-cb__filters a[aria-current] { background: var(--accent, #4da3ff); border-color: var(--accent, #4da3ff); color: #06101f; }
.ewi-cb__chart { margin: 20px 0; }
.ewi-cb__chart img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.07)); }
.ewi-cb__summary { font-size: 17px; line-height: 1.6; }
.ewi-cb__box { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 12px; background: var(--bg-card, #161616); }
.ewi-cb__box h2 { font-size: 18px; margin: 0 0 10px; }
.ewi-cb__box p { line-height: 1.6; }
.ewi-cb__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; margin: 0; }
.ewi-cb__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #a8a8a8); }
.ewi-cb__facts dd { margin: 2px 0 0; font-weight: 600; }
.ewi-cb__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ewi-cb__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ewi-cb__table th, .ewi-cb__table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); vertical-align: top; }
.ewi-cb__table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #a8a8a8); font-weight: 600; }
.ewi-cb__table small { display: block; color: var(--text-muted, #a8a8a8); font-size: 12px; white-space: nowrap; }
.ewi-cb__table td:nth-child(n+3) { white-space: nowrap; }
.ewi-cb__tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ewi-cb__tag.is-in { background: rgba(76,175,114,.15); color: var(--success, #4caf72); }
.ewi-cb__tag.is-out { background: rgba(245,166,35,.15); color: var(--warning, #f5a623); }
.ewi-cb__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ewi-cb__rules li { line-height: 1.5; }
.ewi-cb__rules span { display: inline-block; min-width: 72px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ewi-cb__rules .is-ok span { color: var(--success, #4caf72); }
.ewi-cb__rules .is-no span { color: var(--danger, #ff5a5a); }
.ewi-cb__rules .is-note span { color: var(--accent, #4da3ff); }
.ewi-cb__locked { text-align: center; }
.ewi-cb__btn { display: inline-block; margin-top: 6px; padding: 10px 18px; border-radius: 8px; background: var(--accent, #4da3ff); color: #06101f !important; font-weight: 700; text-decoration: none; }
.ewi-cb__empty { padding: 24px 0; color: var(--text-muted, #a8a8a8); }
.ewi-cb__disclaimer { margin-top: 28px; font-size: 13px; color: var(--text-muted, #a8a8a8); }
.ewi-cb__pages { margin-top: 24px; }

.ewi-cb-examples { margin: 40px 0; }
.ewi-cb-examples__lead { color: var(--text-muted, #a8a8a8); }
.ewi-cb-examples__all a { color: var(--accent, #4da3ff); font-weight: 600; }
.ewi-cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.ewi-cb-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 12px; background: var(--bg-card, #161616); color: var(--text, #e6e6e6); text-decoration: none; min-width: 0; }
.ewi-cb-card:hover { border-color: var(--accent, #4da3ff); }
.ewi-cb-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--bg-alt, #111); }
.ewi-cb-card__meta { font-size: 12px; color: var(--text-muted, #a8a8a8); }
.ewi-cb-card__title { font-weight: 700; line-height: 1.35; }
.ewi-cb-card__ratios { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-muted, #a8a8a8); }

body.light-mode .ewi-cb__filters a[aria-current], body.light-mode .ewi-cb__btn { color: #fff !important; }

@media (max-width: 480px) {
    .ewi-cb__box { padding: 14px; }
    .ewi-cb__table { font-size: 13px; }
    .ewi-cb-grid { grid-template-columns: 1fr; }
}