/* The 行事曆 page (calendar-page.js, redesign stage 2): the month calendar, and the clicked post's editor beside it.
   Only the desk's tokens (app.css :root, theme.css dark) are used, so the dark theme follows without rules of its own
   except where a surface is drawn here. */
.calendar-page { display: grid; gap: 20px; align-items: start; min-width: 0; }
.calendar-page-main { min-width: 0; }
@media (min-width: 1280px) {
  .calendar-page.has-editor { grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr); }
  .calendar-page.has-editor .calendar-editor { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
}

/* With the panel open a cell is about 70 px wide: time and platform on one line, the title on its own line under them
   (cut with 「…」), so each post still says which one it is. The cell grows with its lines instead of hiding them. */
.calendar-page.has-editor .calendar-day { height: auto; min-height: 108px; padding: 4px 4px 6px; }
.calendar-page.has-editor .calendar-item { flex-wrap: wrap; gap: 0 4px; padding: 1px 3px; line-height: 1.45; }
.calendar-page.has-editor .calendar-label { flex: 1 0 100%; white-space: nowrap; }
.calendar-page.has-editor .calendar-month tr.is-quiet > .calendar-day { min-height: 0; }

.calendar-editor {
  display: grid; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--rail); box-shadow: var(--lift);
}
.calendar-editor-head { display: grid; gap: 6px; }
.calendar-editor-close { justify-self: start; }
.calendar-editor-title { margin: 0; }
.calendar-editor-hint { margin: 0; }
.calendar-lock { margin: 0; }
.calendar-editor-actions { gap: 8px; }
.is-locked { opacity: .6; }

/* The editor inside the panel: the panel has its own way back, and the danger zone stays on the draft's own page. */
.calendar-editor .editor-head .back, .calendar-editor .danger-zone { display: none; }
.calendar-editor .editor { gap: 14px; }
.calendar-editor .save-bar { bottom: 0; }

/* Threads preview card (threads-preview-card.js): the post as Threads shows it, its text edited on the card. */
.threads-card-preview { display: grid; gap: 8px; }
.threads-card-label { margin: 0; }
.threads-card-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); overflow: hidden; }
.threads-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.threads-card + .threads-card { border-top: 1px solid var(--line); }
.threads-card-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line-strong); }
.threads-card-body { display: grid; gap: 4px; min-width: 0; }
.threads-card-head { display: flex; gap: 8px; align-items: baseline; }
.threads-card-name { color: var(--ink); }
.threads-card-step { color: var(--muted); }
.threads-card-text {
  width: 100%; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ink); line-height: 1.55; resize: vertical;
}
.threads-card-text:focus-visible { outline-offset: 2px; }
.threads-card-pictures { margin: 0; }
:root[data-theme="dark"] .calendar-editor { background: var(--theme-surface); border-color: var(--line); }
:root[data-theme="dark"] .threads-card-list { background: var(--canvas); border-color: var(--line); }
:root[data-theme="dark"] .threads-card-text { background: transparent; border: 0; }