/**
 * .ut-pv-* — visual expression for the public organization read-surface.
 *
 * Fase 3-visuell (B-FP-024). Plain, hand-written CSS — NOT a Tailwind entry, so
 * it is never tree-shaken/purged (the same posture as ui-core's primitive CSS,
 * e.g. section-nav.css). Lives in this consumer plugin (public-views owns the
 * .ut-pv-* expression); the ui-core primitives (Banner/SectionNav/Accordion) and
 * the token layer are ui-core-owned and are NOT touched here.
 *
 * Consumes ONLY the semantic token roles from the `.ut-ui` scope (foundation
 * § 2.2) — never the physical --ut-color-* ramp. Every org view renders inside
 * `.ut-ui` (view_wrap / overview root / sub-view banner wrapper — Q-FP-028), so
 * --ut-surface, --ut-content, --ut-border, --ut-brand*, intent surfaces, radius,
 * spacing and motion all resolve.
 *
 * Enqueued (handle `ut-pv-org-views`, dep `ut-ui-core`) ONLY on the 9 org views
 * via the per-view should_load() gate — never global (perf).
 *
 * Design (B-FP-024): card-based — list cards (one bordered card per list,
 * hairline rows) + section cards (overview) on desktop; on narrow COLUMN width
 * (container-query ≤ 40rem) the sections shed their frame edge-to-edge to use the
 * mobile width. Badge intents (success/info/warning/danger/brand) realise the
 * lifecycle-state expression (UX F4).
 */

/* --------------------------------------------------------------------------- *
 * View shell + vertical rhythm.
 * `:not(:first-child)` gives (0,2,0) so the rhythm wins over a child's own
 * `margin:0` (a plain `> * + *` ties on specificity and loses — it nulled the
 * summary's top gap).
 * --------------------------------------------------------------------------- */
.ut-pv-org-overview,
.ut-pv-org-view {
  container-type: inline-size;
  container-name: utpv;
  color: var(--ut-content);
}
.ut-pv-org-overview > *:not(:first-child),
.ut-pv-org-view > *:not(:first-child) {
  margin-top: var(--ut-space-section);
}
/* Sub-view: the Banner sits OUTSIDE view_wrap() (its own `.ut-ui` wrapper), so
   give the content section air below it. */
.ut-ui-banner + .ut-pv-org-view {
  margin-top: var(--ut-space-section);
}

/* --------------------------------------------------------------------------- *
 * Identity: page title (Banner title slot), type pills (subtitle), initials.
 * The Banner primitive owns the card + logo; these are the consumer-owned slots.
 * --------------------------------------------------------------------------- */
.ut-pv-title {
  margin: 0;
  font-size: inherit; /* inherits the ui-core .ut-text-display role on the slot */
  font-weight: inherit;
  line-height: 1.2;
  color: var(--ut-content);
}
.ut-pv-typepills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ut-pv-typepill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  background: var(--ut-selected-surface);
  color: var(--ut-brand-strong);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.ut-pv-initials {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Contact strip (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ut-pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 24px; /* target size ≥ 24px (SC 2.5.8) */
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--ut-motion-fast), border-color var(--ut-motion-fast), color var(--ut-motion-fast);
}
.ut-pv-chip:hover {
  background: var(--ut-hover-surface);
  border-color: var(--ut-border-strong);
  color: var(--ut-interactive-hover);
}
.ut-pv-chip:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}
.ut-pv-chip-contact {
  border-color: var(--ut-brand);
  color: var(--ut-interactive);
  font-weight: 600;
}

/* --------------------------------------------------------------------------- *
 * Lead / summary.
 * --------------------------------------------------------------------------- */
.ut-pv-summary {
  margin: 0;
  max-width: var(--ut-measure-prose);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Section cards (overview). Scoped via `.ut-pv-section` — NOT bare `.ut-pv-card`
 * (the catalog uses `.ut-pv-card` for a different, clickable org-card anatomy).
 * --------------------------------------------------------------------------- */
.ut-pv-section {
  background: var(--ut-surface);
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  padding: var(--ut-space-section);
  scroll-margin-top: var(--ut-scroll-margin-section);
}
.ut-pv-cardtitle {
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--ut-border);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Details (key/value grid).
 * --------------------------------------------------------------------------- */
.ut-pv-details {
  margin: 0;
  display: grid;
}
.ut-pv-row {
  display: grid;
  grid-template-columns: minmax(7rem, 13rem) 1fr;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ut-border);
}
.ut-pv-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.ut-pv-row dt {
  margin: 0;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.ut-pv-row dd {
  margin: 0;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Prose (wysiwyg — wp_kses_post at the allowlist boundary). Not loaded from the
 * catalog island bundle on these views, so it is owned here.
 * --------------------------------------------------------------------------- */
.ut-pv-prose {
  color: var(--ut-content);
  line-height: 1.6;
  max-width: var(--ut-measure-prose);
}
.ut-pv-prose > * + * {
  margin-top: 0.75rem;
}
.ut-pv-prose h2,
.ut-pv-prose h3,
.ut-pv-prose h4 {
  font-weight: 600;
  color: var(--ut-content);
  line-height: 1.3;
}
.ut-pv-prose h2 {
  font-size: 1.125rem;
}
.ut-pv-prose h3 {
  font-size: 1rem;
}
.ut-pv-prose a {
  color: var(--ut-link);
  text-decoration: underline;
}
.ut-pv-prose a:hover {
  color: var(--ut-interactive-hover);
}
.ut-pv-prose ul,
.ut-pv-prose ol {
  padding-left: 1.25rem;
  list-style-position: outside;
}
.ut-pv-prose ul {
  list-style: disc;
}
.ut-pv-prose ol {
  list-style: decimal;
}
.ut-pv-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ut-radius-control);
}

