/* P5 country profiles on the start page: hover card (P5CountryTooltip), profile panel / bottom sheet
   (P5CountryProfilePanel) and the globe's hover, focus and selection outlines. Colours follow the start
   page's green baize, so the card and panel look the same in light and dark mode, like the page itself. */

/* ---------- globe additions (the existing globe rules stay as they are) ---------- */
.pv-globe .p5c:focus { outline: none; }
.pv-globe .p5ring, .pv-globe .p5sel { fill: none; pointer-events: none; stroke-linejoin: round; }
.pv-globe .p5ring { stroke: #f3d47d; stroke-width: .75; }
.pv-globe .p5ring.is-focus { stroke-width: 1.1; }
.pv-globe .p5sel { stroke: #f3efe4; stroke-width: .9; }
.pv-globe.on-p5 .hit { cursor: pointer; }

/* ---------- overlay layer: sits above the dashboard frame, never takes the pointer itself ---------- */
.p5x-layer {
  --p5x-ink: #f3efe4; --p5x-ink-2: rgb(243 239 228 / .9); --p5x-muted: #bccdc2; --p5x-gold: #e2bd5b; --p5x-gold-2: #f3d47d;
  --p5x-line: rgb(243 239 228 / .14); --p5x-line-2: rgb(243 239 228 / .22); --p5x-well: rgb(10 34 26 / .38);
  --fx-l: 0px; --fx-t: 0px; --fx-r: 0px; --fx-b: 0px; --fx-w: 100vw; --fx-h: 100vh;
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  font-family: var(--font-anthropic-sans, ui-sans-serif, system-ui, sans-serif); color: var(--p5x-ink);
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
.p5x-layer *, .p5x-layer *::before, .p5x-layer *::after { box-sizing: border-box; }
.p5x-layer [hidden] { display: none !important; }
.p5x-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- shared bits ---------- */
.p5x-flag { display: block; flex: none; overflow: hidden; border-radius: 3px; background: rgb(243 239 228 / .1);
            box-shadow: 0 0 0 1px rgb(243 239 228 / .28), 0 2px 6px -2px rgb(0 0 0 / .5); }
.p5x-flag svg { display: block; width: 100%; height: 100%; }
.p5x-seal { flex: none; width: 15px; height: 15px; color: var(--p5x-gold-2); }
.p5x-seal svg { display: block; width: 100%; height: 100%; }

/* ---------- hover card ---------- */
.p5x-tip {
  position: absolute; left: 0; top: 0; width: max-content; min-width: 236px; max-width: min(360px, calc(var(--fx-w) - 16px));
  padding: 12px 14px 11px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgb(38 93 73 / .985), rgb(23 61 48 / .985));
  border: 1px solid rgb(226 189 91 / .38);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .6), 0 2px 8px -2px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 130ms ease-in, transform 130ms ease-in, visibility 0s linear 130ms;
}
.p5x-tip.is-on { opacity: 1; visibility: visible; transform: none;
                 transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s; }
.p5x-tip-head { display: flex; gap: 10px; align-items: flex-start; }
.p5x-tip .p5x-flag { height: 20px; width: calc(20px * var(--ar, 1.5)); margin-top: 2px; }
.p5x-tip-name { margin: 0; font-family: var(--font-anthropic-serif, Georgia, serif); font-size: 16.5px; line-height: 1.25; font-weight: 500;
                color: var(--p5x-ink); text-wrap: balance; }
.p5x-tip-role { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; font-weight: 600;
                letter-spacing: .005em; color: var(--p5x-gold); }
.p5x-tip-role .p5x-seal { width: 13px; height: 13px; margin-top: 2px; }
.p5x-tip-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; margin: 10px 0 0; padding: 9px 0 0;
                 border-top: 1px solid var(--p5x-line); font-size: 13px; line-height: 1.4; }
.p5x-tip-facts dt { margin: 0; color: var(--p5x-muted); }
.p5x-tip-facts dd { margin: 0; color: var(--p5x-ink); font-variant-numeric: tabular-nums; }
.p5x-tip-hint { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; font-size: 11.5px; color: var(--p5x-muted); }
.p5x-tip-hint svg { width: 12px; height: 12px; flex: none; color: var(--p5x-gold); }

