/* Page four */

.sheet-four {
  padding: 24px 25px 19px;
}

.progression-scroll {
  width: 100%;
  overflow: visible;
}

.progression-tree {
  position: relative;
  width: 743px;
  height: 1055px;
  margin: 0 auto;
  background: var(--paper);
}

.tree-logo {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.tree-lines {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 743px;
  height: 1055px;
  overflow: visible;
}

.column-lines line {
  stroke: var(--skill-guide);
  stroke-width: 1;
}

.skill-link {
  cursor: pointer;

  .skill-link-hit,
  .skill-link-line {
    fill: none;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  .skill-link-hit {
    stroke: transparent;
    stroke-width: 30;
    pointer-events: stroke;
  }

  .skill-link-line {
    stroke: var(--skill-locked);
    stroke-width: 18;
    transition: stroke 120ms ease;
    pointer-events: none;
  }

  &[data-skill-state="available"] .skill-link-line {
    stroke: var(--skill-available);
  }

  &[data-skill-state="active"] .skill-link-line {
    stroke: var(--skill-active);
  }

  &[aria-disabled="true"] {
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: none;

    .skill-link-line {
      stroke: var(--focus-ring);
    }
  }
}

.tier-label {
  position: absolute;
  z-index: 2;
  font-family: Arial, sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.tier-starting {
  top: 15px;
  left: 278px;
}

.tier-intermediate {
  top: 14px;
  left: 443px;
}

.tier-advanced {
  top: 15px;
  left: 600px;
}

.tier-final {
  top: 510px;
  left: 706px;
  writing-mode: horizontal-tb;
  transform: none;
}

.tree-node {
  --skill-state-color: var(--skill-locked);

  position: absolute;
  z-index: 4;
  display: block;
  width: 140px;
  margin: 0;
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.125rem;
  text-align: center;

  &[data-skill-state="available"] {
    --skill-state-color: var(--skill-available);
  }

  &[data-skill-state="active"] {
    --skill-state-color: var(--skill-active);
  }

  textarea[data-skill-detail],
  select[data-skill-detail],
  &.compact-node > select {
    display: block;
    width: 100%;
    border: 4px solid var(--skill-state-color);
    background-color: var(--paper);
    font-family: var(--body-font);
    font-size: 1rem;
    text-align: center;
    transition: border-color 120ms ease;
  }

  textarea[data-skill-detail]:read-only {
    color: var(--locked-text);
    background-color: var(--read-only-surface);
    opacity: 1;
    cursor: text;
  }

  [data-skill-detail]:disabled {
    color: var(--disabled-text);
    background-color: var(--disabled-surface);
    opacity: 1;
  }

  .skill-node-toggle {
    position: absolute;
    z-index: 2;
    top: -18px;
    right: 0;
    display: block;
    cursor: pointer;

    input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      border: 0;
      opacity: 0;

      &:focus-visible {
        outline: 0;
      }

      &:focus-visible + .skill-node-state {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
      }
    }
  }

  .skill-node-state {
    display: block;
    min-width: 52px;
    min-height: 20px;
    padding: 1px 5px;
    border: 2px solid var(--skill-state-color);
    color: var(--muted-text);
    background: var(--paper);
    font-family: Arial, sans-serif;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
  }

  &[data-skill-state="active"] .skill-node-state {
    color: var(--inverse-text);
    background: var(--skill-active);
  }

  &[data-skill-state="locked"] .skill-node-toggle {
    cursor: not-allowed;
  }

  .skill-node-badge,
  &[data-skill-state="locked"] .skill-node-badge {
    cursor: default;
  }
}

.skill-node-story {
  height: 56px;
  padding: 3px 7px 0;
  overflow-y: auto;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 22px,
    var(--skill-active) 22px,
    var(--skill-active) 24px
  );
  line-height: 24px;
  resize: none;
}

.compact-node {
  > select {
    height: 40px;
    padding: 3px 6px;
    line-height: 26px;
  }

  > select + .skill-node-story {
    border-top-width: 0;
  }
}

.node-caption {
  display: block;
  margin-top: 7px;
  text-align: center;
}

.root-node {
  width: 128px;

  .root-title {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0.05em 0 0 0.5em;
    color: var(--inverse-text);
    background: var(--skill-state-color);
    font-family: var(--section-font);
    font-size: 1.6875rem;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    transition: background 120ms ease;
  }

  &[data-skill-state="locked"] .root-title {
    color: var(--locked-text);
  }

  textarea[data-skill-detail] {
    padding: 2px 7px;
    overflow-y: auto;
    border-width: 0 4px 4px;
  }

  .node-caption {
    margin-top: 12px;
  }
}

.cape-root {
  top: 265px;
  left: 0;
}

.cape-ability-starting {
  top: 184px;
  left: 146px;
}

.cape-ability-intermediate-one {
  top: 112px;
  left: 303px;
}

.cape-ability-intermediate-two {
  top: 235px;
  left: 303px;
}

.cape-ability-advanced {
  top: 278px;
  left: 464px;
}

.cape-final {
  top: 528px;
  left: 618px;
}

.cape-stat-two {
  top: 375px;
  left: 146px;
}

.cape-stat-three {
  top: 394px;
  left: 303px;
}

.cape-all-stats {
  top: 455px;
  left: 464px;
}

.cape-power-die {
  top: 558px;
  left: 303px;
}

.power-root {
  top: 732px;
  left: 0;
}

.power-die-six {
  top: 644px;
  left: 146px;
}

.power-die-eight {
  top: 690px;
  left: 303px;
}

.power-die-ten {
  top: 716px;
  left: 464px;
}

.power-use-starting {
  top: 860px;
  left: 146px;
}

.power-use-intermediate {
  top: 818px;
  left: 303px;
}

.team-tactic-intermediate {
  top: 955px;
  left: 303px;
}

.team-tactic-advanced {
  top: 926px;
  left: 464px;
}

@media (max-width: 830px) {
  .sheet-four {
    padding: 1.5rem;
  }

  .progression-tree {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .tree-logo {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .tree-lines {
    display: none;
  }

  .tier-label {
    position: static;
    z-index: auto;
    grid-column: 1 / -1;
    padding: 0.375rem;
    border: 1px solid var(--border);
    background: var(--subtle-surface);
    font-size: 0.75rem;
    text-align: center;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .tier-starting {
    order: 10;
  }

  .tree-node[data-tier="Starting"] {
    order: 11;
  }

  .tier-intermediate {
    order: 20;
  }

  .tree-node[data-tier="Intermediate"] {
    order: 21;
  }

  .tier-advanced {
    order: 30;
  }

  .tree-node[data-tier="Advanced"] {
    order: 31;
  }

  .tier-final {
    order: 40;
  }

  .tree-node[data-tier="Final"] {
    order: 41;
  }

  .tree-node,
  .root-node {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .tree-node::before {
    display: block;
    margin-bottom: 0.3125rem;
    color: var(--muted-text);
    font-family: Arial, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    content: attr(data-track) " · " attr(data-tier);
  }

  .tree-node [data-skill-detail] {
    min-width: 0;
    max-width: 100%;
  }

  .tree-node .skill-node-toggle {
    top: -10px;
    right: -2px;
  }
}

@media (max-width: 760px) {
  .sheet-four {
    padding: 1rem;
  }
}

@media (max-width: 430px) {
  .progression-tree {
    grid-template-columns: minmax(0, 1fr);
  }
}