/* Nine10 Proofing — front-end overlay */

/* Variables on :root so they resolve in both the page and the preview iframe. */
:root {
	--n10pf-accent: #DD1E33;
	--n10pf-active: #DD1E33;
	--n10pf-in_progress: #f59e0b;
	--n10pf-in_review: #8b5cf6;
	--n10pf-resolved: #10b981;
}

#n10pf-root,
#n10pf-overlay {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #1f2937;
}

#n10pf-root *,
#n10pf-root *::before,
#n10pf-root *::after,
#n10pf-overlay *,
#n10pf-overlay *::before,
#n10pf-overlay *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * Defensive reset — stop the host theme from styling our injected UI.
 * Themes target bare tags (h3, button, input, a, li, img…), never our
 * classes, so we neutralise the commonly-inherited typographic properties on
 * those tags inside our containers. Box/colour/size are then set explicitly
 * (with !important) on each tag-based component below.
 * ------------------------------------------------------------------------- */
#n10pf-root :is(h1,h2,h3,h4,h5,h6,p,a,strong,b,em,i,small,ul,ol,li,button,input,textarea,select,label,figure,blockquote),
#n10pf-overlay :is(h1,h2,h3,h4,h5,h6,p,a,strong,b,em,i,small,ul,ol,li,button,input,textarea,select,label,figure,blockquote) {
	font-family: inherit !important;
	font-style: normal !important;
	font-variant: normal !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-indent: 0 !important;
	vertical-align: baseline !important;
	float: none !important;
}

/* ---- Dark top toolbar ---- */
#n10pf-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 52px;
	z-index: 2147483005;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	background: #2b2f36;
	box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
/* Sit below the WP admin bar for logged-in users. */
body.admin-bar #n10pf-bar { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar #n10pf-bar { top: 46px; }
}

.n10pf-bar-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
#n10pf-root .n10pf-logo { height: 24px !important; width: auto !important; max-width: none !important; display: block !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.n10pf-bar-title { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }

.n10pf-bar-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* Responsive-preview switcher (centered). */
.n10pf-viewports { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
#n10pf-root #n10pf-bar .n10pf-vp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: #9aa0a6 !important;
	box-shadow: none !important;
	cursor: pointer;
}
#n10pf-root #n10pf-bar .n10pf-vp:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
#n10pf-root #n10pf-bar .n10pf-vp.is-active { color: #fff !important; background: transparent !important; }
#n10pf-root #n10pf-bar .n10pf-vp.is-active::after {
	content: '';
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: -9px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
}
#n10pf-root #n10pf-bar .n10pf-vp svg { width: 20px !important; height: 20px !important; }

/* Resize controls are desktop-only — hide on tablet and below. */
@media ( max-width: 1024px ) {
	#n10pf-viewports { display: none !important; }
}

/* Both toolbar buttons are solid brand red — forced past theme button styles. */
#n10pf-root #n10pf-bar .n10pf-bar-comment,
#n10pf-root #n10pf-bar .n10pf-icon-btn {
	border: 0 !important;
	border-radius: 7px !important;
	background: #DD1E33 !important;
	color: #fff !important;
	cursor: pointer;
	box-shadow: none !important;
	opacity: 1 !important;
}
#n10pf-root #n10pf-bar .n10pf-bar-comment:hover,
#n10pf-root #n10pf-bar .n10pf-icon-btn:hover { background: #c01a2c !important; }
#n10pf-root #n10pf-bar .n10pf-bar-comment.is-cancel { background: #4b5563 !important; }
#n10pf-root #n10pf-bar .n10pf-icon-btn.is-active { background: #b01827 !important; }

/* + Comment label (smaller). */
#n10pf-root #n10pf-bar .n10pf-bar-comment {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
}

/* Comments icon button (smaller). */
#n10pf-root #n10pf-bar .n10pf-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
}
#n10pf-root #n10pf-bar .n10pf-icon-btn svg { width: 19px !important; height: 19px !important; }

