/*
 * ============================================================
 * TABLE OF CONTENTS
 * ============================================================
 *
 *  1. BASE
 *     1.1 Global / Root variables
 *     1.2 Legend colors
 *     1.3 Form elements
 *
 *  2. NAVIGATION
 *     2.1 Nav buttons
 *     2.2 Nav parent / collapse
 *     2.3 Nav toggle label
 *
 *  3. HEADER
 *
 *  4. WRAPPER
 *     4.1 App shell
 *     4.2 Page layout
 *
 *  5. LAYOUT SECTIONS
 *     5.1 Page scroll / inner
 *     5.2 Section collapsible
 *
 *  6. MAIN DATA
 *     6.1 Num input
 *     6.2 Data row
 *
 *  7. CONTROL PANEL
 *
 *  8. PREVIEW
 *     8.1 Sys block / head
 *     8.2 Panel row / seg
 *     8.3 Strip visualization
 *
 *  9. MOBILE  (@media max-width: 768px)
 *
 * ============================================================
 */

/*
 ************************************************************
 * BASE
 ************************************************************
 * ----------------------------------------------------------
 * GLOBAL
 * ----------------------------------------------------------
 *
 * ROOT */
 
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body, #root {
	height: 100%;
}

:root {
	--color-primary:		 #c4b48a;
	--color-darkblue:		 #09101a;
	--color-darkblue-light:	 #131923;
	--color-gray:			 #506070;
	--color-gray-light:		 #233342;
	--color-gray-opa80:		 #73808d;
	--color-blue:			 #3d7a9e;
	--color-white:			 #fff;
	

	--mono:        'JetBrains Mono', monospace;
	--sans:        'IBM Plex Sans', sans-serif;
	--row-h:       33px;
	  
	/* Font size scale */

	--fs-xs: 11px;
	--fs-sm: 10px;
	--fs-md: 13px;
	--fs-lg: 17px;

	/* Nav font sizes -- edit to tune sidebar independently */
	--nav-fs-header:  var(--fs-lg);
	--nav-fs-parent:  var(--fs-md);
	--nav-fs-sub:     var(--fs-xs);
	--nav-fs-icon:    var(--fs-lg);
	--nav-fs-chevron: var(--fs-sm);
	--nav-fs-tooltip: var(--fs-sm);

	/* Nav collapsed width */
	--nav-collapsed-w: 60px;
 }
	
@media (min-width: 2560px) and (min-height: 1440px) {
	:root {
		--fs-xs: 13px;
		--fs-sm: 12px;
		--fs-md: 15px;
		--fs-lg: 20px;
	}
}

body { 
	background: var(--color-darkblue);
	color: var(--color-gray);
	font-family: var(--sans);
}

/*
 * ----------------------------------------------------------
 * LEGEND
 * ----------------------------------------------------------
 */

.color-s0 { background: var(--color-primary); }
.color-s1 { background: var(--color-blue); }
.color-s2l { background: var(--color-gray); }
.color-s2d { background: var(--color-gray-opa80); }
.color-s3l { background: var(--color-gray-light); }
.color-s3d { background: var(--color-primary); }
.color-s4l { background: var(--color-blue); }
.color-s4s { background: var(--color-blue); }
.color-offcut { background: var(--color-gray-opa80); }
.color-cut { background: var(--color-gray); }
.color-edge { background: var(--color-primary); }
.color-sys1 { background: var(--color-blue); }

/*
 * ----------------------------------------------------------
 * FORM
 * ----------------------------------------------------------
 *
 * ELEMENT
 */

button { 
	cursor: pointer;
	font-family: var(--sans);
}

input[type=range] {
	cursor: pointer;
}

input[type=number] {
	-moz-appearance: textfield;
	appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button {
	display: none;
}

input[type=number]:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px var(--color-gray);
	outline: none;
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: var(--color-darkblue);
}

::-webkit-scrollbar-thumb {
	background: var(--color-blue);
	border-radius: 3px;
}

/* Firefox Scrollbar Support */
html, .nav, .data-control, .data-preview, .page-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--color-blue) var(--color-darkblue);
}

/*
 * ----------------------------------------------------------
 * NAVIGATION
 * ----------------------------------------------------------
 */

