/*! CSS Portal — CSS Box Model Visualizer (builds on code-tool.css and generator-tool.css) */
.bm [hidden] { display: none !important; }
.bm span, .bm b, .bm i, .bm small { line-height: inherit; }
.bm .gt-card__head h2 { margin: 0; }
.bm-zoom { margin-left: auto; font-size: 12px; color: var(--ct-muted); }

/* live element */
.bm-stage {
	display: flex; justify-content: center; align-items: flex-start; min-height: 220px; padding: 28px 16px; overflow: hidden;
	background-color: var(--ct-bg);
	background-image: linear-gradient(var(--ct-border) 1px, transparent 1px), linear-gradient(90deg, var(--ct-border) 1px, transparent 1px);
	background-size: 20px 20px; background-position: center;
}
.bm-live { transform-origin: top center; }
.bm-live__margin { display: block; width: max-content; border-radius: 2px; transition: box-shadow .15s; }
.bm-live__el { position: relative; display: grid; place-items: center; transition: box-shadow .15s; }
.bm-live__size { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--ct-mono); color: #1e293b; white-space: nowrap; pointer-events: none; }
.bm[data-hover="margin"] .bm-live__margin { box-shadow: 0 0 0 2px #d9822b; }
.bm[data-hover="border"] .bm-live__el, .bm[data-hover="padding"] .bm-live__el, .bm[data-hover="content"] .bm-live__el { box-shadow: 0 0 0 2px var(--ct-accent); }

/* sizes */
.bm-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 0; }
.bm-size { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; padding: 9px 12px; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: 10px; }
.bm-size__dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); }
.bm-size span { font-size: 12px; color: var(--ct-muted); }
.bm-size b { font: 700 15px var(--ct-mono); color: var(--ct-text); font-variant-numeric: tabular-nums; }
.bm-math { margin: 0; padding: 10px 14px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ct-muted); }
.bm-warn { display: flex; gap: 8px; margin: 0 14px 14px; padding: 9px 12px; font-size: 13.5px; color: var(--ct-warn); background: color-mix(in srgb, var(--ct-warn) 10%, var(--ct-bg)); border-radius: 8px; }
.bm-warn i { flex: none; margin-top: 2px; }

/* DevTools-style diagram */
.bm-diagram { display: flex; justify-content: center; padding: 18px 14px; overflow-x: auto; }
.bm-d { position: relative; display: grid; grid-template-columns: 40px auto 40px; grid-template-rows: 26px auto 26px; align-items: center; justify-items: center; min-width: 0; color: #1e293b; border: 1px dashed rgba(0, 0, 0, .35); font: 12px var(--ct-mono); transition: box-shadow .15s; }
.bm-d--margin { background: #f9cc9d; }
.bm-d--border { background: #fddd9b; border: 2px solid #1e293b; }
.bm-d--padding { background: #c3d08b; }
.bm-d--content { display: grid; grid-template-columns: none; grid-template-rows: none; place-items: center; min-width: 120px; height: 46px; padding: 0 10px; background: #8cb6c0; border: 1px solid rgba(0, 0, 0, .35); }
.bm-d__label { position: absolute; top: 4px; left: 6px; font: 600 10.5px system-ui, sans-serif; letter-spacing: .04em; color: rgba(15, 23, 42, .65); }
.bm-d__n--t { grid-area: 1 / 2; }
.bm-d__n--r { grid-area: 2 / 3; }
.bm-d__n--b { grid-area: 3 / 2; }
.bm-d__n--l { grid-area: 2 / 1; }
.bm-d__mid { grid-area: 2 / 2; }
.bm-d__size { font-weight: 700; white-space: nowrap; }
.bm[data-hover="margin"] .bm-d--margin, .bm[data-hover="border"] .bm-d--border, .bm[data-hover="padding"] .bm-d--padding, .bm[data-hover="content"] .bm-d--content { box-shadow: 0 0 0 3px var(--ct-accent); z-index: 1; }

@media (max-width: 560px) {
	.bm-sizes { grid-template-columns: minmax(0, 1fr); }
	.bm-d { grid-template-columns: 30px auto 30px; grid-template-rows: 22px auto 22px; font-size: 11px; }
	.bm-d--content { min-width: 84px; }
}