/* The expanded row: everything you get after tapping a resort. */

.panel {
  width: 100%;
  max-width: 480px;
  margin: 4px auto 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
}

/* The resort card, drawn with more room below than the shared panel. */
.panel--resort {
  padding: 16px 14px 18px;
}

/* The alert builder's snowfall figure still reads these four. */
.panel__headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.panel__number {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.panel__unit {
  margin-left: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.panel__window {
  color: var(--accent-bright);
  font-size: 11.5px;
}

.panel__section {
  margin-top: 16px;
}

.panel__section--ruled {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.panel__label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.panel__read {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.5;
}

.panel__footnote {
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 9.5px;
  line-height: 1.5;
}

/* Headline --------------------------------------------------------------- */

.headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.headline__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.headline__label {
  color: var(--ink-soft);
  font-size: 13px;
}

.headline__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.headline__unit {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: normal;
}

.headline__dash {
  color: var(--faint);
}

.grade--headline {
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border-width: 1.5px;
  border-radius: 8px;
  font-size: 18px;
}

/* Hourly ----------------------------------------------------------------- */

.snow-chart {
  margin-top: 20px;
}

.snow-chart__header {
  display: flex;
  justify-content: space-between;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10.5px;
}

.snow-chart__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.snow-chart__key,
.snow-chart__key-item {
  display: flex;
  align-items: center;
}

.snow-chart__key {
  gap: 10px;
}

.snow-chart__key-item {
  gap: 4px;
}

.snow-chart__swatch {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* The bracket row and the bars share one grid, past the y-axis gutter. */
.snow-chart__columns {
  display: grid;
  grid-template-columns: repeat(22, minmax(0, 1fr));
  gap: 2px;
}

.snow-chart__bracket-row {
  margin: 0 0 8px 18px;
}

.snow-chart__bracket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.snow-chart__total {
  color: var(--accent-bright);
  font-size: 10px;
  font-weight: 700;
}

.snow-chart__brace {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 6px;
  border: 1.5px solid var(--accent-bright);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.snow-chart__plot {
  position: relative;
  height: 104px;
}

.snow-chart__gridline {
  position: absolute;
  left: 18px;
  right: 0;
  border-top: 1px dashed var(--line);
}

.snow-chart__gridline--zero {
  bottom: 0;
  border-top-style: solid;
}

.snow-chart__gridline--mid {
  bottom: 50%;
}

.snow-chart__gridline--ceiling {
  bottom: 100%;
}

.snow-chart__tick {
  position: absolute;
  left: -18px;
  width: 14px;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1;
  text-align: right;
  transform: translateY(-50%);
}

.snow-chart__bars {
  position: absolute;
  inset: 0 0 0 18px;
  align-items: end;
}

.snow-chart__bar {
  display: flex;
  align-items: flex-end;
  border-radius: 2px;
}

.snow-chart__min {
  display: block;
  width: 100%;
  border-radius: 2px;
}

/* 18:00 → 08:00, the hours the headline counts. */
.snow-chart__swatch--max,
.snow-chart__bar {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.snow-chart__swatch--min,
.snow-chart__min {
  background: var(--bar);
}

/* 09:00 on, after first chair. */
.snow-chart__bar--after {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.snow-chart__bar--after .snow-chart__min {
  background: var(--muted);
}

.snow-chart__bar--boundary {
  box-shadow: -2px 0 0 var(--accent-bright);
}

.snow-chart__bar--missing {
  height: 7px;
  border-top: 1px dashed var(--faint);
  border-radius: 0;
  background: transparent;
}

/* Three-hour blocks ------------------------------------------------------ */

/* Under the plot, past the y-axis gutter. */
.blocks {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 12px 0 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* A button so a block can be tapped, reset to the drawn column. The whole
   column is the tap target. */
.block {
  display: flex;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: center;
}

.block__hour {
  color: var(--muted);
  font-size: 10px;
}

/* The accent means selected, never heavy snow. */
.block[aria-pressed="true"] .block__hour {
  color: var(--accent-bright);
  font-weight: 700;
}

.block__icon {
  display: block;
  width: 22px;
  height: 22px;
}

/* Cloud and snow stroke in currentColor. Sun, moon and rain repaint their own. */
.sky-icon {
  display: block;
  color: var(--ink-soft);
}

.sky-icon__sun {
  stroke: var(--grade-b);
}

.sky-icon__rain {
  stroke: var(--bar);
}

/* Heavy snow is the one icon drawn whole in the accent. */
.sky-icon--heavy-snow {
  color: var(--accent-bright);
}

.block__total {
  font-size: 13px;
  font-weight: 700;
}

/* 09:00 on, after first chair. */
.block--after .block__total {
  color: var(--muted);
}

.block__unit {
  margin-left: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
}

/* The selected block's conditions ---------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
  text-align: center;
}

.stats[hidden] {
  display: none;
}

.stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.stat__value {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.stat__unit {
  margin-left: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.stat__label {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

/* Reserved when empty, so a block with no read doesn't shift the row. */
.stat__sub {
  margin: 0;
  min-height: 1.4em;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.4;
}

.stat__sub--cloud {
  color: var(--grade-b);
  font-weight: 600;
}

/* Snow history & outlook ------------------------------------------------ */

.ledger {
  margin-top: 22px;
}

.ledger__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
}

.ledger__title {
  margin: 0;
  color: var(--ink);
  font-size: .78125rem;
  font-weight: 600;
}

.ledger__span {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}

/* The scrollbar stays visible so the strip reads as scrollable. Its thumb is
   painted because a styled WebKit scrollbar otherwise draws none. */
.strip-scroll {
  overflow-x: auto;
  margin: 0 -14px;
  padding: 4px 14px 6px;
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.strip-scroll::-webkit-scrollbar {
  height: 4px;
}

.strip-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--muted);
}

/* Rem columns and content-sized rows, so enlarged text widens the strip
   rather than clipping its figures. */
.strip {
  display: grid;
  grid-auto-columns: 2.5rem;
  grid-auto-flow: column;
  gap: 4px;
  width: max-content;
}

.day {
  display: grid;
  grid-template-rows: max-content 62px max-content max-content;
  justify-items: center;
  gap: 2px;
  scroll-snap-align: center;
}

.day__value {
  align-self: end;
  color: var(--ink-soft);
  font-size: .75rem;
  line-height: 1.5;
  white-space: nowrap;
}

.day__chart {
  display: flex;
  width: 100%;
  height: 62px;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.day__bar {
  width: 64%;
  border-radius: 2px;
  background: var(--bar);
}

/* A trace must remain distinguishable from a real zero at the shared scale. */
.day__bar--positive {
  min-height: 2px;
}

.day__bar--model {
  width: 34%;
}

.day--global .day__bar {
  border: 1px solid var(--accent-bright);
  border-bottom-width: 2px;
  background: transparent;
}

.day--past .day__bar {
  border: 0;
  background: var(--muted);
}

.day--past .day__value {
  color: var(--muted);
}

/* The smaller figure keeps the full value row height, so its bar lines up. */
.day--model-only .day__value {
  font-size: .6875rem;
  line-height: 1.125rem;
}

.day--today {
  position: relative;
}

.day--today::before {
  position: absolute;
  z-index: 0;
  inset: -3px -1px;
  border: 1px solid var(--muted);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.day--today .day__bar {
  background: var(--accent-bright);
}

.day--today .day__value,
.day--today .day__date,
.day--today .day__weekday {
  color: var(--accent-bright);
  font-weight: 700;
}

.day__date,
.day__weekday {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}

.strip-totals {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .75rem;
}

/* --bar isn't a system colour, so forced colours would erase the fill. */
@media (forced-colors: active) {
  .day__bar {
    background: CanvasText;
  }
}

/* Webcam and website ----------------------------------------------------- */

/* Doubled to outrank .resort__links in resort.css, which loads later. The
   anchors' 44px targets already carry the footer's vertical space. */
.resort__links.resort__links--panel {
  margin: 0 0 -8px;
  padding-top: 6px;
}

/* Locked ----------------------------------------------------------------- */

/* The alerts' Plus offers use these. The panel locks nothing. */

.lock {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  border-radius: 10px;
}

.lock__ghost {
  opacity: 0.45;
  filter: blur(3px) saturate(0.55);
  pointer-events: none;
}

.lock__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.locked__line {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.plus__title {
  margin: 20px 0 6px;
  font-size: 22px;
}

.plus__terms,
.plus__status {
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 360px) {
  .panel {
    padding-right: 12px;
    padding-left: 12px;
  }
}

.plus__status {
  color: var(--muted);
  font-size: 11.5px;
}