/* ==========================================================================
   Program Communications (#3549) — the message plan on a program, and the
   same plan resolved to real dates on a cohort.
   --------------------------------------------------------------------------
   Namespaced .pc-*. Card chrome, radii, shadows and ink match .pd-card in
   product-detail.css exactly — this is not a fifth card shape, it is the same
   one. Tokens are reused from :root there (loaded ahead of this file in the
   base layout), with .pc- aliases so a future token change lands once.
   ========================================================================== */

:root {
	--pc-navy: var(--pd-navy, #003264);
	--pc-line: var(--pd-line, #eef0f4);
	--pc-line-strong: var(--pd-line-strong, #dfe3e8);
	--pc-card-bg: var(--pd-card-bg, #ffffff);
	--pc-soft-bg: var(--pd-soft-bg, #f7f7f7);
	--pc-ink: var(--pd-ink, #303233);
	--pc-mute: var(--pd-mute, #6d87a1);
	--pc-mute-2: var(--pd-mute-2, #94a3b8);
	--pc-success: var(--pd-success, #16a34a);
	--pc-success-soft: var(--pd-success-soft, #d8f1e4);
	--pc-warn: var(--pd-warn, #d97706);
	--pc-warn-soft: var(--pd-warn-soft, #fff4e0);
	--pc-danger: var(--pd-danger, #dc2626);
	--pc-danger-soft: var(--pd-danger-soft, #fde2dd);
	--pc-info: var(--pd-info, #00a3fa);
	--pc-violet: #6d4bd8;
	--pc-violet-soft: #efeafc;
	--pc-radius: var(--pd-radius, 12px);
	--pc-radius-sm: var(--pd-radius-sm, 8px);
	--pc-shadow: var(--pd-card-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03));
}

/* ----- Card (matches .pd-card) ----- */
.pc-card {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	overflow: hidden;
}

/* The timeline card is the one that holds absolutely-positioned add menus
   between its rows. The last "Add a message here" sits near the bottom edge,
   so a clipping card cuts its menu in half. */
.pc-card--timeline { overflow: visible; }

.pc-card + .pc-card { margin-top: 16px; }

.pc-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--pc-line);
	flex-wrap: wrap;
}

.pc-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-card-sub {
	font-size: 12.5px;
	color: var(--pc-mute);
	font-weight: 400;
}

.pc-card-body { padding: 18px; }

/* ----- The vertical timeline ----- */
.pc-line-wrap {
	position: relative;
	padding-left: 34px;
}

.pc-line-wrap::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--pc-line-strong);
	border-radius: 2px;
}

.pc-node { position: relative; margin-bottom: 12px; }

.pc-node::before {
	content: "";
	position: absolute;
	left: -28px;
	top: 18px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pc-card-bg);
	border: 2px solid var(--pc-navy);
	box-shadow: 0 0 0 3px var(--pc-card-bg);
}

/* A fixed moment the owner can't delete — muted, filled. */
.pc-node--anchor::before {
	border-color: var(--pc-line-strong);
	background: var(--pc-line-strong);
	box-shadow: 0 0 0 4px var(--pc-card-bg);
}

.pc-node--off::before { border-color: var(--pc-line-strong); }

.pc-anchor {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0 8px;
	flex-wrap: wrap;
}

.pc-anchor-kicker {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pc-mute-2);
}

.pc-anchor-title { font-size: 13.5px; font-weight: 600; color: var(--pc-ink); }
.pc-anchor-meta { font-size: 12.5px; color: var(--pc-mute); }

/* ----- A message card ----- */
.pc-step {
	border: 1px solid var(--pc-line);
	background: var(--pc-card-bg);
	border-radius: var(--pc-radius-sm);
	padding: 13px 15px;
	box-shadow: var(--pc-shadow);
}

.pc-step--off { background: var(--pc-soft-bg); opacity: 0.75; }

.pc-step-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.pc-step-kicker {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pc-mute-2);
	margin-bottom: 3px;
}

.pc-step-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pc-ink);
	word-break: break-word;
}

.pc-step-preview {
	font-size: 12.5px;
	color: var(--pc-mute);
	margin: 0;
	word-break: break-word;
}

.pc-step-preview strong { color: var(--pc-ink); font-weight: 500; }

.pc-tools { display: flex; gap: 5px; flex: none; }

.pc-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-line-strong);
	background: var(--pc-card-bg);
	color: var(--pc-mute);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.pc-icon-btn:hover { color: var(--pc-ink); border-color: var(--pc-mute-2); }
.pc-icon-btn--danger:hover { color: var(--pc-danger); border-color: var(--pc-danger); }
.pc-icon-btn i { font-size: 13px; }

/* Inline timing / audience / channel row */
.pc-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 11px;
	margin-top: 11px;
	border-top: 1px dashed var(--pc-line);
}

.pc-inline-label { font-size: 12.5px; color: var(--pc-mute-2); font-weight: 500; }

/* Selects and the number box share the site's control height so a row never
   mixes a full control with a small one. */
.pc-select,
.pc-date,
.pc-number {
	height: 34px;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-line-strong);
	background: var(--pc-card-bg);
	color: var(--pc-ink);
	font-size: 12.5px;
	font-weight: 500;
	padding: 0 10px;
}

.pc-number { width: 60px; text-align: center; font-weight: 600; }
.pc-date { width: 150px; font-weight: 600; }
.pc-select { max-width: 220px; }

.pc-chan {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 9px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 600;
	background: #e9f0ff;
	color: #2456d6;
}

.pc-chan--sms { background: var(--pc-violet-soft); color: var(--pc-violet); }
.pc-chan i { font-size: 11px; }

.pc-cost-note { font-size: 11.5px; color: var(--pc-mute-2); }

/* Add-a-message affordance between steps */
.pc-add { display: flex; align-items: center; gap: 9px; margin: 2px 0 14px; }

.pc-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px dashed var(--pc-line-strong);
	background: transparent;
	color: var(--pc-mute);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}

.pc-add-btn:hover {
	border-color: var(--pc-navy);
	color: var(--pc-navy);
	background: #f2f6fb;
}

.pc-add-menu {
	position: absolute;
	z-index: 30;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	padding: 6px;
	width: 270px;
}

.pc-add-menu-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 9px 10px;
	border-radius: var(--pc-radius-sm);
	border: 0;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.pc-add-menu-item:hover { background: var(--pc-soft-bg); }
.pc-add-menu-item i { color: var(--pc-navy); margin-top: 2px; }
.pc-add-menu-name { font-weight: 600; font-size: 13px; color: var(--pc-ink); }
.pc-add-menu-desc { font-size: 11.5px; color: var(--pc-mute); }

/* Summary + footnote under the timeline */
.pc-summary {
	margin-top: 6px;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	padding: 12px 15px;
	font-size: 13px;
	color: var(--pc-ink);
}

.pc-note { font-size: 12px; color: var(--pc-mute); margin: 9px 2px 0; }

/* ----- Empty state (matches .{m}-empty-tab) ----- */
.pc-empty-tab { text-align: center; padding: 44px 20px; }

.pc-empty-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #e9f0ff;
	color: #2456d6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 14px;
}

