/* ==========================================================================
   Customer messages (#3589 / #3590 / #3591) — Settings → Customer messages.
   --------------------------------------------------------------------------
   The timeline itself is the SAME one programs use: this file adds nothing
   that .pc-* already covers, and everything here is namespaced .cm-*. What it
   does add is the two things a shop-wide plan has and a program plan does
   not: the locked "we always send this" card, and the timing controls that
   moved off Settings → Email templates onto the card they control.

   Tokens are the .pc-* aliases (program-communications.css loads first in the
   base layout), which are themselves the .pd-* card tokens — so this is not a
   new card shape, it is the same one.
   ========================================================================== */

/* ----- Locked system card -----
   Grayed on purpose: the owner can reword it and retime it, but cannot delete
   it, and the surface says so before the padlock does. A cooler, slightly
   stronger tint than --pc-soft-bg — at #f7f7f7 the card read as white on a
   white page and the "we always send this" signal was invisible. */
.cm-step--system {
	background: #f3f6f9;
	border-color: var(--pc-line-strong);
}

.cm-lock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--pc-line);
	color: var(--pc-mute);
	white-space: nowrap;
}

.cm-lock i { font-size: 9px; }

/* ----- Timing row on a card -----
   Same dashed divider and same 40px-family controls as .pc-inline, so a
   locked card and an owner's own card read as one family. */
.cm-timing {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 11px;
	margin-top: 11px;
	border-top: 1px dashed var(--pc-line-strong);
}

.cm-timing-label {
	font-size: 13px;
	color: var(--pc-mute);
	font-weight: 500;
}

.cm-timing-note {
	font-size: 13px;
	color: var(--pc-mute);
}

/* The directions box sits under its own timing row, full width. */
.cm-timing-field { width: 100%; margin-top: 10px; }
.cm-timing-field label { font-size: 13px; color: var(--pc-mute); font-weight: 500; display: block; margin-bottom: 5px; }
.cm-timing-field textarea { max-width: 620px; }

/* ----- Cross-link banner -----
   Used at the top of this page and, in reverse, at the top of Settings →
   Email templates. One shape, two directions. */
.cm-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
}

.cm-banner-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	color: var(--pc-navy);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 14px;
}

.cm-banner-body { flex: 1; min-width: 220px; }
.cm-banner-body strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--pc-ink); }
.cm-banner-body span { font-size: 13px; color: var(--pc-mute); }

/* ⛔ public/style.css sets a global `a { display: block }`, so every link in a
   sentence here would break onto its own line and orphan the period after it.
   Scope it back for this module's copy — the same fix .ct-card carries. */
.cm-banner a:not(.btn),
.cm-step-note a:not(.btn),
.pc-step-preview a:not(.btn),
.pc-summary a:not(.btn),
.pc-note a:not(.btn) {
	display: inline;
}

/* The "Change the wording" / "Change when this sends" links under a card. */
.cm-step-note {
	font-size: 13px;
	color: var(--pc-mute);
	margin: 0;
}

.cm-step-note a { color: var(--pc-navy); font-weight: 600; text-decoration: none; }
.cm-step-note a:hover { text-decoration: underline; }

/* The card the owner was deep-linked to, so "change when this sends" lands
   somewhere obvious rather than just scrolling. */
