/* =========================================================================
   Vereint Unterföhring – feature pages
   Account page, club directory and profile, interactive photo tiles,
   platform pages (duties, moderation). Split off vereint-patterns.css on
   2026-10-30 when it passed 300 lines; loaded right after it, so the order
   of the rules (and with it the cascade) is unchanged.
   ========================================================================= */

/* --- Account page: summary list (GOV.UK summary list) ---------------------- */
.vu-keyvals { margin: 0.5rem 0 0; }
.vu-keyval { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--kern-color-layout-border-level-2); }
.vu-keyval:first-child { border-top: 1px solid var(--kern-color-layout-border-level-2); }
.vu-keyval:last-child { border-bottom: 0; } /* the next section draws the line */
/* list of things (clubs): the name is the wide column */
.vu-keyvals--list .vu-keyval { grid-template-columns: minmax(0, 1fr) 9rem auto; }
.vu-keyval > dt { font-weight: 600; }
.vu-keyval > dd { margin: 0; min-width: 0; }
.vu-keyval > dd .kern-badge { margin-left: 0.375rem; vertical-align: 0.0625rem; }
.vu-keyval__action { justify-self: end; text-align: right; white-space: nowrap; }
.vu-keyval__note { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--kern-color-layout-text-muted); }
@media (max-width: 30rem) {
  .vu-keyval, .vu-keyvals--list .vu-keyval { grid-template-columns: minmax(0, 1fr) auto; }
  .vu-keyval > dt { grid-column: 1 / -1; }
}
.vu-break { overflow-wrap: anywhere; }
/* KERN button colours win over .vu-text-danger; destructive buttons stay red */
.kern-btn.vu-text-danger, .kern-btn.vu-text-danger .kern-label { color: var(--kern-color-feedback-danger); }
.kern-btn--secondary.vu-text-danger { border-color: var(--kern-color-feedback-danger); }
/* a POST action that reads like a link (leave a club) */
.vu-link-button { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.vu-link-button:focus-visible { outline: 3px solid var(--kern-color-action-focus-default); outline-offset: 2px; }
/* irreversible action (GOV.UK warning button) */
.kern-btn--primary.vu-btn-danger { background: var(--kern-color-feedback-danger); border-color: var(--kern-color-feedback-danger); color: #fff; }
.kern-btn--primary.vu-btn-danger:hover { filter: brightness(0.9); }

/* --- Club directory and profile ------------------------------------------- */
.vu-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0 0; }
.vu-pill { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: var(--kern-color-layout-background-level-1-surface); color: var(--kern-color-layout-text-default); font-size: 0.875rem; text-decoration: none; }
.vu-pill:hover { border-color: var(--kern-color-action-default); }
.vu-pill[aria-current="page"] { background: var(--kern-color-action-default); border-color: var(--kern-color-action-default); color: #fff; font-weight: 600; }
.vu-pill__count { font-size: 0.75rem; opacity: 0.75; }
.vu-result-line { margin: 1rem 0 0.75rem; color: var(--kern-color-layout-text-muted); }
.vu-grid--clubs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.vu-thumb--logo { background: #fff; }
.vu-thumb--logo img { object-fit: contain; padding: 1.5rem; }
.vu-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.25rem; }
.vu-club-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.vu-club-head__logo { width: 5rem; height: 5rem; border: 1px solid var(--kern-color-layout-border-level-2); border-radius: 2px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vu-club-head__logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; }
.vu-club-head__logo--empty { background: var(--kern-color-layout-background-hued); font-size: 2rem; font-weight: 600; color: var(--kern-color-layout-text-muted); }
.vu-club-head__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; margin: 0.375rem 0 0; color: var(--kern-color-layout-text-muted); font-size: 0.9375rem; }
/* no separator dots: on a wrapped line they would start the line */
.vu-club-head__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (min-width: 48rem) {
  .vu-club-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vu-club-head__actions { grid-column: auto; justify-content: flex-end; }
}
.vu-facts--first { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
.vu-club-profile .vu-gallery + .vu-flat { margin-top: 0.5rem; }
.vu-flat__head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; }
.vu-flat__head .kern-link { font-size: 0.875rem; }
/* photo order: arrows bottom right of each tile (first tile = main photo) */
.vu-photo__order { position: absolute; right: 0.375rem; bottom: 0.375rem; display: flex; gap: 0.25rem; }
.vu-photo__move { min-width: 2rem; width: 2rem; height: 2rem; padding: 0; justify-content: center; }
/* photo tiles (assets/js/photos.js): lifted tile while dragging, a gap that
   moves with it, previews with progress, fade in/out; calm without motion */
/* never transition transform here: SortableJS moves tiles with transform,
   a transition makes the dragged tile lag behind the pointer */
.vu-photo[data-photo-id] { cursor: grab; touch-action: manipulation; transition: box-shadow 0.15s, opacity 0.15s; }
.vu-photo--chosen { box-shadow: 0 0 0 2px var(--kern-color-action-default); }
.vu-photo--ghost { opacity: 0.35; box-shadow: none; }
.vu-photo--ghost > * { visibility: hidden; }
.vu-photo--ghost { background: var(--kern-color-layout-background-hued); border: 2px dashed var(--kern-color-action-default); }
.vu-photo--lifted { cursor: grabbing; opacity: 0.95 !important; transition: none !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--kern-color-action-default); }
.vu-photo-section--sorting .vu-photo button, .vu-photo-section--sorting .vu-photo__badge, .vu-photo--lifted button, .vu-photo--lifted .vu-photo__badge { visibility: hidden; }
/* while dragging, the first place is always the big one: the grid does not
   jump when the gap reaches the front */
