/* ============================================================
   TOC Compass Widget — Concentric Brass Rings Navigation
   ============================================================ */

/* ---------- Shared Font Awesome brass buttons ---------- */
/*
 * The Font Awesome filter wraps every declared icon in this element.  It is
 * deliberately decorative (the adjacent heading/link text supplies its
 * accessible name) and uses the same brass palette as the compass controls.
 */
.fa-brass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.25em;
  height: 1.25em;
  margin-inline-end: 0.28em;
  vertical-align: middle;
  border: 1.5px solid #5a3300;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f5d98b, #b8860b 60%, #6b4c00 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 240, 150, 0.5);
  color: #3b1800;
  line-height: 1;
}
.fa-brass-icon > .fa-solid,
.fa-brass-icon > .fa-regular,
.fa-brass-icon > .fa-brands {
  font-size: 0.68em;
}
h1 .fa-brass-icon,
h2 .fa-brass-icon,
h3 .fa-brass-icon,
h4 .fa-brass-icon,
h5 .fa-brass-icon,
h6 .fa-brass-icon {
  margin-inline-end: 0.3em;
}

/* Topic landing-page links are generated by topic-directory.lua.  They are a
 * navigation group, not an author-written list, so their icons replace the
 * default bullets without affecting any other list in the book. */
.topic-directory-list {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0;
}
.topic-directory-item {
  margin: 0;
}
.topic-directory-item p {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
}
.topic-directory-item .fa-brass-icon {
  flex: 0 0 auto;
  margin-inline-end: 0.35rem;
}
@media (forced-colors: active) {
  .fa-brass-icon {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
  }
}

/* ---------- Compass trigger and its responsive homes ---------- */
#toc-compass-trigger {
  position: relative;
  z-index: 10000;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #8B6914;
  background: radial-gradient(circle at 38% 35%, #f5d98b, #b8860b 60%, #6b4c00 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 3px rgba(255,240,150,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #3b2200;
  transition: box-shadow 0.2s, transform 0.2s;
  user-select: none;
}

/*
 * A focused inline compass may expose its parent relationship all the way
 * back to the permanent navigation compass.  This viewport-sized layer sits
 * behind both controls and never receives pointer input, so it reads as a
 * circuit trace rather than a second interactive surface.
 */
.compass-local-global-wire {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: visible;
  pointer-events: none;
}
.compass-local-global-wire--rim,
.compass-local-global-wire--core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.compass-local-global-wire--rim {
  stroke: rgba(82, 43, 12, 0.9);
  stroke-width: 6px;
  filter: drop-shadow(0 1px 1px rgba(25, 15, 4, 0.3));
}
.compass-local-global-wire--core {
  stroke: #c8843d;
  stroke-width: 2.6px;
}
#toc-compass-trigger:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 1px 3px rgba(255,240,150,0.7);
  transform: scale(1.08);
}

/*
 * On desktop the script mounts the trigger alongside Quarto's book title.
 * Quarto owns the sidebar markup, so the small flex adjustment deliberately
 * targets only its header rather than replacing any sidebar styles.
 */
#quarto-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
#quarto-sidebar .sidebar-header .sidebar-title {
  min-width: 0;
}
#quarto-sidebar .sidebar-header #toc-compass-trigger {
  width: 34px;
  height: 34px;
  border-width: 2px;
  font-size: 15px;
}

/* The homepage remains the book's home destination, but is represented by
 * the brand/title and compass rather than a redundant first sidebar row. */
#quarto-sidebar li.sidebar-root-page-entry {
  display: none !important;
}

/*
 * The compact reader control is intentionally independent of Quarto's
 * collapsible header.  It remains at the top of the viewport when the left
 * navigation is unavailable, including on phones.
 */
#toc-compass-mobile-pane {
  display: none;
  position: fixed;
  inset: 0 0 auto;
  height: calc(48px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 0 0 0.6rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(80, 55, 10, 0.22);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  z-index: 9999;
}
body.toc-compass-mobile-active #toc-compass-mobile-pane {
  display: flex;
}
body.toc-compass-mobile-active #toc-compass-mobile-pane::after {
  content: "Navigation";
  margin-left: 0.55rem;
  color: #3b2200;
  font-family: Georgia, serif;
  font-size: 0.9rem;
}
body.toc-compass-mobile-active #toc-compass-mobile-pane #toc-compass-trigger {
  width: 34px;
  height: 34px;
  border-width: 2px;
  font-size: 15px;
}

