/* ── Base reset ─────────────────────────────────────────── */
    /* Ensure [hidden] always wins over any display: value set by component CSS */
    [hidden] { display: none !important; }

    /* ── Tokens ─────────────────────────────────────────────── */
    :root {
      --primary:        #5C3FA5;
      --primary-light:  #7B5FCA;
      --primary-dark:   #3D2875;
      --primary-pale:   #EDE8F9;
      --primary-pale2:  #F5F2FD;
      --accent:        #E05210;
      --dark:          #140F2A;
      --dark2:         #2D2450;
      --off-white:     #F8F6FD;
      --gray:          #6B7A8D;
      --gray-mid:      #9AA3AF;
      --gray-light:    #E8E4F0;
      --gray-pale:     #F4F2F8;
      --white:         #FFFFFF;
      --green:         #2E7D32;
      --green-pale:    #E8F5E9;
      --amber:         #E65100;
      --amber-pale:    #FFF3E0;
      --red:           #C62828;
      --red-pale:      #FCE4EC;
      --font-head:     'Sora', sans-serif;
      --font-body:     'DM Sans', sans-serif;
      --radius:        16px;
      --radius-sm:     8px;
      --radius-xs:     5px;
      --shadow:        0 4px 24px rgba(92,63,165,.08);
      --shadow-md:     0 8px 40px rgba(92,63,165,.12);
      --shadow-hov:    0 16px 48px rgba(92,63,165,.18);
      --tr:            .28s cubic-bezier(.4,0,.2,1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-body); color: var(--dark); line-height: 1.65; min-height: 100vh;
      background-color: var(--off-white);
      background-image: url('images/DexesWaveGray.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
    }
    a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }
    button { font-family: var(--font-body); cursor: pointer; }

    /* ── Header ──────────────────────────────────────────────── */
    .site-header {
      background: var(--white);
      border-bottom: 1px solid var(--gray-light);
      position: sticky; top: 0; z-index: 200;
      box-shadow: 0 2px 12px rgba(92,63,165,.06);
    }
    .header-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 24px;
      height: 60px; display: flex; align-items: center; gap: 12px;
    }
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .logo-mark {
      width: 41px; height: 41px; background: var(--primary); border-radius: 10px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .logo-mark svg { width: 22px; height: 22px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .logo-text { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--dark); letter-spacing: -0.02em; }
    .logo-text em { color: var(--primary); font-style: normal; }

    /* ── Tenant switcher ─────────────────────────────────────────
       Sits next to the master Dexes logo. Shows a '/' separator,
       the current tenant's logo (and optional name badge when a
       sub-tenant is active), plus a chevron that opens a dropdown
       listing sibling tenants. Populated by js/tenant-switcher.js.
       ──────────────────────────────────────────────────────────── */
    .tenant-switcher {
      position: relative;
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    .tenant-switcher[hidden] { display: none; }
    .tenant-switcher-slash {
      color: var(--gray-mid);
      font-size: 1.6rem; font-weight: 300;
      line-height: 1; user-select: none;
      margin: 0 2px;
    }
    .tenant-switcher-btn {
      display: flex; align-items: center; gap: 8px;
      background: transparent; border: 1.5px solid transparent;
      border-radius: var(--radius-sm);
      padding: 4px 6px;
      cursor: pointer;
      transition: background var(--tr), border-color var(--tr);
    }
    .tenant-switcher-btn:hover,
    .tenant-switcher-btn[aria-expanded="true"] {
      background: var(--primary-pale);
      border-color: var(--gray-light);
    }
    /* Tenant home anchor links — the parent logo and the active grandchild
       logo each sit inside their own <a> so clicking the logo goes to the
       tenant's home page, while the chevron button (next to them) is the
       only thing that opens the dropdown. */
    .tenant-switcher-home {
      display: inline-flex; align-items: center;
      padding: 2px 4px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      transition: background var(--tr);
    }
    .tenant-switcher-home[hidden] { display: none; }
    .tenant-switcher-home:hover {
      background: var(--primary-pale);
    }
    .tenant-switcher-logo,
    .tenant-switcher-active-logo {
      height: 26px; width: auto; max-width: 130px;
      display: block;
      object-fit: contain;
    }
    .tenant-switcher-active-logo[hidden] { display: none; }
    /* Inner slash — smaller and tighter than the outer one so the
       Dexes / parent / grandchild breadcrumb doesn't sprawl. */
    .tenant-switcher-slash-inner {
      font-size: 1.35rem;
      margin: 0;
    }
    .tenant-switcher-slash-inner[hidden] { display: none; }
    .tenant-switcher-badge {
      display: inline-flex; align-items: center;
      background: var(--primary-pale);
      color: var(--primary-dark);
      font-size: 0.7rem; font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      text-transform: uppercase; letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .tenant-switcher-badge[hidden] { display: none; }
    .tenant-switcher-chevron {
      color: var(--gray);
      transition: transform var(--tr);
      flex-shrink: 0;
    }
    .tenant-switcher-chevron[hidden] { display: none; }
    .tenant-switcher-btn[aria-expanded="true"] .tenant-switcher-chevron {
      transform: rotate(180deg);
    }
    /* Tenant has no daughters → the chip is a static label, not a selector.
       Kill all interactive affordances (cursor, hover bg, border) AND drop
       the chevron so there's no affordance suggesting a dropdown exists.
       Using the class-based selector is more robust than the [hidden]
       attribute because SVG elements don't reflect the HTMLElement .hidden
       IDL — setting element.hidden = true on an SVG doesn't set the
       attribute in all browsers. */
    .tenant-switcher.has-no-daughters .tenant-switcher-btn {
      cursor: default;
      border-color: transparent;
      background: transparent;
    }
    .tenant-switcher.has-no-daughters .tenant-switcher-btn:hover {
      background: transparent;
      border-color: transparent;
    }
    .tenant-switcher.has-no-daughters .tenant-switcher-chevron {
      display: none;
    }
    /* Master (dexes) view: no tenant logo, just a compact chevron button
       that reveals the list of child tenants. */
    .tenant-switcher-btn.is-master { padding: 6px 8px; }
    .tenant-switcher-btn.is-master .tenant-switcher-chevron { color: var(--primary); }
    .tenant-switcher-panel {
      position: absolute; top: calc(100% + 6px); left: 28px;
      min-width: 240px;
      background: var(--white);
      border: 1px solid var(--gray-light);
      border-radius: var(--radius);
      box-shadow: 0 8px 28px rgba(15, 15, 25, .12);
      padding: 6px;
      z-index: 250;
    }
    .tenant-switcher-panel[hidden] { display: none; }
    .tenant-switcher-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      color: var(--dark);
      font-size: 0.9rem; font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background var(--tr), color var(--tr);
    }
    .tenant-switcher-item:hover {
      background: var(--primary-pale);
      color: var(--primary);
      text-decoration: none;
    }
    .tenant-switcher-item.is-active {
      background: var(--primary-pale2, var(--primary-pale));
      color: var(--primary);
    }
    .tenant-switcher-item-logo {
      width: 22px; height: 22px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .tenant-switcher-item-icon {
      width: 22px; height: 22px;
      color: var(--gray);
      flex-shrink: 0;
    }
    .tenant-switcher-item.is-active .tenant-switcher-item-icon {
      color: var(--primary);
    }
    .tenant-switcher-item-name {
      flex: 1; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .tenant-switcher-item-status {
      font-size: 0.65rem; font-weight: 700;
      color: var(--gray-mid);
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .tenant-switcher-item.is-unavailable { opacity: .55; cursor: not-allowed; }
    .tenant-switcher-item.is-unavailable:hover { background: transparent; color: var(--dark); }

    /* ── Tree hierarchy ──────────────────────────────────────────────
       The first row in the dropdown is the mother tenant (parentLevel);
       the remaining rows are her daughters. Styled as a group heading +
       indented children so the hierarchy is obvious at a glance. */
    .tenant-switcher-item--parent {
      padding: 6px 10px 4px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gray-mid, #6b7280);
      cursor: default;
      pointer-events: none; /* heading — not a hover target */
    }
    .tenant-switcher-item--parent:hover {
      background: transparent;
      color: var(--gray-mid, #6b7280);
    }
    .tenant-switcher-item--parent.is-active {
      /* Mother is also the active tenant (e.g. on the DMI page). Show a
         subtle dot so the user sees where they are, but keep heading style. */
      background: transparent;
      color: var(--primary);
    }
    /* Promote the mother into a real link when she is NOT active, so the
       user can still click back to the mother from a grandchild view. */
    a.tenant-switcher-item--parent:not(.is-active) {
      pointer-events: auto;
      cursor: pointer;
    }
    a.tenant-switcher-item--parent:not(.is-active):hover {
      color: var(--primary);
    }
    /* Thin separator between the mother heading and her daughters. */
    .tenant-switcher-item--parent + .tenant-switcher-item--child {
      margin-top: 2px;
    }
    .tenant-switcher-item--child {
      padding-left: 8px;
    }
    /* Tree-guide glyph drawn with CSS so it always aligns with the row.
       The vertical segment continues the line from the row above. */
    .tenant-switcher-item-guide {
      flex-shrink: 0;
      width: 14px; height: 22px;
      position: relative;
      margin-right: 2px;
    }
    .tenant-switcher-item-guide::before {
      /* vertical trunk */
      content: "";
      position: absolute;
      left: 6px; top: -2px; bottom: 11px;
      border-left: 1.5px solid var(--gray-light, #e0e0e6);
    }
    .tenant-switcher-item-guide::after {
      /* horizontal branch into the row */
      content: "";
      position: absolute;
      left: 6px; top: 11px;
      width: 7px;
      border-bottom: 1.5px solid var(--gray-light, #e0e0e6);
    }
    /* Last child closes the trunk (└─ instead of ├─). */
    .tenant-switcher-item--child:last-child .tenant-switcher-item-guide::before {
      bottom: auto; height: 13px;
    }

    .tenant-switcher-empty {
      padding: 10px 12px;
      color: var(--gray); font-size: .85rem;
      font-style: italic;
    }
    /* Small-screen tweaks: hide the tenant badge text on very narrow widths,
       keep logo + chevron visible so the user can still switch tenants. */
    @media (max-width: 560px) {
      .tenant-switcher-logo { max-width: 80px; }
      .tenant-switcher-badge { display: none !important; }
    }

    .header-tag {
      background: var(--primary-pale); color: var(--primary);
      font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 0.07em;
      white-space: nowrap;
    }
    .header-spacer { flex: 1; }
    .header-back-btn {
      display: none; align-items: center; gap: 6px;
      background: var(--gray-pale); border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 7px 14px;
      font-size: 0.85rem; font-weight: 600; color: var(--dark);
      transition: all var(--tr);
    }
    .header-back-btn:hover { background: var(--primary-pale); border-color: var(--primary); color: var(--primary); }
    .header-back-btn.visible { display: flex; }
    .header-nav-link {
      display: flex; align-items: center; gap: 5px;
      font-size: 0.83rem; font-weight: 600; color: var(--dark);
      text-decoration: none; padding: 7px 14px; border-radius: var(--radius-sm);
      transition: color var(--tr), background var(--tr);
      white-space: nowrap;
    }
    .header-nav-link:hover { color: var(--primary); background: var(--primary-pale); text-decoration: none; }

    /* ── Language switcher ───────────────────────────────────── */
    .lang-switcher {
      display: flex;
      align-items: center;
      border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm);
      overflow: hidden;
      flex-shrink: 0;
    }
    .lang-btn {
      background: none;
      border: none;
      padding: 5px 11px;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--gray);
      cursor: pointer;
      transition: background var(--tr), color var(--tr);
      line-height: 1;
    }
    .lang-btn:first-child {
      border-right: 1.5px solid var(--gray-light);
    }
    .lang-btn.active {
      background: var(--primary);
      color: #fff;
    }
    .lang-btn:not(.active):hover {
      background: var(--primary-pale);
      color: var(--primary);
    }

    /* ── Hero ─────────────────────────────────────────────────── */
    /* Background reads the tenant --hero-bg (set in tenant/config.js via
       tenant-bootstrap.js) and falls back to the Dexes purple wave + gradient
       when no tenant override is present. Shared by the catalog list page and
       the members (LEDEN) page so both pick up white-label branding. */
    .hero {
      background: var(--hero-bg,
                    url('images/DexesWavepurple.svg') no-repeat center/cover,
                    linear-gradient(145deg, #0F0A24 0%, #1E0E40 40%, #2A1060 70%, #1A0A35 100%));
      /* App-wide compact hero — reduced from 48px/40px so overview /
         listing pages don't push their content far below the fold.
         Bottom padding is a touch larger than top so the in-hero org
         badge (.my-marketplace-org-bar) has breathing room. */
      padding: 28px 24px 32px; text-align: center;
      position: relative; overflow: hidden;
    }
    .hero h1 {
      font-family: var(--font-head); font-size: clamp(1.4rem,3.6vw,2rem);
      font-weight: 700; color: var(--white); letter-spacing: -0.03em; margin-bottom: 6px;
      position: relative;
    }
    .hero p { color: rgba(255,255,255,.78); font-size: 0.95rem; max-width: 500px; margin: 0 auto 18px; position: relative; }
    .search-wrap {
      max-width: 680px; margin: 0 auto; position: relative;
      display: flex; align-items: stretch;
      background: var(--white); border-radius: var(--radius);
      box-shadow: var(--shadow-hov); overflow: hidden;
      transition: box-shadow var(--tr);
    }
    .search-wrap:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.35), var(--shadow-hov); }
    .search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
    .search-wrap input {
      width: 100%; padding: 15px 44px 15px 48px;
      font-family: var(--font-body); font-size: .975rem;
      border: none; outline: none; color: var(--dark); background: transparent;
    }
    .search-wrap input::placeholder { color: var(--gray-mid); }
    .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
    .search-clear {
      position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
      background: var(--gray-light); border: none; border-radius: 50%;
      width: 25px; height: 25px; display: none; align-items: center; justify-content: center;
      color: var(--gray); font-size: .8rem; transition: background var(--tr), color var(--tr);
    }
    .search-clear:hover { background: var(--primary-pale); color: var(--primary); }
    .search-clear.visible { display: flex; }

    /* ── Layout ───────────────────────────────────────────────── */
    .main-wrap {
      max-width: 1280px; margin: 0 auto;
      padding: 28px 24px 64px;
      display: grid; grid-template-columns: 248px 1fr;
      gap: 24px; align-items: start;
    }
    @media (max-width: 820px) { .main-wrap { grid-template-columns: 1fr; } .sidebar { position: static !important; } }

    /* ── Sidebar ──────────────────────────────────────────────── */
    .sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 14px; }
    .filter-panel {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .filter-panel-title {
      font-family: var(--font-head); font-size: 0.78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray);
      padding: 12px 14px 10px;
      border-bottom: 1.5px solid var(--gray-light);
    }
    .filter-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
    .filter-card h3 {
      font-family: var(--font-head); font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-mid); margin-bottom: 11px;
    }
    .filter-group { display: flex; flex-direction: column; gap: 5px; }
    .filter-chip {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 11px; border-radius: var(--radius-sm);
      border: 1.5px solid var(--gray-light); background: var(--white);
      font-size: .84rem; color: var(--dark); cursor: pointer;
      transition: border-color var(--tr), background var(--tr), color var(--tr); text-align: left;
    }
    .filter-chip:hover { border-color: var(--primary-light); background: var(--primary-pale); color: var(--primary); }
    .filter-chip.active { border-color: var(--primary); background: var(--primary-pale); color: var(--primary); font-weight: 600; }

    /* ── Access badge filter group ───────────────────────────── */
    .filter-group-badges { display: flex; flex-wrap: wrap; gap: 7px; }
    .filter-badge-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
      border: 2px solid transparent; cursor: pointer;
      transition: opacity var(--tr), box-shadow var(--tr), border-color var(--tr), transform var(--tr);
      opacity: 0.55;
    }
    .filter-badge-btn:hover { opacity: 0.85; transform: translateY(-1px); }
    .filter-badge-btn.active { opacity: 1; border-color: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
    .filter-badge-btn.fbadge-all  { background: var(--gray-pale); color: var(--gray-mid); }
    .filter-badge-btn.fbadge-public     { background: var(--green-pale); color: var(--green); }
    .filter-badge-btn.fbadge-restricted { background: var(--amber-pale); color: var(--amber); }
    .filter-badge-btn.fbadge-private    { background: var(--red-pale);   color: var(--red);   }
    .filter-select {
      width: 100%; padding: 9px 30px 9px 11px; font-family: var(--font-body); font-size: .84rem;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      color: var(--dark); appearance: none; cursor: pointer; outline: none;
      background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236B7A8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
      transition: border-color var(--tr);
    }
    .filter-select:focus { border-color: var(--primary); }
    .filter-check-row {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 16px; cursor: pointer;
      font-size: .84rem; color: var(--dark); user-select: none;
    }
    .filter-check-row input[type="checkbox"] {
      width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
    }
    .reset-btn {
      display: block; width: 100%; padding: 10px 14px; border: none; border-radius: 0;
      border-top: 1px solid var(--gray-light);
      background: var(--white); color: var(--gray); font-size: .82rem; font-weight: 600;
      text-align: left; cursor: pointer;
      transition: background var(--tr), color var(--tr);
    }
    .reset-btn:hover { background: var(--primary-pale); color: var(--primary); }

    /* ── Results bar ──────────────────────────────────────────── */
    .results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
    .results-count { font-size: .88rem; color: var(--gray); }
    .results-count strong { color: var(--dark); font-weight: 600; }
    .sort-select {
      padding: 7px 28px 7px 11px; font-family: var(--font-body); font-size: .82rem;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      color: var(--dark); appearance: none; cursor: pointer; outline: none;
      background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236B7A8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
      transition: border-color var(--tr);
    }
    .sort-select:focus { border-color: var(--primary); }

    /* ── Error ────────────────────────────────────────────────── */
    .error-banner { background: #FFF0ED; border: 1.5px solid #F8C4B4; border-radius: var(--radius-sm); padding: 13px 17px; color: #9B2A00; font-size: .88rem; margin-bottom: 16px; display: none; }
    .error-banner.visible { display: block; }

    /* Full-block connection-error state — used when a sub-page's
       primary fetch (e.g. /api/policy-templates) fails completely.
       Renders inside the content slot so the user gets a clear
       message instead of a blank page, with a retry CTA and an
       optional <details> block for the raw error text. */
    .connection-error {
      background: var(--white);
      border: 1px solid var(--gray-light);
      border-left: 4px solid #F2994A;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px 28px 24px;
      max-width: 680px;
      margin: 12px auto;
      text-align: left;
      color: var(--dark);
    }
    .connection-error-icon {
      color: #F2994A;
      display: block;
      margin-bottom: 10px;
    }
    .connection-error-title {
      font-family: var(--font-head);
      font-size: 1.1rem;
      font-weight: 700;
      margin: 0 0 6px 0;
      color: var(--dark);
    }
    .connection-error-body {
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--gray);
      margin: 0 0 14px 0;
    }
    .connection-error-details {
      margin: 6px 0 14px 0;
      font-size: 0.82rem;
    }
    .connection-error-details summary {
      cursor: pointer;
      color: var(--primary);
      font-weight: 600;
    }
    .connection-error-details pre {
      margin: 8px 0 0 0;
      padding: 10px 12px;
      background: var(--off-white, #f9fafb);
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      font-size: 0.78rem;
      color: var(--gray);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .connection-error-retry {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: var(--primary);
      color: var(--white);
      border: none;
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.86rem;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--tr);
    }
    .connection-error-retry:hover,
    .connection-error-retry:focus-visible {
      background: var(--primary-dark, var(--primary));
      outline: none;
    }

    /* Offer-card warning — small inline note appended to an offer
       card when /api/offer-policy/:id fails. Visually distinct from
       the loaded state but unobtrusive, since the user can still
       use the page (just without the resolved label / conditions). */
    .offer-card-warning {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin-top: 10px;
      padding: 8px 10px;
      background: #FFF8EC;
      border: 1px solid #F2C97D;
      border-radius: var(--radius-sm);
      color: #8A5A00;
      font-size: 0.78rem;
      line-height: 1.4;
    }
    .offer-card-warning-icon {
      flex-shrink: 0;
      margin-top: 1px;
      color: #C77E00;
    }

    /* ─────────────────────────────────────────────────────────────
       DATASET CARDS
    ───────────────────────────────────────────────────────────── */
    .dataset-list { display: flex; flex-direction: column; }

    .dataset-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      margin-bottom: 14px;
      border: 1.5px solid transparent;
      display: grid;
      grid-template-columns: 4px 1fr;
      cursor: pointer;
      transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
      overflow: hidden;
    }
    .dataset-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hov); border-color: var(--primary-pale); }
    .dataset-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

    .card-accent { background: linear-gradient(180deg, var(--primary), var(--primary-light)); flex-shrink: 0; }
    /* Access accent stripe — solid Figma colours */
    .card-accent.access-public     { background: #6AA84F; }
    .card-accent.access-restricted { background: #F57C00; }
    .card-accent.access-private    { background: #D60D2B; }

    .card-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; }

    .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .card-title { font-family: var(--font-head); font-size: .975rem; font-weight: 600; color: var(--dark); line-height: 1.35; flex: 1; }
    .card-access-badge {
      flex-shrink: 0; font-size: 0.68rem; font-weight: 700; padding: 3px 9px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
    }
    /* Access badges — Figma palette: solid colour + white text */
    .badge-public     { background: #6AA84F; color: #FFFFFF; }
    .badge-restricted { background: #F57C00; color: #FFFFFF; }
    .badge-private    { background: #D60D2B; color: #FFFFFF; }
    .badge-unknown    { background: var(--gray-pale);   color: var(--gray); }

    .card-description {
      font-size: .855rem; color: var(--gray); line-height: 1.6;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .card-description.loading { height: 36px; border-radius: 6px; }

    .card-tags {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 8px;
      min-width: 0; overflow: hidden;
    }
    .card-tags-left  { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; flex: 1; }
    .card-tags-right { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; flex-shrink: 0; }
    .tag {
      font-size: 0.7rem; font-weight: 600; padding: 2px 9px;
      border-radius: 20px; letter-spacing: 0.03em; text-transform: capitalize;
    }
    .tag-theme    { background: var(--primary-pale); color: var(--primary); }
    .tag-keyword  { background: var(--gray-pale); color: var(--gray); border: 1px solid var(--gray-light); }
    .tag-overflow { background: var(--gray-light); color: var(--gray-mid); font-weight: 700; }

    /* Policy badge (kaart) */
    .card-top-badges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    .badge-policy {
      font-size: 0.68rem; font-weight: 700; padding: 3px 9px 3px 7px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
      background: rgba(26, 79, 160, 0.16); color: #1A4FA0;
      display: inline-flex; align-items: center; gap: 4px;
    }
    /* Hero-variant: badge zit op de paarse detail-hero, dus we keren
       de kleuren om (semi-transparant wit op donkere achtergrond) zodat
       het ritme van de andere hero-badges (type-badge, access-badge)
       gevolgd wordt. */
    .detail-hero .badge-policy,
    .badge-policy.badge-policy--hero {
      background: rgba(255, 255, 255, .15);
      color: var(--white);
      border: 1.5px solid rgba(255, 255, 255, .4);
      font-size: .72rem;
      padding: 3px 12px;
      letter-spacing: 0.06em;
    }

    /* Policy box (detailpagina) */
    .policy-box {
      background: #DAE9FC;
      border-radius: var(--radius);
      padding: 18px 20px;
      box-shadow: var(--shadow);
    }
    .policy-box h2 {
      font-family: var(--font-head); font-size: .9rem; font-weight: 700;
      color: #1A4FA0; margin-bottom: 12px; padding-bottom: 9px;
      border-bottom: 1px solid #C5DCF5; display: flex; align-items: center; gap: 7px;
    }
    .policy-item {
      padding: 10px 0; border-bottom: 1px solid rgba(26, 79, 160, 0.20); font-size: .84rem;
    }
    .policy-item:last-child { border-bottom: none; padding-bottom: 0; }
    .policy-item-row { display: flex; gap: 8px; margin-bottom: 3px; align-items: baseline; }
    .policy-item-key { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #1A4FA0; min-width: 80px; flex-shrink: 0; }
    .policy-item-val { font-size: .84rem; color: var(--dark); word-break: break-word; }
    .policy-item-val a { color: #1A4FA0; }
    .policy-access-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      background: #1A4FA0; color: var(--white);
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr); text-decoration: none;
    }
    .policy-access-btn:hover { background: #0E3070; text-decoration: none; }
    .policy-request-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 13px;
      background: var(--gray-light); color: var(--gray);
      border: 1.5px solid var(--gray-mid); border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr), color var(--tr), border-color var(--tr); text-decoration: none;
    }
    .policy-request-btn:hover { background: var(--gray-mid); color: var(--white); border-color: var(--gray-mid); text-decoration: none; }
    .policy-request-btn--icon { padding: 7px 9px; gap: 0; flex-shrink: 0; }
    .policy-request-btn--icon svg { flex-shrink: 0; }
    .policy-btn-row { display: flex; gap: 8px; flex-wrap: nowrap; margin-top: 14px; }
    .policy-btn-row .policy-request-btn,
    .policy-btn-row .policy-basket-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
    .policy-subtitle {
      font-size: .78rem; color: var(--gray); line-height: 1.5;
      margin-bottom: 12px; padding-bottom: 10px;
      border-bottom: 1px solid rgba(26, 79, 160, 0.15);
    }
    .policy-item-offer-label {
      font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      color: #1A4FA0; margin-bottom: 4px;
    }
    /* Row that pairs the policy id with the "Sluit een deal" button.
       The id-value gets the available space; the button stays compact and
       does not shrink. Both stay vertically centered for visual balance. */
    .policy-item-id-row {
      display: flex; align-items: center; gap: 10px;
      margin: 2px 0 8px;
      flex-wrap: wrap;
    }
    .policy-item-id-val {
      flex: 1 1 auto;
      font-size: .82rem; font-weight: 600; color: var(--dark);
      word-break: break-all; min-width: 0;
    }
    .policy-item-id-val a { color: #1A4FA0; }

    /* ── Offer-card op de resource-detailpagina ───────────────────────
       Spiegelt de offer-samenvattingskaart uit het publish-formulier
       (zie screenshot in user-request):
         • witte achtergrond, tenant-paarse border
         • paarse "Offer N" badge in tenant-kleur
         • offer-titel in bold direct na de badge
         • "CONDITIES:" label + grijze chips voor elke condition  */
    .offer-card {
      background: var(--white, #FFFFFF);
      /* No border per design — the policy-box already frames this
         content. White card sits inside the purple policy-box with
         generous horizontal padding so titles never bump the edges. */
      border: 0;
      border-radius: var(--radius-sm);
      padding: 14px 18px;
      margin: 8px 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .offer-card + .offer-card {
      border-top: 1px solid var(--gray-light, #E5E7EB);
      margin-top: 10px; padding-top: 16px;
    }
    /* "Offer N" eyebrow — small bold label above the title. Sits on
       its own line so long titles can wrap freely below it. */
    .offer-card-eyebrow {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 2px;
    }
    /* Legacy hooks kept as no-ops so the old class names don't break
       any external CSS overrides; layout is now driven by .offer-card-
       eyebrow / .offer-card-title-row / .offer-card-actions. */
    .offer-card-top, .offer-card-head { display: contents; }
    /* Offer-N label — restyled from a pill to plain bold tenant-colored
       text so it reads as a heading rather than a badge competing with
       the resource title. Padding/background dropped intentionally. */
    .offer-card-badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      padding: 0;
      background: transparent;
      color: var(--primary, #5C3FA5);
      font-family: var(--font-body);
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    /* Title row: holds the offer title + an optional policy-label badge.
       Inline-flex so the badge sits next to the title; wraps when the
       title is long. */
    .offer-card-title-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .offer-card-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--dark);
      min-width: 0;
      word-break: break-word;
      line-height: 1.3;
      flex: 1 1 auto;
    }
    /* Small pill carrying policy_info.policy_label — surfaced inline
       so users see the named template the offer is built on. Soft
       tenant-pale background so it reads as metadata, not as a CTA. */
    .offer-card-policy-label {
      flex: 0 1 auto;
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--gray-pale, #F4F2F8);
      color: var(--primary, #5C3FA5);
      font-size: .72rem;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.01em;
      max-width: 100%;
      word-break: break-word;
    }
    .offer-card-policy-label[hidden] { display: none !important; }
    /* Authority pill — sits next to the policy-template label and
       carries authority.authority_label. Visually subdued (outline
       only) so the policy-template label stays the dominant caption. */
    .offer-card-authority-label {
      flex: 0 1 auto;
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      background: transparent;
      color: var(--gray, #6b7280);
      border: 1px solid var(--gray-light, #e5e7eb);
      font-size: .7rem;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      max-width: 100%;
      word-break: break-word;
    }
    .offer-card-authority-label[hidden] { display: none !important; }
    /* Actions row — button on its own line, right-aligned. Previously
       the deal-button hugged the title with margin-left:auto, which
       broke when the title wrapped. */
    .offer-card-actions {
      display: flex; justify-content: flex-end;
      margin-top: 4px;
    }
    .offer-card-conditions {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }
    .offer-card-conditions-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--gray-mid);
      flex-shrink: 0;
    }
    .offer-card-conditions-label::after { content: ':'; }
    .offer-card-conditions-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .offer-card-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 20px;
      background: var(--gray-pale, #F4F2F8);
      color: var(--dark);
      font-size: .82rem;
      font-weight: 500;
      line-height: 1.3;
    }
    /* Skeleton-placeholders tijdens de async fetch — voorkomt layout-jump */
    .offer-card-skel {
      display: inline-block;
      width: 140px;
      height: 14px;
      border-radius: 4px;
      vertical-align: middle;
    }
    .offer-card-chip-skel {
      min-width: 110px;
      height: 22px;
      border-radius: 20px;
      background: var(--gray-light);
    }

    /* "Bekijk Offer" — tenant-primary (purple) to match the offer-N
       label and the modal it opens. Hover darkens slightly. */
    .policy-deal-btn {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      background: var(--primary, #5C3FA5); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr), filter var(--tr);
      text-decoration: none;
      white-space: nowrap;
    }
    .policy-deal-btn:hover { filter: brightness(0.9); }
    .policy-deal-btn:focus-visible { outline: 2px solid var(--primary, #5C3FA5); outline-offset: 2px; }
    /* Disabled state — used when no user is logged in. The button stays
       in the layout but no longer accepts clicks; styling drops to the
       neutral grey palette so it visually reads as inactive. */
    .policy-deal-btn:disabled,
    .policy-deal-btn.policy-deal-btn--disabled {
      background: var(--gray-light, #E5E7EB);
      color: var(--gray, #6B7280);
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.85;
    }
    .policy-deal-btn:disabled:hover,
    .policy-deal-btn.policy-deal-btn--disabled:hover {
      background: var(--gray-light, #E5E7EB);
    }
    /* Login-prompt message rendered under the policy-items when the
       visitor is not logged in. Sits inside the same blue policy-box
       so it visually belongs to the deal-flow. */
    .policy-login-prompt {
      font-size: .78rem; line-height: 1.5; color: #1A4FA0;
      background: rgba(255, 255, 255, 0.55);
      border: 1px dashed rgba(26, 79, 160, 0.35);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      margin: 8px 0 4px;
    }

    .card-footer {
      display: flex; align-items: center; gap: 16px;
      padding-top: 10px; border-top: 1px solid var(--gray-light);
      flex-wrap: wrap;
    }
    .card-footer-item {
      display: flex; align-items: center; gap: 5px;
      font-size: .78rem; color: var(--gray-mid);
    }
    .card-footer-item svg { flex-shrink: 0; }
    .card-footer-item strong { color: var(--dark2); font-weight: 500; }
    .card-footer-arrow {
      color: var(--primary); font-size: .8rem; font-weight: 600;
      display: flex; align-items: center; gap: 4px; white-space: nowrap;
    }

    /* DMI-lid badge (verschijnt achter organisatienaam bij succesvol EORI-opzoeking) */
    .dmi-badge {
      display: inline-flex; align-items: center; gap: 3px;
      background: var(--primary-dark); color: var(--white);
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      padding: 2px 6px 2px 4px; border-radius: 10px; vertical-align: middle;
      margin-left: 5px; white-space: nowrap; line-height: 1;
    }
    .dmi-badge img { width: 10px; height: 10px; display: inline-block; flex-shrink: 0; }

    /* Common-icoon in condities-badge */
    .badge-policy img.icon-common { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }

    /* Card loading state */
    @keyframes shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }
    .skel {
      background: linear-gradient(90deg, var(--gray-light) 25%, #f0edf8 50%, var(--gray-light) 75%);
      background-size: 600px 100%; animation: shimmer 1.4s infinite; border-radius: 6px;
    }
    .card-skeleton {
      background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 11px;
      border-left: 4px solid var(--gray-light);
    }
    .skel-h  { height: 18px; }
    .skel-sm { height: 13px; }
    .skel-w60 { width: 60%; }
    .skel-w80 { width: 80%; }
    .skel-w40 { width: 40%; }

    /* ── Pagination ───────────────────────────────────────────── */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 28px; flex-wrap: wrap; }
    .page-btn {
      padding: 7px 13px; border: 1.5px solid var(--gray-light);
      background: var(--white); border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .84rem; color: var(--dark);
      cursor: pointer; transition: all var(--tr); min-width: 38px; text-align: center;
    }
    .page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
    .page-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 600; }
    .page-btn:disabled { opacity: .4; cursor: not-allowed; }
    .page-ellipsis { color: var(--gray); padding: 0 3px; line-height: 36px; }

    /* ── PDC cross-catalog banner ────────────────────────────── */
    .pdc-banner {
      margin-top: 28px;
      width: 70%;
      background: #EBF5FB;
      border: 1px solid #AED6F1;
      border-left: 4px solid #2980B9;
      border-radius: var(--radius);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .pdc-banner[hidden] { display: none !important; }
    .pdc-banner-body { flex: 1; min-width: 0; }
    .pdc-banner-title { font-family: var(--font-head); font-size: .98rem; font-weight: 700; color: #1A5276; margin: 0 0 5px 0; }
    .pdc-banner-text { color: #1A5276; font-size: .875rem; margin: 0; line-height: 1.55; }
    .pdc-banner-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: #2980B9; color: #fff;
      border: none; border-radius: var(--radius-sm);
      padding: 9px 18px; font-size: .875rem; font-weight: 600;
      cursor: pointer; text-decoration: none; white-space: nowrap;
      transition: background var(--tr);
      flex-shrink: 0;
    }
    .pdc-banner-btn:hover { background: #1A6FA0; color: #fff; }
    @media (max-width: 540px) {
      .pdc-banner { width: 100%; flex-direction: column; align-items: flex-start; }
      .pdc-banner-btn { width: 100%; justify-content: center; }
    }

    /* ── Empty state ──────────────────────────────────────────── */
    .empty-state { text-align: center; padding: 56px 24px; color: var(--gray); }
    .empty-state svg { margin-bottom: 14px; opacity: .3; }
    .empty-state h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--dark); margin-bottom: 5px; }

    /* ═══════════════════════════════════════════════════════════
       DETAIL PAGE
    ═══════════════════════════════════════════════════════════ */
    #homePage   { display: block; }
    #listPage   { display: none; }
    #detailPage { display: none; }

    .detail-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 72px; }

    /* Detail hero */
    .detail-hero {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: var(--radius); padding: 32px 36px; margin-bottom: 28px;
      color: var(--white);
    }
    .detail-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .detail-hero h1 { font-family: var(--font-head); font-size: clamp(1.3rem,3vw,1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; min-width: 0; flex: 1; }
    .detail-access-badge {
      flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: 4px 12px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em;
      border: 1.5px solid rgba(255,255,255,.4); color: var(--white); white-space: nowrap;
    }
    /* Access detail badges — Figma palette (solid colour + white text) */
    .detail-access-badge.badge-public     { background: #6AA84F; color: #FFFFFF; border-color: transparent; }
    .detail-access-badge.badge-restricted { background: #F57C00; color: #FFFFFF; border-color: transparent; }
    .detail-access-badge.badge-private    { background: #D60D2B; color: #FFFFFF; border-color: transparent; }
    .detail-access-badge.badge-unknown    { background: rgba(255,255,255,.15); color: var(--white); }
    .detail-hero-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: .85rem; opacity: .82; }
    .detail-hero-meta-item { display: flex; align-items: center; gap: 6px; }

    /* Object-type badge (DATASET / DIENST / APPLICATIE / …) — matches card-access-badge sizing */
    .type-badge {
      display: inline-flex; align-items: center;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; white-space: nowrap;
      padding: 3px 9px; border-radius: 20px;
      background: var(--primary-pale); color: var(--primary);
      border: 1px solid rgba(92,63,165,.2);
    }
    /* Top-right badge cluster in detail hero */
    .detail-hero-top-badges {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    /* In-hero "Overzicht" button — sits next to the type / access badges
       and replaces the global header back-button on detail pages.
       NOTE: vanaf v2 staat de back-link standaard BOVEN de hero (zie
       .detail-back-link). De badge-vorm hieronder blijft alleen behouden
       voor backwards compatibility met legacy renderpaden die nog een
       `<button class="hero-back-btn">` binnen de hero plaatsen. */
    .hero-back-btn {
      display: inline-flex; align-items: center; gap: 5px;
      flex-shrink: 0;
      font-family: var(--font-body);
      font-size: .72rem; font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase; white-space: nowrap;
      padding: 4px 12px 4px 10px;
      border-radius: 20px;
      border: 1.5px solid rgba(255,255,255,.4);
      background: rgba(255,255,255,.15);
      color: var(--white);
      cursor: pointer;
      transition: background var(--tr), border-color var(--tr), color var(--tr);
    }
    .hero-back-btn:hover,
    .hero-back-btn:focus-visible {
      background: var(--white);
      border-color: var(--white);
      color: var(--primary);
      outline: none;
    }
    .hero-back-btn svg { display: block; }

    /* Detail back-link — vervangt de oude in-hero badge. Staat boven
       de paarse hero, leest als een simpele tekst-link (geen achtergrond,
       geen border, geen UPPERCASE-pill). De `.hero-back-btn`-class blijft
       voor de bestaande delegated click-handler op `.hero-back-btn`. */
    .detail-back-link.hero-back-btn,
    .detail-back-link {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0;
      margin: 0 0 12px 0;
      background: transparent;
      border: none;
      border-radius: 0;
      color: var(--primary);
      font-family: var(--font-body);
      font-size: .85rem;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
      text-decoration: none;
      cursor: pointer;
    }
    .detail-back-link.hero-back-btn:hover,
    .detail-back-link.hero-back-btn:focus-visible,
    .detail-back-link:hover,
    .detail-back-link:focus-visible {
      background: transparent;
      border: none;
      color: var(--primary-dark);
      text-decoration: underline;
      outline: none;
    }
    .detail-back-link svg { display: block; }
    /* On dark purple backgrounds (detail hero) — matches detail-access-badge sizing */
    .detail-hero .type-badge {
      font-size: .72rem; padding: 4px 12px; letter-spacing: 0.06em;
      border: 1.5px solid rgba(255,255,255,.4);
      background: rgba(255,255,255,.15);
      color: var(--white);
    }

    /* Detail grid */
    .detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
    @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } }

    .detail-main, .detail-side { display: flex; flex-direction: column; gap: 20px; }
    .detail-side { gap: 10px; }

    .detail-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
    .detail-side .detail-card { background: #E8E6F0; padding: 16px; }
    .detail-card h2 {
      font-family: var(--font-head); font-size: 1rem; font-weight: 700;
      color: var(--dark); margin-bottom: 14px; padding-bottom: 10px;
      border-bottom: 1.5px solid var(--gray-light);
    }
    /* Geef de Kwaliteit-h2 een rustig accent (SVG-icoon links van titel)
       zonder dat we de standaard kaart-typografie overschrijven. */
    .detail-card--quality h2 { display: flex; align-items: center; gap: 8px; }
    .detail-card--quality h2 svg { color: var(--primary); flex-shrink: 0; }
    /* Kwaliteit-badge — friendly pill voor de standaard kwaliteitswaarden.
       Drie kleurniveaus (1 = slecht/rood, 2 = matig/oranje, 3 = goed/groen),
       met een neutrale fallback voor onbekende waarden. */
    .quality-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .78rem; font-weight: 600; line-height: 1.3;
      padding: 4px 11px;
      border-radius: 20px;
      background: var(--gray-pale, #F1F0F6);
      color: var(--gray, #5A5A6E);
      border: 1px solid var(--gray-light, #E5E7EB);
      white-space: normal;
      max-width: 100%;
    }
    .quality-badge--level-1 {
      background: #FCE6E9; color: #9A1428; border-color: #F2BFC6;
    }
    .quality-badge--level-2 {
      background: #FFF1DD; color: #8A4B00; border-color: #F8D9B0;
    }
    .quality-badge--level-3 {
      background: #E2F1DA; color: #2E6B19; border-color: #BFDFB0;
    }
    /* Explanation-row: free-tekst, geen badge. Iets verdiepte achtergrond
       zodat hij optisch losstaat van de gekleurde dimensies erboven. */
    .meta-row--quality-explanation .meta-val {
      font-size: .85rem; line-height: 1.55;
      color: var(--dark);
      white-space: pre-wrap;
    }
    /* ── Collapsible sidebar cards ──────────────────────────────────────── */
    .detail-side .detail-card > h2 {
      display: flex; align-items: center;
      cursor: pointer; user-select: none;
      font-size: .9rem;
      margin-bottom: 10px; padding-bottom: 8px;
    }
    /* Inner span wrapping the original h2 content */
    .detail-card-h2-inner {
      display: flex; align-items: center; gap: 6px;
      flex: 1; min-width: 0;
    }
    /* Chevron appended by JS */
    .detail-card-chevron {
      flex-shrink: 0;
      display: inline-flex; align-items: center;
      margin-left: 6px;
      color: var(--gray-mid);
      transition: transform 0.2s ease;
    }
    /* Collapsed state: rotate chevron, hide all body content, shrink padding */
    .detail-side .detail-card.collapsed {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .detail-side .detail-card.collapsed > h2 {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom-color: transparent;
    }
    .detail-side .detail-card.collapsed > h2 .detail-card-chevron {
      transform: rotate(-90deg);
    }
    .detail-side .detail-card.collapsed > *:not(h2) { display: none; }

    /* Trust card — base palette (blue background, blue title). The
       "merge with preceding policy-box" treatment (squared top corners,
       negative margin, no shadow) only kicks in when a .policy-box
       actually precedes the trust card. When the trust card is
       standalone (e.g. on the member detail page) it keeps its own
       rounded corners and shadow. */
    .detail-side .detail-card.detail-card--trust-dmi,
    .detail-side .detail-card.detail-card--trust-warn {
      background: #DAE9FC;
    }
    /* Policy-box and the trust card render as two visually-separate boxes
       stacked vertically, each with its own rounded corners and shadow.
       (The previous merge treatment that flattened them into a single
       rectangle has been removed at the user's request.) */
    .detail-side .detail-card.detail-card--trust-dmi > h2,
    .detail-side .detail-card.detail-card--trust-warn > h2 {
      color: #1A4FA0;
      border-bottom-color: #C5DCF5;
    }
    /* When collapsed, hide the grey/blue divider under the trust h2.
       Higher specificity than the generic collapsed rule above, which
       would otherwise be overridden by the trust h2 rule. */
    .detail-side .detail-card.detail-card--trust-dmi.collapsed > h2,
    .detail-side .detail-card.detail-card--trust-warn.collapsed > h2 {
      border-bottom-color: transparent;
    }
    /* Trust status indicator next to the title — green check when the
       data comes from a DMI member, amber exclamation when it does not.
       Pushed to the right side of the title (chevron sits further right). */
    .trust-status-indicator {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px;
      margin-left: auto;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .trust-status-indicator--ok {
      background: #138A36;
      color: #FFFFFF;
    }
    .trust-status-indicator--warn {
      background: #D97706;
      color: #FFFFFF;
    }
    .trust-status-indicator svg { display: block; }
    /* The status pill inside Trust already carries its own icon/text;
       remove its background so the card colour shows through uniformly */
    .detail-side .detail-card.detail-card--trust-dmi .dataset-status-box,
    .detail-side .detail-card.detail-card--trust-warn .dataset-status-box {
      background: transparent;
      padding: 0;
      margin: 4px 0 2px;
      border-radius: 0;
    }

    .detail-description { font-size: .9rem; line-height: 1.7; color: var(--dark2); }

    /* Markdown-rendered content inside description */
    .detail-description.markdown-body p { margin: 0 0 .75em; }
    .detail-description.markdown-body p:last-child { margin-bottom: 0; }
    .detail-description.markdown-body ul,
    .detail-description.markdown-body ol { margin: .5em 0 .75em 1.4em; padding: 0; }
    .detail-description.markdown-body li { margin-bottom: .3em; }
    .detail-description.markdown-body h1,
    .detail-description.markdown-body h2,
    .detail-description.markdown-body h3 {
      font-family: var(--font-head); font-weight: 700;
      color: var(--dark); margin: 1em 0 .4em;
    }
    .detail-description.markdown-body h1 { font-size: 1.1rem; }
    .detail-description.markdown-body h2 { font-size: 1rem; }
    .detail-description.markdown-body h3 { font-size: .95rem; }
    .detail-description.markdown-body a { color: var(--primary); text-decoration: underline; }
    .detail-description.markdown-body a:hover { opacity: .8; }
    .detail-description.markdown-body code {
      background: var(--gray-light); border-radius: 3px;
      padding: .1em .35em; font-size: .85em; font-family: monospace;
    }
    .detail-description.markdown-body pre {
      background: var(--gray-light); border-radius: 6px;
      padding: .75em 1em; overflow-x: auto; margin: .5em 0;
    }
    .detail-description.markdown-body pre code { background: none; padding: 0; }
    .detail-description.markdown-body strong { font-weight: 600; color: var(--dark); }
    .detail-description.markdown-body blockquote {
      border-left: 3px solid var(--primary); margin: .5em 0;
      padding-left: .75em; color: var(--gray);
    }

    /* Collapsible long description */
    .desc-wrapper { position: relative; }
    .desc-wrapper.desc-collapsible.desc-collapsed {
      max-height: 320px;
      overflow: hidden;
    }
    /* Fade sits at the very bottom of the clipped wrapper */
    .desc-fade { display: none; }
    .desc-collapsible.desc-collapsed .desc-fade {
      display: block;
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 80px;
      background: linear-gradient(to bottom, transparent, #fff);
      pointer-events: none;
    }
    /* Toggle button lives outside the wrapper so overflow:hidden can't clip it */
    .desc-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
      background: none;
      border: none;
      padding: 0;
      font-size: .85rem;
      font-weight: 600;
      color: var(--primary);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .desc-toggle:hover { opacity: .75; }

    /* Metadata list */
    .meta-list { display: flex; flex-direction: column; gap: 0; }
    .meta-row {
      display: grid; grid-template-columns: 128px 1fr; gap: 8px;
      padding: 10px 0; border-bottom: 1px solid var(--gray-light);
      align-items: baseline;
    }
    .meta-row:last-child { border-bottom: none; }
    .detail-side .meta-row { grid-template-columns: 114px 1fr; padding: 6px 0; }
    .meta-key { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-mid); padding-top: 1px; }
    .meta-val { font-size: .88rem; color: var(--dark); line-height: 1.5; word-break: break-word; }
    .meta-val a { color: var(--primary); word-break: break-all; }

    /* Org block — role label stacked above the organisation name, tight
       spacing so label + name read as one unit; rating box (if DMI)
       sits below the name, also tight. Used for creator + publisher
       rows inside the Trust card. */
    .meta-row--org {
      display: flex; flex-direction: column; gap: 0;
      padding: 8px 0;
    }
    .meta-row--org .meta-key { margin-bottom: 1px; padding-top: 0; }
    .meta-row--org .meta-val { margin: 0; }
    .meta-row--org .dmi-rating-box {
      margin-top: 4px; padding: 0; border-bottom: none;
    }

    /* Trust-card: organisatienaam als deeplink naar het #deelnemer-profiel.
       Houdt de standaard meta-val typografie aan en voegt alleen primary-
       kleur + onderstreping-on-hover toe — geen pill, geen icoon. */
    .trust-org-link {
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
      word-break: break-word;
    }
    .trust-org-link:hover,
    .trust-org-link:focus-visible {
      color: var(--primary-dark);
      text-decoration: underline;
      outline: none;
    }
    /* Badges-slot direct onder de naam: "Lid" + status. Een korte skeleton
       wordt getoond tijdens de async fetch zodat de rij niet hopt. */
    .meta-row--org .trust-member-badges {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 6px;
    }
    .meta-row--org .trust-member-badges:empty { display: none; }
    /* "Lid"-badge in de trust-card — duidelijk leesbaar op de licht-paarse
       sidebar-achtergrond. Het type-badge--member overerft eigen styling
       op de hero (witte pill), die we hier juist niet willen — vandaar de
       expliciete override. */
    .meta-row--org .trust-member-lid {
      background: var(--primary-pale);
      color: var(--primary);
      border: 1px solid var(--primary-pale);
      letter-spacing: 0.05em;
      font-weight: 700;
    }

    /* DMI rating box (full-width, inline under org name) */
    .dmi-rating-box {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 0; border-bottom: 1px solid var(--gray-light);
    }
    .dmi-rating-box:last-child { border-bottom: none; }
    .dmi-rating-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
    .dmi-rating-stars { display: flex; align-items: center; gap: 2px; }
    .dmi-rating-stars svg { display: block; }
    .dmi-rating-lid { font-size: .65rem; font-weight: 800; letter-spacing: .08em; color: var(--primary); text-transform: uppercase; }

    /* Dataset status box (under Toegang in Dataset info card) */
    .dataset-status-box {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 10px; border-radius: 6px; margin: 4px 0 6px;
      font-size: .78rem; font-weight: 600; line-height: 1.3;
    }
    .dataset-status-dmi {
      background: color-mix(in srgb, var(--primary) 8%, transparent);
      color: var(--primary);
    }
    .dataset-status-warning {
      background: #EBF4FF;
      color: #1A6BBF;
    }
    .dataset-status-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
    .dataset-status-icon { flex-shrink: 0; }
    /* Two-line variant — headline + subline stacked next to the logo */
    .dataset-status-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
    .dataset-status-headline { font-weight: 600; }
    .dataset-status-sub { font-size: .72rem; font-weight: 500; opacity: .85; }
    /* Remove the border-bottom on the row directly above the status box */
    .meta-row:has(+ .dataset-status-box) { border-bottom: none; }
    .dmi-rating-score { font-size: .95rem; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
    .dmi-rating-reviews { font-size: .78rem; color: var(--gray-mid); }

    /* Tag groups in detail */
    .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }

    /* ── Distributions ────────────────────────────────────────── */
    .dist-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
    .dist-card {
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start;
      transition: border-color var(--tr), background var(--tr);
    }
    .dist-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
    .dist-format-badge {
      flex-shrink: 0; min-width: 52px; padding: 4px 10px;
      background: var(--primary-pale); color: var(--primary);
      font-family: var(--font-head); font-size: .72rem; font-weight: 700;
      border-radius: var(--radius-xs); text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .dist-info { flex: 1; min-width: 0; }
    .dist-title { font-size: .9rem; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
    .dist-desc  { font-size: .82rem; color: var(--gray); margin-bottom: 6px; }
    .dist-meta  { display: flex; gap: 14px; flex-wrap: wrap; }
    .dist-meta-item { font-size: .76rem; color: var(--gray-mid); display: flex; align-items: center; gap: 4px; }
    .dist-action { flex-shrink: 0; }
    .dist-action-with-label { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .dist-condition-label {
      display: flex; align-items: center; gap: 4px;
      font-family: var(--font-head); font-size: .72rem; font-weight: 700;
      color: #1A4FA0; white-space: nowrap;
    }
    .dist-download-btn {
      display: flex; align-items: center; gap: 5px;
      background: var(--primary); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      padding: 8px 14px; font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr); white-space: nowrap; text-decoration: none;
    }
    .dist-download-btn:hover { background: var(--primary-light); text-decoration: none; }
    .dist-download-btn--access { background: #1A4FA0; }
    .dist-download-btn--access:hover { background: #0E3070; }

    .dist-empty { text-align: center; padding: 28px; color: var(--gray); font-size: .88rem; }

    /* Distribution with own policy — split layout */
    .dist-card-has-policy { padding: 0; align-items: stretch; overflow: hidden; }
    .dist-card-has-policy:hover { background: transparent; }
    .dist-card-left { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
    .dist-card-has-policy:hover .dist-card-left { background: var(--primary-pale2); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .dist-policy-panel {
      flex: 0 0 25%; min-width: 0;
      background: rgba(26, 79, 160, 0.14);
      border-left: 1.5px solid rgba(26, 79, 160, 0.22);
      padding: 12px 14px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .dist-policy-title {
      font-family: var(--font-head); font-size: .76rem; font-weight: 700; color: #1A4FA0;
      display: flex; align-items: center; gap: 5px;
      padding-bottom: 7px; border-bottom: 1px solid rgba(26, 79, 160, 0.20); margin-bottom: 2px;
    }
    .dist-policy-count {
      background: rgba(26, 79, 160, 0.16); color: #0E3070;
      font-size: .65rem; padding: 1px 7px; border-radius: 20px; font-weight: 700;
    }
    .dist-policy-item { font-size: .76rem; color: var(--dark); margin-bottom: 3px; word-break: break-word; line-height: 1.4; }
    .dist-policy-item a { color: #1A4FA0; }
    .dist-policy-item-key { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #1A4FA0; margin-bottom: 1px; }
    .dist-policy-spacer { flex: 1; }
    .dist-access-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      margin-top: 8px; padding: 7px 10px;
      background: #1A4FA0; color: var(--white);
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .78rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr); text-decoration: none; white-space: nowrap;
    }
    .dist-access-btn:hover { background: #0E3070; text-decoration: none; }

    /* ── Spinner / loading ────────────────────────────────────── */
    .spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 48px; gap: 12px; color: var(--gray); }
    .spinner { width: 22px; height: 22px; border: 2.5px solid var(--gray-light); border-top-color: var(--primary); border-radius: 50%; animation: spin .65s linear infinite; flex-shrink: 0; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Footer ───────────────────────────────────────────────── */
    /* ── Footer ─────────────────────────────────────────── */
    .site-footer {
      background: var(--dark);
      color: rgba(255,255,255,.55);
      font-size: .8rem;
    }
    .site-footer-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; gap: 40px; align-items: flex-start;
      padding: 28px 24px 20px;
    }
    .footer-col { display: flex; flex-direction: column; gap: 6px; flex: 1; }
    .footer-col-brand { flex: 0 0 auto; min-width: 130px; gap: 8px; }
    .footer-powered {
      font-size: .7rem; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: rgba(255,255,255,.35);
    }
    .footer-logo { height: 28px; width: auto; display: block; opacity: .85; }
    .footer-col-title {
      font-size: .7rem; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: rgba(255,255,255,.4);
      margin-bottom: 2px;
    }
    .footer-col a {
      color: rgba(255,255,255,.65); text-decoration: none; font-size: .8rem;
      transition: color var(--tr);
    }
    .footer-col a:hover { color: #fff; }
    .site-footer-bottom-wrap {
      background: var(--white);
      border-top: 1px solid var(--gray-light);
    }
    .site-footer-bottom {
      max-width: 1200px; margin: 0 auto;
      padding: 12px 24px;
      font-size: .78rem; color: var(--gray);
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 8px 18px; justify-content: space-between;
    }
    .site-footer-bottom a { color: var(--primary); }
    .site-footer-bottom a:hover { text-decoration: underline; }

    /* Tech-info row (left) and legal row (right) — both fit on one line on desktop */
    .site-footer-bottom-tech,
    .site-footer-bottom-legal {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .site-footer-bottom-legal a { color: var(--gray); }
    .site-footer-bottom-legal a:hover { color: var(--primary); text-decoration: underline; }
    .footer-bottom-divider { color: var(--gray-mid); user-select: none; }

    /* ── Trust & certification bar ────────────────────────────
       Sits above the white legal/copyright bar but inside the dark footer,
       carrying the ISO 27001 + EU DGA recognition claim.
       Mirrors dexes.nl visual treatment. */
    .site-footer-trust-wrap {
      max-width: 1200px; margin: 0 auto;
      padding: 0 24px 24px;
    }
    .site-footer-trust {
      display: flex; flex-wrap: wrap; gap: 48px;
      justify-content: center;     /* centreer beide blokken in de blad-spiegel */
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .trust-item {
      display: flex; align-items: center; gap: 12px;
      flex: 0 1 auto;              /* niet rekken — items behouden hun natuurlijke breedte */
      min-width: 0;
    }
    .trust-item-text { display: flex; flex-direction: column; min-width: 0; }
    .trust-item-title {
      font-family: var(--font-head); font-size: .82rem; font-weight: 700;
      color: rgba(255,255,255,.8); line-height: 1.3;
    }
    .trust-item-sub {
      font-size: .75rem; color: rgba(255,255,255,.4);
      margin-top: 2px; line-height: 1.4;
    }

    /* Prescribed ISO 27001:2022 certification mark.
       The asset itself lives at /images/iso-27001.svg and must be the
       official, certifier-issued logo — do not redraw or restyle it. */
    .trust-iso-logo {
      flex-shrink: 0;
      height: 48px; width: auto; display: block;   /* ~25% kleiner dan de EU-vlag — past nu beter bij de tekstbox ernaast */
      background: #fff;
      border-radius: 5px;
      padding: 3px;
    }

    /* EU flag + recognition link.
       De trust-items zijn nu content-breed (niet uitgerekt), dus flag, tekst
       en EU logo staan vanzelf strak tegen elkaar — geen margin-left:auto meer nodig. */
    .trust-eu-flag { flex-shrink: 0; border-radius: 3px; }
    .trust-eu-link { flex-shrink: 0; line-height: 0; }
    .trust-eu-img { height: 64px; width: auto; display: block; opacity: .9; transition: opacity var(--tr); }
    .trust-eu-link:hover .trust-eu-img { opacity: 1; }

    /* ══════════════════════════════════════════════════════════
       COOKIE CONSENT BANNER
       Fixed bottom-right card — mirrors dexes.nl initial cookie prompt.
       Hidden on first paint via [hidden]; js/cookie-banner.js shows it
       only when no consent decision is stored in localStorage.
    ══════════════════════════════════════════════════════════ */
    .cookie-banner {
      position: fixed;
      left: 24px; right: 24px; bottom: 24px;
      z-index: 1100;
      max-width: 480px;
      margin-left: auto;
      background: var(--white);
      color: var(--dark);
      border-radius: var(--radius);
      box-shadow: 0 16px 48px rgba(20,15,42,.25), 0 4px 16px rgba(20,15,42,.12);
      border: 1px solid var(--gray-light);
      animation: cookieBannerIn .35s cubic-bezier(.4,0,.2,1);
    }
    @keyframes cookieBannerIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .cookie-banner-inner {
      display: flex; flex-direction: column; gap: 14px;
      padding: 18px 20px 16px;
    }
    .cookie-banner-title {
      font-family: var(--font-head);
      font-size: 1rem; font-weight: 700;
      color: var(--dark); line-height: 1.3;
    }
    .cookie-banner-body {
      font-size: .85rem; line-height: 1.55;
      color: var(--gray);
    }
    .cookie-banner-body a {
      color: var(--primary); text-decoration: underline;
      text-underline-offset: 2px;
    }
    .cookie-banner-body a:hover { color: var(--primary-dark); }
    .cookie-banner-actions {
      display: flex; gap: 10px; justify-content: flex-end;
      flex-wrap: wrap;
    }
    .cookie-banner-btn {
      font-family: var(--font-head);
      font-size: .82rem; font-weight: 600;
      padding: 9px 18px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--gray-light);
      background: var(--white);
      color: var(--dark);
      cursor: pointer;
      transition: background var(--tr), border-color var(--tr), color var(--tr);
    }
    .cookie-banner-btn:hover { border-color: var(--primary); color: var(--primary); }
    .cookie-banner-btn-accept {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--white);
    }
    .cookie-banner-btn-accept:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: var(--white);
    }

    /* Utility */
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* ── Logo image ───────────────────────────────────────────── */
    .logo-img { height: 26px; width: auto; display: block; }

    /* ══════════════════════════════════════════════════════════════
       HOME PAGE
    ══════════════════════════════════════════════════════════════ */
    #homePage { display: block; }

    /* Hero – exact dexes.nl background */
    .home-hero {
      background: var(--hero-bg,
                    url('images/DexesWavepurple.svg') no-repeat center/cover,
                    linear-gradient(145deg, #0F0A24 0%, #1E0E40 40%, #2A1060 70%, #1A0A35 100%));
      padding: 80px 24px 88px;
      position: relative; overflow: hidden;
    }
    /* Decorative orbs — colors driven by tenant variables, default to Dexes purple */
    .home-hero-orb {
      position: absolute; border-radius: 50%;
      pointer-events: none; filter: blur(90px);
    }
    .home-hero-orb1 {
      width: 560px; height: 560px;
      background: var(--hero-orb1, rgba(176,139,240,.18));
      top: -180px; right: -80px;
    }
    .home-hero-orb2 {
      width: 380px; height: 380px;
      background: var(--hero-orb2, rgba(92,63,165,.22));
      bottom: -120px; left: 8%;
    }
    .home-hero-orb3 {
      width: 260px; height: 260px;
      background: var(--hero-orb3, rgba(26,79,160,.18));
      top: 40%; left: 32%;
    }
    .home-hero-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
      align-items: center; position: relative;
    }
    @media (max-width: 900px) {
      .home-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    }

    /* Left – promo text */
    .home-hero-left {}
    .home-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.85); font-size: .75rem; font-weight: 600;
      padding: 4px 12px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase;
      margin-bottom: 22px;
    }
    .home-hero-left h1 {
      font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.18;
      margin-bottom: 18px;
    }
    .home-hero-left h1 span { color: var(--hero-span-color, #B08BF0); }
    .home-hero-left p {
      font-size: 1.05rem; color: rgba(255,255,255,.72); line-height: 1.7;
      max-width: 440px; margin-bottom: 34px;
    }
    .home-hero-cta {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: #0E2E5C;
      font-family: var(--font-head); font-size: .92rem; font-weight: 700;
      padding: 13px 26px; border-radius: var(--radius-sm);
      text-decoration: none; transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
    }
    .home-hero-cta:hover { background: #E8F0FE; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); text-decoration: none; }
    .home-hero-cta svg { transition: transform var(--tr); }
    .home-hero-cta:hover svg { transform: translateX(3px); }

    /* Right – purple search box */
    .home-hero-right {}
    .home-search-box {
      background: var(--primary);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
      padding: 28px 28px 26px;
    }
    .home-search-box h2 {
      font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
      color: #fff; margin-bottom: 6px;
    }
    .home-search-box > p {
      font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 18px; line-height: 1.5;
    }
    .home-search-wrap {
      display: flex; align-items: stretch;
      background: #fff; border-radius: var(--radius-sm);
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
      overflow: hidden; margin-bottom: 12px;
      transition: box-shadow var(--tr);
    }
    .home-search-wrap:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 4px 16px rgba(0,0,0,.18); }
    .home-search-input-wrap { position: relative; flex: 1; display: flex; align-items: center; }
    .home-search-input-wrap .search-icon { position: absolute; left: 14px; color: var(--primary); pointer-events: none; flex-shrink: 0; }
    .home-search-wrap input {
      width: 100%; padding: 13px 44px 13px 44px;
      font-family: var(--font-body); font-size: .93rem;
      border: none; outline: none; color: var(--dark); background: transparent;
    }
    .home-search-wrap input::placeholder { color: var(--gray-mid); }
    .home-search-btn {
      width: 100%; padding: 13px;
      background: var(--primary-dark); color: #fff;
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-head); font-size: .92rem; font-weight: 700;
      cursor: pointer; transition: background var(--tr);
      display: flex; align-items: center; justify-content: center; gap: 7px;
    }
    .home-search-btn:hover { background: var(--dark); }
    .home-add-section-label {
      margin-top: 14px; margin-bottom: 2px;
      font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    .home-add-coming-link {
      display: flex; align-items: center; gap: 5px;
      margin-top: 5px; font-size: .83rem; font-weight: 600;
      color: rgba(255,255,255,.28); cursor: default;
    }
    .home-coming-soon-label {
      margin-top: 10px; margin-bottom: 1px;
      font-size: .72rem; font-weight: 600; font-style: italic;
      color: rgba(255,255,255,.35);
    }
    .home-action-columns {
      display: flex; gap: 24px; margin-top: 24px;
    }
    .home-action-col {
      display: flex; flex-direction: column; flex: 1;
    }
    .home-action-col .home-add-section-label { margin-top: 0; }
    .home-add-active-link {
      display: flex; align-items: center; gap: 5px;
      margin-top: 6px; font-size: .83rem; font-weight: 600;
      color: rgba(255,255,255,.85); text-decoration: none;
      transition: color var(--tr);
    }
    .home-add-active-link:hover { color: #fff; text-decoration: none; }

    /* Quick-links box (lower section of hero right) */
    .home-quicklinks-box {
      background: var(--primary-pale2);
      border-top: 1px solid rgba(92,63,165,.15);
      padding: 0;
    }
    .home-quicklinks-toggle {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 14px 28px;
      background: none; border: none; cursor: pointer;
      text-align: left;
    }
    .home-quicklinks-toggle:hover { background: rgba(92,63,165,.05); }
    .home-quicklinks-title {
      font-family: var(--font-head);
      font-size: .68rem; font-weight: 800;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--dark);
    }
    .home-quicklinks-chevron {
      color: var(--gray); flex-shrink: 0;
      transition: transform .2s ease;
    }
    .home-quicklinks-toggle[aria-expanded="true"] .home-quicklinks-chevron {
      transform: rotate(180deg);
    }
    .home-quicklinks-box .home-action-columns { padding: 0 28px 22px; margin-top: 0; }
    .home-quicklinks-box .home-add-section-label { color: var(--primary-light); }
    .home-quicklinks-box .home-add-active-link {
      color: var(--primary);
    }
    .home-quicklinks-box .home-add-active-link:hover { color: var(--primary-dark); }
    .home-quicklinks-box .home-add-coming-link { color: var(--gray-mid); }
    .home-quicklinks-box .home-coming-soon-label { color: var(--gray-mid); }

    /* Stats bar */
    .home-stats-bar {
      background: var(--white);
      border-bottom: 1px solid var(--gray-light);
      box-shadow: 0 2px 12px rgba(92,63,165,.05);
    }
    .stats-bar-title {
      max-width: 1200px; margin: 0 auto;
      padding: 12px 24px 0;
      font-size: .8rem; font-weight: 700;
      color: var(--primary);
      text-transform: uppercase; letter-spacing: .07em;
      display: flex; align-items: center; gap: 8px;
    }
    .home-stats-inner {
      max-width: 1200px; margin: 0 auto;
      padding: 0 24px;
      display: flex; align-items: stretch;
    }
    .stat-item {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 20px 16px; gap: 3px;
      border-right: 1px solid var(--gray-light);
    }
    .stat-item:last-child { border-right: none; }
    .stat-num {
      font-family: var(--font-head); font-size: 1.65rem; font-weight: 700;
      color: var(--primary); line-height: 1;
      transition: color .15s;
    }
    .stat-label {
      font-size: .78rem; color: var(--gray); text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
      transition: color .15s;
    }
    /* Clickable stat counters */
    .stat-item--link {
      cursor: pointer;
      transition: background .15s;
      position: relative;
    }
    .stat-item--link:hover { background: var(--primary-pale2); }
    .stat-item--link:hover .stat-num { color: var(--primary-dark); }
    .stat-item--link:hover .stat-label { color: var(--primary); }
    .stat-item--link .stat-label::after {
      content: ' →';
      opacity: 0;
      transition: opacity .15s;
    }
    .stat-item--link:hover .stat-label::after { opacity: 1; }
    .stat-item--link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

    /* ── Home content / Dataspaces section ──────────────────── */
    .home-content {
      max-width: 1200px; margin: 0 auto;
      padding: 48px 24px 80px;
    }
    .home-section-header {
      display: flex; flex-direction: column; align-items: flex-start;
      margin-bottom: 20px;
    }
    .home-section-title {
      font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
      color: var(--dark); letter-spacing: -0.02em;
    }
    .home-section-title span { color: var(--primary); }
    .home-section-sub {
      margin-top: 6px; font-size: .88rem;
      color: var(--gray); line-height: 1.55;
    }

    /* Dataspace cards grid */
    .ds-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 18px;
    }
    .ds-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1.5px solid transparent;
      overflow: hidden;
      display: flex; flex-direction: column;
      transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }
    .ds-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hov); border-color: var(--primary-pale); }
    /* Synthetic Dexes mother card shown in tenant contexts */
    .ds-card--dexes { border-color: var(--primary-pale); }
    .ds-card--dexes:hover { border-color: #C4B4E8; }
    .ds-card-accent { height: 4px; background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)); flex-shrink: 0; }
    .ds-card-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .ds-card-title-row {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    }
    .ds-card-count-badge {
      flex-shrink: 0;
      background: var(--primary-pale); color: var(--primary);
      font-size: .68rem; font-weight: 700;
      padding: 2px 9px; border-radius: 20px;
      white-space: nowrap; margin-top: 3px;
    }
    .ds-card-title {
      font-family: var(--font-head); font-size: .975rem; font-weight: 600;
      color: var(--primary); line-height: 1.35;
      text-decoration: none;
    }
    .ds-card-title:hover { text-decoration: underline; }
    .ds-card-desc {
      font-size: .855rem; color: var(--gray); line-height: 1.6;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Meta row: tenant-type badge + authority */
    .ds-card-meta {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    }
    .ds-card-type-badge {
      display: inline-flex; align-items: center;
      background: var(--primary-pale); color: var(--primary);
      font-size: .68rem; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; white-space: nowrap;
      padding: 2px 8px; border-radius: 20px;
    }
    .ds-card-authority {
      font-size: .78rem; color: var(--gray);
    }
    .ds-card-authority-label {
      font-weight: 600; color: var(--gray-mid);
    }
    .ds-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 12px; border-top: 1px solid var(--gray-light); gap: 12px;
    }
    .ds-card-logo {
      width: 64px; height: 64px; object-fit: contain;
      flex-shrink: 0; background: transparent;
    }
    .ds-card-logo-placeholder {
      width: 64px; height: 64px; flex-shrink: 0;
      background: var(--primary-pale); border-radius: var(--radius-xs);
      display: flex; align-items: center; justify-content: center;
    }
    .ds-card-logo-placeholder svg { color: var(--primary-light); }
    .ds-goto-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--primary); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      padding: 8px 14px; font-family: var(--font-body); font-size: .82rem; font-weight: 600;
      cursor: pointer; text-decoration: none;
      transition: background var(--tr);
      white-space: nowrap;
    }
    .ds-goto-btn:hover { background: var(--primary-dark); text-decoration: none; color: var(--white); }

    /* Trust-provider bar below the card footer */
    .ds-card-trust {
      display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid var(--gray-light);
      font-size: .72rem; color: var(--gray);
    }
    .ds-trust-label { font-weight: 600; white-space: nowrap; }
    .ds-trust-logo  { height: 14px; width: auto; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
    .ds-trust-link  { color: var(--primary); text-decoration: none; font-weight: 600; }
    .ds-trust-link:hover { text-decoration: underline; }
    .ds-trust-extra { color: var(--gray-mid); }

    /* "More dataspaces" placeholder card */
    .ds-card-more {
      background: var(--primary-pale2);
      border: 1.5px dashed var(--primary-light);
      border-radius: var(--radius);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 10px; padding: 32px 24px; text-align: center;
      color: var(--primary);
      min-height: 160px;
    }
    .ds-card-more svg { opacity: .5; }
    .ds-card-more-title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; }
    .ds-card-more-sub { font-size: .82rem; color: var(--gray); }

    /* ═══════════════════════════════════════════════════════════
       REQUEST PAGE
    ══════════════════════════════════════════════════════════ */
    .request-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }

    /* Hero — matches detail-hero: border-radius, same padding rhythm */
    .request-hero {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: var(--radius);
      padding: 32px 36px;
      margin-bottom: 28px;
      color: var(--white);
    }
    .request-back-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.75);
      text-decoration: none; margin-bottom: 18px;
      transition: color var(--tr);
    }
    .request-back-link:hover { color: var(--white); text-decoration: none; }
    .request-hero h1 {
      font-family: var(--font-head); font-size: clamp(1.2rem,3vw,1.75rem); font-weight: 700;
      color: var(--white); margin-bottom: 10px; line-height: 1.25; letter-spacing: -0.02em;
    }
    .request-hero p {
      font-size: .9rem; color: rgba(255,255,255,.80); line-height: 1.6; max-width: 560px;
    }

    /* Section title between hero card and form */
    .request-section-title {
      font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 18px; line-height: 1.3;
    }

    /* Body */
    .request-body { }

    /* Resource heading above the info card (specific request only) */
    .request-resource-heading {
      font-family: var(--font-head);
      font-size: .82rem; font-weight: 700;
      color: var(--gray-mid);
      text-transform: uppercase; letter-spacing: .05em;
      margin: 0 0 8px 2px;
    }

    /* Dataset info card */
    .request-dataset-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--primary-pale2); border: 1.5px solid var(--primary-pale);
      border-radius: var(--radius); padding: 16px 20px; margin-bottom: 28px;
    }
    .request-dataset-icon {
      width: 42px; height: 42px; flex-shrink: 0;
      background: var(--primary-pale); border-radius: var(--radius-xs);
      display: flex; align-items: center; justify-content: center;
      color: var(--primary);
    }
    .request-dataset-label {
      font-size: .68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; color: var(--gray-mid); margin-bottom: 3px;
    }
    .request-dataset-title {
      font-family: var(--font-head); font-size: .95rem; font-weight: 700;
      color: var(--dark2); line-height: 1.3;
    }
    .request-dataset-owner {
      display: flex; align-items: center; gap: 4px;
      font-size: .78rem; color: var(--gray); margin-top: 4px;
    }

    /* Form */
    .request-form { display: flex; flex-direction: column; gap: 0; }
    .request-form-section {
      background: var(--white); border: 1px solid var(--gray-light);
      border-radius: var(--radius); padding: 24px 24px 20px;
      margin-bottom: 16px;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .request-form-section h2 {
      font-family: var(--font-head); font-size: .9rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 18px; padding-bottom: 10px;
      border-bottom: 1px solid var(--gray-light);
    }
    .request-form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
      margin-bottom: 16px;
    }
    .request-form-row:last-child { margin-bottom: 0; }
    @media (max-width: 600px) { .request-form-row { grid-template-columns: 1fr; } }

    .request-field { display: flex; flex-direction: column; gap: 5px; }
    .request-field > label {
      font-size: .78rem; font-weight: 600; color: var(--dark2);
    }
    .request-field input[type="text"],
    .request-field input[type="email"],
    .request-field input[type="url"],
    .request-field input[type="date"],
    .request-field select,
    .request-field textarea {
      font-family: var(--font-body); font-size: .88rem; color: var(--dark);
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 9px 12px; background: var(--white);
      transition: border-color var(--tr), box-shadow var(--tr);
      outline: none; width: 100%; box-sizing: border-box;
    }
    .request-field input:focus,
    .request-field select:focus,
    .request-field textarea:focus {
      border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,60,180,.12);
    }
    .request-field textarea { resize: vertical; min-height: 120px; }
    .request-field select { appearance: auto; }
    .req-required { color: var(--primary); font-weight: 700; }

    .request-field-check { flex-direction: row; }
    .request-check-label {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: .84rem; color: var(--dark); line-height: 1.5; cursor: pointer;
    }
    .request-check-label input[type="checkbox"] {
      margin-top: 2px; flex-shrink: 0; accent-color: var(--primary);
      width: 15px; height: 15px;
    }

    /* Form footer */
    .request-form-footer {
      display: flex; align-items: center; gap: 14px;
      padding-top: 4px; flex-wrap: wrap;
    }
    .request-submit-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 22px;
      background: var(--primary); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .9rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr); text-decoration: none;
    }
    .request-submit-btn:hover { background: var(--primary-dark); }
    .request-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
    .request-cancel-btn {
      font-size: .85rem; color: var(--gray); font-weight: 500;
      text-decoration: none;
    }
    .request-cancel-btn:hover { color: var(--dark); }

    /* Success message */
    .request-success-msg {
      display: flex; align-items: flex-start; gap: 14px;
      background: #edfaf3; border: 1.5px solid #34c472;
      border-radius: var(--radius); padding: 18px 20px; margin-top: 4px;
      color: #1a6636;
    }
    .request-success-msg svg { flex-shrink: 0; color: #34c472; margin-top: 2px; }
    .request-success-msg strong { font-weight: 700; display: block; margin-bottom: 4px; }
    .request-success-msg p { font-size: .86rem; margin: 0; line-height: 1.5; }

    /* ═══════════════════════════════════════════════════════════
       PUBLISH DATASET WIZARD
    ══════════════════════════════════════════════════════════ */
    .publish-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }

    /* Hero — identical to request-hero */
    .publish-hero {
      position: relative;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      border-radius: var(--radius); padding: 32px 36px; margin-bottom: 28px; color: var(--white);
    }
    .publish-hero h1 {
      font-family: var(--font-head); font-size: clamp(1.2rem,3vw,1.75rem); font-weight: 700;
      color: var(--white); margin-bottom: 10px; line-height: 1.25; letter-spacing: -0.02em;
    }
    .publish-hero p { font-size: .9rem; color: rgba(255,255,255,.80); line-height: 1.6; max-width: 600px; }
    /* Overzicht button in hero (bottom-right corner) */
    .pub-btn-summary-hero {
      position: absolute; right: 20px; bottom: 18px;
      background: rgba(255,255,255,.14); color: var(--white);
      border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--radius-sm);
      padding: 8px 14px; font-family: var(--font-body); font-size: .82rem; font-weight: 600;
      cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
      backdrop-filter: blur(4px);
      transition: background var(--tr), border-color var(--tr);
    }
    .pub-btn-summary-hero:hover {
      background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55);
    }
    @media (max-width: 600px) {
      .publish-hero { padding-bottom: 62px; }
      .pub-btn-summary-hero { right: 16px; bottom: 14px; padding: 7px 12px; font-size: .78rem; }
    }

    /* ── Step indicator ────────────────────────────────────── */
    .pub-stepper,
    .pub-substepper {
      display: flex; align-items: center;
      margin-bottom: 28px; overflow-x: auto; padding-bottom: 4px;
    }
    /* The sub-stepper sits inside deel:info, so more breathing room at the
       top and a subtle separator underneath mirror the look of a real flow. */
    .pub-substepper {
      margin: -4px 0 24px; padding: 14px 4px 16px;
      border-bottom: 1px solid var(--gray-light);
    }
    .pub-step-item {
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; flex-shrink: 0;
      background: transparent; border: none; padding: 0 6px;
      font-family: var(--font-body); cursor: pointer;
    }
    .pub-step-item:hover .pub-step-circle { border-color: var(--primary-light); }
    .pub-step-item:hover .pub-step-label  { color: var(--primary); }
    .pub-step-circle {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head); font-size: .78rem; font-weight: 700;
      background: var(--gray-light); color: var(--gray-mid);
      border: 2px solid var(--gray-light);
      transition: background var(--tr), color var(--tr), border-color var(--tr);
    }
    .pub-step-label {
      font-size: .72rem; font-weight: 600; color: var(--gray-mid);
      white-space: nowrap; transition: color var(--tr);
    }
    .pub-step-item.pub-step-active .pub-step-circle {
      background: var(--primary); color: var(--white); border-color: var(--primary);
    }
    .pub-step-item.pub-step-active .pub-step-label { color: var(--primary); }
    .pub-step-item.pub-step-done .pub-step-circle {
      background: #eef1fb; color: var(--primary); border-color: var(--primary);
    }
    .pub-step-item.pub-step-done .pub-step-label { color: var(--primary); }
    /* Connector line between steps */
    .pub-step-line {
      flex: 1; height: 2px; background: var(--gray-light); min-width: 24px; max-width: 60px;
      transition: background var(--tr);
    }
    .pub-step-line.pub-step-line-done { background: var(--primary); }

    /* ── Step panels ───────────────────────────────────────── */
    .pub-panels { margin-bottom: 20px; }
    .pub-panel-hidden { display: none !important; }

    /* Info sub-nav (Vorige / Volgende inside deel:info) */
    .pub-substep-nav {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin-top: 22px; padding-top: 18px;
      border-top: 1px solid var(--gray-light);
    }
    .pub-substep-nav .pub-substep-prev { text-decoration: none; }
    .pub-substep-nav button[disabled] { opacity: .45; cursor: not-allowed; }
    @media (max-width: 540px) {
      .pub-substepper { gap: 2px; }
      .pub-substepper .pub-step-label { display: none; }
      .pub-substep-nav { flex-direction: row; }
    }

    .pub-panel-header { margin-bottom: 20px; }
    .pub-panel-header h2 {
      font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 6px;
    }
    .pub-panel-header > p { font-size: .88rem; color: var(--gray); line-height: 1.6; max-width: 640px; }

    /* Info/note banners */
    .pub-required-note, .pub-recommended-note, .pub-optional-note, .pub-info-box {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: .78rem; line-height: 1.5; border-radius: var(--radius-sm);
      padding: 10px 14px; margin-top: 12px;
    }
    .pub-required-note   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
    .pub-recommended-note{ background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
    .pub-optional-note   { background: #fafaf9; color: var(--gray); border: 1px solid var(--gray-light); }
    .pub-info-box        { background: rgba(26,79,160,.06); color: #1A4FA0; border: 1px solid rgba(26,79,160,.15); }
    .pub-info-box code   { background: rgba(26,79,160,.12); border-radius: 3px; padding: 1px 5px; font-size: .84em; }
    .pub-required-note svg, .pub-recommended-note svg, .pub-optional-note svg, .pub-info-box svg {
      flex-shrink: 0; margin-top: 1px;
    }

    /* "Niet van toepassing"-bericht, gebruikt op de Locatie sub-step
       voor types (dienst/bundel) die geen geografische dekking dragen.
       Rustige neutrale styling — geen actie verwacht van de gebruiker. */
    .pub-step-na {
      display: flex; align-items: center; gap: 10px;
      font-size: .88rem; line-height: 1.5;
      padding: 16px 18px; margin-top: 16px;
      border-radius: var(--radius-sm);
      background: var(--gray-pale);
      color: var(--gray);
      border: 1px dashed var(--gray-light);
    }
    .pub-step-na svg { flex-shrink: 0; color: var(--gray-mid); }

    /* Subsection titles inside form sections */
    .pub-subsection-title {
      font-family: var(--font-head); font-size: .82rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .pub-section-label { font-size: .78rem; font-weight: 600; color: var(--dark2); }
    .pub-optional-badge {
      font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      background: var(--gray-light); color: var(--gray-mid);
      border-radius: 20px; padding: 2px 8px;
    }
    .pub-field-hint {
      display: block; font-size: .75rem; color: var(--gray); line-height: 1.45; margin-top: 4px;
    }

    /* Access rights radio cards */
    .pub-access-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    @media (max-width: 600px) { .pub-access-grid { grid-template-columns: 1fr; } }
    .pub-access-card {
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 14px 16px; cursor: pointer;
      transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
    }
    .pub-access-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
    .pub-access-card.pub-access-selected {
      border-color: var(--primary); background: var(--primary-pale2);
      box-shadow: 0 0 0 3px rgba(99,60,180,.1);
    }
    .pub-access-label {
      font-weight: 700; font-size: .88rem; color: var(--dark2); margin-bottom: 4px;
    }
    .pub-access-selected .pub-access-label { color: var(--primary); }
    .pub-access-desc { font-size: .76rem; color: var(--gray); line-height: 1.4; }

    /* Theme filterable list */
    .pub-search-input {
      width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: .86rem;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 8px 12px; margin-bottom: 10px; outline: none;
      transition: border-color var(--tr);
    }
    .pub-search-input:focus { border-color: var(--primary); }
    .pub-theme-list {
      max-height: 220px; overflow-y: auto; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 6px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 2px;
    }
    @media (max-width: 500px) { .pub-theme-list { grid-template-columns: 1fr; } }
    .pub-theme-item {
      display: flex; align-items: center; gap: 8px; padding: 6px 8px;
      border-radius: 4px; cursor: pointer; font-size: .82rem; color: var(--dark);
      transition: background var(--tr);
    }
    .pub-theme-item:hover { background: var(--primary-pale2); }
    .pub-theme-item input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }

    /* Selected theme badges shown above the theme list */
    .pub-theme-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .pub-theme-badges:empty { display: none; }

    /* Selected location tags shown below the location combobox */
    .pub-location-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .pub-location-tags:empty { display: none; }

    /* Language checkboxes */
    .pub-lang-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .pub-lang-item {
      display: flex; align-items: center; gap: 6px;
      background: var(--gray-light2, #f7f7f9); border: 1.5px solid var(--gray-light);
      border-radius: 20px; padding: 5px 14px; font-size: .82rem;
      cursor: pointer; transition: border-color var(--tr), background var(--tr);
    }
    .pub-lang-item:has(input:checked) { border-color: var(--primary); background: var(--primary-pale2); color: var(--primary); }
    .pub-lang-item input[type="checkbox"] { accent-color: var(--primary); }

    /* Keyword tag input */
    .pub-tag-wrap {
      display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 8px 10px; min-height: 44px; cursor: text;
      transition: border-color var(--tr);
    }
    .pub-tag-wrap:focus-within { border-color: var(--primary); }
    .pub-tag {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--primary-pale2); border: 1px solid rgba(92,63,165,.2);
      color: var(--primary); border-radius: 20px;
      padding: 3px 10px 3px 12px; font-size: .78rem; font-weight: 500;
    }
    .pub-tag button {
      background: none; border: none; color: var(--primary); cursor: pointer;
      font-size: .95rem; line-height: 1; padding: 0; opacity: .7;
    }
    .pub-tag button:hover { opacity: 1; }
    .pub-tag-input {
      border: none; outline: none; font-family: var(--font-body); font-size: .86rem;
      color: var(--dark); background: transparent; flex: 1; min-width: 140px; padding: 2px 0;
    }
    kbd {
      display: inline-block; padding: 1px 5px; font-size: .72rem;
      border: 1px solid var(--gray-light); border-radius: 3px;
      background: var(--gray-light); color: var(--gray);
      font-family: monospace;
    }

    /* Policy picker — selected policy cards */
    .pub-policy-cards { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .pub-policy-card {
      display: flex; align-items: flex-start; gap: 10px;
      background: rgba(92,63,165,.05); border: 1px solid rgba(92,63,165,.18);
      border-radius: var(--radius-sm); padding: 10px 12px;
    }
    .pub-policy-card-body { flex: 1; font-size: .83rem; line-height: 1.55; color: var(--dark); }
    .pub-policy-authority-badge {
      display: inline-block; background: var(--primary); color: #fff;
      border-radius: 20px; padding: 2px 10px; font-size: .71rem; font-weight: 600;
      margin-right: 8px; vertical-align: middle; white-space: nowrap;
    }
    .pub-policy-card-desc { vertical-align: middle; }
    .pub-policy-card-remove {
      flex-shrink: 0; background: none; border: none; cursor: pointer;
      color: var(--gray); font-size: 1.15rem; line-height: 1; padding: 0 2px;
      margin-top: 1px; transition: color var(--tr);
    }
    .pub-policy-card-remove:hover { color: #e53e3e; }
    .pub-policy-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
    .pub-policy-card-name  { font-size: .83rem; font-weight: 600; color: var(--dark); }
    .pub-policy-card-description {
      margin: 0; font-size: .78rem; color: var(--gray);
      line-height: 1.5; font-style: italic;
    }

    /* ═══════════════════════════════════════════════════════
       OFFERS (deel:delen)
       Saved offer list + accordion add/edit flow per Figma.
    ═══════════════════════════════════════════════════════ */
    .pub-offers-section { /* outer wrapper inherits request-form-section */ }

    /* Saved offers list */
    .pub-offers-list {
      display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
    }
    .pub-offers-empty {
      padding: 16px; border: 1px dashed var(--gray-light);
      border-radius: var(--radius-sm); color: var(--gray);
      font-size: .85rem; text-align: center; background: rgba(0,0,0,.01);
    }
    .pub-offer-card {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 14px; background: #fff;
      border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
      box-shadow: 0 1px 2px rgba(0,0,0,.03);
      transition: border-color var(--tr), box-shadow var(--tr);
    }
    .pub-offer-card:hover { border-color: var(--primary); box-shadow: 0 2px 6px rgba(92,63,165,.08); }
    .pub-offer-card-main { flex: 1; min-width: 0; }
    .pub-offer-card-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
    }
    .pub-offer-card-num {
      display: inline-block; background: var(--primary); color: #fff;
      padding: 2px 10px; border-radius: 20px;
      font-size: .71rem; font-weight: 700; letter-spacing: .02em;
    }
    .pub-offer-card-target {
      font-weight: 600; color: var(--dark); font-size: .9rem;
    }
    .pub-offer-card-sub {
      font-size: .82rem; color: var(--dark2); line-height: 1.5; margin-bottom: 4px;
    }
    .pub-offer-card-sub strong,
    .pub-offer-card-policies strong {
      color: var(--gray); font-weight: 600; font-size: .75rem;
      text-transform: uppercase; letter-spacing: .03em; margin-right: 4px;
    }
    .pub-offer-card-policies {
      font-size: .82rem; color: var(--dark2); line-height: 1.55;
      display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
    }
    .pub-offer-card-policy {
      display: inline-block; padding: 2px 8px;
      background: rgba(92,63,165,.08); color: var(--primary-dark, var(--primary));
      border-radius: 4px; font-size: .78rem; font-weight: 500;
    }
    .pub-offer-card-policy-none { background: transparent; color: var(--gray); font-style: italic; }
    .pub-offer-card-actions {
      display: flex; gap: 4px; flex-shrink: 0;
    }
    .pub-offer-card-edit,
    .pub-offer-card-remove {
      background: transparent; border: 1px solid transparent;
      width: 28px; height: 28px; border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--gray); transition: all var(--tr);
    }
    .pub-offer-card-edit:hover    { color: var(--primary); background: rgba(92,63,165,.07); }
    .pub-offer-card-remove:hover  { color: #e53e3e;         background: rgba(229,62,62,.08); }

    /* Add-Offer button */
    .pub-btn-offer-add {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 14px; border: 1px dashed var(--primary);
      background: transparent; color: var(--primary);
      border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: .85rem; font-weight: 600;
      cursor: pointer; transition: all var(--tr);
    }
    .pub-btn-offer-add:hover { background: rgba(92,63,165,.06); }

    /* ── Offer flow (accordion add/edit) ─────────────────── */
    .pub-offer-flow {
      margin-bottom: 12px; padding: 16px;
      background: #fafbff; border: 1px solid var(--primary);
      border-radius: var(--radius);
    }
    .pub-offer-flow-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px; padding-bottom: 10px;
      border-bottom: 1px solid var(--gray-light);
    }
    .pub-offer-flow-header h4 {
      margin: 0; font-family: var(--font-heading);
      font-size: 1.05rem; font-weight: 700; color: var(--dark);
    }
    .pub-offer-flow-close {
      background: transparent; border: none; cursor: pointer;
      color: var(--gray); padding: 4px; border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      transition: all var(--tr);
    }
    .pub-offer-flow-close:hover { color: var(--dark); background: var(--gray-light); }

    /* Accordion item */
    .pub-offer-accordion {
      background: #fff; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
      transition: border-color var(--tr), opacity var(--tr);
    }
    .pub-offer-accordion-open   { border-color: var(--primary); }
    .pub-offer-accordion-disabled {
      opacity: .55; pointer-events: none;
    }
    .pub-offer-accordion-disabled .pub-offer-accordion-body { display: none; }
    .pub-offer-accordion-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 11px 14px; background: #fafafa;
      border-bottom: 1px solid var(--gray-light);
    }
    .pub-offer-accordion-title {
      font-weight: 700; font-size: .92rem; color: var(--dark);
    }
    .pub-offer-accordion-status {
      font-size: .78rem; color: var(--gray); font-weight: 500;
    }
    .pub-offer-accordion-status-ok {
      color: var(--green); font-weight: 700; font-size: 1rem;
    }
    /* "Verplicht" / "Required" badge in the accordion header — mirrors the
       optional-grey treatment but uses the primary-pale plate so it reads
       as informational rather than warning. */
    .pub-offer-accordion-status-required {
      display: inline-flex; align-items: center;
      padding: 2px 9px; border-radius: 999px;
      background: var(--primary-pale2); color: var(--primary);
      font-size: .68rem; font-weight: 700;
      letter-spacing: .04em; text-transform: uppercase;
    }
    /* When the badge sits inline next to a title (e.g. "Met wie wil je
       delen?"), give it a bit of breathing room. */
    .pub-offer-accordion-title .pub-offer-accordion-status-required {
      margin-left: 8px;
      vertical-align: middle;
    }
    /* Locked accordion (e.g. "Standaard voorwaarden") — stays open and
       interactive-looking but the contents cannot be modified. */
    .pub-offer-accordion-locked {
      border-color: var(--primary-pale);
      background: var(--primary-pale2);
    }
    .pub-offer-accordion-locked .pub-offer-accordion-head {
      background: var(--primary-pale2);
    }
    .pub-offer-accordion-body {
      padding: 14px;
    }

    /* Acc 1 choices */
    .pub-offer-choices {
      display: flex; flex-direction: column; gap: 8px;
    }
    .pub-offer-choice {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 12px 14px; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); background: #fff;
      cursor: pointer; transition: all var(--tr);
    }
    .pub-offer-choice:hover { border-color: var(--primary); background: rgba(92,63,165,.03); }
    .pub-offer-choice input[type="radio"] { display: none; }
    .pub-offer-choice-radio {
      flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
      border-radius: 50%; border: 2px solid var(--gray);
      background: #fff; position: relative; transition: all var(--tr);
    }
    .pub-offer-choice.is-selected .pub-offer-choice-radio {
      border-color: var(--primary);
    }
    .pub-offer-choice.is-selected .pub-offer-choice-radio::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--primary); transform: translate(-50%, -50%);
    }
    .pub-offer-choice.is-selected { border-color: var(--primary); background: rgba(92,63,165,.04); }
    /* Body holds title (label) + help text stacked vertically */
    .pub-offer-choice-body {
      display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
    }
    .pub-offer-choice-label { font-size: .9rem; font-weight: 600; color: var(--dark); line-height: 1.3; }
    .pub-offer-choice-desc {
      font-size: .8rem; color: var(--gray); line-height: 1.4;
    }
    /* Right-aligned chip on specific-dmi: "x deelnemers gekozen" */
    .pub-offer-choice-count {
      align-self: center;
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 999px;
      background: var(--primary); color: #fff;
      font-size: .72rem; font-weight: 700; white-space: nowrap;
    }
    .pub-offer-choice-count[hidden] { display: none; }

    /* Member picker — nested inside the choices list, directly below the
       'specifieke DMI deelnemers' choice. Indented and outlined on the left
       so it reads as a sub-block of the choice above it. */
    .pub-offer-members {
      margin: -2px 0 2px 30px;
      padding: 12px 14px;
      background: var(--primary-pale2);
      border: 1px solid var(--primary-pale);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius-sm);
    }
    @media (max-width: 480px) {
      .pub-offer-members { margin-left: 12px; padding: 10px 12px; }
    }
    .pub-offer-members-tags {
      display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
    }

    /* Marketplace pulldown — same nested-sub-block treatment as members */
    .pub-offer-marketplace {
      margin: -2px 0 2px 30px;
      padding: 12px 14px;
      background: var(--primary-pale2);
      border: 1px solid var(--primary-pale);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius-sm);
    }
    @media (max-width: 480px) {
      .pub-offer-marketplace { margin-left: 12px; padding: 10px 12px; }
    }
    .pub-offer-marketplace-wrap { position: relative; margin-top: 4px; }
    .pub-offer-marketplace-select {
      width: 100%;
      padding: 9px 12px;
      font-size: .88rem; color: var(--dark);
      background: #fff;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      transition: border-color var(--tr), box-shadow var(--tr);
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px;
      padding-right: 34px;
    }
    .pub-offer-marketplace-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(92,63,165,.12);
      outline: none;
    }
    .pub-offer-marketplace-select:disabled {
      background-color: var(--off-white);
      color: var(--gray);
      cursor: not-allowed;
    }

    /* Groups multi-select — same nested-sub-block treatment as members.
       Used by the "Beperk toegang tot specifieke groepen" choice; combines
       the four predefined audience groups into a single picker so the
       choice list stays short. */
    .pub-offer-groups {
      margin: -2px 0 2px 30px;
      padding: 12px 14px;
      background: var(--primary-pale2);
      border: 1px solid var(--primary-pale);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius-sm);
    }
    @media (max-width: 480px) {
      .pub-offer-groups { margin-left: 12px; padding: 10px 12px; }
    }
    .pub-offer-groups-list {
      display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
    }
    .pub-offer-group-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: #fff; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      cursor: pointer; transition: border-color var(--tr), background var(--tr);
    }
    .pub-offer-group-item:hover { border-color: var(--primary); }
    .pub-offer-group-item input[type="checkbox"] {
      width: 16px; height: 16px; accent-color: var(--primary); margin: 0;
    }
    .pub-offer-group-label {
      font-size: .88rem; color: var(--dark);
    }
    /* Combobox wrapper that holds the input + autocomplete dropdown.
       Needs position:relative so the absolutely-positioned .pub-org-dropdown
       anchors right below the input instead of jumping to the page corner. */
    .pub-loc-wrap { position: relative; }
    .pub-offer-member-tag {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; padding: 8px 12px;
      background: #fff; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
    }
    .pub-offer-member-name { font-size: .85rem; color: var(--dark); }
    .pub-offer-member-remove {
      background: transparent; border: none; cursor: pointer;
      width: 24px; height: 24px; border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--gray); transition: all var(--tr);
    }
    .pub-offer-member-remove:hover { color: #e53e3e; background: rgba(229,62,62,.08); }

    /* Flow action buttons row */
    .pub-offer-flow-actions {
      display: flex; justify-content: flex-end; gap: 8px;
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--gray-light);
    }

    /* Chosen-members header (sits above the tag list when target is
       'specifieke DMI deelnemers') */
    .pub-offer-members-chosen {
      margin-bottom: 8px;
    }
    .pub-offer-members-chosen-title {
      font-size: .75rem; font-weight: 600; color: var(--dark2);
      text-transform: uppercase; letter-spacing: .03em;
      margin-bottom: 6px;
    }
    .pub-offer-members-empty-state {
      font-size: .82rem; color: var(--gray); font-style: italic;
      padding: 4px 0;
    }

    /* ─── Acc 2: policy rows (Figma 5-row layout) ─────────────────────
       Each row: icon · label · (toggle | badge | info) on one line;
       expandable rows reveal a small input row below when clicked. */
    .pub-policy-list {
      display: flex; flex-direction: column; gap: 8px;
      margin-top: 4px;
    }
    .pub-policy-row {
      background: #fff;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      transition: border-color var(--tr), box-shadow var(--tr);
    }
    .pub-policy-row.is-active {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary-pale) inset;
    }
    .pub-policy-row-expandable .pub-policy-row-main { cursor: pointer; }
    .pub-policy-row-expandable:hover { border-color: var(--primary-pale); }

    .pub-policy-row-main {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      min-height: 48px;
    }
    .pub-policy-row-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; flex: 0 0 32px;
      border-radius: var(--radius-sm);
      background: var(--primary-pale2);
      color: var(--primary);
    }
    /* Image-based icon (e.g. DMI logo) — strip the tinted backplate so the
       brand mark sits on white and isn't tinted by the surrounding chip. */
    .pub-policy-row-icon-img {
      background: #fff; border: 1px solid var(--gray-light);
      padding: 3px;
    }
    .pub-policy-row-icon-img img {
      width: 100%; height: 100%; object-fit: contain; display: block;
    }
    /* Locked policy row — visually distinct (primary-tinted) and the toggle
       is non-interactive. Used by the "Standaard voorwaarden" box. */
    .pub-policy-row-locked {
      background: #fff;
      border-color: var(--primary-pale);
    }
    .pub-policy-row-locked .pub-policy-row-main { cursor: default; }
    .pub-policy-toggle-locked {
      cursor: not-allowed; opacity: 1;
    }
    .pub-policy-toggle-locked .pub-policy-toggle-track {
      background: var(--primary);
    }
    .pub-policy-toggle-locked .pub-policy-toggle-thumb {
      left: 18px;
    }
    .pub-policy-toggle-locked .pub-policy-toggle-text {
      color: var(--primary); font-weight: 700;
    }
    .pub-policy-row-label {
      flex: 1; font-size: .9rem; font-weight: 500; color: var(--dark);
      line-height: 1.3;
    }

    /* Toggle (Nee / Ja switch) */
    .pub-policy-toggle {
      display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer; user-select: none;
    }
    .pub-policy-toggle input[type="checkbox"] {
      position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
    }
    .pub-policy-toggle-track {
      position: relative; display: inline-block;
      width: 36px; height: 20px; border-radius: 999px;
      background: var(--gray-light);
      transition: background var(--tr);
    }
    .pub-policy-toggle-thumb {
      position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px; border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,.15);
      transition: left var(--tr), transform var(--tr);
    }
    .pub-policy-toggle input[type="checkbox"]:checked ~ .pub-policy-toggle-track {
      background: var(--primary);
    }
    .pub-policy-toggle input[type="checkbox"]:checked ~ .pub-policy-toggle-track .pub-policy-toggle-thumb {
      left: 18px;
    }
    .pub-policy-toggle input[type="checkbox"]:focus-visible ~ .pub-policy-toggle-track {
      box-shadow: 0 0 0 3px rgba(92,63,165,.25);
    }
    .pub-policy-toggle-text {
      font-size: .82rem; font-weight: 600; color: var(--dark2);
      min-width: 24px; text-align: left;
    }

    /* PREMIUM badge (and similar) */
    .pub-policy-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px; border-radius: 999px;
      font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap;
    }
    .pub-policy-badge-premium {
      background: var(--amber-pale, #FEF3C7);
      color: #92400E;
      border: 1px solid var(--amber, #F59E0B);
    }

    /* Tiny info "i" button on the right of each row */
    .pub-policy-row-info {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      background: transparent; color: var(--gray);
      border: 1px solid var(--gray-light);
      cursor: help; padding: 0;
      transition: color var(--tr), border-color var(--tr), background var(--tr);
    }
    .pub-policy-row-info:hover {
      color: var(--primary);
      border-color: var(--primary);
      background: var(--primary-pale2);
    }

    /* Expanded body of a row — input row revealed under the header */
    .pub-policy-row-expanded {
      padding: 0 14px 12px 58px;   /* left aligns with label, past the icon */
    }
    /* Optional caption above an expanded input (e.g. common-value) */
    .pub-policy-input-label {
      display: block;
      margin: 0 0 6px;
      font-size: .82rem; font-weight: 500;
      color: var(--dark2);
    }
    .pub-policy-input-row {
      display: flex; align-items: center; gap: 6px;
      background: var(--off-white, #FAFAFA);
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      padding: 4px 8px;
    }
    .pub-policy-input-row:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(92,63,165,.12);
    }
    .pub-policy-input-row input {
      flex: 1; border: 0; background: transparent;
      padding: 6px 4px; font-size: .88rem; color: var(--dark);
      outline: none;
    }
    .pub-policy-input-row input::placeholder { color: var(--gray); }
    .pub-policy-input-prefix {
      font-size: .92rem; font-weight: 600; color: var(--dark2);
      padding-left: 4px;
    }
    .pub-policy-input-clear {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 50%;
      background: transparent; border: 0; cursor: pointer;
      color: var(--gray); transition: color var(--tr), background var(--tr);
    }
    .pub-policy-input-clear:hover {
      color: #e53e3e; background: rgba(229,62,62,.08);
    }
    /* Radio-group binnen het Prijs-blok: prijstype (eenmalig/abonnement)
       en — bij abonnement — periode (per maand/jaar). Compacte inline
       layout zodat ze direct boven het € invoerveld passen. */
    .pub-policy-radio-group {
      display: flex; flex-wrap: wrap; gap: 16px;
      padding: 4px 2px 10px;
    }
    .pub-policy-radio-group-sub {
      padding: 0 2px 10px;
      margin-left: 18px;
      border-left: 2px solid var(--gray-light);
      padding-left: 14px;
    }
    .pub-policy-radio {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .85rem; color: var(--dark2); cursor: pointer;
    }
    .pub-policy-radio input[type="radio"] {
      accent-color: var(--primary);
      cursor: pointer;
    }
    @media (max-width: 480px) {
      .pub-policy-row-expanded { padding-left: 14px; }
      .pub-policy-row-main { gap: 8px; padding: 10px 12px; }
      .pub-policy-row-icon { width: 28px; height: 28px; flex-basis: 28px; }
      .pub-policy-radio-group { gap: 12px; }
    }

    /* Summary row for empty Offers block */
    .pub-summary-row-empty {
      color: var(--gray); font-style: italic; font-size: .83rem;
      padding: 6px 0;
    }

    /* Access rights banner on step 5 */
    .pub-access-banner {
      padding: 12px 16px; border-radius: var(--radius-sm);
      margin-bottom: 16px; border: 1px solid transparent;
    }
    .pub-access-banner--badge-public     { background: var(--green-pale); border-color: var(--green); }
    .pub-access-banner--badge-restricted { background: var(--amber-pale); border-color: var(--amber); }
    .pub-access-banner--badge-private    { background: var(--red-pale);   border-color: var(--red);   }
    .pub-access-banner-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
    }
    .pub-access-banner-title {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; color: var(--gray);
    }
    .pub-access-banner-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 12px; border-radius: 20px;
      font-size: .75rem; font-weight: 700; white-space: nowrap;
    }
    .pub-access-banner--badge-public     .pub-access-banner-badge { background: var(--green); color: #fff; }
    .pub-access-banner--badge-restricted .pub-access-banner-badge { background: var(--amber); color: #fff; }
    .pub-access-banner--badge-private    .pub-access-banner-badge { background: var(--red);   color: #fff; }
    .pub-access-banner-desc { font-size: .82rem; color: var(--dark); line-height: 1.45; }
    .pub-access-banner-warning {
      margin: 8px 0 0; font-size: .81rem; line-height: 1.5;
      font-weight: 600; color: var(--dark);
    }

    /* License section: chosen-access reminder + contextual hint */
    .pub-license-access-context {
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--gray-light);
      background: var(--gray-pale-soft, #fafafa);
      display: flex; flex-direction: column; gap: 6px;
    }
    .pub-license-access-context-empty {
      border-style: dashed;
      background: transparent;
    }
    .pub-license-access-context--badge-public     { background: var(--green-pale); border-color: var(--green); }
    .pub-license-access-context--badge-restricted { background: var(--amber-pale); border-color: var(--amber); }
    .pub-license-access-context--badge-private    { background: var(--red-pale);   border-color: var(--red);   }
    .pub-license-access-context--badge-unknown {
      background: var(--gray-pale); border-color: var(--gray-light);
    }
    .pub-license-access-row {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .pub-license-access-label-text {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .04em; color: var(--gray);
    }
    .pub-license-access-badge {
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 20px;
      font-size: .7rem; font-weight: 700; white-space: nowrap;
      text-transform: uppercase; letter-spacing: .05em;
    }
    .pub-license-access-hint {
      margin: 0; font-size: .82rem; line-height: 1.5;
      color: var(--dark2);
    }
    .pub-license-access-context-empty .pub-license-access-hint {
      color: var(--gray); font-style: italic;
    }

    /* Navigation bar */
    .pub-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 0 0; margin-top: 4px;
      border-top: 1px solid var(--gray-light);
    }
    .pub-nav-right { display: flex; align-items: center; gap: 10px; }
    .pub-prev-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--gray-light); color: var(--dark2);
      border: none; border-radius: var(--radius-sm);
      padding: 9px 16px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr);
    }
    .pub-prev-btn:hover { background: #e0e0e8; }
    .pub-next-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--primary); color: var(--white);
      border: none; border-radius: var(--radius-sm);
      padding: 9px 18px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr);
    }
    .pub-next-btn:hover { background: var(--primary-dark); }
    .pub-skip-btn {
      background: none; border: none; font-family: var(--font-body);
      font-size: .82rem; color: var(--gray); cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .pub-skip-btn:hover { color: var(--dark); }

    /* Error box */
    .pub-error-box {
      background: #fef2f2; border: 1.5px solid #fecaca; border-radius: var(--radius-sm);
      padding: 12px 16px; margin-bottom: 16px;
    }
    .pub-error-item {
      display: flex; align-items: flex-start; gap: 7px;
      font-size: .82rem; color: #b91c1c; margin-bottom: 4px;
    }
    .pub-error-item:last-child { margin-bottom: 0; }
    .pub-error-item svg { flex-shrink: 0; margin-top: 1px; }

    .pub-success-box {
      background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: var(--radius-sm);
      padding: 12px 16px; margin-bottom: 16px;
    }
    .pub-success-item {
      display: flex; align-items: flex-start; gap: 7px;
      font-size: .82rem; color: #15803d; margin-bottom: 4px;
    }
    .pub-success-item:last-child { margin-bottom: 0; }
    .pub-success-item svg { flex-shrink: 0; margin-top: 1px; }

    /* Summary (overzicht modal) — 4-part structure with status icons */
    .pub-summary-section {
      background: var(--white); border: 1px solid var(--gray-light);
      border-radius: var(--radius); margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
      overflow: hidden;
    }
    .pub-summary-section[data-status="ok"]    { border-color: #BFE5C2; }
    .pub-summary-section[data-status="error"] { border-color: #F5C2C2; }
    .pub-summary-section-title {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 18px; border-bottom: 1px solid var(--gray-light);
      font-family: var(--font-head); font-weight: 700; color: var(--dark2);
      background: var(--gray-pale);
    }
    .pub-summary-section[data-status="ok"]    .pub-summary-section-title { background: #EFF8EF; border-bottom-color: #BFE5C2; }
    .pub-summary-section[data-status="error"] .pub-summary-section-title { background: #FDF0F0; border-bottom-color: #F5C2C2; }
    .pub-summary-section-head {
      display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    }
    .pub-summary-section-label {
      font-size: 1rem; line-height: 1.2;
    }
    .pub-summary-section-state {
      font-family: var(--font-body); font-size: .72rem; font-weight: 600;
      color: var(--gray); text-transform: uppercase; letter-spacing: .05em;
      padding-left: 4px;
    }
    .pub-summary-section[data-status="ok"]    .pub-summary-section-state { color: var(--green, #2E7D32); }
    .pub-summary-section[data-status="error"] .pub-summary-section-state { color: var(--red, #C62828); }
    .pub-summary-status-icon {
      width: 22px; height: 22px; border-radius: 50%;
      padding: 3px; flex-shrink: 0;
    }
    .pub-summary-status-icon.pub-summary-status-ok    { background: var(--green, #2E7D32); color: var(--white); }
    .pub-summary-status-icon.pub-summary-status-error { background: var(--red,   #C62828); color: var(--white); }
    .pub-summary-status-icon.pub-summary-status-todo  { background: var(--white); color: var(--gray-mid); border: 1.5px solid var(--gray-light); padding: 2px; }

    .pub-summary-section-body { padding: 0; }
    .pub-summary-subgroup { padding: 4px 0 6px; border-bottom: 1px solid var(--gray-light); }
    .pub-summary-subgroup:last-child { border-bottom: none; }
    .pub-summary-subgroup-title {
      font-family: var(--font-head); font-size: .78rem; font-weight: 700;
      color: var(--primary-dark); text-transform: uppercase; letter-spacing: .06em;
      padding: 10px 18px 4px;
    }
    .pub-summary-row {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 9px 18px; border-bottom: 1px solid var(--gray-light);
    }
    .pub-summary-subgroup > .pub-summary-row:last-child { border-bottom: none; }
    .pub-summary-section-body > .pub-summary-row:last-child { border-bottom: none; }
    .pub-summary-key {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--gray-mid); flex-shrink: 0; min-width: 120px;
      padding-top: 2px;
    }
    .pub-summary-val {
      font-size: .85rem; color: var(--dark); flex: 1; line-height: 1.5; word-break: break-word;
    }
    .pub-summary-edit {
      background: none; border: none; font-family: var(--font-body);
      font-size: .75rem; color: var(--primary); cursor: pointer; font-weight: 600;
      flex-shrink: 0; text-decoration: underline; text-underline-offset: 2px;
      padding: 0;
    }
    .pub-summary-edit:hover { color: var(--primary-dark); }
    @media (max-width: 560px) {
      .pub-summary-section-state { display: none; }
      .pub-summary-section-label { font-size: .94rem; }
      .pub-summary-key { min-width: 0; width: 100%; }
      .pub-summary-row { flex-direction: column; gap: 4px; }
    }

    /* Rich related-sources list inside the overview ("Overzicht tot nu
       toe") page. Replaces the previous flat URI string with cards that
       expose title, creator, type and access — mirroring the basket-card
       look used inside the bron panel itself so the user recognizes the
       same product across the wizard. */
    .pub-summary-row-rich .pub-summary-val { padding: 0; }
    .pub-summary-related-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pub-summary-related-item {
      display: flex;
      align-items: stretch;
      gap: 10px;
      background: #fff;
      border: 1px solid var(--gray-light);
      border-radius: 6px;
      overflow: hidden;
      min-height: 52px;
    }
    .pub-summary-related-accent {
      flex: 0 0 4px;
      background: var(--gray-mid);
    }
    .pub-summary-related-accent.access-public     { background: var(--green); }
    .pub-summary-related-accent.access-restricted { background: var(--amber); }
    .pub-summary-related-accent.access-private    { background: var(--red); }
    .pub-summary-related-body {
      flex: 1;
      min-width: 0;
      padding: 8px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
    }
    .pub-summary-related-title {
      font-size: .9rem;
      font-weight: 600;
      color: #111827;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pub-summary-related-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      font-size: .78rem;
      color: var(--gray-mid);
      line-height: 1.25;
    }
    .pub-summary-related-creator {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    .pub-summary-related-creator > span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }
    .pub-summary-related-creator svg { flex-shrink: 0; opacity: .6; }
    .pub-summary-related-id-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--gray-mid);
      text-decoration: none;
      font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
      font-size: .72rem;
    }
    .pub-summary-related-id-link:hover {
      color: var(--primary);
      text-decoration: underline;
    }
    .pub-summary-related-id-link svg { opacity: .5; }
    .pub-summary-related-badges {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 10px 8px 0;
    }
    .pub-summary-related-badges .type-badge,
    .pub-summary-related-badges .card-access-badge {
      font-size: .68rem;
    }
    .pub-summary-related-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(26,79,160,.08);
      color: var(--primary-dark);
      font-size: .68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .pub-summary-related-status img { display: inline-block; flex-shrink: 0; }
    .pub-summary-related-item-plain {
      padding: 8px 12px;
      background: #f9fafb;
      border-style: dashed;
    }
    .pub-summary-related-uri {
      font-size: .8rem;
      color: var(--gray-mid);
      word-break: break-all;
    }
    @media (max-width: 560px) {
      .pub-summary-related-item { flex-wrap: wrap; }
      .pub-summary-related-badges {
        padding: 0 10px 8px 14px;
        width: 100%;
      }
    }
    .pub-submit-section { margin-top: 16px !important; }
    .pub-submit-note {
      display: flex; align-items: flex-start; gap: 10px;
      background: rgba(26,79,160,.06); border: 1px solid rgba(26,79,160,.15);
      border-radius: var(--radius-sm); padding: 12px 16px;
      font-size: .82rem; color: #1A4FA0; line-height: 1.5;
    }
    .pub-submit-note svg { flex-shrink: 0; margin-top: 1px; }

    /* Organisation combobox (autocomplete lookup) */
    .pub-org-combobox { position: relative; }
    .pub-org-input {
      width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: .86rem;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 8px 32px 8px 12px; outline: none;
      transition: border-color var(--tr);
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    }
    .pub-org-input:focus { border-color: var(--primary); }
    .pub-org-input.pub-org-selected { background-color: #fafaf9; }
    .pub-org-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
      background: #fff; border: 1.5px solid var(--primary);
      border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      max-height: 220px; overflow-y: auto;
      box-shadow: 0 6px 18px rgba(0,0,0,.10);
      display: none;
    }
    .pub-org-dropdown.pub-org-open { display: block; }
    .pub-org-option {
      padding: 8px 12px; font-size: .84rem; color: var(--dark); cursor: pointer;
      transition: background var(--tr);
    }
    .pub-org-option:hover, .pub-org-option.pub-org-active { background: var(--primary-pale2); color: var(--primary-dark); }
    .pub-org-option-empty { padding: 10px 12px; font-size: .82rem; color: var(--gray); font-style: italic; }

    /* ════════════════════════════════════════════════════════════
       NEW: 4-parts pillar navigation (deel:info / bron / delen / publicatie)
       Replaces the linear 6-step stepper with non-linear navigation.
    ════════════════════════════════════════════════════════════ */
    .pub-parts {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
      margin-bottom: 16px;
    }
    @media (max-width: 800px) {
      .pub-parts { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .pub-parts { grid-template-columns: 1fr; gap: 6px; }
    }
    /* Compact card: status dot on the left, body (title + sub stacked) on
       the right. Two rows total — title prominent, subtitle as smaller hint
       below. Both truncate with ellipsis when the card is narrow; full text
       available via native `title` tooltip on hover. */
    .pub-part-card {
      background: var(--white); border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 8px 10px;
      cursor: pointer;
      display: flex; flex-direction: row; align-items: center; gap: 8px;
      transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
      text-align: left; font-family: var(--font-body);
      min-width: 0;
    }
    .pub-part-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
    .pub-part-card.pub-part-active {
      border-color: var(--primary); background: var(--primary-pale);
      box-shadow: 0 2px 8px rgba(92,63,165,.12);
    }
    .pub-part-head {
      display: flex; align-items: center; gap: 6px;
      font-size: .65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--gray-mid); margin-bottom: 0;
    }
    .pub-part-title {
      font-family: var(--font-head); font-size: .9rem; font-weight: 700;
      color: var(--dark2); line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 100%;
    }
    .pub-part-sub {
      font-size: .7rem; color: var(--gray); line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 100%;
    }
    .pub-part-card.pub-part-active .pub-part-head,
    .pub-part-card.pub-part-active .pub-part-title { color: var(--primary-dark); }

    /* Status icon — open circle / green check / red cross (compact) */
    .pub-part-status {
      width: 14px; height: 14px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0; background: transparent;
      border: 2px solid var(--gray-mid);
      transition: background var(--tr), border-color var(--tr);
    }
    .pub-part-status svg { display: none; width: 9px; height: 9px; }
    .pub-part-card[data-status="ok"] .pub-part-status {
      background: var(--green); border-color: var(--green);
    }
    .pub-part-card[data-status="ok"] .pub-part-status svg.icon-check { display: block; color: #fff; }
    .pub-part-card[data-status="error"] .pub-part-status {
      background: var(--red); border-color: var(--red);
    }
    .pub-part-card[data-status="error"] .pub-part-status svg.icon-cross { display: block; color: #fff; }
    .pub-part-card[data-status="error"] { border-color: var(--red); }

    /* Body wrapper: always two rows — title on row 1, subtitle on row 2.
       Both truncate with ellipsis if the card is too narrow; the full text
       is available via the native `title` tooltip on hover. */
    .pub-part-body {
      display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
      min-width: 0; flex: 1;
    }

    /* Two wrappers for active-part content */
    .pub-part-panel { display: none; }
    .pub-part-panel.pub-part-panel-active { display: block; }

    /* ── Intro headline + lead paragraph (between hero and parts shell) ── */
    .pub-parts-intro {
      margin: 18px 0 8px;
    }
    .pub-parts-intro h2 {
      font-family: var(--font-head); font-size: .98rem; font-weight: 700;
      color: var(--dark2); margin: 0 0 2px;
    }
    .pub-parts-intro p {
      font-size: .82rem; color: var(--gray); line-height: 1.45;
      max-width: 720px; margin: 0;
    }

    /* ── Parts shell: ties the 4 part-cards visually together with the
       active panel sitting below them. The shell is a soft tinted backplate
       so the cards + panel read as one continuous block. ─────────────── */
    .pub-parts-shell {
      background: var(--primary-pale2);
      border-radius: 14px;
      padding: 10px 10px 12px;
      margin-bottom: 24px;
    }
    @media (max-width: 480px) {
      .pub-parts-shell { padding: 8px 8px 10px; border-radius: 12px; }
    }
    /* Inside the shell, tighten spacing between the parts row and the
       active panel — the active card's stem visually bridges them so they
       read as one block. Smaller bottom margin = the form sits closer to
       the choice buttons (effectively overlapping the row visually). */
    .pub-parts-shell .pub-parts { margin-bottom: 10px; }
    .pub-parts-shell .pub-panels { margin-bottom: 0; }
    /* Inactive cards keep a clean white surface so they stand out from the
       tinted shell. */
    .pub-parts-shell .pub-part-card { background: var(--white); }
    .pub-parts-shell .pub-part-card:hover {
      background: var(--white); border-color: var(--primary-light);
      box-shadow: 0 2px 6px rgba(92,63,165,.08);
    }
    /* Active card = "tab" attached to the form panel below.
       The card loses its bottom border + bottom corner radii, and a
       full-width white "stem" (::after) bridges the gap between card and
       panel — including punching through the panel's primary top edge —
       so card + form read as one continuous shape. */
    .pub-parts-shell .pub-part-card.pub-part-active {
      position: relative;
      background: var(--white);
      border: 2px solid var(--primary);
      border-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      box-shadow: 0 6px 18px rgba(92,63,165,.18);
      z-index: 3;
    }
    /* Solid stem under the active card — same width (extended 2px on each
       side so it lines up with the card's 2px border), white interior,
       primary side borders that continue the card's verticals. The bottom
       extends 3px past the gap to overlap the panel's primary top edge,
       erasing the seam under this column. */
    .pub-parts-shell .pub-part-card.pub-part-active::after {
      content: '';
      position: absolute;
      /* The containing block for an absolutely positioned descendant is
         the padding edge of the nearest positioned ancestor (= 2px inside
         the card's borders). To make the stem's 2px side borders sit on
         top of the card's 2px side borders, the stem must extend 2px
         outward on each side. */
      left: -2px; right: -2px;
      /* Stem covers the full gap (10px from .pub-parts margin-bottom) AND
         the panel's 3px primary top border. Total = exactly 13px. Going
         taller leaves the stem's side borders visible as small purple
         stubs against the white panel content below the panel's edge. */
      bottom: -13px;
      height: 13px;
      background: var(--white);
      border-left: 2px solid var(--primary);
      border-right: 2px solid var(--primary);
      z-index: 3;
    }
    /* Active panel: white form sitting directly under the active tab.
       Primary top edge echoes the card's border; the active card's stem
       overlays this border in the column under the tab. Top corners are
       square so the stem can land on a straight panel edge — no curl-away
       at the corners. Bottom stays rounded for a clean folder-tab look. */
    .pub-parts-shell .pub-part-panel.pub-part-panel-active {
      position: relative;
      background: var(--white);
      border-top: 3px solid var(--primary);
      border-radius: 0 0 10px 10px;
      padding: 16px 18px 18px;
      box-shadow: 0 4px 14px rgba(92,63,165,.10);
      z-index: 1;
    }
    @media (max-width: 600px) {
      .pub-parts-shell .pub-part-panel.pub-part-panel-active {
        padding: 12px 12px 14px;
      }
    }
    @media (max-width: 800px) {
      /* In stacked layouts (1 or 2 columns) the active card is no longer
         directly above the panel, so the tab metaphor breaks. Restore
         a normal rounded card and lean on the primary border + shadow. */
      .pub-parts-shell .pub-part-card.pub-part-active {
        border-bottom: 2px solid var(--primary);
        border-bottom-left-radius: var(--radius-sm);
        border-bottom-right-radius: var(--radius-sm);
      }
      .pub-parts-shell .pub-part-card.pub-part-active::after { display: none; }
    }

    /* ── Footer action bar (always visible) ─────────────────── */
    .pub-action-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-top: 24px; padding: 16px 0 0;
      border-top: 1px solid var(--gray-light); flex-wrap: wrap;
    }
    .pub-action-group,
    .pub-action-bar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pub-btn-cancel { text-decoration: none; display: inline-flex; align-items: center; }
    .pub-btn-save, .pub-btn-summary, .pub-btn-continue {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .pub-btn-cancel, .pub-btn-save, .pub-btn-summary {
      background: var(--white); color: var(--dark2);
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 9px 16px; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr), border-color var(--tr);
    }
    .pub-btn-cancel:hover, .pub-btn-save:hover, .pub-btn-summary:hover {
      border-color: var(--primary-light); background: var(--primary-pale2);
    }
    .pub-btn-summary { color: var(--primary); border-color: var(--primary-light); }
    .pub-btn-continue {
      background: var(--primary); color: var(--white); border: none;
      border-radius: var(--radius-sm);
      padding: 10px 20px; font-family: var(--font-body); font-size: .88rem; font-weight: 600;
      cursor: pointer; transition: background var(--tr), opacity var(--tr);
    }
    .pub-btn-continue:hover:not(:disabled) { background: var(--primary-dark); }
    .pub-btn-continue:disabled { opacity: 0.45; cursor: not-allowed; }

    /* ── Bron (deel:bron) panel ─────────────────────────────── */
    .pub-bron-dropzone {
      border: 2px dashed var(--gray-light); border-radius: var(--radius-sm);
      padding: 28px 20px; text-align: center; background: var(--gray-pale);
      transition: border-color var(--tr), background var(--tr);
    }
    .pub-bron-dropzone.is-dragover { border-color: var(--primary); background: var(--primary-pale); }
    .pub-bron-dropzone p { font-size: .88rem; color: var(--gray); margin: 0; }
    .pub-bron-dropzone a { color: var(--primary); font-weight: 600; cursor: pointer; }
    .pub-bron-url-row {
      display: flex; gap: 8px; margin-top: 12px;
    }
    .pub-bron-url-row input {
      flex: 1; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 9px 12px; font-family: var(--font-body); font-size: .86rem; outline: none;
    }
    .pub-bron-url-row input:focus { border-color: var(--primary); }
    .pub-bron-url-row button {
      background: var(--primary); color: var(--white); border: none;
      border-radius: var(--radius-sm); padding: 9px 18px; font-weight: 600; cursor: pointer;
    }
    .pub-bron-url-row button:hover { background: var(--primary-dark); }
    .pub-bron-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
    .pub-bron-empty {
      font-size: .85rem; color: var(--gray); font-style: italic;
      padding: 14px 10px; text-align: center;
      border: 1px dashed var(--gray-light); border-radius: var(--radius-sm);
      background: var(--gray-pale);
    }
    .pub-bron-url-input { }
    .pub-bron-url-add { }
    .pub-bron-badge-url { background: #EFF6FF; color: #1D4ED8; }
    .pub-bron-badge-file { background: var(--primary-pale); color: var(--primary-dark); }
    .pub-bron-item {
      display: flex; align-items: center; gap: 12px;
      background: var(--white); border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 10px 14px;
    }
    .pub-bron-badge {
      width: 38px; height: 38px; border-radius: 6px;
      background: var(--primary-pale); color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 700; text-transform: uppercase; flex-shrink: 0;
    }
    .pub-bron-main { flex: 1; min-width: 0; }
    .pub-bron-name { font-size: .88rem; font-weight: 600; color: var(--dark2); word-break: break-all; }
    .pub-bron-meta { font-size: .72rem; color: var(--gray); margin-top: 2px; }
    .pub-bron-remove {
      background: none; border: none; color: var(--gray-mid); cursor: pointer;
      font-size: 1.2rem; padding: 4px 8px; line-height: 1;
    }
    .pub-bron-remove:hover { color: var(--red); }

    /* Bundle-specific wrapper for the (optional) file uploader subsection.
       Adds a clear visual gap below the related-sources block which sits
       above it for bundles, and pulls the per-distribution editor margin
       back so the spacing inside the wrapper stays consistent. */
    .pub-bundle-extra-files-section { margin-top: 28px; }
    .pub-bundle-extra-files-section .pub-subsection-title {
      margin-bottom: 14px;
    }

    /* ── Bundle picker modal ───────────────────────────────────
       Search overlay opened from the bundle wizard's "+ Bron uit
       catalogus toevoegen" button. Lets the user search the
       catalog by title/creator and add picks as related-sources. */
    .pub-bundle-picker-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(15, 23, 42, .55);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      animation: pub-bundle-picker-fade-in .14s ease-out;
    }
    @keyframes pub-bundle-picker-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    body.pub-bundle-picker-open { overflow: hidden; }

    .pub-bundle-picker-modal {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
      width: min(720px, 100%);
      max-height: 86vh;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .pub-bundle-picker-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 8px;
    }
    .pub-bundle-picker-title {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 600;
      color: #111827;
    }
    .pub-bundle-picker-close {
      border: none; background: transparent; cursor: pointer;
      color: var(--gray); padding: 4px; border-radius: var(--radius-sm);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .pub-bundle-picker-close:hover {
      background: var(--gray-pale);
      color: #111827;
    }
    .pub-bundle-picker-intro {
      margin: 0 22px 10px;
      font-size: .82rem;
      color: var(--gray);
      line-height: 1.45;
    }
    .pub-bundle-picker-search {
      position: relative;
      margin: 4px 22px 10px;
    }
    .pub-bundle-picker-search-icon {
      position: absolute;
      top: 50%; left: 12px;
      transform: translateY(-50%);
      color: var(--gray);
      pointer-events: none;
    }
    .pub-bundle-picker-input {
      width: 100%;
      padding: 10px 12px 10px 34px;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      font-size: .9rem;
      outline: none;
      transition: border-color .12s ease, box-shadow .12s ease;
    }
    .pub-bundle-picker-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(92, 63, 165, .14);
    }
    .pub-bundle-picker-status {
      margin: 0 22px 6px;
      font-size: .76rem;
      color: var(--gray);
      min-height: 1em;
    }
    .pub-bundle-picker-results {
      padding: 4px 22px 14px;
      overflow-y: auto;
      flex: 1 1 auto;
      display: flex; flex-direction: column; gap: 6px;
    }
    .pub-bundle-picker-empty {
      padding: 28px 16px;
      border: 1px dashed var(--gray-light);
      border-radius: var(--radius-sm);
      background: var(--gray-pale);
      color: var(--gray);
      font-size: .85rem;
      text-align: center;
    }

    /* Picker result row — CSS Grid with explicit minimum height so the
       row never collapses to badge-height when the title text is short.
       Columns: accent | content (title + creator) | badges | + button */
    .pub-bundle-picker-row {
      display: grid;
      grid-template-columns: 4px 1fr auto auto;
      align-items: stretch;
      min-height: 60px;
      background: #fff;
      border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm);
      cursor: pointer;
      overflow: hidden;
      transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .pub-bundle-picker-row:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    }
    .pub-bundle-picker-row:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(92, 63, 165, .14);
    }
    .pub-bundle-picker-row.is-picked {
      background: var(--gray-pale);
      cursor: default;
      border-color: var(--gray-light);
      box-shadow: none;
    }
    .pub-bundle-picker-row-accent {
      background: var(--primary-light);
    }
    .pub-bundle-picker-row-accent.access-public     { background: var(--green); }
    .pub-bundle-picker-row-accent.access-restricted { background: var(--amber); }
    .pub-bundle-picker-row-accent.access-private    { background: var(--red); }
    .pub-bundle-picker-row-content {
      min-width: 0;
      padding: 10px 14px;
      display: flex; flex-direction: column; justify-content: center;
      gap: 4px;
    }
    .pub-bundle-picker-row-title {
      font-size: .9rem !important;
      font-weight: 600;
      color: #111827;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pub-bundle-picker-row-creator {
      font-size: .76rem;
      color: var(--gray);
      line-height: 1.3;
      display: flex; align-items: center; gap: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pub-bundle-picker-row-creator svg {
      flex-shrink: 0;
      opacity: .65;
    }
    .pub-bundle-picker-row-creator span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pub-bundle-picker-row-badges {
      display: flex; flex-direction: column; align-items: flex-end;
      justify-content: center;
      gap: 4px;
      padding: 8px 12px;
      flex-shrink: 0;
    }
    .pub-bundle-picker-row-type {
      display: inline-block;
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: var(--primary-dark);
      background: var(--primary-pale);
      padding: 2px 8px;
      border-radius: 999px;
    }
    .pub-bundle-picker-row-type-empty {
      color: var(--gray);
      background: var(--gray-pale);
    }
    .pub-bundle-picker-row-access {
      display: inline-block;
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .pub-bundle-picker-row-access.badge-public {
      color: #155724; background: #d4edda;
    }
    .pub-bundle-picker-row-access.badge-restricted {
      color: #856404; background: #fff3cd;
    }
    .pub-bundle-picker-row-access.badge-private {
      color: #721c24; background: #f8d7da;
    }
    .pub-bundle-picker-row-action {
      display: flex; align-items: center; justify-content: center;
      padding: 0 10px;
    }
    .pub-bundle-picker-row-btn {
      width: 36px;
      height: 36px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff;
      cursor: pointer;
      transition: background .12s ease;
      padding: 0;
    }
    .pub-bundle-picker-row-btn:hover { background: var(--primary-dark); }
    .pub-bundle-picker-row-btn.is-picked {
      background: transparent;
      border-color: var(--green, #16a34a);
      color: var(--green, #16a34a);
      cursor: default;
    }
    /* Stack badges below action at narrow widths to keep title room */
    @media (max-width: 560px) {
      .pub-bundle-picker-row {
        grid-template-columns: 4px 1fr auto;
      }
      .pub-bundle-picker-row-badges {
        display: none;
      }
    }
    .pub-bundle-picker-foot {
      display: flex; justify-content: flex-end;
      padding: 10px 22px 16px;
      border-top: 1px solid var(--gray-pale);
      background: #fff;
    }
    .pub-bundle-picker-done {
      padding: 8px 18px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff;
      font-size: .85rem;
      font-weight: 500;
      cursor: pointer;
    }
    .pub-bundle-picker-done:hover { background: var(--primary-dark); }

    /* ── Distribution editor (per-bron metadata) ────────────── */
    .pub-dist-editor-section { margin-top: 22px; }
    .pub-dist-editor-empty {
      padding: 12px 14px; border: 1px dashed var(--gray-light);
      border-radius: var(--radius-sm); background: var(--gray-pale);
      color: var(--gray); font-size: .82rem; font-style: italic; margin: 10px 0 0;
    }
    .pub-dist-editor-cards { display: flex; flex-direction: column; gap: 10px; }
    .pub-dist-card {
      border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
      background: var(--white); overflow: hidden;
    }
    .pub-dist-card[open] { border-color: var(--primary-light); }
    .pub-dist-card-summary {
      list-style: none; cursor: pointer; user-select: none;
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; font-size: .86rem;
    }
    .pub-dist-card-summary::-webkit-details-marker { display: none; }
    .pub-dist-card-title { font-weight: 600; color: var(--dark2); flex-shrink: 0; }
    .pub-dist-card-subtitle {
      font-size: .76rem; color: var(--gray); flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pub-dist-card-toggle {
      color: var(--gray-mid); transition: transform var(--tr);
    }
    .pub-dist-card[open] .pub-dist-card-toggle { transform: rotate(180deg); }
    .pub-dist-card-body {
      padding: 4px 14px 14px; border-top: 1px solid var(--gray-pale);
    }
    .pub-dist-sublabel {
      display: block; font-size: .76rem; font-weight: 600; color: var(--gray);
      margin-bottom: 4px;
    }
    .pub-dist-input {
      width: 100%; border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 8px 11px;
      font-family: var(--font-body); font-size: .85rem; outline: none;
      box-sizing: border-box;
    }
    .pub-dist-input:focus { border-color: var(--primary); }
    .pub-dist-input-readonly { background: var(--gray-pale); color: var(--gray); }
    .pub-dist-textarea { resize: vertical; min-height: 56px; }
    .pub-dist-radio-row { display: flex; flex-direction: column; gap: 8px; }
    .pub-dist-radio {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); cursor: pointer;
      transition: border-color var(--tr), background var(--tr);
    }
    .pub-dist-radio:has(input:checked) {
      border-color: var(--primary); background: var(--primary-pale);
    }
    .pub-dist-radio span { display: flex; flex-direction: column; gap: 2px; }
    .pub-dist-radio strong { font-size: .82rem; color: var(--dark2); }
    .pub-dist-radio em { font-style: normal; font-size: .74rem; color: var(--gray); }
    .pub-dist-urlkind { margin-top: 12px; }

    /* ── Related sources (qualifiedRelation) collapsible ────── */
    .pub-related-sources {
      margin-top: 18px; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); background: var(--white);
    }
    .pub-related-sources-toggle {
      width: 100%; display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; background: var(--gray-pale);
      border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      cursor: pointer; font-family: var(--font-head); font-size: .9rem;
      font-weight: 600; color: var(--dark2); text-align: left;
    }
    .pub-related-sources.is-collapsed .pub-related-sources-toggle {
      border-radius: var(--radius-sm);
    }
    .pub-related-sources-toggle-chev {
      transition: transform var(--tr); color: var(--gray-mid);
    }
    .pub-related-sources.is-collapsed .pub-related-sources-toggle-chev {
      transform: rotate(-90deg);
    }
    .pub-related-sources-toggle-count {
      margin-left: auto; font-weight: 500; font-size: .78rem; color: var(--gray);
    }
    .pub-related-sources-body {
      padding: 14px; display: flex; flex-direction: column; gap: 10px;
    }
    .pub-related-sources.is-collapsed .pub-related-sources-body { display: none; }
    .pub-related-sources-intro {
      font-size: .82rem; color: var(--gray); margin: 0 0 4px;
    }
    .pub-related-source-item {
      display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px;
      align-items: end;
    }
    @media (max-width: 600px) {
      .pub-related-source-item { grid-template-columns: 1fr; }
    }
    .pub-related-source-item input {
      width: 100%; border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 8px 11px;
      font-family: var(--font-body); font-size: .85rem; outline: none;
      box-sizing: border-box;
    }
    .pub-related-source-item input:focus { border-color: var(--primary); }
    .pub-related-source-remove {
      background: none; border: 1px solid var(--gray-light);
      border-radius: var(--radius-sm); color: var(--gray-mid);
      padding: 7px 10px; cursor: pointer;
    }
    .pub-related-source-remove:hover { color: var(--red); border-color: var(--red); }
    .pub-related-sources-empty {
      padding: 10px 14px; border: 1px dashed var(--gray-light);
      border-radius: var(--radius-sm); background: var(--gray-pale);
      color: var(--gray); font-size: .82rem; font-style: italic; margin: 0;
    }
    .pub-related-sources-add {
      align-self: flex-start; background: var(--primary); color: var(--white);
      border: none; border-radius: var(--radius-sm); padding: 8px 14px;
      font-weight: 600; font-size: .84rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .pub-related-sources-add:hover { background: var(--primary-dark); }

    /* List wrapper: stack the URI/role rows and basket-style cards
       vertically with consistent spacing (the parent body uses flex
       too, so this only affects siblings within the list). */
    .pub-related-sources-list {
      display: flex; flex-direction: column; gap: 8px;
    }
    .pub-related-sources-list:empty { display: none; }

    /* Basket-style read-only card variant used when a related-source
       item carries metadata (typically: bundle prefill from the
       basket). Reuses .basket-card visuals but neutralizes the
       cursor/hover-lift since the card is not clickable here. */
    .pub-related-source-card { cursor: default; }
    .pub-related-source-card:hover {
      box-shadow: var(--shadow); transform: none;
    }

    /* ── Source-block chrome (Files / Data services / Relations) ──
       The three bron sub-sections share the same collapsible
       chrome (the existing .pub-related-sources classes). The
       modifiers below add an icon chip in the header and a small
       outer-margin between consecutive blocks so they read as a
       stack rather than a single panel. */
    .pub-bron-blocks {
      display: flex; flex-direction: column; gap: 14px;
    }
    .pub-source-block { /* extends .pub-related-sources */ }
    .pub-source-block .pub-related-sources-toggle {
      gap: 12px;
    }
    .pub-source-block-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--primary-pale); color: var(--primary);
      transition: background var(--tr), color var(--tr);
    }
    .pub-source-block-icon svg {
      width: 16px; height: 16px;
    }
    .pub-source-block-files .pub-source-block-icon {
      background: #EFF6FF; color: #1D4ED8;
    }
    .pub-source-block-dataservices .pub-source-block-icon {
      background: #FFF7ED; color: #C2410C;
    }
    .pub-source-block-relations .pub-source-block-icon {
      background: var(--primary-pale); color: var(--primary);
    }
    .pub-source-block-title {
      font-family: var(--font-head); font-size: .95rem;
      font-weight: 600; color: var(--dark2);
    }
    /* Stronger styling for the count chip so it reads as a status badge
       rather than secondary text. Hides itself when empty (no children). */
    .pub-source-block .pub-related-sources-toggle-count {
      background: var(--white); border: 1px solid var(--gray-light);
      color: var(--gray-mid);
      padding: 2px 8px; border-radius: 999px;
      font-size: .74rem; font-weight: 600;
    }
    .pub-source-block:not(.is-collapsed) .pub-related-sources-toggle-count {
      background: var(--primary-pale); border-color: var(--primary-pale);
      color: var(--primary-dark);
    }
    /* Defensive: hide the chip when empty (no count to show yet).
       Without this rule the static-rendered Files & Links chrome would
       briefly show an empty rounded pill before JS attaches the count. */
    .pub-source-block .pub-related-sources-toggle-count:empty {
      display: none;
    }

    /* When a source-block is required and empty, surface a subtle
       red dot on the icon — set by JS via .is-required-empty. */
    .pub-source-block.is-required-empty .pub-source-block-icon {
      box-shadow: 0 0 0 2px var(--red-pale, #fee2e2);
    }

    /* The Files & links block hosts the original dropzone + URL row
       inside the source-block body. The wrapper padding already lives
       on .pub-related-sources-body, so the inner controls only need
       to reset their own top margin. */
    .pub-source-block-files .pub-bron-dropzone { margin-top: 0; }

    /* ── Inline data-service editor cards ───────────────────────
       Each card is one dcat:DataService form, nested inside the
       Data services source-block. The fold/unfold pattern mirrors
       the per-distribution editor cards under Files & links so the
       two blocks feel like siblings. */
    .pub-ds-list {
      display: flex; flex-direction: column; gap: 10px;
    }
    .pub-ds-item {
      border: 1px solid var(--gray-light); border-radius: var(--radius-sm);
      background: var(--white);
      overflow: hidden;
      transition: border-color var(--tr), box-shadow var(--tr);
    }
    .pub-ds-item:focus-within {
      border-color: var(--primary-light);
      box-shadow: 0 0 0 3px var(--primary-pale);
    }
    .pub-ds-item-head {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px;
      background: var(--gray-pale);
      border-bottom: 1px solid var(--gray-light);
    }
    .pub-ds-item.is-collapsed .pub-ds-item-head {
      border-bottom: none;
    }
    .pub-ds-item-toggle {
      display: inline-flex; align-items: center; gap: 8px;
      background: none; border: none; padding: 4px 6px; margin: 0;
      cursor: pointer; text-align: left; flex: 1; min-width: 0;
      font-family: var(--font-head); font-size: .85rem;
      font-weight: 600; color: var(--dark2);
    }
    .pub-ds-item-toggle:hover { color: var(--primary-dark); }
    .pub-ds-item-chev {
      transition: transform var(--tr); color: var(--gray-mid);
      flex-shrink: 0;
    }
    .pub-ds-item.is-collapsed .pub-ds-item-chev {
      transform: rotate(-90deg);
    }
    .pub-ds-item-title {
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      color: inherit;
    }
    .pub-ds-item-remove {
      background: none; border: 1px solid transparent;
      color: var(--gray-mid); cursor: pointer;
      padding: 5px 8px; border-radius: var(--radius-sm);
      display: inline-flex; align-items: center;
    }
    .pub-ds-item-remove:hover {
      color: var(--red); border-color: var(--red);
    }
    .pub-ds-item-body {
      padding: 14px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .pub-ds-field { display: flex; flex-direction: column; gap: 4px; }
    .pub-ds-input {
      width: 100%; box-sizing: border-box;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 8px 11px;
      font-family: var(--font-body); font-size: .85rem; outline: none;
    }
    .pub-ds-input:focus { border-color: var(--primary); }

    /* servesDataset chip input — mirrors the existing tag-input
       styling used elsewhere in the publish form. */
    .pub-ds-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      min-height: 0;
    }
    .pub-ds-chips:empty { display: none; }
    .pub-ds-chip {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--primary-pale); color: var(--primary-dark);
      border-radius: 999px; padding: 3px 4px 3px 10px;
      font-size: .76rem; font-weight: 500;
    }
    .pub-ds-chip-remove {
      background: none; border: none; color: inherit; cursor: pointer;
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1rem; line-height: 1;
    }
    .pub-ds-chip-remove:hover { background: var(--white); }
    .pub-ds-chip-input {
      width: 100%; box-sizing: border-box;
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 6px 10px; font-size: .82rem;
      font-family: var(--font-body); outline: none;
    }
    .pub-ds-chip-input:focus { border-color: var(--primary); }

    /* ── Publicatie (deel:publicatie) panel ─────────────────── */
    .pub-pubchoice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    @media (max-width: 700px) { .pub-pubchoice-grid { grid-template-columns: 1fr; } }
    .pub-pubchoice-card {
      border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 14px 16px; cursor: pointer;
      transition: border-color var(--tr), background var(--tr);
    }
    .pub-pubchoice-card:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
    .pub-pubchoice-card.is-selected { border-color: var(--primary); background: var(--primary-pale); }
    .pub-pubchoice-inner { display: flex; flex-direction: column; gap: 4px; }
    .pub-pubchoice-icon {
      width: 34px; height: 34px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      background: var(--primary-pale); color: var(--primary); margin-bottom: 6px;
    }
    .pub-pubchoice-card.is-selected .pub-pubchoice-icon { background: var(--white); }
    .pub-pubchoice-title,
    .pub-pubchoice-label {
      font-family: var(--font-head); font-size: .92rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 4px;
    }
    .pub-pubchoice-desc { font-size: .78rem; color: var(--gray); line-height: 1.5; }
    .pub-pub-tenants { margin-top: 18px; }

    /* Verticale tenant-lijst (i.p.v. grid) met logo + meta per rij */
    .pub-tenant-list {
      margin-top: 10px;
      display: flex !important; flex-direction: column !important;
      grid-template-columns: none !important; gap: 8px;
    }
    .pub-tenant-item {
      display: flex; align-items: center; gap: 14px;
      background: var(--white); border: 1.5px solid var(--gray-light);
      border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer;
      font-size: .84rem; color: var(--dark); position: relative;
      transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
    }
    .pub-tenant-item input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }
    .pub-tenant-item:hover { border-color: var(--primary-light); background: var(--primary-pale2); }
    .pub-tenant-item.is-checked {
      border-color: var(--primary); background: var(--primary-pale);
      box-shadow: 0 2px 6px rgba(92,63,165,.08);
    }
    .pub-tenant-logo {
      flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px;
      background: var(--white); border: 1px solid var(--gray-light);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .pub-tenant-logo-img {
      max-width: 34px; max-height: 34px; object-fit: contain; display: block;
    }
    .pub-tenant-logo-fallback {
      font-family: var(--font-head); font-size: .75rem; font-weight: 700;
      color: var(--primary); letter-spacing: .03em;
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    }
    .pub-tenant-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .pub-tenant-item-name {
      font-weight: 600; color: var(--dark2); font-size: .9rem;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .pub-tenant-item-meta { font-size: .76rem; color: var(--gray); }
    .pub-tenant-check {
      opacity: 0; color: var(--primary); transition: opacity var(--tr); flex-shrink: 0;
    }
    .pub-tenant-item.is-checked .pub-tenant-check { opacity: 1; }
    .pub-tenant-status {
      font-size: .62rem; font-weight: 700; text-transform: uppercase;
      padding: 2px 7px; border-radius: 10px; letter-spacing: .04em;
    }
    .pub-tenant-status-in-development { background: #FFF4D6; color: #8A6A00; }
    .pub-tenant-status-planned        { background: var(--gray-light); color: var(--gray); }

    /* Callouts onder de drie publicatie-kaarten */
    .pub-pubchoice-callout {
      margin-top: 16px; padding: 14px 16px;
      border-radius: var(--radius-sm); border: 1px solid var(--gray-light);
      background: var(--gray-pale); display: flex; gap: 10px; align-items: flex-start;
    }
    .pub-pubchoice-callout p { margin: 0; font-size: .86rem; color: var(--dark2); line-height: 1.55; }
    .pub-pubchoice-callout-concept { border-color: #D9CBFA; background: #F6F2FD; color: var(--primary-dark); }
    .pub-pubchoice-callout-concept > svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
    .pub-pubchoice-callout-intern  { flex-direction: column; align-items: stretch; border-color: #CCE4F9; background: #EFF6FF; }
    .pub-pubchoice-callout-head { display: flex; align-items: center; gap: 8px; color: #1D4ED8; }
    .pub-pubchoice-callout-head strong { font-family: var(--font-head); font-size: .95rem; }
    .pub-pubchoice-callout-hint { margin: 0 !important; font-size: .82rem; color: var(--gray); }

    /* Deelbare-link rij */
    .pub-pub-link-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
    .pub-pub-link-input {
      flex: 1; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
      padding: 9px 12px; font-family: var(--mono, 'SFMono-Regular', Menlo, monospace);
      font-size: .82rem; background: var(--white); color: var(--dark2); outline: none;
    }
    .pub-pub-link-input:focus { border-color: var(--primary); }
    .pub-pub-link-copy {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--primary); color: var(--white); border: none;
      border-radius: var(--radius-sm); padding: 9px 14px;
      font-family: var(--font-body); font-size: .82rem; font-weight: 600; cursor: pointer;
      transition: background var(--tr);
    }
    .pub-pub-link-copy:hover { background: var(--primary-dark); }
    @media (max-width: 520px) {
      .pub-pub-link-row { flex-direction: column; }
    }

    /* ── Overzicht modal ──────────────────────────────────────── */
    .pub-modal-backdrop {
      position: fixed; inset: 0; background: rgba(20,20,40,.45); z-index: 500;
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .pub-modal {
      background: var(--white); border-radius: var(--radius);
      max-width: 820px; width: 100%; max-height: 85vh; overflow-y: auto;
      box-shadow: 0 18px 50px rgba(0,0,0,.25);
    }
    .pub-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 24px; border-bottom: 1px solid var(--gray-light);
      position: sticky; top: 0; background: var(--white); z-index: 2;
    }
    .pub-modal-header h2 {
      font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--dark2);
    }
    .pub-modal-close {
      background: none; border: none; font-size: 1.5rem; color: var(--gray-mid);
      cursor: pointer; line-height: 1; padding: 4px 10px;
    }
    .pub-modal-close:hover { color: var(--dark); }
    .pub-modal-body { padding: 16px 24px 24px; }

    /* Groups within an info-panel (since 4 old steps merge into one) */
    .pub-part-group { margin-top: 28px; }
    .pub-part-group:first-child { margin-top: 0; }
    .pub-part-group-title {
      font-family: var(--font-head); font-size: .95rem; font-weight: 700;
      color: var(--dark2); margin-bottom: 4px;
      padding-bottom: 8px; border-bottom: 1px solid var(--gray-light);
    }

/* ═══════════════════════════════════════════════════════════
   LOGIN MODAL  (prototype — simulated auth)
   Two stacked cards on a blurred backdrop:
     • brand card: tenant logo + "Powered by iSHARE"
     • form card: email / password / forgot / continue
   Opened by js/login.js when the user clicks the LOGIN button while
   logged out. Submits do NOT call any backend — they trigger
   window.setLoginState(true). Step 2 (Keycloak / iSHARE) will replace
   the submit handler in login.js with a real auth call.
══════════════════════════════════════════════════════════ */

/* Visually-hidden helper for screen-reader-only labels in the form. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.login-modal-backdrop {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 15, 42, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: loginBackdropIn .2s ease;
}
@keyframes loginBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.login-modal {
  position: relative;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 14px;
  animation: loginModalIn .26s cubic-bezier(.4, 0, .2, 1);
}
@keyframes loginModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button — sits above the modal in the dim backdrop. */
.login-modal-close {
  position: absolute; top: -42px; right: -2px;
  background: rgba(255, 255, 255, .12); color: var(--white);
  border: none; border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr);
}
.login-modal-close:hover {
  background: rgba(255, 255, 255, .24);
  transform: rotate(90deg);
}

/* Tenant brand card — soft pastel gradient header (mirrors Figma). */
.login-modal-brand {
  background: linear-gradient(135deg,
              rgba(248, 230, 232, .96) 0%,
              rgba(231, 220, 244, .94) 60%,
              rgba(217, 226, 244, .94) 100%);
  border-radius: var(--radius);
  padding: 22px 28px 18px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.login-modal-brand-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 32px;
}
.login-modal-brand-logo {
  height: 28px; width: auto; max-width: 240px;
  object-fit: contain;
}
.login-modal-brand-powered {
  font-family: var(--font-body);
  font-size: .78rem; color: var(--gray);
  display: inline-flex; align-items: center; gap: 6px;
}
.login-modal-brand-ishare {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; letter-spacing: .04em;
  color: #B91467;
}
.login-modal-brand-ishare-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ec4899 0%, #b91467 70%);
  box-shadow: 0 1px 3px rgba(185, 20, 103, .35);
  flex-shrink: 0;
}

/* Form card — solid white, rounded, with shadow. */
.login-modal-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px 24px;
  box-shadow: var(--shadow-md);
}
.login-modal-title {
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 700;
  color: var(--dark);
  margin-bottom: 22px;
  letter-spacing: -.01em;
}
.login-modal-form {
  display: flex; flex-direction: column; gap: 12px;
}
.login-modal-field {
  display: flex; flex-direction: column; gap: 4px;
}
.login-modal-field input {
  font-family: var(--font-body);
  font-size: .95rem; color: var(--dark);
  padding: 12px 14px;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.login-modal-field input::placeholder {
  color: var(--gray-mid);
}
.login-modal-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-pale);
}
.login-modal-field input:invalid:not(:placeholder-shown) {
  border-color: var(--red);
}

.login-modal-forgot {
  align-self: center;
  color: var(--primary);
  font-size: .82rem; font-weight: 600;
  margin: 8px 0 6px;
  text-decoration: none;
}
.login-modal-forgot:hover { text-decoration: underline; }

.login-modal-submit {
  margin-top: 4px;
  background: var(--primary); color: var(--white);
  border: none; border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-head);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tr), transform .1s ease;
}
.login-modal-submit:hover  { background: var(--primary-dark); }
.login-modal-submit:active { transform: scale(.985); }
.login-modal-submit[disabled] {
  opacity: .65; cursor: progress;
  background: var(--primary-light);
}

.login-modal-create {
  text-align: center;
  font-size: .82rem; color: var(--gray);
  margin-top: 18px;
}
.login-modal-create a {
  color: var(--primary); font-weight: 600;
  margin-left: 4px;
}
.login-modal-create a:hover { text-decoration: underline; }

.login-modal-prototype-note {
  text-align: center;
  font-size: .72rem; color: var(--gray-mid);
  margin-top: 12px;
  font-style: italic;
}

/* Lock body scroll while modal is open (added by login.js). */
body.login-modal-open { overflow: hidden; }

/* Mobile tweaks — pull the close button inside the modal. */
@media (max-width: 520px) {
  .login-modal { max-width: 100%; }
  .login-modal-brand   { padding: 18px 20px 14px; }
  .login-modal-card    { padding: 22px 20px 20px; }
  .login-modal-title   { font-size: 1.15rem; margin-bottom: 18px; }
  .login-modal-close {
    top: 10px; right: 10px;
    background: rgba(20, 15, 42, .08);
    color: var(--dark);
  }
  .login-modal-close:hover {
    background: rgba(20, 15, 42, .14);
  }
}

/* ═══════════════════════════════════════════════════════════
   COLLAPSIBLE FILTER GROUPS  (Meili sidebar)
══════════════════════════════════════════════════════════ */

/* Filter group container */
.fg {
  border-bottom: 1px solid var(--gray-light);
  padding: 0;
}
.fg:last-of-type { border-bottom: none; }

/* Filter group header button */
.fg-header {
  width: 100%; display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 10px 14px; text-align: left;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: var(--dark);
  transition: background var(--tr);
}
.fg-header:hover { background: var(--primary-pale2); }

.fg-label { flex: 1; }

/* Total count badge shown in header (visible when collapsed) */
.fg-count {
  font-size: .72rem; font-weight: 500; color: var(--gray);
  background: var(--gray-light); border-radius: 20px;
  padding: 1px 6px; min-width: 20px; text-align: center;
  display: none; /* shown only when group is collapsed */
}
.fg-header[aria-expanded="false"] .fg-count { display: inline; }

/* Chevron icon — rotates when collapsed */
.fg-chevron {
  flex-shrink: 0; color: var(--gray);
  transition: transform .2s ease;
}
.fg-header[aria-expanded="false"] .fg-chevron { transform: rotate(-90deg); }

/* Filter group body */
.fg-body {
  padding: 4px 14px 12px;
  overflow: hidden;
}
.fg-body--collapsed {
  display: none;
}

/* Facet checkbox rows */
.fc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer;
  font-size: .82rem; color: var(--dark);
  line-height: 1.3;
}
.fc-row:hover { color: var(--primary); }
.fc-row input[type="checkbox"],
.fc-row input[type="radio"] {
  flex-shrink: 0;
  width: 14px; height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
}
.fc-label { flex: 1; }

/* Facet count number (small, right-aligned) */
.fc-n {
  font-size: .72rem; color: var(--gray); font-weight: 500;
  min-width: 24px; text-align: right;
}

/* "Toon alleen participanten" checkbox — sits above the Eigenaar dropdown.
   Slightly emphasised (semibold, primary tint when active) so users notice
   that this control restricts BOTH the creator and publisher dropdowns. */
.fc-row--participants {
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--gray-dark, var(--dark));
}
.fc-row--participants input[type="checkbox"]:checked ~ .fc-label {
  color: var(--primary);
}

/* Advanced filters toggle button */
.advanced-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 9px 14px;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  color: var(--primary);
  border-top: 1px dashed var(--gray-light);
  transition: background var(--tr);
}
.advanced-toggle:hover { background: var(--primary-pale2); }
.advanced-toggle svg { flex-shrink: 0; }

/* Advanced filters section */
.advanced-filters-wrap {
  border-top: 1px solid var(--gray-light);
}
.advanced-filters-wrap[hidden] { display: none; }

/* Advanced filter groups start collapsed — already handled by fg-body--collapsed */


/* ── Active filter chips — sidebar block ─────────────────────────────────
   Lives at the top of the .filter-panel, just below the panel
   title. Hidden when no filters are active (the JS toggles
   [hidden] on the wrapper). Houses three children:
     .afb-heading      → small "Actieve filters" label
     .active-filter-badges → the chips themselves
     .afb-reset        → top-of-sidebar reset button (mirrors the
                         existing one at the bottom)
   ───────────────────────────────────────────────────────────── */
.active-filters-block {
  margin: -4px 0 14px;
  padding: 10px 12px 12px;
  background: var(--primary-pale2, #f5f2fd);
  border: 1px solid var(--primary-pale, #ede8f9);
  border-radius: var(--radius-sm, 8px);
}
.active-filters-block[hidden] { display: none; }

.afb-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.afb-heading-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary, #5C3FA5);
}
.afb-reset {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray, #6b7280);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.2);
}
.afb-reset:hover {
  color: var(--primary, #5C3FA5);
  text-decoration-color: currentColor;
}

.active-filter-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  min-height: 0;
}
.active-filter-badges:empty { display: none; }

.afb-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  margin-right: 2px;
}

.afb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-pale2, #e8edf8);
  color: var(--primary, #1a4fa0);
  border: 1px solid rgba(26,79,160,.2);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px 3px 10px;
  max-width: 260px;
  min-width: 0;
}

.afb-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.afb-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  font-size: .75rem;
  color: var(--primary, #1a4fa0);
  opacity: .6;
  line-height: 1;
  transition: opacity .15s;
}
.afb-remove:hover { opacity: 1; }

/* ── Detail page — link styles for service/app pages ──────────────────── */
.detail-link {
  color: var(--primary);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: rgba(26,79,160,.3);
}
.detail-link:hover { text-decoration-color: var(--primary); }

.detail-link-prominent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: .88rem;
}

.detail-hero-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.detail-hero-link:hover { text-decoration: underline; }

/* Share / copy-permalink link in the detail hero meta row */
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  padding: 0;
  background: none; border: none;
  font-size: .85rem; font-weight: 400;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.share-btn:hover { color: var(--white); }
.share-btn--copied { color: var(--white); font-weight: 600; }

/* Small copy icon next to the catalogus permalink row in the info sidebar */
.permalink-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 3px 4px;
  background: none; border: none;
  color: var(--gray-mid);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  margin-top: 1px; /* optical alignment with first line of URL text */
}
.permalink-copy-btn:hover { color: var(--primary); background: var(--gray-pale); }
.permalink-copy-btn--copied { color: var(--green, #22c55e) !important; background: transparent !important; }

/* ═══════════════════════════════════════════════════════════
   BASKET
══════════════════════════════════════════════════════════ */

/* ── Basket icon button in header ──────────────────────── */
.basket-header-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--dark);
  transition: background var(--tr), border-color var(--tr), color var(--tr);
  flex-shrink: 0;
}
.basket-header-btn:hover {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}
.basket-header-btn.has-items {
  border-color: var(--primary);
  color: var(--primary);
}
.basket-count-badge {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  background: var(--primary);
  color: var(--white);
  font-size: .62rem; font-weight: 700;
  border-radius: 20px;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  border: 2px solid var(--white);
}
.basket-count-badge.visible { display: flex; }

/* ── 'In mandje' button in card footer ─────────────────── */
.card-basket-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-xs);
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
  white-space: nowrap;
  line-height: 1;
  margin-left: auto;  /* push this + the arrow to the right side */
}
.card-basket-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-pale);
}
.card-basket-btn.in-basket {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-pale);
}
.card-basket-btn svg { flex-shrink: 0; }

