/* ==========================================================================
   /kit: speaker & trainer kit, laid out as a design file.
   Toolbar, layers panel, a dotted canvas of frames, and an inspector.
   Loads only on the "Speaker & trainer kit" template (functions.php).
   ========================================================================== */

body.is-kit {
	--k-canvas: #efe9e4;
	--k-dot: #d6cbc3;
	--k-panel: #fffefa;
	--k-line: #e2d9d2;
	--k-ink: #251919;
	--k-muted: #6d605d;
	--k-sel: #801212;
	--k-sel-ink: #fff;
	--k-gold: #ffdb9e;
	--k-tint: #f7e9dd;
	--k-soft: #f7f2ec;
	--k-chrome: #1f1717;
	--k-chrome-ink: #f4ece6;
	--k-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--k-top: 52px;
	background: var(--k-canvas);
	color: var(--k-ink);
	margin: 0;
}
body.is-kit .wp-site-blocks { padding: 0 !important; }
html:has(body.is-kit) { scroll-padding-top: calc(var(--k-top) + 24px); }

.kit { min-block-size: 100vh; font-size: 16px; line-height: 1.6; }
.kit *, .kit *::before, .kit *::after { box-sizing: border-box; }
.kit a { color: inherit; }
.kit h1, .kit h2, .kit h3, .kit p, .kit ul, .kit ol, .kit dl, .kit dd, .kit figure, .kit blockquote { margin: 0; padding: 0; }
.kit ul, .kit ol { list-style: none; }
.kit :focus-visible { outline: 2px solid var(--k-sel); outline-offset: 2px; }

