/* Annotated screenshots (scripts/annotations.cjs). Shared by the chapter pages and print.html / the PDF. */

[data-group="wolffhound"] { --pin: #f05a22; }
[data-group="app"] { --pin: #33a3e0; }

/* ---------- The image ---------- */
/* Pins are placed in percent of the image, so the image must fill the stage exactly: no padding or letterboxing. */
.annot-stage { position: relative; line-height: 0; container-type: inline-size; }
.markdown-body .annot-stage img, .annot-stage img { display: block; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; }

.annot-zone {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box;
  border: 3px solid var(--pin); border-radius: 6px; z-index: 1; transition: box-shadow .15s, background-color .15s;
}
.annot-zone-label {
  /* Sits on the zone's top border, where there is usually a gap between areas, so it hides as little as possible. */
  position: absolute; left: 10px; top: 0; transform: translateY(-50%); padding: 2px 7px; border-radius: 4px; background: var(--pin); color: #fff;
  font: 700 11px/1.2 "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; white-space: nowrap;
}
.annot-zone-label.bottom { top: 100%; left: auto; right: 10px; }
.annot-pin {
  /* Sized in proportion to the image (28px at the usual 760px column) so pins keep their place beside small controls. */
  --size: clamp(18px, 3.7cqw, 30px);
  position: absolute; left: var(--x); top: var(--y); z-index: 2; width: var(--size); height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: grid; place-items: center; border-radius: 50%; background: var(--pin); color: #fff; text-decoration: none;
  font: 800 calc(var(--size) / 2) / 1 "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .15s, opacity .15s, box-shadow .15s;
}
a.annot-zone, .annot-pin { cursor: pointer; outline: none; }
/* Beat the print stylesheets' link and image rules, which use !important. */
.markdown-body a.annot-pin, .markdown-body a.pin-num { color: #fff !important; text-decoration: none !important; }

/* ---------- The text each mark points at ---------- */
.pin-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pin); color: #fff !important;
  font: 800 14px/1 "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
}
.markdown-body ol.pinned-list { list-style: none; padding: 0; }
.markdown-body ol.pinned-list > li::before { content: none; }
.pin-target { border-radius: 8px; transition: background-color .15s; }
li.pin-target { position: relative; margin: 6px 0 6px -10px; padding: 6px 10px 6px 56px; }
li.pin-target > .pin-num { position: absolute; left: 10px; top: 7px; }
.pin-section { margin: 0 -12px; padding: 2px 12px 1px; }
.pin-section > :is(h3, h4) { display: flex; align-items: center; gap: 12px; }
.pin-section > :is(h3, h4) > .pin-num { flex: none; }
.pin-heading { transition: color .15s; }

/* Pin tables: a compact table under the image, one row per pin. */
.markdown-body table.pin-table { width: 100%; margin: 18px 0 34px; }
.pin-table th, .pin-table td { vertical-align: top; }
.markdown-body table.pin-table :is(td, th).n { width: 24px; min-width: 24px; padding-left: 10px; padding-right: 10px; text-align: center; }
.pin-table td.n .pin-num { width: 24px; height: 24px; font-size: 11px; vertical-align: top; }
.pin-table .ctl { width: 9.5em; font-weight: 700; }
.pin-table .key { width: 5.5em; text-align: right; white-space: nowrap; }
.pin-table tr.pin-target.is-active > td { background-color: color-mix(in srgb, var(--pin) 13%, transparent); }
.pin-table tr.pin-target.flash > td { animation: pin-flash 1.2s ease-out; }

/* ---------- Active: hover, focus, or tapped ---------- */
.annot-stage.has-active .annot-pin:not(.is-active) { opacity: .4; }
.annot-pin.is-active, .annot-pin:focus-visible {
  transform: scale(1.28); opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 7px color-mix(in srgb, var(--pin) 45%, transparent), 0 0 22px var(--pin);
}
.annot-zone.is-active, a.annot-zone:focus-visible {
  background-color: color-mix(in srgb, var(--pin) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin) 40%, transparent), 0 0 24px color-mix(in srgb, var(--pin) 60%, transparent);
}
.pin-target.is-active { background-color: color-mix(in srgb, var(--pin) 13%, transparent); }
.pin-target.is-active > .pin-num, .pin-target.is-active > :is(h3, h4) > .pin-num, .pin-target.is-active > td > .pin-num, .pin-num:focus-visible {
  transform: scale(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 30%, transparent);
}
.pin-heading.is-active { color: var(--pin); }

/* Click feedback: the text flashes, or the pin pulses. */
@keyframes pin-flash { from { background-color: color-mix(in srgb, var(--pin) 35%, transparent); } }
@keyframes pin-pulse { 0%, 100% { transform: scale(1.28); } 50% { transform: scale(1.7); } }
.pin-target.flash, .pin-heading.flash { animation: pin-flash 1.2s ease-out; }
.annot-pin.flash { animation: pin-pulse .45s ease-in-out 2; }

@media (max-width: 640px) {
  /* Pin tables stack each row: number, then name, description, and key. */
  .markdown-body table.pin-table thead { display: none; }
  .markdown-body table.pin-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); border-bottom: 1px solid var(--rule, rgba(128, 128, 128, .3)); }
  .markdown-body table.pin-table td { border: 0; padding: 3px 6px; width: auto; text-align: left; }
  .markdown-body table.pin-table td.n { grid-row: span 3; padding-top: 8px; width: auto; min-width: 0; }
  .markdown-body table.pin-table td.ctl { padding-top: 8px; }
  .markdown-body table.pin-table td:last-child { padding-bottom: 8px; }
  .markdown-body table.pin-table td.key:empty { display: none; }
  .annot-zone { border-width: 2px; }
  .annot-zone-label { font-size: 10px; padding: 1px 5px; left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .annot-pin, .annot-zone, .pin-num, .pin-target { transition: none; }
  .pin-target.flash, .pin-heading.flash, .annot-pin.flash { animation: none; }
}

/* ---------- print.html and the PDF: the single-page edition frames the image itself ---------- */
.manual-section figure.annotated { margin: 2rem 0.55rem; max-width: none; break-inside: avoid; page-break-inside: avoid; }
.manual-section .annot-stage { background: #111a22; box-shadow: 0 0 0 0.55rem #111a22; border-radius: 0.22rem; }
.manual-section .markdown-body .annot-stage img { box-shadow: none !important; border-radius: 0 !important; background: none !important; }
.manual-section li.pin-target > .pin-num { top: 4px; width: 24px; height: 24px; font-size: 11px; }
.manual-section li.pin-target { padding-left: 50px; }
.manual-section table.pin-table td.n, .manual-section table.pin-table th.n { width: 0.34in; padding: 0.05in 0.04in 0.05in 0.06in !important; text-align: center; }
.manual-section table.pin-table td.n .pin-num { width: 20px; height: 20px; font-size: 10px; }
.manual-section table.pin-table tr { break-inside: avoid; page-break-inside: avoid; }
.manual-section figure.annotated figcaption { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.4; color: #5b6166; }