/* --------------------------------------------------------------------------- *
 * Membership offerings (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-membership-intro {
  margin: 0 0 1rem;
  color: var(--ut-content);
  line-height: 1.6;
  max-width: var(--ut-measure-prose);
}
.ut-pv-membership-block + .ut-pv-membership-block,
.ut-pv-membership-block + .ut-pv-membership-plans,
.ut-pv-membership-intro + .ut-pv-membership-block {
  margin-top: 1.25rem;
}
.ut-pv-membership-subtitle {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-plans {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.ut-pv-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 1rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-hover-surface);
}
.ut-pv-plan-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-plan-desc {
  margin: 0;
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}
/* The "join" CTA is a chip promoted to a filled primary button. */
.ut-pv-plan-link {
  margin-top: 0.25rem;
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
  font-weight: 600;
}
.ut-pv-plan-link:hover {
  background: var(--ut-interactive-hover);
  border-color: var(--ut-interactive-hover);
  color: var(--ut-on-brand);
}

/* --------------------------------------------------------------------------- *
 * Gallery (overview).
 * --------------------------------------------------------------------------- */
.ut-pv-gallery {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.ut-pv-galleryimg {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ut-radius-card);
  border: 1px solid var(--ut-border);
}

/* --------------------------------------------------------------------------- *
 * Lists — one shared "list card" expression for every sub-view list.
 * --------------------------------------------------------------------------- */
.ut-pv-newslist,
.ut-pv-projectlist,
.ut-pv-eventlist,
.ut-pv-propertylist,
.ut-pv-servicelist,
.ut-pv-connectionlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  overflow: hidden;
}
.ut-pv-newsitem,
.ut-pv-projectitem,
.ut-pv-eventitem,
.ut-pv-propertyitem,
.ut-pv-serviceitem,
.ut-pv-connectionitem {
  display: grid;
  gap: 0.375rem 0.875rem;
  padding: 1rem var(--ut-space-section);
  border-top: 1px solid var(--ut-border);
  transition: background-color var(--ut-motion-fast);
}
.ut-pv-newslist > li:first-child,
.ut-pv-projectlist > li:first-child,
.ut-pv-eventlist > li:first-child,
.ut-pv-propertylist > li:first-child,
.ut-pv-servicelist > li:first-child,
.ut-pv-connectionlist > li:first-child {
  border-top: 0;
}
.ut-pv-newsitem:hover,
.ut-pv-projectitem:hover,
.ut-pv-eventitem:hover,
.ut-pv-propertyitem:hover,
.ut-pv-serviceitem:hover,
.ut-pv-connectionitem:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-newsitem-link,
.ut-pv-projectitem-link,
.ut-pv-eventitem-link,
.ut-pv-propertyitem-link,
.ut-pv-serviceitem-link,
.ut-pv-connectionitem-link {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ut-content);
  text-decoration: none;
  line-height: 1.35;
}
.ut-pv-newsitem-link:hover,
.ut-pv-projectitem-link:hover,
.ut-pv-eventitem-link:hover,
.ut-pv-propertyitem-link:hover,
.ut-pv-serviceitem-link:hover,
.ut-pv-connectionitem-link:hover {
  color: var(--ut-interactive);
  text-decoration: underline;
}
.ut-pv-newsitem-date,
.ut-pv-projectitem-date,
.ut-pv-projectitem-meta,
.ut-pv-eventitem-meta,
.ut-pv-serviceitem-meta,
.ut-pv-bulletin-date,
.ut-pv-alert-date {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}
.ut-pv-eventitem-when {
  color: var(--ut-content);
  font-weight: 500;
}
.ut-pv-eventitem-venue {
  color: var(--ut-content-muted);
}
.ut-pv-eventitem-venue::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: var(--ut-border-strong);
}
.ut-pv-newsitem-excerpt,
.ut-pv-projectitem-excerpt,
.ut-pv-eventitem-excerpt,
.ut-pv-propertyitem-excerpt,
.ut-pv-serviceitem-excerpt {
  margin: 0;
  color: var(--ut-content-muted);
  line-height: 1.5;
  font-size: 0.9375rem;
}
/* Rows with a leading thumbnail (properties / connections) → media grid. */
.ut-pv-propertyitem:has(.ut-pv-propertyitem-image),
.ut-pv-connectionitem:has(.ut-pv-connectionitem-image) {
  grid-template-columns: auto 1fr;
  align-items: start;
}
.ut-pv-propertyitem-image,
.ut-pv-connectionitem-image {
  grid-row: span 3;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--ut-radius-card);
  border: 1px solid var(--ut-border);
}