/* ── Nav visual system ───────────────────────────────────────────────────────
 *
 *  HEADER    .nav-toggle          HIVE label + collapse icon
 *  PARENT    .nav-btn.nav-parent  Layout, Area — toggle or navigate
 *  SUB       .nav-sub-btn         Pattern Layouts, Symmetric Layout
 *  LEAF      .nav-btn (neither)   Future standalone pages
 *
 *  States:
 *    :hover          parent → bg + white   sub → white only
 *    .active         primary color + bold
 *    .active parent  primary color + bold (no bg, no bar)
 *    .active sub     primary color + bold + short left bar
 *    .active leaf    primary color + bold + full glow bar + bg tint
 *    .child-active   parent dimmed with subtle primary tint
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Base button ── */
.nav-btn {
	font-family: var(--sans);
	font-size: var(--nav-fs-parent);
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--color-gray);
	text-align: left;
	width: 100%;
	position: relative;
	transition: background 0.15s ease, color 0.15s ease, gap 0.2s ease, padding 0.2s ease;
}

/* ── Parent button — slightly larger, more prominent ── */
.nav-btn.nav-parent {
	font-size: var(--nav-fs-parent);
	font-weight: 500;
	color: color-mix(in srgb, var(--color-gray) 90%, var(--color-white));
	cursor: pointer;
}

/* ── Hover states ── */
.nav-btn:not(.nav-sub-btn):hover {
	background: color-mix(in srgb, var(--color-gray-light) 40%, transparent);
	color: var(--color-white);
}

.nav-sub-btn:hover {
	color: var(--color-white);
}

/* ── Active — shared ── */
.nav-btn.active {
	font-weight: 600;
	color: var(--color-primary);
}

/* ── Active — leaf (no parent, no children) ── */
.nav-btn.active:not(.nav-sub-btn):not(.nav-parent) {
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.nav-btn.active:not(.nav-sub-btn):not(.nav-parent)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 3px;
	background: var(--color-primary);
	border-radius: 0 4px 4px 0;
	box-shadow: 0 0 8px var(--color-primary);
}

/* ── Active — parent directly active (Area with no child active) ── */
.nav-btn.nav-parent.active:not(.child-active) {
	color: var(--color-primary);
	font-weight: 600;
}

/* ── Active — sub-item ── */
.nav-sub-btn.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 25%;
	bottom: 25%;
	width: 2px;
	background: var(--color-primary);
	border-radius: 0 3px 3px 0;
	opacity: 0.8;
}

/* ── Parent with active child ── */
.nav-btn.nav-parent.child-active,
.nav-btn.nav-parent.child-active:hover {
	background: color-mix(in srgb, var(--color-primary) 4%, transparent);
	color: color-mix(in srgb, var(--color-gray) 80%, var(--color-primary));
	font-weight: 400;
}

.nav-btn-icon-only.nav-parent.child-active,
.nav-btn-icon-only.nav-parent.child-active:hover {
	background: transparent;
}

.nav-btn.nav-parent.child-active::before {
	display: none;
}

/* ── Focus ring ── */
.nav-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
	border-radius: 6px;
}

