/* skoot.ing — shared app + public (marketing/auth) styles */

/* --- theme tokens --- */
html {
	color-scheme: light;
	/* Page canvas — not the top bar */
	--canvas: #f6f7f9;
	--bg: #eef0f3;
	--fg: #18181b;
	--muted: #71717a;
	--border: #d8dce3;
	--accent: #2563eb;
	--accent-hover: #1d4ed8;
	--surface: #ffffff;
	/* Top bar: own palette (structure like HN, not HN orange) */
	--topbar-bg: #1a1a1a;
	--topbar-fg: #e2e8f0;
	--topbar-muted: #94a3b8;
	--topbar-border: #1e293b;
	--topbar-hover: #ffffff;
	--tag-bg: #eef2ff;
	--tag-fg: #3b5998;
	--success: #16a34a;
	--warning: #ca8a04;
	--danger: #dc2626;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--canvas: #0c0d10;
	--bg: #13141a;
	--fg: #fafafa;
	--muted: #a1a1aa;
	--border: #2a2d36;
	--accent: #60a5fa;
	--accent-hover: #93c5fd;
	--surface: #18181b;
	--topbar-bg: #1a1a1a;
	--topbar-fg: #e2e8f0;
	--topbar-muted: #94a3b8;
	--topbar-border: #1e293b;
	--topbar-hover: #ffffff;
	--tag-bg: #1e293b;
	--tag-fg: #93c5fd;
}

@media (prefers-color-scheme: dark) {
	html[data-theme="system"] {
		color-scheme: dark;
		--canvas: #0c0d10;
		--bg: #13141a;
		--fg: #fafafa;
		--muted: #a1a1aa;
		--border: #2a2d36;
		--accent: #60a5fa;
		--accent-hover: #93c5fd;
		--surface: #18181b;
		--topbar-bg: #1a1a1a;
		--topbar-fg: #e2e8f0;
		--topbar-muted: #94a3b8;
		--topbar-border: #1e293b;
		--topbar-hover: #ffffff;
		--tag-bg: #1e293b;
		--tag-fg: #93c5fd;
	}
}

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

/* --- app shell (signed-in + workspace + ticket) --- */
body {
	font-family: Verdana, Geneva, ui-sans-serif, system-ui, sans-serif;
	font-size: 10pt;
	background: var(--canvas);
	color: var(--fg);
	line-height: 1.45;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.container {
	max-width: min(76rem, 96vw);
	margin: 0 auto;
	padding: 0 0.65rem;
	width: 100%;
}

/* Single top strip; colors from --topbar-* */
.site-header {
	background: var(--topbar-bg);
	color: var(--topbar-fg);
	border-bottom: 1px solid var(--topbar-border);
	padding: 0.2rem 0;
	font-size: 10pt;
	line-height: 1.35;
}

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

.topbar-left,
.topbar-right {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.topbar-logo {
	font-weight: 700;
	color: var(--topbar-fg);
	text-decoration: none;
}

.topbar-logo:hover {
	color: var(--topbar-hover);
	text-decoration: none;
}

.topbar-link {
	color: var(--topbar-muted);
	font-weight: 600;
	text-decoration: none;
}

.topbar-link:hover {
	color: var(--topbar-hover);
	text-decoration: underline;
}

.topbar-sep {
	color: var(--topbar-muted);
	opacity: 0.65;
	user-select: none;
	padding: 0 0.1rem;
}

.topbar-user {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--topbar-fg);
	font-weight: 600;
	text-decoration: none;
}

.topbar-user:hover {
	color: var(--topbar-hover);
	text-decoration: none;
}

.topbar-handle {
	font-size: 10pt;
}

.topbar-avatar {
	border-radius: 2px;
	vertical-align: middle;
	object-fit: cover;
}

.site-main {
	flex: 1;
	padding: 0.65rem 0 1.25rem;
	background: var(--canvas);
}

.site-footer {
	border-top: 1px solid var(--border);
	padding: 0.5rem 0 0.75rem;
	text-align: center;
	font-size: 8pt;
	color: var(--muted);
	margin-top: auto;
	background: var(--canvas);
}

.site-footer-text {
	margin: 0;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: 0.875rem;
	padding: 0.375rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--fg);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
	border-color: var(--accent);
}

