/* Referentiearchitectuur (/referentiearchitectuur): ref/Civios Landschapskaart.html as it is, in the Civios palette.
   Its rules are scoped to .referentiearchitectuur, and its tokens live there instead of on :root, where they would
   override the app's own --accent and --muted. Only the colours differ from the reference; the dark theme
   is left out, as the app has none. */
.referentiearchitectuur{
  --bg:#fafaf9; --surface:#ffffff; --fg:#2e3330; --muted:#4a544f; --line:#dde6df;
  --accent:#1b4d4a; --accent-soft:rgba(27,77,74,.5); --halo:rgba(255,222,89,.8); --accent-ink:#ffffff;
  --band:#edf2ee; --panel:#ffffff; --panel-line:#e5ebe7;
  --front:#dde6df; --front-line:#b2c3b8; --mid:#fff3c2; --mid-line:#ffde59; --back:#e5ebe7; --back-line:#b2c3b8;
  --g:#edf2ee; --g-line:#b2c3b8; --g-ink:#16403d;
  --b:#cfe3e1; --b-line:#a8cdc9; --b-ink:#16403d;
  --x:#fafaf9; --x-line:#e5ebe7; --x-ink:#4a544f;
  --tip:#16403d; --tip-ink:#ffffff; --tip-muted:#b2c3b8; --tip-accent:#ffde59; --tip-accent-ink:#16403d; --gold:#ffde59;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, sans-serif;
}

/* The reference sizes its boxes content-box; the app's resets make everything border-box. */
.referentiearchitectuur,.referentiearchitectuur *{box-sizing:content-box}
.referentiearchitectuur{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45}
/* The app gives headings its own colour, line height and letter spacing; here they follow the reference. */
.referentiearchitectuur :is(h1,h2,h3){color:inherit;line-height:inherit;letter-spacing:normal}
.referentiearchitectuur .wrap{padding-inline:clamp(16px,3vw,32px);padding-block:28px 40px;max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

.referentiearchitectuur header{display:flex;flex-direction:column;gap:14px}
.referentiearchitectuur .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.referentiearchitectuur h1{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3.2vw,34px);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--accent)}
.referentiearchitectuur h1 em{font-style:normal;text-decoration:underline 4px var(--gold);text-underline-offset:6px}
.referentiearchitectuur .lede{margin:0;max-width:68ch;color:var(--muted)}

.referentiearchitectuur .controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.referentiearchitectuur .chips{display:flex;flex-wrap:wrap;gap:8px}
.referentiearchitectuur .chip{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:6px 12px 6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background .15s,box-shadow .15s}
.referentiearchitectuur .chip .n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.referentiearchitectuur .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--halo)}
.referentiearchitectuur .chip:hover{border-color:var(--accent-soft)}
.referentiearchitectuur .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.referentiearchitectuur .chip[aria-pressed="true"] .n{color:var(--accent-ink);opacity:.8}
.referentiearchitectuur .chip[aria-pressed="true"] .dot{background:var(--accent-ink)}
.referentiearchitectuur .chip:focus-visible,.referentiearchitectuur .blk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.referentiearchitectuur .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted);align-items:center}
.referentiearchitectuur .legend span{display:inline-flex;align-items:center;gap:6px}
.referentiearchitectuur .sw{width:22px;height:12px;border-radius:3px;border:1px solid var(--b-line);background:var(--b)}
.referentiearchitectuur .sw.k{box-shadow:0 0 0 2px var(--accent),0 0 8px var(--halo)}
.referentiearchitectuur .sw.c{box-shadow:0 0 0 1.5px var(--accent-soft),0 0 6px var(--halo)}

/* ---------- kaart ---------- */
.referentiearchitectuur .scroller{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);-webkit-overflow-scrolling:touch}
.referentiearchitectuur .map{min-width:1240px;padding:10px;display:grid;gap:8px;font-size:10.5px}
.referentiearchitectuur .zone{border:1px solid var(--line);border-radius:4px;padding:4px 6px 6px;display:flex;flex-direction:column;gap:6px}
.referentiearchitectuur .zone>.zt{text-align:center;font-size:11px;padding:2px 0;color:var(--fg)}
.referentiearchitectuur .band{background:var(--band);border-color:var(--panel-line)}
.referentiearchitectuur .panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:3px;padding:6px;display:flex;flex-direction:column;gap:6px}
.referentiearchitectuur .panel>.pt{text-align:center;font-size:10.5px;color:var(--fg)}
.referentiearchitectuur .grid{display:grid;gap:5px;grid-template-columns:repeat(var(--c,1),minmax(0,1fr))}
.referentiearchitectuur .row{display:grid;gap:6px}
.referentiearchitectuur .mid-wrap{display:grid;grid-template-columns:572fr 706fr;gap:6px}
.referentiearchitectuur .fm{border:1px solid var(--line);border-radius:4px;background:linear-gradient(90deg,var(--front) 0 50%,var(--mid) 50% 100%);padding:4px 6px 6px;display:flex;flex-direction:column;gap:6px;min-height:100%}
.referentiearchitectuur .fm .heads{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:11px}
.referentiearchitectuur .backo{background:var(--back);border-color:var(--back-line)}
.referentiearchitectuur .backcols{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:6px;align-items:start}
.referentiearchitectuur .stack{display:flex;flex-direction:column;gap:6px}
.referentiearchitectuur .bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.referentiearchitectuur .bottom .zone{background:var(--back);border-color:var(--back-line)}

