/* ============================================================
   Consent tracking (CONSENT_TRACKING_PLAN.md — epic #3467)
   .ct-* namespace: tracker table accents, per-participant
   timeline, and the reminder sequence strip. Loaded from the
   base layout so wire:navigate never paints an unstyled frame.
   ============================================================ */

/* ---------- Shared card (mirrors .bd-card / .pd-card chrome) ---------- */
.ct-card {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 12px;
	padding: 20px;
}
.ct-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
/* #3598 — a card heading is a SECTION LABEL, so it takes the settings kit's
   header treatment verbatim (`.set-section-head .set-t` in public/style.css:
   15px / 600 / 20px, ink #1f2933). Navy (#003264) is reserved for links,
   buttons and active tabs — using it for a heading made "When reminders go
   out" read as a different, louder register than every other settings
   section label on the page and across /settings. */
.ct-card-header h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #1f2933;
	margin: 0;
}
.ct-card-sub {
	font-size: 13px;
	color: var(--ed-text-muted);
	margin: 0 0 12px;
}

/* The tracker's bulk-action dropdown sits on the LEFT side of the toolbar.
   The base .pos-pill-menu is right-anchored (designed for filters on the
   right side), which makes the menu extend leftward and clip behind the
   sidebar. Anchor LEFT so it opens to the right (mirrors .ed-avail-actions-dd). */
.ct-actions-dd .pos-pill-menu {
	right: auto;
	left: 0;
	z-index: 1050;
}
/* The Actions pill shares the toolbar row with the 40px search box and the
   40px filter dropdowns; the base .pos-pill-button is 34px, which reads as a
   broken half-height control beside them. */
.ct-actions-dd,
.ct-actions-dd .pos-pill-button {
	min-height: 40px;
	height: 40px;
}

/* ---------- Warning banner (mirrors .pd-banner on the product detail page) ---------- */
.ct-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff4e0;
	border: 1px solid #f0c97f;
	color: #7a4a00;
	margin-bottom: 12px;
	font-size: 13px;
}
.ct-banner strong {
	display: block;
	margin-bottom: 2px;
	color: #5a3700;
}
.ct-banner a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ct-banner-icon {
	width: 18px;
	height: 18px;
	color: #d97706;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---------- Signed-progress bar (tracker rows + booking hero) ---------- */
.ct-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 140px;
}
.ct-bar {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 999px;
	background: #eef2f6;
	overflow: hidden;
	min-width: 70px;
}
.ct-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #2e9e5b;
}
.ct-bar i.ct-bar--low {
	background: #e2a03f;
}
.ct-bar-num {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}