textarea.md-textarea {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.45;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--fg);
	resize: vertical;
}

textarea.md-textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
	border-color: var(--accent);
}

pre.md-body.md-body-err {
	font-size: 0.8125rem;
	color: var(--danger);
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}

button,
.btn {
	font-family: inherit;
	font-size: 0.8125rem;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--fg);
	cursor: pointer;
}

button:hover,
.btn:hover {
	background: var(--bg);
}

.btn-primary {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.btn-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

a.btn-primary,
a.btn-primary:hover {
	color: #fff;
	text-decoration: none;
}

a.btn-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.btn-danger {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
}

.btn-danger:hover {
	filter: brightness(1.08);
}

.badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 500;
}

html .badge-open {
	background: #dcfce7;
	color: var(--success);
}

html .badge-in-progress {
	background: #fef9c3;
	color: var(--warning);
}

html .badge-closed {
	background: #fde2e2;
	color: var(--danger);
}

html[data-theme="dark"] .badge-open {
	background: #052e16;
}

html[data-theme="dark"] .badge-in-progress {
	background: #422006;
}

html[data-theme="dark"] .badge-closed {
	background: #450a0a;
}

@media (prefers-color-scheme: dark) {
	html[data-theme="system"] .badge-open {
		background: #052e16;
	}

	html[data-theme="system"] .badge-in-progress {
		background: #422006;
	}

	html[data-theme="system"] .badge-closed {
		background: #450a0a;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

th {
	text-align: left;
	font-weight: 600;
	color: var(--muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

th,
td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
}

tr:hover {
	background: var(--surface);
}

.md-body {
	font-size: 0.875rem;
	line-height: 1.55;
	word-wrap: break-word;
}

.md-body h1,
.md-body h2,
.md-body h3 {
	font-size: 1rem;
	margin: 0.75rem 0 0.35rem;
}

.md-body p {
	margin: 0.5rem 0;
}

.md-body pre {
	background: var(--bg);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	overflow: auto;
	font-size: 0.8125rem;
	border: 1px solid var(--border);
}

.md-body code {
	font-family: ui-monospace, monospace;
	font-size: 0.8125rem;
}

.md-body p code,
.md-body li code {
	background: var(--bg);
	padding: 0.1rem 0.3rem;
	border-radius: 3px;
}

.md-body img {
	max-width: 100%;
	max-height: 250px;
	width: auto;
	border-radius: 4px;
	cursor: zoom-in;
	transition: max-height 0.2s ease;
	object-fit: contain;
	object-position: left;
}

.md-body img.img-expanded {
	max-height: 90vh;
	cursor: zoom-out;
}

.md-body blockquote {
	border-left: 2px solid var(--accent);
	margin: 0.5rem 0;
	padding-left: 0.75rem;
	color: var(--muted);
}

.md-body a {
	word-break: break-all;
}

.md-body ul,
.md-body ol {
	padding-left: 1.25rem;
	margin: 0.35rem 0;
}

.md-body table {
	font-size: 0.8125rem;
}

.cmt-thread {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 2px solid var(--border);
}

.cmt-thread > h2 {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.cmt-item {
	border-top: 1px solid var(--border);
	padding: 0.5rem 0 0.35rem;
	font-family: Verdana, Geneva, ui-sans-serif, sans-serif;
	font-size: 0.8125rem;
}

.cmt-meta {
	color: var(--muted);
	font-size: 0.75rem;
	margin-bottom: 0.35rem;
}

.cmt-toolbar {
	width: 100%;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

.cmt-pills {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.35rem;
	z-index: 1;
}

.cmt-pills > details {
	flex: 0 0 auto;
	margin: 0;
}

.cmt-pills > details[open] {
	z-index: 4;
}

.cmt-pills > details[open] .cmt-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.35rem);
	margin-top: 0;
	z-index: 5;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .cmt-pills > details[open] .cmt-panel {
	box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	html[data-theme="system"] .cmt-pills > details[open] .cmt-panel {
		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
	}
}

.cmt-item:has(.cmt-pills details[open]) {
	padding-bottom: min(42vh, 18rem);
}

.cmt-pill {
	cursor: pointer;
	list-style: none;
	list-style-type: none;
	user-select: none;
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
	font-size: 0.75rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.cmt-pill:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.cmt-pills details[open] > summary.cmt-pill {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--surface);
}

.cmt-pills summary::-webkit-details-marker {
	display: none;
}

.cmt-panel {
	margin-top: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
}

.cmt-panel--composer {
	margin-top: 0;
	padding: 0.65rem 0.85rem;
}

.cmt-composer {
	margin-top: 1.1rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--border);
}

.cmt-composer-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--fg);
	margin-bottom: 0.45rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.cmt-form-actions--single {
	justify-content: flex-end;
}

.cmt-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	margin-top: 0.65rem;
}

.cmt-form-actions .cmt-del-foot {
	margin-right: auto;
	font-size: 0.8125rem;
}

.cmt-del,
.cmt-del-foot {
	color: var(--muted);
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.cmt-del:hover,
.cmt-del-foot:hover {
	color: var(--danger);
	text-decoration: underline;
}

.cmt-thread .cmt-form-wrap .btn,
.cmt-thread .cmt-form-wrap .btn-primary {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.8125rem;
	margin-top: 0;
}

.cmt-toolbar .cmt-form-wrap {
	margin-top: 0;
}

/* --- workspace list (dashboard) --- */
.ws-dash {
	font-size: 10pt;
	line-height: 1.45;
	max-width: 100%;
}

.ws-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.ws-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--fg);
	letter-spacing: -0.02em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.ws-filter {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ws-field {
	box-sizing: border-box;
	margin: 0;
	font-family: Verdana, Geneva, ui-sans-serif, sans-serif;
	font-size: 10pt;
	height: 2rem;
	padding: 0 0.4rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--fg);
	min-width: 12rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ws-field:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.ws-field-wide {
	min-width: 16rem;
}

.ws-submit {
	font-family: inherit;
	font-size: 9pt;
	font-weight: 600;
	height: 2rem;
	padding: 0 0.6rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--fg);
	cursor: pointer;
	transition: all 0.15s;
}

.ws-submit:hover {
	background: var(--bg);
	border-color: var(--muted);
}

.ws-clear {
	font-size: 9pt;
	color: var(--muted);
	margin-left: 0.25rem;
}

.ws-clear:hover {
	color: var(--accent);
}

.ws-empty {
	padding: 2rem 1rem;
	color: var(--muted);
	text-align: center;
	border: 1px dashed var(--border);
	border-radius: 6px;
	background: var(--surface);
}

.ws-empty-hint {
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

.ws-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 10pt;
	margin-top: 0.15rem;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 3px;
	overflow: hidden;
}

.ws-table thead {
	background: var(--bg);
}

.ws-table th {
	padding: 0.3rem 0.45rem;
	font-size: 9pt;
	font-weight: 600;
	color: var(--muted);
	text-align: left;
	text-transform: lowercase;
	letter-spacing: 0;
	border-bottom: 1px solid var(--border);
}

.ws-th-num,
.ws-td-num {
	text-align: right;
	width: 4rem;
	font-variant-numeric: tabular-nums;
}

.ws-th-role,
.ws-td-role {
	text-align: right;
	width: 5.5rem;
	color: var(--muted);
}

.ws-table td {
	padding: 0.28rem 0.45rem;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

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

.ws-table tbody tr:hover td {
	background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* Dashboard workspace list: fluid layout */
.ws-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	overflow: hidden;
}

.ws-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--border);
	gap: 0.75rem;
	transition: background-color 0.15s;
}

