/* ============================================================
   Star Trek Galaxy RPG — authentic TNG LCARS interface
   ------------------------------------------------------------
   The gold border-frame (left rail + top/bottom bars joined by
   true concentric ELBOWS) is drawn as a single SVG path by
   lcars-frame.js, giving mathematically exact corners that scale
   cleanly. HTML content is layered over it with absolute
   positioning keyed to the same geometry variables below.
   Flat solid colours, condensed caps, right-aligned numerics.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&display=swap');

.stg-app {
	/* canonical LCARS palette */
	--lc-bg:      #000000;
	--lc-gold:    #f7a51c;
	--lc-tan:     #ffcc99;
	--lc-orange:  #ff8c42;
	--lc-salmon:  #ff6f5e;
	--lc-lilac:   #cc99cc;
	--lc-violet:  #9c6bb0;
	--lc-blue:    #5c8fff;
	--lc-ice:     #a9d0ff;
	--lc-ink:     #06070d;

	/* geometry — MUST match the values passed to LcarsFrame in JS */
	--rail-w: 158px;
	--bar-h:  58px;
	--foot-h: 46px;
	--pad:    6px;   /* outer black margin around the whole frame */

	position: relative;
	background: var(--lc-bg);
	padding: var(--pad);
	overflow: hidden;
	border-radius: 6px;
	font-family: 'Antonio', 'Arial Narrow', sans-serif;
	color: var(--lc-tan);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

/* the inner positioning context that the SVG frame fills */
.lcars-shell {
	position: absolute;
	inset: var(--pad);
}

/* SVG frame sits at z-index 1 (set inline by JS) */

/* ---------- TOP BAR content (segmented), overlaid on the gold band ---------- */
.lcars-top {
	position: absolute;
	top: 0;
	left: var(--rail-w);
	right: 0;
	height: var(--bar-h);
	display: flex;
	align-items: stretch;
	gap: 3px;                 /* thin black seams between segments */
	padding: 0;
	background: var(--lc-bg); /* seams read black, not gold-from-frame */
	color: var(--lc-bg);
	z-index: 3;
	min-width: 0;
}
.lcars-title {
	display: flex;
	align-items: center;
	padding: 0 20px;
	background: var(--lc-gold);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	flex: 0 0 auto;
}
.lcars-top-fill { flex: 1 1 auto; background: var(--lc-gold); min-width: 24px; }

