/* ==========================================================================
   calendar.css — the month grid and the day-ordered agenda
   --------------------------------------------------------------------------
   Loaded only on /calendar/. Every colour is a token defined in tokens.css,
   so dark mode comes free and nothing here needs a second definition.

   The four mark kinds reuse the STATUS colours rather than inventing a fifth
   palette: 開始 borrows 受付中 green, 締切 borrows 結果待ち amber, 結果 borrows
   予定 teal, 購入 borrows the brand blue. A reader who has learned the board's
   colours has already learned this page.
   ========================================================================== */

.tcg-calnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tcg-space-sm);
  margin-bottom: var(--tcg-space-md);
}

.tcg-calnav__current {
  font-size: var(--tcg-fs-lg);
  font-variant-numeric: tabular-nums;
}

.tcg-calnav__today {
  margin: calc(var(--tcg-space-sm) * -1) 0 var(--tcg-space-md);
  font-size: var(--tcg-fs-sm);
}

.tcg-calfilter {
  margin-bottom: var(--tcg-space-md);
  padding: var(--tcg-space-sm) var(--tcg-space-md);
  border: 1px solid var(--tcg-color-border);
  border-radius: var(--tcg-radius-md);
  background: var(--tcg-color-surface);
  font-size: var(--tcg-fs-sm);
}

.tcg-calfilter label {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-xs);
  /* 44px tap target without 44px of visual weight — same rule as 通報. */
  min-height: 44px;
  cursor: pointer;
}

.tcg-calfilter__note {
  margin: 0 0 var(--tcg-space-2xs);
  color: var(--tcg-color-text-muted);
  font-size: var(--tcg-fs-2xs);
}

/* --- the grid -------------------------------------------------------------

   Scrolls inside its own container rather than making the page scroll
   sideways. Seven columns have a floor below which they stop being legible,
   and that floor is wider than a 320px phone. */
.tcg-calwrap {
  overflow-x: auto;
  margin-bottom: var(--tcg-space-2xl);
  -webkit-overflow-scrolling: touch;
}

.tcg-cal {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* The month is already the <h1>. Kept for screen readers, which announce a
   table by its caption when tabbing into one. */
.tcg-cal__caption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tcg-cal__head {
  padding: var(--tcg-space-2xs);
  border-bottom: 2px solid var(--tcg-color-border);
  font-size: var(--tcg-fs-xs);
  font-weight: 700;
  color: var(--tcg-color-text-muted);
}

/* Sunday red, Saturday blue — the convention every Japanese calendar uses,
   and how a reader finds the weekend without reading the header row. */
.tcg-cal__head.is-sunday,
.tcg-cal__cell.is-sunday .tcg-cal__date { color: #c0392b; }
.tcg-cal__head.is-saturday,
.tcg-cal__cell.is-saturday .tcg-cal__date { color: var(--tcg-color-brand); }

.tcg-cal__cell {
  vertical-align: top;
  width: calc(100% / 7);
  height: 96px;
  padding: var(--tcg-space-3xs);
  border: 1px solid var(--tcg-color-border);
  background: var(--tcg-color-surface);
}

/* Leading and trailing cells are real days, not blanks — an entry closing on
   the 1st of next month has to be findable from this month. Dimmed, never
   hidden. */
.tcg-cal__cell.is-outside {
  background: var(--tcg-color-surface-2);
  opacity: 0.72;
}

.tcg-cal__cell.is-today {
  outline: 2px solid var(--tcg-color-brand);
  outline-offset: -2px;
}

.tcg-cal__date {
  display: block;
  margin-bottom: var(--tcg-space-3xs);
  font-size: var(--tcg-fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tcg-color-text-muted);
}

.tcg-cal__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tcg-cal__mark a {
  display: block;
  padding: 1px var(--tcg-space-3xs);
  border-radius: var(--tcg-radius-sm);
  border-left: 3px solid currentColor;
  font-size: var(--tcg-fs-2xs);
  line-height: var(--tcg-lh-tight);
  text-decoration: none;
  /* One line per mark. A cell is ~70px wide; two lines of a product name
     would push the row height past a phone screen for one busy day. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcg-cal__mark a:hover { text-decoration: underline; }

.tcg-cal__kind { font-weight: 700; }
.tcg-cal__title { color: var(--tcg-color-text); }

.tcg-cal__mark--open     a { color: var(--tcg-color-open-fg);     background: var(--tcg-color-open-bg); }
.tcg-cal__mark--close    a { color: var(--tcg-color-waiting-fg);  background: var(--tcg-color-waiting-bg); }
.tcg-cal__mark--result   a { color: var(--tcg-color-upcoming-fg); background: var(--tcg-color-upcoming-bg); }
.tcg-cal__mark--purchase a { color: var(--tcg-color-brand);       background: var(--tcg-color-brand-soft); }

/* --- the agenda -----------------------------------------------------------

   The view most readers will actually use. Seven columns give each day about
   40px on a phone, which is a coloured dot and nothing else — so the grid
   answers 「今月はどんな月か」 and this answers 「次に何をすればいいか」. */

.tcg-agenda__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tcg-agenda__day + .tcg-agenda__day { margin-top: var(--tcg-space-lg); }

.tcg-agenda__date {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-xs);
  margin-bottom: var(--tcg-space-xs);
  padding-bottom: var(--tcg-space-3xs);
  border-bottom: 1px solid var(--tcg-color-border);
  font-size: var(--tcg-fs-base);
}

.tcg-agenda__day.is-today .tcg-agenda__date { border-bottom-color: var(--tcg-color-brand); }

.tcg-agenda__today {
  padding: 1px var(--tcg-space-2xs);
  border-radius: var(--tcg-radius-pill);
  background: var(--tcg-color-brand);
  color: var(--tcg-color-brand-contrast);
  font-size: var(--tcg-fs-2xs);
}

.tcg-agenda__empty {
  padding: var(--tcg-space-lg);
  border: 1px dashed var(--tcg-color-border);
  border-radius: var(--tcg-radius-md);
  color: var(--tcg-color-text-muted);
  text-align: center;
}

.tcg-cal__kind--open     { color: var(--tcg-color-open-fg); }
.tcg-cal__kind--close    { color: var(--tcg-color-waiting-fg); }
.tcg-cal__kind--result   { color: var(--tcg-color-upcoming-fg); }
.tcg-cal__kind--purchase { color: var(--tcg-color-brand); }

.tcg-agenda .tcg-minirow .tcg-cal__kind {
  flex: none;
  font-size: var(--tcg-fs-xs);
  font-weight: 700;
}

/* Hidden by the 「自分の分だけ」 filter. display:none rather than visibility,
   because unlike the comment gate there is no height to preserve here — the
   whole point is that the page gets shorter. */
[data-tcg-entry].is-filtered,
[data-tcg-agenda-day].is-filtered { display: none; }