.ws-item:last-child {
	border-bottom: none;
}

.ws-item:hover {
	background: var(--bg);
}

.ws-item-main {
	flex: 1;
	min-width: 0;
}

.ws-item-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.ws-item-name {
	font-weight: 600;
	color: var(--fg);
	font-size: 1.05rem;
}

.ws-item-link:hover .ws-item-name {
	color: var(--accent);
}

.ws-item-owner {
	color: var(--muted);
	font-size: 0.85rem;
}

.ws-item-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.ws-item-stat {
	font-variant-numeric: tabular-nums;
}

.ws-item-role {
	text-transform: lowercase;
}

.ws-item-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.ws-item:hover .ws-item-actions {
	opacity: 1;
}

.ws-act {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	border: 1px solid transparent;
	color: var(--muted);
	text-decoration: none;
	transition: all 0.15s;
}

.ws-act:hover {
	border-color: var(--border);
	color: var(--fg);
	background: var(--surface);
}

.ws-act-primary {
	color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.ws-act-primary:hover {
	border-color: var(--accent);
	color: var(--accent-hover);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ws-act-danger {
	color: var(--danger);
}

.ws-act-danger:hover {
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 30%, transparent);
	background: color-mix(in srgb, var(--danger) 5%, transparent);
}

.ws-create {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--border);
}

