/* LucidTicks members area — matches the site's dark glass design system. */

.ltm-wrap {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 880px) {
	.ltm-wrap {
		grid-template-columns: 1fr;
	}
}

/* Nav */

.ltm-nav {
	background: var(--lt-surface);
	border: 1px solid var(--lt-border);
	border-radius: 12px;
	padding: 8px;
	backdrop-filter: blur(10px);
}

.ltm-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ltm-nav-item a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--lt-text);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
	transition: background-color 200ms ease, color 200ms ease;
}

.ltm-nav-item a:hover,
.ltm-nav-item a:focus-visible {
	background: var(--lt-hover);
	color: var(--lt-heading);
}

.ltm-nav-item.is-active a {
	background: rgba(34, 197, 94, 0.12);
	color: var(--lt-accent-text);
	box-shadow: inset 2px 0 0 var(--lt-accent);
}

.ltm-nav-logout a {
	color: var(--lt-text-dim);
	border-top: 1px solid var(--lt-border);
	margin-top: 6px;
	padding-top: 14px;
	border-radius: 0 0 8px 8px;
}

/* Panel + cards */

.ltm-panel {
	min-width: 0;
}

.ltm-card {
	background: var(--lt-surface);
	border: 1px solid var(--lt-border);
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 18px;
	backdrop-filter: blur(10px);
}

.ltm-h2 {
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--lt-heading);
}

.ltm-h3 {
	font-size: 19px;
	margin: 0 0 6px;
	color: var(--lt-heading);
}

.ltm-lead {
	color: var(--lt-text);
	margin: 0 0 22px;
	max-width: 68ch;
	line-height: 1.65;
}

.ltm-muted {
	color: var(--lt-text);
	font-size: 14px;
	line-height: 1.6;
	margin: 6px 0 0;
}

.ltm-label {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	color: var(--lt-text-dim);
	margin-bottom: 6px;
}

.ltm-email {
	display: block;
	font-size: 21px;
	color: var(--lt-heading);
	word-break: break-all;
}

.ltm-account-box {
	border-left: 3px solid var(--lt-accent);
}

.ltm-empty {
	color: var(--lt-text);
}

