/* LockboxRack rack front end.
   Single light theme on purpose: this renders inside the site's own white header
   and footer, so it commits to that ground rather than following the viewer's OS
   preference. Every colour below is explicit.

   The rack is drawn as the hardware it is: a black powder-coated enclosure with
   recessed bays of five, matching the RackVault. */

.lbr2 {
	--lbr2-ink: #0F1512;
	--lbr2-ink-2: #47524C;
	--lbr2-ink-3: #77827C;
	--lbr2-paper: #FFFFFF;
	--lbr2-surface: #F5F8F5;
	--lbr2-surface-2: #EAEFEA;
	--lbr2-rule: #DFE5E0;
	--lbr2-rule-2: #C6CFC8;

	--lbr2-brand: #006633;
	--lbr2-brand-bright: #00944A;
	--lbr2-brand-dark: #004A24;
	--lbr2-brand-wash: #E9F3EC;

	/* enclosure: dark grey powder coat rather than near black */
	--lbr2-steel-hi: #59635D;
	--lbr2-steel: #414B46;
	--lbr2-steel-lo: #36403B;
	--lbr2-bay: #303935;
	--lbr2-bay-edge: #232B27;

	/* lock states, tuned against the grey enclosure */
	--lbr2-free: #C4CBC6;
	--lbr2-free-edge: #939B96;
	--lbr2-free-hi: #DBE0DC;
	/* a near-black lock on a grey panel measured 1.46:1, so the silhouette is
	   carried by a light outline rather than by the fill */
	--lbr2-rented: #141816;
	--lbr2-rented-edge: #8A928C;
	--lbr2-rented-num: #8F978F;
	--lbr2-held: #B98314;
	--lbr2-held-edge: #8A5F0C;
	--lbr2-danger: #9E2F2C;
	--lbr2-danger-wash: #F8ECEC;

	--lbr2-radius: 12px;
	--lbr2-cols: 5;
	--lbr2-shadow: 0 1px 2px rgba(15, 21, 18, .06), 0 12px 32px -18px rgba(15, 21, 18, .35);
	--lbr2-font: "Poppins", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	background: var(--lbr2-paper);
	color: var(--lbr2-ink);
	font-family: var(--lbr2-font);
	display: block;
	padding-bottom: 7rem;
}

.lbr2 *,
.lbr2 *::before,
.lbr2 *::after { box-sizing: border-box; }

.lbr2-shell {
	width: min(100% - 2rem, 760px);
	margin-inline: auto;
	padding-top: 2rem;
}

/* ---------------------------------------------------------------- header */

.lbr2-head { text-align: center; }

.lbr2-eyebrow {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--lbr2-brand);
}

.lbr2 .lbr2-title {
	margin: .35rem 0 0;
	font-size: clamp(1.6rem, 6vw, 2.35rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--lbr2-ink);
	text-wrap: balance;
}

.lbr2 .lbr2-lede {
	margin: .8rem auto 0;
	max-width: 46ch;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lbr2-ink-2);
}
.lbr2 .lbr2-cta { margin: 1.35rem 0 0; }

.lbr2 .lbr2-address {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .5rem;
	font-size: .9rem;
	color: var(--lbr2-ink-2);
	text-decoration: none;
	border-bottom: 1px solid var(--lbr2-rule-2);
	padding-bottom: 1px;
}
.lbr2 .lbr2-address:hover { color: var(--lbr2-brand); border-bottom-color: var(--lbr2-brand); }

.lbr2-stats {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 1.5rem auto 0;
	max-width: 460px;
	padding: .8rem 1rem;
	border: 1px solid var(--lbr2-rule);
	border-radius: var(--lbr2-radius);
	background: var(--lbr2-surface);
}

.lbr2-stat { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.lbr2-stat--price { text-align: right; margin-left: auto; }
.lbr2-stat-n { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lbr2-stat-l { font-size: .72rem; color: var(--lbr2-ink-3); }

.lbr2-meter {
	flex: 1;
	height: 6px;
	min-width: 40px;
	border-radius: 99px;
	background: var(--lbr2-surface-2);
	overflow: hidden;
	border: 1px solid var(--lbr2-rule);
}
.lbr2-meter span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--lbr2-brand);
	transform-origin: left center;
	/* scaleX rather than width: animating width relayouts the row on every frame */
	transition: transform .3s ease;
}