.pc-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--pc-ink); }

.pc-empty-text {
	margin: 0 auto 18px;
	color: var(--pc-mute);
	font-size: 13px;
	max-width: 46ch;
}

.pc-starter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.pc-starter-btn {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 9px;
	padding: 9px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pc-mute);
	cursor: pointer;
}

.pc-starter-btn:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

/* The "(4 messages)" note inside a starter button. Bootstrap's .text-muted
   carries the body font, so inside a button it rendered in a different face
   than the label beside it — inherit explicitly instead. */
.pc-starter-btn-note {
	font: inherit;
	color: var(--pc-mute-2);
	font-weight: 500;
}

/* Label-left / switch-right row inside an empty state — mirrors
   .pd-empty-tab-toggle on the product-detail Variations tab, so the one
   control that turns a feature on sits where the owner is already looking. */
.pc-empty-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 300px;
	margin: 16px auto 0;
	padding: 10px 14px;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
}

.pc-empty-toggle-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--pc-ink);
}

/* ----- Cohort schedule ----- */
.pc-stats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }

.pc-stat {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	padding: 11px 15px;
	min-width: 130px;
}

.pc-stat-n { font-size: 20px; font-weight: 700; color: var(--pc-ink); line-height: 1.2; }
.pc-stat-n--upcoming { color: var(--pc-navy); }
.pc-stat-n--warn { color: var(--pc-warn); }
.pc-stat-l { font-size: 11.5px; color: var(--pc-mute); font-weight: 500; }