/* ── Basket page layout ─────────────────────────────────── */
#basketPage {
  min-height: calc(100vh - 60px);
  background: var(--off-white);
}
/* Wrapper around the "Overzicht" back-link that sits above the
   dark basket-hero. Matches basket-wrap's max-width and horizontal
   padding so the link lines up with the basket content column.
   The link itself already has margin-bottom:12px from .detail-back-link;
   we only need horizontal alignment + a bit of breathing room on top. */
.basket-back-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px 0;
}
.basket-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 100%);
  padding: 36px 0 30px;
}
.basket-hero-inner {
  max-width: 880px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.basket-hero-left h1 {
  font-family: var(--font-head); font-size: 1.55rem; font-weight: 700;
  color: var(--white); margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.basket-hero-left p {
  font-size: .85rem; color: rgba(255,255,255,0.55);
}
.basket-count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--white);
  font-size: .68rem; font-weight: 700;
  padding: 2px 10px; border-radius: 20px;
  min-width: 26px;
}
.basket-wrap {
  max-width: 880px; margin: 0 auto; padding: 32px 24px 48px;
}

/* Empty state */
.basket-empty {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 60px 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.basket-empty svg { color: var(--gray-light); }
.basket-empty h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--dark); }
.basket-empty p { font-size: .875rem; color: var(--gray); max-width: 380px; line-height: 1.6; }
.basket-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--primary); color: var(--white);
  border-radius: var(--radius-sm); font-weight: 600; font-size: .875rem;
  cursor: pointer; border: none; font-family: var(--font-body);
  transition: background var(--tr);
  text-decoration: none; margin-top: 4px;
}
.basket-empty-cta:hover { background: var(--primary-dark); }