/* --------------------------------------------------------------------------- *
 * Taxonomy chips (type / place on list items).
 * --------------------------------------------------------------------------- */
.ut-pv-taxlist {
  list-style: none;
  margin: 0.125rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ut-pv-tax {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  background: var(--ut-hover-surface);
  border: 1px solid var(--ut-border);
  color: var(--ut-content-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------- *
 * Connections: grouped sections + role badges.
 * --------------------------------------------------------------------------- */
.ut-pv-connections-group + .ut-pv-connections-group {
  margin-top: var(--ut-space-section);
}
.ut-pv-connections-heading {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ut-content);
}
.ut-pv-connectionitem-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* --------------------------------------------------------------------------- *
 * Badges — status / policy / role / severity mapped to intent tones.
 * Default neutral; the BEM modifiers map onto the semantic intent roles.
 * --------------------------------------------------------------------------- */
.ut-pv-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--ut-hover-surface);
  color: var(--ut-content-muted);
  border: 1px solid var(--ut-border);
}
/* success — active / ongoing / open */
.ut-pv-badge--status-ongoing,
.ut-pv-badge--status-active,
.ut-pv-badge--policy-open {
  background: var(--ut-success-surface);
  color: var(--ut-success);
  border-color: transparent;
}
/* info — planned / proposed / access-policy category / low severity */
.ut-pv-badge--status-proposed,
.ut-pv-badge--status-planned,
.ut-pv-badge--policy-registration_only,
.ut-pv-badge--policy-members_only,
.ut-pv-badge--policy-invite_only,
.ut-pv-badge--severity-low {
  background: var(--ut-info-surface);
  color: var(--ut-info);
  border-color: transparent;
}
/* warning — paused / postponed / sold out / medium+high severity */
.ut-pv-badge--status-paused,
.ut-pv-badge--state-postponed,
.ut-pv-badge--state-sold_out,
.ut-pv-badge--severity-medium,
.ut-pv-badge--severity-high {
  background: var(--ut-warning-surface);
  color: var(--ut-warning);
  border-color: transparent;
}
/* danger — cancelled / stopped / critical severity */
.ut-pv-badge--state-cancelled,
.ut-pv-badge--status-stopped,
.ut-pv-badge--severity-critical {
  background: var(--ut-danger-surface);
  color: var(--ut-danger);
  border-color: transparent;
}
/* brand — completed + membership roles/positions */
.ut-pv-badge--status-completed,
.ut-pv-badge[class*="ut-pv-badge--role-"] {
  background: var(--ut-selected-surface);
  color: var(--ut-brand-strong);
  border-color: transparent;
}

/* --------------------------------------------------------------------------- *
 * Empty state (shared shape with the catalog's; this sheet only loads on the
 * org views so there is no collision).
 * --------------------------------------------------------------------------- */
.ut-pv-empty {
  margin: 0;
  padding: 2rem var(--ut-space-section);
  border: 1px dashed var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-hover-surface);
  color: var(--ut-content-muted);
  text-align: center;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------- *
 * Narrow column (container-query ≤ 40rem): shed the section frame edge-to-edge
 * so content uses the mobile width; keep heading + rhythm for structure.
 * Keyed on the CONTENT COLUMN width, not the device viewport (foundation § 3.2).
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 40rem) {
  .ut-pv-section {
    border: 0;
    border-radius: 0;
    padding-inline: 0;
    padding-top: 0;
  }
  .ut-pv-org-overview > .ut-pv-section + .ut-pv-section {
    margin-top: 2rem;
  }
  .ut-pv-newsitem,
  .ut-pv-projectitem,
  .ut-pv-eventitem,
  .ut-pv-propertyitem,
  .ut-pv-serviceitem,
  .ut-pv-connectionitem {
    padding-inline: 0.875rem;
  }
  .ut-pv-empty {
    padding-inline: 0.875rem;
  }
}
@container utpv (max-width: 34rem) {
  .ut-pv-row {
    grid-template-columns: 1fr;
    gap: 0.0625rem;
  }
}

