/* =============================================================================
 * theme/theme.css — PRETTYBIRD shared design layer
 *
 * Extracted from the tracker's css/style.css (2026-07). This file is the
 * SHARED vocabulary both apps import first; each app's own stylesheet layers
 * on top and owns its layout/components (tracker: navbar, cards, search,
 * history; portal: shell, module pages).
 *
 * Contents, in order:
 *   1. font           Brandon Grotesque (drop the woff2/woff/ttf in ./font/)
 *   2. tokens         the full :root custom-property system
 *   3. base           reset, canvas, scrollbar, icon geometry, utilities
 *   4. form controls  inputs / select / date / checkbox / radio
 *   5. glass          .glass-panel, .glass-glow, .glass-avatar, .tint-panel
 *   6. components     login box, loading (fullscreen + pill), commit pill,
 *                     buttons/chips, background layer, stale-tab overlay
 *
 * Dependencies:
 *   - js/standardpage.js must be loaded on any page using the glow primitives —
 *     the radial gradients read --mouse-x/--mouse-y, which only a pointer
 *     feeder supplies. Without it the ::before glow never renders.
 *   - Relative color syntax (rgb(from ...)) and field-sizing match the
 *     tracker's existing browser floor; nothing new is required.
 *
 * Kept in lockstep with the tracker: when the tracker adopts this file,
 * delete the migrated blocks from its style.css so there is one source of
 * truth for the tokens.
 * ========================================================================== */