/* ── Icon ── */
.nav-btn-icon {
	font-size: var(--nav-fs-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
}

/* ── Label ── */
.nav-btn-label {
	font-family: var(--mono);
	font-size: var(--nav-fs-parent);
	opacity: 1;
	white-space: nowrap;
	overflow: hidden;
	max-width: 200px;
	transition: max-width 0.2s ease, opacity 0.1s ease 0.15s;
}

/* ── Sub-item indent + size ── */
.nav-sub-btn {
	padding-left: 28px;
	font-size: var(--nav-fs-sub);
	color: color-mix(in srgb, var(--color-gray) 80%, transparent);
	overflow: hidden;
	max-height: 60px;
	transition: max-height 0.2s ease, opacity 0.2s ease;
	opacity: 1;
}

/* ── Chevron ── */
.nav-parent-chevron {
	margin-left: auto;
	font-size: var(--nav-fs-chevron);
	opacity: 0.4;
	flex-shrink: 0;
	transition: opacity 0.1s ease 0.15s, transform 0.2s ease;
}

.nav-parent-chevron.closed {
	transform: rotate(-90deg);
}

/* ── Collapsed state ────────────────────────────────────────────────────────
 * Goal: every button shows a perfectly centered icon, same size, same position
 * Strategy: zero out ALL layout properties that could cause drift
 * ─────────────────────────────────────────────────────────────────────────── */

/* Base collapsed button — full reset to centered icon */
.nav-btn-icon-only {
	justify-content: center;
	align-items: center;
	padding: 0 !important;
	gap: 0 !important;
	width: 100%;
	height: 40px;
}

/* Sub-item in collapsed — same height as parent, no indent */
.nav-btn-icon-only.nav-sub-btn {
	padding-left: 0;
}

/* Collapsed: hide label, toggle-label, chevron */
/* Collapsed toggle -- strip container, center icon same as nav buttons */
.nav-collapsed .nav-toggle {
	padding: 0 !important;
	margin-bottom: 4px;
	border: none;
	background: transparent;
	height: 40px;
	justify-content: center;
}

.nav-collapsed .nav-btn-label,
.nav-collapsed .nav-toggle-label {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.2s ease, opacity 0.05s ease;
}

.nav-collapsed .nav-parent-chevron {
	display: none;
}

/* Collapsed sub-item — kill padding and transitions */
/* Collapsed sub-item -- same axis, slightly dimmed to hint hierarchy */
.nav-collapsed .nav-sub-btn {
	padding-left: 0;
	opacity: 0.7;
	transition: none;
}

.nav-collapsed .nav-sub-btn:hover,
.nav-collapsed .nav-sub-btn.active {
	opacity: 1;
}

/* Collapsed active — outline pill on icon, no dimension change */
.nav-collapsed .nav-btn.active .nav-btn-icon {
	outline: 1.5px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Hide ::before bars — no room in collapsed */
.nav-collapsed .nav-btn.active::before,
.nav-collapsed .nav-sub-btn.active::before {
	display: none;
}
/* ── Tooltip (collapsed only) ── */
.nav-btn-wrap {
	position: relative;
	width: 100%;
}

.nav-tooltip {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-darkblue);
	border: 1px solid var(--color-gray-light);
	color: var(--color-white);
	font-family: var(--mono);
	font-size: var(--nav-fs-tooltip);
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 100;
}

.nav-collapsed .nav-btn-wrap:hover .nav-tooltip {
	opacity: 1;
	pointer-events: auto;
}

/* ── Header (HIVE + toggle icon) ── */
.nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	padding: 6px 8px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--color-gray-light) 30%, transparent);
	background: color-mix(in srgb, var(--color-gray-light) 10%, transparent);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nav-toggle:hover {
	border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
	background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.nav-toggle-label {
	font-family: var(--mono);
	font-size: var(--nav-fs-header);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	opacity: 0.8;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	max-width: 200px;
	transition: max-width 0.2s ease, opacity 0.1s ease 0.15s, color 0.15s ease;
}

.nav-toggle-label:hover {
	opacity: 1;
}

.nav-menu-icon {
	font-size: var(--nav-fs-header);
	line-height: 1;
	cursor: pointer;
	color: var(--color-gray-opa80);
	padding: 2px 4px;
	border-radius: 4px;
	transition: color 0.15s ease, background 0.15s ease;
	flex-shrink: 0;
}

.nav-menu-icon:hover {
	color: var(--color-white);
	background: color-mix(in srgb, var(--color-gray-light) 40%, transparent);
}

/* ── Nav structure ── */
.nav.nav-collapsed {
	width: var(--nav-collapsed-w);
	padding: 14px 10px;
	border-right: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.nav {
	width: 260px;
	flex-shrink: 0;
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
	overflow-x: visible;
	scrollbar-width: none;
	transition: width 0.2s ease;
}

.nav::-webkit-scrollbar {
	display: none;
}

.nav-items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.nav-bottom {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--color-gray-light) 40%, transparent);
}

.nav-bottom:empty {
	display: none;
}
.nav svg {
	width: 18px;
	height: 18px;
	stroke-width: 2px;
	stroke: currentColor;
}
.nav-section {
	font-family: var(--mono);
	font-size: var(--fs-lg);
	color: var(--color-blue);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/*
 * ----------------------------------------------------------
 * HEADER
 * ----------------------------------------------------------
 *
 * ELEMENT
 */

.header-logo {
	display: block;
	height: 32px;
}

/*
 * ----------------------------------------------------------
 * WRAPPER
 * ----------------------------------------------------------
 *
 * APP
 */

.app,
.app-head,
.app-page {
	display: flex;
}

.app {
	flex-direction: column;
	height: 100vh;
}

.app-head {
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 8px 24px;
	border-bottom: 1px solid var(--color-gray-light);
}

.app-page {
	flex: 1;
	overflow: hidden;
}

/*
 * PAGE
 */

.page-side,
.page-main {
	display: flex;
	flex-direction: column;
}

.page-main {
	flex: 1;
	overflow: hidden;
	background: var(--color-darkblue-light);
}

.page-side {
	flex-shrink: 0;
	border-right: 1px solid var(--color-darkblue);
	overflow: visible;
}

/* HEAD */

.main-head {
	padding: 16px 22px 0;
	flex-shrink: 0;
}

.main-head .title {
	font-family: var(--sans);
	font-size: var(--fs-lg);
	font-weight: 800;
	margin-bottom: 6px;
	color: var(--color-primary);
}

.main-head .desc {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-gray-opa80);
	margin-bottom: 22px;
}

