/* Overview map. Layout: the research at the top (the thesis as the seed, three
   short rows beneath it), a trunk running down into two communities side by
   side as picture tiles. --nd-* tokens only. Hue names a SEAT phase, an
   instrument of change, the self, or the site a tile belongs to. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nd-ground); color: var(--nd-ink);
  font-family: var(--nd-font-body); font-size: var(--nd-text-base); line-height: var(--nd-leading-base);
  /* Diagram ink: the lines and edges use the soft ink, a darker tint of the palette, never the near-black. */
  --ov-line: var(--nd-ink-soft);
  --ov-line-w: 1.5px;
}
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--nd-space-4); padding-block: var(--nd-space-6) var(--nd-space-8); }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.disp, h1, .limb-h .t, .group-h, .detail h2, .seed .label, .type-tile {
  font-family: var(--nd-font-display); text-transform: var(--nd-display-case); letter-spacing: var(--nd-tracking-display); font-weight: 700;
}

/* Site colours. A tile, pill or sheet with a tint carries its site's hue on its edge and its ground. */
.tint-database { --t: var(--nd-digital); --t-soft: var(--nd-digital-soft); --t-text: var(--nd-digital-text); }
.tint-visualiser { --t: var(--nd-self-deep); --t-soft: var(--nd-self-soft); --t-text: var(--nd-self-text); }
.tint-playbook { --t: var(--nd-togethering-text); --t-soft: var(--nd-togethering-soft); --t-text: var(--nd-togethering-text); }
.tint-thesis { --t: var(--nd-envisaging-text); --t-soft: var(--nd-envisaging-soft); --t-text: var(--nd-envisaging-text); }
.tint-bench { --t: var(--nd-mind-body); --t-soft: var(--nd-mind-body-soft); --t-text: var(--nd-mind-body-text); }

.hero { display: grid; gap: var(--nd-space-3); margin-bottom: var(--nd-space-7); }
.eyebrow { font-weight: 700; font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }
h1 { font-size: var(--nd-text-display); line-height: var(--nd-leading-display); text-wrap: balance; }
.lede { max-width: var(--nd-measure); font-size: var(--nd-text-lg); line-height: var(--nd-leading-lg); color: var(--nd-ink-soft); }
.lede cite { font-style: italic; }

/* The map */
.tree { position: relative; }
#links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#links path { fill: none; stroke: var(--ov-line); stroke-linecap: round; stroke-linejoin: round; }
#links .trunk { stroke-width: 3; }
#links .bough { stroke-width: 2; }

.limb-h { display: grid; gap: var(--nd-space-1); }
.limb-h .t { font-size: var(--nd-text-3xl); line-height: var(--nd-leading-3xl); text-wrap: balance; }
.limb-h .w { font-size: var(--nd-text-base); color: var(--nd-ink-muted); }

/* The research, at the top */
.research { position: relative; z-index: 1; display: grid; gap: var(--nd-space-5); justify-items: center; padding-bottom: var(--nd-space-7); }
.research .limb-h { text-align: center; }
.seedrow { display: grid; justify-items: center; width: 100%; }
.seed.tile {
  font: inherit; color: inherit; cursor: pointer; text-align: center; width: min(520px, 100%);
  display: grid; gap: var(--nd-space-2); padding: 0; background: none; border: 0; border-radius: var(--nd-radius-card);
}
.seed .label { display: block; font-size: var(--nd-text-sm); color: var(--t-text, var(--nd-ink-muted)); }
.seed .pic { aspect-ratio: 2 / 1; border-width: 2px; }
.seed .cap .t { font-size: var(--nd-text-lg); line-height: var(--nd-leading-lg); text-wrap: balance; }
.research .groups { display: grid; grid-template-columns: 5fr 3fr 5fr; column-gap: var(--nd-space-6); align-items: start; width: 100%; }
.research .group-h { text-align: center; }
.research .tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.research .group:nth-child(2) .tiles { grid-template-columns: minmax(0, 1fr); }

