/* ============================================================
   SITE.CSS — Secure Console
   Custom design system — no external CSS framework
   ============================================================ */

/* ---- 1. CUSTOM PROPERTIES --------------------------------- */

:root {
	--paper: #f2ece1;
	--paper-2: #ebe4d5;
	--ink: #1a1612;
	--ink-soft: #3a3228;
	--muted: #8a7e6e;
	--rule: #d6ccb8;
	--accent: #c96442;
	--accent-soft: #e5a48c;
	--sage: #6b7557;
	--stamp: #a03f20;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--serif: "Instrument Serif", "Fraunces", Georgia, serif;
	--display: "Instrument Serif", Georgia, serif;
}

.theme-dark,
html[data-theme=dark] .page {
	--paper: #1c1813;
	--paper-2: #231e17;
	--ink: #f0e6d2;
	--ink-soft: #c9bda5;
	--muted: #867c6a;
	--rule: #3a3328;
	--accent: #e07a54;
	--accent-soft: #b8583a;
	--sage: #9aa887;
	--stamp: #e07a54;
}

/* Application always runs in dark palette */
body.app-body {
	--paper: #1c1813;
	--paper-2: #231e17;
	--ink: #f0e6d2;
	--ink-soft: #c9bda5;
	--muted: #867c6a;
	--rule: #3a3328;
	--accent: #e07a54;
	--accent-soft: #b8583a;
	--sage: #9aa887;
	--stamp: #e07a54;
}

/* ---- 2. RESET --------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ---- 3. BASE ---------------------------------------------- */

html,
body,
input,
textarea,
select,
button {
	font-family: var(--mono);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.app-body {
	background-color: var(--paper);
	color: var(--ink);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	line-height: 1.6;
}

/* ---- 4. BACKDROP ------------------------------------------ */

.app-backdrop {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.12) 100%);
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.12) 100%);
	z-index: 0;
}

/* ---- 5. HEADER -------------------------------------------- */

.sc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--rule);
	background: color-mix(in srgb, var(--paper-2) 88%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.sc-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.sc-header-brand {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.sc-header-nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	justify-content: space-between;
}

.sc-header-left,
.sc-header-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Burger button — hidden on desktop */
.sc-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 2rem;
	height: 2rem;
	padding: 0.25rem;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	cursor: pointer;
	position: relative;
	z-index: 50;
}

.sc-burger-line {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ink-soft);
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.2s;
}

.sc-burger[aria-expanded="true"] .sc-burger-line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.sc-burger[aria-expanded="true"] .sc-burger-line:nth-child(2) {
	opacity: 0;
}

.sc-burger[aria-expanded="true"] .sc-burger-line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.sc-nav-link {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 0.375rem 0.625rem;
	border-radius: 0.5rem;
	transition: background-color 0.15s, color 0.15s;
}

.sc-nav-link:hover {
	background: var(--paper-2);
	color: var(--ink);
}

.sc-user-pill {
	font-size: 0.75rem;
	color: var(--ink-soft);
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 0.5rem;
	padding: 0.3125rem 0.625rem;
	white-space: nowrap;
}

.sc-user-pill strong {
	color: var(--ink);
}

/* ---- Mobile header ---- */
@media (max-width: 768px) {
	.sc-burger {
		display: flex;
	}

	.sc-header-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--paper-2);
		border-bottom: 1px solid var(--rule);
		padding: 0.75rem 1rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	}

	.sc-header-nav.is-open {
		display: flex;
	}

	.sc-header-left,
	.sc-header-right {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	.sc-header-left {
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--rule);
	}

	.sc-header-right {
		padding-top: 0.5rem;
	}

	.sc-nav-link {
		padding: 0.625rem 0.5rem;
		font-size: 0.875rem;
	}

	.sc-user-pill {
		text-align: center;
	}

	.sc-header-right form {
		width: 100%;
	}

	.sc-header-right .sc-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---- 6. FOOTER -------------------------------------------- */

.sc-footer {
	border-top: 1px solid var(--rule);
	background: color-mix(in srgb, var(--paper-2) 70%, transparent);
	padding: 1.5rem 0;
}

.sc-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

