/* Shared FR27 explanatory tooltip and loading vocabulary. */

/* Escape dismissal persists until a fresh hover or focus entry. */
:is(.issue-note-tooltip, .agenda-note-tooltip).is-dismissed
  :is(.issue-note-tooltip-body, .agenda-note-tooltip-body) {
  visibility: hidden !important;
  opacity: 0 !important;
}

[data-fr27-tooltip] {
  --fr27-tooltip-delay: 140ms;
}

[data-fr27-tooltip-affordance="term"] {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(53, 216, 255, 0.56);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

.fr27-info-glyph {
  position: relative;
  display: inline-grid;
  width: 17px;
  height: 17px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(53, 216, 255, 0.44);
  border-radius: 50%;
  background: rgba(18, 66, 91, 0.16);
  color: #35d8ff;
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  cursor: help;
}

.fr27-info-glyph:hover,
.fr27-info-glyph:focus-visible {
  border-color: rgba(53, 216, 255, 0.84);
  background: rgba(18, 66, 91, 0.34);
  outline: 0;
}

.fr27-tooltip {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(320px, calc(100vw - 20px));
  padding: 9px 10px;
  border: 1px solid rgba(53, 216, 255, 0.42);
  border-radius: 4px;
  background: #061623;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.46);
  color: #c3d7e2;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fr27-type-body, 11.5px);
  font-weight: 430;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 90ms ease, visibility 90ms ease, transform 90ms ease;
}

.fr27-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fr27-skeleton-region {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: transparent;
}

.fr27-skeleton-block,
.fr27-skeleton-circle {
  display: block;
  box-sizing: border-box;
  border: 1px solid rgba(39, 91, 121, 0.48);
  background: rgba(22, 52, 72, 0.72);
  animation: fr27-skeleton-pulse 1.65s ease-in-out infinite;
}

.fr27-skeleton-block {
  width: var(--fr27-skeleton-width, 100%);
  height: var(--fr27-skeleton-height, 9px);
  border-radius: 3px;
}

.fr27-skeleton-circle {
  flex: 0 0 auto;
  width: var(--fr27-skeleton-size, 28px);
  height: var(--fr27-skeleton-size, 28px);
  border-radius: 50%;
}

.fr27-skeleton-stack,
.fr27-skeleton-rows,
.fr27-skeleton-card {
  display: grid;
  min-width: 0;
}

.fr27-skeleton-stack { gap: 7px; }
.fr27-skeleton-rows { gap: 8px; }

.fr27-skeleton-card {
  gap: 10px;
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(31, 78, 105, 0.66);
  border-radius: 4px;
  background: rgba(6, 19, 33, 0.72);
}

.fr27-skeleton-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.fr27-skeleton-row-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 6px;
}

.fr27-skeleton-source {
  width: 42px;
  height: 15px;
}

.fr27-skeleton-briefing {
  display: grid;
  gap: 10px;
  padding: 9px 10px 12px;
}

.fr27-skeleton-briefing .fr27-skeleton-row {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(31, 78, 105, 0.42);
}

.what-changed-list:has(.fr27-skeleton-region) {
  align-items: stretch !important;
}

.changes-ledger-scroll:has(.fr27-skeleton-region)::before {
  display: none;
}

.fr27-skeleton-race {
  display: grid;
  gap: 9px;
  padding: 8px 0 0;
}

.fr27-skeleton-race .fr27-skeleton-row {
  display: grid;
  grid-template-columns: 30px minmax(70px, 0.8fr) minmax(90px, 1.4fr) 35px;
}

.fr27-skeleton-race .fr27-skeleton-circle {
  --fr27-skeleton-size: 28px;
}

.fr27-skeleton-media {
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
}

.fr27-skeleton-media .fr27-skeleton-row {
  display: grid;
  grid-template-columns: 18px minmax(75px, 0.72fr) minmax(90px, 1.3fr) 34px;
}

.fr27-skeleton-workspace {
  display: grid;
  grid-template-columns: minmax(155px, 0.72fr) minmax(0, 1.15fr) minmax(180px, 0.9fr);
  gap: 10px;
  min-height: 430px;
  padding: 10px;
}

.fr27-skeleton-workspace .fr27-skeleton-card:first-child .fr27-skeleton-row {
  min-height: 38px;
}

.fr27-skeleton-chart {
  display: flex;
  min-height: 116px;
  align-items: end;
  gap: 5px;
  padding: 10px 8px 0;
  border: 1px solid rgba(31, 78, 105, 0.5);
  border-radius: 3px;
  background: rgba(3, 15, 26, 0.48);
}

.fr27-skeleton-chart .fr27-skeleton-block {
  flex: 1 1 0;
  height: var(--fr27-skeleton-height, 45%);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.fr27-skeleton-compact {
  display: inline-block;
  width: var(--fr27-skeleton-width, 54px);
  height: var(--fr27-skeleton-height, 10px);
  vertical-align: middle;
}

.fr27-hud-metric-loading {
  color: transparent !important;
}

.fr27-hud-metric-loading::after {
  display: block;
  width: 38px;
  height: 12px;
  margin: 0 auto;
  border: 1px solid rgba(39, 91, 121, 0.4);
  border-radius: 3px;
  background: rgba(22, 52, 72, 0.66);
  content: "";
  animation: fr27-skeleton-pulse 1.65s ease-in-out infinite;
}

@keyframes fr27-skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.92; }
}