/* The two communities */
.canopy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 112px; align-items: start; }
.limb { display: grid; gap: var(--nd-space-6); }
.limb[data-side="left"] .limb-h, .limb[data-side="left"] .group-h { text-align: right; }

.group { display: grid; gap: var(--nd-space-3); }
.subgroup { display: grid; gap: var(--nd-space-3); margin-top: var(--nd-space-2); }
.group-h { font-size: var(--nd-text-lg); line-height: var(--nd-leading-xl); }
.group-h span {
  display: inline-block; padding: var(--nd-space-1) var(--nd-space-4);
  background: var(--t-soft, var(--nd-sand-deep)); color: var(--t-text, var(--nd-ink));
  border: var(--ov-line-w) solid var(--t, var(--nd-sand-deep)); border-radius: var(--nd-radius-pill);
}
.group-h.sub { font-size: var(--nd-text-sm); font-family: var(--nd-font-body); text-transform: none; letter-spacing: 0; }
.group-h.sub span { background: transparent; color: var(--nd-ink-soft); border-color: var(--nd-line); padding-block: 2px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--nd-space-4) var(--nd-space-3); }
.limb[data-side="left"] .tiles { direction: rtl; }
.limb[data-side="left"] .tiles > li { direction: ltr; }

.tile {
  font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%;
  display: grid; gap: var(--nd-space-2); padding: 0; background: none; border: 0; border-radius: var(--nd-radius-card);
}
.tile:focus-visible, .seed:focus-visible { border-radius: var(--nd-radius-card); }
.pic {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--t-soft, var(--nd-sand)); border: var(--ov-line-w) solid var(--t, var(--ov-line)); border-radius: var(--nd-radius-card);
  box-shadow: var(--nd-shadow-card);
  transition: transform var(--nd-duration-fast) var(--nd-ease-gentle), box-shadow var(--nd-duration-fast) var(--nd-ease-gentle);
}
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tile:hover .pic, .tile:focus-visible .pic { transform: translateY(-3px) rotate(-0.6deg); box-shadow: var(--nd-shadow-lift); }
.tile[aria-pressed="true"] .pic { outline: 3px solid var(--t, var(--nd-ink)); outline-offset: 2px; }
.cap { display: grid; gap: 2px; }
.cap .t { font-weight: 700; font-size: var(--nd-text-sm); line-height: 1.25; }
.cap .s, .state { display: inline-flex; align-items: center; gap: var(--nd-space-2); font-size: var(--nd-text-xs); color: var(--nd-ink-muted); }
.mark { width: 12px; height: 12px; flex: none; color: var(--t-text, var(--nd-ink)); }
.mark * { stroke: currentColor; stroke-width: 2; fill: none; }
.mark .f { fill: currentColor; }

/* Tiles with no picture yet: the title as type */
.type-tile { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--nd-space-3); text-align: center; font-size: var(--nd-text-base); line-height: 1.1; text-wrap: balance; color: var(--t-text, var(--nd-ink)); overflow-wrap: anywhere; }
.type-tile.dashed { color: var(--nd-ink-soft); }
.pic.is-coming { border-style: dashed; box-shadow: none; }