@media (max-width: 640px) {
	.sc-footer {
		padding: 1.25rem 0;
	}

	.sc-footer-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.375rem;
	}
}

/* ---- 7. MAIN CONTENT -------------------------------------- */

.app-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

.sc-main {
	flex: 1;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	position: relative;
	z-index: 1;
	animation: rise-in 320ms ease-out;
	overflow: hidden;
}

@keyframes rise-in {
	from {
		transform: translateY(6px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ---- 8. LAYOUT -------------------------------------------- */

.sc-center-col {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.sc-center-col-lg {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

.sc-center-col-xl {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.sc-grid {
	display: grid;
	gap: 1.5rem;
}

/* Prevent grid children from overflowing on narrow viewports */
.sc-grid > * {
	min-width: 0;
}

.sc-grid-sidebar {
	grid-template-columns: 340px 1fr;
}

.sc-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.sc-col-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.sc-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sc-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sc-row-form {
	display: flex;
	gap: 0.75rem;
}

@media (max-width: 1024px) {
	.sc-grid-sidebar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.sc-grid-2 {
		grid-template-columns: 1fr;
	}

	.sc-stat-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.sc-grid-2 {
		grid-template-columns: 1fr;
	}

	.sc-row-form {
		flex-direction: column;
	}

	.sc-main {
		padding: 1rem 0.75rem;
	}

	.sc-card {
		border-radius: 1rem;
		padding: 1.25rem 1rem;
		overflow: hidden;
		max-width: 100%;
	}

	.sc-h1 {
		font-size: 1.25rem;
	}

	.sc-h2 {
		font-size: 1rem;
	}

	/* Terminal box — shorter when sidebar cards stack above it */
	.sc-terminal-box {
		height: 45vh;
		border-radius: 0.75rem;
	}

	/* ---- Connection & Preferences panels ---- */
	/* Prevent select text from overflowing card */
	.sc-select {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.8125rem;
		max-width: 100%;
	}

	/* Form inputs tighter on mobile */
	.sc-input,
	.sc-select,
	.sc-textarea {
		padding: 0.625rem 0.75rem;
		font-size: 0.8125rem;
		max-width: 100%;
	}

	/* All buttons must stay within card bounds */
	.sc-btn {
		white-space: normal;
		word-break: break-word;
		max-width: 100%;
	}

	/* Stack form actions & card-level links full-width */
	.sc-form .sc-btn,
	.sc-card > .sc-btn,
	.sc-card > a.sc-btn {
		width: 100%;
		justify-content: center;
	}

	/* Range row — keep inline but allow shrinking */
	.sc-range-row {
		gap: 0.5rem;
	}

	.sc-range-value {
		min-width: 1.75rem;
		font-size: 0.8125rem;
	}

	/* Checkbox row tighter */
	.sc-checkbox-row {
		padding: 0.625rem 0.75rem;
		font-size: 0.8125rem;
	}

	/* ---- Terminal Session header ---- */
	/* Stack the title and controls vertically */
	.sc-row-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.625rem;
	}

	/* Keep the button row side-by-side but allow wrapping */
	.sc-row-between > .sc-row {
		width: 100%;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	/* Make "Open in window" button stretch on mobile */
	.sc-row-between > .sc-row .sc-btn {
		flex: 1;
		min-width: 0;
		justify-content: center;
	}

	/* Server table — card layout on mobile */
	.sc-server-table-head {
		display: none;
	}

	.sc-server-table-row {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 0.375rem 0.75rem;
		padding: 0.875rem 0.75rem;
	}

	.sc-server-name {
		grid-column: 1 / -1;
	}

	.sc-server-table-row .sc-row {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	/* Stat grid */
	.sc-stat-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* Extra-small screens (≤ 400px) — extreme compact */
@media (max-width: 400px) {
	.sc-main {
		padding: 0.75rem 0.5rem;
	}

	.sc-card {
		padding: 1rem 0.75rem;
		border-radius: 0.75rem;
	}

	.sc-terminal-box {
		height: 40vh;
	}

	.sc-h2 {
		font-size: 0.9375rem;
	}

	.sc-body {
		font-size: 0.8125rem;
	}

	.sc-caption {
		font-size: 0.6875rem;
	}

	/* Buttons compact */
	.sc-btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}

	.sc-btn-sm {
		padding: 0.375rem 0.625rem;
		font-size: 0.6875rem;
	}
}

/* ---- 9. CARDS --------------------------------------------- */

.sc-card {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 1.5rem;
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.sc-card {
		padding: 2rem;
	}
}

/* ---- 10. TYPOGRAPHY --------------------------------------- */

.sc-h1 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
}

.sc-h2 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
}

.sc-h3 {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

.sc-body {
	font-size: 0.875rem;
	color: var(--ink-soft);
	line-height: 1.65;
}

.sc-caption {
	font-size: 0.75rem;
	color: var(--muted);
}

.sc-overline {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

/* ---- 11. BUTTONS ------------------------------------------ */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-radius: 0.75rem;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: var(--mono);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
}

.sc-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sc-btn-primary {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.sc-btn-primary:hover:not(:disabled) {
	background: var(--ink-soft);
	border-color: var(--ink-soft);
}

.sc-btn-ghost {
	background: transparent;
	border-color: var(--rule);
	color: var(--ink-soft);
}

.sc-btn-ghost:hover:not(:disabled) {
	border-color: var(--muted);
	color: var(--ink);
}

.sc-btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	border-radius: 0.5rem;
}

.sc-btn-full {
	width: 100%;
}

.sc-btn-danger {
	background: transparent;
	border-color: var(--stamp);
	color: var(--stamp);
}

.sc-btn-danger:hover:not(:disabled) {
	background: var(--stamp);
	color: var(--paper);
}

/* ---- Server manage table ---------------------------------- */

.sc-server-table {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	overflow: hidden;
}

.sc-server-table-head,
.sc-server-table-row {
	display: grid;
	grid-template-columns: 1.5fr 1.5fr 0.5fr 0.75fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
}

.sc-server-table-head {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	background: var(--paper-2);
	border-bottom: 1px solid var(--rule);
}

.sc-server-table-row {
	border-bottom: 1px solid var(--rule);
}

.sc-server-table-row:last-child {
	border-bottom: none;
}

.sc-server-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

/* ---- 12. FORMS -------------------------------------------- */

.sc-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sc-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.sc-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.sc-input,
.sc-select,
.sc-textarea {
	width: 100%;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	padding: 0.6875rem 1rem;
	font-size: 0.875rem;
	font-family: var(--mono);
	color: var(--ink);
	transition: border-color 0.15s;
	appearance: none;
	-webkit-appearance: none;
}

.sc-input::placeholder,
.sc-textarea::placeholder {
	color: var(--muted);
}

.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.sc-textarea {
	resize: vertical;
	min-height: 6rem;
	line-height: 1.5;
}

.sc-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23867c6a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.25rem;
	padding-right: 2.5rem;
	cursor: pointer;
}

.sc-checkbox-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	padding: 0.6875rem 1rem;
	font-size: 0.875rem;
	color: var(--ink-soft);
	cursor: pointer;
	user-select: none;
}

.sc-checkbox-row input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
}

.sc-range-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sc-range {
	flex: 1;
	height: 0.375rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: var(--rule);
	border-radius: 9999px;
}

.sc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	border: 0;
}

.sc-range::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	border: 0;
}

.sc-range-value {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
	min-width: 2rem;
	text-align: right;
}

.sc-form-error {
	font-size: 0.75rem;
	color: var(--stamp);
}

/* ---- 13. ALERTS ------------------------------------------- */

.sc-alert {
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	border: 1px solid transparent;
	line-height: 1.5;
}

.sc-alert-info {
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--accent) 28%, transparent);
	color: var(--ink);
}

