/* Ensinamentos — Watch Dogs radial skill chart */

.pml-open {
  overflow: hidden;
}

.pml {
  position: fixed;
  inset: 0;
  z-index: 7620;
  display: grid;
  place-items: stretch;
  font: 500 13px/1.45 "Figtree", "Segoe UI", system-ui, sans-serif;
  color: #e8eef6;
}

.pml[hidden] {
  display: none;
}

.pml__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 14, 0.84);
  backdrop-filter: blur(10px);
}

.pml__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  margin: 14px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 42% 36% at 50% 48%, rgba(56, 189, 248, 0.06), transparent 70%),
    radial-gradient(ellipse 30% 28% at 18% 12%, rgba(248, 113, 113, 0.07), transparent),
    radial-gradient(ellipse 28% 26% at 86% 10%, rgba(251, 191, 36, 0.07), transparent),
    rgba(6, 10, 18, 0.97);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.pml__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 8px;
}

.pml__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font: 700 12px/1 "Figtree", system-ui, sans-serif;
  cursor: pointer;
}

.pml__back[hidden] {
  display: none;
}

.pml__back-icon {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.pml__back-icon svg {
  width: 14px;
  height: 14px;
}

.pml__brand {
  min-width: 0;
  flex: 1;
}

.pml__kicker {
  margin: 0;
  font: 800 10px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;
}

.pml__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
}

.pml-crumb__btn {
  padding: 0;
  border: 0;
  background: none;
  color: #94a3b8;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.pml-crumb__btn:hover {
  color: #fde68a;
}

.pml-crumb__sep {
  color: #475569;
  font-size: 12px;
}

.pml-crumb__here {
  color: #e2e8f0;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pml__title {
  margin: 6px 0 0;
  font: 800 22px/1.15 "Syne", system-ui, sans-serif;
}

.pml__hint {
  margin: 6px 0 0;
  max-width: 62ch;
  color: #94a3b8;
}

.pml__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: flex-end;
  max-width: 280px;
  margin-left: auto;
}

.pml-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font: 700 10px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pml-leg i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.35);
}

.pml-leg i.is-known {
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35);
}

.pml-leg i.is-ready {
  background: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.65);
}

.pml-leg i.is-frontier {
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
}

.pml-leg i.is-locked {
  background: transparent;
  border: 1.5px solid #64748b;
  box-shadow: none;
}

.pml__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
  color: #cbd5e1;
  font-size: 22px;
  cursor: pointer;
}

.pml__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
}

