/* Local compatibility fixes for the editor. Keep these selectors scoped so
   the shared ClickIt themes and the HTML block library remain untouched. */

#attributes_tab > div,
#attributes_tab [id^="attribute_tab_section_"] {
	height: auto !important;
	min-height: 0 !important;
}

#attributes_tab [id^="attribute_tab_section_"] {
	display: block !important;
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 10px !important;
	text-align: center;
}

#attributes_tab [id^="attribute_tab_section_"] > p {
	position: static !important;
	display: block !important;
	width: auto !important;
	margin: 0 0 4px !important;
	text-align: left;
}

#attributes_tab .code_block {
	display: inline-block !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 3px !important;
	inset: auto !important;
	transform: none !important;
	vertical-align: top;
}

.editor-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; }
.theme-combo { display:inline-block !important; position:relative; margin-top:3px; padding:0 !important; }
.theme-combo #theme { -webkit-appearance:none; appearance:none; min-width:145px; height:34px; padding:5px 34px 5px 10px; color:#20242c; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%2320242c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:14px 9px; border:1px solid #aeb4bd; border-radius:7px; box-shadow:0 1px 2px rgba(0,0,0,.08); font:inherit; cursor:pointer; outline:none; }
.theme-combo #theme:focus { border-color:#596bea; box-shadow:0 0 0 3px rgba(89,107,234,.24); }
.theme-combo-arrow { display:none; }
.dark .theme-combo #theme { color:#f5f5f5; background-color:#23252a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color:#666b74; color-scheme:dark; }

