/* -------------------------------------------
 * Kaayko Konditions — blended hourly heatmap (khm-*)
 * The one true heatmap. Shared by forecast pages, the spot modal
 * on /paddlingout, and /paddlingout/methodology.
 * Markup is produced by js/components/KonditionsHeatmap.js.
 * ------------------------------------------- */
#heatmapContainer { min-height: unset; }

.khm-wrap { display:flex; flex-direction:column; gap:1.4rem; }

/* Header */
.khm-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; flex-wrap:wrap;
}
.khm-eyebrow {
  display:block; margin-bottom:0.3rem;
  font-family:var(--font-sans); font-size:0.64rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
}
.khm-title {
  margin:0; font-family:var(--font-sans);
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--fg); line-height:1.05;
}
.khm-legend {
  display:flex; gap:0.7rem; flex-wrap:wrap;
  font-family:var(--font-sans); font-size:0.65rem;
  letter-spacing:0.08em; text-transform:uppercase; color:rgba(237,232,223,0.56);
}
.khm-legend span { display:inline-flex; align-items:center; gap:0.35rem; }
.khm-dot {
  display: inline-block !important;
  width: 0.52rem; height: 0.52rem;
  border-radius: 50%; flex-shrink: 0;
  font-style: normal; /* <i> reset */
}

/* Day container */
.khm-day { display:flex; flex-direction:column; gap:0.3rem; }

/* Day label row — contains the name, date, and floating "Best" tag */
.khm-day-label {
  position:relative;
  display:flex; align-items:baseline; gap:0.55rem;
  padding-bottom:0.2rem;
}
.khm-day-label strong {
  font-family:var(--font-sans); font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(237,232,223,0.92);
}
.khm-day-label > span {
  font-family:var(--font-sans); font-size:0.62rem;
  letter-spacing:0.1em; color:rgba(237,232,223,0.40);
}

/* "★ Best" — positioned relative to the bar-shell, not the label row */
.khm-best-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;         /* push to far right of the label flex row */
  font-family: var(--font-sans); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  pointer-events: none;
}

/* Bar shell: holds the bar + tick axis */
.khm-bar-shell { display:flex; flex-direction:column; gap:3px; }

/* The gradient bar itself */
.khm-bar {
  position:relative;
  height:90px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 10px 36px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.16);
  cursor:crosshair;
  /* Reveal left→right on load */
  animation: khmReveal 0.9s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes khmReveal {
  from { clip-path: inset(0 100% 0 0 round 10px); opacity:0.6; }
  to   { clip-path: inset(0 0% 0 0 round 10px);   opacity:1;   }
}
/* stagger per day */
.khm-day:nth-child(2) .khm-bar { animation-delay: 0.05s; }
.khm-day:nth-child(3) .khm-bar { animation-delay: 0.12s; }
.khm-day:nth-child(4) .khm-bar { animation-delay: 0.19s; }

/* Gloss overlay: top rim brighter, bottom slightly darker */
.khm-gloss {
  position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 30%,
    transparent 55%,
    rgba(0,0,0,0.22) 100%);
}
/* Shimmer sweep on load */
.khm-gloss::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  animation: khmShimmer 1.1s 0.5s ease-out forwards;
  opacity:0;
}
@keyframes khmShimmer {
  0%   { transform:translateX(-120%); opacity:1; }
  100% { transform:translateX(120%);  opacity:0; }
}

/* "NOW" dashed marker */
.khm-now {
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  border-left:1px dashed rgba(255,255,255,0.55);
  z-index:5; pointer-events:none;
}
.khm-now span {
  position:absolute; top:6px; left:4px;
  font-family:var(--font-sans); font-size:0.48rem;
  letter-spacing:0.1em; color:rgba(255,255,255,0.6);
}

/* Best window gold line */
.khm-best-line {
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  width:2px;
  background:linear-gradient(180deg, var(--gold-bright) 0%, transparent 100%);
  z-index:5; pointer-events:none;
  box-shadow:0 0 8px rgba(217,189,123,0.6);
}

/* Sliding cursor — snaps to tapped hour */
.khm-cursor {
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-50%);
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 1px rgba(255,255,255,0.25), 0 0 18px rgba(255,255,255,0.55);
  z-index:10; pointer-events:none;
  opacity:0;
  transition:left 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;
}
.khm-cursor.visible { opacity:1; }

/* Invisible hit zones, one per hour */
.khm-hit {
  position:absolute; top:0; bottom:0;
  /* Reset ALL browser button defaults — critical for Safari */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  z-index: 6;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.khm-hit:hover:not([disabled]) { background:rgba(255,255,255,0.07); }
.khm-hit.is-active             { background:rgba(255,255,255,0.11); }
.khm-hit[disabled]             { cursor:default; pointer-events:none; }

/* Tick labels below bar */
.khm-ticks {
  position:relative; height:1.1rem;
}
.khm-tick {
  position:absolute;
  transform:translateX(-50%);
  font-family:var(--font-sans); font-size:0.6rem;
  letter-spacing:0.06em; color:rgba(237,232,223,0.44);
  white-space:nowrap;
}
.khm-tick--first { transform:none; }
.khm-tick--last  { transform:translateX(-100%); }

/* Detail panel */
.khm-panel { animation: khmPanelIn 0.2s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes khmPanelIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.khm-panel-inner {
  background:rgba(18,12,6,0.97);
  border:1px solid rgba(217,189,123,0.22);
  border-top:2px solid var(--pc, var(--gold));
  border-radius:0 0 10px 10px;
  padding:0.9rem 1.1rem 1rem;
  box-shadow:0 16px 48px rgba(0,0,0,0.44);
}

.khm-panel-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:0.75rem; margin-bottom:0.75rem;
  border-bottom:1px solid rgba(217,189,123,0.12);
}
.khm-panel-left { display:flex; flex-direction:column; gap:0.15rem; }

.khm-panel-time {
  font-family:var(--font-sans); font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(237,232,223,0.55);
}
.khm-panel-verdict {
  font-family:var(--font-sans); font-size:0.82rem;
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
}
.khm-panel-score {
  font-family:var(--font-sans); font-size:2rem;
  font-weight:700; line-height:1;
}
.khm-panel-score sub {
  font-size:0.7rem; vertical-align:middle;
  color:rgba(237,232,223,0.45); margin-left:2px;
}

/* Macro grid */
.khm-macros {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(128px,1fr));
  gap:0.6rem 0.7rem;
}
.khm-macro { display:flex; align-items:center; gap:0.5rem; }
.khm-macro-icon { font-size:1.05rem; flex-shrink:0; }
.khm-macro-body { display:flex; flex-direction:column; gap:0.04rem; }
.khm-macro-label {
  font-family:var(--font-sans); font-size:0.57rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.khm-macro-value {
  font-family:var(--font-serif); font-size:0.98rem; color:var(--fg); line-height:1.1;
}

@media (max-width:820px) {
  .khm-head { display:grid; }
  .khm-legend { justify-content:flex-start; }
  .khm-bar  { height:78px; }
  .khm-macros { grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
}
@media (max-width:480px) {
  .khm-bar { height:68px; }
  .khm-panel-score { font-size:1.6rem; }
}