.ws-create-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ws-create-label {
	font-weight: 600;
	color: var(--muted);
	font-size: 0.95rem;
}

.ws-name {
	font-weight: 600;
	color: var(--fg);
	text-decoration: none;
}

.ws-name:hover {
	color: var(--accent);
	text-decoration: underline;
}

.ws-td-num {
	color: var(--muted);
}

select.ws-field,
.ws-field-select {
	font-family: inherit;
	min-width: 5.5rem;
	max-width: 11rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1em;
	padding-right: 2rem;
}

/* --- workspace ticket list --- */
.wv-page {
	font-size: 10pt;
	line-height: 1.45;
	max-width: 100%;
}

.wv-banner {
	margin: 0 0 0.5rem;
	padding: 0.35rem 0.45rem;
	font-size: 9pt;
	color: var(--muted);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 3px;
}

.wv-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.wv-heading {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wv-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	color: var(--fg);
	letter-spacing: -0.02em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.wv-meta {
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted);
}

.wv-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.wv-act {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s;
}

.wv-act:hover {
	background: var(--bg);
	border-color: var(--muted);
}

.wv-act-primary {
	background: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 80%, transparent);
	color: #fff;
}

.wv-act-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff;
}

.wv-act-danger {
	color: var(--danger);
	border-color: var(--border);
}

.wv-act-danger:hover {
	border-color: var(--danger);
	color: var(--danger);
}

.wv-act-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.wv-share-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.8rem;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	border-radius: 12px;
	margin-left: 0.5rem;
}

.wv-share-label {
	color: var(--muted);
	font-weight: 600;
}

.wv-share-url {
	color: var(--accent);
	word-break: break-all;
	user-select: all;
}

.wv-share-line {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-wrap: wrap;
	max-width: 100%;
}

.btn.sk-copy,
button.sk-copy {
	font-size: 0.75rem;
	padding: 0.15rem 0.45rem;
	line-height: 1.25;
}

.wv-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
}

.wv-filter-group {
	display: flex;
	align-items: center;
}

.wv-filter-group .ws-field {
	margin: 0;
}

.wv-filter-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

.wv-item {
	align-items: flex-start;
	padding: 0.45rem 0.6rem;
}

.wv-item-prio {
	width: 1.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	font-weight: 600;
	font-size: 0.95rem;
	margin-top: 0.15rem;
}

.wv-item-main {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.wv-item-title-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.wv-item-title {
	font-weight: 600;
	color: var(--fg);
	font-size: 1.05rem;
	text-decoration: none;
}

.wv-item-title:hover {
	color: var(--accent);
	text-decoration: underline;
}

.wv-item-meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var(--muted);
	flex-wrap: wrap;
}

.wv-item-sep {
	opacity: 0.5;
}

.wv-tags {
	display: flex;
	gap: 0.3rem;
	align-items: center;
}

.wv-tag {
	font-size: 0.75rem;
	padding: 0.1rem 0.3rem;
	border-radius: 3px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--muted);
	text-decoration: none;
	transition: border-color 0.15s;
}

.wv-tag:hover {
	border-color: var(--muted);
	color: var(--fg);
}

.wv-unassigned {
	color: var(--muted);
	font-style: italic;
}

.wv-item-status {
	margin-left: auto;
	white-space: nowrap;
}

.wv-badge {
	font-size: 0.75rem;
	padding: 0.15rem 0.4rem;
	font-weight: 600;
}

.wv-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--border);
}

.wv-page-link {
	font-size: 9pt;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s;
}

.wv-page-link:hover {
	color: var(--accent);
}

.wv-page-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.wv-page-count {
	font-size: 9pt;
	color: var(--muted);
}

/* --- single ticket view --- */
.tk-page {
	font-size: 10pt;
	line-height: 1.45;
	max-width: 100%;
}

.tk-back {
	display: inline-block;
	font-size: 9pt;
	color: var(--muted);
	text-decoration: none;
	margin-bottom: 0.45rem;
}