/* ---------- Status pills ---------- */
.ct-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.ct-status--danger { background: #fdecec; color: #b42318; }
.ct-status--success { background: #e8f6ee; color: #1e7a44; }
.ct-status--pending { background: #fff4e0; color: #9a6700; }
.ct-status--muted { background: #eef2f6; color: var(--ed-text-muted); }

/* ---------- Participant rail (booking timeline) ---------- */
.ct-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.ct-layout { grid-template-columns: 1fr; }
}
.ct-rail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ct-rail button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 14px;
	color: #003264;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}
.ct-rail button:hover { background: #f4f7fa; }
.ct-rail button.ct-rail--on { background: #0032641a; font-weight: 600; }
.ct-rail .ct-rail-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ct-rail .ct-rail-count {
	font-size: 12px;
	color: var(--ed-text-muted);
	white-space: nowrap;
}
.ct-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.ct-dot--signed { background: #2e9e5b; }
.ct-dot--opened { background: #e2a03f; }
.ct-dot--none { background: #c6cfd9; }

/* ---------- Timeline ---------- */
.ct-tl {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.ct-tl li {
	position: relative;
	padding: 0 0 16px 26px;
}
.ct-tl li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2e9e5b;
}
.ct-tl li::after {
	content: '';
	position: absolute;
	left: 10.5px;
	top: 19px;
	bottom: 2px;
	width: 1px;
	background: #e4e9ef;
}
.ct-tl li:last-child { padding-bottom: 2px; }
.ct-tl li:last-child::after { display: none; }
.ct-tl li.ct-tl--fail::before { background: #d92d20; }
.ct-tl li.ct-tl--next::before {
	background: #fff;
	border: 2px dashed #9db2c6;
}
.ct-tl li.ct-tl--muted::before { background: #c6cfd9; }
.ct-tl-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.ct-tl-title {
	font-size: 14px;
	font-weight: 600;
	color: #003264;
}
.ct-tl-when {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	white-space: nowrap;
}
.ct-tl-meta {
	font-size: 13px;
	color: var(--ed-text-muted);
	margin-top: 1px;
}
.ct-tl-meta.ct-tl-meta--bad {
	color: #b42318;
	font-weight: 500;
}

/* ---------- Empty states ---------- */
.ct-empty-tab {
	text-align: center;
	color: var(--ed-text-muted);
	padding: 48px 16px;
	font-size: 14.5px;
}
.ct-empty-inline {
	color: var(--ed-text-muted);
	font-size: 13.5px;
	padding: 12px 0;
}

/* ---------- Reminder sequence (vertical, #3564) ----------
   Stacked step cards joined by a short connector line — the same
   top-to-bottom idiom as the consent timeline (.ct-tl). */
.ct-seq {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 460px;
	padding: 14px 2px;
}
.ct-seq-step {
	position: relative;
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	padding: 12px 14px;
	background: #fff;
}
/* #3584 — one vertical axis for the whole sequence. The cards, the Add-step
   button and this connector all line up on the cards' inner text edge: a card
   is 1px border + 14px padding, so its text starts 15px in, and a 2px line at
   margin-left 14px is centered on exactly that. Any other offset (this was
   28px) leaves the line floating between the card edge and the text. */
.ct-seq-link {
	width: 2px;
	height: 20px;
	background: #d7e1ea;
	margin-left: 14px;
	flex: 0 0 auto;
}
.ct-seq-step--trigger {
	background: #f2f6fa;
	border-color: #d7e1ea;
}
.ct-seq-step--stop {
	background: #fafbfc;
	border-style: dashed;
	color: var(--ed-text-muted);
}
.ct-seq-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ed-text-muted);
	margin-bottom: 3px;
}
/* #3598 — same ink as every other label on a settings page (`.set-label`
   is #1f2933). A step's title is content, not a link. */
.ct-seq-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #1f2933;
}
.ct-seq-when {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin-top: 2px;
}
.ct-seq-chan {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.ct-chan {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	color: #003264;
	background: #0032641a;
	border-radius: 999px;
	padding: 2px 9px;
}
.ct-seq-tools {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 2px;
}
/* Target size: these were 20x21px, under every guideline. Base is 32px — past
   WCAG 2.2 AA's 24px minimum for any pointer, without a mouse user getting two
   fat blocks in a small card corner. A coarse pointer (finger) gets the site's
   44x44 rule below, with a wider gap so two adjacent targets can't overlap
   into each other's hit area. The glyph stays 13px in all cases. */
.ct-seq-tools button {
	border: 0;
	background: transparent;
	color: var(--ed-text-muted);
	font-size: 13px;
	line-height: 1;
	padding: 0;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}
.ct-seq-tools button:hover { background: #eef2f6; color: #003264; }
@media (pointer: coarse), (max-width: 767px) {
	.ct-seq-tools { gap: 6px; }
	.ct-seq-tools button { min-width: 44px; min-height: 44px; }
}
.ct-seq-add {
	border: 1px dashed #9db2c6;
	background: transparent;
	color: #003264;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 12px;
	/* 14px matches a step card's padding so the label starts on the same
	   axis as every card's kicker text (#3584). */
	padding: 12px 14px;
	cursor: pointer;
	min-height: 44px;
	text-align: left;
}
.ct-seq-add:hover { background: #f4f7fa; }
.ct-seq-summary {
	background: #f7f9fb;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	/* #3598 — body copy, so settings ink, not navy. */
	color: #1f2933;
	margin-top: 6px;
}
.ct-seq-note {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin: 10px 0 0;
}

/* Links inside sentence copy must flow INLINE. public/style.css sets a
   global `a { display: block }`, which knocks any bare anchor in helper
   text onto its own line (bit the "Email templates" and "SMS" links,
   #3564). Scope every .ct-card anchor back to inline. */
.ct-card a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
}
/* Inline step editor (#3570) — rendered INSIDE the step card being edited
   (and the "New reminder" card). Two labeled 40px selects side by side,
   Done/Cancel on the row below, hint on its own line. The global
   .form-select carries 13px/11px vertical padding, which at a forced 40px
   height cut the option text in half — the 7px padding + 14px font here
   makes the 40px control render its label whole. */
.ct-seq-edit {
	margin-top: 6px;
}
.ct-seq-edit-fields {
	display: flex;
	gap: 10px;
}
.ct-seq-edit .ct-field {
	flex: 1 1 0;
	min-width: 0;
}
.ct-seq-edit .ct-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	/* #3598 — the settings kit's label ink (`.set-row .set-label`). */
	color: #1f2933;
	margin-bottom: 4px;
}
.ct-seq-edit .form-select {
	width: 100%;
	height: 40px;
	padding: 7px 32px 7px 12px;
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
}
.ct-seq-edit-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
/* 40px is the app's standard control height — these sit directly under the
   two 40px selects above them, and adjacent controls share a height. */
.ct-seq-edit-actions .btn {
	height: 40px;
	display: inline-flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.ct-step-edit-hint {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin-top: 8px;
}