.balfribbon .minimise_button {
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:34px;
	top:4px;
	right:2px;
	padding:0;
	box-sizing:border-box;
	color:var(--main-color, #20242c);
	background:transparent;
	border:0;
	border-radius:0;
	font-size:0;
	line-height:0;
	text-shadow:none;
}
.balfribbon .minimise_button::before {
	content:"";
	display:block;
	width:14px;
	height:9px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 7l5-5 5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 7l5-5 5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.balfribbon.minimised .minimise_button::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.balfribbon .minimise_button:hover { color:var(--accent-color, #6334bf); background:transparent; }
.balfribbon .minimise_button:focus-visible { outline:2px solid #596bea; outline-offset:2px; }

#style_popup { --style-surface:#fff; --style-surface-subtle:#fff; --style-text:#20242c; --style-muted:#667085; --style-border:#ddd; --style-field:#fff; --style-field-border:#bbb; --style-secondary:#f3f4f6; display:none; position:fixed; inset:0; z-index:30; align-items:center; justify-content:center; padding:20px; color-scheme:light; background:rgba(0,0,0,.58); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
body.dark #style_popup { --style-surface:#24262b; --style-surface-subtle:#2d3036; --style-text:#f5f7fa; --style-muted:#b4bac5; --style-border:#484c55; --style-field:#191b1f; --style-field-border:#5b606b; --style-secondary:#353840; color-scheme:dark; }
@media (prefers-color-scheme:dark) {
	#style_popup { --style-surface:#24262b; --style-surface-subtle:#2d3036; --style-text:#f5f7fa; --style-muted:#b4bac5; --style-border:#484c55; --style-field:#191b1f; --style-field-border:#5b606b; --style-secondary:#353840; color-scheme:dark; }
}
#style_popup.open { display:flex; }
.style-popup-card { width:min(680px,100%); max-height:calc(100vh - 40px); overflow:auto; color:var(--style-text); background:var(--style-surface); border:1px solid var(--style-border); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.style-popup-header,.style-popup-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; }
.style-popup-header { border-bottom:1px solid var(--style-border); }
.style-popup-header h2 { margin:0; font-size:21px; }
.style-popup-header p { margin:3px 0 0; color:var(--style-muted); }
.style-popup-close { padding:2px 10px; border:0; color:var(--style-muted); background:transparent; font-size:30px; cursor:pointer; }
.style-popup-body { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 20px; }
.style-popup-body fieldset { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:12px; background:var(--style-surface-subtle); border:1px solid var(--style-border); border-radius:8px; }
.style-popup-body legend { padding:0 5px; font-weight:700; }
.style-field { display:flex; flex-direction:column; gap:5px; }
.style-field > span { color:var(--style-muted); font-size:12px; font-weight:700; }
.style-field-wide { grid-column:1 / -1; }
.style-field input,.style-field select,.style-field textarea { width:100%; min-height:36px; padding:7px 9px; color:var(--style-text); background:var(--style-field); border:1px solid var(--style-field-border); border-radius:6px; box-sizing:border-box; font:inherit; }
.style-field input:focus,.style-field select:focus,.style-field textarea:focus { outline:2px solid #7c5ce0; outline-offset:1px; }
.style-field input::placeholder,.style-field textarea::placeholder { color:var(--style-muted); }
.style-field input[type="color"] { padding:3px; }
.style-popup-actions { border-top:1px solid var(--style-border); }
.style-popup-actions button { padding:9px 16px; color:var(--style-text); background:var(--style-secondary); border:1px solid var(--style-field-border); border-radius:6px; cursor:pointer; }
.style-popup-actions .primary { color:#fff; background:#5b35b5; border-color:#5b35b5; }
@media (max-width:620px) { .style-popup-body { grid-template-columns:1fr; } .style-popup-body fieldset { grid-column:1; } }

#style_context_menu {
	display:none;
	position:fixed;
	z-index:40;
	min-width:145px;
	padding:5px;
	color:#20242c;
	background:#fff;
	border:1px solid #c8cbd0;
	border-radius:7px;
	box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#style_context_menu.open { display:block; }
#style_context_menu button { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; color:inherit; background:transparent; border:0; border-radius:4px; font:inherit; text-align:left; cursor:pointer; }
#style_context_menu button:hover,#style_context_menu button:focus { background:#ece8fa; outline:0; }
body.dark #style_context_menu { color:#f5f7fa; background:#24262b; border-color:#50545d; color-scheme:dark; }
body.dark #style_context_menu button:hover,body.dark #style_context_menu button:focus { background:#3a344b; }
@media (prefers-color-scheme:dark) {
	#style_context_menu { color:#f5f7fa; background:#24262b; border-color:#50545d; color-scheme:dark; }
	#style_context_menu button:hover,#style_context_menu button:focus { background:#3a344b; }
}

#code {
	--code-background:#f7f8fa;
	--code-text:#313846;
	--code-muted:#737b89;
	--code-comment:#5f7f65;
	--code-doctype:#8056a8;
	--code-selection:#cbd9ff;
	--code-depth-0:#a23d48;
	--code-depth-1:#9b5c16;
	--code-depth-2:#23756e;
	--code-depth-3:#285ea8;
	--code-depth-4:#714caf;
	--code-depth-5:#a03f82;
	position:relative;
	width:100%;
	height:100%;
}

body.dark #code {
	--code-background:#17191e;
	--code-text:#d9dee8;
	--code-muted:#9098a7;
	--code-comment:#86b38d;
	--code-doctype:#c99bed;
	--code-selection:#334a73;
	--code-depth-0:#ff7b86;
	--code-depth-1:#f4b45f;
	--code-depth-2:#5dd3c5;
	--code-depth-3:#75a9f5;
	--code-depth-4:#b99af4;
	--code-depth-5:#ef91ce;
	color-scheme:dark;
}

@media (prefers-color-scheme:dark) {
	#code {
		--code-background:#17191e;
		--code-text:#d9dee8;
		--code-muted:#9098a7;
		--code-comment:#86b38d;
		--code-doctype:#c99bed;
		--code-selection:#334a73;
		--code-depth-0:#ff7b86;
		--code-depth-1:#f4b45f;
		--code-depth-2:#5dd3c5;
		--code-depth-3:#75a9f5;
		--code-depth-4:#b99af4;
		--code-depth-5:#ef91ce;
		color-scheme:dark;
	}
}

#code.syntax-ready textarea { display:none; }
#code_highlight {
	position:absolute;
	inset:0;
	z-index:2;
	width:100%;
	height:100%;
	margin:0;
	padding:14px 16px;
	overflow:auto;
	box-sizing:border-box;
	color:var(--code-text);
	background:var(--code-background);
	font:14px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	white-space:pre;
	tab-size:4;
	-webkit-user-select:text !important;
	user-select:text !important;
	cursor:text;
}
#code_highlight * { -webkit-user-select:text !important; user-select:text !important; cursor:text; }
#code_highlight::selection,#code_highlight *::selection { background:var(--code-selection); }
#code_highlight .syntax-text { color:var(--code-text); }
#code_highlight .syntax-comment { color:var(--code-comment); font-style:italic; }
#code_highlight .syntax-doctype { color:var(--code-doctype); }
#code_highlight .syntax-depth-0 { color:var(--code-depth-0); }
#code_highlight .syntax-depth-1 { color:var(--code-depth-1); }
#code_highlight .syntax-depth-2 { color:var(--code-depth-2); }
#code_highlight .syntax-depth-3 { color:var(--code-depth-3); }
#code_highlight .syntax-depth-4 { color:var(--code-depth-4); }
#code_highlight .syntax-depth-5 { color:var(--code-depth-5); }

#block_builder .tag-name-badge {
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	min-width:24px;
	padding:2px 6px;
	box-sizing:border-box;
	color:inherit;
	background:rgba(0,0,0,.24);
	border:1px solid rgba(255,255,255,.28);
	border-radius:5px;
	box-shadow:0 1px 2px rgba(0,0,0,.18);
	font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size:12px;
	font-weight:800;
	line-height:1.25;
	letter-spacing:.02em;
	vertical-align:middle;
}
body:not(.dark) #block_builder .tag-name-badge {
	background:rgba(0,0,0,.16);
	border-color:rgba(255,255,255,.38);
}

/* Workspace polish. Deliberately scoped below the ribbon. */
#document {
	--workspace-panel:#fff;
	--workspace-panel-muted:#f5f6f8;
	--workspace-canvas:#f7f8fa;
	--workspace-line:#d7dbe1;
	--workspace-text:#20242c;
	--workspace-muted:#687080;
	background:#eef1f4;
}