/* =========================================================================== *
 * v2 — THE ORGANIZATION PRESENTATION SURFACE ("Flate 1", B-FP-077 / P7-2a).
 *
 * ADDITIVE. Everything above is the 0.11.0 card expression (B-FP-024) that the
 * 8 sub-view ROUTES and the contact/property/project/service/place surfaces all
 * still render — restyling those is P7-2c, so not one line of it is touched here.
 * These rules serve ONLY the classes Org_Presentation emits.
 *
 * Rules of the road (unchanged):
 *   - Semantic `.ut-ui` roles ONLY — never the physical --ut-color-* ramp.
 *   - The ui-core primitives (VisibilityChip/StatusChip/Callout/Register/
 *     SystemVoice/Monogram/Banner/SectionNav) own their OWN look. Nothing here
 *     restyles them; we only place them and drive their caller-side knobs
 *     (e.g. --ut-monogram-size, which the Monogram contract defines as
 *     caller-driven).
 *   - ui-core has no numeric spacing scale (styleguide gap list) → literal rem.
 *   - Container-first: keyed on the CONTENT COLUMN (container `utpv`), never the
 *     viewport (foundation § 3.2).
 * =========================================================================== */

/* The protocol rail. 10.75rem ≈ the fasit's 172px margin.
 *
 * P7-2c: `.ut-pv-org-page` is the sub-view PAGE wrapper (Org_View_Base::
 * maybe_render_on_single) — the Banner is a SIBLING of the view section, so the
 * identity scale + the rail + the container context have nowhere else to hang.
 * Scoped to the ORG slug + (B1, B-FP-274) the PROPERTY page + (B2, B-FP-275) the
 * PROJECT / SERVICE / PLACE pages + (B3, B-FP-276) the CONTACT page + (B4,
 * B-FP-277) the EVENT page. Every read flate now speaks the v2 idiom, and with
 * event the `.ut-pv-card` / `.ut-pv-cardtitle` expression is out of use on the
 * read tier entirely. */
.ut-pv-org-overview,
.ut-pv-org-page,
.ut-pv-property-page,
.ut-pv-project-page,
.ut-pv-service-page,
.ut-pv-place-page,
.ut-pv-contact-page,
.ut-pv-event-page {
  --ut-pv-rail: 10.75rem;
  background: var(--ut-canvas);
}
/* The sub-view page is the container-query context for its own Banner + section
 * (the section sets its own `container-type` above; the wrapper carries the one
 * the Banner title measures against). Narrow-column from day one (A3 lesson): the
 * `@container utpv` rail collapse below keys on THIS name. */
.ut-pv-org-page,
.ut-pv-property-page,
.ut-pv-project-page,
.ut-pv-service-page,
.ut-pv-place-page,
.ut-pv-contact-page,
.ut-pv-event-page {
  container-type: inline-size;
  container-name: utpv;
}

/* --------------------------------------------------------------------------- *
 * Identity: the name scales with the CONTAINER, not the viewport.
 *
 * `.ut-pv-title` is the consumer-owned Banner title slot, so this is ours to set
 * (the Banner primitive itself is untouched). Without it the display role is a
 * fixed 30px and long Norwegian compounds ("Hytteeierforening") wrap onto three
 * lines in a narrow column. `cqi` resolves against `.ut-pv-org-overview`
 * (container-type: inline-size). Scoped to this surface — the 8 sub-view banners
 * keep today's expression until P7-2c.
 * --------------------------------------------------------------------------- */
.ut-pv-org-overview .ut-pv-title,
.ut-pv-org-page .ut-pv-title,
.ut-pv-property-page .ut-pv-title,
.ut-pv-project-page .ut-pv-title,
.ut-pv-service-page .ut-pv-title,
.ut-pv-place-page .ut-pv-title,
.ut-pv-contact-page .ut-pv-title,
.ut-pv-event-page .ut-pv-title {
  font-size: clamp(1.625rem, 4.4cqi, 2.625rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  /* Measured (P7-2c): in a 292px column the Banner leaves the title 162px, and
   * "Hytteeierforening" does not fit even at the clamp's 26px MINIMUM. ui-core's
   * banner sets `overflow-wrap: break-word`, so it broke mid-word with no hyphen
   * — "Hytteeierfore / ning", which a reader cannot tell from two words. This is
   * what Norwegian compounds do to every org name on this site, and it is live on
   * Flate 1 today. `hyphens: auto` lets the browser break at a real syllable
   * boundary and show the hyphen (the page is lang="nb"); break-word stays as the
   * last resort for a word no dictionary knows. */
  hyphens: auto;
}

/* Tagline inside the Banner subtitle slot. */
.ut-pv-org-overview .ut-pv-tagline {
  margin: 0.25rem 0 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------- *
 * Metaline — the provenance strip (I-01/I-05).
 * The border-top IS the provenance rule; the chips are separated visually (their
 * own borders + the flex gap), never by punctuation.
 * --------------------------------------------------------------------------- */
.ut-pv-metaline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ut-border);
}
/* The metaline is provenance FOR the identity head, so it sits tighter to the
   banner than the generic section rhythm (R2.2: fasit gap 16px, not the 32px
   `--ut-space-section` the `> *:not(:first-child)` rule gives). Same specificity
   as that rule, placed later → wins. */
