/* Live neon tubes sit inside the same smoky glass material as the other blocks. */
.calendar-trigger { background:transparent; box-shadow:none; mix-blend-mode:normal; }
.calendar-trigger::before { content:none; }
.calendar-neon-art {
  position:absolute; inset:5.5%; overflow:hidden; border-radius:7%;
  /* Follow the gentle upward slope of the glass course in the facade. */
  transform:rotate(-1.2deg); transform-origin:50% 50%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect;
}
.calendar-neon-glass,.calendar-neon-display {
  position:absolute; left:-11%; top:-11%; width:122%; height:122%; max-width:none;
  pointer-events:none; user-select:none;
}
.calendar-neon-art{background:radial-gradient(ellipse,#01030755,transparent 76%)}
.calendar-neon-glass { object-fit:fill; opacity:.035; filter:brightness(.6) saturate(0); mix-blend-mode:screen; }
/* Keep every live tube inside the existing wall rim, including WEDNESDAY. */
.calendar-neon-display { left:0; top:0; width:100%; height:100%; overflow:visible; filter:brightness(var(--block-neon-gain,1.35)); opacity:1; transition:opacity .4s ease,filter .45s ease; }
.calendar-trigger:hover .calendar-neon-display,
.calendar-trigger:focus-visible .calendar-neon-display,
.calendar-trigger[aria-expanded="true"] .calendar-neon-display,
.scene[data-active="true"] .calendar-neon-display { opacity:1; }
.calendar-tube-gold { --tube-color:#ff9b24; --tube-core:#ffda8e; }
.calendar-tube-purple { --tube-color:#be61ff; --tube-core:#f4deff; }
.calendar-tube-white { --tube-color:#dce2f0; --tube-core:#fff; }
.calendar-tube-row path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.calendar-tube-shadow { stroke:#171b20; stroke-width:10; }
.calendar-tube-halo { stroke:var(--tube-color); stroke-width:17; opacity:.85; filter:blur(6px); transition:stroke-width .45s ease,filter .45s ease; }
.calendar-trigger:is(:hover,:focus-visible,[aria-expanded="true"]) .calendar-tube-halo { stroke-width:25; filter:blur(18px); }
.calendar-tube-glass { stroke:var(--tube-color); stroke-width:7; opacity:.48; }
.calendar-tube-gas { stroke:var(--tube-color); stroke-width:5.2; }
.calendar-tube-core { stroke:var(--tube-core); stroke-width:2.8; }
.calendar-tube-highlight { stroke:#fff; stroke-width:.65; opacity:.85; }
.calendar-tube-row .calendar-tube-lead { stroke:#858394; stroke-width:1; opacity:.45; }
.calendar-tube-clip { fill:#40374755; stroke:#bab6c766; stroke-width:.65; }
.calendar-tube-screw { fill:#d9d4e4; opacity:.6; }
@media(prefers-reduced-motion:reduce) { .calendar-neon-display { transition:none; } }

/* The artwork stays on the window while the date grid can scroll inside it. */
dialog.calendar-dialog.floating-panel {
  isolation: isolate;
  container-type: inline-size;
  padding: 24px 28px 38px;
  border: 1px solid rgba(192, 229, 249, .4);
  border-radius: 20px;
  color: #edf7ff;
  background: rgba(7, 13, 21, .94);
  box-shadow: 0 24px 90px #000a, 0 0 30px #8fcfff20,
    inset 0 0 0 1px #fff1, inset 0 0 36px #badfff0b;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.calendar-dialog::before,
.calendar-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.calendar-dialog::before {
  z-index: -2;
  background: url('./assets/calendar-autumn-temple.png') center / cover no-repeat;
  opacity: .94;
}

.calendar-dialog[data-artwork-fit="contain"]::before {
  background-size: contain;
}

.calendar-dialog::after {
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(4, 10, 18, .72) 0%,
    rgba(4, 10, 18, .50) 24%,
    rgba(4, 10, 18, .50) 72%,
    rgba(4, 10, 18, .66) 100%);
}

dialog.calendar-dialog.floating-panel[open] {
  animation: none;
  transform: none;
}

.calendar-dialog.floating-panel > .panel-titlebar {
  cursor: default;
  touch-action: auto;
  margin: 0 0 14px;
  padding: 0 2px 13px;
  border-bottom: 1px solid #d5ebff2b;
}

.calendar-dialog .calendar-header h2 {
  color: #fff0d9;
  font-size: clamp(1.35rem, 3.5cqw, 2rem);
  font-weight: 500;
  letter-spacing: .035em;
  text-shadow: 0 2px 5px #000e, 0 0 12px #ffd99b55;
}

.calendar-dialog .calendar-close {
  margin-right: 0;
  color: #edf7ff;
  background: #06111a42;
  border: 1px solid #ceeaff2e;
  box-shadow: inset 0 0 10px #badfff0b;
}

.calendar-dialog .calendar-close:hover {
  background: #abd9ff24;
}

.calendar-dialog.floating-panel > .panel-content {
  scrollbar-color: #b8d9ee70 #020a1226;
  scrollbar-gutter: stable;
}

.calendar-dialog.floating-panel .calendar-table {
  height: 100%;
  min-height: 310px;
  border-spacing: 5px 7px;
}

.calendar-dialog .calendar-table th {
  height: 33px;
  padding: 0 0 10px;
  border-bottom: 0;
  color: #d8efff;
  font-size: clamp(.72rem, 1.9cqw, .84rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px #000, 0 0 6px #78c8ff66;
}

.calendar-dialog .calendar-table td {
  height: 44px;
  border-radius: 12px;
  background: rgba(3, 10, 18, .14);
  box-shadow: inset 0 0 0 1px #d5eaff14;
}

.calendar-dialog .calendar-table td[aria-hidden="true"] {
  background: transparent;
  box-shadow: none;
}

.calendar-dialog .calendar-table time {
  width: clamp(36px, 7cqw, 56px);
  height: clamp(36px, 7cqw, 56px);
  color: #edf7ff;
  font-size: clamp(1.18rem, 3.2cqw, 1.65rem);
  font-weight: 500;
  text-shadow: 0 1px 3px #000, 0 0 7px #8dd7ff99, 0 0 17px #62bbff45;
}

.calendar-dialog .calendar-table time[aria-current="date"] {
  color: #fff;
  border-color: #ceefffeb;
  background: rgba(47, 131, 187, .27);
  box-shadow: 0 0 0 3px #97d9ff15, 0 0 20px #8bd5ff61,
    inset 0 0 14px #a4ddff29;
  text-shadow: 0 1px 3px #06101c, 0 0 7px #dbf4ffb3;
}

.calendar-dialog.floating-panel > .panel-resize {
  right: 2px;
  bottom: 2px;
  width: 38px;
  height: 34px;
  color: #c9eaff;
  border-radius: 6px 6px 17px 6px;
  text-shadow: 0 0 8px #91d7ff66;
}

.calendar-dialog > .panel-resize::before {
  content: "drag to resize";
  position: absolute;
  right: 38px;
  bottom: 11px;
  white-space: nowrap;
  pointer-events: none;
  color: #d6e7f0bd;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
}

.calendar-dialog .calendar-close:focus-visible,
.calendar-dialog.floating-panel > .panel-resize:focus-visible {
  outline: 2px solid #d6f1ff;
  outline-offset: -4px;
  background: #8ed0ff24;
}

@container (max-width: 460px) {
  .calendar-header { gap: 8px; }
  .calendar-dialog .calendar-table { border-spacing: 2px 6px; }
  .calendar-dialog .calendar-table td { border-radius: 8px; }
  .calendar-dialog .calendar-table th { letter-spacing: .04em; }
}

@media (max-width: 560px) {
  dialog.calendar-dialog.floating-panel { padding: 18px 12px 38px; }
}

@media (pointer: coarse) {
  dialog.calendar-dialog.floating-panel { padding-bottom: 46px; }
  .calendar-dialog.floating-panel > .panel-resize { width: 44px; height: 42px; }
  .calendar-dialog > .panel-resize::before { right: 44px; bottom: 15px; }
}