/* --------------------------------------------------------------- manager */

.lbr2 button.lbr2-managerbar {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	margin-top: 1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--lbr2-brand);
	border-radius: var(--lbr2-radius);
	background: var(--lbr2-brand-wash);
	color: var(--lbr2-brand-dark);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	text-align: left;
}
.lbr2 button.lbr2-managerbar:hover { background: #DDECE2; }
.lbr2 button.lbr2-managerbar svg { margin-left: auto; }
.lbr2-managerbar-tag {
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--lbr2-brand);
	color: #fff;
	padding: .2rem .45rem;
	border-radius: 4px;
}

/* ------------------------------------------------------------- enclosure */

.lbr2-gridwrap { margin-top: 1.5rem; }

.lbr2-enclosure {
	max-width: 560px;
	margin-inline: auto;
	padding: .85rem .85rem .7rem;
	border-radius: 16px;
	border: 1px solid #070908;
	background: linear-gradient(180deg, var(--lbr2-steel-hi) 0%, var(--lbr2-steel) 9%, var(--lbr2-steel-lo) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -1px 0 rgba(0, 0, 0, .6),
		0 20px 44px -24px rgba(15, 21, 18, .6),
		0 2px 6px -2px rgba(15, 21, 18, .25);
}

.lbr2-bays { display: flex; flex-direction: column; gap: .7rem; }

.lbr2-bay {
	display: grid;
	grid-template-columns: repeat(var(--lbr2-cols), minmax(0, 1fr));
	gap: .35rem;
	padding: .5rem .45rem .4rem;
	border-radius: 9px;
	border: 1px solid var(--lbr2-bay-edge);
	background: var(--lbr2-bay);
	box-shadow:
		inset 0 3px 9px rgba(0, 0, 0, .5),
		inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.lbr2-plate {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
	margin-top: .7rem;
	padding-top: .55rem;
	border-top: 1px solid rgba(255, 255, 255, .11);
}
.lbr2-plate-brand {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #B6BEB8;
}
.lbr2-plate-id {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--lbr2-brand-bright);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ lock */

.lbr2 button.lbr2-slot,
.lbr2 span.lbr2-slot {
	/* The Elementor kit styles bare buttons, so every rule that competes with it
	   is written at .lbr2 + element specificity rather than relying on a reset. */
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	background: none;
	background-image: none;
	color: inherit;
	padding: .2rem .1rem .15rem;
	margin: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s ease, transform .2s ease;
}
.lbr2 span.lbr2-slot { cursor: default; }

.lbr2 .lbr2-lock { position: relative; display: block; width: 100%; }
.lbr2 .lbr2-lock svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ONE shape: one fill, one stroke, one transition, so a state change is atomic.
   Drawing a stroked shackle over a filled body gave the two halves different
   colours and different timings, which read as a broken object. */
.lbr2 .lbr2-shape {
	fill: var(--lbr2-free);
	stroke: var(--lbr2-free-edge);
	stroke-width: 1.5;
	transition: fill .2s ease, stroke .2s ease;
}
.lbr2 .lbr2-num {
	fill: #1B201D;
	font-family: var(--lbr2-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: fill .2s ease;
}

.lbr2 .lbr2-slot-state {
	display: block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	font-size: .55rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-weight: 600;
	color: #A2AAA5;
	line-height: 1.2;
	min-height: 1.2em;
	text-align: center;
	transition: color .2s ease;
}

/* states */
/* :not([aria-pressed="true"]) matters: the hover rule outranks the selected rule
   on specificity, so a chosen lock sitting under the cursor kept the hover grey
   body while its outline and number had already gone green. */
.lbr2 button.lbr2-slot[data-state="available"]:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.lbr2 button.lbr2-slot[data-state="available"]:not([aria-pressed="true"]):hover .lbr2-shape { fill: var(--lbr2-free-hi); }

.lbr2 button.lbr2-slot[data-state="taken"] { cursor: default; }
.lbr2 button.lbr2-slot[data-state="taken"] .lbr2-shape { fill: var(--lbr2-rented); stroke: var(--lbr2-rented-edge); }
.lbr2 button.lbr2-slot[data-state="taken"] .lbr2-num { fill: var(--lbr2-rented-num); }

.lbr2 button.lbr2-slot[data-state="held"] { cursor: default; }
.lbr2 button.lbr2-slot[data-state="held"] .lbr2-shape { fill: var(--lbr2-held); stroke: var(--lbr2-held-edge); }
.lbr2 button.lbr2-slot[data-state="held"] .lbr2-num { fill: #2E2003; }
.lbr2 button.lbr2-slot[data-state="held"] .lbr2-slot-state { color: #D8A93F; }

.lbr2 button.lbr2-slot[data-state="service"] { cursor: default; }
.lbr2 button.lbr2-slot[data-state="service"] .lbr2-shape { fill: url(#lbr2-hatch); stroke: #8A928C; }
.lbr2 button.lbr2-slot[data-state="service"] .lbr2-num { fill: #C6CDC8; }

.lbr2 button.lbr2-slot[data-state="yours"] .lbr2-shape { fill: #0E4F2E; stroke: var(--lbr2-brand-bright); stroke-width: 2; }
.lbr2 button.lbr2-slot[data-state="yours"] .lbr2-num { fill: #A8E9C4; }
.lbr2 button.lbr2-slot[data-state="yours"] .lbr2-slot-state { color: #5ED18F; font-weight: 700; }

.lbr2 button.lbr2-slot[aria-pressed="true"] { background: rgba(0, 148, 74, .16); }
.lbr2 button.lbr2-slot[aria-pressed="true"] .lbr2-shape { fill: var(--lbr2-brand-bright); stroke: #7FE0AC; stroke-width: 2; }
.lbr2 button.lbr2-slot[aria-pressed="true"] .lbr2-num { fill: #FFFFFF; }
.lbr2 button.lbr2-slot[aria-pressed="true"] .lbr2-slot-state { color: #7FE0AC; font-weight: 700; }

.lbr2 button.lbr2-slot:focus-visible {
	outline: 3px solid var(--lbr2-brand-bright);
	outline-offset: 1px;
}

.lbr2 .lbr2-slot.is-changed .lbr2-lock { animation: lbr2-pop .45s ease; }
@keyframes lbr2-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* ---------------------------------------------------------------- legend */

.lbr2 .lbr2-legend {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem .95rem;
	font-size: .74rem;
	color: var(--lbr2-ink-2);
}
.lbr2 .lbr2-legend li { display: inline-flex; align-items: center; gap: .35rem; }
/* Written at the same specificity as the rule above, which otherwise wins and
   shows "Yours" to visitors who rent nothing. */
.lbr2 .lbr2-legend li.lbr2-legend-yours { display: none; }
.lbr2.is-tenant .lbr2-legend li.lbr2-legend-yours { display: inline-flex; }

.lbr2-swatch {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	border: 1px solid var(--lbr2-free-edge);
	background: var(--lbr2-free);
}
.lbr2-legend li[data-state="taken"] .lbr2-swatch { background: var(--lbr2-rented); border-color: var(--lbr2-rented-edge); }
.lbr2-legend li[data-state="held"] .lbr2-swatch { background: var(--lbr2-held); border-color: var(--lbr2-held-edge); }
.lbr2-legend li[data-state="service"] .lbr2-swatch {
	background: repeating-linear-gradient(45deg, #414B46 0 3px, #6B736D 3px 6px);
	border-color: #6B736D;
}
.lbr2-legend li[data-state="yours"] .lbr2-swatch { background: #0E4F2E; border-color: var(--lbr2-brand-bright); }

.lbr2 .lbr2-refresh {
	text-align: center;
	font-size: .74rem;
	color: var(--lbr2-ink-3);
	margin: .7rem 0 0;
}

/* ----------------------------------------------------------------- steps */

.lbr2-steps { margin-top: 3rem; }
.lbr2 .lbr2-h2 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.015em;
	text-align: center;
	margin: 0 0 1.1rem;
	color: var(--lbr2-ink);
}
.lbr2-steplist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.lbr2-steplist li {
	background: var(--lbr2-surface);
	border: 1px solid var(--lbr2-rule);
	border-radius: var(--lbr2-radius);
	padding: 1rem;
}
.lbr2-stepno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 99px;
	background: var(--lbr2-brand);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
}
.lbr2 .lbr2-steplist h3 { margin: .55rem 0 .2rem; font-size: .92rem; font-weight: 700; }
.lbr2 .lbr2-steplist p { margin: 0; font-size: .84rem; color: var(--lbr2-ink-2); line-height: 1.5; }

.lbr2-reportline {
	text-align: center;
	font-size: .82rem;
	color: var(--lbr2-ink-3);
	margin: 2rem 0 0;
}
.lbr2 button.lbr2-link {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--lbr2-brand);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------ action bar */

.lbr2-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--lbr2-paper) 92%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--lbr2-rule);
	padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
	animation: lbr2-rise .22s ease;
}
@keyframes lbr2-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.lbr2-actionbar[hidden] { display: none; }

.lbr2-actionbar-in {
	width: min(100%, 760px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: .6rem;
}
.lbr2-sel { flex: 1; min-width: 0; line-height: 1.25; }
.lbr2-sel strong { display: block; font-size: .92rem; letter-spacing: -.01em; }
.lbr2-sel span { font-size: .76rem; color: var(--lbr2-ink-3); }

/* --------------------------------------------------------------- buttons */

.lbr2 .lbr2-btn,
.lbr2 a.lbr2-btn,
.lbr2 button.lbr2-btn {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-weight: 600;
	font-size: .88rem;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	border-radius: 9px;
	padding: .7rem 1.05rem;
	border: 1px solid transparent;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	transition: background-color .15s ease, opacity .15s ease;
}
.lbr2 .lbr2-btn--primary { background: var(--lbr2-brand); border-color: var(--lbr2-brand-dark); color: #fff; }
.lbr2 .lbr2-btn--primary:hover { background: var(--lbr2-brand-bright); }
.lbr2 .lbr2-btn--danger { background: var(--lbr2-danger); border-color: #7E2523; color: #fff; }
.lbr2 .lbr2-btn--danger:hover { background: #B03A37; }
.lbr2 .lbr2-btn--ghost { background: transparent; border-color: var(--lbr2-rule-2); color: var(--lbr2-ink-2); }
.lbr2 .lbr2-btn--ghost:hover { background: var(--lbr2-surface); }
.lbr2 .lbr2-btn:focus-visible { outline: 3px solid var(--lbr2-brand-bright); outline-offset: 2px; }
.lbr2 .lbr2-btn[disabled] { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------------- sheets */

/* the sheet is centred, not docked to the bottom edge, so on a phone it keeps a
   margin on both sides: edge to edge read as a takeover of the whole screen
   rather than a card sitting above the rack */
.lbr2-sheet {
	border: 0;
	padding: 0;
	background: transparent;
	width: calc(100% - 2.25rem);
	max-width: calc(100vw - 2.25rem);
	max-height: 100dvh;
	color: var(--lbr2-ink);
	font-family: var(--lbr2-font);
}
.lbr2-sheet::backdrop { background: rgba(15, 21, 18, .55); }

.lbr2-sheet-in {
	background: var(--lbr2-paper);
	border: 1px solid var(--lbr2-rule);
	border-radius: 18px;
	box-shadow: var(--lbr2-shadow);
	display: flex;
	flex-direction: column;
	max-height: 92dvh;
	overflow: hidden;
}

.lbr2-sheet-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.15rem .8rem;
	border-bottom: 1px solid var(--lbr2-rule);
}
.lbr2 .lbr2-sheet-head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--lbr2-ink);
	flex: 1;
}

/* the glyph is an SVG in a flex box: a text character inherited the theme's
   line-height and font metrics and sat visibly off centre */
.lbr2 button.lbr2-x {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	margin: 0;
	line-height: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	background: var(--lbr2-surface);
	border: 1px solid var(--lbr2-rule);
	border-radius: 9px;
	color: var(--lbr2-ink-2);
	cursor: pointer;
}
.lbr2 button.lbr2-x:hover { background: var(--lbr2-surface-2); color: var(--lbr2-ink); }
.lbr2 button.lbr2-x svg { display: block; }

.lbr2-sheet-body { padding: 1.15rem 1.25rem; overflow-y: auto; text-align: center; }
.lbr2-sheet-body--left { text-align: left; }

.lbr2-sheet-foot {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: .95rem 1.25rem;
	border-top: 1px solid var(--lbr2-rule);
	background: var(--lbr2-surface);
}
.lbr2-sheet-foot:empty { display: none; }
.lbr2-sheet-foot .lbr2-btn { width: 100%; }

.lbr2 .lbr2-sheet-lede { margin: 0 0 1.1rem; font-size: .88rem; color: var(--lbr2-ink-2); line-height: 1.55; }

.lbr2-terms { margin: 0; display: grid; gap: 0; text-align: left; }
.lbr2-terms > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px dashed var(--lbr2-rule);
	font-size: .88rem;
}
.lbr2-terms > div:last-child { border-bottom: 0; }
.lbr2 .lbr2-terms dt { color: var(--lbr2-ink-3); margin: 0; }
.lbr2 .lbr2-terms dd { margin: 0; font-weight: 700; text-align: right; }

.lbr2 .lbr2-fine { margin: 1rem 0 0; font-size: .78rem; color: var(--lbr2-ink-3); line-height: 1.55; }
.lbr2 .lbr2-hold {
	margin: .8rem 0 0;
	font-size: .78rem;
	color: #7A5407;
	background: #FBF3E2;
	border: 1px solid #EBD9AE;
	border-radius: 9px;
	padding: .55rem .7rem;
	line-height: 1.5;
}
.lbr2 .lbr2-hold:empty { display: none; }

.lbr2 .lbr2-error {
	margin: .85rem 0 0;
	font-size: .84rem;
	color: var(--lbr2-danger);
	background: var(--lbr2-danger-wash);
	border: 1px solid #EBC9C8;
	border-radius: 9px;
	padding: .6rem .75rem;
	line-height: 1.5;
}
.lbr2 .lbr2-ok {
	margin: .85rem 0 0;
	font-size: .84rem;
	color: var(--lbr2-brand-dark);
	background: var(--lbr2-brand-wash);
	border: 1px solid #BFDDCB;
	border-radius: 9px;
	padding: .6rem .75rem;
	line-height: 1.5;
}

.lbr2 .lbr2-muted { color: var(--lbr2-ink-3); font-size: .86rem; }

/* ----------------------------------------------------------------- forms */

/* labels stay left of their input: a centred label over a full-width field
   reads as a mistake, so only prose follows the sheet's centre alignment */
.lbr2-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; text-align: left; }
.lbr2 .lbr2-field label { font-size: .78rem; font-weight: 600; color: var(--lbr2-ink-2); }
.lbr2-opt { font-weight: 400; color: var(--lbr2-ink-3); }

.lbr2 .lbr2-field input,
.lbr2 .lbr2-field select,
.lbr2 .lbr2-field textarea {
	font: inherit;
	font-size: .92rem;
	color: var(--lbr2-ink);
	background: var(--lbr2-paper);
	border: 1px solid var(--lbr2-rule-2);
	border-radius: 9px;
	padding: .6rem .7rem;
	min-height: 46px;
	width: 100%;
}
.lbr2 .lbr2-field textarea { min-height: 76px; resize: vertical; }
.lbr2 .lbr2-field input:focus,
.lbr2 .lbr2-field select:focus,
.lbr2 .lbr2-field textarea:focus {
	outline: 3px solid var(--lbr2-brand-bright);
	outline-offset: 1px;
	border-color: var(--lbr2-brand);
}
.lbr2 .lbr2-field input[aria-invalid="true"],
.lbr2 .lbr2-field select[aria-invalid="true"] { border-color: var(--lbr2-danger); }

.lbr2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------- detail sheet */

.lbr2 .lbr2-detail-line { font-size: .92rem; line-height: 1.6; color: var(--lbr2-ink-2); margin: 0; }
.lbr2 .lbr2-detail-line + .lbr2-detail-line { margin-top: .7rem; }
.lbr2-detail-strong { color: var(--lbr2-ink); font-weight: 600; }

/* -------------------------------------------------------- manager sheet */

.lbr2-mgr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: .55rem;
	margin-bottom: 1.1rem;
}
.lbr2-mgr-card {
	border: 1px solid var(--lbr2-rule);
	border-radius: 10px;
	background: var(--lbr2-surface);
	padding: .7rem .8rem;
}
.lbr2-mgr-card b { display: block; font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lbr2-mgr-card span { font-size: .7rem; color: var(--lbr2-ink-3); text-transform: uppercase; letter-spacing: .08em; }

/* On a phone each slot is a stacked block, and it becomes a real table only once
   there is room for one. Six columns in a 354px sheet pushed Contact off the
   right edge behind a horizontal scroll, and contact is the column the manager
   opens this list for. */
.lbr2-tablewrap { border: 1px solid var(--lbr2-rule); border-radius: 10px; overflow: hidden; }
.lbr2 table.lbr2-table { border-collapse: collapse; width: 100%; font-size: .82rem; margin: 0; display: block; }
.lbr2 .lbr2-table thead { display: none; }
.lbr2 .lbr2-table tbody { display: block; }
.lbr2 .lbr2-table tbody tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .75rem;
	padding: .6rem .7rem;
	border-bottom: 1px solid var(--lbr2-rule);
	/* the theme stripes cells, which under this layout paints a band that stops
	   short of the row edge; the row owns its own ground instead */
	background: var(--lbr2-paper);
}
.lbr2 .lbr2-table tbody tr:nth-child(even) { background: var(--lbr2-surface); }
.lbr2 .lbr2-table th,
.lbr2 .lbr2-table td { text-align: left; vertical-align: middle; }
.lbr2 .lbr2-table td {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	flex: 1 0 100%;
	padding: .13rem 0;
	border: 0;
	background: transparent;
}
.lbr2 .lbr2-table td:empty { display: none; }
.lbr2 .lbr2-table td::before {
	content: attr(data-label);
	flex: 0 0 4.3rem;
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lbr2-ink-3);
	font-weight: 600;
}
/* the slot number and its state read as one line; the rest are labelled rows
   underneath, and the service button parks at the right of that first line */
.lbr2 .lbr2-table td[data-label="Slot"],
.lbr2 .lbr2-table td[data-label="Status"] { flex: 0 0 auto; padding: 0 0 .1rem; }
.lbr2 .lbr2-table td[data-label="Slot"]::before,
.lbr2 .lbr2-table td[data-label="Status"]::before { content: none; }
.lbr2 .lbr2-table td:not([data-label]) { flex: 0 0 auto; margin-left: auto; }
.lbr2 .lbr2-table thead th {
	background: var(--lbr2-surface);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lbr2-ink-3);
	font-weight: 600;
}
.lbr2 .lbr2-table tbody tr:last-child { border-bottom: 0; }

/* phone above email, each its own tap target on a phone */
.lbr2-contactset { display: flex; flex-direction: column; }
.lbr2 a.lbr2-contact {
	display: block;
	color: var(--lbr2-brand);
	text-decoration: none;
	white-space: nowrap;
	padding: .1rem 0;
}
.lbr2 a.lbr2-contact:hover { text-decoration: underline; color: var(--lbr2-brand-bright); }

.lbr2-tag {
	display: inline-block;
	font-size: .62rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	padding: .18rem .42rem;
	border-radius: 99px;
	border: 1px solid;
}
.lbr2-tag[data-state="available"] { color: var(--lbr2-ink-2); border-color: var(--lbr2-rule-2); background: var(--lbr2-surface); }
.lbr2-tag[data-state="taken"] { color: #fff; border-color: var(--lbr2-steel); background: var(--lbr2-steel); }
.lbr2-tag[data-state="yours"] { color: #fff; border-color: var(--lbr2-brand-dark); background: var(--lbr2-brand); }
.lbr2-tag[data-state="held"] { color: #7A5407; border-color: var(--lbr2-held-edge); background: #FBF3E2; }
.lbr2-tag[data-state="service"] { color: var(--lbr2-ink-3); border-color: var(--lbr2-rule-2); background: var(--lbr2-surface-2); }

.lbr2-mgr-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lbr2-ink-3); font-weight: 700; margin: 1.4rem 0 .6rem; }
.lbr2-mgr-h:first-child { margin-top: 0; }

.lbr2 button.lbr2-mini {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: .72rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	padding: .3rem .55rem;
	min-height: 32px;
	border-radius: 7px;
	border: 1px solid var(--lbr2-rule-2);
	background: var(--lbr2-paper);
	color: var(--lbr2-ink-2);
	cursor: pointer;
}
.lbr2 button.lbr2-mini:hover { background: var(--lbr2-surface); }

.lbr2-reportcard {
	border: 1px solid var(--lbr2-rule);
	border-radius: 10px;
	padding: .7rem .8rem;
	font-size: .84rem;
}
.lbr2-reportcard + .lbr2-reportcard { margin-top: .5rem; }
.lbr2-reportcard b { display: block; font-size: .86rem; }
.lbr2-reportcard time { font-size: .72rem; color: var(--lbr2-ink-3); }
.lbr2 .lbr2-reportcard p { margin: .35rem 0 0; color: var(--lbr2-ink-2); }

/* ------------------------------------------------------------ rack index */

.lbr2-racklist { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.lbr2 .lbr2-racklist a {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1rem;
	border: 1px solid var(--lbr2-rule);
	border-radius: var(--lbr2-radius);
	text-decoration: none;
	color: var(--lbr2-ink);
	background: var(--lbr2-paper);
}
.lbr2 .lbr2-racklist a:hover { border-color: var(--lbr2-brand); background: var(--lbr2-brand-wash); }
.lbr2-racklist-id {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--lbr2-brand);
	background: var(--lbr2-brand-wash);
	border-radius: 6px;
	padding: .25rem .45rem;
}
.lbr2-racklist-name { font-weight: 600; font-size: .95rem; }
.lbr2-racklist-meta { margin-left: auto; font-size: .78rem; color: var(--lbr2-ink-3); white-space: nowrap; }

/* ------------------------------------------------------------ responsive */

@media (min-width: 640px) {
	/* the action bar floats on desktop, so it needs far less reserved space */
	.lbr2 { padding-bottom: 3rem; }
	.lbr2-enclosure { padding: 1.1rem 1.1rem .9rem; border-radius: 18px; }
	.lbr2-bay { gap: .5rem; padding: .7rem .6rem .55rem; }
	.lbr2-bays { gap: .9rem; }
	.lbr2 .lbr2-num { font-size: 12px; }

	.lbr2-sheet { max-width: 420px; }
	.lbr2-sheet--wide { max-width: 720px; }
	.lbr2-sheet-in { border-radius: 16px; max-height: 86dvh; }

	.lbr2-tablewrap { overflow-x: auto; }
	.lbr2 table.lbr2-table { display: table; min-width: 480px; }
	.lbr2 .lbr2-table thead { display: table-header-group; }
	.lbr2 .lbr2-table tbody { display: table-row-group; }
	.lbr2 .lbr2-table tbody tr { display: table-row; padding: 0; border-bottom: 0; }
	.lbr2 .lbr2-table th,
	.lbr2 .lbr2-table td { display: table-cell; padding: .5rem .65rem; border-bottom: 1px solid var(--lbr2-rule); }
	.lbr2 .lbr2-table td::before { content: none; }
	.lbr2 .lbr2-table td:empty { display: table-cell; }
	.lbr2 .lbr2-table tbody tr:last-child td { border-bottom: 0; }

	.lbr2-actionbar {
		left: 50%;
		right: auto;
		bottom: 1.25rem;
		transform: translateX(-50%);
		width: min(100% - 2rem, 620px);
		border: 1px solid var(--lbr2-rule);
		border-radius: 14px;
		box-shadow: var(--lbr2-shadow);
		padding: .7rem .8rem;
	}
	@keyframes lbr2-rise { from { transform: translate(-50%, 130%); } to { transform: translate(-50%, 0); } }
}

@media (prefers-reduced-motion: reduce) {
	.lbr2 *, .lbr2-actionbar { animation: none !important; transition: none !important; }
}