.ut-pv-org-overview > .ut-pv-metaline {
  margin-top: 1rem;
}
.ut-pv-mchip {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  color: var(--ut-content-muted);
  font-family: var(--ut-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Verification is double-coded: glyph (in the markup) + text + colour. */
.ut-pv-mchip-verified {
  border-color: var(--ut-success-border);
  background: var(--ut-success-surface);
  color: var(--ut-success);
}
.ut-pv-mchip-unverified {
  border-color: var(--ut-warning-border);
  background: var(--ut-warning-surface);
  color: var(--ut-warning);
}
/* Source is deliberately the quietest chip (S9/G2 — provenance, not a claim). */
.ut-pv-mchip-source {
  border-color: var(--ut-border);
  background: transparent;
  color: var(--ut-content-subtle);
}

/* --------------------------------------------------------------------------- *
 * Alert stream (GAP-F1-01) — a Callout per active alert.
 * --------------------------------------------------------------------------- */
.ut-pv-alertstream {
  display: grid;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------- *
 * `.sek` — the protocol-margin section grid (S9/G2).
 * The rail carries ONLY the system voice; editorial content never enters it.
 * --------------------------------------------------------------------------- */
.ut-pv-sek {
  display: grid;
  /* The fallback is not decoration: an undefined custom property makes the whole
     grid-template-columns declaration invalid at computed-value time, silently
     collapsing the rail to one column. Keep the literal in the var() usage. */
  grid-template-columns: var(--ut-pv-rail, 10.75rem) minmax(0, 1fr);
  gap: var(--ut-space-rail-gap, 1.5rem);
  padding: 2rem 0;
  border-top: 1px solid var(--ut-border);
  scroll-margin-top: var(--ut-scroll-margin-section);
}
/* The FIRST RENDERED section loses the rule — robust against skjul-tom-sone,
   which removes sections from the DOM entirely rather than hiding them. */
.ut-pv-sek:first-of-type {
  border-top: 0;
}
.ut-pv-prot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding-top: 0.375rem;
}
.ut-pv-sektitle {
  margin: 0 0 1rem;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ut-content);
}
.ut-pv-sekbody > .ut-pv-prose {
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
}

/* --------------------------------------------------------------------------- *
 * Rows: posts / events / records. One idiom, three flavours.
 * --------------------------------------------------------------------------- */
.ut-pv-rows {
  display: grid;
  gap: 0.75rem;
}
.ut-pv-post,
.ut-pv-event,
.ut-pv-rrad {
  display: grid;
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
}
.ut-pv-post {
  grid-template-columns: 6rem minmax(0, 1fr) auto;
}
.ut-pv-event,
.ut-pv-rrad {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ut-pv-event {
  align-items: center;
}
/* Event date-tile (A8, B-FP-171 — fasit `.dato`). A dated row switches to a
   3-column grid (tile | main | marks); the base 2-column rule stays for undated
   rows. Placed BEFORE the narrow @container queries on purpose: equal specificity
   + later source order means those queries still collapse a dated row to 1fr. */
.ut-pv-event--dated {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ut-pv-datetile {
  width: 4rem;
  padding: 0.375rem 0;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-control);
  background: var(--ut-canvas);
  font-family: var(--ut-font-mono);
  text-align: center;
}
.ut-pv-datetile-d {
  display: block;
  color: var(--ut-content);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.1;
}
.ut-pv-datetile-m {
  display: block;
  color: var(--ut-content-subtle);
  font-size: 0.65625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ut-pv-rowdate {
  padding-top: 0.1875rem;
  color: var(--ut-content-subtle);
  font-family: var(--ut-font-mono);
  font-size: 0.71875rem;
  font-variant-numeric: tabular-nums;
}
.ut-pv-rowtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.ut-pv-rowtitle a {
  color: var(--ut-link);
  text-decoration: none;
}
.ut-pv-rowtitle a:hover {
  text-decoration: underline;
}
.ut-pv-rowtitle a:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-rowexcerpt {
  margin: 0.125rem 0 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}
/* The marks column: `.sys` -> StatusChip -> VisibilityChip, stacked. */
.ut-pv-rowmarks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}
/* Relation type sits ABOVE the title, in the system voice. */
.ut-pv-rellabel {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--ut-content-subtle);
  font-family: var(--ut-font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Se alle" -> the sub-view route (the teaser's honest way out). */
.ut-pv-seeall {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--ut-link);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-seeall:hover {
  text-decoration: underline;
}
.ut-pv-seeall:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}

/* --------------------------------------------------------------------------- *
 * People cards (I-06). P7-2b adds the contact state line: shared value /
 * "Contact info exists" + ◐ (gated — chip INSTEAD of value) / honest ".tom" /
 * nothing at all (withheld). The gated VALUE never exists in the markup.
 * --------------------------------------------------------------------------- */
.ut-pv-folk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.ut-pv-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  /* Monogram size is caller-driven per its contract; the person tile is round. */
  --ut-monogram-size: 2.75rem;
}
.ut-pv-person .ut-ui-monogram {
  border-radius: var(--ut-radius-pill);
}
.ut-pv-personname {
  font-size: 0.9375rem;
  font-weight: 600;
}
.ut-pv-personname a {
  color: var(--ut-link);
  text-decoration: none;
}
.ut-pv-personname a:hover {
  text-decoration: underline;
}
.ut-pv-personname a:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-personrole {
  color: var(--ut-content-muted);
  font-size: 0.8125rem;
}
/* P7-2b: the contact state line. */
.ut-pv-personcontact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}
.ut-pv-contactvalue {
  color: var(--ut-link);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ut-pv-contactvalue:hover {
  text-decoration: underline;
}
.ut-pv-contactvalue:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
  border-radius: var(--ut-radius-control);
}
.ut-pv-personcontact-marks {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
/* The gated marker: the Register gated-row idiom — a statement, not a value. */
.ut-pv-sealedvalue {
  color: var(--ut-content-muted);
  font-style: italic;
}
/* The honest ".tom": contact not provided — quiet, no chip. */
.ut-pv-contactnone {
  color: var(--ut-content-subtle);
  font-style: italic;
}

/* --------------------------------------------------------------------------- *
 * "For members" (I-03, P7-2b): sealed summary rows + present-only CTA. The
 * sealed rows themselves are the ui-core primitive (.ut-ui-sealed).
 * --------------------------------------------------------------------------- */
.ut-pv-memberscta {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------- *
 * Membership: the offer block + subordinate prose blocks.
 * --------------------------------------------------------------------------- */
.ut-pv-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-container);
  background: var(--ut-surface);
  box-shadow: var(--ut-elev-raised);
}
.ut-pv-offertitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.ut-pv-subblock {
  margin-top: 1.25rem;
}
.ut-pv-subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ut-content);
}

