/* Domain and glossary (tools/genDomain.mjs): the map of the entities and the life of a Site as inline SVG
   on tokens, in the look of the Architecture page; the boxes are HTML inside the drawing so their words wrap
   and translate. Then the ownership matrix, the entity cards and the glossary. Tokens only; no animation. */

/* ── The figures ── */
.dm-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.dm-canvas { overflow-x: auto; }
.dm-svg { display: block; width: 100%; height: auto; }
.dm-svg--map { min-width: 1080px; }
.dm-svg--life { min-width: 1000px; }
.dm-aside {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-default);
}
@media (max-width: 900px) { .dm-aside { grid-template-columns: minmax(0, 1fr); } }
.dm-text { display: flex; flex-direction: column; gap: var(--space-3); }
.dm-text p, .dm-reading p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }
.dm-count { margin: 0; font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-subtle); }

/* The numbered reading under the map */
.dm-reading { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dm-reading li { display: flex; gap: var(--space-3); align-items: flex-start; }
.dm-reading__n {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-primary-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}

/* ── Legends ── */
.dm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dm-legend--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.dm-legend li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-muted); }
.dm-sw { flex: none; width: 28px; height: 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-emphasis); background: var(--color-surface); }
.dm-sw--site { background: var(--color-primary-soft); border-color: var(--color-primary); }
.dm-sw--ext { border-style: dashed; background: var(--color-surface-muted); }
.dm-sw--chip { height: 14px; border-width: 1px; border-color: var(--color-default); background: var(--color-surface-muted); border-radius: var(--radius-full); }
.dm-sw--area { background: transparent; border-style: dashed; }
.dm-sw--dead { background: var(--color-surface-muted); border-color: var(--color-muted); }
.dm-sw--fn { width: 6px; height: 22px; border: 0; border-radius: var(--radius-sm); margin: 0 11px; background: var(--color-fn-land); box-shadow: 0 0 0 0 transparent; }
.dm-sw--one, .dm-sw--many { height: 18px; border: 0; border-radius: 0; background: none; position: relative; }
.dm-sw--one::before, .dm-sw--many::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; border-top: 1.5px solid var(--color-muted); }
.dm-sw--one::after { content: ''; position: absolute; right: 6px; top: 2px; height: 14px; border-left: 1.5px solid var(--color-muted); }
.dm-sw--many::after {
  content: ''; position: absolute; right: 0; top: 2px; width: 12px; height: 12px;
  border-top: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.dm-legend__kind { flex: none; min-width: 88px; text-align: center; margin-right: 0; }
.dm-endtxt { flex: none; min-width: 44px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-foreground); text-align: center; }

/* Personal data marks */
.dm-pd { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); vertical-align: middle; }
.dm-pd--ext { background: var(--color-warning); }
.dm-pd--user { border: 2px solid var(--color-subtle); background: transparent; }
.dm-legend .dm-pd { margin: 0 9px; }

