/* web/polish-write.css: the write area in the new view (release 350). Every rule under html[data-ux="new"]; the Classic view is untouched.
   Owner, 2026-10-29: "the calendar is the home of Write", and every tab world class without losing a function. Calendar:
   one toolbar (date nav, title, view switch), one filter row (status as a segmented control, platforms, Brands & Pages
   folded behind one button, the world clock), and posts as calm chips: a tint of the status colour with a stripe of it
   on the left, the time, the platform marks, the heading. Upcoming: one list with dividers. All posts: one toolbar, cards
   with a status stripe and quiet actions. Feed: one toolbar row, themes as chips. Theme tokens only, so light and dark
   both read; a phone gets the agenda (app.js opens the list there), scrolling strips and 44px taps. */

/* ---- status colours, one place ---- */
html[data-ux="new"] { --pw-draft: var(--slate); --pw-scheduled: var(--blue); --pw-publishing: var(--amber); --pw-published: var(--green);
  --pw-manual: var(--navy); --pw-failed: var(--red); }
html[data-ux="new"][data-theme="dark"] { --pw-manual: var(--ink-soft); }

/* =====================================================================================================================
   CALENDAR
   ===================================================================================================================== */
html[data-ux="new"] [data-view-panel="calendar"] > .card.flush { padding: 0; border-radius: 14px; overflow: visible; }
html[data-ux="new"] [data-view-panel="calendar"] .calendar-wrap { padding: 14px 16px 16px; }

/* ---- the filter row ---- */
html[data-ux="new"] .calendar-wrap > .cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding: 0 0 12px;
  font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] .calendar-wrap .cal-legend .cal-legend-sep { display: none; }