/* DATA */

.main-data {
	flex: 1;
	overflow: hidden;
	display: flex;
	height: 100%;
}

.page-main-full {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * ----------------------------------------------------------
 * LAYOUT
 * ----------------------------------------------------------
 */

.page-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 26px 30px;
}

.page-inner
{
	max-width: 660px;
	margin: 0 auto;
}

.page-sub {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-gray-opa80);
	margin-bottom: 22px;
}

.section {
	margin-bottom: 20px;
}

.section-head {
	border-radius: 6px 6px 0 0;
	padding: 7px 14px;
	font-family: var(--mono);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gray-opa80);
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.section-head svg {
	width: 14px;
	height: 14px;
}

.section-body {
	background: var(--color-darkblue);
	border: 1px solid var(--color-darkblue);
	border-top: none;
	border-radius: 0 0 6px 6px;
}

.section-pad {
	padding: 14px;
}

/*
 * ----------------------------------------------------------
 * MAIN-DATA
 * ----------------------------------------------------------
 *
 * NUM
 */ 

.num-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.num-lbl {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-primary);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.num-row {
	display: flex;
	gap: 4px;
	align-items: stretch;
}

.num-input {
	background: var(--color-darkblue-light);
	border: 1px solid var(--color-gray);
	border-radius: 6px;
	color: var(--color-primary);
	font-family: var(--mono);
	font-size: var(--fs-md);
	padding: 6px 8px;
	flex: 1;
	min-width: 0;
	width: 0;
}

.num-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 6px;
	border: 1px solid var(--color-gray);
	background: var(--color-darkblue-light);
	color: var(--color-primary);
	font-family: var(--mono);
	font-size: var(--fs-md);
}

.num-btn svg {
	width: 14px;
}

/*
 * ROW
 */

.data-row {
	display: flex;
	align-items: center;
	padding: 8px 14px;
	border-bottom: 1px solid var(--color-gray);
	font-family: var(--mono);
	font-size: var(--fs-md);
}

.data-row-lbl {
	flex: 1;
	color: var(--color-primary);
}

.data-row-lbl.hoverable {
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.data-row-lbl.hoverable:hover,
.data-row-lbl.hoverable.hovered {
	opacity: 1;
}

.data-row-val
{
	font-weight: 600;
	color: var(--color-primary);
}

.data-row-val.hi {
	font-weight: 700;
	color: var(--color-primary);
}

.data-row-unit {
	color: var(--color-blue);
	margin-left: 8px;
	width: 30px;
}

/*
 * ----------------------------------------------------------
 * CONTROL
 * ----------------------------------------------------------
 */ 

.data-control {
	width: 384px;
	flex-shrink: 0;
	border-right: 1px solid var(--color-gray);
	padding: 18px 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
}

.data-control .control-panel,
.data-control .control-panel .panel-data {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.data-control .control-panel .panel-head {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-blue);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.data-control .slabel {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-blue);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-blue);
	padding-bottom: 7px;
	margin-top: 2px;
}

.data-control .ctrl-lbl {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.data-control .ctrl-sublbl {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-primary);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.data-control .ctrl-btns {
	display: flex;
	gap: 4px;
}

.data-control .ctrl-dir {
	flex: 1;
	padding: 6px 0;
	border-radius: 6px;
	border: 1px solid var(--color-gray);
	background: var(--color-darkblue-light);
	color: var(--color-primary);
	font-family: var(--mono);
	font-size: var(--fs-md);
}

.data-control .ctrl-dir.on {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
	color: var(--color-primary);
	font-weight: 600;
}

.data-control .ctrl-range-val {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-primary);
	text-align: center;
}
/*
 * ----------------------------------------------------------
 * PREVIEW
 * ----------------------------------------------------------
 */ 

.data-preview {
	flex: 1;
	padding: 20px 22px;
	overflow-y: auto;
}

.data-preview .preview-head {
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-gray-light);
}

.data-preview .preview-data {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.data-preview .layout-section-title {
	font-family: var(--sans);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-primary);
}

.data-preview .layout-section-desc {
	margin-top: 4px;
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-gray-opa80);
}
	