/* ── Inside the drawings ── */
.dm-svg text { font-family: var(--font-sans); fill: var(--color-foreground); }
.dm-svg .dm-cap { font-size: var(--text-label); font-weight: var(--weight-semibold); fill: var(--color-subtle); letter-spacing: 0.02em; }
.dm-svg .dm-cap--frame { fill: var(--color-primary); }
.dm-svg .dm-lbl {
  font-size: var(--text-xs);
  fill: var(--color-muted);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.dm-svg .dm-end { font-weight: var(--weight-semibold); fill: var(--color-foreground); }
.dm-panel { fill: none; stroke: var(--color-emphasis); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dm-frame { fill: var(--color-primary-soft); fill-opacity: 0.35; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dm-line { fill: none; stroke: var(--color-muted); stroke-width: 1.5; }
.dm-line--gate { stroke: var(--color-warning); stroke-width: 2; }
.dm-line--skip { stroke-dasharray: 5 4; }
.dm-line--dead { stroke: var(--color-subtle); stroke-dasharray: 2 4; stroke-linecap: round; stroke-width: 2; }
.dm-mk { fill: none; stroke: var(--color-muted); stroke-width: 1.5; }
.dm-head { fill: var(--color-muted); }

/* A box of the map: HTML inside a foreignObject */
.dm-node {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 10px;
  border: 1.5px solid var(--color-emphasis);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-family: var(--font-sans);
  overflow: hidden;
}
.dm-node--site { background: var(--color-primary-soft); border-color: var(--color-primary); padding: 12px 14px; gap: 6px; }
.dm-node--site .dm-node__name { font-size: var(--text-xl); line-height: var(--leading-xl); }
.dm-node--ext { border-style: dashed; background: var(--color-surface-muted); }
.dm-node--group { background: var(--color-surface-muted); border-color: var(--color-default); gap: 6px; }
.dm-node--settings { background: var(--color-surface); }
.dm-node--wide { justify-content: center; }
.dm-node__name {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); line-height: 18px; font-weight: var(--weight-semibold);
  color: var(--color-foreground); text-decoration: none;
}
.dm-node__name:hover, .dm-chip:hover, .dm-link:hover { color: var(--color-primary); }
.dm-node__sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.dm-node__group { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); color: var(--color-subtle); letter-spacing: 0.02em; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--color-default);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs); line-height: 16px; color: var(--color-foreground); text-decoration: none;
}
.dm-node--group .dm-chips { flex-direction: column; align-items: flex-start; gap: 3px; }
.dm-node--two .dm-chips { display: grid; grid-template-columns: repeat(2, max-content); }
.dm-node--group .dm-node__name + .dm-chips { flex-direction: row; }
.dm-chip--plain { color: var(--color-muted); }
.dm-node--settings .dm-chips { display: flex; flex-direction: row; flex-wrap: wrap; }
.dm-cfg { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dm-cfg__item { padding: 3px 8px; border-left: 3px solid var(--color-emphasis); background: var(--color-surface-muted); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-foreground); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* The stages of the life diagram */
.dm-stage {
  box-sizing: border-box; width: 100%; height: 100%;
  display: flex; align-items: stretch; gap: 8px;
  padding: 6px 10px 6px 8px;
  border: 1.5px solid var(--color-emphasis); border-radius: var(--radius-control);
  background: var(--color-surface); font-family: var(--font-sans);
}
.dm-stage--ext { border-style: dashed; background: var(--color-surface-muted); }
.dm-stage--done { border-color: var(--color-success); background: var(--color-success-soft); }
.dm-stage__stripes { flex: none; display: flex; flex-direction: column; gap: 2px; width: 6px; }
.dm-stripe { flex: 1; border-radius: var(--radius-sm); }
.dm-stripe--backoffice, .dm-fnsw--backoffice { background: var(--color-fn-backoffice); }
.dm-stripe--land, .dm-fnsw--land { background: var(--color-fn-land); }
.dm-stripe--partnerships, .dm-fnsw--partnerships { background: var(--color-fn-partnerships); }
.dm-stripe--construction, .dm-fnsw--construction { background: var(--color-fn-construction); }
.dm-stripe--legal, .dm-fnsw--legal { background: var(--color-fn-legal); }
.dm-stage__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dm-stage__name { font-size: var(--text-sm); line-height: 18px; font-weight: var(--weight-semibold); color: var(--color-foreground); }
.dm-stage__who { font-size: var(--text-xs); line-height: 15px; color: var(--color-muted); }
.dm-step { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.dm-kind {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  border-radius: var(--radius-full); font-size: var(--text-xs); line-height: 16px; font-weight: var(--weight-medium);
  background: var(--color-surface-muted); color: var(--color-foreground); border: 1px solid var(--color-default);
}
.dm-kind--event { background: var(--color-primary-soft); color: var(--color-primary-strong); border-color: transparent; }
.dm-kind--approval { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.dm-kind--gate { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.dm-kind--signature { background: var(--color-info-soft); color: var(--color-info-text); border-color: var(--color-default); }
.dm-side { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); font-style: italic; }
.dm-side--skip { font-style: normal; color: var(--color-muted); }
.dm-box {
  box-sizing: border-box; width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1.5px solid var(--color-emphasis); border-radius: var(--radius-control);
  background: var(--color-surface); font-family: var(--font-sans);
}
.dm-box--dead { background: var(--color-surface-muted); border-color: var(--color-muted); }
.dm-box__title { font-size: var(--text-sm); line-height: 18px; font-weight: var(--weight-semibold); color: var(--color-foreground); }
.dm-box__text { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
.dm-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-pair__arrow { color: var(--color-muted); font-size: var(--text-sm); }
.dm-pill {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-full);
  border: 1px solid var(--color-default); background: var(--color-surface-muted);
  font-size: var(--text-xs); line-height: 18px; color: var(--color-foreground);
}
.dm-pill--pause { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.dm-pill--end { background: var(--color-stage-dead-tint); color: var(--color-stage-dead-text); border-color: var(--color-emphasis); }

/* ── Who owns what ── */
.dm-own { display: flex; flex-direction: column; gap: var(--space-4); }
.dm-own__table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--text-label); }
.dm-own__table th, .dm-own__table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-default); }
.dm-own__table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-muted); color: var(--color-subtle); font-weight: var(--weight-medium); font-size: var(--text-label); }
.dm-own__table tbody th { font-weight: var(--weight-medium); white-space: nowrap; }
.dm-own__table tbody th a { color: var(--color-foreground); text-decoration: none; }
.dm-own__table tbody th a:hover { color: var(--color-primary); }
.dm-own__area th { background: var(--color-surface); padding-top: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-subtle); font-weight: var(--weight-semibold); }
.dm-fnhead { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dm-fnsw { flex: none; width: 10px; height: 10px; border-radius: var(--radius-sm); }
.dm-cell { min-width: 96px; }
.dm-cell__lv { display: inline-block; padding: 0 8px; border-radius: var(--radius-full); font-size: var(--text-xs); line-height: 18px; font-weight: var(--weight-medium); }
.dm-cell__q { display: block; margin-top: 2px; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); }
.dm-cell--none .dm-cell__lv { color: var(--color-subtle); padding: 0; }
.dm-cell--read .dm-cell__lv { color: var(--color-muted); border: 1px solid var(--color-default); }
.dm-cell--write .dm-cell__lv, .dm-cell--own .dm-cell__lv { color: var(--color-foreground); border: 1.5px solid var(--cell-fn); }
.dm-cell--own .dm-cell__lv { background: var(--cell-tint); font-weight: var(--weight-semibold); }
.dm-cell--backoffice { --cell-fn: var(--color-fn-backoffice); --cell-tint: var(--color-fn-backoffice-tint); }
.dm-cell--land { --cell-fn: var(--color-fn-land); --cell-tint: var(--color-fn-land-tint); }
.dm-cell--partnerships { --cell-fn: var(--color-fn-partnerships); --cell-tint: var(--color-fn-partnerships-tint); }
.dm-cell--construction { --cell-fn: var(--color-fn-construction); --cell-tint: var(--color-fn-construction-tint); }
.dm-cell--legal { --cell-fn: var(--color-fn-legal); --cell-tint: var(--color-fn-legal-tint); }
/* The legend's swatches, in a neutral colour */
.dm-cell--swatch { flex: none; display: inline-block; min-width: 0; width: 28px; height: 16px; border-radius: var(--radius-full); }
.dm-cell--swatch.dm-cell--own { background: var(--color-fn-legal-tint); border: 1.5px solid var(--color-fn-legal); }
.dm-cell--swatch.dm-cell--write { border: 1.5px solid var(--color-fn-legal); }
.dm-cell--swatch.dm-cell--read { border: 1px solid var(--color-default); }
.dm-cell--swatch.dm-cell--none { border-top: 1.5px solid var(--color-subtle); border-radius: 0; height: 0; }
.dm-mod__code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-subtle); }