/* ---------- profile panel: slides in from the right of the dashboard frame ---------- */
.p5x-panel {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto; overflow: hidden;
  top: calc(var(--fx-t) + 12px); bottom: calc(var(--fx-b) + 12px); right: calc(var(--fx-r) + 12px);
  width: clamp(380px, 30vw, 440px); max-width: calc(var(--fx-w) - 24px);
  background: linear-gradient(180deg, #275f4b 0, #1f4f3e 220px, #173d30 100%);
  border: 1px solid var(--p5x-line-2); border-radius: 12px; color: var(--p5x-ink);
  box-shadow: -24px 0 48px -24px rgb(0 0 0 / .6), 0 18px 44px -14px rgb(0 0 0 / .5);
  visibility: hidden; transform: translateX(calc(100% + 40px));
  transition: transform 300ms cubic-bezier(.22, .8, .24, 1), visibility 0s linear 300ms;
}
.p5x-panel.is-open { visibility: visible; transform: none; transition: transform 300ms cubic-bezier(.22, .8, .24, 1), visibility 0s; }
.p5x-panel:focus { outline: none; }

/* bottom sheet on phones and tablets */
.p5x-panel[data-mode="sheet"] {
  /* full width on phones; on tablets a centred sheet, so lines stay a readable length */
  top: auto; bottom: var(--fx-b); width: auto; max-width: none;
  left: calc(var(--fx-l) + max(0px, (var(--fx-w) - 680px) / 2)); right: calc(var(--fx-r) + max(0px, (var(--fx-w) - 680px) / 2));
  max-height: calc(var(--fx-h) * .86); border-radius: 16px 16px 0 0; border-bottom: 0;
  box-shadow: 0 -16px 40px -12px rgb(0 0 0 / .55);
  transform: translateY(calc(100% + 24px));
}
.p5x-panel[data-mode="sheet"].is-open { transform: none; }
.p5x-grab { display: none; }
.p5x-panel[data-mode="sheet"] .p5x-grab { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgb(243 239 228 / .3); }

.p5x-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid transparent;
           transition: border-color .2s, background-color .2s; }
.p5x-panel.is-scrolled .p5x-bar { border-bottom-color: var(--p5x-line); background: rgb(23 61 48 / .55); }
.p5x-bar .p5x-flag { display: none; height: 16px; width: calc(16px * var(--ar, 1.5)); }
@keyframes p5x-rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.p5x-bar-title { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p5x-muted);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p5x-bar-title b { font-weight: 600; color: var(--p5x-ink); letter-spacing: .02em; text-transform: none; font-size: 14px; display: none; }
.p5x-panel.is-scrolled .p5x-bar .p5x-flag { display: block; animation: p5x-rise .2s ease-out; }
.p5x-panel.is-scrolled .p5x-bar-title span { display: none; }
.p5x-panel.is-scrolled .p5x-bar-title b { display: inline; }
.p5x-close { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; cursor: pointer;
             border-radius: 999px; border: 1px solid var(--p5x-line-2); background: rgb(243 239 228 / .06); color: var(--p5x-ink);
             font: inherit; transition: background-color .15s, border-color .15s; }
.p5x-close:hover { background: rgb(243 239 228 / .14); border-color: rgb(243 239 228 / .45); }
.p5x-close:focus-visible { outline: 2px solid var(--p5x-gold-2); outline-offset: 2px; }
.p5x-close svg { width: 16px; height: 16px; }
.p5x-panel[data-mode="sheet"] .p5x-close { width: 44px; height: 44px; }

.p5x-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
              scrollbar-width: thin; scrollbar-color: rgb(243 239 228 / .28) transparent; -webkit-overflow-scrolling: touch; }
.p5x-scroll:focus { outline: none; }
.p5x-content { transition: opacity 150ms ease, transform 150ms ease; }
.p5x-content.is-swapping { opacity: 0; transform: translateY(4px); transition-duration: 110ms; }

/* section A: header */
.p5x-head { padding: 2px 22px 20px; }
.p5x-head .p5x-flag { height: 44px; width: calc(44px * var(--ar, 1.5)); border-radius: 4px; }
.p5x-name { margin: 14px 0 0; font-family: var(--font-anthropic-serif, Georgia, serif); font-weight: 400; font-size: 26px; line-height: 1.15;
            color: var(--p5x-ink); text-wrap: balance; overflow-wrap: anywhere; }
.p5x-name:focus { outline: none; }
.p5x-status { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 5px 11px 5px 7px; border-radius: 999px;
              background: rgb(226 189 91 / .12); border: 1px solid rgb(226 189 91 / .4); color: var(--p5x-gold-2);
              font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; }
.p5x-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 16px 0 0; }
.p5x-fact { min-width: 0; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--p5x-well); border: 1px solid var(--p5x-line); }
.p5x-fact.wide { grid-column: 1 / -1; }
.p5x-fact dt { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--p5x-muted); }
.p5x-fact dd { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--p5x-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p5x-fact dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--p5x-muted); }
.p5x-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--p5x-muted); }