/* =========================================
   1. FONT
========================================= */
@font-face {
	font-family: 'Brandon Grotesque';
	src: url('../font/BrandonGrotesque-Medium.woff2') format('woff2'),
		url('../font/BrandonGrotesque-Medium.woff') format('woff'),
		url('../font/BrandonGrotesque-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}


/* =========================================
   2. TOKENS
========================================= */
:root {
	/* ---- app ---- */
	--app-min-width: 420px;      /* apps may override */
	--bg-app: #121212;

	/* ---- glow intensities (delegated pointer feeder — js/standardpage.js) ---- */
	--glow-base: 0.08;
	--glow-selected: 0.15;
	--glow-nav: 0.04;

	/* ---- white-alpha ladder (fills + lines) ---- */
	--w05: rgba(255, 255, 255, 0.05);
	--w08: rgba(255, 255, 255, 0.08);
	--w10: rgba(255, 255, 255, 0.1);
	--w15: rgba(255, 255, 255, 0.15);
	--w20: rgba(255, 255, 255, 0.2);
	--w25: rgba(255, 255, 255, 0.25);
	--w30: rgba(255, 255, 255, 0.3);
	--w40: rgba(255, 255, 255, 0.4);
	--w50: rgba(255, 255, 255, 0.5);
	--w60: rgba(255, 255, 255, 0.6);
	--w90: rgba(255, 255, 255, 0.9);

	/* ---- black-alpha ladder (wells + shadows) ---- */
	--k10: rgba(0, 0, 0, 0.1);
	--k20: rgba(0, 0, 0, 0.2);
	--k30: rgba(0, 0, 0, 0.3);
	--k40: rgba(0, 0, 0, 0.4);
	--k50: rgba(0, 0, 0, 0.5);
	--k60: rgba(0, 0, 0, 0.6);

	/* ---- etched text scale — engraved at rest, lit on interaction ---- */
	--text-hi: #fff;                              /* lit: hover, selected, active */
	--text-main: rgba(255, 255, 255, 0.82);       /* engraved primary */
	--text-soft: rgba(255, 255, 255, 0.66);       /* secondary: resting clickables, info, pills */
	--text-faint: rgba(255, 255, 255, 0.45);      /* tertiary: micro-titles, chrome glyphs */
	--text-off: rgba(255, 255, 255, 0.28);        /* disabled / taken options */
	--text-danger: #ffaaaa;
	--text-success: rgba(140, 220, 160, 0.95);
	--text-etch: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.09);
	--text-etch-lg: 0 -2px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1);
	--icon-etch: brightness(0.85) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.09));

	/* ---- rhythm ---- */
	--modal-gap: 12px;
	--divider-space: 8px;
	--divider-line: rgba(0, 0, 0, 0.4);

	/* ---- glass tiers: panel = ambient page furniture; pane = focal modal; popover = transient ---- */
	--panel-bg: rgba(20, 20, 20, 0.35);
	--panel-blur: blur(24px) saturate(180%);
	--panel-border: var(--w10);
	--panel-border-top: var(--w25);
	--panel-border-left: var(--w15);
	--panel-shadow: 0 16px 40px var(--k40), inset 0 1px 0 var(--w10);

	/* ---- panes: gradient rim + self-blur; light runs hot top-left, dies, faintly returns ---- */
	--pane-bg: rgba(10, 10, 10, 0.5);
	--pane-blur: blur(16px) saturate(180%);
	--pane-glow: 0.06;
	--pane-dim: blur(3px) brightness(0.75);
	--pane-rim: linear-gradient(165deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.12));
	--bar-sheen: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	--pane-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--w25), inset 0 -1px 0 var(--k30);

	--popover-bg: rgba(20, 20, 20, 0.55);
	--popover-blur: blur(30px) saturate(180%);
	--popover-border: var(--w10);
	--popover-border-top: var(--w25);
	--popover-border-left: var(--w15);
	--popover-shadow: 0 16px 40px var(--k50), inset 0 1px 0 var(--w10);
	--popover-glow: 0.05;
	--veil-bg: var(--k20);
	--veil-blur: blur(1px) saturate(0.85);

	--backdrop-bg: var(--k40);
	--backdrop-blur: blur(8px) saturate(140%);

	/* ---- input wells: pressed into the pane; focus deepens + rims with light ---- */
	--input-bg: var(--k30);
	--input-bg-focus: rgba(0, 0, 0, 0.35);
	--input-bg-disabled: var(--k40);
	--input-border: rgba(0, 0, 0, 0.45);
	--input-lip: var(--w15);
	--input-lip-focus: var(--w30);
	--input-shadow: inset 0 2px 6px var(--k50), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
	--input-shadow-focus: inset 0 2px 6px var(--k50), inset 0 0 0 1px var(--w10), inset 0 -6px 12px -6px rgba(255, 255, 255, 0.09);

	/* ---- footer button trios (consequence-coded) ---- */
	/* commit = persists to disk */
	--btn-commit-bg: rgba(40, 180, 80, 0.3);
	--btn-commit-border: rgba(140, 220, 160, 0.28);
	--btn-commit-border-top: rgba(180, 240, 200, 0.4);
	--btn-commit-bg-hover: rgba(40, 180, 80, 0.45);
	--btn-commit-bg-badge: rgba(40, 180, 80, 0.75);
	--fill-commit-faint: rgba(40, 180, 80, 0.12);
	/* destroy = irreversible */
	--btn-destroy-bg: rgba(220, 60, 60, 0.16);
	--btn-destroy-border: rgba(255, 150, 150, 0.25);
	--btn-destroy-text: var(--text-danger);
	--btn-destroy-bg-hover: rgba(220, 60, 60, 0.3);
	--btn-destroy-bg-badge: rgba(220, 60, 60, 0.75);
	/* neutral = neither */
	--btn-neutral-bg: var(--w10);
	--btn-neutral-border: var(--w15);
	--btn-neutral-bg-hover: var(--w20);

	/* raised content surfaces (user content sits ON the glass) */
	--raised-bg: var(--w05);
	--raised-border: var(--w10);
	--raised-border-top: var(--w20);
	--raised-shadow: 0 4px 12px var(--k20), inset 0 1px 0 var(--w08);
}


/* =========================================
   3. BASE — reset, canvas, utilities
   (kiosk feel is deliberate house style: no text selection, default cursor)
========================================= */
* {
	margin: 0;
	padding: 0;
	user-select: none;
	font-family: sans-serif;
	cursor: default !important;
}
img {
	user-drag: none;
	-webkit-user-drag: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

body {
	background-color: var(--bg-app);
	font-family: sans-serif;
	color: white;
	min-width: var(--app-min-width);
}

.hidden {
	display: none !important;
}
.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
}
.no-data {
	margin: 20px 40px;
	font-style: italic;
	text-align: center;
	color: var(--text-faint);
}
.blurred {
	filter: blur(2px);
}