.tk-back:hover {
	color: var(--accent);
	text-decoration: underline;
}

.tk-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.55rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--border);
}

.tk-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--fg);
	letter-spacing: -0.02em;
	line-height: 1.3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.tk-meta {
	margin: 0.2rem 0 0;
	font-size: 9pt;
	color: var(--muted);
}

.tk-tags {
	margin: 0.25rem 0 0;
	font-size: 9pt;
	color: var(--muted);
}

.tk-tags-label {
	font-weight: 600;
	margin-right: 0.35rem;
}

.tk-tags-sep {
	color: var(--border);
}

.tk-tag {
	color: var(--tag-fg);
	text-decoration: none;
}

.tk-tag:hover {
	text-decoration: underline;
}

.tk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.tk-actions .badge {
	font-size: 8pt;
	padding: 0.06rem 0.32rem;
	font-weight: 600;
}

.tk-share {
	margin-bottom: 0.5rem;
}

/* Ticket view labels */
.tk-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.4rem;
}

.tk-label-group {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 9pt;
	color: var(--muted);
}

.tk-label-name {
	font-weight: 600;
	margin-right: 0.1rem;
}

.tk-assignee, .tk-tag {
	color: var(--accent);
	text-decoration: none;
}

.tk-assignee:hover, .tk-tag:hover {
	text-decoration: underline;
}

.tk-desc {
	margin: 1.25rem 0 1rem;
	font-size: 10pt;
	color: var(--fg);
}

.tk-md img {
	max-width: 100%;
	border-radius: 4px;
	cursor: zoom-in;
	transition: transform 0.2s ease, max-height 0.2s ease;
	max-height: 400px;
	object-fit: contain;
}

.tk-md img.img-expanded {
	cursor: zoom-out;
	max-height: 90vh;
	transform: scale(1.02);
}

.tk-md {
	max-width: 48rem;
}

.tk-desc-empty {
	margin: 0;
	color: var(--muted);
	font-style: italic;
	font-size: 9pt;
}

section.cmt-thread.tk-discuss {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

section.cmt-thread.tk-discuss > h2.tk-discuss-h {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0.01em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.tk-page .cmt-item {
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	margin-top: 0.25rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--border);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5;
	transition: border-color 0.15s;
}

.tk-page .cmt-item:hover {
	border-left-color: var(--muted);
}

.tk-page .cmt-meta {
	font-size: 8pt;
	color: var(--muted);
	margin-bottom: 0.25rem;
}

.tk-page .cmt-anchor {
	color: var(--muted);
	text-decoration: none;
}

.tk-page .cmt-anchor:hover {
	color: var(--accent);
	text-decoration: underline;
}

.tk-page .cmt-user {
	color: var(--muted);
	text-decoration: none;
	font-weight: 600;
}

.tk-page a.cmt-user:hover {
	color: var(--accent);
}

.tk-page .cmt-toolbar {
	margin-top: 0.35rem;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.tk-page .cmt-item:hover .cmt-toolbar {
	opacity: 1;
}

.tk-page .cmt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: baseline;
}

.tk-page .cmt-action {
	font-size: 8pt;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	text-decoration: none;
	list-style: none;
	transition: color 0.15s;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}

.hidden {
	display: none !important;
}

.tk-page .cmt-action:hover {
	color: var(--fg);
}

.tk-page .cmt-action-danger:hover {
	color: #ef4444;
}



.tk-page .cmt-panel {
	flex-basis: 100%;
	width: 100%;
	margin-top: 0.15rem;
	padding: 0;
}

.tk-page .cmt-form-actions {
	margin-top: 0.35rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
}

.tk-page .ws-textarea {
	width: 100%;
	min-height: 4rem;
	resize: vertical;
	padding: 0.4rem;
	height: auto;
}

.tk-composer {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

/* --- edit / new ticket forms --- */
.tk-form-page {
	font-size: 10pt;
	line-height: 1.45;
	max-width: 40rem;
}

.tk-form-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.65rem;
	margin-bottom: 0.35rem;
}

.tk-form-workspace {
	font-size: 9pt;
	color: var(--muted);
}

.tk-form-title {
	font-size: 11pt;
	font-weight: 700;
	margin: 0 0 0.65rem;
	color: var(--fg);
	text-transform: lowercase;
	letter-spacing: -0.02em;
}

.tk-form {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.tk-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.tk-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	align-items: flex-end;
}

.tk-field-grow {
	flex: 1;
	min-width: 10rem;
}

.tk-field-narrow {
	flex: 0 0 auto;
	min-width: 5rem;
}

.tk-label {
	font-size: 9pt;
	font-weight: 600;
	color: var(--muted);
}

.tk-hint {
	font-size: 8pt;
	color: var(--muted);
	margin: 0;
	line-height: 1.35;
}

.tk-input-wide {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.tk-textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.tk-checklist {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.15rem;
}

.tk-check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 9pt;
	cursor: pointer;
}

.tk-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	margin-top: 0.35rem;
}