/* status: one segmented control */
html[data-ux="new"] .calendar-wrap .pw-seg { display: inline-flex; align-items: stretch; flex: 0 1 auto; min-width: 0; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 11px;
  border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--ink-soft); font-size: 13px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip:hover { background: var(--card); color: var(--ink); border: 0; }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.is-active,
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.is-active:hover { background: var(--card); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 40, 70, .08); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: none; }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.draft::before { background: var(--pw-draft); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.scheduled::before { background: var(--pw-scheduled); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.publishing::before { background: var(--pw-publishing); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.published::before { background: var(--pw-published); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.manual::before { background: var(--pw-manual); }
html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip.failed::before { background: var(--pw-failed); }

/* platforms: the marks, quiet until picked */
html[data-ux="new"] .calendar-wrap .pw-plats { display: inline-flex; align-items: center; gap: 4px; }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 10px 0 7px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: 13px; font-weight: 500; line-height: 1; }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip:not(.is-roomy) { padding: 0 7px; }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip:hover { border-color: var(--blue); color: var(--ink); }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip.is-active { border-color: var(--blue); background: var(--blue-tint); color: var(--ink); font-weight: 600; }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip.is-clear { border-style: dashed; color: var(--ink-soft); padding: 0 10px; }
html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip__mark { min-width: 20px; height: 20px; border-radius: 5px; font-size: 10.5px; }

/* Brands & Pages: one button; the rows fold under it */
html[data-ux="new"] .calendar-wrap .pw-dests-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
html[data-ux="new"] .calendar-wrap .pw-dests-btn[hidden] { display: none; }
html[data-ux="new"] .calendar-wrap .pw-dests-btn:hover { border-color: var(--blue); }
html[data-ux="new"] .calendar-wrap .pw-dests-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
html[data-ux="new"] .calendar-wrap .pw-dests-btn.is-on { border-color: var(--blue); background: var(--blue-tint); }
html[data-ux="new"] .calendar-wrap .pw-dests-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
html[data-ux="new"] .calendar-wrap .pw-caret { width: 6px; height: 6px; margin: -3px 1px 0 2px; border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform var(--t-fast); }
html[data-ux="new"] .calendar-wrap.pw-dests-open .pw-caret { transform: rotate(225deg); margin-top: 3px; }

html[data-ux="new"] .calendar-wrap > .cal-dests { display: none; }
html[data-ux="new"] .calendar-wrap.pw-dests-open > .cal-dests { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dests-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dests-label { flex: 0 0 64px; margin: 0; color: var(--ink-soft); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-chip,
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip { height: 30px; padding: 0 10px 0 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: none; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip { padding: 0 10px; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-chip:hover,
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip:hover { border-color: var(--blue); }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-chip.is-active,
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip.is-active { border-color: var(--blue); background: var(--blue-tint); font-weight: 600; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip.is-partial { border-color: var(--blue); border-style: dashed; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip__dot { color: var(--blue); font-size: 9px; }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-more,
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-chip.is-clear { padding: 0 10px; color: var(--ink-soft); }
html[data-ux="new"] .calendar-wrap .cal-dests .cal-dests-count { color: var(--ink-soft); font-size: 12px; }

/* the world clock at the end of the row */
html[data-ux="new"] .calendar-wrap .cal-legend .tz-trigger { height: 34px; border-radius: 8px; box-shadow: none; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: 13px; font-weight: 500; }

/* ---- the toolbar: nav, title, view switch ---- */
html[data-ux="new"] .calendar-wrap .fc .fc-toolbar.fc-header-toolbar { margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--line); gap: 10px 12px; flex-wrap: wrap; }
html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 8px; }
html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(2) { flex: 1 1 auto; min-width: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-title { margin: 0; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
html[data-ux="new"] .calendar-wrap .fc .fc-button-group { flex-wrap: nowrap; gap: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary,
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:disabled { height: 34px; min-height: 34px; margin: 0; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); background-image: none; color: var(--ink); font-size: 13px; font-weight: 500; text-transform: none; box-shadow: none;
  opacity: 1; }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:disabled { color: var(--ink-soft); cursor: default; }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:not(:disabled):hover { background: var(--surface-soft); border-color: var(--blue); color: var(--ink); }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:focus,
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:not(:disabled):active { box-shadow: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; position: relative; z-index: 2; }
html[data-ux="new"] .calendar-wrap .fc .fc-prev-button, html[data-ux="new"] .calendar-wrap .fc .fc-next-button { width: 34px; padding: 0 !important; }
html[data-ux="new"] .calendar-wrap .fc .fc-button-group > .fc-button:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-button-group > .fc-button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary.fc-today-button { text-transform: capitalize; }
/* the active view: the one blue */
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:not(:disabled).fc-button-active,
html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:not(:disabled).fc-button-active:hover { position: relative; z-index: 1; border-color: var(--blue);
  background: var(--blue-tint); color: var(--blue); font-weight: 600; }
html[data-ux="new"][data-theme="dark"] .calendar-wrap .fc .fc-button.fc-button-primary:not(:disabled).fc-button-active { color: var(--ink); }

/* ---- the grid ---- */
html[data-ux="new"] .calendar-wrap .fc { --fc-border-color: var(--line); --fc-today-bg-color: transparent; --fc-now-indicator-color: var(--red);
  --fc-page-bg-color: var(--card); --fc-neutral-bg-color: var(--surface-soft); font-size: 13px; }
html[data-ux="new"] .calendar-wrap .fc .fc-scrollgrid { border-radius: 10px; overflow: hidden; }
html[data-ux="new"] .calendar-wrap .fc .fc-col-header-cell { background: var(--card); }
html[data-ux="new"] .calendar-wrap .fc .fc-col-header-cell-cushion { padding: 8px 4px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--blue); }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-day-top { flex-direction: row; padding: 4px 4px 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px; color: var(--ink); font-size: 12.5px; font-weight: 500; text-decoration: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-day-other .fc-daygrid-day-number { color: var(--ink-soft); opacity: .7; }
html[data-ux="new"] .calendar-wrap .fc .fc-day-today .fc-daygrid-day-number,
html[data-ux="new"][data-theme="dark"] .calendar-wrap .fc .fc-day-today .fc-daygrid-day-number { background: var(--blue); color: #fff; font-weight: 700; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-day.fc-day-today { background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-col.fc-day-today { background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-day:hover { background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-slot-label-cushion,
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-axis-cushion { color: var(--ink-soft); font-size: 11px; font-weight: 500; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-slot-minor { border-top-style: none; }
/* an hour holds the time, the marks and two lines of heading */
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-slot { height: 56px; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-now-indicator-arrow { border-color: var(--red); border-top-color: transparent; border-bottom-color: transparent; }
html[data-ux="new"] .calendar-wrap .fc .fc-scroller { scrollbar-width: thin; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-more-link { margin-top: 2px; padding: 1px 6px; border: 0; border-radius: 5px; background: none; color: var(--blue);
  font-size: 12px; font-weight: 600; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-more-link:hover { background: var(--blue-tint); color: var(--blue); }
html[data-ux="new"] .calendar-wrap .fc .fc-popover { border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }

/* ---- the posts: a tint of the status colour, a stripe of it ---- */
html[data-ux="new"] .calendar-wrap .fc .fc-event { --pw-st: var(--pw-draft); }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--scheduled { --pw-st: var(--pw-scheduled); }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--publishing { --pw-st: var(--pw-publishing); }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--published { --pw-st: var(--pw-published); }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--manual { --pw-st: var(--pw-manual); }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--failed { --pw-st: var(--pw-failed); }

html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-event,
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event { border: 0; border-left: 3px solid var(--pw-st); border-radius: 5px; box-shadow: none; filter: none;
  background: color-mix(in srgb, var(--pw-st) 13%, var(--card)); color: var(--ink); font-size: 12px; font-weight: 500; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-event:hover,
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event:hover { background: color-mix(in srgb, var(--pw-st) 22%, var(--card)); filter: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-event:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* !important on the ink only: the old per-status rules paint near-black ink for a solid fill at higher specificity */
html[data-ux="new"] .calendar-wrap .fc .fc-event,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-title,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-title-container,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-main,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-list-event-title a { color: var(--ink) !important; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-title { font-weight: 600; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-time,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-list-event-time,
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-ev-snip { color: var(--ink-soft) !important; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-time { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 1; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .fc-event-title::before { content: none; }
/* the marks on a tint: the platform colour for a live one, an outline for one still to go */
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge { min-width: 16px; height: 16px; font-size: 9.5px; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge.is-planned,
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge.is-drafted,
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge.is-failed { color: var(--ink-soft) !important; border-color: var(--ink-soft); background: transparent; opacity: 1; }
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge.is-failed { color: var(--red) !important; border-color: var(--red); }
html[data-ux="new"] .calendar-wrap .fc .fc-event .plat-badges.is-compact .plat-badge.is-published { color: #fff !important; }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--trashed { opacity: .55; filter: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-event.ev--trashed .fc-event-title { text-decoration: line-through; }

/* month: one line each, time first */
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event { display: flex; align-items: center; gap: 5px; margin: 1px 4px 2px; padding: 3px 6px; min-height: 24px; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-event-dot { display: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event .fc-event-time { order: -2; flex: 0 0 auto; margin: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event .plat-badges { order: -1; margin: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event .fc-event-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* week, 3 days, day: time and marks on top, the heading on two lines, the line of the post under it */
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event { padding: 3px 7px; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: 0 0 0 1px var(--card); }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-event-main { padding: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-event-main-frame { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 5px; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-event-time { order: -2; font-size: 11.5px; margin: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .plat-badges { order: -1; margin: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-event-title-container { flex: 1 0 100%; min-width: 0; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-event-title { font-size: 12.5px; line-height: 1.3; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: static; }
html[data-ux="new"] .calendar-wrap .fc .fc-timegrid-event .fc-ev-snip { flex: 1 0 100%; color: var(--ink-soft); font-size: 12px; font-weight: 400; opacity: 1; }

/* list: a row per post, the status as its dot, no fills */
html[data-ux="new"] .calendar-wrap .fc .fc-list { border-radius: 10px; overflow: hidden; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event,
html[data-ux="new"] .calendar-wrap .fc .fc-list-event td { background: var(--card); color: var(--ink); }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event:hover td { background: var(--surface-soft); box-shadow: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event td { padding: 10px 12px; font-size: 13.5px; border-color: var(--line); }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event-time { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event-title a { color: var(--ink); font-weight: 500; text-decoration: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event-dot { border-color: var(--pw-st); border-width: 5px; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event .plat-badges.is-compact .plat-badge { min-width: 18px; height: 18px; font-size: 10px; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-event .plat-badges.is-compact .plat-badge.is-planned,
html[data-ux="new"] .calendar-wrap .fc .fc-list-event .plat-badges.is-compact .plat-badge.is-drafted { color: var(--ink-soft); border-color: var(--ink-soft); background: transparent; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-day-cushion { padding: 8px 12px; background: var(--surface-soft); }
html[data-ux="new"] .calendar-wrap .fc .fc-list-day-cushion a { color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-day-side-text { color: var(--ink-soft) !important; font-weight: 500 !important; }
html[data-ux="new"] .calendar-wrap .fc .fc-list-day.fc-day-today .fc-list-day-text { color: var(--blue); }
html[data-ux="new"] .calendar-wrap .fc .fc-list-empty { background: var(--card); color: var(--ink-soft); }

/* =====================================================================================================================
   UPCOMING: one list with dividers
   ===================================================================================================================== */
html[data-ux="new"] #cal-upcoming.cal-agenda { margin-top: 4px; }
html[data-ux="new"] #cal-upcoming:has(.cal-agenda-item) { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
html[data-ux="new"] #cal-upcoming .cal-agenda-item { display: flex; align-items: center; gap: 16px; min-height: 56px; margin: 0; padding: 10px 16px 10px 14px;
  border: 0; border-left: 3px solid var(--pw-scheduled); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--card); cursor: pointer;
  transition: background var(--t-fast); }
html[data-ux="new"] #cal-upcoming .cal-agenda-item:hover { background: var(--surface-soft); border-color: var(--line); border-left-color: var(--pw-scheduled); }
html[data-ux="new"] #cal-upcoming .cal-agenda-when { flex: 0 0 156px; min-width: 0; color: var(--ink-soft); font-size: 13px; font-weight: 500; }
html[data-ux="new"] #cal-upcoming .cal-agenda-title { color: var(--ink); font-size: 14px; font-weight: 500; }
html[data-ux="new"] #cal-upcoming > .hint { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more { margin: 0; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px !important;
  color: var(--blue); font-size: 13.5px; font-weight: 600 !important; list-style: none; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more > summary::-webkit-details-marker { display: none; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more > summary::before { content: none; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
html[data-ux="new"] #cal-upcoming .cal-agenda-more[open] > summary { border-bottom: 1px solid var(--line); }
html[data-ux="new"] #cal-upcoming .cal-agenda-more[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
html[data-ux="new"] #cal-upcoming .cal-agenda-more .cal-agenda-item:last-child { border-bottom: 0; }
html[data-ux="new"] #cal-upcoming > .cal-agenda-item:last-child { border-bottom: 0; }

/* =====================================================================================================================
   ALL POSTS: one toolbar, cards with a status stripe, quiet actions
   ===================================================================================================================== */
html[data-ux="new"] [data-view-panel="schedule"] > .section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0; margin: 0 0 14px;
  background: none; border: 0; }
html[data-ux="new"] [data-view-panel="schedule"] > .section-head .spacer { flex: 1 1 0; }
html[data-ux="new"] #schedule-search { flex: 1 1 240px; max-width: 360px !important; height: 36px; font-size: 14px; }
html[data-ux="new"] [data-view-panel="schedule"] > .section-head .field select { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
html[data-ux="new"] #btn-refresh-schedules { height: 36px; min-height: 36px; }
html[data-ux="new"] #sched-density { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
html[data-ux="new"] #sched-density button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font-size: 13px;
  font-weight: 500; box-shadow: none; cursor: pointer; }
html[data-ux="new"] #sched-density button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 40, 70, .08); }

html[data-ux="new"] [data-view-panel="schedule"] > details.media-gen { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  box-shadow: none; }
html[data-ux="new"] [data-view-panel="schedule"] > details.media-gen > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; cursor: pointer; }

html[data-ux="new"] #schedule-list .sched-group-head { position: static; display: flex; align-items: baseline; gap: 6px; margin: 18px 0 8px; padding: 0 2px;
  border: 0; background: none; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
html[data-ux="new"] #schedule-list > .sched-group-head:first-child { margin-top: 0; }
html[data-ux="new"] #schedule-list .sched-group-count { color: var(--ink-soft); font-weight: 500; }
html[data-ux="new"] #schedule-list details.sched-more { margin-top: 14px !important; }
html[data-ux="new"] #schedule-list details.sched-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px !important;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--blue); font-size: 13.5px; list-style: none; }
html[data-ux="new"] #schedule-list details.sched-more > summary::-webkit-details-marker { display: none; }
html[data-ux="new"] #schedule-list details.sched-more > summary::before { content: none; }
html[data-ux="new"] #schedule-list details.sched-more > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
html[data-ux="new"] #schedule-list details.sched-more[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }

html[data-ux="new"] #schedule-list article.card { --pw-st: var(--pw-draft); position: relative; margin: 0 0 8px; padding: 14px 16px 12px 19px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); box-shadow: none; overflow: hidden; transition: border-color var(--t-fast); }
html[data-ux="new"] #schedule-list article.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pw-st); }
html[data-ux="new"] #schedule-list article.card:hover { border-color: color-mix(in srgb, var(--ink-soft) 40%, var(--line)); transform: none; box-shadow: none; }
html[data-ux="new"] #schedule-list article.card:has(.pill--scheduled) { --pw-st: var(--pw-scheduled); }
html[data-ux="new"] #schedule-list article.card:has(.pill--publishing) { --pw-st: var(--pw-publishing); }
html[data-ux="new"] #schedule-list article.card:has(.pill--published) { --pw-st: var(--pw-published); }
html[data-ux="new"] #schedule-list article.card:has(.pill--manual) { --pw-st: var(--pw-manual); }
html[data-ux="new"] #schedule-list article.card:has(.pill--failed) { --pw-st: var(--pw-failed); }
html[data-ux="new"] #schedule-list article.card .card-head { align-items: flex-start; gap: 8px; }
html[data-ux="new"] #schedule-list article.card .card-title { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
html[data-ux="new"] #schedule-list article.card .sched-edit-trigger { margin: 3px 0 0; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: 13px;
  font-weight: 500; text-align: left; cursor: pointer; }
html[data-ux="new"] #schedule-list article.card .sched-edit-trigger:hover { color: var(--blue); }
html[data-ux="new"] #schedule-list article.card .card-gen { margin-top: 2px; color: var(--ink-soft); font-size: 12px; }
html[data-ux="new"] #schedule-list article.card .card-body { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
html[data-ux="new"] #schedule-list article.card > a { display: inline-block; margin-top: 6px; color: var(--blue); font-size: 13px; font-weight: 500; }
html[data-ux="new"] #schedule-list article.card .pill { font-size: 11.5px; }
html[data-ux="new"] #schedule-list article.card .card-actions { justify-content: flex-end; gap: 6px; margin-top: 10px !important; }
html[data-ux="new"] #schedule-list article.card .card-actions .btn { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; }
html[data-ux="new"] #schedule-list article.card .card-actions .btn--primary { font-weight: 600; }
html[data-ux="new"] #schedule-list article.card .card-actions .btn--danger { border-color: transparent; background: transparent; color: var(--red); }
html[data-ux="new"] #schedule-list article.card .card-actions .btn--danger:hover { border-color: var(--red); background: var(--red-tint); }
html[data-ux="new"] #schedule-list.is-compact article.card { padding: 9px 14px 9px 17px; margin-bottom: 6px; }
html[data-ux="new"] #schedule-list.is-compact article.card .card-body { display: none; }
html[data-ux="new"] #schedule-list.is-compact article.card .card-actions { margin-top: 6px !important; }

/* =====================================================================================================================
   FEED: one toolbar row, themes as chips, calmer cards
   ===================================================================================================================== */
html[data-ux="new"] [data-view-panel="feed"] > #feed-config-note { margin: -4px 0 12px; color: var(--ink-soft); font-size: 12.5px; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar > * { margin: 0; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar #feed-search { flex: 1 1 260px; width: auto; min-width: 0; height: 36px; font-size: 14px; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar select.input { flex: 0 0 auto; width: auto; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar .feed-regex-label { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar #feed-order { height: 36px; min-height: 36px; }

html[data-ux="new"] #feed-themes.feed-themes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
html[data-ux="new"] #feed-themes .feed-theme-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: none; }
html[data-ux="new"] #feed-themes .feed-theme-chip:hover { border-color: var(--blue); }
html[data-ux="new"] #feed-themes .feed-theme-chip.is-active { border-color: var(--blue); background: var(--blue-tint); }
html[data-ux="new"] #feed-themes .feed-theme-name { color: var(--ink); font-weight: 600; text-transform: none; }
html[data-ux="new"] #feed-themes .feed-theme-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-soft); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; text-align: center; }
html[data-ux="new"] #feed-themes .feed-theme-top { padding: 2px 6px; border: 0; border-radius: 5px; background: none; color: var(--blue); font-size: 12px; font-weight: 500; }
html[data-ux="new"] #feed-themes .feed-theme-top:hover { background: var(--blue-tint); }
html[data-ux="new"] #feed-themes .feed-theme-meta { color: var(--ink-soft); font-size: 11.5px; }
html[data-ux="new"] [data-view-panel="feed"] #feed-list-summary { margin: 0 0 8px; color: var(--ink-soft); font-size: 12.5px; }

html[data-ux="new"] #feed-list article.feed-card { margin: 0 0 10px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  box-shadow: none; }
html[data-ux="new"] #feed-list article.feed-card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--ink-soft) 40%, var(--line)); }
html[data-ux="new"] #feed-list .feed-card .card-head { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin-bottom: 0; }
html[data-ux="new"] #feed-list .feed-card .card-head > div { flex: 1 1 auto; min-width: 0; }
html[data-ux="new"] #feed-list .feed-card .card-head > .spacer { display: none; }
html[data-ux="new"] #feed-list .feed-card .card-head > .pts-badge { flex: 0 0 auto; }
html[data-ux="new"] #feed-list .feed-card .feed-select-wrap { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; }
html[data-ux="new"] #feed-list .feed-card .card-title { color: var(--ink); font-size: 15px; font-weight: 600; }
html[data-ux="new"] #feed-list .feed-card .card-sub { margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; }
html[data-ux="new"] #feed-list .feed-card .pts-badge { height: 26px; padding: 0 10px; border: 1px solid var(--green-line, var(--line)); border-radius: 13px;
  background: var(--green-tint, var(--surface-soft)); color: var(--green); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-ux="new"] #feed-list .feed-card .card-body { margin: 10px 0 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
html[data-ux="new"] #feed-list .feed-card .feed-more { margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 600; }
html[data-ux="new"] #feed-list .feed-card .feed-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 0; color: var(--ink-soft); font-size: 12px; }
html[data-ux="new"] #feed-list .feed-card .feed-ts { padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: 12px; }
html[data-ux="new"] #feed-list .feed-card .feed-ts-label { color: var(--ink-soft); font-weight: 500; text-transform: none; letter-spacing: 0; }
html[data-ux="new"] #feed-list .feed-card .feed-ts-val { color: var(--ink); font-weight: 500; }
html[data-ux="new"] #feed-list .feed-card > a { display: inline-block; margin-top: 8px; color: var(--blue); font-size: 13px; font-weight: 500; }
html[data-ux="new"] #feed-list .feed-card .feed-card-actions { gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
html[data-ux="new"] #feed-list .feed-card .feed-card-actions .btn { min-height: 32px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; }

/* =====================================================================================================================
   PHONE (<= 640px): the calendar is the agenda (app.js opens List there); strips scroll on their own, never the page
   ===================================================================================================================== */
@media (max-width: 640px) {
  html[data-ux="new"] [data-view-panel="calendar"] > .card.flush { border-radius: 12px; }
  html[data-ux="new"] [data-view-panel="calendar"] .calendar-wrap { padding: 12px 12px 14px; }
  html[data-ux="new"] .calendar-wrap > .cal-legend { gap: 8px; }
  html[data-ux="new"] .calendar-wrap .pw-seg { flex: 1 0 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html[data-ux="new"] .calendar-wrap .pw-seg::-webkit-scrollbar { display: none; }
  html[data-ux="new"] .calendar-wrap .pw-seg .cal-legend-chip { height: 38px; padding: 0 12px; flex: 0 0 auto; min-height: 0; min-width: 0; }
  html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip,
  html[data-ux="new"] .calendar-wrap .pw-dests-btn,
  html[data-ux="new"] .calendar-wrap .cal-legend .tz-trigger { height: 44px; min-height: 44px; }
  html[data-ux="new"] .calendar-wrap .pw-plats .cal-plat-chip { min-width: 44px; justify-content: center; }
  html[data-ux="new"] .calendar-wrap .cal-legend .cal-legend-spacer { display: none; }
  html[data-ux="new"] .calendar-wrap .cal-legend #tz-bar { margin-left: auto; }
  html[data-ux="new"] .calendar-wrap .cal-dests .cal-dests-label { flex-basis: 100%; }
  html[data-ux="new"] .calendar-wrap .cal-dests .cal-dest-chip,
  html[data-ux="new"] .calendar-wrap .cal-dests .cal-brand-chip { height: 40px; min-height: 40px; }

  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar.fc-header-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(1) { order: 2; gap: 6px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(3) { order: 3; flex: 1 0 100%; min-width: 0; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-title { font-size: 17px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary,
  html[data-ux="new"] .calendar-wrap .fc .fc-button.fc-button-primary:disabled { height: 44px; min-height: 44px; min-width: 0; padding: 0 9px; font-size: 13px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-prev-button, html[data-ux="new"] .calendar-wrap .fc .fc-next-button { width: 44px; min-width: 44px !important; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(3) .fc-button-group { width: 100%; }
  html[data-ux="new"] .calendar-wrap .fc .fc-toolbar-chunk:nth-child(3) .fc-button { flex: 1 1 auto; }
  html[data-ux="new"] .calendar-wrap .fc .fc-col-header-cell-cushion { padding: 6px 0; font-size: 10.5px; letter-spacing: 0; }
  html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-day-number { min-width: 22px; height: 22px; font-size: 12px; padding: 0 4px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event { margin: 1px 1px 2px; padding: 2px 3px; min-height: 20px; font-size: 11px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event .fc-event-time,
  html[data-ux="new"] .calendar-wrap .fc .fc-daygrid-dot-event .plat-badges { display: none; }
  /* the agenda: time over the heading, marks at the end */
  html[data-ux="new"] .calendar-wrap .fc .fc-list-event td { padding: 12px 6px; font-size: 14px; vertical-align: top; }
  html[data-ux="new"] .calendar-wrap .fc .fc-list-event td.fc-list-event-plat { padding-left: 10px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-list-event-time { width: 64px; font-size: 13px; }
  html[data-ux="new"] .calendar-wrap .fc .fc-list-event-graphic { padding-left: 2px !important; padding-right: 2px !important; }
  html[data-ux="new"] .calendar-wrap .fc .fc-list-event-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  html[data-ux="new"] #cal-upcoming .cal-agenda-item { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px 12px 13px; }
  html[data-ux="new"] #cal-upcoming .cal-agenda-when { flex: 0 0 auto; font-size: 12.5px; }
  html[data-ux="new"] #cal-upcoming .cal-agenda-title { width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  html[data-ux="new"] [data-view-panel="schedule"] > .section-head > h2 { flex: 1 1 auto; }
  html[data-ux="new"] [data-view-panel="schedule"] > .section-head .spacer { display: none; }
  html[data-ux="new"] #schedule-search { flex: 1 0 100%; max-width: none !important; height: 44px; order: 5; }
  html[data-ux="new"] [data-view-panel="schedule"] > .section-head .field { flex: 1 1 calc(50% - 5px); min-width: 0; order: 6; }
  html[data-ux="new"] [data-view-panel="schedule"] > .section-head .field select { width: 100%; height: 44px; }
  html[data-ux="new"] #btn-refresh-schedules { height: 44px; order: 7; flex: 1 0 100%; }
  html[data-ux="new"] #sched-density button { height: 38px; }
  html[data-ux="new"] #schedule-list article.card { padding: 12px 12px 10px 15px; }
  html[data-ux="new"] #schedule-list article.card .card-head { flex-wrap: wrap; }
  html[data-ux="new"] #schedule-list article.card .card-head > .spacer { display: none; }
  html[data-ux="new"] #schedule-list article.card .card-head > div:first-child { flex: 1 0 100%; }
  html[data-ux="new"] #schedule-list article.card .card-actions { justify-content: flex-start; }
  html[data-ux="new"] #schedule-list article.card .card-actions .btn { height: 44px; min-height: 44px; }

  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar #feed-search { flex: 1 0 100%; height: 44px; order: 1; }
  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar select.input { flex: 1 1 calc(50% - 4px); min-width: 0; height: 44px; order: 2; }
  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar .feed-regex-label { order: 3; flex: 1 1 calc(50% - 4px); }
  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar #feed-order { order: 4; flex: 1 1 calc(50% - 4px); }
  html[data-ux="new"] #feed-list .feed-card .feed-select-wrap { width: 44px; height: 44px; margin: -10px 0 -10px -10px; }
  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar .feed-regex-label,
  html[data-ux="new"] [data-view-panel="feed"] .feed-toolbar #feed-order { height: 44px; }
  html[data-ux="new"] #feed-themes.feed-themes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  html[data-ux="new"] #feed-themes.feed-themes::-webkit-scrollbar { display: none; }
  html[data-ux="new"] #feed-themes .feed-theme-chip { flex: 0 0 auto; height: 40px; }
  html[data-ux="new"] #feed-list article.feed-card { padding: 14px 14px 12px; }
  html[data-ux="new"] #feed-list .feed-card .feed-card-actions .btn { height: 44px; min-height: 44px; }
}