/* mask-icon: currentColor glyphs from image art */
.mask-icon {
	display: inline-block;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* ============ ICON GEOMETRY CONVENTION ============
   default-icon: internal white-on-transparent art: square corners, natural aspect
   uploaded-icon (+glass-avatar): external 1:1 imagery: circle chrome */
.uploaded-icon {
	border-radius: 50%;
}
.default-icon {
	border-radius: 0;
}
img.default-icon {
	border-radius: 0;	/* kept at img specificity: outguns .glass-avatar on a class collision */
	background: transparent;
	border: none;
	width: auto;
}

/* SCROLLBAR STYLING */
::-webkit-scrollbar {
	width: 8px;
	outline: none;
}
::-webkit-scrollbar-thumb {
	background: #aaa;
}
::-webkit-scrollbar-thumb:hover {
	background: #ccc;
}
::-webkit-scrollbar-thumb:active {
	background: #ddd;
}
::-webkit-scrollbar-track {
	background: transparent;
}


/* =========================================
   4. FORM CONTROLS — shared furniture
========================================= */
input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}
select {
	background: black;
	color: white;
	height: 23px;
	margin-top: 1px;
}
input[type="date"] {
	height: 24px;
	width: 115px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	color: rgba(0, 0, 0, 0);
	opacity: 1;
	background-image: url("../img/calendar.png");
	background-repeat: no-repeat;
	background-position: 100% center;
	background-size: 10px;
}
input[type=checkbox] {
	margin: 2px 4px 0 0;
	height: 12px;
	width: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	border: 1px solid grey;
	border-radius: 6px;
	outline: none;
	background-color: black;
}
input[type=checkbox]:checked {
	background-color: white;
}
input[type=radio] {
	margin: 2px 2px 0 8px;
	height: 12px;
	width: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	border-radius: 6px;
	outline: none;
	background-color: black;
}
input[type=radio]:checked {
	background-color: white;
}
.hidden-radio {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}


/* =========================================
   5. GLASS PRIMITIVES
========================================= */
.glass-panel {
	position: relative;
	overflow: hidden;
	background: var(--panel-bg);
	backdrop-filter: var(--panel-blur);
	-webkit-backdrop-filter: var(--panel-blur);
	border: 1px solid var(--panel-border);
	border-top: 1px solid var(--panel-border-top);
	border-left: 1px solid var(--panel-border-left);
	box-shadow: var(--panel-shadow);
}
.glass-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		600px circle at var(--mouse-x) var(--mouse-y),
		rgba(255, 255, 255, var(--glow-nav)),
		transparent 80%
	);
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.7s ease;
}
.glass-panel:hover::before {
	opacity: 1;
}

/* focused flashlight for arbitrary small UI:
   consumers may set --glow-radius / --glow-intensity / --glow-rgb */
.glass-glow {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.glass-glow::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(
		var(--glow-radius, 300px) circle at var(--mouse-x) var(--mouse-y),
		rgba(var(--glow-rgb, 255, 255, 255), var(--glow-intensity, var(--glow-base))),
		transparent 80%
	);
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.glass-glow:hover::before {
	opacity: 1;
}

.glass-avatar {
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.4),
		inset 0 2px 4px rgba(255, 255, 255, 0.3),
		inset 0 -2px 6px rgba(0, 0, 0, 0.4);
	transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.clickable:hover > .glass-avatar,
.glass-avatar.clickable:hover {
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.5),
		inset 0 2px 4px rgba(255, 255, 255, 0.4),
		inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}

/* TINTED GLASS — status-colored panel recipe.
   Consumer sets --job-tint (any color format); alphas derive here.
   The blur is NOT optional: at 15%/20% tint the card is a colored film over
   sharp detail without it. Neutral tints masked the omission (a white wash
   reads as frost); the chromatic states exposed it. This makes every
   tint-panel a backdrop root — no descendant may carry its own
   backdrop-filter (physics law 1). */
.tint-panel {
	position: relative;
	border-radius: 12px;
	background-color: rgb(from var(--job-tint) r g b / 15%);
	background-image: linear-gradient(180deg, rgb(from var(--job-tint) r g b / 20%) 0%, transparent 100%);
	backdrop-filter: var(--panel-blur);
	-webkit-backdrop-filter: var(--panel-blur);
	border: 1px solid var(--w05);
	border-top: 1px solid var(--job-tint);
	border-left: 1px solid rgb(from var(--job-tint) calc(r * 0.85) calc(g * 0.85) calc(b * 0.85));
	box-shadow: 0 16px 40px var(--k40), inset 0 1px 0 var(--w10);
}

/* The Etched Glass Line Trick */
.glass-divider {
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid var(--divider-line);
	border-bottom: 1px solid var(--w08);
	margin-bottom: 12px;
}
/* divider inside the module hopper: tighter, symmetric spacing than the raw
   .glass-divider (whose 12px bottom margin suits the launcher, not a menu). */
