/* =====================================================================
   Dagvelgeren på Hjem (day-picker.js) – følger temafargene; egne detaljer for Beta/Myk og Matrix nederst.
   ===================================================================== */
html:root body[data-view=home] #homeView#homeView > #dayPicker{order:4!important}
.day-picker{margin:6px auto 18px;padding:0 16px;max-width:1400px;width:100%;box-sizing:border-box;min-width:0}
.dp-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;scroll-snap-type:x proximity}
.dp-strip::-webkit-scrollbar{display:none}
.dp-day{flex:1 0 92px;max-width:150px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name n" "date date" "bar bar";gap:4px 6px;align-items:baseline;
  padding:10px 12px 11px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;scroll-snap-align:start;
  transition:transform .18s ease,border-color .18s,background-color .18s}
.dp-day:hover{transform:translateY(-2px);border-color:var(--border)}
.dp-day:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.dp-name{grid-area:name;font:800 15px/1.1 var(--display,var(--body));letter-spacing:-.01em;white-space:nowrap}
.dp-date{grid-area:date;font:600 12px/1 var(--body);color:var(--muted)}
.dp-n{grid-area:n;font:800 13px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.dp-bar{grid-area:bar;height:5px;margin-top:3px;border-radius:99px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.dp-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent-ink);opacity:.75}
.dp-day.is-weekend .dp-name::after{content:" ·";color:var(--accent-ink)}
.dp-day.is-empty{opacity:.45}
.dp-day[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dp-day[aria-selected=true] .dp-date,.dp-day[aria-selected=true] .dp-n{color:inherit;opacity:.75}
.dp-day[aria-selected=true] .dp-bar{background:rgba(127,127,127,.35)}
.dp-day[aria-selected=true] .dp-bar i{background:var(--bg);opacity:.9}

.dp-panel{margin-top:6px;padding:14px 14px 16px;border-radius:22px;border:1px solid var(--line);background:var(--surface)}
.dp-panel.is-opening{animation:dpIn .22s ease-out}
/* ingen 300 ms ventetid på trykk (dobbelttrykk-zoom) */
.day-picker,.day-picker button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@keyframes dpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dp-title{flex:1;min-width:0;display:grid;gap:2px}
.dp-title h2{margin:0;font:800 clamp(19px,2.2vw,24px)/1.1 var(--display,var(--body));letter-spacing:-.02em;color:var(--ink)}
.dp-title small{color:var(--muted);font-weight:600}
.dp-step,.dp-close{flex:0 0 40px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:700 20px/1 var(--body);cursor:pointer}
.dp-step:disabled{opacity:.35;cursor:default}
.dp-parts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px}
.dp-parts::-webkit-scrollbar{display:none}
.dp-parts button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:700 13.5px/1 var(--body);cursor:pointer}
.dp-parts button small{color:var(--muted);font-variant-numeric:tabular-nums}
.dp-parts button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dp-parts button[aria-selected=true] small{color:inherit;opacity:.75}
.dp-parts button:disabled{opacity:.4;cursor:default}
.dp-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.dp-scroll > .row-card{flex:0 0 min(260px,72vw);scroll-snap-align:start}
.dp-empty{margin:6px 2px;color:var(--muted)}
.dp-all{display:block;margin:10px 0 0 auto;padding:0 14px;height:38px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--ink);font:700 13.5px/1 var(--body);cursor:pointer}
.dp-all:hover{background:var(--soft)}
@media (prefers-reduced-motion:reduce){.dp-panel{animation:none}.dp-day{transition:none}}
html.reduce-motion .dp-panel{animation:none}