/* ── The entity cards ── */
.dm-area { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.dm-area__head p { margin: var(--space-1) 0 0; color: var(--color-muted); }
.dm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1000px) { .dm-cards { grid-template-columns: minmax(0, 1fr); } }
.dm-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--color-default); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-card); scroll-margin-top: var(--space-12);
}
.dm-card:target { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.dm-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dm-card__title { margin: 0; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); }
.dm-card__what { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.dm-tag {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px;
  border-radius: var(--radius-full); border: 1px solid var(--color-default);
  font-size: var(--text-xs); line-height: 18px; color: var(--color-muted);
}
.dm-tag--ext { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.dm-dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dm-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); }
@media (max-width: 560px) { .dm-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.dm-dl dt { font-size: var(--text-xs); line-height: var(--leading-sm); color: var(--color-subtle); }
.dm-dl dd { margin: 0; font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-foreground); }
.dm-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dm-link {
  display: inline-block; padding: 0 8px; border-radius: var(--radius-full);
  background: var(--color-surface-muted); font-size: var(--text-xs); line-height: 20px;
  color: var(--color-foreground); text-decoration: none;
}
.dm-place { font-size: var(--text-xs); line-height: 20px; color: var(--color-primary); text-decoration: none; }
.dm-place::before { content: '→ '; color: var(--color-subtle); }
.dm-place:hover { text-decoration: underline; }
.dm-from { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: baseline; }
.dm-mod { font-size: var(--text-label); }
.dm-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-capid {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-default); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 18px; color: var(--color-muted);
}
.dm-capid--open { border-style: dashed; color: var(--color-warning-text); }
.dm-none { font-size: var(--text-xs); color: var(--color-subtle); }
.dm-sample {
  margin: 0; padding: var(--space-3); border-radius: var(--radius-control);
  background: var(--color-surface-muted); font-size: var(--text-label); line-height: var(--leading-label);
}
.dm-sample__label { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-subtle); font-weight: var(--weight-semibold); margin-bottom: 2px; }