.pc-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 23px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.pc-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.pc-status--sent { background: var(--pc-success-soft); color: var(--pc-success); }
.pc-status--scheduled { background: #eef1f6; color: #5b6a86; }
.pc-status--soon { background: #e9f0ff; color: #2456d6; }
.pc-status--skipped { background: #eef1f6; color: #5b6a86; }
.pc-status--failed { background: var(--pc-danger-soft); color: var(--pc-danger); }
.pc-status--warn { background: var(--pc-warn-soft); color: var(--pc-warn); }

.pc-when { font-weight: 600; color: var(--pc-ink); }
.pc-when-sub { font-size: 11.5px; color: var(--pc-mute); }
.pc-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pc-row--muted td { opacity: 0.62; }

/* ----- A cohort's sent timeline: expandable entries ----- */
.pc-sent-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.pc-sent-main { display: block; min-width: 0; }

.pc-sent-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.pc-sent-count { font-size: 12px; color: var(--pc-mute); font-weight: 500; }

.pc-sent-chevron {
	color: var(--pc-mute-2);
	font-size: 13px;
	flex: none;
	margin-top: 4px;
	transition: transform 0.15s ease;
}

.pc-sent-chevron.is-open { transform: rotate(180deg); }

.pc-sent-detail {
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px dashed var(--pc-line);
}

.pc-people { list-style: none; margin: 0; padding: 0; }

.pc-person {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--pc-line);
	flex-wrap: wrap;
}

.pc-person:last-child { border-bottom: 0; }
.pc-person-who { display: flex; flex-direction: column; min-width: 0; }
.pc-person-name { font-size: 13px; font-weight: 500; color: var(--pc-ink); }

.pc-person-where {
	font-size: 11.5px;
	color: var(--pc-mute);
	word-break: break-word;
}

.pc-sent-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px dashed var(--pc-line);
}

/* ----- Empty inline (a sub-component with nothing in it) ----- */
.pc-empty-inline {
	padding: 18px;
	text-align: center;
	color: var(--pc-mute);
	font-size: 13px;
	border: 1px dashed var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
}

/* ----- The message editor, inline in the timeline (#3582) -----
   It replaces the message's own card in place, so it keeps the card's box and
   just grows: same border, same radius, accented so it reads as "this is the
   one you're working on" without leaving the timeline. */
.pc-editor {
	border: 1px solid var(--pc-navy);
	background: var(--pc-card-bg);
	border-radius: var(--pc-radius-sm);
	box-shadow: 0 0 0 3px #eaf0f7;
	padding: 15px 17px;
}

.pc-editor-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 13px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--pc-line);
}

.pc-editor-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-editor-grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.pc-editor-side { min-width: 0; }
.pc-editor-canvas { min-width: 0; }

.pc-field { margin-bottom: 15px; }

.pc-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--pc-mute);
	margin-bottom: 6px;
}

.pc-hint { font-size: 11.5px; color: var(--pc-mute-2); margin-top: 5px; }

.pc-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--pc-line-strong);
	border-radius: 9px;
	padding: 10px 12px;
	cursor: pointer;
	margin-bottom: 8px;
	background: var(--pc-card-bg);
}

.pc-radio--on { border-color: var(--pc-navy); background: #f2f6fb; }
.pc-radio-name { font-weight: 600; font-size: 13px; color: var(--pc-ink); }
.pc-radio-desc { font-size: 11.5px; color: var(--pc-mute); }

.pc-tag {
	display: inline-block;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: 6px;
	padding: 2px 7px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--pc-mute);
	margin: 0 4px 4px 0;
	cursor: pointer;
}

.pc-tag:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

.pc-sms-preview {
	max-width: 320px;
	margin: 0 auto;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 26px;
	padding: 18px 14px;
	box-shadow: var(--pc-shadow);
}

.pc-sms-bubble {
	background: #e9f0ff;
	color: #12213f;
	border-radius: 16px 16px 16px 4px;
	padding: 11px 13px;
	font-size: 12.5px;
	line-height: 1.5;
	word-break: break-word;
	white-space: pre-wrap;
}

.pc-sms-meta { text-align: center; font-size: 10.5px; color: var(--pc-mute-2); margin-top: 8px; }

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
	.pc-editor-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
	.pc-line-wrap { padding-left: 26px; }
	.pc-line-wrap::before { left: 7px; }
	.pc-node::before { left: -25px; }

	.pc-step-top { flex-direction: column; }

	/* Touch targets stay at 44px on a phone. flex: none matters — six buttons
	   in one row otherwise shrink below the minimum. */
	.pc-tools { width: 100%; margin-top: 8px; flex-wrap: wrap; }
	.pc-icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
	.pc-add-btn { width: 100%; height: 44px; justify-content: center; }
	.pc-select, .pc-number, .pc-date { height: 40px; }
	.pc-inline { gap: 6px; }
	.pc-tag { min-height: 44px; padding: 0 12px; }
	.pc-select { max-width: 100%; }
}