/* =====================================================================
   STF Taskboard — Content Calendar (gantt-on-a-month)
   Every scheduled piece is one connected bar across its working window,
   ending on the intended post date. Leads drag the ends / body to plan.
   ===================================================================== */

.cc-grid { display: block; }            /* override the 7-col grid base */
.cc-wdrow { display: grid; grid-template-columns: repeat(7, 1fr); }

.cc-week { position: relative; }
.cc-week + .cc-week .cc-cells .cc-cell { border-top: 1px solid var(--border-1); }
.cc-cells {
  display: grid; grid-template-columns: repeat(7, 1fr);
  position: absolute; inset: 0; z-index: 1;
}
.cc-cell {
  min-width: 0; border-left: 1px solid var(--border-1);
  padding: 7px 8px; position: relative;
}
.cc-cell:first-child { border-left: none; }
.cc-cell.out { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.cc-cell.out .cc-cellnum .n { color: var(--fg-4); }
.cc-cell.today { background: color-mix(in srgb, var(--stf-blueprint) 6%, var(--bg-1)); }

.cc-cellnum { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.cc-cellnum .n {
  font-size: 12.5px; font-weight: 500; color: var(--fg-2);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cc-cell.today .cc-cellnum .n {
  background: var(--stf-blueprint); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.cc-cellnum .td {
  font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stf-blueprint); font-weight: 600;
}
.cc-cellnum .pd {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--stf-amber); padding: 2px 6px; border-radius: 999px;
}

.cc-cell.is-posting { background: color-mix(in srgb, var(--stf-amber) 11%, var(--bg-1)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--stf-amber) 50%, transparent); }
.cc-cell.is-clickable { cursor: pointer; }
.cc-cell.is-clickable:hover { background: color-mix(in srgb, var(--stf-blueprint) 5%, var(--bg-1)); }
.cc-addhint {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--border-1);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-stf);
}
.cc-cell.is-clickable:hover .cc-addhint { opacity: 1; }

/* ---- bar overlay ---------------------------------------------------- */
.cc-bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.cc-bar {
  position: absolute; height: 22px; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px;
  padding: 0 5px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--stf-blueprint) 13%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--stf-blueprint) 34%, var(--border-1));
  color: var(--fg-1); pointer-events: auto; cursor: default;
  transition: background var(--dur-fast) var(--ease-stf), box-shadow var(--dur-fast) var(--ease-stf);
  overflow: hidden;
}
.cc-bar.lead { cursor: grab; }
.cc-bar.lead:active { cursor: grabbing; }
.cc-bar:hover { background: color-mix(in srgb, var(--stf-blueprint) 19%, var(--bg-1)); box-shadow: 0 1px 5px color-mix(in srgb, var(--stf-blueprint) 22%, transparent); }
/* continuation edges: flatten the corner that bleeds into the next week */
.cc-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.cc-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }

.cc-bar-body { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; pointer-events: none; }
.cc-bar-ttl {
  font-size: 11px; font-weight: 500; color: var(--fg-1); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-cont { font-size: 12px; color: var(--stf-blueprint); font-weight: 700; line-height: 1; flex: none; }

/* intended post-date cap on the closing segment */
.cc-bar.has-post {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stf-blueprint) 13%, var(--bg-1)) 0%,
    color-mix(in srgb, var(--stf-blueprint) 13%, var(--bg-1)) calc(100% - 24px),
    color-mix(in srgb, var(--stf-blueprint) 24%, var(--bg-1)) calc(100% - 24px));
}
.cc-post {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 4px; color: #fff;
  background: var(--stf-blueprint); pointer-events: none;
}