#document #left_panel > .inner,
#document #main_content > .inner,
#document #right_panel > .inner {
	margin:4px;
	overflow:hidden;
	background:var(--workspace-panel);
	border:1px solid var(--workspace-line);
	border-radius:10px;
	box-shadow:0 2px 8px rgba(25, 32, 44, .08);
}

#document #left_tab_bar,
#document #main_tab_bar {
	background:var(--workspace-panel);
	border-bottom:1px solid var(--workspace-line);
}

#document .tabs {
	display:flex;
	align-items:flex-end;
	gap:4px;
	height:43px;
	padding:5px 7px 0;
	box-sizing:border-box;
}

#document .tabs li {
	flex:0 1 124px;
	width:auto;
	height:38px;
	margin:0;
	border-radius:7px 7px 0 0;
	transition:background-color .15s ease, color .15s ease;
}

#document .tabs li a {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	padding:0 14px;
	box-sizing:border-box;
	color:var(--workspace-text);
	font-weight:600;
}

#document .tabs li:not(.open):hover {
	background:var(--workspace-panel-muted);
}

#document .tabs li.open {
	box-shadow:0 -1px 0 rgba(255,255,255,.28) inset;
}

#document #blocks,
#document #main_zone {
	top:43px;
	border-width:2px;
	border-radius:0 0 8px 8px;
}