.pml__sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pml-sector {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
  color: #94a3b8;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.pml-sector.is-on {
  border-color: color-mix(in srgb, var(--pml-sector, #fbbf24) 55%, transparent);
  background: color-mix(in srgb, var(--pml-sector, #fbbf24) 18%, transparent);
  color: #f8fafc;
}

.pml__search {
  flex: 1 1 160px;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
}

.pml__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pml-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: transparent;
  color: #94a3b8;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  cursor: pointer;
}

.pml-chip[hidden] {
  display: none;
}

.pml-chip.is-on {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.pml__count {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.pml__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
  gap: 0;
  min-height: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.pml__canvas-wrap {
  min-height: 0;
  min-width: 0;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.2), transparent 62%),
    rgba(2, 6, 14, 0.35);
}

.pml__canvas {
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.pml__canvas.is-dragging,
.pml__canvas:active {
  cursor: grabbing;
}

.pml__canvas.is-settle [data-mundo] {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pml__canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ——— Atlas categories ——— */

.pml-cat__fill {
  stroke: transparent;
  stroke-width: 2;
  transition: fill 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.pml-cat:hover .pml-cat__fill,
.pml-cat.is-match .pml-cat__fill {
  filter: brightness(1.25);
}

.pml-cat.is-ready .pml-cat__arc {
  filter: drop-shadow(0 0 10px var(--pml-node, #fbbf24));
}

.pml-cat.is-dim {
  opacity: 0.22;
}

.pml-cat__arc {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0.9;
}

.pml-cat__label,
.pml-cat__prog {
  font: 800 14px/1 "Syne", system-ui, sans-serif;
  letter-spacing: 0.14em;
  pointer-events: none;
}

.pml-cat__prog {
  fill: #cbd5e1;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.06em;
}

.pml-hub__disk {
  fill: rgba(15, 23, 42, 0.95);
  stroke: color-mix(in srgb, var(--pml-sector, #fbbf24) 70%, #94a3b8);
  stroke-width: 2.5;
}

.pml-hub__label {
  fill: #fde68a;
  font: 800 9px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.pml-edge {
  fill: none;
  stroke: rgba(148, 163, 184, 0.38);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 120ms ease, opacity 120ms ease;
}

.pml-edge--atlas {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1.15;
}

.pml-edge.is-path {
  stroke: rgba(251, 191, 36, 0.75);
  stroke-width: 2;
}

.pml-edge.is-dim {
  opacity: 0.18;
}

/* ——— Sector schools ——— */

.pml-family__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
}

.pml-family:hover .pml-family__hit,
.pml-family.is-match .pml-family__hit {
  fill: color-mix(in srgb, var(--pml-node, #94a3b8) 22%, transparent);
  stroke: color-mix(in srgb, var(--pml-node, #94a3b8) 70%, white);
}

.pml-family__ring {
  fill: none;
  stroke: color-mix(in srgb, var(--pml-node, #94a3b8) 55%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: center;
  pointer-events: none;
  transition: stroke-dashoffset 200ms ease;
}

.pml-family__dot {
  fill: var(--pml-node, #94a3b8);
  stroke: rgba(8, 12, 20, 0.9);
  stroke-width: 2.5;
  pointer-events: none;
  transition: filter 120ms ease;
}

.pml-family.is-ready .pml-family__dot {
  filter: drop-shadow(0 0 10px var(--pml-node, #fbbf24));
}

.pml-family:hover .pml-family__dot,
.pml-family.is-match .pml-family__dot {
  filter: drop-shadow(0 0 12px var(--pml-node, #94a3b8));
}

.pml-family__label {
  fill: #e2e8f0;
  font: 700 12px/1.15 "Figtree", system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(6, 10, 18, 0.92);
  stroke-width: 3.5px;
  pointer-events: none;
}

.pml-family__prog {
  fill: #0f172a;
  font: 800 8px/1 "Figtree", system-ui, sans-serif;
  pointer-events: none;
}

.pml-family.is-dim {
  opacity: 0.22;
}

.pml-tree-ring {
  fill: none;
  stroke-width: 1.25;
  stroke-dasharray: 3 7;
  opacity: 0.28;
  pointer-events: none;
}

/* ——— Move nodes ——— */

.pml-no__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
}

.pml-no:hover .pml-no__hit,
.pml-no.is-sel .pml-no__hit {
  fill: color-mix(in srgb, var(--pml-node, #94a3b8) 28%, transparent);
  stroke: #f8fafc;
}

.pml-no__dot {
  fill: rgba(15, 23, 42, 0.9);
  stroke: var(--pml-node, #94a3b8);
  stroke-width: 2.2;
  pointer-events: none;
  transition: fill 120ms ease, stroke 120ms ease, filter 120ms ease;
}

.pml-no.is-known .pml-no__dot {
  fill: var(--pml-node, #34d399);
  stroke: #ecfdf5;
}

.pml-no.is-ready .pml-no__dot {
  fill: #fbbf24;
  stroke: #fff7ed;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.75));
}

.pml-no.is-frontier .pml-no__dot {
  fill: rgba(15, 23, 42, 0.85);
  stroke: #38bdf8;
}

.pml-no.is-locked .pml-no__dot {
  fill: rgba(15, 23, 42, 0.55);
  stroke: #475569;
  stroke-dasharray: 3 2;
}

.pml-no.is-sel .pml-no__dot {
  stroke: #f8fafc;
  stroke-width: 3;
  filter: drop-shadow(0 0 12px var(--pml-node, #fbbf24));
}

.pml-no.is-path .pml-no__dot {
  stroke: #fde68a;
}

.pml-no.is-dim {
  opacity: 0.18;
}

.pml-no__icon {
  pointer-events: none;
  opacity: 0.95;
}

.pml-no.is-locked .pml-no__icon {
  opacity: 0.35;
}

.pml-no__label {
  fill: #e2e8f0;
  font: 700 11px/1.15 "Figtree", system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(6, 10, 18, 0.92);
  stroke-width: 3.5px;
  pointer-events: none;
}

.pml-no.is-locked .pml-no__label {
  fill: #94a3b8;
}

/* ——— Detail panel ——— */

.pml__detail {
  overflow: auto;
  min-height: 0;
  padding: 16px;
  border-left: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 14, 0.42);
}

.pml__empty {
  margin: 8px 0 14px;
  color: #94a3b8;
}

.pml-detail__sectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pml-detail-sector {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pml-sector, #94a3b8) 40%, transparent);
  background: color-mix(in srgb, var(--pml-sector, #94a3b8) 10%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pml-detail-sector:hover {
  background: color-mix(in srgb, var(--pml-sector, #94a3b8) 18%, transparent);
}

.pml-detail-sector strong {
  font: 800 13px/1.2 "Syne", system-ui, sans-serif;
  color: var(--pml-sector, #e2e8f0);
}

.pml-detail-sector span {
  color: #94a3b8;
  font-size: 12px;
}

.pml-detail-sector__prog {
  margin-top: 4px;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  color: #cbd5e1;
  font-style: normal;
}

.pml-school-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pml-school-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pml-school-row.is-ready {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: inset 3px 0 0 #fbbf24;
}

.pml-school-row:hover {
  border-color: color-mix(in srgb, var(--pml-node, #94a3b8) 50%, transparent);
}

.pml-school-row__name {
  font: 700 13px/1.2 "Figtree", system-ui, sans-serif;
}

.pml-school-row__prog {
  color: #94a3b8;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
}

.pml-detail__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.pml-detail__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid color-mix(in srgb, var(--pml-type, #94a3b8) 45%, transparent);
}

.pml-detail__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pml-detail__icon--empty {
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.08), transparent 55%),
    rgba(15, 23, 42, 0.45);
  border-style: dashed;
}

.pml-detail__badge {
  margin: 0 0 4px;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font: 800 10px/1 "Figtree", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(100, 116, 139, 0.25);
  color: #94a3b8;
}

.pml-detail__badge.is-known {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.pml-detail__badge.is-ready {
  background: rgba(251, 191, 36, 0.2);
  color: #fde68a;
}

.pml-detail__badge.is-frontier {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}

.pml-detail__name {
  margin: 0;
  font: 800 18px/1.2 "Syne", system-ui, sans-serif;
}

.pml-detail__meta {
  margin: 4px 0 0;
  color: #94a3b8;
}

.pml-detail__reqs h4,
.pml-detail__sub {
  margin: 14px 0 8px;
  font: 800 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.pml-req {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0;
}

.pml-req.is-ok {
  color: #6ee7b7;
}

.pml-req.is-no {
  color: #cbd5e1;
}

.pml-detail__or {
  margin: 8px 0;
  color: #64748b;
  font-size: 12px;
}

.pml-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pml-chip-link {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  cursor: pointer;
}

.pml-chip-link.is-ok {
  border-color: rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
}

.pml-detail__tip {
  margin: 0 0 10px;
  color: #94a3b8;
}

.pml-detail__actions {
  margin-top: 14px;
}

.pml__btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: #e2e8f0;
  font: 700 13px/1 "Figtree", system-ui, sans-serif;
  cursor: pointer;
}

.pml__btn--ghost {
  padding: 7px 12px;
  font-size: 11px;
}

.pml__btn--primary {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
}

@media (max-width: 900px) {
  .pml__legend {
    display: none;
  }

  .pml__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1fr) minmax(200px, 0.85fr);
  }

  .pml__detail {
    border-left: none;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }
}