/* =====================================================================
   HvaSkjer – «Dine treff» (results.css)
   • Tidsvalg øverst: Alle · I dag · I helgen · Denne uken · Denne måneden (med antall).
   • Én kolonne med store kort i stedet for to smale; vinduet beholder full størrelse.
     Mobil: stort bilde over teksten. PC: bilde til venstre, tekst til høyre.
   • Bredt rullefelt (18 px, dobbelt så bredt som før) som er lett å treffe med musa.
   ===================================================================== */

/* vinduet: overskrift · tidsvalg · liste (listen tar resten av høyden) */
html:root body #resultsDialog[open]{display:flex!important;flex-direction:column}
html:root body #resultsDialog .results-dialog-head{flex:0 0 auto}
html:root body #resultsDialog .results-scroll{flex:1 1 auto;height:auto!important;min-height:0}

/* ---------- tidsvalg ---------- */
.results-when{flex:0 0 auto;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:10px 16px;border-bottom:1px solid var(--line)}
.results-when::-webkit-scrollbar{display:none}
.results-when[hidden]{display:none}
.results-when button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border-radius:999px;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink);background:var(--soft);border:1px solid var(--line);touch-action:manipulation;transition:background-color .2s,color .2s}
.results-when button small{font-size:12px;font-weight:600;color:var(--muted)}
.results-when button[aria-pressed=true]{background:var(--accent-ink,#7c5cff);color:#fff;border-color:transparent}
.results-when button[aria-pressed=true] small{color:inherit;opacity:.85}
.results-when button:disabled{opacity:.4;cursor:default}
.results-when button:focus-visible{outline:2px solid var(--accent-ink,#7c5cff);outline-offset:2px}

/* ---------- én kolonne, store kort ---------- */
html:root body #resultsDialog #resultsGrid.results-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
html:root body #resultsDialog #resultsGrid > .card{min-height:0!important;contain-intrinsic-size:auto 340px}
html:root body #resultsDialog #resultsGrid > .card .card-media{height:auto!important;aspect-ratio:16/9;max-height:260px}
html:root body #resultsDialog #resultsGrid > .card .card-body{padding:14px 16px 16px!important;gap:4px}
html:root body #resultsDialog #resultsGrid > .card .card-body strong{font-size:19px!important;line-height:1.2!important;-webkit-line-clamp:3}
html:root body #resultsDialog #resultsGrid > .card .card-body small{font-size:13.5px!important;line-height:1.4!important}
html:root body #resultsDialog .results-scroll{padding:14px 14px calc(24px + var(--safe-bottom,0px))!important}

/* PC/nettbrett: bilde til venstre, tekst til høyre – store, lettleste rader */
@media (min-width:701px){
  html:root body #resultsDialog #resultsGrid > .card{display:grid!important;grid-template-columns:minmax(220px,44%) minmax(0,1fr)!important;align-items:stretch;min-height:190px!important}
  html:root body #resultsDialog #resultsGrid > .card .card-media{aspect-ratio:auto;height:100%!important;max-height:none;min-height:190px}
  html:root body #resultsDialog #resultsGrid > .card .card-body{display:flex!important;flex-direction:column;justify-content:center;padding:18px 20px!important}
  html:root body #resultsDialog #resultsGrid > .card .card-body strong{font-size:21px!important}
}
html:root body #resultsDialog #resultsGrid > .results-more{grid-column:1/-1;min-height:52px;font-size:15px}

/* ---------- bredt rullefelt ----------
   style.css gjør alle rullefelt tynne på PC (scrollbar-width:thin). Her slås det av, så Chrome/Edge/Safari bruker
   den brede varianten under, og Firefox får sitt vanlige (brede) felt. Bare med mus/styreflate – på mobil er rullefeltet usynlig uansett. */
@media (pointer:fine){
html:root body #resultsDialog .results-scroll{scrollbar-width:auto!important;scrollbar-color:auto!important}
#resultsDialog .results-scroll::-webkit-scrollbar{width:18px}
#resultsDialog .results-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:10px;margin:6px 0}
#resultsDialog .results-scroll::-webkit-scrollbar-thumb{min-height:56px;border-radius:10px;border:3px solid transparent;background-clip:padding-box;
  background-color:color-mix(in srgb,var(--muted) 70%,transparent)}
#resultsDialog .results-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--accent-ink,#7c5cff)}
#resultsDialog .results-scroll::-webkit-scrollbar-thumb:active{background-color:var(--accent-ink,#7c5cff)}
}

/* temaene */
html[data-skin=matrix] .results-when{border-bottom:1px dashed var(--mx-line,#1f3)}
html[data-skin=matrix] .results-when button{background:#000;color:var(--mx-green,#3f6);border:1px solid var(--mx-line-2,#1a5a2a);border-radius:0;font-family:var(--mx-mono,monospace)}
html[data-skin=matrix] .results-when button[aria-pressed=true]{background:var(--mx-green,#3f6);color:#000}
html[data-skin=crazy-beta] .results-when button,html[data-skin=soft-beta] .results-when button{border:2px solid var(--cb-ink,#3a3446);border-radius:4px 12px 4px 12px}
html[data-skin=crazy-beta] .results-when button[aria-pressed=true]{background:var(--cb-magenta,#ff2bd6);color:#fff}
html[data-skin=soft-beta] .results-when button[aria-pressed=true]{background:var(--cb-magenta,#e5a3b9);color:var(--cb-ink,#3a3446)}
@media (pointer:fine){html[data-skin=matrix] #resultsDialog .results-scroll::-webkit-scrollbar-thumb{background-color:var(--mx-green,#3f6);border-radius:0}}