/* ── The glossary ── */
.dm-gloss { display: flex; flex-direction: column; gap: var(--space-6); }
.dm-gloss__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-default); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.dm-index { display: flex; flex-wrap: wrap; gap: 2px; }
.dm-index a, .dm-index span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm);
  font-size: var(--text-label); font-weight: var(--weight-semibold); text-decoration: none;
}
.dm-index a { color: var(--color-primary); }
.dm-index a:hover { background: var(--color-primary-soft); }
.dm-index span { color: var(--color-emphasis); }
.dm-search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 260px; }
.dm-search__label { font-size: var(--text-label); color: var(--color-muted); white-space: nowrap; }
.dm-search .c-input { flex: 1; min-width: 0; }
.dm-shown { margin: 0; font-size: var(--text-xs); color: var(--color-subtle); }
.dm-nothing { margin: 0; color: var(--color-muted); }
.dm-nothing[hidden], .dm-letter[hidden], .dm-term[hidden] { display: none; }
.dm-letter { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 96px; }
.dm-letter__head {
  margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-default);
  font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-semibold); color: var(--color-primary);
}
.dm-terms { margin: 0; columns: 2; column-gap: var(--space-8); }
@media (max-width: 1000px) { .dm-terms { columns: 1; } }
.dm-term { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-default); scroll-margin-top: 96px; break-inside: avoid; }
.dm-term:target { background: var(--color-primary-soft); border-radius: var(--radius-control); padding-left: var(--space-3); padding-right: var(--space-3); }
.dm-term dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm-term__name { font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); }
.dm-term dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dm-term__def { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.dm-term__meta { margin: 0; display: grid; grid-template-columns: 11.5em minmax(0, 1fr); align-items: baseline; gap: 4px 8px; font-size: var(--text-xs); line-height: 20px; }
.dm-term__meta > :not(.dm-term__label) { justify-self: start; }
.dm-term__label { color: var(--color-subtle); }
.dm-term__also { color: var(--color-muted); font-style: italic; }
@media (max-width: 560px) { .dm-term__meta { grid-template-columns: minmax(0, 1fr); gap: 0; } }