/* Beta og Myk Beta: klistremerke-stil med tykk kant og offset-skygge */
html[data-skin=crazy-beta] .dp-day,html[data-skin=soft-beta] .dp-day{border:2.5px solid var(--cb-ink,#3a3446);box-shadow:3px 3px 0 var(--cb-ink,#3a3446);border-radius:4px 14px 4px 14px}
html[data-skin=crazy-beta] .dp-day:nth-child(odd),html[data-skin=soft-beta] .dp-day:nth-child(odd){rotate:-1deg}
html[data-skin=crazy-beta] .dp-day:nth-child(even),html[data-skin=soft-beta] .dp-day:nth-child(even){rotate:1deg}
html[data-skin=soft-beta] .dp-day.is-weekend{background:#f6e6ec}
html[data-skin=crazy-beta] .dp-day.is-weekend{background:#ffd1ee}
html[data-skin=soft-beta] .dp-bar i{background:#e5a3b9;opacity:1}
html[data-skin=crazy-beta] .dp-bar i{background:#ff00a8;opacity:1}
html[data-skin=soft-beta] .dp-day[aria-selected=true]{background:#3a3446;color:#f3e6b3}
html[data-skin=crazy-beta] .dp-day[aria-selected=true]{background:#14001f;color:#fff200}
html[data-skin=soft-beta] .dp-day[aria-selected=true] .dp-bar i{background:#f3e6b3}
html[data-skin=crazy-beta] .dp-day[aria-selected=true] .dp-bar i{background:#fff200}
html[data-skin=crazy-beta] .dp-panel,html[data-skin=soft-beta] .dp-panel{border:3px solid var(--cb-ink,#3a3446);border-radius:6px 22px 6px 18px;box-shadow:5px 5px 0 var(--cb-magenta,#e5a3b9)}
html[data-skin=crazy-beta] .dp-parts button,html[data-skin=soft-beta] .dp-parts button{border:2px solid var(--cb-ink,#3a3446);border-radius:3px 12px 3px 12px}
html[data-skin=crazy-beta] .dp-parts button[aria-selected=true],html[data-skin=soft-beta] .dp-parts button[aria-selected=true]{background:var(--cb-ink,#3a3446);color:var(--cb-yellow,#f3e6b3)}
/* Matrix */
html[data-skin=matrix] .dp-day,html[data-skin=matrix] .dp-panel,html[data-skin=matrix] .dp-parts button,html[data-skin=matrix] .dp-step,html[data-skin=matrix] .dp-close,html[data-skin=matrix] .dp-all{background:#000;border:1px solid var(--mx-line-2);border-radius:2px;color:var(--mx-green);font-family:var(--mx-mono)}
html[data-skin=matrix] .dp-bar i{background:var(--mx-green);opacity:1;box-shadow:var(--mx-glow)}
html[data-skin=matrix] .dp-day[aria-selected=true],html[data-skin=matrix] .dp-parts button[aria-selected=true]{background:var(--mx-green);color:#000}
html[data-skin=matrix] .dp-day[aria-selected=true] .dp-bar i{background:#000}
html[data-skin=matrix] .dp-title h2{color:var(--mx-green)!important}
.dp-panel{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.dp-head{min-width:0}
.dp-scroll{max-width:100%;margin:0!important}

/* Vær (weather.js): merke på kortbildet og linje i eventvisningen */
.wx-badge{position:absolute;z-index:3;top:10px;right:10px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#1d1d24;font:700 12px/1 var(--body,system-ui);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.wx-badge.is-wet{background:#dcebf7;color:#163a5c}
.wx-badge.is-unsure{opacity:.82;outline:1.5px dashed currentColor;outline-offset:-3px}
.row-media,.card-media{position:relative}
#detail .wx-line{margin:4px 0 8px;font-weight:600}
#detail .wx-mini{font-weight:600;color:var(--muted)}
html[data-skin=crazy-beta] .wx-badge,html[data-skin=soft-beta] .wx-badge{border:2px solid var(--cb-ink,#3a3446);border-radius:3px 10px 3px 10px;box-shadow:2px 2px 0 var(--cb-ink,#3a3446);rotate:3deg}
html[data-skin=soft-beta] .wx-badge{background:#fbf8f2;color:#3a3446}
html[data-skin=soft-beta] .wx-badge.is-wet{background:#ddeeee}
html[data-skin=matrix] .wx-badge{background:#000;color:var(--mx-green);border:1px solid var(--mx-line-2);border-radius:0;font-family:var(--mx-mono)}

/* Bredden følger alltid skjermen: dagvelgeren ligger i en flex-kolonne, og den lange kortraden skal scrolle
   sidelengs inni dagsplanen – ikke presse hele dagvelgeren bredere enn skjermen (da ble dager og kort kuttet). */
html:root body #homeView > #dayPicker{width:auto!important;max-width:min(1400px,100%)!important;min-width:0!important;align-self:stretch;margin-left:0;margin-right:0;box-sizing:border-box;overflow:hidden}
@media (min-width:1440px){html:root body #homeView > #dayPicker{align-self:center;width:100%!important}}
#dayPicker .dp-strip,#dayPicker .dp-panel,#dayPicker .dp-scroll{min-width:0;max-width:100%}
#dayPicker .dp-scroll{overflow-x:auto;overscroll-behavior-x:contain}

/* Mobil: dagsplanen som en loddrett liste med kompakte rader (lite bilde + tekst), ikke store sidelengs kort –
   så du ser mange arrangementer på en gang i stedet for halvannet kort. */
@media (max-width:700px){
  #dayPicker .dp-scroll{display:flex!important;flex-direction:column!important;gap:8px!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important}
  #dayPicker .dp-scroll > .row-card{flex:0 0 auto!important;width:100%!important;max-width:none!important;display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;align-items:stretch!important;min-height:0!important;height:auto!important;rotate:none!important;transform:none!important}
  #dayPicker .dp-scroll > .row-card .row-media{height:auto!important;min-height:76px!important;aspect-ratio:auto!important;border-radius:0!important}
  #dayPicker .dp-scroll > .row-card .row-media .art-venue,#dayPicker .dp-scroll > .row-card .row-media .row-flag{display:none!important}
  #dayPicker .dp-scroll > .row-card .row-media .bubble{left:6px!important;bottom:6px!important;top:auto!important;max-width:calc(100% - 12px)!important;height:22px!important;font-size:10.5px!important;padding:0 7px 0 5px!important}
  #dayPicker .dp-scroll > .row-card .row-media .bubble .ico{width:12px!important;height:12px!important;flex-basis:12px!important}
  #dayPicker .dp-scroll > .row-card .row-media .wx-badge{top:6px;right:auto;left:6px;font-size:10.5px;padding:3px 6px}
  #dayPicker .dp-scroll > .row-card .row-body{padding:9px 12px!important;display:grid!important;gap:2px!important;align-content:center}
  #dayPicker .dp-scroll > .row-card .row-body strong{font-size:15px!important;line-height:1.2!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #dayPicker .dp-scroll > .row-card .row-body small{font-size:12.5px!important}
  html[data-skin] #dayPicker .dp-scroll > .row-card{box-shadow:2px 2px 0 var(--cb-ink,rgba(0,0,0,.2))!important}
  html[data-skin=matrix] #dayPicker .dp-scroll > .row-card{box-shadow:none!important}
}

/* «🚧 Under konstruksjon» (under-construction.js) – én rolig linje */
html:root body[data-view=home] #homeView#homeView > .uc-note{order:4!important;align-self:center!important;width:calc(100% - 32px)!important;max-width:760px!important}
.uc-note{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:calc(100% - 32px);max-width:1368px;margin:4px auto 10px;padding:7px 8px 7px 12px;border-radius:12px;
  border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);background:color-mix(in srgb,#f5c542 12%,var(--surface));color:var(--muted);font:500 13px/1.35 var(--body,system-ui)}
.uc-ico{flex:0 0 auto;font-size:15px}
.uc-txt{flex:1;min-width:0}
.uc-txt b{color:var(--ink);font-weight:700}
.uc-link{padding:0;border:0;background:none;color:var(--accent-ink,var(--ink));font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.uc-x{flex:0 0 28px;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 18px/1 var(--body,system-ui);cursor:pointer}
.uc-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
#msLanding > .uc-note{width:100%;margin:0 0 12px}
html[data-skin=crazy-beta] .uc-note,html[data-skin=soft-beta] .uc-note{border:2px dashed var(--cb-ink,#3a3446);border-radius:3px 12px 3px 12px;color:var(--cb-ink,#3a3446)}
html[data-skin=matrix] .uc-note{background:#000;border:1px dashed var(--mx-line-2);border-radius:0;color:var(--mx-dim);font-family:var(--mx-mono)}
html[data-skin=matrix] .uc-note b{color:var(--mx-green)}