/* ============================================================
   The Council speaks from the terrace: markers over the companions who have something to say,
   the dialogue box under the painting, and everything at a glance. Loads after v3.css.
   ============================================================ */
.pano2.painted .pp { cursor: pointer; }
.pano2.painted .pp.left .pp-fig { opacity: 1; filter: grayscale(.3) brightness(.92) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }
.pano2.painted .pp.fallen .pp-fig { opacity: 1; filter: grayscale(1) brightness(.85) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }
.pano2.painted .pp-fig { transition: filter .25s, transform .25s; }
.pano2.painted .pp.on .pp-fig { transform: translateY(-4px); filter: drop-shadow(0 0 12px rgba(255, 236, 180, .95)) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }
.pano-track.focus .pp:not(.on):not(:hover) .pp-fig { filter: brightness(.55) saturate(.6) drop-shadow(0 6px 8px rgba(40, 24, 8, .4)); }
.pano-track.focus .pp:not(.on):not(:hover) .pp-name { opacity: .6; }

/* markers: gold good news, red a warning, a letter from afar, green the warner, a candle for the fallen */
.pp .mk { position: absolute; z-index: 2; left: 50%; top: -38px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #2a1a08;
  background: radial-gradient(circle at 40% 35%, #fbe6a8, #c9962f); box-shadow: 0 0 0 2px #2a1d12, 0 0 14px rgba(255, 210, 120, .9); animation: mkBob 2.4s ease-in-out infinite; }
.pp .mk svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp .mk.warn { background: radial-gradient(circle at 40% 35%, #f5a38f, #a3271b); color: #fff3e6; box-shadow: 0 0 0 2px #2a1d12, 0 0 14px rgba(240, 90, 60, .8); }
.pp .mk.afar { background: radial-gradient(circle at 40% 35%, #efe2c4, #a88a5a); color: #3a2a14; box-shadow: 0 0 0 2px #2a1d12, 0 0 10px rgba(240, 220, 170, .6); }
.pp .mk.warner { background: radial-gradient(circle at 40% 35%, #c4d08e, #5c6a35); color: #f4f7e4; box-shadow: 0 0 0 2px #2a1d12, 0 0 14px rgba(150, 190, 90, .8); }
.pp .mk.mem { background: radial-gradient(circle at 40% 35%, #555, #222); color: #ffcf7a; box-shadow: 0 0 0 2px #2a1d12, 0 0 12px rgba(255, 190, 90, .5); animation: none; }
.pp .mk b { position: absolute; right: -6px; top: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #1e150c; color: #f3d690; font: 700 10px/16px var(--font-display); box-shadow: 0 0 0 1px var(--gold-line); }
@keyframes mkBob { 50% { transform: translate(-50%, -5px); } }

/* the dialogue box under the painting */
.cv-dlg { position: relative; z-index: 4; min-height: 150px; padding: 16px 26px 18px; color: #f3e6c6;
  background: linear-gradient(rgba(16, 11, 7, .86), rgba(16, 11, 7, .93)), var(--oak); background-size: auto, 600px;
  border-top: 1px solid rgba(217, 180, 90, .8); border-bottom: 1px solid rgba(217, 180, 90, .45); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7); }
.cv-dlg-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "face who nav" "face body nav"; gap: 4px 18px; align-items: start; }
.cv-dlg-in > .cv-face { grid-area: face; } .cv-dlg-in > .cv-who { grid-area: who; } .cv-dlg-in > .cv-body, .cv-dlg-in > .cv-intro { grid-area: body; } .cv-dlg-in > .cv-nav { grid-area: nav; }
.cv-dlg-in.enter { animation: cvIn .28s ease; }
@keyframes cvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cv-dots { display: flex; gap: 2px; justify-content: center; }
.cv-dots button { position: relative; width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; }
.cv-dots button::after { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 230, 180, .35); transition: all .2s; }
.cv-dots button.on::after { left: 2px; width: 18px; background: #ffe2a0; }
.cv-face { appearance: none; border: 0; padding: 0; cursor: pointer; width: 76px; height: 76px; border-radius: 50%; background: #3a2a1a center / cover; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 5px rgba(0, 0, 0, .5), 0 0 18px rgba(246, 205, 110, .45); }
.cv-face.afar { filter: sepia(.55) saturate(.7); box-shadow: 0 0 0 2px rgba(217, 180, 90, .6), 0 0 0 5px rgba(0, 0, 0, .5); }
.cv-face.fallen { filter: grayscale(1); }
.cv-face.warner { box-shadow: 0 0 0 2px #9aab64, 0 0 0 5px rgba(0, 0, 0, .5), 0 0 18px rgba(150, 190, 90, .5); }
.cv-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cv-who b { font: 700 15px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #ffe2a0; }
.cv-tag { padding: 2px 9px; border-radius: 99px; font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase; background: rgba(159, 210, 126, .14); color: #a9d98c; }
.cv-tag.afar { background: rgba(240, 220, 170, .12); color: #e3cf9f; }
.cv-tag.warner { background: rgba(170, 200, 110, .14); color: #c4d08e; }
.cv-tag.fallen { background: rgba(255, 255, 255, .08); color: #cfc3ad; }
.cv-how { display: block; margin-top: 4px; font: 600 10px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: #bfa77a; }
.cv-line { margin-top: 10px; }
.cv-topic { font: 600 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #bfa77a; }
.cv-line q { display: block; margin-top: 3px; font-size: 19px; line-height: 1.38; font-style: italic; color: #fbf1da; }
.cv-line q.afar { color: #e9dcbc; }
.cv-data { display: flex; gap: 8px; align-items: baseline; margin-top: 7px; font-size: 14.5px; color: #cdbb94; }
.cv-data i { font-style: normal; font-weight: 700; }
.cv-data.good i { color: #9fd27e; }
.cv-data.bad i { color: #ff8f78; }
.cv-idle { margin: 8px 0 0; font-size: 18px; font-style: italic; color: #e9dcbc; }
.cv-intro p { margin: 0; font-size: 18px; }
.cv-faces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cv-faces button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #3a2a1a center / cover; box-shadow: 0 0 0 2px var(--gold-line); cursor: pointer; }
.cv-nav { display: grid; justify-items: end; gap: 10px; }
.cv-row { display: flex; gap: 8px; align-items: center; }
.cv-n { font: 600 12px var(--font-display); letter-spacing: .08em; color: #cdb88f; min-width: 52px; text-align: center; }
.cv-ib { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 230, 180, .4); background: rgba(0, 0, 0, .3); color: #f3e6c6; display: grid; place-items: center; cursor: pointer; }
.cv-ib svg { width: 18px; height: 18px; }
.cv-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 230, 180, .35); background: none; color: #e9dcbc; border-radius: 99px; padding: 6px 12px; font: 600 11px var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.cv-dlg .rb-btn-gold { border: 0; cursor: pointer; }
.cv-dlg .rb-btn-gold svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .cv-dlg { padding: 14px 14px 16px; }
  .cv-dlg-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "face" "who" "body" "nav"; gap: 8px; }
  .cv-face { width: 64px; height: 64px; margin: 2px 0 0 3px; }
  .cv-who { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cv-nav { justify-items: center; margin-top: 6px; }
  .cv-line q { font-size: 17px; }
}

/* everything at a glance */
.cv-glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cv-glance button { appearance: none; border: 0; background: none; color: inherit; width: 100%; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 6px; border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.cv-glance button:hover { background: var(--wash); }
.cv-glance i { width: 34px; height: 34px; border-radius: 50%; background: #3a2a1a center / cover; box-shadow: 0 0 0 1.5px var(--gold-line); }
.cv-glance b { font: 600 11.5px var(--font-display); letter-spacing: .06em; }
.cv-line .cv-data + q { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .cv-dlg-in.enter { animation: none; } }