/* Utility icon buttons (help / hide markers) — neutral, not red. */
#n10pf-root #n10pf-bar .n10pf-util {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: rgba(255,255,255,.08) !important;
	color: #cbd0d6 !important;
	box-shadow: none !important;
	cursor: pointer;
}
#n10pf-root #n10pf-bar .n10pf-util:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; }
#n10pf-root #n10pf-bar .n10pf-util.is-active { background: rgba(255,255,255,.24) !important; color: #fff !important; }
#n10pf-root #n10pf-bar .n10pf-util svg { width: 19px !important; height: 19px !important; }

/* Count badge — white so it stays visible on the red icon. */
.n10pf-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #fff;
	color: #DD1E33;
	font-size: 11px;
	font-weight: 800;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #2b2f36;
}

/* Keep our own UI from inheriting the crosshair while commenting. */
body.n10pf-commenting #n10pf-bar,
body.n10pf-commenting #n10pf-bar * { cursor: pointer !important; }

/* ---- Responsive preview stage (holds the resizable iframe) ---- */
#n10pf-stage {
	position: fixed;
	top: 52px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483002;
	background: #3a3f47;
	display: none;            /* toggled to flex by JS */
	justify-content: center;
	overflow: auto;
}
body.admin-bar #n10pf-stage { top: 84px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar #n10pf-stage { top: 98px; }
}
#n10pf-frame {
	border: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	display: block;
}
#n10pf-stage.is-constrained #n10pf-frame {
	width: var( --n10pf-frame-w, 1024px );
	max-width: 100%;
	box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.5);
}

/* ---- Sidebar ---- */
#n10pf-sidebar {
	position: fixed;
	top: 52px;
	right: 0;
	width: 360px;
	max-width: 90vw;
	height: calc( 100vh - 52px );
	background: #fff;
	box-shadow: -4px 0 24px rgba(0,0,0,.18);
	z-index: 2147483004;
	transform: translateX(100%);
	transition: transform .25s ease;
	display: flex;
	flex-direction: column;
}
body.admin-bar #n10pf-sidebar { top: 84px; height: calc( 100vh - 84px ); }
@media screen and ( max-width: 782px ) {
	body.admin-bar #n10pf-sidebar { top: 98px; height: calc( 100vh - 98px ); }
}
body.n10pf-open #n10pf-sidebar { transform: translateX(0); }

