/* Planner area styles (loaded after styles.css). */

.pl-page { max-width: 1440px; }
/* the bar is mounted through a wrapper; let it stick to the page, not the wrapper */
.pl-bar-slot { display: contents; }
.pl-page .page-bar { container: plbar / inline-size; }
.pl-search { flex: 1 1 150px; width: 150px; max-width: 280px; min-width: 120px; }
.pl-search .input { width: 100%; }
.pl-btn-stack .avatar { --size: 18px; }
.pl-btn-stack .avatar > .pbadge { display: none; }
.pl-tz { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.pl-tz > .icon-wrap { color: var(--text-3); }
@container plbar (max-width: 1080px) {
  .pl-hide-md, .pl-tz > span:not(.icon-wrap) { display: none; }
  .pl-tz { padding: 0 7px; }
}

/* filters popover */
.pl-filter-pop { width: min(360px, calc(100vw - 16px)); display: flex; flex-direction: column; }
.pl-filter-scroll { max-height: min(60vh, 460px); overflow-y: auto; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 14px; }
.pl-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-filter-group > legend { padding: 0; margin-bottom: 6px; font-size: 11.5px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.pl-filter-foot { padding: 10px 14px; border-top: 1px solid var(--border); }
.pl-acct-list { max-height: 280px; overflow-y: auto; }

/* list view: table on wide cards, row cards when the card is narrow */
.pl-list { container: pllist / inline-size; overflow: hidden; }
.pl-list > .card-header { border-bottom: 0; }
.pl-table th { background: var(--surface-2); border-top: 1px solid var(--border); }
.pl-table td { vertical-align: top; }
.pl-table td.col-check, .pl-table th.col-check { padding-left: 16px; vertical-align: middle; }
.pl-table td.col-check { padding-top: 26px; vertical-align: top; }
.pl-table td.col-actions { vertical-align: middle; }
.pl-table .col-check input, .pl-check { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: none; }
.pl-col-post { min-width: 260px; }
.pl-table th:not(.pl-col-post), .pl-table td:not(.pl-col-post) { width: 1%; white-space: nowrap; }
.pl-col-status { min-width: 128px; }
.pl-post { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.post-thumb.pl-thumb { width: 72px; height: 52px; }
.pl-post-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: inherit; color: var(--text); background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; line-height: 1.45; }
.pl-post-text.clamp-3 { -webkit-line-clamp: 3; }
.pl-post-text:hover { color: var(--accent-ink); }
.pl-post-text.pl-clamp-1 { display: block; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.pl-accts > .avatar { box-shadow: 0 0 0 2px var(--surface); }
.pl-labels { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 220px; }
.pl-table .chip-color { max-width: 150px; }
.pl-table.is-compact td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.pl-table.is-compact td.col-check { padding-top: 6px; vertical-align: middle; }
.pl-table.is-compact td.pl-col-post { max-width: 0; }
.pl-table tbody tr.is-selected td { background: var(--accent-soft); }
.pl-cards { display: none; border-top: 1px solid var(--border); }
.pl-cards .pl-check { margin-top: 18px; }
.pl-cards-all { display: none; }
.pl-list-foot { justify-content: center; }
.pl-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
@container pllist (max-width: 1100px) { .pl-p3 { display: none; } }
@container pllist (max-width: 880px) { .pl-p2 { display: none; } }
@container pllist (max-width: 640px) {
  .pl-table-wrap, .pl-hide-narrow { display: none; }
  .pl-cards { display: block; }
  .pl-cards-all { display: inline-flex; }
}

/* floating bulk-action bar (sticks to the bottom so it never collides with the page bar) */
.bulk-bar.pl-bulk { top: auto; bottom: 12px; }
.pl-bulk-slot:empty { display: none; }

/* feed and grid headings */
.pl-view-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 2px 0; }
.pl-view-head h2 { font-size: 15px; }

/* grid view: image-first tiles */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pl-grid-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; min-width: 0; transition: border-color .12s; }
.pl-grid-card:hover { border-color: var(--border-strong); }
.pl-grid-media { aspect-ratio: 1; background: var(--surface-3); overflow: hidden; display: flex; }
.pl-grid-media > img, .pl-grid-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-grid-media.is-text { background: var(--surface-2); padding: 16px; align-items: center; }
.pl-grid-quote { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pl-grid-over { position: absolute; top: 8px; left: 8px; }
.pl-grid-over .status { box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 60%, transparent); background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.pl-grid-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* calendar card */
.pl-cal { overflow: hidden; }
.pl-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pl-cal-title { font-size: 16px; min-width: 9.5em; text-align: center; white-space: nowrap; }
.pl-cal .cal, .pl-cal .week { border: 0; border-radius: 0; }
.pl-cal .week-scroll { border-radius: 0; }
.pl-cal-empty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pl-cal-empty > .icon-wrap { color: var(--text-3); }
.pl-cal-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; border-top: 1px solid var(--border); }

/* month grid: weekend columns tinted, other-month days greyed, today in a filled circle */
.pl-cal .cal-head .is-weekend { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-2)); }
.pl-cal .cal-day { min-height: 112px; }
.pl-cal .cal-day.is-past { background: transparent; }
.pl-cal .cal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 75%, var(--surface)); }
.pl-cal .cal-day.is-other { background: var(--surface-2); }
.pl-cal .cal-day.is-other .cal-date span { color: var(--text-3); opacity: .7; }
.pl-cal .cal-day.is-past:not(.is-today) .cal-date span { color: var(--text-3); }
.pl-cal .cal-day.is-today .cal-date span { background: var(--accent); color: var(--accent-contrast); font-weight: 700; }
.pl-cal .cal-day.is-drop { background: var(--accent-soft); }

/* week grid */
.pl-cal .week-colhead { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pl-cal .week-colhead .dn { min-width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.pl-cal .week-colhead.is-today { color: var(--accent-ink); }
.pl-cal .week-colhead.is-today .dn { background: var(--accent); color: var(--accent-contrast); }
.pl-cal .week-colhead.is-weekend { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-2)); }
.pl-cal .week-hour.is-weekend { background: color-mix(in srgb, var(--surface-2) 75%, var(--surface)); }
.pl-cal .week-hour.is-drop { background: var(--accent-soft); }

.pl-empty { padding: 24px 0; }

@media (max-width: 760px) {
  .pl-cal .cal-day { min-height: 74px; }
  .pl-cal-head { padding: 8px; }
  .pl-cal-title { min-width: 0; font-size: 15px; }
  .pl-search { max-width: none; flex-basis: 100%; order: 10; }
}
@media (max-width: 640px) {
  /* on phones the bar scrolls away with the page and keeps to two rows */
  .pl-page .page-bar { position: static; }
  .pl-page .page-bar-sep, .pl-tz > span:not(.icon-wrap) { display: none; }
  .pl-tz { padding: 0 7px; }
}

/* post detail page (posts/{id}): sticky page bar with back link, title and actions */
.post-bar > .page-bar-start { flex-wrap: nowrap; min-width: 0; flex: 1 1 0; }
.post-bar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.post-bar-actions { flex-wrap: nowrap; }
@media (max-width: 480px) { .post-bar-back { display: none; } }