/**
 * Sochkey Influencer Platform — portal & public site design system.
 * Mobile-first; intentional layouts at 320 / 375 / 414 / 768 / 1024 / 1280+.
 */

.skip-site,
.skip-shell {
	--skip-accent: #4f46e5;
	--skip-accent-2: #0ea5e9;
	--skip-ink: #101828;
	--skip-body: #3d4453;
	--skip-muted: #667085;
	--skip-line: #e4e7ec;
	--skip-surface: #ffffff;
	--skip-canvas: #f7f8fa;
	--skip-ok: #067647;
	--skip-ok-bg: #ecfdf3;
	--skip-warn: #b54708;
	--skip-warn-bg: #fffaeb;
	--skip-err: #b42318;
	--skip-err-bg: #fef3f2;
	--skip-info: #175cd3;
	--skip-info-bg: #eff8ff;
	--skip-r: 14px;
	--skip-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
	color: var(--skip-body);
	font-size: 15px;
	line-height: 1.6;
	box-sizing: border-box;
}

.skip-site *,
.skip-shell *,
.skip-site *::before,
.skip-shell *::before,
.skip-site *::after,
.skip-shell *::after { box-sizing: border-box; }

.skip-icon { flex: 0 0 auto; display: block; }
.skip-muted { color: var(--skip-muted); }
.skip-center { text-align: center; }
.skip-meta { font-size: 13px; color: var(--skip-muted); }

/* ---------------- Buttons ---------------- */