/* ── Toolbar ─────────────────────────────────────────────── */
.kit-top {
	position: sticky; inset-block-start: 0; z-index: 30;
	display: flex; align-items: center; gap: 14px;
	block-size: var(--k-top); padding-inline: 12px 14px;
	background: var(--k-chrome); color: var(--k-chrome-ink);
}
.admin-bar .kit-top { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
.kit-logo {
	display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex: none;
	background: var(--k-sel); color: #fff; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .02em; border-radius: 6px;
}
.kit-file { min-inline-size: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-file-dir { opacity: .55; }
.kit-file strong { font-weight: 600; }
.kit-top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.kit-avatars { display: flex; }
.av { display: grid; place-items: center; block-size: 26px; min-inline-size: 26px; padding-inline: 6px; border-radius: 13px; font-size: 11px; font-weight: 700; border: 2px solid var(--k-chrome); }
.av-a { background: var(--k-sel); color: #fff; }
.av-y { background: var(--k-gold); color: #541010; margin-inline-start: -6px; }
.kit-chip {
	display: grid; place-items: center; min-inline-size: 30px; block-size: 30px; padding-inline: 8px;
	border: 1px solid rgb(255 255 255 / .22); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600;
}
.kit-chip:hover { background: rgb(255 255 255 / .08); }
.kit-share {
	display: inline-flex; align-items: center; block-size: 32px; padding-inline: 14px; border-radius: 6px;
	background: var(--k-gold); color: #541010 !important; text-decoration: none; font-weight: 700; font-size: 14px;
}
.kit-share:hover { background: #ffe7bd; }

/* ── Canvas: full width ─────────────────────────────────── */
.kit-panel-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); margin-block: 18px 8px !important; }
.kit-panel-title:first-child { margin-block-start: 0 !important; }

.kit-canvas {
	position: relative; min-inline-size: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px;
	padding: 56px 16px 128px;
	background-color: var(--k-canvas);
	background-image: radial-gradient(var(--k-dot) 1px, transparent 1.2px);
	background-size: 20px 20px;
}
@media (min-width: 960px) { .kit-canvas { padding: 80px clamp(32px, 5vw, 96px) 140px; gap: 96px; } }
@media (min-width: 1600px) { .kit-canvas { padding-inline: calc((100vw - 1400px) / 2); } }

/* ── Dock: the layers as a floating toolbar, like a canvas app's bottom bar ── */
.kit-dock {
	position: fixed; z-index: 40; inset-block-end: 16px; inset-inline: 50% auto; translate: -50% 0;
	display: flex; align-items: center; gap: 4px; max-inline-size: calc(100vw - 24px);
	padding: 6px; border-radius: 14px;
	background: var(--k-chrome); color: var(--k-chrome-ink);
	box-shadow: 0 12px 32px -8px rgb(20 10 10 / .45), 0 0 0 1px rgb(255 255 255 / .06) inset;
}
[dir="rtl"] .kit-dock { translate: 50% 0; }
.dock-tool { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 9px; background: var(--k-sel); flex: none; }
.dock-tool svg { inline-size: 16px; block-size: 16px; fill: #fff; }
[dir="rtl"] .dock-tool svg { transform: scaleX(-1); }
.dock-layers { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.dock-layers::-webkit-scrollbar { display: none; }
.dock-layers a {
	display: flex; align-items: center; gap: 6px; block-size: 36px; padding-inline: 10px; border-radius: 9px;
	font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; color: rgb(244 236 230 / .72);
}
.dock-layers a span { font-family: var(--k-mono); opacity: .5; }
.dock-layers a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.dock-layers a.is-active { background: rgb(255 255 255 / .14); color: #fff; }
.dock-layers a.is-active span { color: var(--k-gold); opacity: 1; }
.dock-inspect {
	display: flex; align-items: center; gap: 6px; flex: none; block-size: 36px; padding-inline: 12px; margin-inline-start: 4px;
	border: 0; border-inline-start: 1px solid rgb(255 255 255 / .12); border-radius: 0 9px 9px 0; background: transparent;
	color: var(--k-gold); font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer;
}
[dir="rtl"] .dock-inspect { border-radius: 9px 0 0 9px; }
.dock-inspect:hover, .dock-inspect[aria-expanded="true"] { background: rgb(255 219 158 / .14); }
@media (max-width: 759px) { .dock-inspect-label { display: none; } .dock-layers a { padding-inline: 9px; } }

.ico-comp { display: inline-block; inline-size: 10px; block-size: 10px; background: var(--k-sel); transform: rotate(45deg); border-radius: 1px; flex: none; }

/* ── Frames ──────────────────────────────────────────────── */
.frame {
	position: relative; min-inline-size: 0;
	background: var(--k-panel); border-radius: 4px;
	box-shadow: 0 1px 2px rgb(37 25 25 / .06), 0 8px 24px -12px rgb(37 25 25 / .18);
	padding: clamp(24px, 4vw, 48px);
}
.frame-label {
	position: absolute; inset-block-end: 100%; inset-inline-start: 0; margin-block-end: 8px !important;
	font-size: 12px; color: var(--k-muted); font-family: var(--k-mono); white-space: nowrap;
}
.frame:target .frame-label, .frame:hover .frame-label { color: var(--k-sel); }
.frame:target { outline: 2px solid var(--k-sel); outline-offset: 0; }
.frame-title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.frame-lede { margin-block-start: 10px !important; color: var(--k-muted); max-inline-size: 60ch; }

/* Cover */
.frame-cover { display: grid; gap: 36px; align-items: center; overflow: visible; }
@media (min-width: 760px) { .frame-cover { grid-template-columns: 1.35fr 1fr; } }
.kit-eyebrow { font-family: var(--k-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-sel); }
.cover-name { margin-block: 18px 22px !important; font-size: clamp(48px, 8.5vw, 112px); line-height: .95; font-weight: 800; letter-spacing: -.035em; }
:lang(ar) .cover-name { letter-spacing: 0; line-height: 1.15; }
.sel { position: relative; display: inline-block; padding: 4px 8px; outline: 1.5px solid var(--k-sel); }
.sel .h { position: absolute; inline-size: 9px; block-size: 9px; background: #fff; border: 1.5px solid var(--k-sel); }
.sel .h1 { inset-block-start: -5px; inset-inline-start: -5px; }
.sel .h2 { inset-block-start: -5px; inset-inline-end: -5px; }
.sel .h3 { inset-block-end: -5px; inset-inline-start: -5px; }
.sel .h4 { inset-block-end: -5px; inset-inline-end: -5px; }
.sel-dim {
	position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 50%; translate: -50% 0;
	padding: 2px 8px; border-radius: 4px; background: var(--k-sel); color: var(--k-sel-ink);
	font: 600 12px/1.5 var(--k-mono); letter-spacing: 0; white-space: nowrap;
}
[dir="rtl"] .sel-dim { translate: 50% 0; }
.cover-lede { margin-block-start: 40px !important; font-size: clamp(17px, 1.6vw, 19px); max-inline-size: 56ch; }
.cover-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.btn-wine, .btn-line {
	display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 20px; border-radius: 8px;
	font-weight: 700; text-decoration: none; font-size: 15px;
}
.btn-wine { background: var(--k-sel); color: #fff !important; }
.btn-wine:hover { background: #601010; }
.btn-line { border: 1.5px solid var(--k-ink); }
.btn-line:hover { background: var(--k-soft); }
.cover-photo { position: relative; max-inline-size: 420px; justify-self: center; }
.cover-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }

/* Multiplayer cursors */
.cursor { position: absolute; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; z-index: 2; }
.cursor svg { inline-size: 18px; block-size: 18px; fill: var(--c); stroke: #fff; stroke-width: 1.2; }
.cursor b { margin-block-start: 14px; padding: 2px 8px; border-radius: 4px 10px 10px 10px; background: var(--c); color: var(--ci, #fff); font: 600 12px/1.5 var(--k-mono); }
.cursor-a { --c: var(--k-sel); inset-block-end: 14%; inset-inline-start: -18px; animation: kit-drift-a 9s ease-in-out infinite; }
.cursor-y { --c: var(--k-gold); --ci: #541010; inset-block-start: 22%; inset-inline-end: 38%; animation: kit-drift-y 11s ease-in-out infinite; }
[dir="rtl"] .cursor svg { transform: scaleX(-1); }
@keyframes kit-drift-a { 0%, 100% { translate: 0 0; } 40% { translate: 26px -30px; } 70% { translate: 10px 14px; } }
@keyframes kit-drift-y { 0%, 100% { translate: 0 0; } 35% { translate: -40px 24px; } 65% { translate: 20px 40px; } }
@media (max-width: 759px) { .cursor-y { display: none; } }

/* Inspector: a floating panel opened from the dock (inline when JS is off) */
.kit-inspector {
	margin: 0 16px 120px; padding: 18px; border-radius: 12px;
	background: var(--k-panel); border: 1px solid var(--k-line);
	box-shadow: 0 24px 48px -20px rgb(37 25 25 / .45);
}
.js .kit-inspector {
	position: fixed; z-index: 41; margin: 0; inline-size: min(300px, calc(100vw - 24px));
	inset-block-end: 72px; inset-inline-end: 16px; max-block-size: calc(100vh - 150px); overflow: auto;
	opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .2s, translate .2s, visibility 0s .2s;
}
.js .kit-inspector.is-open { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s, translate .2s; }
.insp-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.insp-head .kit-panel-title { margin: 0 !important; }
.insp-close { display: none; inline-size: 28px; block-size: 28px; border: 0; border-radius: 6px; background: var(--k-soft); color: var(--k-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.js .insp-close { display: grid; place-items: center; }
.props div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--k-line); }
.props div:last-child { border: 0; }
.props dt { font-size: 13px; color: var(--k-muted); }
.props dd { font-weight: 800; font-size: 20px; white-space: nowrap; }
.props dd small { font-size: 12px; font-weight: 500; color: var(--k-muted); }
.props-tags { display: flex; gap: 6px; }
.props-tags span { padding: 2px 10px; border-radius: 999px; background: var(--k-soft); font-size: 13px; }
.swatches li { display: flex; align-items: center; gap: 8px; padding-block: 4px; font-size: 13px; }
.swatches span { inline-size: 18px; block-size: 18px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.swatches code { margin-inline-start: auto; font-family: var(--k-mono); font-size: 12px; color: var(--k-muted); }
.kit-copy {
	inline-size: 100%; min-block-size: 40px; padding-inline: 12px; border: 1px dashed var(--k-sel); border-radius: 6px;
	background: transparent; color: var(--k-sel); font: 600 13px/1 var(--k-mono); cursor: pointer;
}
.kit-copy:hover { background: var(--k-tint); }

/* Cover redlines: the key numbers as measurement callouts */
.redlines { display: flex; flex-wrap: wrap; gap: 22px 0; margin-block-start: 40px !important; }
.redlines li { position: relative; padding-inline: 14px; font-size: 13px; color: var(--k-muted); }
.redlines li::before { content: ""; position: absolute; inset-block-start: -10px; inset-inline: 0; block-size: 6px; border: 1px solid #e0457b; border-block-start: 0; }
.redlines b { display: block; font: 700 20px/1.2 var(--k-mono); color: #c2185b; }

/* Components */
.comps { display: grid; gap: 16px; margin-block-start: 28px !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.comp { position: relative; padding: 22px; border: 1.5px dashed #b88; border-radius: 6px; background: #fff; }
.comp-tag { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--k-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--k-sel); }
.comp h3 { margin-block: 12px 6px !important; font-size: 20px; line-height: 1.25; font-weight: 800; }
.comp > p:not(.comp-tag) { color: var(--k-muted); font-size: 15px; }
.comp dl { margin-block-start: 16px !important; border-block-start: 1px solid var(--k-line); }
.comp dl div { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; border-block-end: 1px solid var(--k-line); font-size: 13px; }
.comp dt { color: var(--k-muted); }
.comp dd { font-weight: 600; text-align: end; }

/* Sticky notes */
.stickies { display: grid; gap: 18px; margin-block-start: 28px !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sticky { padding: 22px 20px 26px; min-block-size: 180px; rotate: var(--r); box-shadow: 0 10px 18px -12px rgb(37 25 25 / .35); transition: rotate .25s ease, translate .25s ease; }
.sticky:hover { rotate: 0deg; translate: 0 -3px; }
.sticky-gold { background: var(--k-gold); }
.sticky-tint { background: var(--k-tint); }
.sticky-soft { background: var(--k-soft); }
.sticky-white { background: #fff; outline: 1px solid var(--k-line); }
.sticky h3 { font-size: 19px; line-height: 1.3; font-weight: 800; }
.sticky p { margin-block-start: 10px !important; font-size: 15px; color: #4a3b38; }

/* Logos */
#clients { padding-block-end: 56px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-block-start: 28px !important; padding: 24px; outline: 1px dashed #e7a0a0; }
.logos li { display: grid; place-items: center; block-size: 56px; padding-inline: 12px; }
.logos img { display: block; max-block-size: 32px; max-inline-size: 140px; inline-size: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }
.spacing { position: absolute; inset-block-end: 20px; inset-inline-start: clamp(24px, 4vw, 48px); padding: 1px 6px; background: #b8285c; color: #fff; font: 600 11px/1.5 var(--k-mono); border-radius: 3px; }

/* Comments: a board of pins over a session mock, with the open thread beside it */
.cm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.cm-count { display: inline-grid; place-items: center; min-inline-size: 34px; block-size: 34px; padding-inline: 8px; border-radius: 17px; background: var(--k-sel); color: #fff; font-size: 16px; vertical-align: middle; }
.cm-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-filter { display: inline-flex; align-items: center; gap: 6px; block-size: 34px; padding-inline: 12px; border: 1px solid var(--k-line); border-radius: 17px; background: #fff; color: var(--k-ink); font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }
.cm-filter span { color: var(--k-muted); font-family: var(--k-mono); }
.cm-filter.is-on { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.cm-filter.is-on span { color: var(--k-gold); }

.cm { margin-block-start: 28px; }
.cm-board { display: none; }
.threads { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.thread { display: flex; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--k-line); border-radius: 12px; }
.pin {
	flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; object-fit: cover;
	border-radius: 50% 50% 50% 0; background: var(--k-sel); color: #fff; font-weight: 800; font-size: 15px;
}
[dir="rtl"] .pin { border-radius: 50% 50% 0 50%; }
.thread-head { font-size: 15px; }
.thread-role { color: var(--k-muted); font-size: 13px; }
.stars { display: block; margin-block-start: 6px; color: #9a5b00; letter-spacing: 2px; font-size: 13px; }
.thread blockquote { margin-block-start: 8px; font-size: 15px; }
.thread-link { display: inline-block; margin-block-start: 10px; font-size: 13px; font-weight: 600; color: var(--k-sel) !important; text-decoration: none; }

/* With JS: board + one open thread */
.js .cm { display: grid; gap: 20px; }
@media (min-width: 900px) { .js .cm { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.js .cm-board {
	display: block; position: relative; min-block-size: 340px; border-radius: 12px; overflow: hidden;
	background: var(--k-soft); background-image: radial-gradient(var(--k-dot) 1px, transparent 1.2px); background-size: 16px 16px;
}
@media (max-width: 759px) { .js .cm-board { min-block-size: 260px; } }
.cm-slide { position: absolute; inset: 9% 7%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr auto auto; gap: 10px; padding: 22px; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px -18px rgb(37 25 25 / .4); }
.cm-slide-tag { grid-column: 1 / -1; font: 600 11px/1 var(--k-mono); color: var(--k-muted); text-transform: uppercase; letter-spacing: .06em; }
.cm-l { grid-column: 1 / -1; block-size: 10px; border-radius: 5px; background: #ece4dd; }
.cm-l1 { block-size: 18px; inline-size: 70%; background: #d9cdc4; }
.cm-l2 { inline-size: 45%; }
.cm-box { block-size: 100%; min-block-size: 60px; border-radius: 6px; background: var(--k-tint); }
.cm-b2 { background: #f3dcc7; } .cm-b3 { background: var(--k-gold); opacity: .6; }
.cm-l3 { inline-size: 90%; } .cm-l4 { inline-size: 60%; }

.cm-pin {
	position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); z-index: 1;
	display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
	transition: opacity .2s, scale .2s;
}
[dir="rtl"] .cm-pin { inset-inline-start: auto; inset-inline-end: var(--x); }
.cm-pin-dot {
	display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50% 50% 50% 0;
	background: var(--k-sel); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgb(37 25 25 / .5);
	transition: scale .2s, background .2s;
}
[dir="rtl"] .cm-pin-dot { border-radius: 50% 50% 0 50%; }
.cm-pin-name {
	padding: 3px 8px; border-radius: 6px; background: var(--k-chrome); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
	opacity: 0; translate: -4px 0; pointer-events: none; transition: opacity .15s, translate .15s;
}
.cm-pin:hover .cm-pin-name, .cm-pin:focus-visible .cm-pin-name, .cm-pin.is-active .cm-pin-name { opacity: 1; translate: 0 0; }
.cm-pin:hover .cm-pin-dot { scale: 1.12; }
.cm-pin.is-active { z-index: 3; }
.cm-pin.is-active .cm-pin-dot { scale: 1.25; background: var(--k-ink); box-shadow: 0 0 0 3px var(--k-gold), 0 8px 18px -4px rgb(37 25 25 / .55); }
.cm-pin.is-out { opacity: .15; scale: .8; pointer-events: none; }

.js .cm-panel { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.js .threads { display: block; flex: 1; }
.js .thread { display: none; block-size: 100%; padding: 24px; border-color: var(--k-sel); box-shadow: 0 16px 36px -22px rgb(128 18 18 / .55); }
.js .thread.is-active { display: flex; animation: cm-in .25s ease; }
.js .thread blockquote { font-size: 17px; line-height: 1.65; }
@keyframes cm-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.js .cm-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-step { inline-size: 44px; block-size: 44px; border: 1px solid var(--k-line); border-radius: 50%; background: #fff; color: var(--k-ink); font-size: 18px; cursor: pointer; }
.cm-step:hover { background: var(--k-ink); color: #fff; border-color: var(--k-ink); }
.cm-pos { font: 600 13px/1 var(--k-mono); color: var(--k-muted); }

/* On stage: the site's On air player (theme.css + theme.js), sized for a frame */
.onair-kit { margin-block-start: 24px; }
.onair-kit .onair-studio { border-radius: 16px; }
.onair-kit .onair-screen { border-radius: 10px; }

/* FAQ: questions as numbered annotation notes */
.notes { display: grid; gap: 10px; margin-block-start: 24px; max-inline-size: 880px; }
.note { border: 1px solid var(--k-line); border-radius: 10px; background: #fff; }
.note[open] { border-color: var(--k-sel); }
.note summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; }
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: "+"; margin-inline-start: auto; font: 400 22px/1 var(--k-mono); color: var(--k-muted); }
.note[open] summary::after { content: "–"; color: var(--k-sel); }
.note-n { display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; background: #b8285c; color: #fff; font: 700 12px/1 var(--k-mono); }
.note-body { padding: 0 18px 18px calc(18px + 26px + 12px); color: #4a3b38; }
.note-body p + p { margin-block-start: 10px; }

/* Handoff */
.frame-handoff { background: var(--k-chrome); color: var(--k-chrome-ink); }
.frame-handoff .frame-label { color: var(--k-muted); }
/* The theme colors headings and links with higher specificity; this frame is dark. */
.kit .frame-handoff .handoff-title, .kit .handoff-links a { color: var(--k-chrome-ink) !important; }
.frame-handoff .frame-lede { color: #cdbdb6; }
.ready { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #1e7a4e; color: #fff; font: 600 12px/1.5 var(--k-mono); }
.handoff-title { margin-block: 18px 0 !important; font-size: clamp(30px, 5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; max-inline-size: 18ch; }
:lang(ar) .handoff-title { letter-spacing: 0; line-height: 1.3; }
.handoff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 28px; }
.handoff-mail { font: 700 clamp(20px, 3vw, 30px)/1.2 var(--k-mono); color: var(--k-gold) !important; text-decoration: none; word-break: break-all; }
.handoff-mail:hover { text-decoration: underline; }
.kit-copy-lg { inline-size: auto; border-color: var(--k-gold); color: var(--k-gold); }
.kit-copy-lg:hover { background: rgb(255 219 158 / .12); }
.handoff-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px !important; }
.brand-btn { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 12px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); text-decoration: none; transition: background .2s, translate .2s; }
.brand-btn:hover { background: rgb(255 219 158 / .16); translate: 0 -2px; }
.brand-btn svg { inline-size: 20px; block-size: 20px; color: #f4ece6; }
.brand-btn img { inline-size: 22px; block-size: 22px; object-fit: cover; border-radius: 6px; }
.brand-af { font-weight: 800; font-size: 13px; line-height: 1; font-family: inherit; color: var(--k-gold) !important; }

/* Booking form (Contact Form 7) on the dark handoff frame */
.kit-form { margin-block-start: 28px; max-inline-size: 760px; }
.kit-form form { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .kit-form form { grid-template-columns: 1fr 1fr; } .kit-form .kf-wide { grid-column: 1 / -1; } }
.kit-form p { margin: 0; }
.kit-form label { display: grid; gap: 6px; color: #cdbdb6; font-size: 14px; }
.kit-form :is(input:not([type="submit"]), select, textarea) {
	box-sizing: border-box; inline-size: 100%; min-block-size: 46px; padding: 10px 14px;
	border: 1px solid rgb(255 255 255 / .22); border-radius: 8px; background: rgb(255 255 255 / .06); color: #fff; font: inherit;
}
.kit-form select option { color: var(--k-ink); }
.kit-form textarea { min-block-size: 110px; }
.kit-form :is(input, select, textarea):focus { outline: 2px solid var(--k-gold); outline-offset: 2px; border-color: transparent; }
.kit-form input[type="date"] { color-scheme: dark; }
.kit-form input[type="submit"] {
	min-block-size: 50px; padding-inline: 24px; border: 0; border-radius: 8px; background: var(--k-gold); color: #541010;
	font-weight: 700; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; justify-self: start;
}
.kit-form input[type="submit"]:hover { background: #ffe7bd; }
.kit-form .wpcf7-not-valid-tip { color: #ffb4a8; font-size: 13px; }
.kit-form .wpcf7-response-output { grid-column: 1 / -1; margin: 0 !important; padding: 10px 14px !important; border-radius: 8px; color: #fff; }
.kit-form .wpcf7-spinner { margin-inline: 12px; }
.kit-or { margin-block-start: 28px !important; color: #cdbdb6; font-size: 14px; }

.kit-foot { font-size: 13px; color: var(--k-muted); text-align: center; }

.kit-pdf { display: inline-flex; gap: 5px; font: 600 12px/1 var(--k-mono); }
@media (max-width: 520px) { .kit-pdf span { display: none; } }
.kit-export { display: flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 40px; margin-block-end: 8px; border-radius: 6px; background: var(--k-sel); color: #fff !important; font: 600 13px/1 var(--k-mono); text-decoration: none; }
.kit-export:hover { background: #601010; }

/* ── Print / PDF: the file as pages. Panels and pointers out, every review in. ── */
@media print {
	@page { size: A4; margin: 10mm; }
	html { margin-top: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	#wpadminbar, .kit-form, .kit-or, .kit-dock, .kit-inspector, .cursor, .kit-top-end, .cm-board, .cm-nav, .cm-filters, .cover-ctas, .kit-copy, .onair-kit .onair-stage, .spacing { display: none !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	body.is-kit, .kit-canvas { background: #fff !important; }
	.kit-top { position: static; border-radius: 6px; }
	.kit-canvas { display: block; padding: 10px 0 0; }
	.frame { box-shadow: none; border: 1px solid var(--k-line); margin-block: 26px 0; padding: 22px; break-inside: auto; }
	.frame-label { position: static; margin-block-end: 6px !important; }
	.frame-title, .cm-head, .frame-lede { break-after: avoid; }
	.frame-cover { grid-template-columns: 1.5fr 1fr; gap: 20px; }
	.frame-cover .frame-label { grid-column: 1 / -1; }
	.cover-photo { max-inline-size: 62mm; }
	.cover-name { font-size: 60px; }
	.cover-lede { margin-block-start: 34px !important; font-size: 15px; }
	.frame-label { break-after: avoid; }
	.sticky { rotate: 0deg; box-shadow: none; }
	.comp, .sticky, .thread, .record li, .note, .onair-item, .redlines, .logos { break-inside: avoid; }
	.js .cm { display: block; }
	.js .threads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.js .thread { display: flex !important; padding: 14px; box-shadow: none; border-color: var(--k-line); }
	.js .thread blockquote { font-size: 13px; }
	.onair-kit .onair-studio { grid-template-columns: 1fr; padding: 10px; }
	.frame-handoff { break-inside: avoid; }
	.handoff-row { margin-block-start: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.cursor { animation: none; }
	.sticky, .stage-img img, .cm-pin, .cm-pin-dot, .kit-inspector { transition: none; }
	.thread.is-active { animation: none; }
}

.kit-form .hidden-fields-container { display: none; }

/* Platform logos in place of names */
.brand-ico { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; flex: none; }
.brand-ico svg { inline-size: 16px; block-size: 16px; }
.brand-ico img { inline-size: 18px; block-size: 18px; object-fit: contain; border-radius: 4px; }
.brand-txt { font: 800 11px/1 var(--k-mono); }
.cm-filter .brand-ico { margin-inline-end: 2px; }
.thread-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--k-line); border-radius: 999px; }
.thread-link:hover { border-color: var(--k-sel); }

/* Track record: the kit's logo belt sits above the shared On air / Stages /
   Teaching tabs (afaris_track_record() in inc/featured.php, styled in
   theme.css, driven by theme.js). The kit keeps its mono labels. */
.kit .tk { --tk-label: var(--k-mono); }
.kit .tk-logos { margin-block-start: 24px; padding: 18px 0 !important; border-block: 1px solid var(--k-line); }
.tk-logos-label { margin-block-end: 12px !important; font: 600 12px/1.5 var(--k-mono); color: var(--k-muted); }
.tk-marquee { direction: ltr; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.kit .tk-belt { display: flex; flex: none; align-items: center; gap: 44px; padding-inline-end: 44px; animation: tk-belt 48s linear infinite; }
.tk-marquee:hover .tk-belt, .tk-marquee:focus-within .tk-belt { animation-play-state: paused; }
.tk-belt li { display: grid; flex: none; place-items: center; block-size: 48px; }
.tk-belt img { display: block; inline-size: auto; max-block-size: 30px; max-inline-size: 130px; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.tk-belt li:hover img { filter: none; opacity: 1; transform: scale(1.1); }
@keyframes tk-belt { to { transform: translateX(-100%); } }
@media (max-width: 520px) {
	.kit .tk-belt { gap: 32px; padding-inline-end: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.kit .tk-belt { flex-wrap: wrap; flex: 1; animation: none; }
	.tk-belt[aria-hidden] { display: none; }
	.tk-marquee { -webkit-mask-image: none; mask-image: none; }
	.tk-belt img { transition: none; }
}
@media print {
	/* The On air heading opens a fresh page instead of sitting alone at the foot of one. */
	#stage.tk-panel { break-before: page; }
	/* The Teaching list is short: keep it on one page with its heading. */
	#record.tk-panel { break-inside: avoid; }
	.kit .tk-belt { flex-wrap: wrap; flex: 1; animation: none; }
	.tk-belt[aria-hidden] { display: none; }
	.tk-marquee { -webkit-mask-image: none; mask-image: none; }
}