.n10pf-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: var(--n10pf-accent);
	color: #fff;
}
.n10pf-side-title { font-size: 16px; font-weight: 700; color: #fff; }
.n10pf-side-sub { font-size: 12px; opacity: .85; color: #fff; }
#n10pf-root .n10pf-close {
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	opacity: 1 !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 4px !important;
	cursor: pointer;
}
#n10pf-root .n10pf-close:hover { color: #fff !important; opacity: .7 !important; }

.n10pf-side-actions { padding: 14px 16px; border-bottom: 1px solid #eef0f3; }
.n10pf-whoami { margin-top: 8px; font-size: 12px; color: #6b7280; }
#n10pf-root .n10pf-whoami a { color: var(--n10pf-accent) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 400 !important; }

.n10pf-list { flex: 1; overflow-y: auto; padding: 8px; }
.n10pf-empty { padding: 30px 16px; text-align: center; color: #9ca3af; }

.n10pf-item {
	border: 1px solid #eef0f3;
	border-radius: 10px;
	padding: 12px;
	margin: 8px 4px;
	cursor: pointer;
	transition: box-shadow .15s, border-color .15s;
	background: #fff;
}
.n10pf-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.n10pf-item.is-active { border-color: var(--n10pf-accent); box-shadow: 0 0 0 2px rgba(221,30,51,.18); }
.n10pf-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.n10pf-item-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 999px;
	background: var(--n10pf-accent); color: #fff; font-size: 12px; font-weight: 700;
}
.n10pf-item-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: #1f2937; }
.n10pf-item-meta { margin-top: 8px; font-size: 12px; color: #6b7280; }
.n10pf-item-meta strong { font-weight: 700; }
.n10pf-item-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#n10pf-root .n10pf-item-atts img { width: 56px !important; height: 56px !important; max-width: none !important; object-fit: cover; border-radius: 6px !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; }

/* status pills */
.n10pf-item-status {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 8px;
	border-radius: 999px;
	color: #fff;
}
.n10pf-status-active { background: var(--n10pf-active); }
.n10pf-status-in_progress { background: var(--n10pf-in_progress); }
.n10pf-status-in_review { background: var(--n10pf-in_review); }
.n10pf-status-resolved { background: var(--n10pf-resolved); }

/* ---- Pins ---- */
#n10pf-pins {
	position: absolute;
	top: 0; left: 0;
	width: 0; height: 0;
	z-index: 2147482000;
	pointer-events: none;
}
/* High specificity + !important so themes can't strip the fill/shape. */
#n10pf-overlay #n10pf-pins .n10pf-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 3px solid #fff !important;
	border-radius: 50% !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-shadow: none !important;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.5) !important;
	background: var(--n10pf-active) !important;
	opacity: 1 !important;
}
#n10pf-overlay #n10pf-pins .n10pf-pin:hover { z-index: 2; filter: brightness(1.08); }
#n10pf-overlay #n10pf-pins .n10pf-pin.n10pf-status-in_progress { background: var(--n10pf-in_progress) !important; }
#n10pf-overlay #n10pf-pins .n10pf-pin.n10pf-status-in_review { background: var(--n10pf-in_review) !important; }
#n10pf-overlay #n10pf-pins .n10pf-pin.n10pf-status-resolved { background: var(--n10pf-resolved) !important; }
.n10pf-pin.is-flash { animation: n10pf-bounce .6s ease 2; }
@keyframes n10pf-bounce {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.4); }
}
.n10pf-ghost-pin {
	position: absolute;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: rgba(221,30,51,.5);
	border: 2px solid var(--n10pf-accent);
	z-index: 2147482000;
	pointer-events: none;
}

/* ---- Comment mode hint ---- */
body.n10pf-commenting,
body.n10pf-commenting * { cursor: crosshair !important; }

#n10pf-hint {
	position: fixed;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2147483006;
	background: #111827;
	color: #fff;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0,0,0,.3);
	display: none;
}

/* ---- Comment form popover ---- */
#n10pf-form {
	position: fixed;
	width: 320px;
	max-width: 92vw;
	z-index: 2147483003;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0,0,0,.28);
	padding: 14px;
}
.n10pf-field { display: block; margin-bottom: 10px; }
.n10pf-field > span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: #374151; }

/* Form controls — fully specified so theme input/select/textarea rules can't bleed in. */
#n10pf-root :is(.n10pf-field input, .n10pf-field textarea, .n10pf-reply-form textarea, .n10pf-item-status-select),
#n10pf-overlay :is(.n10pf-field input, .n10pf-field textarea, .n10pf-reply-form textarea, .n10pf-item-status-select) {
	width: 100% !important;
	margin: 0 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #1f2937 !important;
	background: #fff !important;
	box-shadow: none !important;
	min-height: 0 !important;
	max-width: none !important;
}
#n10pf-root .n10pf-field textarea,
#n10pf-overlay .n10pf-field textarea,
#n10pf-root .n10pf-reply-form textarea,
#n10pf-overlay .n10pf-reply-form textarea { resize: vertical !important; }
#n10pf-root .n10pf-file-field input,
#n10pf-overlay .n10pf-file-field input { font-size: 12px !important; padding: 6px 8px !important; }
#n10pf-root .n10pf-item-status-select,
#n10pf-overlay .n10pf-item-status-select { width: auto !important; flex: 1; font-size: 12px !important; padding: 4px 6px !important; border-radius: 6px !important; }