/* Drawn tiles */
.art { position: absolute; inset: 0; display: grid; }
.art.quad { grid-template: 1fr 1fr / 1fr 1fr; }
.art.quad > span { display: grid; place-items: center; }
.art.quad svg { width: 68%; height: 68%; }
.c-su { background: var(--nd-surfacing); color: var(--nd-surfacing-text); } .c-en { background: var(--nd-envisaging); color: var(--nd-envisaging-text); }
.c-ac { background: var(--nd-actioning); color: var(--nd-actioning-text); } .c-to { background: var(--nd-togethering); color: var(--nd-togethering-text); }
.c-di { background: var(--nd-digital-fill); color: var(--nd-digital-text); } .c-mb { background: var(--nd-mind-body-fill); color: var(--nd-mind-body-text); }
.c-re { background: var(--nd-relational-fill); color: var(--nd-relational-text); } .c-sp { background: var(--nd-space-making-fill); color: var(--nd-space-making-text); }
.art.rows { grid-template-rows: repeat(4, 1fr); gap: 1px; background: var(--nd-line); }
.art.rows > span { display: flex; align-items: center; gap: var(--nd-space-2); padding-inline: var(--nd-space-3); background: var(--nd-surface); font-size: var(--nd-text-xs); font-weight: 700; color: var(--nd-ink); }
.art.rows svg { width: 22px; height: 22px; flex: none; }
.art.tokens { grid-template-rows: 1fr auto; background: var(--nd-surface); }
.art.tokens .aa { display: grid; place-items: center; font-family: var(--nd-font-display); font-weight: 700; font-size: var(--nd-text-3xl); }
.art.tokens .sw { display: grid; grid-template-columns: repeat(8, 1fr); height: 28px; }
.art.wiggly { place-items: center; background: var(--nd-surface); }
.art.wiggly svg { width: 100%; height: 100%; }
.art.wiggly .spokes line { stroke: var(--nd-line); stroke-width: 1; }
.art.wiggly .shape { fill: var(--nd-self); fill-opacity: 0.55; stroke: var(--nd-self-deep); stroke-width: 1.5; stroke-linejoin: round; }

/* Keys */
.keys { display: grid; gap: var(--nd-space-2); margin-top: var(--nd-space-8); padding-block: var(--nd-space-3); border-top: var(--ov-line-w) solid var(--nd-line); border-bottom: var(--ov-line-w) solid var(--nd-line); }
.key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nd-space-2) var(--nd-space-5); font-size: var(--nd-text-sm); color: var(--nd-ink-soft); }
.key div { display: inline-flex; align-items: center; gap: var(--nd-space-2); }
.key .swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--t-soft); border: var(--ov-line-w) solid var(--t); }

