/* HDL Kit — app_mockup block styles.
 *
 * This file is deliberately NOT a copy of the handoff's assets/appui.css.
 * appui.css (the .app / .app-bar / .app-tbl / .meter / .pill kit) is ported
 * once into the theme stylesheet layer and is a prerequisite for this block.
 *
 * What lives here, and only this:
 *   1. The per-page inline <style> rules that the handoff never put in a
 *      stylesheet, but that six of the ported mockups need to render
 *      (.bl-canvas, .pal, .osheet, .tree, .map, .scan, .pack, .scope-row,
 *      .runbars, .rob). Values are verbatim from the source page named above
 *      each group.
 *   2. Replacements for the inline style="" attributes the handoff used inside
 *      those mockups. block-conventions.md §8 forbids inline style rules, so
 *      each declaration was lifted here under a class of its own; the values
 *      are unchanged.
 *   3. The two documented appui traps, handled once instead of per page.
 *
 * Rounded corners: the mockup kit is the only place on this site with a
 * radius (.app 16px, .app-btn/.app-search 8px, .app-side a 7px, all owned by
 * appui.css). Nothing in this file introduces a radius. Everything else on the
 * site is radius 0 — keep it that way.
 */

/* ---------------------------------------------------------------------------
 * TRAP 1 — .meter is a fixed 74px wide (assets/appui.css:44). The prototype
 * overrode it exactly once, in replatforma-magento.html:45
 * (`.runbars .meter{width:100%;display:block}`). Four mockups need the wide
 * form, so the override is promoted to a modifier instead of being repeated.
 * ------------------------------------------------------------------------- */
.meter-fill {
	width: 100%;
	display: block;
}

.meter-fill-lg {
	height: 7px;
	margin-top: 8px;
}

/* The fill percentage is fictional content, not a design value, so it arrives
 * as a custom property on the element and the rule lives here. */
.app .meter i {
	width: var( --app-fill, 0% );
}

.app .bars i {
	height: var( --app-bar, 40% );
}

/* ---------------------------------------------------------------------------
 * TRAP 2 — inside @media(max-width:1000px) appui.css:109 sets
 * `.app-scroll .app-tbl{min-width:660px}`. That is why any two-up section
 * holding a mockup must collapse at 1000px and never at 900px: between 900px
 * and 1000px a 660px-minimum table would be squeezed into a ~430px track.
 *
 * This block therefore never places the mockup in a two-up of its own. Any
 * section primitive that does (the .split2 family — 7 pages in the handoff,
 * all of them collapsing at 1000px) must use 1000px, never 900px. The rule
 * below is the safety net: if a mockup ever ends up in a track narrower than
 * its table, the table scrolls inside the block instead of the page.
 * ------------------------------------------------------------------------- */
.app .app-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* ---------------------------------------------------------------------------
 * Inline-style replacements. One class per distinct inline rule found in the
 * 39 ported mockups; declarations copied verbatim.
 * ------------------------------------------------------------------------- */
.app .app-pad {
	padding: 18px 16px;
}

.app .app-pad-grid {
	display: grid;
	gap: 14px;
}

.app .app-pad-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.app .app-cols2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.app .app-stack {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: .8rem;
	color: #aeb6c0;
}

.app .app-stack-mono {
	gap: 6px;
	font-family: var( --font-mono );
	font-size: .74rem;
	color: #8a929c;
}

.app .app-stack-dim {
	font-size: .72rem;
	color: #9aa2ac;
}

.app .app-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	color: #aeb6c0;
}

.app .app-row-dim {
	gap: 9px;
	color: #8a929c;
}

.app .app-metrics {
	display: flex;
	gap: 18px;
	font-family: var( --font-mono );
	font-size: .72rem;
	color: #8a929c;
}

.app .app-inline {
	display: flex;
	gap: 6px;
}

.app .app-inline-wide {
	gap: 9px;
}

.app .app-inline-wrap {
	flex-wrap: wrap;
}

.app .app-between {
	display: flex;
	justify-content: space-between;
}

.app .app-lab {
	display: block;
	font-family: var( --font-mono );
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6f7883;
	margin-bottom: 7px;
}

.app .app-lab-inline {
	font-size: .62rem;
	margin-bottom: 0;
}

.app .app-note {
	font-size: .8rem;
	color: #8a929c;
	line-height: 1.55;
	margin: 0;
}

.app .app-h4-gap {
	margin-top: 6px;
}

.app .app-field-wrap {
	line-height: 1.7;
}

.app .app-btn-block {
	justify-content: center;
}

.app .app-col-sel {
	width: 34px;
}

.app .app-col-thumb {
	width: 44px;
}

.app .log-row-compact {
	grid-template-columns: 84px 1fr auto;
}

/* ---------------------------------------------------------------------------
 * Per-page component CSS the handoff never put in a stylesheet.
 * ------------------------------------------------------------------------- */

/* api-nycklar.html — permission scope grid */
.app .scope-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px dotted #2b3037;
	font-size: .86rem;
	color: #c8cdd6;
}

.app .scope-row:last-child {
	border-bottom: 0;
}

.app .scope-row .rw {
	display: flex;
	gap: 6px;
}