.n10pf-form-actions,
.n10pf-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.n10pf-form-error { color: #b91c1c; font-size: 12px; margin-top: 6px; min-height: 1em; }

/* Buttons — base + primary, forced past theme button styles. */
#n10pf-root .n10pf-btn,
#n10pf-overlay .n10pf-btn {
	display: inline-block !important;
	width: auto !important;
	border: 1px solid #d1d5db !important;
	background: #fff !important;
	color: #374151 !important;
	border-radius: 8px !important;
	padding: 8px 14px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
#n10pf-root .n10pf-btn:hover,
#n10pf-overlay .n10pf-btn:hover { background: #f9fafb !important; }
#n10pf-root .n10pf-btn-primary,
#n10pf-overlay .n10pf-btn-primary {
	background: #DD1E33 !important;
	border: 1px solid #DD1E33 !important;
	color: #fff !important;
}
#n10pf-root .n10pf-btn-primary:hover,
#n10pf-overlay .n10pf-btn-primary:hover { background: #c01a2c !important; }
#n10pf-root .n10pf-btn[disabled],
#n10pf-overlay .n10pf-btn[disabled] { opacity: .6; cursor: default; }

/* Hidden honeypot field. */
.n10pf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---- Name / help modal ---- */
.n10pf-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483010;
	background: rgba(17,24,39,.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.n10pf-modal {
	background: #fff;
	border-radius: 14px;
	padding: 22px;
	width: 380px;
	max-width: 100%;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#n10pf-root .n10pf-modal h3 {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #1f2937 !important;
}

/* ---- Sidebar: viewport badge ---- */
.n10pf-vp-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 2px 7px;
	border-radius: 999px;
	background: #eef0f3;
	color: #4b5563;
}
.n10pf-vp-tablet { background: #e0e7ff; color: #3730a3; }
.n10pf-vp-mobile { background: #dcfce7; color: #166534; }

/* ---- Sidebar: admin tools per comment ---- */
.n10pf-admin-tools { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
#n10pf-root .n10pf-itembtn,
#n10pf-overlay .n10pf-itembtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: #4b5563 !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0 !important;
}
#n10pf-root .n10pf-itembtn:hover { background: #f9fafb !important; color: #1f2937 !important; }
#n10pf-root .n10pf-itembtn svg { width: 16px !important; height: 16px !important; }
#n10pf-root .n10pf-del-btn:hover { color: #DD1E33 !important; border-color: #DD1E33 !important; }

/* ---- Sidebar: replies ---- */
.n10pf-replies {
	margin-top: 10px;
	border-top: 1px solid #eef0f3;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.n10pf-reply {
	background: #f7f8fa;
	border-radius: 8px;
	padding: 8px 10px;
}
.n10pf-reply-meta { font-size: 11px; color: #6b7280; margin-bottom: 3px; }
.n10pf-reply-meta strong { font-weight: 700; }
.n10pf-reply-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; color: #1f2937; }
.n10pf-admin-badge {
	background: #DD1E33;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 999px;
	margin-left: 2px;
}
.n10pf-reply-wrap { margin-top: 8px; }
#n10pf-root .n10pf-reply-toggle,
#n10pf-overlay .n10pf-reply-toggle {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--n10pf-accent) !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	cursor: pointer;
	padding: 0 !important;
}
.n10pf-reply-form { margin-top: 8px; }
.n10pf-reply-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.n10pf-reply-error { color: #b91c1c; font-size: 12px; margin-top: 4px; }
.n10pf-reply-warning { font-size: 11px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 5px 8px; margin-top: 6px; }

/* ---- Screenshot lightbox ---- */
.n10pf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483011;
	background: rgba(0,0,0,.8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}
#n10pf-root .n10pf-lightbox img {
	max-width: 95% !important;
	max-height: 95% !important;
	width: auto !important;
	height: auto !important;
	border-radius: 6px !important;
	border: 0 !important;
	box-shadow: 0 10px 50px rgba(0,0,0,.6) !important;
}
#n10pf-root .n10pf-lightbox-close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 38px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	cursor: pointer;
}

/* ---- Help modal ---- */
.n10pf-help-modal { width: 460px; }
#n10pf-root .n10pf-help-steps {
	margin: 0 0 14px !important;
	padding: 0 0 0 20px !important;
	list-style: decimal !important;
}
#n10pf-root .n10pf-help-steps li {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #1f2937 !important;
	list-style: decimal !important;
}