/* Compact basket item cards */
.basket-list-header {
  display: flex; justify-content: flex-end; align-items: center;
  margin-bottom: 8px;
}
.basket-clear-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 4px 2px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 500;
  color: var(--red); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--tr), opacity var(--tr);
}
.basket-clear-link:hover { opacity: 0.75; }
.basket-clear-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.basket-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }

.basket-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex; align-items: stretch;
  overflow: hidden;
  transition: box-shadow var(--tr), transform var(--tr);
  cursor: pointer;
}
.basket-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.basket-card-accent {
  width: 4px; flex-shrink: 0;
  background: var(--primary-light);
}
.basket-card-accent.access-public     { background: #6AA84F; }
.basket-card-accent.access-restricted { background: #F57C00; }
.basket-card-accent.access-private    { background: #D60D2B; }
.basket-card-body {
  flex: 1; padding: 12px 14px;
  display: flex; align-items: center; gap: 14px;
}
.basket-card-info { flex: 1; min-width: 0; }
.basket-card-title {
  font-family: var(--font-head); font-size: .88rem; font-weight: 700;
  color: var(--dark); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.basket-card-id {
  display: flex; align-items: center; gap: 4px;
  font-size: .71rem; color: var(--gray-mid);
  margin-bottom: 5px;
}
.basket-card-id svg { flex-shrink: 0; opacity: 0.6; }
.basket-card-id-link {
  color: var(--primary); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.basket-card-id-link:hover { text-decoration: underline; }

.basket-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.basket-card-org {
  font-size: .74rem; color: var(--gray);
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
  flex-shrink: 0;
}
.basket-card-badges {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.basket-remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent; border: none;
  color: var(--gray-mid); cursor: pointer;
  border-radius: 6px; transition: background var(--tr), color var(--tr);
}
.basket-remove-btn:hover { background: var(--red-pale); color: var(--red); }
.basket-remove-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Action buttons row */
.basket-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1.5px solid var(--gray-light);
  align-items: center;
}
.basket-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  cursor: pointer; border: none; transition: background var(--tr), color var(--tr), opacity var(--tr);
  text-decoration: none; white-space: nowrap;
}
.basket-action-btn--clear {
  background: var(--white); color: var(--red);
  border: 1.5px solid currentColor;
}
.basket-action-btn--clear:hover { background: var(--red-pale); }
.basket-action-btn--bundle {
  background: var(--primary); color: var(--white);
  border: 1.5px solid var(--primary);
}
.basket-action-btn--bundle:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.basket-action-btn--save {
  background: var(--gray-pale); color: var(--gray-mid);
  border: 1.5px solid var(--gray-light);
  cursor: not-allowed; opacity: 0.55;
  pointer-events: none;
}

/* ── Detail page basket button (inside policy-box) ──────── */
.policy-basket-divider {
  border: none; border-top: 1px solid rgba(26,79,160,0.15);
  margin: 14px 0 12px;
}
.policy-basket-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  background: transparent;
  border: 1.5px solid rgba(26,79,160,0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: #1A4FA0;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
  white-space: nowrap;
}
.policy-basket-btn:hover {
  background: rgba(26,79,160,0.07);
  border-color: rgba(26,79,160,0.55);
}
.policy-basket-btn.in-basket {
  background: rgba(26,79,160,0.09);
  border-color: #1A4FA0;
}
.policy-basket-btn svg { flex-shrink: 0; }

/* Icon-only variant — sits inline with .policy-access-btn / .policy-request-btn
   inside .policy-btn-row. Square footprint, no label, tooltip provides text. */
.policy-basket-btn--icon {
  width: auto;
  padding: 8px 10px;
  gap: 0;
  flex-shrink: 0;
}

/* ── Home search hint text ───────────────────────────────── */
.home-search-hint {
  margin-top: 18px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   MAIN NAVIGATION (desktop dropdown)
══════════════════════════════════════════════════════════ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dark);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tr), background var(--tr);
  line-height: 1;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--primary);
  background: var(--primary-pale);
}
.nav-chevron {
  color: var(--gray);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.nav-link[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 230px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  z-index: 300;
}
.nav-dropdown-section-label {
  padding: 8px 16px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-mid);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
}
.nav-dropdown-item:hover {
  background: var(--primary-pale);
  color: var(--primary);
  text-decoration: none;
}
.nav-dropdown-item svg { flex-shrink: 0; color: var(--gray); }
.nav-dropdown-divider {
  height: 1px;
  background: var(--gray-light);
  margin: 4px 0;
}
.nav-dropdown-coming {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--gray-mid);
  opacity: 0.75;
}
.nav-dropdown-coming svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   HAMBURGER BUTTON (mobile only)
══════════════════════════════════════════════════════════ */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr);
}
.hamburger-btn:hover {
  background: var(--primary-pale);
  border-color: var(--primary);
}
.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════════════════════════ */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(20, 15, 42, 0.35);
  z-index: 198;
  backdrop-filter: blur(2px);
}
.mobile-nav-backdrop.open { display: block; }