/* Keep Quarto's existing fixed secondary navigation clear of this persistent
 * compact pane.  The content offset is handled by Quarto's own header layout. */
body.toc-compass-mobile-active #quarto-header {
  top: calc(48px + env(safe-area-inset-top, 0px));
}
body.nav-fixed.toc-compass-mobile-active {
  padding-top: calc(112px + env(safe-area-inset-top, 0px));
}

/* ---------- Overlay backdrop ---------- */
#toc-compass-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
#toc-compass-backdrop.open { display: block; }

/* ---------- Main compass container ---------- */
#toc-compass {
  display: none;
  position: fixed;
  z-index: 10001;
  /* centred on screen; JS may override for drag */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px), calc(100vh - 24px));
  height: min(520px, calc(100vw - 24px), calc(100vh - 24px));
  user-select: none;
  touch-action: none;
}
#toc-compass.open { display: block; }

/* SVG fills the container */
#toc-compass svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Ring track (decorative groove lines between rings) ---------- */
.compass-ring-groove {
  fill: none;
  stroke: #5a3a00;
  stroke-width: 2;
  opacity: 0.6;
}

/* ---------- Ring background arcs (brass) ---------- */
.compass-ring-bg {
  fill: none;
  stroke: url(#brassGradient);
  stroke-width: 0; /* set per ring in JS */
}

/* ---------- Buttons on the rings ---------- */
.compass-btn {
  cursor: pointer;
}
.compass-btn circle {
  fill: url(#brassBtn);
  stroke: #5a3300;
  stroke-width: 1.5;
  transition: filter 0.15s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.compass-btn:hover circle {
  filter: drop-shadow(0 0 8px rgba(255,210,80,0.9)) drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.compass-btn text {
  font-size: 11px;
  font-family: 'Georgia', serif;
  fill: #3b2000;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

/* icon inside button */
.compass-btn .btn-icon {
  font-size: 13px;
  font-family: inherit;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #3b1800;
}

/* ---------- Center button ---------- */
#compass-center {
  cursor: pointer;
}
#compass-center circle {
  fill: url(#brassCenterGrad);
  stroke: #5a3300;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: filter 0.15s;
}
#compass-center:hover circle {
  filter: drop-shadow(0 0 12px rgba(255,220,80,1)) drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
#compass-center text {
  font-size: 14px;
  fill: #3b1800;
  font-family: 'Georgia', serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* ---------- Tooltip ---------- */
#compass-tooltip {
  position: fixed;
  z-index: 10100;
  pointer-events: none;
  background: rgba(40, 22, 0, 0.92);
  color: #f5e0a0;
  border: 1px solid #b8860b;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: 'Georgia', serif;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  display: none;
}

/* ---------- Close button ---------- */
#compass-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #8B6914;
  background: #3b2000;
  color: #f5d98b;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  z-index: 10002;
  font-family: sans-serif;
}
#compass-close:hover { background: #5a3000; }

/* ---------- Drag handle hint ---------- */
#toc-compass.dragging { cursor: grabbing; }

/*
 * Local Font Awesome SVG renderer for brass icons.  It keeps the icons crisp
 * at every scale and remains available when the CDN stylesheet is blocked or
 * unavailable. The SVGs are official Font Awesome Free assets (CC BY 4.0),
 * kept under quarto-runtime/assets/fontawesome/solid.
 */
/*
 * Only the locally bundled icons use the SVG mask renderer.  Do not apply
 * this to every Font Awesome class: an icon without a local SVG should retain
 * Font Awesome's normal glyph as its fallback.
 */
.fa-brass-icon > i:is(
  .fa-book-open, .fa-compass, .fa-house, .fa-check,
  .fa-wifi, .fa-wifi-exclamation, .fa-wifi-slash, .fa-bicycle,
  .fa-address-card, .fa-bullseye, .fa-car-burst, .fa-chalkboard,
  .fa-clipboard-list, .fa-code-branch, .fa-dice, .fa-exclamation,
  .fa-face-grin-beam-sweat, .fa-flag, .fa-gamepad, .fa-gavel,
  .fa-id-card, .fa-kiwi-bird, .fa-microchip, .fa-ruler-combined,
  .fa-screwdriver-wrench, .fa-scroll, .fa-share-nodes,
  .fa-square-root-variable, .fa-toggle-off, .fa-toggle-on,
  .fa-tower-cell, .fa-triangle-exclamation, .fa-umbrella-beach,
  .fa-users
) {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  /* Keep a non-zero em size: the SVG mask dimensions are relative to this
     element, and zero here makes the icon disappear entirely. */
  font-size: 1em;
}

/*
 * Font Awesome supplies its glyph through ::before.  A masked SVG and that
 * glyph painted in the same element produce the apparent double icon seen in
 * headings.  Suppress the pseudo-glyph only for the mapped local SVGs above;
 * unmapped icons continue to use Font Awesome normally.
 */
.fa-brass-icon > i:is(
  .fa-book-open, .fa-compass, .fa-house, .fa-check,
  .fa-wifi, .fa-wifi-exclamation, .fa-wifi-slash, .fa-bicycle,
  .fa-address-card, .fa-bullseye, .fa-car-burst, .fa-chalkboard,
  .fa-clipboard-list, .fa-code-branch, .fa-dice, .fa-exclamation,
  .fa-face-grin-beam-sweat, .fa-flag, .fa-gamepad, .fa-gavel,
  .fa-id-card, .fa-kiwi-bird, .fa-microchip, .fa-ruler-combined,
  .fa-screwdriver-wrench, .fa-scroll, .fa-share-nodes,
  .fa-square-root-variable, .fa-toggle-off, .fa-toggle-on,
  .fa-tower-cell, .fa-triangle-exclamation, .fa-umbrella-beach,
  .fa-users
)::before {
  content: none !important;
}

.fa-brass-icon > i.fa-book-open { -webkit-mask-image: url("../assets/fontawesome/solid/book-open.svg"); mask-image: url("../assets/fontawesome/solid/book-open.svg"); }
.fa-brass-icon > i.fa-compass { -webkit-mask-image: url("../assets/fontawesome/solid/compass.svg"); mask-image: url("../assets/fontawesome/solid/compass.svg"); }
.fa-brass-icon > i.fa-house { -webkit-mask-image: url("../assets/fontawesome/solid/house.svg"); mask-image: url("../assets/fontawesome/solid/house.svg"); }
.fa-brass-icon > i.fa-check { -webkit-mask-image: url("../assets/fontawesome/solid/check.svg"); mask-image: url("../assets/fontawesome/solid/check.svg"); }
.fa-brass-icon > i.fa-wifi,
.fa-brass-icon > i.fa-wifi-exclamation,
.fa-brass-icon > i.fa-wifi-slash { -webkit-mask-image: url("../assets/fontawesome/solid/wifi.svg"); mask-image: url("../assets/fontawesome/solid/wifi.svg"); }
.fa-brass-icon > i.fa-bicycle { -webkit-mask-image: url("../assets/fontawesome/solid/bicycle.svg"); mask-image: url("../assets/fontawesome/solid/bicycle.svg"); }
.fa-brass-icon > i.fa-address-card { -webkit-mask-image: url("../assets/fontawesome/solid/address-card.svg"); mask-image: url("../assets/fontawesome/solid/address-card.svg"); }
.fa-brass-icon > i.fa-bullseye { -webkit-mask-image: url("../assets/fontawesome/solid/bullseye.svg"); mask-image: url("../assets/fontawesome/solid/bullseye.svg"); }
.fa-brass-icon > i.fa-car-burst { -webkit-mask-image: url("../assets/fontawesome/solid/car-burst.svg"); mask-image: url("../assets/fontawesome/solid/car-burst.svg"); }
.fa-brass-icon > i.fa-chalkboard { -webkit-mask-image: url("../assets/fontawesome/solid/chalkboard.svg"); mask-image: url("../assets/fontawesome/solid/chalkboard.svg"); }
.fa-brass-icon > i.fa-clipboard-list { -webkit-mask-image: url("../assets/fontawesome/solid/clipboard-list.svg"); mask-image: url("../assets/fontawesome/solid/clipboard-list.svg"); }
.fa-brass-icon > i.fa-code-branch { -webkit-mask-image: url("../assets/fontawesome/solid/code-branch.svg"); mask-image: url("../assets/fontawesome/solid/code-branch.svg"); }
.fa-brass-icon > i.fa-dice { -webkit-mask-image: url("../assets/fontawesome/solid/dice.svg"); mask-image: url("../assets/fontawesome/solid/dice.svg"); }
.fa-brass-icon > i.fa-exclamation { -webkit-mask-image: url("../assets/fontawesome/solid/exclamation.svg"); mask-image: url("../assets/fontawesome/solid/exclamation.svg"); }
.fa-brass-icon > i.fa-face-grin-beam-sweat { -webkit-mask-image: url("../assets/fontawesome/solid/face-grin-beam-sweat.svg"); mask-image: url("../assets/fontawesome/solid/face-grin-beam-sweat.svg"); }
.fa-brass-icon > i.fa-flag { -webkit-mask-image: url("../assets/fontawesome/solid/flag.svg"); mask-image: url("../assets/fontawesome/solid/flag.svg"); }
.fa-brass-icon > i.fa-gamepad { -webkit-mask-image: url("../assets/fontawesome/solid/gamepad.svg"); mask-image: url("../assets/fontawesome/solid/gamepad.svg"); }
.fa-brass-icon > i.fa-gavel { -webkit-mask-image: url("../assets/fontawesome/solid/gavel.svg"); mask-image: url("../assets/fontawesome/solid/gavel.svg"); }
.fa-brass-icon > i.fa-id-card { -webkit-mask-image: url("../assets/fontawesome/solid/id-card.svg"); mask-image: url("../assets/fontawesome/solid/id-card.svg"); }
.fa-brass-icon > i.fa-kiwi-bird { -webkit-mask-image: url("../assets/fontawesome/solid/kiwi-bird.svg"); mask-image: url("../assets/fontawesome/solid/kiwi-bird.svg"); }
.fa-brass-icon > i.fa-microchip { -webkit-mask-image: url("../assets/fontawesome/solid/microchip.svg"); mask-image: url("../assets/fontawesome/solid/microchip.svg"); }
.fa-brass-icon > i.fa-ruler-combined { -webkit-mask-image: url("../assets/fontawesome/solid/ruler-combined.svg"); mask-image: url("../assets/fontawesome/solid/ruler-combined.svg"); }
.fa-brass-icon > i.fa-screwdriver-wrench { -webkit-mask-image: url("../assets/fontawesome/solid/screwdriver-wrench.svg"); mask-image: url("../assets/fontawesome/solid/screwdriver-wrench.svg"); }
.fa-brass-icon > i.fa-scroll { -webkit-mask-image: url("../assets/fontawesome/solid/scroll.svg"); mask-image: url("../assets/fontawesome/solid/scroll.svg"); }
.fa-brass-icon > i.fa-share-nodes { -webkit-mask-image: url("../assets/fontawesome/solid/share-nodes.svg"); mask-image: url("../assets/fontawesome/solid/share-nodes.svg"); }
.fa-brass-icon > i.fa-square-root-variable { -webkit-mask-image: url("../assets/fontawesome/solid/square-root-variable.svg"); mask-image: url("../assets/fontawesome/solid/square-root-variable.svg"); }
.fa-brass-icon > i.fa-toggle-off { -webkit-mask-image: url("../assets/fontawesome/solid/toggle-off.svg"); mask-image: url("../assets/fontawesome/solid/toggle-off.svg"); }
.fa-brass-icon > i.fa-toggle-on { -webkit-mask-image: url("../assets/fontawesome/solid/toggle-on.svg"); mask-image: url("../assets/fontawesome/solid/toggle-on.svg"); }
.fa-brass-icon > i.fa-tower-cell { -webkit-mask-image: url("../assets/fontawesome/solid/tower-cell.svg"); mask-image: url("../assets/fontawesome/solid/tower-cell.svg"); }
.fa-brass-icon > i.fa-triangle-exclamation { -webkit-mask-image: url("../assets/fontawesome/solid/triangle-exclamation.svg"); mask-image: url("../assets/fontawesome/solid/triangle-exclamation.svg"); }
.fa-brass-icon > i.fa-umbrella-beach { -webkit-mask-image: url("../assets/fontawesome/solid/umbrella-beach.svg"); mask-image: url("../assets/fontawesome/solid/umbrella-beach.svg"); }
.fa-brass-icon > i.fa-users { -webkit-mask-image: url("../assets/fontawesome/solid/users.svg"); mask-image: url("../assets/fontawesome/solid/users.svg"); }