.ltm-note {
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid var(--lt-border);
	border-left: 3px solid var(--lt-accent);
	background: var(--lt-surface);
	color: var(--lt-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.ltm-note strong {
	color: var(--lt-text);
}

.ltm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ltm-chip {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.25);
	color: var(--lt-accent-text);
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 14px;
}

/* A chip that goes somewhere has to look like it does, or nobody clicks it. */
.ltm-chip-link {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ltm-chip-link:hover,
.ltm-chip-link:focus-visible {
	background: rgba(34, 197, 94, 0.2);
	border-color: rgba(34, 197, 94, 0.55);
	color: var(--lt-accent-text);
}

.ltm-chip-link:focus-visible {
	outline: 2px solid var(--lt-accent-text);
	outline-offset: 2px;
}

/* Landing on a row is no use if you cannot tell which one you landed on.
   Fades out so it does not sit there looking like a permanent state. */
.ltm-table tr:target td {
	background: rgba(34, 197, 94, 0.14);
	animation: ltm-flash 2.4s ease-out 1;
}

@keyframes ltm-flash {
	0%, 40% { background: rgba(34, 197, 94, 0.28); }
	100%    { background: rgba(34, 197, 94, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
	.ltm-table tr:target td {
		animation: none;
	}
}

/* The sticky header would otherwise cover the row jumped to. */
.ltm-table tr[id] {
	scroll-margin-top: 90px;
}

/* Download, Manual and the notes link in fixed slots.
   The widths are stated rather than left to the content: each row is its own
   grid, so "size to the widest" only agrees within a single row — a product
   with no manual would still shunt its Download button across. */
.ltm-row-actions {
	display: inline-grid;
	grid-template-columns: 124px 104px 104px;
	align-items: center;
	gap: 10px;
}

.ltm-slot {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.ltm-slot .ltm-btn {
	width: 100%;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 720px) {
	/* Too narrow for three across — stack them, still aligned to each other. */
	.ltm-row-actions {
		grid-template-columns: 124px;
		justify-content: end;
		gap: 6px;
	}

	.ltm-slot:empty {
		display: none;
	}
}

/* Secondary links under the buttons — video, or a typed-in notes URL. */
.ltm-row-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 12px;
	margin-top: 8px;
	font-size: 13px;
}

.ltm-row-links a {
	color: var(--lt-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ltm-row-links a:hover,
.ltm-row-links a:focus-visible {
	color: var(--lt-accent-text);
	border-bottom-color: currentColor;
}

/* The changelog row belongs to the product above it, so no divider and no
   gap — it should not read as a row in its own right. */
.ltm-notes-row > td {
	padding-top: 0;
	border-top: 0;
}

/* Release notes button, beside Manual. Styled as a link, not a third button —
   the row should not read as three equal choices. */
.ltm-notes-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0 2px;
	margin-left: 4px;
	font: inherit;
	font-size: 13px;
	color: var(--lt-muted);
	cursor: pointer;
	border-bottom: 1px solid transparent;
	box-shadow: none;
}

/* The theme paints a filled background on any button:hover, which turned this
   into green text on a green block. Every interactive state has to be held
   flat, not just the resting one. */
.ltm-notes-toggle:hover,
.ltm-notes-toggle:focus,
.ltm-notes-toggle:focus-visible,
.ltm-notes-toggle:active {
	background: none;
	box-shadow: none;
	color: var(--lt-accent-text);
	border-color: transparent;
	border-bottom-color: currentColor;
}

/* With JavaScript, the button is the control and the panel's own summary is
   redundant. Without it, the reverse — so the notes are never unreachable. */
.ltm-js .ltm-notes-toggle {
	display: inline-block;
}

.ltm-js .ltm-notes > summary {
	display: none;
}

.ltm-js .ltm-notes-row > td {
	padding-top: 0;
	padding-bottom: 0;
}

.ltm-js .ltm-notes:not([open]) {
	display: none;
}

/* Release notes, read on the site rather than on GitHub. */
.ltm-notes > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--lt-muted);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;   /* Sits under the buttons, not out on the left. */
	gap: 6px;
}

.ltm-notes > summary:hover,
.ltm-notes > summary:focus-visible {
	color: var(--lt-accent-text);
}

.ltm-notes > summary::-webkit-details-marker {
	display: none;
}

/* Own marker, so it can rotate and sit where it should. */
.ltm-notes > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 0.2s ease;
}

.ltm-notes[open] > summary::before {
	transform: rotate(90deg);
}

.ltm-notes-tag {
	font-size: 12px;
	color: var(--lt-muted);
}

/* Left-aligned regardless of the right-aligned summary above it — a changelog
   read from the right-hand edge is unreadable. */
.ltm-notes-body {
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
	max-height: 340px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}

.ltm-notes-body p,
.ltm-notes-body ul,
.ltm-notes-body ol {
	margin: 0 0 10px;
}

.ltm-notes-body ul,
.ltm-notes-body ol {
	padding-left: 20px;
}

.ltm-notes-body li {
	margin-bottom: 4px;
}

.ltm-notes-body .ltm-notes-h {
	margin: 14px 0 6px;
	font-size: 14px;
	color: var(--lt-text);
}

.ltm-notes-body .ltm-notes-h:first-child {
	margin-top: 0;
}

.ltm-notes-body code {
	background: rgba(148, 163, 184, 0.14);
	border-radius: 4px;
	padding: 1px 5px;
	font-size: 13px;
}

.ltm-notes-body .ltm-notes-rule {
	border: 0;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
	margin: 12px 0;
}

.ltm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.ltm-grid .ltm-card {
	margin-bottom: 0;
}

.ltm-product-card {
	border-left: 3px solid var(--lt-accent);
}

/* Buttons */

.ltm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

a.ltm-btn,
button.ltm-btn,
.ltm-panel input[type="submit"].ltm-btn {
	display: inline-block;
	background: var(--lt-accent);
	color: #04140a;
	border: 1px solid var(--lt-accent);
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	min-height: 44px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

a.ltm-btn:hover,
button.ltm-btn:hover {
	background: var(--lt-accent-text);
	border-color: var(--lt-accent-text);
	color: #04140a;
}

a.ltm-btn-ghost,
button.ltm-btn-ghost {
	background: transparent;
	color: var(--lt-heading);
	border-color: var(--lt-border-3);
}

a.ltm-btn-ghost:hover,
button.ltm-btn-ghost:hover {
	background: var(--lt-border);
	border-color: var(--lt-border-3);
	color: var(--lt-heading);
}

/* Tables */

.ltm-table-scroll {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.ltm-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: var(--lt-surface-2);
	border: 1px solid var(--lt-border);
	border-radius: 12px;
	overflow: hidden;
}

.ltm-table th,
.ltm-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--lt-border);
	color: var(--lt-heading);
	font-size: 15px;
}

.ltm-table th {
	color: var(--lt-text);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 600;
}

.ltm-table tr:last-child td {
	border-bottom: none;
}

.ltm-right {
	text-align: right;
}

.ltm-filemeta {
	display: block;
	color: var(--lt-text-dim);
	font-size: 12px;
	margin-top: 3px;
}

.ltm-badge {
	display: inline-block;
	background: rgba(34, 197, 94, 0.12);
	color: var(--lt-accent-text);
	border-radius: 4px;
	padding: 2px 7px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Forms */

.ltm-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 200px;
}

.ltm-field span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--lt-text-dim);
}

.ltm-mid-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	padding: 16px 0;
	border-top: 1px solid var(--lt-border);
	margin-top: 14px;
}

.ltm-panel input[type="text"],
.ltm-panel input[type="email"],
.ltm-panel input[type="password"],
.ltm-login-card input[type="text"],
.ltm-login-card input[type="password"] {
	background: var(--lt-input-bg);
	border: 1px solid var(--lt-border-2);
	border-radius: 8px;
	color: var(--lt-heading);
	padding: 11px 13px;
	font-size: 16px;
	width: 100%;
	min-height: 44px;
}