/* generic LCARS bar segment (a flat colored cell with a right-aligned tag) */
.lcars-seg {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 16px;
	background: var(--lc-gold);
	color: var(--lc-bg);
	font-weight: 600;
	white-space: nowrap;
	flex: 0 0 auto;
}
.lcars-seg--num { font-size: 14px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.lcars-seg--tan    { background: var(--lc-tan); }
.lcars-seg--violet { background: var(--lc-violet); color: #fff; }
.lcars-seg--blue   { background: var(--lc-blue); color: var(--lc-bg); }
.lcars-seg--orange { background: var(--lc-orange); }
/* a "dim" segment reads as an unlit/inset readout, dark with light text */
.lcars-seg--dim { background: var(--lc-ink); color: var(--lc-tan); opacity: 0.92; }

.lcars-top-cap {
	width: 80px;
	background: var(--lc-violet);
	border-top-right-radius: calc(var(--bar-h) / 2);
	border-bottom-right-radius: calc(var(--bar-h) / 2);
	flex: 0 0 auto;
}

/* ---------- BOTTOM BAR content (segmented), overlaid ---------- */
.lcars-bottom {
	position: absolute;
	bottom: 0;
	left: var(--rail-w);
	right: 0;
	height: var(--foot-h);
	display: flex;
	align-items: stretch;
	gap: 3px;
	padding: 0;
	background: var(--lc-bg);
	color: var(--lc-bg);
	z-index: 3;
}
.lcars-bottom .lcars-seg { background: var(--lc-tan); }
.lcars-bottom .lcars-seg--dim { background: var(--lc-ink); color: var(--lc-tan); }
.lcars-bottom .lcars-seg--blue { background: var(--lc-blue); }
.lcars-bottom-fill { flex: 1 1 auto; background: var(--lc-tan); min-width: 24px; }
.lcars-bottom-cap {
	width: 70px;
	background: var(--lc-blue);
	border-top-right-radius: calc(var(--foot-h) / 2);
	border-bottom-right-radius: calc(var(--foot-h) / 2);
	flex: 0 0 auto;
}

/* ---------- LEFT RAIL content, overlaid on the gold rail column ----------
   The rail column is railW wide; below the top bar and above the bottom
   bar sit the interactive controls and readouts. They are inset slightly
   so the gold frame reads as their container. */
/* ---------- LEFT RAIL content (varied segments) ----------
   Stacked flat cells of differing heights and colors with 3px black
   seams — the rhythm that makes LCARS read as authentic rather than a
   uniform sidebar. The gold SVG frame shows only as the rounded rail
   edge; the cells sit on top. */
.lcars-rail {
	position: absolute;
	left: 0;
	top: var(--bar-h);
	bottom: var(--foot-h);
	width: var(--rail-w);
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 3px 0 3px 0;
	background: var(--lc-bg);   /* seams read black over the gold frame */
	z-index: 3;
	overflow: hidden;
}

/* small header cell: label left, code right */
.lcars-rail-head {
	flex: 0 0 auto;
	background: var(--lc-tan);
	color: var(--lc-bg);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.16em;
	padding: 6px 16px 6px 14px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.lcars-rail-head span { font-size: 13px; opacity: 0.8; }

.lcars-pill {
	display: block;
	width: 100%;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: right;
	color: var(--lc-bg);
	padding: 16px 16px;
	transition: filter 0.12s ease, padding-right 0.12s ease;
	flex: 0 0 auto;
}
.lcars-pill:hover { filter: brightness(1.16); padding-right: 22px; }
.lcars-pill:active { filter: brightness(0.9); }
.lcars-pill--gold { background: var(--lc-gold); }
.lcars-pill--blue { background: var(--lc-blue); }
.lcars-pill--orange { background: var(--lc-orange); }
.lcars-pill--salmon { background: var(--lc-salmon); }

/* decorative / status tag cell — short flat colored bar with a code */
.lcars-tagcell {
	flex: 0 0 auto;
	color: var(--lc-bg);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-align: right;
	padding: 7px 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lcars-tagcell--violet { background: var(--lc-violet); color: #fff; }
.lcars-tagcell--tan    { background: var(--lc-tan); }
.lcars-tagcell--orange { background: var(--lc-orange); }
.lcars-tagcell--blue   { background: var(--lc-blue); }

/* readout cell: dark inset with colored left edge, right-aligned values */
.lcars-rail-stat {
	background: var(--lc-ink);
	border-left: 7px solid var(--lc-gold);
	padding: 7px 14px 7px 13px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
}
.lcars-rail-stat:nth-of-type(odd)  { border-left-color: var(--lc-tan); }
.lcars-stat-key { font-size: 11px; letter-spacing: 0.24em; color: var(--lc-tan); opacity: 0.75; }
.lcars-stat-val { font-size: 17px; color: #fff; letter-spacing: 0.03em; line-height: 1.15; }
.lcars-stat-val b { color: var(--lc-gold); }

/* two readouts side-by-side */
.lcars-rail-duo { display: flex; gap: 3px; flex: 0 0 auto; }
.lcars-rail-duo .lcars-rail-stat--half { flex: 1 1 0; min-width: 0; }
.lcars-rail-duo .lcars-rail-stat--half:first-child { border-left-color: var(--lc-violet); }
.lcars-rail-duo .lcars-rail-stat--half:last-child  { border-left-color: var(--lc-blue); }

/* the long flexible filler block that pushes the registry to the bottom */
.lcars-rail-fill { flex: 1 1 auto; min-height: 20px; background: var(--lc-lilac); }
.lcars-rail-reg {
	flex: 0 0 auto;
	background: var(--lc-tan);
	color: var(--lc-bg);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.12em;
	text-align: right;
	padding: 9px 16px;
}

/* ---------- STAGE (canvas + floating panels) ----------
   Positioned to the right of the rail, between the two bars. */
.lcars-stage {
	position: absolute;
	left: var(--rail-w);
	top: var(--bar-h);
	right: 0;
	bottom: var(--foot-h);
	background: #02030a;
	overflow: hidden;
	z-index: 2;
	border-radius: 0;
}
#stg-canvas { width: 100%; height: 100%; display: block; cursor: grab; }

/* floating data panels */
.lcars-panel {
	position: absolute;
	top: 16px;
	width: 250px;
	background: rgba(2, 4, 12, 0.66);
	overflow: hidden;
	z-index: 4;
}
.lcars-panel--left  { left: 16px; }
.lcars-panel--right { right: 16px; width: 228px; }

.lcars-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.18em;
	color: var(--lc-bg);
	background: var(--lc-blue);
	padding: 6px 16px;
	text-transform: uppercase;
	border-top-right-radius: 14px;
}
.lcars-panel--right .lcars-panel-head { background: var(--lc-lilac); }
.lcars-panel-tab { width: 20px; height: 12px; border-radius: 6px; background: var(--lc-bg); opacity: 0.4; }

.lcars-panel-body {
	padding: 14px 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	max-height: 340px;
	overflow-y: auto;
	color: var(--lc-ice);
	border-left: 6px solid var(--lc-blue);
}
.lcars-panel--right .lcars-panel-body { color: var(--lc-tan); border-left-color: var(--lc-lilac); }

.stg-sensor-name { font-weight: 700; font-size: 23px; color: #fff; letter-spacing: 0.02em; line-height: 1.04; }
.stg-sensor-type { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lc-gold); margin: 3px 0 12px; }
.stg-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 5px 0; border-bottom: 1px solid rgba(247, 165, 28, 0.18); font-size: 13px;
}
.stg-row span:first-child { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; opacity: 0.68; }
.stg-row b { color: #fff; font-weight: 600; }
.lcars-panel-body p { margin: 11px 0 0; color: var(--lc-tan); font-size: 13.5px; }
.stg-dim { opacity: 0.55; }
.stg-meta { font-size: 12px; opacity: 0.7; margin-top: 8px; letter-spacing: 0.08em; }

.stg-danger { display: inline-flex; gap: 4px; }
.stg-dpip { width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 204, 153, 0.18); }
.stg-dpip.on { background: var(--lc-salmon); box-shadow: 0 0 6px var(--lc-salmon); }

.stg-tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 9px; margin: 8px 0; font-weight: 600; }
.stg-tag--good { background: var(--lc-blue); color: var(--lc-bg); }

.stg-btn--full {
	width: 100%; margin-top: 14px; border: none; cursor: pointer;
	font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
	text-transform: uppercase; text-align: right;
	padding: 11px 16px; color: var(--lc-bg);
	background: var(--lc-gold); border-radius: 0 0 0 12px;
	transition: filter 0.12s ease;
}
.stg-btn--full:hover { filter: brightness(1.14); }

.stg-log-line { font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid rgba(204, 153, 204, 0.16); line-height: 1.45; color: var(--lc-tan); }
.stg-stardate { color: var(--lc-gold); font-size: 12px; letter-spacing: 0.06em; font-weight: 600; }
.stg-warn { color: var(--lc-salmon); }

/* ---------- OVERLAY ---------- */
.lcars-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.82); z-index: 20; }
.lcars-overlay-card { text-align: center; }
.lcars-overlay-text { font-weight: 700; letter-spacing: 0.16em; font-size: 22px; color: var(--lc-gold); margin-top: 22px; text-transform: uppercase; }
.lcars-overlay-sub { font-size: 14px; color: var(--lc-tan); margin-top: 8px; letter-spacing: 0.1em; }
.lcars-loader { display: flex; gap: 6px; justify-content: center; }
.lcars-loader span {
	width: 30px; height: 14px; border-radius: 7px; background: var(--lc-gold);
	animation: lcars-blink 1.1s infinite ease-in-out;
}
.lcars-loader span:nth-child(1) { background: var(--lc-blue);   animation-delay: 0s; }
.lcars-loader span:nth-child(2) { background: var(--lc-gold);   animation-delay: 0.15s; }
.lcars-loader span:nth-child(3) { background: var(--lc-lilac);  animation-delay: 0.3s; }
.lcars-loader span:nth-child(4) { background: var(--lc-salmon); animation-delay: 0.45s; }
@keyframes lcars-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
	.stg-app { --rail-w: 116px; --bar-h: 48px; --foot-h: 40px; }
	.lcars-title { font-size: 18px; letter-spacing: 0.03em; }
	.lcars-sysid { display: none; }
}