.sc-alert-success {
	background: color-mix(in srgb, var(--sage) 12%, transparent);
	border-color: color-mix(in srgb, var(--sage) 30%, transparent);
	color: var(--ink);
}

.sc-alert-warning {
	background: color-mix(in srgb, #c8a84b 10%, transparent);
	border-color: color-mix(in srgb, #c8a84b 28%, transparent);
	color: var(--ink);
}

.sc-alert-error {
	background: color-mix(in srgb, var(--stamp) 10%, transparent);
	border-color: color-mix(in srgb, var(--stamp) 28%, transparent);
	color: var(--ink);
}

/* ---- 14. BADGES ------------------------------------------- */

.sc-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 600;
	border: 1px solid var(--rule);
	background: var(--paper);
	color: var(--ink-soft);
	white-space: nowrap;
}

.sc-badge--ok {
	border-color: color-mix(in srgb, var(--sage) 40%, transparent);
	background: color-mix(in srgb, var(--sage) 12%, transparent);
	color: var(--sage);
}

.sc-badge--error {
	border-color: color-mix(in srgb, var(--stamp) 40%, transparent);
	background: color-mix(in srgb, var(--stamp) 12%, transparent);
	color: var(--stamp);
}

/* Django flash messages */
.sc-messages {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
}

/* ---- 15. STAT CARDS --------------------------------------- */

.sc-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.sc-stat {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 1rem;
	padding: 1rem;
}

.sc-stat-label {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.sc-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ink);
	margin-top: 0.375rem;
}