/* sections B to D */
.p5x-sec { padding: 18px 22px 20px; border-top: 1px solid var(--p5x-line); }
.p5x-sec h3 { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--p5x-gold); }
.p5x-sec p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--p5x-ink-2); text-wrap: pretty; }
.p5x-sec p + p { margin-top: 10px; }
.p5x-sec .p5x-verified { display: flex; align-items: center; gap: 7px; margin: -2px 0 12px; font-size: 12px; line-height: 1.45; color: var(--p5x-muted); }
.p5x-verified i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--p5x-gold); box-shadow: 0 0 0 3px rgb(226 189 91 / .18); }
.p5x-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p5x-act { margin: 0; padding: 12px 14px 12px; border-radius: 10px; background: var(--p5x-well); border: 1px solid var(--p5x-line); }
.p5x-act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--p5x-muted); font-variant-numeric: tabular-nums; }
.p5x-type { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
            font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.45; }
.p5x-type[data-type="adopted-resolution"] { color: #a7e3bf; background: rgb(167 227 191 / .08); }
.p5x-type[data-type="completed-action"] { color: #f3d47d; background: rgb(243 212 125 / .08); }
.p5x-type[data-type="official-position"] { color: #c9dcf2; background: rgb(201 220 242 / .08); }
.p5x-type[data-type="proposal"] { color: #f4bda6; background: rgb(244 189 166 / .08); }
.p5x-act-title { margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--p5x-ink); text-wrap: balance; }
.p5x-sec .p5x-act-detail { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--p5x-muted); }
.p5x-sec .p5x-act-text { margin: 8px 0 0; font-size: 14px; line-height: 1.58; }
.p5x-sec .p5x-act-src { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: var(--p5x-muted); }
.p5x-layer a { color: var(--p5x-gold-2); text-decoration: underline; text-decoration-color: rgb(243 212 125 / .4); text-underline-offset: 2px;
               text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.p5x-layer a:hover { text-decoration-color: currentColor; }
.p5x-layer a:focus-visible { outline: 2px solid var(--p5x-gold-2); outline-offset: 2px; border-radius: 2px; }
.p5x-ext { display: inline-block; width: .72em; height: .72em; margin-left: .2em; vertical-align: baseline; opacity: .8; }

/* sources and footer */
.p5x-sources { margin: 0; }
.p5x-sources > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 2px 0;
                         font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--p5x-gold); }
.p5x-sources > summary::-webkit-details-marker { display: none; }
.p5x-sources > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
                                 transform: rotate(-45deg); transition: transform .2s; margin-right: 2px; }
.p5x-sources[open] > summary::before { transform: rotate(45deg); }
.p5x-sources > summary span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--p5x-muted); font-size: 12px; }
.p5x-sources > summary:focus-visible { outline: 2px solid var(--p5x-gold-2); outline-offset: 3px; border-radius: 3px; }
.p5x-src-group { margin: 12px 0 0; }
.p5x-src-group h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--p5x-ink); }
.p5x-src-group ul { margin: 0; padding: 0 0 0 16px; display: grid; gap: 5px; list-style: disc; }
.p5x-src-group li { font-size: 12.5px; line-height: 1.45; color: var(--p5x-muted); }
.p5x-src-group li::marker { color: rgb(243 239 228 / .35); }
.p5x-foot { margin: 0; padding: 14px 22px 24px; border-top: 1px solid var(--p5x-line); font-size: 12px; line-height: 1.55; color: var(--p5x-muted); }

/* reduced motion: fades instead of movement */
@media (prefers-reduced-motion: reduce) {
  .p5x-tip, .p5x-tip.is-on { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .p5x-tip.is-on { transition: opacity 120ms linear, visibility 0s; }
  .p5x-panel, .p5x-panel[data-mode="sheet"] { transform: none; opacity: 0; transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .p5x-panel.is-open, .p5x-panel[data-mode="sheet"].is-open { opacity: 1; transition: opacity 160ms linear, visibility 0s; }
  .p5x-content, .p5x-content.is-swapping { transform: none; transition: opacity 100ms linear; }
  .p5x-panel.is-scrolled .p5x-bar .p5x-flag { animation: none; }
  .p5x-sources > summary::before { transition: none; }
}
@media (forced-colors: active) {
  .p5x-tip, .p5x-panel { border: 1px solid CanvasText; }
  .p5x-type { border-color: CanvasText; }
}