.referentiearchitectuur .blk{position:relative;min-height:34px;padding:4px 6px;border-radius:3px;border:1px solid;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;transition:box-shadow .2s,transform .2s,opacity .2s,filter .2s}
.referentiearchitectuur .blk.g{background:var(--g);border-color:var(--g-line);color:var(--g-ink)}
.referentiearchitectuur .blk.b{background:var(--b);border-color:var(--b-line);color:var(--b-ink)}
.referentiearchitectuur .blk.x{background:var(--x);border-color:var(--x-line);color:var(--x-ink)}
.referentiearchitectuur .blk .lock{position:absolute;top:2px;left:3px;width:8px;height:8px;opacity:.65}

.referentiearchitectuur .blk.hit{cursor:pointer;z-index:1}
.referentiearchitectuur .blk.hit.c{box-shadow:0 0 0 1px var(--accent-soft),0 0 10px var(--halo)}
.referentiearchitectuur .blk.hit.k{box-shadow:0 0 0 1.5px var(--accent),0 0 14px 2px var(--halo);font-weight:600}
.referentiearchitectuur .blk.hit:hover,.referentiearchitectuur .blk.hit:focus-visible,.referentiearchitectuur .blk.hit.open{transform:translateY(-1px) scale(1.04);box-shadow:0 0 0 2px var(--accent),0 0 22px 4px var(--halo);z-index:3}
.referentiearchitectuur .badge{position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}

.referentiearchitectuur .map.filtering .blk:not(.match){opacity:.32;filter:saturate(.4)}
.referentiearchitectuur .map.filtering .blk.hit:not(.match){box-shadow:none;font-weight:400}
.referentiearchitectuur .map.filtering .blk:not(.match) .badge{display:none}

/* ---------- tooltip ---------- */
/* On the deep teal tooltip the teal accent would vanish, so the role labels there are gold. */
.referentiearchitectuur .tip{position:fixed;z-index:50;max-width:340px;width:max-content;background:var(--tip);color:var(--tip-ink);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(22,64,61,.28),0 0 0 1px var(--accent-soft);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;font-size:13px}
.referentiearchitectuur .tip.on{opacity:1;transform:none}
.referentiearchitectuur .tip h3{margin:0 0 8px;font-family:var(--f-display);font-size:15px;font-weight:700;line-height:1.2}
.referentiearchitectuur .tip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.referentiearchitectuur .tip li{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline}
.referentiearchitectuur .tip .role{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-radius:4px;padding:1px 5px;border:1px solid var(--tip-accent);color:var(--tip-ink);white-space:nowrap}
.referentiearchitectuur .tip .role.k{background:var(--tip-accent);color:var(--tip-accent-ink)}
.referentiearchitectuur .tip .uc{font-weight:600}
.referentiearchitectuur .tip .why{grid-column:2;color:var(--tip-muted);font-size:12.5px}

/* ---------- use cases ---------- */
.referentiearchitectuur .ucs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.referentiearchitectuur .uccard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.referentiearchitectuur .uccard h2{margin:0;font-family:var(--f-display);font-size:16px;font-weight:700}
.referentiearchitectuur .uccard p{margin:0;color:var(--muted);font-size:13px}
.referentiearchitectuur .uccard .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.referentiearchitectuur .uccard .tags span{font-size:11.5px;border-radius:4px;padding:1px 6px;border:1px solid var(--line);color:var(--fg)}
.referentiearchitectuur .uccard .tags span.k{border-color:var(--accent);color:var(--accent);font-weight:600}
.referentiearchitectuur .sect{font-family:var(--f-display);font-size:18px;margin:8px 0 0;font-weight:700}
.referentiearchitectuur .foot{font-size:12.5px;color:var(--muted);max-width:90ch;margin:0}

@media (prefers-reduced-motion:reduce){.referentiearchitectuur .blk,.referentiearchitectuur .tip,.referentiearchitectuur .chip{transition:none}.referentiearchitectuur .blk.hit:hover,.referentiearchitectuur .blk.hit:focus-visible,.referentiearchitectuur .blk.hit.open{transform:none}}

/* Linked to the catalogue (not in the reference): a panel's title opens its domain, as does a plain block in it;
   panels of a fiche's domains are marked; a use case links to its fiche. */
.referentiearchitectuur .panel>.pt a{color:inherit;text-decoration:underline dotted var(--accent-soft);text-underline-offset:2px}
.referentiearchitectuur .panel>.pt a:hover{text-decoration-style:solid}
.referentiearchitectuur .panel[data-url] .blk:not(.hit){cursor:pointer}
.referentiearchitectuur .panel.hl{border-color:var(--gold);box-shadow:0 0 0 3px var(--halo)}
.referentiearchitectuur .landschap-markering{margin:0;padding:8px 12px;border-radius:8px;background:var(--mid);border:1px solid var(--mid-line);font-size:13.5px}
.referentiearchitectuur .landschap-markering a{color:var(--accent);font-weight:600}
.referentiearchitectuur .uccard .ucfiche{margin-top:6px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.referentiearchitectuur .uccard .ucfiche:hover{text-decoration:underline}