.data-preview .sys-block {
	margin-bottom: 26px;
}
	
.data-preview .sys-head {
	border-radius: 6px 6px 0 0;
	padding: 7px 14px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	background: var(--color-darkblue);
	font-family: var(--mono);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gray-opa80);
}

.data-preview .sys-head:hover .sys-head-toggle {
	opacity: 1;
}

.data-preview .sys-head-toggle {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-blue);
	opacity: 0.5;
	transition: opacity 0.15s;
	flex-shrink: 0;
}

.data-preview .sys-title {
	font-family: var(--sans);
	font-size: var(--fs-md);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.data-preview .sys-title-icon {
	margin-right: 6px;
	opacity: 0.7;
}


.data-preview .sys-head-sub {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-gray-opa80);
}
.data-preview .sys-head-count {
	margin-left: auto;
	font-family: var(--mono);
	font-size: var(--fs-md);
	font-weight: 600; color: var(--color-white);
}
	
.data-preview .sys-rows {
	background: var(--color-darkblue);
	border-radius: 0 0 6px 6px;
	padding: 8px 6px;
}

.data-preview .sys-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.data-preview .sys-row-lbl {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-blue);
	width: 22px;
	text-align: right;
	flex-shrink: 0;
}

.data-preview .sys-row-vis {
	flex: 1;
}

.data-preview .panel-row {
	position: relative;
	height: var(--row-h);
	border-bottom: 1px solid color-mix(in srgb, var(--color-darkblue) 30%, transparent);
}

.data-preview .panel-seg {
	position: absolute;
	height: 100%;
	border-radius: 1px;
	box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--color-darkblue) 40%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

.data-preview .panel-seg.seg-highlight {
	box-shadow: inset 0 0 0 1.5px var(--color-white);
}

.data-preview .panel-seg-lbl {
	font-family: var(--mono);
	font-size: var(--fs-md);
}

.data-preview .strip {
	display: flex;
	height: 38px;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid var(--color-gray);
}

.data-preview .strip-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 0.5px solid color-mix(in srgb, var(--color-darkblue) 15%, transparent);
	overflow: hidden;
	flex-shrink: 0;
}

.data-preview .strip-seg.seg-highlight {
	box-shadow: inset 0 0 0 1.5px var(--color-white);
}

.data-preview .strip-seg-lbl {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-white);
}
	
.data-preview .strip-legend {
	display: flex;
	gap: 16px;
	margin-top: 10px;
}

.data-preview .strip-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.data-preview .strip-legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

.data-preview .strip-legend-lbl {
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-primary);
}
	
.data-preview .strip-note {
	margin-top: 12px;
	background: var(--color-darkblue-light);
	border-radius: 6px;
	padding: 10px 12px;
	font-family: var(--mono);
	font-size: var(--fs-md);
	color: var(--color-gray-opa80);
	line-height: 1.7;
}




/*
 * ----------------------------------------------------------
 * HOME
 * ----------------------------------------------------------
 */

.home-scroll {
	flex: 1;
	overflow-y: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 30px;
}

.home-inner {
	width: 100%;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.home-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.home-brand-name {
	font-family: var(--sans);
	font-size: clamp(var(--fs-lg), 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-primary);
	line-height: 1;
}

.home-brand-sub {
	font-family: var(--mono);
	font-size: var(--fs-md);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-gray-opa80);
}

.home-divider {
	height: 1px;
	background: color-mix(in srgb, var(--color-gray-light) 60%, transparent);
}

.home-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.home-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 18px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--color-gray-light) 60%, transparent);
	background: var(--color-darkblue);
	color: var(--color-gray);
	cursor: pointer;
	text-align: left;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.home-card:hover {
	border-color: var(--color-blue);
	background: color-mix(in srgb, var(--color-blue) 6%, var(--color-darkblue));
	color: var(--color-white);
}

.home-card:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.home-card-active {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 6%, var(--color-darkblue));
}

.home-card-icon {
	font-size: 1.4em;
	color: var(--color-blue);
	transition: color 0.15s ease;
}

.home-card:hover .home-card-icon,
.home-card-active .home-card-icon {
	color: var(--color-primary);
}