.cm-step--focus {
	border-color: var(--pc-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

@media (max-width: 767.98px) {
	.cm-timing { gap: 6px; }
	.cm-banner { flex-direction: column; }
	/* A switch has to stay a real 44px target on a phone. */
	.cm-step-switch { min-height: 44px; display: flex; align-items: center; }
}

/* ========================================================================
   Line-of-business tabs, the inherit control and the resolved chain
   (#3592 / #3593 / #3594).
   ------------------------------------------------------------------------
   Same .cm-* namespace and the same --pc-* tokens as above. The timeline
   itself stays Program Communications' — reused, never restyled.
   ======================================================================== */

/* ----- The inherit banner: the one control, on every level ----- */
.cm-inherit {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--pc-card-bg, #fff);
	border: 1px solid var(--pc-line, #eef0f4);
	border-radius: var(--pc-radius, 12px);
	box-shadow: var(--pc-shadow);
	padding: 14px 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* Broken away — the accent state, so "this one is different" is visible
   without reading a word. */
.cm-inherit--own {
	border-color: var(--pc-navy, #003264);
	background: #f4f8fc;
}

.cm-inherit-icon {
	width: 34px;
	height: 34px;
	border-radius: var(--pc-radius-sm, 8px);
	background: var(--pc-soft-bg, #f7f7f7);
	color: var(--pc-mute, #6d87a1);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 14px;
}

.cm-inherit--own .cm-inherit-icon {
	background: #e3edf6;
	color: var(--pc-navy, #003264);
}

.cm-inherit-body { flex: 1 1 260px; min-width: 0; }

.cm-inherit-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pc-ink, #303233);
	margin-bottom: 2px;
}

.cm-inherit-text {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	line-height: 1.5;
}

/* public/style.css sets a global `a { display: block }`, so ANY bare <a> in
   sentence copy breaks onto its own line and orphans the trailing period.
   Every surface on this screen that can carry an inline link scopes it back.
   Verified in the browser: each sentence must flow as one paragraph. */
.cm-inherit a:not(.btn),
.cm-card a:not(.btn),
.cm-advanced a:not(.btn),
.cm-note a:not(.btn),
.pc-step-preview a:not(.btn) {
	display: inline;
}

.cm-inherit-act {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto;
}

.cm-inherit-switch-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pc-mute, #6d87a1);
	cursor: pointer;
}

/* ----- The resolved chain: All bookings -> Rentals [in use] -> This item ----- */
.cm-chain {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 9px;
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
}

.cm-chain-arrow { color: var(--pc-mute-2, #94a3b8); }
.cm-chain-now { color: var(--pc-ink, #303233); font-weight: 600; }

.cm-chain-win {
	background: var(--pc-success-soft, #d8f1e4);
	color: var(--pc-success, #16a34a);
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11.5px;
}

/* A level that exists but was beaten by a more specific one. */
.cm-chain-past { text-decoration: line-through; opacity: 0.6; }
.cm-chain-unset { color: var(--pc-mute-2, #94a3b8); }

/* ----- Locked system emails ----- */
.cm-step--locked { background: var(--pc-soft-bg, #f7f7f7); }

.pc-node--locked::before {
	border-color: var(--pc-line-strong, #dfe3e8);
	background: var(--pc-line-strong, #dfe3e8);
}

.cm-lockchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 600;
	background: #eef1f6;
	color: #5b6a86;
	letter-spacing: 0.02em;
}

.cm-lockchip i { font-size: 9px; }

/* A plan shown for information only — it is edited at the level that owns it. */
.cm-readonly { opacity: 0.78; }

.cm-note {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	margin: 14px 2px 0;
}

/* ----- The advanced door: "set up a different flow for one of them" ----- */
.cm-advanced {
	margin-top: 16px;
	border: 1px dashed var(--pc-line-strong, #dfe3e8);
	border-radius: var(--pc-radius-sm, 8px);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.cm-advanced-text {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	flex: 1 1 260px;
	line-height: 1.5;
}

.cm-advanced-text strong { color: var(--pc-ink, #303233); font-weight: 600; }

.cm-lob-pick { display: flex; gap: 8px; flex-wrap: wrap; }

.cm-lob-btn {
	height: 40px;
	padding: 0 14px;
	border-radius: var(--pc-radius-sm, 8px);
	border: 1px solid var(--pc-line-strong, #dfe3e8);
	background: var(--pc-card-bg, #fff);
	color: var(--pc-ink, #303233);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.cm-lob-btn:hover:not(:disabled) {
	border-color: var(--pc-navy, #003264);
	color: var(--pc-navy, #003264);
}

.cm-lob-btn:disabled { opacity: 0.5; cursor: default; }

/* ----- Line-of-business tabs (only once one exists) ----- */
.cm-scope-tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var(--pc-line, #eef0f4);
	margin-bottom: 18px;
	overflow-x: auto;
	/* The nav scrolls sideways on a phone rather than squashing. */
	-webkit-overflow-scrolling: touch;
}

.cm-scope-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 9px 2px 11px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--pc-mute, #6d87a1);
	white-space: nowrap;
	cursor: pointer;
}

.cm-scope-tab.active {
	color: var(--pc-navy, #003264);
	border-bottom-color: var(--pc-navy, #003264);
	font-weight: 600;
}

/* Status at a glance: Following all / Own messages. */
.cm-scope-chip {
	display: inline-block;
	margin-left: 7px;
	font-size: 10.5px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 20px;
	background: #eef1f6;
	color: #5b6a86;
	vertical-align: middle;
}

.cm-scope-chip--own {
	background: var(--pc-success-soft, #d8f1e4);
	color: var(--pc-success, #16a34a);
}

/* ----- Lazy placeholder ----- */
.cm-inherit--loading { opacity: 0.6; }

.cm-skeleton {
	display: block;
	background: var(--pc-soft-bg, #f7f7f7);
	border-radius: 6px;
	height: 12px;
}

.cm-skeleton--title { width: 180px; margin-bottom: 8px; }
.cm-skeleton--text { width: 320px; max-width: 100%; }
.cm-skeleton--row { height: 54px; margin-bottom: 12px; border-radius: var(--pc-radius-sm, 8px); }

/* ----- Phone ----- */
@media (max-width: 767.98px) {
	.cm-inherit { gap: 11px; padding: 13px 14px; }

	/* The switch drops under the copy instead of squeezing beside it, and
	   keeps a full-width tap target. */
	.cm-inherit-act {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
		padding-top: 4px;
	}

	.cm-advanced { gap: 12px; }
	.cm-lob-pick { width: 100%; }
	.cm-lob-btn { flex: 1 1 auto; min-height: 44px; }
	.cm-scope-tabs { gap: 16px; }
}

/* Touch targets on a phone. The tab row sat at 42px — under the 44px minimum
   the rest of the app holds to. */
@media (max-width: 767.98px) {
	.cm-scope-tab { min-height: 44px; padding-top: 11px; padding-bottom: 13px; }
	.cm-lob-btn { min-height: 44px; }
}

/* The default/custom pair either side of the switch (#3617, #3618): the active
   end is the one in ink, so state reads without parsing the sentence. */
.cm-inherit-opt { color: var(--pc-mute-2, #93a5b8); font-weight: 500; }
.cm-inherit-opt--on { color: var(--pc-navy, #003264); font-weight: 600; }

/* #3621 — the two states are not shades of the same thing: default is the
   inherited, quieter one; custom is a deliberate choice, so it carries the
   brand navy rather than a second gray. */
.cm-scope-chip { background: #eef1f6; color: #5b6a86; }
.cm-scope-chip--own {
	background: color-mix(in srgb, var(--pc-navy, #003264) 12%, #fff);
	color: var(--pc-navy, #003264);
}

/* #3622 — where a line of business gets its own flow, at the top of All
   bookings rather than a tab nobody asked for. */
.cm-scope-switches {
	background: var(--pc-soft-bg, #f7f7f7);
	border: 1px solid var(--pc-line, #eef0f4);
	border-radius: var(--pc-radius-sm, 10px);
	padding: 14px 16px;
	margin-bottom: 18px;
}

.cm-scope-switches-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--pc-ink, #16233a);
	margin-bottom: 10px;
}

.cm-help-dot { color: var(--pc-mute-2, #93a5b8); font-size: 12.5px; cursor: help; }

.cm-scope-switch-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }

.cm-scope-switch { display: flex; align-items: center; gap: 10px; }

.cm-scope-switch-label {
	font-size: 13px;
	color: var(--pc-mute, #6d87a1);
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.cm-scope-switch { width: 100%; justify-content: space-between; min-height: 44px; }
}