/* --------------------------------------------------------------------------- *
 * Buttons + link pills (J-02).
 * --------------------------------------------------------------------------- */
.ut-pv-btn {
  display: inline-flex;
  align-items: center;
  /* 2.75rem = the 44px touch target (WCAG 2.5.8), not a decorative height. */
  min-height: 2.75rem;
  /* Fasit .knapp: rectangular control radius (NOT a pill) + 0 20px padding (R2.1). */
  padding: 0 1.25rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-btn-primary {
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
}
.ut-pv-btn-primary:hover {
  border-color: var(--ut-interactive-hover);
  background: var(--ut-interactive-hover);
  color: var(--ut-on-brand);
}

/* ===========================================================================
 * v2 — THE CATALOGUE SURFACE ("Flate 2", P7-3 / B-FP-103).
 *
 * ADDITIVE, same rules of the road as the Flate 1 block above: semantic
 * `.ut-ui` roles only (never the physical ramp); the ui-core primitives
 * (Breadcrumbs/SystemVoice/VisibilityChip/StatusChip/Monogram) own their OWN
 * look — these rules only PLACE them and drive caller-side knobs
 * (--ut-monogram-size); literal rem for spacing; container-first (keyed on
 * the content column `utpv`, never the viewport). Values are MEASURED from
 * the approved fasit (s6-p5-syntese-mockup-2026-07-14.html § Flate 2) and
 * mapped to their semantic roles.
 * =========================================================================== */

.ut-pv-catalog-page {
  background: var(--ut-canvas);
  container-type: inline-size;
  container-name: utpv;
}
.ut-pv-cat {
  display: grid;
  gap: 1.5rem;
}

/* Shared SR-only utility (labels the search field, sort select, pager arrows
 * and the thumb column header without painting them). */
.ut-pv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------- *
 * Identity head: H1 + ingress + metaline (the metaline reuses Flate 1's strip).
 * --------------------------------------------------------------------------- */
.ut-pv-cat-head {
  display: grid;
  gap: 0.5rem;
}
.ut-pv-cat-title {
  margin: 0;
  font-size: clamp(1.75rem, 4.4cqi, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  hyphens: auto; /* Norwegian compounds — the Flate 1 lesson (B-FP-100). */
}
.ut-pv-cat-tagline {
  margin: 0;
  max-width: var(--ut-measure-prose);
  color: var(--ut-content-muted);
  font-size: 0.9375rem;
}
.ut-pv-cat-head .ut-pv-metaline {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------- *
 * The two-column body: facet sidebar (fasit: 236px) + main column.
 * --------------------------------------------------------------------------- */
.ut-pv-cat-grid {
  display: grid;
  grid-template-columns: 14.75rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Facet sidebar. */
.ut-pv-cat-facets {
  display: grid;
  gap: 1rem;
  padding: 1rem 1rem 1.5rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
}
.ut-pv-cat-facets-title {
  margin: 0;
  font-size: 1rem;
}
.ut-pv-cat-fgroup {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.ut-pv-cat-fgroup legend {
  margin-bottom: 0.375rem;
  padding: 0;
  color: var(--ut-content-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ut-pv-cat-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ut-content);
  font-size: 0.875rem;
}
.ut-pv-cat-opt-count {
  margin-left: auto;
  color: var(--ut-content-muted);
  font-family: var(--ut-font-mono);
  font-size: 0.6875rem;
}
/* The no-JS apply button — quiet secondary (Enter in the search field is the
 * other path). Not .ut-pv-btn: this is a form control inside a card, not a
 * page-level CTA. */
.ut-pv-cat-apply {
  justify-self: start;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-content);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.ut-pv-cat-apply:hover {
  background: var(--ut-hover-surface);
}

/* Main column stacks its bands. */
.ut-pv-cat-main {
  display: grid;
  gap: 1rem;
}

/* Search + sort (the fasit's søkelinje). */
.ut-pv-cat-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
}
.ut-pv-cat-search input[type='search'] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-content);
  font-size: 0.9375rem;
}
.ut-pv-cat-sort select {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  background: var(--ut-surface);
  color: var(--ut-content);
  font-size: 0.875rem;
}
.ut-pv-cat-search input[type='search']:focus-visible,
.ut-pv-cat-sort select:focus-visible,
.ut-pv-cat-opt input:focus-visible,
.ut-pv-cat-apply:focus-visible,
.ut-pv-cat-chip:focus-visible,
.ut-pv-cat-clear:focus-visible,
.ut-pv-cat-page:focus-visible,
.ut-pv-cat-name:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}

/* Result line. */
.ut-pv-cat-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}
.ut-pv-cat-result-count {
  color: var(--ut-content);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Active filter chips — links (no-JS removable), plus "clear all". */
.ut-pv-cat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ut-pv-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-selected-surface);
  color: var(--ut-content);
  font-size: 0.8125rem;
  text-decoration: none;
}
.ut-pv-cat-chip:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-cat-chip-x {
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  line-height: 1;
}
.ut-pv-cat-clear {
  color: var(--ut-link);
  font-size: 0.8125rem;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------- *
 * The register table (FORENING | STED | TYPE | STATUS).
 * A real <table> for the column semantics (WCAG 1.3.1); the look reproduces
 * the fasit's div-grid sketch exactly.
 * --------------------------------------------------------------------------- */
.ut-pv-cat-table {
  width: 100%;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ut-surface);
  overflow: hidden;
}
.ut-pv-cat-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ut-border);
  background: var(--ut-canvas);
  color: var(--ut-content-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}
