/* ════════════════════════════════════════════════════════════════════════
   MONTH CALENDAR — Claude Design "Calendar" (20.10.2026). Sizes, weights and
   timings are the design's own; colours are the design-system tokens, so the
   light and dark themes come for free. Built by js/screens/calendar.js.

     phone (<560)  a sheet from the bottom over a dimmed page, 48px days
     wider         a 360px panel under the date row, 44px days, a pointer on
                   the calendar button; a click anywhere outside closes it
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --cal-shadow: 0 18px 50px rgba(12, 22, 48, .22);
  --cal-scrim:  rgba(10, 12, 18, .45);
  --cal-ring:   rgba(12, 22, 48, .25);
}
html[data-theme="dark"] {
  --cal-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --cal-scrim:  rgba(0, 0, 0, .55);
  --cal-ring:   rgba(255, 255, 255, .45);
}

.cal-overlay[hidden] { display: none; }
/* Invisible on the wider layout: it only catches the click that closes. */
.cal-scrim { position: fixed; inset: 0; z-index: 349; background: transparent; }
.cal-overlay.is-sheet .cal-scrim { background: var(--cal-scrim); animation: calFade .22s ease-out; }

.cal-pop {
  position: absolute;
  z-index: 350;
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 14px 16px 12px;
  background: var(--ds-card);
  color: var(--ds-ink);
  border: 1.5px solid var(--ds-ink);
  box-shadow: var(--cal-shadow);
  font-family: var(--ds-font);
  animation: calPop .18s ease-out;
}
.cal-pointer {
  position: absolute;
  top: -8.5px;
  left: 15px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  background: var(--ds-card);
  border-top: 1.5px solid var(--ds-ink);
  border-left: 1.5px solid var(--ds-ink);
  transform: rotate(45deg);
}
.cal-sheet-top { display: none; }

/* Phone: the sheet. */
.cal-overlay.is-sheet .cal-pop {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  padding: 0 16px calc(30px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .28);
  animation: calSheet .3s cubic-bezier(.2, .8, .2, 1);
}
.cal-overlay.is-sheet .cal-pointer { display: none; }
.cal-overlay.is-sheet .cal-sheet-top { display: block; position: relative; height: 44px; margin-bottom: 2px; }
.cal-handle {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 999px;
  background: var(--ds-line);
}
.cal-x {
  position: absolute;
  top: 4px;
  inset-inline-end: -8px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  cursor: pointer;
}

/* ── Head: the month (or the year) and the arrows ── */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  margin-inline-start: -8px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  cursor: pointer;
}
.cal-title-t { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.cal-month { font: 900 20px/1.2 var(--ds-font); }
.cal-year {
  font: 700 20px/1.2 var(--ds-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink2);
}
.cal-year-big { font: 800 24px/1.1 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.cal-caret { flex: none; color: var(--ds-ink2); transition: transform .2s; }
.cal-title[aria-expanded="true"] .cal-caret { transform: rotate(180deg); }
.cal-grow { flex: 1; }
.cal-navs { display: flex; }
.cal-nav {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--ds-ink);
  background: transparent;
  color: var(--ds-ink);
  cursor: pointer;
}
.cal-nav + .cal-nav { border-inline-start-width: 0; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-title:hover,
.cal-nav:hover:not(:disabled),
.cal-x:hover { background: var(--ds-soft); }

/* ── Body: always the same height, so nothing jumps between months ── */
.cal-body { position: relative; height: 302px; }
.cal-overlay.is-sheet .cal-body { height: 326px; }
.cal-wd {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  height: 28px;
  align-items: center;
}
.cal-wd span { text-align: center; font: 700 13px/1 var(--ds-font); color: var(--ds-ink2); }
.cal-grid { display: flex; flex-direction: column; gap: 2px; touch-action: pan-y; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-blank { display: block; height: 44px; }
.cal-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s;
}
.cal-overlay.is-sheet .cal-d,
.cal-overlay.is-sheet .cal-blank { height: 48px; }
.cal-d:hover:not(.is-sel):not(:disabled) { background: var(--ds-soft); }
.cal-d:disabled { opacity: .35; cursor: default; }
.cal-d:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.cal-n {
  font: 700 20px/1 var(--ds-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
}
.cal-d.has-games .cal-n { font-weight: 800; }
.cal-d.no-games .cal-n { font-weight: 600; color: var(--ds-ink2); }
.cal-marks { display: flex; align-items: center; justify-content: center; gap: 2px; height: 14px; }
.cal-dot { display: block; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ds-ink); }
.cal-shim {
  display: block;
  flex: none;
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: var(--ds-line);
  animation: calShim 1.1s ease-in-out infinite;
}
.cal-pop .cal-crest { flex: none; box-shadow: inset 0 0 0 1px var(--cal-ring), 0 0 0 1.5px var(--ds-card); }
/* Today: a frame. The chosen day: filled. */
.cal-d.is-today { box-shadow: inset 0 0 0 1.5px var(--ds-ink); }
.cal-d.is-sel { background: var(--ds-ink); box-shadow: none; }
.cal-d.is-sel .cal-n { color: var(--ds-card); }
.cal-d.is-sel .cal-dot { background: var(--ds-card); }

/* ── The twelve months ── */
.cal-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px;
  height: 100%;
}
.cal-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  cursor: pointer;
  transition: background-color .12s;
}
.cal-m:hover:not(.is-sel):not(:disabled) { background: var(--ds-soft); }
.cal-m:disabled { opacity: .35; cursor: default; }
.cal-m:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.cal-m.is-sel { background: var(--ds-ink); color: var(--ds-card); }
.cal-mname { font: 800 15px/1.2 var(--ds-font); }
.cal-mcount { display: flex; align-items: center; gap: 5px; font: 600 12px/1.2 var(--ds-font); color: var(--ds-ink2); }
.cal-m.is-sel .cal-mcount { color: var(--ds-card); }
.cal-mcount .cal-dot { background: currentColor; }

/* ── Foot: the legend (or loading / error) and "today" ── */
.cal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 44px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-line);
  font: 600 13px/1.35 var(--ds-font);
  color: var(--ds-ink2);
}
.cal-leg { display: flex; align-items: center; gap: 7px; }
.cal-leg-crests { display: flex; gap: 2px; }
.cal-status { display: flex; align-items: center; gap: 8px; }
.cal-error { color: var(--ds-ink); }
.cal-retry {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: 800 14px var(--ds-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cal-today {
  flex: none;
  margin-inline-start: auto;
  min-height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--ds-ink);
  background: transparent;
  color: var(--ds-ink);
  font: 800 14px var(--ds-font);
  cursor: pointer;
}
.cal-today:hover:not([aria-disabled="true"]) { background: var(--ds-soft); }
.cal-today[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ── Motion ── */
.cal-slide-l .cal-grid { animation: calFromL .18s ease-out; }
.cal-slide-r .cal-grid { animation: calFromR .18s ease-out; }
.cal-zoom .cal-months { animation: calZoom .18s ease-out; }
@keyframes calPop   { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes calSheet { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes calFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes calFromL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes calFromR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes calZoom  { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes calShim  { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cal-pop, .cal-scrim, .cal-grid, .cal-months, .cal-shim, .cal-caret { animation: none !important; transition: none !important; }
}