/* Shared phone-first day calendar — X/Trip/Sleep/PowerShare
   Locks (Andy 2026-09-06 DC5):
   · Header L→R: Earliest · ‹ · spelled date · › · Today
   · Tap date → year chips −10 −1 YYYY +1 +10 Done (pendingYear; grid frozen)
   · ‹ › always change month
   · Fixed 6-week height · 3-letter weekdays · heatmap scores
   · no bottom selected-date footer · no help blurbs inside calendar
*/
.dc {
  --dc-bg: #10161e;
  --dc-line: #243040;
  --dc-text: #eef1f6;
  --dc-muted: #9aa6b8;
  --dc-dim: #6a7588;
  --dc-cyan: #5ee7ff;
  --dc-tap: 52px;
  --dc-grid-h: calc(6 * var(--dc-tap) + 5 * 3px);
  border: 1px solid var(--dc-line);
  border-radius: 12px;
  background: var(--dc-bg);
  padding: .55rem .55rem .55rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-sizing: border-box;
}
.dc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .28rem;
  margin: 0 0 .4rem;
  min-height: 36px;
  max-height: 40px;
  flex-wrap: nowrap;
}
.dc-nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--dc-line);
  background: #0c1218;
  color: var(--dc-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  padding: 0;
  position: relative;
  z-index: 2;
}
.dc-nav:hover { border-color: #3a5060; filter: brightness(1.08); }
.dc-nav:active { transform: scale(.96); }

.dc-head > .dc-earliest-btn,
.dc-head > .dc-today-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--dc-line);
  background: #0c1218;
  color: var(--dc-cyan);
  font: 650 .64rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 .38rem;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.dc-head > .dc-earliest-btn:hover,
.dc-head > .dc-today-btn:hover { border-color: #3a5060; filter: brightness(1.08); }
.dc-head > .dc-earliest-btn[hidden],
.dc-head > .dc-today-btn[hidden] { display: none !important; }
.dc-head > .dc-earliest-btn:disabled,
.dc-head > .dc-earliest-btn.dc-noop {
  opacity: .4;
  cursor: default;
  filter: none;
}
.dc-head > .dc-earliest-btn.on,
.dc-head > .dc-today-btn.on {
  border-color: rgba(94, 231, 255, .4);
  background: rgba(94, 231, 255, .08);
}

/* ONE spelled date — tappable for year chips */
button.dc-sel,
.dc-sel {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dc-text);
  font: 650 .78rem/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  padding: 0 .2rem;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dc-sel[hidden] { display: none !important; }
.dc-sel:hover,
.dc-sel.open {
  border-color: rgba(94, 231, 255, .35);
  color: var(--dc-cyan);
  background: rgba(94, 231, 255, .08);
}
.dc-sel:focus {
  outline: none;
  border-color: var(--dc-cyan);
  color: var(--dc-cyan);
}
.dc-sel-long { display: inline; overflow: hidden; text-overflow: ellipsis; }
.dc-sel-short { display: none; }
@media (min-width: 420px) {
  .dc-sel { font-size: .88rem; }
}
@media (min-width: 520px) {
  .dc-sel { font-size: .95rem; }
}

/* Year adjust chips — replace date line; YYYY visible in middle */
.dc-ychips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  height: 32px;
}
.dc-ychips[hidden] { display: none !important; }
.dc-ychip {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--dc-line);
  background: #0c1218;
  color: var(--dc-text);
  font: 700 .72rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 0 .42rem;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.dc-ychip:hover { border-color: #3a5060; color: var(--dc-cyan); filter: brightness(1.08); }
.dc-ychip:active { transform: scale(.96); }
.dc-ycur {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: center;
  color: var(--dc-cyan);
  font: 750 .82rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  padding: 0 .12rem;
}
.dc-ychip-done {
  color: var(--dc-cyan);
  border-color: rgba(94, 231, 255, .4);
  background: rgba(94, 231, 255, .08);
  font-weight: 750;
  margin-left: .12rem;
}

/* Legacy month/year title buttons — gone */
.dc-title { display: none !important; }
.dc-month,
.dc-year { display: none !important; }

/* Kill legacy expand/collapse + spinner + footer + decade/month grids */
.dc-pickers,
.dc-foot,
.dc-spin,
.dc-ypick { display: none !important; }

.dc-wd {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 0 0 .25rem;
}
.dc-wd span {
  text-align: center;
  font: 650 .72rem/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em;
  color: var(--dc-dim);
  padding: .2rem 0 .15rem;
  white-space: nowrap;
}
.dc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, var(--dc-tap));
  gap: 3px;
  height: var(--dc-grid-h);
  min-height: var(--dc-grid-h);
  max-height: var(--dc-grid-h);
}
.dc-day {
  position: relative;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dc-text);
  min-height: var(--dc-tap);
  height: var(--dc-tap);
  border-radius: 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  padding: .22rem .2rem .28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .08rem;
  box-sizing: border-box;
  overflow: hidden;
}
.dc-day .dc-num {
  display: block;
  align-self: flex-start;
  font: 650 .7rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: inherit;
  padding-left: .08rem;
}
.dc-day .dc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: .05rem;
  border-radius: 999px;
  font: 750 .68rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.dc-day:hover:not(:disabled) {
  border-color: #3a5060;
  background: #0c1218;
}
.dc-day:disabled {
  color: var(--dc-dim);
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
}
.dc-day.no-link:disabled {
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.35);
}
.dc-day.out {
  color: var(--dc-dim);
  opacity: .45;
}
.dc-day.out .dc-score { opacity: .75; filter: saturate(.85); }
.dc-day.today {
  border-color: rgba(94, 231, 255, .45);
}
.dc-day.sel {
  border-color: var(--dc-cyan);
  color: var(--dc-cyan);
  background: rgba(94, 231, 255, .1);
}
.dc-day.sel .dc-num { color: var(--dc-cyan); }
.dc-day .dc-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dc-cyan);
  opacity: .85;
}
.dc-day.sel .dc-dot { background: var(--dc-cyan); }

@media (min-width: 420px) {
  .dc { --dc-tap: 56px; }
  .dc-wd span { font-size: .78rem; }
  .dc-day .dc-num { font-size: .76rem; }
  .dc-day .dc-score { font-size: .74rem; }
  .dc-nav { width: 36px; height: 36px; }
  .dc-head > .dc-earliest-btn,
  .dc-head > .dc-today-btn { height: 30px; font-size: .68rem; padding: 0 .45rem; }
  .dc-sel { height: 36px; font-size: .88rem; }
  .dc-ychips { height: 36px; }
  .dc-ychip { height: 30px; font-size: .76rem; padding: 0 .5rem; }
  .dc-ycur { font-size: .9rem; min-width: 2.8em; }
  .dc-head { min-height: 40px; max-height: 44px; }
}
@media (max-width: 380px) {
  .dc { --dc-tap: 48px; }
  .dc-wd span { font-size: .68rem; }
  .dc-day { padding: .16rem .12rem .2rem; }
  .dc-day .dc-num { font-size: .64rem; }
  .dc-day .dc-score { font-size: .6rem; }
  .dc-head > .dc-earliest-btn,
  .dc-head > .dc-today-btn { padding: 0 .28rem; font-size: .58rem; height: 26px; }
  .dc-sel { font-size: .68rem; height: 28px; }
  .dc-nav { width: 28px; height: 28px; font-size: .95rem; }
  .dc-ychip { font-size: .64rem; padding: 0 .3rem; height: 26px; }
  .dc-ycur { font-size: .72rem; min-width: 2.4em; }
  .dc-ychips { gap: .18rem; height: 28px; }
}