/* Member portal (/medlem/) – plain CSS, uses the theme's custom properties */

.twp-portal .content-wrapper { padding-left: 16px; padding-right: 16px; }

.portal {
	--portal-radius: 8px;
	--portal-border: var(--border-color, #e1e1e1);
	--portal-muted: #6b6b6b;
	--portal-bg: #f7f6f4;
	--portal-error: #b32d2e;
	--portal-success: #2e7d32;
	max-width: 880px;
	margin: 40px auto 80px;
}
.portal--narrow { max-width: 520px; }
/* Modest headings – the theme's h1 is sized for heroes */
.portal .portal__title { margin: 0 0 16px; font-size: 1.75rem; line-height: 1.25; }
@media (min-width: 768px) { .portal .portal__title { font-size: 2rem; } }

/* Step indicator */
.portal-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; font-size: .875rem; color: var(--portal-muted); }
.portal-steps li { display: flex; align-items: center; gap: 6px; }
.portal-steps li + li::before { content: ''; width: 20px; height: 1px; background: var(--portal-border); margin-right: 2px; }
.portal-steps__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; border: 1px solid #c9c9c9; font-weight: 700; font-size: .75rem;
}
.portal-steps .is-current { color: inherit; font-weight: 700; }
.portal-steps .is-current .portal-steps__no { background: var(--color-primary, #333); border-color: var(--color-primary, #333); color: #fff; }
.portal-steps .is-done .portal-steps__no { border-color: var(--color-primary, #333); color: var(--color-primary, #333); }

/* Choice cards */
.portal-choice { display: grid; gap: 12px; }
.portal-choice__card {
	position: relative; display: block; padding: 20px 52px 20px 20px;
	border: 2px solid var(--portal-border); border-radius: var(--portal-radius);
	text-decoration: none !important; color: inherit; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.portal-choice__card:hover, .portal-choice__card:focus-visible { border-color: var(--color-primary, #333); box-shadow: var(--box-shadow); }
.portal-choice__title { display: block; font-weight: 700; font-size: 1.25rem; margin-bottom: 4px; color: var(--color-primary, #333); }
.portal-choice__text { display: block; color: var(--portal-muted); }
.portal-choice__arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--color-primary, #333); }
.portal__muted { color: var(--portal-muted); font-size: .9375rem; }
.portal *, .portal *::before, .portal *::after { box-sizing: border-box; }
.portal a:not(.portal-button):not(.portal-choice__card):not(.portal-choose__item) { color: var(--color-primary, #333); }

/* Notices */
.portal-notice {
	border-left: 4px solid var(--color-primary, #333);
	background: var(--portal-bg);
	padding: 12px 16px;
	margin: 0 0 24px;
	border-radius: 0 var(--portal-radius) var(--portal-radius) 0;
}
.portal-notice p, .portal-notice ul { margin: 4px 0; }
.portal-notice--success { border-color: var(--portal-success); }
.portal-notice--error { border-color: var(--portal-error); background: #fcf0f1; }

/* Top bar */
.portal-bar {
	display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center;
	font-size: .9375rem; color: var(--portal-muted);
	padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--portal-border);
}
.portal-bar__links { display: flex; gap: 16px; flex-wrap: wrap; }

/* Sections & fields */
.portal-section {
	background: #fff;
	border: 1px solid var(--portal-border);
	border-radius: var(--portal-radius);
	margin-bottom: 16px;
}
.portal-section[open] { margin-bottom: 24px; }
/* Collapsible section header */
.portal-section__head {
	display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; user-select: none;
	border-radius: var(--portal-radius);
}
.portal-section__head::-webkit-details-marker { display: none; }
.portal-section__head:hover { background: var(--portal-bg); }
.portal-section__head:focus-visible { outline: 2px solid var(--color-primary, #333); outline-offset: 2px; }
.portal-section[open] > .portal-section__head { border-bottom: 1px solid var(--portal-border); border-radius: var(--portal-radius) var(--portal-radius) 0 0; }
.portal-section__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
	background: var(--portal-bg); color: var(--color-primary, #333);
}
.portal-section__text { flex: 1; min-width: 0; }
.portal-section__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.portal-section__sub { display: block; margin-top: 2px; color: var(--portal-muted); font-size: .875rem; line-height: 1.35; }
.portal-section__changed { display: none; flex: none; padding: 2px 10px; border-radius: 999px; background: #fff4d6; color: #7a5a00; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.portal-section.is-changed .portal-section__changed { display: inline-block; }
.portal-section__chevron { flex: none; width: 12px; height: 12px; margin: 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s; color: var(--portal-muted); }
.portal-section[open] .portal-section__chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.portal-section__body { padding: 20px; }
@media (min-width: 768px) {
	.portal-section__head { padding: 20px 28px; }
	.portal-section__body { padding: 24px 32px 28px; }
}
@media (max-width: 480px) {
	.portal-section__icon { display: none; }
	.portal-section__head { gap: 10px; padding: 16px; }
	.portal-section__changed { font-size: 0; width: 10px; height: 10px; padding: 0; background: #e0a800; } /* just a dot */
}

.portal-field { display: block; margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.portal-field:last-child { margin-bottom: 0; }
.portal-field__label { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; font-size: 1rem; line-height: 1.4; font-family: inherit; float: none; width: auto; }
.portal-field__label abbr { text-decoration: none; color: var(--portal-error); }
.portal-field__help { display: block; color: var(--portal-muted); font-size: .875rem; line-height: 1.35; margin: 4px 0 8px; }

.portal input[type=text], .portal input[type=email], .portal input[type=tel], .portal input[type=search],
.portal select, .portal textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem; /* ≥16px – no zoom on iOS */
	padding: 10px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
	background: #fff;
	color: inherit;
}
.portal textarea { resize: vertical; line-height: 1.5; }
.portal input:focus, .portal select:focus, .portal textarea:focus {
	outline: 2px solid var(--color-primary, #333); outline-offset: 1px; border-color: transparent;
}
.portal-code { font-size: 1.75rem !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.portal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.portal-button {
	display: inline-block; cursor: pointer; border: 0;
	background: var(--btn-bg-color, #333); color: var(--btn-text-color, #fff);
	font-family: var(--btn-font-family, inherit); font-weight: 700; font-size: 1rem;
	padding: 12px 22px; border-radius: var(--btn-border-radius, 6px);
	text-decoration: none; line-height: 1.2;
}
.portal-button:hover { filter: brightness(1.1); }
.portal-button:disabled { opacity: .55; cursor: wait; }
.portal-button--secondary { background: #fff; color: var(--color-primary, #333); box-shadow: inset 0 0 0 2px currentColor; }
.portal-button--ghost { background: transparent; color: var(--color-primary, #333); padding-left: 8px; padding-right: 8px; text-decoration: underline; }
.portal-button--large { font-size: 1.125rem; padding: 14px 32px; }
.portal-login .portal-button { width: 100%; font-size: 1.125rem; }

/* Category pills */
.portal-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-pill { cursor: pointer; }
.portal-pill input { position: absolute; opacity: 0; pointer-events: none; }
.portal-pill span {
	display: inline-block; padding: 8px 14px; border-radius: 999px;
	border: 1px solid #c9c9c9; background: #fff; user-select: none;
}
.portal-pill input:checked + span { background: var(--color-primary, #333); border-color: var(--color-primary, #333); color: #fff; }
.portal-pill input:focus-visible + span { outline: 2px solid var(--color-primary, #333); outline-offset: 2px; }

/* Repeaters */
.portal-repeater__row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.portal-repeater__row > input { flex: 1 1 auto; min-width: 0; }
.portal-repeater__row--pair { flex-wrap: wrap; }
.portal-repeater__row--pair > input:first-child { flex: 1 1 100%; }
.portal-repeater__row--pair > input:nth-child(2) { flex: 1 1 0; }
@media (min-width: 640px) {
	.portal-repeater__row--pair { flex-wrap: nowrap; }
	.portal-repeater__row--pair > input:first-child { flex: 3 1 0; }
	.portal-repeater__row--pair > input:nth-child(2) { flex: 2 1 0; }
}
.portal-repeater__remove {
	flex: 0 0 44px; height: 44px; border: 1px solid #c9c9c9; border-radius: 6px; background: #fff;
	cursor: pointer; color: var(--portal-muted); font-size: 1rem;
}
.portal-repeater__remove:hover { color: var(--portal-error); border-color: var(--portal-error); }
.portal-repeater__add {
	border: 0; background: none; padding: 4px 0; cursor: pointer; font: inherit;
	color: var(--color-primary, #333); font-weight: 700;
}

/* Uploaders */
.portal-uploader__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.portal-uploader.has-items .portal-uploader__items { margin-bottom: 12px; }
.portal-uploader[data-uploader=single] .portal-uploader__items { grid-template-columns: minmax(0, 220px); }

.portal-uploader__drop {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 96px; padding: 16px; cursor: pointer;
	border: 2px dashed #bdbdbd; border-radius: var(--portal-radius); background: var(--portal-bg);
	color: var(--portal-muted); transition: border-color .15s, background .15s;
}
.portal-uploader__drop:hover, .portal-uploader__drop.is-over { border-color: var(--color-primary, #333); background: #fff; color: inherit; }
.portal-uploader__drop strong { color: var(--color-primary, #333); }
.portal-uploader__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.portal-uploader__drop:focus-within { outline: 2px solid var(--color-primary, #333); outline-offset: 2px; }
.portal-uploader[data-uploader=single].has-items .portal-uploader__drop span strong::after { content: ' (byt)'; font-weight: normal; }

.portal-uploader--multi .portal-uploader__items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); counter-reset: portal-img; }
.portal-image {
	display: flex; flex-direction: column; border-radius: var(--portal-radius); overflow: hidden;
	background: #fff; border: 1px solid var(--portal-border); box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.portal-image__media { position: relative; aspect-ratio: 1 / 1; background: #eee; }
.portal-uploader--multi .portal-image { counter-increment: portal-img; }
.portal-uploader--multi .portal-image__media { cursor: grab; }
/* Position number – makes the order and the arrows' effect obvious */
.portal-uploader--multi .portal-image__media::before {
	content: counter(portal-img); position: absolute; top: 6px; left: 6px; z-index: 1;
	min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; text-align: center;
	background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; font-weight: 600; line-height: 24px;
}
.portal-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-image.is-dragging { opacity: .4; }
.portal-image.is-uploading img { opacity: .5; }
.portal-image__placeholder {
	display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px;
	font-size: .75rem; word-break: break-all; text-align: center; color: var(--portal-muted);
}
.portal-image__progress { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.8); display: none; }
.portal-image.is-uploading .portal-image__progress { display: block; }
.portal-image__progress span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--color-primary, #333); transition: width .2s; }

/* Toolbar under the image: order (left) · delete (right, red) */
.portal-image__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px; border-top: 1px solid var(--portal-border); }
.portal-image__bar button {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; margin: 0;
	border: 1px solid var(--portal-border); background: #fff; color: #333; cursor: pointer; font: inherit; font-size: .8125rem;
}
.portal-image__bar svg { flex: none; }
.portal-image__order { display: inline-flex; }
.portal-image__move { width: 36px; padding: 0; }
.portal-image__move:first-child { border-radius: 6px 0 0 6px; }
.portal-image__move:last-child { border-radius: 0 6px 6px 0; margin-left: -1px !important; }
.portal-image__move:hover:not(:disabled) { background: var(--portal-bg); }
.portal-image__move:disabled { color: #c4c4c4; cursor: default; }
.portal-image__remove { margin-left: auto !important; padding: 0 10px; border-radius: 6px; color: var(--portal-error) !important; border-color: #ecc8c8 !important; }
.portal-image__remove:hover { background: var(--portal-error) !important; border-color: var(--portal-error) !important; color: #fff !important; }
/* Gallery tiles are narrow – icon only; the single image shows "Ta bort" */
.portal-uploader--multi .portal-image__remove { width: 36px; padding: 0; }
.portal-uploader--multi .portal-image__remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.portal-image__bar button:focus-visible { outline: 2px solid var(--color-primary, #333); outline-offset: 1px; position: relative; z-index: 1; }

.portal-image.is-error { border-color: var(--portal-error); }
.portal-image.is-error img { opacity: .3; }
.portal-image__error {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
	background: var(--portal-error); color: #fff; font-size: .75rem; line-height: 1.3;
}

/* Map */
.portal-map-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.portal-map-search input { flex: 1 1 260px; }
.portal-map-results { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--portal-border); border-radius: 6px; overflow: hidden; }
.portal-map-results li + li { border-top: 1px solid var(--portal-border); }
.portal-map-results button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 10px 12px; cursor: pointer; font: inherit; font-size: .9375rem; }
.portal-map-results button:hover { background: var(--portal-bg); }
.portal-map-results__info { padding: 10px 12px; color: var(--portal-muted); font-size: .9375rem; }
.portal-map { height: 360px; border-radius: var(--portal-radius); border: 1px solid var(--portal-border); margin-bottom: 16px; z-index: 0; }
.portal-latlng { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.portal-latlng .portal-field { flex: 1 1 160px; margin: 0; }

/* Save bar */
.portal-actions {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 14px 0; background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0));
}
.portal-actions__status { color: var(--portal-muted); font-size: .9375rem; }

/* Choose page */
.portal-choose { list-style: none; padding: 0; margin: 0 0 24px; }
.portal-choose__item {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius);
	text-decoration: none; color: inherit; font-weight: 700;
}
.portal-choose__item:hover { border-color: var(--color-primary, #333); }
.portal-badge { font-size: .75rem; font-weight: normal; padding: 2px 8px; border-radius: 999px; background: var(--portal-bg); color: var(--portal-muted); }


/* Help: "Så här fungerar det" guide + per-section "? Hjälp" toggles */
.portal-help__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
	background: var(--color-primary, #333); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; flex: none;
}
.portal-help > summary, .portal-guide > summary { list-style: none; cursor: pointer; }
.portal-help > summary::-webkit-details-marker, .portal-guide > summary::-webkit-details-marker { display: none; }
.portal-help { margin: 0 0 20px; text-align: right; }
.portal-help__toggle {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px 6px 8px; border: 1px solid var(--portal-border); border-radius: 999px; background: #fff;
	font-size: .875rem; font-weight: 600; user-select: none;
}
.portal-help__toggle:hover, .portal-help[open] .portal-help__toggle { border-color: var(--color-primary, #333); }
.portal-help[open] .portal-help__toggle::after { content: '✕'; margin-left: 2px; font-size: .75rem; color: var(--portal-muted); }
.portal-help__body {
	text-align: left; margin: 12px 0 4px; padding: 16px 20px; border-radius: var(--portal-radius);
	background: var(--portal-bg); border-left: 4px solid var(--color-primary, #333); font-size: .9375rem; line-height: 1.5;
}
.portal-help__body h3 { margin: 16px 0 6px; font-size: 1rem; }
.portal-help__body h3:first-child { margin-top: 0; }
.portal-help__body ol, .portal-help__body ul { margin: 0 0 8px; padding-left: 22px; }
.portal-help__body li { margin-bottom: 6px; }
.portal-help__body p { margin: 8px 0 0; }
.portal-help__body kbd, .portal-help__key {
	display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--portal-border); border-radius: 4px;
	background: #fff; color: #222; box-shadow: 0 1px 0 var(--portal-border); font: inherit; font-size: .8125rem; text-align: center; line-height: 1.5;
}
.portal-help__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border: 1px solid var(--portal-border); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.portal-help__chip .portal-help__icon { width: 16px; height: 16px; font-size: .625rem; }

.portal-guide { margin: 0 0 24px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: #fff; }
.portal-guide > summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-weight: 600; }
.portal-guide > summary::after { content: ''; margin-left: auto; margin-right: 8px; width: 10px; height: 10px; border-right: 2px solid var(--portal-muted); border-bottom: 2px solid var(--portal-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.portal-guide[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.portal-guide__body { padding: 0 18px 16px; }
.portal-guide__steps { margin: 0; padding-left: 22px; line-height: 1.5; }
.portal-guide__steps li { margin-bottom: 8px; }
.portal-guide__contact { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--portal-border); color: var(--portal-muted); }

/* "Om mig" editor */
.portal-editor { border: 1px solid var(--portal-border); border-radius: 6px; background: #fff; overflow: hidden; }
.portal-editor:focus-within { border-color: var(--color-primary, #333); box-shadow: 0 0 0 1px var(--color-primary, #333); }
.portal-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--portal-border); background: var(--portal-bg); }
.portal-editor__toolbar button {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 36px; margin: 0; padding: 0;
	border: 1px solid transparent; border-radius: 4px; background: transparent; color: #333; cursor: pointer; font: inherit; font-size: 1rem;
}
.portal-editor__toolbar button:hover { background: #fff; border-color: var(--portal-border); }
.portal-editor__toolbar button.is-active { background: #fff; border-color: var(--color-primary, #333); color: var(--color-primary, #333); }
.portal-editor__toolbar button:focus-visible { outline: 2px solid var(--color-primary, #333); outline-offset: 1px; }
.portal-editor__sep { width: 1px; height: 22px; margin: 0 4px; background: var(--portal-border); }
.portal-editor__area { min-height: 200px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; line-height: 1.55; outline: none; cursor: text; }
.portal-editor__area > :first-child { margin-top: 0; }
.portal-editor__area p { margin: 0 0 .8em; }
.portal-editor__area ul, .portal-editor__area ol { margin: 0 0 .8em; padding-left: 1.4em; }
.portal-editor__area a { color: var(--color-primary, #333); text-decoration: underline; }
.portal-editor__area.is-empty::before { content: attr(data-placeholder); color: var(--portal-muted); pointer-events: none; position: absolute; }

/* Webmaster: list of all artists */
.portal-badge--admin { background: var(--color-primary, #333); color: #fff; }
.portal-wm__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 8px; }
.portal-wm__search { flex: 1 1 280px; position: relative; display: block; }
.portal-wm__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--portal-muted); pointer-events: none; }
.portal-wm__search input { width: 100%; padding-left: 38px !important; }
.portal-wm__filters, .portal-wm__regions { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-wm__regions { margin: 16px 0 16px; }
.portal-wm__regions button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border: 1px solid var(--portal-border); border-radius: 999px; background: var(--portal-bg); cursor: pointer; font: inherit; font-size: .8125rem; color: #333; }
.portal-wm__regions button.is-active { background: #333; border-color: #333; color: #fff; }
.portal-wm__chip-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: #333; font-size: .75rem; font-weight: 700; text-align: center; line-height: 20px; }
.portal-wm__filters button { padding: 6px 12px; border: 1px solid var(--portal-border); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: .875rem; color: #333; }
.portal-wm__filters button.is-active { background: var(--color-primary, #333); border-color: var(--color-primary, #333); color: #fff; }
.portal-wm__count { margin: 0 0 8px; color: var(--portal-muted); font-size: .875rem; }
.portal-wm__table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--portal-border); font-size: .9375rem; } /* no overflow:hidden – it would break the sticky region headings */
.portal-wm__table th { text-align: left; padding: 10px 12px; background: var(--portal-bg); font-size: .8125rem; color: var(--portal-muted); font-weight: 600; border-bottom: 1px solid var(--portal-border); }
.portal-wm__table td { padding: 10px 12px; border-bottom: 1px solid var(--portal-border); vertical-align: middle; }
.portal-wm__table tbody tr:last-child td { border-bottom: 0; }
.portal-wm__table tbody tr:hover { background: #fafaf8; }
.portal-wm__name a { font-weight: 600; color: inherit !important; text-decoration: none; }
.portal-wm__name a:hover { text-decoration: underline; }
.portal-wm__meta { display: block; color: var(--portal-muted); font-size: .75rem; }
.portal-wm__emails span { display: block; font-size: .8125rem; word-break: break-all; }
.portal-wm__actions { white-space: nowrap; text-align: right; }
.portal-wm__view { display: inline-block; margin-left: 6px; padding: 4px 8px; text-decoration: none; }
.portal-button--small { padding: 6px 14px !important; font-size: .875rem !important; min-height: 0 !important; }
.portal-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: var(--portal-bg); color: var(--portal-muted); }
.portal-status--publish { background: #e6f4e7; color: #1e6b23; }
.portal-status--review { background: #fff4d6; color: #7a5a00; }
.portal-wm__empty { padding: 16px; text-align: center; color: var(--portal-muted); }
@media (max-width: 640px) {
	.portal-wm__hide-sm { display: none; }
	.portal-wm__table td, .portal-wm__table th { padding: 10px 8px; }
}
/* Banner when the webmaster edits someone else's page */
.portal-notice--webmaster { border-color: var(--color-primary, #333); }
.portal-wm__group-count { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--portal-bg); color: var(--portal-muted); font-size: .75rem; font-weight: 600; vertical-align: 2px; }
.portal-wm__group[hidden] { display: none; }
.portal .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Deltar i år" switch */
.portal-wm__col-active { width: 1%; white-space: nowrap; }
.portal-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; position: relative; }
.portal-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.portal-switch__track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #c9c9c9; transition: background .15s; flex: none; }
.portal-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.portal-switch input:checked + .portal-switch__track { background: var(--portal-success); }
.portal-switch input:checked + .portal-switch__track::after { transform: translateX(20px); }
.portal-switch input:focus-visible + .portal-switch__track { outline: 2px solid var(--color-primary, #333); outline-offset: 2px; }
.portal-switch input:disabled + .portal-switch__track { opacity: .5; }
.portal-switch input:disabled { cursor: default; }
.portal-switch__text { min-width: 2.2em; font-size: .875rem; font-weight: 600; }
.portal-wm__table tr.is-saved td { background: #eef7ee; transition: background .3s; }
.portal-wm__count--active { display: block; margin-top: -4px; }

/* Webmaster: new applications on top */
.portal-apps { margin: 24px 0 36px; padding: 20px; border: 2px solid #e0a800; border-radius: var(--portal-radius); background: #fffbef; }
.portal-apps__title { display: flex; align-items: center; gap: 8px; margin: 28px 0 4px; font-size: 1.375rem; }
.portal-apps .portal-apps__title { margin-top: 0; }
.portal-apps__count { min-width: 26px; padding: 0 8px; border-radius: 999px; background: #e0a800; color: #fff; font-size: .875rem; text-align: center; line-height: 24px; }
.portal-apps__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.portal-app { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; background: #fff; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); }
.portal-app--unfinished { opacity: .75; }
.portal-app__thumb { flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--portal-bg); }
.portal-app__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-app__info { flex: 1 1 240px; min-width: 0; }
.portal-app__name { display: block; font-size: 1.0625rem; }
.portal-app__meta { display: block; margin-top: 3px; color: var(--portal-muted); font-size: .8125rem; line-height: 1.4; word-break: break-word; }
.portal-app__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.portal-app__delete { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid #ecc8c8; border-radius: 6px; background: #fff; color: var(--portal-error); cursor: pointer; font: inherit; font-size: .875rem; }
.portal-app__delete:hover:not(:disabled) { background: var(--portal-error); border-color: var(--portal-error); color: #fff; }
.portal-app button:disabled { opacity: .5; cursor: wait; }
.portal-app__done { flex-basis: 100%; margin: 0; font-weight: 600; }
.portal-app.is-approved { border-color: var(--portal-success); background: #eef7ee; }
.portal-app.is-approved .portal-app__done { color: var(--portal-success); }
.portal-app.is-deleted { opacity: .6; }
.portal-app.is-deleted .portal-app__done { color: var(--portal-muted); }
.portal-status--new { background: #eee; color: #555; }

/* "Deltar i år" on the member's own page */
.portal-participation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: #fff; }
.portal-participation__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #b5b5b5; }
.portal-participation--on .portal-participation__dot { background: var(--portal-success); box-shadow: 0 0 0 4px #e6f4e7; }
.portal-participation--off { background: var(--portal-bg); }
.portal-participation__text { flex: 1 1 220px; line-height: 1.35; }
.portal-participation__text strong { display: block; }
.portal-participation__text span { color: var(--portal-muted); font-size: .875rem; }
.portal-participation__button { padding: 8px 14px; border: 1px solid var(--portal-border); border-radius: 6px; background: #fff; color: #333; cursor: pointer; font: inherit; font-size: .875rem; }
.portal-participation__button:hover { border-color: #333; }
.portal-participation__button--primary { background: var(--color-primary, #333); border-color: var(--color-primary, #333); color: #fff; font-weight: 600; }
.portal-participation__button--primary:hover { filter: brightness(1.1); }

/* Region choice (Plats och region) */
.portal-regions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--portal-border); }
.portal-regions__why { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; background: var(--portal-bg); font-size: .9375rem; line-height: 1.45; }
.portal-regions__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.portal-region { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--portal-border); border-radius: 8px; background: #fff; cursor: pointer; }
.portal-region input { margin: 0; accent-color: #333; width: 18px; height: 18px; flex: none; }
.portal-region__name { font-weight: 600; }
.portal-region:has(input:checked) { border-color: #333; box-shadow: inset 0 0 0 1px #333; }
.portal-region:hover { border-color: #333; }
.portal-region-hint { margin-top: 10px; padding: 10px 14px; border-radius: 6px; border-left: 4px solid var(--portal-border); background: var(--portal-bg); font-size: .9375rem; line-height: 1.45; }
.portal-region-hint.is-ok { border-color: var(--portal-success); background: #eef7ee; }
.portal-region-hint.is-warn { border-color: #e0a800; background: #fff6da; }
.portal-region-hint.is-suggest { border-color: var(--color-primary, #333); }
.portal-region-hint button { margin-left: 4px; padding: 4px 10px; border: 1px solid currentColor; border-radius: 6px; background: #fff; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; }

/* Delete page */
.portal-danger { margin: 40px 0 0; border: 1px solid #ecc8c8; border-radius: var(--portal-radius); background: #fff; }
.portal-danger > summary { padding: 12px 16px; cursor: pointer; color: var(--portal-error); font-weight: 600; font-size: .9375rem; }
.portal-danger__body { padding: 0 16px 16px; }
.portal-danger__body p { margin: 0 0 10px; font-size: .9375rem; }
.portal-danger__body .portal-check { display: flex; margin: 4px 0 12px; }
.portal-danger__button { padding: 8px 16px; border: 0; border-radius: 6px; background: var(--portal-error); color: #fff; cursor: pointer; font: inherit; font-weight: 600; }
.portal-danger__button:hover { filter: brightness(1.1); }


/* Region heading rows: clearly a section label, not a person – sticky while scrolling that region */
.portal-wm__group-head th {
	position: sticky;
	top: 0;
	z-index: 2;
	border-bottom: 0;
	padding: 10px 14px;
	background: #2f3b2a;
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: none;
}
.portal-wm__group-head .portal-wm__group-count { background: rgba(255,255,255,.2); color: #fff; letter-spacing: 0; }
.portal-wm__col-label { font-size: .6875rem !important; font-weight: 600 !important; color: rgba(255,255,255,.75) !important; }

/* One table per region: the heading sticks only within its region, gap between regions */
.portal-wm__group { table-layout: fixed; margin: 0 0 16px; }
.portal-wm__group[hidden] { display: none; }
.portal-wm__c-email { width: 34%; }
.portal-wm__c-active { width: 120px; }
.portal-wm__c-actions { width: 110px; }
.portal-wm__group-head th { vertical-align: middle; }
.portal-wm__group .portal-wm__name { overflow-wrap: anywhere; }
@media (max-width: 640px) {
	col.portal-wm__hide-sm { display: none; width: 0; }
	.portal-wm__c-active { width: 92px; }
	.portal-wm__c-actions { width: 96px; }
	.portal-wm__group-head th { padding: 10px 8px; font-size: .75rem; }
}