#document #block_zone,
#document #code_tab,
#document #assets_tab,
#document #preview_tab {
	background-color:var(--workspace-canvas);
}

#document #block_zone {
	background-image:radial-gradient(circle, rgba(89, 97, 112, .14) 1px, transparent 1.25px);
	background-size:18px 18px;
}

#document #block_wrapper {
	padding:12px;
}

#document #right_wrapper {
	inset:7px;
	background:#31343a;
	border:1px solid #25282d;
	border-radius:10px;
	box-shadow:0 3px 10px rgba(25, 32, 44, .14);
}

#document #page_title {
	display:flex;
	align-items:center;
	height:42px;
	padding:0 12px;
	box-sizing:border-box;
	color:#f5f7fa;
	font-weight:700;
}

#document #page_wrapper {
	top:42px;
	right:10px;
	bottom:10px;
	left:10px;
	overflow:hidden;
	background:#fff;
	border:1px solid rgba(255,255,255,.24);
	border-radius:8px;
	box-shadow:0 1px 4px rgba(0,0,0,.22);
}

body.dark #document {
	--workspace-panel:#202329;
	--workspace-panel-muted:#2a2e35;
	--workspace-canvas:#292d33;
	--workspace-line:#444951;
	--workspace-text:#f4f6f8;
	--workspace-muted:#b4bbc6;
	background:#17191d;
	color-scheme:dark;
}

body.dark #document #block_zone {
	background-image:radial-gradient(circle, rgba(219, 224, 234, .12) 1px, transparent 1.25px);
}

body.dark #document #right_wrapper {
	background:#1d2025;
	border-color:#4a4f58;
}

@media (prefers-color-scheme:dark) {
	body:not(.light) #document {
		--workspace-panel:#202329;
		--workspace-panel-muted:#2a2e35;
		--workspace-canvas:#292d33;
		--workspace-line:#444951;
		--workspace-text:#f4f6f8;
		--workspace-muted:#b4bbc6;
		background:#17191d;
		color-scheme:dark;
	}

	body:not(.light) #document #block_zone {
		background-image:radial-gradient(circle, rgba(219, 224, 234, .12) 1px, transparent 1.25px);
	}
}

/* A restrained block treatment: same colours and structure, clearer affordance. */
#document #left_panel .code_block {
	border:1px solid rgba(20, 24, 32, .16);
	border-radius:7px;
	box-shadow:0 2px 0 rgba(20, 24, 32, .16);
	font-weight:600;
	transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#document #left_panel .code_block:hover {
	transform:translateY(-1px);
	box-shadow:0 3px 0 rgba(20, 24, 32, .2);
	filter:saturate(1.05) brightness(1.03);
}

#document #left_panel .code_block:active {
	transform:translateY(1px);
	box-shadow:0 1px 0 rgba(20, 24, 32, .18);
}

#document #left_panel .code_block:focus-visible {
	outline:3px solid rgba(76, 104, 230, .55);
	outline-offset:2px;
}

#document #block_builder .code_block > .title,
#document #block_builder .code_block > .closing_block > .title {
	border-color:rgba(20, 24, 32, .5);
	box-shadow:0 1px 2px rgba(20, 24, 32, .18);
}

#document #block_builder .code_block > .title {
	transition:filter .12s ease, box-shadow .12s ease;
}

#document #block_builder .code_block > .title:hover {
	filter:brightness(1.04);
	box-shadow:0 2px 5px rgba(20, 24, 32, .22);
}

#document #block_builder .right_control {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	transition:background-color .12s ease;
}

#document #block_builder .right_control:hover {
	background:rgba(255,255,255,.2);
}

body.dark #document #left_panel .code_block,
body.dark #document #block_builder .code_block > .title,
body.dark #document #block_builder .code_block > .closing_block > .title {
	border-color:rgba(255,255,255,.24);
	box-shadow:0 2px 0 rgba(0,0,0,.34);
}