/* Personal recommendation shelf: existing pill-link component plus small resource tiles. */
:root{--recommendation-gap:clamp(28px,4vw,64px);--recommendation-copy-size:clamp(17px,1.5vw,22px);--recommendation-tile-gap:clamp(6px,.7vw,10px);--recommendation-caption-space:10px;--recommendation-caption-size:clamp(11px,1vw,14px);--recommendation-copy-space:24px;--recommendation-rule:1px;--recommendation-outline:3px;--recommendation-outline-offset:4px;--recommendation-motion:200ms;--recommendation-weight:700;--recommendation-caption-leading:1.3;--recommendation-heading-size:clamp(52px,5.5vw,88px)}
.personal-recommendations{background:var(--paper);color:var(--ink)}
.recommendations-summary{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:var(--recommendation-gap);align-items:center;max-width:1240px;margin-inline:auto}
.recommendation-copy h2{font-size:var(--recommendation-heading-size);max-width:11ch}.recommendation-copy h2 span:last-child{color:var(--ink);-webkit-text-stroke:var(--recommendation-rule) var(--ink)}
.recommendation-copy p{font-size:var(--recommendation-copy-size);max-width:none;margin-top:var(--recommendation-copy-space)}
.recommendation-copy .recommendation-summary-link{margin-top:var(--recommendation-copy-space)}
.recommendation-mini-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--recommendation-tile-gap)}
.recommendation-mini{display:flex;flex-direction:column;min-width:0;background:var(--ink);color:var(--paper);border:var(--recommendation-rule) solid var(--ink);transition:background var(--recommendation-motion),color var(--recommendation-motion),border-color var(--recommendation-motion)}
.recommendation-mini-image{display:block;aspect-ratio:2.4;overflow:hidden}.recommendation-mini-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--recommendation-motion)}
.recommendation-mini:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.recommendation-mini:hover img{transform:scale(1.05)}.recommendation-mini:focus-visible{outline:var(--recommendation-outline) solid var(--ink);outline-offset:var(--recommendation-outline-offset);background:var(--yellow);color:var(--ink)}
@media(max-width:760px){.recommendations-summary{grid-template-columns:1fr}.recommendation-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.recommendation-mini,.recommendation-mini-image img{transition:none}.recommendation-mini:hover img{transform:none}}
/* Existing pill-link sizing and shape; ink contour on the light section, as on the other light sections. */
.recommendation-copy .pill-link{border-color:var(--ink)}
.recommendation-copy .pill-link:is(:hover,:focus-visible){background:var(--ink);color:var(--paper)}

.recommendation-sentence{display:block;text-wrap:balance}

/* Keep the apps overview beside the title, with contrast on the dark section. */
#experimente .apps-heading-row{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
#experimente .apps-heading-row h2{margin:0}
#experimente .apps-overview-link{flex-shrink:0;color:var(--paper);border-color:var(--paper);white-space:nowrap;opacity:1}
#experimente .apps-overview-link:is(:hover,:focus-visible){background:var(--paper);color:var(--ink);border-color:var(--paper)}
#experimente .apps-overview-link:focus-visible{outline:2px solid var(--paper);outline-offset:4px}