/* --- marketing + auth (narrow column inside shared Layout) --- */
.public-sheet {
	max-width: 36rem;
	margin: 0 auto;
	padding: 0.5rem 0 1rem;
}

.public-title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.public-lead {
	font-size: 0.9375rem;
	color: var(--fg);
	margin-bottom: 0.75rem;
}

.public-meta {
	font-size: 0.8125rem;
	color: var(--muted);
	margin-bottom: 1rem;
}

.public-data-note {
	font-size: 0.8125rem;
	color: var(--muted);
	line-height: 1.45;
	margin-bottom: 1rem;
	padding: 0.5rem 0 0.5rem 0.65rem;
	border-left: 3px solid var(--accent);
}

.public-actions {
	margin-bottom: 0.75rem;
}

.public-footlink {
	font-size: 0.875rem;
	color: var(--muted);
}

.public-form-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.public-sub {
	font-size: 0.875rem;
	color: var(--muted);
	margin-bottom: 0.75rem;
	line-height: 1.45;
}

.public-sheet .lp-form {
	margin-top: 0.25rem;
}

.public-sheet .lp-input,
.public-sheet .lp-textarea {
	width: 100%;
	max-width: 22rem;
}

.public-sheet .lp-error {
	font-size: 9pt;
	color: var(--danger);
	margin: 0 0 0.5rem;
	line-height: 1.35;
}

.public-sheet .lp-actions {
	margin-top: 0.35rem;
}

.public-sheet .lp-muted {
	font-size: 8pt;
	color: var(--muted);
	margin-top: 0.5rem;
	line-height: 1.45;
}

.public-sheet .lp-links {
	margin-top: 0.65rem;
	font-size: 9pt;
	color: var(--muted);
}

.public-sheet .lp-links-sep {
	margin: 0 0.35rem;
	color: var(--border);
}

.public-sheet .lp-field {
	margin-bottom: 0.65rem;
}

.public-sheet .lp-label {
	display: block;
	font-size: 9pt;
	font-weight: 600;
	color: var(--fg);
	margin-bottom: 0.2rem;
}

.public-sheet .lp-recover-q {
	font-size: 10pt;
	color: var(--fg);
	margin-bottom: 0.65rem;
	padding: 0.45rem 0.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
}

/* --- signed-in settings (/settings) --- */
.set-form {
	/* max-width: min(48rem, 100%); */
}

.set-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	margin-bottom: 1rem;
}

.set-row > .set-fieldset {
	flex: 1 1 17rem;
	min-width: min(100%, 14rem);
	margin-bottom: 0;
}

.set-fieldset {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
}

.set-fieldset-account {
	width: 100%;
	box-sizing: border-box;
}

.set-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

/* Standalone ticket raw HTML (/t/…/raw, /s/…/raw) — uses same theme tokens as the app */
body.raw-md-page {
	display: block;
	min-height: 100vh;
	margin: 0;
	background: var(--canvas);
	color: var(--fg);
	font-family: Verdana, Geneva, ui-sans-serif, system-ui, sans-serif;
	font-size: 10pt;
	line-height: 1.45;
}

.raw-md-bar {
	font-size: 0.8125rem;
	padding: 0.45rem 1rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.raw-md-bar a {
	color: var(--accent);
	text-decoration: none;
}

.raw-md-bar a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.raw-md-bar-suffix {
	color: var(--muted);
}

.raw-md-pre {
	margin: 0;
	padding: 1rem;
	font: 0.8125rem/1.45 ui-monospace, monospace;
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--surface);
	color: var(--fg);
}