/* A small, sourced reading shelf. Scoped to the guide index. */
#main .recommended .recommended-empty{display:flex;align-items:center;gap:23px;border:1px solid #dce3ee;border-radius:22px;background:#f5f7fd;padding:27px 30px}
#main .recommended .recommended-empty-icon{display:grid;place-items:center;width:72px;height:72px;flex-shrink:0;border-radius:19px;background:#fff;box-shadow:0 5px 13px #20345a0a;color:#2559e8}
#main .recommended .recommended-empty-icon svg{width:45px;height:45px}
#main .recommended .recommended-empty span{font-size:21px;font-weight:750;color:#202938}
#main .recommended .recommended-empty p{font-size:18px;line-height:1.65;color:#596171;margin-top:7px;word-break:keep-all}
#main .resource-v5 .recommended{margin-top:64px;padding-top:38px;border-top:1px solid #dce3ee;scroll-margin-top:110px}
#main .recommended .recommended-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:23px}
#main .recommended .recommended-eyebrow{color:#2559e8;font-size:17px;font-weight:700;margin-bottom:10px}
#main .recommended .recommended-heading h2{font-size:clamp(32px,3.3vw,43px);font-weight:800;line-height:1.25;letter-spacing:-.045em;color:#202938}
#main .recommended .recommended-heading h2 span{color:#2559e8}
#main .recommended .recommended-heading h2+p{font-size:18px;color:#596171;line-height:1.65;margin-top:12px;word-break:keep-all}
#main .recommended .recommended-count{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:#596171;font-size:17px;padding:10px 14px;border:1px solid #e1e6ef;border-radius:12px}
#main .recommended .recommended-count strong{color:#2559e8;font-size:24px;line-height:1;font-weight:750}
#main .recommended .recommended-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
#main .recommended .recommended-filters button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 18px;font:inherit;font-size:18px;font-weight:650;background:#f4f6fa;border:1px solid #e1e6ef;color:#445167;border-radius:13px;cursor:pointer;transition:background .18s,color .18s,transform .18s}
#main .recommended .recommended-filters button[aria-pressed=true]{background:#2559e8;border-color:#2559e8;color:#fff}
#main .recommended .recommended-filters button[data-kind=video][aria-pressed=true]{background:#ffddd1;border-color:#e4ac99;color:#733e2d}
#main .recommended .recommended-filters button[data-kind=reading][aria-pressed=true]{background:#ffe9a2;border-color:#d2b75e;color:#5d4b1c}
#main .recommended .recommended-filter-count{font-size:15px;opacity:.8}
#main .recommended .recommended-filters button:hover{transform:translateY(-2px)}
#main .recommended .recommended-filters button:focus-visible{outline:3px solid #2559e8;outline-offset:4px}
#main .recommended .recommended-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
#main .recommended .recommendation{border:1px solid #dce3ee;border-radius:23px;overflow:hidden;background:#fff;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
#main .recommended .recommendation-video{display:flex;flex-direction:column;grid-row:auto}
#main .recommended .recommendation-link{display:flex;flex-direction:column;height:100%;text-decoration:none}
#main .recommended .recommendation-visual{position:relative;overflow:hidden;background:#f0f3fa;flex-shrink:0}
#main .recommended .recommendation-video .recommendation-visual{aspect-ratio:16/9}
#main .recommended .recommendation-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
#main .recommended .recommendation-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;padding-left:4px;width:55px;height:55px;border-radius:50%;background:#fff;color:#2559e8;font-size:22px;box-shadow:0 4px 20px #17233e33}
#main .recommended .recommendation-format{position:absolute;left:14px;top:14px;border-radius:8px;padding:4px 10px;background:#fff;color:#26364b;font-size:15px;font-weight:700;box-shadow:0 2px 10px #17233e15}
#main .recommended .recommendation-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:23px 25px}
#main .recommended .recommendation-topic{font-size:16px;color:#2559e8;font-weight:700;margin-bottom:7px}
#main .recommended .recommendation-body h3{font-size:25px;line-height:1.4;letter-spacing:-.035em;font-weight:750;color:#202938;margin:0;word-break:keep-all;overflow-wrap:anywhere}
#main .recommended .recommendation-detail{margin-top:7px;color:#647083;font-size:16px;line-height:1.55;word-break:keep-all}
#main .recommended .recommendation-reason{margin-top:14px;color:#414c5d;font-size:18px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
#main .recommended .recommendation-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:19px;font-size:16px;color:#647083}
#main .recommended .recommendation-footer strong{color:#2559e8;font-size:17px;white-space:nowrap;font-weight:700}
#main .recommended .recommendation-reading{grid-column:1/-1}
#main .recommended .recommendation-reading .recommendation-link{display:grid;grid-template-columns:300px minmax(0,1fr)}
#main .recommended .recommendation-reading .recommendation-body{padding:23px}
#main .recommended .recommendation-reading .recommendation-body h3{font-size:23px}
#main .recommended .recommendation-reading .recommendation-visual{background:#e8efff;padding:30px 20px;display:flex;align-items:center;justify-content:center}
#main .recommended .recommendation-reading:nth-child(3) .recommendation-visual{background:#e8efff}
#main .recommended .recommendation-reading .recommendation-visual img{height:auto;max-height:170px;object-fit:contain;box-shadow:0 7px 14px #26364b16;border-radius:7px}
#main .recommended .recommendation-reading .recommendation-format{left:10px;top:14px;font-size:14px}
#main .recommended .recommended-source-note{margin-top:16px;font-size:16px;color:#647083}
#main .recommended .recommended-grid[data-filter=video]{grid-template-columns:repeat(3,minmax(0,1fr))}
#main .recommended .recommended-grid[data-filter=video] .recommendation-video{grid-row:auto}
#main .recommended .recommended-grid[data-filter=reading] .recommendation-reading .recommendation-visual{background:#fff1df}
#main .recommended .recommended-grid[data-filter=reading] .recommendation-reading:last-child .recommendation-visual{background:#e8efff}
#main .recommended .recommendation:is(:hover,:focus-within){transform:translateY(-4px);border-color:#8caaf4;box-shadow:0 10px 25px #20345a10}
#main .recommended .recommendation:hover img{transform:scale(1.025)}
#main .recommended .recommendation-link:focus-visible{outline-offset:-4px;border-radius:22px}
#main .recommended .recommended-credits{margin-top:25px;padding:25px 28px;border:1px solid #e1e6ef;border-radius:20px;background:#f7f8fb}
#main .recommended .recommended-credits-head{display:flex;gap:15px;align-items:center;margin-bottom:22px}
#main .recommended .recommended-source-mark{font-size:23px;font-weight:850;letter-spacing:-.05em;background:#fff;color:#252a33;border:1px solid #e0e5ee;padding:13px 12px;border-radius:13px}
#main .recommended .recommended-credits h3{font-size:22px;font-weight:750;margin:0;color:#202938}
#main .recommended .recommended-credits-head p{font-size:17px;color:#596171;margin-top:4px}
#main .recommended .recommended-credits dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding-bottom:22px}
#main .recommended .recommended-credits dt{font-size:16px;color:#647083;margin-bottom:5px}
#main .recommended .recommended-credits dd{font-size:18px;color:#303b4c;font-weight:600;margin:0;word-break:keep-all}
#main .recommended .recommended-official-links{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;border-top:1px solid #e0e5ee}
#main .recommended .recommended-official-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;font-size:17px;font-weight:650;border:1px solid #dce3ee;border-radius:10px;background:#fff;color:#2559e8}
#main .recommended .recommended-official-links a:hover{background:#e8efff}
#main .recommended .recommended-copyright{font-size:15px;line-height:1.6;color:#647083;margin-top:17px}
@media(max-width:1050px){
 #main .recommended .recommended-grid,#main .recommended .recommended-grid[data-filter=video]{grid-template-columns:1fr 1fr}
 #main .recommended .recommendation-video{grid-column:auto;grid-row:auto}
 #main .recommended .recommendation-video .recommendation-link{display:flex}
 #main .recommended .recommendation-video .recommendation-visual{height:auto;aspect-ratio:16/9}
 #main .recommended .recommendation-video:nth-child(3){grid-column:1/-1}
 #main .recommended .recommendation-video:nth-child(3){display:grid;grid-template-columns:1fr 1fr}
 #main .recommended .recommendation-video:nth-child(3) .recommendation-link{display:flex}
 #main .recommended .recommendation-video:nth-child(3) .recommendation-visual{height:100%;aspect-ratio:auto}
 #main .recommended .recommendation-video:nth-child(3) .recommendation-visual img{object-fit:contain}
 #main .recommended .recommendation-reading .recommendation-link{grid-template-columns:220px minmax(0,1fr)}
 #main .recommended .recommended-credits dl{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 #main .recommended .recommended-empty{padding:23px 20px;gap:16px;align-items:flex-start}
 #main .recommended .recommended-empty-icon{width:48px;height:48px;border-radius:14px}
 #main .recommended .recommended-empty-icon svg{width:32px;height:32px}
 #main .resource-v5 .recommended{margin-top:40px;padding-top:30px}
 #main .recommended .recommended-heading{display:block;margin-bottom:20px}
 #main .recommended .recommended-count{margin-top:16px;padding:0;border:0}
 #main .recommended .recommended-heading h2{font-size:32px}
 #main .recommended .recommended-filters{gap:7px}
 #main .recommended .recommended-filters button{padding:9px 13px;font-size:17px;gap:7px}
 #main .recommended .recommended-grid,#main .recommended .recommended-grid[data-filter=video]{grid-template-columns:1fr}
 #main .recommended .recommendation-video .recommendation-link{display:flex}
 #main .recommended .recommendation-video:nth-child(3){display:flex}
 #main .recommended .recommendation-video:nth-child(3) .recommendation-link{display:flex}
 #main .recommended .recommendation-video .recommendation-visual{aspect-ratio:16/9;height:auto}
 #main .recommended .recommendation-video:nth-child(3) .recommendation-visual{aspect-ratio:16/9;height:auto}
 #main .recommended .recommendation-body,#main .recommended .recommendation-reading .recommendation-body{padding:21px}
 #main .recommended .recommendation-body h3{font-size:24px}
 #main .recommended .recommendation-reading .recommendation-link{display:flex;flex-direction:column}
 #main .recommended .recommendation-reading .recommendation-visual{height:175px;justify-content:center;padding:20px}
 #main .recommended .recommendation-reading .recommendation-visual img{height:135px;width:auto;max-width:100%}
 #main .recommended .recommended-credits{padding:23px 20px}
 #main .recommended .recommended-credits dl{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#main .recommended *{transition:none!important}#main .recommended .recommendation:is(:hover,:focus-within),#main .recommended .recommendation:hover img,#main .recommended .recommended-filters button:hover{transform:none}}

/* Keep the official player unobstructed; labels and links sit below it. */
#main .recommended .recommendation-player {position:relative;aspect-ratio:16/9;min-height:200px;background:#111;flex-shrink:0;align-self:stretch}
#main .recommended .recommendation-player iframe {display:block;width:100%;height:100%;position:absolute;inset:0;border:0;min-width:200px;min-height:200px}
#main .recommended .recommendation-video>.recommendation-link {height:auto;flex:1}
#main .recommended .recommendation-video-format {display:table;margin-bottom:10px;font-size:14px;font-weight:700;line-height:1.5;padding:4px 10px;border:1px solid #dce3ee;border-radius:7px;background:#f5f7fb;color:#303b4c}
#main .recommended .recommendation-video:is(:hover,:focus-within) {transform:none}
#main .recommended .recommendation-video .recommendation-link:hover {background:#f8faff}
@media(min-width:621px) and (max-width:1050px){
 #main .recommended .recommendation-video:nth-child(3) .recommendation-player {aspect-ratio:auto;min-height:240px}
}