/* Temaet er bygget fra design/designsystemet.config.json, inspirert av Lovisenberg sykehus */
body {
	margin: 0;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--ds-color-neutral-background-tinted);
	color: var(--ds-color-neutral-text-default);
}

.app-header {
	display: flex;
	align-items: center;
	gap: var(--ds-size-6);
	padding: var(--ds-size-4) var(--ds-size-6);
	background: var(--ds-color-accent-base-default);
	color: var(--ds-color-accent-base-contrast-default);
}

.app-header .ds-link,
.app-header .ds-button {
	--dsc-link-color: var(--ds-color-accent-base-contrast-default);
	--dsc-link-color--hover: var(--ds-color-accent-base-contrast-default);
	--dsc-link-color--visited: var(--ds-color-accent-base-contrast-default);
	--dsc-button-color: var(--ds-color-accent-base-contrast-default);
	--dsc-button-color--hover: var(--ds-color-accent-base-contrast-default);
	--dsc-button-background--hover: var(--ds-color-accent-base-hover);
}

.app-header .ds-link {
	text-decoration-color: transparent;
}

.app-header .ds-link:hover {
	text-decoration-color: currentColor;
}

.app-header form {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--ds-size-3);
}

.app-name {
	font-weight: 700;
	font-size: var(--ds-font-size-5);
	letter-spacing: -0.01em;
	color: inherit;
	text-decoration: none;
}

.app-user {
	color: var(--ds-color-accent-base-contrast-subtle);
}

/* Innholdet ligger på et hvitt ark mot den lyse bakgrunnen */
main {
	max-width: 60rem;
	margin: var(--ds-size-8) auto;
	padding: var(--ds-size-8) var(--ds-size-8);
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-6);
	background: var(--ds-color-neutral-background-default);
	border-radius: var(--ds-border-radius-lg);
	box-shadow: var(--ds-shadow-sm);
}

@media (max-width: 48rem) {
	main {
		margin: 0;
		padding: var(--ds-size-6) var(--ds-size-4);
		border-radius: 0;
	}
}

main h1.ds-heading {
	color: var(--ds-color-accent-text-default);
}

.page-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-size-4);
}

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-5);
}

.row {
	display: flex;
	align-items: flex-end;
	gap: var(--ds-size-4);
	flex-wrap: wrap;
}

.row > .ds-field {
	flex: 1 1 16rem;
}

.lang-tag {
	font-size: var(--ds-font-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

.login {
	max-width: 24rem;
}

/* Detaljside */
.facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--ds-size-2) var(--ds-size-6);
	margin: 0;
}

.facts dt {
	font-weight: 600;
}

.facts dd {
	margin: 0;
}

.synonyms {
	margin: 0;
	padding-left: var(--ds-size-5);
}

/* Markdown-editor med forhåndsvisning ved siden av */
.markdown-editor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ds-size-4);
}

@media (max-width: 48rem) {
	.markdown-editor {
		grid-template-columns: 1fr;
	}
}

.markdown-editor textarea {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	min-height: 18rem;
}

.markdown-preview {
	padding: var(--ds-size-3) var(--ds-size-4);
	border: 1px solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-md);
	background: var(--ds-color-neutral-background-tinted);
	overflow-wrap: anywhere;
}

.preview-empty {
	color: var(--ds-color-neutral-text-subtle);
}

.markdown > :first-child {
	margin-top: 0;
}

.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
	margin: var(--ds-size-5) 0 var(--ds-size-2);
	line-height: 1.3;
}

.markdown p, .markdown ul, .markdown ol {
	margin: 0 0 var(--ds-size-3);
	line-height: 1.6;
}

.markdown table {
	border-collapse: collapse;
}

.markdown th, .markdown td {
	border: 1px solid var(--ds-color-neutral-border-subtle);
	padding: var(--ds-size-1) var(--ds-size-2);
}

/* PubMed-søk */
.query {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--ds-font-size-2);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.hit-meta {
	margin-top: var(--ds-size-1);
	font-size: var(--ds-font-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

/* Testsøk i registreringsskjemaet */
.htmx-indicator {
	display: none;
	align-items: center;
	gap: var(--ds-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	display: inline-flex;
}

.preview-terms td:nth-child(2),
.preview-terms td:nth-child(3) {
	text-align: right;
}

.app-nav {
	display: flex;
	gap: var(--ds-size-5);
}

/* Vurderingsprompt */
.prompt-text {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--ds-font-size-2);
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

pre.prompt-text {
	margin: 0;
	padding: var(--ds-size-3) var(--ds-size-4);
	border: 1px solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-md);
	background: var(--ds-color-neutral-background-tinted);
}

/* KI-ens vurdering i treff-listen */
.assessment {
	min-width: 9rem;
}

.reasoning summary {
	cursor: pointer;
	font-size: var(--ds-font-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

.reasoning p {
	margin: var(--ds-size-1) 0 0;
}

/* Diagnosesiden: faktaboks og treff-filter */
.fact-card {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-4);
	padding: var(--ds-size-5) var(--ds-size-6);
	border-radius: var(--ds-border-radius-lg);
	background: var(--ds-color-accent-surface-tinted);
}

.fact-card:has(#smt-panel:empty) {
	gap: 0;
}

.smt-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ds-size-2);
}

.more-synonyms summary,
.more-details summary {
	cursor: pointer;
	font-size: var(--ds-font-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

.status-block > * {
	margin: 0 0 var(--ds-size-2);
}

.hit-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-size-2);
}

.more-details[open] > :not(summary) {
	margin-top: var(--ds-size-2);
}

/* Arbeidslisten */
.work-list {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-3);
}

.work-item {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-3);
	padding: var(--ds-size-4) var(--ds-size-5);
	border: 1px solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-lg);
}

.work-title {
	font-weight: 600;
}

.work-ai {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ds-size-2);
	padding: var(--ds-size-3) var(--ds-size-4);
	border-radius: var(--ds-border-radius-md);
	background: var(--ds-color-neutral-background-tinted);
}

.work-ai p {
	flex-basis: 100%;
	margin: 0;
}

.work-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-size-2);
}

.work-done {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--ds-size-2);
	background: var(--ds-color-neutral-background-tinted);
}

.work-done p {
	margin: 0;
}

/* Statistikk */
.stat-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--ds-size-3);
}

.stat-tile {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-1);
	padding: var(--ds-size-4) var(--ds-size-5);
	border-radius: var(--ds-border-radius-lg);
	background: var(--ds-color-accent-surface-tinted);
}

.stat-label {
	font-size: var(--ds-font-size-2);
	font-weight: 600;
	color: var(--ds-color-neutral-text-subtle);
}

.stat-value {
	font-size: var(--ds-font-size-8);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ds-color-accent-text-default);
	font-variant-numeric: tabular-nums;
}

.stat-note {
	font-size: var(--ds-font-size-2);
	color: var(--ds-color-neutral-text-subtle);
}

.stat-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--ds-size-8);
}

/* Liggende stolper: én farge, verdien ved enden */
.bars {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--ds-size-2) var(--ds-size-4);
	align-items: center;
	margin: 0;
}

.bars dt {
	font-size: var(--ds-font-size-2);
}

.bars dd {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	margin: 0;
}

.bar {
	height: 12px;
	min-width: 2px;
	border-radius: 0 4px 4px 0;
	background: var(--ds-color-accent-base-default);
}

.bar-value {
	font-size: var(--ds-font-size-2);
	font-variant-numeric: tabular-nums;
}

.relevant-list {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}