#module-menu .glass-divider {
	margin: 4px 2px;
}


/* =========================================
   6. SHARED COMPONENTS
========================================= */

/* ---- buttons: consequence-coded trio surfaced as utilities ---- */
.glass-btn {
	height: 25px;
	padding: 0 14px;
	border-radius: 4px;
	background: var(--btn-neutral-bg);
	color: var(--text-hi);
	border: 1px solid var(--btn-neutral-border);
	font-size: 12px;
	letter-spacing: 0.5px;
	transition: background-color 0.15s ease;
}
.glass-btn:hover { background: var(--btn-neutral-bg-hover); }
.glass-btn.commit {
	background: var(--btn-commit-bg);
	border-color: var(--btn-commit-border);
	border-top-color: var(--btn-commit-border-top);
}
.glass-btn.commit:hover { background: var(--btn-commit-bg-hover); }
.glass-btn.destroy {
	background: var(--btn-destroy-bg);
	border-color: var(--btn-destroy-border);
	color: var(--btn-destroy-text);
}
.glass-btn.destroy:hover { background: var(--btn-destroy-bg-hover); }

/* ---- chips: generic frosted pill (caps, tags, statuses) ---- */
.glass-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 11px;
	letter-spacing: 0.5px;
	color: var(--text-soft);
	text-shadow: var(--text-etch);
	background: var(--w05);
	border: 1px solid var(--w10);
	border-top-color: var(--w20);
	text-decoration: none;
	transition: all 0.15s ease;
}
a.glass-chip:hover,
.glass-chip.clickable:hover {
	color: var(--text-hi);
	background: var(--w10);
	border-color: var(--w20);
	transform: translateY(-1px);
}

/* ---- commit pill: shared commit-action vocabulary ---- */
.commit-pill {
	width: fit-content;
	padding: 4px 16px;
	border-radius: 12px;
	background: var(--btn-commit-bg);
	border: 1px solid var(--btn-commit-border);
	border-top: 1px solid var(--btn-commit-border-top);
	color: var(--text-hi);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	box-shadow: inset 0 1px 0 var(--w10), 0 2px 6px var(--k20);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
.commit-pill.visible {
	opacity: 1;
	pointer-events: auto;
}
.commit-pill.visible:hover {
	background: var(--btn-commit-bg-hover);
}
.commit-pill.saved {
	background: var(--btn-commit-bg-badge);
	border-color: var(--btn-commit-border-top);
}

/* ---- background layer + credits ---- */
.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0;
	z-index: -2;
}
.background-credits {
	font-family: 'Brandon Grotesque';
	position: absolute;
	bottom: 15px;
	left: 15px;
	color: white;
	font-size: 14px;
	transition: all 250ms ease-in-out;
}

