/* social.css — Social calendar / runway */

.social-view { background: var(--paper); min-height: 100%; }
.social-body { padding: 28px 56px 56px; }

.social-channel-filter { padding: 8px 10px; font-size: 13px; }

/* Month navigation bar */
.social-monthbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.social-month { font-size: 26px; font-style: italic; margin: 0 4px; min-width: 200px; }
.social-monthcount {
  margin-left: auto; font-size: 11px; color: var(--mid);
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Month grid (desktop) ---------- */
.social-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--rule);
}
.social-dow {
  padding: 8px 10px; font-family: var(--sans); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid);
}
.social-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.social-cell {
  min-height: 116px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 6px 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  transition: background 120ms ease;
}
.social-cell:hover { background: rgba(26,26,26,0.02); }
.social-cell.out { background: rgba(26,26,26,0.015); }
.social-cell.out .social-daynum { color: var(--rule-strong, #c9c4ba); }
.social-cell.today { background: var(--paper-2, #efece4); }
.social-cell.today .social-daynum {
  background: var(--ink); color: var(--paper); border-radius: 999px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.social-cell-head { display: flex; justify-content: flex-end; }
.social-daynum { font-family: var(--mono); font-size: 12px; color: var(--mid); }
.social-cell-posts { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

/* Post chips */
.social-chip {
  display: flex; align-items: center; gap: 6px; width: 100%;
  text-align: left; border: 1px solid var(--rule-strong, #ccc6ba); background: var(--paper);
  border-radius: 4px; padding: 3px 6px; cursor: pointer; font-family: var(--sans);
  overflow: hidden;
}
.social-chip:hover { border-color: var(--ink); }
.social-chip-ch { font-size: 9.5px; font-weight: 600; flex-shrink: 0; color: var(--mid); letter-spacing: 0.04em; }
.social-chip-title { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status treatments — monochrome, distinguishable at a glance */
.social-chip.status-idea      { border-style: dashed; opacity: 0.7; }
.social-chip.status-draft     { border-style: solid; }
.social-chip.status-scheduled { border-color: var(--ink); }
.social-chip.status-posted    { background: var(--ink); }
.social-chip.status-posted .social-chip-ch,
.social-chip.status-posted .social-chip-title { color: var(--paper); }

/* ---------- Agenda (mobile) ---------- */
.social-agenda { display: flex; flex-direction: column; gap: 22px; }
.social-agenda-day { display: flex; flex-direction: column; gap: 8px; }
.social-agenda-date {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--rule); padding-bottom: 6px;
}
.social-today-tag {
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--paper);
  background: var(--ink); padding: 1px 6px; border-radius: 999px;
}
.social-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; border-left: 3px solid var(--rule-strong, #ccc6ba);
  padding: 8px 0 8px 12px; cursor: pointer;
}
.social-row.status-scheduled { border-left-color: var(--ink); }
.social-row.status-posted    { border-left-color: var(--ink); opacity: 0.6; }
.social-row.status-idea      { border-left-style: dashed; }
.social-row-ch { font-size: 11px; font-weight: 600; color: var(--mid); padding-top: 2px; min-width: 26px; }
.social-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.social-row-title { font-size: 15px; color: var(--ink); }

@media (max-width: 860px) {
  .social-body { padding: 24px 20px 56px; }
  .social-month { font-size: 22px; min-width: 0; }
}