/**
 * Standalone tool app (/tools/<slug>/run/) — a complete, self-contained
 * working environment served outside the WordPress theme. Minimal chrome:
 * a top bar with the logo, "Free tool" chip and a link back to the
 * landing page; below it, the tool fills the screen.
 */

:root {
	--wt-scarlet: #e0231f;
	--wt-ink: #16161a;
	--wt-line: #e5e2dd;
	--wt-alt: #f6f4f1;
	--wt-muted: #6b6763;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	background: var(--wt-alt);
	color: var(--wt-ink);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ---- top bar ---- */
.wtapp-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1.25rem;
	background: var(--wt-ink);
	color: #f4f3f1;
}
.wtapp-logo {
	font-weight: 800;
	font-size: 1.15rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.wtapp-logo span { color: var(--wt-scarlet); }
.wtapp-chip {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(224, 35, 31, 0.18);
	color: #ffb3b0;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}
.wtapp-back {
	margin-left: auto;
	color: #c9c7c4;
	font-size: 0.9rem;
	text-decoration: none;
	font-weight: 600;
}
.wtapp-back:hover { color: #fff; text-decoration: underline; }

/* ---- main panel ---- */
.wtapp-main {
	flex: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.6rem 1.25rem 2rem;
	display: flex;
	flex-direction: column;
}
.wtapp-tool {
	background: #fff;
	border: 1px solid var(--wt-line);
	border-radius: 18px;
	padding: clamp(1.2rem, 3vw, 2rem);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.06);
}
.wtapp-tool .webot-tool__head h1 {
	font-size: 1.45rem;
	margin-bottom: 0.3rem;
}
.wtapp-tool .webot-tool__head p {
	color: var(--wt-muted);
	font-size: 0.95rem;
	margin-bottom: 1.4rem;
}
.wtapp-tool [hidden] { display: none !important; }
.wtapp-foot {
	text-align: center;
	color: var(--wt-muted);
	font-size: 0.85rem;
	padding: 1.2rem 1rem 0;
}
.wtapp-foot a { color: var(--wt-scarlet); font-weight: 600; }

/* The editor app: panes fill the remaining viewport. */
body.wtapp-editor .wtapp-main {
	max-width: none;
	padding: 1rem 1rem 0.6rem;
	flex: 1;
}
body.wtapp-editor .wtapp-tool {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem 1.1rem;
}
body.wtapp-editor .webot-tool__head { margin-bottom: 0.8rem; }
body.wtapp-editor .webot-tool__head p { margin-bottom: 0; }
body.wtapp-editor .webot-tool__ed {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	min-height: 0;
}
body.wtapp-editor .webot-tool__ed-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}
body.wtapp-editor .webot-tool__ed-pane > label { margin-bottom: 0.5rem; }
body.wtapp-editor .webot-tool__ed-pane .webot-tool__output {
	flex: 1;
	min-height: calc(100vh - 300px);
	resize: none;
}
body.wtapp-editor .webot-tool__preview {
	flex: 1;
	display: flex;
	border: 1px solid var(--wt-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
body.wtapp-editor .webot-tool__preview iframe {
	flex: 1;
	width: 100%;
	border: 0;
	background: #fff;
}
body.wtapp-editor .webot-tool__preview.wt-narrow iframe {
	width: 375px;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0 0 0 1px var(--wt-line);
}
body.wtapp-editor .webot-tool__actions {
	margin: 0.9rem 0 0;
}
@media (max-width: 56rem) {
	body.wtapp-editor .webot-tool__ed { grid-template-columns: 1fr; }
	body.wtapp-editor .webot-tool__ed-pane .webot-tool__output { min-height: 240px; }
	body.wtapp-editor .webot-tool__preview iframe { min-height: 320px; }
}

/* ---- shared tool components (match the theme versions) ---- */
.webot-tool__row { margin-bottom: 1.1rem; }
.webot-tool__row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}
@media (max-width: 48rem) {
	.webot-tool__row--half { grid-template-columns: 1fr; gap: 0; }
}
.webot-tool label {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
}
.webot-tool__count { font-weight: 400; color: var(--wt-muted); font-size: 0.82rem; }
.webot-tool__hint { color: var(--wt-muted); font-size: 0.85rem; }
.webot-tool input,
.webot-tool select,
.webot-tool textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wt-line);
	border-radius: 10px;
	font: inherit;
	background: #fff;
	color: var(--wt-ink);
}
.webot-tool input:focus,
.webot-tool select:focus,
.webot-tool textarea:focus {
	outline: 2px solid var(--wt-scarlet);
	outline-offset: 1px;
}
.webot-tool__actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	align-items: center;
	margin: 1.2rem 0 1rem;
}
.webot-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	font: 700 0.95rem system-ui, sans-serif;
	cursor: pointer;
	text-decoration: none;
}
.webot-btn--primary { background: var(--wt-scarlet); color: #fff; }
.webot-btn--primary:hover { background: #c21d1a; }
.webot-btn--ghost {
	background: transparent;
	color: var(--wt-ink);
	border: 1.5px solid var(--wt-line);
}
.webot-btn--ghost:hover { border-color: var(--wt-muted); }
.webot-tool__output {
	background: var(--wt-ink);
	color: #7ef0b2;
	font-family: Consolas, monospace;
	font-size: 0.88rem;
	border-radius: 12px;
	padding: 1rem;
	resize: vertical;
}
.webot-tool__warning {
	background: #fdeaea;
	border: 1px solid #e8a1a1;
	border-left: 4px solid #b32d2e;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: #7a1f1f;
	margin-bottom: 1rem;
}
.webot-tool__error {
	background: #fff7e6;
	border: 1px solid #f0d9a8;
	border-left: 4px solid #d98f00;
	border-radius: 10px;
	padding: 0.7rem 1rem;
	font-size: 0.9rem;
	color: #7a5a00;
	margin-bottom: 1rem;
}
.webot-tool__checks { display: grid; gap: 0.5rem; }
.webot-tool__checks label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
}
.webot-tool__checks input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wt-scarlet);
}
.webot-tool__query {
	display: block;
	padding: 0.6rem 0.8rem;
	background: var(--wt-alt);
	border-radius: 8px;
	font: 600 0.85rem Consolas, monospace;
	word-break: break-all;
}
.webot-tool__outwrap {
	border: 1px solid var(--wt-line);
	border-radius: 12px;
	overflow: hidden;
}
.webot-tool__outhead {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.55rem 1rem;
	background: var(--wt-alt);
	border-bottom: 1px solid var(--wt-line);
	font: 600 0.85rem Consolas, monospace;
}
.webot-tool__outsize { font-weight: 400; color: var(--wt-muted); }
.webot-tool .webot-tool__output { border: 0; border-radius: 0; }
.webot-tool__wa {
	margin-top: 0.4rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.4rem;
	align-items: start;
	border: 1px solid var(--wt-line);
	border-radius: 14px;
	padding: 1.2rem;
	background: var(--wt-alt);
}
@media (max-width: 48rem) {
	.webot-tool__wa { grid-template-columns: 1fr; }
}
.webot-tool__walabel {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wt-muted);
	margin-bottom: 0.35rem;
}
.webot-tool__wa-link a {
	word-break: break-all;
	font-weight: 600;
	color: var(--wt-scarlet);
	font-size: 0.95rem;
}
.webot-tool__wa-qr {
	display: grid;
	gap: 0.7rem;
	justify-items: center;
}
.webot-tool__wa-qr img {
	border: 1px solid var(--wt-line);
	border-radius: 12px;
	background: #fff;
}
.webot-tool__list { margin-top: 1.2rem; }
.webot-tool__outline {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}
.webot-tool__outline code {
	background: var(--wt-alt);
	border-radius: 6px;
	padding: 0.1rem 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
}
.wt-o-h1 { font-weight: 700; font-size: 1.05em; }
.wt-o-h2 { padding-left: 1rem; }
.wt-o-h3 { padding-left: 2rem; }
.wt-o-h4, .wt-o-h5, .wt-o-h6 { padding-left: 3rem; color: var(--wt-muted); }
.webot-tool__dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.45rem 1rem;
}
.webot-tool__dl dt { font-weight: 700; font-size: 0.88rem; }
.webot-tool__dl dd { margin: 0; word-break: break-word; font-size: 0.92rem; }
.webot-tool__ok { color: #0a7d33; font-weight: 600; }
.webot-tool__err { color: #b32d2e; font-weight: 600; }
.webot-tool__tablewrap { margin-top: 1.2rem; overflow-x: auto; }
.webot-tool__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.webot-tool__table th,
.webot-tool__table td {
	border: 1px solid var(--wt-line);
	padding: 0.55rem 0.8rem;
	text-align: left;
}
.webot-tool__table th { background: var(--wt-alt); }
.wt-d-ok { color: #0a7d33; font-weight: 700; }
.wt-d-low { color: #b37c00; font-weight: 600; }
.wt-d-high { color: #b32d2e; font-weight: 700; }