/* plan90.css — the kanban's 90-day calendar face. */

.plan90 { padding: 24px 56px 72px; }

/* ---------- Trays (Inbox / To place) ---------- */
.plan90-trays {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}
.plan90-tray {
  border: 1px dashed var(--rule-strong);
  padding: 14px 18px;
  background: var(--paper);
  transition: background 120ms ease, border-color 120ms ease;
}
.plan90-tray.drag-over {
  background: var(--paper-2);
  border-color: var(--ink);
}
.plan90-tray-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.plan90-tray-hint { font-size: 12px; }
.plan90-tray-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Chips ---------- */
.plan90-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  padding: 5px 9px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  cursor: grab;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.plan90-chip:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08);
}
.plan90-chip:active { cursor: grabbing; }
.plan90-chip.overdue { border-left-color: var(--red) !important; }
.plan90-chip-title {
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plan90-chip-flag { color: var(--red); }
.plan90-chip-hours {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}
.plan90-day-hours {
  margin-left: auto;
  font-size: 10px;
  color: var(--mid);
}
.plan90-chip-client,
.plan90-chip-due {
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan90-chip.overdue .plan90-chip-due { color: var(--red); }

/* ---------- Weekday header row ---------- */
.plan90-dayheads {
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}
.plan90-dayheads .kicker { text-align: left; }

/* ---------- Month heading ---------- */
.plan90-month {
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  margin: 28px 0 10px;
}
.plan90-month:first-of-type { margin-top: 18px; }

/* ---------- Week rows ---------- */
.plan90-week {
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.plan90-weekgutter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}
.plan90-weekstat { font-size: 10px; color: var(--mid); }

/* ---------- Day cells ---------- */
.plan90-day {
  min-height: 84px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
.plan90-day.is-past { background: var(--paper); opacity: 0.6; }
.plan90-day.is-today {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.plan90-day.drag-over {
  background: var(--paper-2);
  border-color: var(--ink);
}
/* ⌥-drag: adding an extra day rather than moving — dashed + a plus mark. */
.plan90-day.drag-add {
  border-style: dashed;
  box-shadow: inset 0 0 0 1px var(--ink);
  position: relative;
}
.plan90-day.drag-add .plan90-day-num::before {
  content: '+ ';
  font-weight: 700;
  color: var(--ink);
}
.plan90-day-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan90-day.is-today .plan90-day-num { color: var(--ink); font-weight: 600; }
.plan90-today-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--red);
  display: inline-block;
}
.plan90-day-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plan90-chip-time {
  font-size: 10px;
  color: var(--mid);
}
/* Busy/life blocks from the week view — display-only, hatched like their
   week-grid counterparts. */
.plan90-busy {
  background: repeating-linear-gradient(
    -45deg,
    var(--paper-2), var(--paper-2) 5px,
    var(--paper) 5px, var(--paper) 10px
  );
  border: 1px dashed var(--rule-strong);
  padding: 4px 8px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.3;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan90-busy.is-ooo {
  border-style: solid;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
.plan90-day .plan90-chip { width: 100%; }

/* ---------- Mobile: weeks become stacked day rows ---------- */
@media (max-width: 720px) {
  .plan90 { padding: 16px 16px 72px; }
  .plan90-week {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .plan90-weekgutter {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding-top: 0;
  }
  .plan90-day { min-height: 0; }
  .plan90-month { font-size: 21px; }
}

/* ---------- Done cards: visible record, visually settled ---------- */
.plan90-chip.is-done {
  opacity: 0.55;
  background: var(--paper);
}
.plan90-chip.is-done .plan90-chip-title { text-decoration: line-through; color: var(--mid); }
.plan90-chip-tick { color: var(--ink); font-weight: 700; text-decoration: none; display: inline-block; }
.plan90-weekstat-done { color: var(--ink); }