/* ---- 16. CODE / MONO PANELS ------------------------------- */

.sc-code-block {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0.75rem;
	padding: 1rem;
}

.sc-code-key {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-bottom: 0.375rem;
}

.sc-code-value {
	font-family: var(--mono);
	font-size: 0.875rem;
	color: var(--accent);
	word-break: break-all;
	line-height: 1.5;
}

.sc-codes-list {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.sc-code-item {
	font-family: var(--mono);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

/* ---- 17. TERMINAL ----------------------------------------- */

.sc-terminal-box {
	background: #000;
	border: 1px solid var(--rule);
	border-radius: 1rem;
	overflow: hidden;
	height: 70vh;
	width: 100%;
}

.xterm-viewport {
	scrollbar-color: rgba(240, 230, 210, 0.18) transparent;
}

/* Terminal popup window */
.term-win-header {
	border-bottom: 1px solid var(--rule);
	background: var(--paper-2);
	padding: 0.625rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.term-win-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

.term-win-sub {
	font-size: 0.75rem;
	color: var(--muted);
}

/* ---- 18. SPACING UTILITIES -------------------------------- */

.u-mt-2 {
	margin-top: 0.5rem;
}

.u-mt-3 {
	margin-top: 0.75rem;
}

.u-mt-4 {
	margin-top: 1rem;
}

.u-mt-5 {
	margin-top: 1.25rem;
}

.u-mt-6 {
	margin-top: 1.5rem;
}

.u-mb-4 {
	margin-bottom: 1rem;
}

.u-mb-6 {
	margin-bottom: 1.5rem;
}

.u-w-full {
	width: 100%;
}

.u-text-center {
	text-align: center;
}

.u-break-all {
	word-break: break-all;
}

.u-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- 19. SECURITY POLICY PAGE ----------------------------- */

.sc-policy-wrap {
	padding-top: 1rem;
}

/* Hero row */
.sc-policy-hero {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rule);
}

.sc-policy-shield {
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
	border-radius: 1rem;
}

/* Nav link variant with icon */
.sc-nav-link--policy {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--sage);
}

.sc-nav-link--policy:hover {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Footer policy link */
.sc-footer-policy-link {
	font-size: 0.75rem;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s;
}

.sc-footer-policy-link:hover {
	color: var(--accent);
}

/* Highlight cards grid */
.sc-policy-highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.sc-policy-card {
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 1.25rem;
	padding: 1.25rem 1.25rem 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.sc-policy-card--accent {
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 6%, var(--paper-2));
}

.sc-policy-card-icon {
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border-radius: 0.625rem;
	color: var(--accent);
	flex-shrink: 0;
}

/* Detailed section cards */
.sc-policy-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sc-policy-section strong {
	color: var(--ink);
	font-weight: 600;
}

.sc-policy-section code {
	font-family: var(--mono);
	font-size: 0.8125rem;
	background: color-mix(in srgb, var(--rule) 60%, transparent);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	color: var(--accent-soft);
}

/* Lists inside policy sections */
.sc-policy-list {
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sc-policy-list li::marker {
	color: var(--accent);
}

/* Responsive */
@media (max-width: 768px) {
	.sc-policy-highlights {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-policy-hero {
		flex-direction: column;
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.sc-policy-highlights {
		grid-template-columns: 1fr;
	}
}