.vu-photo-section--sorting .vu-photo--main:not(:first-child) { grid-column: auto; grid-row: auto; }
.vu-photo-section--sorting .vu-photos > li:first-child { grid-column: span 2; grid-row: span 2; }
.vu-photo--new { animation: vu-photo-in 0.28s ease-out; }
.vu-photo--leaving { opacity: 0; pointer-events: none; }
.vu-photo--pending img { opacity: 0.55; filter: saturate(0.7); }
.vu-photo__progress { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; height: 0.375rem; border-radius: 2px; background: rgba(255, 255, 255, 0.75); overflow: hidden; }
.vu-photo__progress > span { display: block; width: 0; height: 100%; background: var(--kern-color-action-default); transition: width 0.2s; }
.vu-photos { transition: outline-color 0.15s, background-color 0.15s; outline: 2px dashed transparent; outline-offset: 0.375rem; }
.vu-photo-section--drop .vu-photos { outline-color: var(--kern-color-action-default); background-color: color-mix(in srgb, var(--kern-color-action-default) 6%, transparent); }
.vu-photo-section--drop .vu-photo--add { border-color: var(--kern-color-action-default); transform: scale(1.03); }
.vu-photo--add { transition: transform 0.15s, border-color 0.15s; }
.vu-photo-error { margin: 0 0 0.75rem; }
@keyframes vu-photo-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vu-photo, .vu-photo--add, .vu-photos, .vu-photo__progress > span { transition: none !important; animation: none !important; }
}
/* logo field (club edit): preview left, actions right */
.vu-logo-field { display: flex; gap: 1rem; align-items: center; margin-top: 0.25rem; }
.vu-logo-field__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.vu-logo-field__pick { cursor: pointer; }
.vu-logo-field__clear { display: inline-flex; gap: 0.375rem; align-items: center; margin: 0; cursor: pointer; }
.vu-logo-field__name { flex-basis: 100%; }
.vu-logo-field--cleared { opacity: 0.35; }
.vu-logo-field__actions:has(input[type="file"]:focus-visible) .vu-logo-field__pick { outline: 3px solid var(--kern-color-action-focus-default); outline-offset: 2px; }
/* platform duties (ADR-0007): tags in the team list, checkbox list */
.vu-duty-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.375rem 0 0; padding: 0; list-style: none; }
.vu-duty-tag { padding: 0.0625rem 0.5rem; border-radius: 2px; background: var(--kern-color-layout-background-hued); font-size: 0.8125rem; }
.vu-duties .vu-duty + .vu-duty { margin-top: 0.875rem; }
/* moderation (ADR-0007): one row per moderable thing */
.vu-mod-item { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.75rem 0; border-top: 1px solid var(--kern-color-layout-border-level-2); }
.vu-mod-item:first-of-type { border-top: 0; }
.vu-mod-item__thumb { width: 4rem; height: 3rem; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.vu-mod-item__body { flex: 1 1 auto; min-width: 0; }
.vu-mod-item__label { margin: 0 0 0.5rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.vu-mod-item__form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vu-mod-item__form .kern-form-input__input { flex: 1 1 14rem; min-width: 0; }
.vu-mod-item--hidden .vu-mod-item__thumb { opacity: 0.45; }
.vu-mod-quote { margin: 0 0 0.5rem; padding-left: 0.75rem; border-left: 3px solid var(--kern-color-layout-border-level-2); color: var(--kern-color-layout-text-muted); }
.vu-moderated { margin: 0 0 1rem; }

/* --- Members (ADR-0008): roster rows on the group page, board on the club page */
.vu-row--roster { grid-template-columns: minmax(0, 1fr); }
.vu-roster-form { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; margin-top: 0.375rem; }
.vu-roster-form .kern-form-input { margin: 0; }
.vu-roster-form .kern-form-input .kern-label { font-size: 0.8125rem; }
.vu-roster-form__flags { display: flex; gap: 1rem; align-items: center; min-height: 2.75rem; }
.vu-check-inline { display: inline-flex; gap: 0.375rem; align-items: center; margin: 0; }
.vu-roster-form__actions { display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; }
.vu-page-header--tight { margin-bottom: 0.5rem; }
.vu-board { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.375rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.vu-board__person { display: flex; flex-direction: column; }
.vu-board__name { font-weight: 600; }
.vu-board__role { color: var(--kern-color-layout-text-muted); font-size: 0.875rem; }
/* member import (ADR-0008): mapping grid, preview rows with errors */
.vu-mapping { display: grid; gap: 0.75rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
/* the grid spaces the fields; the flat-section "field after field" margin must not */
.vu-flat .vu-mapping .kern-form-input { margin: 0; }
.vu-mapping__apply { display: flex; align-items: flex-end; }
.vu-import-table__row--error .kern-table__cell { background: color-mix(in srgb, var(--kern-color-feedback-danger) 8%, transparent); }
.vu-import-errors { font-size: 0.9375rem; }
/* a table that fits the screen instead of scrolling (two columns) */
.vu-table-wrap--fit .kern-table { min-width: 0; }
.kern-table__cell .vu-keyval__note { margin-top: 0.125rem; }
.vu-keyval > dt .vu-keyval__note { font-weight: 400; }

/* fees (ADR-0008): compact row actions, numbers right-aligned */
.vu-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vu-fee-actions { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; justify-content: flex-end; }
.vu-fee-actions__form { display: flex; gap: 0.375rem; align-items: center; }
.vu-fee-actions__date { width: 9.5rem; height: 2.25rem; }
.vu-fee-actions__note { width: 9rem; height: 2.25rem; }
.vu-inline-add--wrap { flex-wrap: wrap; align-items: flex-end; }
.vu-inline-add--wrap > .kern-form-input { flex: 1 1 10rem; }
.vu-inline-add--wrap > .kern-form-input:first-child { flex: 2 1 14rem; }
@media (max-width: 40rem) {
  .vu-cell--wide { display: none; }
  .vu-fee-actions { flex-direction: column; align-items: stretch; }
  .vu-fee-actions__form { justify-content: space-between; }
  .vu-fee-actions__date, .vu-fee-actions__note { width: 8rem; }
}
/* report tables (ADR-0008): row labels, total row */
.vu-report__label { font-weight: 400; }
.vu-report__total .kern-table__cell { border-top: 2px solid var(--kern-color-layout-border-level-1); }
/* consent rows (ADR-0008): the decision form sits on its own line */
.vu-keyval--stack { grid-template-columns: 9rem minmax(0, 1fr); }
.vu-keyval--stack .vu-keyval__action { grid-column: 1 / -1; justify-self: start; text-align: left; white-space: normal; }
.vu-consent-form { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center; }
@media (max-width: 40rem) { .vu-keyval--stack { grid-template-columns: minmax(0, 1fr); } }

/* roles and rights (ADR-0010): one row per area, three radios as words */
.vu-levels { display: grid; gap: 0.875rem; }
.vu-level { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: center; }
.vu-level__label { margin: 0; }
.vu-level__options { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; }
.vu-level__option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; cursor: pointer; }
.vu-level__option:has(input:disabled) { color: var(--kern-color-layout-text-muted); cursor: not-allowed; }
.vu-level .kern-error { grid-column: 1 / -1; }
@media (max-width: 40rem) {
  .vu-level { grid-template-columns: minmax(0, 1fr); }
}

/* tables that stack on phones (no sideways scrolling): each row becomes a
   block; cells marked --full take the whole width, --meta are small and
   muted. Desktop keeps the table. */
@media (max-width: 40rem) {
  .vu-table-wrap .vu-table--stack { min-width: 0; }
  .vu-table--stack .kern-table__header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vu-table--stack, .vu-table--stack .kern-table__body { display: block; }
  .vu-table--stack .kern-table__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; padding: 0.625rem 0; box-shadow: inset 0 -1px 0 0 var(--kern-color-layout-border-contextual); }
  .vu-table--stack .kern-table__cell { display: block; padding: 0; box-shadow: none; text-align: left; }
  .vu-table--stack .vu-stack--full { flex: 1 0 100%; }
  .vu-table--stack .vu-stack--meta { font-size: 0.8125rem; color: var(--kern-color-layout-text-muted); }
  .vu-table--stack .vu-stack--meta .kern-link { font-size: inherit; }
  .vu-table--stack .kern-table__cell--action { white-space: normal; }
}