.mobile-nav-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 199;
  background: var(--white);
  border-bottom: 2px solid var(--primary-pale);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  /* Slide-down animation */
  animation: drawerSlideIn .2s ease;
}
@keyframes drawerSlideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mobile-nav-drawer[hidden] { display: none; }

.mobile-nav-section {
  padding: 8px 20px 4px;
}
.mobile-nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-mid);
  padding: 10px 0 6px;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-light);
  transition: color var(--tr);
}
.mobile-nav-link:last-of-type { border-bottom: none; }
.mobile-nav-link:hover { color: var(--primary); text-decoration: none; }
.mobile-nav-link svg { flex-shrink: 0; color: var(--gray); }
.mobile-nav-coming {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.85rem;
  color: var(--gray-mid);
  opacity: 0.65;
  border-bottom: 1px solid var(--gray-light);
}
.mobile-nav-coming:last-child { border-bottom: none; }
.mobile-nav-coming svg { flex-shrink: 0; }
.mobile-nav-divider {
  height: 1px;
  background: var(--gray-light);
  margin: 4px 0;
}
.mobile-nav-lang {
  display: flex;
  gap: 8px;
  padding: 14px 20px 16px;
  border-top: 1.5px solid var(--gray-light);
  margin-top: 4px;
}
.mobile-nav-lang .lang-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.82rem;
}
.mobile-nav-lang .lang-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FILTER TOGGLE (catalog page)
══════════════════════════════════════════════════════════ */
.filter-toggle-mobile {
  display: none; /* shown via media query */
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: border-color var(--tr), color var(--tr);
  /* Spans full width of main-wrap grid */
  grid-column: 1 / -1;
}
.filter-toggle-mobile:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-toggle-badge {
  background: var(--primary);
  color: white;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  display: none;
}
.filter-toggle-badge.visible { display: inline; }
.filter-toggle-chevron {
  margin-left: auto;
  color: var(--gray);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.filter-toggle-mobile[aria-expanded="true"] .filter-toggle-chevron {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════ */

/* ── Tablet / narrow desktop: hide tag, show it still fits ── */
@media (max-width: 1024px) {
  .header-tag { display: none; }
}

/* ── Mobile nav breakpoint ───────────────────────────────── */
@media (max-width: 768px) {
  .header-nav   { display: none; }
  /* Settings (cog) blijft zichtbaar op mobile zodat gebruikers
     vanaf hun telefoon ook taal en thema kunnen wisselen. */
  .settings-box { display: inline-flex; }
  .hamburger-btn { display: flex; }

  /* Keep back-btn visible on mobile detail pages */
  .header-back-btn.visible { display: flex; }

  /* Home hero: single column */
  .home-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .home-hero-right { max-width: 100%; }

  /* Login-box compact op mobiel: altijd alleen het persoon-icoon
     zichtbaar zodat er ruimte overblijft voor mandje, cog en
     hamburger in de header. We forceren de logged-out-vorm op beide
     states omdat de pull-down via de drawer alsnog bereikbaar is. */
  .login-box-btn { width: 36px !important; padding: 0 !important; justify-content: center; gap: 0; }
  .login-box-label  { position: absolute !important; left: -9999px !important; }
  .login-box-chevron { display: none !important; }
  /* Logged-in op mobiel: blijf de filled-disc badge tonen — duidelijk
     "ik ben ingelogd" maar zonder het ruimte-vretende pillenrandje. */
  .login-box[data-state="logged-in"] .login-box-icon-wrap { width: 28px; height: 28px; }

  /* Mobile drawer heeft een eigen LOGIN-sectie — overbodig nu de
     login-box zelf zichtbaar blijft in de mobiele header. */
  #mobileNavLoginSection,
  #mobileNavLoginSection + .mobile-nav-divider { display: none; }
}

/* ── Small mobile ────────────────────────────────────────── */
@media (max-width: 480px) {
  .header-inner { padding: 0 12px; gap: 6px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-img  { height: 22px; }
  /* Tighter spacing tussen header-knoppen op smalle schermen */
  .login-box-btn,
  .settings-box-btn,
  .basket-header-btn,
  .hamburger-btn { width: 32px; height: 32px; }
}

/* ── Catalog filter sidebar on mobile ───────────────────── */
@media (max-width: 820px) {
  .main-wrap { grid-template-columns: 1fr; }
  .sidebar {
    position: static !important;
    display: none; /* hidden by default; toggled by button */
  }
  .sidebar.mobile-open {
    display: flex;
  }
  .filter-toggle-mobile { display: flex; }
}

/* ── Footer: stack on mobile ─────────────────────────────── */
@media (max-width: 680px) {
  .site-footer-inner {
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px 16px;
  }
  .footer-col-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    width: 100%;
  }
  .footer-col { width: 100%; }

  /* Trust bar stacks below the columns — items vullen de breedte links-uitgelijnd */
  .site-footer-trust-wrap { padding: 0 20px 18px; }
  .site-footer-trust {
    gap: 18px; padding-top: 18px;
    justify-content: flex-start;   /* op mobile niet centreren — links beginnen leest beter */
  }
  .trust-item { flex-basis: 100%; }

  /* Bottom bar stacks legal row under tech row */
  .site-footer-bottom {
    padding: 10px 20px;
    font-size: .74rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Cookie banner fills more screen on mobile */
  .cookie-banner {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
  }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   LOGIN BOX (desktop header)
   ─────────────────────────────────────────────────────────────
   Two visual states driven by [data-state] on .login-box:

     logged-out → Round, icon-only button (the "front door"). Just
                  the outline person icon, neutral tones, tooltip
                  explains the action.
     logged-in  → Pill in tenant primary tones — primary-pale
                  background, filled person silhouette in primary
                  colour ("negative" against the lighter pill),
                  user's first name + chevron. Reads as a personal
                  account chip, not a generic CTA.
══════════════════════════════════════════════════════════ */
.login-box {
  position: relative;
  flex-shrink: 0;
}

/* Base button — both states share these props */
.login-box-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0;            /* width owned by per-state rules */
  background: transparent;
  border: 1.5px solid var(--gray-light);
  border-radius: 999px;  /* fully rounded — friendlier silhouette */
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dark);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tr), border-color var(--tr), color var(--tr), padding var(--tr);
  line-height: 1;
}

/* Icon wrapper centres whichever variant is visible */
.login-box-icon-wrap {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.login-box-icon { flex-shrink: 0; }
.login-box-icon--filled  { display: none; }   /* hidden until logged-in   */
.login-box-icon--spinner { display: none; }   /* hidden unless 'checking' */

/* Spinner keyframes — shared between desktop and mobile login spinners. */
@keyframes dexes-login-spin {
  to { transform: rotate(360deg); }
}

.login-box-label {
  /* Visible only in the logged-in state (set per-state below). */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.login-box-chevron {
  color: currentColor;
  opacity: 0.7;
  transition: transform .2s ease;
  flex-shrink: 0;
  display: none;          /* shown when logged-in */
}
.login-box-btn[aria-expanded="true"] .login-box-chevron {
  transform: rotate(180deg);
}

/* ── Logged-out: pure round icon button ─────────────────────── */
.login-box[data-state="logged-out"] .login-box-btn {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.login-box[data-state="logged-out"] .login-box-label {
  /* Keep the label in DOM (i18n + screen-reader fallback) but hide it. */
  position: absolute; left: -9999px;
}
.login-box[data-state="logged-out"] .login-box-btn:hover {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Logged-in: light primary-tinted pill with first name ──── */
.login-box[data-state="logged-in"] .login-box-btn {
  padding: 0 14px 0 4px;
  background: var(--primary-pale);
  border-color: var(--primary-pale);
  color: var(--primary);
  font-weight: 600;
}
.login-box[data-state="logged-in"] .login-box-btn:hover,
.login-box[data-state="logged-in"] .login-box-btn[aria-expanded="true"] {
  background: var(--primary-pale2);
  border-color: var(--primary);
}
.login-box[data-state="logged-in"] .login-box-icon-wrap {
  /* Solid primary disc; the filled icon sits on top in white so it
     reads as a "negative" silhouette. */
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
  width: 28px; height: 28px;
}
.login-box[data-state="logged-in"] .login-box-icon--outline { display: none; }
.login-box[data-state="logged-in"] .login-box-icon--filled  { display: block; }
.login-box[data-state="logged-in"] .login-box-chevron       { display: inline-block; }

/* ── Checking: same silhouette as logged-out (round icon button) but
   the person icon is replaced by a spinning ring. Pointer events are
   disabled so a stray click while the /api/me probe is in flight can't
   start a redundant login flow. ─────────────────────────────────── */
.login-box[data-state="checking"] .login-box-btn {
  width: 36px;
  padding: 0;
  justify-content: center;
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}
.login-box[data-state="checking"] .login-box-label {
  position: absolute; left: -9999px;
}
.login-box[data-state="checking"] .login-box-icon--outline,
.login-box[data-state="checking"] .login-box-icon--filled,
.login-box[data-state="checking"] .login-box-chevron {
  display: none;
}
.login-box[data-state="checking"] .login-box-icon--spinner {
  display: block;
  color: var(--gray);
  transform-origin: 50% 50%;
  animation: dexes-login-spin 0.8s linear infinite;
}
.login-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  z-index: 300;
}
/* When logged in the panel hosts a two-column layout with an
   organisation row on top — give it more room and pull padding off
   the outer wrapper (the children manage their own spacing). */
.login-box[data-state="logged-in"] .login-dropdown-panel {
  min-width: 440px;
  padding: 0;
}
.login-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
}
.login-dropdown-item:hover {
  background: var(--primary-pale);
  color: var(--primary);
  text-decoration: none;
}
.login-dropdown-logout {
  color: var(--gray);
  font-weight: 600;
}

/* ── Organisation row (full width, sits above the two columns) ──
   Shows the organisation the user is signed in for, with a deep-link
   to the member-detail page (#deelnemer/{EORI}). Hidden by JS until
   DEXES_USER carries an EORI. Logout sits right-aligned so the most
   destructive action stays out of the way of the menu items. */
.login-dropdown-org-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--gray-light);
  background: var(--primary-pale);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.login-dropdown-org-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  flex-shrink: 0;
}
/* Right-aligned logout link inside the org row. The auto margin pushes
   it to the far edge regardless of the badge width. */
.login-dropdown-org-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--tr), color var(--tr);
  flex-shrink: 0;
}
.login-dropdown-org-logout:hover,
.login-dropdown-org-logout:focus-visible {
  background: rgba(0,0,0,0.04);
  color: var(--primary);
  text-decoration: none;
}
.login-dropdown-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--white);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  max-width: 100%;
  min-width: 0;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.login-dropdown-org-badge:hover,
