/* Hachi without a theme: native white, label text and systemBlue. */
.wd-calendar {
  --wd-primary: #007aff;
  --wd-paper: #ffffff;
  --wd-line: #d1d1d6;
  --wd-weekend: #effaf1;
  position: relative;
  min-width: 0;
  color: #000000;
  color-scheme: light;
  background: var(--wd-paper);
  border: 1px solid #d1d1d6;
  border-radius: 9px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans', 'Segoe UI', sans-serif;
  box-shadow: 0 4px 14px #0000000a, 0 20px 42px -20px #00000026;
  line-height: 1.25;
  overflow: clip;
}
.wd-calendar button { font-family: inherit; cursor: pointer; }
.wd-calendar button:focus-visible { outline: 2px solid #0659b4; outline-offset: 2px; }
.wd-heading { min-height: 48px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; color: #000; background: #fff; border-bottom: .5px solid var(--wd-line); }
.wd-nav-chevron { display: grid; place-items: center; min-width: 32px; height: 34px; padding: 0 5px; color: inherit; font-size: 26px; user-select: none; }
.wd-auto-cursor { position: absolute; z-index: 8; width: 22px; height: 28px; pointer-events: none; filter: drop-shadow(0 2px 2px #0003); }
.wd-auto-cursor svg { width: 100%; height: 100%; }
.wd-range { flex: 1; min-width: 0; font-size: clamp(12px, 1.1vw, 16px); font-weight: 600; text-align: center; white-space: nowrap; }
.wd-days { display: flex; min-height: 47px; border-bottom: 1px solid var(--wd-line); background: var(--wd-paper); }
.wd-zone { flex: 0 0 39px; align-self: center; text-align: center; color: #8e8e93; font-size: 9px; }
.wd-dates { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wd-date { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-left: 1px solid var(--wd-line); padding: 4px 0; }
.wd-date small { font-size: 10px; font-weight: 400; }
.wd-date b { display: grid; place-items: center; width: 23px; height: 23px; font-size: 15px; font-weight: 500; }
.wd-day-info { display: flex; align-items: center; justify-content: center; gap: 1px; }
.wd-day-info .native-weather { font-size: 14px; }
.wd-sunday { color: #d43d35; background: var(--wd-weekend); }
.wd-saturday { color: #1974bd; background: var(--wd-weekend); }
.wd-current b { outline: 1px solid #e9443f; outline-offset: -1px; }
.wd-scroller { height: 310px; overflow: auto; scrollbar-width: thin; scrollbar-color: #c7c7cc transparent; overscroll-behavior: contain; }
.wd-timeline { display: flex; position: relative; min-height: 480px; }
.wd-hours { flex: 0 0 39px; position: relative; }
.wd-hours span { position: absolute; right: 4px; transform: translateY(-50%); color: #8e8e93; font-size: 9px; font-variant-numeric: tabular-nums; }
.wd-hours span:first-child { transform: none; padding-top: 3px; }
.wd-grid { position: relative; flex: 1; min-width: 0; isolation: isolate; border-left: 1px solid var(--wd-line); background-image: repeating-linear-gradient(to bottom, var(--wd-line) 0 1px, transparent 1px 48px), repeating-linear-gradient(to right, transparent 0 calc(100% / 7 - 1px), var(--wd-line) calc(100% / 7 - 1px) calc(100% / 7)), linear-gradient(to right, transparent 0 calc(500% / 7), var(--wd-weekend) calc(500% / 7)); }
.wd-event { position: absolute; z-index: 2; display: block; margin: 0; padding: 3px 3px 12px; border: 0; border-radius: 1px; background: var(--wd-event-color, #298cd2); color: white; text-align: left; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; font: inherit; line-height: 1.2; cursor: grab; }
.wd-event b { display: block; font-size: clamp(9px, .78vw, 12px); font-weight: 500; overflow-wrap: anywhere; }
.wd-event small { display: block; margin-bottom: 3px; font-size: 9px; font-variant-numeric: tabular-nums; }
.wd-event:hover { filter: brightness(1.05); }
.wd-resize { position: absolute; bottom: 0; left: 0; right: 0; display: grid; place-items: end center; height: 14px; padding-bottom: 3px; cursor: ns-resize; touch-action: none; }
.wd-resize::after { content: ''; width: 17px; height: 2px; border-radius: 1px; background: #ffffffb3; }
.wd-lifted, .wd-auto-source { opacity: .25; }
.wd-event.wd-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .95; transform: scale(1.04); box-shadow: 0 5px 14px #14211440; cursor: grabbing; }
.wd-auto-ghost { z-index: 5; pointer-events: none; }
.wd-auto-ghost::after { content: ''; position: absolute; width: 17px; height: 17px; right: 3px; bottom: 14px; border: 2px solid white; border-radius: 50%; background: #ffffff55; box-shadow: 0 1px 5px #0003; }
.wd-drop { position: absolute; z-index: 1; padding: 2px 1px; overflow: hidden; border: 1px dashed var(--wd-primary); color: #007aff; background: #007aff1a; font-size: 8px; line-height: 1.15; pointer-events: none; font-variant-numeric: tabular-nums; }
.wd-drop[hidden] { display: none; }
.wd-hint { min-height: 38px; display: flex; align-items: center; padding: 7px 10px; border-top: 1px solid var(--wd-line); color: #8e8e93; background: var(--wd-paper); font-size: 10px; }
.wd-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wd-menu { position: absolute; z-index: 12; width: 170px; max-width: calc(100% - 16px); padding: 6px; color: #000000; background: #fffffff5; border: 1px solid #d1d1d6; border-radius: 10px; box-shadow: 0 6px 28px #17290f40; backdrop-filter: blur(15px); }
.wd-menu::before { content: ''; position: absolute; top: -5px; left: calc(50% - 5px); width: 9px; height: 9px; background: #fff; border-left: 1px solid #d1d1d6; border-top: 1px solid #d1d1d6; transform: rotate(45deg); }
.wd-menu p { padding: 6px 7px; color: #8e8e93; font-size: 11px; }
.wd-menu button { width: 100%; min-height: 35px; padding: 7px; border: 0; border-radius: 5px; color: var(--wd-primary); background: transparent; font-size: 13px; text-align: left; }
.wd-menu button:hover { background: #e5f1ff; }
.wd-menu button:last-child { border-top: 1px solid #e5e5ea; color: #8e8e93; }
.wd-edge-prev .wd-prev, .wd-edge-next .wd-next { background: #ffffff42; }
.wd-dragging, .wd-dragging .wd-event { cursor: grabbing; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .wd-scroller { height: min(clamp(240px, 68vw, 285px), max(120px, calc(100svh - 230px))); }
}
@media (max-width: 600px) {
  .wd-range { font-size: 12px; }
  .wd-event { padding: 3px 2px 12px; }
  .wd-event b { font-size: 9px; }
  .wd-zone, .wd-hours { flex-basis: 33px; }
  .wd-hours span { font-size: 8px; right: 3px; }
  .wd-hint { font-size: 10px; }
}
@media (max-width: 420px) {
  .wd-day-info { gap: 0; }
  .wd-date b { width: 18px; height: 21px; font-size: 13px; }
  .wd-day-info .native-weather { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .wd-calendar *, .wd-ghost { animation: none !important; transition: none !important; } }