@media (max-width: 760px) {
  .fr27-skeleton-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr27-tooltip {
    transition: none;
  }

  .fr27-skeleton-block,
  .fr27-skeleton-circle,
  .fr27-hud-metric-loading::after {
    animation: none;
  }
}

.fr27-skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 286px;
}

.fr27-skeleton-metric {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.fr27-skeleton-metric .fr27-skeleton-block {
  max-width: 100%;
}

/* Shared FR27 control hierarchy. Shell, launcher and data-row geometry stay owned
   by their existing layout styles. These selectors target equivalent actions. */
:root {
  --fr27-control-primary-size: 13px;
  --fr27-control-compact-size: 11.5px;
  --fr27-control-utility-size: 11px;
  --fr27-control-radius: 4px;
  --fr27-control-border: rgba(53, 216, 255, .42);
}

/* Tier 1: destination actions; natural widths and translated copy are retained. */
html body:is(.candidate-page, .candidate-hub-page, .polling-page, .poll-detail-page, .issues-page, .agenda-page)
  :is(.candidate-hub-open, .issue-card-open, .agenda-card-open, .poll-detail-source-cta, .issue-inspector-open,
      .agenda-inspector-open, .issue-history-gateway-cta, .agenda-history-gateway-cta,
      .issue-history-detail-cta, .agenda-history-detail-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 38px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--fr27-control-border);
  border-radius: var(--fr27-control-radius);
  background: rgba(17, 54, 75, .35);
  color: #dff8ff;
  font-family: Inter, sans-serif;
  font-size: var(--fr27-control-primary-size);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Tier 2: readable disclosure/related-row actions, below the primary weight. */
html body :is(.poll-detail-scenario-toggle, .poll-detail-side-summary-action,
             .poll-detail-related-open, .candidate-page .candidate-related-open) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid var(--fr27-control-border);
  border-radius: var(--fr27-control-radius);
  background: rgba(10, 31, 48, .5);
  color: #35d8ff;
  font-family: Inter, sans-serif;
  font-size: var(--fr27-control-compact-size);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .045em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Tier 3: filters, sort, reset and expand-all keep their existing layout/height. */
html body :is(.poll-detail-panel-actions, .polling-segments, .issue-sort-controls,
             .agenda-sort-controls) button,
html body :is(.polling-reset, .candidate-hub-controls select,
             .polling-control select, .polling-wave-select-wrap select) {
  border-color: rgba(53, 216, 255, .26);
  border-radius: var(--fr27-control-radius);
  color: #9bb4c3;
  font-family: Inter, sans-serif;
  font-size: var(--fr27-control-utility-size);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .035em;
}

html body :is(.candidate-hub-open, .issue-card-open, .agenda-card-open, .poll-detail-source-cta, .issue-inspector-open,
             .agenda-inspector-open, .issue-history-gateway-cta, .agenda-history-gateway-cta,
             .issue-history-detail-cta, .agenda-history-detail-cta):hover,
html body :is(.poll-detail-scenario-summary, .poll-detail-side-summary, .poll-detail-related-card,
             .candidate-related-card):hover
  :is(.poll-detail-scenario-toggle, .poll-detail-side-summary-action,
      .poll-detail-related-open, .candidate-related-open) {
  border-color: #35d8ff;
  background: rgba(18, 68, 91, .5);
  color: #dff8ff;
  text-decoration: none;
}

html body :is(.poll-detail-panel-actions, .polling-segments, .issue-sort-controls,
             .agenda-sort-controls) button:hover,
html body .polling-reset:hover {
  border-color: #35d8ff;
  color: #35d8ff;
  background: rgba(18, 68, 91, .3);
}

/* A real outline, independent of hover color; Escape ownership stays in JS. */
html body :is(.candidate-hub-open, .issue-card-open, .agenda-card-open, .poll-detail-source-cta, .poll-detail-back-cta,
             .issue-inspector-open, .agenda-inspector-open,
             .issue-history-gateway-cta, .agenda-history-gateway-cta,
             .poll-detail-scenario-summary, .poll-detail-side-summary,
             .poll-detail-related-card, .candidate-related-card, .polling-reset,
             .fr27-info-glyph, .poll-detail-tooltip-trigger, .candidate-section-info,
             .candidate-hub-title-info, .issue-note-tooltip-trigger,
             .agenda-note-tooltip-trigger, .polling-title-info):focus-visible,
html body :is(.poll-detail-panel-actions, .polling-segments, .issue-sort-controls,
             .agenda-sort-controls, .candidate-hub-controls, .polling-control,
             .polling-wave-select-wrap) :is(button, select, input):focus-visible {
  outline: 2px solid #35d8ff;
  outline-offset: 3px;
}

html body :is(.fr27-info-glyph, .poll-detail-tooltip-trigger, .candidate-section-info,
             .candidate-hub-title-info, .issue-note-tooltip-trigger,
             .agenda-note-tooltip-trigger, .polling-title-info) {
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--fr27-control-border);
  border-radius: 50%;
  background: rgba(18, 66, 91, .16);
  color: #35d8ff;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}
html body :is(.fr27-info-glyph, .poll-detail-tooltip-trigger, .candidate-section-info,
             .candidate-hub-title-info, .issue-note-tooltip-trigger,
             .agenda-note-tooltip-trigger, .polling-title-info):hover {
  border-color: #35d8ff;
  background: rgba(18, 66, 91, .34);
}

/* Disclosure/card outlines stay within the clipped panel boundary. */
html body :is(.poll-detail-scenario-summary, .poll-detail-side-summary,
             .poll-detail-related-card, .candidate-related-card):focus-visible {
  outline-offset: -3px;
}