:root {
  --bg: #0a0d12;
  --panel: #121720;
  --panel-2: #181e29;
  --line: #232b38;
  --text: #e8ecf2;
  --muted: #8b95a5;
  --faint: #5b6575;
  --up: #3ccf8e;
  --down: #ff6b6b;
  --accent: #6aa8ff;
  --alarm: #ffb547;
  --mesh: #b48cff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: Inter, system-ui, sans-serif; color: var(--text); font-feature-settings: "tnum" 1; }

/* Vast 1920x1080 canvas dat meeschaalt met het scherm */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  display: grid; gap: 20px; padding: 28px;
  grid-template-columns: 1040px 1fr;
  grid-template-rows: 633px 1fr;
  grid-template-areas: "video side" "news side";
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.ph { display: flex; align-items: center; gap: 12px; padding: 16px 22px 10px; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ph .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.ph .dot.ok { background: var(--up); }
.ph .dot { position: relative; flex: none; cursor: pointer; }
.ph .dot::before { content: ''; position: absolute; inset: -12px; } /* groter tikvlak */
.ph .dot.busy { animation: dotpulse .6s ease-in-out infinite alternate; }
.ph .dot.busy::after { --p: 1; }
@keyframes dotpulse { to { transform: scale(.6); opacity: .5; } }
.ph .dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(var(--muted) calc(var(--p, 0) * 1turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 6.4px, #000 7px); mask: radial-gradient(circle, transparent 6.4px, #000 7px); opacity: .55; transition: background .9s linear; }
.ph .dot.stale { background: var(--alarm); }
.ph .dot.err { background: var(--down); }
.nsrc { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); text-transform: none; letter-spacing: 0; }
.nsrc button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; padding: 3px 10px; border-radius: 7px; cursor: pointer; }
.nsrc button.on { background: var(--text); color: var(--bg); }
.place-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
.place-btn .caret { display: none; }
html.can-pick .place-btn { cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
html.can-pick .place-btn .caret { display: inline; font-size: .8em; margin-left: 3px; color: var(--faint); }
body.flow .place-btn { cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
body.flow .place-btn .caret { display: inline; font-size: .8em; margin-left: 3px; color: var(--faint); }
.pl-search { width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 500 16px Inter, sans-serif; }
.pl-list { display: grid; gap: 6px; margin-top: 10px; }
.pl-list button { text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 600 15px Inter, sans-serif; cursor: pointer; }
.pl-list button small { display: block; font-weight: 500; color: var(--faint); font-size: 13px; margin-top: 2px; }
.pl-list button.on { border-color: var(--accent); }
html.flow { overscroll-behavior-y: none; }
#ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 6px); z-index: 60; transform: translate(-50%, -70px); transition: transform .2s, opacity .2s; opacity: 0; visibility: hidden; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 14px; font: 600 13px Inter, sans-serif; display: flex; align-items: center; gap: 8px; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#ptr.show { opacity: 1; visibility: visible; }
#ptr .ar { display: inline-block; transition: transform .2s; }
#ptr.ready .ar { transform: rotate(180deg); }
#ptr.busy .ar { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nw-body h4 { margin: 18px 0 6px; font-size: 1.05em; }
.ph .right { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--faint); }

/* Video */
#video { grid-area: video; }
#video .frame.pip-away::after { content: 'Speelt in een los venster'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font: 500 15px Inter, sans-serif; }
#video .tabs { display: flex; gap: 8px; padding: 10px 14px; align-items: center; }
.tab { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font: 600 15px Inter, sans-serif; cursor: pointer; }
.tab.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tab.sound { margin-left: auto; padding: 7px 11px; line-height: 1; font-size: 18px; display: inline-flex; align-items: center; }
.tab.pip svg.ic { font-size: 16px; }
.tab.off { opacity: .35; cursor: default; }
.tab .live { font-size: 11px; font-weight: 700; background: var(--down); color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; }
#video .frame { width: 1040px; height: 585px; background: #000; position: relative; }
body:not(.flow) .tab.pip { display: none; }
#video iframe { background: #000; }
#video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Nieuws */
#news { grid-area: news; }
.lower { grid-area: news; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; min-height: 0; }
#lower > #news, #lower > #radio { grid-area: auto; min-height: 0; }
body.flow .lower { display: none; }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 16px; }
.rst { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; }
.rst .rlogo { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fff; }
.rst .rlogo img { width: 100%; height: 100%; object-fit: contain; }
.rst .rlogo.txt { background: var(--line); color: var(--muted); font-size: 18px; font-weight: 700; }
.rst.on { border-color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
.rst.on::after { content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 12px; background: linear-gradient(var(--up), var(--up)) 0 100% / 3px 40% no-repeat, linear-gradient(var(--up), var(--up)) 5px 100% / 3px 90% no-repeat, linear-gradient(var(--up), var(--up)) 10px 100% / 3px 60% no-repeat; animation: eq 1s ease-in-out infinite alternate; }
.rst.loading { opacity: .7; }
.rst.off { opacity: .4; cursor: default; }
@keyframes eq { to { background-size: 3px 90%, 3px 30%, 3px 100%; } }
#radio-now { color: var(--up); }
body:not(.flow) .rgrid { gap: 8px; padding: 2px 14px 14px; }
body:not(.flow) .rst { flex-direction: column; min-height: 0; padding: 10px 6px 8px; gap: 6px; font-size: 14px; }
body:not(.flow) .rst .rlogo { width: 44px; height: 44px; border-radius: 10px; }
body:not(.flow) .rst.tv-focus { outline: 3px solid var(--accent); outline-offset: 2px; }
/* compact: één rij met alleen logo's, de naam staat in de kop als een zender speelt */
body.flow .rgrid { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 8px; padding: 0 14px 14px; }
body.flow .rst { min-height: 0; padding: 8px 4px; }
body.flow .rst .rname { display: none; }
body.flow .rst .rlogo { width: 44px; height: 44px; border-radius: 11px; }
body.flow .rst.on::after { top: 4px; right: 4px; }
body.flow #radio.is-compact .rst { min-height: 0; padding: 8px 6px; }
body.flow #radio.is-compact .rst .rlogo { width: 36px; height: 36px; }
body.flow #radio.is-compact .rst .rname { display: none; }
#news ul { list-style: none; padding: 2px 22px 14px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
#news li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 19px; line-height: 1.3; font-weight: 500; }
#news li:nth-child(-n+2) { border-top: 0; }
#news time { color: var(--faint); font-size: 15px; padding-top: 3px; font-family: "JetBrains Mono", monospace; }
#news .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Rechterkolom */
#side { grid-area: side; display: grid; gap: 20px; grid-template-rows: 280px 330px 1fr; min-height: 0; }

/* Klok + weer */
#now { flex-direction: row; padding: 22px 26px; gap: 26px; }
.clock { display: flex; flex-direction: column; justify-content: space-between; min-width: 250px; }
.clock .time { font-size: 92px; font-weight: 600; letter-spacing: -.03em; line-height: .95; }
.clock .date { font-size: 21px; color: var(--muted); margin-top: 6px; text-transform: capitalize; }
.clock .sun { font-size: 16px; color: var(--faint); }
.wx { flex: 1; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); padding-left: 26px; }
.wx-top { display: flex; align-items: center; gap: 16px; }
.wx-now { display: inline-flex; align-items: center; gap: inherit; column-gap: inherit; }
/* TV: zo weinig mogelijk beweging naast de video, en de video op een eigen laag */
body:not(.flow) .ph .dot::after { display: none; }
body:not(.flow) .rst.on::after { animation: none; }
body:not(.flow) #video .frame { contain: strict; }
body:not(.flow) #yt { will-change: transform; transform: translateZ(0); }
svg.ic { width: 1em; height: 1em; fill: url(#ig); vertical-align: -0.14em; flex: none; }
.wx-icon { font-size: 56px; line-height: 1; display: inline-flex; }
.wx-icon svg.ic { filter: drop-shadow(0 2px 6px rgba(127,163,224,.25)); }
.day .e svg.ic { display: block; margin: 2px auto; }
.p2k .ico svg.ic { width: 23px; height: 23px; }
.clock .sun svg.ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; opacity: .85; }
.pl-list button svg.ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -0.2em; }
.radio-down svg.ic { fill: currentColor; }
.wx-temp { font-size: 58px; font-weight: 600; letter-spacing: -.02em; }
.wx-meta { font-size: 16px; color: var(--muted); line-height: 1.5; }
.wx-meta b { color: var(--text); font-weight: 600; }
.rain { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.rain i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.rain-lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); margin-top: 4px; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.day { background: var(--panel-2); border-radius: 12px; padding: 8px 10px; text-align: center; font-size: 15px; color: var(--muted); }
.day .e { font-size: 24px; display: block; margin: 2px 0; }
.day b { color: var(--text); }

/* Koersen */
#markets .rows { padding: 0 22px 10px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 38px); grid-template-columns: 1fr 1fr; column-gap: 26px; }
.row { display: grid; grid-template-columns: 1fr auto 56px 78px; align-items: center; gap: 10px; border-top: 1px solid var(--line); min-width: 0; }
.row:nth-child(7n+1) { border-top: 0; }
.row .n { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .n small { display: none; }
.row .p { font-size: 16px; font-weight: 600; text-align: right; white-space: nowrap; }
.row .c { font-size: 14px; font-weight: 600; text-align: right; border-radius: 7px; padding: 3px 6px; justify-self: end; white-space: nowrap; }
.up { color: var(--up); } .down { color: var(--down); }
.row .p.tick-up { animation: tickUp 1.2s ease-out; } .row .p.tick-down { animation: tickDown 1.2s ease-out; }
@keyframes tickUp { 0% { color: var(--up); } 100% { color: inherit; } }
@keyframes tickDown { 0% { color: var(--down); } 100% { color: inherit; } }
.c.up { background: rgba(60,207,142,.12); } .c.down { background: rgba(255,107,107,.12); }
.row svg { width: 56px; height: 24px; }

/* Feeds onder */
.bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
.feed { list-style: none; padding: 0 18px 14px; overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.feed li { padding: 10px 4px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.35; }
.feed li:first-child { border-top: 0; }
.feed .meta { display: flex; gap: 8px; font-size: 13px; color: var(--faint); margin-bottom: 3px; font-family: "JetBrains Mono", monospace; }
.feed .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#p2000 .ph .dot.ok { background: var(--alarm); }
.prio { font-weight: 700; padding: 0 6px; border-radius: 5px; color: var(--bg); background: var(--alarm); }
.prio.a1, .prio.p1 { background: var(--down); }
.fresh { animation: flash 2.4s ease-out 3; border-radius: 8px; }
@keyframes flash { 0% { background: rgba(255,181,71,.28); } 100% { background: transparent; } }
.p2k { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.p2k .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--panel-2); margin-top: 2px; border: 2px solid transparent; }
.p2k .ico.lv1 { border-color: var(--down); }
.p2k .ico.lv2 { border-color: var(--alarm); }
.p2k > div { min-width: 0; }
.p2k .txt b { font-weight: 700; }
.p2k.far .txt { color: var(--muted); }
.p2k.far .ico { opacity: .55; }
.p2k.local .txt b { color: var(--alarm); }
.p2k .txt { -webkit-line-clamp: 3; }
#mesh .ph .dot.ok { background: var(--mesh); }
#mesh .who { color: var(--mesh); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#mesh .ms-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
#mesh .ms-row > time { font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--faint); padding-top: 1px; }
body.flow #mesh .ms-row > time { font-size: 13px; }
body.flow #mesh .ms-row { grid-template-columns: 46px minmax(0, 1fr); }
#mesh .feed li.radio-down { background: rgba(255,107,107,.12); color: var(--down); border-radius: 10px; border-top: 0; padding: 10px 12px; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
#mesh .me .who { color: var(--accent); }
.empty { color: var(--faint); font-size: 16px; padding: 14px 4px; }

/* ================= Meeschuivende weergave (iPhone / iPad) ================= */
html.flow, html.flow body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.flow { -webkit-text-size-adjust: 100%; }
body.flow #stage {
  position: static; transform: none !important; display: block;
  width: 100%; height: auto; max-width: 1400px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
body.flow #side, body.flow .bottom { display: none; }
.fcol { display: none; }
/* telefoon: kolommen vallen weg, alles onder elkaar in volgorde kolom A, kolom B */
body.flow .fcol { display: contents; }
body.flow .fcol > .panel { display: flex; width: 100%; margin: 0 0 14px; }
/* iPad en groter: twee echte kolommen */
@media (min-width: 700px) {
  body.flow #stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; gap: 14px; align-items: start; }
  body.flow .fcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 120px; }
  body.flow .fcol > .panel { margin: 0; }
  body.dragmode .fcol { padding-bottom: 120px; }
  body.flow #layout-reset { grid-column: 1 / -1; }
}
body.flow .panel { border-radius: 16px; }

/* video */
body.flow #video .frame { width: 100%; height: auto; aspect-ratio: 16 / 9; }
body.flow #video .tabs { overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.flow #video .tabs::-webkit-scrollbar { display: none; }
/* zachte vervaging aan de rand die laat zien dat er meer knoppen zijn */
body.flow #video .tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
body.flow #video .tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
body.flow #video .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
body.flow .tab { flex: none; font-size: 14px; padding: 7px 14px; }
/* videotegel in een halve kolom: geluidsknop alleen als icoon */
@media (min-width: 700px) {
  body.flow #video .tab.sound .lbl { display: none; }
  body.flow #video .tab.sound { padding: 7px 11px; }
}

/* klok + weer */
body.flow #now { flex-direction: column; gap: 16px; padding: 18px; }
body.flow .clock { flex-direction: row; align-items: flex-end; justify-content: space-between; min-width: 0; }
body.flow .clock .time { font-size: 56px; }
body.flow .clock .date { font-size: 17px; }
body.flow .clock .sun { font-size: 14px; text-align: left; }
body.flow .wx { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
body.flow .wx-icon { font-size: 44px; } body.flow .wx-temp { font-size: 46px; }
body.flow .wx-meta { font-size: 14px; }
body.flow .day { font-size: 13px; padding: 8px 4px; } body.flow .day .e { font-size: 22px; }
/* Telefoon: klok en weer compact (klok | weer nu, daaronder regen en dagen klein) */
@media (max-width: 599px) {
  body.flow #now { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 10px; padding: 14px 16px; align-items: start; }
  body.flow #now .clock { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; }
  body.flow #now .clock .time { font-size: 42px; }
  body.flow #now .clock .date { font-size: 13px; margin-top: 2px; }
  body.flow #now .clock .sun { font-size: 12px; margin-top: 3px; }
  body.flow #now .wx { display: contents; }
  body.flow #now .wx-top { grid-column: 2; grid-row: 1; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding-right: 34px; }
  body.flow #now .wx-icon { font-size: 30px; }
  body.flow #now .wx-temp { font-size: 32px; }
  body.flow #now .wx-meta { flex-basis: 100%; font-size: 12px; line-height: 1.4; }
  body.flow #now .wx > div:not(.wx-top):not(.days) { grid-column: 1 / -1; grid-row: 2; }
  body.flow #now .rain { height: 16px; }
  body.flow #now .rain-lbl { font-size: 10px; margin-top: 2px; }
  body.flow #now .days { grid-column: 1 / -1; grid-row: 3; gap: 6px; }
  body.flow #now .day { padding: 4px 2px; font-size: 11px; border-radius: 9px; }
  body.flow #now .day .e { font-size: 20px; margin: 0; }
  body.flow #now > .tilectl { top: 8px; right: 8px; }
  body.flow #now > .tilectl button { width: 26px; height: 26px; }
}
/* Tablet en breder: klok en weer compact naast elkaar (klok | weer nu, regen | dagen) */
@media (min-width: 600px) {
  body.flow #now:not(.is-compact) { display: grid; grid-template-columns: minmax(200px, auto) 1fr; column-gap: 26px; row-gap: 12px; align-items: center; }
  body.flow #now:not(.is-compact) .clock { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; }
  body.flow #now:not(.is-compact) .clock .time { font-size: 52px; }
  body.flow #now:not(.is-compact) .clock .date { font-size: 16px; margin-top: 2px; }
  body.flow #now:not(.is-compact) .clock .sun { margin-top: 4px; font-size: 13px; }
  body.flow #now:not(.is-compact) .wx { display: contents; }
  body.flow #now:not(.is-compact) .wx-top { grid-column: 2; grid-row: 1; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
  body.flow #now:not(.is-compact) .wx-meta { flex-basis: 100%; font-size: 13px; line-height: 1.45; }
  body.flow #now:not(.is-compact) .wx-icon { font-size: 40px; }
  body.flow #now:not(.is-compact) .wx-temp { font-size: 42px; }
  body.flow #now:not(.is-compact) .wx > div:not(.wx-top):not(.days) { grid-column: 1; grid-row: 2; align-self: end; }
  body.flow #now:not(.is-compact) .rain { height: 26px; }
  body.flow #now:not(.is-compact) .rain-lbl { font-size: 11px; }
  body.flow #now:not(.is-compact) .days { grid-column: 2; grid-row: 2; gap: 6px; }
  body.flow #now:not(.is-compact) .day { padding: 5px 4px; font-size: 12px; border-radius: 10px; }
  body.flow #now:not(.is-compact) .day .e { font-size: 24px; margin: 0; }
}

/* koersen: één kolom */
body.flow #markets .rows { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; padding: 0 16px 10px; }
body.flow .row { height: 42px; grid-template-columns: 1fr auto 52px 74px; }
body.flow .row:nth-child(7n+1) { border-top: 1px solid var(--line); }
body.flow .row:first-child { border-top: 0; }

/* feeds: alles tonen, geen afkapping */
body.flow .feed { -webkit-mask-image: none; mask-image: none; padding: 0 14px 12px; }
body.flow .feed li { font-size: 15px; }
body.flow .feed .txt, body.flow .p2k .txt { -webkit-line-clamp: unset; display: block; }
body.flow #p2000 .feed li:nth-child(n+9), body.flow #mesh .feed li:nth-child(n+11) { display: none; }

/* nieuws */
body.flow #news ul { grid-template-columns: 1fr; padding: 0 16px 12px; }
body.flow #news li { font-size: 16px; grid-template-columns: 46px 1fr; }
body.flow #news li:nth-child(2) { border-top: 1px solid var(--line); }
body.flow #news time { font-size: 13px; }
body.flow .ph { padding: 14px 16px 8px; font-size: 13px; }


/* klikbaar */
.clk { cursor: pointer; transition: background .15s; border-radius: 8px; }
.clk:active { background: var(--panel-2); }
@media (hover: hover) { .clk:hover { background: var(--panel-2); } }
#markets .row.clk { margin: 0 -6px; padding: 0 6px; }

/* popup */
#modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px; }
#modal[hidden] { display: none; }
#modal .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; width: min(560px, 100%); max-height: min(86vh, 900px); overflow-y: auto; position: relative; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: pop .18s ease-out; }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
#modal .x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--muted); font-size: 18px; cursor: pointer; z-index: 2; }
.m-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.m-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin-right: 40px; }
.m-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.m-price { font-size: 34px; font-weight: 700; margin-top: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.m-price .c { font-size: 16px; }
.m-ranges { display: flex; gap: 6px; margin: 16px 0 8px; }
.m-ranges button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 14px; font: 600 14px Inter, sans-serif; cursor: pointer; }
#modal .tv-focus { outline: 3px solid var(--accent); outline-offset: 2px; }
#modal button { -webkit-tap-highlight-color: transparent; }
#modal button:focus:not(.tv-focus) { outline: none; }
.m-ranges button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.m-chart { height: 200px; position: relative; }
.m-chart svg { width: 100%; height: 100%; display: block; }
.m-chart .lbl { position: absolute; right: 0; font-size: 12px; color: var(--faint); background: var(--panel); padding: 0 4px; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 16px; font-size: 14px; }
.m-grid div span { display: block; color: var(--faint); font-size: 12px; margin-bottom: 2px; }
.m-links { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.m-links a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; }
.m-img { width: calc(100% + 44px); margin: -22px -22px 16px; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 20px 20px 0 0; background: var(--panel-2); }
.m-text { font-size: 16px; line-height: 1.55; margin-top: 14px; color: #cfd6e0; }
.m-map { height: 280px; border-radius: 14px; overflow: hidden; margin-top: 16px; background: var(--panel-2); }
.ms-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 20px 0 8px; }
.ms-path { padding: 10px 0; border-top: 1px solid var(--line); }
.ms-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ms-node { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 14px; font-weight: 600; }
.ms-node.unk { font-family: "JetBrains Mono", monospace; color: var(--faint); font-weight: 500; }
.ms-node.me { border-color: var(--mesh); color: var(--mesh); }
.ms-arr { color: var(--faint); }
.ms-pmeta { font-size: 13px; color: var(--muted); margin-top: 6px; }
.m-note { font-size: 12px; color: var(--faint); margin-top: 8px; }
.m-raw { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--faint); margin-top: 12px; word-break: break-word; }
.leaflet-container { background: #1a1f28 !important; font-family: Inter, sans-serif; }
.leaflet-control-attribution { background: rgba(10,13,18,.75) !important; color: var(--faint) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--muted) !important; }
@media (max-width: 600px) {
  #modal { align-items: flex-end; padding: 0; }
  #modal .sheet { border-radius: 20px 20px 0 0; width: 100%; max-height: 90vh; padding-bottom: max(22px, env(safe-area-inset-bottom)); animation: up .22s ease-out; }
  @keyframes up { from { transform: translateY(40px); } to { transform: none; } }
  .m-img { border-radius: 20px 20px 0 0; }
}

/* slepen */
body.flow .fcol > .panel { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.panel.lifting { transition: transform .15s; transform: scale(.98); }
.panel.dragging { position: fixed !important; z-index: 40; pointer-events: none; opacity: .92; box-shadow: 0 24px 60px rgba(0,0,0,.6); transform: scale(1.02); border-color: var(--accent); margin: 0 !important; }
.drop-ph { border: 2px dashed var(--accent); border-radius: 16px; margin: 0 0 14px; flex: none; background: rgba(106,168,255,.06); }
body.dragmode { overflow: hidden; touch-action: none; }
#layout-reset { display: none; margin: 4px auto 0; background: transparent; border: 1px solid var(--line); color: var(--faint); border-radius: 999px; padding: 8px 16px; font: 500 13px Inter, sans-serif; cursor: pointer; }
body.flow #layout-reset { display: block; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 999px; z-index: 60; }

/* vermogen (Kubera, alleen procenten) */
#wealth.off, .wmini.off { display: none !important; }
body:not(.flow) #wealth { display: none !important; }
body.flow .wmini { display: none; }
.wmini { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.wmini .wm-lbl { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.wmini .wm-row { display: flex; gap: 20px; }
.wmini .wm-row:has(> div:nth-child(3)) { gap: 14px; }
.wmini .wm-row:has(> div:nth-child(3)) .wm-val { font-size: 24px; }
.wmini .wm-val { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wmini .wm-sub { font-size: 15px; color: var(--muted); }
.clock .sun { margin-top: 8px; }
body:not(.flow) .clock { max-width: 290px; }
.wmini b { font-weight: 700; }
.wbody { padding: 2px 18px 16px; }
.w-today { display: flex; align-items: baseline; gap: 10px; }
.w-today .big { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.w-today .lbl { color: var(--muted); font-size: 15px; }
.w-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.w-chip { background: var(--panel-2); border-radius: 12px; padding: 8px 10px; text-align: center; }
.w-chip span { display: block; font-size: 12px; color: var(--faint); margin-bottom: 2px; }
.w-chip b { font-size: 16px; }
.w-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; }
.w-bar i { display: block; height: 100%; }
.w-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.w-legend b { color: var(--text); font-weight: 600; margin-left: 4px; }
.w-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.w-note { font-size: 12px; color: var(--faint); margin-top: 12px; }
.muted { color: var(--faint); }

.w-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-top .lbl { display: block; color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.w-top .big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.w-sub { font-size: 12px; color: var(--faint); margin: 12px 0 4px; }
.w-hours { width: 100%; display: block; }
.w-hlbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 2px; font-family: "JetBrains Mono", monospace; }
.w-mini-bars { margin-top: 6px; }

/* ===== tegelknoppen: compact / sluiten (alleen iPhone/iPad) ===== */
.tilectl { display: none; gap: 6px; align-items: center; }
body.flow .tilectl { display: flex; }
body.flow .ph .tilectl { margin-left: 4px; }
body.flow #now > .tilectl, body.flow #video > .tilectl { position: absolute; top: 10px; right: 10px; z-index: 3; }
body.flow #video .tabs { margin-right: 46px; }
body.flow #video > .tilectl { top: 15px; }
.tilectl button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tilectl button:active { background: var(--line); }
.tilectl svg { width: 15px; height: 15px; }
body.flow .panel.is-hidden { display: none !important; }

/* compacte varianten */
body.flow #now.is-compact .wx > :not(.wx-top) { display: none; }
body.flow #now.is-compact .wx { padding-top: 10px; }
body.flow #now.is-compact .clock .time { font-size: 44px; }
body.flow #wealth.is-compact .w-chips,
body.flow #wealth.is-compact .w-bar,
body.flow #wealth.is-compact .w-legend,
body.flow #wealth.is-compact .w-note,
body.flow #wealth.is-compact .w-sub,
body.flow #wealth.is-compact .w-hlbl { display: none; }
body.flow #wealth.is-compact .w-top .big { font-size: 26px; }
body.flow #wealth.is-compact .w-hours { height: 34px !important; margin-top: 8px; }
/* compact: zelfde regels, alleen crypto en edelmetaal */
body.flow #markets.is-compact .row:not([data-g="crypto"]):not([data-g="metaal"]) { display: none; }
body.flow #p2000.is-compact .feed li:nth-child(n+4),
body.flow #mesh.is-compact .feed li:nth-child(n+4) { display: none; }
body.flow #p2000.is-compact .feed li.radio-down ~ li:nth-child(n+5) { display: none; }
body.flow #p2000.is-compact .feed .txt,
body.flow #mesh.is-compact .feed .txt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.flow #p2000.is-compact .p2k .ico { width: 26px; height: 26px; font-size: 14px; }
body.flow #news.is-compact ul li:nth-child(n+5) { display: none; }
body.flow #news.is-compact li .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* balk met gesloten tegels */
#tile-restore { display: none; }
body.flow #tile-restore:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 4px auto 0; font-size: 13px; color: var(--faint); }
@media (min-width: 700px) { body.flow #tile-restore { grid-column: 1 / -1; } }
#tile-restore button { background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 999px; padding: 7px 14px; font: 500 13px Inter, sans-serif; cursor: pointer; }

/* ===== paginatabs + Homey ===== */
#pagetabs { display: none; }
body.flow #pagetabs:not([hidden]) {
  display: flex; gap: 2px; width: fit-content; margin: max(8px, env(safe-area-inset-top)) auto 0;
  background: rgba(18,23,32,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; position: sticky; top: 6px; z-index: 30;
}
#pagetabs button { border: 0; background: transparent; color: var(--faint); font: 600 13px Inter, sans-serif; letter-spacing: .02em; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
#pagetabs button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
/* minder ruimte tussen de tabs en de eerste tegel */
body.flow #pagetabs:not([hidden]) ~ #stage { padding-top: 10px; }
body.flow #pagetabs:not([hidden]) ~ #homeypage, body.flow #pagetabs:not([hidden]) ~ #energypage { padding-top: 8px; }
.subtabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 2px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.subtabs button { border: 0; background: transparent; color: var(--muted); font: 600 14px Inter, sans-serif; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.subtabs button.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
body.flow.page-homey #stage, body.flow.page-homey #tile-restore, body.flow.page-homey #layout-reset { display: none !important; }
#homeypage { display: none; }
body.flow.page-homey #homeypage { display: block; max-width: 1400px; margin: 0 auto; padding: 14px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 12px; }
.hp-head h1 { font-size: 26px; font-weight: 700; }
.hp-sub { font-size: 13px; color: var(--faint); margin-top: 2px; }
.hp-edit { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; }
.hp-ro { background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.3); color: var(--alarm); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.hp-grid { column-gap: 14px; }
.hp-grid > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 14px; display: block; }
@media (min-width: 700px) { .hp-grid { columns: 2; } }
@media (min-width: 1200px) { .hp-grid { columns: 3; } }
.hp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.hp-card h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.hp-flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.hp-flow { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 14px 10px; font: 600 15px Inter, sans-serif; cursor: pointer; text-align: center; }
.hp-flow:active:not(:disabled) { transform: scale(.97); }
.hp-flow.done { border-color: var(--up); color: var(--up); }
.hp-dev { padding: 10px 0; border-top: 1px solid var(--line); }
.hp-dev:first-of-type { border-top: 0; }
.hp-row { display: flex; align-items: center; gap: 10px; }
.hp-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; font-size: 18px; flex: none; }
.hp-ico.on { background: rgba(255,181,71,.18); }
.hp-name { font-weight: 600; font-size: 16px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.hp-chip { font-size: 13px; color: var(--muted); }
.hp-chip b { color: var(--text); font-weight: 600; }
.hp-chip.alarm b { color: var(--down); }
.hp-main { flex: 1; min-width: 0; }
.hp-off { opacity: .45; }
.sw { position: relative; width: 50px; height: 30px; flex: none; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; cursor: pointer; }
.sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw input:checked + span { background: var(--alarm); }
.sw input:checked + span::after { transform: translateX(20px); }
.sw input:disabled + span { cursor: default; opacity: .6; }
.hp-ctl { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 44px; font-size: 14px; color: var(--muted); }
.hp-ctl input[type=range] { flex: 1; accent-color: var(--alarm); }
.hp-step { display: flex; align-items: center; gap: 6px; }
.hp-step button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 18px; cursor: pointer; }
.hp-step b { min-width: 64px; text-align: center; font-size: 18px; color: var(--text); }
.hp-ctl select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 14px Inter, sans-serif; }
.hp-chart { height: 150px; position: relative; margin-top: 6px; }
.hp-chart svg { width: 100%; height: 100%; display: block; }
.hp-chart .lbl { position: absolute; right: 0; font-size: 12px; color: var(--faint); }
.hp-now { font-size: 26px; font-weight: 700; }
.hp-now small { font-size: 14px; color: var(--faint); font-weight: 500; margin-left: 4px; }
.hp-rng { display: flex; gap: 6px; margin-top: 8px; }
.hp-rng button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.hp-rng button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
/* bewerkvenster */
.ed-search { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 10px 12px; font: 15px Inter, sans-serif; margin: 12px 0 4px; }
.ed-group h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 16px 0 6px; }
.ed-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.ed-item input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ed-item small { color: var(--faint); margin-left: auto; font-size: 12px; text-align: right; }
.ed-save { position: sticky; bottom: -22px; background: var(--panel); padding: 14px 0 4px; display: flex; gap: 10px; }
.ed-save button { flex: 1; border: 0; border-radius: 12px; padding: 12px; font: 600 15px Inter, sans-serif; cursor: pointer; }
.ed-save .primary { background: var(--accent); color: #fff; }
.ed-save .ghost { background: var(--panel-2); color: var(--text); }

/* ===== Homey favorieten in app-stijl ===== */
.hp-sec-title { font-size: 22px; font-weight: 700; margin: 18px 2px 12px; }
.hp-sec-title:first-child { margin-top: 4px; }
.hp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 700px) { .hp-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } }
.hp-tile { position: relative; aspect-ratio: 1 / 1; background: #15171c; border: 1px solid #2a2d35; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; cursor: pointer; text-align: left; color: var(--text); font: inherit; -webkit-tap-highlight-color: transparent; }
.hp-tile.on { background: #2a2c33; border-color: #2a2c33; }
.hp-tile.na { opacity: .5; }
.hp-tico { width: 58px; height: 58px; background: #e8ecf2; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; flex: none; }
.hp-tico.fallback { -webkit-mask: none; mask: none; background: none; font-size: 40px; line-height: 58px; }
.hp-pwr, .hp-bell { position: absolute; top: 14px; right: 14px; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #2a2d35; color: #e8ecf2; display: grid; place-items: center; cursor: pointer; padding: 0; }
.hp-tile.on .hp-pwr { background: #5b5136; color: #f3d27a; }
.hp-pwr svg { width: 24px; height: 24px; }
.hp-bell { width: 40px; height: 40px; top: 18px; right: 18px; cursor: default; }
.hp-bell.alarm { background: rgba(255,107,107,.25); color: var(--down); }
.hp-bell svg { width: 18px; height: 18px; }
.hp-pwr:disabled { cursor: default; }
.hp-tname { margin-top: auto; font-size: 19px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-tstat { font-size: 15px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-tstat .bulb { width: 14px; height: 14px; border-radius: 50%; background: #f3d27a; box-shadow: 0 0 0 2px rgba(243,210,122,.25); flex: none; }
.hp-flowpills { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-flowpills .hp-flow { padding: 12px 20px; border-radius: 999px; }
.hp-charts { column-gap: 14px; }
.hp-charts > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 14px; display: block; }
@media (min-width: 700px) { .hp-charts { columns: 2; } }
@media (min-width: 1200px) { .hp-charts { columns: 3; } }
body.flow.page-homey #homeypage .hp-grid { columns: auto !important; display: block; }
.dt-head { display: flex; align-items: center; gap: 14px; margin-right: 40px; }
.dt-head .hp-tico { width: 48px; height: 48px; }
.dt-list { margin-top: 14px; }
.dt-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.dt-list div span { color: var(--muted); }
#modal .hp-ctl { margin-left: 0; }
#modal .hp-dev { border-top: 0; padding-top: 4px; }
#modal .hp-dev .hp-row { display: none; }
.ed-src { display: grid; gap: 8px; margin-top: 12px; }
.ed-src label { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; font-size: 15px; }
.ed-src label small { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.ed-src input { margin-top: 3px; accent-color: var(--accent); }

/* ===== Energie ===== */
body.flow.page-energy #stage, body.flow.page-energy #tile-restore, body.flow.page-energy #layout-reset { display: none !important; }
#energypage { display: none; }
body.flow.page-energy #energypage { display: block; max-width: 1100px; margin: 0 auto; padding: 14px max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.en-live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.en-lt { background: #15171c; border: 1px solid #2a2d35; border-radius: 18px; padding: 14px; text-align: center; }
.en-lt .ic { font-size: 28px; }
.en-lt .v { font-size: 24px; font-weight: 700; margin-top: 4px; }
.en-lt .l { font-size: 13px; color: var(--muted); margin-top: 2px; }
.en-lt.flow .v { color: var(--muted); }
.en-lt.imp .v { color: #ff9f6b; } .en-lt.exp .v { color: var(--up); } .en-lt.sun .v { color: #f3d27a; }
.en-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.en-seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.en-seg button { border: 0; background: transparent; color: var(--muted); font: 600 14px Inter, sans-serif; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.en-seg button.on { background: var(--text); color: var(--bg); }
.en-nav { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.en-nav span { min-width: 150px; text-align: center; text-transform: capitalize; }
.en-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 20px; cursor: pointer; }
.en-nav button:disabled { opacity: .3; cursor: default; }
.en-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.en-tt { background: #15171c; border: 1px solid #2a2d35; border-radius: 16px; padding: 12px 14px; }
.en-tt .l { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.en-tt .l i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.en-tt .v { font-size: 24px; font-weight: 700; margin-top: 4px; }
.en-tt .v small { font-size: 13px; color: var(--faint); font-weight: 500; margin-left: 3px; }
.en-chartcard { margin-bottom: 14px; }
#en-chart svg, #en-prices svg { width: 100%; display: block; }
.en-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.en-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.en-xl { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 4px; font-family: "JetBrains Mono", monospace; }
.en-pnow { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.en-pnow small { font-size: 13px; color: var(--faint); font-weight: 500; margin-left: 6px; }

/* afstandsbediening (TV) */
.tv-hint { display: none; }
body:not(.flow) .tv-hint { display: inline; margin-left: auto; font-size: 14px; color: var(--faint); align-self: center; }
body:not(.flow) .tab.sound { margin-left: 12px; }
#video .frame { position: relative; }
.tv-osd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(10,13,18,.85); color: var(--text); font: 700 42px Inter, sans-serif; padding: 22px 40px; border-radius: 22px; z-index: 70; pointer-events: none; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: opacity .25s; }
.tv-osd small { display: block; font-size: 18px; font-weight: 500; color: var(--muted); margin-top: 6px; text-align: center; }

body:not(.flow) .tv-focus { outline: 3px solid var(--accent); outline-offset: 2px; background: rgba(106,168,255,.12) !important; border-radius: 10px; }
body:not(.flow) #modal .sheet { width: min(760px, 100%); font-size: 18px; }
body:not(.flow) #modal .m-title { font-size: 28px; }
body:not(.flow) #modal .m-text { font-size: 20px; }
body:not(.flow) #modal .x::after { content: ''; }

.dark-tiles { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }

/* nieuwsartikel in de popup: kleine foto rechts, tekst eromheen */
.nw::after { content: ''; display: block; clear: both; }
.nw-img { float: right; width: 42%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin: 4px 0 12px 18px; background: var(--panel-2); }
.nw-title { margin-right: 0; }
.nw .m-kicker { margin-right: 40px; }
.nw-lead { font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--text); margin-top: 12px; }
.nw-body p { font-size: 16px; line-height: 1.65; color: #cfd6e0; margin-top: 12px; }
.nw-links { clear: both; }
@media (max-width: 600px) {
  .nw-img { float: none; width: 100%; height: 170px; aspect-ratio: auto; margin: 6px 0 12px; }
}
body:not(.flow) #modal .sheet:has(.nw) { width: min(1100px, 92vw); max-height: 88vh; padding: 28px 32px; }
body:not(.flow) .nw-img { width: 38%; }
body:not(.flow) .nw-lead { font-size: 22px; }
body:not(.flow) .nw-body p { font-size: 20px; line-height: 1.6; }

/* kijkers (alleen thuis zichtbaar) */
/* op dezelfde regel als zon op/onder in de kloktegel */
.sunrow { display: flex; align-items: baseline; font-size: 16px; flex-wrap: wrap; column-gap: 0; }
.viewers { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: .9em; cursor: pointer; opacity: .8; }
.viewers::before { content: "·"; margin: 0 2px 0 5px; }
.viewers b { font-weight: 500; }
.viewers[hidden] { display: none; }
.viewers svg.ic { font-size: 1.05em; }
.viewers:hover { opacity: 1; color: var(--text); }
.vw-count { font-size: .7em; padding: 2px 9px; border-radius: 999px; background: rgba(127,163,224,.18); vertical-align: middle; margin-left: 6px; }
.vw-list { list-style: none; margin: 10px 0 14px; padding: 0; }
.vw-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.vw-row.dim { opacity: .55; }
.vw-sub { color: var(--faint); font-weight: 500; }
.vw-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--faint); margin-left: 4px; vertical-align: 1px; }
.vw-tag.me { background: rgba(60,207,142,.16); color: #3ccf8e; }
.vw-meta { font-size: 13px; color: var(--faint); margin-top: 3px; }
body.flow .viewers { font-size: 12px; }

/* NPO Radio 2 visual radio: balken boven en onder wegsnijden (uitsnede volgens NPO) */
#video .frame.npo { overflow: hidden; }
#video .frame.npo iframe { position: absolute; left: 0; top: -42px; width: 100%; height: calc(100% + 114px); }

/* toelichting per uur bij de beleggingsgrafiek */
.w-hours .hb-hit { cursor: pointer; }
.w-hours .hb-hit:hover { fill: rgba(255,255,255,.05); }
.wh-pct { font-size: .7em; vertical-align: middle; margin-left: 8px; }
.wh-lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.wh-ai p { margin: 0 0 6px; line-height: 1.5; }
.wh-mk { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 18px; }
.wh-mk > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.wh-news { list-style: none; margin: 0; padding: 0; }
.wh-news li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); line-height: 1.4; }
.wh-news a { color: inherit; text-decoration: none; }
.wh-news a:hover { text-decoration: underline; }
.wh-t { color: var(--faint); font-variant-numeric: tabular-nums; }
.wh-src { color: var(--faint); font-size: .88em; margin-left: 4px; }

/* uurverwachting onder de klok (vult de ruimte als er geen regen op komst is) */
.wx-later { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rain-dry { font-size: 13px; color: var(--faint); }
.hrs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: center; }
.hr { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.hr-t { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.hr-t::after { content: ':00'; opacity: .6; }
.hr-i { font-size: 22px; line-height: 1; display: inline-flex; }
.hr b { color: var(--text); font-weight: 600; }
.hr-p { font-size: 11px; color: #7fb2ff; min-height: 1em; }
/* TV: de ruimte is daar al vol; daar alleen de neerslaggrafiek zoals voorheen */
body:not(.flow) .hrs, body:not(.flow) .rain-dry { display: none; }
@media (max-width: 599px) {
  body.flow #now .rain-dry { display: none; }
  body.flow #now .wx-later { gap: 4px; }
  body.flow #now .hr { font-size: 11px; gap: 0; }
  body.flow #now .hr-t { font-size: 10px; }
  body.flow #now .hr-i { font-size: 16px; }
  body.flow #now .hr-p { font-size: 9px; }
}

/* beurzen: één rustige regel onder de zonstijden */
.wx-rain { color: #7fb2ff; }
.wx-rain svg.ic { vertical-align: -0.15em; }
.mkts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--faint); letter-spacing: .03em; }
.mk { display: inline-flex; align-items: center; gap: 5px; cursor: default; white-space: nowrap; }
.mk i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
.mk.open { color: var(--muted); }
.mk.open i { background: var(--up); opacity: 1; box-shadow: 0 0 0 2px rgba(60,207,142,.18); }
.mk.pause i { background: #ffb547; opacity: 1; }
.mk em { font-style: normal; color: var(--up); font-variant-numeric: tabular-nums; letter-spacing: 0; opacity: .9; }
body:not(.flow) .mkts { display: none; }
body.flow .mkts { font-size: 12px; letter-spacing: .01em; }

/* de dagverwachting over de volle breedte onder klok en weer: geen leeg vlak meer */
@media (min-width: 600px) {
  body.flow #now:not(.is-compact) .days { grid-column: 1 / -1; grid-row: 2; }
  body.flow #now:not(.is-compact) .clock { align-self: start; }
}

/* ---- uitlijning klok/weer-tegel ---- */
/* klok en weer altijd aan de bovenkant gelijk, ook als er wel of geen regenmelding is */
body.flow #now:not(.is-compact) { align-items: start; }
body.flow #now .wx-top { align-self: start; padding-right: 40px; /* ruimte voor de sluitknop */ }
/* Smalle tegel (telefoon, of tablet staand met twee kolommen): alles onder elkaar, tijd en temperatuur bovenaan.
   Klok en weer worden één raster, zodat elke regel de volle breedte heeft en links precies gelijk loopt. */
@media (max-width: 999px) {
  body.flow #now.panel { display: grid; grid-template-columns: 1fr auto auto; column-gap: 10px; row-gap: 3px; align-items: center;
    grid-template-areas: "time icon temp" "date date date" "sun sun sun" "mkts mkts mkts" "meta meta meta" "days days days"; }
  body.flow #now.panel .clock, body.flow #now.panel .clock > div:first-child, body.flow #now.panel .wx, body.flow #now.panel .wx-top, body.flow #now.panel .wx-now { display: contents; }
  body.flow #now.panel .wmini { display: none; }
  body.flow #now.panel .clock .time { grid-area: time; font-size: 46px; line-height: 1; }
  body.flow #now.panel .clock .date { grid-area: date; margin-top: 4px; font-size: 15px; }
  body.flow #now.panel .sunrow { grid-area: sun; font-size: 13px; }
  body.flow #now.panel .clock .sun { font-size: 13px; margin-top: 0; }
  body.flow #now.panel .wx-icon { grid-area: icon; font-size: 34px; }
  body.flow #now.panel .wx-temp { grid-area: temp; font-size: 38px; margin-right: 40px; /* sluitknop */ }
  body.flow #now.panel .wx-meta { grid-area: meta; flex-basis: auto; font-size: 13px; line-height: 1.45; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  body.flow #now.panel #mkts { grid-area: mkts; margin-top: 4px; font-size: 12px; gap: 3px 12px; }
  body.flow #now.panel .days { grid-area: days; margin-top: 12px; }
  body.flow #now.panel .wx > .empty { grid-column: 1 / -1; }
}
/* lange plaatsnamen mogen afbreken en de weerkolom mag nooit breder worden dan de tegel */
body.flow #now .wx-top, body.flow #now .days, body.flow #now .day, body.flow #now .clock { min-width: 0; }
.place-btn { overflow-wrap: anywhere; text-align: left; }
.d-short { display: none; }
/* Brede tegel (iPad liggend, computer): klok en weer volgen het raster van de dagkaartjes.
   Klok = breedte van kaartje 1+2, weer = kaartje 3+4, dezelfde tussenruimte; de scheidingslijn valt precies
   in de opening tussen kaartje 2 en 3, en het weer begint precies boven kaartje 3. */
@media (min-width: 1000px) {
  body.flow #now.panel:not(.is-compact) { --gap: 20px; padding: 24px 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: 22px; }
  body.flow #now.panel:not(.is-compact) .clock { padding-right: 0; min-width: 0; }
  body.flow #now.panel:not(.is-compact) .clock .date { margin-top: 6px; }
  body.flow #now.panel:not(.is-compact) .sunrow { margin-top: 14px; }
  body.flow #now.panel:not(.is-compact) .clock .sun { margin-top: 0; }
  body.flow #now.panel:not(.is-compact) #mkts { margin-top: 8px; }
  body.flow #now.panel:not(.is-compact) .wx-top { position: relative; border-left: 0; padding-left: 22px; align-self: stretch; align-content: start; row-gap: 6px; }
  body.flow #now.panel:not(.is-compact) .wx-top::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--line); }
  body.flow #now.panel:not(.is-compact) .wx-meta { margin-top: 4px; }
  body.flow #now.panel:not(.is-compact) .days { gap: var(--gap); }
}

/* MeshCore: bericht sturen (alleen in de uitgebreide weergave, niet op de TV) */
.ms-compose { display: flex; align-items: center; gap: 8px; margin: 2px 14px 10px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.ms-compose[hidden], body:not(.flow) .ms-compose, #mesh.is-compact .ms-compose { display: none; }
.ms-compose:focus-within { border-color: color-mix(in srgb, var(--mesh) 55%, var(--line)); }
.ms-compose input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 15px; padding: 8px 0; -webkit-user-select: text; user-select: text; }
.ms-compose input::placeholder { color: var(--faint); }
.ms-count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.ms-count.warn { color: #ffb547; } .ms-count.over { color: var(--down); font-weight: 600; }
.ms-compose button { flex: none; width: 36px; height: 36px; border-radius: 9px; border: 0; display: grid; place-items: center; background: var(--mesh); color: #0a0d12; cursor: pointer; }
.ms-compose button svg.ic { fill: currentColor; font-size: 18px; }
.ms-compose button:disabled { background: rgba(255,255,255,.08); color: var(--faint); cursor: default; }
.ms-compose.busy button { opacity: .6; }
.ms-note { font-size: 12px; color: var(--faint); margin: 0 18px 8px; }
.ms-note[hidden], body:not(.flow) .ms-note, #mesh.is-compact .ms-note { display: none; }
.ms-note a { color: var(--mesh); }

/* ---- Telefoon: klok/weer als twee rustige kolommen, regel voor regel op dezelfde hoogte ----
   links: tijd / datum / beurzen   rechts: icoon + temperatuur / omschrijving + plaats / gevoelstemperatuur (of regen)
   De rechterkolom is zo breed als nodig, de linkerkolom krijgt de rest. De sluitknop staat op de hoogte van de
   temperatuur, zodat de rechterkolom één rechte rand heeft. */
@media (max-width: 599px) {
  body.flow #now.panel { padding: 16px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center;
    grid-template-areas: "time now" "date cond" "mkts feel" "days days"; }
  body.flow #now.panel .wx-now { display: flex; grid-area: now; justify-self: end; align-items: center; gap: 8px; margin-right: 34px; }
  body.flow #now.panel .wx-meta { display: contents; }
  body.flow #now.panel .wx-meta br, body.flow #now.panel .wx-more, body.flow #now.panel .sunrow { display: none; }
  body.flow #now.panel .clock .time { font-size: 44px; }
  body.flow #now.panel .wx-icon { font-size: 28px; }
  body.flow #now.panel .wx-temp { font-size: 34px; line-height: 1; margin: 0; }
  body.flow #now.panel .clock .date { margin-top: 2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.flow #now.panel .wx-cond { grid-area: cond; justify-self: end; text-align: right; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; margin-top: 2px; }
  body.flow #now.panel .wx-cond { display: flex; align-items: baseline; gap: .3em; min-width: 0; }
  body.flow #now.panel .wx-cond .place-btn { overflow-wrap: normal; display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; }
  body.flow #now.panel .pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.flow #now.panel .d-long { display: none; } body.flow #now.panel .d-short { display: inline; }
  body.flow #now.panel .wx-feel, body.flow #now.panel .wx-rain { grid-area: feel; justify-self: end; text-align: right; font-size: 12px; color: var(--faint); white-space: nowrap; }
  body.flow #now.panel .wx-rain { color: #7fb2ff; }
  body.flow #now.panel .wx-meta:has(.wx-rain) .wx-feel { display: none; }
  body.flow #now.panel #mkts { grid-area: mkts; display: grid; grid-template-columns: auto auto; justify-content: start; margin-top: 2px; font-size: 12px; gap: 3px 16px; width: auto; min-width: 0; letter-spacing: 0; align-self: start; }
  body.flow #now.panel .wx-feel, body.flow #now.panel .wx-rain { align-self: start; margin-top: 2px; }
  body.flow #now.panel .days { margin-top: 12px; }
  body.flow #now > .tilectl { top: 25px; right: 16px; }
}

/* beursregel: ring om het bolletje bij een open beurs (vult zich tijdens de handelsdag) */
.mk { gap: 6px; }
.mk i, .mk em { display: none; }
.mk-ic { width: 12px; height: 12px; flex: none; }
.mk-dot { fill: currentColor; opacity: .45; }
.mk.open .mk-dot { fill: var(--up); opacity: 1; }
.mk.pause .mk-dot { fill: #ffb547; opacity: 1; }
.mk-track { fill: none; stroke: rgba(60,207,142,.22); stroke-width: 1.6; }
.mk-prog { fill: none; stroke: var(--up); stroke-width: 1.6; stroke-linecap: round; }

/* 112: zelfde opbouw als nieuws en MeshCore (tijd links, melding rechts) */
#p2000 .p2k { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
#p2000 .p2k > time { font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--faint); padding-top: 1px; }
body.flow #p2000 .p2k { grid-template-columns: 46px minmax(0, 1fr); }
body.flow #p2000 .p2k > time { font-size: 13px; padding-top: 2px; }
.p2k-ic { display: inline-flex; vertical-align: -0.18em; margin-right: 6px; }
.p2k-ic svg.ic { width: 1.05em; height: 1.05em; fill: var(--faint); }
.p2k-ic.lv1 svg.ic { fill: var(--down); }
.p2k-ic.lv2 svg.ic { fill: var(--alarm); }
.p2k.far .p2k-ic { opacity: .7; }
body.flow #p2000.is-compact .p2k .p2k-ic svg.ic { width: 1em; height: 1em; }

/* Radio op de telefoon: logo's krimpen mee als het krap is, zodat de rij nooit breder wordt dan het scherm */
body.flow .rst { min-width: 0; }
body.flow .rst .rlogo, body.flow #radio.is-compact .rst .rlogo { max-width: 100%; height: auto; aspect-ratio: 1; }
/* telefoon/tablet: de pagina kan nooit zijwaarts schuiven */
body.flow { overflow-x: clip; }
/* nieuws: zelfde binnenruimte als 112 en MeshCore, zodat de tijdkolommen precies onder elkaar staan */
#news li { padding-left: 2px; padding-right: 2px; }