/* Discover recommendations — reversible poster-forward redesign, 2026-10-16 */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:19px;align-items:stretch}
.rec{
 display:grid;grid-template-columns:clamp(145px,10vw,160px) minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto;gap:11px 14px;
 padding:13px;min-height:268px;overflow:hidden;
 border:1px solid var(--line);border-radius:17px;background:var(--surface);
 box-shadow:0 2px 10px #00000006;position:relative;
 transition:border-color .18s ease,box-shadow .18s ease,transform .24s ease,opacity .24s ease;
}
.rec:hover{border-color:color-mix(in srgb,var(--accent) 44%,var(--line));box-shadow:0 8px 23px #00000016}
.rec.rec-leaving{opacity:0;transform:scale(.975) translateY(-7px);pointer-events:none}
.rec .rec-cover{display:block;padding:0;text-align:left;appearance:none;grid-column:1;grid-row:1/3;position:relative;align-self:stretch;min-width:0;min-height:237px;border-radius:11px;overflow:hidden;background:var(--surface2);cursor:pointer;border:1px solid color-mix(in srgb,var(--line) 75%,var(--accent) 25%)}
.rec .rec-cover:focus-visible,.rec .rec-title:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rec .rec-cover .poster{height:100%;width:100%;border-radius:0;overflow:hidden}
.rec .rec-cover .poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s ease}
.rec:hover .rec-cover .poster img{transform:scale(1.035)}
.rec .rec-fit{position:absolute;top:10px;left:10px;z-index:1;border-radius:99px;padding:7px 10px;font-size:11px;font-weight:850;letter-spacing:.1px;line-height:1.15;background:rgba(6,11,16,.82);color:#b4f8cf;backdrop-filter:blur(7px);box-shadow:0 1px 4px #0007;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.rec .rec-info{grid-column:2;grid-row:1;display:flex;min-width:0;flex-direction:column;gap:7px;align-items:stretch}
.rec .rec-title{display:block;border:0;background:none;text-align:left;padding:0;color:var(--text);font-size:16px;line-height:1.28;letter-spacing:-.3px;font-weight:850;cursor:pointer;overflow-wrap:anywhere}
.rec .rec-title:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.rec .rec-meta{display:flex;gap:5px 7px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:10px;line-height:1.4}
.rec .rec-meta span+span:before{content:"·";margin-right:7px;color:var(--accent)}
.rec .rec-summary{color:var(--text);opacity:.89;font-size:12px;line-height:1.48;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-height:3em;margin:4px 0 0;min-height:0}
.rec .rec-expand{color:var(--accent);font-size:10px;text-decoration:underline;text-underline-offset:2px;background:none;padding:0;border:0;align-self:flex-start;cursor:pointer}
.rec .rec-reasons{display:flex;flex-direction:column;gap:6px;margin-top:3px}
.rec .rec-reasons-label{font-size:10px;line-height:1.3;font-weight:700;color:var(--muted)}
.rec .rec-anchors{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-start}
.rec .rec-anchor{font-size:9px;line-height:1.25;border:1px solid var(--line);border-radius:7px;background:var(--surface2);color:var(--muted);padding:5px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .rec-actions{grid-column:2;grid-row:2;display:flex;align-items:center;gap:7px;min-width:0;margin-top:auto;align-self:end}
.rec .rec-actions button{min-height:36px;border:1px solid var(--line);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;padding:0;color:var(--text);background:var(--surface2);font-size:16px;line-height:1;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease}
.rec .rec-actions button:hover{background:color-mix(in srgb,var(--accent) 14%,var(--surface2));border-color:var(--accent)}
.rec .rec-actions .rec-save{flex:1 1 93px;min-width:0;padding:6px 10px;background:var(--accent);border-color:var(--accent);color:var(--bg);font-size:11px;line-height:1.15;font-weight:850;white-space:nowrap}
.rec .rec-actions .rec-save:hover{background:var(--accent2);border-color:var(--accent2);color:var(--bg)}
.rec .rec-actions .rec-icon[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:var(--accent);border-color:var(--accent)}
.rec .rec-actions button:focus-visible,.rec .rec-expand:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rec .rec-actions button:disabled{opacity:.65;cursor:default}
.rec-undo-toast{display:flex!important;align-items:center;gap:14px;max-width:min(94vw,460px);padding:13px 14px!important;background:var(--surface2)!important;color:var(--text)!important;border:1px solid var(--accent);z-index:100!important;box-shadow:0 12px 35px #0008!important}
.rec-undo-toast span{font-size:12px;line-height:1.4}
.rec-undo-toast button{font-size:12px;background:var(--accent);color:var(--bg);border:0;border-radius:8px;min-height:36px;padding:6px 12px;font-weight:900;cursor:pointer;white-space:nowrap}
.rec-undo-toast button:hover{filter:brightness(1.08)}
.rec-undo-toast button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:1320px){.rec{grid-template-columns:155px minmax(0,1fr);min-height:285px}}
@media(max-width:1000px){.rec-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}}
@media(max-width:740px){
 .rec{grid-template-columns:138px minmax(0,1fr);min-height:247px}
 .rec .rec-cover{min-height:218px}
 .rec .rec-title{font-size:15px}
}
@media(max-width:560px){
 .rec-grid{grid-template-columns:minmax(0,1fr);gap:13px}
 .rec{grid-template-columns:117px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:9px 12px;padding:12px;min-height:0}
 .rec .rec-cover{grid-row:1;min-height:178px}
 .rec .rec-info{grid-row:1;gap:6px}
 .rec .rec-actions{grid-column:1/-1;grid-row:2;margin-top:3px}
 .rec .rec-title{font-size:15px}
 .rec .rec-summary{font-size:11px}
 .rec .rec-anchor{font-size:9px}
 .rec .rec-fit{top:6px;left:6px;padding:5px 7px;font-size:10px}
 .rec .rec-actions .rec-save{flex:1 1 auto;font-size:12px}
 .rec .rec-actions button{min-height:38px;flex-basis:38px}
}
@media(max-width:380px){
 .rec{grid-template-columns:105px minmax(0,1fr);gap:9px}
 .rec .rec-cover{min-height:160px}
 .rec .rec-meta{font-size:9px;gap:3px 5px}
}
@media(prefers-reduced-motion:reduce){
 .rec,.rec .rec-cover .poster img,.rec .rec-actions button{transition:none!important}
 .rec.rec-leaving{transform:none}
}
body.frame-reduced-motion .rec,body.frame-reduced-motion .rec .rec-cover .poster img,body.frame-reduced-motion .rec .rec-actions button{transition:none!important}
body.frame-reduced-motion .rec.rec-leaving{transform:none}

/* Quiet, on-demand explanation for the recommendation score. */
.discover-info-row{display:flex;justify-content:flex-end;margin:-3px 0 15px;min-height:20px}
.discover-disclaimer{position:relative;font-size:11px;color:var(--muted);max-width:min(100%,470px);z-index:2}
.discover-disclaimer summary{cursor:pointer;list-style:none;border-radius:8px;padding:6px 10px;color:var(--muted);font-size:11px}
.discover-disclaimer summary::-webkit-details-marker{display:none}
.discover-disclaimer summary:hover,.discover-disclaimer[open] summary{color:var(--text);background:var(--surface2)}
.discover-disclaimer summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.discover-disclaimer p{position:absolute;right:0;top:100%;width:300px;max-width:85vw;margin:4px 0;padding:13px 15px;border-radius:12px;color:var(--text);line-height:1.6;font-size:12px;box-shadow:0 14px 34px #0006;background:var(--surface2);border:1px solid var(--line)}
@media(max-width:600px){.discover-info-row{justify-content:flex-start}.discover-disclaimer p{right:auto;left:0}}

/* Distinct filter groups; active filters carry the palette accent, not headings. */
.rec-toolbar{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:10px 0 3px}
.rec-filter-sets{display:flex;flex:1 1 600px;align-items:stretch;gap:15px;flex-wrap:wrap;min-width:0}
.rec-filter-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.rec-filter-group-second{border-left:1px solid var(--line);padding-left:16px}
.rec-filter-label{font-size:10px;line-height:1.4;color:var(--muted);font-weight:750;letter-spacing:.7px;text-transform:uppercase}
.rec-filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.rec-filter-chips .chip{border-radius:10px;padding:9px 12px;min-height:36px;color:var(--text);background:var(--surface2);border:1px solid var(--line);font-size:12px;white-space:nowrap}
.rec-filter-chips .chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.rec-filter-chips .chip.active{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:850;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
.rec-filter-chips .chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rec-results-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.rec-results-tools label,.rec-result-count{font-size:12px;font-weight:750;color:var(--muted)}
.rec-result-count{white-space:nowrap;color:var(--text);margin-right:10px}
.rec-results-tools select{padding:9px 26px 9px 10px;font-size:12px;border-radius:10px;min-height:36px;color:var(--text);background:var(--surface2);border:1px solid var(--line);width:auto;max-width:160px}
@media(max-width:760px){
 .rec-toolbar{align-items:stretch}
 .rec-filter-sets{gap:12px}
 .rec-filter-group-second{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:12px}
 .rec-results-tools{width:100%;justify-content:flex-end}
}

/* Explicit responsive column steps, preserving readable poster-first cards.
   Actions occupy a dedicated bottom row at all sizes for consistent alignment. */
.rec-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.rec{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:clamp(130px,11vw,160px) minmax(0,1fr);gap:10px 14px;min-height:0;padding:14px;border-radius:16px}
.rec .rec-cover{grid-row:1;min-height:218px}
.rec .rec-actions{grid-column:1/-1;grid-row:2;gap:8px;margin-top:4px}
.rec .rec-actions .rec-save{min-width:110px;flex:1 1 auto;font-size:12px}
.rec .rec-actions button{flex-basis:38px;min-height:38px;border-radius:10px}
.rec .rec-summary{font-size:13px;line-height:1.54;max-height:3.1em;opacity:1;color:var(--text)}
.rec .rec-title{font-size:16px;line-height:1.34}
.rec .rec-reasons-label{font-size:11px}
.rec .rec-anchor{font-size:10px}
.rec .rec-expand{font-size:11px}
.rec .rec-fit{color:#edf0f2;background:rgba(6,11,16,.85);font-size:11px}
@media(min-width:810px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1400px){.rec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1950px){.rec-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:2350px){.rec-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:809px){.rec-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
 .rec{grid-template-columns:117px minmax(0,1fr);gap:10px 12px;padding:12px}
 .rec .rec-cover{min-height:178px}
 .rec .rec-summary{font-size:13px;line-height:1.46;max-height:2.95em}
 .rec .rec-reasons-label{font-size:11px}
 .rec .rec-actions{gap:7px}
 .rec .rec-actions button{min-height:38px}
}
@media(max-width:380px){.rec{grid-template-columns:105px minmax(0,1fr)}.rec .rec-cover{min-height:162px}}

/* Optional browsable reason rows; Grid stays the initial view. */
.rec-view-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--surface2)}
.rec-view-switch button{border:0;border-radius:8px;padding:8px 11px;min-height:32px;font-size:11px;font-weight:800;color:var(--muted);background:transparent}
.rec-view-switch button[aria-pressed=true]{background:var(--accent);color:var(--bg)}
.rec-view-switch button:hover:not([aria-pressed=true]){color:var(--text);background:var(--surface3)}
.rec-view-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rec-rows{display:flex;flex-direction:column;gap:29px;min-width:0}
.rec-row{min-width:0}
.rec-row-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rec-row-heading h2{font-size:18px;letter-spacing:-.4px;margin:0;font-weight:800}
.rec-row-actions{display:flex;align-items:center;gap:7px}
.rec-row-actions span{white-space:nowrap;font-size:11px;color:var(--muted);margin-right:4px}
.rec-row-actions button{border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--text);min-width:36px;min-height:36px;cursor:pointer}
.rec-row-actions button:hover{border-color:var(--accent)}
.rec-row-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rec-row-track{display:flex;gap:15px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.rec-row-track .rec{flex:0 0 min(405px,85vw);max-width:min(405px,85vw);min-width:0;scroll-snap-align:start;grid-template-columns:145px minmax(0,1fr)}
.rec-row-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.rec .rec-cover-loading .poster{display:grid;place-items:center;position:relative;isolation:isolate;background:var(--surface2)}
.rec .rec-cover-loading .missing{visibility:hidden}
.rec .rec-cover-loading:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(100deg,transparent 15%,color-mix(in srgb,var(--text) 10%,transparent) 45%,transparent 75%);transform:translateX(-100%);animation:frame-poster-skeleton 1.65s ease-in-out infinite}
@keyframes frame-poster-skeleton{to{transform:translateX(100%)}}
@media(max-width:600px){
 .rec-row-track .rec{flex-basis:min(345px,86vw);max-width:min(345px,86vw);grid-template-columns:110px minmax(0,1fr)}
 .rec-row-heading h2{font-size:16px}
 .rec-row-track{gap:11px}
 .rec-view-switch{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
 .rec .rec-cover-loading:after{animation:none;transform:none;opacity:.22}
 .rec-row-track{scroll-behavior:auto}
}
body.frame-reduced-motion .rec .rec-cover-loading:after{animation:none;transform:none;opacity:.22}