.login-dropdown-org-badge:focus-visible {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}
.login-dropdown-org-icon {
  flex-shrink: 0;
}
.login-dropdown-org-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.login-dropdown-org-chevron {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Two-column grid below the organisation row ── */
.login-dropdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 8px 0;
}
.login-dropdown-col + .login-dropdown-col {
  border-left: 1px solid var(--gray-light);
}
.login-dropdown-col-title {
  padding: 6px 16px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Below the mobile-nav breakpoint (768px — see "RESPONSIVE
   BREAKPOINTS" section above) the desktop 440px login-dropdown
   panel is wider than the available header width: anchored to the
   login-box's right edge it extends past the left edge of the
   screen. From 768px down we switch the panel to a full-width
   fixed sheet that sits directly under the 60px-tall header,
   edge-to-edge, so the (already single-column) layout uses the
   whole viewport width. */
@media (max-width: 768px) {
  /* Apply to BOTH states so logged-out users (who currently only
     see this panel when something deep-links them into it) get the
     same well-behaved geometry. */
  .login-dropdown-panel,
  .login-box[data-state="logged-in"] .login-dropdown-panel {
    position: fixed;
    top: 60px;        /* header-inner height — keeps the sheet flush below it */
    left: 0;
    right: 0;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  }
  /* Organisation row keeps its primary-pale band but loses the
     rounded top corners since the sheet is edge-to-edge. */
  .login-dropdown-org-row {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* Phone-portrait: the two-column grid feels cramped under ~560px,
   so stack the columns. Above 560px (e.g. portrait tablets at
   ~768px) the full-width sheet from the rule above still applies
   but the two columns stay side-by-side — there's room. */
@media (max-width: 560px) {
  .login-dropdown-cols {
    grid-template-columns: 1fr;
  }
  .login-dropdown-col + .login-dropdown-col {
    border-left: 0;
    border-top: 1px solid var(--gray-light);
    margin-top: 4px;
    padding-top: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS BOX (desktop header — cog dropdown met taal + thema)
   Volgt hetzelfde dropdown-patroon als .login-box: relative parent,
   absolute panel, [hidden]-toggle via JS. Click-outside en escape worden
   in initSettingsBox() in app.js afgehandeld.
══════════════════════════════════════════════════════════ */
.settings-box {
  position: relative;
  flex-shrink: 0;
}
.settings-box-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  color: var(--dark);
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr);
}
.settings-box-btn:hover,
.settings-box-btn[aria-expanded="true"] {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}
.settings-box-btn[aria-expanded="true"] .settings-box-icon {
  transform: rotate(45deg);   /* subtle spin → maakt de open-staat voelbaar */
}
.settings-box-icon { flex-shrink: 0; transition: transform .25s ease; }

.settings-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px;
  z-index: 300;
}
.settings-section { /* group: title + switcher */ }
.settings-section-title {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* Lang-switcher in settings-dropdown: full-width, gelijk gestreken aan thema-switcher */
.settings-lang-switcher { width: 100%; }
.settings-lang-switcher .lang-btn { flex: 1; padding: 7px 10px; }

/* Theme switcher — visueel identiek aan lang-switcher voor consistentie */
.theme-switcher {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
}
.theme-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
  line-height: 1;
}
.theme-btn:first-child { border-right: 1.5px solid var(--gray-light); }
.theme-btn.active {
  background: var(--primary);
  color: #fff;
}
.theme-btn:not(.active):hover {
  background: var(--primary-pale);
  color: var(--primary);
}

/* Iets meer verticale ruimte tussen taal en thema secties */
.settings-dropdown-panel .nav-dropdown-divider {
  margin: 12px -12px;   /* trekt de divider helemaal door de padding heen */
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LOGIN (inside mobile drawer)
══════════════════════════════════════════════════════════ */
.mobile-nav-toplink {
  display: block;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--tr), color var(--tr);
}
.mobile-nav-toplink:hover {
  background: var(--primary-pale);
  color: var(--primary);
  text-decoration: none;
}
.mobile-nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dark);
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.mobile-nav-login-btn:hover,
#mobileNavLoginSection[data-state="logged-in"] .mobile-nav-login-btn {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}

/* Mobile login button icon swap — same logic as the desktop login-box:
   the person silhouette is the default, the spinner shows while we're
   probing /api/me, and pointer events are disabled in the checking
   state so a tap during the probe can't trigger a redundant login. */
.mobile-nav-login-icon { flex-shrink: 0; }
.mobile-nav-login-icon--spinner { display: none; }
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-btn {
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-icon--person {
  display: none;
}
#mobileNavLoginSection[data-state="checking"] .mobile-nav-login-icon--spinner {
  display: inline-block;
  color: var(--gray);
  transform-origin: 50% 50%;
  animation: dexes-login-spin 0.8s linear infinite;
}
#mobileNavLoginSection[data-state="checking"] #mobileNavLoginLabel {
  /* Same trick as the desktop label — keep it for i18n / screen
     readers but hide it while we don't know the state. */
  position: absolute; left: -9999px;
}
.mobile-nav-login-items {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-logout {
  color: var(--gray);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   MEMBERS (LEDEN) PAGE
───────────────────────────────────────────────────────────── */
.main-wrap--single { grid-template-columns: 1fr; }
.content-area--full { max-width: 100%; }

/* Wrapper around title + subtitle so long names don't squish the status badge */
.card-title-wrap { flex: 1; min-width: 0; }

/* EORI subtitle under card title */
.card-subtitle {
  font-size: .72rem;
  color: var(--gray);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Adherence status badge (top-right) — coloured by status */
.status-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.status-active     { background: var(--green-pale); color: var(--green); }
.status-pending    { background: var(--amber-pale); color: var(--amber); }
.status-revoked,
.status-inactive,
.status-terminated { background: var(--red-pale);   color: var(--red); }
.status-unknown    { background: var(--gray-pale);  color: var(--gray); }

/* Role badges (bottom-left of the card) */
.card-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.role-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--primary-pale);
  color: var(--primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Footer tweak so card-footer looks balanced even without basket btn */
.dataset-card--member .card-footer {
  justify-content: space-between;
}
.dataset-card--member .card-body {
  gap: 12px;
}
.dataset-card--member .card-title {
  font-size: 1.02rem;
}

/* Supplier logo slot on member overview cards.
   The base .dataset-card uses grid-template-columns: 4px 1fr (accent + body).
   When a logo is present we extend the grid with a fixed-width right column
   so the logo never deforms the title/footer area. The logo image is sized
   to "contain" within its slot, so portrait or landscape marks both fit. */
.dataset-card--member-has-logo {
  grid-template-columns: 4px 1fr auto;
}
.member-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px 14px 8px;
  flex-shrink: 0;
}
.member-card-logo img {
  display: block;
  max-width: 96px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Subtle treatment so the logo reads as a brand mark, not a UI control. */
  filter: none;
}
@media (max-width: 640px) {
  .member-card-logo {
    padding: 10px 12px 10px 6px;
  }
  .member-card-logo img {
    max-width: 64px;
    max-height: 40px;
  }
}

/* ── Supplier logo in the "Aanwezigheid in de catalogus" box (detail page).
   Lives in the bottom-right corner of the dashboard card. Capped at roughly
   the size of a stat tile so it never visually outweighs the data tiles. */
.detail-card--member-dashboard {
  position: relative;
}
.member-dashboard-logo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 14px;
  padding-top: 4px;
}
.member-dashboard-logo img {
  display: block;
  /* The stat tile is min 140px wide × ~80–100px tall; cap the logo below
     that so it stays clearly subordinate to the tiles. */
  max-width: 140px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 640px) {
  .member-dashboard-logo img {
    max-width: 110px;
    max-height: 56px;
  }
}

/* ── Member detail: "Technische informatie" card ────────────
   Sits below the description (left column). Reuses the .meta-list
   layout so the row rhythm matches the contact / identifier cards
   on the right. The tags row gets a chip cluster instead of a value
   string so multi-tag participants don't overflow the column. */
.member-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Registrar row under the membership cards ──────────────
   Two-line layout: small grey label + the resolved org name (or raw
   EORI as fallback). On hover/resolved the EORI sits underneath the
   name as a faint mono subtitle so power-users keep their copyable
   identifier. */
.member-registrar-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(26,79,160,.18);
  font-size: .8rem;
  line-height: 1.35;
}
.member-registrar-key {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-mid);
}
.member-registrar-val {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.member-registrar-name {
  color: var(--dark);
  font-weight: 600;
  word-break: break-word;
}
.member-registrar-eori {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: var(--gray-mid);
  word-break: break-all;
  display: none;
}
/* When the EORI was successfully resolved to an org name, also show
   the raw EORI underneath in muted mono so the identifier is still
   traceable. When unresolved we hide the duplicate (the name span
   already contains the raw EORI). */
.member-registrar-row--resolved .member-registrar-eori {
  display: inline;
}

/* Skeleton placeholder row for pending role/status data */
.role-badge.skel,
.status-badge.skel {
  color: transparent;
  background: var(--gray-light);
  animation: skelPulse 1.2s infinite ease-in-out;
  min-width: 70px;
}
.status-badge.skel::before { background: transparent; }
@keyframes skelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ─────────────────────────────────────────────────────────────
   MEMBER (DEELNEMER) DETAIL PAGE
   Mirrors the resource detail-grid layout. Adds:
     - .member-stat-grid: dashboard tiles on the left
     - .dataspace-membership: per-membership rows in the trust-box
   Reuses the existing .detail-card / .detail-card--trust styles
   so visual consistency with the resource detail page is automatic.
───────────────────────────────────────────────────────────── */

/* Hero-row chip cluster shown under the EORI/since meta. The badges sit
   on the dark purple gradient so we use a higher-opacity translucent
   white background to keep them clearly readable. */
.detail-hero-roles {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.detail-hero .detail-hero-roles .role-badge,
.detail-hero-roles .role-badge {
  background: rgba(255,255,255,.92);
  color: var(--primary-dark);
  border: 1px solid rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Member type-badge (LID) — sits in the top-right of the hero. We bump
   specificity above .detail-hero .type-badge so the white-pill rendering
   actually wins. */
.detail-hero .type-badge.type-badge--member,
.type-badge--member {
  background: rgba(255,255,255,.95);
  color: var(--primary-dark);
  border: 1.5px solid rgba(255,255,255,.95);
  font-weight: 700;
}

/* ── Dashboard stat grid (left column) ─────────────────────── */
.member-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.member-stat-grid-sub {
  font-size: .82rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.5;
}
/* The tile uses a per-variant accent colour (set via --tile-accent) for
   both the border and the number. This matches the access-badge palette
   used on dataset cards (.card-accent.access-public/-restricted/-private)
   so the overall language stays consistent across the app. */
.member-stat-tile {
  --tile-accent:      var(--primary);
  --tile-accent-pale: var(--primary-pale);
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border: 1.5px solid var(--tile-accent-pale);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
  position: relative;
  cursor: pointer;
}
.member-stat-tile:hover {
  border-color: var(--tile-accent);
  background: var(--tile-accent-pale);
  box-shadow: 0 6px 16px rgba(20,15,42,.08);
  transform: translateY(-1px);
}
.member-stat-tile:focus-visible {
  outline: 2px solid var(--tile-accent);
  outline-offset: 2px;
}
.member-stat-tile-num {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--tile-accent);
  line-height: 1.1;
}
.member-stat-tile-num strong { font-weight: 700; }
.member-stat-tile-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.member-stat-tile-sub {
  font-size: .72rem;
  color: var(--gray);
}
/* "Open in catalog" affordance — small arrow that appears on hover */
.member-stat-tile::after {
  content: '→';
  position: absolute;
  top: 12px; right: 14px;
  color: var(--gray-mid);
  font-size: 1rem;
  opacity: 0;
  transition: opacity .15s, transform .15s, color .15s;
}
.member-stat-tile:hover::after {
  opacity: 1;
  color: var(--tile-accent);
  transform: translateX(2px);
}
/* Per-variant accent colours — borrowed from the access-badge palette
   (var(--green), var(--amber), var(--red), …) so the dashboard speaks
   the same colour language as the dataset cards. */
.member-stat-tile--resources {
  --tile-accent:      var(--primary);
  --tile-accent-pale: var(--primary-pale);
}
.member-stat-tile--datasets {
  --tile-accent:      var(--green);
  --tile-accent-pale: var(--green-pale);
}
.member-stat-tile--services {
  --tile-accent:      var(--amber);
  --tile-accent-pale: var(--amber-pale);
}
.member-stat-tile--applications {
  --tile-accent:      var(--red);
  --tile-accent-pale: var(--red-pale);
}
.member-stat-tile--commons {
  --tile-accent:      var(--green);
  --tile-accent-pale: var(--green-pale);
}

/* ── Trust-box sections (full-width inside the trust card) ──── */
/* A "section" is a labelled block: small uppercase label, then the
   content (memberships list, rating box, …). Sections stack vertically,
   separated by a soft divider, so everything sits flush under its title
   instead of in a 2-column meta-row layout. */
.detail-card--trust .trust-section,
.detail-card--trust-dmi .trust-section,
.detail-card--trust-warn .trust-section {
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(26,79,160,.12);
}
.detail-card--trust .trust-section + .trust-section,
.detail-card--trust-dmi .trust-section + .trust-section,
.detail-card--trust-warn .trust-section + .trust-section {
  padding-top: 12px;
}
.detail-card--trust .trust-section:last-child,
.detail-card--trust-dmi .trust-section:last-child,
.detail-card--trust-warn .trust-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.trust-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-mid);
  margin-bottom: 8px;
}
/* Inline-variant: gebruikt binnen de bestaande .meta-list van de trust-card
   (boven het eerste bron-statement). Krijgt iets extra top-marge zodat hij
   visueel los staat van de kaart-h2 maar geen border-bottom toevoegt. */