.ut-pv-cat-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ut-border);
  color: var(--ut-content-muted);
  font-size: 0.875rem;
  vertical-align: middle;
}
.ut-pv-cat-table tbody tr:last-child td {
  border-bottom: 0;
}
.ut-pv-cat-td-thumb {
  width: 2.75rem;
  padding-right: 0;
}
.ut-pv-cat-thumb {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ut-border);
  border-radius: 0.25rem;
  object-fit: cover;
}
.ut-pv-cat-mono {
  display: block;
  width: 2.75rem;
}
/* The Monogram contract sizes via a caller-driven custom property — set ON the
 * primitive element (its own default declaration beats an inherited value). */
.ut-pv-cat-mono .ut-ui-monogram {
  --ut-monogram-size: 2.75rem;
}
.ut-pv-cat-name {
  color: var(--ut-content);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-cat-name:hover {
  color: var(--ut-link);
  text-decoration: underline;
}
.ut-pv-cat-td-name .ut-ui-sys {
  display: block;
  margin-top: 0.125rem;
}
/* Archived rows (trinn 2 emits them; the style ships forward-stable). */
.ut-pv-cat-row-archived td {
  background: var(--ut-canvas);
}
.ut-pv-cat-row-archived .ut-pv-cat-name {
  color: var(--ut-content-muted);
}

/* Empty state — scoped look on the shared .ut-pv-empty contract. */
.ut-pv-cat-empty {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--ut-border-strong);
  border-radius: var(--ut-radius-card);
  color: var(--ut-content-muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------- *
 * Numbered pagination (delbare URL-er — the fasit's own margin note).
 * --------------------------------------------------------------------------- */
.ut-pv-cat-pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ut-pv-cat-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.375rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-control);
  color: var(--ut-content);
  font-size: 0.875rem;
  text-decoration: none;
}
a.ut-pv-cat-page:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-cat-page-now {
  border-color: var(--ut-brand);
  background: var(--ut-brand);
  color: var(--ut-on-brand);
}
.ut-pv-cat-page-off {
  border-color: var(--ut-border);
  color: var(--ut-content-subtle);
}

/* --------------------------------------------------------------------------- *
 * Narrow container (the fasit hides the TYPE column; the sidebar stacks).
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 44rem) {
  .ut-pv-cat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ut-pv-cat-search {
    grid-template-columns: minmax(0, 1fr);
  }
  .ut-pv-cat-th-type,
  .ut-pv-cat-td-type {
    display: none;
  }
}
.ut-pv-btn:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}
.ut-pv-linkpill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  margin: 0.125rem 0.5rem 0.125rem 0;
  padding: 0 0.75rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-surface);
  color: var(--ut-link);
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}
.ut-pv-linkpill:hover {
  background: var(--ut-hover-surface);
}
.ut-pv-linkpill:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}

/* --------------------------------------------------------------------------- *
 * v2 SUB-VIEW PAGES (P7-2c, B-FP-100) — `/organisasjon/{slug}/{view}`.
 *
 * The sub-view page IS the "se alle" destination of Flate 1's teaser section, so
 * it renders as that section, expanded: same rail, same heading, same rows. That
 * is the whole restyle — almost nothing new is needed here, which is the point.
 * --------------------------------------------------------------------------- */

/* The org sub-view section is the page's only `.sek`, so it carries no rule and
 * no top padding — the Banner above it already opened the page. */
.ut-pv-org-view > .ut-pv-sek {
  border-top: 0;
  padding-top: 0;
}
/* The card layer gave `.ut-pv-org-view > *` a section rhythm; the sek owns its
 * own vertical space now. */
.ut-pv-org-page > .ut-pv-org-view,
.ut-pv-property-page > .ut-pv-org-view,
.ut-pv-project-page > .ut-pv-org-view,
.ut-pv-service-page > .ut-pv-org-view,
.ut-pv-place-page > .ut-pv-org-view,
.ut-pv-contact-page > .ut-pv-org-view,
.ut-pv-event-page > .ut-pv-org-view {
  margin-top: 0;
}
.ut-ui-banner + .ut-pv-org-view {
  margin-top: 1.5rem;
}
/* The honest empty state. The card layer dresses `.ut-pv-empty` as a dashed,
 * centred "nothing here" panel — a decorated frame around an absence. In the
 * register voice the absence is simply STATED, left-aligned where the rows
 * would have been, so the page reads the same whether or not it has content.
 * Every card-layer declaration is reset explicitly: an un-reset background or
 * text-align does not disappear just because this rule exists. */
.ut-pv-org-view .ut-pv-empty {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  color: var(--ut-content-subtle);
  font-size: 0.9375rem;
  font-style: italic;
}
/* Taxonomy chips sit under the row's own text, inside `.ut-pv-rowmain`. */
.ut-pv-rowmain > .ut-pv-taxlist {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------- *
 * v2 NARROW COLUMN — the protocol rail collapses.
 *
 * 🔴 Measured gap, not a new feature: the v2 layer shipped in 0.19.0/0.20.0 with
 * NO container query at all, so `10.75rem + minmax(0,1fr)` held a 172px rail on a
 * 375px phone and squeezed every section body into what was left. It is live on
 * Flate 1 today. P7-2c would have multiplied it across 8 more pages, so it is
 * fixed at the source rather than worked around per page.
 *
 * Collapsed, the margin becomes a HEADER above the body — the system voice still
 * precedes what it speaks about, so the protocol reading survives the reflow.
 * Keyed on the CONTENT COLUMN (container `utpv`), never the viewport.
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 40rem) {
  .ut-pv-sek {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    padding: 1.5rem 0;
  }
  .ut-pv-prot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0;
  }
  /* Date column → inline with the row text (a 6rem column starves the title). */
  .ut-pv-post {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ut-pv-post .ut-pv-rowdate {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  .ut-pv-folk {
    grid-template-columns: minmax(0, 1fr);
  }
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container utpv (max-width: 30rem) {
  /* The marks column drops under the row rather than shrinking the title to a
     two-character ribbon. */
  .ut-pv-post,
  .ut-pv-event,
  .ut-pv-rrad {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .ut-pv-rowmarks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------- *
 * Gallery teaser (matted figures). The ui-core Gallery PRIMITIVE takes this
 * over in P7-7 (feasibility § 2e) — this is the teaser's interim frame.
 * --------------------------------------------------------------------------- */
.ut-pv-org-overview .ut-pv-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ut-pv-galleryfig {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--ut-border);
  border-radius: var(--ut-radius-card);
  background: var(--ut-surface);
  box-shadow: var(--ut-elev-raised);
}
.ut-pv-org-overview .ut-pv-galleryimg {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ut-radius-control);
  object-fit: cover;
}

/* --------------------------------------------------------------------------- *
 * Narrow column. The rail ROTATES: the protocol margin becomes a horizontal
 * strip above the heading — same data, different direction (the fasit's move).
 * --------------------------------------------------------------------------- */
@container utpv (max-width: 47.5rem) {
  .ut-pv-sek {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .ut-pv-prot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.875rem;
    padding: 0 0 0.5rem;
  }
}
@container utpv (max-width: 40rem) {
  .ut-pv-post,
  .ut-pv-event,
  .ut-pv-rrad {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .ut-pv-rowmarks {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .ut-pv-offer {
    grid-template-columns: 1fr;
  }
  .ut-pv-folk {
    grid-template-columns: 1fr;
  }
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container utpv (max-width: 26.25rem) {
  .ut-pv-org-overview .ut-pv-gallery {
    grid-template-columns: 1fr;
  }
}