/* ──────────────────────────────────────────────────────────────────────────
   tools.yushki — Calendar.

   theme.css already owns the skeleton (.cal-grid / .cal-cell / .cal-chip /
   .agenda-*). This file loads after it and adds what the month grid was
   missing rather than restyling what works: a day number and a "+N more"
   that are real controls, a look for the two chip variants that had markup
   and no CSS (team scope and borrowed task due dates), the day sheet, the
   drag-to-move affordances, and the "your time" badge that a Minsk +
   California team needs on anything with a clock time.

   The colour rule, so it stays a rule:
     the LEFT BAR says WHAT it is  — tan = reminder, teal = event,
                                     grey = a due date borrowed from Tasks
     the WASH says WHO it is for   — tinted = shared with the whole team
   Nothing here introduces a colour that isn't already a token.
   ────────────────────────────────────────────────────────────────────── */

/* ── the grid's rows exist for role="row" only ──
   The month is a real role=grid so the arrow-key navigation in calendar.js is
   the pattern a screen reader already knows, and so a gridcell may legally
   hold the day-number and "+N more" buttons. display:contents keeps the cells
   as direct items of the seven-column grid, so the layout is unchanged. */
.cal-row { display: contents; }

/* ── month grid: the day number is a control ──
   It opens the day. Previously the only way to see a busy day's fourth item
   was to change view; the number and the "+N more" line both go there now. */
.cal-date { display: flex; align-items: center; gap: 6px; }
.cal-daynum {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 20px; padding: 0 6px; border: 0; border-radius: 100px;
  background: none; font: inherit; font-weight: 600;
  color: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-daynum:hover { background: var(--bg-hover); color: var(--text-bright); }
.cal-cell.today .cal-daynum { background: var(--accent); color: var(--accent-ink); }
.cal-cell.today .cal-daynum:hover { background: var(--accent-2); color: var(--accent-ink); }

.cal-more {
  display: block; width: 100%; margin-top: 3px; padding: 1px 5px;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: var(--fs-micro); line-height: 1.35;
  color: var(--text-faint); text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-more:hover { background: var(--bg-hover); color: var(--text-bright); }

/* ── chip variants ──
   A shared standup (.team) and a private note must not look alike. Task due
   dates (.is-task) deliberately recede: the calendar is a reminder tool first,
   and a board full of due dates would drown the two things that ring. */
.cal-chip.team { background: var(--teal-glow); }
.cal-chip.is-task { color: var(--text-dim); background: var(--bg-surface); }
.cal-gl { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--text-faint); }
.cal-chip .cal-rep { opacity: .5; font-size: var(--fs-micro); margin-right: 1px; }

/* ── drag to move ──
   Mouse and pen only (see calendar.js): on a touch screen the same gesture is
   how you scroll the month. */
.cal-chip.movable { cursor: grab; }
.cal-chip.dragging { opacity: .35; }
.cal-cell.drop { border-color: var(--accent); background: var(--accent-glow); }
.cal-ghost {
  position: fixed; z-index: 300; pointer-events: none;
  max-width: 220px; padding: 3px 8px; border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text); font-size: 11px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

/* ── badges shared by the agenda, the day sheet and the editor ──
   Same shape as theme.css's .ai-team / .ai-recur, which they sit beside.
   .ai-tz gets the accent on purpose: on a two-timezone team it is the one
   piece of information that stops someone missing a meeting entirely. */
.ai-tz, .ai-owner {
  flex: 0 0 auto; font-size: var(--fs-micro); padding: 1px 6px; border-radius: 5px;
  background: var(--bg-elevated); color: var(--text-faint); white-space: nowrap;
}
.ai-tz { color: var(--accent); background: var(--accent-glow); }
.agenda-item.team { background: var(--teal-glow); }
.agenda-item.is-task .ai-title { color: var(--text-dim); }
.agenda-item { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.agenda-item:hover { border-color: var(--border-light); }
.agenda-date .ad-rel { display: block; font-size: var(--fs-micro); color: var(--accent); margin-top: 2px; }
.agenda-note { padding: 14px 0 0; font-size: var(--fs-tiny); color: var(--text-faint); }

/* ── the day sheet ── a day's whole contents, reachable from the number,
   from "+N more", from Enter on a focused cell, and from a tap on a phone
   (where a chip is a 9px dot and cannot be a tap target). */
.day-list { display: flex; flex-direction: column; gap: 6px; }
.day-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px; cursor: pointer; font: inherit; color: var(--text);
  transition: background var(--dur-fast) var(--ease);
}
.day-item:hover { background: var(--bg-hover); }
.day-item.team { background: var(--teal-glow); }
.day-item.team:hover { background: var(--bg-hover); }
.day-item.done .day-title { text-decoration: line-through; color: var(--text-faint); }
.day-time {
  flex: 0 0 44px; padding-top: 1px; font-family: var(--font-mono);
  font-size: var(--fs-tiny); color: var(--text-dim);
}
.day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.day-title { font-size: var(--fs-small); line-height: 1.4; overflow-wrap: anywhere; }
.day-sub { font-size: var(--fs-tiny); color: var(--text-faint); line-height: 1.4; overflow-wrap: anywhere; }
.day-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }

