:root {
  --pad: 8px;
  --text: #f5f6f8;
  --muted: rgba(245,246,248,0.65);
  --muted-2: rgba(245,246,248,0.5);
  --bar-w: 3px;

  --cal-head-color: #f5f6f8;
  --cal-event-color: #f5f6f8;
  --cal-panel-color: #ffffff;
  --cal-panel-alpha: 0.06;
  --cal-panel-border-alpha: 0.12;
  --cal-panel-alpha-pct: 6%;
  --cal-panel-border-alpha-pct: 12%;
  --cal-next-color: #ffffff;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
    var(--now-tint);
  background-blend-mode: overlay;
  color: var(--text);
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Header — EXACT match to Weather location */
.cal-header {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px 2px;
}

.cal-today,
.cal-date {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cal-head-color);
  opacity: 1;
}

section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px 8px;
  background: color-mix(in srgb, var(--cal-panel-color) var(--cal-panel-alpha-pct), transparent);
  border: 1px solid color-mix(in srgb, var(--cal-panel-color) var(--cal-panel-border-alpha-pct), transparent);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

section > header {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cal-head-color);
  opacity: 0.65;
  margin-top: -2px;
}

.row {
  display: grid;
  grid-template-columns: var(--bar-w) 1fr auto;
  gap: 8px;
  align-items: center;
}

.bar {
  width: var(--bar-w);
  height: 16px;
  border-radius: 2px;
}

/* Subtle color wash per row */
.cal-row {
  background: var(--cal-tint, transparent);
  border-radius: 10px;
}

/* Active row: stronger tint + a soft inner edge */
.cal-row.is-active {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Keep layout tight */
.row.cal-row {
  padding: 5px 8px;
}

.title {
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cal-event-color);
}

.time {
  font-size: 12px;
  color: var(--cal-event-color);
  white-space: nowrap;
}

.more {
  font-size: 11px;
  color: var(--cal-head-color);
  opacity: 0.65;
  margin-left: calc(var(--bar-w) + 8px);
}

/* Next-up line with relative ETA */
.cal-now-line {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 4px 6px;
  padding-bottom: 2px;
  font-size: 11px;
  color: var(--muted);
}

.cal-now-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--cal-next-color) 35%, transparent),
    transparent
  );
}

.cal-next-label {
  letter-spacing: 0.02em;
  color: var(--cal-next-color);
  opacity: 1;
}

.cal-next-eta {
  color: var(--cal-next-color);
  opacity: 1;
  white-space: nowrap;
}

/* Empty */
.cal-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--cal-next-color);
  opacity: 0.65;
}