.app .scope-row.scope-head {
	border-bottom: 1px solid rgba( 255, 255, 255, .09 );
	color: #6f7883;
	font-family: var( --font-mono );
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* b2b.html — Line Order Sheet grid */
.app .osheet {
	width: 100%;
	border-collapse: collapse;
	font-size: .84rem;
}

.app .osheet th,
.app .osheet td {
	border-bottom: 1px dotted #2b3037;
	padding: 10px 12px;
	text-align: left;
	white-space: nowrap;
}

.app .osheet th {
	font-family: var( --font-mono );
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6f7883;
}

.app .osheet td {
	color: #c8cdd6;
}

.app .osheet .q {
	width: 52px;
	text-align: center;
	font-family: var( --font-mono );
	font-size: .78rem;
	color: #dfe4ea;
	border: 1px solid rgba( 255, 255, 255, .12 );
	background: #0b0c0e;
	display: inline-block;
	padding: 6px 0;
}

.app .osheet .q.f {
	border-color: rgba( 0, 208, 143, .55 );
	background: rgba( 0, 208, 143, .1 );
	color: #c9f5e4;
}

.app .osheet tfoot td {
	color: #fff;
	font-family: var( --font-mono );
	font-size: .8rem;
	border-bottom: 0;
}

/* cms.html — page-builder canvas and palette drawer */
.app .bl-canvas {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	background: #07080a;
}

.app .bl {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 12px;
	align-items: center;
	background: #0b0c0e;
	border: 1px solid rgba( 255, 255, 255, .09 );
	padding: 13px 14px;
}

.app .bl.on {
	border-color: rgba( 0, 208, 143, .55 );
	background: rgba( 0, 208, 143, .07 );
}

.app .bl .grip {
	display: grid;
	gap: 3px;
	justify-items: center;
}

.app .bl .grip b {
	width: 12px;
	height: 2px;
	background: #3a3f47;
	display: block;
}

.app .bl.on .grip b {
	background: var( --wp--preset--color--accent );
}

.app .bl .nm {
	font-size: .86rem;
	color: #dfe4ea;
}

.app .bl .nm small {
	display: block;
	font-family: var( --font-mono );
	font-size: .68rem;
	color: #6f7883;
	margin-top: 3px;
	letter-spacing: .04em;
}

.app .bl .rt {
	display: flex;
	gap: 6px;
	align-items: center;
}

.app .bl.ghost {
	border-style: dashed;
	border-color: rgba( 0, 208, 143, .5 );
	background: rgba( 0, 208, 143, .04 );
	color: #5fe9bd;
	font-family: var( --font-mono );
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	justify-content: center;
	grid-template-columns: 1fr;
	text-align: center;
	padding: 16px;
}

.app .pal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.app .pal span {
	border: 1px solid rgba( 255, 255, 255, .1 );
	background: #0b0c0e;
	padding: 9px 10px;
	font-size: .76rem;
	color: #aeb6c0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.app .pal span i {
	width: 8px;
	height: 8px;
	background: var( --wp--preset--color--accent );
	flex: 0 0 auto;
}

/* solaris.html — file tree */
.app .tree {
	font-family: var( --font-mono );
	font-size: .78rem;
	line-height: 2;
	color: #8a929c;
	padding: 18px 20px;
}

.app .tree div {
	display: flex;
	gap: 10px;
	white-space: nowrap;
}

.app .tree i {
	color: #3a3f47;
	font-style: normal;
}

.app .tree b {
	color: #dfe4ea;
	font-weight: 400;
}

.app .tree em {
	color: var( --wp--preset--color--accent );
	font-style: normal;
}

.app .tree .note {
	margin-left: auto;
	color: #5c646e;
	font-family: var( --font-sans );
	font-size: .78rem;
	padding-left: 18px;
}

/* seo.html — robots.txt panel */
.app .rob {
	font-family: var( --font-mono );
	font-size: .78rem;
	line-height: 1.9;
	color: #c8cdd6;
	padding: 18px 20px;
	white-space: pre;
}

.app .rob b {
	color: #5fe9bd;
	font-weight: 400;
}

.app .rob i {
	color: #5c646e;
	font-style: normal;
}

/* verktyg.html — import column mapper, packing station, scan bar */
.app .map {
	display: grid;
	grid-template-columns: 1fr 26px 1fr;
	gap: 10px 12px;
	align-items: center;
	padding: 16px;
}

.app .map .h {
	font-family: var( --font-mono );
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6f7883;
}

.app .map .arw {
	color: var( --wp--preset--color--accent );
	text-align: center;
	font-family: var( --font-mono );
	font-size: .8rem;
}

.app .pack {
	display: grid;
	grid-template-columns: 1fr 300px;
}

.app .scan {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid rgba( 0, 208, 143, .4 );
	background: rgba( 0, 208, 143, .07 );
	padding: 13px 15px;
	font-family: var( --font-mono );
	font-size: .82rem;
	color: #dfe4ea;
	margin: 16px;
}

.app .scan i {
	width: 9px;
	height: 16px;
	background: var( --wp--preset--color--accent );
	animation: hdlAppCaret 1.1s steps( 2 ) infinite;
}

@keyframes hdlAppCaret {
	50% {
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.app .scan i {
		animation: none;
	}
}

/* replatforma-magento.html — migration run bars */
.app .runbars {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
}

.app .runbars > div {
	display: grid;
	grid-template-columns: 190px 1fr 160px;
	gap: 14px;
	align-items: center;
	background: #0a0a0a;
	border: 1px solid rgba( 255, 255, 255, .08 );
	padding: 12px 14px;
	font-size: .85rem;
	color: #c8cdd6;
}

.app .runbars .meter {
	width: 100%;
	display: block;
}

.app .runbars .num {
	font-family: var( --font-mono );
	font-size: .76rem;
	color: #8a929c;
	text-align: right;
	white-space: nowrap;
}

@media ( max-width: 1000px ) {
	.app .pack {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 680px ) {
	.app .runbars > div {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.app .runbars .num {
		text-align: left;
	}
}

@media ( max-width: 620px ) {
	.app .map {
		grid-template-columns: 1fr;
	}

	.app .map .arw {
		display: none;
	}
}