/* ── editor: the lines that explain a time instead of leaving it ambiguous ── */
.cal-hint { margin-top: 7px; font-size: var(--fs-tiny); color: var(--text-dim); line-height: 1.5; }
.cal-hint b { color: var(--accent); font-weight: 600; }
.cal-hint.warn { color: var(--warning); }
.cal-retry { margin-top: 14px; }

/* Touch: a day sheet row is the primary way into an event on a phone, so it
   has to clear the 44px target the rest of the app holds itself to. On a touch
   laptop the month cells are still full size, so the day number gets a real
   target too — the phone block below takes that back. */
@media (hover: none) {
  .day-item { min-height: 46px; align-items: center; }
  .cal-daynum { min-width: 30px; height: 26px; }
}

/* ── phone ──
   theme.css collapses a chip to a 9px dot below 720px and paints it with a
   single-class rule; the variants above are two classes, so they would win
   here whether we wanted them to or not. At 9px a wash is not a signal, so
   the dot goes back to saying kind and nothing else, and the ↻ — which would
   otherwise render at 9px inside a 9px dot — is hidden with the rest of the
   chip's text. Last block in the file: it has to outrank (hover:none) above,
   because a 30px day number inside a 46x54 cell eats half the day. The cell
   is the tap target on a phone (46 x 54), not the number. */
@media (max-width: 720px) {
  .cal-cell .cal-more { flex: 0 0 100%; text-align: center; padding: 0; }
  .cal-date { justify-content: center; }
  .cal-daynum { min-width: 0; height: 20px; padding: 0 4px; }
  .cal-chip .cal-rep { display: none; }
  .cal-chip.team { background: var(--accent); }
  .cal-chip.event.team { background: var(--teal); }
  .cal-chip.is-task { background: var(--text-dim); }
  .agenda-date { width: 74px; }
  .agenda-date .ad-num { font-size: 20px; }
}

/* ── the header: where you are, then how you look at it ── */
.cal-head .cal-top{margin-bottom:0}
.cal-modes{display:flex;align-items:center;gap:8px}
@media (max-width: 760px) {
  .cal-head{gap:10px}
  .cal-head .cal-top{flex:1 1 100%;flex-wrap:nowrap}
  .cal-modes{flex:1 1 100%}
  .cal-modes .seg{flex:1;order:1}
  .cal-modes .seg button{flex:1;text-align:center}
  .cal-modes #tasktoggle{order:2;width:40px;justify-content:center;padding:0}
  .cal-modes #tasktoggle .tt-lbl{display:none}
}