.ltm-panel input:focus-visible,
.ltm-login-card input:focus-visible,
.ltm-nav a:focus-visible,
.ltm-btn:focus-visible {
	outline: 2px solid var(--lt-accent-text);
	outline-offset: 2px;
}

.ltm-status {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 12px;
}

.ltm-status-pending {
	color: var(--lt-amber);
}

.ltm-status-active {
	color: var(--lt-accent-text);
}

.ltm-key {
	display: block;
	background: var(--lt-input-bg);
	border: 1px solid var(--lt-border-2);
	border-radius: 8px;
	padding: 13px 15px;
	color: var(--lt-accent-text);
	font-size: 16px;
	word-break: break-all;
}

/* Notices */

.ltm-notice {
	border-radius: 10px;
	padding: 13px 16px;
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.5;
}

.ltm-notice-ok {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: var(--lt-ok-text);
}

.ltm-notice-error {
	background: rgba(248, 113, 113, 0.1);
	border: 1px solid rgba(248, 113, 113, 0.3);
	color: var(--lt-err-text);
}

/* Logged-out gate: pitch on the left, login form on the right */

.ltm-gate {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.ltm-gate {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Form first on mobile — returning members outnumber first-time readers. */
	.ltm-gate-intro { order: 2; }
	.ltm-gate-form { order: 1; }
}

.ltm-gate-eyebrow {
	color: var(--lt-accent-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.ltm-gate-title {
	color: var(--lt-heading);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 16px;
	max-width: 18ch;
}

.ltm-gate-lead {
	color: var(--lt-text);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 30px;
	max-width: 54ch;
}

.ltm-gate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.ltm-gate-item {
	background: var(--lt-surface-2);
	border: 1px solid var(--lt-border);
	border-left: 2px solid rgba(34, 197, 94, 0.5);
	border-radius: 10px;
	padding: 16px 18px;
}

.ltm-gate-item-title {
	color: var(--lt-heading);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
}

.ltm-gate-item-text {
	color: var(--lt-text);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Login */

.ltm-login-wrap {
	max-width: 460px;
	margin: 0 auto;
}

.ltm-login-title {
	font-size: 26px;
	margin: 0 0 18px;
	color: var(--lt-heading);
}

.ltm-login-card .login-username,
.ltm-login-card .login-password {
	margin-bottom: 16px;
}

.ltm-login-card label {
	display: block;
	font-size: 13px;
	color: var(--lt-text);
	margin-bottom: 6px;
}

.ltm-login-card .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.ltm-login-card .login-submit input[type="submit"] {
	background: var(--lt-accent);
	color: #04140a;
	border: 1px solid var(--lt-accent);
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.ltm-login-card .login-submit input[type="submit"]:hover {
	background: var(--lt-accent-text);
}

.ltm-login-links {
	margin: 16px 0 0;
	font-size: 14px;
}

.ltm-login-links a,
.ltm-login-foot a {
	color: var(--lt-accent-text);
}

.ltm-login-foot {
	text-align: center;
	color: var(--lt-text);
	font-size: 14px;
	margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.ltm-nav-item a,
	.ltm-btn,
	.ltm-login-card .login-submit input[type="submit"] {
		transition: none;
	}
}

/* Account forms */

.ltm-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.ltm-form .ltm-muted {
	margin-bottom: 16px;
}

.ltm-form button.ltm-btn {
	align-self: flex-start;
}

/* Membership badge — shown only for non-standard members */

.ltm-member-badge {
	display: inline-block;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.28);
	color: var(--lt-accent-text);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

/* G1 / G2 licensing-generation badges. The generation is the difference
   between "licensed to your PC" and "licensed to you", so it is worth
   labelling rather than leaving members to infer it. */
.ltm-gen {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.06em;
	vertical-align: middle;
}

.ltm-gen-g2 {
	background: rgba(34, 197, 94, 0.14);
	border: 1px solid rgba(34, 197, 94, 0.32);
	color: var(--lt-ok-text);
}

.ltm-gen-g1 {
	background: var(--lt-surface);
	border: 1px solid var(--lt-border-2);
	color: var(--lt-text-dim);
}


/* ---------------------------------------------------------- Clarity licence */

.ltm-badge-row {
	margin: 0 0 12px;
}

.ltm-tier {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Amber, not green: a beta key is a real licence but a temporary one, and it
   should not read as the same thing as a purchase. */
.ltm-tier-beta {
	background: rgba(245, 158, 11, 0.14);
	border: 1px solid rgba(245, 158, 11, 0.4);
	color: #fbbf24;
}

.ltm-keyfacts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 18px;
	margin: 16px 0 0;
	font-size: 14px;
}

.ltm-keyfacts dt {
	color: var(--lt-muted);
}

.ltm-keyfacts dd {
	margin: 0;
}

.ltm-keyfacts .ltm-warn {
	color: #fbbf24;
}

.ltm-devices {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.ltm-devices li {
	padding: 8px 0;
	border-top: 1px solid rgba(148, 163, 184, 0.14);
	font-size: 14px;
}

.ltm-devices .ltm-filemeta {
	display: block;
}