/* Dagstand-show: staafgrafiek per uur (08–17) met schijnwerper, tekstballon en (support) de verwachting als stippellijn. */

.celebration[data-mode="show-rhythm"] { --c1: #0a1428; --c2: #ffb000; --c3: #fde68a; --glow: rgb(255 176 0 / .6); }

.cel-show-rhythm-scene {
  --accent: #ffb000; --accent-glow: rgb(255 176 0 / .7); --accent-soft: rgb(255 176 0 / .12);
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 75%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, #060a14, #0b1222 60%, #04060c);
}
.cel-show-rhythm-scene.is-support { --accent: #4ade80; --accent-glow: rgb(74 222 128 / .7); --accent-soft: rgb(74 222 128 / .1); }

.cel-show-rhythm-head { position: absolute; left: 5vw; top: 3vh; opacity: 0; }
.cel-show-rhythm-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 2vh var(--accent-glow); }
.cel-show-rhythm-title { font-family: var(--font-brand); font-size: 8.5vh; line-height: 1.05; color: #fff; text-shadow: 0 .5vh 0 rgb(0 0 0 / .6), 0 0 4vh var(--accent-glow); white-space: nowrap; }

.cel-show-rhythm-legend { position: absolute; right: 5vw; top: 5.5vh; display: flex; gap: 1.8vh; opacity: 0; }
.cel-show-rhythm-key {
  display: flex; align-items: center; gap: 1.1vh; padding: .9vh 2.2vh; border-radius: 999px;
  background: rgb(15 23 42 / .85); border: .3vh solid rgb(148 163 184 / .35);
  font-size: 2.8vh; font-weight: 700; white-space: nowrap; transition: border-color .3s, box-shadow .3s;
}
.cel-show-rhythm-key.is-lit { border-color: var(--accent); box-shadow: 0 0 3vh var(--accent-glow); }
.cel-show-rhythm-swatch { width: 2.6vh; height: 2.6vh; border-radius: .6vh; }
.cel-show-rhythm-key.is-done .cel-show-rhythm-swatch { background: #ffb000; }
.cel-show-rhythm-key.is-closed .cel-show-rhythm-swatch { background: #22c55e; }
.cel-show-rhythm-key.is-created .cel-show-rhythm-swatch { background: #38bdf8; }
.cel-show-rhythm-key.is-calls .cel-show-rhythm-swatch { background: #4ade80; }
.cel-show-rhythm-key.is-expected .cel-show-rhythm-swatch { height: 0; width: 4.4vh; border-radius: 0; border-top: .5vh dashed #fde047; }
.cel-show-rhythm-key-count { min-width: 3vh; padding: .1vh 1vh; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font-variant-numeric: tabular-nums; text-align: center; }
.cel-show-rhythm-key-count:empty { display: none; }

/* De grafiek */
.cel-show-rhythm-chart { position: absolute; left: 9vw; right: 5vw; top: 38vh; bottom: 11vh; }
.cel-show-rhythm-grid { position: absolute; inset: 0; }
.cel-show-rhythm-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: .2vh dashed rgb(255 255 255 / .16); transform-origin: 0 50%; opacity: 0; }
.cel-show-rhythm-gridline:first-child { border-top: .35vh solid rgb(255 255 255 / .45); }
.cel-show-rhythm-gridlabel { position: absolute; right: 100%; margin-right: 1.6vh; translate: 0 -50%; font-size: 2.6vh; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }

.cel-show-rhythm-cols { position: absolute; inset: 0; display: flex; gap: 1.4vh; }
.cel-show-rhythm-col { position: relative; flex: 1 1 0; transition: opacity .35s, filter .35s; }
.cel-show-rhythm-col.is-dim { opacity: .28; filter: saturate(.5); }
.cel-show-rhythm-col.is-later .cel-show-rhythm-hour { color: #475569; }

.cel-show-rhythm-bar {
  position: absolute; left: 12%; right: 12%; bottom: 0; transform: scaleY(0); transform-origin: 50% 100%;
  display: flex; flex-direction: column-reverse; border-radius: 1vh 1vh 0 0; overflow: hidden;
  box-shadow: 0 0 2.4vh rgb(0 0 0 / .4);
}
.cel-show-rhythm-seg { flex: 1 1 0; min-height: 0; transition: opacity .3s; box-shadow: inset 0 .3vh 0 rgb(255 255 255 / .25); }
.cel-show-rhythm-seg.is-done { background: linear-gradient(90deg, #f59e0b, #ffb000 50%, #fcd34d); }
.cel-show-rhythm-seg.is-closed { background: linear-gradient(90deg, #16a34a, #22c55e 50%, #4ade80); }
.cel-show-rhythm-seg.is-created { background: linear-gradient(90deg, #0284c7, #38bdf8 50%, #7dd3fc); }
.cel-show-rhythm-seg.is-calls { background: linear-gradient(180deg, #86efac, #22c55e 40%, #15803d); }
.cel-show-rhythm-col.is-over .cel-show-rhythm-seg.is-calls { background: linear-gradient(180deg, #fde047, #4ade80 35%, #15803d); }
.cel-show-rhythm-chart[data-only="done"] .cel-show-rhythm-seg:not(.is-done),
.cel-show-rhythm-chart[data-only="closed"] .cel-show-rhythm-seg:not(.is-closed),
.cel-show-rhythm-chart[data-only="created"] .cel-show-rhythm-seg:not(.is-created) { opacity: .14; }

.cel-show-rhythm-col.is-hot .cel-show-rhythm-bar { animation: cel-show-rhythm-hot .9s ease-in-out infinite; }
@keyframes cel-show-rhythm-hot { 50% { box-shadow: 0 0 5vh rgb(255 170 60 / .95), 0 0 1.4vh #fff; } }

.cel-show-rhythm-value {
  position: absolute; left: 0; right: 0; z-index: 2; margin-bottom: 1vh; opacity: 0; text-align: center;
  font-size: 4.4vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  paint-order: stroke fill; -webkit-text-stroke: .7vh #0b1222; text-shadow: 0 .4vh 1vh rgb(0 0 0 / .7);
}
.cel-show-rhythm-col.is-hot .cel-show-rhythm-value { color: #fde68a; }
.cel-show-rhythm-hour { position: absolute; left: 0; right: 0; top: 100%; margin-top: 1.4vh; text-align: center; font-size: 3.2vh; font-weight: 700; color: #cbd5e1; font-variant-numeric: tabular-nums; }

/* Verwachting: lichte spookstaaf plus een gele stippellijn over de toppen. */
.cel-show-rhythm-ghost {
  position: absolute; left: 6%; right: 6%; bottom: 0; opacity: 0; border-radius: 1vh 1vh 0 0;
  background: repeating-linear-gradient(135deg, rgb(253 224 71 / .1) 0 .8vh, transparent .8vh 1.8vh);
}
.cel-show-rhythm-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.cel-show-rhythm-line polyline {
  fill: none; stroke: #fde047; stroke-width: .55vh; stroke-dasharray: 1.6vh 1.1vh; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .8vh rgb(253 224 71 / .8));
}
.cel-show-rhythm-over {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; z-index: 2;
  padding: .3vh 1.4vh; border-radius: 999px; font-size: 2.8vh; font-weight: 700; color: #1c1917;
  background: #fde047; box-shadow: 0 .6vh 1.6vh rgb(0 0 0 / .45), 0 0 2vh rgb(253 224 71 / .6);
}

/* Schijnwerper van boven op één uur */
.cel-show-rhythm-spot {
  position: absolute; left: 0; top: -14vh; bottom: 0; width: 26vh; margin-left: -13vh; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 250 220 / .32), rgb(255 250 220 / .1) 70%, rgb(255 250 220 / .04));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; transition: opacity .35s;
}

/* Tekstballon met een stippellijn naar de staaf */
.cel-show-rhythm-callout {
  position: absolute; top: 18.5vh; left: 50%; opacity: 0; transform: translateX(-50%); z-index: 2;
  padding: 1.1vh 3.2vh 1.3vh; border-radius: 1.8vh; text-align: center; white-space: nowrap;
  background: rgb(10 16 30 / .94); border: .35vh solid var(--accent); box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .6), 0 0 3vh var(--accent-glow);
}
.cel-show-rhythm-callout-kicker { font-size: 2.5vh; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cel-show-rhythm-callout-time { font-size: 5.4vh; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cel-show-rhythm-callout-sub { font-size: 2.9vh; font-weight: 600; color: #e2e8f0; }
.cel-show-rhythm-callout.is-hot { border-color: #ff7800; box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .6), 0 0 4vh rgb(255 120 0 / .8); }
.cel-show-rhythm-callout.is-hot .cel-show-rhythm-callout-kicker { color: #fdba74; }
.cel-show-rhythm-callout.is-quiet { border-color: #93c5fd; box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .6), 0 0 3vh rgb(147 197 253 / .6); }
.cel-show-rhythm-callout.is-quiet .cel-show-rhythm-callout-kicker { color: #bfdbfe; }
.cel-show-rhythm-callout.is-over { border-color: #fde047; box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .6), 0 0 3vh rgb(253 224 71 / .6); }
.cel-show-rhythm-callout.is-over .cel-show-rhythm-callout-kicker { color: #fde047; }
.cel-show-rhythm-callout.is-scan { border-color: rgb(255 255 255 / .45); box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .6); }
.cel-show-rhythm-callout.is-scan .cel-show-rhythm-callout-kicker { color: #94a3b8; }

.cel-show-rhythm-pin { position: absolute; width: 0; margin-left: -.2vh; border-left: .4vh dashed var(--accent); opacity: 0; z-index: 1; transition: opacity .25s; }
.cel-show-rhythm-pin.is-on { opacity: .85; }
.cel-show-rhythm-pin.is-hot { border-color: #ff7800; }
.cel-show-rhythm-pin.is-quiet { border-color: #93c5fd; }
.cel-show-rhythm-pin.is-over { border-color: #fde047; }
.cel-show-rhythm-pin.is-scan { border-color: rgb(255 255 255 / .5); }