/* Typography belongs to the roadmap. Native text keeps its exact layout; a
   measured ink layer briefly exposes the act of setting it. */
.type-setting { position:relative; }
.type-setting > .type-ink { display:block; opacity:1; font:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; }
.is-typesetting:not(.type-quiet) > .type-ink { opacity:0; }
.type-setting > .type-overlay {
  margin:0; padding:0; font:inherit; color:inherit;
  position:absolute;
  inset:0;
  pointer-events:none;
  user-select:none;
  /* Registration rules can breathe vertically without widening the document. */
  clip-path:inset(-24px 0 -24px -8px);
}
.type-setting .type-glyph { margin:0; padding:0; position:absolute; white-space:pre; letter-spacing:0; font-kerning:none; }
.type-setting .type-rule {
  margin:0; padding:0;
  position:absolute;
  height:1px;
  background:currentColor;
  transform-origin:left center;
}
.type-rule::before,.type-rule::after {
  content:'';
  position:absolute;
  width:1px;
  height:9px;
  top:-4px;
  background:currentColor;
}
.type-rule::before {left:0;}
.type-rule::after {right:0;}

/* Registration marks sit inside stable card hitboxes. The fine frame echoes
   layout guides, while colour and focus rings remain clear after it settles. */
.feature-card::after,.node::after {
  content:'';
  position:absolute;
  inset:2px 0 7px -8px;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(var(--lime),var(--lime)) left top / 12px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) left top / 1px 12px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--lime),var(--lime)) right bottom / 1px 12px no-repeat;
  transition:opacity .2s;
}
.feature-card:hover::after,.feature-card:focus-visible::after,
.node:hover::after,.node:focus-visible::after,.node.is-connected::after {opacity:.65;}
.node::after {inset:0;}
.is-locking::after {animation:registration-lock 900ms var(--ease) both;}
.row-heading {position:relative;}
.row-heading::before {
  content:'';
  position:absolute;
  left:-10px;
  top:10px;
  bottom:0;
  width:1px;
  background:var(--lime);
  transform-origin:top;
  opacity:0;
}
.row-heading.is-locking::before {animation:row-register 1100ms var(--ease) both;}
.node.is-connected {border-left-color:var(--lime);}
.node.is-connection-source strong,.node:focus-visible strong {color:var(--lime);}
#connections .relationship {stroke-dasharray:1;stroke-dashoffset:0;animation:relationship-draw 650ms var(--ease) both;}
#connections .connection-end {fill:var(--forest);stroke:var(--lime);stroke-width:1.5;animation:connection-lock 780ms var(--ease) both;}
@keyframes relationship-draw {from {stroke-dashoffset:1;} to {stroke-dashoffset:0;}}
@keyframes connection-lock {0%,65% {opacity:0;} 100% {opacity:1;}}
@keyframes registration-lock {
  0% {opacity:0;transform:scale(1.035);}
  35% {opacity:.6;transform:scale(1.015);}
  70% {opacity:.75;transform:scale(1);}
  100% {opacity:0;transform:scale(1);}
}
@keyframes row-register {
  0% {opacity:0;transform:scaleY(.15);}
  35%,65% {opacity:.5;transform:scaleY(1);}
  100% {opacity:0;transform:scaleY(1);}
}
@media(min-width:801px) {.row-heading {position:sticky;}}
.motion-paused .type-overlay {display:none!important;}
.motion-paused .type-ink {opacity:1!important;}
.motion-paused .is-locking::after {animation:none!important;}
@media(prefers-reduced-motion:reduce) {
  .type-overlay {display:none!important;}
  .type-ink {opacity:1!important;}
  #connections .relationship,#connections .connection-end,.is-locking::after,.row-heading.is-locking::before {animation:none!important;}
}
@media print {
  .type-overlay,.feature-card::after,.node::after,.row-heading::before {display:none!important;}
  .type-ink {opacity:1!important;}
  .row-heading {position:static;}
}