/* drag handles — sit over each end of the bar */
.cc-h {
  position: absolute; top: 0; bottom: 0; width: 9px; z-index: 3;
  cursor: ew-resize;
}
.cc-h.l { left: -2px; }
.cc-h.r { right: -2px; }
.cc-h::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 3px; height: 12px; border-radius: 2px;
  background: color-mix(in srgb, var(--stf-blueprint) 55%, transparent);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-stf);
}
.cc-h.l::after { left: 2px; }
.cc-h.r::after { right: 2px; }
.cc-bar:hover .cc-h::after { opacity: 1; }

body.cc-dragging { cursor: grabbing; user-select: none; }
body.cc-dragging .cc-bar { transition: none; }

/* legend additions */
.cc-lg-bar {
  width: 26px; height: 11px; border-radius: 3px;
  background: color-mix(in srgb, var(--stf-blueprint) 16%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--stf-blueprint) 34%, var(--border-1));
}
.cc-lg-post {
  width: 16px; height: 16px; border-radius: 4px; color: #fff;
  background: var(--stf-blueprint); display: inline-flex; align-items: center; justify-content: center;
}
.cc-lg-drag { color: var(--fg-4); }
.cc-confirm-post {
  font-size: 11px; color: var(--stf-blueprint); font-weight: 600;
  margin: -6px 0 12px;
}
.cc .tb-cal-tools .cc-hint { font-size: 11px; color: var(--fg-3); }

/* ---- bar tooltip — title + the people responsible (avatars only) ---- */
.cc-tip {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 12px 13px 13px; pointer-events: none;
  animation: calTipIn 120ms var(--ease-stf);
}
.cc-tip-top { display: flex; align-items: center; gap: 10px; }
.cc-tip-thumb {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
  background: var(--bg-3); background-size: cover; background-position: center;
}
.cc-tip-ttl { font-size: 13.5px; font-weight: 600; color: var(--fg-1); line-height: 1.25; text-wrap: pretty; }
.cc-tip-people {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.cc-tip-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
  box-shadow: 0 0 0 2px var(--bg-1);
}
.cc-tip-none { font-size: 11px; color: var(--fg-4); }
.cc-tip-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.cc-tip-rows .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-tip-rows .k { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; }
.cc-tip-rows .v { font-size: 12px; color: var(--fg-1); font-weight: 500; }
.cc-tip-rows .v.post { color: var(--stf-blueprint); }

/* ---- intended-post pin (decoupled, snaps to optimal days) ---------- */
.cc-post-pin {
  position: absolute; height: 22px; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px; padding: 0 7px;
  border-radius: var(--radius-pill); pointer-events: auto; overflow: hidden;
  background: var(--stf-blueprint); color: #fff;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--stf-blueprint) 32%, transparent);
  transition: filter var(--dur-fast) var(--ease-stf), box-shadow var(--dur-fast) var(--ease-stf);
}
.cc-post-pin.lead { cursor: grab; }
.cc-post-pin.lead:active { cursor: grabbing; }
.cc-post-pin:hover { filter: brightness(1.06); }
.cc-post-pin svg { flex: none; }
.cc-post-ttl { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* off an optimal day → amber warning tone */
.cc-post-pin.offpeak {
  background: var(--stf-amber);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--stf-amber) 32%, transparent);
}

/* ---- optimal posting days (Tue / Thu / Fri) ------------------------ */
.cc-cell.cc-optimal:not(.today):not(.is-posting):not(.out) {
  background: color-mix(in srgb, var(--stf-success) 10%, var(--bg-1));
}
.tb-cal-wd.cc-wd-opt { color: var(--fg-2); display: flex; align-items: center; gap: 5px; }
.cc-opt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--stf-success); display: inline-block; }
.cc-lg-opt {
  width: 14px; height: 14px; border-radius: 4px;
  background: color-mix(in srgb, var(--stf-success) 14%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--stf-success) 34%, var(--border-1));
}

@media (max-width: 720px) {
  .cc-bar-ttl { font-size: 10px; }
}

/* ===================================================================
   View-thumbnails toggle · post-day thumbnails · click-open info window
   =================================================================== */
