/* ============================================================================
   TeacherStore Marketing Pipeline — front-end design system

   Follows the Magic Marketing Tool design: Inter for text, Playfair Display for
   headings, IBM Plex Mono for small labels and numbers. Warm neutrals with a
   single red for primary actions and sage green for approval.

   Scoped to .tsmp-app so it never bleeds into the Elementor / Hello theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

.tsmp-app {
	/* ---- Design tokens, from the Magic Marketing Tool sheet ---- */
	--ts-fri-yay: #c25f4e;      /* primary action */
	--ts-mascot: #b48970;       /* primary hover, eyebrow labels */
	--ts-sage: #7a9b8a;         /* approve */
	--ts-sage-dark: #5f7a6c;
	--ts-sage-light: #e4f0ea;
	--ts-gold: #c9a96e;
	--ts-gold-light: #f6efe1;
	--ts-dust: #c4b9ae;         /* muted text, disabled */
	--ts-ivory: #f3ede3;
	--ts-cream: #faf7f2;
	--ts-hallway: #f0efee;

	/* Names the existing components already use, remapped onto the new palette
	   so every screen shifts at once rather than half-and-half. */
	--ts-accent: var(--ts-fri-yay);
	--ts-accent-700: var(--ts-mascot);
	--ts-accent-50: #f5e8e2;
	--ts-blush: #e8c8c2;
	--ts-sand: var(--ts-cream);
	--ts-ink: #1c1a18;
	--ts-ink-70: #57524d;
	--ts-ink-45: var(--ts-dust);
	--ts-line: #d8d4ce;
	--ts-line-2: #e8e4de;
	--ts-card: #ffffff;
	--ts-green: var(--ts-sage-dark);
	--ts-green-50: var(--ts-sage-light);
	--ts-amber: #b07a1e;
	--ts-amber-50: var(--ts-gold-light);
	--ts-violet: #6d28d9;
	--ts-violet-50: #efe9fd;
	--ts-blue: #2563eb;
	--ts-blue-50: #e6efff;
	--ts-red: #b8433a;
	--ts-red-50: #fcebe9;

	--ts-radius: 12px;
	--ts-radius-sm: 4px;
	--ts-radius-pill: 100px;
	--ts-shadow-sm: 0 1px 3px rgba(28,26,24,.04);
	--ts-shadow: 0 4px 16px rgba(28,26,24,.07);
	--ts-shadow-lg: 0 12px 40px rgba(28,26,24,.10);
	--ts-ease: cubic-bezier(.22, 1, .36, 1);

	--ts-ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--ts-ff-display: 'Playfair Display', Georgia, serif;
	--ts-ff-mono: 'IBM Plex Mono', Consolas, monospace;

	max-width: 1040px;
	margin: 0 auto;
	padding: 4px;
	color: var(--ts-ink);
	font-family: var(--ts-ff-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.tsmp-app *, .tsmp-app *::before, .tsmp-app *::after { box-sizing: border-box; }

.tsmp-app h2, .tsmp-app h3, .tsmp-app h4 {
	font-family: var(--ts-ff-display); color: var(--ts-ink);
	font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0;
}
.tsmp-app h3 { font-size: 1.6rem; margin: 0 0 .35rem; }
.tsmp-app h4 { font-size: 1.05rem; }
.tsmp-app p { margin: 0 0 .9rem; }
.tsmp-app a { color: var(--ts-accent-700); }

/* ---------- Section intro ---------- */
.tsmp-intro { color: var(--ts-ink-70); max-width: 64ch; margin: 0 0 1.6rem; }

/* ---------- Notices / messages ---------- */
.tsmp-notice {
	display: flex; gap: 10px; align-items: flex-start;
	background: var(--ts-amber-50); border: 1px solid #f0deb4; color: #7a5a12;
	padding: 13px 16px; border-radius: var(--ts-radius-sm); margin: 16px 0; font-size: .92rem;
}
.tsmp-msg { min-height: 1.2em; margin: 12px 0 0; color: var(--ts-ink-45); font-size: .9rem; font-weight: 500; }
.tsmp-error { color: var(--ts-red); }

/* GHL "connect your store" prompt + connected confirmation. */
.tsmp-notice--ok {
	background: #effaf3; border-color: #bfe6cd; color: #1f7a44;
	justify-content: space-between; align-items: center;
}
.tsmp-disconnect {
	color: var(--ts-red, #c0392b); font-weight: 600; font-size: .85rem; text-decoration: underline; white-space: nowrap;
}
.tsmp-disconnect:hover { opacity: .8; }

/* Connected store card with per-channel status (Pinterest / YouTube). */
.tsmp-store-card {
	background: #effaf3; border: 1px solid #bfe6cd; border-radius: var(--ts-radius-sm);
	padding: 14px 16px; margin: 16px 0;
}
.tsmp-store-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.tsmp-store-title { font-weight: 700; color: #1f7a44; }
.tsmp-store-links { display: flex; gap: 14px; align-items: center; }
.tsmp-store-links a { font-size: .85rem; font-weight: 600; text-decoration: underline; }
.tsmp-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tsmp-channel {
	display: inline-flex; gap: 5px; align-items: center;
	padding: 4px 11px; border-radius: 14px; font-size: .82rem; font-weight: 600;
	background: #fff; border: 1px solid #d8e6dd;
}
.tsmp-channel.is-on { color: #1f7a44; border-color: #bfe6cd; }
.tsmp-channel.is-off { color: var(--ts-ink-45, #6b6661); }
.tsmp-channel.is-off em { font-style: normal; color: #b3261e; font-weight: 500; }
.tsmp-channel-hint { margin: 10px 0 0; font-size: .85rem; color: var(--ts-ink-45, #6b6661); }

/* Per-teacher Pinterest board picker. */
.tsmp-board { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d8e6dd; }
.tsmp-board-label { font-weight: 600; font-size: .9rem; width: 100%; }
.tsmp-board-select, .tsmp-board-manual { padding: 8px 10px; border: 1px solid var(--ts-line, #e0d8d4); border-radius: 8px; font: inherit; min-width: 200px; }
.tsmp-board-msg { font-size: .85rem; font-weight: 600; color: #1f7a44; }
.tsmp-board-msg.tsmp-error { color: var(--ts-red, #c0392b); }

/* Saved-board view (chip + change/remove) vs entry view */
.tsmp-board-saved, .tsmp-board-entry { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; width: 100%; }
.tsmp-board-saved[hidden], .tsmp-board-entry[hidden] { display: none; }
.tsmp-board-chip {
	display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
	padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid #bfe6cd;
	color: #1f7a44; font-weight: 600; font-size: .88rem;
}
.tsmp-board-savedname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsmp-board-remove {
	appearance: none; background: none; border: none; cursor: pointer; padding: 4px 6px; font: inherit;
	font-weight: 600; font-size: .82rem; color: var(--ts-red, #c0392b); text-decoration: underline;
}
.tsmp-board-remove:hover { opacity: .8; }
.tsmp-board-help { width: 100%; margin: 4px 0 0; font-size: .82rem; color: var(--ts-ink-45, #6b6661); }

/* Approval page: send-a-test (emails + SMS) box. */
.tsmp-testsend {
	margin-top: 22px; padding: 16px 18px; border: 1px dashed var(--ts-line, #e8c8c2);
	border-radius: var(--ts-radius-sm); background: var(--ts-surface, #fff);
}
.tsmp-testsend h4 { margin: 0 0 4px; font-size: 1rem; }
.tsmp-testsend .description { margin: 0 0 10px; }
.tsmp-testsend-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tsmp-testsend-form input { padding: 8px 11px; border: 1px solid var(--ts-line, #e0d8d4); border-radius: 8px; font: inherit; }
.tsmp-testsend-form input[type="email"] { min-width: 220px; }

/* Approval page: send-to-your-contacts panel. */
.tsmp-sendlist {
	margin-top: 18px; padding: 16px 18px; border: 1px solid var(--ts-line, #e8c8c2);
	border-radius: var(--ts-radius-sm); background: var(--ts-surface, #fff);
}
.tsmp-sendlist h4 { margin: 0 0 4px; font-size: 1rem; }
.tsmp-sendlist .description { margin: 0 0 10px; }
.tsmp-selectall { display: inline-flex; gap: 7px; align-items: center; margin: 4px 0 8px; cursor: pointer; }
.tsmp-contacts-list { max-height: 280px; overflow: auto; border: 1px solid #efe6e3; border-radius: 8px; padding: 4px; margin-bottom: 12px; }
.tsmp-contact-row { display: flex; gap: 9px; align-items: center; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.tsmp-contact-row:hover { background: var(--ts-bg, #f6f3f2); }
.tsmp-contact-name { font-weight: 600; }
.tsmp-contact-email { color: var(--ts-ink-45, #6b6661); font-size: .85rem; }
.tsmp-sendlist-msg { min-height: 1.2em; margin: 10px 0 0; font-size: .9rem; font-weight: 500; color: var(--ts-ink-45, #6b6661); }

/* Approval page: "add video to product" one-click CTA. */
.tsmp-attachvideo { margin-top: 14px; }
.tsmp-attachvideo .description { margin: 6px 0 0; }
.tsmp-attachvideo-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .9rem; font-weight: 500; color: #1f7a44; }
.tsmp-attachvideo-msg.tsmp-error { color: var(--ts-red, #c0392b); }

/* Live build progress (approval page while the campaign generates). */
.tsmp-progress { padding: 10px 0 4px; }
.tsmp-progress-title { margin: 0 0 16px; }
.tsmp-progress-list { list-style: none; margin: 0; padding: 0; }
.tsmp-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: .98rem; color: var(--ts-ink-45, #6b6661); }
.tsmp-step-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; box-sizing: border-box; }
.tsmp-step.is-done { color: var(--ts-ink, #1c1a18); }
.tsmp-step.is-done .tsmp-step-ic { background: #edfaf1; color: #1f7a44; }
.tsmp-step.is-done .tsmp-step-ic::before { content: '\2713'; }
.tsmp-step.is-wait .tsmp-step-ic { border: 2px solid #e3dcd8; }
.tsmp-step.is-active { color: var(--ts-ink, #1c1a18); font-weight: 600; }
.tsmp-step.is-active .tsmp-step-ic { border: 2px solid var(--ts-accent, #dc7a62); border-top-color: transparent; animation: ts-spin .7s linear infinite; }
.tsmp-progress-note { margin-top: 16px; color: var(--ts-ink-45, #6b6661); font-size: .88rem; }
.tsmp-connect-card {
	display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between;
	background: var(--ts-surface, #fff); border: 1px solid var(--ts-line, #e8c8c2);
	padding: 16px 18px; border-radius: var(--ts-radius-sm); margin: 16px 0;
}
.tsmp-connect-card p { margin: 0; color: var(--ts-ink-45); font-size: .94rem; }

/* ---------- Buttons ---------- */
.tsmp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 20px; border-radius: 12px; border: 1.5px solid var(--ts-line);
	background: #fff; color: var(--ts-ink); cursor: pointer;
	font-family: inherit; font-weight: 600; font-size: .92rem; line-height: 1;
	transition: transform .06s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.tsmp-btn:hover { background: var(--ts-sand); border-color: var(--ts-line); transform: translateY(-1px); }
.tsmp-btn:active { transform: translateY(0); }
.tsmp-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ts-accent-50); border-color: var(--ts-accent); }
.tsmp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.tsmp-btn-primary {
	background: var(--ts-accent); border-color: var(--ts-accent); color: #fff;
	box-shadow: 0 6px 16px rgba(220,122,98,.28);
}
.tsmp-btn-primary:hover { background: var(--ts-accent-700); border-color: var(--ts-accent-700); box-shadow: 0 8px 22px rgba(220,122,98,.34); }
.tsmp-btn-approve { background: var(--ts-green); border-color: var(--ts-green); color: #fff; box-shadow: 0 6px 16px rgba(47,143,91,.22); }
.tsmp-btn-approve:hover { filter: brightness(1.03); }

/* <a> styled as a button: the theme's `.tsmp-app a` (accent color + underline) outranks
   `.tsmp-btn-*` on specificity, so restate button text colors and kill the underline. */
.tsmp-app a.tsmp-btn { text-decoration: none; color: var(--ts-ink); }
.tsmp-app a.tsmp-btn:hover { text-decoration: none; }
.tsmp-app a.tsmp-btn-primary, .tsmp-app a.tsmp-btn-approve { color: #fff; }
.tsmp-app a.tsmp-btn-ghost { color: var(--ts-accent-700); }
.tsmp-app a.tsmp-btn-ghost:hover { color: #fff; }

/* --- Elementor override --- Elementor's global `.elementor-kit-NN button` (0,1,1)
   beats our `.tsmp-btn` (0,1,0) and rewrites padding/background/colour. Restate the
   whole button system scoped to `.tsmp-app` (0,2,0) so ours always wins. */
/* Buttons are uppercase and letter-spaced in the new design — they read as
   deliberate actions rather than links, which matters on a page where almost
   everything else is text the teacher is reading. */
.tsmp-app .tsmp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 32px; border-radius: var(--ts-radius-sm);
	border: 1.5px solid transparent; background: #fff; color: var(--ts-ink);
	font-family: var(--ts-ff-body); font-weight: 700; font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; line-height: 1;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: all .2s var(--ts-ease);
}
.tsmp-app .tsmp-btn { border-color: var(--ts-ink); }
.tsmp-app .tsmp-btn:hover { background: var(--ts-ink); color: #fff; }
.tsmp-app .tsmp-btn:disabled { background: var(--ts-line); border-color: var(--ts-line); color: var(--ts-dust); cursor: not-allowed; }
.tsmp-app .tsmp-btn:disabled:hover { background: var(--ts-line); color: var(--ts-dust); }

.tsmp-app .tsmp-btn-primary { background: var(--ts-fri-yay); border-color: var(--ts-fri-yay); color: #fff; }
.tsmp-app .tsmp-btn-primary:hover { background: var(--ts-mascot); border-color: var(--ts-mascot); color: #fff; }

/* Approving is a different kind of act from proceeding, so it gets its own
   colour rather than another red button competing for the same attention. */
.tsmp-app .tsmp-btn-approve { background: var(--ts-sage-dark); border-color: var(--ts-sage-dark); color: #fff; }
.tsmp-app .tsmp-btn-approve:hover { background: var(--ts-sage); border-color: var(--ts-sage); color: #fff; }

.tsmp-app .tsmp-btn-ghost { background: #fff; border-color: var(--ts-ink); color: var(--ts-ink); }
.tsmp-app .tsmp-btn-ghost:hover { background: var(--ts-ink); color: #fff; }
.tsmp-app .tsmp-btn.tsmp-btn-small { padding: 6px 16px; font-size: 11px; }
.tsmp-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.tsmp-btn.is-loading::after {
	content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: ts-spin .6s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }

.tsmp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }

/* ---------- Pills / status ---------- */
.tsmp-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 13px; border-radius: 999px;
	background: var(--ts-sand); color: var(--ts-ink-70);
	font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.tsmp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }

/* Run-state pills (dashboard) */
.tsmp-pill--created, .tsmp-pill--intakeinprogress, .tsmp-pill--intakecomplete { background: var(--ts-blue-50); color: #1d4ed8; }
.tsmp-pill--analyzing, .tsmp-pill--copygenerating, .tsmp-pill--mediaproducing, .tsmp-pill--assembled, .tsmp-pill--publishing { background: var(--ts-violet-50); color: var(--ts-violet); }
.tsmp-pill--awaitingreview, .tsmp-pill--revising { background: var(--ts-amber-50); color: var(--ts-amber); }
.tsmp-pill--approved, .tsmp-pill--complete { background: var(--ts-green-50); color: var(--ts-green); }
.tsmp-pill--assetincomplete, .tsmp-pill--errorpinrender, .tsmp-pill--error { background: var(--ts-red-50); color: var(--ts-red); }

/* Creative-status pills (approval) */
.tsmp-status--draft       { background: var(--ts-sand); color: var(--ts-ink-70); }
.tsmp-status--edited      { background: var(--ts-amber-50); color: var(--ts-amber); }
.tsmp-status--regenerated { background: var(--ts-violet-50); color: var(--ts-violet); }
.tsmp-status--approved    { background: var(--ts-green-50); color: var(--ts-green); }
.tsmp-status--publishing  { background: var(--ts-blue-50); color: var(--ts-blue); }
.tsmp-status--published   { background: var(--ts-blue-50); color: #1d4ed8; }
.tsmp-status--error       { background: var(--ts-red-50); color: var(--ts-red); }

/* ---------- Dashboard ---------- */
.tsmp-dashboard h3 { margin-top: .4rem; }
.tsmp-runs {
	width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px;
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	overflow: hidden; box-shadow: var(--ts-shadow-sm);
}
.tsmp-runs th {
	text-align: left; padding: 14px 18px; font-size: .72rem; text-transform: uppercase;
	letter-spacing: .06em; color: var(--ts-ink-45); background: var(--ts-sand);
	border-bottom: 1px solid var(--ts-line);
}
.tsmp-runs td { padding: 16px 18px; border-bottom: 1px solid var(--ts-line-2); vertical-align: middle; }
.tsmp-runs tr:last-child td { border-bottom: none; }
.tsmp-runs tbody tr { transition: background .14s ease; }
.tsmp-runs tbody tr:hover { background: #fcfaf8; }
.tsmp-runs a { color: var(--ts-accent-700); font-weight: 600; text-decoration: none; }
.tsmp-runs a:hover { text-decoration: underline; }

/* ---------- Card surface (intake form + uploads) ---------- */
.tsmp-intake h3 { margin-bottom: 1.2rem; }
.tsmp-intake form {
	background: var(--ts-card); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); padding: 26px 26px 22px; box-shadow: var(--ts-shadow-sm);
}

/* ---------- Forms ---------- */
.tsmp-field { display: block; margin: 0 0 22px; }
.tsmp-field > span { display: block; font-weight: 600; margin-bottom: 9px; color: var(--ts-ink); font-size: .95rem; }
.tsmp-field textarea, .tsmp-field input[type=number], .tsmp-copy, .tsmp-prompt-input {
	width: 100%; padding: 13px 15px; border: 1.5px solid var(--ts-line); border-radius: 12px;
	font: inherit; font-size: .95rem; color: var(--ts-ink); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tsmp-field textarea { min-height: 84px; resize: vertical; }
.tsmp-field textarea:focus, .tsmp-field input[type=number]:focus, .tsmp-copy:focus, .tsmp-prompt-input:focus {
	outline: none; border-color: var(--ts-accent); box-shadow: 0 0 0 4px var(--ts-accent-50); background: #fff;
}
.tsmp-field textarea::placeholder, .tsmp-prompt-input::placeholder { color: var(--ts-ink-45); }
.tsmp-field-price input { max-width: 220px; }

/* ---------- Upload sections (intake) ---------- */
.tsmp-uploads {
	margin: 0 0 26px; padding: 22px; text-align: left;
	border: 2px dashed var(--ts-blush); border-radius: var(--ts-radius);
	background: linear-gradient(180deg, #fff, var(--ts-accent-50));
	transition: border-color .15s ease, background .15s ease;
}
.tsmp-uploads.is-drag { border-color: var(--ts-accent); background: var(--ts-accent-50); }
.tsmp-uploads > h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tsmp-uploads > h4::before {
	content: ""; width: 22px; height: 22px; background: var(--ts-accent); border-radius: 7px; flex: none;
	-webkit-mask: center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11 16V7.8L8.4 10.4 7 9l5-5 5 5-1.4 1.4L13 7.8V16h-2Zm-6 4q-.8 0-1.4-.6T3 18v-3h2v3h14v-3h2v3q0 .8-.6 1.4T19 20H5Z'/%3E%3C/svg%3E") center/18px no-repeat;
	mask: center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 16V7.8L8.4 10.4 7 9l5-5 5 5-1.4 1.4L13 7.8V16h-2Zm-6 4q-.8 0-1.4-.6T3 18v-3h2v3h14v-3h2v3q0 .8-.6 1.4T19 20H5Z'/%3E%3C/svg%3E");
}
.tsmp-uploads > .tsmp-help { margin: 0 0 16px; font-size: .9rem; color: var(--ts-ink-70); }

/* PDF + images sub-cards */
.tsmp-upbox { background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); padding: 16px; margin: 0 0 14px; }
.tsmp-uphead { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.tsmp-uplabel { font-weight: 700; font-size: .98rem; }
.tsmp-req {
	font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	padding: 2px 9px; border-radius: 999px; background: var(--ts-accent-50); color: var(--ts-accent-700);
}
.tsmp-req-soft { background: var(--ts-sand); color: var(--ts-ink-45); }
.tsmp-upbox .tsmp-help { margin: 0 0 12px; font-size: .86rem; color: var(--ts-ink-70); }
.tsmp-btn-ghost {
	padding: 9px 16px; font-size: .85rem; font-weight: 600;
	color: var(--ts-accent-700); background: var(--ts-accent-50); border-color: var(--ts-blush);
}
.tsmp-btn-ghost:hover { color: #fff; background: var(--ts-accent); border-color: var(--ts-accent); }
.tsmp-btn-ghost:focus-visible { box-shadow: 0 0 0 4px var(--ts-accent-50); border-color: var(--ts-accent); }
.tsmp-uploads .tsmp-btn-ghost { display: inline-flex; margin: 0; }

/* Labeled upload slots (explicit type per box) */
.tsmp-slot { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.tsmp-slot.is-drag { border-color: var(--ts-accent); background: var(--ts-accent-50); box-shadow: 0 0 0 4px var(--ts-accent-50); }
.tsmp-slot-ic { font-size: 1.1rem; line-height: 1; }
.tsmp-uploads-note { margin: 2px 0 16px; font-size: .84rem; color: var(--ts-ink-45); font-style: italic; }

/* Per-slot info icon + hover/tap popover (size, quantity, template, usage) */
.tsmp-info {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; flex: none;
	background: var(--ts-sand); color: var(--ts-ink-45);
	font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; user-select: none;
}
.tsmp-info:hover, .tsmp-info:focus { background: var(--ts-accent); color: #fff; outline: none; }
.tsmp-info-pop {
	position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	z-index: 30; width: min(250px, 74vw); padding: 10px 12px; border-radius: 10px;
	background: var(--ts-ink); color: #fff; font-size: .76rem; font-weight: 400; font-style: normal;
	line-height: 1.5; text-align: left; box-shadow: var(--ts-shadow-lg);
	opacity: 0; visibility: hidden; transition: opacity .14s ease; pointer-events: none;
}
.tsmp-info-pop strong { color: #fff; font-weight: 700; }
.tsmp-info:hover .tsmp-info-pop, .tsmp-info:focus .tsmp-info-pop { opacity: 1; visibility: visible; }

/* Tabs: From Canva / Upload manually */
/* Segmented control — the active tab is a raised, filled pill (clearer than an underline). */
.tsmp-app .tsmp-tabs {
	display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px;
	background: var(--ts-sand, #f2ede6); border: 1px solid var(--ts-line); border-radius: 12px;
}
.tsmp-app .tsmp-tab {
	appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
	padding: 9px 18px; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ts-ink-45);
	border-radius: 9px; transition: color .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tsmp-app .tsmp-tab:hover { color: var(--ts-ink); background: rgba(0,0,0,.04); }
.tsmp-app .tsmp-tab.is-active {
	color: var(--ts-accent-700); background: #fff; border-color: var(--ts-line);
	box-shadow: 0 1px 5px rgba(0,0,0,.10);
}
.tsmp-app .tsmp-tabpanel[hidden] { display: none; }

/* "From Canva" design picker */
.tsmp-canva-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 16px; }
/* Scoped under .tsmp-app so Elementor's `.elementor-kit button` (padding/bg) can't
   bleed into these cards and make the first one look "selected". */
.tsmp-app .tsmp-canva-item {
	position: relative; appearance: none; cursor: pointer; text-align: left; padding: 0; overflow: hidden;
	background: #fff; border: 2px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	display: flex; flex-direction: column; box-shadow: none;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.tsmp-app .tsmp-canva-item:hover { background: #fff; border-color: var(--ts-blush); box-shadow: var(--ts-shadow-sm); transform: none; }
.tsmp-app .tsmp-canva-item:focus-visible { outline: none; border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-50); }
.tsmp-app .tsmp-canva-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--ts-sand); }
.tsmp-app .tsmp-canva-title { padding: 8px 10px; font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--ts-ink); }
.tsmp-app .tsmp-canva-item.is-sel { border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-50); }
.tsmp-app .tsmp-canva-item.is-sel::after {
	content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--ts-accent); color: #fff; font-size: 13px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.tsmp-canva-status { min-height: 1.2em; margin: 10px 0 0; font-size: .9rem; font-weight: 500; color: var(--ts-green); }
.tsmp-canva-status.tsmp-error { color: var(--ts-red); }

/* ---------- Dashboard: left vertical tabs ---------- */
.tsmp-dash-layout { display: flex; gap: 24px; align-items: flex-start; }
.tsmp-dash-nav {
	flex: 0 0 210px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px;
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	padding: 10px; box-shadow: var(--ts-shadow-sm);
}
.tsmp-app .tsmp-vtab {
	appearance: none; border: none; background: none; cursor: pointer; text-align: left; width: 100%;
	display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--ts-radius-sm);
	font: inherit; font-weight: 600; font-size: .92rem; color: var(--ts-ink-70);
	transition: background .14s ease, color .14s ease;
}
.tsmp-app .tsmp-vtab:hover { background: var(--ts-sand); color: var(--ts-ink); }
.tsmp-app .tsmp-vtab.is-active { background: var(--ts-accent-50); color: var(--ts-accent-700); }
.tsmp-vtab-ic { font-size: 1.05rem; line-height: 1; }
.tsmp-dash-body { flex: 1 1 auto; min-width: 0; }
.tsmp-vpanel[hidden] { display: none; }
.tsmp-vpanel > h3 { margin-bottom: .3rem; }
.tsmp-vpanel-hint { color: var(--ts-ink-45); margin: 0 0 1.4rem; font-size: .92rem; }

/* ---------- Intake: two-step tabs (Your files / About it) ---------- */
.tsmp-steptabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.tsmp-app .tsmp-steptab {
	appearance: none; border: 1.5px solid var(--ts-line); background: #fff; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
	font: inherit; font-weight: 600; font-size: .9rem; color: var(--ts-ink-45);
	transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.tsmp-app .tsmp-steptab:hover { color: var(--ts-ink); }
.tsmp-app .tsmp-steptab.is-active { border-color: var(--ts-accent); color: var(--ts-accent-700); background: var(--ts-accent-50); }
.tsmp-step-num {
	display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
	border-radius: 50%; background: var(--ts-sand); color: var(--ts-ink-45); font-size: .78rem; font-weight: 700;
}
.tsmp-app .tsmp-steptab.is-active .tsmp-step-num { background: var(--ts-accent); color: #fff; }
.tsmp-steppanel[hidden] { display: none; }
.tsmp-step-nav { margin-top: 18px; display: flex; justify-content: flex-end; }

@media (max-width: 720px) {
	.tsmp-dash-layout { flex-direction: column; gap: 14px; }
	.tsmp-dash-nav { flex-direction: row; width: 100%; position: static; overflow-x: auto; }
	.tsmp-app .tsmp-vtab { white-space: nowrap; }
}

/* PDF file chip */
.tsmp-filelist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tsmp-fileitem {
	display: flex; align-items: center; gap: 10px; justify-content: space-between;
	padding: 9px 12px; border: 1px solid var(--ts-line); border-radius: 10px; background: var(--ts-sand);
}
.tsmp-filename { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Remove (✕) control — shared by PDF chip + image thumbnails */
.tsmp-x {
	flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
	background: rgba(28,26,24,.06); color: var(--ts-ink-70); font-size: 12px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .14s ease, color .14s ease;
}
.tsmp-x:hover { background: var(--ts-red-50); color: var(--ts-red); }

/* Image thumbnails grid */
.tsmp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin-top: 12px; }
.tsmp-thumb { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--ts-line); background: var(--ts-sand); }
.tsmp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsmp-thumb .tsmp-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(20,18,16,.6); color: #fff; }
.tsmp-thumb .tsmp-x:hover { background: var(--ts-red); color: #fff; }

/* Dimension guidance */
.tsmp-dims { margin-top: 14px; font-size: .85rem; }
.tsmp-dims summary { cursor: pointer; font-weight: 600; color: var(--ts-accent-700); }
.tsmp-dims ul { margin: 10px 0 0; padding-left: 18px; color: var(--ts-ink-70); }
.tsmp-dims li { margin: 4px 0; }
.tsmp-dims em { color: var(--ts-accent-700); font-style: normal; font-weight: 600; }

.tsmp-uploads > .tsmp-btn { display: inline-flex; margin: 6px 0 0; }
.tsmp-asset-status { margin: 14px 0 0; font-size: .9rem; font-weight: 500; color: var(--ts-green); }
.tsmp-asset-status.tsmp-error { color: var(--ts-red); }

/* ---------- Approval ---------- */
.tsmp-approval-head {
	display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
	padding-bottom: 18px; border-bottom: 1px solid var(--ts-line);
}
.tsmp-approval-head h3 { margin: 0; }

.tsmp-creatives { display: grid; gap: 20px; grid-template-columns: repeat(6, 1fr); align-items: start; }
.tsmp-unit.span-full  { grid-column: span 6; } /* email + others — one per row */
.tsmp-unit.span-half  { grid-column: span 3; } /* product+video, blog+sms — two per row */
.tsmp-unit.span-third { grid-column: span 2; } /* Pinterest pins — three per row */
.tsmp-rowbreak { grid-column: 1 / -1; height: 0; margin: 0; padding: 0; border: 0; }

.tsmp-unit {
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	padding: 22px; box-shadow: var(--ts-shadow-sm);
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tsmp-unit:hover { box-shadow: var(--ts-shadow); border-color: var(--ts-line-2); transform: translateY(-2px); }
.tsmp-unit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tsmp-unit-head strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

.tsmp-img, .tsmp-video {
	max-width: 100%; width: 100%; border-radius: 12px; display: block; margin: 0 0 16px;
	border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow-sm); background: var(--ts-sand);
}
.tsmp-img { cursor: zoom-in; transition: transform .14s ease, box-shadow .18s ease; }
.tsmp-img:hover { transform: scale(1.01); box-shadow: var(--ts-shadow); }

/* ElevenLabs voice picker */
.tsmp-app .tsmp-voice-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tsmp-app .tsmp-voice-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	border: 1px solid var(--ts-line); border-radius: 10px; background: #fff;
}
.tsmp-app .tsmp-voice-item.is-sel { border-color: var(--ts-green, #1f7a44); background: rgba(31,122,68,.06); }
.tsmp-app .tsmp-voice-name { flex: 1 1 auto; font-weight: 600; }
.tsmp-app .tsmp-voice-play { flex: 0 0 auto; }
.tsmp-app .tsmp-voice-pick { flex: 0 0 auto; }
.tsmp-app .tsmp-voice-msg { display: inline-block; margin-top: 8px; font-size: .85rem; font-weight: 500; color: #1f7a44; }
.tsmp-app .tsmp-voice-msg.tsmp-error { color: var(--ts-red, #c0392b); }

/* Per-teacher email/SMS drip timing */
.tsmp-app .tsmp-drip { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tsmp-app .tsmp-drip-row { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.tsmp-app .tsmp-drip-row span { flex: 0 0 150px; }
.tsmp-app .tsmp-drip-in { width: 64px; padding: 6px 8px; border: 1px solid var(--ts-line); border-radius: 8px; }
.tsmp-app .tsmp-drip-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.tsmp-app .tsmp-drip-msg { font-size: .85rem; font-weight: 500; color: #1f7a44; }
.tsmp-app .tsmp-drip-msg.tsmp-error { color: var(--ts-red, #c0392b); }

/* Back-to-dashboard link (intake + approval) */
.tsmp-app .tsmp-backlink {
	display: inline-flex; align-items: center; gap: 5px; margin: 0 0 14px;
	font-size: .9rem; font-weight: 600; text-decoration: none;
	color: var(--ts-ink-soft, #6b6257); transition: color .14s ease;
}
.tsmp-app .tsmp-backlink:hover { color: var(--ts-accent-700, #b5502f); }

/* Canva connect/disconnect + return notice */
.tsmp-app .tsmp-notice {
	margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
	background: rgba(31,122,68,.10); border: 1px solid rgba(31,122,68,.30);
	color: var(--ts-green, #1f7a44); font-weight: 600; font-size: .95rem;
}
.tsmp-app .tsmp-canva-disconnect { margin: 12px 0 0; }
.tsmp-app .tsmp-linkbtn {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--ts-ink-soft, #6b6257); font-size: .85rem; text-decoration: underline;
}
.tsmp-app .tsmp-linkbtn:hover { color: var(--ts-ink, #2a2723); }
.tsmp-app .tsmp-help-sub { margin-top: 10px; font-size: .85rem; opacity: .8; }

/* Direct "open the live asset" link (created product page / raw video). */
.tsmp-app .tsmp-unit-link {
	display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px;
	font-size: .9rem; font-weight: 600; color: var(--ts-green, #1f7a44);
	text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.tsmp-app .tsmp-unit-link:hover { border-bottom-color: currentColor; }

/* Click-to-enlarge lightbox */
.tsmp-lightbox {
	position: fixed; inset: 0; z-index: 99999; cursor: zoom-out;
	display: flex; align-items: center; justify-content: center; padding: 24px;
	background: rgba(20,18,16,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	animation: ts-fade .12s ease;
}
.tsmp-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
.tsmp-email-preview {
	width: 100%; height: 460px; border: 1px solid var(--ts-line); border-radius: 12px;
	background: #fff; margin: 0 0 16px; box-shadow: var(--ts-shadow-sm);
}
/* Product image + video share a row — give their media the SAME height so the pair
   looks balanced. contain keeps the full frame visible (square cover + 9:16 video). */
.tsmp-unit.span-half .tsmp-img,
.tsmp-unit.span-half .tsmp-video {
	height: 400px;
	object-fit: contain;
}
.tsmp-copy { min-height: 96px; resize: vertical; }

/* Rendered markdown preview shown above the editable copy box, so the teacher
   reads formatted text instead of raw "##" and "**" markers. */
.tsmp-app .tsmp-rendered {
	margin: 0 0 12px;
	padding: 16px 18px;
	border: 1px solid var(--ts-line, #e4e0d8);
	border-radius: 12px;
	background: #fff;
	font-size: 15px;
	line-height: 1.65;
	max-height: 420px;
	overflow-y: auto;
}
.tsmp-app .tsmp-rendered > :first-child { margin-top: 0; }
.tsmp-app .tsmp-rendered > :last-child { margin-bottom: 0; }
.tsmp-app .tsmp-rendered h2 { font-size: 20px; margin: 18px 0 8px; line-height: 1.3; }
.tsmp-app .tsmp-rendered h3 { font-size: 17px; margin: 16px 0 6px; line-height: 1.3; }
.tsmp-app .tsmp-rendered h4 { font-size: 15px; margin: 14px 0 6px; line-height: 1.35; }
.tsmp-app .tsmp-rendered p  { margin: 0 0 12px; }
.tsmp-app .tsmp-rendered ul,
.tsmp-app .tsmp-rendered ol { margin: 0 0 12px; padding-left: 22px; }
.tsmp-app .tsmp-rendered li { margin-bottom: 5px; }
.tsmp-app .tsmp-rendered hr { border: 0; border-top: 1px solid var(--ts-line, #e4e0d8); margin: 16px 0; }
.tsmp-app .tsmp-rendered code {
	background: var(--ts-sand, #f6f3ec);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.92em;
}

.tsmp-prompt {
	display: flex; gap: 10px; margin: 16px 0 14px;
	padding: 12px; border-radius: 12px; background: var(--ts-sand);
}
.tsmp-prompt-input { flex: 1; background: #fff; }
.tsmp-prompt .tsmp-btn { white-space: nowrap; }
.tsmp-unit .tsmp-btn-approve { width: 100%; padding: 12px; }

/* Sticky publish bar */
.tsmp-approval-foot {
	position: sticky; bottom: 14px; z-index: 5;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
	padding: 16px 18px; margin-top: 24px;
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow);
}
.tsmp-approval-foot .tsmp-btn-primary { padding: 13px 28px; font-size: .95rem; }

/* ---------- Empty state + full-width children (progress view) ---------- */
.tsmp-creatives > p { color: var(--ts-ink-45); text-align: center; padding: 40px 0; font-weight: 500; grid-column: 1 / -1; }
.tsmp-creatives > .tsmp-progress { grid-column: 1 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.tsmp-app { font-size: 14.5px; }
	.tsmp-app h3 { font-size: 1.35rem; }
	.tsmp-intake form, .tsmp-unit { padding: 18px; }
	.tsmp-prompt { flex-direction: column; }
	.tsmp-img, .tsmp-video { max-width: 100%; }
	.tsmp-email-preview { height: 380px; }
	.tsmp-runs th:nth-child(1), .tsmp-runs td:nth-child(1) { display: none; } /* hide date on narrow */
	/* Collapse the creative grid: pins 2-up, everything else full width. */
	.tsmp-creatives { grid-template-columns: repeat(2, 1fr); }
	.tsmp-unit.span-full, .tsmp-unit.span-half { grid-column: 1 / -1; }
	.tsmp-unit.span-third { grid-column: span 1; }
}

/* ==================================================================
   My Projects — searchable list + the five-stage project page
   ================================================================== */

.tsmp-app .tsmp-newproject {
	display: flex; gap: 10px; flex-wrap: wrap;
	margin: 4px 0 18px; padding: 14px;
	background: var(--ts-sand); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-newproject-title {
	flex: 1; min-width: 220px;
	padding: 11px 14px; font-size: 15px;
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	background: #fff; color: var(--ts-ink);
}
.tsmp-app .tsmp-newproject-title:focus {
	outline: none; border-color: var(--ts-accent);
	box-shadow: 0 0 0 3px var(--ts-accent-50);
}

.tsmp-app .tsmp-projfilters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tsmp-app .tsmp-proj-search { flex: 1; min-width: 200px; }
.tsmp-app .tsmp-proj-search,
.tsmp-app .tsmp-proj-status {
	padding: 10px 13px; font-size: 14px;
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	background: #fff; color: var(--ts-ink);
}
.tsmp-app .tsmp-proj-search:focus,
.tsmp-app .tsmp-proj-status:focus {
	outline: none; border-color: var(--ts-accent);
	box-shadow: 0 0 0 3px var(--ts-accent-50);
}

.tsmp-app .tsmp-projlist { display: flex; flex-direction: column; gap: 10px; }
.tsmp-app .tsmp-projempty { color: var(--ts-ink-45); padding: 22px 4px; margin: 0; }

.tsmp-app .tsmp-projrow {
	display: flex; align-items: center; gap: 14px;
	padding: 15px 17px; text-decoration: none;
	background: var(--ts-card); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tsmp-app .tsmp-projrow:hover {
	border-color: var(--ts-accent);
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.tsmp-app .tsmp-projrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tsmp-app .tsmp-projrow-title {
	font-weight: 600; font-size: 15.5px; color: var(--ts-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tsmp-app .tsmp-projrow-meta { font-size: 12.5px; color: var(--ts-ink-45); }
.tsmp-app .tsmp-projrow-act {
	flex: none; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
	background: transparent; color: var(--ts-ink-45);
	border: 1px solid var(--ts-line); border-radius: 999px;
}
.tsmp-app .tsmp-projrow-act:hover { color: var(--ts-ink); border-color: var(--ts-ink-45); }

/* Status badges — colour carries the state, so it reads at a glance. */
.tsmp-app .tsmp-badge {
	flex: none; padding: 5px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.tsmp-app .tsmp-badge--progress   { background: var(--ts-sand);       color: var(--ts-ink-70); }
.tsmp-app .tsmp-badge--processing { background: var(--ts-blue-50);    color: var(--ts-blue); }
.tsmp-app .tsmp-badge--review     { background: var(--ts-amber-50);   color: var(--ts-amber); }
.tsmp-app .tsmp-badge--published  { background: var(--ts-green-50);   color: var(--ts-green); }
.tsmp-app .tsmp-badge--archived   { background: var(--ts-line-2);     color: var(--ts-ink-45); }
.tsmp-app .tsmp-badge--error      { background: var(--ts-red-50);     color: var(--ts-red); }

/* ---- Project page ---- */

.tsmp-app .tsmp-back {
	display: inline-block; margin-bottom: 14px;
	font-size: 13.5px; color: var(--ts-ink-45); text-decoration: none;
}
.tsmp-app .tsmp-back:hover { color: var(--ts-accent); }

.tsmp-app .tsmp-project-head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.tsmp-app .tsmp-project-head h3 { margin: 0; }
.tsmp-app .tsmp-project-meta { margin: 0 0 20px; font-size: 13px; color: var(--ts-ink-45); }

.tsmp-app .tsmp-stages {
	display: flex; gap: 6px; flex-wrap: wrap;
	list-style: none; margin: 0 0 20px; padding: 0; counter-reset: none;
}
.tsmp-app .tsmp-stage {
	flex: 1; min-width: 110px;
	display: flex; align-items: center; gap: 9px;
	padding: 11px 13px; border-radius: var(--ts-radius-sm);
	background: var(--ts-sand); color: var(--ts-ink-45); font-size: 13.5px;
}
.tsmp-app .tsmp-stage-n {
	flex: none; width: 23px; height: 23px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--ts-line);
	font-size: 12px; font-weight: 700;
}
.tsmp-app .tsmp-stage.is-done { background: var(--ts-green-50); color: var(--ts-green); }
.tsmp-app .tsmp-stage.is-done .tsmp-stage-n { background: var(--ts-green); border-color: var(--ts-green); color: #fff; }
.tsmp-app .tsmp-stage.is-current { background: var(--ts-accent-50); color: var(--ts-accent-700); font-weight: 600; }
.tsmp-app .tsmp-stage.is-current .tsmp-stage-n { background: var(--ts-accent); border-color: var(--ts-accent); color: #fff; }

.tsmp-app .tsmp-stage-body {
	padding: 20px; margin-bottom: 20px;
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.tsmp-app .tsmp-stage-hint { margin: 0; color: var(--ts-ink-70); font-size: 14.5px; max-width: 62ch; }
.tsmp-app .tsmp-stage-body .tsmp-btn { margin-right: 8px; }

.tsmp-app .tsmp-notes {
	margin-bottom: 12px; background: var(--ts-card);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	overflow: hidden;
}
.tsmp-app .tsmp-notes > summary {
	padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 14.5px;
	list-style: none; color: var(--ts-ink);
}
.tsmp-app .tsmp-notes > summary::-webkit-details-marker { display: none; }
.tsmp-app .tsmp-notes > summary::before { content: "▸ "; color: var(--ts-ink-45); }
.tsmp-app .tsmp-notes[open] > summary::before { content: "▾ "; }
.tsmp-app .tsmp-notes-body {
	padding: 4px 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--ts-ink-70);
}
.tsmp-app .tsmp-notes-body > :first-child { margin-top: 0; }
.tsmp-app .tsmp-notes-empty { color: var(--ts-ink-45); font-style: italic; margin: 0; }

@media (max-width: 640px) {
	.tsmp-app .tsmp-stages { flex-direction: column; }
	.tsmp-app .tsmp-stage { min-width: 0; }
	.tsmp-app .tsmp-projrow { flex-wrap: wrap; }
}

/* ==================================================================
   Conversational intake — full-screen interview with Claude
   ================================================================== */

.tsmp-app .tsmp-interview { display: flex; flex-direction: column; gap: 14px; }

.tsmp-app .tsmp-interview-boot {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; padding: 64px 20px; text-align: center;
	background: var(--ts-sand); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-interview-boot p { margin: 0; font-weight: 600; color: var(--ts-ink); }
.tsmp-app .tsmp-interview-boot-sub { font-weight: 400 !important; color: var(--ts-ink-45); font-size: 14px; }

.tsmp-app .tsmp-spinner {
	width: 26px; height: 26px; border-radius: 50%;
	border: 3px solid var(--ts-blush); border-top-color: var(--ts-accent);
	animation: ts-spin .8s linear infinite;
}

.tsmp-app .tsmp-chat {
	display: flex; flex-direction: column; gap: 14px;
	min-height: 340px; max-height: 58vh; overflow-y: auto;
	padding: 22px; background: var(--ts-card);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
	scroll-behavior: smooth;
}

.tsmp-app .tsmp-bubble { display: flex; max-width: 82%; }
.tsmp-app .tsmp-bubble--ai { align-self: flex-start; }
.tsmp-app .tsmp-bubble--me { align-self: flex-end; }
.tsmp-app .tsmp-bubble-body {
	padding: 13px 17px; border-radius: 18px;
	font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.tsmp-app .tsmp-bubble--ai .tsmp-bubble-body {
	background: var(--ts-sand); color: var(--ts-ink); border-bottom-left-radius: 5px;
}
.tsmp-app .tsmp-bubble--me .tsmp-bubble-body {
	background: var(--ts-accent); color: #fff; border-bottom-right-radius: 5px;
}
.tsmp-app .tsmp-bubble--thinking .tsmp-bubble-body {
	color: var(--ts-ink-45); letter-spacing: 3px; animation: ts-pulse 1.3s ease-in-out infinite;
}
@keyframes ts-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.tsmp-app .tsmp-chat-compose {
	display: flex; gap: 10px; align-items: flex-end;
	padding: 12px; background: var(--ts-card);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-chat-input {
	flex: 1; resize: none; min-height: 46px; max-height: 180px;
	padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5;
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	background: #fff; color: var(--ts-ink);
}
.tsmp-app .tsmp-chat-input:focus {
	outline: none; border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-50);
}
.tsmp-app .tsmp-chat-mic {
	flex: none; width: 46px; height: 46px; font-size: 19px; cursor: pointer;
	background: #fff; border: 1px solid var(--ts-line); border-radius: 50%;
	transition: background .15s ease, border-color .15s ease;
}
.tsmp-app .tsmp-chat-mic:hover { border-color: var(--ts-accent); }
.tsmp-app .tsmp-chat-mic.is-live {
	background: var(--ts-accent); border-color: var(--ts-accent);
	animation: ts-pulse 1.1s ease-in-out infinite;
}

.tsmp-app .tsmp-interview-foot {
	padding: 20px; background: var(--ts-card);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-interview-foot .tsmp-field-price { max-width: 320px; margin-bottom: 16px; }

/* The submit button stays visibly present but inert until the teacher confirms
   the summary — it signals what is coming without inviting a premature click. */
.tsmp-app .tsmp-interview-submit:disabled {
	opacity: .45; cursor: not-allowed; filter: grayscale(.7);
}
.tsmp-app .tsmp-interview-submit.is-ready {
	animation: ts-ready .5s ease-out;
	box-shadow: 0 0 0 4px var(--ts-accent-50);
}
@keyframes ts-ready {
	from { transform: scale(.97); box-shadow: 0 0 0 0 var(--ts-accent-50); }
	to   { transform: scale(1);   box-shadow: 0 0 0 4px var(--ts-accent-50); }
}
.tsmp-app .tsmp-interview-gate {
	margin: 10px 0 0; font-size: 13px; color: var(--ts-ink-45); max-width: 60ch;
}

@media (max-width: 640px) {
	.tsmp-app .tsmp-bubble { max-width: 92%; }
	.tsmp-app .tsmp-chat { padding: 16px; max-height: 52vh; }
}

/* ==================================================================
   Brain dump — the thinking-out-loud chat on the dashboard
   ================================================================== */

.tsmp-app .tsmp-braindump {
	padding: 22px; margin-bottom: 26px;
	background: var(--ts-sand); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-greeting { margin: 0 0 4px; font-size: 1.45rem; }

.tsmp-app .tsmp-bd-log {
	display: flex; flex-direction: column; gap: 12px;
	max-height: 400px; overflow-y: auto;
	padding: 18px; margin-bottom: 12px;
	background: var(--ts-card); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); scroll-behavior: smooth;
}

.tsmp-app .tsmp-bd-compose { display: flex; gap: 10px; align-items: flex-end; }
.tsmp-app .tsmp-bd-input {
	flex: 1; resize: none; min-height: 48px; max-height: 200px; overflow-y: auto;
	padding: 13px 16px; font: inherit; font-size: 15px; line-height: 1.5;
	background: var(--ts-card); color: var(--ts-ink);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tsmp-app .tsmp-bd-input:focus {
	outline: none; border-color: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-50);
}
.tsmp-app .tsmp-bd-mic {
	flex: none; width: 48px; height: 48px; font-size: 19px; cursor: pointer;
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: 50%;
}
.tsmp-app .tsmp-bd-mic:hover { border-color: var(--ts-accent); }
.tsmp-app .tsmp-bd-mic.is-live {
	background: var(--ts-accent); border-color: var(--ts-accent);
	animation: ts-pulse 1.1s ease-in-out infinite;
}

.tsmp-app .tsmp-bd-quota { margin: 10px 0 0; font-size: 12.5px; color: var(--ts-ink-45); }
.tsmp-app .tsmp-bd-upgrade { display: block; margin-top: 12px; }

/* ==================================================================
   Marketing asset fields on the Dokan product form
   ================================================================== */

.tsmp-app.tsmp-assets {
	max-width: none; margin: 26px 0; padding: 22px;
	background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-assets-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.tsmp-app .tsmp-assets-head h3 { margin: 0; font-size: 1.25rem; }
.tsmp-app .tsmp-assets-count {
	padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
	background: var(--ts-amber-50); color: var(--ts-amber);
}
.tsmp-app .tsmp-assets-count.is-complete { background: var(--ts-green-50); color: var(--ts-green); }
.tsmp-app .tsmp-assets-intro { margin: 0 0 18px; font-size: 14px; color: var(--ts-ink-70); max-width: 70ch; }

.tsmp-app .tsmp-assets-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.tsmp-app .tsmp-asset { display: flex; flex-direction: column; gap: 6px; }
.tsmp-app .tsmp-asset-label { display: flex; align-items: baseline; gap: 6px; }
.tsmp-app .tsmp-asset-name { font-size: 13.5px; font-weight: 600; color: var(--ts-ink); }
.tsmp-app .tsmp-asset-req { color: var(--ts-accent); font-weight: 700; }
.tsmp-app .tsmp-asset-opt { font-size: 11.5px; color: var(--ts-ink-45); }

.tsmp-app .tsmp-asset-drop {
	display: flex; flex-direction: column; align-items: stretch; gap: 0;
	padding: 0; cursor: pointer; overflow: hidden;
	background: var(--ts-sand); border: 1px dashed var(--ts-line);
	border-radius: var(--ts-radius-sm);
	transition: border-color .15s ease, background .15s ease;
}
.tsmp-app .tsmp-asset-drop:hover { border-color: var(--ts-accent); background: var(--ts-accent-50); }
.tsmp-app .tsmp-asset.is-filled .tsmp-asset-drop { border-style: solid; background: var(--ts-card); }
.tsmp-app .tsmp-asset.has-error .tsmp-asset-drop { border-color: var(--ts-red); background: var(--ts-red-50); }

.tsmp-app .tsmp-asset-preview {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 3; width: 100%;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.tsmp-app .tsmp-asset-plus { font-size: 30px; font-weight: 300; color: var(--ts-ink-45); line-height: 1; }
.tsmp-app .tsmp-asset-file {
	padding: 10px 12px; font-size: 12px; color: var(--ts-ink-70); text-align: center;
	word-break: break-all; line-height: 1.4;
}
.tsmp-app .tsmp-asset-cta {
	padding: 7px; font-size: 12.5px; font-weight: 600; text-align: center;
	color: var(--ts-accent-700); background: rgba(255,255,255,.85);
	border-top: 1px solid var(--ts-line);
}

.tsmp-app .tsmp-asset-dims {
	font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ts-ink-45);
}
.tsmp-app .tsmp-asset-hint { font-size: 11.5px; line-height: 1.45; color: var(--ts-ink-45); }

.tsmp-app .tsmp-asset-clear {
	align-self: flex-start; padding: 0; font-size: 11.5px; cursor: pointer;
	background: none; border: 0; color: var(--ts-red); text-decoration: underline;
}
.tsmp-app .tsmp-asset-error { font-size: 11.5px; color: var(--ts-red); line-height: 1.4; }
.tsmp-app .tsmp-asset-error:empty { display: none; }

@media (max-width: 480px) {
	.tsmp-app .tsmp-assets-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Missing-asset checklist on the project page, so the teacher knows exactly
   what is still needed before the interview unlocks. */
.tsmp-app .tsmp-missing {
	margin: 0; padding: 12px 16px 12px 34px;
	background: var(--ts-amber-50); border-radius: var(--ts-radius-sm);
	font-size: 13.5px; color: var(--ts-amber); list-style: disc;
}
.tsmp-app .tsmp-missing li { margin: 2px 0; }

/* ==================================================================
   Approval page — locked creatives, group actions, capability notes
   ================================================================== */

/* Read-only copy: shown, clearly not editable. Pin wording lives inside the
   rendered image, so an edit box here would promise a change that never lands. */
.tsmp-app .tsmp-readonly {
	padding: 14px 16px; margin-bottom: 10px;
	background: var(--ts-sand); border-radius: var(--ts-radius-sm);
	font-size: 14.5px; line-height: 1.6; color: var(--ts-ink-70);
	max-height: 260px; overflow-y: auto;
}
.tsmp-app .tsmp-readonly > :first-child { margin-top: 0; }
.tsmp-app .tsmp-readonly > :last-child { margin-bottom: 0; }

/* The one-line reason a creative behaves differently. */
.tsmp-app .tsmp-cap-note {
	margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--ts-ink-45);
}

/* Group header above the pins, carrying the batch approve. */
.tsmp-app .tsmp-groupbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	padding: 14px 18px; margin-bottom: 4px;
	background: var(--ts-sand); border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-groupbar-title { font-weight: 600; font-size: 15px; color: var(--ts-ink); }

/* Notification opt-in — offered once, dismissible, never nagging. */
.tsmp-app .tsmp-push-prompt {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 16px 20px; margin-bottom: 20px;
	background: var(--ts-accent-50); border: 1px solid var(--ts-blush);
	border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-push-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; }
.tsmp-app .tsmp-push-copy strong { font-size: 15px; color: var(--ts-ink); }
.tsmp-app .tsmp-push-copy span { font-size: 13px; color: var(--ts-ink-70); }
.tsmp-app .tsmp-push-msg:empty { display: none; }
.tsmp-app .tsmp-push-msg { font-weight: 600; color: var(--ts-accent-700) !important; }
.tsmp-app .tsmp-push-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tier buttons — one dashboard, states change rather than the page. */
.tsmp-app .tsmp-tier-actions { flex-wrap: wrap; }
.tsmp-app .tsmp-launch-tool:disabled {
	opacity: .5; cursor: not-allowed; filter: grayscale(.6);
}

.tsmp-app .tsmp-upgrade {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 16px 20px; margin: 16px 0 4px;
	background: var(--ts-accent-50); border: 1px solid var(--ts-blush);
	border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-upgrade-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.tsmp-app .tsmp-upgrade-copy strong { font-size: 15px; color: var(--ts-ink); }
.tsmp-app .tsmp-upgrade-copy span { font-size: 13px; color: var(--ts-ink-70); }

/* Lapsed social connection — visible, calm, one action. */
.tsmp-app .tsmp-reconnect {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 16px 20px; margin-bottom: 20px;
	background: var(--ts-amber-50); border: 1px solid #f0deb4;
	border-radius: var(--ts-radius);
}
.tsmp-app .tsmp-reconnect-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 260px; }
.tsmp-app .tsmp-reconnect-copy strong { font-size: 15px; color: #7a5a12; }
.tsmp-app .tsmp-reconnect-copy span { font-size: 13px; color: #7a5a12; line-height: 1.5; }
.tsmp-app .tsmp-reconnect-msg:empty { display: none; }
.tsmp-app .tsmp-reconnect-msg { font-weight: 600; }

/* ------------------------------------------------------------------
   The hidden attribute must always win.

   `hidden` only sets display:none at the lowest priority, so any rule
   here that sets display (flex, grid) silently overrode it — which is
   why an empty chat log was appearing before the first message. This
   replaces the per-element patches that kept being needed.
   ------------------------------------------------------------------ */
.tsmp-app [hidden],
.tsmp-app[hidden] { display: none !important; }

/* ------------------------------------------------------------------
   Microphone button — SVG rather than emoji, so it renders the same
   everywhere and can change colour while recording.
   ------------------------------------------------------------------ */
.tsmp-app .tsmp-bd-mic,
.tsmp-app .tsmp-chat-mic {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; color: var(--ts-ink-45); line-height: 0;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tsmp-app .tsmp-bd-mic:hover,
.tsmp-app .tsmp-chat-mic:hover { color: var(--ts-accent); border-color: var(--ts-accent); }
.tsmp-app .tsmp-bd-mic.is-live,
.tsmp-app .tsmp-chat-mic.is-live { color: #fff; }
.tsmp-app .tsmp-mic-icon { display: block; }

/* Markdown inside chat bubbles — Claude writes emphasis and the occasional
   list, so those need to read as formatting rather than raw asterisks. */
.tsmp-app .tsmp-bubble-body > :first-child { margin-top: 0; }
.tsmp-app .tsmp-bubble-body > :last-child { margin-bottom: 0; }
.tsmp-app .tsmp-bubble-body p { margin: 0 0 8px; }
.tsmp-app .tsmp-bubble-body ul,
.tsmp-app .tsmp-bubble-body ol { margin: 6px 0 8px; padding-left: 20px; }
.tsmp-app .tsmp-bubble-body li { margin-bottom: 3px; }
.tsmp-app .tsmp-bubble-body strong { font-weight: 600; }
.tsmp-app .tsmp-bubble--me .tsmp-bubble-body a { color: #fff; text-decoration: underline; }

/* Route back to the project a product belongs to — otherwise the teacher
   uploads their files and has to find their own way home. */
.tsmp-app .tsmp-assets-back {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 0 0 18px; padding: 10px 14px;
	background: var(--ts-sand); border-radius: var(--ts-radius-sm);
	font-size: 13.5px;
}
.tsmp-app .tsmp-assets-back a { font-weight: 600; text-decoration: none; }
.tsmp-app .tsmp-assets-back a:hover { text-decoration: underline; }
.tsmp-app .tsmp-assets-back-hint { color: var(--ts-ink-45); font-size: 12.5px; }

/* Characters remaining. Sits on its own line under the box, and only appears
   once the teacher is close enough to the limit for it to be useful. */
.tsmp-app .tsmp-chat-compose,
.tsmp-app .tsmp-bd-compose { flex-wrap: wrap; }

/* Which resource this campaign belongs to, on the approval screen. */
.tsmp-app .tsmp-prodbar {
	display: flex; gap: 14px; align-items: center;
	margin: 0 0 18px; padding: 12px 14px;
	background: var(--ts-card); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); box-shadow: var(--ts-shadow-sm);
}
.tsmp-app .tsmp-prodbar-thumb {
	width: 56px; height: 56px; flex: 0 0 56px;
	object-fit: cover; border-radius: var(--ts-radius-sm);
	border: 1px solid var(--ts-line-2);
}
.tsmp-app .tsmp-prodbar-body { min-width: 0; }
.tsmp-app .tsmp-prodbar-label {
	display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ts-ink-45);
}
.tsmp-app .tsmp-prodbar-title {
	display: block; font-size: 15px; line-height: 1.35; color: var(--ts-ink);
	margin: 1px 0 4px;
}
.tsmp-app .tsmp-prodbar-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.tsmp-app .tsmp-prodbar-links a { color: var(--ts-accent); text-decoration: none; }
.tsmp-app .tsmp-prodbar-links a:hover { text-decoration: underline; }

/* Publishing log — what actually went out, rather than what we hoped did. */
.tsmp-app .tsmp-publog {
	margin: 20px 0 0; padding: 16px 18px;
	background: var(--ts-card); border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius); box-shadow: var(--ts-shadow-sm);
}
.tsmp-app .tsmp-publog h4 { margin: 0 0 10px; font-size: 15px; }
.tsmp-app .tsmp-publog-list { list-style: none; margin: 0; padding: 0; }
.tsmp-app .tsmp-publog-row {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
	padding: 9px 0; border-top: 1px solid var(--ts-line-2); font-size: 14px;
}
.tsmp-app .tsmp-publog-row:first-child { border-top: 0; }
.tsmp-app .tsmp-publog-step { flex: 0 0 150px; color: var(--ts-ink); font-weight: 500; }
.tsmp-app .tsmp-publog-status { font-weight: 600; }
.tsmp-app .tsmp-publog-row.is-ok .tsmp-publog-status { color: var(--ts-green); }
.tsmp-app .tsmp-publog-row.is-held .tsmp-publog-status { color: var(--ts-amber); }
.tsmp-app .tsmp-publog-row.is-paused .tsmp-publog-status { color: var(--ts-amber); }
.tsmp-app .tsmp-publog-row.is-skipped .tsmp-publog-status { color: var(--ts-ink-45); }
.tsmp-app .tsmp-publog-reason { color: var(--ts-ink-45); font-size: 13px; }
.tsmp-app .tsmp-publog-link { color: var(--ts-accent); text-decoration: none; font-size: 13px; }
.tsmp-app .tsmp-publog-link:hover { text-decoration: underline; }
@media (max-width: 560px) {
	.tsmp-app .tsmp-publog-step { flex: 0 0 100%; }
}
.tsmp-app .tsmp-publog-row.is-scheduled .tsmp-publog-status { color: var(--ts-blue); }

/* Video pins. Sized like the still pins so a mixed grid stays even. */
.tsmp-app .tsmp-pin-video {
	width: 100%; display: block; background: #000;
	border-radius: var(--ts-radius-sm);
}

/* The connected store's ID, for admins checking where a campaign will land. */
.tsmp-app .tsmp-store-id {
	margin-left: 8px; padding: 2px 7px;
	font-size: 11px; font-family: Consolas, Monaco, monospace;
	color: var(--ts-ink-45); background: var(--ts-sand);
	border: 1px solid var(--ts-line); border-radius: 4px;
	user-select: all;
}

/* The teacher's own pin schedule, on their project page. */
.tsmp-app .tsmp-pincal-lead { margin: 0 0 12px; color: var(--ts-ink-70); font-size: 14px; }
.tsmp-app .tsmp-pincal-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.tsmp-app .tsmp-pincal-row {
	display: flex; align-items: center; gap: 12px;
	padding: 8px 0; border-top: 1px solid var(--ts-line-2); font-size: 14px;
}
.tsmp-app .tsmp-pincal-row:first-child { border-top: 0; }
.tsmp-app .tsmp-pincal-date { flex: 0 0 96px; color: var(--ts-ink-45); font-size: 13px; }
.tsmp-app .tsmp-pincal-thumb {
	width: 34px; height: 46px; flex: 0 0 34px; object-fit: cover;
	border-radius: 4px; border: 1px solid var(--ts-line-2); background: var(--ts-sand);
}
.tsmp-app .tsmp-pincal-title { flex: 1 1 auto; min-width: 0; color: var(--ts-ink); }
.tsmp-app .tsmp-pincal-state { flex: 0 0 auto; font-size: 12px; color: var(--ts-ink-45); }
.tsmp-app .tsmp-pincal-row.is-sent .tsmp-pincal-state { color: var(--ts-green); font-weight: 600; }
.tsmp-app .tsmp-pincal-row.is-failed .tsmp-pincal-state { color: var(--ts-red); font-weight: 600; }
@media (max-width: 560px) {
	.tsmp-app .tsmp-pincal-date { flex-basis: 100%; }
	.tsmp-app .tsmp-pincal-row { flex-wrap: wrap; }
}

/* Pin calendar rows — tidier spacing, clickable media, video badge. */
.tsmp-app .tsmp-pincal-row { padding: 10px 4px; border-radius: 8px; transition: background .12s ease; }
.tsmp-app .tsmp-pincal-row:hover { background: var(--ts-sand); }
.tsmp-app .tsmp-pincal-media {
	position: relative; flex: 0 0 34px; display: block;
	line-height: 0; border-radius: 5px; overflow: hidden;
	border: 1px solid var(--ts-line-2); background: var(--ts-sand);
}
.tsmp-app .tsmp-pincal-media:hover { border-color: var(--ts-accent); }
.tsmp-app .tsmp-pincal-thumb {
	width: 34px; height: 46px; object-fit: cover; display: block;
	border: 0; border-radius: 0; background: var(--ts-sand);
}
.tsmp-app .tsmp-pincal-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
	background: rgba(0,0,0,.22); pointer-events: none;
}
.tsmp-app .tsmp-pincal-title { line-height: 1.35; }

/* ---- Pin calendar, refined ---- */
.tsmp-app .tsmp-pincal { padding: 20px 22px 18px; }
.tsmp-app .tsmp-pincal > h4 { margin: 0 0 6px; font-size: 16px; }
.tsmp-app .tsmp-pincal-lead { margin: 0 0 16px; line-height: 1.5; }
.tsmp-app .tsmp-pincal-list { max-height: 460px; padding-right: 6px; }

/* Month divider */
.tsmp-app .tsmp-pincal-month {
	position: sticky; top: 0; z-index: 1;
	margin: 14px 0 6px; padding: 5px 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ts-ink-45); background: var(--ts-card);
	border-bottom: 1px solid var(--ts-line);
}
.tsmp-app .tsmp-pincal-month:first-child { margin-top: 0; }

/* Rows */
.tsmp-app .tsmp-pincal-row { gap: 14px; padding: 10px 8px; border-top: 0; }
.tsmp-app .tsmp-pincal-row + .tsmp-pincal-row { border-top: 1px solid var(--ts-line-2); }

.tsmp-app .tsmp-pincal-date {
	flex: 0 0 46px; display: flex; flex-direction: column; align-items: center;
	line-height: 1.1; color: var(--ts-ink-45);
}
.tsmp-app .tsmp-pincal-date strong { font-size: 17px; color: var(--ts-ink); font-weight: 600; }
.tsmp-app .tsmp-pincal-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

.tsmp-app .tsmp-pincal-media { flex: 0 0 40px; }
.tsmp-app .tsmp-pincal-thumb { width: 40px; height: 54px; }

.tsmp-app .tsmp-pincal-state {
	flex: 0 0 auto; padding: 3px 9px; border-radius: 11px;
	font-size: 11px; font-weight: 600; letter-spacing: .02em;
	background: var(--ts-sand); color: var(--ts-ink-45);
}
.tsmp-app .tsmp-pincal-row.is-sent .tsmp-pincal-state { background: var(--ts-green-50); color: var(--ts-green); }
.tsmp-app .tsmp-pincal-row.is-failed .tsmp-pincal-state { background: var(--ts-red-50); color: var(--ts-red); }

/* A calmer scrollbar than the browser default. */
.tsmp-app .tsmp-pincal-list::-webkit-scrollbar { width: 8px; }
.tsmp-app .tsmp-pincal-list::-webkit-scrollbar-thumb { background: var(--ts-line); border-radius: 4px; }
.tsmp-app .tsmp-pincal-list::-webkit-scrollbar-track { background: transparent; }

/* Where a pin sends people, and the copy Pinterest actually indexes. */
.tsmp-app .tsmp-dest {
	padding: 2px 9px; border-radius: 11px;
	font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.tsmp-app .tsmp-dest--blog { background: var(--ts-blue-50); color: var(--ts-blue); }
.tsmp-app .tsmp-dest--product { background: var(--ts-accent-50); color: var(--ts-accent-700); }

.tsmp-app .tsmp-pincopy {
	margin: 10px 0 0; padding: 10px 12px;
	background: var(--ts-sand); border-radius: var(--ts-radius-sm);
}
.tsmp-app .tsmp-pincopy-label {
	display: block; margin-bottom: 2px;
	font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ts-ink-45);
}
.tsmp-app .tsmp-pincopy-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ts-ink); }
.tsmp-app .tsmp-pincopy-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ts-ink-70); }

/* ---- Rich text editor on the approval page ---- */
.tsmp-app .tsmp-rt {
	margin: 10px 0 0;
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
	background: var(--ts-card); overflow: hidden;
}
.tsmp-app .tsmp-rt-bar {
	display: flex; align-items: center; gap: 4px;
	padding: 6px 8px; background: var(--ts-sand);
	border-bottom: 1px solid var(--ts-line);
}
.tsmp-app .tsmp-rt-btn {
	min-width: 30px; height: 28px; padding: 0 7px;
	font-size: 13px; line-height: 1; color: var(--ts-ink-70);
	background: transparent; border: 1px solid transparent; border-radius: 5px;
	cursor: pointer;
}
.tsmp-app .tsmp-rt-btn:hover { background: var(--ts-card); border-color: var(--ts-line); color: var(--ts-ink); }
.tsmp-app .tsmp-rt-btn.is-bold { font-weight: 700; }
.tsmp-app .tsmp-rt-btn.is-italic { font-style: italic; font-family: Georgia, serif; }
.tsmp-app .tsmp-rt-saved { margin-left: auto; font-size: 11px; color: var(--ts-ink-45); }
.tsmp-app .tsmp-rt-body {
	min-height: 130px; max-height: 420px; overflow-y: auto;
	padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--ts-ink);
}
.tsmp-app .tsmp-rt-body:focus { outline: 2px solid var(--ts-accent-50); outline-offset: -2px; }
.tsmp-app .tsmp-rt-body p { margin: 0 0 12px; }
.tsmp-app .tsmp-rt-body h2, .tsmp-app .tsmp-rt-body h3 { margin: 16px 0 8px; line-height: 1.3; }
.tsmp-app .tsmp-rt-body ul, .tsmp-app .tsmp-rt-body ol { margin: 0 0 12px; padding-left: 22px; }
.tsmp-app .tsmp-rt-body a { color: var(--ts-accent); }

/* Product title — one line, sized like the thing it becomes. */
.tsmp-app .tsmp-title-input {
	width: 100%; margin: 10px 0 0; padding: 12px 14px;
	font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ts-ink);
	background: var(--ts-card);
	border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm);
}
.tsmp-app .tsmp-title-input:focus { border-color: var(--ts-accent); outline: none; }

/* ============================================================================
   Magic Marketing Tool skin — shared components
   ========================================================================== */

/* Cards carry a dark rule along the top. It gives every panel a clear start,
   which is what stops a long approval page reading as one endless scroll. */
.tsmp-app .tsmp-card,
.tsmp-app .tsmp-unit,
.tsmp-app .tsmp-notes,
.tsmp-app .tsmp-store-card,
.tsmp-app .tsmp-prodbar,
.tsmp-app .tsmp-publog {
	background: #fff;
	border: 1px solid var(--ts-line);
	border-top: 3px solid var(--ts-ink);
	border-radius: var(--ts-radius);
	box-shadow: none;
}

/* Small label above a heading — "Step 2 of 6", "Your images". */
.tsmp-app .tsmp-eyebrow {
	display: block; margin-bottom: 12px;
	font-family: var(--ts-ff-body); font-weight: 600; font-size: 11px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ts-mascot);
}

/* Numbers, dates and counts sit in mono — they line up, and they read as data
   rather than prose. */
.tsmp-app .tsmp-pincal-date strong,
.tsmp-app .tsmp-pincal-month,
.tsmp-app .tsmp-store-id { font-family: var(--ts-ff-mono); }

/* ---- Progress bar ---- */
.tsmp-app .tsmp-progress { display: flex; margin: 36px 0 28px; }
.tsmp-app .tsmp-pstep { flex: 1; position: relative; text-align: center; }
.tsmp-app .tsmp-pstep:not(:last-child)::after {
	content: ''; position: absolute; top: 15px; left: 50%;
	width: 100%; height: 2px; background: var(--ts-line); z-index: 0;
}
.tsmp-app .tsmp-pstep.is-done:not(:last-child)::after { background: var(--ts-ink); }
.tsmp-app .tsmp-pcircle {
	position: relative; z-index: 1;
	width: 32px; height: 32px; margin: 0 auto 8px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #fff; border: 1.5px solid var(--ts-line);
	font-family: var(--ts-ff-mono); font-size: 13px; color: var(--ts-dust);
}
.tsmp-app .tsmp-pstep.is-active .tsmp-pcircle {
	background: var(--ts-fri-yay); border-color: var(--ts-fri-yay); color: #fff;
	box-shadow: 0 0 0 4px var(--ts-accent-50);
}
.tsmp-app .tsmp-pstep.is-done .tsmp-pcircle { background: var(--ts-ink); border-color: var(--ts-ink); color: #fff; }
.tsmp-app .tsmp-plabel {
	font-weight: 500; font-size: 10px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ts-dust);
}
.tsmp-app .tsmp-pstep.is-active .tsmp-plabel,
.tsmp-app .tsmp-pstep.is-done .tsmp-plabel { color: var(--ts-ink); }
@media (max-width: 640px) {
	.tsmp-app .tsmp-plabel { display: none; }
	.tsmp-app .tsmp-progress { margin: 24px 0 20px; }
}

/* Pills follow the new radius and the mono face for anything countable. */
.tsmp-app .tsmp-pill { border-radius: var(--ts-radius-pill); }

/* ---- Uploads on the project page ---- */
.tsmp-app .tsmp-uploads { padding: 28px 30px; margin: 0 0 22px; }
.tsmp-app .tsmp-uploads h4 { font-size: 20px; margin: 0 0 6px; }
.tsmp-app .tsmp-uploads-lead {
	margin: 0 0 22px; font-size: 15px; color: var(--ts-ink-70);
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tsmp-app .tsmp-uploads .tsmp-assets-count {
	font-family: var(--ts-ff-mono); font-size: 11px;
	padding: 3px 10px; border-radius: var(--ts-radius-pill);
	background: var(--ts-ivory); color: var(--ts-ink-70);
}
.tsmp-app .tsmp-uploads .tsmp-assets-count.is-complete { background: var(--ts-sage-light); color: var(--ts-sage-dark); }

/* Saving happens per slot, so it has to be visible per slot — a spinner on a
   button somewhere else would not tell the teacher which file is safe. */
.tsmp-app .tsmp-asset.is-saving .tsmp-asset-preview { opacity: .55; }
.tsmp-app .tsmp-asset.is-saved .tsmp-asset-preview {
	box-shadow: 0 0 0 2px var(--ts-sage);
	transition: box-shadow .2s var(--ts-ease);
}

/* ---- Approval stages ---- */
.tsmp-app .tsmp-stagecard {
	background: #fff; border: 1px solid var(--ts-line); border-top: 3px solid var(--ts-ink);
	border-radius: var(--ts-radius); padding: 36px 40px; margin: 0 0 24px;
}
.tsmp-app .tsmp-stagecard[hidden] { display: none !important; }
.tsmp-app .tsmp-stagecard-head { margin-bottom: 26px; }
.tsmp-app .tsmp-stagecard-head h3 { font-size: 22px; margin: 0 0 6px; }
.tsmp-app .tsmp-stagecard-lead { margin: 0; font-size: 15px; color: var(--ts-ink-70); }
.tsmp-app .tsmp-stagecard-foot { margin-top: 30px; }
.tsmp-app .tsmp-btn-full { width: 100%; }
.tsmp-app .tsmp-progress .tsmp-pstep { cursor: pointer; }

/* Cards inside a stage already sit on the stage's own panel, so they lose the
   heavy top rule — two nested dark lines read as a mistake. */
.tsmp-app .tsmp-stagecard .tsmp-unit {
	border-top-width: 1px; border-top-color: var(--ts-line);
}

@media (max-width: 640px) {
	.tsmp-app .tsmp-stagecard { padding: 24px 20px; }
	.tsmp-app .tsmp-stagecard-head h3 { font-size: 19px; }
}

/* ---- SEO panel ---- */
.tsmp-app .tsmp-seo { margin: 12px 0 0; }
.tsmp-app .tsmp-seo-row { padding: 12px 0; border-top: 1px solid var(--ts-line-2); }
.tsmp-app .tsmp-seo-row:first-child { border-top: 0; padding-top: 0; }
.tsmp-app .tsmp-seo-label {
	display: block; margin-bottom: 4px;
	font-family: var(--ts-ff-mono); font-size: 10px; letter-spacing: .07em;
	text-transform: uppercase; color: var(--ts-dust);
}
.tsmp-app .tsmp-seo-value { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ts-ink); }
.tsmp-app .tsmp-seo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tsmp-app .tsmp-chip {
	padding: 3px 10px; border-radius: var(--ts-radius-pill);
	background: var(--ts-ivory); color: var(--ts-ink-70);
	font-size: 12px; white-space: nowrap;
}
.tsmp-app .tsmp-seo-note {
	margin: 14px 0 0; font-size: 12px; color: var(--ts-dust); font-style: italic;
}

/* ============================================================================
   Interview, restyled to the design
   ========================================================================== */

/* Claude's messages sit on white with a hairline; the teacher's on the warm
   tint. Neither is a coloured "bubble" — it reads as a written exchange rather
   than a messaging app, which suits an interview. */
.tsmp-app .tsmp-chat { gap: 14px; }
.tsmp-app .tsmp-bubble { max-width: 78%; }
.tsmp-app .tsmp-bubble-body {
	padding: 14px 16px; border-radius: var(--ts-radius);
	font-size: 15px; line-height: 1.6;
}
.tsmp-app .tsmp-bubble--ai .tsmp-bubble-body {
	background: #fff; border: 1px solid var(--ts-line); color: var(--ts-ink);
}
.tsmp-app .tsmp-bubble--me .tsmp-bubble-body {
	background: var(--ts-accent-50); border: 1px solid transparent; color: var(--ts-ink);
}

/* The compose row becomes a single pill — one place to type, mic and send
   tucked inside it. */
.tsmp-app .tsmp-chat-compose,
.tsmp-app .tsmp-bd-compose {
	margin-top: 20px; padding: 6px 8px 6px 20px; gap: 10px;
	background: #fff; border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-pill); align-items: center;
}
.tsmp-app .tsmp-chat-input,
.tsmp-app .tsmp-bd-input {
	border: 0; background: transparent; padding: 10px 0; min-height: 40px;
	font-size: 15px; box-shadow: none;
}
.tsmp-app .tsmp-chat-input:focus,
.tsmp-app .tsmp-bd-input:focus { border: 0; box-shadow: none; outline: none; }
.tsmp-app .tsmp-chat-mic,
.tsmp-app .tsmp-bd-mic { border-radius: 50%; }
.tsmp-app .tsmp-chat-compose .tsmp-btn,
.tsmp-app .tsmp-bd-compose .tsmp-btn { border-radius: var(--ts-radius-pill); padding: 11px 24px; }

@media (max-width: 560px) {
	.tsmp-app .tsmp-chat-compose,
	.tsmp-app .tsmp-bd-compose { border-radius: var(--ts-radius); padding: 10px 12px; }
}

/* ---- Upload slots, closer to the design's grid ---- */
.tsmp-app .tsmp-asset-preview { border-radius: var(--ts-radius); background: var(--ts-ivory); }
.tsmp-app .tsmp-asset.is-filled .tsmp-asset-preview { background: var(--ts-cream); }
.tsmp-app .tsmp-asset-name { font-weight: 600; font-size: 13px; }
.tsmp-app .tsmp-asset-dim,
.tsmp-app .tsmp-asset-opt { font-family: var(--ts-ff-mono); font-size: 10px; color: var(--ts-dust); }

/* ============================================================================
   Stage layout fix — the grid moved inside the stage card
   ========================================================================== */

/* The outer container was a 6-column grid from the old single-page layout, so a
   stage card was landing in one column. Stages stack; the grid now lives inside
   each one, which is where the creatives actually are. */
.tsmp-app .tsmp-creatives { display: block; }

.tsmp-app .tsmp-creative-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(6, 1fr);
	align-items: start;
}
.tsmp-app .tsmp-creative-grid > .span-full  { grid-column: span 6; }
.tsmp-app .tsmp-creative-grid > .span-half  { grid-column: span 3; }
.tsmp-app .tsmp-creative-grid > .span-third { grid-column: span 2; }
.tsmp-app .tsmp-creative-grid > .tsmp-groupbar { grid-column: 1 / -1; }

/* Stage cards run the full width of the page, not a grid cell. */
.tsmp-app .tsmp-stagecard { max-width: none; width: 100%; }
.tsmp-app .tsmp-creatives > .tsmp-progress { display: flex; }

/* Pins are portrait, so three across needs the picture to behave rather than
   stretch to whatever the tallest card in the row is doing. */
.tsmp-app .tsmp-creative-grid > .span-third .tsmp-img,
.tsmp-app .tsmp-creative-grid > .span-third .tsmp-pin-video {
	width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
}

@media (max-width: 900px) {
	.tsmp-app .tsmp-creative-grid { grid-template-columns: repeat(4, 1fr); }
	.tsmp-app .tsmp-creative-grid > .span-third { grid-column: span 2; }
	.tsmp-app .tsmp-creative-grid > .span-half  { grid-column: span 4; }
	.tsmp-app .tsmp-creative-grid > .span-full  { grid-column: span 4; }
}
@media (max-width: 560px) {
	.tsmp-app .tsmp-creative-grid { grid-template-columns: 1fr; }
	.tsmp-app .tsmp-creative-grid > .span-third,
	.tsmp-app .tsmp-creative-grid > .span-half,
	.tsmp-app .tsmp-creative-grid > .span-full { grid-column: 1 / -1; }
}
.tsmp-app .tsmp-stage-hint--quiet { margin-top: 14px; font-size: 13px; }
.tsmp-app .tsmp-stage-hint--quiet a { color: var(--ts-ink-45); }
.tsmp-app .tsmp-stage-hint--quiet a:hover { color: var(--ts-accent); }

/* ---- Wizard header, as in the design ---- */
.tsmp-app .tsmp-wizard-head { margin: 8px 0 4px; }
.tsmp-app .tsmp-wizard-head h2 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; }
.tsmp-app .tsmp-wizard-head p { margin: 0; font-size: 16px; color: var(--ts-ink-70); }
@media (max-width: 640px) {
	.tsmp-app .tsmp-wizard-head h2 { font-size: 26px; }
}

/* A step whose creatives do not exist yet — shown for shape, not reachable. */
.tsmp-app .tsmp-pstep.is-empty { opacity: .5; cursor: default; }
.tsmp-app .tsmp-pstep.is-empty .tsmp-pcircle { border-style: dashed; }

/* ============================================================================
   Bridging our components into the client's stylesheet
   ==========================================================================
   Their sheet styles the shell; ours styles the pieces it never had to draw
   because the mockup was static — editors, pin copy, statuses. These rules only
   fill the gaps.
   ========================================================================== */

.tsmp-tool .tsmp-unit { border: 0; padding: 0; background: none; box-shadow: none; }
.tsmp-tool .editor-col .tsmp-unit + .tsmp-unit { margin-top: 24px; }
.tsmp-tool .tsmp-unit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* The rich editor takes their toolbar and body treatment. */
.tsmp-tool .tsmp-rt { border: 0; border-radius: 0; margin: 0; }
.tsmp-tool .tsmp-rt-bar {
	border: 1px solid var(--border); border-bottom: 0;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	padding: 8px 10px; background: var(--cream); gap: 4px;
}
.tsmp-tool .tsmp-rt-btn {
	width: 28px; height: 28px; min-width: 0; padding: 0;
	font-size: 13px; font-weight: 700; color: var(--ink);
	border: 0; border-radius: var(--radius-btn);
}
.tsmp-tool .tsmp-rt-btn:hover { background: var(--border); }
.tsmp-tool .tsmp-rt-body {
	border: 1px solid var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card);
	padding: 24px; min-height: 220px; font-size: 15px; max-height: none;
}
.tsmp-tool .tsmp-rt-body p { margin-bottom: 14px; }
.tsmp-tool .tsmp-rt-saved { font-family: var(--ff-mono); font-size: 10px; color: var(--dust); }

/* Product title reads as the listing heading it becomes. */
.tsmp-tool .tsmp-title-input {
	border: 1px solid var(--border); border-radius: var(--radius-btn);
	padding: 12px 14px; font-weight: 700; font-size: 19px;
}

/* Their revision bar shape, for the Claude "tell me what to change" box. */
.tsmp-tool .tsmp-revise {
	margin-top: 14px; background: var(--ivory); border: 1px solid var(--border);
	border-radius: var(--radius-pill); display: flex; align-items: center;
	padding: 4px 6px 4px 18px; gap: 8px;
}
.tsmp-tool .tsmp-revise input, .tsmp-tool .tsmp-revise textarea {
	flex: 1; border: 0; background: none; font-size: 14px; resize: none; padding: 8px 0;
}
.tsmp-tool .tsmp-revise .tsmp-btn { border-radius: var(--radius-pill); padding: 8px 18px; }

/* Month label sits over the pin, as in the mockup. */
.tsmp-tool .pin-month {
	display: block; padding: 8px 10px 0;
	font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--mascot);
}
.tsmp-tool .pin-card .tsmp-img,
.tsmp-tool .pin-card .tsmp-pin-video { aspect-ratio: 9/16; object-fit: cover; width: 100%; }
.tsmp-tool .pin-card .tsmp-pincopy { margin: 0; padding: 10px 12px; background: none; }

/* Status pills keep their meaning inside the new shell. */
.tsmp-tool .tsmp-pill { font-family: var(--ff-mono); font-size: 10px; }
.tsmp-tool .tsmp-empty {
	padding: 36px 20px; text-align: center;
	color: var(--dust); font-size: 14px; line-height: 1.6;
	background: var(--cream); border: 1px dashed var(--border);
	border-radius: var(--radius-card); margin-bottom: 24px;
}
.tsmp-tool .completion-tracker .ct-item:not(.done) .ct-dot { font-size: 0; }

/* The approval page is one card at a time. Anything the design does not have on
   screen permanently is hidden until the moment it matters. */
.tsmp-tool .tsmp-approval-foot { max-width: 860px; margin: 0 auto 24px; }
.tsmp-tool .tsmp-approval-foot[hidden] { display: none !important; }
.tsmp-tool .tsmp-sendlist[hidden] { display: none !important; }
.tsmp-tool .tsmp-sendlist { max-width: 860px; margin: 0 auto 24px; }
.tsmp-tool .tsmp-publog { max-width: 860px; margin: 0 auto 24px; }
.tsmp-tool .tsmp-approval-head { display: none; }
.tsmp-tool .tsmp-contacts { margin-top: 18px; }
.tsmp-tool .tsmp-selectall { display: block; margin-bottom: 10px; font-size: 14px; }
.tsmp-tool .tsmp-contacts-list { max-height: 320px; overflow-y: auto; margin-bottom: 16px; }
.tsmp-tool .tsmp-linkbtn {
	display: block; margin: 20px auto 0; padding: 0;
	background: none; border: 0; cursor: pointer;
	font-size: 13px; color: var(--dust); text-decoration: underline;
}
.tsmp-tool .tsmp-linkbtn:hover { color: var(--ink); }

/* ---- Channel status, so "is this connected?" has a visible answer ---- */
.tsmp-tool .tsmp-channels {
	background: var(--cream); border: 1px solid var(--border);
	border-radius: var(--radius-card); padding: 18px 20px; margin-bottom: 24px;
}
.tsmp-tool .tsmp-channels-lead { margin: 0 0 14px; font-size: 14px; color: var(--ink); }
.tsmp-tool .tsmp-channel-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tsmp-tool .tsmp-channel {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: var(--radius-pill);
	background: var(--white); border: 1px solid var(--border); font-size: 13px;
}
.tsmp-tool .tsmp-channel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dust); }
.tsmp-tool .tsmp-channel.is-connected .tsmp-channel-dot { background: var(--sage-dark); }
.tsmp-tool .tsmp-channel.is-paused .tsmp-channel-dot { background: var(--gold); }
.tsmp-tool .tsmp-channel-state { font-family: var(--ff-mono); font-size: 10px; color: var(--dust); }
.tsmp-tool .tsmp-channel.is-connected .tsmp-channel-state { color: var(--sage-dark); }
.tsmp-tool .tsmp-channel.is-paused .tsmp-channel-state { color: var(--gold); }

/* ---- Media on the approval page must not dominate the card ---- */
.tsmp-tool .tsmp-unit .tsmp-video,
.tsmp-tool .tsmp-unit video {
	max-width: 260px; width: 100%; height: auto;
	aspect-ratio: 9/16; object-fit: cover; display: block;
	border-radius: var(--radius-card); background: #000;
}
.tsmp-tool .tsmp-email-preview {
	width: 100%; height: 420px; border: 1px solid var(--border);
	border-radius: var(--radius-card); background: var(--white);
}
.tsmp-tool .tsmp-unit .tsmp-img { max-height: 420px; width: auto; max-width: 100%; }

/* Short and messages as a pair. The video keeps its portrait shape while the
   copy beside it uses the width it actually needs. */
.tsmp-tool .tsmp-creative-grid > .span-half { grid-column: span 3; }
.tsmp-tool .tsmp-creative-grid > .span-half .tsmp-video,
.tsmp-tool .tsmp-creative-grid > .span-half video { max-width: 220px; margin: 0 auto; }
.tsmp-tool .tsmp-creative-grid > .span-half .tsmp-readonly,
.tsmp-tool .tsmp-creative-grid > .span-half .tsmp-rendered { font-size: 14px; }
@media (max-width: 860px) {
	.tsmp-tool .tsmp-creative-grid > .span-half { grid-column: 1 / -1; }
}

/* ---- Steps: clearly clickable, and only where they lead somewhere ---- */
.tsmp-tool .progress-bar .p-step { cursor: pointer; transition: opacity .15s var(--ease-out); }
.tsmp-tool .progress-bar .p-step:hover:not(.is-empty) { opacity: .75; }
.tsmp-tool .progress-bar .p-step.is-empty { cursor: default; }
.tsmp-tool .progress-bar .p-step.is-empty:hover { opacity: .5; }

/* Pin video fills its graphic the way the background image does. */
.tsmp-tool .pin-graphic video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.tsmp-tool .pin-graphic { cursor: zoom-in; }
.tsmp-tool .pin-body .btn.pin-approve {
	width: 100%; justify-content: center; padding: 7px 12px; font-size: 10px;
}

/* Everything below the current stage on the project page is reference. Closed
   summaries should look like something you can open, not like a heading. */
.tsmp-app .tsmp-notes > summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; gap: 8px;
}
.tsmp-app .tsmp-notes > summary::-webkit-details-marker { display: none; }
.tsmp-app .tsmp-notes > summary::before {
	content: '▸'; font-size: 11px; color: var(--ts-ink-45);
	transition: transform .15s ease;
}
.tsmp-app .tsmp-notes[open] > summary::before { transform: rotate(90deg); }
.tsmp-app .tsmp-pincal > summary { font-weight: 600; }



/* Their .msg draws the bubble; ours only needs the inner body to be transparent
   so the two do not paint on top of each other. */
.tsmp-tool .msg .tsmp-bubble-body { background: none; border: 0; padding: 0; }
.tsmp-tool .tsmp-chat { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.tsmp-tool .msg.tsmp-bubble--thinking { opacity: .6; }

/* Their chat input pill. */
.tsmp-tool .tsmp-chat-compose,
.tsmp-tool .tsmp-bd-compose {
	margin-top: 20px; background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-pill); display: flex; align-items: center;
	padding: 6px 8px 6px 20px; gap: 10px;
}
.tsmp-tool .tsmp-chat-input,
.tsmp-tool .tsmp-bd-input {
	flex: 1; border: 0; background: none; font-size: 15px; color: var(--ink);
	padding: 10px 0; min-height: 40px; resize: none;
}
.tsmp-tool .tsmp-chat-input::placeholder,
.tsmp-tool .tsmp-bd-input::placeholder { color: var(--dust); }
.tsmp-tool .tsmp-chat-compose .btn,
.tsmp-tool .tsmp-chat-compose .tsmp-btn { border-radius: var(--radius-pill); padding: 10px 22px; }

/* The gate under the chat, sized like their footer note. */
.tsmp-tool .tsmp-interview-gate { font-size: 12px; color: var(--ink); margin-top: 10px; }
.tsmp-tool .tsmp-interview-submit { margin-top: 16px; width: 100%; }

/* ---- Upload slots: only what a live picker needs on top of their design ---- */
.tsmp-tool .tsmp-assets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.tsmp-tool .tsmp-assets-grid .upload-zone { grid-column: 1 / -1; margin-bottom: 8px; }

/* The slot box is the picker. Their rules draw it; these make it behave. */
.tsmp-tool .img-slot .slot-box {
	padding: 0; cursor: pointer; width: 100%;
	background-size: cover; background-position: center;
}
.tsmp-tool .img-slot .slot-check { display: none; }
.tsmp-tool .img-slot.filled .slot-check { display: flex; }
.tsmp-tool .img-slot:not(.is-required) .req-dot { display: none; }

.tsmp-tool .upload-zone .tsmp-asset-drop { background: none; border: 0; cursor: pointer; width: 100%; }
.tsmp-tool .upload-zone .tsmp-asset-preview { display: block; }
.tsmp-tool .upload-zone .tsmp-asset-file { font-family: var(--ff-mono); font-size: 13px; }

.tsmp-tool .tsmp-asset-clear {
	align-self: flex-start; padding: 0; margin-top: 2px;
	font-size: 10px; color: var(--dust); background: none; border: 0;
	text-decoration: underline; cursor: pointer;
}
.tsmp-tool .tsmp-asset-clear:hover { color: var(--pop-quiz); }
.tsmp-tool .tsmp-asset-error { font-size: 11px; color: var(--pop-quiz); }
.tsmp-tool .tsmp-asset.is-saving .slot-box { opacity: .55; }

@media (max-width: 860px) {
	.tsmp-tool .tsmp-assets-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Metadata fields on the upload step — their .field / .field-row shapes. */
.tsmp-tool .tsmp-meta.is-saved { border-color: var(--sage); }
.tsmp-tool .tsmp-meta.has-error { border-color: var(--pop-quiz); }
.tsmp-tool .field select { appearance: auto; }

/* ---- Overrides for the old slot rules, which still reach these elements ----
   The pre-redesign sheet gives every .tsmp-asset-preview a 4:3 box. On the
   resource drop zone that produced a full-width panel covering the page. Their
   layout wins inside .tsmp-tool. */
.tsmp-tool .upload-zone .tsmp-asset-drop,
.tsmp-tool .upload-zone .tsmp-asset-preview {
	aspect-ratio: auto; width: auto; height: auto;
	background: none; border: 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tsmp-tool .upload-zone .tsmp-asset-file {
	position: static; padding: 0; inset: auto;
	font-family: var(--ff-mono); font-size: 13px; color: var(--ink);
	text-align: center; word-break: break-word;
}
.tsmp-tool .upload-zone .tsmp-asset-preview::before {
	content: '📄'; font-size: 14px;
}
.tsmp-tool .upload-zone.uploaded .tsmp-asset-preview::before { content: '✓'; color: var(--fri-yay); font-weight: 700; }

/* The image slot is its own picker, so the old preview box must not fight the
   9:16 / 16:9 / circular shapes their sheet sets. */
.tsmp-tool .img-slot .slot-box.tsmp-asset-preview {
	aspect-ratio: 9 / 16; width: 100%;
	background-repeat: no-repeat; background-size: cover; background-position: center;
}
.tsmp-tool .img-slot.blog-feature .slot-box.tsmp-asset-preview { aspect-ratio: 16 / 9; }
.tsmp-tool .img-slot.profile .slot-box.tsmp-asset-preview { aspect-ratio: 1 / 1; }

/* A filled slot shows the teacher's actual picture. Their sheet paints a warm
   gradient there, which is right for a mockup with no real images but wrong
   here — the whole point of the step is seeing what you uploaded.
   `background` (not background-image) so the gradient is cleared outright; the
   inline background-image from the picker still applies over it. */
.tsmp-tool .img-slot.filled .slot-box,
.tsmp-tool .img-slot.filled .slot-box.tsmp-asset-preview {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--border);
}
.tsmp-tool .img-slot:not(.filled) .slot-box { background-image: none; }
.tsmp-tool .tsmp-asset-plus { display: none; }

/* The tick has to stay readable over a photograph. */
.tsmp-tool .img-slot.filled .slot-check {
	box-shadow: 0 1px 4px rgba(28,26,24,.45);
}

/* The uploaded picture, as a real element rather than a background — nothing in
   any stylesheet can paint over it. */
.tsmp-tool .img-slot .slot-box { position: relative; overflow: hidden; }
.tsmp-tool .slot-img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; object-fit: cover; display: block;
	border-radius: inherit;
}
.tsmp-tool .slot-img[hidden] { display: none; }
.tsmp-tool .img-slot .req-dot,
.tsmp-tool .img-slot .slot-check { z-index: 2; }

/* ---- Interview stage ---- */
.tsmp-tool .tsmp-intake .stage-card { padding: 36px 40px; }
.tsmp-tool .tsmp-interview-boot {
	padding: 40px 20px; text-align: center;
	background: var(--cream); border-radius: var(--radius-card);
}

/* Their opening panel: the assistant's framing before the conversation starts. */
.tsmp-tool .tsmp-chat .msg.claude:first-child {
	background: var(--ivory); border-color: var(--border); max-width: 100%;
}

/* The summary Claude writes at the end, and the gate under it. */
.tsmp-tool .tsmp-interview-foot {
	margin-top: 20px; padding: 20px;
	background: var(--ivory); border: 1px solid var(--border);
	border-radius: var(--radius-card);
}
.tsmp-tool .tsmp-interview-submit { width: 100%; margin-top: 4px; }
.tsmp-tool .tsmp-interview-gate { margin-top: 10px; font-size: 12px; color: var(--ink); }
.tsmp-tool .tsmp-field-price { margin-bottom: 16px; }
.tsmp-tool .tsmp-field-price span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.tsmp-tool .tsmp-field-price input {
	width: 100%; padding: 11px 14px; font-size: 15px;
	border: 1px solid var(--border); border-radius: var(--radius-btn); background: #fff;
}

@media (max-width: 640px) {
	.tsmp-tool .tsmp-intake .stage-card { padding: 24px 20px; }
}

/* ---- Chat input, as their chat-input-bar ---- */
.tsmp-tool .tsmp-chat-compose,
.tsmp-tool .tsmp-bd-compose {
	margin-top: 20px; padding: 6px 8px 6px 20px; gap: 10px;
	background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	display: flex; align-items: center; flex-wrap: nowrap;
}
.tsmp-tool .tsmp-chat-input,
.tsmp-tool .tsmp-bd-input {
	flex: 1; min-width: 0; border: 0; background: none; box-shadow: none;
	font-family: var(--ff-body); font-size: 15px; color: var(--ink);
	padding: 9px 0; resize: none; overflow-y: auto;
	min-height: 22px; max-height: 120px; line-height: 1.5;
}
.tsmp-tool .tsmp-chat-input:focus,
.tsmp-tool .tsmp-bd-input:focus { border: 0; box-shadow: none; outline: none; }
.tsmp-tool .tsmp-chat-input::placeholder,
.tsmp-tool .tsmp-bd-input::placeholder { color: var(--dust); }

/* Mic sits quiet; send is the only coloured thing in the row. */
.tsmp-tool .icon-btn {
	width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--ink); background: none; border: 0; cursor: pointer;
	transition: background .15s var(--ease-out);
}
.tsmp-tool .icon-btn:hover { background: var(--ivory); }
.tsmp-tool .icon-btn svg { width: 16px; height: 16px; }
.tsmp-tool .icon-btn.send { background: var(--fri-yay); color: #fff; }
.tsmp-tool .icon-btn.send:hover { background: var(--mascot); }
.tsmp-tool .icon-btn.send svg { width: 14px; height: 14px; }
.tsmp-tool .icon-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Recording: the mic itself turns red rather than a separate indicator. */
.tsmp-tool .icon-btn.is-live { background: var(--fri-yay-light); color: var(--fri-yay); }

/* ---- Send / mic buttons, stated strongly enough to beat the theme ----
   Hello and Elementor both style bare <button> elements, and their selectors
   outrank a single class. These are scoped to the compose row so they only win
   where they should. */
.tsmp-app .tsmp-chat-compose .icon-btn,
.tsmp-app .tsmp-bd-compose .icon-btn,
.tsmp-tool .tsmp-chat-compose .icon-btn,
.tsmp-tool .tsmp-bd-compose .icon-btn {
	width: 36px; height: 36px; min-width: 36px; min-height: 36px;
	padding: 0; margin: 0; flex: 0 0 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--ts-ink, #1c1a18);
	box-shadow: none; text-decoration: none; line-height: 1; font-size: 0;
	cursor: pointer;
}
.tsmp-app .tsmp-chat-compose .icon-btn:hover,
.tsmp-app .tsmp-bd-compose .icon-btn:hover,
.tsmp-tool .tsmp-chat-compose .icon-btn:hover,
.tsmp-tool .tsmp-bd-compose .icon-btn:hover {
	background: var(--ivory, #f3ede3);
	border-radius: 50%;
}

.tsmp-app .tsmp-chat-compose .icon-btn.send,
.tsmp-app .tsmp-bd-compose .icon-btn.send,
.tsmp-tool .tsmp-chat-compose .icon-btn.send,
.tsmp-tool .tsmp-bd-compose .icon-btn.send {
	background: var(--fri-yay, #c25f4e);
	color: #fff;
	border-radius: 50%;
}
.tsmp-app .tsmp-chat-compose .icon-btn.send:hover,
.tsmp-app .tsmp-bd-compose .icon-btn.send:hover,
.tsmp-tool .tsmp-chat-compose .icon-btn.send:hover,
.tsmp-tool .tsmp-bd-compose .icon-btn.send:hover {
	background: var(--mascot, #b48970);
}

/* The glyph itself — sized here because font-size:0 above kills any inherited
   sizing, which is what stops a stray character appearing beside the icon. */
.tsmp-app .tsmp-chat-compose .icon-btn svg,
.tsmp-app .tsmp-bd-compose .icon-btn svg,
.tsmp-tool .tsmp-chat-compose .icon-btn svg,
.tsmp-tool .tsmp-bd-compose .icon-btn svg {
	width: 16px; height: 16px; display: block; fill: currentColor; stroke: currentColor;
}
.tsmp-app .tsmp-chat-compose .icon-btn.send svg,
.tsmp-tool .tsmp-chat-compose .icon-btn.send svg,
.tsmp-app .tsmp-bd-compose .icon-btn.send svg,
.tsmp-tool .tsmp-bd-compose .icon-btn.send svg {
	width: 14px; height: 14px; stroke: none;
}

/* Recording state, on the mic only. */
.tsmp-app .tsmp-chat-compose .icon-btn.is-live,
.tsmp-tool .tsmp-chat-compose .icon-btn.is-live,
.tsmp-app .tsmp-bd-compose .icon-btn.is-live,
.tsmp-tool .tsmp-bd-compose .icon-btn.is-live {
	background: var(--fri-yay-light, #f5e8e2); color: var(--fri-yay, #c25f4e);
}

/* ---- "Building your campaign" ---- */
.tsmp-tool .tsmp-building { max-width: 860px; margin: 0 auto; }
.tsmp-tool .tsmp-building-list { margin: 8px 0 0; padding: 0; list-style: none; }
.tsmp-tool .tsmp-building-step {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0; border-top: 1px solid var(--border);
	font-size: 15px; color: var(--dust);
}
.tsmp-tool .tsmp-building-step:first-child { border-top: 0; }
.tsmp-tool .tsmp-building-ic {
	width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
	border: 1.5px solid var(--border); background: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; line-height: 1;
}

/* Done, in progress, not started — three states, told apart at a glance. */
.tsmp-tool .tsmp-building-step.is-done { color: var(--ink); }
.tsmp-tool .tsmp-building-step.is-done .tsmp-building-ic {
	background: var(--ink); border-color: var(--ink); color: #fff;
}
.tsmp-tool .tsmp-building-step.is-done .tsmp-building-ic::after { content: '✓'; }

.tsmp-tool .tsmp-building-step.is-active { color: var(--ink); font-weight: 500; }
.tsmp-tool .tsmp-building-step.is-active .tsmp-building-ic {
	border-color: var(--fri-yay);
	border-right-color: transparent;
	animation: tsmp-spin .8s linear infinite;
}
@keyframes tsmp-spin { to { transform: rotate(360deg); } }

.tsmp-tool .tsmp-building-note {
	margin: 20px 0 0; font-size: 13px; color: var(--dust);
}

/* Video still rendering — the run can be marked ready before Creatomate finishes. */
.tsmp-tool .tsmp-videowait {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px; margin-bottom: 20px;
	background: var(--gold-light); border: 1px solid var(--gold);
	border-radius: var(--radius-card); font-size: 14px; color: var(--ink);
}
.tsmp-tool .tsmp-videowait-spin {
	width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px;
	border: 2px solid var(--gold); border-right-color: transparent;
	border-radius: 50%; animation: tsmp-spin .8s linear infinite;
}

/* ---- Month label: out of the artwork's corner ----
   Several of Tiffiny's layouts put a SHOP NOW ribbon in the top-right, which is
   exactly where the badge was sitting. Moving it into the card body below the
   image means it can never cover the design, whatever she changes. */
.tsmp-tool .pin-card { display: flex; flex-direction: column; }
.tsmp-tool .pin-card .pin-graphic { order: 1; }
.tsmp-tool .pin-card .pin-month {
	order: 2;
	position: static; inset: auto;
	align-self: flex-start;
	margin: 10px 12px 0; padding: 3px 8px;
	background: var(--ivory); border: 1px solid var(--border);
	border-radius: var(--radius-btn);
	font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--mascot);
}
.tsmp-tool .pin-card .pin-body { order: 3; padding-top: 8px; }

/* ---- Undo a revision -------------------------------------------------- */
/* Sits quietly under the Claude prompt and only appears once there is
   something to undo. `display: block` on .tsmp-linkbtn beats the plain
   `hidden` attribute, so it needs saying again louder. */
.tsmp-tool .tsmp-restore,
.tsmp-app .tsmp-restore {
	margin: 8px 0 0;
	align-self: flex-start;
}
.tsmp-tool .tsmp-restore[hidden],
.tsmp-app .tsmp-restore[hidden] { display: none; }

/* ---- Dictation on the revision box (DP-01) ---------------------------- */
/* Unscoped: the approval card renders inside both the app shell and the
   reskinned tool, and the button belongs to the row either way. */
.tsmp-prompt-mic {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	background: #fff; color: var(--ts-dust, #8a8378);
	border: 1px solid var(--ts-line, #e4e0d8); border-radius: 10px;
	cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.tsmp-prompt-mic:hover { color: var(--ts-accent, #c25f4e); border-color: var(--ts-accent, #c25f4e); }
.tsmp-prompt-mic.is-live {
	background: var(--ts-accent, #c25f4e); border-color: var(--ts-accent, #c25f4e); color: #fff;
}
.tsmp-prompt-mic[hidden] { display: none; }

/* ---- Where a pin actually sends people (DP-08) ------------------------ */
.pin-dest {
	display: inline-block; margin-top: 6px;
	font-size: 12px; color: var(--ts-dust, #8a8378); text-decoration: underline;
}
.pin-dest:hover { color: var(--ts-accent, #c25f4e); }
.pin-dest.is-pending { text-decoration: none; font-style: italic; }

/* ---- Approve, three states ------------------------------------------- */
/* Grey at rest, sage on hover, dark sage once approved — and it toggles
   back, so the approved state has to be a real, visible state rather than
   a one-way label change. Colours taken from the client's own skin. */
:root {
	--ts-sage: #7A9B8A;
	--ts-sage-dark: #5F7A6C;
	--ts-sage-light: #E4F0EA;
}
.pin-approve,
.tsmp-btn-approve {
	background: var(--ts-line, #e4e0d8);
	border: 1px solid var(--ts-line, #e4e0d8);
	color: var(--ts-dust, #8a8378);
	transition: background .15s, border-color .15s, color .15s;
}
.pin-approve:hover:not(.is-approved),
.tsmp-btn-approve:hover:not(.is-approved) {
	background: var(--ts-sage-light);
	border-color: var(--ts-sage-dark);
	color: var(--ts-sage-dark);
}
.pin-approve.is-approved,
.tsmp-btn-approve.is-approved {
	background: var(--ts-sage-dark);
	border-color: var(--ts-sage-dark);
	color: #fff;
}
.pin-approve.is-approved:hover,
.tsmp-btn-approve.is-approved:hover { background: var(--ts-sage); }

/* ---- Blog word count -------------------------------------------------- */
.tsmp-rt-words {
	margin-left: auto; padding-left: 10px;
	font-size: 12px; color: var(--ts-dust, #8a8378); white-space: nowrap;
}
.tsmp-rt-words.is-over { color: var(--ts-red, #b32d2e); font-weight: 600; }

/* ---- Connect prompt beside the posts it gates ------------------------- */
.platform-connect {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 16px; margin: 0 0 16px;
	background: var(--ts-sand, #f6f3ec);
	border: 1px solid var(--ts-line, #e4e0d8);
	border-radius: 12px;
}
.platform-connect-dot {
	flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
	background: var(--ts-dust, #8a8378);
}
.platform-connect-text { flex: 1; min-width: 220px; font-size: 13px; color: var(--ts-ink, #2a2723); }
.platform-connect-btn { flex: 0 0 auto; }

/* ---- Board picker, above the pins ------------------------------------ */
.board-picker {
	padding: 20px 22px; margin: 0 0 26px;
	background: var(--ts-sand, #f6f3ec);
	border: 1px solid var(--ts-line, #e4e0d8);
	border-radius: var(--ts-radius, 16px);
}
.board-picker-title { margin: 0 0 4px; font-size: 15px; }
.board-picker-lead { margin: 0 0 14px; font-size: 13px; color: var(--ts-dust, #8a8378); }
.board-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.board-chip {
	padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
	background: #fff; border: 1px solid var(--ts-line, #e4e0d8); color: var(--ts-ink, #2a2723);
}
.board-chip:hover { border-color: var(--ts-sage-dark, #5F7A6C); }
.board-chip.is-on {
	background: var(--ts-sage-dark, #5F7A6C); border-color: var(--ts-sage-dark, #5F7A6C); color: #fff;
}
.board-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.board-add input { flex: 1; min-width: 150px; }
.board-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.board-count { font-size: 13px; color: var(--ts-dust, #8a8378); }
.board-count.is-ready { color: var(--ts-sage-dark, #5F7A6C); font-weight: 600; }

/* ---- Both pin sets on one screen ------------------------------------- */
.pin-section { margin-bottom: 34px; }
.pin-section-title { margin: 0 0 14px; font-size: 15px; }
.pin-board { margin-top: 6px; font-size: 12px; color: var(--ts-dust, #8a8378); }

/* A queued platform is good news, so it should not wear the failure colour. */
.tsmp-publog-row.is-waiting .tsmp-publog-status { color: var(--ts-sage-dark, #5F7A6C); font-weight: 600; }

/* ---- List and FAQ editors -------------------------------------------- */
.tsmp-list-hint { margin: 0 0 12px; font-size: 13px; color: var(--ts-dust, #8a8378); }
.tsmp-list-rows, .tsmp-faq-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tsmp-list-row { display: flex; align-items: center; gap: 8px; }
.tsmp-list-input { flex: 1; }
.tsmp-list-del {
	flex: 0 0 auto; width: 30px; height: 30px; padding: 0; line-height: 1;
	background: none; border: 1px solid var(--ts-line, #e4e0d8); border-radius: 8px;
	color: var(--ts-dust, #8a8378); cursor: pointer; font-size: 17px;
}
.tsmp-list-del:hover { color: var(--ts-red, #b32d2e); border-color: var(--ts-red, #b32d2e); }

.tsmp-faq-row {
	display: grid; grid-template-columns: 1fr 30px; gap: 8px;
	padding: 12px; border: 1px solid var(--ts-line, #e4e0d8); border-radius: 12px;
	background: #fff;
}
.tsmp-faq-q { grid-column: 1; font-weight: 600; }
.tsmp-faq-a { grid-column: 1; resize: vertical; }
.tsmp-faq-row .tsmp-list-del { grid-column: 2; grid-row: 1; }
.tsmp-faq-note { margin: 0 0 10px; font-size: 13px; color: var(--ts-dust, #8a8378); }
.tsmp-faq-note.is-short { color: var(--ts-red, #b32d2e); font-weight: 600; }

/* ---- Dashboard alerts ------------------------------------------------- */
.tsmp-alert {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 14px 18px; margin: 0 0 20px;
	border: 1px solid var(--ts-line, #e4e0d8); border-radius: 12px;
	font-size: 14px;
}
.tsmp-alert strong { flex: 0 0 auto; }
.tsmp-alert span { flex: 1; min-width: 240px; color: var(--ts-dust, #8a8378); font-size: 13px; }
.tsmp-alert-warn { background: #fdf6ec; border-color: #e8d5b5; }

/* ---- Build My Store --------------------------------------------------- */
.tsmp-store-head { margin-bottom: 26px; }
.tsmp-store-lead { margin: 4px 0 14px; color: var(--ts-dust, #8a8378); font-size: 14px; }
.tsmp-store-url { margin: 0 0 14px; font-size: 13px; color: var(--ts-dust, #8a8378); }
.tsmp-store-progress {
	height: 6px; border-radius: 999px; overflow: hidden;
	background: var(--ts-line, #e4e0d8);
}
.tsmp-store-bar {
	display: block; height: 100%; width: 0;
	background: var(--ts-sage-dark, #5F7A6C); transition: width .3s ease;
}
.tsmp-store-count { margin: 8px 0 0; font-size: 13px; color: var(--ts-dust, #8a8378); }

.tsmp-store-step {
	padding: 22px; margin-bottom: 16px;
	background: #fff; border: 1px solid var(--ts-line, #e4e0d8);
	border-radius: var(--ts-radius, 16px);
}
.tsmp-store-step.is-done { border-color: var(--ts-sage, #7A9B8A); background: #fcfdfc; }
.tsmp-store-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tsmp-store-step-head h3 { margin: 0; font-size: 16px; }
.tsmp-store-num {
	flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ts-line, #e4e0d8); color: var(--ts-ink, #2a2723);
	font-size: 13px; font-weight: 600;
}
.tsmp-store-step.is-done .tsmp-store-num { background: var(--ts-sage-dark, #5F7A6C); color: #fff; }
.tsmp-store-optional {
	font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ts-dust, #8a8378);
}
.tsmp-store-hint { margin: 0 0 14px; font-size: 13px; color: var(--ts-dust, #8a8378); }
.tsmp-store-input, .tsmp-store-textarea { width: 100%; margin-bottom: 10px; }
.tsmp-store-location { display: flex; gap: 8px; flex-wrap: wrap; }
.tsmp-store-location .tsmp-store-input { flex: 1; min-width: 150px; }
.tsmp-store-note { margin: 4px 0 10px; font-size: 12px; color: var(--ts-dust, #8a8378); }

.tsmp-store-preview {
	display: flex; align-items: center; justify-content: center;
	min-height: 120px; margin-bottom: 10px; padding: 10px;
	background: var(--ts-sand, #f6f3ec); border-radius: 12px; overflow: hidden;
}
.tsmp-store-preview img, .tsmp-store-preview video { max-width: 100%; max-height: 220px; display: block; }
.tsmp-store-media.is-circle .tsmp-store-preview img {
	width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
}
.tsmp-store-empty { font-size: 13px; color: var(--ts-dust, #8a8378); }
.tsmp-store-file { display: block; margin-bottom: 8px; font-size: 13px; }
.tsmp-alert-ready { background: #f2f7f4; border-color: #cfe0d6; }

/* ---- Public storefront ------------------------------------------------ */
.tsmp-sf-strip {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	margin: 14px 0 0; padding: 0; list-style: none;
	font-size: 14px; color: var(--ts-ink, #2a2723);
}
.tsmp-sf-strip li { display: flex; align-items: center; gap: 7px; }
.tsmp-sf-ico { font-size: 15px; line-height: 1; }

.tsmp-sf-about { margin: 34px 0; }
.tsmp-sf-about-title { margin: 0 0 16px; font-size: 22px; }
.tsmp-sf-video { margin-bottom: 18px; }
.tsmp-sf-video video {
	width: 100%; max-width: 720px; display: block;
	border-radius: var(--ts-radius, 16px); background: #000;
}
.tsmp-sf-bio { font-size: 15px; line-height: 1.65; }
.tsmp-sf-bio p { margin: 0 0 12px; }
.tsmp-sf-more { margin-top: 4px; }

/* ---- Preview-only copy ------------------------------------------------ */
/* Selection off and a capped height on long fields. A speed bump, not a lock —
   the words are on the page and dev tools will always reach them. */
.tsmp-unit.is-protected .tsmp-rendered,
.tsmp-unit.is-protected .tsmp-readonly,
.tsmp-unit.is-protected .tsmp-copy {
	user-select: none; -webkit-user-select: none;
	max-height: 320px; overflow: hidden; position: relative;
}
.tsmp-unit.is-protected .tsmp-rendered::after,
.tsmp-unit.is-protected .tsmp-readonly::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
	background: linear-gradient( to bottom, rgba(255,255,255,0), #fff );
	pointer-events: none;
}

/* ---- Product page tabs ------------------------------------------------ */
.tsmp-tab { font-size: 15px; line-height: 1.65; }
.tsmp-tab-list { margin: 0; padding: 0; list-style: none; }
.tsmp-tab-list li {
	position: relative; padding: 0 0 0 26px; margin-bottom: 11px;
}
.tsmp-tab-list li::before {
	content: '✓'; position: absolute; left: 0; top: 0;
	color: var(--ts-sage-dark, #5F7A6C); font-weight: 700;
}
.tsmp-faq-item {
	padding: 12px 0; border-bottom: 1px solid var(--ts-line, #e4e0d8);
}
.tsmp-faq-item:last-child { border-bottom: 0; }
.tsmp-faq-item summary {
	cursor: pointer; font-weight: 600; list-style: none;
	display: flex; justify-content: space-between; gap: 14px;
}
.tsmp-faq-item summary::-webkit-details-marker { display: none; }
.tsmp-faq-item summary::after { content: '+'; color: var(--ts-dust, #8a8378); }
.tsmp-faq-item[open] summary::after { content: '–'; }
.tsmp-faq-answer { padding-top: 8px; color: var(--ts-ink, #2a2723); }
.tsmp-faq-answer p:last-child { margin-bottom: 0; }
.tsmp-alert-setup { background: #fbfaf7; border-color: var(--ts-line, #e4e0d8); }

/* ---- Project Kits list ------------------------------------------------ */
/* Values taken from the client's 31 August dashboard skin so the list reads
   as one design with the rest of their pages, not a plugin bolted alongside. */
.products-table-wrap {
	background: #fff;
	border: 1px solid var(--ts-line, #e4e0d8);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}
.products-table { width: 100%; border-collapse: collapse; }
.products-table th {
	font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
	color: #B08968; padding: 16px; text-align: left;
	border-bottom: 1px solid var(--ts-line, #e4e0d8);
}
.products-table td {
	padding: 12px 16px; vertical-align: middle;
	border-bottom: 1px solid var(--ts-line, #e4e0d8);
}
.products-table tr:last-child td { border-bottom: none; }
.products-table tr.p-row { transition: box-shadow .15s ease, background .15s; }
.products-table tr.p-row:hover { box-shadow: 0 1px 3px rgba(28,26,24,.04); background: #E6D7CE33; }

.p-thumb {
	width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
	background: linear-gradient( 150deg, #F6EFE1, #F5E8E2 );
}
.p-name { font-weight: 500; font-size: 14px; color: var(--ts-ink, #2a2723); text-decoration: none; }
a.p-name:hover { color: var(--ts-accent, #c25f4e); }
.p-date { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #8C8278; }

.badge {
	display: inline-block; padding: 4px 10px; border-radius: 4px;
	font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.badge.published { background: #F5E8E2; color: var(--ts-accent, #c25f4e); }
.badge.draft,
.badge.progress { background: #F3EDE3; color: #B08968; }

.tag-chips-inline { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chips-inline .chip {
	background: #F3EDE3; border: 1px solid var(--ts-line, #e4e0d8); border-radius: 4px;
	padding: 3px 8px; font-size: 9px; font-weight: 600;
	text-transform: uppercase; color: var(--ts-ink, #2a2723);
}
.tsmp-projrow-act {
	display: block; margin-top: 4px; padding: 0;
	background: none; border: 0; cursor: pointer;
	font-size: 11px; color: #8C8278; text-decoration: underline;
}
.tsmp-projrow-act:hover { color: var(--ts-accent, #c25f4e); }

/* ---- Project Kits header and tabs ------------------------------------- */
.tsmp-app .page-header h1 { margin: 0 0 6px; }
.tsmp-app .page-header p { margin: 0; color: #8C8278; font-size: 14px; }
.tabs-filter {
	display: flex; gap: 28px; margin: 28px 0 20px;
	border-bottom: 1px solid var(--ts-line, #e4e0d8);
}
.tabs-filter button {
	background: none; border: 0; cursor: pointer;
	padding: 0 0 12px; border-bottom: 2px solid transparent;
	font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
	color: #8C8278;
}
.tabs-filter button.active { color: var(--ts-accent, #c25f4e); border-bottom-color: var(--ts-accent, #c25f4e); }
.tsmp-tabcount { font-weight: 500; }