/* ============================================================
   installation.css — page styles for /installation.html
   Currently holds one thing: the CIB-04 entry glyph that sits at
   the end of the "sustained mutual attention" paragraph.

   Kept out of styles.css deliberately. styles.css is loaded by
   every page on the site, so changing it would force a ?v= bump
   across all of them for a mark that appears on exactly one page.
   This mirrors overview.css (CDS-01) and cars-05.css (CARS-05).
   ============================================================ */

/* The glyph rides inside the paragraph, so it must not disturb the
   line box. inline-flex + a baseline nudge keeps the measure intact. */
.cib-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  margin-left: 0.4em;
  vertical-align: -0.36em;
  border: 0;
  border-radius: 3px;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 220ms ease, transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Held at an angle rather than flat on. A horizontal iron at this size reads
   as an arrow or a pen; tilted, the handle-ferrule-tip silhouette is legible
   at a glance. The rotation lives on the svg so the link's own hover lift
   stays independent of it. */
.cib-entry svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  transform: rotate(-45deg);
}

/* Body of the iron: the site's interface cyan, same family as every
   other quiet affordance on the site. */
.cib-entry .cib-entry-body {
  fill: none;
  stroke: var(--cyan, #45D3E8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 220ms ease;
}

/* The tip is the only part allowed to go amber, and only when the
   glyph is being attended to. Amber means heat everywhere in CIB-04
   and it must not leak into the resting state. */
.cib-entry .cib-entry-tip {
  fill: none;
  stroke: var(--cyan, #45D3E8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 260ms ease, filter 260ms ease;
}

.cib-entry .cib-entry-glow {
  fill: var(--gold, #E8A94A);
  opacity: 0;
  transition: opacity 260ms ease;
}

.cib-entry:hover,
.cib-entry:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.cib-entry:hover .cib-entry-tip,
.cib-entry:focus-visible .cib-entry-tip {
  stroke: var(--gold, #E8A94A);
  filter: drop-shadow(0 0 3px rgba(232, 169, 74, 0.75));
}

.cib-entry:hover .cib-entry-glow,
.cib-entry:focus-visible .cib-entry-glow {
  opacity: 0.9;
}

.cib-entry:focus-visible {
  outline: 1px solid var(--cyan, #45D3E8);
  outline-offset: 3px;
}

.cib-entry:active {
  transform: translateY(0);
}

/* Touch devices never fire :hover, so a hover-only affordance is an
   invisible affordance on a phone. Give it a resting warmth instead —
   enough to read as a control, not enough to shout. */
@media (hover: none), (pointer: coarse) {
  .cib-entry {
    opacity: 0.8;
  }

  .cib-entry .cib-entry-tip {
    stroke: var(--gold, #E8A94A);
  }

  .cib-entry .cib-entry-glow {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cib-entry,
  .cib-entry .cib-entry-tip,
  .cib-entry .cib-entry-glow,
  .cib-entry .cib-entry-body {
    transition: none;
  }

  .cib-entry:hover,
  .cib-entry:focus-visible {
    transform: none;
  }
}