.trust-section-label--inline {
  margin: 0 0 4px;
}

/* ── Trust-card spacing: grouping & rhythm ─────────────────────────────
   Doel: BRON / EIGENAAR / LEVERANCIER lezen elk als één blok. Interne
   spacing per blok is strak (label-naam-badges-rating zitten dicht op
   elkaar); tussen blokken zit duidelijk ademruimte. We zetten de meta-
   list gap op 0 en regelen alle whitespace via top-marges op de
   "blok-starts". Zo voorkomen we dat de gap óók binnen een blok
   doorwerkt (bv. tussen BRON-label en het status-vak eronder). */
.detail-card--trust .meta-list { gap: 0; }

/* Eerste regel binnen een blok krijgt geen top-marge — de blok-starts
   hieronder regelen de afstand naar het vorige blok. */
.detail-card--trust .meta-list > .trust-section-label--inline {
  margin: 0 0 4px;
}
.detail-card--trust .meta-list > .trust-section-label--inline:first-child {
  margin-top: 0;
}
.detail-card--trust .meta-list > .dataset-status-box {
  margin: 0;
}

/* Organisatieblok (EIGENAAR / LEVERANCIER) — eigen padding/border weg,
   spacing via margin-top zodat blok-grens duidelijk leesbaar is. */