.data-preview .phi-ratio-block {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.data-preview .phi-ratio-title {
	font-family: var(--sans);
	font-size: var(--fs-lg);
	color: var(--color-primary);
	margin-bottom: 6px;
}

.data-preview .phi-ratio-top {
	height: 32px;
	border: 1px solid var(--color-gray);
	display: flex;
	align-items: center;
	justify-content: center;
}

.data-preview .phi-ratio-top-val {
	font-family: var(--mono);
	font-size: var(--fs-lg);
	color: var(--color-white);
}

.data-preview .phi-ratio-bottom {
	display: flex;
	height: 32px;
	border: 1px solid var(--color-gray);
	border-top: none;
}

.data-preview .phi-ratio-seg {
	display: flex;
	align-items: center;
	justify-content: center;
}

.data-preview .phi-ratio-seg + .phi-ratio-seg {
	border-left: 1px solid var(--color-gray);
}

.data-preview .phi-ratio-seg-val {
	font-family: var(--mono);
	font-size: var(--fs-lg);
	color: var(--color-darkblue);
}

.home-card-title {
	font-family: var(--sans);
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.2;
}

.home-card-desc {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: var(--color-gray-opa80);
	line-height: 1.5;
	flex: 1;
}

.home-card-arrow {
	position: absolute;
	bottom: 16px;
	right: 16px;
	font-size: var(--fs-sm);
	color: var(--color-gray-light);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.home-card:hover .home-card-arrow {
	opacity: 1;
	transform: translateX(0);
}

.home-footer {
	font-family: var(--mono);
	font-size: var(--fs-sm);
	color: color-mix(in srgb, var(--color-gray-light) 60%, transparent);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.home-scroll {
		align-items: flex-start;
		padding: 24px 16px;
	}
	.home-cards {
		grid-template-columns: 1fr;
	}
}

/*
 * ----------------------------------------------------------
 * MOBILE
 * ----------------------------------------------------------
 */

@media (max-width: 768px) {

	:root {
		--row-h: 28px;
	}

	.app {
		height: 100dvh;
	}

	.app-page {
		flex-direction: column;
	}

	.page-side {
		border-right: none;
		border-bottom: 1px solid var(--color-gray-light);
	}

	/* Nav becomes a horizontal scrollable bar */
	.nav {
		width: 100% !important;
		flex-direction: row;
		align-items: center;
		gap: 4px;
		padding: 6px 10px;
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap;
	}

	.nav.nav-collapsed {
		width: 100% !important;
		padding: 6px 10px;
	}

	/* nav-items and nav-bottom become horizontal rows */
	.nav-items,
	.nav-bottom {
		flex-direction: row;
		flex: 0 0 auto;
		gap: 4px;
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		border-left: 1px solid color-mix(in srgb, var(--color-gray-light) 40%, transparent);
		padding-left: 8px;
	}

	.nav-bottom:empty {
		display: none;
	}

	/* Toggle goes to the left */
	.nav-section.nav-toggle {
		order: 0;
		margin-left: 0;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	/* Nav buttons: compact, touch-friendly */
	.nav-btn {
		padding: 8px 10px;
		white-space: nowrap;
		flex-shrink: 0;
		width: auto;
		min-height: 44px;
	}

	/* Sub-items indent slightly in horizontal layout */
	.nav-sub-btn {
		padding-left: 6px;
		max-height: none;
		opacity: 1;
	}

	/* Hide tooltip on mobile — no hover */
	.nav-tooltip {
		display: none;
	}

	/* Hide chevron in horizontal layout */
	.nav-parent-chevron {
		display: none;
	}

	.page-main {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.main-data {
		flex-direction: column;
		flex: 0 0 auto;
		height: auto;
		overflow: visible;
	}

	.data-control {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--color-gray-light);
		padding: 14px 12px;
		gap: 10px;
		overflow: visible;
	}

	.data-preview {
		overflow: visible;
		flex: 0 0 auto;
		padding: 14px 12px;
	}

	.data-preview .sys-block {
		margin-bottom: 18px;
	}

	.data-preview .sys-head {
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 8px 10px;
		gap: 4px 8px;
	}

	.data-preview .sys-title {
		min-width: 0;
	}

	.data-preview .sys-head-sub {
		flex-basis: 100%;
		padding-left: 20px;
		line-height: 1.4;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	.data-preview .sys-head-count {
		margin-left: auto;
		flex-shrink: 0;
	}

	.data-preview .sys-row-lbl,
	.data-preview .panel-seg-lbl,
	.data-preview .strip-seg-lbl,
	.data-preview .strip-legend-lbl,
	.data-preview .strip-note {
		font-size: var(--fs-sm);
	}

	.data-preview .strip-legend {
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.page-scroll {
		padding: 16px;
	}

	.page-inner {
		max-width: 100%;
	}
}