/* ---- login (identical chrome in both apps) ---- */
.login-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-wrapper {
	margin-top: -100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-box {
	width: 260px;
	background: var(--panel-bg);
	backdrop-filter: var(--panel-blur);
	-webkit-backdrop-filter: var(--panel-blur);
	border: 1px solid var(--panel-border);
	border-top: 1px solid var(--panel-border-top);
	border-left: 1px solid var(--panel-border-left);
	box-shadow: var(--panel-shadow);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 15px;
}
.login-box form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 200px;
	margin: 0;
}
.login-box img {
	align-self: flex-start;
	margin-left: 15px;
	width: 14px;
	height: 14px;
	padding: 10px 0;
	opacity: 0.9;
}
.login-box input[type=text],
.login-box input[type=password] {
	width: 200px;
	height: 22px;
	padding: 4px;
	background: var(--input-bg);
	color: var(--text-main);
	caret-color: var(--text-hi);
	border: 1px solid var(--input-border);
	border-bottom: 1px solid var(--input-lip);
	border-radius: 4px;
	margin: 3px 0;
	outline: none;
	box-shadow: var(--input-shadow);
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.login-box input[type=text]:focus,
.login-box input[type=password]:focus {
	background: var(--input-bg-focus);
	border-bottom-color: var(--input-lip-focus);
	box-shadow: var(--input-shadow-focus);
	color: var(--text-hi);
}
/* (deduped: the tracker's earlier raw-rgba submit block was dead code —
   this tokened version is the one that won the cascade there too) */
.login-box input[type=submit] {
	width: 75px;
	height: 25px;
	background: var(--btn-neutral-bg);
	color: var(--text-hi);
	border: 1px solid var(--btn-neutral-border);
	border-radius: 4px;
	margin: 10px 0 0 0;
}
.login-box input[type=submit]:hover { background: var(--btn-neutral-bg-hover); }
.login-box input[type=submit]:focus { background: var(--w30); }

.login-error {
	border: 1px solid var(--btn-destroy-border);
	color: var(--text-danger);
	width: fit-content;
	background: var(--btn-destroy-bg);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	border-radius: 10px;
	padding: 10px 15px;
	margin-top: 15px;
	opacity: 0;
	animation: fadeout 2s forwards;
}
@keyframes fadeout {
	0%, 75% { opacity: 1; }
	100% { opacity: 0; }
}

/* ---- loading: fullscreen frost ---- */
.loading-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(15, 15, 15, 0.45);
	backdrop-filter: blur(16px) saturate(120%);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	opacity: 1;
	transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.loading-fullscreen img {
	margin-top: -100px;
	width: 256px;
	filter: drop-shadow(0 8px 32px rgba(255, 255, 255, 0.1));
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}
.loading-fullscreen.is-fading {
	opacity: 0;
	pointer-events: none;
}
.loading-fullscreen.is-fading img {
	opacity: 0;
	transform: scale(0.8);
}

/* ---- loading: dynamic pill ---- */
.loading-bar-section {
	z-index: 90;
	position: fixed;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	height: 42px;
	text-align: center;
	background: rgba(20, 20, 20, 0.45);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	border-radius: 24px;
	transition: opacity 250ms ease-out, transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 0;
	pointer-events: none;
}
.loading-bar-section[style*="opacity: 1"] {
	transform: translate(-50%, 5px);
}
.loading-text {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	width: 100%;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 300;
	text-shadow: none;
}
.loading-bar-container {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 180px;
	height: 4px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.2s ease;
}
.loading-bar {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
	height: 100%;
	width: 0;
	border-radius: 4px;
	transition: width 200ms ease-out;
}

/* ---- stale-tab overlay: pairs with validate()-driven deauth ---- */
#stale-tab-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	animation: staleTabFade 0.3s ease;
}
@keyframes staleTabFade { from { opacity: 0; } to { opacity: 1; } }
.stale-tab-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 40px;
	border-radius: 16px;
	text-align: center;
	background: var(--raised-bg, rgba(28, 28, 34, 0.85));
	border: 1px solid var(--raised-border, rgba(255, 255, 255, 0.12));
	border-top: 1px solid var(--raised-border-top, rgba(255, 255, 255, 0.2));
	box-shadow: var(--raised-shadow, 0 20px 60px rgba(0, 0, 0, 0.5));
}
.stale-tab-title { font-size: 16px; font-weight: 600; color: var(--text-hi, #ffffff); }
.stale-tab-sub { font-size: 12px; color: var(--text-faint, rgba(255, 255, 255, 0.5)); }
.stale-tab-btn {
	margin-top: 8px;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-hi, #ffffff);
	background: var(--fill-commit-faint, rgba(80, 160, 120, 0.2));
	border: 1px solid var(--btn-commit-border, rgba(80, 200, 140, 0.5));
	transition: filter 0.12s ease;
}
.stale-tab-btn:hover { filter: brightness(1.2); }

/* =========================================
   7. NAVBAR (GLASS) — shared across systems
   Markup contract: <div class="navbar glass-panel"> containing
   .page-logo (mask-icon), .page-title, .button-holder
   (.loading-icon / .unlock-icon / .menu-button), plus the #navbar-menu
   popover singleton that grows from the kebab.
   (Chrome-button block appears ONCE here — it was duplicated wholesale in
   the tracker's style.css; delete both copies there on adoption.)
========================================= */
.navbar {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);

	width: calc(100% - 60px);
	max-width: 1400px;

	height: 20px;
	padding: 8px 20px;
	border-radius: 20px;

	color: white;
	z-index: 100;
}

/* logo + title flex together so a wider logo pushes the title right. The
   WRAPPER is absolute (like the old .page-logo/.page-title were), so the bar's
   own height and the right-anchored .button-holder are untouched — only the
   cluster's internals flow. Right edge is bounded so a long title ellipsizes
   before the button-holder rather than sliding under it. */
.navbar #page-lead {
	position: absolute;
	top: 0;
	left: 5px;
	right: 48px;              /* clear the button-holder (kebab + gap) */
	height: 100%;
	display: flex;
	align-items: center;
	min-width: 0;
}
.navbar .page-logo {
	display: flex;
	align-items: center;
	height: 100%;
	flex: none;              /* never shrink the logo; it dictates its own width */
}
/* bar logo: white-on-transparent art as a plain <img>. Fixed HEIGHT, AUTO
   width (intrinsic aspect ratio), etched via the shared filter, dimmed at rest
   and lit on hover via opacity — exactly the .launch-row treatment. */