.skip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.skip-btn:active { transform: translateY(1px); }
.skip-btn:focus-visible { outline: 2px solid var(--skip-accent); outline-offset: 2px; }
.skip-btn--primary { background: var(--skip-accent); color: #fff; }
.skip-btn--primary:hover { background: color-mix(in srgb, var(--skip-accent) 86%, #000); color: #fff; }
.skip-btn--ghost { background: #fff; border-color: var(--skip-line); color: var(--skip-ink); }
.skip-btn--ghost:hover { background: var(--skip-canvas); color: var(--skip-ink); }
.skip-btn--sm { min-height: 34px; padding: 7px 13px; font-size: 13px; }
.skip-btn--lg { min-height: 48px; padding: 13px 24px; font-size: 15px; }

/* ---------------- Public site ---------------- */

.skip-hero {
	background: linear-gradient(135deg, color-mix(in srgb, var(--skip-accent) 10%, #fff), color-mix(in srgb, var(--skip-accent-2) 10%, #fff));
	border-radius: var(--skip-r);
	padding: 44px 20px;
	margin: 0 0 34px;
}

.skip-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.skip-hero h1 { font-size: clamp(26px, 5vw, 44px); line-height: 1.15; color: var(--skip-ink); margin: 14px 0 12px; }
.skip-hero p { font-size: clamp(15px, 2.2vw, 18px); color: var(--skip-body); margin: 0 auto 24px; max-width: 60ch; }
.skip-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.skip-tag {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--skip-accent);
	background: color-mix(in srgb, var(--skip-accent) 12%, #fff);
	border-radius: 999px;
	padding: 5px 12px;
}

.skip-section { padding: 10px 0 40px; }
.skip-section--alt { background: var(--skip-canvas); border-radius: var(--skip-r); padding: 34px 22px; }
.skip-section__title { font-size: clamp(21px, 3.4vw, 30px); color: var(--skip-ink); margin: 0 0 22px; }

.skip-grid { display: grid; gap: 16px; }
.skip-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.skip-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.skip-feature {
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	padding: 20px 22px;
	box-shadow: var(--skip-shadow);
}

.skip-feature h3 { font-size: 16px; color: var(--skip-ink); margin: 0 0 8px; }
.skip-feature p { margin: 0; font-size: 14px; }

.skip-steps { counter-reset: skipstep; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.skip-steps li {
	counter-increment: skipstep;
	background: #fff;
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	padding: 16px 18px 16px 58px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.skip-steps li::before {
	content: counter(skipstep);
	position: absolute;
	left: 18px;
	top: 16px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--skip-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.skip-steps strong { color: var(--skip-ink); font-size: 15px; }
.skip-steps span { font-size: 14px; }

.skip-cta { text-align: center; padding: 40px 20px; background: var(--skip-canvas); border-radius: var(--skip-r); }
.skip-cta h2 { font-size: clamp(20px, 3vw, 28px); color: var(--skip-ink); margin: 0 0 8px; }
.skip-cta p { margin: 0 auto 20px; max-width: 52ch; }

.skip-prose { max-width: 72ch; }
.skip-prose h2 { font-size: 19px; color: var(--skip-ink); margin: 26px 0 10px; }
.skip-prose ul { padding-left: 20px; }
.skip-prose li { margin: 6px 0; }

/* ---------------- Forms, notices ---------------- */

.skip-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.skip-form__field { margin: 0 0 16px; }

.skip-form label,
.skip-field label { display: block; font-size: 13px; font-weight: 600; color: var(--skip-ink); margin: 0 0 6px; }

.skip-form input[type="text"],
.skip-form input[type="email"],
.skip-form input[type="tel"],
.skip-form input[type="url"],
.skip-form input[type="password"],
.skip-form input[type="number"],
.skip-form input[type="date"],
.skip-form select,
.skip-form textarea,
#skip-login-form input[type="text"],
#skip-login-form input[type="password"] {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--skip-line);
	border-radius: 10px;
	padding: 10px 13px;
	font-size: 15px;
	background: #fff;
	color: var(--skip-ink);
}

.skip-form textarea { min-height: 130px; resize: vertical; }

.skip-form input:focus,
.skip-form select:focus,
.skip-form textarea:focus,
#skip-login-form input:focus {
	outline: 2px solid color-mix(in srgb, var(--skip-accent) 40%, transparent);
	outline-offset: 1px;
	border-color: var(--skip-accent);
}

.skip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-notice {
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 14px;
	margin: 0 0 18px;
	border: 1px solid transparent;
}

.skip-notice--ok { background: var(--skip-ok-bg); border-color: #a6f4c5; color: #05603a; }
.skip-notice--error { background: var(--skip-err-bg); border-color: #fecdca; color: #912018; }
.skip-notice--info { background: var(--skip-info-bg); border-color: #b2ddff; color: #194185; }
.skip-notice--warning { background: var(--skip-warn-bg); border-color: #fedf89; color: #93370d; }

.skip-contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.skip-contact__aside { background: var(--skip-canvas); border-radius: var(--skip-r); padding: 20px 22px; }
.skip-contact__aside h2 { font-size: 16px; color: var(--skip-ink); margin: 0 0 10px; }

/* ---------------- Auth ---------------- */

.skip-auth { display: flex; justify-content: center; padding: 32px 16px 56px; }

.skip-auth__card {
	width: 100%;
	max-width: 440px;
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	padding: 30px 28px;
	box-shadow: var(--skip-shadow);
}

.skip-auth__card h1 { font-size: 23px; color: var(--skip-ink); margin: 0 0 6px; }
.skip-auth__lead { font-size: 14px; color: var(--skip-muted); margin: 0 0 20px; }
.skip-auth__alt { font-size: 14px; margin: 14px 0 0; text-align: center; }

#skip-login-form p { margin: 0 0 14px; }
#skip-login-form label { display: block; font-size: 13px; font-weight: 600; color: var(--skip-ink); margin-bottom: 6px; }
#skip-login-form .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
#skip-login-form .login-remember input { width: auto; min-height: 0; }

#skip-login-form .submit input,
#skip-login-form input[type="submit"] {
	width: 100%;
	min-height: 46px;
	background: var(--skip-accent);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------- Portal shell ---------------- */

.skip-shell { background: var(--skip-canvas); border-radius: var(--skip-r); overflow: hidden; }

.skip-shell__topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--skip-surface);
	border-bottom: 1px solid var(--skip-line);
	padding: 10px 14px;
	position: sticky;
	top: 0;
	z-index: 20;
}

.skip-shell__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 9px;
	border: 1px solid var(--skip-line);
	border-radius: 9px;
	background: #fff;
	cursor: pointer;
}

.skip-shell__burger span { display: block; height: 2px; background: var(--skip-ink); border-radius: 2px; }

.skip-shell__brand { display: inline-flex; align-items: center; text-decoration: none; }
.skip-shell__brand img { max-height: 30px; width: auto; display: block; }
.skip-shell__brand-name { font-weight: 700; font-size: 16px; color: var(--skip-accent); letter-spacing: .02em; }
.skip-shell__spacer { flex: 1 1 auto; }
.skip-shell__user { display: flex; align-items: center; gap: 10px; }
.skip-shell__user-meta { display: none; flex-direction: column; line-height: 1.25; text-align: right; }
.skip-shell__user-name { font-size: 13.5px; font-weight: 600; color: var(--skip-ink); }
.skip-shell__user-role { font-size: 11.5px; color: var(--skip-muted); }
.skip-shell__avatar { border-radius: 999px; display: block; }

.skip-shell__body { display: flex; align-items: flex-start; min-height: 60vh; }

.skip-shell__sidebar {
	display: none;
	flex: 0 0 232px;
	padding: 14px 10px;
	border-right: 1px solid var(--skip-line);
	background: var(--skip-surface);
	position: sticky;
	top: 61px;
	max-height: calc(100vh - 61px);
	overflow-y: auto;
}

.skip-shell__sidebar.is-open { display: block; }
.skip-shell__sidebar ul { list-style: none; margin: 0; padding: 0; }

.skip-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: var(--skip-body);
	text-decoration: none;
	min-height: 44px;
}

.skip-nav__link:hover { background: var(--skip-canvas); color: var(--skip-ink); }
.skip-nav__link.is-active { background: color-mix(in srgb, var(--skip-accent) 10%, #fff); color: var(--skip-accent); font-weight: 600; }
.skip-nav__icon { display: inline-flex; color: inherit; }
.skip-nav__label { min-width: 0; }

.skip-shell__main { flex: 1 1 auto; min-width: 0; padding: 18px 16px 92px; }

.skip-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.skip-page__title { font-size: clamp(20px, 3.4vw, 26px); color: var(--skip-ink); margin: 0; }
.skip-page__subtitle { font-size: 14px; color: var(--skip-muted); margin: 5px 0 0; }

.skip-shell__bottomnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	background: var(--skip-surface);
	border-top: 1px solid var(--skip-line);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}

.skip-bottomnav__link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px;
	font-size: 10.5px;
	color: var(--skip-muted);
	text-decoration: none;
	min-height: 48px;
	text-align: center;
}

.skip-bottomnav__link.is-active { color: var(--skip-accent); font-weight: 600; }

/* ---------------- Portal content blocks ---------------- */

.skip-card {
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	padding: 20px 22px;
	margin: 0 0 16px;
	box-shadow: var(--skip-shadow);
}

.skip-card h2 { font-size: 17px; color: var(--skip-ink); margin: 10px 0 10px; }
.skip-lead { font-size: 14.5px; }

.skip-ticklist { list-style: none; margin: 12px 0 18px; padding: 0; }
.skip-ticklist li { position: relative; padding: 6px 0 6px 26px; font-size: 14px; }

.skip-ticklist li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 12px;
	width: 6px;
	height: 10px;
	border-right: 2px solid var(--skip-ok);
	border-bottom: 2px solid var(--skip-ok);
	transform: rotate(45deg);
}

.skip-empty { text-align: center; padding: 40px 20px; }
.skip-empty h3 { font-size: 17px; color: var(--skip-ink); margin: 0 0 8px; }
.skip-empty p { margin: 0 auto 18px; max-width: 46ch; font-size: 14px; color: var(--skip-muted); }

.skip-skeleton {
	background: linear-gradient(90deg, #eceef2 25%, #f5f6f8 37%, #eceef2 63%);
	background-size: 400% 100%;
	animation: skip-shimmer 1.3s ease-in-out infinite;
	border-radius: 8px;
	height: 14px;
}

@keyframes skip-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.skip-toasts {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 78px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(420px, calc(100vw - 28px));
}

.skip-toast {
	background: #101828;
	color: #fff;
	font-size: 14px;
	padding: 12px 15px;
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(16,24,40,.2);
	transition: opacity .3s, transform .3s;
}

.skip-toast.is-ok { background: #05603a; }
.skip-toast.is-error { background: #912018; }
.skip-toast.is-warning { background: #93370d; }
.skip-toast.is-out { opacity: 0; transform: translateY(8px); }

/* ---------------- Breakpoints ---------------- */

@media (max-width: 360px) {
	.skip-shell__main { padding: 14px 12px 92px; }
	.skip-card { padding: 16px 15px; }
	.skip-auth__card { padding: 22px 18px; }
	.skip-btn { width: 100%; }
	.skip-hero__actions .skip-btn { width: 100%; }
}

@media (max-width: 767px) {
	.skip-contact { grid-template-columns: 1fr; }
	.skip-shell__sidebar {
		position: fixed;
		inset: 61px 0 0 0;
		flex: none;
		max-height: none;
		z-index: 40;
		border-right: 0;
	}
}

@media (min-width: 768px) {
	.skip-shell__user-meta { display: flex; }
	.skip-shell__main { padding: 24px 26px 40px; }
	.skip-shell__bottomnav { display: none; }
}

@media (min-width: 1024px) {
	.skip-shell__burger { display: none; }
	.skip-shell__sidebar { display: block; }
	.skip-section { padding: 16px 0 52px; }
}

@media (min-width: 1280px) {
	.skip-shell__sidebar { flex-basis: 258px; }
	.skip-shell__main { padding: 28px 36px 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.skip-skeleton { animation: none; }
	.skip-btn, .skip-toast { transition: none; }
}

/* ---------------------------------------------------------------------------
   Full-bleed portal layout
   Themes wrap page content in a centred, max-width container. The portal needs
   the whole viewport, so we break out of that container without editing the
   theme, and suppress the duplicate page title the theme prints above us.
   ------------------------------------------------------------------------ */

body.skip-app .skip-shell {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	min-height: calc(100vh - 60px);
}

body.skip-app .skip-shell__topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

/* The shell prints its own H1, so hide the theme's duplicate page heading. */
body.skip-app .entry-header .entry-title,
body.skip-app .page-header .entry-title,
body.skip-app .page-title,
body.skip-app .wp-block-post-title,
body.skip-app header.entry-header,
body.skip-app .entry-header { display: none !important; }

/* Neutralise the padding themes add around the content area. */
body.skip-app .entry-content,
body.skip-app .site-content,
body.skip-app .content-area,
body.skip-app main.site-main,
body.skip-app .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; }

/* Sidebars are noise next to a full application. */
body.skip-app #secondary,
body.skip-app .sidebar,
body.skip-app .widget-area { display: none !important; }

body.skip-app .site-content > .container,
body.skip-app .site-main > article { max-width: none !important; }

/* Public plugin pages stay inside the theme container but get breathing room. */
body.skip-page:not(.skip-app) .skip-site { width: 100%; }

@media (min-width: 1024px) {
	body.skip-app .skip-shell { min-height: calc(100vh - 32px); }
}

@media (max-width: 1023px) {
	body.skip-app .skip-shell { min-height: 100vh; }
}

/* ---------------------------------------------------------------------------
   Account-type chooser, forms feedback, tables and badges (portal + public)
   ------------------------------------------------------------------------ */

.skip-auth--wide .skip-auth__card,
.skip-auth__card--wide { max-width: 680px; }

.skip-auth__switch { font-size: 13px; margin-left: 6px; }

.skip-choice { display: grid; gap: 12px; margin: 18px 0 22px; }

.skip-choice__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
	min-height: 76px;
}

.skip-choice__item:hover { border-color: var(--skip-accent); box-shadow: 0 2px 10px rgba(16,24,40,.07); }

.skip-choice__icon {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--skip-accent) 12%, #fff);
	color: var(--skip-accent);
}

.skip-choice__body { display: flex; flex-direction: column; gap: 3px; }
.skip-choice__body strong { font-size: 15.5px; color: var(--skip-ink); }
.skip-choice__body span { font-size: 13.5px; color: var(--skip-muted); line-height: 1.5; }

.skip-field-error { display: block; font-size: 12.5px; color: var(--skip-err); margin-top: 5px; }
.skip-form__field input[aria-invalid="true"] { border-color: var(--skip-err); }

.skip-btn--block { width: 100%; }

.skip-input--code {
	letter-spacing: .5em;
	text-align: center;
	font-size: 22px !important;
	font-weight: 700;
	padding-left: .5em !important;
}

.skip-form--inline { display: flex; gap: 8px; align-items: flex-end; margin-top: 16px; flex-wrap: wrap; }
.skip-form--inline input { flex: 1 1 200px; }

.skip-rolehelp { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.skip-rolehelp li { margin: 6px 0; }

.skip-details { margin: 16px 0 0; }
.skip-details > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 8px 0; color: var(--skip-accent); }

.skip-badge {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 9px;
	white-space: nowrap;
}

.skip-badge--ok, .skip-badge--connected { background: var(--skip-ok-bg); color: var(--skip-ok); }
.skip-badge--warning { background: var(--skip-warn-bg); color: var(--skip-warn); }
.skip-badge--error { background: var(--skip-err-bg); color: var(--skip-err); }
.skip-badge--info, .skip-badge--not_connected { background: #f2f4f7; color: #475467; }

.skip-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }

.skip-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }

.skip-table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--skip-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--skip-line);
	white-space: nowrap;
}

.skip-table td { padding: 12px; border-bottom: 1px solid var(--skip-line); vertical-align: middle; }
.skip-table tbody tr:last-child td { border-bottom: 0; }
.skip-table select { min-height: 38px; border: 1px solid var(--skip-line); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; background: #fff; }
.skip-table__actions { white-space: nowrap; }

.skip-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }

.skip-stat {
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.skip-stat__value { font-size: 24px; font-weight: 650; line-height: 1.15; color: var(--skip-ink); }
.skip-stat__label { font-size: 12px; color: var(--skip-muted); text-transform: uppercase; letter-spacing: .04em; }

.skip-progress { height: 8px; background: #eceef2; border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.skip-progress__bar { height: 100%; background: var(--skip-accent); border-radius: 999px; transition: width .3s ease; }

@media (max-width: 640px) {
	/* Stack data tables into cards on small screens. */
	.skip-table--stack { min-width: 0; }
	.skip-table--stack thead { display: none; }
	.skip-table--stack tbody tr { display: block; border: 1px solid var(--skip-line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
	.skip-table--stack tbody td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; }
	.skip-table--stack tbody td::before { content: attr(data-label); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--skip-muted); }
}

/* ---------------------------------------------------------------------------
   Data screens: filters, bulk bar, drawer
   ------------------------------------------------------------------------ */

.skip-screen__filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	align-items: end;
}

.skip-screen__filters .skip-form__field { margin: 0; }
.skip-screen__filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.skip-screen__bulk {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14px;
	padding: 12px 16px;
	border-color: color-mix(in srgb, var(--skip-accent) 35%, var(--skip-line));
}

.skip-screen__bulk [data-screen-selected-count] { font-weight: 700; color: var(--skip-accent); }
.skip-screen__summary { font-size: 13px; color: var(--skip-muted); margin: 0 0 10px; }

.skip-drawer { position: fixed; inset: 0; z-index: 120; }
.skip-drawer[hidden] { display: none; }

.skip-drawer__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }

.skip-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(560px, 100%);
	background: var(--skip-surface);
	box-shadow: -12px 0 40px rgba(16, 24, 40, .18);
	display: flex;
	flex-direction: column;
	animation: skip-slide-in .22s ease;
}

@keyframes skip-slide-in {
	from { transform: translateX(24px); opacity: .6; }
	to { transform: translateX(0); opacity: 1; }
}

.skip-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--skip-line);
}

.skip-drawer__head h2 { margin: 0; font-size: 17px; color: var(--skip-ink); }

.skip-drawer__close {
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--skip-muted);
	padding: 0 4px;
	min-height: 44px;
	min-width: 44px;
}

.skip-drawer__body { padding: 20px 22px 40px; overflow-y: auto; flex: 1 1 auto; }

.skip-detail { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.skip-detail dt { color: var(--skip-muted); text-transform: capitalize; font-size: 12.5px; }
.skip-detail dd { margin: 0; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
	.skip-drawer__panel { animation: none; }
}

@media (max-width: 640px) {
	.skip-drawer__panel { width: 100%; }
	.skip-detail { grid-template-columns: 1fr; gap: 2px 0; }
	.skip-detail dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   Inline bar chart (no charting library needed)
   ------------------------------------------------------------------------ */

.skip-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 160px;
	padding: 10px 0 0;
	overflow-x: auto;
}

.skip-chart__col { flex: 1 1 0; min-width: 8px; display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.skip-chart__bar { flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.skip-chart__bar--views { background: color-mix(in srgb, var(--skip-accent) 40%, #fff); }
.skip-chart__bar--eng { background: var(--skip-accent); }

.skip-chart__legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--skip-muted); margin: 10px 0 0; }
.skip-chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.skip-chart__key--views { background: color-mix(in srgb, var(--skip-accent) 40%, #fff); }
.skip-chart__key--eng { background: var(--skip-accent); }

.skip-report-result { margin-top: 22px; }
.skip-report-result__head h3 { font-size: 16px; color: var(--skip-ink); margin: 0 0 4px; }
.skip-report-result__head p { margin: 0 0 12px; font-size: 12.5px; }

/* ---------------------------------------------------------------------
 * Detail screens: two-column on wide viewports, stacked on small ones.
 * ------------------------------------------------------------------ */
.skip-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

@media ( min-width: 900px ) {
	.skip-detail-grid {
		grid-template-columns: minmax( 0, 2.2fr ) minmax( 260px, 1fr );
	}
}

.skip-detail-grid__main,
.skip-detail-grid__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.skip-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 10px;
}

.skip-card--warning {
	border-left: 3px solid var( --skip-warning, #b45309 );
}

/* ---------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------ */
.skip-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 14px;
	border-bottom: 1px solid var( --skip-border, #e5e7eb );
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.skip-tabs__tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 10px 14px;
	font: inherit;
	font-weight: 600;
	color: var( --skip-muted, #6b7280 );
	cursor: pointer;
	white-space: nowrap;
}

.skip-tabs__tab:hover {
	color: var( --skip-text, #111827 );
}

.skip-tabs__tab.is-active {
	color: var( --skip-accent, #4f46e5 );
	border-bottom-color: var( --skip-accent, #4f46e5 );
}

/* Without JS every panel stays visible, so nothing is unreachable. */
.skip-tabs--js .skip-tabs__panel {
	display: none;
}

.skip-tabs--js .skip-tabs__panel.is-active {
	display: block;
}

.skip-tabs__panel > .skip-card + .skip-card {
	margin-top: 16px;
}

/* ---------------------------------------------------------------------
 * Timeline (submission history), comments, thumbnails
 * ------------------------------------------------------------------ */
.skip-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skip-timeline__item {
	border-left: 2px solid var( --skip-border, #e5e7eb );
	padding: 0 0 18px 16px;
	margin: 0;
	position: relative;
}

.skip-timeline__item::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --skip-accent, #4f46e5 );
}

.skip-timeline__item:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.skip-timeline__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}

.skip-review-note {
	background: var( --skip-surface-2, #f9fafb );
	border-radius: 6px;
	padding: 8px 10px;
	margin: 8px 0 0;
}

.skip-metric-line {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 8px 0 0;
	font-size: 13px;
	color: var( --skip-muted, #6b7280 );
}

.skip-comments {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.skip-comments__item {
	background: var( --skip-surface-2, #f9fafb );
	border-radius: 8px;
	padding: 10px 12px;
}

.skip-comments__item p {
	margin: 4px 0 0;
}

.skip-comments__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 13px;
}

.skip-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;
}

.skip-thumbs img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var( --skip-border, #e5e7eb );
	display: block;
}

.skip-link-chip {
	display: inline-block;
	background: var( --skip-surface-2, #f9fafb );
	border: 1px solid var( --skip-border, #e5e7eb );
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	word-break: break-all;
}

/* ---------------------------------------------------------------------
 * Form extras: checkbox grids, copy row, media picker, required marker
 * ------------------------------------------------------------------ */
.skip-checks {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 6px;
}

.skip-checks--scroll {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var( --skip-border, #e5e7eb );
	border-radius: 8px;
	padding: 8px;
}

.skip-check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
}

.skip-check:hover {
	background: var( --skip-surface-2, #f9fafb );
}

.skip-check input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.skip-check span span {
	display: block;
	font-size: 12px;
}

.skip-req {
	color: var( --skip-error, #b91c1c );
}

.skip-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.skip-copy-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.skip-copy-row__input {
	flex: 1 1 260px;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
}

.skip-media__preview {
	min-height: 90px;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.skip-media__preview img {
	max-width: 220px;
	max-height: 120px;
	border-radius: 8px;
	border: 1px solid var( --skip-border, #e5e7eb );
}

.skip-media__empty {
	color: var( --skip-muted, #6b7280 );
	font-size: 13px;
}

.skip-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 24px;
}

.skip-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.skip-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.skip-prose > :first-child {
	margin-top: 0;
}

.skip-prose > :last-child {
	margin-bottom: 0;
}

@media ( max-width: 600px ) {
	.skip-thumbs img {
		width: 84px;
		height: 84px;
	}

	.skip-checks {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * List-screen primary action and inline create panel
 * ------------------------------------------------------------------ */
.skip-screen__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 14px;
}

.skip-screen__create {
	margin-bottom: 16px;
	border-left: 3px solid var( --skip-accent, #4f46e5 );
}

.skip-form__field--wide {
	flex: 1 1 100%;
}

.skip-form__row--wrap {
	flex-wrap: wrap;
}

.skip-captcha__input {
	max-width: 140px;
}

/* Media library grid */
.skip-media-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 12px;
}

.skip-media-item {
	border: 1px solid var( --skip-border, #e5e7eb );
	border-radius: 8px;
	overflow: hidden;
	background: var( --skip-surface, #fff );
}

.skip-media-item img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}

.skip-media-item__meta {
	padding: 8px 10px;
	font-size: 12px;
	word-break: break-word;
}

.skip-avatar-lg {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var( --skip-border, #e5e7eb );
}

@media ( max-width: 600px ) {
	.skip-media-grid {
		grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	}

	.skip-media-item img {
		height: 100px;
	}
}

/* -------------------------------------------------------------------------
 * Key/value list. Used by the campaign workspace and the creator brief since
 * 1.2 with no styles behind it, so it rendered as a bare stack of terms.
 * ---------------------------------------------------------------------- */
.skip-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px; margin: 14px 0 0; }
.skip-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skip-kv dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--skip-muted); margin: 0; }
.skip-kv dd { margin: 0; font-size: 14.5px; color: var(--skip-ink); overflow-wrap: anywhere; }

/* A panel inside a card: a related group that is not a separate object. */
.skip-subcard {
	margin: 18px 0 0;
	padding: 16px;
	border: 1px dashed var(--skip-line);
	border-radius: var(--skip-r);
	background: var(--skip-canvas);
}
.skip-subcard > h3 { margin: 0 0 10px; font-size: 15px; }
.skip-card--quiet { background: var(--skip-canvas); box-shadow: none; }

/* -------------------------------------------------------------------------
 * One image field: preview, replace, remove.
 * ---------------------------------------------------------------------- */
.skip-imgfield__row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.skip-imgfield__controls { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.skip-imgfield__preview {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid var(--skip-line);
	background: var(--skip-surface);
}
.skip-imgfield__preview--circle { border-radius: 50%; }
.skip-imgfield__preview--square { border-radius: var(--skip-r); }
.skip-imgfield__preview--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--skip-muted);
	background: var(--skip-canvas);
}
.skip-imgfield__remove { font-size: 13.5px; }
.skip-imgfield .skip-help { margin: 0; }

/* Security question: the answer box and its re-roll sit on one line. */
.skip-captcha__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.skip-captcha__row .skip-captcha__input { flex: 0 1 140px; }
.skip-captcha__row .skip-btn { flex: 0 0 auto; }

/* -------------------------------------------------------------------------
 * Creator cards (discovery).
 * ---------------------------------------------------------------------- */
.skip-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.skip-person {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	background: var(--skip-surface);
	min-width: 0;
}
.skip-person__pick { font-size: 13px; }
.skip-person__head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.skip-person__head > div { min-width: 0; overflow-wrap: anywhere; }
.skip-person__avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--skip-line);
}
.skip-person__avatar--sm { width: 32px; height: 32px; }
.skip-person__avatar--lg { width: 72px; height: 72px; }
.skip-person__avatar--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--skip-accent) 10%, #fff);
	color: var(--skip-accent);
	font-weight: 700;
	text-transform: uppercase;
}
.skip-person__stats { display: flex; gap: 18px; font-size: 13px; color: var(--skip-muted); flex-wrap: wrap; }
.skip-person__stats strong { display: block; font-size: 16px; color: var(--skip-ink); font-variant-numeric: tabular-nums; }
.skip-person .skip-meta { margin: 0; }

/* -------------------------------------------------------------------------
 * Applications.
 * ---------------------------------------------------------------------- */
.skip-apps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.skip-app {
	padding: 16px;
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	background: var(--skip-surface);
}
.skip-app__who { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.skip-app__who > div { min-width: 0; overflow-wrap: anywhere; }
.skip-app__pitch {
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--skip-accent);
	background: var(--skip-canvas);
	border-radius: 0 var(--skip-r) var(--skip-r) 0;
	color: var(--skip-ink);
	overflow-wrap: anywhere;
}
.skip-app__decide { margin-top: 6px; }

/* -------------------------------------------------------------------------
 * Community wall.
 * ---------------------------------------------------------------------- */
.skip-thread__head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.skip-thread__head > div:first-of-type { min-width: 0; }
.skip-thread__tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.skip-thread__title { margin: 12px 0 8px; font-size: 18px; line-height: 1.35; text-wrap: balance; }
.skip-thread__title a { color: inherit; text-decoration: none; }
.skip-thread__title a:hover { color: var(--skip-accent); }
.skip-thread .skip-prose { overflow-wrap: anywhere; }

.skip-replies { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.skip-reply {
	padding: 12px 14px;
	border-left: 2px solid var(--skip-line);
	background: var(--skip-canvas);
	border-radius: 0 var(--skip-r) var(--skip-r) 0;
	overflow-wrap: anywhere;
}
.skip-reply.is-hidden { opacity: .7; border-left-color: var(--skip-err); }
.skip-reply__head { display: flex; gap: 10px; align-items: center; font-size: 13.5px; flex-wrap: wrap; }
.skip-reply .skip-prose p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
	.skip-thread__tags { margin-left: 0; }
	.skip-imgfield__preview { width: 72px; height: 72px; }
}

/* -------------------------------------------------------------------------
 * Discussion forum — an activity feed.
 * ---------------------------------------------------------------------- */
.skip-feed { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.skip-composer__top { display: flex; gap: 10px; align-items: center; }
.skip-composer__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 600;
	border: 0 !important;
	background: transparent !important;
	padding: 8px 0 !important;
}
.skip-composer__title:focus { outline: none; box-shadow: none !important; }
.skip-composer__body { margin-top: 4px; }
.skip-composer__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.skip-composer__link {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border: 1px solid var(--skip-line);
	border-radius: 999px;
	color: var(--skip-muted);
	min-width: 0;
}
.skip-composer__link input {
	border: 0 !important;
	background: transparent !important;
	padding: 8px 0 !important;
	min-width: 0;
	flex: 1 1 auto;
}
.skip-composer__link input:focus { outline: none; box-shadow: none !important; }
.skip-composer__row select { flex: 0 1 auto; width: auto; }
.skip-composer .skip-help { margin: 8px 0 0; }

.skip-feed__filters form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.skip-chip {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--skip-line);
	background: var(--skip-surface);
	font-size: 13px;
	text-decoration: none;
	color: var(--skip-body);
	white-space: nowrap;
}
.skip-chip:hover { border-color: var(--skip-accent); color: var(--skip-accent); }
.skip-chip.is-active { background: var(--skip-accent); border-color: var(--skip-accent); color: #fff; }
.skip-feed__search { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.skip-feed__search input { padding: 6px 10px !important; }
.skip-feed__rules summary { cursor: pointer; font-weight: 600; }
.skip-feed__rules p { margin: 8px 0 0; }

.skip-post {
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	box-shadow: var(--skip-shadow);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.skip-post__head { display: flex; gap: 10px; align-items: flex-start; }
.skip-post__byline { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.skip-post__title { margin: 0; font-size: 17px; line-height: 1.35; text-wrap: balance; }
.skip-post__body { overflow-wrap: anywhere; }
.skip-post__body p:last-child { margin-bottom: 0; }

.skip-post__link {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	background: var(--skip-canvas);
	text-decoration: none;
	color: var(--skip-body);
	font-size: 13px;
	overflow-wrap: anywhere;
}
.skip-post__link:hover { border-color: var(--skip-accent); }

.skip-post__actions {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid var(--skip-line);
	padding-top: 8px;
}
.skip-post__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--skip-muted);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	text-decoration: none;
}
.skip-post__action:hover { background: var(--skip-canvas); color: var(--skip-ink); }
.skip-post__action.is-on { color: var(--skip-accent); font-weight: 600; }
.skip-post__action--danger:hover { color: var(--skip-err); }
.skip-post__count { font-variant-numeric: tabular-nums; }

.skip-post__thread { display: flex; flex-direction: column; gap: 10px; }
.skip-post__more { font-size: 13px; color: var(--skip-muted); text-decoration: none; }
.skip-post__more:hover { color: var(--skip-accent); }

.skip-comment { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.skip-comment__bubble {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--skip-canvas);
	border-radius: 14px;
	padding: 8px 12px;
	font-size: 14px;
	overflow-wrap: anywhere;
}
.skip-comment__bubble .skip-prose p { margin: 2px 0 0; }
.skip-comment__meta { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 12px; }
.skip-comment.is-hidden .skip-comment__bubble { opacity: .65; border: 1px dashed var(--skip-err); }

.skip-comment-form { display: flex; gap: 8px; align-items: center; }
.skip-comment-form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 999px !important;
	padding: 8px 14px !important;
}

.skip-linkbtn {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: var(--skip-muted);
	cursor: pointer;
	text-decoration: underline;
}
.skip-linkbtn--danger:hover { color: var(--skip-err); }

/* Numbered "how this works" explainers. */
.skip-steps--tight li { margin-bottom: 8px; }
.skip-steps--tight span { display: block; color: var(--skip-muted); font-size: 13.5px; }

@media (max-width: 600px) {
	.skip-feed__search { margin-left: 0; width: 100%; }
	.skip-composer__row select { flex: 1 1 45%; }
}

/* Menu visibility grid. */
.skip-menugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 14px 0; }
.skip-menugrid__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--skip-line);
	border-radius: var(--skip-r);
	background: var(--skip-surface);
	font-size: 14px;
	cursor: pointer;
	min-width: 0;
}
.skip-menugrid__row > span { min-width: 0; overflow-wrap: anywhere; }
.skip-menugrid__row:hover { border-color: var(--skip-accent); }
.skip-menugrid__row.is-locked { background: var(--skip-canvas); cursor: default; }
.skip-menugrid__row .skip-badge { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Forum: editing your own words.

   Built on <details>/<summary> so it works with JavaScript switched off — the
   panel is a real disclosure widget, not a div a script has to reveal.
   --------------------------------------------------------------------------- */

.skip-post__edit,
.skip-comment__edit { margin: 8px 0 0; }

.skip-post__edit > summary,
.skip-comment__edit > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	width: auto;
}

.skip-post__edit > summary::-webkit-details-marker,
.skip-comment__edit > summary::-webkit-details-marker { display: none; }

.skip-post__edit[open] > summary,
.skip-comment__edit[open] > summary { margin-bottom: 10px; }

.skip-post__edit > .skip-form,
.skip-comment__edit > .skip-form {
	background: var(--skip-canvas);
	border: 1px solid var(--skip-line);
	border-radius: 10px;
	padding: 12px;
	margin-top: 6px;
}

.skip-comment__edit > .skip-form textarea,
.skip-comment__edit > .skip-form input[type="url"] { width: 100%; margin-bottom: 8px; }

/* Visible to screen readers only — the reply edit box is labelled but the
   label would repeat "Edit" next to the button that opened it. */
.skip-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Directory: contacting somebody without printing their address. */
.skip-contact { display: inline-block; }
.skip-contact > summary { cursor: pointer; list-style: none; display: inline-flex; }
.skip-contact > summary::-webkit-details-marker { display: none; }
.skip-contact > .skip-form {
	background: var(--skip-canvas);
	border: 1px solid var(--skip-line);
	border-radius: 10px;
	padding: 12px;
	margin-top: 8px;
	min-width: 260px;
}

/* ----------------------------------------------------------------------
 * Detail drawer
 *
 * The drawer used to render a bare <dl> of strings. It now renders whatever
 * the record actually holds — links, thumbnails, nested groups — so each
 * field is its own labelled block rather than a row in a two-column grid
 * that images and lists were never going to fit into.
 * ------------------------------------------------------------------- */
.skip-detail__row {
	padding: 12px 0;
	border-bottom: 1px solid var(--skip-line);
}

.skip-detail__row:last-child { border-bottom: 0; }

.skip-detail__label {
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--skip-muted);
	margin: 0 0 6px;
}

.skip-detail__value { font-size: 14.5px; color: var(--skip-ink); overflow-wrap: anywhere; }
.skip-detail__text { margin: 0; white-space: pre-wrap; line-height: 1.55; }

.skip-detail__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.skip-detail__list > li {
	padding: 8px 10px;
	border: 1px solid var(--skip-line);
	border-radius: 8px;
	background: var(--skip-canvas);
}

.skip-detail__pairs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.skip-detail__pair { font-size: 13.5px; }
.skip-detail__pair em {
	font-style: normal;
	color: var(--skip-muted);
	margin-right: 5px;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.skip-detail__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.skip-detail__thumbs img {
	width: 116px;
	height: 116px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--skip-line);
	display: block;
}

/* ----------------------------------------------------------------------
 * In-page dialog
 *
 * Replaces window.prompt / window.confirm. The browser's own boxes put the
 * site's domain above the question, gave a paragraph of reviewer feedback a
 * one-line input, and hid the row the question was about.
 * ------------------------------------------------------------------- */
.skip-dialog {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: rgba(16,24,40,.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(2px);
	animation: skip-dialog-in .14s ease-out;
}

@keyframes skip-dialog-in { from { opacity: 0; } to { opacity: 1; } }

.skip-dialog__card {
	background: var(--skip-surface, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 48px -12px rgba(16,24,40,.28);
	width: min(520px, 100%);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.skip-dialog__title {
	margin: 0;
	font-size: 17px;
	font-weight: 650;
	color: var(--skip-ink, #101828);
	line-height: 1.35;
	text-wrap: balance;
}

.skip-dialog__body { margin: 0; font-size: 14px; color: var(--skip-muted, #667085); }

.skip-dialog__input {
	width: 100%;
	border: 1px solid var(--skip-line, #e4e7ec);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14.5px;
	color: var(--skip-ink, #101828);
	resize: vertical;
	min-height: 92px;
	box-sizing: border-box;
}

.skip-dialog__input:focus {
	outline: 2px solid var(--skip-accent, #4f46e5);
	outline-offset: 1px;
	border-color: transparent;
}

.skip-dialog__error { margin: 0; font-size: 13px; color: var(--skip-err, #b42318); }

.skip-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.skip-dialog { animation: none; }
}

/* A count inside a filter chip, so the person knows what is behind it. */
.skip-chip__count {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(16,24,40,.07);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
}

.skip-chip.is-active .skip-chip__count { background: rgba(255,255,255,.24); }

/* ----------------------------------------------------------------------
 * Workspaces
 *
 * A workspace is a THING with a name and people in it, not a spreadsheet
 * row — a table of five short columns read as five columns of noise. One
 * line per workspace, with the identity on the left and the facts on the
 * right, is scannable at any length.
 * ------------------------------------------------------------------- */
.skip-wslist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.skip-wscard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	background: var(--skip-surface);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.skip-wscard:hover { border-color: #cfd4dc; box-shadow: var(--skip-shadow); }
.skip-wscard.is-mine { border-color: var(--skip-accent); background: #fbfbff; }

.skip-wscard__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 650;
	font-size: 14.5px;
	letter-spacing: .02em;
	color: #fff;
	background: #98a2b3;
}

.skip-wscard__avatar--agency  { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.skip-wscard__avatar--brand   { background: linear-gradient(135deg, #b54708, #ea9a3e); }
.skip-wscard__avatar--creator { background: linear-gradient(135deg, #067647, #17b26a); }

.skip-wscard__main { flex: 1 1 auto; min-width: 0; }
.skip-wscard__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skip-wscard__title strong { font-size: 15px; color: var(--skip-ink); }
.skip-wscard__main .skip-meta { margin: 3px 0 0; font-size: 13px; }

.skip-wscard__facts {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: right;
}

.skip-wscard__fact { font-size: 13px; color: var(--skip-body); white-space: nowrap; }
.skip-wscard__fact strong { font-variant-numeric: tabular-nums; color: var(--skip-ink); }

@media (max-width: 720px) {
	.skip-wscard { flex-wrap: wrap; }
	.skip-wscard__facts { width: 100%; justify-content: flex-start; text-align: left; padding-left: 58px; }
}

/* ----------------------------------------------------------------------
 * Task board
 *
 * The old screen was a table with a Status column, so the one task that
 * needed doing today looked exactly like the four that needed nothing. The
 * lanes carry that meaning instead: a coloured rail on the left says how
 * urgent the lane is, the heading says who it is waiting on, and each card
 * ends in a button that names the next move.
 * ------------------------------------------------------------------- */
.skip-screen__title { margin: 26px 0 12px; font-size: 17px; font-weight: 650; color: var(--skip-ink); }

.skip-taskbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 0 0 18px;
}

.skip-taskbar__stat {
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.skip-taskbar__stat.is-live { border-color: var(--skip-accent); background: #fbfbff; }
.skip-taskbar__stat.is-late { border-color: var(--skip-err); background: var(--skip-err-bg); }

.skip-taskbar__value {
	font-size: 26px;
	font-weight: 680;
	line-height: 1.1;
	color: var(--skip-ink);
	font-variant-numeric: tabular-nums;
}

.skip-taskbar__stat.is-late .skip-taskbar__value { color: var(--skip-err); }
.skip-taskbar__stat.is-live .skip-taskbar__value { color: var(--skip-accent); }

.skip-taskbar__label {
	font-size: 12px;
	color: var(--skip-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.skip-lane {
	margin: 0 0 22px;
	padding-left: 14px;
	border-left: 3px solid var(--skip-line);
}

.skip-lane--error   { border-left-color: var(--skip-err); }
.skip-lane--warning { border-left-color: var(--skip-warn); }
.skip-lane--info    { border-left-color: var(--skip-accent); }
.skip-lane--ok      { border-left-color: var(--skip-ok); }
.skip-lane--muted   { border-left-color: #cfd4dc; }

.skip-lane__head { margin: 0 0 10px; }

.skip-lane__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 650;
	color: var(--skip-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.skip-lane__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(16,24,40,.07);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--skip-body);
}

.skip-lane__lead { margin: 3px 0 0; font-size: 13.5px; color: var(--skip-muted); }

.skip-lane__fold > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 15.5px;
	font-weight: 650;
	color: var(--skip-muted);
}

.skip-lane__fold > summary::-webkit-details-marker { display: none; }
.skip-lane__fold > summary::before { content: '▸'; font-size: 11px; }
.skip-lane__fold[open] > summary::before { content: '▾'; }
.skip-lane__fold[open] > summary { margin-bottom: 10px; }

.skip-lane__items { display: flex; flex-direction: column; gap: 8px; }

.skip-task {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 16px;
	background: var(--skip-surface);
	border: 1px solid var(--skip-line);
	border-radius: 12px;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.skip-task:hover { border-color: #cfd4dc; box-shadow: var(--skip-shadow); }
.skip-task__body { flex: 1 1 auto; min-width: 0; }

.skip-task__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.skip-task__title { margin: 0; font-size: 15px; font-weight: 620; color: var(--skip-ink); }
.skip-task__where { margin: 3px 0 0; font-size: 13px; color: var(--skip-muted); }

.skip-task__note {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-left: 3px solid var(--skip-warn);
	background: var(--skip-warn-bg);
	border-radius: 0 8px 8px 0;
	font-size: 13.5px;
	color: #7a3b02;
	line-height: 1.5;
}

.skip-task__note-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 650;
	opacity: .75;
	margin-bottom: 2px;
}

.skip-task__needs { margin: 8px 0 0; font-size: 13.5px; color: var(--skip-body); }

.skip-task__needs-label {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 650;
	color: var(--skip-muted);
	margin-right: 6px;
}

.skip-task__side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

/* The deadline, said as a state rather than printed as a date. */
.skip-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.skip-pill--error   { background: var(--skip-err-bg); color: var(--skip-err); }
.skip-pill--warning { background: var(--skip-warn-bg); color: var(--skip-warn); }
.skip-pill--info    { background: var(--skip-info-bg); color: var(--skip-info); }
.skip-pill--ok      { background: var(--skip-ok-bg); color: var(--skip-ok); }
.skip-pill--muted   { background: #f2f4f7; color: var(--skip-muted); }

@media (max-width: 640px) {
	.skip-task { flex-direction: column; gap: 10px; }
	.skip-task__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* A stat in the strip that links somewhere behaves like one. */
a.skip-taskbar__stat { text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
a.skip-taskbar__stat:hover { border-color: #cfd4dc; box-shadow: var(--skip-shadow); }

/* ---------------------------------------------------------------------------
 * Tasks grouped by campaign (1.6.9)
 *
 * A campaign section has to read as a container for the lanes inside it, or
 * the grouping is only whitespace. The rule that matters is the left border:
 * it is the one thing that tells you where one campaign's work ends and the
 * next one's begins when both are scrolled past at speed.
 * ------------------------------------------------------------------------ */

.skip-campaign-tasks {
	margin: 0 0 18px;
	border: 1px solid var(--skip-border, #e2e5ee);
	border-left: 4px solid var(--skip-primary, #5b4bdb);
	border-radius: 10px;
	background: var(--skip-surface, #fff);
	overflow: hidden;
}

.skip-campaign-tasks.is-quiet {
	border-left-color: var(--skip-border, #e2e5ee);
}

.skip-campaign-tasks > details > summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 16px;
}

.skip-campaign-tasks > details > summary::-webkit-details-marker {
	display: none;
}

.skip-campaign-tasks__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: space-between;
}

.skip-campaign-tasks__name {
	font-weight: 600;
	font-size: 1.02rem;
}

.skip-campaign-tasks__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.skip-campaign-tasks__body {
	padding: 0 16px 14px;
	border-top: 1px solid var(--skip-border, #e2e5ee);
}

.skip-campaign-tasks__link {
	margin: 12px 0 4px;
}

.skip-campaign-tasks .skip-lane {
	margin-top: 14px;
}

/* The inline edit panel on a task card. Closed it is one line of text; open it
   is a form, so it must not fight the card's own padding. */
.skip-inline-edit {
	margin-top: 10px;
	border-top: 1px dashed var(--skip-border, #e2e5ee);
	padding-top: 8px;
}

.skip-inline-edit > summary {
	cursor: pointer;
	font-size: 0.86rem;
	color: var(--skip-primary, #5b4bdb);
}

.skip-inline-edit .skip-form {
	margin-top: 10px;
}

@media (max-width: 640px) {
	.skip-campaign-tasks__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Classes that were being printed by templates and JavaScript but had no rule
 * anywhere in the stylesheet, so they rendered as bare browser defaults.
 *
 * Found by listing every skip-/skh- class in the rendered HTML of all 98 views
 * across five roles and subtracting the ones the stylesheets define.
 * ------------------------------------------------------------------------ */

/* Pagination. The server prints paginate_links() output here on some screens
   and app.js builds buttons here on others, and neither had any layout: the
   page numbers ran together as plain links with nothing to aim a thumb at. */
.skip-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.skip-pagination .skip-muted { margin-right: auto; font-size: 13px; }
.skip-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--skip-line);
	border-radius: 9px;
	background: var(--skip-surface);
	color: var(--skip-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.skip-pagination a.page-numbers:hover { border-color: var(--skip-accent); color: var(--skip-accent); }
.skip-pagination .page-numbers.current { background: var(--skip-accent); border-color: var(--skip-accent); color: #fff; }
.skip-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* A destructive action read as an ordinary button, which is the one place a
   button should not look ordinary. */
.skip-btn--danger { background: var(--skip-err); border-color: var(--skip-err); color: #fff; }
.skip-btn--danger:hover { background: color-mix(in srgb, var(--skip-err) 86%, #000); color: #fff; }

/* Setting keys, IDs and other machine strings. Printed in the body face, the
   "branding.auth_banner_id" under each settings label was hard to read as one
   token and easy to mistype. */
.skip-mono {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .92em;
	word-break: break-all;
}