/* Detail sheet */
.detail[hidden], .d-parts[hidden], .d-pic[hidden], .d-nested[hidden], .d-back[hidden] { display: none; }
.detail {
  position: fixed; z-index: 10; left: 50%; translate: -50% 0;
  bottom: calc(var(--nd-space-4) + env(safe-area-inset-bottom, 0px));
  width: min(860px, calc(100% - 2 * var(--nd-space-4))); max-height: 78vh; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--nd-surface); color: var(--nd-ink); border: 2px solid var(--t, var(--nd-ink)); border-radius: var(--nd-radius-panel);
  box-shadow: var(--nd-shadow-lift);
  animation: sheet-in var(--nd-duration-settle) var(--nd-ease-gentle) both;
}
.detail.no-pic { grid-template-columns: minmax(0, 1fr); width: min(680px, calc(100% - 2 * var(--nd-space-4))); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.d-pic { position: relative; min-height: 220px; background: var(--t-soft, var(--nd-sand)); border-right: 2px solid var(--t, var(--nd-ink)); }
.d-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.d-pic .art.wiggly { background: var(--t-soft, var(--nd-surface)); }
.d-body { display: grid; gap: var(--nd-space-3); padding: var(--nd-space-5); align-content: start; }
.d-head { display: flex; align-items: center; gap: var(--nd-space-3); font-size: var(--nd-text-sm); }
.d-head .state { font-size: var(--nd-text-sm); }
.d-head .btn { margin-left: auto; }
.chip { padding: 2px var(--nd-space-3); background: var(--t-soft, var(--nd-sand)); color: var(--t-text, var(--nd-ink)); border-radius: var(--nd-radius-pill); font-weight: 700; }
.detail h2 { font-size: var(--nd-text-xl); line-height: var(--nd-leading-xl); text-wrap: balance; outline-offset: 4px; }
.d-line { font-size: var(--nd-text-lg); line-height: var(--nd-leading-lg); }
.d-more { color: var(--nd-ink-soft); }
.d-more:empty { display: none; }
.d-parts, .d-nested { display: grid; gap: var(--nd-space-2); }
.d-parts h3, .d-nested h3 { font-size: var(--nd-text-sm); font-weight: 700; color: var(--nd-ink-muted); }
.d-parts ul { display: flex; flex-wrap: wrap; gap: var(--nd-space-2); }
.d-parts li { padding: 2px var(--nd-space-3); border: 1.5px solid var(--nd-line); border-radius: var(--nd-radius-pill); font-size: var(--nd-text-sm); }
.minis { display: grid; gap: var(--nd-space-2); }
.mini {
  font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--nd-space-3); align-items: center;
  padding: var(--nd-space-2); background: var(--nd-ground); border: 1.5px solid var(--nd-line); border-radius: var(--nd-radius-card);
}
.mini:hover, .mini:focus-visible { border-color: var(--t, var(--ov-line)); }
.mini .pic { aspect-ratio: 4 / 3; box-shadow: none; border-width: 1px; }
.mini .type-tile { font-size: var(--nd-text-xs); padding: var(--nd-space-1); line-height: 1.05; }
.mini .tx { display: grid; gap: 2px; }
.mini .t { font-weight: 700; font-size: var(--nd-text-sm); line-height: 1.25; }
.mini .l { font-size: var(--nd-text-xs); line-height: var(--nd-leading-xs); color: var(--nd-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn {
  font: inherit; font-size: var(--nd-text-sm); font-weight: 700; line-height: 1.2; cursor: pointer;
  min-height: 40px; padding: var(--nd-space-2) var(--nd-space-4);
  color: var(--nd-ink); background: transparent; border: 2px solid var(--nd-ink); border-radius: var(--nd-radius-pill);
}
.btn:hover { background: var(--nd-sand); }
.btn:focus-visible { border-radius: var(--nd-radius-pill); }
.btn.solid { background: var(--t-text, var(--nd-ink)); color: var(--nd-on-ink); border-color: var(--t-text, var(--nd-ink)); }
.btn.icon { width: 40px; padding: 0; display: inline-grid; place-items: center; }
.btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.btn.small { min-height: 32px; padding: var(--nd-space-1) var(--nd-space-3); border-width: 1.5px; font-weight: 400; }
.d-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nd-space-3); }
.d-act a.btn { display: inline-flex; align-items: center; gap: var(--nd-space-2); text-decoration: none; }
.d-act a.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.d-act .note { font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }
.d-also { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nd-space-2); font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }
.d-also:empty { display: none; }
body.has-detail .wrap { padding-bottom: 70vh; }

.foot { margin-top: var(--nd-space-6); display: grid; gap: var(--nd-space-1); font-size: var(--nd-text-sm); color: var(--nd-ink-muted); text-align: center; }

/* One column: the trunk is not drawn, the communities stack */
@media (max-width: 859px) {
  #links { display: none; }
  .canopy { grid-template-columns: minmax(0, 1fr); row-gap: var(--nd-space-8); }
  .research .groups { grid-template-columns: minmax(0, 1fr); row-gap: var(--nd-space-6); }
  .research .group:nth-child(2) .tiles, .research .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .limb[data-side="left"] .limb-h, .limb[data-side="left"] .group-h, .research .group-h, .research .limb-h { text-align: left; justify-self: start; }
  .research { justify-items: start; }
  .seed { text-align: left; }
  .limb[data-side="left"] .tiles { direction: ltr; }
  .limb-h .t { font-size: var(--nd-text-2xl); line-height: var(--nd-leading-2xl); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .d-pic { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 2px solid var(--t, var(--nd-ink)); }
  .mini { grid-template-columns: 72px minmax(0, 1fr); }
}