/* Issue #4022: The standalone status and account shell uses these styles. Reuse the application's semantic palette and font without
   importing application/Bootstrap resets into either pre-application page. */
.tt-status-page,
.tt-status-page * {
	box-sizing: border-box;
}

.tt-status-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--tt-color-surface-subtle);
	color: var(--tt-color-text-strong);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

/* The page may grow beyond the viewport. A fixed-height or positioned shell
   would clip database guidance or the second store link on landscape phones. */
.tt-status-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px 24px;
}

/* A bounded card keeps long recovery guidance readable on desktop; fluid width
   and internal padding leave the same card usable without a fixed mobile size. */
.tt-status-card {
	width: 100%;
	max-width: 560px;
	padding: 40px 32px;
	border: 1px solid var(--tt-color-border-soft);
	border-radius: 16px;
	background: var(--tt-color-surface);
	text-align: center;
}

/* Keep the existing brand asset compact enough for a narrow card; its intrinsic
   proportions remain intact rather than being recreated as styled text. */
.tt-status-logo {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
	margin: 0 auto 32px;
}

.tt-status-card h1 {
	margin: 0;
	color: var(--tt-color-heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.tt-status-description {
	margin: 16px 0 0;
	color: var(--tt-color-text-muted);
	font-size: 16px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

/* Issue #4022: Bound the approved maintenance illustration within the existing
   card; intrinsic proportions and fluid width preserve narrow-screen scrolling. */
.tt-status-illustration {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
	margin: 24px auto;
}

/* Issue #4022: Separate the unchanged recovery diagnostics from the joke so
   administrators can still find database and installer guidance immediately. */
.tt-status-details {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--tt-color-border-soft);
	font-size: 14px;
}

.tt-status-description a,
.tt-status-footer a {
	color: var(--tt-color-accent-reading);
	text-decoration: underline;
}

/* Keep the existing initialization-recovery link distinct from the explanatory
   sentence without changing the exception-specific message or installer URL. */
.tt-status-details a {
	display: block;
	margin-top: 12px;
}

/* Both official stores may be shown for an unclassified mobile platform. Wrap
   whole links instead of compressing the badges or hiding an available action. */
.tt-status-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.tt-status-store-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1px solid var(--tt-color-border-soft);
	border-radius: 8px;
	background: var(--tt-color-surface);
	line-height: 0;
}

/* Match the existing login's official badge height and quarter-height clear
   space. Explicit height also prevents the Google SVG from filling the card. */
.tt-status-store-link img {
	width: auto;
	height: 40px;
}

.tt-status-store-link:hover {
	border-color: var(--tt-color-accent);
	background: var(--tt-color-surface-subtle);
}

/* Issue #4022: Native links, buttons and submit inputs share the primary action
   treatment without replacing page-owned form or browser-history behavior. */
.tt-status-action {
	display: inline-block;
	min-height: 48px;
	max-width: 100%;
	padding: 12px 24px;
	border: 1px solid var(--tt-color-accent-solid-bg);
	border-radius: 8px;
	background: var(--tt-color-accent-solid-bg);
	color: var(--tt-color-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	cursor: pointer;
	text-decoration: none;
}

.tt-status-action:hover {
	border-color: var(--tt-color-accent-hover);
	background: var(--tt-color-accent-hover);
}

/* Issue #4022: Keep keyboard focus visible across links, native fields and the
   reveal helper; the offset separates the outline from control/status borders. */
.tt-status-actions a:focus-visible,
.tt-status-action:focus-visible,
.tt-status-secondary:focus-visible,
.tt-status-input:focus-visible,
.tt-status-form .tt-password-visibility-toggle:focus-visible,
.tt-status-description a:focus-visible,
.tt-status-footer a:focus-visible {
	outline: 3px solid var(--tt-color-accent);
	outline-offset: 4px;
}

.tt-status-footer {
	padding: 16px 24px 24px;
	color: var(--tt-color-text-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

/* Issue #4022: Account forms remain native POST forms. Stack labels/controls
   for the same readable layout on phones and desktop, preserving reveal-helper
   wrappers and 16px input text rather than depending on Bootstrap layout. */
.tt-status-form {
	margin-top: 24px;
	text-align: left;
}

.tt-status-field {
	min-width: 0;
	margin-top: 20px;
}

.tt-status-field label {
	display: block;
	margin-bottom: 8px;
	color: var(--tt-color-field-label-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.tt-status-input {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 12px;
	border: 1px solid var(--tt-color-control-border);
	border-radius: 8px;
	background: var(--tt-color-control-bg);
	color: var(--tt-color-control-text);
	font: inherit;
	line-height: 1.4;
}

/* Issue #4022: Reuse the existing reveal helper while giving its small icon a
   44px touch target inside the 48px field; reserve matching space for typed text. */
.tt-status-form .tt-password-visibility-toggle {
	right: 2px;
	width: 44px;
}

.tt-status-form .tt-password-visibility > .tt-password-visibility-input {
	padding-right: 52px;
}

.tt-status-input[aria-invalid="true"] {
	border-color: var(--tt-color-danger-border);
}

.tt-status-readonly {
	margin: 0;
	color: var(--tt-color-text-strong);
	line-height: 1.5;
	overflow-wrap: break-word;
}

.tt-status-field-error {
	margin: 8px 0 0;
	color: var(--tt-color-danger-text);
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: break-word;
}

/* Issue #4022: Notices use explicit text/roles as well as semantic colors.
   Long validation lists and localized messages must wrap inside the fluid card. */
.tt-status-notice {
	margin-top: 24px;
	padding: 16px;
	border: 1px solid var(--tt-color-info-border);
	border-radius: 8px;
	background: var(--tt-color-info-bg);
	color: var(--tt-color-info-text);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.tt-status-notice-error {
	border-color: var(--tt-color-danger-border);
	background: var(--tt-color-danger-bg);
	color: var(--tt-color-danger-text);
}

.tt-status-notice-success {
	border-color: var(--tt-color-success-border);
	background: var(--tt-color-success-bg);
	color: var(--tt-color-success-text-strong);
}

.tt-status-notice ul {
	margin: 8px 0 0;
	padding-left: 24px;
	text-align: left;
}

.tt-status-secondary {
	color: var(--tt-color-accent-reading);
	font-size: 15px;
	line-height: 1.5;
	text-decoration: underline;
	overflow-wrap: break-word;
}

/* Issue #4022: Form submits fill the available row without forcing navigation
   links or official store badges into form-specific geometry. */
.tt-status-form .tt-status-action {
	width: 100%;
}

/* Preserve readable copy and space for a full badge on small phones without
   setting a minimum page width; short screens keep normal vertical scrolling. */
@media (max-width: 600px) {
	.tt-status-main {
		padding: 24px 16px 16px;
	}

	.tt-status-card {
		padding: 32px 24px;
	}

	.tt-status-card h1 {
		font-size: 26px;
	}
}