/* ==========================================================================
   app-calendar.css — the month grid.

   One idea does most of the work: every cell carries an ink wash whose alpha
   is the hours booked that day. Read a month and you read a workload. The
   ribbon above the grid runs the same wash across two years at one week per
   column, where the two summers show up as the only gaps.
   ========================================================================== */

/* the kind palette — six greys and one rust, because the rust is the point */
[data-kind="class"]    { --k: var(--ink); }
[data-kind="advising"] { --k: #555555; }
[data-kind="group"]    { --k: #8e8e8e; }
[data-kind="service"]  { --k: #0d2f8f; }
[data-kind="backlog"]  { --k: #8f3a26; }
[data-kind="exam"]     { --k: #2c6e6b; }
[data-kind="life"]     { --k: #ffffff; }

/* ------------------------------------------------------------------ shelf */
.cal-month { font-size: 13px; letter-spacing: .01em; margin-left: 6px; white-space: nowrap; }
.btn.cal-nav { padding: 4px 9px; font-size: 13px; line-height: 1; }

.cal-filters { display: flex; flex-wrap: wrap; gap: 3px; }
.btn.cal-k {
  padding: 3px 6px 3px 5px; font-size: 10px; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn.cal-k::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  background: var(--k); border: 1px solid var(--lo);
}
.btn.cal-k.mute { color: var(--lo); opacity: .6; }
.btn.cal-k.mute::before { background: transparent; }

/* ----------------------------------------------------------------- ribbon */
.cal-ribbon {
  flex: 0 0 auto; height: 28px;
  display: flex; align-items: flex-end; gap: 1px;
  padding: 4px 7px 0;
  background: var(--gray);
}
.cal-wk {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; align-items: flex-end;
  cursor: pointer;
}
.cal-wk b { display: block; width: 100%; background: var(--lo); min-height: 0; }
.cal-wk.on { background: rgba(0,0,0,.10); }
.cal-wk.on b { background: var(--ink); }
.cal-wk:hover b { background: var(--ink); }

.cal-axis {
  flex: 0 0 auto; height: 13px;
  display: flex; gap: 1px;
  padding: 0 7px;
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.cal-ax { flex: 1 1 0; min-width: 0; position: relative; }
.cal-ax span {
  position: absolute; left: 0; top: 0;
  font-size: 9px; line-height: 11px; color: var(--lo);
  letter-spacing: .04em; white-space: nowrap;
  border-left: 1px solid var(--lo); padding-left: 2px;
}

/* ------------------------------------------------------------------- body */
.cal-wrap { display: flex; flex: 1 1 auto; min-height: 0; background: var(--gray); }

.cal-gridwrap {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  overflow: auto; direction: rtl;             /* NeXT put the bar on the left */
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.cal-gridwrap > * { direction: ltr; }
.cal-gridwrap::-webkit-scrollbar { width: 13px; }
.cal-gridwrap::-webkit-scrollbar-track { background: var(--gray-lt); }
.cal-gridwrap::-webkit-scrollbar-thumb {
  background: var(--gray);
  border: 1px solid var(--lo); border-top-color: var(--hi); border-left-color: var(--hi);
}

.cal-head {
  flex: 0 0 auto;
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.cal-hd {
  padding: 3px 5px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--lo);
  border-left: 1px solid var(--gray-dk);
}
.cal-hd:first-child { border-left: 0; }
.cal-hd.we { color: #6f6960; }

.cal-grid {
  flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--gray-dk);
  gap: 1px; padding: 0 0 1px;
}

/* --------------------------------------------------------------- the cell */
.cal-cell {
  position: relative; overflow: hidden;
  min-width: 0;
  background: var(--paper);
  padding: 2px 3px 3px;
  cursor: default; user-select: none;
  outline-offset: -2px;
}
.cal-cell.we  { background: #e9e6e0; }
.cal-cell.out { background: var(--gray-lt); }
.cal-cell.out .cal-num { opacity: .45; }
.cal-cell.out .cal-chips { opacity: .42; }

/* the density wash: ink, low alpha, set inline from hours booked */
.cal-ink { position: absolute; inset: 0; background: var(--ink); pointer-events: none; z-index: 0; }

.cal-num {
  position: relative; z-index: 1;
  font-size: 11px; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--lo); padding: 1px 2px 2px;
}
.cal-cell.we .cal-num { color: #7b7369; }
.cal-cell.today .cal-num {
  background: var(--ink); color: var(--paper);
  padding: 1px 4px 2px; display: inline-block;
}
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-cell:hover { box-shadow: inset 0 0 0 1px var(--lo); }
.cal-cell.sel:hover { box-shadow: inset 0 0 0 2px var(--ink); }

.cal-chips { position: relative; z-index: 1; display: block; }
.cal-chip {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: 1px; padding: 0 2px 0 3px;
  font-size: 10px; line-height: 13px;
  background: rgba(255,255,255,.72);
  border-left: 3px solid var(--k);
  white-space: nowrap; overflow: hidden;
}
.cal-chip[data-kind="life"] { border-left-color: #ffffff; box-shadow: inset 3px 0 0 -1px var(--lo); }
.cal-ct { flex: 0 0 auto; font-family: var(--mono); font-size: 9px; color: var(--lo); }
.cal-cn { overflow: hidden; text-overflow: ellipsis; }
.cal-more {
  font-size: 9.5px; line-height: 12px; color: var(--lo);
  padding-left: 6px; letter-spacing: .02em;
}

/* ------------------------------------------------------------- day detail */
.inspector.cal-day {
  flex: 0 0 282px; min-width: 0;
  border-left: 1px solid var(--lo);
  box-shadow: inset 1px 0 0 var(--hi);
}
.cal-day .pad { padding: 10px 12px 18px; }
.cal-none { color: var(--lo); font-style: italic; }

.cal-ev {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 4px 0 5px;
  border-top: 1px solid rgba(0,0,0,.14);
}
.cal-ev:first-of-type { border-top: 0; }
.cal-when {
  flex: 0 0 34px; font-family: var(--mono); font-size: 10.5px;
  line-height: 15px; color: var(--lo); font-variant-numeric: tabular-nums;
}
.cal-tick { flex: 0 0 3px; align-self: stretch; background: var(--k); }
.cal-ev[data-kind="life"] .cal-tick { background: var(--paper); box-shadow: inset 0 0 0 1px var(--lo); }
.cal-meat { min-width: 0; flex: 1 1 auto; }
.cal-title { font-size: 12px; line-height: 1.3; word-break: break-word; }
.cal-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--lo); margin-top: 1px;
}
.cal-sub > span + span::before { content: "· "; }
.cal-where { display: inline-flex; align-items: center; gap: 3px; }
.cal-where::before { content: "· "; }
.cal-gl { display: inline-flex; line-height: 0; }
/* an overlap is not an error, it is the week */
.cal-ev.clash .cal-when::after { content: "|"; margin-left: 3px; color: var(--rust, #8f3a26); }

/* ----------------------------------------------------------- month digest */
.cal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 1px 0; cursor: default;
}
.cal-bar.mute { opacity: .45; }
.cal-bk { flex: 0 0 58px; font-size: 10.5px; color: var(--lo); }
.cal-bb {
  flex: 1 1 auto; height: 8px; min-width: 0;
  background: var(--gray-lt);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}
.cal-bb i { display: block; height: 100%; background: var(--k); }
.cal-bb i[data-kind="life"] { box-shadow: inset 0 0 0 1px var(--lo); }
.cal-bn {
  flex: 0 0 30px; text-align: right;
  font-family: var(--mono); font-size: 10.5px; color: var(--lo);
  font-variant-numeric: tabular-nums;
}
.cal-link { color: #0d2f8f; text-decoration: none; border-bottom: 1px dotted currentColor; }

/* ------------------------------------------------------------ small glass */
@media (max-width: 860px), (max-height: 520px) {
  .cal-wrap { flex-direction: column; }
  .inspector.cal-day {
    flex: 0 0 auto; max-height: 46%;
    border-left: 0; border-top: 1px solid var(--lo);
    box-shadow: inset 0 1px 0 var(--hi);
  }
  .cal-gridwrap { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .cal-ribbon { height: 20px; }
  .cal-chip .cal-ct { display: none; }
  .cal-chip:nth-of-type(n+3) { display: none; }
  .cal-filters .btn.cal-k { padding: 3px 4px; }
  .btn.cal-k::before { width: 6px; height: 6px; flex-basis: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-wk, .cal-cell, .cal-chip { transition: none !important; }
}