.detail-card--trust .meta-list > .meta-row--org {
  padding: 0;
  border-bottom: none;
  margin-top: 14px;
}
.detail-card--trust .meta-list > .meta-row--org:first-child {
  margin-top: 0;
}
/* Tight internal stack: label → naam → badges → rating. */
.detail-card--trust .meta-row--org .meta-key { margin-bottom: 3px; }
.detail-card--trust .meta-row--org .meta-val { margin: 0; }
.detail-card--trust .meta-row--org .trust-member-badges { margin-top: 4px; }
.detail-card--trust .meta-row--org .dmi-rating-box { margin-top: 6px; padding: 0; }

/* Supplier-actions volgt de laatste org-block — zelfde rhythm. De
   .supplier-actions houdt zijn dashed border-top en margin-top als
   visuele scheiding. */
.detail-card--trust .meta-list > .supplier-actions {
  margin-top: 14px;
}
.trust-section-empty {
  font-size: .85rem;
  color: var(--gray);
  font-style: italic;
}

/* ── Dataspace memberships in the trust-box ────────────────── */
.dataspace-membership-list {
  display: flex; flex-direction: column;
  gap: 8px;
  width: 100%;
}
.dataspace-membership {
  padding: 12px 14px;
  border: 1px solid rgba(26,79,160,.14);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(20,15,42,.04);
}
.dataspace-membership-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--primary);
}
.dataspace-membership-head svg { flex-shrink: 0; }
.dataspace-membership-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--dark);
  line-height: 1.25;
}
.dataspace-membership-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  color: var(--gray);
  margin-top: 3px;
  word-break: break-all;
  letter-spacing: .01em;
}
.dataspace-membership-meta {
  display: flex; flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(26,79,160,.14);
  font-size: .78rem;
  color: var(--dark);
}
.dataspace-membership-meta .dsm-line {
  display: flex; align-items: baseline; gap: 6px;
  white-space: normal;
}
.dataspace-membership-meta .dsm-key {
  color: var(--gray);
  font-weight: 600;
  margin-right: 0;
  flex-shrink: 0;
}
/* Inside the warning-flavoured trust-box (no-DMI), tone the membership
   card down slightly so it doesn't compete with the orange accent. */
.detail-card--trust-warn .dataspace-membership {
  background: rgba(255,255,255,.85);
}

/* DMI rating box inside a trust-section — no extra border-bottom (the
   section divider already provides separation) and no horizontal padding
   so it aligns with the membership cards above. */
.detail-card--trust .trust-section .dmi-rating-box,
.detail-card--trust-dmi .trust-section .dmi-rating-box,
.detail-card--trust-warn .trust-section .dmi-rating-box {
  padding: 4px 0 0;
  margin: 0;
  border-bottom: none;
  flex-wrap: wrap;
  row-gap: 6px;
}

@media (max-width: 480px) {
  .member-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PAGE — MOBILE FIT
   Boxes/kaarten op de resource-detailpagina passen op iPhone-
   schermen (≤640px). De doelen:
   - geen horizontaal scrollen op het document
   - elke .detail-card en .policy-box past binnen het venster
   - lange URLs en metadata-waardes breken netjes af
   - distributie-rijen met een eigen policy-paneel stacken verticaal
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Voorkomt dat een enkele lange URL de hele pagina horizontaal duwt */
  html, body { overflow-x: hidden; }

  /* Krappere wrap-padding zodat kaarten zelf meer ruimte krijgen */
  .detail-wrap { padding: 18px 12px 56px; }

  /* Hero compacter, badges + meta wrappen al, maar padding moest kleiner */
  .detail-hero { padding: 20px 18px; border-radius: var(--radius-sm); }
  /* Op mobiel: badges-rij eerst (Overzicht-knop + type/access), titel
     daaronder. Dit voorkomt dat de lange h1 over de zwevende badges
     valt en de badges over de titel komen te staan. */
  .detail-hero-top {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
  }
  .detail-hero-top h1 { flex: none; width: 100%; }
  .detail-hero-top-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  /* Hoofd- en zijkaarten: minder lucht, geen overflow meer */
  .detail-card { padding: 16px 14px; border-radius: var(--radius-sm); }
  .detail-side .detail-card { padding: 14px 14px; }
  .policy-box { padding: 14px 14px; border-radius: var(--radius-sm); }

  /* Meta-rijen: label boven waarde i.p.v. 2 kolommen — past op 380px */
  .meta-row,
  .detail-side .meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 0;
  }
  .meta-key { padding-top: 0; }

  /* Lange links/woorden mogen overal in de detailpagina afbreken */
  .detail-card,
  .policy-box,
  .meta-val,
  .policy-item-val,
  .detail-description { overflow-wrap: anywhere; }

  /* Distributie-rij met eigen policy: stacken in plaats van 75/25 split */
  .dist-card-has-policy { flex-direction: column; }
  .dist-card-has-policy .dist-card-left { padding: 12px 14px; }
  .dist-policy-panel {
    flex: 1 1 auto;
    border-left: none;
    border-top: 1.5px solid rgba(26, 79, 160, 0.22);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  /* Distributie-rij met logo + tekst + actie: laat actie onder tekst vallen */
  .dist-card { flex-wrap: wrap; }
  .dist-action,
  .dist-action-with-label { width: 100%; align-items: stretch; }
  .dist-action-with-label { flex-direction: row; justify-content: space-between; align-items: center; }
  .dist-download-btn { justify-content: center; width: 100%; }

  /* Knoppen-rij in policy-box: knop op volle breedte voor tap-comfort */
  .policy-btn-row { gap: 8px; }
  .policy-access-btn,
  .policy-request-btn { flex: 1 1 auto; justify-content: center; }

  /* Policy-id rij met "Sluit een deal": stack op smal scherm zodat de id
     niet wordt afgekapt en de button zichtbaar blijft. */
  .policy-item-id-row { gap: 8px; }
  .policy-deal-btn { width: 100%; justify-content: center; }

  /* PDC banner is op desktop 70% breed — dat overlapt op mobile */
  .pdc-banner { width: 100%; padding: 16px 16px; }
}

/* ─────────────────────────────────────────────────────────────
   PROFILE PAGE — "Mijn profiel"
   Two info cards side-by-side on desktop, stacking on mobile.
   The actions card spans full width.
   ───────────────────────────────────────────────────────────── */