.cc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 9px 0 12px;
  border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  background: var(--bg-1); color: var(--fg-2);
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-stf), border-color var(--dur-fast) var(--ease-stf), color var(--dur-fast) var(--ease-stf);
}
.cc-toggle:hover { border-color: var(--fg-3); color: var(--fg-1); }
.cc-toggle svg { flex: none; }
.cc-toggle.on { color: var(--stf-blueprint); border-color: color-mix(in srgb, var(--stf-blueprint) 42%, var(--border-1)); background: color-mix(in srgb, var(--stf-blueprint) 8%, var(--bg-1)); }
.cc-toggle-sw { width: 26px; height: 15px; border-radius: 999px; background: var(--border-2); position: relative; flex: none; transition: background var(--dur-base) var(--ease-stf); }
.cc-toggle.on .cc-toggle-sw { background: var(--stf-blueprint); }
.cc-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform var(--dur-base) var(--ease-stf);
}
.cc-toggle.on .cc-toggle-knob { transform: translateX(11px); }

/* small cover thumbnail shown on a post pin when "View thumbnails" is on */
.cc-post-thumb {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: var(--bg-3); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}
/* thumbnail mode: pin becomes a full-bleed portrait card */
.cc-post-pin.has-thumb {
  height: 96px;
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}
.cc-post-pin.has-thumb.offpeak {
  background: var(--bg-3);
  box-shadow: var(--shadow-sm);
}
.cc-post-pin.has-thumb .cc-post-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  box-shadow: none;
}
/* title + off-peak dot overlay at the bottom in thumbnail mode */
.cc-post-ttl-over {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 18px 7px 5px;
  background: linear-gradient(to top, rgba(0,0,0,0.76) 0%, transparent 100%);
  min-width: 0;
}
.cc-post-ttl-over .t {
  font-size: 10.5px; font-weight: 600; color: #fff; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* amber dot signals an off-peak day when the background is image, not colour */
.cc-offpeak-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--stf-amber);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}

/* drop highlight shared by every CcImageDrop surface */
.cc-info-thumb.is-over { box-shadow: inset 0 0 0 2px var(--stf-blueprint); }
.stf-ccard-thumb.is-over { box-shadow: inset 0 0 0 2px var(--stf-blueprint); }

/* ---- click-opened info window -------------------------------------- */
.cc-info {
  position: fixed; z-index: 300; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay);
  overflow: hidden; animation: ccInfoIn 150ms var(--ease-stf);
}
@keyframes ccInfoIn {
  from { transform: translate(-50%, calc(-50% + 6px)); }
  to   { transform: translate(-50%, -50%); }
}
.cc-info-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-1) 64%, transparent); backdrop-filter: blur(6px);
  color: var(--fg-1); border: 1px solid var(--border-1); cursor: pointer;
}
.cc-info-x:hover { background: var(--bg-2); }
.cc-info-thumb {
  position: relative; aspect-ratio: 16 / 10; cursor: pointer;
  background: var(--bg-3); background-size: cover; background-position: center;
}
.cc-info-replace {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: color-mix(in srgb, #0c0c0e 44%, transparent);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-stf);
}
.cc-info-thumb:hover .cc-info-replace,
.cc-info-thumb.is-over .cc-info-replace { opacity: 1; }
.cc-info-body { padding: 14px 16px 16px; }
.cc-info-ttl { font-size: 15px; font-weight: 600; color: var(--fg-1); line-height: 1.3; text-wrap: pretty; }
.cc-info-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cc-info-rows .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-info-rows .k { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; }
.cc-info-rows .v { font-size: 13px; color: var(--fg-1); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.cc-info-rows .v.post { color: var(--stf-blueprint); }
.cc-info-opt {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; background: var(--bg-3); color: var(--fg-3);
}
.cc-info-opt.ok { background: color-mix(in srgb, var(--stf-success) 16%, transparent); color: var(--stf-success); }
.cc-info-people {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}