.navbar .page-logo img {
	height: 18px;
	width: auto;
	display: block;
	margin: 0 10px;
	opacity: 0.75;
	filter: var(--icon-etch);
	transition: opacity 0.15s ease, filter 0.15s ease;
}
.navbar #page-lead:hover .page-logo img {
	opacity: 1;
	filter: drop-shadow(0 0 4px var(--w40)) brightness(1.2);
}
.navbar .page-title {
	flex: 1 1 auto;
	min-width: 0;            /* lets the ellipsis engage inside the flex row */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.15s ease, text-shadow 0.2s ease;
}
.navbar #page-lead:hover .page-title {
	color: var(--text-soft);
}

.navbar .button-holder {
	position: absolute;
	top: 3px;
	right: 5px;
	height: 30px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.navbar .button-holder div {
	position: relative;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	float: right;
	margin-left: 3px;
}

.navbar .loading-icon img {
	width: 100%;
	height: auto;
}
.navbar .loading-icon {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	opacity: 0.7;
	animation: softFadeIn 0.2s ease-out forwards;
}
@keyframes softFadeIn {
	0% { opacity: 0; transform: scale(0.8); }
	100% { opacity: 0.7; transform: scale(1); }
}

/* chrome buttons: currentColor glyphs, flat lift, no bloom */
.navbar .menu-button,
.navbar .unlock-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-soft);
	transition: color 0.15s ease;
}
.navbar .menu-button {
	font-size: 18px;
	line-height: 1;
}
.navbar .menu-button:hover,
.navbar .menu-button.open,
.navbar .unlock-icon:hover {
	color: var(--text-hi);
}
.navbar .button-holder .mask-icon {
	width: 18px;
	height: 18px;
	background: currentColor;
}
.navbar .unlock-icon .mask-icon {
	-webkit-mask-image: url(../img/page-lock.png);
	mask-image: url(../img/page-lock.png);
}
html.unlocked .navbar .unlock-icon .mask-icon {
	-webkit-mask-image: url(../img/page-unlock.png);
	mask-image: url(../img/page-unlock.png);
}

/* explicit order */
.navbar .menu-button { order: 3; }   /* far right */
.navbar .unlock-icon { order: 2; }   /* just inside menu button */
.navbar .loading-icon { order: 1; }  /* far left when visible */

/* navbar menus: server-rendered .popover singletons (navbar.js positions
   inline: kebab top/right, module hopper top/left). Deltas only — chrome
   is css/modals.css. No z-index override: .popover's 3000 must outrank
   the veil (2990); the old 120 delta put the menu UNDER the veil. */
#navbar-menu {
	transform-origin: top right;
	min-width: 190px;
}
#module-menu {
	min-width: 210px;
}

/* =========================================
   MODULE LAUNCHER — one central glass panel, tracker main-page DNA:
   etched rows (icon + label), etched divider between internal modules
   and external systems. Both lists render from modules_visible()
   (funcs.php) — the same walk as the navbar hopper.
========================================= */
.launch-panel {
	align-self: center;
	width: fit-content;
	min-width: 300px;
	border-radius: 24px;
	padding: 28px 44px;
	display: flex;
	flex-direction: column;
}
.launch-panel .glass-divider {
	margin: 20px 0;
}
.launch-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 50px;
	row-gap: 16px;
	width: max-content;
}
.launch-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	text-decoration: none;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	line-height: 24px;
	white-space: nowrap;
	color: var(--text-main);
	text-shadow: var(--text-etch);
	transition: all 0.2s ease-in-out;
}
.launch-row img {
	height: 20px;
	width: auto;
	opacity: 0.75;
	filter: var(--icon-etch);
	transition: all 0.2s ease-in-out;
}
.launch-row:hover {
	color: var(--text-hi);
	transform: translateX(2px);
}
.launch-row:hover img {
	opacity: 1;
	filter: drop-shadow(0 0 4px var(--w40)) brightness(1.2);
}