.profile-content { padding: 24px 0; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.profile-card {
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.profile-card-wide { grid-column: 1 / -1; }

.profile-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--ds-text, #111827);
}
/* Secondary heading inside a profile card — e.g. the iSHARE
   identity sub-section that lives at the bottom of the User card.
   A thin divider + small caps keep it visually distinct from the
   user-name fields above without introducing a whole new card. */
.profile-card-subtitle {
  margin: 20px 0 10px 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-light, #e5e7eb);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray, #6b7280);
}

.profile-fields {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 16px;
  margin: 0;
}
.profile-fields dt {
  color: var(--ds-text-muted, #6b7280);
  font-weight: 500;
  font-size: 0.9rem;
  align-self: center;
}
.profile-fields dd {
  margin: 0;
  word-break: break-word;
  color: var(--ds-text, #111827);
}

.profile-eori,
.profile-sub {
  display: inline-block;
  background: var(--ds-code-bg, #f3f4f6);
  color: var(--ds-text, #111827);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  user-select: all;
}
.profile-sub { font-size: 0.78rem; color: var(--ds-text-muted, #6b7280); }

.profile-actions-intro,
.profile-section-sub {
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.92rem;
  margin: 0 0 16px 0;
}

/* IDP roles list — pill-style chips so a long roles list keeps a
   compact footprint and visually distinguishes role names from
   prose. Empty-state copy lives where the list would. */
.profile-roles-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.profile-role-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--primary-pale, #eef2ff);
  color: var(--primary, #4f46e5);
  border: 1px solid var(--primary-pale, #c7d2fe);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.profile-roles-empty {
  margin: 0;
  color: var(--ds-text-muted, #6b7280);
  font-style: italic;
}
.profile-roles-loading {
  margin: 0;
  color: var(--ds-text-muted, #6b7280);
  font-style: italic;
  font-size: 0.85rem;
}

/* Grouped roles — when js/profile-roles.js renders the IDP roles card
   it organises the chips by parent concept ("Reguliere rollen",
   "Management rollen", …). Each group gets a small caps heading
   above its chip row so the user can tell at a glance which roles
   are operational vs. administrative. */
.profile-roles-slot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-roles-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-roles-group-title {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray, #6b7280);
}
.profile-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-action-stub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ds-stub-bg, #f9fafb);
  border: 1px dashed var(--ds-border, #e5e7eb);
  border-radius: 8px;
  color: var(--ds-text, #111827);
}
.profile-action-label { font-weight: 500; }
.profile-action-coming {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted, #9ca3af);
  background: var(--ds-card-bg, #fff);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-border, #e5e7eb);
}
.profile-action-link {
  flex: 1;
  font-weight: 500;
  color: var(--primary, #5C3FA5);
  text-decoration: none;
}
.profile-action-link:hover { text-decoration: underline; }
.profile-action-arrow {
  color: var(--primary, #5C3FA5);
  font-weight: 600;
  opacity: 0.65;
  transition: transform 120ms ease, opacity 120ms ease;
}
.profile-action-stub:hover .profile-action-arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .profile-card { padding: 18px 20px; }
  .profile-fields {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .profile-fields dt { margin-top: 8px; }
  .profile-action-stub { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────
   "MIJN OVEREENKOMSTEN" PAGE — agreement list
   ───────────────────────────────────────────────────────────── */

/* Full page width: the catalog .main-wrap defaults to max-width
   1280px with a 248px sidebar column; for content-only pages we
   want a single full-width column (no sidebar). The override
   below applies to the lone remaining no-sidebar sub-page
   (Dataspace policies). Without it, that page renders in the
   cramped 248px grid slot the catalog page reserves for its
   filters sidebar.

   NB: every "Mijn marktplaats" page — the five Offers & Contracten
   pages PLUS Mijn profiel — carries .main-wrap--with-marketplace-nav
   so it gets the left-column nav. See the rule directly below. */
#policyTemplatesPage .main-wrap {
  max-width: 1280px;
  grid-template-columns: 1fr;
  padding: 28px 24px 64px;
}

/* "Mijn marktplaats" pages — sticky two-section nav on the LEFT
   (Persoonlijk + Offers & Contracten), content on the right.
   Mirrors the catalog filter sidebar's 248px width and side.
   minmax(0, 1fr) prevents long content (wide tables, EORI URIs)
   from blowing out the grid. The HTML has the content div first
   and the aside last; we use `order: -1` on the sidebar to flip
   the visual order without touching the markup. */
#agreementsPage .main-wrap--with-marketplace-nav,
#myOffersPage .main-wrap--with-marketplace-nav,
#myRequestsPage .main-wrap--with-marketplace-nav,
#delegationsPage .main-wrap--with-marketplace-nav,
#membershipsPage .main-wrap--with-marketplace-nav,
#profilePage .main-wrap--with-marketplace-nav {
  max-width: 1280px;
  grid-template-columns: 248px minmax(0, 1fr);
  padding: 28px 24px 64px;
}
.main-wrap--with-marketplace-nav > .my-marketplace-nav-sidebar {
  order: -1;
}
@media (max-width: 820px) {
  #agreementsPage .main-wrap--with-marketplace-nav,
  #myOffersPage .main-wrap--with-marketplace-nav,
  #myRequestsPage .main-wrap--with-marketplace-nav,
  #delegationsPage .main-wrap--with-marketplace-nav,
  #membershipsPage .main-wrap--with-marketplace-nav,
  #profilePage .main-wrap--with-marketplace-nav {
    grid-template-columns: 1fr;
  }
  /* On mobile the columns collapse into a stack. Reset the order so
     the main content lands above the nav — users navigate TO a page
     to see its content first, and the cross-nav is supplementary. */
  .main-wrap--with-marketplace-nav > .my-marketplace-nav-sidebar {
    order: 0;
  }
}

/* My-marketplace nav sidebar — sticky on desktop like the catalog
   filter sidebar, falls back to static stacking under the content
   on narrow viewports (handled by .main-wrap mobile breakpoint at
   the top of this file, which forces .sidebar { position: static }). */
.my-marketplace-nav-sidebar {
  /* .sidebar base class already provides position:sticky, top:72px,
     display:flex column gap:14px. Nothing extra to do here for the
     desktop layout. */
}
/* Organisation badge — rendered inside the .hero on every "Mijn
   marktplaats" page (the five Offers & Contracten pages plus
   Mijn profiel). Anchored bottom-left so the page hero stays a
   clean title/subtitle block with the org context tucked in the
   corner — visible on every viewport, no layout shift when the
   sidebar collapses on mobile.

   Hidden until applyState() in app.js confirms DEXES_USER has both
   a companyName and an EORI (it removes [hidden] from .dexes-org-row). */
.my-marketplace-org-bar[hidden] {
  display: none;
}
.my-marketplace-org-bar-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color var(--tr), text-decoration-color var(--tr);
}
.my-marketplace-org-bar-link:hover,
.my-marketplace-org-bar-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

/* Inside the hero: absolute-position the bar in the bottom-left
   corner, override the standalone inner-wrap so it sits flush, and
   suppress the redundant "Organisatieprofiel" text link — the
   badge itself already deep-links to the member-detail page. */
.hero .my-marketplace-org-bar {
  position: absolute;
  bottom: 12px;
  left: 16px;
  z-index: 2;
  margin: 0;
}
.hero .my-marketplace-org-bar-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}
.hero .my-marketplace-org-bar-link {
  display: none;
}

@media (max-width: 560px) {
  /* Tighter inset on phones so the badge clears the hero edges
     without crowding the title row above it. */
  .hero .my-marketplace-org-bar {
    bottom: 10px;
    left: 12px;
    max-width: calc(100% - 24px);
  }
}
.my-marketplace-nav-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0 8px;
}
/* Second+ section heading inside the sidebar gets a thin top
   divider + a bit of breathing room so the two sections
   (Persoonlijk / Offers & Contracten) read as separate groups
   instead of a continuous list. */
.my-marketplace-nav-title--secondary {
  margin-top: 4px;
  border-top: 1px solid var(--gray-light);
}
.my-marketplace-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--dark);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.my-marketplace-nav-link:hover,
.my-marketplace-nav-link:focus-visible {
  background: var(--primary-pale);
  color: var(--primary);
  text-decoration: none;
  outline: none;
}
.my-marketplace-nav-link.is-active,
.my-marketplace-nav-link[aria-current="page"] {
  background: var(--primary-pale);
  color: var(--primary);
  font-weight: 700;
  border-left-color: var(--primary);
}

/* Resource chips inside the delegations table cell */
.delegations-resources-cell { line-height: 1.6; }
.delegations-resource-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  background: var(--ds-table-head, #f9fafb);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ds-text, #111827);
}
.delegations-resource-more {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--ds-text-muted, #6b7280);
  margin-left: 2px;
}
.memberships-orgname {
  color: var(--ds-text-muted, #6b7280);
  font-style: italic;
}

/* Loading-progress hint shown while we fan out across N issuers. */
.delegations-progress {
  margin-left: 8px;
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.82rem;
  font-style: italic;
}

/* Empty-state diagnostic block — only shows after fan-out completes
   without finding any Permits. Helps the user understand what the
   page just queried so the empty result feels intentional. */
.delegations-empty {
  text-align: left;
  padding: 24px 28px;
}
.delegations-empty-title {
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ds-text, #111827);
}
.delegations-empty-stats {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 0.92rem;
  color: var(--ds-text-muted, #6b7280);
}
.delegations-empty-stats strong {
  color: var(--ds-text, #111827);
  font-weight: 600;
}
.delegations-empty-hint {
  margin: 0;
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.9rem;
}

/* Explorer form — ad-hoc single delegationRequest builder. */
.delegations-explorer {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
}
.delegations-explorer-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
}
.delegations-explorer-sub {
  margin: 0 0 14px;
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.9rem;
}
.delegations-explorer-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.delegations-explorer-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ds-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.delegations-explorer-form input {
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  border: 1px solid var(--ds-border, #d1d5db);
  border-radius: 6px;
  background: #fff;
  text-transform: none;
}
.delegations-explorer-form button {
  padding: 9px 14px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--primary, #5C3FA5);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.delegations-explorer-form button:hover {
  background: var(--primary-dark, #3D2875);
}
.delegations-explorer-output {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────
   Mijn delegaties — query-builder UI (rebuild #3)
   ───────────────────────────────────────────────────────────── */
.del-connection-bar {
  margin-bottom: 14px;
  font-size: 0.88rem;
}
.del-conn-ok       { color: #059669; font-weight: 600; }
.del-conn-err      { color: #dc2626; font-weight: 600; }
.del-conn-checking { color: var(--ds-text-muted, #6b7280); font-style: italic; }

.del-querybuilder {
  margin-bottom: 16px;
  padding: 18px 20px;
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
}
.del-qb-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.del-qb-sub   { margin: 0 0 14px; color: var(--ds-text-muted, #6b7280); font-size: 0.9rem; }
.del-qb-form {
  display: grid; gap: 14px 20px;
  grid-template-columns: minmax(260px, 1.5fr) auto auto;
  align-items: end;
}
.del-qb-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ds-text-muted, #6b7280);
}
.del-qb-field select {
  padding: 9px 12px;
  font: inherit; font-size: 0.92rem;
  text-transform: none; letter-spacing: 0;
  font-weight: 400;
  color: var(--ds-text, #111827);
  border: 1px solid var(--ds-border, #d1d5db);
  border-radius: 6px;
  background: #fff;
}
.del-qb-direction {
  display: flex; flex-direction: column; gap: 4px;
  border: 0; padding: 0; margin: 0;
  font-size: 0.78rem;
}
.del-qb-direction legend {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ds-text-muted, #6b7280);
  padding: 0; margin-bottom: 4px;
}
.del-qb-direction label {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 12px;
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ds-text, #111827);
}
.del-qb-submit {
  padding: 10px 18px;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  background: var(--primary, #5C3FA5); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer;
  height: 40px;
}
.del-qb-submit:hover  { background: var(--primary-dark, #3D2875); }
.del-qb-submit:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 720px) {
  .del-qb-form { grid-template-columns: 1fr; }
}

.del-results-summary {
  margin: 16px 0 8px;
  font-size: 0.92rem;
  color: var(--ds-text-muted, #6b7280);
}
.del-results-summary strong { color: var(--ds-text, #111827); }
.del-results-pending {
  padding: 24px;
  font-style: italic;
  color: var(--ds-text-muted, #6b7280);
}

/* Effect badges (Permit / Deny) — single column on the policy row */
.del-effect-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  margin-right: 4px;
}
.del-effect-permit {
  background: #d1fae5; color: #065f46;
  border: 1px solid #6ee7b7;
}
.del-effect-deny {
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fca5a5;
}
.del-effect-other {
  background: #f3f4f6; color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* "Subject / Issuer / Both" role chips on the row */
.del-role-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.del-role-subject {
  background: var(--primary-pale, #ede8f9);
  color: var(--primary, #5C3FA5);
}
.del-role-issuer {
  background: #fef3c7;
  color: #92400e;
}

.del-ar-link {
  margin-left: 6px;
  text-decoration: none;
  color: var(--primary, #5C3FA5);
  font-weight: 700;
}
.del-ar-link:hover { text-decoration: underline; }

/* Collapsed legacy explorer: show as a <details> drawer so it stays
   out of the way unless the user opens it. */
.delegations-explorer summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ds-text, #111827);
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────
   Beschikbare policies (policy templates) — card list
   ───────────────────────────────────────────────────────────── */
.pt-card-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.pt-card {
  padding: 16px 18px;
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
}
.pt-card-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.pt-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ds-text, #111827);
}
.pt-card-desc {
  margin: 0 0 12px;
  color: var(--ds-text-muted, #4b5563);
  font-size: 0.92rem;
  line-height: 1.5;
}
.pt-card-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.pt-card-foot-left { flex: 1 1 auto; min-width: 0; }
.pt-card-foot-right {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}
.pt-authority {
  font-size: 0.86rem;
  color: var(--ds-text, #111827);
}
.pt-authority-key {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.7rem; font-weight: 600;
  color: var(--ds-text-muted, #6b7280);
}

/* Badges — required-facts (cool) and validation actions (warm) */
.pt-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pt-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.pt-badge-fact {
  background: var(--primary-pale, #ede8f9);
  color: var(--primary, #5C3FA5);
  border: 1px solid var(--primary-pale, #c7d2fe);
}
.pt-badge-action {
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
}

/* Debug hint shown on a card when our field-probe didn't match
   any of the candidate names — the user can read the available
   top-level keys and tell us the right one. */
.pt-card-debug {
  margin: 4px 0 12px;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #b45309;
  background: #fffbeb;
  border: 1px dashed #fcd34d;
  border-radius: 6px;
}
.pt-card-debug code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: #92400e;
}

/* Type-breakdown — clickable chips showing all resource_types found
   in the AR response. The chosen filter is highlighted; the user
   can switch with one click without re-querying. */
.del-type-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  padding: 12px 14px;
  background: var(--ds-table-head, #f9fafb);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
}
.del-type-breakdown-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #6b7280);
}
.del-type-breakdown-json {
  margin-left: auto;
}
.del-type-chip {
  display: inline-block;
  padding: 4px 12px;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--ds-text, #111827);
  background: #fff;
  border: 1px solid var(--ds-border, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.del-type-chip:hover {
  border-color: var(--primary, #5C3FA5);
  color: var(--primary, #5C3FA5);
}
.del-type-chip.is-active {
  background: var(--primary, #5C3FA5);
  border-color: var(--primary, #5C3FA5);
  color: #fff;
}

.agreements-content { padding: 0; }

.agreements-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
}
.agreements-control {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 140px;
}
.agreements-control > span {
  font-size: 0.78rem; color: var(--ds-text-muted, #6b7280);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.agreements-control > select {
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--ds-border, #d1d5db);
  border-radius: 6px;
  background: #fff;
  font-size: 0.92rem;
  cursor: pointer;
}
.agreements-control > select:focus { outline: 2px solid var(--primary, #4f46e5); outline-offset: 1px; }

/* Active "filter on partner EORI" pill — only present when the page
   was opened with a #overeenkomsten?partner=… deep-link or #mijn-
   delegaties?partner=… deep-link from the agreement-box. Sits inline
   with the other controls; "×" button clears the filter. */
.agreements-active-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--green-pale, #ecfdf5);
  border: 1px solid rgba(5, 150, 105, 0.30);
  border-radius: 999px;
  font-size: 0.85rem; color: var(--ds-text, #111827);
  align-self: flex-end;
}
.agreements-active-filter-label {
  font-weight: 600; color: var(--ds-text-muted, #6b7280);
  text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em;
}
.agreements-active-filter-val {
  font-weight: 600;
}
.agreements-active-filter-clear {
  border: none; background: rgba(5, 150, 105, 0.10);
  color: var(--green, #059669);
  width: 22px; height: 22px;
  border-radius: 999px;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.agreements-active-filter-clear:hover {
  background: rgba(5, 150, 105, 0.18);
}

.agreements-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ds-text-muted, #6b7280);
  background: var(--ds-card-bg, #fff);
  border: 1px dashed var(--ds-border, #e5e7eb);
  border-radius: 12px;
}

.agreements-table-wrap {
  overflow-x: auto;
  background: var(--ds-card-bg, #fff);
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 12px;
}
.agreements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.agreements-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: var(--ds-table-head, #f9fafb);
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
  font-weight: 600;
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agreements-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--ds-border-light, #f3f4f6);
  vertical-align: top;
}
.agreements-table tbody tr:last-child td { border-bottom: none; }
.agreements-title { font-weight: 600; color: var(--ds-text, #111827); }

.agreements-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--gray-pale, #f3f4f6);
  color: var(--gray, #6b7280);
}
.agreements-status-approved  { background: var(--green-pale,  #d1fae5); color: var(--green,  #059669); }
.agreements-status-waiting   { background: var(--amber-pale,  #fef3c7); color: var(--amber,  #d97706); }
.agreements-status-rejected  { background: var(--red-pale,    #fee2e2); color: var(--red,    #dc2626); }
.agreements-status-withdrawn { background: var(--gray-pale,   #f3f4f6); color: var(--gray,   #6b7280); }

/* Target column — title links to the catalog resource if Meili
   could resolve it; un-resolvable targets (raw URLs, distribution
   ids) just show the raw value, slightly muted. */
.agreements-target-link {
  color: var(--primary, #4f46e5);
  text-decoration: none;
  font-weight: 500;
}
.agreements-target-link:hover { text-decoration: underline; }
.agreements-target-raw {
  color: var(--ds-text-muted, #6b7280);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86rem;
  word-break: break-all;
}

@media (max-width: 720px) {
  .agreements-controls { padding: 12px 14px; gap: 12px; }
  .agreements-control { min-width: 120px; flex: 1 1 auto; }
  .agreements-table { font-size: 0.88rem; }
  .agreements-table thead th,
  .agreements-table tbody td { padding: 10px; }
}

/* ─────────────────────────────────────────────────────────────
   AGREEMENT-BOX modifier on the resource detail page
   When the logged-in org has an active agreement for a resource,
   js/agreement-check.js swaps the policy-box content and adds
   the .policy-box--agreement class. We ride on the existing
   policy-box styling and just tweak the subtle accents.
   ───────────────────────────────────────────────────────────── */
.policy-box--agreement {
  /* Optional accent — keeps the same shape but signals "active". */
  border-color: var(--green, #059669);
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.12);
}
/* Agreement-item: stretches to fill the full width between the two
   subtle separator lines that surround the policy-items in the box.
   We negate the policy-item's vertical 0-padding by adding our own
   block padding, and pull the item flush to the policy-box's inner
   horizontal padding so the green panel reads as a clear, contained
   "you have an agreement" tile.
   ─ The negative side-margins must match .policy-box's horizontal
     padding (18px on desktop, 14px on mobile — see media query). */
.policy-item--agreement {
  background: var(--green-pale, #ecfdf5);
  border: 1px solid rgba(5, 150, 105, 0.20);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  margin: 8px 0;
}
/* Drop the trailing border-bottom that policy-item normally draws,
   so the green tile reads as a single contained surface. */
.policy-item--agreement,
.policy-item--agreement:last-child {
  border-bottom: 1px solid rgba(5, 150, 105, 0.20);
}
.policy-item-id-val--agreement {
  font-weight: 600;
  color: var(--ds-text, #111827);
}
/* Small action link underneath the agreement title — links the user
   through to "Mijn Overeenkomsten" / delegations filtered by the
   creator's EORI. */
.policy-supplier-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 600; color: #1A4FA0;
  text-decoration: none;
  margin-top: 6px;
}
.policy-supplier-link:hover { text-decoration: underline; }
.policy-supplier-link svg { flex-shrink: 0; }

/* Trust-card footer — pair of deep-links into "Mijn Overeenkomsten"
   and "Mijn delegaties", both pre-filtered by the resource's
   dc.creator EORI. Sits beneath the Owner/Provider rows. */
.supplier-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--gray-light, #E5E7EB);
}
.supplier-actions-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--purple, #6E59E0);
  text-decoration: none;
}
.supplier-actions-link:hover { text-decoration: underline; }
.supplier-actions-link svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   MY OFFERS (Mijn aanbiedingen) — see js/my-offers.js
   Cards reuse .dataset-card scaffolding from search results;
   we add an inline "Offer" row beneath the card body to display
   the resolved offer-policy title for resources that have one.
   ───────────────────────────────────────────────────────────── */

.my-offers-list { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }

.my-offers-card { cursor: pointer; }

.my-offers-offer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--ds-table-head, #f9fafb);
  border: 1px dashed var(--ds-border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ds-text, #111827);
}
.my-offers-offer-empty {
  color: var(--ds-text-muted, #6b7280);
  font-style: italic;
  font-size: 0.86rem;
}
.my-offers-offer-loading {
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.86rem;
}
.my-offers-offer-pill {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 999px;
  font-size: 0.82rem;
}
.my-offers-offer-key {
  color: var(--ds-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 600;
}
.my-offers-offer-title {
  color: var(--ds-text, #111827);
  font-weight: 600;
}

.agreements-control--summary {
  flex-direction: row !important;
  align-items: baseline;
  gap: 6px !important;
  min-width: 0 !important;
}
.agreements-control--summary > strong { font-size: 1.1rem; color: var(--ds-text, #111827); }
.agreements-control--summary > span   { color: var(--ds-text-muted, #6b7280); font-size: 0.92rem; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }

/* ─────────────────────────────────────────────────────────────
   JSON VIEWER MODAL  — see js/json-viewer.js
   Lightweight overlay that pretty-prints a single record's API
   JSON. Used by the agreements / requests / offers / policy-
   templates pages via small inline icon buttons.
   ───────────────────────────────────────────────────────────── */
body.jvw-open { overflow: hidden; }

.jvw-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 35, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
  padding: 24px;
}
.jvw-backdrop[hidden] { display: none; }

.jvw-modal {
  width: 100%;
  max-width: 880px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}

.jvw-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-table-head, #f9fafb);
}
.jvw-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ds-text, #111827);
  flex: 1 1 auto;
  word-break: break-all;
}
.jvw-actions { display: flex; gap: 8px; align-items: center; }
.jvw-btn {
  padding: 6px 12px;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  border: 1px solid var(--ds-border, #d1d5db);
  background: #fff;
  color: var(--ds-text, #111827);
  border-radius: 6px;
  cursor: pointer;
}
.jvw-btn:hover { background: var(--primary-pale, #eef2ff); border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.jvw-btn:disabled { opacity: 0.6; cursor: default; }
.jvw-btn-icon { padding: 4px; line-height: 0; }

.jvw-body {
  margin: 0;
  padding: 18px 20px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ds-text, #111827);
  white-space: pre;
  background: #fff;
}

/* Inline `<json>` tag — small monospace badge that opens the raw-API
   modal. We deliberately render the angle brackets as part of the
   label so designers immediately see "view source" semantics. The
   button is borderless; only on hover do we hint at interaction. */
.jvw-icon-btn {
  display: inline-block;
  padding: 0 2px;
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ds-text-muted, #6b7280);
  background: transparent;
  border: 0;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}
.jvw-icon-btn:hover {
  color: var(--primary, #4f46e5);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.jvw-icon-btn:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Cell wrapper for the action column in our list tables */
.jvw-cell { text-align: right; white-space: nowrap; }
.jvw-th   { width: 1%; }

@media (max-width: 720px) {
  .jvw-modal { max-height: 90vh; }
  .jvw-body { font-size: 0.78rem; padding: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   OFFER DETAIL MODAL  — see js/offer-modal.js
   Modal-shell + 5 sections (provider, resource, offer basics,
   condities, footer). Re-uses .pub-offer-* / .basket-card-* for
   visual parity with the "Offer toevoegen" form and the basket.
   ───────────────────────────────────────────────────────────── */
body.offer-modal-open { overflow: hidden; }

.offer-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 35, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 1100;
  padding: 24px;
  overflow-y: auto;
}
.offer-modal-backdrop[hidden] { display: none; }

.offer-modal-window {
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  margin: auto;
}

.offer-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-border, #e5e7eb);
  background: var(--ds-table-head, #f9fafb);
  flex: 0 0 auto;
}
.offer-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ds-text, #111827);
  flex: 1 1 auto;
}
.offer-modal-close-btn {
  background: transparent;
  border: 0;
  color: var(--ds-text-muted, #6b7280);
  padding: 6px;
  line-height: 0;
  border-radius: 6px;
  cursor: pointer;
}
.offer-modal-close-btn:hover { background: var(--gray-light, #f1f1f5); color: var(--ds-text, #111827); }

.offer-modal-body {
  padding: 18px 20px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Loading / error states */
.offer-modal-loading,
.offer-modal-error {
  display: flex; align-items: center; gap: 10px;
  padding: 32px 8px;
  color: var(--ds-text-muted, #6b7280);
  font-size: 0.95rem;
}
.offer-modal-error { color: #b91c1c; }
.offer-modal-error svg { flex-shrink: 0; }

/* Section scaffolding */
.offer-modal-section {
  margin-bottom: 18px;
}
.offer-modal-section-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted, #6b7280);
  display: flex; align-items: center; gap: 8px;
}

/* ── Section 1: provider card ── */
.offer-modal-provider-card {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.offer-modal-provider-main { flex: 1 1 auto; min-width: 0; }
.offer-modal-provider-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ds-text, #111827);
  margin-bottom: 4px;
  word-break: break-word;
}
.offer-modal-provider-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.offer-modal-provider-actions { flex: 0 0 auto; }
.offer-modal-provider-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--primary, #4f46e5);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--primary-pale, #eef2ff);
  border-radius: 6px;
  background: var(--primary-pale, #eef2ff);
}
.offer-modal-provider-link:hover {
  background: #fff;
  border-color: var(--primary, #4f46e5);
}

/* ── Section 2: resource badge (re-uses .basket-card) ── */
.offer-modal-resource-card {
  cursor: default !important;
  /* prevent the basket-card's hover translate */
  transform: none !important;
  /* keep the card flush inside the modal window — basket-card itself
     has no max-width so a long resource title would otherwise force
     the card past the modal's right edge. */
  max-width: 100%;
  overflow: hidden;
}
.offer-modal-resource-card:hover { box-shadow: none !important; }
/* Allow long resource titles to wrap inside the offer modal — the
   default .basket-card-title uses nowrap + ellipsis (designed for the
   basket sidebar) which doesn't fit a wider modal where users want to
   read the full title. */
.offer-modal-resource-card .basket-card-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.offer-modal-resource-card .basket-card-body {
  /* don't centre vertically when the title wraps to multiple lines */
  align-items: flex-start;
}
.offer-modal-resource-card .basket-card-info { min-width: 0; }
.offer-modal-resource-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--ds-text-muted, #6b7280);
}

/* ── Section 3: offer basics ── */
.offer-modal-basics {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.offer-modal-basics-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
}
.offer-modal-basics-row dt {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ds-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.offer-modal-basics-row dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ds-text, #111827);
  word-break: break-word;
}
.offer-modal-basics-label { font-weight: 600; }
/* "Doel aanbieding" pill — soft tenant-pale pill rendered as the
   default purpose-of-offer value at the top of the basics block. */
.offer-modal-basics-purpose-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-pale, #eef2ff);
  color: var(--primary, #4f46e5);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}
.offer-modal-basics-dossier {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.offer-modal-basics-dossier code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  background: var(--gray-light, #f3f4f6);
  padding: 3px 8px;
  border-radius: 5px;
}
.offer-modal-basics-created {
  font-size: 0.85rem;
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}

.offer-modal-muted { color: var(--ds-text-muted, #6b7280); font-style: italic; font-size: 0.88rem; }

.offer-modal-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.offer-modal-status-approved { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* ── Sections 4+5: flat condition lists, no sub-section bars ── */
/* The old bordered .offer-modal-constraints-box with .offer-modal-
   subsection sub-heads (purple bars) is gone. Each section now renders
   a plain <ul> with condition rows directly under the section title.   */
.offer-modal-no-items { margin: 4px 0; }

/* Heading-style row inside a condition list — used for the policy_
   templates[] entry that anchors the params below it. No icon column,
   no green check, tenant-color bold title. */
.offer-modal-condition-heading {
  background: var(--primary-pale, #eef2ff);
  border-color: var(--primary-pale, #d1d5fa);
  padding-left: 14px;
}
.offer-modal-condition-heading-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--primary, #4f46e5);
}
/* Audience row: closing item with a radio bullet — visually distinct
   so users see it as a selection, not a checkbox. */
.offer-modal-condition-audience {
  background: var(--primary-pale, #eef2ff);
  border-color: var(--primary-pale, #d1d5fa);
}
.offer-modal-condition-empty {
  background: transparent;
  border-color: transparent;
}

.offer-modal-condition-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.offer-modal-condition {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}
.offer-modal-condition.is-active {
  border-color: var(--primary-pale, #d1d5fa);
  background: #fff;
}
.offer-modal-condition-icon {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary, #4f46e5);
}
.offer-modal-condition-icon img {
  max-width: 22px; max-height: 22px; object-fit: contain;
}
.offer-modal-condition-icon-tick {
  color: #047857;
  background: #ecfdf5;
  border-radius: 50%;
}
.offer-modal-condition-radio {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 4px solid var(--primary, #4f46e5);
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.offer-modal-condition-label {
  flex: 1 1 auto;
  font-size: 0.92rem;
  color: var(--ds-text, #111827);
  display: flex; flex-direction: column; gap: 2px;
}
.offer-modal-condition-label strong { font-weight: 600; }
.offer-modal-condition-desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ds-text-muted, #6b7280);
}
.offer-modal-condition-tag {
  /* inline-block + nowrap so the pill keeps its shape even when the
     row's label column squeezes the available width — without these
     the multi-word "Uw organisatie voldoet" badge wraps mid-pill. */
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary, #4f46e5);
  background: var(--primary-pale, #eef2ff);
  padding: 3px 9px;
  border-radius: 999px;
}
/* "Nee"/"No" — muted variant so off-conditions don't visually compete
   with active ones. */
.offer-modal-condition-tag-off {
  color: var(--ds-text-muted, #6b7280);
  background: var(--gray-light, #f3f4f6);
}
/* Numeric / monetary value display inside a condition row. */
.offer-modal-condition-value {
  display: inline-flex; align-items: center;
  flex: 0 0 auto;
  font-size: 0.88rem;
  color: var(--ds-text, #111827);
}
.offer-modal-condition-num {
  font-weight: 600;
  color: var(--ds-text, #111827);
}

/* Negotiation-intro paragraph that sits between the condities-box
   and the action footer. */
.offer-modal-negotiation-intro {
  margin: 14px 0 4px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ds-text, #111827);
  background: var(--primary-pale, #eef2ff);
  border: 1px solid var(--primary-pale, #d1d5fa);
  border-radius: 8px;
}
.offer-modal-condition-premium {
  display: inline-flex; align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── Footer ── */
.offer-modal-footer {
  position: sticky;
  bottom: 0;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--ds-border, #e5e7eb);
  background: #fff;
}
.offer-modal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.offer-modal-btn-secondary {
  background: #fff;
  color: var(--ds-text, #111827);
  border-color: var(--ds-border, #d1d5db);
}
.offer-modal-btn-secondary:hover {
  background: var(--gray-light, #f3f4f6);
}
.offer-modal-btn-primary {
  background: var(--primary, #4f46e5);
  color: #fff;
  border-color: var(--primary, #4f46e5);
}
.offer-modal-btn-primary:hover {
  filter: brightness(1.08);
}
/* Disabled state — used when the visitor isn't logged in. Matches the
   .policy-deal-btn--disabled pattern so the modal CTA and the resource-
   detail "Sluit een deal" button look the same when blocked. */
.offer-modal-btn-primary--disabled,
.offer-modal-btn-primary:disabled {
  background: var(--gray-light, #e5e7eb);
  border-color: var(--gray-light, #e5e7eb);
  color: var(--gray-mid, #9ca3af);
  cursor: not-allowed;
  filter: none;
}
.offer-modal-btn-primary--disabled:hover,
.offer-modal-btn-primary:disabled:hover {
  background: var(--gray-light, #e5e7eb);
  filter: none;
}

/* Light-blue login warning — shown above the negotiation intro for
   anonymous visitors. Visual style mirrors .policy-login-prompt on the
   resource detail page so the cue feels familiar. */
.offer-modal-login-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #DAE9FC;
  border: 1px dashed rgba(26, 79, 160, 0.45);
  border-radius: var(--radius-sm, 6px);
  color: #1A4FA0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.offer-modal-login-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #1A4FA0;
}

/* Membership-compliance badge in the Standaard-voorwaarden block —
   green pill so users immediately see "yes, you're good to go". */
.offer-modal-condition-tag-compliance {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
/* DMI governance check badge — orange pill signalling that governance
   actively verifies whether the consumer's organisation complies. */
.offer-modal-condition-tag-governance {
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

/* Authority label appended after the condition title — small muted
   pill that reads like a caption next to the bold heading. */
.offer-modal-condition-heading-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.offer-modal-condition-authority {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted, #6b7280);
  background: rgba(79, 70, 229, 0.08);
  padding: 2px 7px;
  border-radius: 999px;
}

/* "CHECK:" block — surfaces required_facts metadata under the policy
   heading so users see which facts will be validated during a
   negotiation. */
.offer-modal-condition-check {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--primary-pale, #d1d5fa);
  border-radius: 6px;
  align-items: flex-start;
}
.offer-modal-condition-check-tag {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary, #4f46e5);
  padding-top: 1px;
}
.offer-modal-condition-check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.offer-modal-condition-check-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offer-modal-condition-check-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ds-text, #111827);
}
.offer-modal-condition-check-desc {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ds-text-muted, #6b7280);
  line-height: 1.45;
}

/* "Bekijk Offer" link inside my-offers pill */
.my-offers-view-offer {
  margin-left: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--primary, #4f46e5);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
}
.my-offers-view-offer:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .offer-modal-window { max-height: 96vh; }
  .offer-modal-body { padding: 14px 14px 0; }
  .offer-modal-basics-row { grid-template-columns: 1fr; gap: 2px; }
  .offer-modal-provider-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .offer-modal-provider-actions { align-self: flex-end; }
}